/* ============================================================================
   SUMZY — 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 : plateau indigo profond, chiffres colorés par moitié de
   complément à 10 (vert = petit, or = 5 pivot, bleu = grand — src/game.js
   `digitColor()`/`PAINT_DARK`/`PAINT_LIGHT`). 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.

   `data-skin` (night/aurora/ember/gold, mérité — src/engage-config.js
   `themes`) est un attribut DISTINCT de `data-theme` (clair/sombre, posé par
   /_kit/theme.js) : les deux cohabitent sur <html> sans jamais s'écraser.
   ========================================================================== */
:root {
  --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:#20244a;

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

  /* Les trois teintes du complément à 10 (chiffre bas/pivot/haut) — mêmes
     valeurs que PAINT_DARK dans src/game.js, réutilisées ici pour la légende
     (.goal-demo), le combo et les états « armé »/« en stock ». */
  --low:#4fe3c1; --mid:#ffd23f; --high:#5b8cff; --bad:#ff8fa3;

  --accent:#3ddc97; --accent-ink:#062015; --accent-fg:#5ee6ab; --accent-bright:#5ee6ab;
  --premium:#ffc20e; --premium-light:#ffd657; --premium-ink:#221900;
  --ok:#3ddc97; --sel:#3ddc97; --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:#eef0fb;

  --toon-outline:#1d2355; --toon-outline-ink:#1d2355; --muted:#6a6f9a;
  --low:#1d8f5c; --mid:#b3700a; --high:#2a5ec9; --bad:#c1423a;
  --accent:#1d8f5c; --accent-ink:#ffffff; --accent-fg:#2ed97f; --accent-bright:#2ed97f;
  --premium:#b3700a; --premium-light:#d4af37; --premium-ink:#ffffff;
  --ok:#1d8f5c; --sel:#2a5ec9; --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); }

/* Le plateau : un cadre sticker, contour épais net, ombre plate — jamais de
   glow flou ni de relief 3D biseauté. Il DÉFILE (le tableau s'allonge à
   chaque AJOUT), le reste de l'écran ne bouge pas d'un pixel. */
.board { width:100%;
    max-height:52vh; overflow-y:auto; overflow-x:hidden;
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg, var(--bg1), var(--bg2));
    border:var(--toon-outline-w) solid var(--toon-outline);
    padding:var(--cb-space-3);
    touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    box-shadow:var(--shadow-lg);
}
.board::-webkit-scrollbar { width:0; }
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, objectif, ajouts, retour accueil */
.hud { width:100%; display:flex; gap:var(--cb-gap-xs); align-items:center;
    flex-wrap:wrap; 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%; }
.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, .ic-inline { display:inline-flex; width:1.1em; height:1.1em; vertical-align:-.15em; }
.chip .ic svg, .ic-inline 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.lives { color:var(--bad); border-color:var(--bad); }
.chip.coins { color:var(--premium); border-color:var(--premium); }
.chip.goal { color:var(--high); border-color:var(--high); }
.chip.adds { color:var(--low); border-color:var(--low); }
.chip.adds.empty, .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); } }

.chip.pulse, .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); }
}

/* AJOUTER : l'action maîtresse, plus grosse que les outils — c'est le seul
   geste toujours disponible (gratuit puis payant). */
.btn-add { width:100%; margin:0; padding:var(--cb-space-5) var(--cb-space-6);
    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);
    border-radius:var(--radius-md); font-size:1.0625rem; font-weight:var(--cb-font-black,900);
    letter-spacing:.03em; box-shadow:var(--shadow-md); cursor:pointer;
    transition:transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out);
}
.btn-add:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-add:active { transform:translateY(2px); box-shadow:none; }
.btn-add:focus { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.btn-add small { display:block; font-weight:var(--cb-font-bold,700);
    font-size:.75rem; color:var(--accent-ink); opacity:.82;
    margin-top:var(--cb-space-1); font-variant-numeric:tabular-nums; }
.btn-add.paid {
  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);
}
.btn-add:disabled { opacity:.45; cursor:not-allowed; }

/* barre d'outils : indice / annuler / retirer / recommencer */
.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; }

/* .on : un outil EN STOCK (besace remplie par un pack/succès/jalon). */
.tool.on {
  background:var(--field); color:var(--high); border-color:var(--high);
  box-shadow:0 0 0 2px var(--high), var(--shadow-xs);
}
/* .armed : « retirer » attend le tap sur le chiffre à effacer. */
.tool.armed {
  background:var(--field); color:var(--low); border-color:var(--low);
  box-shadow:0 0 0 2px var(--low), var(--shadow-xs);
  animation:beat 1.4s ease-in-out infinite;
}
.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);
}

/* ONBOARDING : une ligne de coach, montrée sur le tout premier tableau. */
.coach { width:100%; text-align:center; font-size:.8125rem; font-weight:var(--cb-font-bold,700);
    color:var(--premium); background:var(--panel2); border:var(--toon-outline-w) solid var(--premium);
    border-radius:var(--radius-md); padding:var(--cb-space-3) var(--cb-space-5);
    animation:card-in var(--dur-slow) var(--ease-out); }

/* COMBO : il apparaît au-dessus du plateau et repart tout seul. Aucune pièce
   n'y est liée — retour sensoriel uniquement. */
.combo {
  align-self:center; background:linear-gradient(135deg, var(--high), var(--low));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--high), var(--low));
  color:var(--toon-outline-ink); border:var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius:var(--cb-radius-pill); padding:var(--cb-space-2) var(--cb-space-7);
  font-size:.8125rem; font-weight:var(--cb-font-black,900); letter-spacing:.05em;
  text-transform:uppercase; box-shadow:var(--shadow-md);
  animation:combo-in var(--dur-slow) var(--ease-bounce);
}
@keyframes combo-in {
  0% { opacity:0; transform:scale(.6) rotate(-8deg); }
  70% { transform:scale(1.08) rotate(3deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}

/* l'OBJECTIF (chiffres restants) et l'XP (niveau de joueur) : même barre. */
.objective, .xp { width:100%; padding:0 var(--cb-space-3); }
.objective span, .xp 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, .xp .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, .xp .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);
}

/* 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.icon-only { display:flex; justify-content:center; }
.overlay .big.icon-only svg { width:52px; height:52px; }

@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:.9375rem; margin-bottom:var(--cb-gap-lg);
    line-height:var(--cb-line-height-relaxed,1.5); }
.overlay .sub.tiny { font-size:.8125rem; margin-bottom:var(--cb-space-4); }

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

.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;
}
.btn-ghost { background:var(--panel2); color:var(--toon-outline); border:var(--toon-outline-w) solid var(--toon-outline); }
.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:22%; 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 (choix direct) + route des étoiles (jalons) */
.level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--cb-gap-sm); margin-bottom:var(--cb-space-3);
    max-height:34vh; 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:active { transform:translateY(1px); box-shadow:none; }
.level-grid button .st { font-size:.75rem; letter-spacing:.1em; color:var(--premium); }
.level-grid button .md { font-size:.6875rem; color:var(--muted); text-transform:uppercase;
    letter-spacing:var(--cb-letter-spacing-caps,.05em); font-weight:var(--cb-font-semibold,600); }
.level-grid button:disabled { opacity:.45; cursor:not-allowed; }

.field-label { font-size:.75rem; color:var(--muted); text-transform:uppercase;
    letter-spacing:var(--cb-letter-spacing-caps,.05em); margin:var(--cb-space-6) 0 var(--cb-space-3);
    text-align:start; font-weight:var(--cb-font-semibold,600); }

.road { display:flex; gap:var(--cb-gap-sm); overflow-x:auto; padding:var(--cb-space-2) 0; }
.road button { flex:0 0 auto; width:64px; margin:0; padding:var(--cb-space-4) var(--cb-space-2) var(--cb-space-2);
    background:var(--panel2); color:var(--toon-outline); border:var(--toon-outline-w) solid var(--toon-outline);
    border-radius:var(--radius-md); box-shadow:var(--shadow-xs);
    display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-1); }
.road button b { display:inline-flex; width:1.4rem; height:1.4rem; color:var(--premium); }
.road button b svg { width:100%; height:100%; }
.road button .st { font-size:.75rem; font-weight:var(--cb-font-bold,700); color:var(--muted); }
.road button.open { background:var(--field); border-color:var(--premium); box-shadow:0 0 0 2px var(--premium);
    animation:beat 1.8s ease-in-out infinite; }
.road button.open b { color:var(--premium); }
.road button.done { opacity:.65; }
.road button:disabled { cursor:not-allowed; }

/* fin de tableau */
.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); }

/* Ce que la MÉTA a versé (outil mérité, chiffre d'or, succès) : déjà acquis,
   la carte ne fait que le montrer — jamais un bouton à réclamer. */
.prize { background:var(--panel2); border:var(--toon-outline-w) solid var(--ok);
    border-radius:var(--radius-md); color:var(--ok); font-weight:var(--cb-font-bold,700);
    font-size:.875rem; padding:var(--cb-space-3) var(--cb-space-5); margin-bottom:var(--cb-space-3); }
.prize.merit { border-color:var(--premium); color:var(--premium); }

/* boutique : une ligne d'article + ses routes (pièces / pub) */
.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;
    display:flex; align-items:center; flex-wrap:wrap; gap:var(--cb-space-2); }
.shop-row .ds { display:block; width:100%; font-weight:var(--cb-font-semibold,600); font-size:.8125rem;
    color:var(--muted); margin-top:var(--cb-space-1); }
.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; }
.shop-note { color:var(--muted); font-size:.75rem; text-align:center; margin-top:var(--cb-space-4); }

.lb-tabs { display:flex; gap:var(--cb-gap-xs); margin-bottom:var(--cb-space-4); }
.tab { flex:1; margin:0; padding:var(--cb-space-3) var(--cb-space-2); font-size:.8125rem;
    background:var(--panel2); color:var(--muted); border:var(--toon-outline-w) solid var(--toon-outline);
    border-radius:var(--radius-sm); box-shadow:none; }
.tab.on { background:var(--field); color:var(--premium); border-color:var(--premium);
    box-shadow:0 0 0 2px var(--premium); }

/* défi du jour : la démo « égal / somme » */
.goal-demo { display:flex; gap:var(--cb-gap-lg); justify-content:center; margin:var(--cb-space-5) 0 var(--cb-space-4); }
.pair { display:flex; gap:var(--cb-space-2); }
.pair b { display:flex; align-items:center; justify-content:center; width:44px; height:44px;
    border-radius:var(--radius-md); font-size:1.25rem; font-weight:var(--cb-font-black,900);
    box-shadow:var(--shadow-sm); border:var(--toon-outline-w) solid var(--toon-outline);
    animation:tile-glow 3.8s ease-in-out infinite; }
.pair.equal b { background:var(--panel3); color:var(--mid); border-color:var(--mid); }
.pair.sum b { background:var(--panel3); color:var(--high); border-color:var(--high); }
@keyframes tile-glow { 0%,72%,100% { transform:scale(1); } 80% { transform:scale(1.12); } }
.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); }

/* « Presque ! » : un constat, pas une offre déguisée. */
.near { background:var(--panel2); border:var(--toon-outline-w) solid var(--bad); color:var(--bad);
    border-radius:var(--radius-md); padding:var(--cb-space-3) var(--cb-space-5);
    font-size:.875rem; font-weight:var(--cb-font-bold,700); margin-bottom:var(--cb-space-4); }

/* BLOQUÉ : une vie casse net. */
.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); }
}

/* VIES : un rang de cœurs, ceux qui manquent estompés. */
.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; }

/* 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 { display:inline-flex; width:1.2rem; height:1.2rem; color:var(--muted); }
.daily-days i span svg { width:100%; height:100%; }
.daily-days i.done { background:var(--panel3); opacity:.65; }
.daily-days i.on { background:var(--field); color:var(--premium); 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, .daily-days i.on span { color:var(--premium); }

.reward-icon { display:flex; justify-content:center; font-size:0; }
.reward-icon svg { width:44px; height:44px; color:var(--premium); }

/* succès + collection */
.collection { display:grid; grid-template-columns:repeat(9,1fr); gap:var(--cb-space-2); margin-bottom:var(--cb-space-3); }
.collection i { font-style:normal; background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline);
    color:var(--muted); border-radius:var(--radius-sm); padding:var(--cb-space-2) 0;
    text-align:center; font-weight:var(--cb-font-bold,800); font-size:.8125rem; }
.collection i.on { background:var(--field); color:var(--premium); border-color:var(--premium);
    box-shadow:0 0 0 2px var(--premium); }

.badge-list { display:flex; flex-direction:column; gap:var(--cb-gap-xs); text-align:start; }
.badge-list div { display:flex; align-items:center; gap:var(--cb-gap-sm);
    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-4); box-shadow:var(--shadow-xs); }
.badge-list div b { display:inline-flex; width:1.3rem; height:1.3rem; color:var(--muted); flex:none; }
.badge-list div b svg { width:100%; height:100%; }
.badge-list div .nm { flex:1; font-weight:var(--cb-font-bold,700); font-size:.875rem; }
.badge-list div .pg { font-size:.8125rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.badge-list div.done { border-color:var(--premium); }
.badge-list div.done b { color:var(--premium); }
.badge-list div.done .pg { color:var(--ok); font-weight:var(--cb-font-black,900); }

/* thèmes cosmétiques (mérités, `data-skin`) */
.themes { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--cb-gap-sm); margin-bottom:var(--cb-space-3); }
.themes button { margin:0; padding:var(--cb-space-5) var(--cb-space-3); background:var(--panel2); color:var(--toon-outline);
    border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--radius-md);
    box-shadow:var(--shadow-xs); display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-1); }
.themes button small { font-size:.75rem; color:var(--muted); font-weight:var(--cb-font-semibold,600); }
.themes button.on { background:var(--field); border-color:var(--premium); box-shadow:0 0 0 2px var(--premium); }
.themes button.on small { color:var(--premium); }
.themes button:disabled { opacity:.45; cursor:not-allowed; }

/* notification passagère (lien copié, partage...) */
.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); }
}

/* micro-rebond : posé puis retiré par fx.bump() */
.shake-lite { animation:shake-lite var(--dur-slow) var(--ease-out); }
@keyframes shake-lite {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  50% { transform:translateX(5px); }
  75% { transform:translateX(-3px); }
}

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

/* ============================================================================
   THÈMES COSMÉTIQUES (`data-skin`, mérités — src/engage-config.js `themes`)
   Un skin ne repeint que des variables de matière : aucune règle de jeu,
   aucune taille, aucun contraste sous le seuil lisible. Distinct de
   `data-theme` (clair/sombre), jamais écrasé par lui.
   ========================================================================== */
:root[data-skin="aurora"] {
  --bg1:#051820; --bg2:#081a24;
  --panel: linear-gradient(160deg, #123542 0%, #081a24 100%);
  --panel2: linear-gradient(150deg, #0f2a36 0%, #081a24 100%);
  --panel3: linear-gradient(150deg, #143a47 0%, #0c2530 100%);
  --field: linear-gradient(165deg, #0f2a36 0%, #081a24 100%);
  --tile:#123542; --accent:#5ce1e6; --accent-fg:#7eeef5; --accent-bright:#7eeef5; --accent-ink:#051820;
}
:root[data-skin="ember"] {
  --bg1:#160a0f; --bg2:#1d0f16;
  --panel: linear-gradient(160deg, #2c1620 0%, #1d0f16 100%);
  --panel2: linear-gradient(150deg, #251520 0%, #1d0f16 100%);
  --panel3: linear-gradient(150deg, #3c1f30 0%, #2c1620 100%);
  --field: linear-gradient(165deg, #251520 0%, #1d0f16 100%);
  --tile:#3a1c28; --accent:#ff9f43; --accent-fg:#ffb366; --accent-bright:#ffb366; --accent-ink:#4a1a00;
}
:root[data-skin="gold"] {
  --bg1:#130e05; --bg2:#1a1608;
  --panel: linear-gradient(160deg, #2a2410 0%, #1a1608 100%);
  --panel2: linear-gradient(150deg, #241f0e 0%, #1a1608 100%);
  --panel3: linear-gradient(150deg, #3a3418 0%, #2a2410 100%);
  --field: linear-gradient(165deg, #241f0e 0%, #1a1608 100%);
  --tile:#332c14; --accent:#ffd23f; --accent-fg:#ffe27a; --accent-bright:#ffe27a; --accent-ink:#2a1d00;
}

/* 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; }
  .overlay .big { font-size:38px; margin:6px 0 2px; }
  .overlay h2 { font-size:20px; margin-bottom:4px; }
  .chip { padding:5px 10px; font-size:12px; }
  .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:30vh; }
  .board { max-height:44vh; }
}

/* 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, .chip.adds.empty, .daily-days i.on, .pair b, .overlay .big.lost,
  .road button.open, .tool.armed, .combo, .shake-lite, .coach, .logo, .overlay .big {
    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; }
  .tool { border-width:3px; }
}