/* Écran de jeu : un écran unique (100dvh), chrono en fond, carte au centre. */
.game { height: 100dvh; overflow: hidden; overflow-x: hidden; overscroll-behavior: none; }
.game .shell { height: 100dvh; min-height: 0; gap: 10px; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); position: relative; z-index: 1; }
.game .topbar { padding: 0; }
.hud { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; white-space: nowrap; }
.hud b { color: var(--fg); font-size: 18px; }
.quit { width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; font-size: 20px; color: var(--muted); }

/* chrono */
.clock { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.clock i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--L) 30%, transparent), color-mix(in srgb, var(--R) 20%, transparent)); transition: height .25s linear; }
.clock b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 400; font-size: min(72vw, 52dvh); color: var(--fg); opacity: .1; font-variant-numeric: tabular-nums; }
.clock.warn i { background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 38%, transparent), color-mix(in srgb, var(--warn) 14%, transparent)); }
.clock.danger i { background: linear-gradient(180deg, color-mix(in srgb, var(--ko) 42%, transparent), color-mix(in srgb, var(--ko) 16%, transparent)); animation: hurry .8s ease-in-out infinite; }
@keyframes hurry { 50% { opacity: .55; } }
.bigtime { position: relative; display: flex; justify-content: center; flex: none; margin-top: -6px; }
.bigtime .time { font-family: var(--display); font-size: clamp(44px, 15vw, 64px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 4px 24px #0006; transition: color .3s; }
.bigtime.warn .time { color: var(--warn); }
.bigtime.danger .time { color: var(--ko); animation: beat 1s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } }
.delta { position: absolute; left: 50%; top: 50%; font-family: var(--display); font-size: clamp(22px, 7vw, 30px); opacity: 0; pointer-events: none; white-space: nowrap; }
.delta.ok { color: var(--ok); } .delta.ko { color: var(--ko); }
.delta.go { animation: delta .9s ease-out; }
@keyframes delta { 0% { opacity: 0; transform: translate(70px, -10%) scale(.7); } 15% { opacity: 1; transform: translate(78px, -40%) scale(1.15); } 100% { opacity: 0; transform: translate(84px, -120%) scale(1); } }

/* carte */
.deck { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
.side { position: absolute; top: 50%; translate: 0 -50%; font-family: var(--display); font-size: 11px; letter-spacing: .08em; writing-mode: vertical-rl; opacity: .55; pointer-events: none; white-space: nowrap; text-transform: uppercase; }
.side.l { left: -14px; color: var(--L); transform: rotate(180deg); } .side.r { right: -14px; color: var(--R); }
.gcard { position: relative; width: 100%; max-height: 100%; padding: 14px; display: flex; flex-direction: column; gap: 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(6px); box-shadow: 0 20px 50px #0008;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.gcard.fly { transition: transform .24s ease-in, opacity .24s ease-in; }
.stamp { position: absolute; top: 26px; z-index: 3; font-family: var(--display); font-size: clamp(18px, 6vw, 26px); padding: 2px 10px; border: 3px solid; border-radius: 8px; opacity: 0; pointer-events: none; background: #141018cc; text-transform: uppercase; }
.stamp.l { left: 24px; color: var(--L); transform: rotate(-12deg); } .stamp.r { right: 24px; color: var(--R); transform: rotate(12deg); }
.disc { position: relative; width: min(100%, 46dvh); aspect-ratio: 1; margin: 0 auto; border-radius: 12px; overflow: hidden; background: repeating-radial-gradient(circle, #18121c 0 2px, #1f1825 2px 4px); }
.disc img { width: 100%; height: 100%; object-fit: cover; filter: blur(26px) brightness(.4) saturate(.5); transform: scale(1.25); }
.eq { position: absolute; inset: auto 0 0 0; height: 55%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 18px; }
.eq i { width: 9px; height: 12%; border-radius: 3px; background: linear-gradient(var(--R), var(--L)); }
.playing .eq i, .eq.big i { animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
.eq i:nth-child(5) { animation-delay: -.45s; } .eq i:nth-child(6) { animation-delay: -.75s; } .eq i:nth-child(7) { animation-delay: -.2s; }
@keyframes eq { 0% { height: 10%; } 100% { height: 85%; } }
.eq.big { position: static; height: 60px; padding: 0; }
.playbtn { all: unset; cursor: pointer; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 68px; height: 68px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-size: 24px; }
.q { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.q h2 { font-size: clamp(20px, 6vw, 26px); }
.q .l { color: var(--L); } .q .r { color: var(--R); }
.hint { margin: 0; color: var(--muted); font-size: 12px; text-align: center; flex: none; }

/* flash juste / faux */
.flash { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; place-items: center; opacity: 0; }
.flash b { font-family: var(--display); font-weight: 400; font-size: min(48vw, 34dvh); color: #fff; }
.flash.ok { background: radial-gradient(circle, color-mix(in srgb, var(--ok) 85%, transparent), color-mix(in srgb, var(--ok) 55%, transparent)); }
.flash.ko { background: radial-gradient(circle, color-mix(in srgb, var(--ko) 85%, transparent), color-mix(in srgb, var(--ko) 55%, transparent)); }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* écrans de départ, chargement et fin */
.screen { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
/* pendant la partie : aucun ascenseur, ni dans l'écran ni sur la page */
html:has(body.game:not(.ended)) { overflow: hidden; }
.screen.play { overflow: visible; }
.screen.play .deck { overflow: visible; }
/* fin de partie : la page défile normalement (plus d'ascenseur interne) */
.game.ended { height: auto; overflow: visible; }
.game.ended .shell { height: auto; min-height: 100dvh; }
.game.ended .screen { overflow: visible; flex: none; }
.screen.center { align-items: center; justify-content: center; text-align: center; }
.score-big { font-family: var(--display); font-size: clamp(64px, 20vw, 88px); line-height: 1; background: linear-gradient(90deg, var(--L), var(--R)); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; }
.recap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.recap a { min-width: 0; display: flex; gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--card); font-size: 13px; text-decoration: none; }
.recap img { width: 36px; height: 36px; border-radius: 6px; flex: none; }
.recap span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap em { font-style: normal; font-weight: 700; }
.pseudo-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 2px dashed #ffffff3a; border-radius: 14px; }

@media (max-height: 640px) { .gcard { padding: 10px; gap: 8px; } .disc { width: min(100%, 38dvh); } .hint { display: none; } .bigtime .time { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) { .playing .eq i, .clock.danger i, .bigtime.danger .time { animation: none; } .flash.go { animation-duration: .6s; } }

/* écran haut (ordinateur, tablette) : la carte et les boutons restent groupés au centre */
@media (min-height: 860px) {
  .game:not(.ended) .shell { justify-content: center; }
  .game:not(.ended) .screen.play { flex: none; }
  .game:not(.ended) .deck { flex: none; }
  .disc { width: min(100%, 400px); }
}