/* BUBLO — style kawaii sticker (standard FACETA, cf BACKLOG.md §PIVOT DESIGN /
   §PROGRAMME AUTONOME, vague 3 : 7/66, suite alphabétique après `boxz`).
   Remplace la passe "verre premium" (glassmorphism, glows flous, ombres bokeh)
   par le patron kawaii B partagé : contour épais net, aplats/dégradés 2 tons
   (matière), une seule ombre plate (zéro flou), formes rondes. Identité du
   jeu conservée : vert CB-Arcade en accent, palette de bulles inchangée. */
:root {
  /* ---- PALETTE (Dark Mode, defaut) ---- */
  --bg: #0e1219;
  --glow: #1a2a3f;
  --cell: #1a2029;
  --line: #2a3342;

  --ink: #f0f4fa;                /* couleur de TEXTE (jamais le contour) */
  --muted: #9aa8bd;

  --accent: #38e08b;             /* vert CB-Arcade, inchange */
  --accent-ink: #062015;
  --warm: #ffb300;

  /* Bulles : palette inchangee (identite du jeu) */
  --color-r-light: #ff8fa3; --color-r-dark: #c93a42;
  --color-y-light: #ffe053; --color-y-dark: #d4a137;
  --color-b-light: #5ec7ff; --color-b-dark: #0093d0;
  --color-g-light: #38e08b; --color-g-dark: #1fa068;
  --color-p-light: #d59fff; --color-p-dark: #9b3fdd;
  --color-c-light: #10e8ff; --color-c-dark: #0075b8;

  /* Contour kawaii : --toon-outline ADAPTATIF (accent clair sur fond sombre, encre
     foncee sur fond clair) pour panneaux/chips/cartes ; --toon-outline-ink TOUJOURS
     fonce, pour l'ombre posee sur un fond deja vif (boutons pleins), lisible
     dans les deux themes (meme patron que faceta/boxz ; nom distinct de
     --ink qui designe ici la couleur de TEXTE depuis toujours, cf atouz). */
  --toon-outline: var(--accent);
  --toon-outline-ink: #04150d;
  --toon-outline-w: 2.5px;
  --kawaii-sheen: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 48%);

  /* Panneaux en degrade 2 tons (matiere) */
  --panel: linear-gradient(160deg, #1c2436 0%, #12161f 100%);
  --panel-2: linear-gradient(150deg, #232d42 0%, #171d2b 100%);
  --panel-2-hover: linear-gradient(150deg, #2a3550 0%, #1c2333 100%);
  --field: linear-gradient(165deg, #171d2e 0%, #0e121b 100%);

  --border: var(--toon-outline-w) solid var(--toon-outline);
  --glow-accent: transparent;
  --glow-accent-bright: transparent;
  --glow-accent-ultra: transparent;
  --glow-danger: transparent;
  --glow-warm: transparent;

  /* Ombres sticker : decalage NET, zero flou (remplace le bokeh premium) */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --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 5px 0 var(--toon-outline-ink);
  --shadow-xl: 0 6px 0 var(--toon-outline-ink);
  --shadow-panel: 0 8px 0 var(--toon-outline-ink);

  /* Zero glassmorphism : plus de flou nulle part (kawaii = aplats nets) */
  --glass-blur: none;
  --glass-bg: var(--panel-2);
  --glass-bg-light: var(--panel-2-hover);
  --glass-border: var(--toon-outline);
  --glass-border-strong: var(--toon-outline);
  --glass-inset: var(--shadow-inset);

  /* Rayons : formes rondes adorables */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-pill: 999px;

  /* Animations : sobres, fluides, respectent prefers-reduced-motion */
  --duration-instant: 0.08s;
  --duration-fast: 0.14s;
  --duration-normal: 0.20s;
  --duration-slow: 0.35s;
  --duration-deliberate: 0.45s;

  --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in-out: cubic-bezier(0.38, 0.1, 0.2, 1);
  --easing-subtle: cubic-bezier(0.4, 0, 0.6, 1);

  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #e6f5ff;
  --glow: #cce7f5;
  --cell: #f0f7ff;
  --line: #d1e5f7;

  --ink: #0d1f38;
  --muted: #5a7a9e;

  --accent: #20b56c;
  --accent-ink: #ffffff;

  /* Bulles light mode : saturées mais lisibles */
  --color-r-light: #ff5c7a; --color-r-dark: #d93d52;
  --color-y-light: #ffb800; --color-y-dark: #c68600;
  --color-b-light: #1a9eff; --color-b-dark: #0080cc;
  --color-g-light: #20b56c; --color-g-dark: #158a4d;
  --color-p-light: #b368ff; --color-p-dark: #8832b8;
  --color-c-light: #00b8cc; --color-c-dark: #008899;

  /* Contour + panneaux light mode : encre foncee, papier clair */
  --toon-outline: #0d5c3e;
  --toon-outline-ink: #0d5c3e;
  --panel: #ffffff;
  --panel-2: #eafaf1;
  --panel-2-hover: #dcf5e6;
  --field: #ddf2e6;

  /* Ombres sticker light mode : meme decalage net, teinte encre */
  --shadow-panel: 0 8px 0 var(--toon-outline-ink);
  --shadow-xl: 0 6px 0 var(--toon-outline-ink);
  --shadow-lg: 0 5px 0 var(--toon-outline-ink);
  --shadow-md: 0 4px 0 var(--toon-outline-ink);
  --shadow-sm: 0 3px 0 var(--toon-outline-ink);
  --shadow-xs: 0 2px 0 var(--toon-outline-ink);

  --glass-bg: var(--panel-2);
  --glass-bg-light: var(--panel-2-hover);
  --glass-border: var(--toon-outline);

  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, var(--glow) 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  overscroll-behavior: none;
  touch-action: none;
}

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

.brand {
  font-weight: 800; letter-spacing: var(--cb-letter-spacing-caps, 0.03em);
  font-size: 20px; line-height: 1.2;
  background: linear-gradient(90deg, var(--ink) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand b {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  background: linear-gradient(90deg, var(--accent) 0%, #00d9ff 100%);
  -webkit-background-clip: text;
}

.scores {
  display: flex; gap: var(--cb-gap-lg, 12px);
}

.score {
  text-align: end; display: flex; flex-direction: column; gap: 2px;
}

.score .lbl {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: var(--cb-letter-spacing-label, 0.02em);
  font-weight: 600;
}

.score .val {
  font-size: 24px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--accent);
}
/* Bezel kawaii autour du canvas : aplat + contour epais net, ombre sticker */
.board-wrap {
  width: 100%; padding: 10px; border-radius: var(--radius-lg);
  background: var(--kawaii-sheen), var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline);
  /* Teinte de palier (applyTierAccent(), src/game.js) : anneau NET (zero flou),
     pas un glow — meme signal de progression, rendu kawaii sticker. */
  box-shadow: var(--shadow-lg), inset 0 0 0 3px var(--tier-glow, transparent);
  margin-block: 0 auto;
  max-width: min(100%, calc((100vh - 188px) * 0.732 + 20px));
  max-width: min(100%, calc((100dvh - 188px) * 0.732 + 20px));
  transition: box-shadow var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

.board-wrap:focus-within {
  box-shadow: var(--shadow-xl), 0 0 0 3px var(--accent);
  transition: box-shadow var(--duration-normal) ease,
              border-color var(--duration-normal) ease;
}

canvas {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-md);
  touch-action: none;
  background: var(--field);
  box-shadow: inset 0 0 0 3px var(--tier-glow-canvas, transparent);
}

footer {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding-bottom: 6px;
  min-height: 16px;
  animation: hint-fade var(--duration-slow) var(--easing-out);
  letter-spacing: 0.3px;
}

@keyframes hint-fade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* HUD : niveau + monnaie + accès réglages */
.hud {
  width: 100%; display: flex; gap: var(--cb-gap-md, 8px);
  align-items: center; padding: 0 4px;
}

.chip {
  background: var(--glass-bg);
  border: var(--toon-outline-w) solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs),
              var(--glass-inset),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background var(--duration-normal) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-normal) ease,
              transform var(--duration-fast) ease,
              box-shadow var(--duration-normal) ease;
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chip .ico { width: 15px; height: 15px; flex: 0 0 auto; display: block; }

/* Porte-monnaie mutualisé : Jouer (icône pièce) + Gagner ◆ (2 soldes visibles) */
.hchips { display: flex; gap: var(--cb-gap-md, 8px); align-items: center; }
.chip.earn {
  color: var(--gold, #e8c14a);
  border-color: rgba(232, 193, 74, 0.32);
  background: rgba(232, 193, 74, 0.10);
}

.chip.pulse { animation: chip-pop 0.4s var(--easing-bounce); }

@keyframes chip-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); background: rgba(56, 224, 139, 0.15); }
  100% { transform: scale(1); }
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: rgba(56, 224, 139, 0.3);
    transform: translateY(-1px);
    box-shadow: var(--glass-inset), var(--shadow-sm);
  }
}

.chip-btn {
  font-family: inherit; width: auto; margin: 0 0 0 auto;
  padding: 8px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-bg);
  border: var(--toon-outline-w) solid var(--glass-border);
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--radius-md);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs),
              var(--glass-inset);
  transition: transform var(--duration-fast) ease,
              filter var(--duration-fast) ease,
              border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease,
              background var(--duration-normal) ease;
}
.chip-btn .ico { width: 19px; height: 19px; flex: 0 0 auto; display: block; }

.chip-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chip-btn:active:not(:disabled) { transform: scale(0.94); }

.chip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .chip-btn:not(:disabled):hover {
    border-color: rgba(56, 224, 139, 0.32);
    background: var(--glass-bg-light);
    filter: brightness(1.08);
    box-shadow: var(--shadow-sm),
                var(--glass-inset),
                0 0 0 1px rgba(56, 224, 139, 0.35);
    transform: translateY(-2px);
  }
}

/* Barre d'OUTILS (Repérage / Couleur) : une rangée, jamais empilée — on
   surcharge le reset global `button{width:100%}` pour rester compacte. */
.toolbar {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--cb-gap-md, 8px);
  flex-wrap: nowrap;
}
.toolbar[hidden] { display: none; }

.tool-btn {
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 16px;
  font-weight: 800;
  border-radius: var(--radius-md);
  border: var(--toon-outline-w) solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs), var(--glass-inset);
  transition: transform var(--duration-fast) var(--easing-bounce),
              box-shadow var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              background var(--duration-normal) ease;
}
.tool-btn .ico { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent); }
.tool-btn .tmeta {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.15; min-width: 0;
}
.tool-btn .tname {
  font-size: 10.5px; font-weight: 700; opacity: 0.85; white-space: nowrap;
}
.tool-btn .cost {
  font-size: 12.5px; font-weight: 800; color: var(--warm);
  font-variant-numeric: tabular-nums;
}
.tool-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tool-btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .tool-btn:not(:disabled):hover {
    border-color: rgba(56, 224, 139, 0.32);
    background: var(--glass-bg-light);
    box-shadow: var(--shadow-sm), var(--glass-inset), 0 0 12px var(--glow-accent);
    transform: translateY(-2px);
  }
}
.tool-btn:active:not(:disabled) { transform: scale(0.94); }

/* Overlays kawaii (accueil, fin de partie, défis, outils) : voile plat net,
   zéro flou (le fond derrière n'a plus besoin d'être flouté pour se lire). */
.overlay {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(7, 10, 16, 0.75);
  z-index: 5;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

html[data-theme="light"] .overlay { background: rgba(13, 31, 56, 0.48); }

.overlay.show {
  display: flex;
  animation: fade-in-overlay var(--duration-slow) ease-out;
}

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

.overlay .card {
  background: var(--kawaii-sheen), var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  width: min(360px, 88vw);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-panel);
  color: var(--ink);
  display: block;
  animation: card-rise var(--duration-slow) var(--easing-bounce);
}

@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.88);
  }
  50% {
    transform: translateY(-2px) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.overlay .card.wide { width: min(420px, 92vw); }

.overlay h2 {
  margin: 0 0 6px; font-size: 28px;
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--ink);
  animation: fade-in-text var(--duration-normal) var(--easing-out);
}

@keyframes fade-in-text {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.overlay .big {
  font-size: 54px; font-weight: 900;
  color: var(--accent); margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  animation: fade-in-big var(--duration-slow) var(--easing-out);
}

@keyframes fade-in-big {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.overlay .sub {
  color: var(--muted); font-size: 13px;
  margin-bottom: 16px; line-height: 1.4;
}
button {
  border: 0;
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 800;
  width: 100%;
  cursor: pointer;
  margin-top: var(--cb-space-6, 9px);
  font-family: inherit;
  transition: transform var(--duration-normal) cubic-bezier(0.34, 1.56, 0.64, 1),
              filter var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease,
              background var(--duration-normal) ease,
              border-color var(--duration-normal) ease,
              opacity var(--duration-normal) ease,
              text-shadow var(--duration-normal) ease;
  line-height: 1.2;
  position: relative;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:active:not(:disabled) {
  transform: scale(0.94);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm),
              0 0 0 0 rgba(56, 224, 139, 0),
              inset 0 1px 0 rgba(255, 255, 255, 0.25),
              inset 0 -2px 4px rgba(0, 0, 0, 0.08);
  font-weight: 800;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  border-radius: var(--radius-md);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):hover {
    filter: brightness(1.12) saturate(1.1);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg),
                0 0 24px var(--glow-accent-ultra),
                0 0 12px var(--glow-accent-bright),
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  }
}

.btn-ghost {
  background: var(--glass-bg);
  color: var(--ink);
  border: var(--toon-outline-w) solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs),
              var(--glass-inset);
  -webkit-backdrop-filter: var(--glass-blur);
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:not(:disabled):hover {
    background: var(--glass-bg-light);
    border-color: rgba(56, 224, 139, 0.3);
    box-shadow: var(--shadow-sm),
                var(--glass-inset),
                0 0 0 1px rgba(56, 224, 139, 0.35);
    transform: translateY(-3px);
  }
}

.btn-rewarded {
  background: linear-gradient(135deg, #1fa068 0%, #38e08b 100%);
  color: #062015;
  box-shadow: var(--shadow-sm),
              0 0 0 0 rgba(56, 224, 139, 0),
              inset 0 1px 0 rgba(255, 255, 255, 0.28),
              inset 0 -2px 4px rgba(0, 0, 0, 0.10);
  font-weight: 800;
  position: relative;
  overflow: hidden;
}

.btn-rewarded::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, transparent 65%);
  border-radius: var(--radius-md);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-rewarded:not(:disabled):hover {
    filter: brightness(1.14) saturate(1.12);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg),
                0 0 28px var(--glow-accent-ultra),
                0 0 12px var(--glow-accent-bright),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  }
}

.btn-rewarded small {
  display: block;
  font-weight: 600;
  opacity: 0.88;
  font-size: 11px;
  margin-top: 2px;
}

.btn-share {
  background: linear-gradient(135deg, #ff6b5b 0%, #ffb300 100%);
  color: #1a0800;
  box-shadow: var(--shadow-sm),
              0 0 0 0 rgba(255, 165, 0, 0),
              inset 0 1px 0 rgba(255, 255, 255, 0.28),
              inset 0 -2px 4px rgba(0, 0, 0, 0.10);
  font-weight: 800;
  position: relative;
  overflow: hidden;
}

.btn-share::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, transparent 65%);
  border-radius: var(--radius-md);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-share:not(:disabled):hover {
    filter: brightness(1.13) saturate(1.14);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  }
}

.btn-share.hot {
  animation: pulse-glow 2s var(--easing-subtle) infinite;
}

/* Anneau qui pulse (NET, zero flou) pour attirer l'oeil sur "Partager" */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: var(--shadow-sm), 0 0 0 0 rgba(255, 165, 0, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow: var(--shadow-md), 0 0 0 8px rgba(255, 165, 0, 0);
    transform: scale(1.04);
  }
}

.btn-small {
  width: auto;
  margin: 0;
  padding: 12px 15px;
  font-size: 14px;
  font-weight: 600;
  background: var(--glass-bg);
  color: var(--ink);
  white-space: nowrap;
  border: var(--toon-outline-w) solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs),
              var(--glass-inset);
  transition: transform var(--duration-fast) ease,
              border-color var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease,
              background var(--duration-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn-small:not(:disabled):hover {
    border-color: rgba(56, 224, 139, 0.32);
    background: var(--glass-bg-light);
    box-shadow: var(--shadow-sm),
                var(--glass-inset),
                0 0 0 1px rgba(56, 224, 139, 0.35);
    transform: translateY(-2px);
  }
}

.btn-small:active:not(:disabled) {
  transform: scale(0.96);
}

/* Écran d'accueil */
.overlay .card.home {
  padding: 22px 20px 18px;
  max-height: 90vh;
}

.logo {
  font-weight: 900;
  letter-spacing: var(--cb-letter-spacing-caps, 0.04em);
  font-size: 42px;
  line-height: 1.1;
  margin-bottom: 10px;
  animation: logo-fade-in var(--duration-slow) var(--easing-out);
  background: linear-gradient(135deg, var(--ink) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes logo-fade-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.logo b {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  background: linear-gradient(135deg, var(--accent) 0%, #00d9ff 100%);
  -webkit-background-clip: text;
}

.card.home .sub { margin-bottom: 14px; }

.stats {
  display: flex; gap: var(--cb-gap-md, 8px);
  margin-bottom: 8px;
}

.stat {
  flex: 1;
  background: var(--glass-bg);
  border: var(--toon-outline-w) solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs),
              var(--glass-inset),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color var(--duration-normal) ease,
              transform var(--duration-fast) ease,
              box-shadow var(--duration-normal) ease,
              background var(--duration-normal) ease;
}

@media (hover: hover) and (pointer: fine) {
  .stat:hover {
    border-color: rgba(56, 224, 139, 0.28);
    background: var(--glass-bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm),
                var(--glass-inset),
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 0 0 1px rgba(56, 224, 139, 0.35);
  }
}

.stat .lbl {
  font-size: 9px; color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--cb-letter-spacing-label, 0.02em);
  font-weight: 600;
}

.stat .val {
  font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--accent);
}

/* Défis : liste de niveaux (kawaii + rangées, même langage que .stat).
   NB : conteneur reel = #levels-grid.levels-grid (index.html), pas
   .challenge-list — l'ancien nom de classe ne correspondait a aucun element
   du DOM (ecran reglages/boutique/amis jamais construit ici), corrige au
   passage (regression pre-existante, sans rapport avec la passe kawaii). */
.levels-grid {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
  text-align: start;
}

.challenge-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 0; text-align: start;
  background: var(--glass-bg);
  border: var(--toon-outline-w) solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs), var(--glass-inset);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--duration-normal) ease,
              background var(--duration-normal) ease,
              box-shadow var(--duration-normal) ease,
              transform var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .challenge-item:not(:disabled):hover {
    background: var(--glass-bg-light);
    border-color: rgba(56, 224, 139, 0.28);
    box-shadow: var(--shadow-sm), var(--glass-inset);
    transform: translateY(-1px);
  }
}

.challenge-item.cleared { border-color: rgba(56, 224, 139, 0.4); }
.challenge-item.locked  { opacity: 0.5; }

.challenge-id {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.challenge-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }

.challenge-name { font-weight: 800; font-size: 14px; }

.challenge-desc {
  font-size: 12px; font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

.challenge-state {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  color: var(--muted);
}

.challenge-state svg { width: 100%; height: 100%; display: block; }

.challenge-item.cleared .challenge-state { color: var(--accent); }
.challenge-item:not(.cleared):not(.locked) .challenge-state { color: var(--accent); }

/* Toast : un seul message à la fois, jamais bloquant */
.toast {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 8px);
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 9;
  background: var(--glass-bg);
  border: var(--toon-outline-w) solid var(--glass-border);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  max-width: 88vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  transition: opacity var(--duration-slow) ease,
              transform var(--duration-slow) ease;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -8px);
  pointer-events: auto;
}

/* Accessibilité clavier : anneau focus visible cohérent avec l'accent */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  button, input, select, .chip {
    border-width: 3px;
  }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline-width: 3px;
  }
}

/* Mouvement réduit : couper les animations/transitions décoratives */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Arabe : mise en page symétrique */
[dir=rtl] .brand, [dir=rtl] .logo { letter-spacing: normal; direction: ltr; }

/* Particules de confettis (victoire niveau) */
.confetti-particle {
  position: fixed;
  pointer-events: none;
  font-size: 12px;
  z-index: 10;
  animation: confetti-fall var(--duration-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(80px) translateX(var(--tx)) rotate(720deg) scale(0.1);
  }
}

/* Badge de victoire : pulse net sur le texte "Best" (zero flou) */
.overlay .big.best-glow {
  animation: best-glow-pulse 0.6s var(--easing-bounce);
}

@keyframes best-glow-pulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

#wrap:focus-within footer {
  opacity: 1;
}

/* Outils achetables : grille 2x3 avec prezentation prix/disponibilité */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0 20px;
}

.tool-card {
  background: var(--glass-bg);
  border: var(--toon-outline-w) solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-xs), var(--glass-inset);
  transition: all var(--duration-normal) ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-card:not(.locked):hover {
  border-color: rgba(56, 224, 139, 0.3);
  background: var(--glass-bg-light);
  box-shadow: var(--shadow-sm), var(--glass-inset), 0 0 0 1px rgba(56, 224, 139, 0.35);
  transform: translateY(-2px);
}

.tool-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(255, 92, 122, 0.2);
}

.tool-emoji { color: var(--accent); }
.tool-emoji .ico { width: 26px; height: 26px; display: block; margin: 0 auto; }

.tool-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.tool-cost {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.tool-cost .ico { width: 13px; height: 13px; flex: 0 0 auto; }

.tool-card.locked .tool-cost {
  color: rgba(255, 92, 122, 0.6);
}