/* ============================================================================
   CHESZ — style kawaii sticker (standard FACETA, cf BACKLOG.md §PIVOT DESIGN /
   §PROGRAMME AUTONOME, vague 3 : 8/66, suite alphabétique après `bublo`).
   Override LOCAL à chesz, chargé APRÈS /_kit/kit-design.css (même patron que
   faceta/triplo/mazz/melz/atouz/awalo/boxz/bublo) : contour épais net, aplats +
   une seule ombre plate (zéro flou), reflet kawaii en 2ᵉ couche de `background`,
   formes rondes. Remplace l'ancien glassmorphism premium (backdrop-filter sur
   tout, glows flous or/vert multi-couches sur quasi chaque élément). Identité
   du jeu conservée : bois chaud (plateau/chrome), or = accent principal,
   vert = accent secondaire (ligne, sélection, bouton "avec un ami").
   ============================================================================ */

:root {
  /* --- PALETTE CHESZ --- */
  --dark: #241a10;
  --light: #fbf5e8;
  --gold: #ffc94d;
  --gold-dark: #c98a1f;
  --green: #38e08b;
  --danger: #ff5b57;

  /* Plateau d'échecs : couleurs harmonisées (WCAG AA+). */
  --chess-light: #d4c5a0;
  --chess-dark: #7a6f56;
  --chess-sel: rgba(56, 224, 139, .5);
  --chess-last: rgba(255, 201, 77, .5);
  --chess-check: rgba(255, 91, 87, .55);
  --chess-hint: rgba(255, 193, 7, .5);
  --chess-dot: var(--gold-dark);

  /* (C8) panneaux en dégradé chaud 2 tons (matière), pas un aplat plat. */
  --panel: linear-gradient(160deg, #3c2b19 0%, #241a10 100%);
  --panel-2: linear-gradient(150deg, #493420 0%, #2c2013 100%);
  --field: linear-gradient(165deg, #2c2013 0%, #1a120a 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 déjà lisibles dans les deux thèmes (même
     leçon FACETA C7, déjà appliquée boxz/awalo/bublo). */
  --toon-outline: var(--gold);
  --toon-outline-ink: #1a120a;
  --toon-outline-w: 2.5px;
  --kawaii-sheen: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 48%);

  --border: var(--toon-outline-w) solid var(--toon-outline);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 4px 0 var(--toon-outline-ink);
  --shadow-sm: 0 3px 0 var(--toon-outline-ink);
  --shadow-lg: 0 6px 0 var(--toon-outline-ink);

  color-scheme: dark light;
}

html[data-theme="light"] {
  --toon-outline: #6a4a1e;
  --toon-outline-ink: #6a4a1e;
  --panel: #fffaf0;
  --panel-2: #fbeed2;
  --field: #f6e6c4;
  --chess-light: #f5e8d0;
  --chess-dark: #c4b59d;
}

/* --- RESET & STYLES GLOBAUX --- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  background: var(--dark);
  color: var(--cb-text-primary, #f0f4fa);
  font-family: var(--cb-font-family);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: max(calc(8px + var(--cb-safe-top, 0)), 8px) 10px max(calc(24px + var(--cb-safe-bottom, 0)), 10px) 10px;
  gap: 10px;
  -webkit-user-select: none;
  user-select: none;
  overflow-x: hidden;
  font-weight: 400;
  line-height: 1.35;
  transition: background var(--cb-duration-normal) var(--cb-easing-ease-out);
}

html[data-theme="light"] body {
  background: var(--light);
  color: var(--toon-outline-ink);
}

/* --- TOPBAR & BRAND --- */
.topbar {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  font-weight: 800;
  color: var(--gold);
}

html[data-theme="light"] .brand h1 { color: var(--toon-outline); }

.brand .tag {
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.72rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ico-svg {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

.ico-svg svg { width: 100%; height: 100%; }
.ico-heart { color: var(--danger); }

.icon-btn {
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--toon-outline);
  cursor: pointer;
  border: var(--border);
  background: var(--panel-2);
  background-image: var(--kawaii-sheen), linear-gradient(150deg, #493420 0%, #2c2013 100%);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  white-space: nowrap;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .icon-btn { background-image: var(--kawaii-sheen), none; background-color: var(--panel-2); }

.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

.icon-btn:focus {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
}

.icon-btn.pri {
  color: var(--toon-outline-ink);
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  background-image: var(--kawaii-sheen), linear-gradient(180deg, #ffe08a, var(--gold));
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  box-shadow: var(--shadow);
}

.icon-btn.pri:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

/* --- CHIPS ÉCONOMIE (vies + porte-monnaie partagé _kit/wallet.js) --- */
.chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--toon-outline);
  border: var(--border);
  background: var(--panel-2);
  background-image: var(--kawaii-sheen), linear-gradient(150deg, #493420 0%, #2c2013 100%);
  border-radius: var(--cb-radius-pill, 999px);
  padding: 6px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .chip { background-image: var(--kawaii-sheen), none; background-color: var(--panel-2); }

.chip.lives-low {
  border-color: var(--danger);
  color: var(--danger);
}

.chip.earn-chip {
  border-color: var(--gold-dark);
}

.chip[hidden] {
  display: none;
}

/* --- ANIMATIONS FONDAMENTALES --- */
@keyframes fadeInScale {
  0% { opacity: 0; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes moveIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- ÉCRAN MENU --- */
#screen-menu {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-top: 3vh;
  animation: fadeInScale 0.3s var(--cb-easing-in-out);
}

.hero {
  text-align: center;
}

.hero .logo {
  font-size: clamp(2.4rem, 12vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--gold);
}

html[data-theme="light"] .hero .logo { color: var(--toon-outline); }

.hero .sub {
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 4px;
}

.hero .glyphs {
  font-size: clamp(2rem, 9vw, 2.8rem);
  letter-spacing: 0.08em;
  margin-top: 10px;
  color: var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}

.menu-card {
  width: 100%;
  background: var(--panel);
  background-image: var(--kawaii-sheen), linear-gradient(160deg, #3c2b19 0%, #241a10 100%);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  animation: slideUp var(--cb-duration-slow) var(--cb-easing-bounce);
}

html[data-theme="light"] .menu-card { background-image: var(--kawaii-sheen), none; background-color: var(--panel); }

.menu-card h2 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--toon-outline);
}

.menu-card .hint {
  margin: 0 0 12px;
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.8rem;
}

.diffs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.diff-chip {
  flex: 1;
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--toon-outline);
  cursor: pointer;
  border: var(--border);
  background: var(--field);
  border-radius: var(--radius-sm);
  padding: 11px 6px;
  text-align: center;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow-sm);
}

.diff-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

.diff-chip.on {
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  color: var(--toon-outline-ink);
  border-color: var(--toon-outline-ink);
}

.big-btn {
  width: 100%;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius: var(--radius-sm);
  padding: 15px;
  color: var(--toon-outline-ink);
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  background-image: var(--kawaii-sheen), linear-gradient(180deg, #ffe08a, var(--gold));
  box-shadow: var(--shadow-lg);
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
}

.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--toon-outline-ink); }

.big-btn:focus {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
}

.big-btn.alt {
  color: var(--toon-outline);
  background: var(--field);
  border: var(--border);
  box-shadow: var(--shadow);
}

.big-btn.alt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

/* --- PROGRESSION : prochain objectif + thèmes de plateau déblocables --- */
.goal-card .goal-text {
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.goal-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--field);
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  overflow: hidden;
}

.goal-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transition: width var(--cb-duration-slow) var(--cb-easing-ease-out);
}

.themes-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.theme-swatch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow-sm);
}

.theme-swatch .half {
  position: absolute;
  inset: 0;
}

.theme-swatch .half.a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.theme-swatch .half.b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.theme-swatch:hover {
  transform: scale(1.08);
}

.theme-swatch.active {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--gold-dark);
}

.theme-swatch.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

.theme-swatch.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' width='16' height='16'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --- ÉCRAN JEU --- */
#screen-game {
  width: min(520px, 100%);
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  animation: fadeInScale 0.3s var(--cb-easing-in-out);
}

#screen-game.show {
  display: flex;
}

.players {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pl {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--panel-2);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  min-width: 0;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow-sm);
}

.pl .disc {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1.5px solid var(--toon-outline-ink);
}

.pl.white .disc {
  background: radial-gradient(circle at 35% 30%, #ffffff, #e6dcc9 60%, #c9bda2);
}

.pl.black .disc {
  background: radial-gradient(circle at 35% 30%, #4a423b, #231d19 60%, #120e0c);
}

.pl .nm {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--toon-outline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.pl .chk {
  display: none;
  font-size: 0.72rem;
  font-weight: 800;
  color: #ffffff;
  background: var(--danger);
  border: 1.5px solid var(--toon-outline-ink);
  border-radius: var(--cb-radius-xs, 6px);
  padding: 3px 8px;
}

.pl.in-check .chk {
  display: inline-block;
  animation: pulse 0.6s ease-in-out infinite;
}

.pl.active {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm), 0 0 0 2px var(--gold-dark);
}

#status {
  min-height: 1.4em;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--toon-outline);
  text-align: center;
  animation: fadeIn 0.2s var(--cb-easing-in-out);
}

#online-banner {
  display: none;
  width: 100%;
  background: var(--panel-2);
  border: var(--toon-outline-w) solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: var(--shadow);
}

#online-banner.show {
  display: flex;
  animation: slideUp 0.3s var(--cb-easing-bounce);
}

#online-banner .code {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

#online-banner .lbl {
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.8rem;
  font-weight: 700;
}

/* --- PLATEAU D'ÉCHECS --- */
.board-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

#board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(94vw, 460px);
  aspect-ratio: 1;
  --cell: calc(min(94vw, 460px) / 8);
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;
  border: 8px solid var(--toon-outline-ink);
  box-shadow: var(--shadow-lg);
  animation: slideUp var(--cb-duration-deliberate) var(--cb-easing-bounce);
}

[dir="rtl"] #board {
  direction: ltr;
}

.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: calc(var(--cell) * 0.78);
  line-height: 1;
  overflow: hidden;
  transition: filter var(--cb-duration-fast) var(--cb-easing-in-out);
}

.sq.lt {
  background: var(--chess-light);
}

.sq.dk {
  background: var(--chess-dark);
}

.sq:hover {
  filter: brightness(1.12);
}

.sq .pc {
  position: relative;
  z-index: 2;
  pointer-events: none;
  transition: transform var(--cb-duration-fast) ease;
  display: inline-block;
  will-change: transform;
}

.sq .pc.w {
  color: #fbf6ee;
  text-shadow:
    0 1.5px 0 #2c2622,
    0 -1.5px 0 #2c2622,
    1.5px 0 0 #2c2622,
    -1.5px 0 0 #2c2622,
    1.5px 1.5px 0 #2c2622,
    -1.5px -1.5px 0 #2c2622,
    1.5px -1.5px 0 #2c2622,
    -1.5px 1.5px 0 #2c2622;
}

.sq .pc.b {
  color: #211b18;
  text-shadow:
    0 1.5px 0 #efe4d0,
    0 -1.5px 0 #efe4d0,
    1.5px 0 0 #efe4d0,
    -1.5px 0 0 #efe4d0,
    1.5px 1.5px 0 #efe4d0,
    -1.5px -1.5px 0 #efe4d0,
    1.5px -1.5px 0 #efe4d0,
    -1.5px 1.5px 0 #efe4d0;
}

.sq.moved .pc {
  animation: pcpop 0.22s var(--cb-easing-bounce);
}

@keyframes pcpop {
  0% { transform: scale(0.82); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.sq .coord {
  position: absolute;
  z-index: 3;
  font-size: calc(var(--cell) * 0.2);
  font-weight: 800;
  opacity: 0.7;
  pointer-events: none;
}

.sq .coord.file {
  right: 3px;
  bottom: 1px;
}

.sq .coord.rank {
  left: 3px;
  top: 1px;
}

.sq.lt .coord {
  color: #8a7a60;
}

.sq.dk .coord {
  color: #e8e0d0;
}

.sq.sel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chess-sel);
  z-index: 1;
  box-shadow: inset 0 0 0 3px var(--green);
  animation: selPulse var(--cb-duration-slow) ease-in-out infinite;
}

@keyframes selPulse {
  0%, 100% { opacity: .85; }
  50% { opacity: 1; }
}

.sq.last::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chess-last);
  z-index: 0;
}

.sq.check::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--chess-check);
  box-shadow: inset 0 0 0 3px var(--danger);
  animation: checkPulse 0.6s ease-in-out infinite;
}

@keyframes checkPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.sq.hint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--chess-hint);
  box-shadow: inset 0 0 0 3px var(--gold);
  animation: hintPulse 0.9s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.sq .tgt {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  animation: pulse var(--cb-duration-deliberate) ease-in-out infinite;
}

.sq.move .tgt {
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: var(--chess-dot);
  box-shadow: 0 0 0 2px var(--toon-outline-ink);
}

.sq.capture .tgt {
  inset: 6%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--chess-dot), inset 0 0 0 6px var(--toon-outline-ink);
}

#board.locked .sq {
  cursor: default;
}

#dragghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.08);
  font-size: calc(min(94vw, 460px) / 8 * 0.82);
  line-height: 1;
  display: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

#dragghost.w {
  color: #fbf6ee;
  text-shadow:
    0 1.5px 0 #2c2622, 0 -1.5px 0 #2c2622, 1.5px 0 0 #2c2622, -1.5px 0 0 #2c2622;
}

#dragghost.b {
  color: #211b18;
  text-shadow:
    0 1.5px 0 #efe4d0, 0 -1.5px 0 #efe4d0, 1.5px 0 0 #efe4d0, -1.5px 0 0 #efe4d0;
}

#history {
  width: 100%;
  max-height: 64px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  background: var(--field);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--cb-text-secondary, #9aa8bd);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}

#history:empty {
  display: none;
}

#history .mv {
  color: var(--toon-outline);
  font-weight: 700;
}

.mv {
  animation: moveIn 0.2s var(--cb-easing-in-out);
}

#history .no {
  opacity: 0.6;
  margin-right: 2px;
}

.game-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.game-actions button {
  font: inherit;
  font-weight: 800;
  font-size: 0.84rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  border: var(--border);
  background: var(--panel-2);
  color: var(--toon-outline);
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow-sm);
}

.game-actions button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--toon-outline-ink); }

.game-actions button:focus {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
}

.game-actions button.pri {
  color: var(--toon-outline-ink);
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  box-shadow: var(--shadow);
}

.game-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.game-actions button.hint {
  color: var(--toon-outline-ink);
  background: linear-gradient(180deg, #ffe9b3, #ffd873);
  border-color: var(--toon-outline-ink);
}

/* --- OVERLAYS & DIALOGS --- */
.ov {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 16px;
  background: rgba(20, 14, 8, 0.6);
  animation: fadeIn var(--cb-duration-normal) var(--cb-easing-in-out);
}

html[data-theme="light"] .ov { background: rgba(40, 28, 12, 0.35); }

.ov.show {
  display: flex;
}

.dialog {
  width: min(94vw, 420px);
  max-height: 88vh;
  overflow: auto;
  background: var(--panel);
  background-image: var(--kawaii-sheen), linear-gradient(160deg, #3c2b19 0%, #241a10 100%);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: dialogIn var(--cb-duration-slow) var(--cb-easing-bounce);
}

html[data-theme="light"] .dialog { background-image: var(--kawaii-sheen), none; background-color: var(--panel); }

@keyframes dialogIn {
  0% { opacity: 0; transform: scale(0.96) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.dialog h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: var(--toon-outline);
}

.dialog p {
  margin: 0 0 12px;
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.9rem;
  line-height: 1.55;
}

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

.dialog input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: var(--border);
  background: var(--field);
  color: var(--toon-outline);
  transition: border-color var(--cb-duration-fast) var(--cb-easing-in-out);
}

.dialog input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.dialog input::placeholder {
  color: var(--cb-text-muted, #7c8aa0);
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.9rem;
}

.dialog .btn {
  font: inherit;
  font-weight: 800;
  border: var(--toon-outline-w) solid var(--toon-outline-ink);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  color: var(--toon-outline-ink);
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  white-space: nowrap;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow);
}

.dialog .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--toon-outline-ink); }

.dialog .btn:focus {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
}

.dialog .btn.alt {
  color: var(--toon-outline);
  background: var(--field);
  border: var(--border);
  box-shadow: var(--shadow-sm);
}

.dialog .btn.ghost {
  color: var(--toon-outline);
  background: transparent;
  box-shadow: none;
  border: var(--border);
}

.dialog .btn.wide {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.dialog .sep {
  color: var(--cb-text-secondary, #9aa8bd);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 16px 0 8px;
}

.over-emoji {
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 6px;
  color: var(--gold);
  animation: bounce 0.6s var(--cb-easing-bounce);
}

.over-emoji svg {
  width: 100%;
  height: 100%;
}

.promo-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 4px;
}

.promo-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: var(--border);
  cursor: pointer;
  background: var(--field);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  transition: transform var(--cb-duration-fast) var(--cb-easing-in-out);
  box-shadow: var(--shadow-sm);
}

.promo-btn:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--gold);
}

.promo-btn:active {
  transform: scale(0.92);
}

.promo-btn:focus {
  outline: var(--cb-focus-ring);
  outline-offset: 2px;
}

.promo-btn.w {
  color: #fbf6ee;
  text-shadow: 0 1.5px 0 #2c2622, 0 -1.5px 0 #2c2622, 1.5px 0 0 #2c2622, -1.5px 0 0 #2c2622;
}

.promo-btn.b {
  color: #211b18;
  text-shadow: 0 1.5px 0 #efe4d0, 0 -1.5px 0 #efe4d0, 1.5px 0 0 #efe4d0, -1.5px 0 0 #efe4d0;
}

#toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, calc(20px + var(--cb-safe-bottom, 0)));
  transform: translateX(-50%);
  background: var(--panel-2);
  border: var(--border);
  color: var(--toon-outline);
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.88rem;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cb-duration-normal) var(--cb-easing-in-out);
  box-shadow: var(--shadow);
  max-width: 86vw;
  text-align: center;
}

#toast.show {
  opacity: 1;
}

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

  .sq.moved .pc {
    animation: none;
  }

  .sq .pc {
    transition: none;
  }

  .big-btn:active,
  .icon-btn:active,
  .diff-chip:active,
  .promo-btn:active {
    transform: none;
  }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 480px) {
  .brand h1 {
    font-size: 1.15rem;
  }

  #board {
    width: min(92vw, 420px);
  }

  .menu-card,
  .dialog {
    border-radius: var(--radius);
    padding: 14px;
  }

  .game-actions {
    gap: 6px;
  }

  .dialog .btn.wide {
    padding: 10px 12px;
  }
}

/* --- HIGH CONTRAST MODE --- */
@media (prefers-contrast: more) {
  :root {
    --toon-outline-w: 3px;
  }
}