/* ============================================================================
   STAKZ — 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 « glassmorphism » (backdrop-filter + @media prefers-color-scheme
   seul, ignorait le choix explicite fait sur le hub — même piège déjà
   documenté fleet-wide dans BACKLOG.md).

   IDENTITÉ conservée : le CHROME (header, HUD, barre d'outils, overlays/
   cartes, boutons) reçoit le kawaii ; le plateau (canvas — tour de blocs,
   décor procédural par zone) garde son identité arcade propre (aplats +
   pseudo-3D légère, cf src/render.js), mais suit désormais lui aussi le
   thème EXPLICITE du hub (window.CBTheme, cf src/game.js `isDarkTheme()`),
   pas seulement l'OS. Or = accent de valeur (crédits/étoiles), menthe = pub
   récompensée, mêmes couleurs de zone qu'avant (posées en inline `--zc` par
   `buildZoneGrid()`, indépendantes de cette feuille).
   ========================================================================== */
:root {
  --bg1:#141a2b; --bg2:#0b0e17;
  --panel: linear-gradient(160deg, #232b45 0%, #131826 100%);
  --panel2: linear-gradient(150deg, #1c2338 0%, #0f1420 100%);
  --panel3: linear-gradient(150deg, #2a3350 0%, #161c2c 100%);
  --field: linear-gradient(165deg, #1c2338 0%, #0f1420 100%);

  --toon-outline:#f3f6fb;           /* encre ADAPTATIVE (claire en sombre, foncée en clair) */
  --toon-outline-ink:#0a0c14;      /* 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:#9aa4bd;

  --gold:#ffc20e; --gold-hi:#ffdb6b; --gold-dark:#c9930a; --gold-ink:#241a04;
  --mint:#2ee6a6; --mint-hi:#7bf2c8; --mint-dark:#1cbb85; --mint-ink:#062015;
  --danger:#ff6b63; --danger-dark:#d94d47;

  --accent-fg:var(--gold);
  --accent-bright:var(--gold);

  --radius-lg:18px; --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);

  --dur-fast:.14s; --dur-normal:.18s; --dur-slow:.28s;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.175,.885,.32,1.275);

  --focus-ring:2px solid var(--gold);
  --focus-offset:2px;
  --focus-shadow:0 0 0 4px rgba(255,194,14,.28);

  color-scheme:dark;
}

html[data-theme="light"] {
  --bg1:#eef1fb; --bg2:#e2e7f5;
  --panel:#ffffff; --panel2:#f2f4fb; --panel3:#e7eaf7;
  --field:#f2f4fb;

  --toon-outline:#131826; --toon-outline-ink:#131826; --muted:#5b6688;
  --gold:#a5710a; --gold-hi:#c98f1f; --gold-dark:#7a5406; --gold-ink:#ffffff;
  --mint:#12946b; --mint-hi:#1bb884; --mint-dark:#0c6e4f; --mint-ink:#ffffff;
  --danger:#c1423a; --danger-dark:#8a1f1f;
  --accent-fg:var(--gold); --accent-bright:var(--gold);

  --shadow-xl:0 8px 0 var(--toon-outline-ink), 0 18px 32px rgba(19,24,38,.14);
  color-scheme:light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--cb-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--toon-outline);
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow: hidden; overscroll-behavior: none; user-select: none;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:root {
  --safe-t: max(0px, env(safe-area-inset-top, 0px));
  --safe-r: max(0px, env(safe-area-inset-right, 0px));
  --safe-b: max(0px, env(safe-area-inset-bottom, 0px));
  --safe-l: max(0px, env(safe-area-inset-left, 0px));
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; }
h2 { font-size: var(--cb-heading-lg, 1.5rem); font-weight: var(--cb-font-black, 800); margin: 0 0 8px; }

#wrap {
  max-width: 460px; margin: 0 auto; height: 100%;
  display: flex; flex-direction: column; padding: 12px 16px 16px;
  gap: 12px;
}

/* ---- En-tête ---- */
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-weight: var(--cb-font-black, 800); font-size: var(--cb-heading-md, 1.25rem); letter-spacing: .01em; }
.brand b { color: var(--gold); }
.wallet-hud { display: flex; gap: 8px; }
.wchip {
  display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  background: var(--panel2); color: var(--toon-outline); border: var(--toon-outline-w) solid var(--toon-outline);
  font-weight: var(--cb-font-bold, 700); font-size: var(--cb-text-sm, .875rem); box-shadow: var(--shadow-xs);
}
.wchip.earn { color: var(--gold); border-color: var(--gold); }
.wchip .ic { font-size: 1em; }

/* ---- HUD de jeu ---- */
.hud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--panel2); border: var(--toon-outline-w) solid var(--toon-outline);
  font-weight: var(--cb-font-bold, 700); font-size: var(--cb-text-sm, .875rem); color: var(--toon-outline);
  box-shadow: var(--shadow-xs);
}
.chip small { color: var(--muted); font-weight: var(--cb-font-semibold, 600); margin-inline-start: 2px; }
.chip.lives .ic { color: var(--danger); }
.chip.combo { color: var(--gold); border-color: var(--gold); }
.chip.combo small { color: var(--gold); opacity: .85; }
.chip.zone { color: var(--gold); border-color: var(--gold); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn {
  border: var(--toon-outline-w) solid var(--toon-outline); background: var(--panel2); color: var(--toon-outline);
  cursor: pointer; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chip-btn.round { padding: 8px; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin-inline-start: auto; }
.chip-btn.round + .chip-btn.round { margin-inline-start: 0; }
.chip-btn:active { transform: translateY(2px); box-shadow: none; }
.chip-btn:focus-visible, button: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 { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}

/* ---- Zone de jeu ---- */
.board-frame {
  position: relative; flex: 1; min-height: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-xl); border: var(--toon-outline-w) solid var(--toon-outline);
  aspect-ratio: 420 / 680; max-height: 100%; margin: 0 auto; width: 100%;
  touch-action: none; background: var(--field); cursor: pointer;
}
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- Barre de stabilité de la tour ---- */
.stability-bar {
  position: absolute; top: 12px; left: 12px; right: 12px; height: 8px;
  border-radius: 999px; background: var(--toon-outline-ink); overflow: hidden;
  border: 1.5px solid var(--toon-outline-ink); box-shadow: var(--shadow-xs);
}
.stability-bar .fill {
  height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-dark), var(--mint));
  transition: width var(--dur-normal) var(--ease-out), background var(--dur-normal);
}
.stability-bar .fill.low { background: linear-gradient(90deg, var(--danger-dark), var(--danger)); }

.zone-banner {
  position: absolute; top: 30px; left: 50%; transform: translate(-50%, -14px);
  padding: 8px 18px; border-radius: 999px; background: var(--panel2);
  border: var(--toon-outline-w) solid var(--gold);
  font-weight: var(--cb-font-black, 800); letter-spacing: .04em; text-transform: uppercase; font-size: var(--cb-text-sm, .875rem);
  color: var(--gold); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-bounce);
  box-shadow: var(--shadow-sm);
}
.zone-banner.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- Barre d'outils ---- */
.tools { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.tool {
  flex: 1 1 0; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 7px; border-radius: var(--radius-md); background: var(--panel2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  color: var(--toon-outline); cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tool b { font-size: 20px; line-height: 1; color: var(--gold); }
.tool span { font-size: 10px; font-weight: var(--cb-font-semibold, 600); white-space: nowrap; }
.tool small { font-size: 10px; color: var(--muted); font-weight: var(--cb-font-bold, 700); }
.tool:active { transform: translateY(2px); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--gold); }
}

footer#hint-line { text-align: center; font-size: var(--cb-text-xs, .8rem); color: var(--muted); padding-top: 2px; }

/* ---- Overlays : sticker, zéro backdrop-filter ---- */
.overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10,12,20,.62);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-normal) var(--ease-out);
}
html[data-theme="light"] .overlay { background: rgba(19,24,38,.32); }
.overlay.show { opacity: 1; pointer-events: auto; }
.card {
  width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto;
  background: var(--panel); background-image: var(--kawaii-sheen), var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline); border-radius: var(--radius-lg);
  padding: 26px 24px 20px; box-shadow: var(--shadow-xl);
  text-align: center; transform: translateY(10px) scale(.98); transition: transform var(--dur-slow) var(--ease-bounce);
}
.overlay.show .card { transform: none; }
.logo { font-size: var(--cb-heading-xl, 2rem); font-weight: var(--cb-font-black, 800); margin-bottom: 4px; color: var(--toon-outline); }
.logo b, .card h2 b { color: var(--gold); }
.sub { color: var(--muted); font-size: var(--cb-text-sm, .875rem); margin-bottom: 12px; }
.sub.tiny { font-size: var(--cb-text-xs, .8rem); }
.muted { color: var(--muted); font-size: var(--cb-text-xs, .8rem); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.stat { background: var(--panel2); border-radius: var(--radius-md); padding: 8px 4px; border: var(--toon-outline-w) solid var(--toon-outline); box-shadow: var(--shadow-xs); }
.stat .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--cb-font-semibold, 600); }
.stat .val { font-size: var(--cb-heading-sm, 1.05rem); font-weight: var(--cb-font-black, 800); color: var(--gold); }

.row { display: flex; gap: 8px; }
.row .half { flex: 1; }

button { font-family: inherit; }
.btn-primary, .btn-ghost, .btn-rewarded {
  display: block; width: 100%; border: var(--toon-outline-w) solid var(--toon-outline-ink); border-radius: var(--radius-md); padding: 13px 16px;
  font-size: var(--cb-text-base, .9375rem); font-weight: var(--cb-font-black, 800); cursor: pointer; margin-bottom: 8px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); text-align: center;
  box-shadow: var(--shadow-md);
}
.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);
}
.btn-primary:active { transform: translateY(2px); box-shadow: none; }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { background: var(--panel2); color: var(--toon-outline); border-color: var(--toon-outline); }
.btn-ghost:active { transform: translateY(2px); box-shadow: none; }
.btn-rewarded {
  background: linear-gradient(135deg, var(--mint-hi), var(--mint));
  background-image: var(--kawaii-sheen), linear-gradient(135deg, var(--mint-hi), var(--mint));
  color: var(--mint-ink); display: flex; flex-direction: column; gap: 1px;
}
.btn-rewarded small { font-weight: var(--cb-font-semibold, 600); opacity: .9; font-size: 11px; color: var(--mint-ink); }
.btn-rewarded:active { transform: translateY(2px); box-shadow: none; }
.btn-rewarded[hidden], .btn-ghost[hidden], .btn-primary[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .btn-ghost:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .btn-rewarded:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
}

/* ---- Tutoriel ---- */
.tuto-stage {
  height: 92px; border-radius: var(--radius-md); margin-bottom: 12px;
  border: var(--toon-outline-w) solid var(--toon-outline);
  background: radial-gradient(80% 100% at 50% 100%, rgba(255,194,14,.28), transparent 70%), var(--panel3);
  background-image: var(--kawaii-sheen), radial-gradient(80% 100% at 50% 100%, rgba(255,194,14,.28), transparent 70%), var(--panel3);
}
.tuto-list { list-style: none; margin: 0 0 12px; padding: 0; text-align: start; }
.tuto-list li { padding: 7px 0; border-top: 1.5px solid var(--panel3); font-size: var(--cb-text-sm, .875rem); color: var(--muted); }
.tuto-list li b { color: var(--toon-outline); }

/* ---- Zones (tours) ---- */
.zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.zone-card {
  position: relative; border: var(--toon-outline-w) solid var(--toon-outline); border-radius: var(--radius-md);
  padding: 10px 8px; background: color-mix(in srgb, var(--zc, var(--gold)) 20%, var(--panel2));
  box-shadow: var(--shadow-xs);
  cursor: pointer; text-align: start; font-family: inherit; color: var(--toon-outline);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.zone-card:active { transform: translateY(2px); box-shadow: none; }
.zone-card.locked { opacity: .55; cursor: not-allowed; filter: grayscale(.6); }
@media (hover: hover) and (pointer: fine) {
  .zone-card:not(.locked):hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
}
.zc-name { font-weight: var(--cb-font-bold, 700); font-size: var(--cb-text-sm, .875rem); margin-bottom: 4px; }
.zc-stars { display: flex; gap: 2px; }
.zc-stars .star { width: 13px; height: 13px; color: var(--toon-outline-ink); opacity: .35; }
.zc-stars .star.on { color: var(--gold); opacity: 1; }
.zc-best { font-size: 11px; color: var(--muted); margin-top: 4px; }
.zone-card .lock { position: absolute; top: 8px; inset-inline-end: 8px; width: 16px; height: 16px; color: var(--muted); }

/* ---- Effondrement ---- */
.card.result { position: relative; }
.ribbon { font-weight: var(--cb-font-black, 800); color: var(--gold); font-size: var(--cb-text-sm, .875rem); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; min-height: 1.2em; }
.big { font-size: 42px; font-weight: var(--cb-font-black, 800); color: var(--toon-outline); }
.big.count small { font-size: 18px; color: var(--muted); margin-inline-start: 4px; }
#go-stars { display: flex; justify-content: center; gap: 4px; margin: 6px 0 4px; }
#go-stars .star { width: 22px; height: 22px; color: var(--toon-outline-ink); opacity: .35; }
#go-stars .star.on { color: var(--gold); opacity: 1; }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%);
  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: 999px; padding: 9px 18px;
  font-size: var(--cb-text-sm, .875rem); font-weight: var(--cb-font-semibold, 600); z-index: 90; box-shadow: var(--shadow-md);
}
.toast[hidden] { display: none; }

/* ---- RTL : les logiques `inset-inline`/`margin-inline` suffisent déjà pour
   la plupart des éléments. ---- */
[dir="rtl"] .zone-card .lock { inset-inline-end: 8px; inset-inline-start: auto; }

/* ---- Petits écrans : la barre d'outils reste lisible ---- */
@media (max-width: 360px) {
  .tool span { display: none; }
  .stat .val { font-size: var(--cb-text-base, .9375rem); }
}
@media (min-height: 760px) {
  #wrap { padding-top: 20px; padding-bottom: 24px; }
}