/* ============================================================================
   PUTTZ — KAWAII CARTOON B (charte flotte, style B validé porteur 2026-09-11) :
   aplats + matière 2 tons + ombre "sticker" PLATE (zéro flou/backdrop-filter),
   contour épais net, reflet kawaii en 2e couche de background. Thème piloté
   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).

   IDENTITE conservée : parcours de cristal (émeraude profond en sombre, menthe
   pastel en clair) accents or #ffc20e. Mobile-first, RTL-safe (proprietes
   logiques inline/block ou ca compte). Respecte prefers-reduced-motion et
   prefers-contrast.
   ========================================================================== */
:root {
  --pz-green:#2fae7f; --pz-green-2:#6fe0b0; --pz-gold:#ffc20e; --pz-gold-2:#ffd657; --pz-danger:#ff5b6e;

  --pz-bg-0:#0e3a2b; --pz-bg-1:#0a2a1f; --pz-bg-2:#051812;
  --pz-bg-glow: rgba(111,224,176,.14);
  --pz-panel: linear-gradient(160deg,#1a5c45,#0e3a2b);
  --pz-panel-2: linear-gradient(150deg,#1f6d52,#134a37);
  --pz-field: linear-gradient(165deg,#123c2d,#081f17);

  --toon-outline: var(--pz-gold);       /* adaptatif : or sur panneaux sombres */
  --toon-outline-light: var(--pz-gold-2);
  --toon-outline-ink:#051812;          /* toujours fonce, pose sur zones vives */
  --toon-outline-w:2px;
  --kawaii-sheen: radial-gradient(circle at 30% 24%, rgba(255,255,255,.26), rgba(255,255,255,0) 48%);

  --pz-text-1:#eafff2; --pz-text-2:#a3d9bd; --pz-text-mut:#6f9c86;

  --pz-shadow-xs:0 2px 0 var(--toon-outline-ink);
  --pz-shadow-sm:0 3px 0 var(--toon-outline-ink);
  --pz-shadow-md:0 4px 0 var(--toon-outline-ink);
  --pz-shadow-lg:0 6px 0 var(--toon-outline-ink);
  --pz-shadow-modal:0 8px 0 var(--toon-outline-ink), 0 16px 30px rgba(0,0,0,.35);

  --pz-sm:10px; --pz-md:13px; --pz-lg:18px; --pz-xl:22px;
  --pz-dur:.16s; --pz-ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html[data-theme="light"] {
  --pz-green:#1f8a4c; --pz-green-2:#3fae72; --pz-gold:#a8720a; --pz-gold-2:#8a5e00; --pz-danger:#c9364a;

  --pz-bg-0:#eafbf1; --pz-bg-1:#e3f5ea; --pz-bg-2:#d7eede;
  --pz-bg-glow: rgba(31,138,76,.10);
  --pz-panel:#ffffff; --pz-panel-2:#eefbf3; --pz-field:#f4fbf7;

  --toon-outline:#123c2e; --toon-outline-light:#1f5842; --toon-outline-ink:#123c2e;
  --pz-text-1:#0c3324; --pz-text-2:#4d7d67; --pz-text-mut:#4d7d67;
  color-scheme:light;
}

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

html,body { margin:0; height:100%; }
body {
    background:radial-gradient(1200px 640px at 50% -10%, var(--pz-bg-glow), var(--pz-bg-0) 42%, var(--pz-bg-1) 70%, var(--pz-bg-2) 100%);
    color:var(--pz-text-1); font-family:var(--cb-font-family,system-ui),-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:.9375rem; line-height:1.35; font-weight:400;
    overscroll-behavior:none; touch-action:none;
    transition:background var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease);
}

@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 { --toon-outline-w:3px; }
}

#wrap { max-width:560px; 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:12px 8px 4px; gap:16px; }
.brand { font-weight:900; letter-spacing:.05em; font-size:24px; line-height:1; color:var(--pz-text-1);
  -webkit-text-stroke:1px var(--toon-outline-ink); text-shadow:0 2px 0 var(--toon-outline-ink); }
.brand b { color:var(--pz-gold); -webkit-text-stroke:0; }
.scores { display:flex; gap:16px; }
.score { text-align:end; display:flex; flex-direction:column; gap:2px; }
.score .lbl { font-size:.8125rem; color:var(--pz-text-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.score .val { font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--pz-text-1); }

footer { color:var(--pz-text-2); font-size:.8125rem; text-align:center; padding:8px 4px 6px;
  line-height:1.5; letter-spacing:.02em; font-weight:600; }

/* HUD : coups, soldes, trou courant, meilleur score */
.hud { width:100%; display:flex; gap:8px; align-items:center; padding:8px 6px; justify-content:flex-start; flex-wrap:wrap; }

.chip {
    background:var(--pz-panel-2); background-image:var(--kawaii-sheen), var(--pz-panel-2);
    border:var(--toon-outline-w) solid var(--toon-outline);
    border-radius:999px; padding:8px 12px; font-size:.875rem; font-weight:800;
    letter-spacing:.02em; display:flex; align-items:center; gap:6px;
    font-variant-numeric:tabular-nums; color:var(--pz-text-1);
    transition:transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
    box-shadow:var(--pz-shadow-xs);
}
.chip .ic { display:inline-flex; width:15px; height:15px; flex:none; }
.chip .ic svg { width:100%; height:100%; display:block; }
#earn-chip { color:var(--pz-gold); }
#earn-chip .ic { color:var(--pz-gold); }
#best-chip .ic { color:var(--pz-gold); }

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

/* Parcours : ecran encastre (matiere 2 tons + contour epais, plus de bezel bokeh) */
.course-wrap {
    padding:12px; border-radius:var(--pz-lg);
    background:var(--pz-field); background-image:var(--kawaii-sheen), var(--pz-field);
    border:var(--toon-outline-w) solid var(--toon-outline);
    box-shadow:var(--pz-shadow-modal);
    margin:8px 0; position:relative;
    transition:box-shadow var(--pz-dur) var(--pz-ease);
}

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

/* 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 4px 2px; overflow-x:auto; scrollbar-width:thin;
}
.toolbar[hidden] { display:none; }

.tool-btn {
  font-family:inherit; cursor:pointer; color:var(--pz-text-1);
  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:8px 10px; border-radius:var(--pz-md); border:var(--toon-outline-w) solid var(--toon-outline);
  background:var(--pz-panel-2); background-image:var(--kawaii-sheen), var(--pz-panel-2);
  box-shadow:var(--pz-shadow-xs);
  transition:transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
}
.tool-btn .ico { display:inline-flex; width:18px; height:18px; line-height:1; }
.tool-btn .ico svg { width:100%; height:100%; display:block; }
.tool-btn .tmeta { display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.tool-btn .tname { font-size:11px; font-weight:700; opacity:.92; white-space:nowrap; }
.tool-btn .cost { font-size:12px; font-weight:900; color:var(--pz-gold); font-variant-numeric:tabular-nums; }
.tool-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
.tool-btn:disabled { opacity:.45; cursor:default; }
.tool-btn:focus-visible { outline:2px solid var(--pz-gold); outline-offset:2px; }

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

/* Overlays */
.overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
    background:rgba(5,24,18,.72); z-index:5;
    padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
            max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    animation:overlay-in var(--pz-dur) var(--pz-ease);
}
@keyframes overlay-in { from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce) { .overlay { animation:none; } }
html[data-theme="light"] .overlay { background:rgba(20,60,45,.45); }
.overlay.show { display:flex; }

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

.overlay h2 { margin:0 0 8px; font-size:1.5rem; font-weight:900; letter-spacing:.02em; color:var(--pz-text-1); }
.overlay .big { font-size:3.4rem; font-weight:900; color:var(--pz-gold);
  margin:8px 0 4px; font-variant-numeric:tabular-nums; line-height:1; }
.overlay .sub { color:var(--pz-text-2); font-size:.9375rem; margin-bottom:16px; line-height:1.5; }

.record { color:var(--pz-gold); font-weight:900; font-size:.9375rem;
  margin-bottom:12px; letter-spacing:.05em; text-transform:uppercase; }
.record[hidden] { display:none; }

button {
  border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--pz-md); padding:14px 16px;
  font-size:.9375rem; font-weight:900; letter-spacing:.02em; color:var(--pz-text-1);
  background:var(--pz-panel-2); background-image:var(--kawaii-sheen), var(--pz-panel-2);
  width:100%; cursor:pointer; margin-top:10px; font-family:inherit;
  transition:transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease), filter var(--pz-dur) var(--pz-ease), opacity var(--pz-dur) var(--pz-ease);
  box-shadow:var(--pz-shadow-xs);
}
button:active:not(:disabled) { transform:translateY(2px); box-shadow:none; }
button:disabled { opacity:.5; cursor:not-allowed; }
button:focus-visible { outline:2px solid var(--pz-gold); outline-offset:2px; }

.btn-primary {
  border-color:var(--toon-outline-ink); color:#04150f;
  background:linear-gradient(180deg, var(--pz-gold), #c99418);
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--pz-gold), #c99418);
  box-shadow:var(--pz-shadow-sm);
}
.btn-ghost { background:transparent; background-image:none; border-color:var(--pz-text-mut); box-shadow:none; color:var(--pz-text-1); }
.btn-rewarded {
  border-color:var(--toon-outline-ink); color:#fff;
  background:linear-gradient(180deg, var(--pz-green-2), var(--pz-green));
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--pz-green-2), var(--pz-green));
  font-weight:900; box-shadow:var(--pz-shadow-sm); position:relative;
}
.btn-rewarded small { display:block; font-weight:600; opacity:.88; font-size:.8125rem; margin-top:4px; letter-spacing:normal; }
.btn-rewarded[hidden] { display:none; }

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

/* Accueil */
.overlay .card.home { padding:28px 20px 20px; background:var(--pz-panel); background-image:var(--kawaii-sheen), var(--pz-panel); }
.logo { font-weight:900; letter-spacing:.05em; font-size:44px; line-height:1; margin-bottom:8px; color:var(--pz-text-1);
  -webkit-text-stroke:2px var(--toon-outline-ink); text-shadow:0 4px 0 var(--toon-outline-ink); }
.logo b { color:var(--pz-gold); -webkit-text-stroke:0; text-shadow:none; }
.card.home .sub { margin-bottom:16px; font-size:1rem; color:var(--pz-text-2); }

.stats { display:flex; gap:8px; margin-bottom:16px; }
.stat { flex:1; background:var(--pz-panel-2); background-image:var(--kawaii-sheen), var(--pz-panel-2);
  border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--pz-md); padding:12px 8px; box-shadow:var(--pz-shadow-xs); }
.stat .lbl { font-size:.72rem; color:var(--pz-text-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700; margin-bottom:4px; }
.stat .val { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--pz-gold); }

.boards-title { text-align:start; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--pz-text-2); margin:4px 2px 6px; }
.hole-list { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:6px; max-height:300px; overflow-y:auto; }
.hole-card {
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:auto; margin:0; padding:10px 8px 12px; text-align:start;
  border-radius:var(--pz-md); border:var(--toon-outline-w) solid var(--toon-outline); background:var(--pz-panel-2);
  background-image:var(--kawaii-sheen), var(--pz-panel-2);
  box-shadow:var(--pz-shadow-xs); cursor:pointer; transition:transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
}
.hole-card.selected { border-color:var(--pz-gold); box-shadow:0 0 0 2px color-mix(in srgb,var(--pz-gold) 45%,transparent), var(--pz-shadow-xs); }
.hole-card.locked { opacity:.62; cursor:default; filter:grayscale(.5); }
.hole-card:disabled { cursor:default; }
.hole-card:active:not(.locked) { transform:translateY(2px); box-shadow:none; }
.hole-swatch {
  width:100%; height:30px; border-radius:8px; margin-bottom:4px;
  background:linear-gradient(135deg, var(--pz-green-2), var(--pz-green));
  border:1px solid var(--toon-outline-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#04150f;
}
.hole-name { font-size:.78rem; font-weight:800; color:var(--pz-text-1); }
.hole-tagline { font-size:.68rem; color:var(--pz-text-2); line-height:1.3; }
.hole-best { font-size:.66rem; color:var(--pz-gold); font-weight:700; margin-top:2px; }
.hole-lock { position:absolute; inset-inline-end:8px; inset-block-start:8px; width:14px; height:14px; color:var(--pz-text-2); }
.hole-lock svg { width:100%; height:100%; display:block; }

.celebrate { position:absolute; inset-inline:0; top:24%; text-align:center; pointer-events:none;
  font-size:32px; font-weight:900; letter-spacing:.05em; color:var(--pz-gold);
  -webkit-text-stroke:1.5px var(--toon-outline-ink); text-shadow:0 2px 0 var(--toon-outline-ink); opacity:0; }
.celebrate.show { animation:celebrate-pop 1.2s var(--pz-ease) 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); }
}
@media (prefers-reduced-motion:reduce) { .celebrate.show { animation:none; opacity:0; } }

.toast { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:9;
  background:var(--pz-panel-2); background-image:var(--kawaii-sheen), var(--pz-panel-2);
  border:var(--toon-outline-w) solid var(--toon-outline); color:var(--pz-text-1);
  padding:14px 20px; border-radius:999px;
  font-size:.9375rem; font-weight:700; letter-spacing:.02em; max-width:88vw;
  text-align:center; opacity:0; pointer-events:none; transition:all var(--pz-dur) var(--pz-ease);
  transform:translate(-50%, 16px); box-shadow:var(--pz-shadow-sm); }
.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(--pz-gold); outline-offset:2px; border-radius:var(--pz-md);
}

/* 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:8px 4px 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; }
  .hole-list { grid-template-columns:1fr 1fr; max-height:260px; }
  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) {
  .course-wrap { margin:6px 0; padding:8px; }
  footer { padding:6px 4px 4px; font-size:.75rem; }
}