/* ============================================================================
   DROPZ — PASSE ESTHETIQUE PREMIUM. Mobile-first, harmonise avec Kit-Design.

   IDENTITE : cosmique (nebuleuse indigo/violet en sombre, ciel pastel lavande
   en clair — meme famille de teintes dans les deux modes). Orbes a glow
   proportionnel au palier, fusion satisfaisante, particules mesurees.
   RTL-safe : proprietes logiques (inline/block) partout ou ca compte.
   Respecte prefers-reduced-motion et prefers-contrast.
   ========================================================================== */
:root {
  --bg1:var(--cb-surface-0,#181654); --bg2:var(--cb-surface-1,#0b0b1e);
  --panel:var(--cb-surface-0,#181654); --panel2:var(--cb-surface-2,#221f5e);
  --panel3:var(--cb-neutral-800,#2c2870);
  --field:var(--cb-surface-2,#221f5e); --grid:var(--cb-border-medium,rgba(190,190,255,.14));
  --ink:var(--cb-text-primary,#f1eeff); --muted:var(--cb-text-secondary,#a7a3d6);

  --accent:var(--cb-accent,#ffd23f);
  --accent-ink:var(--cb-text-on-accent,#161029);
  --accent-fg:var(--cb-accent-light,#ffe28f);
  --accent-bright:#ffd23f;

  --primary-green:var(--cb-primary,#7a5fe8);
  --primary-dark:var(--cb-primary-dark,#5a41c4);
  --primary-light:var(--cb-primary-light,#a78cff);
  --danger:var(--cb-danger,#ff5b8c);
  --warning:var(--cb-warning,#f2b134);

  --radius-lg:var(--cb-radius-lg,16px);
  --radius-md:var(--cb-radius-md,12px);
  --radius-sm:var(--cb-radius-sm,8px);

  --shadow:var(--cb-shadow-2xl,0 28px 70px rgba(0,0,0,.55));
  --shadow-sm:var(--cb-shadow-sm,0 4px 12px rgba(0,0,0,.18));
  --shadow-md:var(--cb-shadow-md,0 8px 20px rgba(0,0,0,.2));
  --shadow-lg:var(--cb-shadow-lg,0 12px 34px rgba(0,0,0,.28));
  --shadow-inset:var(--cb-shadow-inset,inset 0 1px 0 rgba(255,255,255,.08));

  --glass-blur:var(--cb-glass-blur,blur(10px) saturate(1.15));
  --glass-bg:var(--cb-glass-bg,rgba(24,22,60,.82));

  --dur-instant:var(--cb-duration-instant,.08s);
  --dur-fast:var(--cb-duration-fast,.12s);
  --dur-normal:var(--cb-duration-normal,.18s);
  --dur-slow:var(--cb-duration-slow,.3s);
  --ease-out:var(--cb-easing-ease-out,cubic-bezier(.16,1,.3,1));
  --ease-in-out:var(--cb-easing-in-out,cubic-bezier(.4,0,.2,1));
  --ease-bounce:var(--cb-easing-bounce,cubic-bezier(.2,.9,.3,1.15));

  --focus-ring:var(--cb-focus-ring,2px solid rgba(255,210,63,.9));
  --focus-offset:var(--cb-focus-offset,2px);
  --active-scale:var(--cb-active-scale,.96);

  color-scheme:dark;
}
@media (prefers-color-scheme:light) {
  :root {
    --bg1:var(--cb-neutral-100,#e9ecfb);
    --bg2:var(--cb-neutral-50,#f6f7ff);
    --panel:var(--cb-neutral-0,#ffffff);
    --panel2:var(--cb-neutral-100,#eef0fb);
    --panel3:var(--cb-neutral-200,#dfe2f7);
    --field:var(--cb-neutral-100,#eef0fb);
    --grid:var(--cb-border-medium,rgba(70,60,150,.14));
    --ink:var(--cb-text-primary,#241f45);
    --muted:var(--cb-text-secondary,#665f9c);
    --accent:#c98f00;
    --accent-ink:#221a05;
    --accent-fg:#8a6300;
    --shadow:0 18px 46px rgba(50,40,120,.16);
    --shadow-sm:0 4px 12px rgba(50,40,120,.1);
    --shadow-md:0 8px 20px rgba(50,40,120,.12);
    --shadow-lg:0 12px 34px rgba(50,40,120,.15);
    color-scheme:light;
  }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

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

@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 { --grid:rgba(255,255,255,.24); --accent:var(--cb-accent,#ffdd70); }
}

#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(--accent-fg); }
.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(--glass-bg); border:1px solid var(--grid);
    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:all var(--dur-normal) var(--ease-in-out);
    box-shadow:var(--shadow-sm); backdrop-filter:var(--glass-blur);
}
#earn-chip { color:var(--accent-bright); }
.next-dot { width:12px; height:12px; border-radius:50%; display:inline-block; background:#cfe8ff; }

@media (hover:hover) and (pointer:fine) {
  .chip:hover { box-shadow:var(--shadow-md); background:rgba(255,255,255,.06); }
}

/* Plateau : ecran encastre (bezel bokeh) glassmorphism */
.board-wrap {
    padding:var(--cb-pad-md,12px); border-radius:var(--radius-lg);
    background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
    border:1px solid rgba(190,190,255,.14);
    box-shadow:var(--shadow-lg), 0 0 0 1px rgba(122,95,232,.15), var(--shadow-inset);
    margin:var(--cb-gap-md,8px) 0; backdrop-filter:var(--glass-blur);
    position:relative; transition:all var(--dur-normal) var(--ease-in-out);
}
@media (prefers-color-scheme:light) {
  .board-wrap {
    background:linear-gradient(160deg, rgba(238,240,251,.85), rgba(247,248,255,.95));
    border-color:rgba(70,60,150,.12);
    box-shadow:var(--shadow-md), 0 0 0 1px rgba(122,95,232,.1), var(--shadow-inset);
  }
}

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);
    box-shadow:var(--shadow-md), 0 0 0 1px rgba(122,95,232,.08);
    transition:box-shadow var(--dur-normal) var(--ease-in-out);
}

/* 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(--ink);
  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:1px solid var(--grid);
  background:var(--panel2); box-shadow:var(--shadow-sm), var(--shadow-inset);
  transition:transform var(--dur-fast) var(--ease-bounce),
            box-shadow var(--dur-normal) var(--ease-in-out),
            border-color var(--dur-normal) var(--ease-in-out);
}
.tool-btn .ico { font-size:18px; line-height:1; }
.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(--accent-bright); font-variant-numeric:tabular-nums; }
.tool-btn:active:not(:disabled) { transform:scale(var(--active-scale)); }
.tool-btn:disabled { opacity:.45; cursor:default; }
.tool-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

@media (hover:hover) and (pointer:fine) {
  .tool-btn:hover:not(:disabled) {
    border-color:rgba(255,210,63,.4); box-shadow:var(--shadow-md), var(--shadow-inset);
    transform:translateY(-2px);
  }
}

/* Overlays */
.overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:var(--cb-overlay-bg,rgba(6,6,18,.68));
    backdrop-filter:var(--cb-overlay-blur,blur(4px)); 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);
}
@keyframes overlay-in { from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce) { .overlay { animation:none; } }
@media (prefers-color-scheme:light) { .overlay { background:rgba(40,36,90,.5); } }
.overlay.show { display:flex; }

.overlay .card {
  background:var(--glass-bg); border:1px solid rgba(190,190,255,.14);
  border-radius:var(--radius-lg); 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-lg), 0 0 0 1px rgba(255,210,63,.08), var(--shadow-inset);
  animation:card-in var(--dur-slow) var(--ease-bounce) both; backdrop-filter:var(--glass-blur);
}
@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(--accent-fg);
  margin:var(--cb-space-8,8px) 0 var(--cb-space-2,4px); font-variant-numeric:tabular-nums; line-height: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(--accent-fg); 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; }

button {
  border:0; 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-normal) var(--ease-in-out),
            filter var(--dur-normal) var(--ease-in-out), opacity var(--dur-normal) var(--ease-in-out);
  box-shadow:var(--shadow-sm);
}
button:active:not(:disabled) { transform:scale(var(--active-scale)); }
button:disabled { opacity:var(--cb-disabled-opacity,.5); cursor:var(--cb-disabled-cursor,not-allowed); }
button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.btn-primary {
  background:linear-gradient(135deg, var(--accent), #b8860b); color:var(--accent-ink);
  box-shadow:0 8px 20px rgba(255,210,63,.3), 0 0 12px rgba(255,210,63,.18), var(--shadow-inset);
}
.btn-ghost { background:rgba(255,255,255,.06); color:var(--ink); border:1px solid var(--grid); backdrop-filter:var(--glass-blur); }
.btn-rewarded {
  background:linear-gradient(135deg, var(--primary-green), var(--primary-dark)); color:#fff;
  box-shadow:0 8px 24px rgba(122,95,232,.35), 0 0 16px rgba(122,95,232,.18), var(--shadow-inset);
  font-weight:var(--cb-font-black,800); animation:btn-rewarded-glow 2.5s ease-in-out infinite; position:relative;
}
@keyframes btn-rewarded-glow {
  0%,100% { box-shadow:0 8px 24px rgba(122,95,232,.35), 0 0 16px rgba(122,95,232,.18), var(--shadow-inset); }
  50% { box-shadow:0 10px 28px rgba(122,95,232,.42), 0 0 20px rgba(122,95,232,.25), var(--shadow-inset); }
}
.btn-rewarded small { display:block; font-weight:var(--cb-font-semibold,600); opacity:.88;
  font-size:var(--cb-text-xs,.8125rem); margin-top:var(--cb-space-2,4px); letter-spacing:normal; }
.btn-rewarded[hidden] { display:none; }

@media (hover:hover) and (pointer:fine) {
  .btn-primary:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-2px); }
  .btn-ghost:hover:not(:disabled) { background:var(--panel3); transform:translateY(-1px); }
  .btn-rewarded:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-2px); animation:none; }
}

/* Accueil */
.overlay .card.home { padding:var(--cb-space-28,28px) var(--cb-pad-lg,20px) var(--cb-pad-lg,20px);
  background:var(--panel); border:1px solid var(--grid); }
.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); }
.logo b { color:var(--accent-fg); }
.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:rgba(255,255,255,.06); border:1px solid var(--grid); border-radius:var(--radius-md);
  padding:var(--cb-pad-md,12px) var(--cb-pad-xs,8px); box-shadow:var(--shadow-sm); backdrop-filter:var(--glass-blur); }
.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(--accent-fg); }

.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:1px solid var(--grid); background:var(--panel2);
  box-shadow:var(--shadow-sm); cursor:pointer; transition:all var(--dur-fast) var(--ease-out);
}
.board-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,210,63,.35), var(--shadow-sm); }
.board-card.locked { opacity:.62; cursor:default; }
.board-card:disabled { cursor:default; }
.board-swatch { width:100%; height:34px; border-radius:8px; margin-bottom:4px; box-shadow:var(--shadow-inset); }
.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(--accent-fg); font-weight:700; margin-top:2px; }
.board-lock { position:absolute; inset-inline-end:8px; inset-block-start:8px; font-size:14px; opacity:.85; }

.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(--accent-bright);
  text-shadow:0 8px 28px rgba(255,210,63,.6), 0 2px 6px rgba(0,0,0,.8); 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(--glass-bg); border:1px solid rgba(190,190,255,.14); color:var(--ink);
  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); backdrop-filter:var(--glass-blur); }
.toast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--accent-fg); outline-offset:2px; border-radius:var(--radius-md);
  box-shadow:0 0 0 4px rgba(255,226,143,.25);
}

/* 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; }
}