/* ============================================================================
   SUDZ — PASSE ESTHÉTIQUE PREMIUM COMPLÈTE (2026-08-31).
   Mobile-first, harmonisé avec Kit-Design, premium cohérent.

   PALETTE: vert lumineux (#38e08b), or (#d4af37), neutres progressifs
   TYPO: système harmonique scale, letter-spacing labels, lisible
   ESPACEMENTS: 8px grid strict, aucun ad-hoc
   RAYONS: 4-24px smooth, jamais tranchant
   OMBRES: bokeh 6-28px, profondeur premium
   GLASSMORPHISM: blur(10px)+saturate(1.15), verre dépoli ultra-fine
   ANIMATIONS: 0.08-0.4s, respects prefers-reduced-motion
   RTL: flex-direction + margin-inline auto-flip, no hacks
   SAFE-AREAS: iOS notch/Dynamic Island gérés par env() + max()
   FOCUS: or subtle + soft shadow, WCAG AAA contraste partout
   RESPONSIVE: mobile-first, tested sur iPhone SE → 6.7"
   LIGHT/DARK: cohérent, pas de breaks, transitioned smooth
   ========================================================================== */
:root {
  /* Palette premium = Kit-Design tokens (hérité via social.js) */
  --bg1:var(--cb-surface-0,#151d2a); --bg2:var(--cb-surface-1,#0f131a);
  --panel:var(--cb-surface-0,#151d2a); --panel2:var(--cb-surface-1,#0f131a);
  --panel3:var(--cb-neutral-800,#2a3342);
  --field:var(--cb-surface-2,#1a2332); --grid:var(--cb-border-medium,rgba(255,255,255,.12));
  --ink:var(--cb-text-primary,#f0f4fa); --muted:var(--cb-text-secondary,#9aa8bd);

  /* Accents premium Kit : vert lumineux + or riche */
  --accent:var(--cb-primary,#38e08b);
  --accent-ink:var(--cb-text-on-primary,#062015);
  --accent-fg:var(--cb-primary-light,#52f5a5);
  --accent-bright:#52f5a5;

  /* Premium/bonus : or CB-ARCADE */
  --premium:var(--cb-accent,#d4af37);
  --premium-light:var(--cb-accent-light,#ffd54f);
  --premium-ink:var(--cb-text-on-accent,#0a0f22);

  /* Sémantiques : actions + états */
  --ok:var(--cb-success,#38e08b);
  --sel:var(--cb-primary,#38e08b);
  --bad:var(--cb-danger,#ff5252);
  --warning:var(--cb-warning,#ffb300);

  /* Tile du sudoku : surface contraste */
  --tile:var(--cb-surface-2,#1a2332);

  /* Glows sémantiques premium (5 variables) */
  --glow-accent: rgba(212, 175, 55, 0.16);
  --glow-accent-bright: rgba(212, 175, 55, 0.25);
  --glow-accent-max: rgba(212, 175, 55, 0.35);
  --glow-green: rgba(56, 224, 139, 0.12);
  --glow-red: rgba(255, 82, 82, 0.12);

  /* Rayons premium (smooth scale : 4-24px) */
  --radius-lg:var(--cb-radius-lg,16px);
  --radius-md:var(--cb-radius-md,12px);
  --radius-sm:var(--cb-radius-sm,8px);

  /* Ombres bokeh premium (6-28px blur, opacité 0.15-0.55) */
  --shadow-xs:var(--cb-shadow-xs,0 2px 6px rgba(0,0,0,.16));
  --shadow-sm:var(--cb-shadow-sm,0 4px 14px rgba(0,0,0,.20));
  --shadow-md:var(--cb-shadow-md,0 8px 24px rgba(0,0,0,.22));
  --shadow-lg:var(--cb-shadow-lg,0 12px 40px rgba(0,0,0,.30));
  --shadow-xl:var(--cb-shadow-xl,0 20px 60px rgba(0,0,0,.40));
  --shadow-2xl:var(--cb-shadow-2xl,0 32px 80px rgba(0,0,0,.60));
  --shadow-inset:var(--cb-shadow-inset,inset 0 1px 0 rgba(255,255,255,.12));

  /* Glassmorphism premium (blur + saturate, verre dépoli) */
  --glass-blur:var(--cb-glass-blur,blur(10px) saturate(1.15));
  --glass-bg:var(--cb-glass-bg,rgba(20,26,35,.85));

  /* Transitions + animations (0.08-0.45s, ease-out default, allongées pour feel luxueux) */
  --dur-instant:var(--cb-duration-instant,.08s);
  --dur-fast:var(--cb-duration-fast,.14s);
  --dur-normal:var(--cb-duration-normal,.20s);
  --dur-normal-long:0.2s;
  --dur-slow:var(--cb-duration-slow,.35s);
  --dur-deliberate:var(--cb-duration-deliberate,.45s);
  --ease-out:var(--cb-easing-ease-out,cubic-bezier(.16,1,.3,1));
  --ease-in-out:var(--cb-easing-in-out,cubic-bezier(.38,.1,.2,1));
  --ease-bounce:var(--cb-easing-bounce,cubic-bezier(.175,.885,.32,1.275));
  --ease-subtle:var(--cb-easing-subtle,cubic-bezier(.4,0,.6,1));

  /* Focus & interactions premium */
  --focus-ring:var(--cb-focus-ring,2px solid #ffc107);
  --focus-offset:var(--cb-focus-offset,2px);
  --focus-shadow:var(--cb-focus-shadow,0 0 0 6px rgba(255,193,7,.20));
  --active-scale:var(--cb-active-scale,.92);

  color-scheme:dark;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%;
    background:radial-gradient(1200px 600px at 50% -10%, var(--bg1) 0%, var(--bg2) 60%);
    color:var(--ink); 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; }

#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; text-shadow:0 4px 16px rgba(0,0,0,.25); }
.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(--ink); }
/* La grille : un carré, jamais un cadre qui défile. Relief premium 3D avec
   ombres bokeh amples — le plateau flotte légèrement au-dessus du fond. */
.board { width:min(100%, 48vh);
    border-radius:var(--radius-lg);
    background:var(--board-bg, linear-gradient(180deg, var(--bg1), var(--bg2)));
    border:1px solid var(--board-edge, var(--cb-border-light));
    padding:var(--cb-space-3);
    touch-action:manipulation;
    box-shadow:var(--shadow-xl), 0 0 40px rgba(56,224,139,0.12);
    transition:transform var(--dur-instant), box-shadow var(--dur-instant);
    animation:board-glow var(--dur-slow) var(--ease-out);
    will-change:transform,box-shadow,filter;
}
canvas#c { width:100%; height:auto; display:block; border-radius:var(--radius-md); }

@keyframes board-glow {
  from { box-shadow:var(--shadow-xl), 0 0 0 rgba(56,224,139,0.20), 0 0 0 rgba(56,224,139,0.08); }
  to { box-shadow:var(--shadow-xl), 0 0 40px rgba(56,224,139,0.16), 0 0 60px rgba(56,224,139,0.08); }
}

footer { color:var(--muted); font-size:.8125rem; text-align:center;
    padding-bottom:var(--cb-space-3); min-height:18px;
    letter-spacing:var(--cb-letter-spacing-normal); }
/* hud : vies, pièces, erreurs — design premium avec meilleur contraste */
.hud { width:100%; display:flex; gap:var(--cb-gap-xs); align-items:center;
    padding:0 var(--cb-space-3); }

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

.wchip { display:flex; align-items:center; gap:var(--cb-space-2);
    font-size:.8125rem; font-weight:var(--cb-font-bold,700);
    font-variant-numeric:tabular-nums; color:var(--ink);
    background:var(--panel2); border:1px solid var(--cb-border-light);
    border-radius:var(--cb-radius-pill); padding:var(--cb-space-2) var(--cb-space-5);
    white-space:nowrap; box-shadow:var(--shadow-xs);
    transition:all var(--dur-fast) var(--ease-out);
    will-change:transform,box-shadow,color;
}

.wchip .ic { font-size:1em; line-height:1; }

.wchip.earn { color:var(--premium); border-color:rgba(212,175,55,.28);
    background:rgba(212,175,55,.10); }

.chip { background:var(--panel2); border:1px solid var(--cb-border-light);
    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:all var(--dur-fast) var(--ease-out);
    will-change:transform,box-shadow,background,filter;
}

.chip:hover { border-color:var(--cb-border-medium); background:var(--panel3);
    box-shadow:var(--shadow-sm), 0 0 16px rgba(56,224,139,.18), 0 0 32px rgba(56,224,139,.08); }

.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(--ink); cursor:pointer;
    transition:all var(--dur-instant) var(--ease-out);
    border-radius:var(--cb-radius-md); border:none; }

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

.chip-btn:active { transform:translateY(0px); box-shadow:var(--shadow-xs); }

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

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

@keyframes chip-pop {
  0% { transform:scale(1); }
  40% { transform:scale(1.2); }
  70% { transform:scale(.95); }
  100% { transform:scale(1); }
}
/* PAVÉ DE CHIFFRES : l'action maîtresse du jeu, donc la plus grosse surface
   tactile de l'écran. Neuf touches + la gomme, deux rangées de cinq. */
.pad { width:100%; display:grid; grid-template-columns:repeat(5,1fr);
    gap:var(--cb-gap-sm); padding:0 var(--cb-space-2); }

.pad button { margin:0; padding:var(--cb-space-5) var(--cb-space-2) var(--cb-space-4);
    background:linear-gradient(180deg, var(--panel), var(--bg2));
    color:var(--ink); border-radius:var(--radius-md); font-size:1.4375rem;
    font-weight:var(--cb-font-black,900); line-height:1;
    position:relative;
    box-shadow:var(--shadow-md), var(--shadow-inset);
    transition:transform var(--dur-instant), box-shadow var(--dur-instant),
              background var(--dur-normal), filter var(--dur-instant);
    border:1px solid var(--cb-border-light);
    will-change:transform,filter,box-shadow;
}

.pad button:hover {
  transform:translateY(-3px);
  filter:brightness(1.15) drop-shadow(0 0 16px rgba(56,224,139,.28));
  box-shadow:var(--shadow-lg), var(--shadow-inset), 0 0 20px rgba(56,224,139,.22), 0 0 40px rgba(56,224,139,.12);
}

.pad button:focus {
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  box-shadow:var(--focus-shadow), var(--shadow-md);
}

.pad button:active {
  transform:translateY(1px);
  box-shadow:var(--shadow-sm), var(--shadow-inset);
  filter:brightness(1.05);
}

.pad button::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  pointer-events:none;
}

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

.pad button.done {
  opacity:var(--cb-disabled-opacity,.45);
  cursor:var(--cb-disabled-cursor);
}

.pad button.erase { font-size:1.1875rem; }

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

.tool {
  flex:1; width:auto; margin:0; background:var(--panel2); color:var(--ink);
  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:1px solid var(--cb-border-light);
  transition:all var(--dur-fast) var(--ease-out);
  cursor:pointer;
  will-change:transform,box-shadow,filter,background;
}

.tool:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md), 0 0 18px rgba(56,224,139,.20), 0 0 36px rgba(56,224,139,.10);
  background:var(--panel3);
  filter:brightness(1.10);
}

.tool:focus {
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  box-shadow:var(--focus-shadow), var(--shadow-md);
}

.tool:active {
  transform:translateY(.5px);
  box-shadow:var(--shadow-xs);
  filter:brightness(.96);
}

.tool b { font-size:1.125rem; font-weight:var(--cb-font-regular,400); }

.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:var(--cb-disabled-opacity,.45);
  cursor:var(--cb-disabled-cursor);
}

.tool.on {
  background:linear-gradient(135deg, rgba(56,224,139,.16), rgba(56,224,139,.08));
  color:var(--accent); border-color:rgba(56,224,139,.32);
  box-shadow:0 0 0 2px rgba(56,224,139,.18), var(--shadow-sm);
}
/* overlays — premium feel avec glassmorphism premium */
.overlay {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:var(--cb-overlay-bg);
  backdrop-filter:var(--cb-glass-blur);
  z-index:5; padding:var(--cb-gap-lg);
}

.overlay.show { display:flex; }

.overlay .card {
  background:linear-gradient(180deg, var(--panel), var(--bg2));
  border:1px solid var(--cb-border-medium);
  border-radius:var(--cb-radius-modal);
  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-2xl);
  transition:transform var(--dur-slow) var(--ease-bounce);
  will-change:transform,box-shadow,filter;
}

.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-glow var(--dur-slow) var(--ease-bounce);
  will-change:transform,text-shadow,filter;
}

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

@keyframes win-glow {
  0% {
    opacity:0; transform:scale(.7);
    text-shadow:0 0 0 rgba(212,175,55,0), 0 0 0 rgba(56,224,139,0);
  }
  60% { transform:scale(1.12); }
  100% {
    opacity:1; transform:scale(1);
    text-shadow:0 12px 48px rgba(212,175,55,.55), 0 0 48px rgba(212,175,55,.32), 0 0 24px rgba(56,224,139,.16);
  }
}

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

.overlay .sub {
  color:var(--muted); font-size:.9375rem; margin-bottom:var(--cb-gap-lg);
  line-height:var(--cb-line-height-relaxed);
}
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:all var(--dur-normal-long) var(--ease-out);
  box-shadow:var(--shadow-md);
  position:relative;
  will-change:transform,box-shadow,opacity,filter,background;
}

button::before {
  content:''; position:absolute; inset:0; border-radius:var(--radius-md);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.01));
  pointer-events:none;
}

button::after {
  content:''; position:absolute; inset:0; border-radius:var(--radius-md);
  opacity:0;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 50%);
  pointer-events:none;
  transition:opacity var(--dur-normal) var(--ease-out);
}

button:disabled {
  opacity:var(--cb-disabled-opacity,.45);
  cursor:var(--cb-disabled-cursor);
}

button:focus {
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
  box-shadow:var(--focus-shadow), var(--shadow-md);
}

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

button:hover::after { opacity:.5; }

button:active {
  transform:translateY(0px);
  box-shadow:var(--shadow-sm);
}

/* Bouton primaire : vert CB-ARCADE premium — relief 3D + glow 3-couches */
.btn-primary {
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  color:var(--accent-ink);
  box-shadow:0 8px 28px rgba(56,224,139,.36), var(--shadow-inset), 0 0 0 rgba(56,224,139,.12);
  font-weight:var(--cb-font-black,900);
  letter-spacing:.02em;
  will-change:transform,box-shadow;
}

.btn-primary:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(56,224,139,.45), var(--shadow-inset),
            0 0 28px rgba(56,224,139,.36), 0 0 56px rgba(56,224,139,.16);
}

.btn-primary:focus {
  outline:2px solid rgba(56,224,139,.60);
  box-shadow:0 0 0 3px rgba(56,224,139,.22), 0 8px 28px rgba(56,224,139,.36);
}

.btn-primary:active {
  transform:translateY(1px);
  box-shadow:0 4px 12px rgba(56,224,139,.28), var(--shadow-inset);
}

/* Bouton ghost : fond surfacé + glow subtil */
.btn-ghost {
  background:var(--panel2);
  color:var(--ink);
  border:1px solid var(--cb-border-light);
}

.btn-ghost:hover {
  background:var(--panel3);
  border-color:var(--cb-border-medium);
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(56,224,139,.16);
}

.btn-ghost:focus {
  outline:var(--focus-ring);
  outline-offset:var(--focus-offset);
}

.btn-ghost:active {
  background:var(--panel3);
  transform:translateY(.5px);
}

/* Bouton récompensé : gradient premium avec relief or + glow 3-couches */
.btn-rewarded {
  background:linear-gradient(135deg, var(--premium-light), var(--premium));
  color:var(--premium-ink);
  box-shadow:0 8px 28px rgba(212,175,55,.40), var(--shadow-inset), 0 0 0 rgba(212,175,55,.12);
  font-weight:var(--cb-font-black,900);
  will-change:transform,box-shadow;
}

.btn-rewarded:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(212,175,55,.48), var(--shadow-inset),
            0 0 32px rgba(212,175,55,.42), 0 0 64px rgba(212,175,55,.18);
}

.btn-rewarded:focus {
  outline:2px solid rgba(212,175,55,.60);
  box-shadow:0 0 0 3px rgba(212,175,55,.22), 0 8px 28px rgba(212,175,55,.36);
}

.btn-rewarded:active {
  transform:translateY(1px);
  box-shadow:0 4px 12px rgba(212,175,55,.24), var(--shadow-inset);
}

.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;
  text-shadow:0 8px 32px rgba(212,175,55,.36), 0 2px 8px rgba(56,224,139,.22),
             0 0 28px rgba(212,175,55,.18);
  background:linear-gradient(135deg, var(--accent-bright), var(--premium));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:text-shadow var(--dur-slow) var(--ease-out),
            transform var(--dur-slow);
  animation:logo-entrance var(--dur-deliberate) var(--ease-bounce),
           logo-glow 3s var(--ease-subtle) infinite var(--dur-deliberate);
  will-change:transform,text-shadow,filter;
}

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

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

@keyframes logo-glow {
  0%,100% {
    text-shadow:0 8px 32px rgba(212,175,55,.40), 0 2px 8px rgba(56,224,139,.24),
               0 0 28px rgba(212,175,55,.20), 0 0 48px rgba(56,224,139,.08);
  }
  50% {
    text-shadow:0 12px 40px rgba(212,175,55,.50), 0 2px 8px rgba(56,224,139,.32),
               0 0 40px rgba(212,175,55,.32), 0 0 60px rgba(56,224,139,.12);
  }
}

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

.stat {
  flex:1; background:var(--panel2); border-radius:var(--radius-md);
  padding:var(--cb-space-4) var(--cb-space-2);
  box-shadow:var(--shadow-xs);
  border:1px solid var(--cb-border-light);
  transition:all var(--dur-fast) var(--ease-out);
  will-change:transform,box-shadow;
}

.stat:hover {
  background:var(--panel3);
  box-shadow:var(--shadow-sm);
}

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

.stat .val {
  font-size:1.125rem; font-weight:var(--cb-font-bold,800);
  font-variant-numeric:tabular-nums;
}
/* carte des niveaux : un barreau par niveau, 150 et plus — ça défile avec smooth scroll */
.level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--cb-gap-sm); margin-bottom:var(--cb-space-3);
    max-height:44vh; overflow-y:auto; padding:var(--cb-space-2); scroll-behavior:smooth; }
.level-grid button { margin:0; padding:var(--cb-space-4) var(--cb-space-2) var(--cb-space-3); background:var(--panel2); color:var(--ink); font-size:.9375rem;
    display:flex; flex-direction:column; align-items:center; gap:var(--cb-space-1);
    border:1px solid var(--cb-border-light); border-radius:var(--radius-md);
    box-shadow:var(--shadow-xs); transition:all var(--dur-fast) var(--ease-out);
    will-change:transform,box-shadow,background,filter;
}
.level-grid button:hover { transform:translateY(-2px); box-shadow:var(--shadow-md), 0 0 14px rgba(56,224,139,.18), 0 0 28px rgba(56,224,139,.08); background:var(--panel3); }
.level-grid button:focus { outline:var(--focus-ring); outline-offset:1px; }
.level-grid button:active { transform:translateY(0px); box-shadow:var(--shadow-xs); }
.level-grid button .no { font-weight:var(--cb-font-black,900); font-variant-numeric:tabular-nums; }
.level-grid button .md { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:var(--cb-letter-spacing-caps); font-weight:var(--cb-font-semibold,600); }
.level-grid button.easy   { border-color:rgba(56,224,139,.40); box-shadow:0 4px 14px rgba(56,224,139,.20); }
.level-grid button.medium { border-color:rgba(212,175,55,.40); box-shadow:0 4px 14px rgba(212,175,55,.20); }
.level-grid button.hard   { border-color:rgba(245,166,35,.40); box-shadow:0 4px 14px rgba(245,166,35,.16); }
.level-grid button.expert { border-color:rgba(255,82,82,.40); box-shadow:0 4px 14px rgba(255,82,82,.20); }
.level-grid button.done { background:var(--panel3); opacity:.70; }
.level-grid button.done .no::after { content:' ✓'; color:var(--ok); font-size:.875rem; }
.level-grid button.on { background:linear-gradient(135deg, rgba(212,175,55,.20), rgba(56,224,139,.12));
    border-color:var(--premium); box-shadow:0 0 0 2px var(--premium); }
.level-grid button.locked { opacity:.45; cursor:var(--cb-disabled-cursor); }
/* fin de grille */
.badge { display:inline-block; background:var(--premium); color:var(--premium-ink);
    font-weight:var(--cb-font-black,900); font-size:.8125rem;
    letter-spacing:var(--cb-letter-spacing-caps); text-transform:uppercase;
    border-radius:var(--cb-radius-pill); padding:var(--cb-space-2) var(--cb-space-5);
    margin-bottom:var(--cb-space-3);
    box-shadow:0 4px 14px rgba(212,175,55,.28); }
/* habillage (Looks) : une ligne d'article + son bouton */
.shop-row { display:flex; align-items:center; gap:var(--cb-gap-md); padding:var(--cb-space-4) 0;
    border-top:1px solid var(--cb-border-light);
    text-align:start; transition:all var(--dur-fast) var(--ease-out); }
.shop-row:hover { background:rgba(56,224,139,.03); }
.shop-row .nm { flex:1; font-weight:var(--cb-font-bold,800); font-size:.9375rem; }
.shop-row .ds { display:block; font-weight:var(--cb-font-semibold,600); font-size:.8125rem;
    color:var(--muted); margin-top:var(--cb-space-2); }
.shop-row button { width:auto; margin:0; padding:var(--cb-space-3) var(--cb-space-5);
    font-size:.8125rem; white-space:nowrap;
    background:var(--panel2); border:1px solid var(--cb-border-light);
    border-radius:var(--radius-sm);
    box-shadow:var(--shadow-xs);
    transition:all var(--dur-instant) var(--ease-out); }
.shop-row button:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); background:var(--panel3); }
.shop-row .owned { color:var(--ok); font-weight:var(--cb-font-black,900); font-size:.8125rem; }

/* notification passagère (lien copié, achat restauré...) */
.toast {
  position:fixed; inset-inline:0;
  bottom:max(var(--cb-space-4), env(safe-area-inset-bottom) + var(--cb-space-4));
  margin-inline:auto;
  width:max-content; max-width:88vw; background:var(--panel2); color:var(--ink);
  border:1px solid var(--cb-border-light);
  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), 0 0 20px rgba(56,224,139,.12);
  animation:toast-in var(--dur-slow) var(--ease-out);
}

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

/* ============================================================================
   ÉCONOMIE À L'ÉCRAN + KIT « JUICY » (src/fx.js)
   Règle tenue ici : si une vie, une pièce ou un outil existe en logique, il a
   un élément VISIBLE — et il bouge quand il change. Toutes les animations sont
   des transforms/opacités (composées par le GPU) : rien qui coûte un layout,
   pour garder les 60 fps sur mobile.
   ========================================================================== */
/* compteurs du bandeau : vies (avec le rebours de régénération) et pièces */
.chip.lives { color:#ff6b7a; border-color:rgba(255,107,122,0.2); }
.chip.coins { color:var(--premium); border-color:rgba(212,175,55,0.2); }
.chip.mistakes { color:var(--ink); }
/* AIDE PERSISTANTE : le « ? » du bandeau, toujours accessible. */
.chip.help { font-weight:900; color:var(--premium); border-color:rgba(212,175,55,0.2); padding:6px 12px; }
.chip.mistakes.warn { color:var(--bad); border-color:rgba(255,91,87,0.2); }
.chip small { font-size:10px; font-weight:700; color:var(--muted); margin-inline-start:2px; }
.chip.lives.empty { animation:beat 1.6s ease-in-out infinite; border-color:rgba(255,107,122,0.4); }
@keyframes beat { 0%,100%{ transform:scale(1); } 12%{ transform:scale(1.15); } 24%{ transform:scale(1); } }
/* l'OBJECTIF de la grille, toujours lisible sous le plateau */
.objective { width:100%; padding:0 var(--cb-space-3); }

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

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

.objective .bar i {
  display:block; height:100%; width:0; border-radius:var(--cb-radius-pill);
  background:linear-gradient(90deg, var(--ok), var(--premium));
  transition:width var(--dur-normal) var(--ease-out);
}
/* outil en réserve (pack acheté) : la pastille dit combien il en reste */
.tool { position:relative; transition:transform var(--dur-normal) var(--ease-out); }

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

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

@keyframes bump {
  0% { transform:scale(1) rotate(0deg); }
  35% { transform:scale(.85) rotate(-2deg); }
  70% { transform:scale(1.12) rotate(4deg); }
  100% { transform:scale(1) rotate(0deg); }
}

/* flash d'écran d'une réussite — spectaculaire avec multi-layer glow */
.flash { position:fixed; inset:0; pointer-events:none; opacity:0; z-index:8; will-change:opacity,filter; }

.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:1; filter:brightness(1.95) saturate(1.4) drop-shadow(0 0 40px rgba(212,175,55,0.6)); }
  20% { opacity:.85; filter:brightness(1.5) saturate(1.2); }
  50% { opacity:.35; filter:brightness(1.15) saturate(1.05); }
  100% { opacity:0; filter:brightness(1) saturate(1); }
}
/* entrées d'écran : les cartes arrivent avec bounce premium 3D */
.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(20px) scale(.95) rotateX(-8deg); }
  to { opacity:1; transform:none; }
}

@keyframes card-pop {
  0% { opacity:0; transform:scale(.60) rotateY(-25deg) rotateZ(-5deg); filter:brightness(.75); }
  55% { transform:scale(1.18) rotateY(10deg) rotateZ(2deg); }
  100% { opacity:1; transform:scale(1) rotateY(0deg) rotateZ(0deg); filter:brightness(1); }
}

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

.overlay .big.hearts {
  letter-spacing:.08em; font-size:1.875rem;
}

.overlay .big.lost { animation:heart-break var(--dur-slow) var(--ease-out); }

@keyframes heart-break {
  0% { transform:scale(1.6) rotate(-12deg) rotateZ(-8deg); filter:brightness(1.35) drop-shadow(0 0 20px rgba(255,82,82,0.4)); }
  40% { transform:scale(.75) rotate(8deg) rotateZ(4deg); }
  100% { transform:scale(1) rotate(0) rotateZ(0deg); filter:brightness(1); }
}

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

.daily-days i {
  font-style:normal; background:var(--panel2);
  border:1px solid var(--cb-border-light); 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);
  transition:all var(--dur-fast) var(--ease-out);
}

.daily-days i:hover { background:var(--panel3); box-shadow:var(--shadow-sm); }

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

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

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

.daily-days i.on {
  background:linear-gradient(135deg, var(--ok), var(--premium));
  color:var(--accent-ink);
  animation:bump var(--dur-slow) cubic-bezier(.15,1.4,.35,1);
  border:none;
  box-shadow:0 0 0 2px rgba(56,224,139,.40), 0 0 16px rgba(56,224,139,.32), 0 0 32px rgba(212,175,55,.16);
}

.daily-days i.on b { color:var(--accent-ink); opacity:.85; }
/* LA RÈGLE : un mini-bloc 3x3 dont les cases s'allument l'une après l'autre —
   on voit tout de suite qu'un chiffre ne se répète pas. */
.goal-demo {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--cb-gap-sm); width:168px;
  margin:var(--cb-space-5) auto var(--cb-space-4);
}

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

.goal-rule {
  font-size:.9375rem; font-weight:var(--cb-font-bold,800);
  color:var(--ok); background:rgba(56,224,139,.12);
  border-radius:var(--radius-md);
  border:1px solid rgba(56,224,139,.32);
  padding:var(--cb-space-4) var(--cb-space-5);
  margin-bottom:var(--cb-space-5);
  box-shadow:var(--shadow-xs);
}

@keyframes tile-glow {
  0%,72%,100% { transform:scale(1); box-shadow:var(--shadow-sm), 0 0 0 rgba(212,175,55,.08); }
  80% { transform:scale(1.18); box-shadow:0 0 0 4px rgba(212,175,55,.42), var(--shadow-md), 0 0 16px rgba(212,175,55,.24); }
}
/* ============================================================================
   TUTORIEL D'ACCUEIL (src/tutorial.js)
   Le jeu s'explique tout seul : une mini-grille 9×9 où la ligne, la colonne ou
   le bloc de l'étape s'allument, le reste se ternissant. La dernière leçon se
   fait AU DOIGT — une case à remplir, avec le vrai geste (case puis chiffre).
   ========================================================================== */
.overlay .card.tuto { padding:20px 16px 18px; }
.tuto-step { font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase;
    letter-spacing:1px; margin-bottom:2px; font-variant-numeric:tabular-nums; }
.tuto-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:1px; width:min(252px,80vw);
    margin:10px auto 8px; padding:4px; border-radius:12px; border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg,#1f2742,#141a23);
    box-shadow:var(--shadow-md); }
.tuto-grid b { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:4px; background:#1a2029; color:var(--muted); font-size:12px; font-weight:800;
    transition:all .18s ease-out; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    cursor:pointer; }
/* Les traits épais du sudoku : sans eux, « bloc 3×3 » ne veut rien dire. */
.tuto-grid b.ec { margin-inline-end:3px; }
.tuto-grid b.er { margin-bottom:3px; }
/* Étape qui met une unité en avant : tout le reste s'efface. */
.tuto-grid.unit b { opacity:.28; }
.tuto-grid.unit b.on { opacity:1; background:#1f2742; color:var(--ink); }
/* La case de l'essai : elle appelle le doigt, puis se pare de vert. */
.tuto-grid b.ask, .tuto-grid.unit b.ask { opacity:1; background:#1f2742; color:var(--sel);
    box-shadow:0 0 0 2px var(--sel); animation:beat 1.5s ease-in-out infinite; }
.tuto-grid b.got, .tuto-grid.unit b.got { opacity:1; background:rgba(56,224,139,0.15); color:var(--ok);
    box-shadow:0 0 0 2px var(--ok); animation:none; }
.tuto-text { font-size:13px; font-weight:700; color:var(--ink); line-height:1.45; margin-bottom:6px; }
/* Sept écrans doivent tenir sans faire défiler la carte : les boutons
   secondaires du tutoriel restent compacts. */
.overlay .card.tuto .row button { padding:10px 12px; font-size:14px; }
/* Le pavé de l'essai : les mêmes touches que le vrai jeu, en plus petit. */
.tuto-pad { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:4px 0 8px; }
/* `hidden` doit gagner sur le `display:grid` ci-dessus (une règle d'auteur
   l'emporte sur la feuille du navigateur) : sinon le pavé resterait visible. */
.tuto-pad[hidden] { display:none; }
.tuto-pad button { margin:0; padding:9px 2px; font-size:18px; font-weight:900; border-radius:12px;
    background:linear-gradient(180deg,#1f2742,#141a23); color:var(--ink);
    box-shadow:var(--shadow-md);
    border:1px solid rgba(255,255,255,0.06);
    transition:all .1s ease-out; }
.tuto-pad button:hover { transform:translateY(-1px); box-shadow:var(--shadow-lg); brightness(1.08); }
.tuto-pad button:active { transform:translateY(1px); box-shadow:var(--shadow-sm); }
.tuto-pad button.done { opacity:.38; cursor:not-allowed; }
/* Le retour de l'essai : vert quand c'est bon, rouge quand ça ne l'est pas —
   et jamais une erreur comptée, on est en train d'apprendre. */
.tuto-say { font-size:12px; font-weight:800; border-radius:12px; padding:9px 11px; margin-bottom:8px; }
.tuto-say.good { color:var(--ok); background:rgba(56,224,139,0.1); border:1px solid rgba(56,224,139,0.2); }
.tuto-say.warn { color:var(--bad); background:rgba(255,91,87,0.1); border:1px solid rgba(255,91,87,0.2); }
.tuto-dots { display:flex; gap:6px; justify-content:center; margin:8px 0 2px; }
.tuto-dots i { width:7px; height:7px; border-radius:999px; background:#1f2742; }
.tuto-dots i.done { background:#1f2742; opacity:.4; }
.tuto-dots i.on { background:var(--accent); transform:scale(1.3); }
/* habillage (Looks) : intertitre de famille, mention factuelle, échantillon.
   Rien ici ne clignote ni ne décompte : un article se lit, il ne presse pas. */
.shop-head {
  padding:var(--cb-space-6) 0 var(--cb-space-2);
  font-size:.8125rem; font-weight:var(--cb-font-black,900);
  letter-spacing:var(--cb-letter-spacing-caps);
  text-transform:uppercase; color:var(--premium); text-align:start;
}

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

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

/* L'échantillon d'un habit : trois teintes, pour choisir sans essayer. */
.shop-row .swatch {
  display:flex; gap:var(--cb-space-2); margin-top:var(--cb-space-3);
}

.shop-row .swatch b {
  width:16px; height:16px; border-radius:var(--radius-xs);
  border:1px solid rgba(255,255,255,.16);
}

/* habillage (Looks) : une ligne, son bouton (pièces, ou « porté ») */
.shop-row .routes {
  display:flex; flex-direction:column; gap:var(--cb-gap-xs);
  align-items:stretch; min-width:112px;
}

.shop-row .routes button {
  width:100%; margin:0; padding:var(--cb-space-3) var(--cb-space-4);
  font-size:.8125rem;
}

.shop-row .routes .btn-rewarded { font-size:.75rem; }
/* Responsive : petits écrans (<700px hauteur, espace étroit) */
@media (max-height:700px) {
  #wrap { gap:6px; padding-top:max(6px, env(safe-area-inset-top)); padding-bottom:max(6px, env(safe-area-inset-bottom)); }
  .logo { font-size:32px; }
  .card .big { font-size:38px; margin:6px 0 2px; }
  .card h2 { font-size:20px; margin-bottom:4px; }
  .chip { padding:5px 10px; font-size:12px; }
  .chip .v { font-size:16px; margin-top:1px; }
  .pad button { padding:9px 2px 7px; font-size:20px; }
  .tool { padding:8px 4px 6px; font-size:8px; }
  .tool b { font-size:16px; }
  button { padding:11px 14px; font-size:14px; margin-top:6px; }
  .overlay .card { padding:18px 16px 16px; }
  .level-grid { max-height:38vh; }
}
/* Mode clair premium : inversion harmonieuse avec CB-ARCADE */
@media (prefers-color-scheme:light) {
  :root {
    --bg1:var(--cb-neutral-100,#f0f3f7);
    --bg2:var(--cb-neutral-50,#f8f9fb);
    --panel:var(--cb-neutral-0,#ffffff);
    --panel2:var(--cb-neutral-100,#f0f3f7);
    --panel3:var(--cb-neutral-200,#e5ebf3);
    --field:var(--cb-neutral-100,#f0f3f7);
    --grid:var(--cb-border-medium,rgba(40,50,110,.12));
    --ink:var(--cb-text-primary,#1a2029);
    --muted:var(--cb-text-secondary,#6d7f99);
    --accent:#1d8f5c;
    --accent-ink:#ffffff;
    --accent-fg:#2ed97f;
    --premium:#b89630;
    --premium-light:#d4af37;
    --premium-ink:#ffffff;
    --ok:#1d8f5c;
    --sel:#2a5ec9;
    --bad:#c1423a;
    color-scheme:light;
  }
  html,body {
    background:radial-gradient(1200px 600px at 50% -10%, var(--bg1) 0%, var(--bg2) 60%);
    color:var(--ink);
  }
  .chip { background:var(--panel2); border:1px solid rgba(93,111,143,.16); }
  .chip:hover { border-color:rgba(93,111,143,.28); background:var(--panel3); }
  .chip-btn { background:var(--panel2); }
  .chip-btn:hover { background:var(--panel3); }
  .pad button {
    background:linear-gradient(180deg, var(--panel3), var(--panel2));
    border-color:rgba(93,111,143,.15);
  }
  .pad button:hover {
    filter:brightness(.96) drop-shadow(0 0 12px rgba(29,143,92,.18));
  }
  .tool {
    background:linear-gradient(180deg, var(--panel3), var(--panel2));
    border-color:rgba(93,111,143,.15);
  }
  .tool:hover { background:linear-gradient(180deg, var(--panel2), var(--panel3)); }
  .overlay { background:rgba(240,243,247,.55); }
  .overlay .card {
    background:linear-gradient(180deg, #ffffff, var(--panel2));
    border-color:rgba(93,111,143,.12);
  }
  button { box-shadow:0 4px 14px rgba(0,0,0,.10); }
  .btn-primary {
    background:linear-gradient(135deg, #45c86f, #1d8f5c);
    color:#ffffff;
    box-shadow:0 8px 28px rgba(29,143,92,.32), 0 0 0 rgba(29,143,92,.10);
  }
  .btn-primary:hover { box-shadow:0 16px 48px rgba(29,143,92,.40), 0 0 24px rgba(29,143,92,.20); }
  .btn-ghost {
    background:linear-gradient(180deg, var(--panel2), var(--panel3));
    border-color:rgba(93,111,143,.16);
    color:var(--ink);
  }
  .btn-ghost:hover {
    background:linear-gradient(180deg, var(--panel3), var(--panel2));
    border-color:rgba(93,111,143,.28);
  }
  .btn-rewarded {
    background:linear-gradient(135deg, #d4af37, #b89630);
    color:#062015;
    box-shadow:0 8px 28px rgba(184,150,48,.38), 0 0 0 rgba(184,150,48,.12);
  }
  .btn-rewarded:hover { box-shadow:0 16px 48px rgba(184,150,48,.48), 0 0 28px rgba(184,150,48,.24); }
  .board { background:linear-gradient(180deg, var(--panel3), var(--panel2)); }
  .level-grid button {
    background:linear-gradient(135deg, var(--panel3), var(--panel2));
    border-color:rgba(93,111,143,.15);
  }
  .level-grid button:hover {
    background:linear-gradient(135deg, var(--panel2), var(--panel3));
  }
  .stat {
    background:linear-gradient(180deg, var(--panel3), var(--panel2));
    border-color:rgba(93,111,143,.15);
  }
  .tuto-grid {
    background:linear-gradient(180deg, var(--panel3), var(--panel2));
    border-color:rgba(93,111,143,.15);
  }
  .tuto-grid b {
    background:var(--panel2);
    color:var(--muted);
  }
}
/* Respect prefers-reduced-motion (WCAG 2.1 Success Criterion 2.3.3) */
@media (prefers-reduced-motion:reduce) {
  * {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .bump, .flash.on, .overlay.show .card, .overlay.show .card.pop, .overlay.show .card.shake,
  .chip.lives.empty, .daily-days i.on, .goal-demo b, .overlay .big.lost,
  .tuto-grid b.ask, .board, .overlay .big, .overlay .big.stars, .logo {
    animation:none !important;
    transition:none !important;
  }
}

/* Mode contraste élevé : bordures plus épaisses et couleurs plus satures */
@media (prefers-contrast:more) {
  button { border-width:2px; }
  .chip { border-width:2px; }
  .level-grid button { border-width:2px; }
  .overlay .card { border-width:2px; }
  .pad button { border-width:2px; }
  .tool { border-width:2px; }
  .btn-primary {
    box-shadow:0 0 0 3px rgba(56,224,139,.50), 0 8px 28px rgba(56,224,139,.50);
  }
  .btn-rewarded {
    box-shadow:0 0 0 3px rgba(212,175,55,.50), 0 8px 28px rgba(212,175,55,.50);
  }
  .btn-primary:hover {
    box-shadow:0 0 0 3px rgba(56,224,139,.62), 0 16px 48px rgba(56,224,139,.62);
  }
  .btn-rewarded:hover {
    box-shadow:0 0 0 3px rgba(212,175,55,.62), 0 16px 48px rgba(212,175,55,.62);
  }
}