:root{
  color-scheme:dark;
  --red:#c60d18;
  --red-light:#ff3945;
  --white:#fff;
  --muted:#aaa;
  --panel:rgba(17,17,17,.82);
  --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#030303}
body{min-width:320px;margin:0;overflow-x:hidden;background:radial-gradient(circle at 50% 0,#210205 0,#080808 34rem,#030303 70rem);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.page-glow{position:fixed;z-index:-2;width:38rem;height:38rem;border-radius:50%;filter:blur(80px);opacity:.18;pointer-events:none}
.page-glow-one{top:-18rem;left:-14rem;background:#e20b18}
.page-glow-two{right:-18rem;top:28rem;background:#80000a}
.grain{position:fixed;inset:0;z-index:-1;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.games-header{position:relative;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1440px;margin:auto;padding:22px clamp(18px,4vw,56px)}
.back-link,.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.back-link{justify-self:start;padding:10px 14px;border:1px solid var(--border);border-radius:999px;color:#ddd;background:rgba(0,0,0,.35);font-size:.9rem;transition:border-color .2s,transform .2s}
.back-link:hover{border-color:rgba(255,255,255,.35);transform:translateX(-2px)}
.brand{justify-self:center;font-weight:900;letter-spacing:-.03em}
.brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 24px rgba(198,13,24,.32)}
.game-count{justify-self:end;color:#bbb;font-size:.88rem}.game-count strong{color:#fff}
.games-hero{display:flex;min-height:clamp(460px,68vh,720px);flex-direction:column;align-items:center;justify-content:center;padding:80px 24px 100px;text-align:center}
.eyebrow{margin:0 0 12px;color:var(--red-light);font-size:.74rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.games-hero h1{margin:0;font-size:clamp(4.6rem,15vw,12rem);line-height:.76;letter-spacing:-.09em;text-transform:uppercase;text-shadow:0 18px 60px rgba(0,0,0,.55)}
.hero-text{max-width:660px;margin:34px auto 0;color:#b6b6b6;font-size:clamp(1rem,2vw,1.18rem);line-height:1.7}
.hero-action{display:inline-flex;align-items:center;gap:10px;margin-top:34px;padding:14px 20px;border-radius:999px;background:#fff;color:#050505;font-weight:900;text-decoration:none;transition:transform .2s,box-shadow .2s}
.hero-action:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,255,255,.14)}
.games-section{max-width:1280px;margin:0 auto;padding:80px clamp(18px,4vw,56px) 120px;scroll-margin-top:20px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:36px}
.section-heading h2{margin:0;font-size:clamp(2.5rem,6vw,5.4rem);line-height:.9;letter-spacing:-.065em}
.section-heading>p{max-width:410px;margin:0;color:#888;line-height:1.6;text-align:right}
.games-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.game-card{position:relative;min-height:500px;overflow:hidden;border:1px solid var(--border);border-radius:30px;background:var(--panel);box-shadow:0 24px 70px rgba(0,0,0,.34)}
.game-card-active{display:grid;grid-template-rows:minmax(250px,.95fr) minmax(250px,1.05fr);text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s}
.game-card-active:hover{transform:translateY(-5px);border-color:rgba(255,57,69,.55);box-shadow:0 32px 90px rgba(0,0,0,.48)}
.game-card-featured{grid-column:1/-1;grid-template-columns:minmax(270px,.85fr) minmax(320px,1.15fr);grid-template-rows:none;min-height:530px}
.card-visual{position:relative;display:flex;min-height:100%;align-items:flex-end;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(231,20,33,.32),transparent 36%),linear-gradient(145deg,#120305,#050505)}
.card-visual:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}
.matheo-card-image{position:relative;z-index:2;width:min(96%,360px);height:92%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 28px 24px rgba(0,0,0,.7));transition:transform .3s}
.game-card-active:hover .matheo-card-image{transform:scale(1.035) rotate(-1deg)}
.visual-ring{position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%}
.visual-ring-one{width:340px;height:340px}.visual-ring-two{width:480px;height:480px}
.play-icon{position:absolute;right:22px;bottom:22px;z-index:5;display:grid;width:58px;height:58px;place-items:center;border-radius:50%;background:#fff;color:#000;font-size:1rem;box-shadow:0 12px 35px rgba(0,0,0,.35)}
.card-content{display:flex;min-width:0;flex-direction:column;padding:clamp(28px,4vw,48px)}
.card-topline{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:auto}
.status-badge{display:inline-flex;align-items:center;gap:8px;color:#ffadb2;font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.status-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-light);box-shadow:0 0 15px var(--red-light)}
.status-badge.coming{color:#999}.status-badge.coming:before{background:#666;box-shadow:none}
.game-number{color:#777;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.card-content>strong{display:block;margin-top:36px;font-size:clamp(2.25rem,4.5vw,4.4rem);line-height:.9;letter-spacing:-.065em}
.compact-card .card-content>strong{font-size:clamp(2rem,3.7vw,3.5rem)}
.game-description{max-width:520px;margin-top:20px;color:#aaa;font-size:1rem;line-height:1.62}
.game-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.game-stats>span{padding:10px 13px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035);color:#888;font-size:.79rem;text-transform:uppercase;letter-spacing:.08em}
.game-stats b{color:#fff;font-size:.92rem}
.launch-game{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:30px;border-top:1px solid rgba(255,255,255,.1);font-weight:900}
.launch-game span{font-size:1.4rem;transition:transform .2s}.game-card-active:hover .launch-game span{transform:translateX(5px)}

.snake-visual{align-items:center;background:radial-gradient(circle at 62% 35%,rgba(255,38,52,.24),transparent 38%),#080808}
.snake-grid{position:absolute;inset:0;opacity:.17;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:32px 32px}
.snake-preview{position:absolute;z-index:2;width:76px;height:76px;border-radius:22px;background:linear-gradient(145deg,#ed1c2b,#890711);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.snake-preview-one{left:29%;top:42%;overflow:hidden;border:3px solid #fff;transform:rotate(-4deg)}
.snake-preview-one img{width:100%;height:118%;object-fit:contain;object-position:center top;filter:drop-shadow(0 8px 7px #000)}
.snake-preview-two{left:43%;top:45%}.snake-preview-three{left:57%;top:48%}
.snake-food{position:absolute;z-index:2;right:19%;top:24%;display:grid;width:58px;height:58px;place-items:center;border:3px solid rgba(255,255,255,.9);border-radius:50%;overflow:hidden;box-shadow:0 0 35px rgba(255,57,69,.55)}
.snake-food img{width:100%;height:100%;object-fit:cover}
.family-visual{align-items:stretch;background:#090909}
.family-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s,filter .35s}
.family-visual:after{height:62%;background:linear-gradient(transparent,rgba(0,0,0,.86))}
.game-card-active:hover .family-visual>img{transform:scale(1.035);filter:saturate(1.08)}
.memory-card-back{position:absolute;z-index:3;display:grid;width:92px;aspect-ratio:3/4;place-items:center;border:2px solid rgba(255,255,255,.7);border-radius:15px;background:linear-gradient(145deg,#a90914,#310307);box-shadow:0 16px 36px rgba(0,0,0,.45)}
.memory-card-back img{width:55px;height:55px;border-radius:50%;object-fit:cover}
.memory-back-one{left:10%;bottom:14%;transform:rotate(-9deg)}
.memory-back-two{right:10%;top:12%;transform:rotate(8deg)}
.game-card-coming{display:flex;min-height:500px;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border-style:dashed;box-shadow:none}
.coming-symbol{display:grid;width:82px;height:82px;margin:44px 44px 0;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:24px;color:#777;font-size:3rem;font-weight:200}
.game-card-coming .card-content{padding-top:30px}.game-card-coming .card-content>strong{margin-top:34px;font-size:clamp(2rem,3.6vw,3.4rem);color:#ddd}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1280px;margin:auto;padding:30px clamp(18px,4vw,56px) 44px;border-top:1px solid rgba(255,255,255,.08);color:#777;font-size:.85rem}
footer a{color:#bbb;text-decoration:none}footer a:hover{color:#fff}
@media(max-width:920px){
  .games-header{grid-template-columns:1fr auto}.brand{display:none}.game-count{justify-self:end}
  .game-card-featured{grid-template-columns:minmax(230px,.8fr) minmax(280px,1.2fr)}
  .games-grid{grid-template-columns:1fr}.game-card-featured{grid-column:auto}
}
@media(max-width:680px){
  .games-header{padding-top:15px}.back-link{padding:9px 12px}.game-count{font-size:.75rem}
  .games-hero{min-height:560px;padding-top:50px}.games-hero h1{font-size:clamp(4rem,22vw,7rem)}
  .section-heading{display:block}.section-heading>p{margin-top:16px;text-align:left}.games-section{padding-top:54px}
  .game-card{min-height:0;border-radius:24px}.game-card-active,.game-card-featured{display:flex;flex-direction:column}
  .card-visual{min-height:320px}.matheo-card-image{height:315px}.card-content{min-height:360px;padding:28px}
  .card-content>strong{margin-top:34px}.game-card-coming{min-height:350px}.coming-symbol{margin:28px 28px 0}
  .game-card-coming .card-content{min-height:auto}.play-icon{width:52px;height:52px}.visual-ring-one{width:280px;height:280px}.visual-ring-two{width:400px;height:400px}
  footer{align-items:flex-start;flex-direction:column}
}
@media(max-width:420px){
  .games-hero{padding-left:18px;padding-right:18px}.hero-text{font-size:.96rem}.card-visual{min-height:290px}.matheo-card-image{height:290px}
  .card-content{min-height:345px}.game-stats{display:grid;grid-template-columns:1fr 1fr}.game-stats>span{text-align:center}
  .snake-preview{width:62px;height:62px;border-radius:17px}.snake-food{width:50px;height:50px}.memory-card-back{width:74px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.game-card-active,.matheo-card-image,.family-visual>img,.hero-action,.back-link,.launch-game span{transition:none}}

.game-record-summary>span{min-width:0}.game-record-summary b{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}
.difficulty-records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:24px}
.difficulty-records>span{display:grid;min-width:0;padding:11px 12px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.035)}
.difficulty-records small{color:#777;font-size:.67rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.difficulty-records b{margin-top:3px;color:#fff;font-size:1rem}
.difficulty-records em{overflow:hidden;margin-top:2px;color:#999;font-size:.75rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.difficulty-records{grid-template-columns:1fr 1fr}.difficulty-records>span{padding:10px}.game-record-summary b{max-width:110px}}

.mine-visual{align-items:center;background:radial-gradient(circle at 50% 45%,rgba(255,38,52,.2),transparent 44%),#080808}
.mine-preview-grid{position:relative;z-index:2;display:grid;width:min(72%,250px);grid-template-columns:repeat(4,1fr);gap:7px;transform:rotate(-3deg);filter:drop-shadow(0 22px 30px rgba(0,0,0,.5))}
.mine-preview-grid i{display:grid;aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:linear-gradient(145deg,#2c2c2c,#111);color:#fff;font-style:normal;font-weight:950;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.mine-preview-grid .is-open{background:#0c0c0c;color:#777}.mine-preview-grid .number-one{color:#65a9ff}.mine-preview-grid .number-two{color:#60d78a}.mine-preview-grid .is-flag{background:#650710;color:#fff}.mine-preview-grid .is-mine{background:#fff;color:#b40c17}
@media(max-width:420px){.mine-preview-grid{width:min(74%,220px);gap:6px}.mine-preview-grid i{border-radius:7px}}

.arcade-visual{align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(255,34,49,.24),transparent 46%),#080808}.arcade-matheo{position:absolute;bottom:0;width:min(68%,250px);height:92%;object-fit:contain;filter:drop-shadow(0 22px 20px rgba(0,0,0,.65))}.arcade-burst{position:absolute;right:19%;top:18%;z-index:3;padding:10px 13px;border-radius:50%;background:#fff;color:#111;font-size:1.15rem;font-weight:950;transform:rotate(8deg)}
.mini-simon{position:relative;display:grid;width:min(68%,230px);aspect-ratio:1;grid-template-columns:1fr 1fr;gap:8px;transform:rotate(-3deg)}.mini-simon i{border-radius:18px;background:#b31220}.mini-simon i:nth-child(2){background:#174db4}.mini-simon i:nth-child(3){background:#13814a}.mini-simon i:nth-child(4){background:#c1940b}.mini-simon img{position:absolute;left:50%;top:50%;width:32%;aspect-ratio:1;transform:translate(-50%,-50%);border:7px solid #080808;border-radius:50%;object-fit:cover}
.emoji-visual{display:flex;gap:8px;font-size:clamp(3.2rem,8vw,5.3rem)}.emoji-visual>span:not(.play-icon){filter:drop-shadow(0 14px 16px rgba(0,0,0,.45));transform:rotate(-8deg)}.emoji-visual>span:nth-child(2){transform:translateY(-20px) rotate(4deg)}.emoji-visual>span:nth-child(3){transform:rotate(9deg)}
.number-visual{flex-direction:column}.mystery-number{display:grid;width:150px;aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:linear-gradient(145deg,#9d0713,#300306);font-size:6rem;font-weight:950;box-shadow:0 20px 45px rgba(0,0,0,.45)}.number-arrow{margin-top:14px;color:#aaa;font-size:2rem;font-weight:950;letter-spacing:.3em}
.puzzle-preview{display:grid;width:min(70%,240px);aspect-ratio:1;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border-radius:18px;background:#020202;transform:rotate(3deg)}.puzzle-preview i{border:1px solid rgba(255,255,255,.16);border-radius:7px;background-image:url('familles-cover.webp');background-size:300% 300%;background-position:center}.puzzle-preview i:nth-child(1){background-position:0 0}.puzzle-preview i:nth-child(2){background-position:50% 0}.puzzle-preview i:nth-child(3){background-position:100% 0}.puzzle-preview i:nth-child(4){background-position:0 50%}.puzzle-preview i:nth-child(5){background-position:50% 50%}.puzzle-preview i:nth-child(6){background-position:100% 50%}.puzzle-preview i:nth-child(7){background-position:0 100%}.puzzle-preview i:nth-child(8){background-position:50% 100%}.puzzle-preview .blank{background:rgba(255,255,255,.03)}
.catch-visual>img{width:145px;height:145px;border:4px solid rgba(255,255,255,.24);border-radius:50%;object-fit:cover;box-shadow:0 25px 40px rgba(0,0,0,.5);transform:translate(-20px,-18px) rotate(-8deg)}.catch-bomb{position:absolute;right:21%;bottom:20%;font-size:4.2rem;transform:rotate(13deg)}
.mini-morpion{display:grid;width:min(70%,240px);aspect-ratio:1;grid-template-columns:repeat(3,1fr);gap:7px}.mini-morpion i{display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:linear-gradient(145deg,#222,#0d0d0d);color:#fff;font-size:2rem;font-style:normal;font-weight:950}.mini-morpion img{width:62%;aspect-ratio:1;border-radius:50%;object-fit:cover}
@media(max-width:420px){.mystery-number{width:125px;font-size:5rem}.catch-visual>img{width:120px;height:120px}.catch-bomb{font-size:3.5rem}.arcade-matheo{width:min(72%,220px)}}