/* ============================================================================
   PIXLO — style kawaii cartoon B (standard FACETA, cf BACKLOG.md §PIVOT DESIGN
   / §PROGRAMME AUTONOME, vague 3 : 39/66, suite alphabétique après `pipz`).
   Remplace l'ancien "CB-Arcade Premium" (glassmorphism doré, rgba blanches +
   backdrop-filter partout, @media prefers-color-scheme seul) par des aplats
   OPAQUES, contour épais net (--toon-outline), une seule ombre PLATE sans flou
   (--shadow-flat, `0 Npx 0 var(--toon-outline-ink)`), reflet kawaii en 2ᵉ couche de
   background (--kawaii-sheen). Thème clair/sombre = contrat UNIQUE html[data-theme]
   (posé par /_kit/theme.js d'après le choix du hub) ; plus de @media seul, qui
   ignorait un choix clair/sombre explicite fait sur le hub.
   Identité du jeu conservée : or (--accent) pour le chrome, reflété dans les
   cases gagnées/le logo — le tapis/l'encre du PLATEAU (canvas) restent pilotés
   par les cosmétiques (src/economy-config.js COSMETICS), inchangés ici.
   ========================================================================== */
:root {
  --accent: #e8b93a; --accent2: #c99418; --accent-ink: #1a1205;
  color-scheme: dark;
  --bg: #10152a; --glow: #1b2450;
  --fg: #eef2fb; --muted: #8a93b8;
  --ok: #3ddb8e; --bad: #ff6b6b; --cool: #6fa0ff;

  /* Sticker plat opaque : --panel/--panel-2 = dégradé 2 tons "matière" pour
     cartes/chips/overlays ; --field-bg = case vide (pas de panneau). */
  --panel: linear-gradient(160deg, #1d2550, #121735);
  --panel-2: linear-gradient(155deg, #242d5c, #161b3a);
  --field-bg: rgba(255, 255, 255, .07);

  /* --toon-outline = contour épais ADAPTATIF (accent clair sur fond sombre, encre
     foncée sur fond clair) ; --toon-outline-ink = contour TOUJOURS foncé, posé sur
     des éléments déjà vifs (boutons pleins), lisible dans les deux thèmes. */
  --toon-outline: var(--accent); --toon-outline-ink: #0a0d1f; --toon-outline-w: 2.5px;
  --kawaii-sheen: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 46%);

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px;
  --shadow-flat: 0 4px 0 var(--toon-outline-ink); --shadow-flat-sm: 0 3px 0 var(--toon-outline-ink); --shadow-flat-lg: 0 6px 0 var(--toon-outline-ink);
  --dur-fast: .12s; --dur-normal: .18s; --dur-slow: .3s;
  --ease: cubic-bezier(.4, 0, .2, 1); --ease-bounce: cubic-bezier(.2, .9, .3, 1.15);
}
html[data-theme="light"] {
  color-scheme: light;
  --accent: #c9931a; --accent2: #a8780f; --accent-ink: #1a1205;
  --bg: #f7f9ff; --glow: #ffffff;
  --fg: #141a2c; --muted: #5c6690;
  --ok: #148a56; --bad: #d6335a; --cool: #2f6fe0;

  --panel: #ffffff; --panel-2: #eef1fb;
  --field-bg: rgba(20, 30, 70, .055);

  --toon-outline: #16244f; --toon-outline-ink: #16244f;
  --kawaii-sheen: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 46%);
}

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

html, body {
  margin: 0; height: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, var(--glow) 0%, var(--bg) 60%);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  overscroll-behavior: none;
  touch-action: none;
}

#wrap {
  position: relative; z-index: 1; 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: 8px 4px 0; gap: 8px;
}

.brand {
  font-weight: 800; letter-spacing: 0.02em;
  font-size: 22px; line-height: 1.2;
}

.brand b { color: var(--accent); }

.icon-btn {
  width: 44px; height: 44px; padding: 0; margin: 0; border-radius: var(--radius-md); font-size: 22px;
  line-height: 1; background: var(--panel-2); color: var(--fg);
  border: var(--toon-outline-w) solid var(--toon-outline); transition: transform var(--dur-normal) var(--ease), filter var(--dur-normal) var(--ease);
  will-change: transform, filter; flex-shrink: 0; box-shadow: var(--shadow-flat);
}

.icon-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
.icon-btn:active { transform: translateY(2px) scale(0.94); box-shadow: var(--shadow-flat-sm); }
.hud { display: flex; gap: 8px; }

/* Porte-monnaie mutualisé CB-Arcade (2 soldes : Jouer + Gagner ◆, voir _kit/wallet.js) */
.wallet-hud { display: flex; gap: 10px; justify-content: center; margin: 8px auto 0; }
.wchip {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em;
  color: var(--fg);
  background: var(--panel-2);
  border: 2px solid var(--toon-outline);
  border-radius: var(--radius-md); padding: 8px 14px; white-space: nowrap;
  box-shadow: var(--shadow-flat-sm);
  transition: transform var(--dur-normal) var(--ease);
}
.wchip .ic { font-size: 0.9375rem; line-height: 1; display: flex; }
.wchip .ic svg { width: 1em; height: 1em; }
.wchip.earn { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent), var(--accent2)); border-color: var(--toon-outline-ink); }

.chip {
  display: flex; align-items: center; gap: 6px; width: auto; margin: 0;
  padding: 8px 14px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--fg);
  background: var(--panel-2); border: 2px solid var(--toon-outline);
  transition: transform var(--dur-normal) var(--ease);
  will-change: transform; box-shadow: var(--shadow-flat-sm);
}

.chip:hover { filter: brightness(1.06); transform: translateY(-2px); }
.chip:active { transform: translateY(2px) scale(0.94); box-shadow: none; }

.chip .ico { font-size: 13px; display: flex; }
.chip .ico svg { width: 1em; height: 1em; }
.chip-lives .ico { color: var(--bad); }
.chip-coins .ico { color: var(--accent); }
.chip .plus { color: var(--accent); margin-inline-start: 2px; font-weight: 800; }
.chip small { color: var(--muted); font-size: 11px; font-weight: 600; margin-inline-start: 3px; }

.pop { animation: pop 0.45s var(--ease-bounce); }
@keyframes pop { 0% { transform: scale(0.75) rotate(-8deg); opacity: 0; } 50% { transform: scale(1.18) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

@keyframes popBounce { 0% { transform: scale(0.82); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes rise { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes slideIn { 0% { opacity: 0; transform: translateX(-8px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slideInUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

/* ---- Barre d'état de la partie -------------------------------------------- */
.bar { width: 100%; display: flex; gap: 8px; }

.pill {
  flex: 1; text-align: center; padding: 10px 12px; border-radius: var(--radius-md); font-size: 13px;
  font-weight: 700; color: var(--muted); background: var(--field-bg);
  border: 2px solid var(--toon-outline); font-variant-numeric: tabular-nums;
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.pill:hover { transform: translateY(-1px); }

.pill.hot {
  color: var(--bad);
  border-color: var(--bad);
  animation: pulse 1.2s ease-in-out infinite;
}

/* ---- Plateau --------------------------------------------------------------- */
canvas#c {
  width: 100%; height: auto; display: block; border-radius: var(--radius-lg); touch-action: none;
  background: var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline);
  box-shadow: var(--shadow-flat);
  margin-block: 0 auto; will-change: transform;
  transition: transform var(--dur-normal) var(--ease);
}

canvas#c.shake { animation: shake 0.3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

/* ---- Consigne permanente --------------------------------------------------- */
.goal {
  width: 100%; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.45;
  color: var(--muted); padding: 0 6px;
}

/* ---- Modes de pinceau --- */
.modes { width: 100%; display: flex; gap: 8px; }

.mode {
  flex: 1; width: auto; margin: 0; padding: 12px 10px; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2); color: var(--muted); border: 2px solid var(--toon-outline);
  border-radius: var(--radius-md); transition: transform var(--dur-normal) var(--ease);
  will-change: transform; box-shadow: var(--shadow-flat-sm);
}

.mode:hover:not(.on) { transform: translateY(-2px); }

.mode .ico { font-size: 16px; }
.mode .lbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; gap: 2px; }
.mode .lbl small {
  font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mode.m-fill.on {
  color: var(--accent-ink); border-color: var(--toon-outline-ink);
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: var(--shadow-flat);
  animation: popBounce 0.35s var(--ease-bounce);
}

.mode.m-fill.on .lbl small { color: rgba(10, 15, 34, 0.75); }

.mode.m-mark.on {
  color: #fff; border-color: var(--toon-outline-ink);
  background: linear-gradient(180deg, #8bb3ff, #5b86e6);
  box-shadow: var(--shadow-flat);
  animation: popBounce 0.35s var(--ease-bounce);
}

.mode.m-mark.on .lbl small { color: rgba(255, 255, 255, 0.85); }
.mode:active { transform: translateY(2px) scale(0.97); box-shadow: none; }

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

.tool {
  position: relative; flex: 1; width: auto; margin: 0; padding: 11px 6px 10px;
  background: var(--panel-2); border: 2px solid var(--toon-outline);
  border-radius: var(--radius-md); color: var(--fg); font-family: inherit; line-height: 1.1;
  box-shadow: var(--shadow-flat-sm);
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
  display: flex; flex-direction: column; align-items: center;
}

.tool svg { width: 22px; height: 22px; display: block; }

.tool:active { transform: translateY(2px) scale(0.96); box-shadow: none; }
.tool:not(.empty):hover { transform: translateY(-2px); }

.tool .nm {
  display: block; font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.02em; margin-top: 3px;
}

.tool .n {
  position: absolute; top: -8px; inset-inline-end: -6px; min-width: 26px; height: 26px;
  border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--accent-ink); border: 2px solid var(--toon-outline-ink);
  font-size: 12px; font-weight: 900; display: flex; align-items: center;
  justify-content: center; padding: 0 6px; font-variant-numeric: tabular-nums;
  animation: slideInUp 0.3s var(--ease-bounce);
}

.tool.empty { opacity: 0.6; }
.tool.empty .n { background: var(--panel); color: var(--muted); border-color: var(--toon-outline); }
.tool.armed {
  border-color: var(--accent);
  box-shadow: var(--shadow-flat-sm), 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.tool.armed .nm { color: var(--accent); font-weight: 800; }

/* ---- Boutons --------------------------------------------------------------- */
/* L'epaisseur est simulee par une ombre dure sous le bouton : au clic il
   descend et l'ombre se reduit — c'est ce qui donne le « clac » tactile. */
button {
  border: var(--toon-outline-w) solid var(--toon-outline-ink); border-radius: 12px; padding: 14px 16px; font-size: 15px; font-weight: 700;
  width: 100%; cursor: pointer; margin-top: 8px; font-family: inherit;
  transition: transform var(--dur-normal) var(--ease), filter var(--dur-normal) var(--ease);
  will-change: transform;
}

button:active { transform: translateY(2px) scale(0.97); }
button:disabled { opacity: 0.48; cursor: default; transform: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: var(--accent-ink);
  box-shadow: var(--shadow-flat);
}

.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-flat-sm); }

.btn-ghost {
  background: var(--panel-2); color: var(--fg);
  border: 2px solid var(--toon-outline);
  box-shadow: var(--shadow-flat-sm);
}

.btn-ghost:hover { transform: translateY(-1px); }

.btn-rewarded {
  background: linear-gradient(135deg, #7ba4ff, #6a56d8); color: #fff;
  box-shadow: var(--shadow-flat);
}

.btn-rewarded:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-rewarded:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-flat-sm); }

.btn-share {
  background: linear-gradient(135deg, #38e08b, #1fa76e); color: #062015;
  box-shadow: var(--shadow-flat);
}

.btn-share:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-share:active { transform: translateY(2px) scale(0.97); box-shadow: var(--shadow-flat-sm); }

.btn-share.hot { animation: glow 1.2s ease-in-out infinite; }

.btn-how {
  background: transparent; color: var(--accent); border: 2px dashed var(--accent);
  font-size: 13px; padding: 9px 12px; margin-top: 6px;
  transition: transform var(--dur-normal) var(--ease);
}

.btn-how:hover { transform: translateY(-1px); }

/* ---- Overlays -------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(6, 9, 14, 0.62); z-index: 5;
  padding: 16px; overflow-y: auto;
}

.overlay.show { display: flex; animation: fade var(--dur-normal) var(--ease); }
.overlay.show .card { animation: rise 0.4s var(--ease-bounce); }

.overlay .card {
  background: var(--panel);
  border: var(--toon-outline-w) solid var(--toon-outline); border-radius: var(--radius-xl); padding: 28px 24px;
  width: min(420px, 94vw); text-align: center; margin: auto;
  box-shadow: var(--shadow-flat);
  will-change: transform;
  transition: transform var(--dur-normal) var(--ease);
}

.overlay h2 { margin: 0; font-size: 24px; font-weight: 700; }
.overlay .big {
  font-size: 38px; font-weight: 800; color: var(--accent); margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
}

.overlay .sub { color: var(--muted); font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.muted { color: var(--muted); font-size: 12px; margin-top: 10px; }

.badge {
  display: inline-block; width: auto; margin: 0 0 12px; padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--accent-ink); font-size: 12px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid var(--toon-outline-ink); box-shadow: var(--shadow-flat-sm);
  animation: victory-pop 0.6s var(--ease-bounce);
}

/* ---- Accueil --------------------------------------------------------------- */
.logo {
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 48px;
  line-height: 1;
  margin: 12px 0 8px;
  animation: rise 0.6s var(--ease-bounce);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo b { color: var(--accent); }

.mosaic {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
  margin: 12px auto 16px; max-width: 220px;
}

.mosaic i {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--field-bg);
  transition: transform var(--dur-normal) var(--ease);
  will-change: transform;
  cursor: pointer;
  border: 2px solid var(--toon-outline);
}

.mosaic i:hover { transform: translateY(-2px); }

.mosaic i.on {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-color: var(--toon-outline-ink);
  animation: popBounce 0.3s var(--ease-bounce);
}

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

.stat {
  flex: 1;
  background: var(--field-bg);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  border: 2px solid var(--toon-outline);
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.stat:hover { transform: translateY(-2px); }

.stat .lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em;
  font-weight: 700; }
.stat .val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }

.row4 { display: flex; gap: 8px; margin-top: 12px; }

.row4 button {
  flex: 1; width: auto; margin: 0; padding: 10px 2px; font-size: 11px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 12px;
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.row4 button:hover { transform: translateY(-2px); }
.row4 button:active { transform: translateY(2px) scale(0.95); }

.row4 .ico { font-size: 18px; }

/* ---- Liste des puzzles ----------------------------------------------------- */
.grid-levels {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0 8px;
  max-height: 56vh; overflow-y: auto;
}

.lvl {
  width: auto; margin: 0; padding: 12px 4px 10px; border-radius: var(--radius-md); font-size: 18px;
  font-weight: 800; background: var(--field-bg); border: 2px solid var(--toon-outline);
  color: var(--fg); font-variant-numeric: tabular-nums; transition: transform var(--dur-normal) var(--ease);
  will-change: transform;
}

.lvl:hover:not(.locked) { transform: translateY(-3px); }

.lvl:active { transform: translateY(-1px) scale(0.95); }

.lvl .sz { display: block; font-size: 9px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.lvl.done { border-color: var(--ok); color: var(--ok); }
.lvl.locked { opacity: 0.5; }
.lvl.next { border-color: var(--accent); color: var(--accent); }

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

.tab {
  flex: 1; width: auto; margin: 0; padding: 10px 4px; font-size: 13px; border-radius: var(--radius-md);
  background: var(--field-bg); color: var(--muted); border: 2px solid var(--toon-outline);
  font-weight: 700; transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.tab:hover:not(.on) { transform: translateY(-1px); }

.tab.on {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-color: var(--toon-outline-ink);
  animation: popBounce 0.3s var(--ease-bounce);
}
.offer-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; text-align: start;
  border-top: 2px solid var(--field-bg);
  will-change: transform;
  transition: transform var(--dur-normal) var(--ease);
}

.offer-row .ico { font-size: 24px; width: 32px; flex: none; display: flex; align-items: center; justify-content: center; }
.offer-row .ico svg { width: 1em; height: 1em; }
.offer-info { flex: 1; font-size: 14px; font-weight: 700; }
.offer-info small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; margin-top: 3px; }
.offer-btns { display: flex; gap: 6px; }

.offer-btns button {
  width: auto; margin: 0; padding: 8px 10px; font-size: 12px; border-radius: 10px; white-space: nowrap;
}

/* ---- Offres et mentions --------------------------------------------------- */
.offer-row.hero {
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 12px 12px;
  background: var(--field-bg);
  margin-top: 10px;
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.offer-row.hero:hover { transform: translateY(-1px); }

.offer-tag {
  display: inline-block; width: auto; margin: 0 0 4px; padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
}

.offer-info .val { display: block; color: var(--ok); font-size: 11px; font-weight: 800; margin-top: 2px; }
.offer-info .was { display: block; color: var(--muted); font-size: 11px; font-weight: 600; margin-top: 2px; }

.fine { color: var(--muted); font-size: 11px; line-height: 1.5; margin-top: 10px; text-align: start; }

/* Cosmétiques ---------------------------------------------------------------- */
.theme-slot { margin-top: 14px; text-align: start; }
.theme-slot h3 { margin: 0; font-size: 13px; font-weight: 800; }
.theme-slot small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 8px; }

.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.theme-card {
  width: auto; margin: 0; padding: 8px 6px 9px; border-radius: var(--radius-md); font-size: 11px;
  font-weight: 700; background: var(--field-bg); border: 2px solid var(--toon-outline);
  color: var(--fg); display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.theme-card:hover:not(.locked) { transform: translateY(-2px); }

.theme-card.on { border-color: var(--accent); }
.theme-card.locked { opacity: 0.6; }
.theme-card .price { font-size: 10px; font-weight: 700; color: var(--muted); }
.theme-card.on .price { color: var(--accent); }

.swatch {
  width: 100%; aspect-ratio: 2 / 1; border-radius: var(--radius-sm); display: flex; gap: 3px;
  align-items: center; justify-content: center; border: 1px solid var(--toon-outline);
}

.swatch i { width: 22%; aspect-ratio: 1; border-radius: 4px; }

/* ---- Pass ------------------------------------------------------------------ */
.pass-head { margin-bottom: 8px; }

.pass-track {
  display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto;
  text-align: start;
}

.pass-row { display: flex; align-items: center; gap: 8px; }

.pass-at {
  width: 46px; flex: none; font-size: 11px; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center;
}

.pass-row.reached .pass-at { color: var(--accent); font-weight: 900; }

.pass-cell {
  flex: 1; width: auto; margin: 0; padding: 8px 10px; border-radius: var(--radius-md); font-size: 12px;
  font-weight: 700; background: var(--field-bg); color: var(--fg);
  border: 2px solid var(--toon-outline); text-align: start;
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.pass-cell:hover:not(:disabled):not(.claimed):not(.locked) { transform: translateX(2px); }

.pass-cell .who { display: block; font-size: 9px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
.pass-cell.ready { border-color: var(--accent); color: var(--accent); }
.pass-cell.claimed { opacity: 0.5; }
.pass-cell.locked { opacity: 0.6; }
.pass-cell:disabled { transform: none; }

/* ---- Champs et inputs ---------------------------------------------------- */
.field { display: block; text-align: start; margin: 12px 0; font-size: 12px; color: var(--muted);
  font-weight: 700; }
.field span { display: block; margin-bottom: 6px; }

input, select {
  width: 100%; padding: 14px 16px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700;
  background: var(--field-bg); color: var(--fg); border: 2px solid var(--toon-outline);
  font-family: inherit; transition: border-color var(--dur-normal) var(--ease);
}

input:hover, select:hover { border-color: var(--accent); }

input:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

select { appearance: none; }

.split { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.split input { flex: 1; }
.split button { width: auto; margin: 0; white-space: nowrap; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 2px solid var(--field-bg); font-size: 14px; font-weight: 700;
}

.toggle {
  width: auto; margin: 0; padding: 10px 20px; font-size: 13px; border-radius: var(--radius-full);
  background: var(--field-bg); color: var(--muted); border: 2px solid var(--toon-outline);
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.toggle:hover:not(.on) { transform: translateY(-1px); }

.toggle.on {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: var(--accent-ink);
  border-color: var(--toon-outline-ink);
  animation: popBounce 0.35s var(--ease-bounce);
}

/* ---- Classement ------------------------------------------------------------ */
.group-box { background: var(--field-bg); border-radius: var(--radius-md); padding: 12px 13px;
  text-align: start; font-size: 13px; font-weight: 700; margin-bottom: 6px;
  border: 2px solid var(--toon-outline);
}
.group-box .code { color: var(--accent); letter-spacing: 2px; font-size: 18px; font-weight: 900; }
.group-box .row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.group-box button { width: auto; margin: 0; padding: 7px 11px; font-size: 11px; border-radius: 10px; }

/* ---- Quick-chat ------------------------------------------------------------ */
.chat { margin: 12px 0 6px; text-align: start; }
.chat-title { font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.chat-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 22vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; }

.bubble { align-self: flex-start; max-width: 88%; padding: 7px 11px; border-radius: 14px 14px 14px 4px;
  background: var(--field-bg); font-size: 12px; line-height: 1.4;
  border: 2px solid var(--toon-outline);
}
.bubble.me {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: var(--accent-ink); border-color: var(--toon-outline-ink);
}
.bubble.pending { opacity: 0.6; }
.bubble .who { display: block; font-size: 10px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.bubble.me .who { color: var(--accent-ink); opacity: 0.75; }
.bubble .msg { font-weight: 700; }

.chat-list .empty { align-self: center; color: var(--muted); font-size: 12px; padding: 6px; }
.chat-pad { display: flex; flex-wrap: wrap; gap: 6px; }

.quick {
  width: auto; margin: 0; padding: 8px 11px; font-size: 11px; font-weight: 700;
  border-radius: var(--radius-md); background: var(--field-bg); color: var(--fg);
  border: 2px solid var(--toon-outline); transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.quick:hover { transform: translateY(-1px); }

.quick:active { transform: scale(0.94); }
.quick.emote { font-size: 16px; padding: 6px 10px; }

/* ---- Gain quotidien -------------------------------------------------------- */
.dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 8px; flex-wrap: wrap; }

.dot {
  width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--field-bg);
  color: var(--muted); font-size: 12px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; border: 2px solid var(--toon-outline);
  transition: transform var(--dur-normal) var(--ease); will-change: transform;
}

.dot:hover:not(.on):not(.today) { transform: translateY(-2px); }

.dot.on {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: var(--accent-ink);
  border-color: var(--toon-outline-ink);
  animation: popBounce 0.3s var(--ease-bounce);
}

.dot.today {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  animation: glow 1.2s infinite;
}

/* ---- Victoire / échec ------------------------------------------------------ */
canvas.reveal {
  width: 190px; height: 190px; display: block; margin: 10px auto 14px;
  border-radius: var(--radius-lg); image-rendering: pixelated;
  box-shadow: var(--shadow-flat);
  animation: reveal 0.8s var(--ease-bounce);
  border: var(--toon-outline-w) solid var(--accent);
}

@keyframes reveal { 0% { opacity: 0; transform: scale(0.4) rotate(-18deg); } 50% { transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.fail-mark {
  font-size: 52px;
  line-height: 1;
  color: var(--bad);
  margin: 6px 0 10px;
  animation: rise 0.5s var(--ease-bounce);
  display: inline-block;
}

.hearts {
  font-size: 36px;
  letter-spacing: 6px;
  color: var(--field-bg);
  margin: 4px 0 10px;
  animation: pulse 1.2s ease-in-out infinite;
}

.hearts b { color: var(--bad); }

@keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

@keyframes victory-pop { 0% { transform: scale(0.75) rotate(-12deg); opacity: 0; } 50% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1.04) rotate(0); opacity: 1; } }

.tool-ico {
  width: 48px; height: 48px; margin: 4px auto 8px;
  animation: pop 0.4s var(--ease-bounce);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.tool-ico svg { width: 100%; height: 100%; }

/* ---- Tutoriel ------------------------------------------------------------- */
.icon-help { font-size: 20px; font-weight: 800; color: var(--accent); }

#tutorial { z-index: 7; }
.card.tuto { width: min(420px, 94vw); }

.tuto-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.tuto-dots b { width: 20px; height: 4px; border-radius: 2px; background: var(--field-bg);
  transition: background 0.18s ease; }
.tuto-dots b.on { background: var(--accent); }

.tuto-demo, .tuto-grid { direction: ltr; }
.tuto-demo { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 16px; }

.tuto-demo .clue {
  font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

.tuto-demo .strip { display: flex; gap: 4px; }

.tuto-grid {
  display: grid; gap: 4px; justify-content: center; margin: 8px auto 14px; width: max-content;
}

.tuto-grid .corner { min-width: 36px; }

.tuto-grid .clue {
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}

.tuto-grid .clue.row { justify-content: flex-end; padding-inline-end: 6px; gap: 4px; min-width: 36px; }
.tuto-grid .clue.col { flex-direction: column; justify-content: flex-end; line-height: 1.05;
  padding-bottom: 3px; min-height: 32px; }
.tuto-grid .clue.done { color: var(--ok); font-weight: 900; }

.tuto-grid .cell, .tuto-demo .strip i {
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--field-bg);
  border: 2px solid var(--toon-outline); margin: 0; padding: 0; display: flex;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
  color: var(--muted); font-family: inherit; transition: transform var(--dur-normal) var(--ease);
  will-change: transform;
}

.tuto-grid .cell.fill, .tuto-demo .strip i.on {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color: var(--accent-ink);
  border-color: var(--toon-outline-ink);
  animation: popBounce 0.35s var(--ease-bounce);
}

.tuto-grid .cell.mark { color: var(--cool); }
.tuto-grid .cell.target {
  outline: 2px solid var(--accent); outline-offset: 2px; animation: glow 1.1s ease-in-out infinite;
}

.tuto-modes { margin-bottom: 6px; }

/* ---- Toast ----------------------------------------------------------------- */
#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 28px);
  transform: translate(-50%, 24px); z-index: 20; opacity: 0; pointer-events: none;
  background: var(--panel); border: var(--toon-outline-w) solid var(--toon-outline);
  color: var(--fg); padding: 14px 22px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow-flat);
  transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
  max-width: 86vw; text-align: center; will-change: opacity, transform;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  animation: slideInUp 0.4s var(--ease-bounce);
}

/* ---- RTL ------------------------------------------------------------------- */
[dir="rtl"] .brand { letter-spacing: 0; }
[dir="rtl"] #btn-quit { transform: scaleX(-1); }

/* ---- Mobile optimizations --------------------------------------------------- */
@media (max-width: 480px) {
  #wrap { gap: 6px; }
  header { padding: 6px 2px 0; gap: 6px; }
  .brand { font-size: 20px; }
  .icon-btn, .chip { transform: translateZ(0); }
  .overlay .card { padding: 20px 16px; }
  .overlay h2 { font-size: 22px; }
  .overlay .big { font-size: 32px; }
}

/* ---- Préférences utilisateur ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}