:root{
  --bg:#0f1226;
  --bg2:#171b3a;
  --card:#1c2140;
  --text:#ffffff;
  --muted:#9fa4c9;
  --accent1:#ff6b6b;
  --accent2:#ffd93d;
  --accent3:#6bc8ef;
  --accent4:#7CFC9C;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,Arial,sans-serif;}
a{color:inherit;text-decoration:none}
img,canvas{max-width:100%}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(180deg,var(--bg2),transparent);
  position:sticky;top:0;z-index:5;
}
.logo{font-size:1.4rem;font-weight:800;display:flex;align-items:center;gap:8px}
.logo .g{background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-icon{width:32px;height:32px}

/* --- Bannière animée d'accueil : silhouettes vectorielles qui roulent en boucle,
   nuages qui dérivent — CSS pur, aucune image ni émoticône. --- */
.hero{ position:relative; overflow:hidden; padding:0; }
.hero-scene{
  position:relative; height:230px; overflow:hidden;
  background:linear-gradient(180deg,#3a6fd8 0%, #7fb8e8 55%, #cfeaff 100%);
}
.hero-ground{ position:absolute; left:0; right:0; bottom:0; height:34px; background:#3a2a1a; }
.hero-ground::before{
  content:""; position:absolute; top:6px; left:0; right:0; height:3px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 22px, transparent 22px 40px);
}
.hero-sun{ position:absolute; top:10%; right:8%; width:64px; opacity:.9; }
.hero-sun img{width:100%;display:block}
.hc{ position:absolute; left:-140px; animation-name:drift; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(calc(100vw + 200px)); } }
.hv{ position:absolute; left:-90px; animation-name:drive; animation-timing-function:linear; animation-iteration-count:infinite; filter:drop-shadow(0 4px 3px rgba(0,0,0,.25)); }
@keyframes drive{ from{ transform:translateX(0) scaleX(-1); } to{ transform:translateX(calc(100vw + 120px)) scaleX(-1); } }
.hero-text{ position:relative; text-align:center; padding:1.6rem 1rem 1.2rem; }
.hero-text h1{font-size:2rem;margin:.2rem 0;}
.hero-text p{color:var(--muted);max-width:560px;margin:0 auto;font-size:1.05rem}
@media(prefers-reduced-motion: reduce){ .hc,.hv{ animation:none; } }

.container{max-width:1100px;margin:0 auto;padding:0 16px 40px}

.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0;
}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1080px){.grid{grid-template-columns:repeat(5,1fr)}}

.tile{
  background:linear-gradient(160deg,var(--card),var(--bg2));
  border-radius:var(--radius);
  padding:16px 10px;
  text-align:center;
  border:1px solid rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.tile:active{transform:scale(.96)}
@media(hover:hover){
  .tile:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
}
.tile-icon{width:56px;height:56px}
.tile .name{font-weight:700;font-size:.95rem}
.tile .tag{font-size:.72rem;color:var(--muted)}

.section-title{margin:26px 4px 6px;font-size:1.1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* --- Ad slots --- */
.ad-slot{
  margin:22px auto;max-width:728px;min-height:90px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.15);
  border-radius:12px;color:var(--muted);font-size:.8rem;overflow:hidden;
}
.ad-slot span{opacity:.6}

/* --- Game page --- */
.game-page{max-width:520px;margin:0 auto;padding:0 12px 30px}
.game-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 2px}
.btn-back{background:var(--card);padding:8px 12px;border-radius:999px;font-size:.85rem;font-weight:600}
.game-title{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.title-icon{width:28px;height:28px}
.btn-icon{background:var(--card);border:none;color:var(--text);width:38px;height:38px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}

.score-row{display:flex;justify-content:space-between;padding:0 6px 10px;font-size:.95rem;color:var(--muted)}
.score-row b{color:var(--text);font-size:1.1rem}

.canvas-holder{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;background:#000;touch-action:none;user-select:none;}
.canvas-holder canvas{display:block;width:100%;height:auto;}

.overlay{
  position:absolute;inset:0;background:rgba(10,12,30,.82);
  display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;
}
.overlay.hidden{display:none}
.overlay-icon{width:64px;height:64px;margin-bottom:6px}
.overlay-card h2{margin:0 0 8px;font-size:1.5rem}
.overlay-card p{color:var(--muted);margin:0 0 16px;font-size:.95rem}
.btn-play{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;color:#1a1a1a;font-weight:800;font-size:1.05rem;
  padding:12px 28px;border-radius:999px;cursor:pointer;
}
.btn-play:active{transform:scale(.96)}
.record-badge{display:inline-block;margin-top:10px;background:var(--accent2);color:#1a1a1a;font-weight:800;padding:4px 12px;border-radius:999px;font-size:.8rem}

.controls-hint{text-align:center;color:var(--muted);font-size:.8rem;margin-top:10px}

.rules-card{
  background:var(--card);border-radius:var(--radius);padding:14px 18px;margin-top:14px;
  border:1px solid rgba(255,255,255,.06);
}
.rules-card h3{margin:0 0 8px;font-size:1rem}
.rules-card p{margin:4px 0;font-size:.9rem;color:#d7d9ee}
.rules-card b{color:var(--accent2)}

.lang-switch{display:flex;gap:6px}
.lang-switch button{
  background:var(--card);border:1px solid rgba(255,255,255,.1);color:var(--muted);
  font-size:.78rem;font-weight:700;padding:6px 10px;border-radius:999px;cursor:pointer;
}
.lang-switch button.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#1a1a1a;border-color:transparent}

footer{text-align:center;color:var(--muted);font-size:.8rem;padding:24px 16px;opacity:.85}
footer p{margin:4px 0}
footer .footer-links a{color:var(--accent3);text-decoration:underline}

.legal-page{max-width:720px;margin:0 auto;padding:20px 18px 40px}
.legal-page h1{font-size:1.5rem}
.legal-page h2{font-size:1.1rem;margin-top:1.6em;color:var(--accent2)}
.legal-page p,.legal-page li{color:#d7d9ee;line-height:1.6;font-size:.95rem}
.legal-page a{color:var(--accent3);text-decoration:underline}