/* APRES */
/* Word Traps - style.css v5.1
   Mobile-first • Safari-safe • Mini-jeu optimized

   ============================================================
   CSS HYGIENE RULES (contract)
   ============================================================

   1) FONT-WEIGHT: 3 values only → 400 / 500 / 700
      No 600, 800, 900, 950, 999.

   2) MAX CLASS DEPTH: 2 levels
      ✓ .wt-card
      ✓ .wt-card--hero
      ✗ .wt-card--hero--highlighted (too deep)

   3) NO DUPLICATE SELECTORS
      If identical → group them.

   4) NO ORPHAN CODE
      Every class MUST be referenced (ui.js / index.html / game.js).
      Every @keyframes MUST be used by at least one animation.

   5) OPACITY TOKENS
      Use --wt-a-* only (no one-off opacities).

   6) ONE BREAKPOINT, ONE INTENT
      Reuse existing breakpoints (481/501/661/741/900px).
      New breakpoint requires documented rationale here.

   7) ANIMATIONS
      - Keyframe names: wtCamelCase
      - Prefer durations via --wt-anim-* tokens
      - Exception: --fast/--normal allowed for micro-animations UI (fade-in/hover)
      - Always respect prefers-reduced-motion

   8) DARK MODE
      Override tokens in :root, not per-component.
      Per-component dark overrides only if token override isn't enough.

   9) TOKEN DISCIPLINE (pragmatic)
      Use --wt-a-* for opacities, --gap-* and --space-* for spacing.
      Avoid literal px when a token exists.
      Allowed literal px ONLY for:
      - touch targets (ex: 44px)
      - hairlines/borders (1-2px)
      - icon/spinner sizes
      - rare desktop layout constants (ex: 36px) when tokenizing would add noise

   10) BONUS MODE (explicit exception scope)
      Bonus mode may deviate from the global type scale and spacing for “arcade feel”.
      Those deviations must stay inside [data-wt-bonus] scope.

   Current stats: ~130 selectors, 20 keyframes, 3 font-weights, 0 inline opacities.
   ============================================================ */
/* ============================================================
   RESPONSIVE BREAKPOINTS - DOCUMENTATION (INTENT + LIMITATION)
   ------------------------------------------------------------
   IMPORTANT:
   Les media queries CSS ne supportent PAS l'usage de var().
   -> Impossible d'utiliser des variables CSS dans @media.
   -> Ces valeurs en dur ne sont PAS une violation du principe
      config-first. C'est une limitation CSS native.

   Breakpoints utilises dans ce fichier :

   1) 481px (11 occurrences)
      - Transition mobile -> large phone / small tablet
      - Ajustements de typographie, paddings, cartes, boutons
      - Optimise pour lisibilite et touch targets

   2) 501px (2 occurrences)
      - Breakpoint ponctuel, usage cible
      - Justification requise au niveau des regles concernees
      - Ne pas dupliquer sans raison explicite

   3) 661px (3 occurrences) - min-height
      - Gestion de la densite verticale et de la respiration UI

   4) 741px (6 occurrences) - min-height
      - Optimisation des layouts avec contenus plus riches

   5) 900px (9 occurrences)
      - Passage vers layout desktop
      - Augmentation espacements, largeur max, gaps, hero

   6) 361px (1 occurrence) + max-width: 360px (1 occurrence)
      - Micro-breakpoint pour lisibilite (code / HUD) sur petits ecrans
      - A n'utiliser que si un breakpoint existant ne convient pas

   ============================================
   Regle de maintenance:
   - Aucun nouveau breakpoint sans rationale claire
   - Toujours reutiliser un breakpoint existant si possible
   - Les breakpoints restent documentes ici comme source de verite
   ============================================================ */
:root {
  /* Colors */
  --primary: 64 176 224;
  --primary-dark: 14 90 138;
  --primary-depth: 2 132 199;
  --success: 22 163 74;
  --success-dark: 21 128 61;
  --danger: 239 68 68;
  --danger-dark: 185 28 28;

  /* Info (semantic, used by overlays) */
  --info: var(--primary);

  /* Overlay accent (default; per-state overrides below) */
  --wt-overlay-accent: var(--primary-dark);

  /* Surfaces */
  --bg: 248 250 252;
  --surface: 255 255 255;
  --surface-muted: 241 245 249;
  --border: 226 232 240;

  /* Text */
  --text-strong: 15 23 42;
  --text: 30 41 59;
  --text-muted: 71 85 105;

  /* Semantic */
  --on-primary: 255 255 255;

  /* Accent (used by mistakes list, etc.) */
  --accent: var(--primary-dark);

  /* Opacity tokens (single source of truth) */
  --wt-a-05: 0.05;
  --wt-a-06: 0.06;
  --wt-a-08: 0.08;
  --wt-a-10: 0.10;
  --wt-a-12: 0.12;
  --wt-a-13: 0.13;
  --wt-a-14: 0.14;
  --wt-a-16: 0.16;
  --wt-a-18: 0.18;
  --wt-a-25: 0.25;
  --wt-a-28: 0.28;
  --wt-a-30: 0.30;
  --wt-a-35: 0.35;
  --wt-a-40: 0.40;
  --wt-a-45: 0.45;
  --wt-a-55: 0.55;
  --wt-a-65: 0.65;
  --wt-a-70: 0.70;
  --wt-a-72: 0.72;
  --wt-a-75: 0.75;
  --wt-a-78: 0.78;
  --wt-a-82: 0.82;
  --wt-a-85: 0.85;
  --wt-a-90: 0.90;
  --wt-a-92: 0.92;
  --wt-a-95: 0.95;

  /* Glass (derived from --surface; auto-adapts in dark mode) */
  --glass-65: rgb(var(--surface) / var(--wt-a-65));
  --glass-72: rgb(var(--surface) / var(--wt-a-72));
  --glass-92: rgb(var(--surface) / var(--wt-a-92));

  /* Shadows */
  --shadow-color: 15 23 42;

  /* Base */
  --shadow-1: 0 8px 22px rgb(var(--shadow-color) / var(--wt-a-08));
  --shadow-2: 0 22px 62px rgb(var(--shadow-color) / var(--wt-a-14));

  /* Hero: slightly deeper than default (premium separation) */
  --shadow-hero: 0 28px 78px rgb(var(--shadow-color) / var(--wt-a-16));

  /* Shadow variant (active/press state) */
  --shadow-press: 0 6px 14px rgb(var(--shadow-color) / var(--wt-a-12));

  /* Radius */
  --r-card: 18px;
  --r-btn: 14px;
  --r-md: 12px;
  --r-sm: 4px;
  --r-pill: 999px;

  /* Typography */
  --lh-tight: 1.15;
  --lh-base: 1.5;
  --lh-relaxed: 1.45;

  /* Font scale (single source of truth) */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-hero: 48px;
  --fs-mega: 64px;

  /* Motion */
  --fast: 120ms;
  --normal: 180ms;

  /* APRES */
  /* Keyframe animation durations (single source of truth) */
  --wt-anim-fade-in: 120ms;
  --wt-anim-bonus-spawn: 220ms;
  --wt-anim-bonus-warning-once: 240ms;
  --wt-anim-danger-pulse: 880ms;
  --wt-anim-answer-feedback: 360ms;
  --wt-anim-score-flash: 700ms;
  --wt-anim-chip-flash: 600ms;
  --wt-anim-overlay-pop: 500ms;
  --wt-anim-overlay-shake: 220ms;
  --wt-anim-celebrate: 520ms;
  --wt-anim-pulse: 1s;
  --wt-anim-tease: 1600ms;
  --wt-anim-loading: 1.2s;
  --wt-anim-spin: 1s;

  /* ============================================
       MOTION - CONTRAT
       ============================================
       - Les transitions UI utilisent exclusivement les tokens (--fast, --normal)
         et peuvent etre alignees sur des timings JS.
       - Les animations keyframes utilisent des durees autonomes via tokens CSS
         (pas de dependance ni synchronisation avec le JS).
    */

  /* Layout */
  --max: 520px;
  --max-desktop: 760px;
  --pad: 16px;
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 24px;

  /* Micro spacing (single source of truth) */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-10: 10px;
  --space-14: 14px;
  --space-18: 18px;

  /* Branding */
  --wt-title-size: 31px;
  --wt-logo-scale: 0.60;

  /* Calmer “premium” glow (less corporate, less neon) */
  --hero-glow: 0.16;
}

@media (min-width: 481px) {
  :root {
    --wt-title-size: 24px;
    --wt-logo-scale: 1.42;
  }
}

@media (min-width: 900px) {
  :root {
    --fs-base: 18px;
    --fs-md: 16px;
    --fs-sm: 15px;

    /* Branding desktop boost */
    --wt-title-size: 40px;
    --wt-logo-scale: 1.55;
  }
}

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font: var(--fs-base)/var(--lh-base) system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgb(var(--text));
  background:
    radial-gradient(900px 420px at 50% -120px, rgb(var(--primary) / var(--wt-a-16)), transparent 70%),
    linear-gradient(180deg, rgb(var(--primary) / var(--wt-a-08)), rgb(var(--bg)) 220px),
    rgb(var(--bg));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

a {
  color: rgb(var(--primary-dark));
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid rgb(var(--primary-dark));
  outline-offset: 3px;
}

/* APRES */
/* Accessibilite conservee:
   - on garde les focus rings partout
   - on neutralise UNIQUEMENT le focus force sur le conteneur app */
#app:focus-visible {
  outline: none;
}


/* Micro-transition PLAYING -> END (KISS) */
#app.wt-fade {
  opacity: 1;
  transition: opacity var(--normal) ease;
}

/* Block interactions during fade (UI adds .transitioning) */
#app.transitioning {
  pointer-events: none;
}

/* Perf: only promote layer while transitioning */
#app.wt-fade.transitioning {
  will-change: opacity;
}

#app.wt-fade.wt-fade--out {
  opacity: 0;
}

#app.wt-fade.wt-fade--in {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #app.wt-fade {
    transition: none;
  }
}

.wt-hidden {
  display: none !important;
}

/* ============================================
   LAYOUT
   ============================================ */
.wt-app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.wt-main {
  flex: 1 0 auto;
  padding: var(--gap-2) var(--pad) calc(var(--gap-2) + var(--gap-3) + env(safe-area-inset-bottom, 0px));
}

@media (min-height: 661px) {
  .wt-main {
    padding: var(--gap-3) var(--pad) calc(var(--gap-3) + var(--gap-3) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-height: 741px) {
  .wt-main {
    padding: var(--gap-4) var(--pad) calc(var(--gap-4) + var(--gap-3) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 900px) {
  .wt-main {
    padding: 36px var(--pad) calc(36px + var(--gap-3) + env(safe-area-inset-bottom, 0px));
  }
}

.wt-container {
  max-width: var(--max);
  margin: 0 auto;
}

/* Breathing room before footer (prevents “card touches footer” look) */
.wt-main .wt-container>.wt-card:last-child {
  margin-bottom: var(--gap-3);
}

@media (min-width: 900px) {
  .wt-main .wt-container>.wt-card:last-child {
    margin-bottom: var(--gap-4);
  }
}

@media (min-width: 900px) {
  .wt-container {
    max-width: var(--max-desktop);
  }
}

/* ============================================
   BRANDING
   ============================================ */
.wt-branding {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  padding-bottom: var(--gap-3);
  text-decoration: none;
  color: inherit;
}

.wt-branding:hover {
  text-decoration: none;
}

.wt-branding-logo {
  width: calc(var(--wt-title-size) * var(--wt-logo-scale));
  height: calc(var(--wt-title-size) * var(--wt-logo-scale));
  object-fit: contain;
  flex-shrink: 0;
  background: rgb(var(--surface));
  border-radius: var(--r-pill);
  padding: var(--space-4);
}

.wt-branding-name {
  font-size: var(--wt-title-size);
  line-height: 1.2;
  font-weight: 700;
  color: rgb(var(--text-strong));
}

.wt-branding--logo-only .wt-branding-name {
  display: none;
}

/* ============================================
   CARD
   ============================================ */
.wt-card {
  position: relative;

  /* Slight translucency helps card lift off the background gradients */
  background: rgb(var(--surface) / var(--wt-a-95));

  /* Boundary is a touch clearer without looking “outlined” */
  border: 1px solid rgb(var(--border) / var(--wt-a-90));

  border-radius: var(--r-card);

  /* A bit more separation vs bg, still calm */
  box-shadow:
    var(--shadow-1),
    0 1px 0 rgb(var(--text-strong) / var(--wt-a-05));

  padding: var(--space-14);
}

@media (min-width: 481px) {
  .wt-card {
    padding: var(--space-18);
  }
}

.wt-card+.wt-card {
  margin-top: var(--gap-3);
}

@media (min-width: 900px) {
  .wt-card+.wt-card {
    margin-top: var(--gap-4);
  }
}

.wt-card--hero {
  position: relative;
  overflow: hidden;

  /* Premium separation: deeper but still soft */
  box-shadow:
    var(--shadow-hero),
    inset 0 1px 0 rgb(var(--text-strong) / var(--wt-a-06));
}

/* Narrative tension: a whisper of “risk” at the bottom edge */
.wt-card--hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgb(var(--primary) / var(--wt-a-35)),
      rgb(var(--danger) / var(--wt-a-18)),
      rgb(var(--primary) / var(--wt-a-35)));
  opacity: var(--wt-a-85);
}

/* Subtle hero glow also on mobile (desktop keeps stronger version below) */
.wt-card--hero::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(440px 220px at 16% 18%, rgb(var(--primary) / calc(var(--hero-glow) * 0.70)), transparent 70%),
    radial-gradient(440px 220px at 86% 0%, rgb(var(--success) / calc(var(--hero-glow) * 0.40)), transparent 72%);
}

.wt-card--hero>* {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .wt-card--hero::before {
    background:
      radial-gradient(520px 260px at 16% 22%, rgb(var(--primary) / var(--hero-glow)), transparent 70%),
      radial-gradient(520px 260px at 84% 0%, rgb(var(--success) / calc(var(--hero-glow) * 0.55)), transparent 72%);
  }
}

.wt-card--landing {
  position: relative;
}

/* ======================
   LANDING STATS
   ====================== */
.wt-landing-stat {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-6);
  align-items: start;
  margin-top: var(--gap-3);
  padding: var(--gap-1) var(--space-10);
  border-radius: var(--r-md);
  background: rgb(var(--surface-muted));
  border: 1px solid rgb(var(--border));
}

.wt-landing-stat__title {
  display: block;
  font-weight: 700;
  color: rgb(var(--text-strong));
}

.wt-landing-stat__sub {
  /* Mobile-first: KPI sous le titre (pas de chevauchement) */
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  margin: 0;

  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--text-strong));

  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Wide layouts: KPI à droite sur la même ligne que le titre */
@media (min-width: 481px) {
  .wt-landing-stat__sub {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

.wt-progress {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--space-2);

  width: 100%;
  height: var(--space-6);
  border-radius: var(--r-pill);
  background: rgb(var(--border));
  overflow: hidden;
}

/* Wide layouts: no extra behavior needed anymore */
@media (min-width: 481px) {
  .wt-landing-stat {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.wt-progress__fill {
  height: 100%;
  width: 0%;
  background: rgb(var(--primary));
  transition: width var(--normal) ease;
}

/* Hover polish */
@media (hover: hover) and (pointer: fine) {
  .wt-card {
    transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
  }

  .wt-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
  }
}

/* ============================================
   TYPOGRAPHY (simplified: native-app feel)
   - One font family (system-ui): already set on body
   - Weights: 400 / 500 / 700 only (enforced)
   - .wt-muted is COLOR ONLY (no size/weight changes)
   ============================================ */

.wt-h1 {
  margin: 0 0 var(--gap-1);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: 0;
  color: rgb(var(--text-strong));
}

@media (min-width: 481px) {
  .wt-h1 {
    font-size: var(--fs-3xl);
  }
}

.wt-h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: 0;
  color: rgb(var(--text-strong));
}

@media (min-width: 481px) {
  .wt-h2 {
    font-size: var(--fs-2xl);
  }
}

.wt-meta {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: rgb(var(--text));
}

/* Muted is COLOR ONLY (prevents “multi-font” feel) */
.wt-muted {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: rgb(var(--text-muted));
}

.wt-sub {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  font-weight: 400;
  color: rgb(var(--text));
}

/* Landing: keep a slight emphasis, not a different “font feel” */
.wt-card--landing .wt-sub {
  font-size: inherit;
  font-weight: 400;
  color: rgb(var(--text));
}

/* Tagline: calmer, less “grey corporate”, better rhythm (overrides inline margin) */
.wt-tagline {
  margin-top: 10px !important;
  margin-bottom: 0;
  font-weight: 200;
  letter-spacing: 0.2px;
  color: rgb(var(--text-strong) / var(--wt-a-82));
}

/* ============================================
   FLEX UTILITIES
   ============================================ */
.wt-row {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
  align-items: center;
}

.wt-row--tight {
  gap: var(--gap-1);
}

.wt-row--end {
  justify-content: flex-end;
}

.wt-row--spaced {
  justify-content: space-between;
  align-items: flex-start;
}

@media (min-width: 481px) {
  .wt-row--spaced {
    align-items: center;
  }
}

.wt-row--top {
  align-items: flex-start;
}

.wt-divider {
  height: var(--space-1);
  background: linear-gradient(90deg,
      transparent,
      rgb(var(--border)),
      transparent);
  margin: var(--space-18) 0;
}

/* ============================================
   ACCORDION (native <details>)
   ============================================ */
.wt-accordion {
  margin-top: var(--space-10);
}

.wt-accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--space-10) var(--gap-2);
  border-radius: var(--r-md);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  box-shadow: var(--shadow-1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: rgb(var(--text-strong));
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.wt-accordion-toggle::-webkit-details-marker {
  display: none;
}

.wt-accordion-toggle::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--fast);
  color: rgb(var(--text-muted));
}

.wt-accordion[open] .wt-accordion-toggle::before {
  transform: rotate(90deg);
}

.wt-accordion-content {
  margin: var(--space-10) 0 0;
  padding: var(--gap-2);
  background: rgb(var(--surface-muted));
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgb(var(--text));
  word-break: break-word;
}

.wt-mistake-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-10) var(--gap-2);
  border-left: 3px solid rgb(var(--accent));
  background: rgb(var(--surface));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.wt-mistake-item+.wt-mistake-item {
  margin-top: var(--gap-1);
}

.wt-mistake-pair {
  font-weight: 700;
  color: rgb(var(--text-strong));
}

.wt-mistake-expl {
  color: rgb(var(--text-muted));
  font-size: 0.92em;
}

/* ============================================
   BUTTONS
   ============================================ */
.wt-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  padding: var(--gap-2) var(--gap-3);
  min-height: 44px;
  font-size: var(--fs-md);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast), filter var(--fast), background-color var(--fast), border-color var(--fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wt-btn:disabled {
  opacity: var(--wt-a-82);
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.2) saturate(0.85);
  transform: none;
}

.wt-btn--primary {
  background: rgb(var(--primary-dark));
  color: rgb(var(--on-primary));
  border: 1px solid rgb(var(--primary-dark) / var(--wt-a-55));
  box-shadow: var(--shadow-2);
}

.wt-btn--primary:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: var(--shadow-press);
}

.wt-btn--secondary {
  background: rgb(var(--surface));
  color: rgb(var(--text-strong));
  border: 1px solid rgb(var(--border));
  box-shadow: var(--shadow-1);
}

.wt-btn--secondary:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
  background: rgb(var(--surface-muted));
}

.wt-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: rgb(var(--text-strong));
  box-shadow: none;
  padding: var(--gap-2);
}

.wt-btn--ghost:active:not(:disabled) {
  transform: translateY(1px);
  opacity: var(--wt-a-85);
}

@media (hover: hover) and (pointer: fine) {
  .wt-btn:hover:not(:disabled) {
    filter: none;
  }

  .wt-btn--ghost:hover {
    background: var(--glass-65);
    box-shadow: var(--shadow-1);
    border-color: rgb(var(--border) / var(--wt-a-85));
  }
}

@media (min-width: 481px) {
  .wt-btn--ghost {
    padding: var(--gap-1) var(--space-10);
    font-weight: 700;
    min-height: 44px;
  }
}


.wt-list {
  margin: 0;
  padding-left: 1.2em;
  color: inherit;
}

.wt-list>li+li {
  margin-top: var(--space-10);
}

/* Hero cards (paywall, etc.): breathing room before bullet lists */
.wt-card--hero .wt-list {
  margin-top: var(--gap-2);
}

.wt-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-2);
  margin-top: var(--gap-3);
}

.wt-actions .wt-btn {
  width: 100%;
}

@media (min-width: 481px) {
  .wt-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 900px) {
  .wt-actions {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

/* ============================================
   CHOICES
   ============================================ */

.wt-choices {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
  margin-top: var(--gap-2);
}

@media (min-height: 741px) {
  .wt-choices {
    gap: var(--gap-2);
    margin-top: var(--gap-3);
  }
}

.wt-choice {
  width: 100%;
  text-align: left;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-btn);
  padding: clamp(var(--gap-2), 2vh, var(--space-14)) var(--gap-2);
  min-height: 48px;
  font-size: clamp(var(--fs-md), 2.5vw, var(--fs-lg));
  font-weight: 700;
  color: rgb(var(--text-strong));
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform var(--fast), border-color var(--fast), background-color var(--fast), box-shadow var(--fast);
}

/* Option C: micro-feedback flash on tapped answer */
.wt-choice:focus-visible {
  outline: 2px solid rgb(var(--primary-dark));
  outline-offset: 3px;
}

.wt-choice:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: var(--shadow-press);
}


.wt-choice--same,
.wt-choice--diff {
  border-color: rgb(var(--primary) / var(--wt-a-40));
  background: rgb(var(--primary) / var(--wt-a-08));
}

@media (hover: hover) and (pointer: fine) {
  .wt-choice:not(.wt-choice--same):not(.wt-choice--diff):hover {
    background: rgb(var(--surface-muted));
  }

  .wt-choice--same:hover,
  .wt-choice--diff:hover {
    background: rgb(var(--primary) / var(--wt-a-14));
    border-color: rgb(var(--primary) / var(--wt-a-55));
  }
}

.wt-choice-icon {
  font-size: var(--fs-lg);
  margin-right: var(--gap-1);
  opacity: var(--wt-a-70);
}

.wt-choice--same .wt-choice-icon {
  /* WCAG AA on light surfaces */
  color: rgb(var(--success-dark));
}

.wt-choice--diff .wt-choice-icon {
  /* WCAG AA on light surfaces */
  color: rgb(var(--danger-dark));
}


/* ============================================
   GENERIC UTILITIES
   ============================================ */

/* Box — bordered container (urgency, social, price, etc.) */
.wt-box {
  margin-top: var(--gap-2);
  padding: var(--space-10) var(--gap-2);
  border-radius: var(--r-btn);
  border: 1px solid rgb(var(--border));
  background: var(--glass-65);
}

.wt-box--tinted {
  background: rgb(var(--primary) / var(--wt-a-12));
  box-shadow: var(--shadow-1);
}

.wt-box--strike .wt-muted {
  text-decoration: line-through;
  text-decoration-color: rgb(var(--text-muted) / var(--wt-a-45));
}


/* Badge (success page, premium indicators) */
.wt-badge {
  display: inline-block;
  padding: var(--space-4) var(--space-10);
  border-radius: var(--r-pill);
  background: rgb(var(--primary) / var(--wt-a-10));
  color: rgb(var(--primary-dark));
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.3px;
}

.wt-badge--count {
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--gap-1);
}

.wt-tag {
  display: inline-block;
  margin: 0 0 var(--gap-1) 0;
  padding: var(--space-4) var(--gap-1);
  border-radius: var(--r-pill);
  border: 1px solid rgb(var(--primary) / var(--wt-a-40));
  background: rgb(var(--primary) / var(--wt-a-14));
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgb(var(--primary-dark));
}

/* Stack — vertical rhythm between children */
.wt-stack>*+* {
  margin-top: var(--gap-1);
}

.wt-stack--tight {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.wt-stack--tight p {
  margin: 0;
}

.wt-stack .wt-divider {
  margin-top: var(--gap-2);
  margin-bottom: var(--gap-2);
}

/* Constrain accordion content inside cards (prevents wall-of-text) */
.wt-card .wt-accordion-content {
  max-height: min(44vh, 320px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}


/* Live status region (copy feedback, etc.) */
.wt-live {
  margin-top: var(--space-10);
  padding: var(--space-10) var(--gap-2);
  border-radius: var(--r-md);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  color: rgb(var(--text));
  font-weight: 700;
}

/* Truncate — single-line overflow ellipsis */
.wt-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Text alignment */
.wt-text-end {
  text-align: right;
}

/* Inline hint (small text beside icon buttons) */
.wt-chest-hint-inline {
  font-size: var(--fs-xs);
  color: rgb(var(--text-muted));
  max-width: min(180px, 44vw);
  text-align: right;
  line-height: var(--lh-tight);
  white-space: normal;
}

/* Actions: single-column variant */
.wt-actions--stack {
  grid-template-columns: 1fr;
}

@media (min-width: 481px) {
  .wt-actions--stack {
    grid-template-columns: 1fr;
  }

  .wt-actions--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pulse — generic scale animation for emphasis */
.wt-pulse {
  animation: wtPulse var(--wt-anim-pulse) ease-in-out infinite;
}

@keyframes wtPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}

/* ============================================
   ICON BUTTON (unified: help, home, chest)
   ============================================ */
.wt-btn-icon {
  appearance: none;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(var(--border));
  background: var(--glass-65);
  box-shadow: var(--shadow-1);
  color: rgb(var(--text-muted));
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--fast),
    color var(--fast),
    background-color var(--fast),
    box-shadow var(--fast),
    transform var(--fast);
}

.wt-btn-icon:focus-visible {
  outline: 2px solid rgb(var(--primary-dark));
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .wt-btn-icon:hover {
    border-color: rgb(var(--primary-dark) / var(--wt-a-45));
    color: rgb(var(--primary-dark));
    background: rgb(var(--primary) / var(--wt-a-10));
    box-shadow: 0 4px 10px rgb(var(--shadow-color) / var(--wt-a-05));
  }
}

/* Tease: gentle pulsing glow (unsolved secret) */
.wt-btn-icon--tease {
  animation: wtBtnIconTease var(--wt-anim-tease) ease-in-out infinite;
  will-change: transform, filter;
  filter: drop-shadow(0 6px 14px rgb(var(--primary) / var(--wt-a-25)));
}

@keyframes wtBtnIconTease {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 6px 14px rgb(var(--primary) / var(--wt-a-18)));
  }

  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 10px 22px rgb(var(--primary) / var(--wt-a-30)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wt-btn-icon--tease {
    animation: none;
  }
}

/* ============================================
   CHOICE FLASH (unified ok + bad)
   ============================================ */
.wt-choice--flash {
  border-color: rgb(var(--primary) / var(--wt-a-75));
  box-shadow: var(--shadow-2);
  animation: wtChoiceFlash var(--wt-anim-answer-feedback) ease-out 1;
  will-change: transform, filter;
}

@keyframes wtChoiceFlash {
  0% {
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }

  45% {
    transform: translateY(-1px) scale(1.02);
    filter: saturate(1.08);
  }

  100% {
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* ============================================
   TERMS BOX
   ============================================ */
.wt-terms-box {
  background: rgb(var(--surface-muted));
  border: 2px solid rgb(var(--border));
  border-radius: var(--r-card);
  padding: var(--gap-2) var(--gap-3);
  margin: var(--gap-1) 0;
}

.wt-term-row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
  padding: var(--space-4) 0;
}

.wt-term-row+.wt-term-row {
  border-top: 1px solid rgb(var(--border));
}

.wt-term-word {
  font-size: clamp(24px, 5vw, var(--fs-3xl));
  font-weight: 700;
  color: rgb(var(--text-strong));
}

.wt-term-lang {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgb(var(--text-muted));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-2) var(--gap-1);
  background: rgb(var(--primary) / var(--wt-a-10));
  border-radius: var(--r-sm);
}

/* ============================================
   PILLS
   ============================================ */
.wt-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  border-radius: var(--r-pill);
  border: 1px solid rgb(var(--border) / var(--wt-a-90));
  background: var(--glass-72);
  box-shadow: 0 4px 10px rgb(var(--shadow-color) / var(--wt-a-05));
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgb(var(--text-strong));

  /* Stabilise les chiffres (évite le “wiggle” 9→10, 19→20, etc.) */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.wt-pill small {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgb(var(--text-muted));
}

/* HUD emphasis: Chances + Score larger (keep arcade, but calmer) */
.wt-pill--score,
.wt-pill--chances {
  font-size: var(--fs-md);
  transform: scale(1);
  filter: none;
  will-change: transform, filter, box-shadow;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: var(--gap-1) var(--space-14);
  box-shadow: var(--shadow-2);

  position: relative;
  padding-right: 44px;
  overflow: clip;
}

.wt-pill__delta {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate3d(0, -50%, 0) scale(0.92);

  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;

  color: rgb(var(--success-dark));
}

.wt-pill__delta--minus {
  color: rgb(var(--danger-dark));
}

.wt-pill__sub {
  display: inline-block;
  margin-left: var(--gap-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgb(var(--text-muted));
  opacity: var(--wt-a-92);
}

/* Trigger animation only. Keyframes handle show + fade-out. */
.wt-pill--score-flash .wt-pill__delta,
.wt-pill--danger-pulse .wt-pill__delta {
  animation: wtHudDeltaPop var(--wt-anim-score-flash) ease-out both;
}

@keyframes wtHudDeltaPop {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) translate3d(0, 6px, 0) scale(0.92);
  }

  35% {
    opacity: 1;
    transform: translate3d(0, -50%, 0) translate3d(0, 0, 0) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -50%, 0) translate3d(0, -12px, 0) scale(1);
  }
}

/* Very small screens: keep HUD readable without forcing wrap too often */
@media (max-width: 360px) {

  .wt-pill--score,
  .wt-pill--chances {
    font-size: var(--fs-sm);
    padding: 7px var(--gap-2);
    padding-right: 38px;
    letter-spacing: 0.2px;
  }
}

.wt-pill--danger {
  border-color: rgb(var(--danger) / var(--wt-a-35));
  background: rgb(var(--danger) / var(--wt-a-06));
}

.wt-pill--danger small {
  color: rgb(var(--danger-dark));
  opacity: var(--wt-a-95);
}

/* HUD pill danger pulse (when losing a chance) */
.wt-pill--danger-pulse {
  transform-origin: center;
  will-change: transform, filter, box-shadow;
  animation: wtPillPulse var(--wt-anim-danger-pulse) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wtPillPulse {
  0% {
    transform: scale(1);
    filter: none;
    box-shadow: var(--shadow-2);
    border-color: rgb(var(--border) / var(--wt-a-90));
    background: var(--glass-72);
  }

  28% {
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.03);
    box-shadow:
      0 10px 22px rgb(var(--danger) / var(--wt-a-14)),
      0 0 0 3px rgb(var(--danger) / var(--wt-a-10));
    border-color: rgb(var(--danger) / var(--wt-a-55));
    background: rgb(var(--danger) / var(--wt-a-08));
  }

  100% {
    transform: scale(1);
    filter: none;
    box-shadow: var(--shadow-2);
    border-color: rgb(var(--border) / var(--wt-a-90));
    background: var(--glass-72);
  }
}

.wt-pill--score-flash {
  transform-origin: center;
  will-change: transform, filter, box-shadow;
  animation: wtScorePulse var(--wt-anim-score-flash) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wtScorePulse {
  0% {
    transform: scale(1);
    filter: none;
    box-shadow: var(--shadow-2);
    border-color: rgb(var(--border) / var(--wt-a-90));
    background: var(--glass-72);
  }

  28% {
    transform: scale(1.06);
    filter: saturate(1.10) contrast(1.03);
    box-shadow:
      0 10px 22px rgb(var(--success) / var(--wt-a-14)),
      0 0 0 3px rgb(var(--success) / var(--wt-a-10));
    border-color: rgb(var(--success) / var(--wt-a-55));
    background: rgb(var(--success) / var(--wt-a-08));
  }

  56% {
    transform: scale(1.02);
    filter: saturate(1.06) contrast(1.02);
    box-shadow:
      0 8px 18px rgb(var(--success) / var(--wt-a-12)),
      0 0 0 2px rgb(var(--success) / var(--wt-a-08));
  }

  100% {
    transform: scale(1);
    filter: none;
    box-shadow: var(--shadow-2);
    border-color: rgb(var(--border) / var(--wt-a-90));
    background: var(--glass-72);
  }
}

/* ============================================
   FEEDBACK
   ============================================ */
.wt-feedback {
  margin-top: clamp(var(--space-10), 1.5vh, var(--gap-2));
  padding: clamp(var(--space-10), 1.5vh, var(--gap-2));
  border-radius: var(--r-btn);
  border: 1px solid rgb(var(--border));
  border-left-width: 4px;
  background: rgb(var(--surface-muted));
  line-height: var(--lh-relaxed);
}

.wt-feedback--ok {
  border-left-color: rgb(var(--success));
  border-color: rgb(var(--success) / var(--wt-a-30));
  background: rgb(var(--success) / var(--wt-a-06));
}

.wt-feedback--bad {
  border-left-color: rgb(var(--danger));
  border-color: rgb(var(--danger) / var(--wt-a-30));
  background: rgb(var(--danger) / var(--wt-a-06));
}


@media (min-width: 900px) {
  .wt-feedback {
    font-size: var(--fs-base);
  }

  .wt-feedback-title {
    font-size: var(--fs-sm);
  }
}

@media (pointer: coarse) {
  .wt-feedback {
    cursor: pointer;
  }

  .wt-feedback:active {
    transform: translateY(1px);
  }
}

.wt-feedback-title {
  font-weight: 700;
  color: rgb(var(--text-strong));
  margin-bottom: var(--space-4);
}

/* ============================================
   EXPLANATION (feedback pedagogical block)
   ============================================ */
.wt-explanation {
  margin: var(--gap-1) 0 0;
  padding: var(--gap-1) var(--gap-2);
  border-radius: var(--r-md);
  border-left: 3px solid rgb(var(--primary) / var(--wt-a-35));
  background: rgb(var(--primary) / var(--wt-a-08));
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: rgb(var(--text));
}

.wt-explanation strong,
.wt-explanation b {
  font-weight: 500;
}

@media (min-height: 741px) {
  .wt-explanation {
    padding: var(--gap-2) var(--space-14);
    font-size: var(--fs-base);
  }
}

/* ============================================
   MODAL
   ============================================ */
.wt-backdrop {
  position: fixed;
  inset: 0;

  /* Lighter: keep context visible behind the modal */
  background: rgb(var(--shadow-color) / var(--wt-a-40));

  display: grid;
  place-items: center;
  padding: var(--gap-3);
  z-index: 999;
}

.wt-modal {
  width: min(560px, 92vw);
  max-height: 86vh;
  overflow: auto;
  overscroll-behavior: contain;

  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);

  /* Readability (50+): bigger rhythm, calmer scan */
  font-size: var(--fs-base);
  line-height: 1.55;

  padding: var(--space-14);
}

.wt-modal p {
  margin: var(--space-10) 0;
}

@media (min-width: 481px) {
  .wt-modal {
    max-height: min(82vh, 720px);
    padding: var(--space-18);
  }
}

.wt-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--glass-92);
  padding-bottom: var(--space-10);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgb(var(--border));
}

@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .wt-modal-header {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ============================================
   TOAST
   ============================================ */
.wt-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;

  max-width: min(520px, calc(100vw - 32px));
  width: max-content;
  text-align: center;

  background: rgb(var(--surface) / var(--wt-a-78));
  color: rgb(var(--text-strong));
  border: 1px solid rgb(var(--border) / var(--wt-a-85));
  border-radius: var(--r-btn);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: var(--space-10) var(--gap-2);
  font-weight: 700;
  box-shadow: var(--shadow-2);

  transition: opacity var(--fast);
  opacity: 0;

  /* CRITIQUE: ne doit jamais bloquer le chest (ou autre UI) */
  pointer-events: none;
}

/* Allow interaction for toast controls (e.g., update dismiss/reload button) */
.wt-toast button,
.wt-toast .wt-btn,
.wt-toast a {
  pointer-events: auto;
}

.wt-toast--info {
  background: rgb(var(--primary) / var(--wt-a-14));
  border-color: rgb(var(--primary) / var(--wt-a-40));
}

.wt-toast--success {
  background: rgb(var(--success) / var(--wt-a-14));
  border-color: rgb(var(--success) / var(--wt-a-40));
}

.wt-toast--danger {
  background: rgb(var(--danger) / var(--wt-a-12));
  border-color: rgb(var(--danger) / var(--wt-a-40));
}

.wt-toast--visible {
  opacity: 1;

  /* reste non-bloquant même visible */
  pointer-events: none;
}


/* ============================================
CHANCE LOST OVERLAY
===================================== */

.wt-chance-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    calc(env(safe-area-inset-top) + var(--pad)) var(--pad) calc(env(safe-area-inset-bottom) + var(--pad));

  /* No blur: keep playing screen fully visible behind overlay */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;

  /* Default backdrop: very light scrim, no gradient */
  --wt-overlay-backdrop: rgb(var(--shadow-color) / var(--wt-a-08));
  background: var(--wt-overlay-backdrop);

  opacity: 0;
  visibility: hidden;

  /* Hidden overlays must not intercept taps */
  pointer-events: none;

  transition:
    opacity var(--fast),
    visibility 0s linear var(--fast);
}

/* Visible overlays behave like a modal layer: they block taps underneath */
.wt-chance-overlay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity var(--fast),
    visibility 0s linear 0s;
}

/* “Tap to dismiss” affordance only when the JS enables it */
.wt-chance-overlay--dismissible .wt-chance-overlay__content {
  cursor: pointer;
}

.wt-chance-overlay--danger {
  --wt-overlay-accent: var(--danger);
  --wt-overlay-backdrop: rgb(var(--danger) / var(--wt-a-12));
}

.wt-chance-overlay--info {
  --wt-overlay-accent: var(--info);
  --wt-overlay-backdrop: rgb(var(--info) / var(--wt-a-08));
}

.wt-chance-overlay--success {
  --wt-overlay-accent: var(--success);
  --wt-overlay-backdrop: rgb(var(--success) / var(--wt-a-08));
}

.wt-chance-overlay__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-4) var(--space-18);

  background: rgb(var(--surface));
  border-radius: var(--r-card);

  border: 1px solid rgb(var(--wt-overlay-accent) / var(--wt-a-18));
  box-shadow:
    0 16px 36px rgb(var(--shadow-color) / var(--wt-a-16));

  animation: wtOverlayPop var(--wt-anim-overlay-pop) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wt-chance-overlay__content::before {
  content: "";
  display: none;
}

/* Danger: keep shake animation (content stays white via .wt-chance-overlay__content) */
.wt-chance-overlay--danger .wt-chance-overlay__content {
  animation:
    wtOverlayPop var(--wt-anim-overlay-pop) cubic-bezier(0.34, 1.56, 0.64, 1),
    wtOverlayDangerShake var(--wt-anim-overlay-shake) ease-out 1;
}

@keyframes wtOverlayDangerShake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  55% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(0);
  }
}

/* ============================================
   FORM
   ============================================ */
.wt-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: var(--gap-2) 0 var(--space-6);
  color: rgb(var(--text));
}

.wt-input {
  width: 100%;
  padding: var(--gap-2);
  border-radius: var(--r-md);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--surface));
  font-size: var(--fs-base);
  font-weight: 700;
  color: rgb(var(--text-strong));
}

.wt-input:focus {
  outline: none;
  border-color: rgb(var(--primary-dark));
  box-shadow: 0 0 0 3px rgb(var(--primary) / var(--wt-a-14));
}

.wt-code {
  font-family: ui-monospace, monospace;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: rgb(var(--text-strong));
  background: rgb(var(--surface-muted));
  padding: var(--space-10);
  border-radius: var(--r-md);
  text-align: center;
  letter-spacing: 1px;
}

/* Micro-breakpoint (361px)
   Rationale: améliore la lisibilité de .wt-code sur petits écrans dès que la largeur
   permet plus d’aération (évite rendu trop serré sans attendre le breakpoint tablet). */
@media (min-width: 361px) {
  .wt-code {
    font-size: var(--fs-2xl);
    letter-spacing: 2px;
    padding: var(--gap-2);
  }
}


/* ==========================================
   FOOTER
============================================ */
/* Hide footer during gameplay to reduce distraction */
body.wt-state--playing .wt-footer {
  display: none;
}

.wt-footer {
  margin-top: var(--gap-5);
  padding: var(--gap-3) var(--pad);
  color: rgb(var(--text-muted));
  font-size: var(--fs-sm);
  text-align: center;

  background: transparent;
}

.wt-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
}

/* Row base */
.wt-footer-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
}

/* Brand line */
.wt-footer-row--brand {
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* Links line: wrap cleanly on mobile, no stray separators */
.wt-footer-row--links {
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  opacity: var(--wt-a-90);
}

/* Critical fix: separators must not behave like flex items */
.wt-footer-sep {
  display: none;
}

.wt-footer-link {
  font-size: var(--fs-xs);
  color: rgb(var(--text-muted));
  text-decoration: none;
}

.wt-footer-link:hover {
  text-decoration: underline;
}

/* Touch targets on mobile only */
.wt-footer-row--links a {
  display: inline-flex;
  align-items: center;
  padding: var(--gap-1) var(--space-4);
  min-height: 44px;
  line-height: 1.2;
}

.wt-footer-version {
  color: rgb(var(--text-muted));
  font-weight: 400;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.wt-footer-creator {
  font-size: var(--fs-xs);
  color: rgb(var(--text-muted));
}

/* Desktop: keep utility links on ONE line when space allows */
@media (min-width: 900px) {
  .wt-footer-row--links {
    flex-wrap: nowrap;
  }

  .wt-footer-row--links a {
    padding: 2px 3px;
    min-height: auto;
  }
}

/* ============================================
   LOADING
   ============================================ */
.wt-loading {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--gap-4);
}

.wt-loading-icon {
  font-size: var(--fs-mega);
  margin-bottom: var(--gap-3);
  animation: wtLoadingPulse var(--wt-anim-loading) ease-in-out infinite;
}

.wt-loading-spinner {
  width: 32px;
  height: 32px;
  border: 4px solid rgb(var(--border));
  border-top-color: rgb(var(--primary));
  border-radius: 50%;
  animation: wtSpin var(--wt-anim-spin) linear infinite;
  margin-bottom: var(--gap-3);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.wt-noscript-icon {
  font-size: var(--fs-hero);
  margin-bottom: var(--gap-3);
}

.wt-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: rgb(var(--primary-dark));
  color: rgb(var(--on-primary));
  padding: var(--gap-1) var(--gap-3);
  z-index: 100;
  border-radius: 0 0 8px 0;
}

.wt-skip-link:focus {
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wt-noscript {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--primary) / var(--wt-a-10)), rgb(var(--bg)) 220px), rgb(var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.wt-noscript-content {
  text-align: center;
  max-width: 400px;
  padding: var(--gap-4);
}

/* ============================================
   BONUS MODE
   ============================================ */
.wt-container[data-wt-bonus="fall"] {
  position: fixed;
  inset: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

  /* BONUS: reduce “blank page” feel (subtle top tint, tokenized) */
  background:
    linear-gradient(180deg, rgb(var(--primary) / var(--wt-a-08)), rgb(var(--bg)) 240px),
    rgb(var(--bg));
}

/* Bonus (fall): keep an exit affordance, but make it compact so it doesn't compete with gameplay */
.wt-container[data-wt-bonus="fall"] .wt-branding {
  display: flex;
  justify-content: center;
  padding-bottom: 0;
  margin: 6px 0 6px;
  opacity: var(--wt-a-70);
}

.wt-container[data-wt-bonus="fall"] .wt-branding-name {
  display: none;
}

.wt-container[data-wt-bonus="fall"] .wt-branding-logo {
  width: 34px;
  height: 34px;
  padding: var(--space-2);
}

/* In BONUS, ui.js may add an optional subtitle as a <p> right after .wt-branding */
.wt-container[data-wt-bonus="fall"] .wt-branding+p {
  display: none;
}

.wt-container[data-wt-bonus="fall"] .wt-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  min-width: 0;
}

/* Desktop polish only: keep mobile-first full-bleed */
@media (min-width: 900px) {
  .wt-container[data-wt-bonus="fall"] .wt-card {
    width: min(560px, 100%);
    margin: 0 auto;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-2);
  }
}

.wt-bonus-lane {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 120px;

  /* BONUS lane: base state */
  background:
    linear-gradient(90deg,
      rgb(var(--text-strong) / var(--wt-a-06)) 0%,
      transparent 18%,
      transparent 82%,
      rgb(var(--text-strong) / var(--wt-a-06)) 100%),
    linear-gradient(180deg, rgb(var(--primary) / var(--wt-a-06)), transparent 42%),
    repeating-linear-gradient(0deg,
      rgb(var(--border) / var(--wt-a-10)) 0px,
      rgb(var(--border) / var(--wt-a-10)) 1px,
      transparent 1px,
      transparent 44px);
}

/* BONUS lane: danger contrast (visual only) */
/* BONUS lane: hint the risky bottom area (visual only; tuned so fail line stays dominant) */
.wt-bonus-lane::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(to top, rgb(var(--danger) / var(--wt-a-10)), transparent 72%);
  pointer-events: none;
}

.wt-bonus-chip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: min(92%, 420px);
  margin: 0 auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  padding: var(--space-10) var(--gap-2);
  text-align: center;
  line-height: var(--lh-tight);
  color: rgb(var(--text-strong));
  transition: box-shadow var(--fast), border-color var(--fast), filter var(--fast), opacity var(--fast);
}

/* Micro-juice: spawn pop (no transform conflict with JS translate3d) */
.wt-bonus-chip--spawn {
  animation: wtBonusSpawn var(--wt-anim-bonus-spawn) ease-out both;
}

/* Micro-juice: warning one-shot “hit” when entering the zone */
.wt-bonus-chip--warning-once {
  animation: wtBonusWarningOnce var(--wt-anim-bonus-warning-once) ease-out both;
}

@keyframes wtBonusWarningOnce {
  0% {
    box-shadow: var(--shadow-2);
    filter: none;
  }

  45% {
    box-shadow: 0 0 26px rgb(var(--danger) / var(--wt-a-28));
    filter: contrast(1.04);
  }

  100% {
    box-shadow: var(--shadow-2);
    filter: none;
  }
}

/* min-height 501px: BONUS fall — seuil compact -> normal.
   Objectif: garder des paddings compacts sur petits viewports (ex. paysage),
   puis ré-augmenter légèrement dès que la hauteur le permet (confort + lisibilité). */
@media (min-height: 501px) {
  .wt-bonus-chip {
    padding: var(--space-14) var(--gap-3);
  }
}

/* BONUS fall: typography/spacing tuned for a "Tetris-like" feel */
/* Intentional: tighter type (17px/20px) for faster “arcade” feel; deviation from --fs-* scale is expected. */
.wt-container[data-wt-bonus="fall"] .wt-terms-box {
  padding: var(--space-10);
  margin: var(--space-6) 0;
}

.wt-container[data-wt-bonus="fall"] .wt-term-row {
  gap: var(--space-10);
  padding: var(--space-6) 0;
}

.wt-container[data-wt-bonus="fall"] .wt-term-word {
  font-size: clamp(16px, 2.2vw, 24px);
}

.wt-bonus-chip--warning {
  border-color: rgb(var(--danger) / var(--wt-a-35));
  animation: wtChipPulse var(--wt-anim-chip-flash) ease-in-out infinite;

  /* Cohérence carte ↔ zone danger */
  box-shadow:
    0 0 22px rgb(var(--danger) / var(--wt-a-28)),
    var(--shadow-2);
}

@keyframes wtChipPulse {

  0%,
  100% {
    box-shadow: var(--shadow-2);
  }

  50% {
    box-shadow: 0 0 20px rgb(var(--danger) / var(--wt-a-25));
  }
}

.wt-bonus-chip--pulse-ok {
  animation-name: wtChipFlashOk;
  animation-duration: var(--wt-anim-chip-flash);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.wt-bonus-chip--pulse-bad {
  animation-name: wtChipFlashBad;
  animation-duration: var(--wt-anim-chip-flash);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

@keyframes wtChipFlashOk {
  0% {
    border-color: rgb(var(--border));
    box-shadow: var(--shadow-2);
  }

  35% {
    border-color: rgb(var(--success) / var(--wt-a-85));
    box-shadow: 0 0 22px rgb(var(--success) / var(--wt-a-28));
    filter: contrast(1.03);
  }

  100% {
    border-color: rgb(var(--border));
    box-shadow: var(--shadow-2);
    filter: none;
  }
}

@keyframes wtChipFlashBad {
  0% {
    border-color: rgb(var(--border));
    box-shadow: var(--shadow-2);
  }

  35% {
    border-color: rgb(var(--danger) / var(--wt-a-85));
    box-shadow: 0 0 22px rgb(var(--danger) / var(--wt-a-28));
    filter: contrast(1.03);
  }

  100% {
    border-color: rgb(var(--border));
    box-shadow: var(--shadow-2);
    filter: none;
  }
}

.wt-bonus-fail-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,
      rgb(var(--danger) / var(--wt-a-78)) 0px,
      rgb(var(--danger) / var(--wt-a-78)) 10px,
      rgb(var(--danger) / var(--wt-a-18)) 10px,
      rgb(var(--danger) / var(--wt-a-18)) 16px);
  pointer-events: none;
}

.wt-bonus-fail-line--pulse {
  animation: wtBonusFailPulse var(--wt-anim-bonus-warning-once) ease-out both;
}

@keyframes wtBonusFailPulse {
  0% {
    filter: none;
    opacity: 1;
  }

  45% {
    filter: saturate(1.1) contrast(1.05);
    opacity: 1;
  }

  100% {
    filter: none;
    opacity: 1;
  }
}

.wt-bonus-fail-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-6) var(--space-10);
  border-radius: var(--r-pill);
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--danger) / var(--wt-a-35));
  box-shadow: var(--shadow-1);
  color: rgb(var(--danger-dark));
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.6px;
  pointer-events: none;
}

.wt-bonus-fail-label--pulse {
  animation: wtBonusFailLabelPulse var(--wt-anim-bonus-warning-once) ease-out both;
}

@keyframes wtBonusFailLabelPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  45% {
    transform: translate(-50%, -50%) scale(1.03);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.wt-container[data-wt-bonus="fall"] .wt-choices {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);

  /* Mobile-first: keep answers reachable + safe-area */
  margin-top: auto;
  padding: var(--gap-2);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, rgb(var(--bg)) 70%, transparent);
}

/* Desktop: don't pin answers to the bottom (feels too low in BONUS) */
@media (min-width: 900px) {
  .wt-container[data-wt-bonus="fall"] .wt-choices {
    position: static;
    bottom: auto;
    margin-top: var(--gap-3);
    background: transparent;
    padding-bottom: var(--gap-2);
  }
}

/* min-height 501px: BONUS fall — seuil compact -> normal.
   Sur petite hauteur, on limite les paddings pour préserver le gameplay;
   au-delà, on repasse sur --pad pour une UI plus confortable. */
@media (min-height: 501px) {
  .wt-container[data-wt-bonus="fall"] .wt-choices {
    padding: var(--pad);
    padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  }
}

.wt-container[data-wt-bonus="fall"] .wt-choice {
  padding: var(--space-18) var(--space-14);
  min-height: 60px;
  font-size: 17px;
  text-align: center;
}

.wt-container[data-wt-bonus="fall"] .wt-choice-icon {
  font-size: 20px;
  margin-right: var(--gap-1);
  opacity: var(--wt-a-75);
}

/* ============================================
   ANIMATIONS
   ============================================ */
/* APRES */
.wt-anim-in {
  animation: wtFadeIn var(--wt-anim-fade-in) both;
}

@keyframes wtFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes wtCelebrate {
  0% {
    transform: scale(1);
    filter: none;
    text-shadow: none;
  }

  30% {
    transform: scale(1.08);
    text-shadow:
      0 10px 24px rgb(var(--success) / var(--wt-a-14)),
      0 4px 10px rgb(var(--success) / var(--wt-a-10));
    filter: saturate(1.08) contrast(1.02);
  }

  60% {
    transform: scale(0.99);
    text-shadow:
      0 6px 16px rgb(var(--success) / var(--wt-a-10));
  }

  100% {
    transform: scale(1);
    filter: none;
    text-shadow: none;
  }
}

.wt-end-score {
  position: relative;
  margin: var(--space-10) 0 2px;
  text-align: center;
}

.wt-end-score__value {
  display: block;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.wt-end-score--celebrate {
  animation: wtCelebrate var(--wt-anim-celebrate) ease-out both;
}

.wt-end-score__burst {
  position: absolute;
  inset: -10px -14px -10px -14px;
  pointer-events: none;
  opacity: 0;
}

.wt-end-score--celebrate .wt-end-score__burst {
  animation: wtEndBurst var(--wt-anim-celebrate) ease-out 1;
}

/* Micro burst: 2 radial “particle rings” (subtle, premium-arcade) */
.wt-end-score__burst::before,
.wt-end-score__burst::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 35%, rgb(var(--success) / var(--wt-a-55)) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 78%, rgb(var(--success) / var(--wt-a-40)) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 22%, rgb(var(--success) / var(--wt-a-55)) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 66%, rgb(var(--success) / var(--wt-a-35)) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 40%, rgb(var(--success) / var(--wt-a-45)) 0 2px, transparent 3px);
  filter: drop-shadow(0 10px 18px rgb(var(--success) / var(--wt-a-10)));
  opacity: var(--wt-a-90);
  transform: scale(0.88);
}

.wt-end-score__burst::after {
  opacity: var(--wt-a-55);
  transform: scale(0.78);
  filter: drop-shadow(0 8px 14px rgb(var(--success) / var(--wt-a-08)));
}

@keyframes wtEndBurst {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }

  25% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}


@keyframes wtLoadingPulse {

  0%,
  100% {
    opacity: var(--wt-a-85);
  }

  50% {
    opacity: 1;
  }
}

@keyframes wtSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wtOverlayPop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bonus chip spawn pop — keep transform free (JS owns translate3d) */
@keyframes wtBonusSpawn {
  0% {
    opacity: 0;
    filter: saturate(1.03);
    box-shadow: var(--shadow-1);
  }

  60% {
    opacity: 1;
    filter: saturate(1.02);
    box-shadow: var(--shadow-2);
  }

  100% {
    opacity: 1;
    filter: none;
    box-shadow: var(--shadow-2);
  }
}

/* ============================================
   ACCESSIBILITY PREFERENCES
   ============================================ */
@media (prefers-contrast: more) {

  .wt-card,
  .wt-btn--secondary,
  .wt-choice,
  .wt-feedback {
    border-color: rgb(var(--text-muted));
  }

  /* Make translucent interactive surfaces solid for clearer boundaries */
  .wt-btn-icon {
    background: rgb(var(--surface));
    border-color: rgb(var(--text-muted));
  }

  /* Strengthen choice fills (non-semantic: keep decisions readable without color-coding) */
  .wt-choice--same,
  .wt-choice--diff {
    background: rgb(var(--primary) / var(--wt-a-16));
    border-color: rgb(var(--primary) / var(--wt-a-65));
  }
}

@media (prefers-reduced-motion: reduce) {

  .wt-anim-in,
  .wt-pill--danger-pulse,
  .wt-loading-icon,
  .wt-loading-spinner,
  .wt-chance-overlay__content,
  .wt-pill--score-flash,
  .wt-pulse,
  .wt-bonus-chip--spawn,
  .wt-bonus-chip--warning,
  .wt-bonus-chip--warning-once,
  .wt-bonus-chip--pulse-ok,
  .wt-bonus-chip--pulse-bad,
  .wt-bonus-fail-line--pulse,
  .wt-bonus-fail-label--pulse,
  .wt-choice--flash,
  .wt-end-score--celebrate {
    animation: none !important;
  }

  /* Reduced motion: keep HUD deltas visible, but static (no pop/fly). */
  .wt-pill__delta {
    animation: none !important;
  }

  .wt-pill--score-flash .wt-pill__delta,
  .wt-pill--danger-pulse .wt-pill__delta {
    display: inline-block !important;
    opacity: 1 !important;
  }

  .wt-chance-overlay__content {
    transition: none !important;
  }
}


/* ============================================
   DARK MODE
   ============================================ */
/* APRES */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: 2 6 23;
    --surface: 15 23 42;
    --surface-muted: 30 41 59;
    --border: 51 65 85;
    --text-strong: 241 245 249;
    --text: 226 232 240;
    --text-muted: 148 163 184;
    --shadow-color: 2 6 23;

    /* Dark mode accessibility: links + focus rings must pass WCAG AA on --bg */
    --primary-dark: 64 176 224;
  }

  body {
    background:
      radial-gradient(900px 420px at 50% -120px, rgb(var(--primary) / var(--wt-a-13)), transparent 70%),
      radial-gradient(520px 260px at 18% 160px, rgb(var(--success) / var(--wt-a-08)), transparent 70%),
      linear-gradient(180deg, rgb(var(--primary) / var(--wt-a-06)), rgb(var(--bg)) 260px),
      rgb(var(--bg));
  }
}