/* ============================================================================
   BOLTZ — 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 « PASSE ESTHÉTIQUE 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é « atelier mécanique »
   (rouille, laiton), 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:#2b1d10; --bg2:#160e07;
  --panel: linear-gradient(160deg, #3a2716 0%, #201408 100%);
  --panel2: linear-gradient(150deg, #2f1f10 0%, #190f06 100%);
  --panel3: linear-gradient(150deg, #40291a 0%, #24160a 100%);
  --field: linear-gradient(165deg, #2f1f10 0%, #190f06 100%);

  --toon-outline:#fbf1e4;           /* encre ADAPTATIVE (claire en sombre, foncée en clair) */
  --toon-outline-ink:#1c1006;      /* 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,.24), rgba(255,255,255,0) 48%);
  --muted:#cbb192;

  --accent:#3fcf9e; --accent-hi:#5dffc0; --accent-ink:#062018;
  --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:#fdf6ec; --bg2:#f4e9d7;
  --panel:#ffffff; --panel2:#f8f1e4; --panel3:#efe2c9;
  --field:#f8f1e4;

  --toon-outline:#2b1d10; --toon-outline-ink:#2b1d10; --muted:#7a6141;
  --accent:#1d8f6f; --accent-hi:#2ed99f; --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(43,29,16,.14);
  --shadow-2xl:0 10px 0 var(--toon-outline-ink), 0 26px 48px rgba(43,29,16,.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;
  -webkit-user-select:none; user-select: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, HUD permanent (vies + porte-monnaie) */
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);
}

.back-hub {
  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);
}
.back-hub svg { width:20px; height:20px; display:block; }
@media (hover:hover) and (pointer:fine) {
  .back-hub:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}
.back-hub:active { transform:translateY(1px); box-shadow:none; }
.back-hub: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); }

.hchips { display:flex; gap:var(--cb-gap-sm,6px); }

.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,6px) var(--cb-pad-md,10px);
  font-size:var(--cb-text-xs,.8125rem);
  font-weight:var(--cb-font-bold,700);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  display:inline-flex; align-items:center; gap:var(--cb-gap-sm,5px);
  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; flex:0 0 auto; }
.chip .ic svg { width:100%; height:100%; }
.ic-inline { display:inline-flex; width:1em; height:1em; vertical-align:-.15em; }
.ic-inline svg { width:100%; height:100%; }

.lives-chip { color:var(--danger); }
.wchip.earn { color:var(--gold); border-color:var(--gold); }

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

/* HUD : niveau/coups + accès Mondes/Amis/Accueil */
.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-btn {
  font-family:inherit; width:auto; margin:0; cursor:pointer;
  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);
  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.icon-btn { display:inline-flex; align-items:center; justify-content:center; padding:8px; width:36px; height:36px; }
.chip-btn.icon-btn svg { width:18px; height:18px; }
.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); }
}
.hud .chip-btn:last-child { margin-inline-start:auto; }

/* Plateau : cadre sticker net, zéro glassmorphism. Le rendu intérieur
   (canvas) reste thème-conscient via window.CBTheme, cf src/game.js. */
.board-wrap {
  width:100%;
  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;
}

canvas#c {
  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 : indice / annuler / mélanger — icône + nom au-dessus,
   coût (crédits) en dessous. */
.toolbar { width:100%; display:flex; gap:var(--cb-gap-sm,8px); }

.tool {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-2,2px);
  padding:var(--cb-pad-xs,8px) var(--cb-pad-xs,4px); margin:0;
  border-radius:var(--radius-md);
  background:var(--panel2); color:var(--toon-outline);
  border:var(--toon-outline-w) solid var(--toon-outline);
  font-size:var(--cb-text-xs,12px); font-weight:var(--cb-font-bold,700);
  box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out);
}
.tool .tool-ic { width:20px; height:20px; display:inline-flex; }
.tool .tool-ic svg { width:100%; height:100%; }
.tool small { color:var(--muted); font-weight:var(--cb-font-semibold,600); font-size:.6875rem; display:inline-flex; align-items:center; gap:3px; }
@media (hover:hover) and (pointer:fine) {
  .tool:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}
.tool:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.tool:disabled { opacity:.45; cursor:not-allowed; }
.tool:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }

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);
}

/* --- Overlays : sticker, zéro backdrop-filter --- */
.overlay {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(22,14,7,.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(43,29,16,.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;
  -webkit-overflow-scrolling:touch;
  text-align:center;
  box-shadow:var(--shadow-xl);
  animation:card-in var(--dur-slow) var(--ease-bounce) both;
}
.overlay .card.wide { width:min(440px,94vw); text-align:start; }

@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);
  text-align:center;
}
.overlay .card.wide h2 { text-align:start; }

.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);
  text-align:center;
}
.overlay .card.wide .sub { text-align:start; }

/* --- 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,12px) var(--cb-pad-lg,16px);
  font-size:var(--cb-text-base,15px);
  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,9px);
  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,.45); cursor:var(--cb-disabled-cursor,not-allowed); }
button:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); box-shadow:var(--focus-shadow); }
button.sm { width:auto; padding:9px 14px; font-size:13px; margin-top:0; }

.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(--info), #8b5bff); color:#fff;
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--info), #8b5bff);
  border-color:var(--toon-outline-ink);
}
@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:normal;
}

/* --- Accueil --- */
.overlay .card.home { padding:var(--cb-space-28,26px) 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,44px);
  line-height:1;
  margin-bottom:var(--cb-space-8,6px);
  color:var(--toon-outline);
  text-align:center;
}
.logo b { color:var(--gold); }
.overlay .card.home .sub { text-align:center; }

.stats { display:flex; gap:var(--cb-gap-md,8px); margin-bottom:var(--cb-space-8,10px); }
.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,10px) var(--cb-pad-xs,6px);
  box-shadow:var(--shadow-xs);
}
.stat .lbl {
  font-size:.6875rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-weight:var(--cb-font-bold,700); margin-bottom:2px;
}
.stat .val {
  font-size:var(--cb-heading-sm,20px); font-weight:var(--cb-font-black,800);
  font-variant-numeric:tabular-nums; color:var(--gold);
}

/* --- Win / stuck --- */
.badge {
  display:inline-block; background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  color:var(--gold-ink); font-weight:var(--cb-font-black,900); font-size:.6875rem;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--cb-radius-pill,999px); padding:6px 14px; margin-bottom:8px;
  border:1.5px solid var(--toon-outline-ink);
}
.badge.warn {
  background:linear-gradient(135deg, var(--danger), var(--danger-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:fit-content; margin:0 auto 10px;
}
.badge.warn .ic-inline { width:1.05em; height:1.05em; }

.overlay .big {
  font-size:2.75rem; font-weight:var(--cb-font-black,900); color:var(--gold);
  margin:var(--cb-space-8,8px) 0 var(--cb-space-2,4px); letter-spacing:2px;
  text-align:center; text-shadow:0 3px 0 var(--toon-outline-ink);
  animation:win-pop var(--dur-slow) var(--ease-bounce);
}
@keyframes win-pop {
  0% { opacity:0; transform:scale(.7); }
  60% { transform:scale(1.08); }
  100% { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce) { .overlay .big { animation:none; } }

/* --- Mondes (grille des 48 niveaux) --- */
.levels-body { max-height:60vh; overflow-y:auto; margin-bottom:10px; }
.world-section h3 {
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  display:flex; justify-content:space-between; margin:14px 0 6px; font-weight:var(--cb-font-bold,700);
}
.world-section h3 small { color:var(--muted); font-weight:var(--cb-font-semibold,600); opacity:.85; }
.level-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }

.lv {
  width:auto; margin:0; padding:8px 2px; border-radius:var(--radius-sm);
  background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline); color:var(--toon-outline);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:12px; font-weight:var(--cb-font-black,800);
  box-shadow:var(--shadow-xs);
}
@media (hover:hover) and (pointer:fine) {
  .lv:not(:disabled):hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}
.lv:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.lv .lv-s { font-size:10px; letter-spacing:1px; }
.lv .lv-s .on { color:var(--gold); }
.lv .lv-s .off { color:var(--muted); opacity:.5; }
.lv.current { border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,193,7,.28), var(--shadow-xs); }
.lv.locked { opacity:.5; box-shadow:none; }
.lv .lv-lock { width:14px; height:14px; color:var(--muted); }
.lv .lv-lock svg { width:100%; height:100%; }

/* --- Amis / classement --- */
.field { display:block; text-align:start; margin-bottom:10px; }
.field span { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:var(--cb-font-semibold,600); }
.field input, .field-row input {
  width:100%; padding:10px 12px; border-radius:var(--radius-md);
  border:var(--toon-outline-w) solid var(--toon-outline);
  background:var(--field); color:var(--toon-outline); font-size:14px; font-family:inherit;
}
.field-row { display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.field-row input { flex:1; }
.friend-groups { display:flex; flex-direction:column; gap:6px; margin:8px 0; }

.group-row {
  width:auto; margin:0; display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; border-radius:var(--radius-md); background:var(--panel2);
  border:var(--toon-outline-w) solid var(--toon-outline); color:var(--toon-outline); font-size:13px;
  box-shadow:var(--shadow-xs); font-weight:var(--cb-font-semibold,600);
}
.group-row.on { border-color:var(--gold); }
.group-row code { color:var(--gold); letter-spacing:1px; }

.tabs { display:flex; gap:4px; margin-inline-start:auto; }
.tabs button { width:auto; margin:0; padding:6px 10px; font-size:11px; background:var(--panel2); border:1.5px solid var(--toon-outline); color:var(--muted); box-shadow:none; }
.tabs button.on { background:var(--gold); color:var(--gold-ink); border-color:var(--gold); }

table.friend-board { width:100%; border-collapse:collapse; margin-top:8px; font-size:13px; }
table.friend-board td { padding:7px 6px; border-bottom:1.5px solid var(--panel3); }

/* --- Toast --- */
.toast {
  position:fixed; inset-inline:0; bottom:calc(16px + env(safe-area-inset-bottom));
  margin-inline:auto; width:max-content; max-width:88vw;
  background:var(--panel);
  background-image:var(--kawaii-sheen), var(--panel);
  color:var(--toon-outline); border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--cb-radius-pill,999px);
  padding:11px 18px; font-size:13px; font-weight:var(--cb-font-bold,700); z-index:9;
  box-shadow:var(--shadow-lg);
  animation:toast-in var(--dur-normal) var(--ease-out);
}
@keyframes toast-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .toast { animation:none; } }

/* --- RTL --- */
html[dir="rtl"] .back-hub svg { transform:scaleX(-1); }
html[dir="rtl"] .hud .chip-btn:last-child { margin-inline-start:auto; }
[dir="rtl"] header { flex-direction:row-reverse; }
[dir="rtl"] .field, [dir="rtl"] .overlay .card.wide, [dir="rtl"] .overlay .card.wide .sub, [dir="rtl"] .overlay .card.wide h2 { text-align:right; }

/* --- Mobile --- */
@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; }
  .overlay .card { padding:20px 16px; width:min(340px,90vw); }
  .logo { font-size:36px; }
  .stats { gap:6px; }
  .stat { padding:8px 6px; }
  button { padding:12px 14px; font-size:14px; margin-top:8px; }
  .overlay h2 { margin:0 0 6px; font-size:1.3rem; }
  .overlay .big { font-size:2.35rem; }
  .level-grid { grid-template-columns:repeat(5, 1fr); }
}

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