/* ============================================================================
   POPLYN — PASSE KAWAII CARTOON B (restylage EN PLACE, cf BACKLOG.md
   §PIVOT DESIGN) — remplace le premium/verre par le style fondateur de la
   flotte : aplats francs, contours nets, ombres "sticker" plates (zéro flou),
   petits reflets brillants, formes rondes. Restylage EN PLACE : le HTML/les
   ids/classes d'état ne bougent pas, seuls les TOKENS de ce fichier changent
   — le blur/glass (--glass-blur) et les halos néon (--glow-*) sont neutralisés
   au niveau des tokens partagés ci-dessous (une seule source de vérité) plutôt
   que composant par composant, pour ne pas devoir toucher ~40 règles une à
   une ; les ombres plates "0 Npx 0 rgba(...)" déjà en place sur les boutons
   (effet touche/keycap) restent, elles sont déjà dans l'esprit sticker kawaii.
   Contraste WCAG AAA, responsive mobile-first + safe-areas iPhone, RTL arabe.
   Thème clair/sombre piloté par [data-theme] (posé par /_kit/theme.js, cf
   <head>), toujours résolu — remplace le seul prefers-color-scheme (canvas +
   chrome UI ne suivaient pas le choix explicite du hub, cf BACKLOG.md).
   ========================================================================== */

:root {
  /* --- Couleurs du gameplay (pièces, plateau, grille) — Ultra-vibrantes --- */
  --piece-cyan:   #2effff;     /* cyan ultra-lumineux, WCAG AAA sur dark */
  --piece-magenta:#ff2eff;     /* magenta électrique, highly saturated */
  --piece-yellow: #ffff00;     /* jaune pur vif, haute luminosité */
  --piece-green:  #00ff88;     /* vert électrique, WCAG AAA contrast */
  --piece-red:    #ff3333;     /* rouge chaud vif, WCAG AAA */
  --piece-blue:   #5b8cff;     /* bleu riche saturé */
  --piece-orange: #ff9933;     /* orange lumineux */
  --piece-purple: #e833ff;     /* mauve électrique */

  /* --- Fonds premium (dégradés KB-ARCADE vibrantes) --- */
  --bg-0: var(--cb-surface-1, #0f131a);
  --bg-1: var(--cb-surface-1, #0f131a);
  --bg-2: #0a0d14;
  --bg-glow: rgba(70, 30, 160, 0.3);

  /* --- Surfaces avec relief (gradients CB-ARCADE) --- */
  --panel-0: var(--cb-surface-0, #151d2a);
  --panel-1: var(--cb-surface-1, #0f131a);
  --grid-0: #1a1f32;
  --grid-1: #12161f;
  --slot-0: #0f1320;
  --slot-1: #080c14;

  /* --- Encre premium (contrastes WCAG AAA) — tokens CB-ARCADE --- */
  --ink: var(--cb-text-primary, #f0f4fa);
  --ink-dark: #ffffff;
  --muted: var(--cb-text-secondary, #9aa8bd);
  --muted-dark: var(--cb-text-muted, #7c8aa0);

  /* --- Accent premium (or CB premium) — tokens CB-ARCADE --- */
  --accent: var(--cb-accent, #ffc107);
  --accent-hi: #ffea58;
  --accent-dk: #d4a500;

  /* --- Glows sémantiques : NEUTRALISÉS (kawaii = zéro halo néon flouté).
     Transparent plutôt que supprimés : chaque box-shadow qui les consomme
     (~25 règles dans ce fichier) garde son terme "0 0 Npx var(--glow-*)"
     mais il devient invisible d'un coup, sans retoucher chaque règle. Les
     ombres plates "sticker" (0 Npx 0 couleur, zéro flou) ne passent PAS par
     ces variables : elles restent telles quelles (déjà kawaii). --- */
  --glow-accent: transparent;
  --glow-accent-bright: transparent;
  --glow-accent-max: transparent;
  --glow-green: transparent;
  --glow-red: transparent;

  /* --- Ombres — sticker plates + une ombre d'ambiance douce (pas de glow) --- */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255, 0.12);
  --shadow-drop: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40);
  --shadow-card: 0 10px 0 rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255,255,255, 0.12);
  --shadow-card-hover: 0 10px 0 rgba(0, 0, 0, 0.30), 0 0 32px var(--glow-accent-bright), 0 0 16px var(--glow-accent);
  --shadow-accent: 0 8px 20px rgba(212, 175, 55, 0.2), 0 0 24px var(--glow-accent-bright), 0 0 12px var(--glow-accent);
  --shadow-board: inset 0 0 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* --- Rayons premium lissés — tokens CB-ARCADE --- */
  --radius-sm: var(--cb-radius-sm, 8px);
  --radius-md: var(--cb-radius-md, 12px);
  --radius-lg: var(--cb-radius-lg, 16px);
  --radius-xl: var(--cb-radius-xl, 20px);
  --radius-full: var(--cb-radius-full, 999px);

  /* --- Animations premium fluides — tokens CB-ARCADE --- */
  --duration-instant: var(--cb-duration-instant, 0.08s);
  --duration-fast: var(--cb-duration-fast, 0.14s);
  --duration-normal: var(--cb-duration-normal, 0.20s);
  --duration-slow: var(--cb-duration-slow, 0.35s);

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

  /* --- Fonds/bordures (kawaii = flat, zéro blur) — tokens CB-ARCADE --- */
  --glass-bg: rgba(21, 29, 42, 0.88);
  --glass-blur: none;      /* était blur(12px) saturate(1.2) : plus de verre/flou (pivot kawaii) */
  --border-light: rgba(255, 255, 255, 0.10);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.18);

  color-scheme: dark light;
}

/* Thème clair : piloté par [data-theme] posé par /_kit/theme.js (toujours
   résolu 'dark'|'light', jamais absent) plutôt que prefers-color-scheme seul
   — sinon un choix explicite clair/sombre fait sur le HUB ne suivait pas
   dans le jeu (page séparée, cf BACKLOG.md). */
html[data-theme="light"] {
    --bg-0: #f8f5ff;
    --bg-1: #fcfaff;
    --bg-2: #ffffff;
    --bg-glow: rgba(88, 47, 168, 0.12);
    --panel-0: #ffffff;
    --panel-1: #f8f5ff;
    --grid-0: #ede7ff;
    --grid-1: #e5d9ff;
    --slot-0: #e3d3ff;
    --slot-1: #d8c8ff;
    --ink: #0a0515;        /* WCAG AAA+ : 17.5:1 sur #fcfaff */
    --ink-dark: #050310;   /* Texte très contrasté pour emphasis */
    --muted: #5f6f8a;      /* WCAG AAA : 9.2:1 */
    --muted-dark: #3a4d63; /* Secondaire renforcé */
    /* Glows neutralisés aussi en clair (cf :root — kawaii = zéro halo néon) */
    --glow-accent: transparent;
    --glow-accent-bright: transparent;
    --glow-accent-max: transparent;
    --glow-green: transparent;
    --glow-red: transparent;
    /* Light mode glass — tokens CB-ARCADE adjusted --- */
    --glass-bg: rgba(255, 250, 255, 0.90);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.18);
    color-scheme: light;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%;
    background:
      radial-gradient(90% 60% at 50% -10%, rgba(70, 30, 160, 0.4) 0%, transparent 65%),
      radial-gradient(75% 50% at 85% 5%, rgba(212, 175, 55, 0.15) 0%, transparent 65%),
      radial-gradient(85% 65% at 10% 95%, rgba(0, 255, 136, 0.08) 0%, transparent 65%),
      linear-gradient(180deg, #0d0620 0%, #080c16 48%, #060812 100%);
    background-attachment:fixed;
    color:var(--ink); font-family:var(--cb-font-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    overscroll-behavior:none; touch-action:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale; }

/* Motif discret : des bulles très douces */
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      radial-gradient(circle at 18% 22%, rgba(255,255,255,.055) 0 12px, transparent 13px),
      radial-gradient(circle at 76% 12%, rgba(255,255,255,.04) 0 18px, transparent 19px),
      radial-gradient(circle at 62% 78%, rgba(255,255,255,.045) 0 15px, transparent 16px),
      radial-gradient(circle at 30% 88%, rgba(255,255,255,.035) 0 22px, transparent 23px);
    background-size:340px 340px; }

#wrap { position:relative; z-index:1; max-width:520px; margin:0 auto;
    padding:var(--cb-safe-top, env(safe-area-inset-top)) 12px 12px;
    display:flex; flex-direction:column; align-items:center; gap:10px; min-height:100%;
    font-family:var(--cb-font-family, inherit); }

/* ---- En-tête : marque + compteurs — Tokens CB-ARCADE -------- */
header { width:100%; display:flex; align-items:center; justify-content:space-between; padding:10px 4px 0;
    animation:slideDownFade var(--duration-normal) var(--easing-ease-out);
    will-change:transform,opacity; }
@keyframes slideDownFade { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.brand { font-weight:900; letter-spacing:2px; font-size:23px; line-height:1;
    background:linear-gradient(180deg, #fff 0%, #fff 55%, #dccdff 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 2px 0 rgba(0,0,0,.28); }
.brand b { color:var(--piece-yellow); -webkit-text-fill-color:var(--piece-yellow);
    text-shadow:0 0 18px rgba(212, 175, 55, .55); }
.scores { display:flex; gap:14px; }
.score { text-align:right; }
.score .lbl { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1.4px; font-weight:800; }
.score .val { font-size:23px; font-weight:900; font-variant-numeric:tabular-nums;
    text-shadow:0 2px 0 rgba(0,0,0,.35); }

/* ---- Plateau — Premium Styling -------- */
.board-frame { width:100%; border-radius:var(--radius-lg); padding:0; overflow:hidden;
    box-shadow:var(--shadow-board), 0 0 0 1px rgba(255,255,255,.08),
               0 2px 0 rgba(255,255,255,.18) inset;
    animation:boardRise var(--duration-normal) var(--easing-bounce);
    background:linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.01) 100%);
    position:relative;
    will-change:transform,box-shadow; }
@keyframes boardRise { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
canvas { width:100%; height:auto; display:block; touch-action:none;
    image-rendering:crisp-edges; will-change:transform; }  /* sharp pixels for board cells */

.combo { height:22px; font-weight:900; color:var(--piece-yellow); font-size:16px;
    letter-spacing:var(--cb-letter-spacing-caps, 1.5px);
    opacity:0; transform:scale(.86); transition:opacity var(--duration-fast), transform var(--duration-normal) var(--easing-bounce);
    text-shadow:0 0 16px rgba(212, 175, 55, .6), 0 0 8px var(--glow-accent), 0 2px 0 rgba(0,0,0,.3);
    font-family:var(--cb-font-family, inherit);
    will-change:transform,opacity; }
.combo.show { opacity:1; transform:scale(1); }
.combo[data-tier="2"] { font-size:18px; text-shadow:0 0 20px rgba(212, 175, 55, .75), 0 0 12px var(--glow-accent-bright), 0 2px 0 rgba(0,0,0,.35); }
.combo[data-tier="3"] { font-size:20px; letter-spacing:2.4px;
    text-shadow:0 0 28px rgba(212, 175, 55, .95), 0 0 16px var(--glow-accent-max), 0 2px 0 rgba(0,0,0,.40); }
.combo.show[data-tier="3"] { animation:combo-pop-premium .45s var(--easing-bounce); }
@keyframes combo-pop-premium { 0%{ transform:scale(.65) rotate(-6deg); filter:brightness(.95); } 45%{ transform:scale(1.28) rotate(3deg); filter:brightness(1.20); } 100%{ transform:scale(1) rotate(0); } }

footer { color:var(--muted); font-size:11px; text-align:center; padding-bottom:6px;
    animation:fadeIn var(--duration-normal) var(--easing-ease-out);
    padding-bottom:max(6px, env(safe-area-inset-bottom)); }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ---- HUD en pilules premium — Tokens CB-ARCADE -------- */
.hud { width:100%; display:flex; gap:var(--cb-gap-xs, 8px); align-items:center; padding:0 4px;
    padding-top:env(safe-area-inset-top);
    will-change:transform; }
.chip { border-radius:var(--radius-full); padding:8px 16px; font-size:13px; font-weight:900;
    display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums;
    color:var(--ink);
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
    border:1px solid var(--border-medium);
    box-shadow:0 4px 0 rgba(0,0,0,.28), 0 3px 12px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.36) inset;
    backdrop-filter:var(--glass-blur);
    will-change:background,box-shadow,transform;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.chip:hover { background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14));
    box-shadow:0 4px 0 rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.20), 0 0 12px var(--glow-accent), 0 1px 0 rgba(255,255,255,.36) inset; }
.chip.pulse { animation:chip-pop-premium .38s cubic-bezier(.175, .885, .32, 1.275); }
@keyframes chip-pop-premium { 0%{ transform:scale(1) rotate(0); } 25%{ transform:scale(1.22) rotate(2deg); filter:brightness(1.28); box-shadow:0 12px 32px var(--glow-accent-max), 0 4px 0 rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.36) inset; } 60%{ transform:scale(.98) rotate(-1deg); } 100%{ transform:scale(1) rotate(0); } }
.chip-btn { font-family:var(--cb-font-family, inherit); width:auto; margin:0; padding:6px 12px; font-size:15px;
    cursor:pointer; border:0; background:inherit; color:inherit; border-radius:inherit;
    will-change:opacity,transform;
    transition:opacity var(--duration-fast) ease, transform var(--duration-instant) ease; }
.chip-btn:hover { opacity:0.85; }
.chip-btn:active:not(:disabled) { transform:scale(0.94); }
.hud .chip-btn:first-of-type { margin-left:auto; }
.chip-btn:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }

/* Icônes SVG trait fin (galaxie SANTVIA, zéro emoji) : mêmes gabarits que le
   texte qu'elles remplacent, couleur héritée. */
.chip .ic, .chip > svg { width:15px; height:15px; flex-shrink:0; }
.chip-btn svg { width:18px; height:18px; display:block; }

/* Porte-monnaie mutualisé CB-Arcade : 2 soldes Jouer + Gagner ◆ (voir _kit/wallet.js).
   Lisible en thème sombre (défaut) comme en clair (override plus bas). */
.wallet-hud { display:flex; gap:8px; justify-content:center; width:100%; padding:2px 4px 0; }
.wchip { display:flex; align-items:center; gap:5px; font-weight:700; font-size:0.8125rem;
    font-variant-numeric:tabular-nums; color:var(--ink);
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:10px; padding:6px 12px; white-space:nowrap; }
.wchip .ic { font-size:0.875rem; line-height:1; display:flex; }
.wchip .ic svg { width:14px; height:14px; }
.wchip.earn { color:var(--accent); border-color:rgba(212,175,55,0.28); background:rgba(212,175,55,0.08); }
html[data-theme="light"] .wchip { color:var(--ink); background:rgba(14,18,25,0.05); border-color:rgba(14,18,25,0.12); }
html[data-theme="light"] .wchip.earn { color:var(--accent-dk); background:rgba(212,175,55,0.12); border-color:rgba(212,175,55,0.25); }

@media (max-width:400px) {
  .hud { gap:6px; }
  .chip { padding:5px 10px; font-size:12px; gap:5px; }
  .chip-btn { padding:5px 9px; font-size:14px; }
}

/* ---- Boutons —— Tokens CB-ARCADE intégrés -------- */
button { border:0; border-radius:var(--radius-md); padding:14px 16px; font-size:16px; font-weight:900;
    width:100%; cursor:pointer; margin-top:10px; color:var(--ink);
    font-family:var(--cb-font-family, inherit); letter-spacing:var(--cb-letter-spacing-label, .2px);
    position:relative; will-change:box-shadow,transform,filter;
    transition:transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease,
               filter var(--duration-normal) ease, opacity var(--duration-normal) ease; }
button:active:not(:disabled) { transform:translateY(3px); }
button:disabled { opacity:var(--cb-disabled-opacity, .45); cursor:default; }
button:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }

.btn-primary { color:#0a0f22; background:linear-gradient(180deg, #ffff00 0%, var(--accent) 35%, #d4a500 100%);
    box-shadow:0 8px 0 #8a5a00, 0 20px 60px var(--glow-accent-max), 0 1px 0 rgba(255,255,255,.80) inset;
    text-shadow:0 2px 0 rgba(0,0,0,.18); will-change:box-shadow,transform,filter;
    transition:all var(--duration-normal) cubic-bezier(.12, .78, .52, 1); }
.btn-primary:hover:not(:disabled) { filter:brightness(1.18) drop-shadow(0 2px 14px var(--glow-accent-max));
    box-shadow:0 8px 0 #8a5a00, 0 28px 80px var(--glow-accent-max), 0 0 20px var(--glow-accent-bright), 0 1px 0 rgba(255,255,255,.80) inset; }
.btn-primary:active:not(:disabled) { box-shadow:0 2px 0 #8a5a00, 0 4px 16px rgba(0,0,0,.40); transform:translateY(5px); }
.btn-primary:focus-visible { outline-color:#3a2703; box-shadow:0 8px 0 #8a5a00, 0 20px 60px var(--glow-accent-max), 0 0 0 4px var(--glow-accent), 0 1px 0 rgba(255,255,255,.80) inset; }

.btn-play { font-size:20px; padding:18px 16px; letter-spacing:var(--cb-letter-spacing-caps, .6px); }

.btn-ghost { background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium);
    box-shadow:0 5px 0 rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.24) inset;
    backdrop-filter:var(--glass-blur); will-change:box-shadow,transform,background;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.btn-ghost:hover:not(:disabled) { background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
    box-shadow:0 5px 0 rgba(0,0,0,.30), 0 12px 24px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.24) inset; }
.btn-ghost:active:not(:disabled) { box-shadow:0 1px 0 rgba(0,0,0,.30); transform:translateY(3px); }
button svg.ic { width:16px; height:16px; vertical-align:-3px; margin-right:2px; }

.btn-rewarded { background:linear-gradient(180deg, #8aa4ff 0%, #6b8dff 42%, #6b52e8 100%); color:#fff;
    box-shadow:0 8px 0 #2d0f8a, 0 20px 60px rgba(91, 125, 255, 0.35), 0 1px 0 rgba(255,255,255,.55) inset;
    text-shadow:0 2px 2px rgba(0,0,0,.45); will-change:box-shadow,transform,filter;
    transition:all var(--duration-fast) cubic-bezier(.12, .78, .52, 1); }
.btn-rewarded:hover:not(:disabled) { filter:brightness(1.12) drop-shadow(0 2px 14px rgba(107,141,255,0.45));
    box-shadow:0 8px 0 #2d0f8a, 0 24px 72px rgba(91,125,255,0.45), 0 1px 0 rgba(255,255,255,.55) inset; }
.btn-rewarded:active:not(:disabled) { box-shadow:0 2px 0 #2d0f8a, 0 4px 16px rgba(0,0,0,.40); transform:translateY(5px); }
.btn-rewarded small { display:block; font-weight:700; opacity:.85; font-size:11px; margin-top:2px; }

.row-btns { display:flex; gap:9px; }
.row-btns button { flex:1; font-size:15px; padding:14px 10px; }

/* ---- Overlays / cartes — kawaii cartoon B (fond plein, zéro flou) -------- */
.overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:radial-gradient(70% 60% at 50% 40%, rgba(10,4,26,.86), rgba(4,2,12,.96));
    z-index:5; padding:16px;
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:max(16px, env(safe-area-inset-bottom)); }
.overlay.show { display:flex; animation:overlay-in var(--duration-normal) ease-out; }
@keyframes overlay-in { from { opacity:0; } to { opacity:1; } }

.overlay .card { border-radius:var(--radius-lg); padding:26px 22px 22px; width:min(380px,94vw);
    max-height:92vh; overflow-y:auto; text-align:center;
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel-0) 76%, #fff 24%) 0%,
                                       var(--panel-0) 32%,
                                       color-mix(in srgb, var(--panel-0) 84%, #000 16%) 100%);
    border:2px solid var(--border-strong); box-shadow:var(--shadow-card-hover), 0 0 40px var(--glow-accent);
    animation:card-in-premium var(--duration-normal) var(--easing-bounce);
    position:relative;
    will-change:transform,box-shadow; }
/* Reflet kawaii : posé en 2e couche de background (jamais en ::after après le
   contenu, pour ne jamais recouvrir texte/glyphe — même leçon que mahzo). */
.overlay .card::before { content:''; position:absolute; inset:0; border-radius:var(--radius-lg);
    background:radial-gradient(600px 400px at 50% -50%, rgba(255, 255, 255, .10) 0%, transparent 80%);
    pointer-events:none; }
@keyframes card-in-premium { from { transform:translateY(24px) scale(.94); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }

.overlay h2 { margin:0 0 6px; font-size:27px; font-weight:900; letter-spacing:.3px;
    text-shadow:0 2px 0 rgba(0,0,0,.32); }
.overlay h2 svg { width:22px; height:22px; vertical-align:-4px; }
.overlay .big { font-size:56px; font-weight:900; color:var(--accent); margin:4px 0 2px;
    font-variant-numeric:tabular-nums; line-height:1;
    text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 30px rgba(212, 175, 55, .4); }
.overlay .sub { color:var(--muted); font-size:13px; margin-bottom:16px; line-height:1.45; }
.overlay .sub.err { color:#ff9ab0; }
/* Note d'économie : discrète, mais toujours lue avant de dépenser. */
.overlay .sub.note { margin:12px 0 4px; font-size:12px; opacity:.9; }

/* ---- Coffre à récompense variable ---------------------------------------- */
.chest { width:72px; height:72px; margin:10px auto 12px; display:block;
    filter:drop-shadow(0 12px 20px rgba(0,0,0,.50));
    animation:chest-idle 1.6s cubic-bezier(.45, .05, .55, .95) infinite;
    will-change:transform; }
.chest svg { width:100%; height:100%; display:block; }
@keyframes chest-idle { 0%,100%{ transform:translateY(0) rotate(-2.5deg); } 50%{ transform:translateY(-8px) rotate(2.5deg); } }
.chest.opened { animation:chest-burst .5s ease-out both; }
@keyframes chest-burst { 0%{ transform:scale(.6) rotate(0); } 60%{ transform:scale(1.28) rotate(4deg); } 100%{ transform:scale(1); } }
.loot { font-size:17px; font-weight:800; min-height:26px; }
.loot .gain { color:var(--accent); text-shadow:0 0 14px rgba(212, 175, 55, .45); }

/* ---- Écran d'accueil ------------------------------------------------------ */
.overlay .card.home { padding:26px 20px 18px; }
.logo { font-weight:900; letter-spacing:5px; font-size:42px; line-height:1;
    background:linear-gradient(180deg, #fff 0%, #fff 52%, #cdb6ff 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 4px 0 rgba(0,0,0,.3); }
.logo b { color:var(--piece-yellow); -webkit-text-fill-color:var(--piece-yellow);
    text-shadow:0 0 26px rgba(212, 175, 55, .65); }
.card.home .sub { margin:6px 0 16px; }
.stats { display:flex; gap:8px; margin-bottom:8px; }
.stat { flex:1; border-radius:var(--radius-md); padding:12px 6px;
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium);
    box-shadow:0 4px 0 rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.26) inset;
    backdrop-filter:var(--glass-blur);
    will-change:background,box-shadow,transform,border-color;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.stat:hover { background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
    box-shadow:0 4px 0 rgba(0,0,0,.24), 0 8px 18px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.26) inset; }
.stat .lbl { font-size:9px; color:var(--muted); text-transform:uppercase;
    letter-spacing:var(--cb-letter-spacing-caps, 1.2px); font-weight:800; }
.stat .val { font-size:21px; font-weight:900; font-variant-numeric:tabular-nums; }
.board-title { margin:18px 0 8px; font-size:11px; color:var(--muted);
    text-transform:uppercase; letter-spacing:1.4px; font-weight:800; }

/* ---- Objectifs du jour (accueil) : 3 mini-missions + barre + récompense --- */
.objectives { display:flex; flex-direction:column; gap:7px; text-align:left; }
.obj-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-md);
    background:linear-gradient(180deg, var(--border-light), rgba(255,255,255,.04));
    border:1px solid var(--border-light);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    backdrop-filter:var(--glass-blur);
    will-change:background,box-shadow;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.obj-row:hover { background:linear-gradient(180deg, var(--border-medium), var(--border-light)); }
.obj-row.done { border-color:rgba(212, 175, 55, .35); }
.obj-row.weekly { border-color:var(--accent); }
.obj-icon { font-size:18px; flex-shrink:0; display:flex; }
.obj-icon svg { width:18px; height:18px; }
.obj-reward svg { width:12px; height:12px; vertical-align:-2px; }
.obj-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.obj-label { font-size:12px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obj-bar { display:block; height:5px; border-radius:var(--radius-full); background:rgba(0,0,0,.28);
    box-shadow:0 1px 2px rgba(0,0,0,.2) inset; overflow:hidden; }
.obj-fill { display:block; height:100%; border-radius:var(--radius-full);
    background:linear-gradient(90deg, var(--accent), #ffe27a);
    transition:width var(--duration-slow, .3s) cubic-bezier(.16, .78, .5, 1); }
.obj-reward { font-size:11px; font-weight:800; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.obj-claim { flex-shrink:0; border:none; border-radius:var(--radius-full); padding:7px 12px;
    font-size:11px; font-weight:900; color:#3a2703; cursor:pointer;
    background:linear-gradient(180deg, #ffe27a, #d4af37 60%, #e29b06);
    box-shadow:0 3px 0 #8a5a00, 0 2px 6px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.3) inset;
    will-change:transform,box-shadow,filter;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.obj-claim:hover:not(:disabled) { filter:brightness(1.08); }
.obj-claim:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #8a5a00, 0 1px 3px rgba(0,0,0,.18); }
.obj-claim:disabled { cursor:default; color:var(--muted); background:var(--border-light);
    box-shadow:none; opacity:var(--cb-disabled-opacity, .72); }
.obj-claim:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }
.lang { display:flex; align-items:center; justify-content:center; gap:var(--cb-gap-xs, 8px);
    margin-top:14px; font-size:12px; color:var(--muted); font-weight:700; }
.lang select { font-family:var(--cb-font-family, inherit); font-size:12px; font-weight:800; color:var(--ink);
    background:rgba(255,255,255,.12); border:1px solid var(--border-medium);
    border-radius:var(--radius-full); padding:6px 10px;
    will-change:background,border-color,box-shadow;
    transition:all var(--duration-fast) ease;
    backdrop-filter:var(--glass-blur); cursor:pointer; }
.lang select:hover { background:rgba(255,255,255,.16); border-color:var(--border-strong); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.lang select:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); background:rgba(255,255,255,.18); border-color:var(--accent); }

/* ---- Classements (accueil + amis) — Tokens CB-ARCADE -------- */
.lb { list-style:none; margin:0; padding:0; max-height:32vh; overflow-y:auto; text-align:left; }
.lb li { display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:var(--radius-md);
    font-size:13px; font-variant-numeric:tabular-nums; margin-bottom:6px;
    background:linear-gradient(180deg, var(--border-light), rgba(255,255,255,.04));
    border:1px solid var(--border-light);
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    backdrop-filter:var(--glass-blur);
    will-change:background,box-shadow;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.lb li:hover { background:linear-gradient(180deg, var(--border-medium), var(--border-light));
    box-shadow:0 4px 12px rgba(0,0,0,.12); }
.lb li.fresh { background:linear-gradient(180deg, #ffff00, #ffea58); color:#1a1426;
    font-weight:900; border-color:rgba(212, 175, 55, .6);
    box-shadow:0 4px 0 #8a5a00, 0 12px 32px rgba(255,193,7,.35), 0 1px 0 rgba(255,255,255,.5) inset; }
.lb .rank { width:22px; color:var(--muted); font-weight:900; text-align:center; }
.lb li.fresh .rank { color:#3a2703; }
.lb li:nth-child(1) .rank { color:#ffd23f; }
.lb .who { flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb .pts { font-weight:900; }
.lb .day { font-size:11px; color:var(--muted); }
.lb li.fresh .day { color:#3a2703; opacity:.75; }
.lb .empty { color:var(--muted); font-size:13px; padding:8px 10px; }

/* ---- Missions (parcours de niveaux au-dessus du mode illimité) ----------- */
.lb li.current { border-color:rgba(212, 175, 55, .55); box-shadow:0 4px 12px rgba(212, 175, 55, .18); }
.lb li.current .rank { color:var(--accent); }
.lb li.done .pts { color:var(--accent); }
.lb li.locked { opacity:.45; }

/* ---- Amis : code, onglets, chat ------------------------------------------ */
.card.friends { width:min(400px,94vw); }
.field { width:100%; margin-top:10px; padding:14px 16px; border-radius:var(--radius-md); font-size:15px;
    font-weight:800; font-family:var(--cb-font-family, inherit); color:var(--ink);
    background:rgba(0,0,0,.28); border:1px solid var(--border-medium);
    box-shadow:0 3px 8px rgba(0,0,0,.28) inset;
    will-change:border-color,box-shadow,background,filter;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1);
    backdrop-filter:var(--glass-blur); }
.field:hover:not(:disabled) { border-color:var(--border-strong); background:rgba(0,0,0,.34);
    box-shadow:0 3px 8px rgba(0,0,0,.28) inset, 0 2px 10px rgba(0,0,0,.12); }
.field:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px);
    border-color:var(--accent); background:rgba(0,0,0,.36);
    box-shadow:0 0 0 4px rgba(212, 175, 55, 0.18), 0 3px 8px rgba(0,0,0,.28) inset; }
.field::placeholder { color:var(--muted); font-weight:700; }
#friends-code { letter-spacing:3px; text-transform:uppercase; }

.code-pill { width:auto; margin:2px auto 12px; display:inline-flex; align-items:center; gap:10px;
    padding:13px 26px; border-radius:var(--radius-full); font-size:24px; font-weight:900;
    letter-spacing:var(--cb-letter-spacing-caps, 5px);
    color:#0a0f22; background:linear-gradient(180deg, #ffff00 0%, var(--accent) 40%, #d4a500 100%);
    box-shadow:0 8px 0 #8a5a00, 0 24px 68px rgba(255, 193, 7, 0.40), 0 2px 0 rgba(255,255,255,.70) inset;
    will-change:filter,box-shadow,transform;
    transition:all var(--duration-fast) cubic-bezier(.12, .78, .52, 1);
    cursor:pointer; }
.code-pill:hover { filter:brightness(1.16) drop-shadow(0 2px 14px rgba(255,193,7,0.50));
    box-shadow:0 8px 0 #8a5a00, 0 28px 80px rgba(255,193,7,0.50), 0 2px 0 rgba(255,255,255,.70) inset; }
.code-pill svg { width:22px; height:22px; flex-shrink:0; }
.code-pill:active { box-shadow:0 2px 0 #8a5a00, 0 4px 16px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.70) inset; transform:translateY(5px); }
.code-pill:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }

.chat { display:flex; flex-direction:column; gap:6px; max-height:22vh; overflow-y:auto;
    text-align:left; padding:2px; }
.chat .bubble { align-self:flex-start; max-width:88%; padding:10px 14px; border-radius:16px 16px 16px 4px;
    font-size:13px; font-weight:700; line-height:1.4;
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium); box-shadow:0 2px 10px rgba(0,0,0,.12);
    backdrop-filter:var(--glass-blur);
    will-change:opacity,transform;
    animation:bubble-in var(--duration-fast) var(--easing-ease-out); }
@keyframes bubble-in { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.chat .bubble.mine { align-self:flex-end; border-radius:16px 16px 4px 16px; color:#1a1426;
    background:linear-gradient(180deg, #ffff00, #ffea58); border-color:rgba(212, 175, 55, .5);
    box-shadow:0 3px 0 #8a5a00, 0 0 16px rgba(255,193,7,.35);
    animation:bubble-in-self var(--duration-fast) var(--easing-ease-out); }
@keyframes bubble-in-self { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
.chat .bubble .who { display:block; font-size:10px; font-weight:900; opacity:.72;
    text-transform:uppercase; letter-spacing:var(--cb-letter-spacing-caps, .8px); margin-bottom:1px; }
.chat .empty { color:var(--muted); font-size:12px; padding:4px 2px; }
.chat .empty svg { width:13px; height:13px; vertical-align:-2px; }
.chat-picker { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; justify-content:center; }
.chat-picker button { width:auto; margin:0; padding:9px 14px; font-size:12.5px; border-radius:var(--radius-full);
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium);
    box-shadow:0 4px 0 rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.24) inset;
    backdrop-filter:var(--glass-blur);
    will-change:background,box-shadow,transform;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); cursor:pointer; }
.chat-picker button:hover:not(:disabled) { background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.12));
    box-shadow:0 4px 0 rgba(0,0,0,.28), 0 8px 16px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.24) inset; }
.chat-picker button:active:not(:disabled) { box-shadow:0 1px 0 rgba(0,0,0,.28); transform:translateY(2px); }
.chat-picker button:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }

/* ---- Boutique de skins ---------------------------------------------------- */
.skins { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0 4px;
    max-height:44vh; overflow-y:auto; }
.skin { border:2px solid transparent; border-radius:var(--radius-md); padding:12px;
    text-align:left; cursor:pointer; width:auto; margin:0; font-size:12px; font-weight:800;
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    box-shadow:0 4px 0 rgba(0,0,0,.26), 0 2px 8px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.22) inset;
    will-change:background,border-color,box-shadow,transform,filter;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1);
    backdrop-filter:var(--glass-blur); }
.skin:hover:not(.locked) { background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
    box-shadow:0 4px 0 rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.22) inset; }
.skin:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }
.skin.on { border-color:var(--accent); box-shadow:0 4px 0 #8a5a00, 0 0 28px rgba(212, 175, 55, .45), 0 1px 0 rgba(255,255,255,.30) inset; }
.skin.locked { opacity:var(--cb-disabled-opacity, .72); cursor:default; }
.skin .swatch { display:flex; gap:3px; margin-bottom:7px; }
.skin .swatch i { width:15px; height:15px; border-radius:5px; display:block;
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 2px 3px rgba(0,0,0,.35); }
.skin .nm { display:block; }
.skin .tag { display:block; font-size:11px; color:var(--muted); font-weight:700; margin-top:2px; }
.skin .tag svg { width:11px; height:11px; vertical-align:-1px; }

.shop-row { display:flex; align-items:center; gap:10px; margin-top:10px; text-align:left; }
.shop-info { flex:1; font-size:13px; }
.shop-info small { display:block; color:var(--muted); font-size:11px; font-weight:600; margin-top:2px; }
.shop-row button { width:auto; margin:0; padding:11px 15px; font-size:14px; white-space:nowrap; will-change:box-shadow,transform; }
.muted { color:var(--muted); font-size:12px; }

/* ---- Bonus quotidien ------------------------------------------------------ */
.dots { display:flex; gap:6px; justify-content:center; margin:12px 0 6px; }
.dot { width:36px; height:36px; border-radius:var(--radius-md); display:flex; align-items:center;
    justify-content:center; font-size:12px; font-weight:900; color:var(--muted);
    background:rgba(0,0,0,.35); box-shadow:0 4px 12px rgba(0,0,0,.32) inset;
    will-change:background,box-shadow,transform,filter,border-color;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.dot:hover { box-shadow:0 4px 12px rgba(0,0,0,.32) inset, 0 3px 12px rgba(0,0,0,.12); }
.dot.on { color:#0a0f22; background:linear-gradient(180deg, #ffff00, var(--accent));
    box-shadow:0 4px 0 #8a5a00, 0 0 16px rgba(255,193,7,0.40), 0 1px 0 rgba(255,255,255,.65) inset;
    transform:scale(1.15); }
.free-boosters { margin-top:10px; font-weight:800; color:var(--ink); }
.free-boosters svg { width:14px; height:14px; vertical-align:-2px; }

/* ---- Boosters (barre sous le plateau) — Tokens CB-ARCADE -------- */
.boosters { width:100%; display:flex; gap:var(--cb-gap-xs, 8px); align-items:stretch; padding:0 4px; }
.booster { flex:1; margin:0; padding:11px 8px 10px; border-radius:var(--radius-md); font-size:24px;
    line-height:1.05; display:flex; flex-direction:column; align-items:center; gap:3px; }
.booster svg { width:24px; height:24px; }
.booster {
    background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
    border:1px solid var(--border-medium);
    box-shadow:0 6px 0 rgba(0,0,0,.30), 0 3px 12px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.30) inset;
    cursor:pointer; will-change:background,box-shadow,transform;
    transition:all var(--duration-normal) cubic-bezier(.16, .78, .5, 1);
    backdrop-filter:var(--glass-blur); }
.booster:hover:not(:disabled) { background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
    box-shadow:0 6px 0 rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.16), 0 0 16px var(--glow-accent), 0 1px 0 rgba(255,255,255,.30) inset; }
.booster:active:not(:disabled) { box-shadow:0 2px 0 rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.18); transform:translateY(4px); }
.booster:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(255, 193, 7, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }
.booster .nm { font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps, .6px); }
.booster .n { font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; }
.booster.empty { opacity:.50; }
.booster.on { border-color:var(--accent); transform:translateY(0) scale(1.06);
    box-shadow:0 6px 0 #8a5a00, 0 0 40px var(--glow-accent-max), 0 0 20px var(--glow-accent-bright),
               0 3px 12px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.38) inset;
    background:linear-gradient(180deg, rgba(255, 255, 0, .14), rgba(255, 255, 0, .05));
    animation:booster-gentle-rotate 2.2s ease-in-out infinite; }
@keyframes booster-gentle-rotate { 0%,100%{ transform:scale(1.06) rotate(-1deg); } 50%{ transform:scale(1.06) rotate(1deg); } }
.booster-axis { width:auto; margin:0; padding:10px 14px; border-radius:var(--radius-md); font-size:12px;
    font-weight:900; color:#0a0f22; background:linear-gradient(180deg, #ffff00, var(--accent));
    box-shadow:0 5px 0 #a86f00, 0 0 14px rgba(255,193,7,0.30), 0 1px 0 rgba(255,255,255,.60) inset; }

/* ---- Tutoriel in-game (carte de coaching) — Glassmorphism -------- */
.coach { width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px;
    border-radius:var(--radius-lg); font-size:13px; font-weight:800; line-height:1.4; text-align:left;
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium);
    box-shadow:0 5px 0 rgba(0,0,0,.28), 0 2px 16px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.28) inset;
    will-change:opacity,transform;
    animation:coach-in var(--duration-normal) var(--easing-bounce);
    backdrop-filter:var(--glass-blur); }
.coach[hidden] { display:none; }
@keyframes coach-in { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.coach-icon { font-size:24px; line-height:1; flex:none; display:flex;
    animation:coach-nudge 1.6s ease-in-out infinite;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.coach-icon svg { width:24px; height:24px; }
@keyframes coach-nudge { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.coach-text { flex:1; }
.coach-next { width:auto; margin:0; flex:none; padding:11px 18px; border-radius:var(--radius-full);
    font-size:12px; font-weight:900; color:#0a0f22; background:linear-gradient(180deg, #ffff00, var(--accent));
    box-shadow:0 5px 0 #8a5a00, 0 12px 32px rgba(255,193,7,0.32), 0 1px 0 rgba(255,255,255,.65) inset;
    will-change:filter,box-shadow,transform;
    transition:all var(--duration-fast) cubic-bezier(.12, .78, .52, 1); cursor:pointer; }
.coach-next:hover:not(:disabled) { filter:brightness(1.14) drop-shadow(0 2px 8px rgba(255,193,7,0.40));
    box-shadow:0 5px 0 #8a5a00, 0 16px 40px rgba(255,193,7,0.38), 0 1px 0 rgba(255,255,255,.65) inset; }
.coach-next:active:not(:disabled) { box-shadow:0 2px 0 #8a5a00, 0 4px 14px rgba(0,0,0,.35); transform:translateY(3px); }
.coach-next:focus-visible { outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9)); outline-offset:var(--cb-focus-offset, 2px); }
#coach:not([hidden]) ~ footer { display:none; }

/* ---- Défis (mode niveaux, src/levels.js) ---------------------------------- */
.level-hud { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 15px; border-radius:var(--radius-md); font-size:12px; font-weight:800;
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium);
    box-shadow:0 4px 0 rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.24) inset;
    backdrop-filter:var(--glass-blur); }
.level-hud[hidden] { display:none; }
.lv-moves { color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }

.levels-card { width:min(420px,94vw); }
.levels-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:14px 0 6px;
    max-height:52vh; overflow-y:auto; }
.level-btn { width:auto; margin:0; padding:11px 4px 9px; border-radius:var(--radius-md);
    display:flex; flex-direction:column; align-items:center; gap:4px; font-size:15px; font-weight:900;
    font-family:var(--cb-font-family, inherit);
    background:linear-gradient(180deg, var(--border-strong), var(--border-light));
    border:1px solid var(--border-medium);
    box-shadow:0 4px 0 rgba(0,0,0,.26), 0 2px 8px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.24) inset;
    backdrop-filter:var(--glass-blur); cursor:pointer;
    will-change:background,box-shadow,transform;
    transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1); }
.level-btn:hover:not(.locked) { background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10));
    box-shadow:0 4px 0 rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.24) inset; }
.level-btn:active:not(.locked) { box-shadow:0 1px 0 rgba(0,0,0,.26); transform:translateY(3px); }
.level-btn .stars { display:flex; gap:1px; color:var(--accent); }
.level-btn .stars svg { width:9px; height:9px; }
.level-btn.locked { opacity:.5; cursor:default; }
.level-btn.locked .lock svg { width:16px; height:16px; }

.stars-row { display:flex; justify-content:center; gap:4px; color:var(--accent); margin:8px 0 12px; line-height:1; }
.stars-row svg { width:28px; height:28px; filter:drop-shadow(0 0 8px rgba(212, 175, 55, .35)); }

/* ---- Responsive & safe-areas ------------------------------------------------ */
@media (max-height:780px) {
  .board-frame { margin:0 auto; min-width:min(240px, 100%);
      max-width:calc((100vh - 300px) / 1.32);
      max-width:calc((100dvh - 300px) / 1.32); }
}
@media (max-height:680px) {
  .logo { font-size:34px; }
  .overlay .card { padding:18px 16px 14px; }
  .overlay .big { font-size:44px; }
  .chest { width:52px; height:52px; }
  .lb { max-height:26vh; }
  .coach { padding:7px 10px; font-size:12px; gap:8px; }
  .coach-icon { font-size:19px; }
  .coach-icon svg { width:19px; height:19px; }
  .coach-next { padding:7px 11px; }
}

/* ---- Accessibilité ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before { animation:none !important; transition:none !important; }
}

/* RTL support via i18n.js (dir="rtl" on html) */
html[dir="rtl"] .row-btns { flex-direction:row-reverse; }
html[dir="rtl"] .hud .chip-btn:first-of-type { margin-left:0; margin-right:auto; }
html[dir="rtl"] .chat .bubble { border-radius:15px 15px 5px 15px; align-self:flex-end; }
html[dir="rtl"] .chat .bubble.mine { border-radius:15px 15px 15px 5px; align-self:flex-start; }
html[dir="rtl"] .lbl { text-align:end; }

/* ---- ANIMATIONS PREMIUM ENRICHIES — Micro-interactions premium -------- */

/* Pulse-gold : pulsation or premium avec glow bokeh */
@keyframes pulse-gold {
  0% { box-shadow:0 5px 0 #d4a500, 0 12px 36px var(--glow-accent), 0 0 12px var(--glow-accent), 0 1px 0 rgba(255,255,255,.6) inset; }
  50% { box-shadow:0 5px 0 #d4a500, 0 28px 72px var(--glow-accent-max), 0 0 20px var(--glow-accent-bright), 0 1px 0 rgba(255,255,255,.6) inset; }
  100% { box-shadow:0 5px 0 #d4a500, 0 12px 36px var(--glow-accent), 0 0 12px var(--glow-accent), 0 1px 0 rgba(255,255,255,.6) inset; }
}
.btn-primary.pulse { animation:pulse-gold 0.75s var(--easing-ease-out); }

/* Sparkle premium : scintillement or pour badges récompense */
@keyframes sparkle {
  0%, 100% { opacity:0.95; filter:drop-shadow(0 6px 12px rgba(255, 193, 7, 0.35)); }
  50% { opacity:1; filter:drop-shadow(0 10px 24px rgba(255, 193, 7, 0.60)); }
}
.badge.sparkle, .chest { animation:sparkle 1.2s ease-in-out infinite; }

/* Float-in premium : entrée GPU-optimisée des cartes */
@keyframes float-in {
  from { opacity:0; transform:translateY(24px) scale(0.94); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.overlay.show .card { animation:float-in var(--duration-normal) var(--easing-bounce); }

/* Gentle-rotate : rotation ludique subtile */
@keyframes gentle-rotate {
  0%, 100% { transform:rotate(-1.2deg); }
  50% { transform:rotate(1.2deg); }
}
.booster.on { animation:gentle-rotate 2s ease-in-out infinite; }

/* Shimmer premium fluide : reflet haut de gamme sur boutons */
@keyframes shimmer {
  0% { transform:translateX(-120%); opacity:0; }
  50% { opacity:0.7; }
  100% { transform:translateX(120%); opacity:0; }
}
.btn-primary::before, .btn-rewarded::before, .code-pill::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  border-radius:inherit;
  animation:shimmer 0.7s var(--easing-ease-out);
  pointer-events:none;
  opacity:0;
}
.btn-primary:hover::before, .btn-rewarded:hover::before, .code-pill:hover::before { animation:shimmer 0.7s var(--easing-ease-out) 0.1s both; }

/* Dock-pop premium : pop HUD avec éclat */
@keyframes dock-pop {
  0% { transform:scale(0.8); filter:brightness(0.9); }
  45% { transform:scale(1.25); filter:brightness(1.3); }
  100% { transform:scale(1); filter:brightness(1); }
}
.chip.pulse { animation:dock-pop 0.5s var(--easing-bounce); }

.overlay.show { animation:overlay-in var(--duration-fast) ease-out; }

/* Chest-burst premium : ouverture dynamique du coffre */
@keyframes chest-burst {
  0% { transform:scale(0.6) rotate(-12deg); opacity:0; filter:brightness(0.8); }
  60% { transform:scale(1.2) rotate(4deg); filter:brightness(1.2); }
  100% { transform:scale(1) rotate(0); opacity:1; filter:brightness(1); }
}
.chest.opened { animation:chest-burst 0.6s var(--easing-bounce); }

/* Loading-shimmer : pulsation premium pour chargement */
@keyframes loading-shimmer {
  0%, 100% { opacity:0.55; }
  50% { opacity:1; filter:brightness(1.1); }
}
.loading { animation:loading-shimmer 1.4s var(--easing-in-out) infinite; }

/* Bounce-in : entrée avec rebond GPU */
@keyframes bounce-in {
  0% { opacity:0; transform:translateY(10px) scale(0.95); }
  60% { opacity:1; transform:translateY(-2px) scale(1.05); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.overlay.show .card { animation:float-in var(--duration-normal) var(--easing-bounce); }

/* Victory-pop : écran de game-over / victoire dramatique */
@keyframes victory-pop {
  0% { transform:scale(0.75) rotate(-12deg); opacity:0; }
  50% { transform:scale(1.15) rotate(4deg); }
  100% { transform:scale(1.04) rotate(0); opacity:1; }
}
#over { animation:victory-pop var(--duration-slow) var(--easing-bounce); }

/* Success-burst : pulsation victoire satisfaction */
@keyframes success-burst {
  0% { transform:scale(0.9) rotate(-5deg); opacity:1; }
  25% { transform:scale(1.08) rotate(3deg) }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

/* Mark-pulse : glow animé victoire sur score */
@keyframes mark-pulse {
  0%, 100% { box-shadow:0 0 8px rgba(212,175,55,0.4), 0 8px 0 #8a5a00; transform:scale(1); }
  50% { box-shadow:0 0 20px rgba(212,175,55,0.7), 0 8px 0 #8a5a00; transform:scale(1.06); }
}
#over-score { animation:mark-pulse 0.8s var(--easing-bounce); }

/* ---- AMÉLIORATIONS FOCUS & ACCESSIBILITY ------- */
/* Focus rings dorés premium (WCAG AAA compliant) */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline:var(--cb-focus-ring, 2px solid rgba(212, 175, 55, 0.9));
  outline-offset:var(--cb-focus-offset, 2px);
  box-shadow:0 0 0 5px rgba(212, 175, 55, 0.15);
}

/* États hover/active smoothness */
button, input, select { transition:all var(--duration-fast) ease; }
button:active:not(:disabled) { transform:translateY(2px); }

/* ---- AMÉLIORATION BOUTONS PREMIUM -------- */
/* Shimmer sur boutons primaires au hover */
.btn-primary, .btn-rewarded { position:relative; overflow:hidden; }
.btn-primary:hover::before, .btn-rewarded:hover::before { animation:shine 0.5s ease-in-out; }

/* Renforcement du shadow au hover */
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 5px 0 #a86f00, 0 20px 50px rgba(212, 175, 55, 0.3), 0 1px 0 rgba(255,255,255,.7) inset; }
.btn-rewarded:hover:not(:disabled) { filter:brightness(1.06); box-shadow:0 5px 0 #3d1f9a, 0 20px 50px rgba(107, 52, 226, 0.3), 0 1px 0 rgba(255,255,255,.45) inset; }

/* ---- ÉTATS VIDES & CHARGEMENT -------- */
.empty-state { text-align:center; color:var(--muted); padding:20px 12px; }
.empty-state svg { opacity:0.4; margin:12px 0; }
.empty-state p { font-size:14px; line-height:1.4; }

/* Skeleton loading (shimmer simple) */
.skeleton {
  background:linear-gradient(90deg, var(--border-light) 25%, var(--border-medium) 50%, var(--border-light) 75%);
  background-size:200% 100%;
  animation:loading-pulse 1.5s ease-in-out infinite;
  border-radius:var(--radius-md);
}

/* ---- RESPONSIVE MOBILE AMÉLIORÉ ------- */
@media (max-width:380px) {
  .btn-primary, .btn-rewarded, .btn-ghost { padding:12px 14px; font-size:15px; }
  .overlay .card { width:min(340px, 96vw); }
  .chip { padding:5px 10px; font-size:12px; }
}

/* ============================================================================
   DÉFIS — échelle de niveaux curatés (src/levels.js) par-dessus le mode
   Infini. Couleurs de palier : facile -> expert file la même montée en
   température que le reste de l'identité POPLYN (or/accent en pivot).
   ========================================================================== */
:root {
  --tier-easy:   #3ddc84;
  --tier-medium: var(--accent, #ffc20e);
  --tier-hard:   #ff8a3d;
  --tier-expert: #ff5d8f;
}

.challenge-bar { display:flex; justify-content:center; width:100%; }
.challenge-chip { width:auto; }

.card.wide { width:min(440px,94vw); }

.levels-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:14px 0;
  max-height:52vh;
  overflow-y:auto;
}

.level-btn {
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:auto; margin-top:0;
  aspect-ratio:1;
  padding:8px;
  border-radius:var(--radius-md);
  color:var(--ink);
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid var(--border-medium);
  border-top:3px solid var(--tier, var(--border-medium));
  box-shadow:0 4px 0 rgba(0,0,0,.28), 0 3px 12px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.36) inset;
  backdrop-filter:var(--glass-blur);
  will-change:background,box-shadow,transform;
  transition:all var(--duration-fast) cubic-bezier(.16, .78, .5, 1);
}
.level-btn:hover:not(:disabled) {
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14));
  box-shadow:0 4px 0 rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.36) inset;
}
.level-btn:disabled { opacity:.42; cursor:default; }

.level-btn .level-num { font-size:19px; font-weight:900; font-variant-numeric:tabular-nums; }
.level-btn .level-badge {
  font-size:9px; color:var(--tier, var(--muted)); text-transform:uppercase;
  letter-spacing:.6px; font-weight:800;
}
.level-btn .level-mark { position:absolute; top:6px; right:6px; width:14px; height:14px; color:var(--tier, var(--ink)); }
.level-btn.done .level-mark { color:var(--accent); }

@media (max-width:380px) {
  .levels-grid { grid-template-columns:repeat(3, 1fr); }
}