/* ============================================================================
   SOLZY — 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
   "PASSE ESTHÉTIQUE PREMIUM" (glassmorphism rgba + @media prefers-color-scheme
   seul, ignorait le choix explicite fait sur le hub).

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

  --sz-bg-0:#0e3a2b; --sz-bg-1:#0a2a1f; --sz-bg-2:#051812;
  --sz-bg-glow: rgba(111,224,176,.14);
  --sz-panel: linear-gradient(160deg,#1a5c45,#0e3a2b);
  --sz-panel-2: linear-gradient(150deg,#1f6d52,#134a37);

  --toon-outline: var(--sz-gold);       /* adaptatif : or sur panneaux sombres */
  --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%);

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

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

  --sz-sm:10px; --sz-md:13px; --sz-lg:18px; --sz-xl:22px;
  --sz-dur:.16s; --sz-ease:cubic-bezier(.16,1,.3,1);

  --sz-safe-top:    max(0px, env(safe-area-inset-top, 0px));
  --sz-safe-right:  max(0px, env(safe-area-inset-right, 0px));
  --sz-safe-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  --sz-safe-left:   max(0px, env(safe-area-inset-left, 0px));

  color-scheme:dark;
}
html[data-theme="light"] {
  --sz-green:#1f8a4c; --sz-green-2:#3fae72; --sz-gold:#a8720a; --sz-gold-2:#8a5e00; --sz-danger:#c9364a;

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

  --toon-outline:#123c2e; --toon-outline-ink:#123c2e;
  --sz-text-1:#0c3324; --sz-text-2:#4d7d67; --sz-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(1100px 700px at 50% -12%, var(--sz-bg-glow), var(--sz-bg-0) 42%, var(--sz-bg-1) 70%, var(--sz-bg-2) 100%);
    color:var(--sz-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:manipulation;
    transition:background var(--sz-dur) var(--sz-ease), color var(--sz-dur) var(--sz-ease);
}

body[dir="rtl"] { direction:rtl; }

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

@media (prefers-contrast:more) {
  :root { --toon-outline-w:3px; }
}

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

/* ---- En-tete + marque ---------------------------------------------------- */
header { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 2px 0; }

.brand { font-weight:900; letter-spacing:.02em; font-size:24px; line-height:1.2; color:var(--sz-text-1);
  -webkit-text-stroke:1px var(--toon-outline-ink); text-shadow:0 2px 0 var(--toon-outline-ink); }
.brand b { color:var(--sz-gold); -webkit-text-stroke:0; }

.icon-btn {
  width:40px; height:40px; padding:0; margin:0; flex:0 0 auto;
  border-radius:var(--sz-md); font-size:18px; font-weight:800;
  background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
  color:var(--sz-text-1); border:var(--toon-outline-w) solid var(--toon-outline);
  box-shadow:var(--sz-shadow-xs);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease);
  cursor:pointer;
}
.icon-btn svg { width:20px; height:20px; display:block; }

@media (hover:hover) and (pointer:fine) {
  .icon-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:var(--sz-shadow-sm); }
}
.icon-btn:active { transform:translateY(1px); box-shadow:none; }

.head-btns { display:flex; gap:8px; flex:0 0 auto; }

/* Le « ? » se voit : porte de secours débutant — vert prime. */
.icon-btn.help {
  background:linear-gradient(180deg, var(--sz-green-2), var(--sz-green));
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--sz-green-2), var(--sz-green));
  color:#04231a; border-color:var(--toon-outline-ink);
}

/* ---- HUD : vies, pieces, donne, score ------------------------------------ */
.hud { width:100%; display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }

/* Porte-monnaie mutualisé CB-Arcade (2 soldes : Jouer + Gagner ◆). */
.wallet-hud { width:100%; display:flex; gap:8px; justify-content:center; }
.wchip {
    display:flex; align-items:center; gap:6px; font-weight:800; font-size:.875rem;
    font-variant-numeric:tabular-nums; color:var(--sz-text-1);
    background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
    border:var(--toon-outline-w) solid var(--toon-outline); border-radius:999px; padding:6px 12px;
    white-space:nowrap; box-shadow:var(--sz-shadow-xs);
}
.wchip .ic { display:inline-flex; width:15px; height:15px; flex:none; color:inherit; }
.wchip .ic svg { width:100%; height:100%; display:block; }
.wchip.earn { color:var(--sz-gold); border-color:var(--sz-gold); }

.chip {
    flex:1; margin:0; min-width:0; text-align:center; font-family:inherit; color:var(--sz-text-1);
    background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
    border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--sz-lg);
    padding:8px 8px; box-shadow:var(--sz-shadow-sm);
    transition:transform var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease);
}

.chip .k {
  display:block; font-size:.75rem; color:var(--sz-text-2); text-transform:uppercase;
  letter-spacing:.05em; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Solde Gagner (◆, mutualisé CB-Arcade, cf. _kit/wallet.js) : teinte or
   dediee, pour ne jamais le confondre avec les pieces Jouer. */
.chip.earn { border-color:var(--sz-gold); }
.chip.earn .v { color:var(--sz-gold); }

.chip .v { display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:17px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.2; }

.chip .v .ic { display:inline-flex; width:15px; height:15px; flex:none; }
.chip .v .ic svg { width:100%; height:100%; display:block; }

.chip.low .v { color:var(--sz-danger); }

.chip .v small { font-size:.75rem; font-weight:800; color:var(--sz-text-mut); margin-inline-start:2px; }

.chip-btn { cursor:pointer; }
.chip-btn:active { transform:translateY(1px); }

/* ---- Objectif : consigne toujours visible -------------------------------- */
.goal {
  width:100%; display:flex; align-items:center; gap:8px; min-height:36px;
  padding:8px 12px; border-radius:var(--sz-lg); font-size:.875rem; font-weight:800; line-height:1.35;
  background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
  border:var(--toon-outline-w) solid var(--toon-outline); box-shadow:var(--sz-shadow-sm);
  transition:background var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease);
}

.goal-ico { display:inline-flex; width:17px; height:17px; flex:0 0 auto; color:var(--sz-gold); }
.goal-ico svg { width:100%; height:100%; display:block; }

.goal-txt { flex:1; min-width:0; }

.goal-prog {
  flex:0 0 auto; font-size:.75rem; font-weight:900; padding:2px 10px; border-radius:999px;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--sz-text-1);
  background:rgba(111,224,176,.20); border:1px solid var(--toon-outline);
}

.goal.done {
  background:linear-gradient(180deg, var(--sz-green-2), var(--sz-green));
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--sz-green-2), var(--sz-green));
  border-color:var(--toon-outline-ink); color:#04231a;
}
.goal.done .goal-prog { background:rgba(255,255,255,.35); border-color:transparent; color:#04231a; }

/* ---- La table (canvas gameplay) ------------------------------------------ */
canvas#c {
    width:100%; height:auto; display:block; touch-action:none;
    border-radius:var(--sz-xl); border:var(--toon-outline-w) solid var(--toon-outline);
    box-shadow:var(--sz-shadow-lg);
}

/* ---- Barre d'outils -------------------------------------------------------- */
.toolbar { width:100%; display:flex; gap:8px; }

.tool {
    position:relative; flex:1; margin:0; padding:10px 6px 8px; font-size:19px; line-height:1.1;
    font-family:inherit; color:var(--sz-text-1); cursor:pointer;
    background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
    border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--sz-lg);
    box-shadow:var(--sz-shadow-sm);
    transition:transform var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease);
}
.tool > svg { width:20px; height:20px; display:block; margin:0 auto 2px; }

@media (hover:hover) and (pointer:fine) {
  .tool:hover:not(.empty) { transform:translateY(-1px); box-shadow:var(--sz-shadow-md); }
}

.tool .nm {
  display:block; font-size:.75rem; font-weight:800; color:var(--sz-text-2); text-transform:uppercase;
  letter-spacing:.03em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.tool .n {
  position:absolute; top:-6px; inset-inline-end:-6px; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:var(--sz-gold); color:var(--toon-outline-ink); font-size:.75rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
  border:2px solid var(--toon-outline-ink);
}

.tool.empty { opacity:.55; }
.tool.empty .n { background:var(--sz-panel-2); color:var(--sz-text-mut); border-color:var(--toon-outline); }

/* Outil armé (joker attend sa carte) — visible au coin de l'œil */
.tool.armed {
  background:linear-gradient(180deg, var(--sz-gold-2), var(--sz-gold));
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--sz-gold-2), var(--sz-gold));
  color:var(--toon-outline-ink); border-color:var(--toon-outline-ink);
}
.tool.armed .nm { color:rgba(10,15,10,.75); }

.tool:active { transform:translateY(1px); box-shadow:none; }

footer { color:var(--sz-text-2); font-size:.75rem; text-align:center; padding:6px 4px 4px; line-height:1.4; }

/* ---- Boutons ---------------------------------------------------------------- */
button {
  border:0; border-radius:var(--sz-lg); padding:14px 16px; font-size:.9375rem; font-weight:800;
  width:100%; cursor:pointer; margin-top:12px; font-family:inherit;
  transition:transform var(--sz-dur) var(--sz-ease), box-shadow var(--sz-dur) var(--sz-ease);
}

button:disabled { opacity:.5; cursor:not-allowed; }
button:active:not(:disabled) { transform:translateY(2px); }

/* Primaire : relief « bonbon » sticker, contour net + ombre plate */
.btn-primary {
  background:linear-gradient(180deg, var(--sz-gold-2), var(--sz-gold));
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--sz-gold-2), var(--sz-gold));
  color:var(--toon-outline-ink); border:var(--toon-outline-w) solid var(--toon-outline-ink);
  box-shadow:var(--sz-shadow-md);
}
.btn-primary:active:not(:disabled) { box-shadow:0 2px 0 var(--toon-outline-ink); }

/* Secondaire (ghost) */
.btn-ghost {
  background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
  color:var(--sz-text-1); border:var(--toon-outline-w) solid var(--toon-outline); box-shadow:var(--sz-shadow-xs);
}
.btn-ghost:active:not(:disabled) { box-shadow:none; }

/* Récompense (vert prime) */
.btn-rewarded {
  background:linear-gradient(180deg, var(--sz-green-2), var(--sz-green));
  background-image:var(--kawaii-sheen), linear-gradient(180deg, var(--sz-green-2), var(--sz-green));
  color:#04231a; border:var(--toon-outline-w) solid var(--toon-outline-ink); box-shadow:var(--sz-shadow-md);
}
.btn-rewarded:active:not(:disabled) { box-shadow:0 2px 0 var(--toon-outline-ink); }

.btn-rewarded small, .btn-primary small, .btn-ghost small {
  display:block; font-weight:700; opacity:.82; font-size:.75rem; margin-top:2px;
}

.btn-row { display:flex; gap:8px; }
.btn-row button { margin-top:12px; }

/* ---- Overlays --------------------------------------------------------------- */
.overlay {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(4,15,10,.62); z-index:5; padding:14px;
}
.overlay.show { display:flex; animation:fadeIn var(--sz-dur) ease-out; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.card {
  background:var(--sz-panel); background-image:var(--kawaii-sheen), var(--sz-panel);
  border:var(--toon-outline-w) solid var(--toon-outline-ink); border-radius:var(--sz-xl);
  padding:24px 18px; width:min(390px, 94vw); max-height:92vh; overflow-y:auto; text-align:center;
  box-shadow:var(--sz-shadow-modal); animation:slideUp .3s var(--sz-ease);
}

@keyframes slideUp {
  from { transform:translateY(24px) scale(.94); opacity:0; }
  to { transform:translateY(0) scale(1); opacity:1; }
}

.card h2 { margin:0 0 4px; font-size:1.5rem; color:var(--sz-text-1); }
.card .sub { color:var(--sz-text-mut); font-size:.8125rem; margin-bottom:14px; }

.card .big {
  font-size:44px; font-weight:900; color:var(--sz-gold); margin:4px 0 0;
  font-variant-numeric:tabular-nums; animation:scaleInBig .5s var(--sz-ease) .1s both;
}
.card .big svg { width:52px; height:52px; display:block; margin:0 auto; color:var(--sz-danger); }

@keyframes scaleInBig {
  from { transform:scale(.5); opacity:0; } to { transform:scale(1); opacity:1; }
}

.card .gain {
  display:flex; align-items:center; justify-content:center; gap:2px;
  font-size:17px; font-weight:800; color:var(--sz-green-2); min-height:22px;
}
.card .gain svg { width:19px; height:19px; display:inline-block; color:var(--sz-danger); }

/* ---- Accueil --------------------------------------------------------------- */
.logo {
  font-weight:900; letter-spacing:.04em; font-size:2rem; line-height:1.2; color:var(--sz-text-1);
  -webkit-text-stroke:1px var(--toon-outline-ink); text-shadow:0 3px 0 var(--toon-outline-ink);
  animation:fadeInScale .4s var(--sz-ease) .1s both;
}

@keyframes fadeInScale {
  from { transform:scale(.8); opacity:0; } to { transform:scale(1); opacity:1; }
}

.logo b { color:var(--sz-gold); -webkit-text-stroke:0; }

.logo-art { width:150px; height:132px; display:block; margin:2px auto 12px; animation:fadeInScale .4s var(--sz-ease) both; }

.stats { display:flex; gap:8px; margin:14px 0 4px; }

.stat {
  flex:1; background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
  border:var(--toon-outline-w) solid var(--toon-outline); border-radius:var(--sz-lg); padding:8px 6px;
  animation:fadeInScale .4s var(--sz-ease);
}

.stat .k { font-size:.75rem; color:var(--sz-text-2); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.stat .v { font-size:21px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--sz-gold); }

.menu-row { display:flex; gap:8px; margin-top:12px; }
.menu-row button { margin-top:0; padding:10px 6px; font-size:.875rem; }
.menu-row .em { display:flex; align-items:center; justify-content:center; width:19px; height:19px; margin:0 auto 2px; }
.menu-row .em svg { width:100%; height:100%; display:block; }

/* ---- Tutoriel --------------------------------------------------------------- */
.btn-help { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.875rem; }
.btn-help .em { display:inline-flex; width:17px; height:17px; }
.btn-help .em svg { width:100%; height:100%; display:block; }

.card.tuto { width:min(400px, 94vw); }

.tuto-dots { display:flex; gap:6px; justify-content:center; margin-bottom:12px; }

.tdot {
  width:22px; height:6px; border-radius:999px; background:var(--sz-panel-2);
  border:1px solid var(--toon-outline); transition:background var(--sz-dur) ease;
}
.tdot.done { background:var(--sz-green); border-color:var(--toon-outline-ink); }
.tdot.on { background:var(--sz-gold); border-color:var(--toon-outline-ink); }

.tuto-step {
  font-size:.75rem; font-weight:900; letter-spacing:.05em; color:var(--sz-text-mut);
  text-transform:uppercase; margin-bottom:6px; font-variant-numeric:tabular-nums;
}

.tuto-board {
  display:block; width:100%; max-width:300px; height:auto; margin:2px auto 12px;
  border-radius:var(--sz-lg); touch-action:none; border:var(--toon-outline-w) solid var(--toon-outline);
  box-shadow:var(--sz-shadow-sm);
}

.tuto-hud { text-align:start; margin:2px 0 12px; }

.tuto-line {
  display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:6px;
  border-radius:var(--sz-lg); font-size:.875rem; font-weight:800; line-height:1.35;
  background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
  border:1px solid var(--toon-outline);
}
.tuto-line .em { display:inline-flex; width:19px; height:19px; flex:0 0 24px; justify-content:center; }
.tuto-line .em svg { width:100%; height:100%; display:block; }

.tuto-nav { display:flex; gap:8px; }
.tuto-nav .btn-ghost { flex:0 0 34%; }
.tuto-nav .btn-primary { flex:1; }

.tuto-skip {
  margin-top:8px; padding:10px; font-size:.875rem; background:none; border:0;
  color:var(--sz-text-mut); box-shadow:none; cursor:pointer;
}

/* ---- Boutique --------------------------------------------------------------- */
.tabs { display:flex; gap:6px; margin:2px 0 12px; }

.tabs button {
  margin:0; padding:8px 8px; font-size:.75rem; color:var(--sz-text-2); cursor:pointer;
  background:var(--sz-panel-2); border:1px solid var(--toon-outline); border-radius:var(--sz-md);
  transition:background var(--sz-dur) ease, color var(--sz-dur) ease;
}
.tabs button.on { background:var(--sz-gold); color:var(--toon-outline-ink); border-color:var(--toon-outline-ink); }

.row { display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--toon-outline); text-align:start; }

.row .em { display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex:0 0 auto; color:var(--sz-gold); }
.row .em svg { width:100%; height:100%; display:block; }

.row .info { flex:1; font-size:.875rem; font-weight:800; min-width:0; }
.row .info small { display:block; color:var(--sz-text-mut); font-size:.75rem; font-weight:600; margin-top:2px; }

.row .buys { display:flex; flex-direction:column; gap:4px; flex:0 0 auto; }
.row .buys button { margin:0; padding:8px 12px; font-size:.75rem; width:auto; white-space:nowrap; }

/* ---- Paramètres --------------------------------------------------------------- */
.setting {
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0;
  border-top:1px solid var(--toon-outline); font-size:.875rem; font-weight:800; text-align:start;
}
.setting button { margin:0; width:auto; padding:8px 12px; font-size:.75rem; }

.langs { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0 4px; }
.lang {
  margin:0; padding:8px 8px; font-size:.75rem; color:var(--sz-text-1); cursor:pointer;
  background:var(--sz-panel-2); border:1px solid var(--toon-outline); border-radius:var(--sz-md);
  transition:background var(--sz-dur) ease;
}
.lang.on { background:var(--sz-gold); color:var(--toon-outline-ink); border-color:var(--toon-outline-ink); }

/* ---- Bonus Quotidien -------------------------------------------------------- */
.dots { display:flex; gap:4px; justify-content:center; margin:12px 0 6px; flex-wrap:wrap; }

.dot {
  width:34px; height:36px; border-radius:var(--sz-md); background:var(--sz-panel-2); color:var(--sz-text-mut);
  font-size:.75rem; font-weight:900; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--toon-outline); cursor:pointer;
}
.dot.on { background:var(--sz-gold); color:var(--toon-outline-ink); border-color:var(--toon-outline-ink); }
.dot.now { outline:2px solid var(--sz-green); outline-offset:2px; }

/* ---- Notifications (toasts) -------------------------------------------------- */
#toast {
  position:fixed; left:50%; bottom:max(12px, calc(var(--sz-safe-bottom) + 12px));
  transform:translateX(-50%) translateY(10px);
  background:var(--sz-panel-2); background-image:var(--kawaii-sheen), var(--sz-panel-2);
  color:var(--sz-text-1); border:var(--toon-outline-w) solid var(--toon-outline-ink); border-radius:999px;
  padding:10px 18px; font-size:.75rem; font-weight:800; box-shadow:var(--sz-shadow-modal);
  opacity:0; pointer-events:none; transition:opacity var(--sz-dur) ease, transform var(--sz-dur) ease;
  z-index:9; max-width:88vw; text-align:center;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); animation:slideInUp .3s var(--sz-ease); }

@keyframes slideInUp {
  from { transform:translateX(-50%) translateY(20px); opacity:0; }
  to { transform:translateX(-50%) translateY(0); opacity:1; }
}

/* ---- Micro-animations (fx.pop) ----------------------------------------------- */
.pop { animation:pop .34s var(--sz-ease); }

@keyframes pop {
  0% { transform:scale(1); opacity:1; }
  40% { transform:scale(1.18); opacity:.95; }
  100% { transform:scale(1); opacity:1; }
}

/* ---- Responsive mobile (petits écrans) ---------------------------------------- */
@media (max-height:680px) {
  .logo { font-size:1.5rem; }
  .logo-art { width:118px; height:104px; }
  .card { padding:16px 12px; }
  .card .big { font-size:36px; }
  .tuto-board { max-width:240px; }
  .tuto-line { padding:6px 10px; font-size:.75rem; }
}

/* Note discrete : d'ou viennent les pieces (boutique), etat hors-ligne du
   concours. Toujours lue avant de depenser ou de s'etonner d'un classement. */
.note { color:var(--sz-text-mut); font-size:12px; line-height:1.45; margin:12px 0 4px; text-align:start; }