/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:       #041016;
  --surface:  #0a1e2b;
  --surface2: #0f2c3d;
  --accent:   #06b6d4;
  --accent-h: #22d3ee;
  --accent2:  #67e8f9;
  --red:      #f87171;
  --green:    #34d399;
  --text:     #e6f6fb;
  --muted:    #6b93a5;
  --r:        .9rem;
  --h-header: 50px;
}

html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:'Segoe UI',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
  overscroll-behavior:none}

#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

/* Fond dégradé + halo */
body{
  background:
    radial-gradient(ellipse at 50% -10%, #06b6d422, transparent 55%),
    radial-gradient(ellipse at 90% 110%, #0ea5e918, transparent 50%),
    var(--bg);
}

/* ── App shell ──────────────────────────────────────────── */
.app-shell{
  height:100dvh;display:grid;grid-template-rows:var(--h-header) 1fr;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}

/* ── Header ─────────────────────────────────────────────── */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;background:rgba(10,30,43,0.85);backdrop-filter:blur(8px);
  border-bottom:1px solid #06b6d433;
}
.nav-back{color:var(--accent2);text-decoration:none;font-size:.8rem;font-weight:700}
.nav-back:hover{color:#fff}
.header-center{font-size:1rem;font-weight:900;letter-spacing:.5px}
.score-chip{
  background:var(--accent);color:#041016;border-radius:2rem;
  padding:.2rem .8rem;font-size:.82rem;font-weight:900;
  box-shadow:0 0 16px #06b6d455;
}

/* ── Main / screens ─────────────────────────────────────── */
.app-main{overflow:hidden;position:relative}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow-y:auto;overflow-x:hidden;padding:1.1rem;gap:1rem;text-align:center;
}

/* ════════════════════════════════════════════════════════ */
/* ÉCRAN FLUX                                                 */
/* ════════════════════════════════════════════════════════ */
.stream-head{max-width:460px}
.stream-title{
  font-size:1.5rem;font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stream-sub{color:var(--muted);font-size:.9rem;margin-top:.4rem;line-height:1.5}

.stream-current-wrap{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  margin:.5rem 0;
}
.stream-index{color:var(--accent2);font-size:.8rem;font-weight:700;letter-spacing:.5px}
.stream-current{
  font-size:clamp(4rem,22vw,8rem);font-weight:900;line-height:1;
  color:#fff;text-shadow:0 0 40px #06b6d488;
  font-variant-numeric:tabular-nums;
}
.stream-hint{
  color:var(--green);font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
}

/* Ruban des derniers premiers */
.stream-ribbon{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  max-width:520px;min-height:2.2rem;
}
.ribbon-chip{
  background:var(--surface2);border:1px solid #06b6d433;color:var(--accent2);
  border-radius:.6rem;padding:.25rem .6rem;font-size:.85rem;font-weight:700;
  font-variant-numeric:tabular-nums;
  animation:chip-in .35s ease both;
}
@keyframes chip-in{
  from{opacity:0;transform:translateY(-8px) scale(.8)}
  to  {opacity:1;transform:none}
}

.stream-controls{display:flex;gap:.5rem}
.stream-controls .btn-ghost{min-width:70px}

/* ════════════════════════════════════════════════════════ */
/* ÉCRAN JEU                                                  */
/* ════════════════════════════════════════════════════════ */
#screen-game{justify-content:flex-start;padding-top:1.2rem}
.game-top{width:100%;max-width:460px}
.game-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.game-round{color:var(--muted);font-size:.85rem;font-weight:700}
.game-timer{
  color:var(--accent2);font-size:1rem;font-weight:900;
  font-variant-numeric:tabular-nums;
}
.progress-bar{height:6px;background:#0f2c3d;border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .3s ease}

.game-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.game-question{color:var(--muted);font-size:1rem;font-weight:600}
.game-number{
  font-size:clamp(4.5rem,26vw,9rem);font-weight:900;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 40px #06b6d466;
}
.game-number.correct{color:var(--green);text-shadow:0 0 44px #34d39988}
.game-number.wrong  {color:var(--red);  text-shadow:0 0 44px #f8717188}

.game-feedback{min-height:1.6rem;font-size:.95rem;font-weight:700}
.game-feedback.ok{color:var(--green)}
.game-feedback.ko{color:var(--red)}

.game-buttons{display:flex;gap:.8rem;width:100%;max-width:460px}
.btn-answer{
  flex:1;padding:1.1rem .5rem;border:none;border-radius:var(--r);
  font-size:1.05rem;font-weight:900;cursor:pointer;color:#041016;
  transition:transform .08s, filter .15s;
  touch-action:manipulation;
}
.btn-answer:active{transform:scale(.96)}
.btn-answer:disabled{opacity:.55;cursor:default}
.btn-yes{background:linear-gradient(135deg,var(--green),#6ee7b7)}
.btn-no {background:linear-gradient(135deg,var(--red),#fca5a5)}

/* ════════════════════════════════════════════════════════ */
/* RÉSULTATS                                                  */
/* ════════════════════════════════════════════════════════ */
.results-card{
  background:var(--surface);border:1px solid #06b6d433;border-radius:1.2rem;
  padding:2rem 1.6rem;max-width:400px;width:100%;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  animation:pop-in .35s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes pop-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.results-emoji{font-size:3.4rem;line-height:1}
.results-title{font-size:1.4rem;font-weight:900;margin:.4rem 0}
.results-score{font-size:2.6rem;font-weight:900;font-variant-numeric:tabular-nums}
.results-details{color:var(--muted);font-size:.9rem;margin-top:.5rem;line-height:1.6}
.results-btns{display:flex;flex-direction:column;gap:.6rem;margin-top:1.4rem}

/* ── Boutons génériques ─────────────────────────────────── */
.btn-primary,.btn-secondary,.btn-ghost,.btn-quit,.btn-play{
  border:none;border-radius:var(--r);font-weight:800;cursor:pointer;
  transition:transform .08s, filter .15s, background .15s;
  touch-action:manipulation;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-h));
  color:#041016;padding:.9rem 1.2rem;font-size:1rem;
  box-shadow:0 8px 24px #06b6d444;
}
.btn-primary:active{transform:scale(.97)}
.btn-play{margin-top:.4rem;min-width:260px}
.btn-secondary{
  background:var(--surface2);color:var(--accent2);
  border:1px solid #06b6d433;padding:.9rem 1.2rem;font-size:1rem;
}
.btn-secondary:active{transform:scale(.97)}
.btn-ghost{
  background:var(--surface2);color:var(--text);border:1px solid #06b6d422;
  padding:.55rem .8rem;font-size:.9rem;
}
.btn-ghost:hover{filter:brightness(1.2)}
.btn-ghost:active{transform:scale(.95)}
.btn-quit{
  background:none;color:var(--muted);padding:.6rem 1rem;font-size:.9rem;margin-top:.4rem;
}
.btn-quit:hover{color:var(--red)}

/* ── Animation « pop » sur les grands nombres ───────────── */
.pop{animation:pop .28s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{
  0%{transform:scale(.6);opacity:.2}
  60%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}