/* ============================================================================
   BRIKZ — KAWAII CARTOON B (charte flotte, style B validé porteur 2026-09-11) :
   aplats + matière 2 tons + ombre « sticker » PLATE (zéro flou/backdrop-
   filter), contour épais net, reflet kawaii en 2e couche de background. Thème
   piloté par html[data-theme] (/_kit/theme.js, cf <head>) — remplace l'ancien
   style « CB-Arcade Premium » (glassmorphism rgba + @media prefers-color-
   scheme seul, ignorait le choix explicite fait sur le hub — même piège déjà
   documenté pour d'autres jeux dans BACKLOG.md).

   Le CHROME (header, HUD, barre d'outils, overlays/cartes, boutons) reçoit le
   kawaii ; le plateau (canvas) garde son identité arcade rétro propre, mais
   suit désormais lui aussi le thème EXPLICITE du hub (window.CBTheme, cf
   src/game.js `isDarkMode()`), pas seulement l'OS. Mêmes tokens d'espacement/
   rayon/typo que kit-design.css (`--cb-space-*`/`--cb-radius-*`/`--cb-font-*`)
   : seule l'IDENTITÉ (couleurs, ombres, contours) change.
   ========================================================================== */
:root {
  --bg1:#141b3e; --bg2:#0b0f26;
  --panel: linear-gradient(160deg, #232c5e 0%, #141a3a 100%);
  --panel2: linear-gradient(150deg, #1c2452 0%, #10152f 100%);
  --panel3: linear-gradient(150deg, #2a3468 0%, #1a2050 100%);
  --field: linear-gradient(165deg, #1c2452 0%, #10152f 100%);

  --toon-outline:#eef1ff;           /* encre ADAPTATIVE (claire en sombre, foncée en clair) */
  --toon-outline-ink:#0a0d22;      /* encre TOUJOURS foncée (posée sur du vif) */
  --toon-outline-w:2.5px;
  --kawaii-sheen: radial-gradient(circle at 30% 26%, rgba(255,255,255,.26), rgba(255,255,255,0) 48%);
  --muted:#98a1d6;

  --accent:#38e08b; --accent-hi:#5dffb0; --accent-ink:#062015;
  --gold:#ffc107; --gold-hi:#ffd54f; --gold-dark:#c98200; --gold-ink:#241a02;
  --danger:#ff5f7d; --danger-dark:#8a1f34;
  --info:#5b8cff;

  --accent-fg:var(--gold);       /* teinte "valeur/monnaie" dans le chrome */
  --accent-bright:var(--gold);

  --radius-lg:16px; --radius-md:12px; --radius-sm:9px; --radius-xs:6px;

  /* Ombres « sticker » : PLATES, zéro flou — une marche d'escalier encre. */
  --shadow-xs:0 2px 0 var(--toon-outline-ink);
  --shadow-sm:0 3px 0 var(--toon-outline-ink);
  --shadow-md:0 4px 0 var(--toon-outline-ink);
  --shadow-lg:0 6px 0 var(--toon-outline-ink);
  --shadow-xl:0 8px 0 var(--toon-outline-ink), 0 18px 32px rgba(0,0,0,.35);
  --shadow-2xl:0 10px 0 var(--toon-outline-ink), 0 26px 48px rgba(0,0,0,.40);
  --shadow-inset:none;

  --dur-instant:.08s; --dur-fast:.14s; --dur-normal:.18s;
  --dur-slow:.28s; --dur-deliberate:.38s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.38,.1,.2,1);
  --ease-bounce:cubic-bezier(.175,.885,.32,1.275);
  --ease-subtle:cubic-bezier(.4,0,.6,1);

  --focus-ring:2px solid var(--gold);
  --focus-offset:2px;
  --focus-shadow:0 0 0 4px rgba(255,193,7,.28);
  --active-scale:.96;

  color-scheme:dark;
}

html[data-theme="light"] {
  --bg1:#fbf9f2; --bg2:#f2efe4;
  --panel:#ffffff; --panel2:#f6f4ea; --panel3:#ece8d9;
  --field:#f6f4ea;

  --toon-outline:#1d2355; --toon-outline-ink:#1d2355; --muted:#6a70a0;
  --accent:#1d8f5c; --accent-hi:#2ed97f; --accent-ink:#ffffff;
  --gold:#b3700a; --gold-hi:#d4af37; --gold-dark:#8a5600; --gold-ink:#ffffff;
  --danger:#c1423a; --danger-dark:#7a1f1f;
  --info:#2a5ec9;
  --accent-fg:var(--gold); --accent-bright:var(--gold);

  --shadow-xl:0 8px 0 var(--toon-outline-ink), 0 18px 32px rgba(29,35,85,.14);
  --shadow-2xl:0 10px 0 var(--toon-outline-ink), 0 26px 48px rgba(29,35,85,.16);
  color-scheme:light;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

@media (prefers-contrast:more) {
  :root { --focus-ring:2px solid var(--gold); }
}

html, body {
  margin:0; height:100%;
  background:linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--toon-outline);
  font-family:var(--cb-font-family,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  font-size:var(--cb-text-base,.9375rem); line-height:var(--cb-line-height-normal,1.35);
  font-weight:var(--cb-font-regular,400);
  overscroll-behavior:none; touch-action:none;
  transition:background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}

#wrap {
  max-width:520px; margin:0 auto;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  display:flex; flex-direction:column; align-items:center; gap:8px; min-height:100%;
}

/* Header : retour hub, marque, scores */
header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:var(--cb-pad-md,12px) var(--cb-pad-xs,8px) var(--cb-space-2,4px);
  gap:var(--cb-gap-md,8px);
}

.hub-back {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 auto;
  background:var(--panel2); color:var(--toon-outline);
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:50%; box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.hub-back svg { width:20px; height:20px; display:block; }
.hub-back:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.hub-back:active { transform:translateY(1px); box-shadow:none; }
.hub-back:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }

.brand {
  font-weight:var(--cb-font-black,800);
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-size:var(--cb-heading-md,24px);
  line-height:1;
}
.brand b { color:var(--gold); }

.scores { display:flex; gap:var(--cb-gap-xl,16px); }
.score { text-align:end; display:flex; flex-direction:column; gap:var(--cb-space-1,2px); }
.score .lbl {
  font-size:var(--cb-text-xs,.8125rem); color:var(--muted);
  text-transform:uppercase; letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-weight:var(--cb-font-semibold,600);
}
.score .val {
  font-size:var(--cb-heading-md,24px); font-weight:var(--cb-font-black,800);
  font-variant-numeric:tabular-nums; color:var(--toon-outline);
}
.score .val.bump { animation:wave-bounce var(--dur-slow) var(--ease-bounce) both; }

.board-wrap { position:relative; width:100%; }

/* Rangee degagee (laser, ou outil "degager la rangee") : ondelette bordant le
   plateau (cf. @keyframes block-ripple). Purement decoratif. */
.board-wrap.ripple::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius-lg);
  border:2px solid var(--gold); pointer-events:none;
  animation:block-ripple var(--dur-deliberate) var(--ease-out) both;
}

footer {
  color:var(--muted); font-size:var(--cb-text-xs,.8125rem); text-align:center;
  padding:var(--cb-pad-xs,8px) var(--cb-pad-xs,4px) var(--cb-space-1,6px);
  line-height:var(--cb-line-height-relaxed,1.5);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  font-weight:var(--cb-font-semibold,600);
}

/* HUD : porte-monnaie mutualisé + réserve de balles */
.hud {
  width:100%; display:flex; gap:var(--cb-gap-md,8px); align-items:center;
  padding:var(--cb-pad-sm,8px) var(--cb-pad-xs,6px);
  justify-content:flex-start; flex-wrap:wrap;
}

.chip {
  background:var(--panel2); color:var(--toon-outline);
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--cb-radius-pill,999px);
  padding:var(--cb-pad-sm,8px) var(--cb-pad-md,12px);
  font-size:var(--cb-text-xs,0.8125rem);
  font-weight:var(--cb-font-bold,700);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  display:flex; align-items:center; gap:var(--cb-gap-sm,6px);
  font-variant-numeric:tabular-nums;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.chip .ic { display:inline-flex; width:1.1em; height:1.1em; align-items:center; justify-content:center; }
.chip .ic svg { width:100%; height:100%; }

.chip.pulse { animation:chip-pop var(--dur-slow) var(--ease-bounce) forwards; }
@keyframes chip-pop {
  0%{ transform:scale(1); }
  45%{ transform:scale(1.15); }
  70%{ transform:scale(.98); }
  100%{ transform:scale(1); }
}

@media (hover:hover) and (pointer:fine) {
  .chip:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

.chip-btn {
  font-family:inherit; width:auto; margin:0;
  padding:var(--cb-pad-xs,8px) var(--cb-pad-md,12px);
  font-size:var(--cb-text-sm,14px);
  font-weight:var(--cb-font-bold,700);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  background:var(--panel2); color:var(--toon-outline); cursor:pointer;
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--cb-radius-pill,999px);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:var(--shadow-xs);
}
.chip-btn:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.chip-btn:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); box-shadow:var(--focus-shadow); }
@media (hover:hover) and (pointer:fine) {
  .chip-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

/* Solde "Gagner" (◆, credite par le serveur uniquement) : teinte or. */
#earn-chip { color:var(--gold); border-color:var(--gold); }

/* Plateau : cadre sticker net, zero glassmorphism. Le rendu intérieur
   (canvas) reste thème-conscient via window.CBTheme, cf src/game.js. */
.board-wrap {
  padding:var(--cb-pad-md,12px);
  border-radius:var(--radius-lg);
  background:var(--field);
  border:var(--toon-outline-w) solid var(--toon-outline);
  box-shadow:var(--shadow-lg);
  margin:var(--cb-gap-md,8px) 0;
  position:relative;
}

canvas {
  width:100%; height:auto; display:block;
  border-radius:var(--radius-md);
  touch-action:none;
  image-rendering:crisp-edges;
  backface-visibility:hidden;
  transform:translateZ(0);
  border:2px solid var(--toon-outline-ink);
}

/* Barre d'outils (AXE D) : outils COMPACTS en rangee, icone + nom au-dessus
   + cout en dessous (credits, ou ▶ = pub quand le solde ne suffit pas). */
.toolbar {
  width:100%; display:flex; gap:var(--cb-gap-sm,6px);
  padding:0 var(--cb-pad-xs,4px); flex-wrap:wrap; justify-content:center;
}
.toolbar[hidden] { display:none; }

.tool-btn {
  font-family:inherit; cursor:pointer; color:var(--toon-outline);
  display:inline-flex; width:auto; flex:1 1 0; min-width:0; margin:0;
  text-transform:none; letter-spacing:normal; white-space:nowrap;
  align-items:center; justify-content:center; gap:var(--cb-gap-sm,6px);
  padding:var(--cb-pad-xs,8px) var(--cb-pad-md,12px);
  border-radius:var(--radius-md);
  border:var(--toon-outline-w) solid var(--toon-outline);
  background:var(--panel2);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out);
}
.tool-btn .ico { width:1.2em; height:1.2em; flex:0 0 auto; display:inline-flex; }
.tool-btn .ico svg { width:100%; height:100%; }
.tool-btn .tmeta { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; min-width:0; }
.tool-btn .tname {
  font-size:var(--cb-text-xs,.8125rem); font-weight:var(--cb-font-bold,700);
  opacity:.92; white-space:nowrap;
}
.tool-btn .cost {
  font-size:var(--cb-text-sm,.875rem); font-weight:var(--cb-font-black,800);
  color:var(--gold); font-variant-numeric:tabular-nums;
}
.tool-btn:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.tool-btn:disabled { opacity:.45; cursor:default; }
.tool-btn:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }

@media (hover:hover) and (pointer:fine) {
  .tool-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

/* Overlays : sticker, zéro backdrop-filter */
.overlay {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(10,13,34,.62);
  z-index:5;
  padding:max(var(--cb-pad-lg,16px),env(safe-area-inset-top))
      max(var(--cb-pad-lg,16px),env(safe-area-inset-right))
      max(var(--cb-pad-lg,16px),env(safe-area-inset-bottom))
      max(var(--cb-pad-lg,16px),env(safe-area-inset-left));
  animation:overlay-in var(--dur-normal) var(--ease-out);
}
html[data-theme="light"] .overlay { background:rgba(29,35,85,.32); }

@keyframes overlay-in { from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce) { .overlay { animation:none; } }

.overlay.show { display:flex; }

.overlay .card {
  background:var(--panel);
  background-image:var(--kawaii-sheen), var(--panel);
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--cb-radius-modal,20px);
  padding:var(--cb-pad-lg,24px) var(--cb-pad-lg,20px);
  width:min(380px,92vw);
  max-height:92vh;
  overflow-y:auto;
  text-align:center;
  box-shadow:var(--shadow-xl);
  animation:card-in var(--dur-slow) var(--ease-bounce) both;
}

@keyframes card-in {
  from { opacity:0; transform:translateY(24px) scale(.92); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce) { .overlay .card { animation:none; opacity:1; } }

.overlay h2 {
  margin:0 0 var(--cb-space-8,8px);
  font-size:var(--cb-heading-lg,1.5rem);
  font-weight:var(--cb-font-black,800);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
}

.overlay .big {
  font-size:3.5rem; font-weight:var(--cb-font-black,900);
  color:var(--gold);
  margin:var(--cb-space-8,8px) 0 var(--cb-space-2,4px);
  font-variant-numeric:tabular-nums; line-height:1;
  animation:win-pop var(--dur-slow) var(--ease-bounce);
}
@keyframes win-pop {
  0% { opacity:0; transform:scale(.7); }
  60% { transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}

.overlay .sub {
  color:var(--muted); font-size:var(--cb-text-base,.9375rem);
  margin-bottom:var(--cb-space-16,16px); line-height:var(--cb-line-height-relaxed,1.5);
}

.record {
  color:var(--gold); font-weight:var(--cb-font-black,800);
  font-size:var(--cb-text-base,.9375rem);
  margin-bottom:var(--cb-space-12,12px);
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  text-transform:uppercase;
}
.record[hidden] { display:none; }

/* Boutons — sticker plat, ombre en marche d'escalier, reflet en 2e couche */
button {
  border:0; border-radius:var(--radius-md);
  padding:var(--cb-pad-md,14px) var(--cb-pad-lg,16px);
  font-size:var(--cb-text-base,.9375rem);
  font-weight:var(--cb-font-black,800);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  width:100%; cursor:pointer; margin-top:var(--cb-space-10,10px);
  font-family:inherit;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:var(--shadow-md);
  border:var(--toon-outline-w) solid var(--toon-outline-ink);
}
button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
button:disabled { opacity:var(--cb-disabled-opacity,.5); cursor:var(--cb-disabled-cursor,not-allowed); }
button:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); box-shadow:var(--focus-shadow); }

.btn-primary {
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--gold-hi), var(--gold));
  color:var(--gold-ink);
}
@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
}

.btn-ghost {
  background:var(--panel2); color:var(--toon-outline); border-color:var(--toon-outline);
}
@media (hover:hover) and (pointer:fine) {
  .btn-ghost:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

.btn-rewarded {
  background:linear-gradient(135deg, var(--accent-hi), var(--accent));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--accent-hi), var(--accent));
  color:var(--accent-ink);
  position:relative;
}
@media (hover:hover) and (pointer:fine) {
  .btn-rewarded:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
}
.btn-rewarded small {
  display:block; font-weight:var(--cb-font-semibold,600);
  opacity:.9; font-size:var(--cb-text-xs,.8125rem);
  margin-top:var(--cb-space-2,4px); letter-spacing:var(--cb-letter-spacing-normal,normal);
  color:var(--accent-ink);
}
.btn-rewarded[hidden] { display:none; }

/* Accueil */
.overlay .card.home {
  padding:var(--cb-space-28,28px) var(--cb-pad-lg,20px) var(--cb-pad-lg,20px);
}

.logo {
  font-weight:var(--cb-font-black,900);
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-size:var(--cb-heading-xl,48px);
  line-height:1;
  margin-bottom:var(--cb-space-8,8px);
  color:var(--toon-outline);
}
.logo b { color:var(--gold); }

.card.home .sub {
  margin-bottom:var(--cb-space-16,16px);
  font-size:var(--cb-heading-xs,1rem);
  color:var(--muted);
}

.stats { display:flex; gap:var(--cb-gap-md,8px); margin-bottom:var(--cb-space-8,8px); }

.stat {
  flex:1; background:var(--panel2);
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--radius-md);
  padding:var(--cb-pad-md,12px) var(--cb-pad-xs,8px);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}
.stat:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }

.stat .lbl {
  font-size:.75rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-weight:var(--cb-font-bold,700); margin-bottom:var(--cb-space-2,4px);
}
.stat .val {
  font-size:var(--cb-heading-md,24px); font-weight:var(--cb-font-black,800);
  font-variant-numeric:tabular-nums; color:var(--gold);
}

/* Progression : prochain objectif + skins */
.goal-card {
  background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--radius-md);
  padding:var(--cb-pad-sm,10px) var(--cb-pad-md,12px);
  margin-bottom:var(--cb-space-8,8px); text-align:start;
}
.goal-card[hidden] { display:none; }

.goal-label {
  font-size:var(--cb-text-xs,.75rem); color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-weight:var(--cb-font-bold,700); margin-bottom:var(--cb-space-2,4px);
}
.goal-text {
  font-size:var(--cb-text-sm,.875rem); font-weight:var(--cb-font-semibold,600);
  color:var(--toon-outline); margin-bottom:var(--cb-space-4,6px);
}
.goal-bar {
  width:100%; height:8px; background:var(--panel3);
  border:1.5px solid var(--toon-outline); border-radius:var(--cb-radius-pill,999px); overflow:hidden;
}
.goal-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--gold));
  border-radius:var(--cb-radius-pill,999px);
  transition:width var(--dur-slow) var(--ease-out);
}

.skins-label {
  font-size:var(--cb-text-xs,.75rem); color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-weight:var(--cb-font-bold,700); margin-bottom:var(--cb-space-4,6px); text-align:start;
}
.skins-row { display:flex; gap:var(--cb-gap-sm,8px); flex-wrap:wrap; margin-bottom:var(--cb-space-8,8px); }

.skin-swatch {
  width:34px; height:34px; margin:0; padding:0; flex:0 0 auto;
  border-radius:50%;
  background:var(--kawaii-sheen), var(--sw-color,#f0f4fa);
  border:2px solid var(--toon-outline-ink);
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out);
}
.skin-swatch:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.skin-swatch.active { border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,193,7,.35), var(--shadow-xs); }
.skin-swatch.locked { background:var(--panel3); opacity:.5; cursor:default; box-shadow:none; }
.skin-swatch:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
@media (hover:hover) and (pointer:fine) {
  .skin-swatch:not(.locked):not(.active):hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

/* Célébration : moments clés (vagues, records) */
.celebrate {
  position:absolute; inset-inline:0; top:24%;
  text-align:center; pointer-events:none;
  font-size:40px; font-weight:var(--cb-font-black,900);
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  color:var(--gold);
  text-shadow:0 3px 0 var(--toon-outline-ink);
  opacity:0;
}
.celebrate.show { animation:celebrate-pop 1.2s var(--ease-bounce) both; }
@keyframes celebrate-pop {
  0%   { opacity:0; transform:scale(.1) rotate(-25deg); }
  12%  { opacity:1; transform:scale(1.28) rotate(8deg); }
  30%  { transform:scale(1.08) rotate(-2deg); }
  50%  { transform:scale(1.02) rotate(0); }
  100% { opacity:0; transform:scale(1.15) translateY(-48px); }
}

/* Confetti : rafale festive a l'ecran de fin, sur nouveau record uniquement. */
.confetti { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.confetti-piece {
  position:absolute; top:-14px; width:7px; height:13px; border-radius:2px;
  opacity:.95; animation:confetti-fall 1.7s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes confetti-fall {
  0%   { transform:translateY(-14px) rotate(0deg); opacity:1; }
  100% { transform:translateY(120vh) rotate(420deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .confetti-piece { animation:none; display:none; } }

/* Toast */
.toast {
  position:fixed; left:50%;
  bottom:calc(var(--cb-space-18,18px) + env(safe-area-inset-bottom));
  z-index:9;
  background:var(--panel);
  background-image:var(--kawaii-sheen), var(--panel);
  border:var(--toon-outline-w) solid var(--toon-outline);
  color:var(--toon-outline);
  padding:var(--cb-pad-md,14px) var(--cb-pad-lg,20px);
  border-radius:var(--cb-radius-pill,999px);
  font-size:var(--cb-text-base,.9375rem);
  font-weight:var(--cb-font-bold,700);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  max-width:88vw; text-align:center;
  opacity:0; pointer-events:none;
  transition:all var(--dur-normal) var(--ease-out);
  transform:translate(-50%, 16px);
  box-shadow:var(--shadow-lg);
}
.toast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }

/* ============================================================================
   NIVEAUX — liste des objectifs fixes (ecran secondaire, cf src/game.js
   renderLevels()) — memes tokens que la liste de Defis ci-dessous.
   ============================================================================ */
.level-row {
  display:flex; align-items:center; gap:var(--cb-gap-md,8px);
  padding:11px 0; border-top:1px solid var(--panel3);
  text-align:left;
  transition:opacity var(--dur-normal) var(--ease-out);
}
.level-row:first-child { border-top:0; }
.level-row.locked { opacity:.55; }

.level-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.level-dot.tier-bronze   { background:#cd7f32; }
.level-dot.tier-silver   { background:#b9c2cc; }
.level-dot.tier-gold     { background:var(--gold); }
.level-dot.tier-platinum { background:#7ad0ff; }
.level-dot.tier-diamond  { background:#c05cff; }

.level-info { flex:1; font-size:14px; font-weight:var(--cb-font-bold,700); }
.level-info small { display:block; color:var(--muted); font-size:11px; font-weight:var(--cb-font-semibold,600); margin-top:2px; opacity:.85; }

.level-row button { width:auto; margin:0; padding:10px 14px; font-size:13px; white-space:nowrap; }

.level-icon { width:20px; height:20px; flex:none; color:var(--muted); }
.level-row.done .level-icon { color:var(--accent); }

[dir="rtl"] .level-info { text-align:right; }
[dir="rtl"] .brand, [dir="rtl"] .logo { letter-spacing:normal; }
[dir="rtl"] header { flex-direction:row-reverse; }
[dir="rtl"] .scores { flex-direction:row-reverse; }

/* Mobile responsiveness */
@media (max-width:400px) {
  #wrap { gap:6px; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
                              max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  header { padding:var(--cb-pad-xs,8px) var(--cb-space-2,4px) var(--cb-space-1,2px); gap:8px; }
  .brand { font-size:20px; }
  .score { gap:2px; }
  .score .val { font-size:20px; }
  .overlay .card { padding:20px 16px; width:min(340px,90vw); }
  .logo { font-size:40px; margin-bottom:6px; }
  .stats { gap:6px; }
  .stat { padding:10px 6px; }
  button { padding:12px 14px; font-size:15px; margin-top:8px; }
  .overlay h2 { margin:0 0 6px; font-size:1.35rem; }
  .overlay .big { font-size:3rem; }
}

@media (max-height:600px) {
  .board-wrap { margin:6px 0; padding:8px; }
  footer { padding:6px 4px 4px; font-size:0.75rem; }
}

/* ============================================================================
   DÉFIS — bandeau en jeu + liste de niveaux (cf. src/challenges.js). Mode À
   CÔTÉ du sans-fin : mêmes tokens que le reste de l'écran, zéro emoji.
   ========================================================================== */
.challenge-bar {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--cb-gap-md,8px);
  padding:var(--cb-pad-sm,8px) var(--cb-pad-md,12px);
  border-radius:var(--radius-md);
  background:var(--panel2);
  border:var(--toon-outline-w) solid var(--toon-outline);
  box-shadow:var(--shadow-xs);
}
.challenge-bar[hidden] { display:none; }

.cb-info { display:flex; align-items:center; gap:var(--cb-gap-sm,6px); flex-wrap:wrap; min-width:0; }

.cb-level { font-weight:var(--cb-font-black,800); font-size:var(--cb-text-sm,.875rem); color:var(--toon-outline); white-space:nowrap; }

.cb-chip {
  font-size:var(--cb-text-xs,.8125rem); font-weight:var(--cb-font-semibold,600);
  color:var(--gold-dark); background:var(--panel3);
  border:1.5px solid var(--gold);
  border-radius:var(--cb-radius-pill,999px);
  padding:2px 9px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
html[data-theme="light"] .cb-chip { color:var(--gold); }

#btn-challenge-quit { margin:0; width:auto; padding:var(--cb-pad-xs,6px) 12px; font-size:var(--cb-text-xs,.8125rem); }

#challenge-list {
  display:flex; flex-direction:column; gap:6px; text-align:start;
  max-height:52vh; overflow-y:auto;
  margin:var(--cb-space-8,8px) 0 var(--cb-space-16,16px);
}

.level-row {
  display:flex; align-items:center; gap:var(--cb-gap-md,8px);
  padding:var(--cb-pad-sm,10px) var(--cb-pad-md,12px);
  border-radius:var(--radius-md);
  background:var(--panel2);
  border:var(--toon-outline-w) solid var(--toon-outline);
  transition:all var(--dur-fast) var(--ease-out);
}
.level-row.done { border-color:var(--gold); background:var(--panel3); }
.level-row.locked { opacity:.55; }

.level-row .lv-num {
  width:28px; height:28px; flex:none;
  border-radius:var(--cb-radius-pill,999px);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--cb-font-black,800); font-size:.8125rem;
  background:var(--panel3); border:1.5px solid var(--toon-outline);
}
.level-row.done .lv-num { background:var(--gold); color:var(--gold-ink); border-color:var(--gold); }

.level-row .lv-info { flex:1; min-width:0; }
.level-row .lv-tier {
  font-size:.6875rem; text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  color:var(--muted); font-weight:var(--cb-font-semibold,600); opacity:.9;
}
.level-row .lv-meta { font-size:var(--cb-text-xs,.8125rem); color:var(--muted); margin-top:1px; }

.level-row .lv-target { flex:none; display:flex; align-items:center; gap:var(--cb-gap-sm,6px); }
.level-row .lv-wave {
  min-width:34px; height:28px; padding:0 8px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--cb-font-black,800); font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  background:var(--panel3); color:var(--gold);
  border:1.5px solid var(--toon-outline);
}

.level-row .lv-icon { width:18px; height:18px; color:var(--muted); flex:none; }
.level-row.done .lv-icon { color:var(--gold); }

.level-row button.lv-play { width:auto; margin:0; padding:8px 14px; font-size:.8125rem; }

[dir="rtl"] .level-row { text-align:right; }
[dir="rtl"] .challenge-bar { flex-direction:row-reverse; }

/* ============================================================================
   ANIMATIONS
   ============================================================================ */
@keyframes wave-bounce {
  0%{ transform:scale(1); }
  35%{ transform:scale(1.12) rotate(3deg); }
  70%{ transform:scale(.98) rotate(-2deg); }
  100%{ transform:scale(1); }
}
@keyframes block-ripple {
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1.8); opacity:0; }
}