/* ============================================================================
   HOPLY — CARTOON KAWAII B (standard FACETA) — Harmonisation avec CB-ARCADE kit
   ============================================================================
   Sticker kawaii : aplats + contours nets, ombres PLATES zéro flou (aucun
   `backdrop-filter`/`filter:blur` — les tokens `--cb-glass-blur`/
   `--cb-overlay-blur` sont neutralisés à `none`), formes rondes, reflet
   `--cb-sheen` statique (jamais de sheen ANIMÉ). Palette verte/or inchangée,
   contraste AA+, mobile-first + safe-areas iOS, thème clair/sombre piloté par
   `html[data-theme]` (`/_kit/theme.js`, choix explicite du hub — plus l'OS
   seul), RTL arabe, assets vectoriels/CSS purs.
   ========================================================================== */

:root {
  /* --- PALETTE CB-ARCADE (reprise stricte) --- */
  /* Neutres (high contrast text) */
  --cb-neutral-0:  #ffffff;
  --cb-neutral-50: #f8f9fb;
  --cb-neutral-100:#f0f3f7;
  --cb-neutral-200:#e5ebf3;
  --cb-neutral-300:#d8e0ec;
  --cb-neutral-400:#c7d2e2;
  --cb-neutral-500:#9aa8bd;
  --cb-neutral-600:#6d7f99;
  --cb-neutral-700:#4a5a73;
  --cb-neutral-800:#2a3342;
  --cb-neutral-900:#1a2029;
  --cb-neutral-1000:#0e1219;

  /* Sémantiques (haute saturation, WCAG AAA — harmonisé kit-design) */
  --cb-primary:    #3aff8f;       /* vert ultra-lumineux (actions principales) */
  --cb-primary-dark: #2ed97f;     /* vert foncé (hover/active) */
  --cb-primary-light: #52f5a5;    /* vert très clair (overlay light) */
  --cb-accent:     #ffc107;       /* or vif premium (highlights) */
  --cb-accent-light:#ffd54f;      /* or clair (sur or) */
  --cb-accent-dark: #ffb300;      /* or foncé (hover) */
  --cb-success:    #3aff8f;       /* vert ultra-vif */
  --cb-warning:    #ff9800;       /* orange premium */
  --cb-danger:     #ff5252;       /* rouge (WCAG AAA) */
  --cb-danger-dark:#e0433f;       /* rouge foncé */

  /* Surfaces (verre dépoli) */
  --cb-surface-0:  #141a23;       /* surface clair */
  --cb-surface-1:  #0e1219;       /* surface foncé (base) */
  --cb-surface-2:  #1a2029;       /* surface secondaire */

  /* Texte (haut contraste) */
  --cb-text-primary:  #eef2f8;    /* texte principal (16:1 contrast) */
  --cb-text-secondary:#9aa8bd;    /* texte secondaire (7:1) */
  --cb-text-muted:    #7c8aa0;    /* texte discret (5:1) */
  --cb-text-on-primary: #062015;  /* sur vert */
  --cb-text-on-accent: #0a0f22;   /* sur or */
  --cb-text-disabled: #5a6575;    /* désactivé */

  /* Borders & Glass */
  --cb-border-light:  rgba(255, 255, 255, 0.08);
  --cb-border-medium: rgba(255, 255, 255, 0.12);
  --cb-border-strong: rgba(255, 255, 255, 0.16);
  --cb-focus-ring:    2px solid rgba(212, 175, 55, 0.85);
  --cb-glass-bg:      rgba(24, 31, 41, 0.82);
  --cb-glass-blur:    none;
  --cb-overlay-bg:    rgba(6, 9, 14, 0.6);
  --cb-overlay-blur:  none;

  /* Typo */
  --cb-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-heading-xl:   2rem;
  --cb-heading-lg:   1.5rem;
  --cb-heading-md:   1.25rem;
  --cb-heading-sm:   1.125rem;
  --cb-text-base:    0.9375rem;
  --cb-text-sm:      0.875rem;
  --cb-font-regular: 400;
  --cb-font-semibold: 600;
  --cb-font-bold:    700;
  --cb-font-black:   800;

  /* Espacements (8px grid) */
  --cb-space-4:   8px;
  --cb-space-6:   12px;
  --cb-space-8:   16px;
  --cb-space-10:  20px;
  --cb-space-12:  24px;
  --cb-space-16:  32px;
  --cb-space-20:  40px;

  /* Rayons (réguliers, smooth) */
  --cb-radius-sm:     10px;
  --cb-radius-md:     16px;
  --cb-radius-lg:     20px;
  --cb-radius-xl:     26px;
  --cb-radius-full:   999px;

  /* Ombres (bokeh 3-layer, profondeur premium) */
  --cb-shadow-xs:     0 2px 0 rgba(0, 0, 0, 0.35);
  --cb-shadow-sm:     0 3px 0 rgba(0, 0, 0, 0.35);
  --cb-shadow-md:     0 4px 0 rgba(0, 0, 0, 0.38);
  --cb-shadow-lg:     0 6px 0 rgba(0, 0, 0, 0.4);
  --cb-shadow-xl:     0 10px 0 rgba(0, 0, 0, 0.45);
  --cb-shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --cb-sheen: radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 55%);

  /* Transitions premium */
  --cb-duration-instant:  0.08s;
  --cb-duration-fast:     0.12s;
  --cb-duration-normal:   0.18s;
  --cb-duration-slow:     0.3s;
  --cb-duration-deliberate: 0.4s;
  --cb-easing-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --cb-easing-bounce:     cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --cb-easing-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --cb-easing-subtle:     cubic-bezier(0.45, 0, 0.55, 1);

  /* States */
  --cb-hover-opacity:     0.08;
  --cb-disabled-opacity:  0.5;

  /* --- VARIANTES LOCALES : Plateau/Objets du jeu (inchangés, gameplay pur) --- */
  --floor-hi: #69e7b6;
  --floor: #3fc79b;
  --floor-dk: #1d9b76;
  --walked: #33b598;
  --walked-dk: #1a8a72;
  --pending-hi: #a58ae6;
  --pending-dk: #5b3aa8;
  --trail-hi: #9dffc4;
  --trail: #54e39a;
  --trail-dk: #1fa96b;
  --wall-hi: #4b2585;
  --wall: #33195e;
  --wall-dk: #20103c;
  --carrot-hi: #ffc06a;
  --carrot: #ff8a3d;
  --carrot-dk: #e2601a;
  --leaf: #41c96f;
  --leaf-dk: #218a48;
  --exit-rim: #5fc6ff;
  --exit-hole: #160a2e;
  --key-hi: #ffe795;
  --key: #ffcf3f;
  --key-dk: #d29b00;
  --door-hi: #d09bff;
  --door: #a865f5;
  --door-dk: #7331c4;
  --block-hi: #e0ab6d;
  --block: #c1854a;
  --block-dk: #8a5a2b;
  --rabbit-hi: #ffffff;
  --rabbit: #efe6ff;
  --rabbit-dk: #c3b2e8;
  --rabbit-ear: #ff9fc0;
  --mat-0: #2f1660;
  --mat-1: #1d0d3c;

  color-scheme: dark;
}

/* Mode clair : inversion de contraste, fond clair, texte foncé — WCAG AAA.
   Piloté par le choix EXPLICITE du hub (`html[data-theme]`, /_kit/theme.js),
   pas seulement par l'OS. */
html[data-theme="light"] {
    /* Texte et surface inversés — contraste AAA strict */
    --cb-text-primary:  #0a0f22;       /* foncé sur clair (#0a0f22 sur #f0f3f7 = 16:1) */
    --cb-text-secondary:#3a4a63;       /* medium-dark pour labels (8.5:1) */
    --cb-text-muted:    #5a6a83;       /* medium pour hints (6.5:1) */
    --cb-text-on-primary: #ffffff;     /* blanc sur vert (AAA) */
    --cb-text-on-accent: #1a1628;      /* très foncé sur or clair (AAA) */

    /* Surfaces en clair — gradient subtil */
    --cb-surface-0:  #faf9fb;          /* très clair */
    --cb-surface-1:  #f0f3f7;          /* clair (base) */
    --cb-surface-2:  #e5ebf3;          /* gris très clair */

    /* Verre clair (moins opaque) */
    --cb-glass-bg: rgba(248, 249, 251, 0.95);
    --cb-overlay-bg: rgba(245, 247, 251, 0.8);

    /* Vert et or adaptés mode light — WCAG AAA (kit-design) */
    --cb-primary: #1a7a4a;             /* vert kit-design light */
    --cb-primary-light: #2ed97f;       /* vert medium */
    --cb-accent: #dd7f00;              /* or orange kit-design light (AAA) */
    --cb-accent-light: #ff9800;        /* or medium */

    /* Palette couleurs gameplay adaptée */
    --floor-hi: #4a9b6a;
    --floor: #2a7a4a;
    --floor-dk: #1a5a3a;
    --carrot: #d97500;                 /* orange profond */
    --carrot-dk: #8a5a00;
    --key: #b8860b;
    --key-dk: #8a6300;

    color-scheme: light;
}

/* --- Reset & base --- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  height: 100%;
  color: var(--cb-text-primary);
  font-family: var(--cb-font-family);
  background-color: var(--cb-surface-1);
  overscroll-behavior: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fond premium avec gradient radial subtil (pas de dot pattern) */
body {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--cb-surface-0) 0%, var(--cb-surface-1) 34%, var(--cb-surface-2) 68%, var(--cb-surface-1) 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* Texture légère (optionnel, très discret) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 100%);
  mask-image: radial-gradient(circle at center, transparent 0%, black 100%);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ic {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* --- Layout principal (safe-areas iPhone) --- */
#wrap {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 100%;
}

header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 0;
}

/* --- Logo/brand (typographie premium animée) --- */
.brand {
  font-weight: 900;
  letter-spacing: 0.05em;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--cb-text-primary);
  text-shadow:
    0 2px 0px rgba(0, 0, 0, 0.2);
  animation: brand-pulse 3.2s ease-in-out infinite;
  will-change: opacity, transform;
}

@keyframes brand-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.96;
    transform: scale(1.015);
  }
}

.brand b {
  color: var(--cb-accent);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* --- Score display --- */
.scores {
  display: flex;
  gap: 1rem;
}

.score {
  text-align: end;
}

.score .lbl {
  font-size: 0.75rem;
  color: var(--cb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.score .val {
  font-size: 1.5rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text-primary);
}

/* --- Porte-monnaie mutualisé CB-Arcade : 2 soldes (Jouer 🪙 + Gagner ◆) ---
   Repris du jeu de référence `awalo`, couleurs adaptées aux tokens HOPLY. */
.wallet-hud {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.wchip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--cb-border-medium);
  border-radius: 10px;
  padding: 6px 12px;
  white-space: nowrap;
}

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

.wchip.earn {
  color: var(--cb-accent);
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(212, 175, 55, 0.08);
}

html[data-theme="light"] .wchip {
  color: var(--cb-text-primary);
  background: rgba(14, 18, 25, 0.05);
  border-color: rgba(14, 18, 25, 0.12);
}
html[data-theme="light"] .wchip.earn {
  color: var(--cb-accent-dark);
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.3);
}

@media (max-width: 380px) {
  .wallet-hud { gap: 6px; }
  .wchip { font-size: 0.75rem; padding: 5px 9px; }
}

/* --- Plateau (canvas) — Glassmorphism premium avec profondeur --- */
.board-frame {
  width: 100%;
  border-radius: var(--cb-radius-lg);
  padding: 6px;
  background: var(--cb-sheen),
              linear-gradient(160deg, rgba(20, 26, 35, 0.92), rgba(14, 18, 25, 0.98));
  border: 1px solid var(--cb-border-medium);
  box-shadow: 0 12px 0px rgba(0, 0, 0, 0.3),
              0 1px 0 rgba(255, 255, 255, 0.08) inset,
              inset 0 -1px 0px rgba(0, 0, 0, 0.15);
  transition: box-shadow var(--cb-duration-slow) var(--cb-easing-subtle),
              transform var(--cb-duration-normal) var(--cb-easing-in-out);
}

html[data-theme="light"] .board-frame {
  background: var(--cb-sheen), rgba(248, 249, 251, 0.75);
  border: 1px solid var(--cb-border-strong);
}

/* Coup refusé (mur / trace déjà posée) : le plateau le DIT aussi à l'œil, pas
   seulement au bip d'erreur — courte, jamais gênante pour le coup suivant. */
.board-frame.refused {
  animation: board-refused 0.22s ease-out;
}
@keyframes board-refused {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .board-frame.refused { animation: none; }
}

canvas#c {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--cb-radius-md);
  touch-action: none;
  background: linear-gradient(180deg, var(--mat-0) 0%, var(--mat-1) 100%);
  box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.45);
}

footer {
  color: var(--cb-text-secondary);
  font-size: 0.6875rem;
  text-align: center;
  padding-bottom: 0.375rem;
  min-height: 15px;
  line-height: 1.4;
}

/* --- HUD (pilules : vies, pièces, objectif) — Glassmorphism --- */
.hud {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0 2px;
}

.chip {
  border: 0;
  border-radius: var(--cb-radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text-primary);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.8), rgba(14, 18, 25, 0.9));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out),
              background var(--cb-duration-normal),
              box-shadow var(--cb-duration-normal),
              border-color var(--cb-duration-normal);
}

.chip.mode {
  color: var(--cb-accent);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
}

.chip-btn {
  font-family: inherit;
  width: auto;
  margin: 0;
  cursor: pointer;
  background: var(--cb-glass-bg);
}

.chip-btn:hover:not(:disabled) {
  background: rgba(56, 224, 139, 0.18);
  border-color: var(--cb-primary);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
}

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

.chip-btn:disabled {
  opacity: var(--cb-disabled-opacity);
  cursor: default;
}

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

.chip.round {
  padding: 0.5rem 0.625rem;
  margin-inline-start: auto;
  flex: none;
}

.chip.round + .chip.round {
  margin-inline-start: 0.5rem;
}

.chip.pulse {
  animation: chip-pop var(--cb-duration-normal) var(--cb-easing-bounce);
}

@keyframes chip-pop {
  0% {
    transform: scale(0.92) translateY(2px);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.3), var(--cb-shadow-inset);
  }
  45% {
    transform: scale(1.2) translateY(-4px);
    box-shadow: var(--cb-shadow-lg), var(--cb-shadow-inset);
  }
  100% {
    transform: scale(1) translateY(0);
    box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  }
}

/* --- Barre d'outils — Glassmorphism --- */
.tools {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  padding: 0 2px;
}

.tool {
  flex: 1;
  width: auto;
  margin: 0;
  color: var(--cb-text-primary);
  border-radius: var(--cb-radius-md);
  padding: 0.75rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.88));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  font-family: inherit;
  cursor: pointer;
}

.tool:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(35, 48, 65, 0.92), rgba(20, 30, 42, 0.98));
  border-color: var(--cb-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 0px rgba(0, 0, 0, 0.28),
              0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.tool:active:not(:disabled) {
  transform: scale(0.94);
  box-shadow: var(--cb-shadow-xs), var(--cb-shadow-inset);
}

.tool:disabled {
  opacity: var(--cb-disabled-opacity);
  cursor: default;
}

.tool:focus-visible {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
}

.tool b {
  font-size: 1.25rem;
  font-weight: 400;
  display: flex;
  color: var(--cb-accent);
}

.tool b .ic {
  width: 1.25rem;
  height: 1.25rem;
}

.tool small {
  font-weight: 600;
  font-size: 0.625rem;
  color: var(--cb-text-secondary);
  font-variant-numeric: tabular-nums;
}

.tool.on {
  background: rgba(56, 224, 139, 0.2);
  border-color: var(--cb-primary);
}

.tool.on b {
  color: var(--cb-primary);
}

/* --- Overlays (écrans modaux) — Glassmorphism --- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--cb-overlay-bg);
  backdrop-filter: var(--cb-overlay-blur);
  -webkit-backdrop-filter: var(--cb-overlay-blur);
  z-index: 5;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

html[data-theme="light"] .overlay {
  background: rgba(240, 243, 247, 0.5);
}

.overlay.show {
  display: flex;
}

.overlay .card {
  position: relative;
  border-radius: var(--cb-radius-xl);
  padding: 1.5rem 1.25rem;
  width: min(390px, 93vw);
  max-height: 94vh;
  overflow-y: auto;
  text-align: center;
  background: var(--cb-sheen),
              linear-gradient(160deg, rgba(24, 31, 41, 0.9), rgba(14, 18, 25, 0.98));
  border: 1px solid var(--cb-border-medium);
  box-shadow: 0 24px 0px rgba(0, 0, 0, 0.4),
              0 8px 0px rgba(0, 0, 0, 0.2),
              0 1px 0 rgba(255, 255, 255, 0.08) inset,
              inset 0 -2px 0px rgba(0, 0, 0, 0.2);
  transition: box-shadow var(--cb-duration-slow) var(--cb-easing-subtle),
              transform var(--cb-duration-normal) var(--cb-easing-in-out);
}

/* Reflet subtil en haut de la card (verre haute) */
.overlay .card::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 40%;
  border-radius: var(--cb-radius-xl);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
}

.overlay h2 {
  margin: 0 0 0.5rem;
  font-size: var(--cb-heading-lg);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--cb-text-primary);
}

.overlay .big {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--cb-accent);
  margin: 0.5rem 0;
  letter-spacing: 0.05em;
}

.overlay .sub {
  color: var(--cb-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.45;
}

/* --- Boutons --- Glassmorphism avec focus visible --- */
button {
  border: 0;
  border-radius: var(--cb-radius-md);
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  margin-top: var(--cb-space-8);
  font-family: inherit;
  transition: all var(--cb-duration-fast) var(--cb-easing-in-out);
}

button:active:not(:disabled) {
  transform: scale(0.98);
  filter: brightness(0.97);
}

button:disabled {
  opacity: var(--cb-disabled-opacity);
  cursor: default;
  filter: saturate(0.7);
}

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

input:focus-visible, button:focus-visible {
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover {
    transform: translateY(-2px);
  }
}

/* Bouton principal : VERT ultra-lumineux avec glow bokeh 3-layer */
.btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #52f5a5, var(--cb-primary));
  box-shadow: 0 8px 0px rgba(58, 255, 143, 0.30),
              0 4px 0px rgba(58, 255, 143, 0.20),
              0 1px 0 rgba(255, 255, 255, 0.20) inset;
  font-weight: 700;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: inset-inline-start 0.5s ease;
  pointer-events: none;
}

.btn-primary:hover:not(:disabled)::before {
  inset-inline-start: 100%;
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #5eff9c, #2ed97f);
  box-shadow: 0 16px 0px rgba(58, 255, 143, 0.40),
              0 8px 0px rgba(58, 255, 143, 0.30),
              0 1px 0 rgba(255, 255, 255, 0.25) inset;
  transform: translateY(-2px);
  filter: brightness(1.12);
}

html[data-theme="light"] .btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #2a9f65, #1a7a4a);
  box-shadow: 0 8px 0px rgba(26, 122, 74, 0.25),
              0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
html[data-theme="light"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #32b070, #228f55);
  box-shadow: 0 12px 0px rgba(26, 122, 74, 0.35),
              0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

/* Bouton secondaire : verre neutre premium */
.btn-ghost {
  color: var(--cb-text-primary);
  background: linear-gradient(135deg, rgba(24, 31, 41, 0.8), rgba(14, 18, 25, 0.9));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.btn-ghost:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(35, 48, 65, 0.85), rgba(25, 33, 45, 0.95));
  border-color: var(--cb-primary);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
  transform: translateY(-2px);
}

.btn-ghost.small {
  width: auto;
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

/* Bouton récompensé : OR vif premium avec glow bokeh 3-layer */
.btn-rewarded {
  color: #0a0f22;
  background: linear-gradient(135deg, #ffd54f, var(--cb-accent));
  box-shadow: 0 8px 0px rgba(255, 193, 7, 0.35),
              0 4px 0px rgba(255, 193, 7, 0.25),
              0 1px 0 rgba(255, 255, 255, 0.35) inset;
  font-weight: 700;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  position: relative;
}

.btn-rewarded:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffe082, #ffb300);
  box-shadow: 0 16px 0px rgba(255, 193, 7, 0.40),
              0 8px 0px rgba(255, 193, 7, 0.30),
              0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transform: translateY(-2px);
  filter: brightness(1.15);
}

html[data-theme="light"] .btn-rewarded {
  color: #1a1628;
  background: linear-gradient(135deg, #d4af37, #b8860b);
  box-shadow: 0 8px 0px rgba(153, 102, 0, 0.25),
              0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
html[data-theme="light"] .btn-rewarded:hover:not(:disabled) {
  background: linear-gradient(135deg, #e5c852, #c9860f);
  box-shadow: 0 12px 0px rgba(153, 102, 0, 0.35),
              0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.btn-rewarded:active:not(:disabled) {
  transform: scale(0.96);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.btn-rewarded small {
  display: block;
  font-weight: 600;
  opacity: 0.85;
  font-size: 0.75rem;
}

.row {
  display: flex;
  gap: 9px;
}

.row .half {
  flex: 1;
  width: auto;
}

/* --- Écran d'accueil --- */
.overlay .card.home {
  padding: 1.5rem 1.25rem 1.125rem;
}

.logo {
  font-weight: 900;
  letter-spacing: 0.05em;
  font-size: 2.75rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--cb-text-primary);
  text-shadow: 0 2px 0px rgba(0, 0, 0, 0.2);
}

.logo b {
  color: var(--cb-accent);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.stat {
  flex: 1;
  border-radius: var(--cb-radius-md);
  padding: 0.625rem 0.25rem;
  background: linear-gradient(135deg, rgba(24, 32, 44, 0.8), rgba(14, 18, 25, 0.9));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: 0 2px 0px rgba(0, 0, 0, 0.12),
              0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.stat .lbl {
  font-size: 0.625rem;
  color: var(--cb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

.stat:hover {
  background: linear-gradient(135deg, rgba(32, 44, 60, 0.85), rgba(20, 26, 35, 0.95));
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.15),
              0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-1px);
}

.stat .val {
  font-size: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--cb-text-primary);
}

.campaign {
  margin: 0.125rem 0 0.25rem;
}

.campaign span {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cb-text-secondary);
  margin-bottom: 0.25rem;
}

.campaign .bar {
  display: block;
  height: 6px;
  border-radius: var(--cb-radius-full);
  overflow: hidden;
  background: var(--cb-surface-2);
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.3);
}

.campaign .bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--cb-radius-full);
  background: var(--cb-primary);
  transition: width var(--cb-duration-slow) var(--cb-easing-in-out);
}

/* --- Sélection de niveaux --- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--cb-text-secondary);
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.level-grid button {
  margin: 0;
  padding: 0.5rem 2px;
  font-size: 0.9375rem;
  border-radius: var(--cb-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.7), rgba(14, 18, 25, 0.8));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  color: var(--cb-text-primary);
  font-weight: 700;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.level-grid button:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(40, 58, 76, 0.9), rgba(30, 42, 58, 0.98));
  border-color: var(--cb-primary);
  box-shadow: 0 6px 0px rgba(0, 0, 0, 0.22),
              0 1px 0 rgba(255, 255, 255, 0.08) inset;
  transform: translateY(-2px);
}

.level-grid button .st {
  font-size: 0.625rem;
  color: var(--cb-accent);
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* Niveaux trace (vert) */
.level-grid button.trace {
  background: rgba(56, 224, 139, 0.2);
  border-color: var(--cb-primary);
}

/* Niveaux complétés (or) */
.level-grid button.done {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--cb-accent);
}

.level-grid button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Fin de niveau (WIN) --- */
.card.win {
  padding-top: 2rem;
}

.ribbon {
  position: absolute;
  inset-inline: 1rem;
  top: -0.875rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--cb-radius-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0a0f22;
  background: linear-gradient(135deg, #ffd54f, var(--cb-accent));
  box-shadow: 0 16px 0px rgba(255, 193, 7, 0.40),
              0 8px 0px rgba(255, 193, 7, 0.30),
              0 1px 0 rgba(255, 255, 255, 0.3) inset;
  animation: ribbon-pop 0.6s var(--cb-easing-bounce);
}

@keyframes ribbon-pop {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.65) rotateX(30deg) rotateZ(-12deg);
  }
  40% {
    opacity: 1;
  }
  50% {
    transform: translateY(4px) scale(1.20) rotateX(-3deg) rotateZ(3deg);
  }
  75% {
    transform: translateY(-2px) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg) rotateZ(0deg);
  }
}

.big.stars {
  font-size: 2.75rem;
  letter-spacing: 0.05em;
  color: var(--cb-accent);
  text-shadow:
    0 4px 0px rgba(0, 0, 0, 0.25);
  animation: stars-pop 0.6s var(--cb-easing-bounce);
  will-change: transform, filter, text-shadow;
}

@keyframes stars-pop {
  0% {
    opacity: 0;
    transform: scale(0.65) rotateY(-25deg) translateY(-12px);
  }
  40% {
    opacity: 1;
  }
  60% {
    transform: scale(1.15) rotateY(0deg) translateY(0);
  }
  85% {
    transform: scale(1.05) rotateY(0deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg) translateY(0);
  }
}

.badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff8575, var(--cb-danger));
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--cb-radius-full);
  padding: 0.375rem 0.875rem;
  margin-bottom: 0.375rem;
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  animation: badge-pop 0.45s var(--cb-easing-bounce);
}

@keyframes badge-pop {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-25deg) translateY(-12px);
  }
  40% {
    transform: scale(1.15) rotate(5deg) translateY(2px);
  }
  70% {
    transform: scale(1.02) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
  }
}

/* --- Labels et champs --- */
.field-label {
  font-size: 0.625rem;
  color: var(--cb-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
  text-align: start;
}

.langs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.langs button {
  margin: 0;
  padding: 0.675rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--cb-radius-sm);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  color: var(--cb-text-primary);
  font-weight: 700;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  cursor: pointer;
}

.langs button.on {
  color: var(--cb-text-on-accent);
  background: linear-gradient(135deg, #f4dfa6, var(--cb-accent));
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

/* --- Boutique --- */
.shop-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.675rem 0;
  border-top: 1px solid var(--cb-border-light);
  text-align: start;
}

.shop-row .nm {
  flex: 1;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--cb-text-primary);
}

.shop-row .ds {
  display: block;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--cb-text-secondary);
  margin-top: 2px;
}

.shop-row button {
  width: auto;
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  border-radius: var(--cb-radius-sm);
}

.shop-row .owned {
  color: var(--cb-accent);
  font-weight: 700;
  font-size: 0.8125rem;
}

.shop-row .routes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: stretch;
  min-width: 114px;
}

.shop-row .routes button {
  width: 100%;
  margin: 0;
  padding: 0.625rem 0.625rem;
  font-size: 0.75rem;
}

.shop-head {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: start;
  margin: 0.625rem 0 0.375rem;
  color: var(--cb-accent);
}

.shop-head.note {
  color: var(--cb-text-secondary);
  font-weight: 600;
  font-size: 0.656rem;
  line-height: 1.45;
  margin-top: 0.5rem;
}

.shop-row .ds.note {
  color: var(--cb-accent);
  font-weight: 600;
  margin-top: 2px;
}

/* --- Leaderboard --- */
.lb-groups {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.125rem 0 0.625rem;
}

.lb-groups button {
  width: auto;
  margin: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  border-radius: var(--cb-radius-full);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  white-space: nowrap;
  color: var(--cb-text-primary);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.lb-groups button.on {
  color: var(--cb-text-on-accent);
  background: linear-gradient(135deg, #f4dfa6, var(--cb-accent));
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.lb-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.lb-tabs.wrap {
  flex-wrap: wrap;
}

.lb-tabs.wrap .tab {
  flex: 1 1 28%;
  padding: 0.625rem 0.375rem;
  font-size: 0.75rem;
}

.tab {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 0.625rem 0.5rem;
  font-size: 0.8125rem;
  border-radius: var(--cb-radius-sm);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.7), rgba(14, 18, 25, 0.8));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  font-weight: 700;
  color: var(--cb-text-primary);
}

.tab:hover:not(.on) {
  background: linear-gradient(135deg, rgba(30, 45, 60, 0.8), rgba(20, 26, 35, 0.9));
  border-color: var(--cb-primary);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.tab.on {
  color: var(--cb-text-on-accent);
  background: linear-gradient(135deg, #f4dfa6, var(--cb-accent));
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

/* --- Quick-chat --- */
.chat {
  text-align: start;
  margin-top: 0.25rem;
}

.chat-log {
  max-height: 22vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 2px 0 0.375rem;
}

.chat-log .bubble {
  align-self: flex-start;
  max-width: 86%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--cb-radius-lg) var(--cb-radius-lg) var(--cb-radius-lg) 3px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  color: var(--cb-text-primary);
  animation: bubble-in var(--cb-duration-normal) var(--cb-easing-bounce);
}

.chat-log .bubble.me {
  align-self: flex-end;
  border-radius: var(--cb-radius-lg) var(--cb-radius-lg) 3px var(--cb-radius-lg);
  color: var(--cb-text-on-accent);
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.chat-log .bubble .who {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-log .empty {
  color: var(--cb-text-secondary);
  font-size: 0.75rem;
  align-self: center;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.chat-picker button {
  width: auto;
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--cb-radius-full);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  font-family: inherit;
  cursor: pointer;
  color: var(--cb-text-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.chat-picker button:hover {
  background: linear-gradient(135deg, rgba(30, 45, 60, 0.85), rgba(20, 26, 35, 0.95));
  border-color: var(--cb-primary);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.chat-picker button.emote {
  font-size: 1.125rem;
  padding: 0.375rem 0.625rem;
}

/* --- Input fields premium --- */
.field {
  width: 100%;
  border-radius: var(--cb-radius-md);
  border: 1px solid var(--cb-border-medium);
  color: var(--cb-text-primary);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.8), rgba(14, 18, 25, 0.9));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  box-shadow: var(--cb-shadow-inset);
  padding: 0.875rem;
  font-size: 1.0625rem;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  caret-color: var(--cb-primary);
}

.field:focus {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
  border-color: var(--cb-primary);
  background: linear-gradient(135deg, rgba(30, 42, 58, 0.9), rgba(20, 26, 35, 0.95));
  box-shadow: var(--cb-shadow-inset), var(--cb-shadow-md);
}

.prompt-err {
  color: var(--cb-danger);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

/* --- Notifications (Toast) premium --- */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  max-width: 88vw;
  color: var(--cb-text-primary);
  background: linear-gradient(135deg, rgba(24, 31, 41, 0.85), rgba(14, 18, 25, 0.95));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  border-radius: var(--cb-radius-full);
  padding: 0.75rem 1.125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  z-index: 9;
  box-shadow: var(--cb-shadow-lg), var(--cb-shadow-inset);
  animation: toast-in var(--cb-duration-normal) var(--cb-easing-ease-out);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- HUD coloré (économie d'écran) — transitions fluides --- */
.chip.lives {
  color: var(--cb-danger);
  background: rgba(255, 91, 87, 0.12);
  border-color: var(--cb-danger);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.chip.lives .ic {
  color: var(--cb-danger);
}

.chip.lives:hover:not(:disabled) {
  background: rgba(255, 91, 87, 0.18);
  box-shadow: 0 6px 0px rgba(255, 91, 87, 0.2), var(--cb-shadow-inset);
}

.chip.coins {
  color: var(--cb-accent);
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--cb-accent);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.chip.coins .ic {
  color: var(--cb-accent);
}

.chip.coins:hover:not(:disabled) {
  background: rgba(212, 175, 55, 0.18);
  box-shadow: 0 6px 0px rgba(212, 175, 55, 0.2), var(--cb-shadow-inset);
}

.chip.goal {
  color: var(--cb-primary);
  background: rgba(56, 224, 139, 0.12);
  border-color: var(--cb-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.chip.goal:hover {
  background: rgba(56, 224, 139, 0.18);
  box-shadow: 0 6px 0px rgba(56, 224, 139, 0.2), var(--cb-shadow-inset);
}

html[data-theme="light"] .chip.lives {
  color: var(--cb-danger);
  background: rgba(255, 91, 87, 0.15);
  border-color: var(--cb-danger);
}
html[data-theme="light"] .chip.coins {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--cb-accent);
}
html[data-theme="light"] .chip.goal {
  color: var(--cb-primary);
  background: rgba(56, 224, 139, 0.12);
  border-color: var(--cb-primary);
}

.chip small {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--cb-text-secondary);
  margin-inline-start: 2px;
}

.chip.lives.empty {
  animation: beat 1.6s ease-in-out infinite;
}

@keyframes beat {
  0%, 100% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.12);
  }
  24% {
    transform: scale(1);
  }
}

/* --- Objectif (barre de progression) premium --- */
.objective {
  width: 100%;
  padding: 0.5rem 0.875rem;
  border-radius: var(--cb-radius-md);
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  transition: box-shadow var(--cb-duration-slow) var(--cb-easing-subtle);
}

.objective span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cb-text-primary);
  text-align: center;
  line-height: 1.35;
}

.objective .bar {
  display: block;
  height: 5px;
  border-radius: var(--cb-radius-full);
  background: var(--cb-surface-2);
  margin-top: 0.375rem;
  overflow: hidden;
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.2);
}

.objective .bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--cb-radius-full);
  background: var(--cb-accent);
  transition: width var(--cb-duration-slow) var(--cb-easing-in-out);
}

.objective .bar i.trace {
  background: var(--cb-primary);
}

/* --- Stock d'outils (réserve pack) --- */
.tool {
  position: relative;
}

.tool .stock {
  position: absolute;
  top: 2px;
  inset-inline-end: 4px;
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--cb-text-on-accent);
  border-radius: var(--cb-radius-full);
  padding: 1px 0.375rem;
  background: var(--cb-accent);
  box-shadow: var(--cb-shadow-sm);
}

/* --- Effets & animations (GPU composées, respecte prefers-reduced-motion) --- */
.bump {
  animation: bump 0.26s var(--cb-easing-bounce);
}

@keyframes bump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(0.95); }
}

.flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 8;
}

.flash.on {
  animation: flash var(--cb-duration-normal) ease-out;
}

@keyframes flash {
  from { opacity: 0.8; }
  to { opacity: 0; }
}

.overlay.show .card {
  animation: card-in var(--cb-duration-normal) var(--cb-easing-in-out);
}

.overlay.show .card.pop {
  animation: card-pop 0.4s var(--cb-easing-bounce);
}

.overlay.show .card.shake {
  animation: card-shake 0.42s ease-out;
}

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

@keyframes card-pop {
  0% {
    opacity: 0;
    transform: scale(0.65) translateY(-20px) rotateX(15deg);
  }
  40% {
    opacity: 1;
  }
  50% {
    transform: scale(1.12) translateY(2px) rotateX(0deg);
  }
  75% {
    transform: scale(1.02) translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
  }
}

@keyframes card-shake {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  15% {
    transform: translateX(-8px) rotate(-1deg);
  }
  30% {
    transform: translateX(7px) rotate(1deg);
  }
  45% {
    transform: translateX(-6px) rotate(-0.5deg);
  }
  60% {
    transform: translateX(4px) rotate(0.5deg);
  }
  75% {
    transform: translateX(-2px) rotate(-0.25deg);
  }
}

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

.overlay .big.hearts .ic {
  margin: 0 2px;
  color: var(--cb-danger);
}

.overlay .big.hearts .ic.empty {
  opacity: 0.28;
}

.overlay .big.lost {
  color: var(--cb-danger);
  animation: heart-break 0.6s ease-out;
}

@keyframes heart-break {
  0% {
    opacity: 0;
    transform: scale(1.4) rotate(-12deg) translateY(-8px);
    filter: brightness(1.2);
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: scale(0.88) rotate(6deg) translateY(0);
    filter: brightness(0.95);
  }
  85% {
    transform: scale(1.05) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0) translateY(0);
    filter: brightness(1);
  }
}

.overlay .sub.tiny {
  font-size: 0.6875rem;
  margin-bottom: 0.5rem;
}

/* --- Bonus quotidien --- */
.daily-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin: 0.375rem 0 0.625rem;
}

.daily-days i {
  font-style: normal;
  border-radius: var(--cb-radius-sm);
  padding: 0.5rem 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.7), rgba(14, 18, 25, 0.8));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-xs), var(--cb-shadow-inset);
  color: var(--cb-text-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.daily-days i b {
  font-size: 0.6875rem;
  color: var(--cb-text-secondary);
  font-weight: 600;
}

.daily-days i span {
  font-size: 0.75rem;
  font-weight: 700;
}

.daily-days i.done {
  opacity: 0.4;
}

.daily-days i.on {
  color: var(--cb-text-on-accent);
  background: var(--cb-accent);
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
  animation: bump 0.4s var(--cb-easing-bounce);
}

.daily-days i.on b {
  color: var(--cb-text-on-accent);
}

/* --- Tutoriel / Aide --- */
.card.tuto {
  padding-top: 1.375rem;
}

.tuto-stage {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.375rem 0 0.75rem;
}

.mini {
  display: grid;
  gap: 6px;
}

.mini i {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: linear-gradient(180deg, var(--floor-hi), var(--floor-dk));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 3px 0 rgba(0, 0, 0, 0.26);
}

.mini i.wall {
  background: linear-gradient(180deg, var(--wall-hi), var(--wall-dk));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 3px 0 rgba(0, 0, 0, 0.3);
}

.mini i.trail, .mini i.walked {
  background: linear-gradient(180deg, var(--trail-hi), var(--trail-dk));
}

.mini i.exit {
  background: radial-gradient(circle at 50% 45%, var(--exit-hole) 44%, var(--exit-rim) 62%, var(--floor-dk) 66%);
}

.mini i.door {
  background: linear-gradient(180deg, var(--door-hi), var(--door-dk));
}

.mini-trace i {
  width: 34px;
  height: 34px;
  background: linear-gradient(180deg, var(--pending-hi), var(--pending-dk));
}

.mini i.anim {
  animation: goal-fill 2.6s ease-in-out infinite;
}

.mini i.target {
  cursor: pointer;
  animation: target-beat 1.1s ease-in-out infinite;
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: -4px;
}

@keyframes target-beat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

.tuto-tip {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cb-text-on-accent);
  border-radius: var(--cb-radius-sm);
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.5rem;
  min-height: 38px;
  background: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tuto-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.25rem 0;
}

.tuto-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--cb-radius-full);
  background: rgba(255, 255, 255, 0.3);
  transition: all var(--cb-duration-fast) var(--cb-easing-in-out);
}

.tuto-dots i.on {
  background: var(--cb-accent);
  width: 8px;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
}

/* --- Légende (tutoriel) --- */
.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  text-align: start;
}

.legend div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cb-text-primary);
}

.legend b {
  width: 26px;
  height: 26px;
  border-radius: var(--cb-radius-sm);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  font-weight: 400;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0px rgba(0, 0, 0, 0.2);
}

.legend b.floor {
  background: linear-gradient(180deg, var(--floor-hi), var(--floor-dk));
}

.legend b.wall {
  background: linear-gradient(180deg, var(--wall-hi), var(--wall-dk));
}

.legend b.trail {
  background: linear-gradient(180deg, var(--trail-hi), var(--trail-dk));
}

.legend b.door {
  background: linear-gradient(180deg, var(--door-hi), var(--door-dk));
}

.legend b.block {
  background: linear-gradient(180deg, var(--block-hi), var(--block-dk));
}

.legend b.exit {
  background: radial-gradient(circle at 50% 45%, var(--exit-hole) 45%, var(--exit-rim));
}

.legend b.stars {
  background: none;
  box-shadow: none;
  color: var(--cb-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  width: 34px;
}

/* --- Engagement / Retention --- */
.campaign.xp .bar i {
  background: var(--cb-primary);
}

.quest {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-align: start;
  margin: 0.375rem 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--cb-radius-md);
  font-size: 0.8125rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.7), rgba(14, 18, 25, 0.8));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  cursor: pointer;
  font-family: inherit;
  color: var(--cb-text-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.quest b {
  flex: 1;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.quest small {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--cb-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quest.done {
  background: rgba(56, 224, 139, 0.2);
  border-color: var(--cb-primary);
  color: var(--cb-text-primary);
}

.quest.done small {
  color: var(--cb-primary);
}

.rival {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cb-accent);
  margin: 0.25rem 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--cb-radius-sm);
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--cb-border-light);
}

html[data-theme="light"] .rival {
  color: var(--cb-accent-dark);
}

.near {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  border-radius: var(--cb-radius-sm);
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #45f4a8, var(--cb-primary));
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
  animation: near-pulse 0.6s var(--cb-easing-bounce);
}

@keyframes near-pulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.merit {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cb-text-on-accent);
  border-radius: var(--cb-radius-sm);
  padding: 0.625rem 0.75rem;
  margin: 2px 0 0.375rem;
  background: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
  animation: card-pop 0.45s var(--cb-easing-bounce);
}

/* --- Coffre de jalon --- */
.chest-loot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.5rem 0 0.75rem;
}

.chest-loot i {
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--cb-radius-full);
  padding: 0.5rem 0.875rem;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  color: var(--cb-accent);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

#chest .big {
  animation: card-pop 0.5s var(--cb-easing-bounce);
}

/* --- Succès / Badges --- */
.badge-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 44vh;
  overflow-y: auto;
  text-align: start;
  margin-bottom: 8px;
}

.badge-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--cb-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.5), rgba(14, 18, 25, 0.7));
  color: var(--cb-text-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.badge-row b {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--cb-radius-sm);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) opacity(0.4);
  background: var(--cb-glass-bg);
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
}

.badge-row .txt {
  flex: 1;
  line-height: 1.35;
}

.badge-row .txt small {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--cb-text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.badge-row.on {
  color: var(--cb-text-on-accent);
  background: linear-gradient(135deg, #f4dfa6, var(--cb-accent));
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.badge-row.on b {
  filter: none;
  background: rgba(255, 255, 255, 0.2);
}

.badge-row.on .txt small {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Skins --- */
.skin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.skin-grid button {
  margin: 0;
  padding: 0.625rem 0.5rem;
  border-radius: var(--cb-radius-md);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.7), rgba(14, 18, 25, 0.8));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  color: var(--cb-text-primary);
}

.skin-grid button:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(30, 45, 60, 0.8), rgba(20, 26, 35, 0.9));
  border-color: var(--cb-primary);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
  transform: translateY(-1px);
}

.skin-grid button .swatch {
  display: flex;
  gap: 2px;
}

.skin-grid button .swatch i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: block;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0px rgba(0, 0, 0, 0.2);
}

.skin-grid button small {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--cb-text-secondary);
  line-height: 1.2;
}

.skin-grid button b {
  font-size: 0.75rem;
  font-weight: 700;
}

.skin-grid button.on {
  color: var(--cb-text-on-accent);
  background: linear-gradient(135deg, #f4dfa6, var(--cb-accent));
  border-color: var(--cb-accent);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

.skin-grid button.on small {
  color: rgba(255, 255, 255, 0.7);
}

.skin-grid button:disabled {
  opacity: 0.3;
  cursor: default;
}

/* --- Pass de saison --- */
.pass-head {
  font-size: 0.75rem;
  font-weight: 700;
  text-align: start;
  margin-bottom: 0.5rem;
  color: var(--cb-accent);
  font-variant-numeric: tabular-nums;
}

.pass-track {
  max-height: 38vh;
  overflow-y: auto;
  text-align: start;
  margin-bottom: 0.5rem;
}

.pass-row {
  padding: 0.5rem 0.625rem;
  border-radius: var(--cb-radius-sm);
  margin-bottom: 0.375rem;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.5), rgba(14, 18, 25, 0.7));
  color: var(--cb-text-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
}

.pass-row.on {
  background: rgba(56, 224, 139, 0.1);
  border: 1px solid var(--cb-primary);
}

.pass-row b {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.pass-row b small {
  font-weight: 600;
  font-size: 0.625rem;
  color: var(--cb-text-secondary);
  margin-inline-start: 0.375rem;
}

.pass-cells {
  display: flex;
  gap: 0.375rem;
}

.pass-cells button {
  flex: 1;
  width: auto;
  margin: 0;
  padding: 0.5rem 0.625rem;
  font-size: 0.6875rem;
  border-radius: var(--cb-radius-sm);
  line-height: 1.2;
  white-space: normal;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.7), rgba(14, 18, 25, 0.8));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  color: var(--cb-text-primary);
  transition: all var(--cb-duration-normal) var(--cb-easing-in-out);
  box-shadow: var(--cb-shadow-xs), var(--cb-shadow-inset);
}

.pass-cells button:disabled {
  opacity: 0.3;
}

.season-banner {
  border-radius: var(--cb-radius-md);
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: start;
  background: linear-gradient(135deg, rgba(20, 26, 35, 0.75), rgba(14, 18, 25, 0.85));
  backdrop-filter: var(--cb-glass-blur);
  -webkit-backdrop-filter: var(--cb-glass-blur);
  border: 1px solid var(--cb-border-medium);
  box-shadow: var(--cb-shadow-sm), var(--cb-shadow-inset);
  color: var(--cb-text-primary);
}

.season-banner span {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--cb-text-secondary);
  margin-top: 2px;
}

/* --- Cadeau --- */
.gift-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gift-row button, .gift-row .btn-ghost.small {
  width: auto;
  flex: 1;
  margin: 0;
  padding: 0.625rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--cb-radius-sm);
  line-height: 1.2;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

/* --- Skins (thèmes) — variations CB-primary + fond coloré --- */
html[data-skin="meadow"] {
  --cb-surface-0:  #2f7a4e;
  --cb-surface-1:  #1f5a3c;
  --cb-surface-2:  #123a28;
  --cb-text-primary: #fff6ff;
  --cb-text-secondary: #dcf2e6;
}

html[data-skin="sunset"] {
  --cb-surface-0:  #b84a6a;
  --cb-surface-1:  #8a2f57;
  --cb-surface-2:  #4d1738;
  --cb-text-primary: #fff6ff;
  --cb-text-secondary: #f8dfec;
}

html[data-skin="midnight"] {
  --cb-surface-0:  #2a4a9c;
  --cb-surface-1:  #1b3170;
  --cb-surface-2:  #101c44;
  --cb-text-primary: #fff6ff;
  --cb-text-secondary: #c3d3f5;
}

html[data-skin="gold"] {
  --cb-surface-0:  #8a6a1e;
  --cb-surface-1:  #6a4d12;
  --cb-surface-2:  #3d2c0a;
  --cb-text-primary: #fff6ff;
  --cb-text-secondary: #f7edd4;
}

html[data-skin="lagoon"] {
  --cb-surface-0:  #1c8f83;
  --cb-surface-1:  #115f57;
  --cb-surface-2:  #0a3a34;
  --cb-text-primary: #fff6ff;
  --cb-text-secondary: #cdf3ec;
}

html[data-skin="berry"] {
  --cb-surface-0:  #a02f66;
  --cb-surface-1:  #74204a;
  --cb-surface-2:  #401228;
  --cb-text-primary: #fff6ff;
  --cb-text-secondary: #f7d7e8;
}

/* --- Accessibilité — respecte les préférences d'accessibilité --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Désactiver toutes les animations pour accessibilité */
  .bump, .flash.on, .overlay.show .card, .overlay.show .card.pop, .overlay.show .card.shake,
  .chip.lives.empty, .daily-days i.on, .goal-anim i, .overlay .big.lost,
  .mini i.target, .chat-log .bubble, .merit, #chest .big,
  .board-frame, .tool, .chip-btn, .overlay .card,
  .brand, .big.stars, .ribbon, .badge,
  .goal-fill, .heart-break, .card-pop, .bubble-in, .toast-in,
  .target-beat, .near-pulse {
    animation: none !important;
    transition: none !important;
  }
  /* Garder les états visuels (hover, focus) sans animation */
  button:focus-visible, input:focus-visible {
    outline: var(--cb-focus-ring);
  }
}

/* --- Mode contrast élevé (WCAG 2.1 Success Criterion 2.4.7) --- */
@media (prefers-contrast: more) {
  :root {
    --cb-border-light: rgba(255, 255, 255, 0.15);
    --cb-border-medium: rgba(255, 255, 255, 0.25);
    --cb-border-strong: rgba(255, 255, 255, 0.35);
  }
  button:focus-visible, input:focus-visible {
    outline-width: 3px;
  }
}

/* --- Responsive mobile-first (360px → 1920px+) --- */
/* Très petits écrans (320px) */
@media (max-width: 360px) {
  :root {
    --cb-text-base: 0.8125rem;
    --cb-heading-lg: 1.25rem;
    --cb-heading-md: 1.125rem;
  }
  body {
    font-size: 14px;
  }
  #wrap {
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    gap: 6px;
  }
  .brand {
    font-size: 1.25rem;
    letter-spacing: 0.03em;
  }
  .overlay .card {
    padding: 1rem 0.75rem;
    width: 100%;
  }
  .hud {
    gap: 0.375rem;
  }
  .level-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
  }
  button {
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
  }
}

/* Petits écrans (360px-480px) */
@media (min-width: 361px) and (max-width: 480px) {
  :root {
    --cb-text-base: 0.875rem;
  }
  .overlay .card {
    width: 93vw;
  }
  .logo {
    font-size: 2.25rem;
  }
}

/* Écrans moyens (480px-680px) */
@media (min-width: 481px) and (max-width: 680px) {
  .logo {
    font-size: 2.5rem;
  }
  .stats {
    gap: 0.5rem;
  }
}

/* Écrans larges (680px+) */
@media (min-width: 681px) {
  #wrap {
    max-width: 600px;
  }
}

/* Écrans très hauteur limitée */
@media (max-height: 700px) {
  .logo {
    font-size: 36px;
  }
  .stats {
    gap: 0.25rem;
  }
  .overlay .card {
    max-height: 85vh;
  }
}

/* Safe-areas iPhone XS/Pro/Dynamic Island */
@supports (padding: max(0px)) {
  #wrap {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }
  .overlay {
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .toast {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* --- Goal animation (Trace unique) --- */
.goal-anim {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.375rem;
  width: 158px;
  margin: 0.75rem auto;
}

.goal-anim i {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--cb-radius-sm);
  background: linear-gradient(180deg, var(--pending-hi), var(--pending-dk));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0px rgba(0, 0, 0, 0.2);
  animation: goal-fill 2.4s ease-in-out infinite;
}

@keyframes goal-fill {
  0%, 8% {
    background: linear-gradient(180deg, var(--pending-hi), var(--pending-dk));
  }
  26%, 72% {
    background: linear-gradient(180deg, var(--trail-hi), var(--trail-dk));
  }
  100% {
    background: linear-gradient(180deg, var(--pending-hi), var(--pending-dk));
  }
}

.goal-rule {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  border-radius: var(--cb-radius-sm);
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--cb-primary);
  box-shadow: var(--cb-shadow-md), var(--cb-shadow-inset);
}

/* === Support RTL (arabe, hébreu) === */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .row {
  flex-direction: row-reverse;
}

[dir="rtl"] .hud {
  flex-direction: row-reverse;
}

[dir="rtl"] header {
  flex-direction: row-reverse;
}

[dir="rtl"] .chip.round {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

[dir="rtl"] .chip.round + .chip.round {
  margin-inline-start: 0;
  margin-inline-end: 0.5rem;
}