/* ============================================================================
   DROPZ — KAWAII CARTOON B (charte flotte, style B valide porteur 2026-09-11) :
   aplats + matiere 2 tons + ombre « sticker » PLATE (zero flou/backdrop-
   filter), contour epais net, reflet kawaii en 2e couche de background. Theme
   pilote par html[data-theme] (/_kit/theme.js, cf <head>) — remplace l'ancien
   style « CB-Arcade Premium » (glassmorphism rgba + @media prefers-color-
   scheme seul, ignorait le choix explicite fait sur le hub — meme piege deja
   documente pour d'autres jeux dans BACKLOG.md).

   IDENTITE conservee : cosmique (nebuleuse indigo/violet en sombre, ciel
   pastel lavande en clair). Le CHROME (header, HUD, barre d'outils, overlays/
   cartes, boutons) recoit le kawaii ; le plateau (canvas) garde son identite
   arcade « corps celestes » propre (glow radial, degrade cosmique), mais suit
   desormais lui aussi le theme EXPLICITE du hub (window.CBTheme, cf
   src/game.js `isDarkMode()`), pas seulement l'OS. Memes tokens d'espacement/
   rayon/typo que kit-design.css (`--cb-space-*`/`--cb-radius-*`/`--cb-font-*`)
   : seule l'IDENTITE (couleurs, ombres, contours) change.
   ========================================================================== */
:root {
  --bg1:#181654; --bg2:#0b0b1e;
  --panel: linear-gradient(160deg, #262168 0%, #141238 100%);
  --panel2: linear-gradient(150deg, #1e1a54 0%, #100e2e 100%);
  --panel3: linear-gradient(150deg, #2c2770 0%, #191648 100%);
  --field: linear-gradient(165deg, #1e1a54 0%, #100e2e 100%);

  --toon-outline:#f1eeff;           /* encre ADAPTATIVE (claire en sombre, foncee en clair) */
  --toon-outline-ink:#0b0924;      /* encre TOUJOURS foncee (posee sur du vif) */
  --toon-outline-w:2.5px;
  --kawaii-sheen: radial-gradient(circle at 30% 26%, rgba(255,255,255,.26), rgba(255,255,255,0) 48%);
  --muted:#a29cd8;

  --accent:#5dd8ff; --accent-hi:#8ae9ff; --accent-ink:#052233;
  --gold:#ffd23f; --gold-hi:#ffe28f; --gold-dark:#c98f00; --gold-ink:#241a02;
  --danger:#ff5b8c; --danger-dark:#8a1f34;
  --info:#5b8cff;

  --accent-fg:var(--gold);       /* teinte "valeur/monnaie" dans le chrome */
  --accent-bright:var(--gold);

  --radius-lg:16px; --radius-md:12px; --radius-sm:9px; --radius-xs:6px;

  /* Ombres « sticker » : PLATES, zero flou — une marche d'escalier encre. */
  --shadow-xs:0 2px 0 var(--toon-outline-ink);
  --shadow-sm:0 3px 0 var(--toon-outline-ink);
  --shadow-md:0 4px 0 var(--toon-outline-ink);
  --shadow-lg:0 6px 0 var(--toon-outline-ink);
  --shadow-xl:0 8px 0 var(--toon-outline-ink), 0 18px 32px rgba(0,0,0,.35);
  --shadow-2xl:0 10px 0 var(--toon-outline-ink), 0 26px 48px rgba(0,0,0,.40);
  --shadow-inset:none;

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

  --focus-ring:2px solid var(--gold);
  --focus-offset:2px;
  --focus-shadow:0 0 0 4px rgba(255,210,63,.28);
  --active-scale:.96;

  color-scheme:dark;
}

html[data-theme="light"] {
  --bg1:#f5f3ff; --bg2:#ece8fb;
  --panel:#ffffff; --panel2:#f2f0fb; --panel3:#e7e3f7;
  --field:#f2f0fb;

  --toon-outline:#241f45; --toon-outline-ink:#241f45; --muted:#665f9c;
  --accent:#2a6ea8; --accent-hi:#3a86c4; --accent-ink:#ffffff;
  --gold:#b3700a; --gold-hi:#d4af37; --gold-dark:#8a5600; --gold-ink:#ffffff;
  --danger:#c1423a; --danger-dark:#7a1f1f;
  --info:#2a5ec9;
  --accent-fg:var(--gold); --accent-bright:var(--gold);

  --shadow-xl:0 8px 0 var(--toon-outline-ink), 0 18px 32px rgba(36,31,69,.14);
  --shadow-2xl:0 10px 0 var(--toon-outline-ink), 0 26px 48px rgba(36,31,69,.16);
  color-scheme:light;
}

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

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

@media (prefers-contrast:more) {
  :root { --focus-ring:2px solid var(--gold); }
}

html, body {
  margin:0; height:100%;
  background:linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--toon-outline);
  font-family:var(--cb-font-family,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  font-size:var(--cb-text-base,.9375rem); line-height:var(--cb-line-height-normal,1.35);
  font-weight:var(--cb-font-regular,400);
  overscroll-behavior:none; touch-action:none;
  transition:background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}

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

header {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:var(--cb-pad-md,12px) var(--cb-pad-xs,8px) var(--cb-space-2,4px);
  gap:var(--cb-gap-xl,16px);
}
.brand { font-weight:var(--cb-font-black,800); letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-size:var(--cb-heading-md,24px); line-height:1; }
.brand b { color:var(--gold); }
.scores { display:flex; gap:var(--cb-gap-xl,16px); }
.score { text-align:end; display:flex; flex-direction:column; gap:var(--cb-space-1,2px); }
.score .lbl { font-size:var(--cb-text-xs,.8125rem); color:var(--muted); text-transform:uppercase;
  letter-spacing:var(--cb-letter-spacing-caps,.05em); font-weight:var(--cb-font-semibold,600); }
.score .val { font-size:var(--cb-heading-md,24px); font-weight:var(--cb-font-black,800); font-variant-numeric:tabular-nums; }

.board-wrap { position:relative; width:100%; }

footer { color:var(--muted); font-size:var(--cb-text-xs,.8125rem); text-align:center;
  padding:var(--cb-pad-xs,8px) var(--cb-pad-xs,4px) var(--cb-space-1,6px);
  line-height:var(--cb-line-height-relaxed,1.5); letter-spacing:var(--cb-letter-spacing-label,.02em);
  font-weight:var(--cb-font-semibold,600); }

/* HUD : score, soldes, plateau, prochain orbe */
.hud { width:100%; display:flex; gap:var(--cb-gap-md,8px); align-items:center;
    padding:var(--cb-pad-sm,8px) var(--cb-pad-xs,6px); justify-content:flex-start; flex-wrap:wrap; }

.chip {
    background:var(--panel2); color:var(--toon-outline);
    border:var(--toon-outline-w) solid var(--toon-outline);
    border-radius:var(--cb-radius-pill,999px);
    padding:var(--cb-pad-xs,8px) var(--cb-pad-md,12px);
    font-size:var(--cb-text-sm,.875rem); font-weight:var(--cb-font-bold,700);
    letter-spacing:var(--cb-letter-spacing-label,.02em);
    display:flex; align-items:center; gap:var(--cb-gap-sm,6px);
    font-variant-numeric:tabular-nums;
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    box-shadow:var(--shadow-xs);
}
.chip .ic { display:inline-flex; width:1.1em; height:1.1em; align-items:center; justify-content:center; }
.chip .ic svg { width:100%; height:100%; }
#earn-chip { color:var(--gold); border-color:var(--gold); }
.next-dot { width:12px; height:12px; border-radius:50%; display:inline-block;
  background:#cfe8ff; border:1.5px solid var(--toon-outline-ink); flex:0 0 auto; }

@media (hover:hover) and (pointer:fine) {
  .chip:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

/* Plateau : cadre sticker net, zero glassmorphism. Le rendu interieur (canvas)
   reste theme-conscient via window.CBTheme, cf src/game.js. */
.board-wrap {
    padding:var(--cb-pad-md,12px); border-radius:var(--radius-lg);
    background:var(--field);
    border:var(--toon-outline-w) solid var(--toon-outline);
    box-shadow:var(--shadow-lg);
    margin:var(--cb-gap-md,8px) 0;
    position:relative;
}

canvas {
    width:100%; height:auto; display:block; border-radius:var(--radius-md);
    touch-action:none; image-rendering:crisp-edges; backface-visibility:hidden;
    transform:translateZ(0);
    border:2px solid var(--toon-outline-ink);
}

/* Barre d'outils : rangee scrollable (6 outils, mobile-first). Attention au
   `button{width:100%}` global : ici on force `width:auto`/`flex` pour ne pas
   empiler/masquer les outils (cf. FLEET-PREMIUM-STANDARD.md AXE D). */
.toolbar {
  width:100%; display:flex; align-items:stretch; gap:7px;
  padding:0 var(--cb-pad-xs,4px) 2px; overflow-x:auto; scrollbar-width:thin;
}
.toolbar[hidden] { display:none; }

.tool-btn {
  font-family:inherit; cursor:pointer; color:var(--toon-outline);
  display:inline-flex; width:auto; flex:0 0 auto; min-width:78px; margin:0;
  text-transform:none; letter-spacing:normal; white-space:nowrap;
  flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:var(--cb-pad-xs,8px) var(--cb-pad-sm,10px);
  border-radius:var(--radius-md); border:var(--toon-outline-w) solid var(--toon-outline);
  background:var(--panel2); box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out);
}
.tool-btn .ic { width:20px; height:20px; margin:0 auto; display:flex; }
.tool-btn .ic svg { width:100%; height:100%; }
.tool-btn .tmeta { display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.tool-btn .tname { font-size:11px; font-weight:var(--cb-font-bold,700); opacity:.92; white-space:nowrap; }
.tool-btn .cost { font-size:12px; font-weight:var(--cb-font-black,800); color:var(--gold); font-variant-numeric:tabular-nums; }
.tool-btn:active:not(:disabled) { transform:translateY(1px); box-shadow:none; }
.tool-btn:disabled { opacity:.45; cursor:default; }
.tool-btn:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }

@media (hover:hover) and (pointer:fine) {
  .tool-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}

/* Overlays : sticker, zero backdrop-filter */
.overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(11,9,36,.62); z-index:5;
    padding:max(var(--cb-pad-lg,16px),env(safe-area-inset-top))
            max(var(--cb-pad-lg,16px),env(safe-area-inset-right))
            max(var(--cb-pad-lg,16px),env(safe-area-inset-bottom))
            max(var(--cb-pad-lg,16px),env(safe-area-inset-left));
    animation:overlay-in var(--dur-normal) var(--ease-out);
}
html[data-theme="light"] .overlay { background:rgba(36,31,69,.32); }
@keyframes overlay-in { from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce) { .overlay { animation:none; } }
.overlay.show { display:flex; }

.overlay .card {
  background:var(--panel);
  background-image:var(--kawaii-sheen), var(--panel);
  border:var(--toon-outline-w) solid var(--toon-outline);
  border-radius:var(--cb-radius-modal,20px); padding:var(--cb-pad-lg,24px) var(--cb-pad-lg,20px);
  width:min(400px,92vw); max-height:92vh; overflow-y:auto; text-align:center;
  box-shadow:var(--shadow-xl);
  animation:card-in var(--dur-slow) var(--ease-bounce) both;
}
@keyframes card-in { from{ opacity:0; transform:translateY(24px) scale(.9); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (prefers-reduced-motion:reduce) { .overlay .card { animation:none; opacity:1; } }

.overlay h2 { margin:0 0 var(--cb-space-8,8px); font-size:var(--cb-heading-lg,1.5rem);
  font-weight:var(--cb-font-black,800); letter-spacing:var(--cb-letter-spacing-label,.02em); }
.overlay .big { font-size:3.4rem; font-weight:var(--cb-font-black,900); color:var(--gold);
  margin:var(--cb-space-8,8px) 0 var(--cb-space-2,4px); font-variant-numeric:tabular-nums; line-height:1;
  animation:win-pop var(--dur-slow) var(--ease-bounce); }
@keyframes win-pop { 0%{ opacity:0; transform:scale(.7); } 60%{ transform:scale(1.1); } 100%{ opacity:1; transform:scale(1); } }
.overlay .sub { color:var(--muted); font-size:var(--cb-text-base,.9375rem);
  margin-bottom:var(--cb-space-16,16px); line-height:var(--cb-line-height-relaxed,1.5); }

.record { color:var(--gold); font-weight:var(--cb-font-black,800); font-size:var(--cb-text-base,.9375rem);
  margin-bottom:var(--cb-space-12,12px); letter-spacing:var(--cb-letter-spacing-caps,.05em); text-transform:uppercase; }
.record[hidden] { display:none; }

/* Boutons — sticker plat, ombre en marche d'escalier, reflet en 2e couche */
button {
  border:var(--toon-outline-w) solid var(--toon-outline-ink); border-radius:var(--radius-md);
  padding:var(--cb-pad-md,14px) var(--cb-pad-lg,16px);
  font-size:var(--cb-text-base,.9375rem); font-weight:var(--cb-font-black,800);
  letter-spacing:var(--cb-letter-spacing-label,.02em);
  width:100%; cursor:pointer; margin-top:var(--cb-space-10,10px); font-family:inherit;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow:var(--shadow-md);
}
button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
button:disabled { opacity:var(--cb-disabled-opacity,.5); cursor:var(--cb-disabled-cursor,not-allowed); }
button:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); box-shadow:var(--focus-shadow); }

.btn-primary {
  background:linear-gradient(135deg, var(--gold-hi), var(--gold));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--gold-hi), var(--gold));
  color:var(--gold-ink);
}
.btn-ghost { background:var(--panel2); color:var(--toon-outline); border-color:var(--toon-outline); }
.btn-rewarded {
  background:linear-gradient(135deg, var(--accent-hi), var(--accent));
  background-image:var(--kawaii-sheen), linear-gradient(135deg, var(--accent-hi), var(--accent));
  color:var(--accent-ink); position:relative;
}
.btn-rewarded small { display:block; font-weight:var(--cb-font-semibold,600); opacity:.9;
  font-size:var(--cb-text-xs,.8125rem); margin-top:var(--cb-space-2,4px); letter-spacing:normal;
  color:var(--accent-ink); }
.btn-rewarded[hidden] { display:none; }

@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .btn-ghost:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
  .btn-rewarded:hover:not(:disabled) { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
}

/* Accueil */
.overlay .card.home { padding:var(--cb-space-28,28px) var(--cb-pad-lg,20px) var(--cb-pad-lg,20px); }
.logo { font-weight:var(--cb-font-black,900); letter-spacing:var(--cb-letter-spacing-caps,.05em);
  font-size:var(--cb-heading-xl,44px); line-height:1; margin-bottom:var(--cb-space-8,8px); color:var(--toon-outline); }
.logo b { color:var(--gold); }
.card.home .sub { margin-bottom:var(--cb-space-16,16px); font-size:var(--cb-heading-xs,1rem); color:var(--muted); }

.stats { display:flex; gap:var(--cb-gap-md,8px); margin-bottom:var(--cb-space-16,16px); }
.stat { flex:1; background:var(--panel2); border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--radius-md);
  padding:var(--cb-pad-md,12px) var(--cb-pad-xs,8px); box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); } }
.stat .lbl { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-bottom:4px; }
.stat .val { font-size:var(--cb-heading-md,22px); font-weight:800; font-variant-numeric:tabular-nums; color:var(--gold); }

.boards-title { text-align:start; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin:4px 2px 6px; }
.board-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; max-height:260px; overflow-y:auto; }
.board-card {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:auto; margin:0; padding:10px 10px 12px; text-align:start;
  border-radius:var(--radius-md); border:var(--toon-outline-w) solid var(--toon-outline); background:var(--panel2);
  box-shadow:var(--shadow-xs); cursor:pointer; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .board-card:not(.locked):hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
}
.board-card.selected { border-color:var(--gold); box-shadow:0 0 0 2px rgba(255,210,63,.35), var(--shadow-xs); }
.board-card.locked { opacity:.62; cursor:default; }
.board-card:disabled { cursor:default; }
.board-swatch { width:100%; height:34px; border-radius:8px; margin-bottom:4px; border:1.5px solid var(--toon-outline-ink); }
.board-name { font-size:.85rem; font-weight:800; }
.board-tagline { font-size:.72rem; color:var(--muted); line-height:1.3; }
.board-best { font-size:.7rem; color:var(--gold); font-weight:700; margin-top:2px; }
.board-lock { position:absolute; inset-inline-end:8px; inset-block-start:8px; width:16px; height:16px; color:var(--muted); }
.board-lock svg { width:100%; height:100%; }

.celebrate { position:absolute; inset-inline:0; top:24%; text-align:center; pointer-events:none;
  font-size:36px; font-weight:900; letter-spacing:.05em; color:var(--gold);
  text-shadow:0 3px 0 var(--toon-outline-ink); opacity:0; }
.celebrate.show { animation:celebrate-pop 1.2s var(--ease-bounce) both; }
@keyframes celebrate-pop {
  0% { opacity:0; transform:scale(.1) rotate(-20deg); }
  14% { opacity:1; transform:scale(1.25) rotate(6deg); }
  50% { transform:scale(1.02) rotate(0); }
  100% { opacity:0; transform:scale(1.1) translateY(-40px); }
}

.toast { position:fixed; left:50%; bottom:calc(var(--cb-space-18,18px) + env(safe-area-inset-bottom)); z-index:9;
  background:var(--panel); background-image:var(--kawaii-sheen), var(--panel);
  border:var(--toon-outline-w) solid var(--toon-outline); color:var(--toon-outline);
  padding:var(--cb-pad-md,14px) var(--cb-pad-lg,20px); border-radius:var(--cb-radius-pill,999px);
  font-size:var(--cb-text-base,.9375rem); font-weight:700; letter-spacing:.02em; max-width:88vw;
  text-align:center; opacity:0; pointer-events:none; transition:all var(--dur-normal) var(--ease-out);
  transform:translate(-50%, 16px); box-shadow:var(--shadow-lg); }
.toast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:var(--focus-ring); outline-offset:var(--focus-offset);
  box-shadow:var(--focus-shadow);
}

/* RTL : proprietes logiques deja utilisees (inset-inline, text-align:start) —
   flexbox suit naturellement la direction, pas de hack supplementaire. */
[dir="rtl"] .brand, [dir="rtl"] .logo { letter-spacing:normal; }
[dir="rtl"] header { flex-direction:row-reverse; }
[dir="rtl"] .scores { flex-direction:row-reverse; }

@media (max-width:400px) {
  #wrap { gap:6px; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
                              max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  header { padding:var(--cb-pad-xs,8px) var(--cb-space-2,4px) var(--cb-space-1,2px); gap:8px; }
  .brand { font-size:20px; }
  .score .val { font-size:20px; }
  .overlay .card { padding:20px 16px; width:min(360px,90vw); }
  .logo { font-size:38px; margin-bottom:6px; }
  .board-list { grid-template-columns:1fr; max-height:220px; }
  button { padding:12px 14px; font-size:15px; margin-top:8px; }
  .overlay h2 { margin:0 0 6px; font-size:1.3rem; }
  .overlay .big { font-size:2.8rem; }
}

@media (max-height:600px) {
  .board-wrap { margin:6px 0; padding:8px; }
  footer { padding:6px 4px 4px; font-size:0.75rem; }
}