/* ============================================================================
   UNBLOK — 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 blur/saturate + glows bokeh
   multi-layer + @media prefers-color-scheme seul, ignorait le choix explicite
   fait sur le hub, cf _kit/theme.js).

   IDENTITÉ conservée : plateau indigo/violet profond, or réservé à la monnaie/
   à la sortie du plateau, vert pour la réussite (cohérent fleet-wide, cf.
   triplo/sudz/mazz). Le PLATEAU (canvas, src/game.js THEME) garde sa propre
   identité — seul le CHROME (header, chips, HUD, boutons, cartes/overlays,
   tutoriel) reçoit le kawaii. 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 {
  --bg1: #100b2c; --bg2: #0a0720;
  --panel:  linear-gradient(160deg, #241a52 0%, #17123a 100%);
  --panel2: linear-gradient(150deg, #2a1f5e 0%, #1a1444 100%);
  --panel3: linear-gradient(150deg, #2e2266 0%, #1d1650 100%);
  --field:  linear-gradient(165deg, #1c1548 0%, #120d34 100%);
  --board: #191142; --cell: #241a63; --target: #FF4D5E;

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

  --accent: #38e08b; --accent-ink: #04150c; --accent-bright: #5cf0a6;
  --premium: #d4af37; --premium-light: #ffd75a; --premium-ink: #241a02;
  --violet: #6644ff;
  --ok: #38e08b; --bad: #ff6b63; --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);

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

  --focus-ring: 2px solid var(--premium);
  --focus-offset: 2px;

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg1: #f5f7fb; --bg2: #eceef6;
  --panel: #ffffff; --panel2: #f3f1fb; --panel3: #ece8f7;
  --field: #f3f1fb; --board: #fafbfc; --cell: #f0eff8; --target: #c94741;

  --toon-outline: #231a45; --toon-outline-ink: #231a45; --muted: #6b6591;

  --accent: #1d9c63; --accent-ink: #ffffff; --accent-bright: #20b56c;
  --premium: #a9781a; --premium-light: #d4af37; --premium-ink: #ffffff;
  --ok: #1d9c63; --bad: #c1423a; --warning: #a9781a;

  --shadow-xl: 0 8px 0 var(--toon-outline-ink), 0 18px 32px rgba(35, 26, 69, .14);
  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;
  color-scheme: dark;
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}

body[dir="rtl"] {
  direction: rtl;
}

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

/* ---- en-tête + hud -------------------------------------------------------- */
header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cb-pad-xs) var(--cb-space-4) 0;
  gap: var(--cb-gap-md);
}

.brand {
  font-size: var(--cb-heading-lg);
  font-weight: var(--cb-font-black);
  letter-spacing: var(--cb-letter-spacing-caps);
}

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

.hud {
  width: 100%;
  display: flex;
  gap: var(--cb-gap-sm);
  align-items: center;
  flex-wrap: wrap;
}

.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-6);
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-font-bold);
  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);
  color: var(--toon-outline);
}

.chip .ico-svg { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -.15em; }
.chip .ico-svg svg { width: 100%; height: 100%; }

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

.chip small {
  font-weight: var(--cb-font-semibold);
  color: var(--muted);
  font-size: var(--cb-text-xs);
}

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

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

.chip-btn {
  font-family: inherit;
  width: auto;
  margin: 0;
  padding: var(--cb-space-3) var(--cb-space-5);
  background: var(--panel2);
  color: var(--toon-outline);
  cursor: pointer;
  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;
  transition: transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-instant) var(--ease-out);
}

.chip-btn .ico-svg { display: inline-flex; width: 1.2em; height: 1.2em; }
.chip-btn .ico-svg svg { width: 100%; height: 100%; }

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

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

.hud .spacer {
  flex: 1;
}

/* Bouton help — accès au tutoriel/règles */
.chip-btn.help {
  color: var(--violet);
  border-color: var(--violet);
}

@media (max-width: 400px) {
  .hud {
    gap: var(--cb-gap-xs);
  }
  .chip {
    padding: var(--cb-space-2) var(--cb-space-4);
    font-size: var(--cb-text-xs);
    gap: var(--cb-space-2);
  }
}

/* board-head: affiche le niveau et les coups — centré verticalement. */
.board-head {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--cb-space-2) var(--cb-space-4);
  margin-top: auto;
  gap: var(--cb-gap-md);
}

.board-head .lvl {
  font-size: var(--cb-heading-sm);
  font-weight: var(--cb-font-bold);
  letter-spacing: .5px;
  color: var(--toon-outline);
}

.board-head .moves {
  font-size: var(--cb-heading-sm);
  font-weight: var(--cb-font-black);
  font-variant-numeric: tabular-nums;
  color: var(--toon-outline);
  text-align: end;
}

.board-head .moves small {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-font-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-caps);
  margin-inline-start: var(--cb-space-4);
  display: block;
}

.board-head .moves.low {
  color: var(--bad);
  animation: pulse-danger 1.5s ease-in-out infinite;
}

@keyframes pulse-danger {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}

/* Canvas: plateau de jeu — contour épais net, ombre sticker plate (zéro glow flou). */
canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  touch-action: none;
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-lg);
  transition: box-shadow var(--dur-instant);
}

/* ---- barre d'outils ------------------------------------------------------- */
.tools {
  width: 100%;
  display: flex;
  gap: var(--cb-gap-xs);
}

.tool {
  position: relative;
  flex: 1;
  width: auto;
  margin: 0;
  padding: var(--cb-space-4) var(--cb-space-2) var(--cb-space-3);
  background: var(--panel2);
  color: var(--toon-outline);
  font-family: inherit;
  font-size: var(--cb-text-xs);
  line-height: 1.15;
  border-radius: var(--radius-md);
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.tool .ic { display: block; width: 1.3rem; height: 1.3rem; margin: 0 auto; }
.tool .ic svg { width: 100%; height: 100%; }

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

.tool:active {
  transform: translateY(1px);
  box-shadow: none;
}

.tool .nm {
  display: block;
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-font-bold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-caps);
  margin-top: var(--cb-space-2);
}

.tool .n {
  position: absolute;
  top: -6px;
  inset-inline-end: -4px;
  min-width: 21px;
  height: 21px;
  border-radius: var(--cb-radius-pill);
  background: linear-gradient(135deg, var(--premium-light) 0%, var(--premium) 100%);
  color: var(--premium-ink);
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-font-black);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 var(--cb-space-3);
  font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--toon-outline-ink);
  box-shadow: var(--shadow-xs);
}

.tool .n .ic { display: inline-flex; width: .85em; height: .85em; margin: 0; }
.tool .n .ic svg { width: 100%; height: 100%; }

.tool.empty {
  opacity: .55;
}

.tool.empty .n {
  background: var(--panel3);
  color: var(--muted);
  border-color: var(--toon-outline);
}

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

.tool.on .nm {
  color: var(--premium);
  font-weight: var(--cb-font-black);
}

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

/* footer: conseil discret en bas */
footer {
  color: var(--muted);
  font-size: var(--cb-text-xs);
  text-align: center;
  padding-bottom: var(--cb-space-6);
  line-height: var(--cb-line-height-relaxed);
  margin-top: auto;
}

/* ---- overlays (modales) — sticker, zéro backdrop-filter -------------------- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 7, 32, .62);
  z-index: 5;
  padding: var(--cb-pad-lg);
}
html[data-theme="light"] .overlay { background: rgba(35, 26, 69, .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);
  padding: var(--cb-pad-lg) var(--cb-pad-md);
  width: min(380px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: card-in var(--dur-slow) var(--ease-bounce);
}

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

.overlay h2 {
  margin: 0 0 var(--cb-space-4);
  font-size: var(--cb-heading-lg);
  color: var(--toon-outline);
  font-weight: var(--cb-font-black);
}

.overlay .big {
  font-size: 3rem;
  font-weight: var(--cb-font-black);
  color: var(--premium);
  margin: var(--cb-pad-md) 0 var(--cb-pad-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--cb-letter-spacing-label);
  animation: win-pop var(--dur-deliberate) var(--ease-bounce);
}

.overlay .big.hearts {
  display: flex;
  justify-content: center;
  gap: var(--cb-space-3);
}
.overlay .big.hearts .ic { display: inline-flex; width: 40px; height: 40px; color: var(--bad); }
.overlay .big.hearts .ic svg { width: 100%; height: 100%; }

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

.overlay .sub {
  color: var(--muted);
  font-size: var(--cb-text-sm);
  margin-bottom: var(--cb-space-10);
  line-height: var(--cb-line-height-relaxed);
}

.overlay .row {
  display: flex;
  gap: var(--cb-gap-md);
}

.overlay .row > * {
  flex: 1;
}

/* Buttons — système de boutons cohérent, contour épais + ombre sticker */
button {
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius: var(--radius-md);
  padding: var(--cb-pad-md) var(--cb-pad-lg);
  font-size: var(--cb-text-base);
  font-weight: var(--cb-font-bold);
  width: 100%;
  cursor: pointer;
  margin-top: var(--cb-space-8);
  font-family: inherit;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Primary button — action principale (or premium) */
.btn-primary {
  background: linear-gradient(135deg, var(--premium-light) 0%, var(--premium) 100%);
  background-image: var(--kawaii-sheen), linear-gradient(135deg, var(--premium-light) 0%, var(--premium) 100%);
  color: var(--premium-ink);
  font-weight: var(--cb-font-black);
  letter-spacing: var(--cb-letter-spacing-label);
}

/* Ghost button — action secondaire, panneau contouré */
.btn-ghost {
  background: var(--panel2);
  color: var(--toon-outline);
  border-color: var(--toon-outline);
}

/* Rewarded button — action vidéo/récompense, gradient violet du studio */
.btn-rewarded {
  background: linear-gradient(135deg, #7c6bff 0%, var(--violet) 100%);
  background-image: var(--kawaii-sheen), linear-gradient(135deg, #7c6bff 0%, var(--violet) 100%);
  color: #ffffff;
  font-weight: var(--cb-font-black);
  letter-spacing: var(--cb-letter-spacing-label);
}

.btn-rewarded small,
.btn-primary small,
.btn-ghost small {
  display: block;
  font-weight: var(--cb-font-semibold);
  opacity: .9;
  font-size: var(--cb-text-xs);
  margin-top: var(--cb-space-2);
}

/* ---- accueil -------------------------------------------------------------- */
.card.home .logo {
  font-weight: var(--cb-font-black);
  letter-spacing: var(--cb-letter-spacing-caps);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--toon-outline);
  animation: logo-entrance var(--dur-deliberate) var(--ease-bounce);
}

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

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

.stats {
  display: flex;
  gap: var(--cb-gap-md);
  margin: var(--cb-space-10) 0 var(--cb-space-4);
}

.stat {
  flex: 1;
  background: var(--panel2);
  border-radius: var(--radius-md);
  padding: var(--cb-space-4) var(--cb-space-2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

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

.stat .lbl {
  font-size: var(--cb-text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-caps);
  font-weight: var(--cb-font-semibold);
}

.stat .val {
  font-size: var(--cb-heading-md);
  font-weight: var(--cb-font-black);
  font-variant-numeric: tabular-nums;
  color: var(--premium);
  margin-top: var(--cb-space-2);
}

/* ---- daily reward --------------------------------------------------------- */
.dots {
  display: flex;
  gap: var(--cb-gap-xs);
  justify-content: center;
  margin: var(--cb-space-10) 0 var(--cb-space-6);
}

.dot {
  flex: 1;
  max-width: 40px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--panel2);
  color: var(--muted);
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-font-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--toon-outline-w) solid var(--toon-outline);
  cursor: pointer;
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
  box-shadow: var(--shadow-xs);
}

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

.dot.on {
  background: linear-gradient(135deg, var(--premium-light) 0%, var(--premium) 100%);
  color: var(--premium-ink);
  border-color: var(--toon-outline-ink);
  box-shadow: var(--shadow-sm);
}

.dot.today {
  box-shadow: 0 0 0 2px var(--premium), var(--shadow-xs);
  animation: pulse-today .5s var(--ease-out);
}

@keyframes pulse-today {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.gift {
  display: flex;
  justify-content: center;
  margin: var(--cb-space-2) 0 var(--cb-space-4);
  animation: gift-idle 1.8s ease-in-out infinite;
}
.gift svg { width: 56px; height: 56px; color: var(--premium); }

@keyframes gift-idle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

/* ---- consigne visible (goal) ---------------------------------------------- */
.goal {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--cb-gap-md);
  text-align: start;
  padding: var(--cb-space-3) var(--cb-space-6);
  border-radius: var(--cb-radius-pill);
  font-size: var(--cb-text-sm);
  font-weight: var(--cb-font-bold);
  line-height: var(--cb-line-height-relaxed);
  color: var(--toon-outline);
  border: var(--toon-outline-w) solid var(--toon-outline);
  background: var(--panel2);
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-normal) var(--ease-out);
}

.goal .goal-ic {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--premium);
}
.goal .goal-ic svg { width: 100%; height: 100%; }

.goal.coach {
  color: var(--premium-ink);
  border-color: var(--toon-outline-ink);
  background: linear-gradient(135deg, var(--premium-light) 0%, var(--premium) 100%);
  font-weight: var(--cb-font-black);
  animation: goal-coach 1.8s ease-in-out infinite;
}
.goal.coach .goal-ic { color: var(--premium-ink); }

@keyframes goal-coach {
  0%, 100% { box-shadow: var(--shadow-xs); }
  50% { box-shadow: 0 0 0 3px var(--premium-light), var(--shadow-xs); }
}

/* ---- tutoriel / aide ------------------------------------------------------ */
.card.tuto h2 {
  margin-bottom: var(--cb-space-8);
}

.card.tuto .sub {
  min-height: 4.4em;
  margin-bottom: var(--cb-space-2);
}

.tuto-art {
  height: 152px;
  margin: var(--cb-space-2) 0 var(--cb-space-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: ltr;
  background: var(--field);
  background-image: var(--kawaii-sheen), var(--field);
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-sm);
}

.art {
  display: none;
}

.art.on {
  display: block;
  animation: fade .2s var(--ease-out);
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tuto-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cb-gap-md);
  flex-wrap: wrap;
  text-align: center;
  font-size: var(--cb-heading-md);
  font-weight: var(--cb-font-black);
  margin-bottom: var(--cb-space-5);
}

#tuto-icon { display: inline-flex; width: 1.4rem; height: 1.4rem; color: var(--premium); }
#tuto-icon svg { width: 100%; height: 100%; }

.tuto-dots {
  margin: var(--cb-space-8) 0 var(--cb-space-2);
  gap: var(--cb-gap-xs);
  display: flex;
  justify-content: center;
}

.tuto-dots .dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  max-width: none;
  padding: 0;
  border-radius: var(--cb-radius-pill);
  font-size: 0;
  background: var(--panel3);
  border: 1.5px solid var(--toon-outline);
  transition: all var(--dur-fast);
  cursor: pointer;
  box-shadow: none;
}

.tuto-dots .dot:hover {
  transform: none;
  background: var(--field);
}

.tuto-dots .dot.on {
  background: var(--premium);
  border-color: var(--toon-outline-ink);
  transform: scale(1.3);
}

/* Mini-plateau du tutoriel: même grammaire que le canvas (grille, tuiles, porte). */
.mini {
  --u: 30px;
  position: relative;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 3);
  border-radius: var(--radius-md);
  background-color: var(--cell);
  background-image: repeating-linear-gradient(90deg, var(--board) 0 4px, transparent 4px var(--u)),
    repeating-linear-gradient(180deg, var(--board) 0 4px, transparent 4px var(--u));
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-sm);
}

.mb {
  position: absolute;
  left: calc(var(--c) * var(--u) + 5px);
  top: calc(var(--r) * var(--u) + 5px);
  width: calc(var(--l) * var(--u) - 10px);
  height: calc(var(--u) - 10px);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .08) 44%, rgba(0, 0, 0, .2) 100%),
    var(--k);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  border: 1.5px solid rgba(0, 0, 0, .25);
}

.mb.v {
  width: calc(var(--u) - 10px);
  height: calc(var(--l) * var(--u) - 10px);
}

.mini-exit {
  position: absolute;
  inset-inline-end: -5px;
  top: calc(var(--u) + 6px);
  width: 7px;
  height: calc(var(--u) - 12px);
  border-radius: 4px;
  background: var(--premium);
  box-shadow: 0 0 8px var(--premium);
}

.finger {
  position: absolute;
  display: flex;
  width: 22px;
  height: 22px;
  color: var(--toon-outline);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.finger svg { width: 100%; height: 100%; }

/* Bloc rouge s'échappe: démontre le but (ligne rouge → porte dorée) */
.mb.esc {
  animation: tuto-esc 3s ease-in-out infinite;
}

@keyframes tuto-esc {
  0%, 18% { transform: translateX(0); opacity: 1; }
  58% { transform: translateX(calc(var(--u) * 3)); opacity: 1; }
  76% { transform: translateX(calc(var(--u) * 5.6)); opacity: 0; }
  77%, 88% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Geste de glissement (horizontal et vertical) */
.swipe-h, .fh {
  animation: tuto-swipe-h 2.4s ease-in-out infinite;
}

.swipe-v, .fv {
  animation: tuto-swipe-v 2.4s ease-in-out infinite;
}

.fh {
  left: calc(var(--u) * 0.72);
  top: calc(var(--u) * 1.42);
}

.fv {
  left: calc(var(--u) * 3.16);
  top: calc(var(--u) * 0.42);
}

@keyframes tuto-swipe-h {
  0%, 12% { transform: translateX(0); }
  46%, 58% { transform: translateX(var(--u)); }
  92%, 100% { transform: translateX(0); }
}

@keyframes tuto-swipe-v {
  0%, 12% { transform: translateY(0); }
  46%, 58% { transform: translateY(var(--u)); }
  92%, 100% { transform: translateY(0); }
}

/* Éléments du tutoriel: budget de coups, outils — en grand pour reconnaissance. */
.art-row {
  display: flex;
  gap: var(--cb-gap-lg);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.art-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-2);
  padding: var(--cb-space-4) var(--cb-pad-lg);
  border-radius: var(--cb-radius-pill);
  font-size: 1.25rem;
  font-weight: var(--cb-font-black);
  font-variant-numeric: tabular-nums;
  border: var(--toon-outline-w) solid var(--toon-outline);
  background: var(--panel2);
  box-shadow: var(--shadow-xs);
  color: var(--toon-outline);
}

.art-pill small {
  font-size: var(--cb-text-xs);
  font-weight: var(--cb-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-caps);
  color: var(--muted);
  margin-inline-start: var(--cb-space-2);
}

.art-pill.tick b {
  color: var(--bad);
  animation: bump-tick 1.6s ease-in-out infinite;
  display: inline-block;
}

@keyframes bump-tick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.art-pill.beat {
  font-size: var(--cb-text-sm);
  padding: var(--cb-space-4) var(--cb-space-6);
  gap: var(--cb-space-1);
  animation: gift-beat 2.4s ease-in-out infinite;
}
.art-pill.beat .ic { display: inline-flex; width: 1.1rem; height: 1.1rem; color: var(--bad); }
.art-pill.beat .ic svg { width: 100%; height: 100%; }

@keyframes gift-beat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.05); }
  50% { transform: scale(1.1); }
  75% { transform: scale(1.05); }
}

.art-tool {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--toon-outline);
  background: var(--panel2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-xs);
  animation: tuto-bob 1.9s ease-in-out infinite;
}
.art-tool svg { width: 1.5rem; height: 1.5rem; }

.art-tool:nth-child(2) { animation-delay: .16s; }
.art-tool:nth-child(3) { animation-delay: .32s; }
.art-tool:nth-child(4) { animation-delay: .48s; }

@keyframes tuto-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- toast (notifications) ------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--panel2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  color: var(--toon-outline);
  font-size: var(--cb-text-sm);
  font-weight: var(--cb-font-semibold);
  padding: var(--cb-space-3) var(--cb-space-6);
  border-radius: var(--cb-radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal), transform var(--dur-normal);
  z-index: 9;
  box-shadow: var(--shadow-lg);
  max-width: 88vw;
  text-align: center;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--cb-space-3));
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  animation: toast-in var(--dur-normal) var(--ease-out);
}

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

/* ---- Porte-monnaie mutualisé CB-Arcade (2 soldes : Jouer + Gagner ◆) ------- */
.wallet-hud {
  display: flex;
  gap: var(--cb-gap-md, 8px);
  justify-content: center;
  margin: 4px 0 2px;
}

.wchip {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-2);
  font-weight: var(--cb-font-black);
  font-size: .8rem;
  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.05em; height: 1.05em; }
.wchip .ic svg { width: 100%; height: 100%; }

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

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

/* ---- Accessibilité: respect prefers-reduced-motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mode contraste élevé : bordures plus épaisses */
@media (prefers-contrast: more) {
  button, .chip, .chip-btn, .tool, .overlay .card, .goal, .wchip {
    border-width: 3px;
  }
}