/* MYRVA — style kawaii sticker (standard FACETA, cf BACKLOG.md §PIVOT DESIGN /
   §PROGRAMME AUTONOME, vague 3 : suite alphabétique après `moulz`). Override
   LOCAL à myrva, chargé APRÈS /_kit/kit-design.css (même patron que
   faceta/mahzo/kakz/litz/molz/morz/moulz) : contour épais net, aplats + une
   seule ombre PLATE (zéro flou), reflet kawaii en 2ᵉ couche de `background`.
   Remplace l'ancien glassmorphism premium (backdrop-filter, ombres bokeh
   floutées, glow radial multicouche sur chips/boutons/panneaux/canvas) — le
   fichier d'origine dupliquait en plus tout son bloc `@media (prefers-color-
   scheme:light)` mot pour mot (deux fois la même redéfinition de variables) :
   un seul bloc `html[data-theme="light"]` le remplace, suivant désormais le
   choix explicite du hub plutôt que le seul thème système (cf _kit/theme.js).
   Le PLATEAU (cubes/trous/tampon/fourmis, dessinés en Canvas par src/game.js)
   garde sa propre identité de couleurs vives théme-invariante — comme le
   plateau des autres jeux, c'est le contenu, pas le chrome — seul le HABILLAGE
   (topbar, chips, outils, boutons, cartes d'overlay, toast) reçoit le
   traitement kawaii complet. */

:root {
  /* --- Plateau (jeu pur, théme-invariant) : couleurs des cubes + fond des
     trous, dessinés en Canvas par src/game.js. Ne PAS toucher ici. --- */
  --cube-r: #ff5c7a;
  --cube-g: #5ad07a;
  --cube-y: #ffd23f;
  --cube-p: #ff8fc4;
  --cube-b: #cfe9ff;
  --hole-bg: #10132a;

  --brand-gold: #ffc20e;
  --brand-violet: #8b6bff;
  --brand-violet-dark: #4a3ecf;
  --danger: #ff5c7a;

  --bg-primary: #160c33;
  --bg-secondary: #0d0a20;
  --text-primary: #f4f1fb;
  --text-secondary: #ab9fd0;
  --text-muted: #8b7fb0;
  --border: rgba(255, 255, 255, 0.14);

  /* (C8) panneaux en dégradé 2 tons (matière), pas un aplat plat. */
  --panel: linear-gradient(160deg, #241a4a 0%, #140c30 100%);
  --panel-2: linear-gradient(150deg, #2c2058 0%, #180f38 100%);

  /* Contour : --toon-outline ADAPTATIF (or clair sur fond sombre, encre foncée sur
     fond clair) pour panneaux/chips/cartes ; --toon-outline-ink TOUJOURS foncé, pour
     les éléments posés sur un fond vif (boutons pleins), lisible dans les
     deux thèmes (même leçon FACETA C7 / kakz / litz / morz). */
  --toon-outline: var(--brand-gold);
  --toon-outline-ink: #241a00;
  --toon-outline-w: 2.5px;
  --kawaii-sheen: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 48%);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-full: 999px;
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark light;
}

html[data-theme="light"] {
  --bg-primary: #faf7ff;
  --bg-secondary: #ffffff;
  --text-primary: #201a30;
  --text-secondary: #5c5479;
  --text-muted: #7a7196;
  --border: rgba(28, 21, 48, 0.14);
  --panel: #ffffff;
  --panel-2: #fff6e0;
  --toon-outline: #a8710a;
  --toon-outline-ink: #a8710a;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  accent-color: var(--toon-outline);
}

html, body { margin: 0; height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-primary);
  background:
    radial-gradient(80vw 55vh at 50% -10%, rgba(139, 107, 255, .22), transparent 60%),
    radial-gradient(60vw 45vh at 108% 8%, rgba(255, 194, 14, .10), transparent 60%),
    var(--bg-primary);
  background-attachment: fixed;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
html[data-theme="light"] body {
  background:
    radial-gradient(80vw 55vh at 50% -10%, rgba(139, 107, 255, .10), transparent 60%),
    radial-gradient(60vw 45vh at 108% 8%, rgba(255, 194, 14, .14), transparent 60%),
    var(--bg-primary);
}

#wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: max(12px, 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: 10px;
  min-height: 100vh;
}

@media (max-width: 380px) {
  #wrap {
    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));
    gap: 8px;
  }
}

/* ---- Topbar / brand / scores ----------------------------------------------- */
header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 0;
  gap: 8px;
}

.brand {
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 24px;
  line-height: 1;
  color: var(--text-primary);
}
.brand b { color: var(--toon-outline); }

.scores { display: flex; gap: 12px; margin-inline-start: auto; }
.score { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.score .lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.score .val {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--toon-outline);
}

/* ---- Plateau (Canvas) : cadre sticker, le contenu reste dessiné en JS ------ */
canvas#c {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  touch-action: manipulation;
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: 0 6px 0 var(--toon-outline-ink);
  animation: canvasIn .3s var(--ease-bounce);
  image-rendering: crisp-edges;
}
@keyframes canvasIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

footer {
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  padding-bottom: 6px;
  letter-spacing: 0.3px;
}

/* ---- HUD : miettes + cubes restants + porte-monnaie + accueil ------------- */
.hud { width: 100%; display: flex; gap: 7px; align-items: center; padding: 0 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--toon-outline);
  background: var(--kawaii-sheen), var(--panel-2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: 0 3px 0 var(--toon-outline-ink);
}

.chip .ic, .chip > svg.ic { display: inline-flex; }
.chip .ic svg, .chip > svg.ic { width: 16px; height: 16px; display: block; }

/* Porte-monnaie mutualisé CB-Arcade : Jouer + ◆ Gagner (soldes du HUD). */
.wchip.earn {
  color: var(--brand-violet);
  border-color: color-mix(in srgb, var(--brand-violet) 55%, var(--toon-outline));
}

.chip-btn {
  font-family: inherit;
  width: auto;
  margin-inline-start: auto;
  padding: 8px 12px;
  color: var(--toon-outline);
  background: var(--kawaii-sheen), var(--panel-2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  border-radius: var(--radius-full);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--toon-outline-ink);
  transition: transform .12s var(--ease-out), box-shadow .12s;
}
.chip-btn svg { width: 18px; height: 18px; display: block; }
.chip-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

/* Petit « pop » quand un solde bouge : posé côté JS via la classe .pulse. */
.chip.pulse { animation: chipPop .3s var(--ease-out); }
@keyframes chipPop {
  0% { transform: scale(.95); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ---- Outils d'aide achetables (crédits « Jouer » du porte-monnaie mutualisé) --- */
.tools { width: 100%; display: flex; gap: 7px; padding: 0 4px; }

.tool-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  padding: 7px 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--toon-outline);
  background: var(--panel-2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--toon-outline-ink);
  transition: transform .12s var(--ease-out), box-shadow .12s;
}
.tool-btn .ic svg { width: 16px; height: 16px; display: block; }
.tool-btn .cost { font-variant-numeric: tabular-nums; }
.tool-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toon-outline-ink); }
.tool-btn:focus-visible { outline: 2px solid var(--toon-outline); outline-offset: 2px; }

/* Petite icône inline, mêlée à du texte (ex. « Annuler · 10 »). */
.ic-inline { width: 14px; height: 14px; display: inline-block; vertical-align: -3px; margin-inline-end: 2px; }

/* ---- Overlays (écrans plein cadre) ----------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 6, 18, .72);
  z-index: 5;
  padding: 14px;
  animation: overlayIn .18s var(--ease-out);
  overscroll-behavior: contain;
}
html[data-theme="light"] .overlay { background: rgba(32, 26, 48, .45); }
.overlay.show { display: flex; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.overlay .card {
  background: var(--kawaii-sheen), var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  width: min(380px, 92vw);
  max-height: 94vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  box-shadow: 0 8px 0 var(--toon-outline-ink);
  animation: cardIn .22s var(--ease-bounce);
}
@keyframes cardIn { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }

.overlay .card.shake { animation: cardIn .22s var(--ease-bounce), shake .32s ease .22s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.overlay h2 { margin: 0 0 12px; font-size: 26px; font-weight: 800; color: var(--text-primary); }

.overlay .big {
  font-size: 48px;
  font-weight: 900;
  color: var(--toon-outline);
  margin: 16px 0 6px;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: bigIn .3s var(--ease-bounce);
}
@keyframes bigIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

.overlay .sub { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; line-height: 1.4; }

/* ---- Boutons ---------------------------------------------------------------- */
button {
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 800;
  width: 100%;
  cursor: pointer;
  margin-top: 10px;
  font-family: inherit;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  position: relative;
  overflow: hidden;
  transition: transform .12s var(--ease-out), box-shadow .12s;
  touch-action: manipulation;
}

button::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--kawaii-sheen);
  pointer-events: none;
}

button:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
button:focus-visible { outline: 2px solid var(--toon-outline); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(180deg, #ffd76b, var(--brand-gold));
  color: #241a00;
  box-shadow: 0 5px 0 var(--toon-outline-ink);
}
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

.btn-ghost {
  background: var(--panel-2);
  color: var(--toon-outline);
  border-color: var(--toon-outline);
  box-shadow: 0 4px 0 var(--toon-outline-ink);
}
.btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

.btn-rewarded {
  background: linear-gradient(180deg, #a494ff, var(--brand-violet));
  color: #fff;
  border-color: var(--brand-violet-dark);
  box-shadow: 0 5px 0 var(--brand-violet-dark);
}
.btn-rewarded:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--brand-violet-dark); }
.btn-rewarded small { display: block; font-weight: 600; opacity: .85; font-size: 11px; margin-top: 2px; }

/* ---- Accueil ---------------------------------------------------------------- */
.overlay .card.home { padding: 22px 20px 18px; }

.logo {
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 38px;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.logo b { color: var(--toon-outline); }

.stats { display: flex; gap: 8px; margin-bottom: 12px; }
.stat {
  flex: 1;
  background: var(--panel-2);
  border: var(--toon-outline-w) solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 8px;
}
.stat .lbl {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 4px;
}
.stat .val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--toon-outline); }

/* ---- Fin de niveau ----------------------------------------------------------- */
.badge {
  display: inline-block;
  background: linear-gradient(180deg, #ffd76b, var(--brand-gold));
  color: #241a00;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding: 7px 16px;
  margin-bottom: 8px;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  box-shadow: 0 3px 0 var(--toon-outline-ink);
  animation: badgePop .3s var(--ease-bounce);
}
@keyframes badgePop {
  0% { opacity: 0; transform: scale(.4) translateY(14px); }
  100% { opacity: 1; transform: none; }
}

canvas.reveal {
  width: 190px;
  height: 190px;
  display: block;
  margin: 12px auto 4px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  background: var(--panel-2);
  border: var(--toon-outline-w) solid var(--toon-outline);
  border-radius: var(--radius-lg);
  box-shadow: 0 5px 0 var(--toon-outline-ink);
  animation: revealIn .3s var(--ease-bounce);
}
@keyframes revealIn { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }

/* ---- « Presque ! » (tampon saturé) ------------------------------------------- */
.near {
  background: var(--panel-2);
  border: var(--toon-outline-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* ---- Confetti (perfect-clear, généré par game.js) — purement décoratif ------ */
.confetti-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.confetti-piece {
  position: absolute;
  top: -12px;
  width: var(--cs, 7px);
  height: var(--cs, 7px);
  background: var(--cc, var(--toon-outline));
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall var(--cd, 1.1s) var(--ease-out) var(--ct, 0s) forwards;
}
@keyframes confetti-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx, 0px), 60vh) rotate(var(--cr, 360deg)); }
}

/* ---- Toast ------------------------------------------------------------------- */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  max-width: 88vw;
  background: var(--panel-2);
  color: var(--text-primary);
  border: var(--toon-outline-w) solid var(--toon-outline);
  border-radius: var(--radius-full);
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  z-index: 9;
  box-shadow: 0 4px 0 var(--toon-outline-ink);
  animation: toastIn .18s var(--ease-out);
  letter-spacing: 0.3px;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- Accessibilité : contraste renforcé -------------------------------------- */
@media (prefers-contrast: more) {
  :root { --border: rgba(255, 255, 255, 0.32); }
  button:focus-visible { outline: 3px solid var(--toon-outline) !important; outline-offset: 3px; }
  .chip, .chip-btn, button, canvas.reveal { border-width: 3px; }
  .overlay .card { border-width: 3px; }
}

/* ---- Accessibilité : animations réduites ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- RTL (arabe) -------------------------------------------------------------- */
html[dir="rtl"] .chip-btn { margin: 0 auto 0 0; }