/* ============================================================================
   SUDZ — 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).

   IDENTITÉ conservée : grille sudoku indigo profond (vert émeraude en accent,
   or réservé à la monnaie/aux indices, cf. convention fleet-wide). Mobile-
   first, logique inline/block (RTL-safe), respecte prefers-reduced-motion et
   prefers-contrast. Mêmes tokens d'espacement/rayon/typo que kit-design.css
   (`--cb-space-*`/`--cb-radius-*`/`--cb-font-*`) : seule l'IDENTITÉ (couleurs,
   ombres, contours) change, pas la grille d'espacement.
   ========================================================================== */
:root {
  /* Fond de page + panneaux : dégradés 2 tons (matière), jamais un aplat plat. */
  --bg1:#141a3c; --bg2:#0d1129;
  --panel: linear-gradient(160deg, #222a5c 0%, #161b44 100%);
  --panel2: linear-gradient(150deg, #1b2150 0%, #11163a 100%);
  --panel3: linear-gradient(150deg, #262d63 0%, #1a2050 100%);
  --field: linear-gradient(165deg, #1b2150 0%, #11163a 100%);
  --tile:#242b62;

  --toon-outline:#eef0ff;           /* 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,.24), rgba(255,255,255,0) 48%);
  --muted:#9aa3d4;

  --accent:#3ddc97; --accent-ink:#062015; --accent-fg:#5ee6ab; --accent-bright:#5ee6ab;
  --premium:#ffc20e; --premium-light:#ffd657; --premium-ink:#221900;
  --ok:#3ddc97; --sel:#3ddc97; --bad:#ff6b81; --warning:#ffc20e;

  --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-normal-long:.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(--premium);
  --focus-offset:2px;
  --focus-shadow:0 0 0 4px rgba(255,194,14,.28);
  --active-scale:.96;

  color-scheme:dark;
}

html[data-theme="light"] {
  --bg1:#fbf8ef; --bg2:#f3efe2;
  --panel:#ffffff; --panel2:#f6f3e9; --panel3:#ece7d8;
  --field:#f6f3e9; --tile:#ffffff;

  --toon-outline:#1d2355; --toon-outline-ink:#1d2355; --muted:#6a6f9a;
  --accent:#1d8f5c; --accent-ink:#ffffff; --accent-fg:#2ed97f; --accent-bright:#2ed97f;
  --premium:#b3700a; --premium-light:#d4af37; --premium-ink:#ffffff;
  --ok:#1d8f5c; --sel:#2a5ec9; --bad:#c1423a; --warning:#b3700a;

  --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; }
html,body { margin:0; height:100%;
    background:var(--bg1);
    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:540px; margin:0 auto;
    padding:max(var(--cb-space-4), env(safe-area-inset-top)) var(--cb-space-6)
            max(var(--cb-space-5), env(safe-area-inset-bottom));
    display:flex; flex-direction:column; align-items:center; gap:var(--cb-gap-sm);
    min-height:100%; }

header { width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:var(--cb-space-4) var(--cb-space-3) 0; }

.brand { font-weight:var(--cb-font-black,800); letter-spacing:.05em;
    font-size:1.5rem; }
.brand b { color:var(--premium); }

.scores { display:flex; gap:var(--cb-gap-lg); }
.score { text-align:end; }
.score .lbl { font-size:.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:1.5rem; font-weight:var(--cb-font-black,800);
    font-variant-numeric:tabular-nums; color:var(--toon-outline); }

/* La grille : un carré sticker, contour épais net, ombre plate — jamais de
   glow flou ni de relief 3D biseauté. */
.board { width:min(100%, 48vh);
    border-radius:var(--radius-lg);
    background:var(--board-bg, linear-gradient(180deg, var(--bg1), var(--bg2)));
    border:var(--toon-outline-w) solid var(--board-edge, var(--toon-outline));
    padding:var(--cb-space-3);
    touch-action:manipulation;
    box-shadow:var(--shadow-lg);
    transition:box-shadow var(--dur-instant);
}
canvas#c { width:100%; height:auto; display:block; border-radius:var(--radius-md); }

footer { color:var(--muted); font-size:.8125rem; text-align:center;
    padding-bottom:var(--cb-space-3); min-height:18px;
    letter-spacing:var(--cb-letter-spacing-normal); }

/* hud : vies, pièces, erreurs */
.hud { width:100%; display:flex; gap:var(--cb-gap-xs); align-items:center;
    padding:0 var(--cb-space-3); }

/* Porte-monnaie mutualisé CB-Arcade (2 soldes : Jouer + Gagner ◆). */
.wallet-hud { width:100%; display:flex; gap:var(--cb-gap-xs); justify-content:center;
    padding:0 var(--cb-space-3); }

.wchip { display:flex; align-items:center; gap:var(--cb-space-2);
    font-size:.8125rem; font-weight:var(--cb-font-bold,700);
    font-variant-numeric:tabular-nums; color:var(--toon-outline);
    background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--cb-radius-pill);
    padding:var(--cb-space-2) var(--cb-space-5);
    white-space:nowrap; box-shadow:var(--shadow-xs); }

.wchip .ic { display:inline-flex; width:1.1em; height:1.1em; }
.wchip .ic svg { width:100%; height:100%; }

/* Icône posée à côté d'un montant dans un texte de bouton (ex. le coffre de
   fin de grille) : jamais un glyphe Unicode dans la chaîne traduite. */
.ic-inline { display:inline-flex; width:1em; height:1em; vertical-align:-.15em; }
.ic-inline svg { width:100%; height:100%; }

.wchip.earn { color:var(--premium); border-color:var(--premium); }

.chip { background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline);
    border-radius:var(--cb-radius-pill); padding:var(--cb-space-3) var(--cb-space-5);
    font-size:.8125rem; font-weight:var(--cb-font-bold,700); display:flex;
    align-items:center; gap:var(--cb-space-3); font-variant-numeric:tabular-nums;
    box-shadow:var(--shadow-xs);
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.chip .ic { display:inline-flex; width:1.1em; height:1.1em; vertical-align:-.15em; }
.chip .ic svg { width:100%; height:100%; }

.chip:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }

.chip-btn { font-family:inherit; width:auto; margin:0;
    padding:var(--cb-space-3) var(--cb-space-5);
    font-size:.8125rem; font-weight:var(--cb-font-bold,700);
    background:var(--panel2); color:var(--toon-outline); cursor:pointer;
    transition:transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out);
    border-radius:var(--radius-md); border:var(--toon-outline-w) solid var(--toon-outline);
    box-shadow:var(--shadow-xs); display:inline-flex; align-items:center; justify-content:center; }
.chip-btn svg { width:1.2em; height:1.2em; }

.chip-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.chip-btn:active { transform:translateY(1px); box-shadow:none; }

#btn-home { margin-inline-start:auto; }

.chip.pulse { animation:chip-pop var(--dur-slow) var(--ease-out); }

@keyframes chip-pop {
  0% { transform:scale(1); }
  40% { transform:scale(1.18); }
  70% { transform:scale(.96); }
  100% { transform:scale(1); }
}

/* PAVÉ DE CHIFFRES : la plus grosse surface tactile de l'écran. */
.pad { width:100%; display:grid; grid-template-columns:repeat(5,1fr);
    gap:var(--cb-gap-sm); padding:0 var(--cb-space-2); }

.pad button { margin:0; padding:var(--cb-space-5) var(--cb-space-2) var(--cb-space-4);
    background:var(--field);
    background-image:var(--kawaii-sheen), var(--field);
    color:var(--toon-outline); border-radius:var(--radius-md); font-size:1.4375rem;
    font-weight:var(--cb-font-black,900); line-height:1;
    position:relative;
    box-shadow:var(--shadow-md);
    transition:transform var(--dur-instant), box-shadow var(--dur-instant);
    border:var(--toon-outline-w) solid var(--toon-outline);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
}

.pad button:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.pad button:focus { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.pad button:active { transform:translateY(2px); box-shadow:none; }

.pad button i {
  display:block; font-style:normal; font-size:.6875rem;
  font-weight:var(--cb-font-black,800); color:var(--muted);
  margin-top:var(--cb-space-2); font-variant-numeric:tabular-nums;
}

.pad button.done { opacity:.45; cursor:not-allowed; }
.pad button.erase svg { width:1.25rem; height:1.25rem; }
.pad button.notes { color:var(--premium); border-color:var(--premium); }

/* barre d'outils : crayon / indice / annuler / vérifier / bouclier */
.tools { width:100%; display:flex; gap:var(--cb-gap-xs);
    padding:0 var(--cb-space-2); }

.tool {
  flex:1; width:auto; margin:0; background:var(--panel2); color:var(--toon-outline);
  border-radius:var(--radius-md); padding:var(--cb-space-4) var(--cb-space-2) var(--cb-space-3);
  font-size:.8125rem; font-weight:var(--cb-font-bold,800); line-height:1.25;
  display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-1);
  box-shadow:var(--shadow-xs);
  border:var(--toon-outline-w) solid var(--toon-outline);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  cursor:pointer; position:relative;
}

.tool:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.tool:focus { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.tool:active { transform:translateY(1px); box-shadow:none; }

.tool b { font-size:1.125rem; font-weight:var(--cb-font-regular,400); display:inline-flex; }
.tool b svg { width:1.15rem; height:1.15rem; }

.tool span, .tool small {
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.tool small {
  font-weight:var(--cb-font-bold,700); font-size:.75rem;
  color:var(--muted); font-variant-numeric:tabular-nums;
}

.tool:disabled { opacity:.45; cursor:not-allowed; }

.tool.on {
  background:var(--field); color:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent), var(--shadow-xs);
}

/* 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:var(--cb-gap-lg);
}
html[data-theme="light"] .overlay { background:rgba(29,35,85,.32); }

.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) var(--cb-pad-md);
  width:min(400px, 92vw);
  max-height:94vh;
  overflow-y:auto;
  text-align:center;
  box-shadow:var(--shadow-xl);
}

.overlay h2 {
  margin:0 0 var(--cb-space-3);
  font-size:var(--cb-heading-lg,1.5rem);
  font-weight:var(--cb-font-black,800);
}

.overlay .big {
  font-size:2.5rem; font-weight:var(--cb-font-black,900);
  color:var(--premium); margin:var(--cb-space-4) 0 var(--cb-space-2);
  letter-spacing:.08em; font-variant-numeric:tabular-nums;
  animation:win-pop var(--dur-slow) var(--ease-bounce);
}

.overlay .big.stars {
  font-size:2rem; letter-spacing:.2em; margin-top:0;
  color:var(--premium); animation:star-spin var(--dur-deliberate) var(--ease-bounce);
}

@keyframes win-pop {
  0% { opacity:0; transform:scale(.7); }
  60% { transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}

@keyframes star-spin {
  0% { opacity:0; transform:scale(0) rotateY(-180deg); }
  50% { transform:scale(1.15) rotateY(12deg); }
  100% { opacity:1; transform:scale(1) rotateY(0deg); }
}

.overlay .sub {
  color:var(--muted); font-size:.9375rem; margin-bottom:var(--cb-gap-lg);
  line-height:var(--cb-line-height-relaxed,1.5);
}

button {
  border:0; border-radius:var(--radius-md); padding:var(--cb-space-5) var(--cb-space-6);
  font-size:.9375rem; font-weight:var(--cb-font-black,800);
  width:100%; cursor:pointer; margin-top:var(--cb-space-4);
  font-family:inherit;
  transition:transform var(--dur-normal-long) var(--ease-out), box-shadow var(--dur-normal-long) var(--ease-out);
  box-shadow:var(--shadow-md);
  position:relative;
}

button:disabled { opacity:.45; cursor:not-allowed; }
button:focus { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
button:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
button:active { transform:translateY(2px); box-shadow:none; }

/* Bouton primaire : vert CB-ARCADE, contour épais + ombre sticker. */
.btn-primary {
  background:linear-gradient(135deg, var(--accent-bright), var(--accent));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--accent-bright), var(--accent));
  color:var(--accent-ink);
  border:var(--toon-outline-w) solid var(--toon-outline-ink);
  font-weight:var(--cb-font-black,900);
  letter-spacing:.02em;
}

/* Bouton ghost : panneau contouré, sans accent. */
.btn-ghost {
  background:var(--panel2);
  color:var(--toon-outline);
  border:var(--toon-outline-w) solid var(--toon-outline);
}

/* Bouton récompensé : gradient or, contour encre. */
.btn-rewarded {
  background:linear-gradient(135deg, var(--premium-light), var(--premium));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--premium-light), var(--premium));
  color:var(--premium-ink);
  border:var(--toon-outline-w) solid var(--toon-outline-ink);
  font-weight:var(--cb-font-black,900);
}

.btn-rewarded small {
  display:block; font-weight:var(--cb-font-bold,700); opacity:.90;
  font-size:.8125rem; color:var(--premium-ink);
}

.row { display:flex; gap:var(--cb-gap-md); }
.row .half { flex:1; width:auto; }

/* écran d'accueil */
.overlay .card.home { padding:var(--cb-pad-md) var(--cb-pad-md) var(--cb-pad-sm); }

.logo {
  font-weight:var(--cb-font-black,900);
  letter-spacing:.1em;
  font-size:3rem;
  line-height:1;
  color:var(--accent);
  animation:logo-entrance var(--dur-deliberate) var(--ease-bounce);
}

.logo b { color:var(--premium); }

@keyframes logo-entrance {
  from { opacity:0; transform:scale(.8); }
  to { opacity:1; transform:scale(1); }
}

.stats { display:flex; gap:var(--cb-gap-sm); margin-bottom:var(--cb-space-3); flex-wrap:wrap; }

.stat {
  flex:1; min-width:26%; background:var(--panel2); border-radius:var(--radius-md);
  padding:var(--cb-space-4) var(--cb-space-2);
  box-shadow:var(--shadow-xs);
  border:var(--toon-outline-w) solid var(--toon-outline);
}

.stat .lbl {
  font-size:.75rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-weight:var(--cb-font-semibold,600);
}

.stat .val {
  font-size:1.125rem; font-weight:var(--cb-font-bold,800);
  font-variant-numeric:tabular-nums;
}

/* carte des niveaux : un barreau par niveau — ça défile avec smooth scroll */
.level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--cb-gap-sm); margin-bottom:var(--cb-space-3);
    max-height:44vh; overflow-y:auto; padding:var(--cb-space-2); scroll-behavior:smooth; }
.level-grid button { margin:0; padding:var(--cb-space-4) var(--cb-space-2) var(--cb-space-3); background:var(--panel2); color:var(--toon-outline); font-size:.9375rem;
    display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-1);
    border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--radius-md);
    box-shadow:var(--shadow-xs); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.level-grid button:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.level-grid button:focus { outline:var(--focus-ring); outline-offset:1px; }
.level-grid button:active { transform:translateY(1px); box-shadow:none; }
.level-grid button .no { font-weight:var(--cb-font-black,900); font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center; }
.level-grid button .no svg { width:1.1rem; height:1.1rem; }
.level-grid button .md { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:var(--cb-letter-spacing-caps,.05em); font-weight:var(--cb-font-semibold,600); }
.level-grid button.easy   { border-color:var(--ok); }
.level-grid button.medium { border-color:var(--premium); }
.level-grid button.hard   { border-color:#f5a623; }
.level-grid button.expert { border-color:var(--bad); }
.level-grid button.master { border-color:#a87cff; }
.level-grid button.legendary { border-color:#38bdf8; }
.level-grid button.mythic { border-color:#d946ef; }
.level-grid button.done { background:var(--panel3); opacity:.75; }
.level-grid button.done .no::after { content:' \2713'; color:var(--ok); font-size:.875rem; }
.level-grid button.on { background:var(--field); border-color:var(--premium); box-shadow:0 0 0 2px var(--premium); }
.level-grid button.locked { opacity:.45; cursor:not-allowed; }

/* fin de grille */
.badge { display:inline-block; background:var(--premium); color:var(--premium-ink);
    font-weight:var(--cb-font-black,900); font-size:.8125rem;
    letter-spacing:var(--cb-letter-spacing-caps,.05em); text-transform:uppercase;
    border-radius:var(--cb-radius-pill); padding:var(--cb-space-2) var(--cb-space-5);
    margin-bottom:var(--cb-space-3);
    border:var(--toon-outline-w) solid var(--toon-outline-ink); }

/* habillage (Looks) : une ligne d'article + son bouton */
.shop-row { display:flex; align-items:center; gap:var(--cb-gap-md); padding:var(--cb-space-4) 0;
    border-top:1px solid var(--toon-outline);
    text-align:start; }
.shop-row .nm { flex:1; font-weight:var(--cb-font-bold,800); font-size:.9375rem; }
.shop-row .ds { display:block; font-weight:var(--cb-font-semibold,600); font-size:.8125rem;
    color:var(--muted); margin-top:var(--cb-space-2); }
.shop-row button { width:auto; margin:0; padding:var(--cb-space-3) var(--cb-space-5);
    font-size:.8125rem; white-space:nowrap;
    background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-xs); }
.shop-row button:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.shop-row .owned { color:var(--ok); font-weight:var(--cb-font-black,900); font-size:.8125rem; }

/* notification passagère (lien copié, achat restauré...) */
.toast {
  position:fixed; inset-inline:0;
  bottom:max(var(--cb-space-4), env(safe-area-inset-bottom) + var(--cb-space-4));
  margin-inline:auto;
  width:max-content; max-width:88vw; background:var(--panel2); color:var(--toon-outline);
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--cb-radius-pill);
  padding:var(--cb-space-4) var(--cb-space-8);
  font-size:.8125rem; font-weight:var(--cb-font-bold,700);
  z-index:9;
  box-shadow:var(--shadow-lg);
  animation:toast-in var(--dur-slow) var(--ease-out);
}

@keyframes toast-in {
  from { opacity:0; transform:translateY(20px) scale(.85); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* ============================================================================
   ÉCONOMIE À L'ÉCRAN + KIT « JUICY » (src/fx.js)
   ========================================================================== */
.chip.lives { color:var(--bad); border-color:var(--bad); }
.chip.coins { color:var(--premium); border-color:var(--premium); }
.chip.mistakes { color:var(--toon-outline); }
.chip.help { font-weight:900; color:var(--premium); border-color:var(--premium); padding:6px 12px; }
.chip.mistakes.warn { color:var(--bad); border-color:var(--bad); }
.chip small { font-size:10px; font-weight:700; color:var(--muted); margin-inline-start:2px; }
.chip.lives.empty { animation:beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.15); } 24%{ transform:scale(1); } }

/* l'OBJECTIF de la grille, toujours lisible sous le plateau */
.objective { width:100%; padding:0 var(--cb-space-3); }

.objective span {
  display:block; font-size:.875rem; font-weight:var(--cb-font-bold,700);
  color:var(--toon-outline); text-align:center;
  line-height:var(--cb-line-height-normal,1.35);
}

.objective .bar {
  display:block; height:8px; border-radius:var(--cb-radius-pill);
  background:var(--panel2); margin-top:var(--cb-space-3);
  overflow:hidden; border:var(--toon-outline-w) solid var(--toon-outline);
}

.objective .bar i {
  display:block; height:100%; width:0; border-radius:var(--cb-radius-pill);
  background:linear-gradient(90deg, var(--ok), var(--premium));
  transition:width var(--dur-normal) var(--ease-out);
}

/* outil en réserve (pack acheté) : la pastille dit combien il en reste */
.tool .stock {
  position:absolute; top:var(--cb-space-2); inset-inline-end:var(--cb-space-3);
  font-style:normal; font-size:.75rem;
  font-weight:var(--cb-font-black,900); color:var(--premium-ink);
  background:var(--premium); border-radius:var(--cb-radius-pill);
  padding:var(--cb-space-1) var(--cb-space-3);
  border:1.5px solid var(--toon-outline-ink);
}

/* micro-rebond : posé puis retiré par fx.bump() */
.bump { animation:bump var(--dur-slow) var(--ease-bounce); }

@keyframes bump {
  0% { transform:scale(1) rotate(0deg); }
  35% { transform:scale(.88) rotate(-2deg); }
  70% { transform:scale(1.1) rotate(3deg); }
  100% { transform:scale(1) rotate(0deg); }
}

/* flash d'écran d'une réussite */
.flash { position:fixed; inset:0; pointer-events:none; opacity:0; z-index:8; }

.flash.on {
  animation:flash-win var(--dur-deliberate) var(--ease-out);
  background:linear-gradient(135deg, var(--premium), var(--ok), var(--accent-bright));
}

@keyframes flash-win {
  0% { opacity:.9; }
  50% { opacity:.35; }
  100% { opacity:0; }
}

/* entrées d'écran : les cartes arrivent avec un petit bounce */
.overlay.show .card { animation:card-in var(--dur-slow) var(--ease-bounce); }
.overlay.show .card.pop { animation:card-pop var(--dur-deliberate) var(--ease-bounce); }
.overlay.show .card.shake { animation:card-shake var(--dur-deliberate) var(--ease-out); }

@keyframes card-in {
  from { opacity:0; transform:translateY(16px) scale(.96); }
  to { opacity:1; transform:none; }
}

@keyframes card-pop {
  0% { opacity:0; transform:scale(.65); }
  55% { transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}

@keyframes card-shake {
  0%,100% { transform:translateX(0) rotate(0deg); }
  15% { transform:translateX(-12px) rotate(-1.5deg); }
  30% { transform:translateX(10px) rotate(1.5deg); }
  45% { transform:translateX(-8px) rotate(-.8deg); }
  60% { transform:translateX(6px) rotate(.8deg); }
}

.overlay .big.hearts { letter-spacing:0; font-size:0; display:flex; gap:6px; justify-content:center; }
.overlay .big.hearts svg { width:30px; height:30px; color:var(--bad); }
.overlay .big.hearts .heart-lost svg { opacity:.3; }

.overlay .big.lost { display:flex; justify-content:center; animation:heart-break var(--dur-slow) var(--ease-out); }
.overlay .big.lost svg { width:64px; height:64px; color:var(--bad); }

@keyframes heart-break {
  0% { transform:scale(1.5) rotate(-10deg); }
  40% { transform:scale(.8) rotate(6deg); }
  100% { transform:scale(1) rotate(0); }
}

.overlay .sub.tiny { font-size:.8125rem; margin-bottom:var(--cb-space-4); }

/* bonus quotidien : la série de jours, d'un coup d'œil */
.daily-days {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:var(--cb-gap-xs); margin:var(--cb-space-3) 0 var(--cb-space-5);
}

.daily-days i {
  font-style:normal; background:var(--panel2);
  border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--radius-md);
  padding:var(--cb-space-3) var(--cb-space-2);
  display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-1);
  box-shadow:var(--shadow-xs);
}

.daily-days i b {
  font-size:.8125rem; color:var(--muted);
  font-weight:var(--cb-font-semibold,600);
}

.daily-days i span {
  font-size:.75rem; font-weight:var(--cb-font-black,900);
}

.daily-days i.done { background:var(--panel3); opacity:.65; }

.daily-days i.on {
  background:var(--field);
  color:var(--accent);
  border-color:var(--premium);
  animation:bump var(--dur-slow) cubic-bezier(.15,1.4,.35,1);
  box-shadow:0 0 0 2px var(--premium);
}
.daily-days i.on b { color:var(--accent); }

/* Reward icon partagé (cadeau du jour) : montant + icône, jamais un emoji
   baked dans le texte. */
.reward-icon { display:flex; align-items:center; justify-content:center; gap:var(--cb-space-2); }
.reward-icon svg { width:32px; height:32px; color:var(--premium); }

/* LA RÈGLE : un mini-bloc 3x3 dont les cases s'allument l'une après l'autre */
.goal-demo {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--cb-gap-sm); width:168px;
  margin:var(--cb-space-5) auto var(--cb-space-4);
}

.goal-demo b {
  display:flex; align-items:center; justify-content:center;
  height:50px; border-radius:var(--radius-md);
  background:var(--panel3); font-size:1.375rem;
  font-weight:var(--cb-font-black,900); color:var(--toon-outline);
  box-shadow:var(--shadow-sm);
  border:var(--toon-outline-w) solid var(--toon-outline);
  animation:tile-glow 3.8s ease-in-out infinite;
}

.goal-rule {
  font-size:.9375rem; font-weight:var(--cb-font-bold,800);
  color:var(--ok); background:var(--panel2);
  border-radius:var(--radius-md);
  border:var(--toon-outline-w) solid var(--ok);
  padding:var(--cb-space-4) var(--cb-space-5);
  margin-bottom:var(--cb-space-5);
  box-shadow:var(--shadow-xs);
}

@keyframes tile-glow {
  0%,72%,100% { transform:scale(1); }
  80% { transform:scale(1.15); box-shadow:0 0 0 3px var(--premium), var(--shadow-sm); }
}

/* ============================================================================
   TUTORIEL D'ACCUEIL (src/tutorial.js)
   ========================================================================== */
.overlay .card.tuto { padding:20px 16px 18px; }
.tuto-step { font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:2px; font-variant-numeric:tabular-nums; }
.tuto-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:1px; width:min(252px,80vw);
    margin:10px auto 8px; padding:4px; border-radius:12px; border:var(--toon-outline-w) solid var(--toon-outline);
    background:var(--panel2);
    box-shadow:var(--shadow-sm); }
.tuto-grid b { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:4px; background:var(--panel3); color:var(--muted); font-size:12px; font-weight:800;
    transition:all .18s ease-out;
    cursor:pointer; }
/* Les traits épais du sudoku : sans eux, « bloc 3×3 » ne veut rien dire. */
.tuto-grid b.ec { margin-inline-end:3px; }
.tuto-grid b.er { margin-bottom:3px; }
/* Étape qui met une unité en avant : tout le reste s'efface. */
.tuto-grid.unit b { opacity:.28; }
.tuto-grid.unit b.on { opacity:1; background:var(--panel3); color:var(--toon-outline); }
/* La case de l'essai : elle appelle le doigt, puis se pare de vert. */
.tuto-grid b.ask, .tuto-grid.unit b.ask { opacity:1; background:var(--panel3); color:var(--sel);
    box-shadow:0 0 0 2px var(--sel); animation:beat 1.5s ease-in-out infinite; }
.tuto-grid b.got, .tuto-grid.unit b.got { opacity:1; background:var(--panel3); color:var(--ok);
    box-shadow:0 0 0 2px var(--ok); animation:none; }
.tuto-text { font-size:13px; font-weight:700; color:var(--toon-outline); line-height:1.45; margin-bottom:6px; }
.overlay .card.tuto .row button { padding:10px 12px; font-size:14px; }
.tuto-pad { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:4px 0 8px; }
.tuto-pad[hidden] { display:none; }
.tuto-pad button { margin:0; padding:9px 2px; font-size:18px; font-weight:900; border-radius:12px;
    background:var(--panel2); color:var(--toon-outline);
    box-shadow:var(--shadow-sm);
    border:var(--toon-outline-w) solid var(--toon-outline); }
.tuto-pad button:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.tuto-pad button:active { transform:translateY(1px); box-shadow:none; }
.tuto-pad button.done { opacity:.38; cursor:not-allowed; }
.tuto-say { font-size:12px; font-weight:800; border-radius:12px; padding:9px 11px; margin-bottom:8px; }
.tuto-say.good { color:var(--ok); background:var(--panel2); border:var(--toon-outline-w) solid var(--ok); }
.tuto-say.warn { color:var(--bad); background:var(--panel2); border:var(--toon-outline-w) solid var(--bad); }
.tuto-dots { display:flex; gap:6px; justify-content:center; margin:8px 0 2px; }
.tuto-dots i { width:7px; height:7px; border-radius:999px; background:var(--panel3); }
.tuto-dots i.done { background:var(--panel3); opacity:.4; }
.tuto-dots i.on { background:var(--accent); transform:scale(1.3); }

/* habillage (Looks) : intertitre de famille, mention factuelle, échantillon. */
.shop-head {
  padding:var(--cb-space-6) 0 var(--cb-space-2);
  font-size:.8125rem; font-weight:var(--cb-font-black,900);
  letter-spacing:var(--cb-letter-spacing-caps,.05em);
  text-transform:uppercase; color:var(--premium); text-align:start;
}

.shop-head small {
  display:block; font-size:.8125rem; font-weight:var(--cb-font-semibold,600);
  letter-spacing:var(--cb-letter-spacing-normal);
  text-transform:none; color:var(--muted);
  margin-top:var(--cb-space-2);
}

.shop-row .tag {
  display:inline-block;
  margin-inline-start:var(--cb-space-3);
  padding:var(--cb-space-1) var(--cb-space-3);
  border-radius:var(--cb-radius-pill);
  background:var(--panel3); color:var(--ok);
  font-size:.75rem; font-weight:var(--cb-font-black,900);
  font-style:normal;
  vertical-align:middle; border:1.5px solid var(--ok);
}

/* L'échantillon d'un habit : trois teintes, pour choisir sans essayer. */
.shop-row .swatch { display:flex; gap:var(--cb-space-2); margin-top:var(--cb-space-3); }
.shop-row .swatch b { width:16px; height:16px; border-radius:var(--radius-xs); border:1.5px solid var(--toon-outline); }

/* habillage (Looks) : une ligne, son bouton (pièces, ou « porté ») */
.shop-row .routes { display:flex; flex-direction:column; gap:var(--cb-gap-xs); align-items:stretch; min-width:112px; }
.shop-row .routes button { width:100%; margin:0; padding:var(--cb-space-3) var(--cb-space-4); font-size:.8125rem; }
.shop-row .routes .btn-rewarded { font-size:.75rem; }

/* Responsive : petits écrans (<700px hauteur, espace étroit) */
@media (max-height:700px) {
  #wrap { gap:6px; padding-top:max(6px, env(safe-area-inset-top)); padding-bottom:max(6px, env(safe-area-inset-bottom)); }
  .logo { font-size:32px; }
  .card .big { font-size:38px; margin:6px 0 2px; }
  .card h2 { font-size:20px; margin-bottom:4px; }
  .chip { padding:5px 10px; font-size:12px; }
  .pad button { padding:9px 2px 7px; font-size:20px; }
  .tool { padding:8px 4px 6px; font-size:8px; }
  .tool b svg { width:16px; height:16px; }
  button { padding:11px 14px; font-size:14px; margin-top:6px; }
  .overlay .card { padding:18px 16px 16px; }
  .level-grid { max-height:38vh; }
}

/* Respect prefers-reduced-motion (WCAG 2.1 Success Criterion 2.3.3) */
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .bump, .flash.on, .overlay.show .card, .overlay.show .card.pop, .overlay.show .card.shake,
  .chip.lives.empty, .daily-days i.on, .goal-demo b, .overlay .big.lost,
  .tuto-grid b.ask, .overlay .big, .overlay .big.stars, .logo {
    animation:none !important;
    transition:none !important;
  }
}

/* Mode contraste élevé : bordures plus épaisses */
@media (prefers-contrast:more) {
  button { border-width:3px; border-color:var(--toon-outline-ink); }
  .chip { border-width:3px; }
  .level-grid button { border-width:3px; }
  .overlay .card { border-width:3px; }
  .pad button { border-width:3px; }
  .tool { border-width:3px; }
}