/* ==========================================================================
   AURORA CHESS — COZY UI
   --------------------------------------------------------------------------
   A presentation-only skin. It restyles the EXISTING in-game elements by id /
   class; it never changes markup structure, ids, handlers or layout logic.

   Why so many !important rules:
     js/17_themes.js applyUIStyle() writes inline style.background / .color /
     .borderColor / .fontFamily directly onto #hud, #menuBtn, #moveToggle,
     #viewToggle, #rotateBoardBtn and friends, because the original markup
     carries hardcoded style="" attributes. Inline styles beat normal CSS, so
     every property this file needs to own is marked !important. Anything NOT
     marked stays under the old system's control on purpose.

   Load order: LAST stylesheet in <head>, after the two inline <style> blocks.
   ========================================================================== */

/* ── Typography ─────────────────────────────────────────────────────────── */
/* Self-hosted so the PWA keeps working offline. Single variable file covers
   the whole 200–1000 weight axis. */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-var.woff2') format('woff2-variations'),
       url('../assets/fonts/nunito-var.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Rounded type stack. ui-rounded resolves to SF Pro Rounded on iOS /
       macOS, which is the friendliest option on the primary target device;
       Nunito covers everyone else. ── */
  --cz-font: 'Nunito', ui-rounded, -apple-system, 'SF Pro Rounded',
             'Segoe UI Variable', system-ui, 'Segoe UI', Roboto, sans-serif;

  /* ── Palette ──────────────────────────────────────────────────────────
     Sampled from the supplied background artwork so UI and scene agree. */
  --cz-midnight:      #1a1638;   /* deepest sky */
  --cz-indigo:        #272156;   /* mid sky */
  --cz-violet:        #3b3170;   /* hills */
  --cz-lavender:      #a99fe0;
  --cz-lavender-pale: #d8d3f2;
  --cz-mint:          #9fe0d2;
  --cz-cyan:          #8fd6e8;
  --cz-blue:          #8fb2e8;
  --cz-cream:         #f6f1e6;   /* white pieces / primary text */
  --cz-blush:         #e8b4c8;
  --cz-gold:          #f2d08a;   /* hint bulb, warm accents */
  --cz-leaf:          #8fd8a8;   /* "online"/active dot */
  --cz-rose:          #f5919f;   /* errors — soft, but still unmistakably red */

  /* ── Surfaces: frosted glass over a dark aurora sky ── */
  --cz-surface:        rgba(88, 80, 150, 0.42);
  --cz-surface-strong: rgba(72, 64, 132, 0.62);
  --cz-surface-soft:   rgba(108, 100, 172, 0.30);
  --cz-surface-press:  rgba(60, 52, 116, 0.72);
  --cz-hairline:       rgba(226, 222, 255, 0.16);
  --cz-hairline-lit:   rgba(226, 222, 255, 0.34);

  /* ── Text ── */
  --cz-ink:      #f2eeff;
  --cz-ink-soft: #cdc5ee;
  --cz-ink-dim:  #9990c4;

  /* ── Radii: rounded corners everywhere, pills where it reads as tappable ── */
  --cz-r-sm:   12px;
  --cz-r-md:   16px;
  --cz-r-lg:   22px;
  --cz-r-xl:   28px;
  --cz-r-pill: 999px;

  /* ── Soft shadows — never a hard drop, always a diffuse lift ── */
  --cz-shadow-sm: 0 2px 8px rgba(12, 8, 34, 0.28);
  --cz-shadow:    0 6px 20px rgba(12, 8, 34, 0.34);
  --cz-shadow-lg: 0 12px 36px rgba(12, 8, 34, 0.42);
  /* Inner top highlight — what makes a flat pill read as a physical tablet */
  --cz-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --cz-blur: blur(16px) saturate(1.15);

  /* ── Motion: calm. Nothing snappier than 120ms, nothing slower than 400. ── */
  --cz-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --cz-press: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ==========================================================================
   1. REUSABLE COMPONENTS
   Applied to existing elements via the id rules in section 2, and available
   as classes for anything built later.
   ========================================================================== */

/* ── Soft pill button ── the base tactile control ─────────────────────── */
.cz-pill {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-md) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.13s var(--cz-press),
              background 0.18s var(--cz-ease),
              border-color 0.18s var(--cz-ease),
              box-shadow 0.18s var(--cz-ease),
              opacity 0.18s var(--cz-ease);
}
/* Hover only on devices that actually hover — avoids sticky states on touch */
@media (hover: hover) {
  .cz-pill:hover {
    background: var(--cz-surface-strong) !important;
    border-color: var(--cz-hairline-lit) !important;
    box-shadow: var(--cz-shadow), var(--cz-bevel) !important;
  }
}
.cz-pill:active,
.cz-pill.cz-pressed {
  transform: scale(0.94);
  background: var(--cz-surface-press) !important;
  box-shadow: var(--cz-shadow-sm) !important;
}
.cz-pill:focus-visible {
  outline: 2px solid var(--cz-cyan) !important;
  outline-offset: 2px;
}
/* Selected / latched state — a soft inner wash, never a hard neon ring */
.cz-pill.cz-on {
  color: #fff !important;
  background: linear-gradient(180deg,
              rgba(159, 224, 210, 0.34), rgba(143, 178, 232, 0.26)) !important;
  border-color: rgba(159, 224, 210, 0.52) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel),
              0 0 18px rgba(159, 224, 210, 0.28) !important;
}
.cz-pill[disabled],
.cz-pill.cz-disabled {
  opacity: 0.38 !important;
  cursor: default;
  box-shadow: none !important;
}
.cz-pill[disabled]:active,
.cz-pill.cz-disabled:active { transform: none; }

/* Size variants */
.cz-pill--lg  { padding: 11px 18px !important; font-size: 15px !important; border-radius: var(--cz-r-lg) !important; }
.cz-pill--md  { padding: 9px 15px  !important; font-size: 13.5px !important; }
.cz-pill--sm  { padding: 7px 12px  !important; font-size: 12px !important; border-radius: var(--cz-r-sm) !important; }
/* Square icon-only buttons keep equal optical padding */
.cz-pill--icon { padding: 9px 0 !important; min-width: 46px !important; }
.cz-pill--round { border-radius: var(--cz-r-pill) !important; }

/* ── Glass card ── the panel surface ──────────────────────────────────── */
.cz-card {
  font-family: var(--cz-font) !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-xl) !important;
  box-shadow: var(--cz-shadow-lg), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
}

/* ── Status pill ── a game message, not a HUD readout ─────────────────── */
.cz-status {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-pill) !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel),
              0 0 26px rgba(143, 214, 232, 0.16) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  letter-spacing: 0.2px !important;
}

/* ── Theme preview card ── friendly carousel item ─────────────────────── */
.cz-theme-card {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 44px;
  border-radius: var(--cz-r-sm);
  border: 1px solid var(--cz-hairline);
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.16s var(--cz-press),
              box-shadow 0.2s var(--cz-ease),
              border-color 0.2s var(--cz-ease);
}
.cz-theme-card:active { transform: scale(0.93); }
/* Selected = soft outward halo + gentle lift, no sharp border */
.cz-theme-card.cz-on {
  border-color: rgba(242, 208, 138, 0.75);
  box-shadow: 0 0 0 3px rgba(242, 208, 138, 0.22),
              0 4px 14px rgba(12, 8, 34, 0.4),
              var(--cz-bevel);
  transform: translateY(-2px);
}
/* The dot row that reads as "a palette" in the reference */
.cz-theme-card .cz-dots {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
  pointer-events: none;
}
.cz-theme-card .cz-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  display: block;
}

/* ── Soft divider ── */
.cz-rule {
  height: 1px;
  background: var(--cz-hairline);
  border: 0;
}

/* ==========================================================================
   2. EXISTING IN-GAME CONTROLS, RESKINNED
   Positioning is left to the original CSS/JS — only appearance is claimed.
   ========================================================================== */

body {
  font-family: var(--cz-font);
  background: var(--cz-midnight) !important;
}

/* ── TOP CONTROL AREA ───────────────────────────────────────────────────
   js/24_cozy_ui.js MOVES the existing buttons into these flex rows
   (appendChild preserves every listener and id — nothing is recreated).
   The rows are layout-only and fully transparent, so each control reads as
   its own tappable pill and a row collapses cleanly when the game hides its
   buttons one by one via style.display.                                    */
#czTopBar {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  z-index: 22;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;          /* board stays draggable between the pills */
}
#czTopBar > * { pointer-events: auto; }

.cz-toprow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
}
/* Row 1 pushes MOVES/FREE to the right edge; #czSpacer does the pushing */
#czSpacer { flex: 1 1 auto; min-width: 4px; pointer-events: none; }
/* Row 2 is the quieter one and sits inset slightly */
#czTopRow2 { gap: 7px; }

/* Adopted children must give up their original fixed positioning. */
#czTopBar #menuBtn, #czTopBar #rotateBoardBtn, #czTopBar #hintBtn,
#czTopBar #undoBtn, #czTopBar #puzzleInfoToggle, #czTopBar #moveToggle,
#czTopBar #viewToggle, #czTopBar #layerVisToggle, #czTopBar #threatVisionToggle,
#czTopBar #panBoardBtn, #czTopBar #hud {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* PAN sits at the far right of row 2, as in the reference */
#czTopBar #panBoardBtn { margin-left: auto !important; }

/* Things that used to be positioned against the old, shorter toolbar.
   --cz-topbar-h is measured and written by js/24_cozy_ui.js. */
#arcadeBar          { top: calc(var(--cz-topbar-h, 96px) + 8px) !important; }
#accountBadge       { top: calc(var(--cz-topbar-h, 96px) + 8px) !important; }
#onlineColorIndicator { top: calc(var(--cz-topbar-h, 96px) + 8px) !important; }
#puzzleInfoPopup    { top: calc(var(--cz-topbar-h, 96px) + 8px) !important; border-radius: var(--cz-r-lg) !important; }
#movePanel          { top: calc(var(--cz-topbar-h, 96px) + 8px) !important; }

/* ── TOP BAR ROW 1 ──────────────────────────────────────────────────────
   ☰ · ⟳180° · 💡 · ↶ · MOVES · FREE                                      */
#menuBtn,
#rotateBoardBtn,
#hintBtn,
#undoBtn,
#puzzleInfoToggle,
#moveToggle,
#viewToggle {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-md) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  transition: transform 0.13s var(--cz-press),
              background 0.18s var(--cz-ease),
              border-color 0.18s var(--cz-ease),
              box-shadow 0.18s var(--cz-ease) !important;
}
#menuBtn:active,
#rotateBoardBtn:active,
#hintBtn:active,
#undoBtn:active,
#puzzleInfoToggle:active,
#moveToggle:active,
#viewToggle:active {
  transform: scale(0.94);
  background: var(--cz-surface-press) !important;
}
@media (hover: hover) {
  #menuBtn:hover, #rotateBoardBtn:hover, #hintBtn:hover, #undoBtn:hover,
  #puzzleInfoToggle:hover, #moveToggle:hover, #viewToggle:hover {
    background: var(--cz-surface-strong) !important;
    border-color: var(--cz-hairline-lit) !important;
    box-shadow: var(--cz-shadow), var(--cz-bevel) !important;
  }
}

#menuBtn        { padding: 9px 14px !important; font-size: 17px !important; line-height: 1 !important; }
#rotateBoardBtn { padding: 9px 13px !important; font-size: 13px !important; }
#hintBtn        { padding: 9px 13px !important; font-size: 15px !important; color: var(--cz-gold) !important; }
#undoBtn        { padding: 9px 13px !important; font-size: 15px !important; }
#puzzleInfoToggle { padding: 9px 13px !important; font-size: 14px !important; color: var(--cz-blue) !important; }
#moveToggle,
#viewToggle     { padding: 9px 14px !important; font-size: 13px !important; }

/* ── TOP BAR ROW 2 ── smaller, quieter: ALL · TTS · PAN ───────────────── */
#layerVisToggle,
#threatVisionToggle,
#panBoardBtn {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  padding: 7px 12px !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-sm) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  letter-spacing: 0.3px !important;
  transition: transform 0.13s var(--cz-press),
              background 0.18s var(--cz-ease),
              color 0.18s var(--cz-ease) !important;
}
#layerVisToggle:active,
#threatVisionToggle:active,
#panBoardBtn:active { transform: scale(0.93); background: var(--cz-surface-press) !important; }

/* Their icons carry the colour so the label stays calm */
#layerVisToggle     { color: var(--cz-mint) !important; }
#threatVisionToggle { color: var(--cz-gold) !important; }
#panBoardBtn        { color: var(--cz-lavender) !important; }

/* Active/latched — soft wash, matching .cz-pill.cz-on */
#threatVisionToggle.active,
#panBoardBtn.active,
#layerVisToggle.active {
  color: #fff !important;
  background: linear-gradient(180deg,
              rgba(159, 224, 210, 0.34), rgba(143, 178, 232, 0.26)) !important;
  border-color: rgba(159, 224, 210, 0.5) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel),
              0 0 16px rgba(159, 224, 210, 0.26) !important;
}

/* ── TURN INDICATOR ── "✦ White to move" ──────────────────────────────── */
#hud {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.2px !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-pill) !important;
  padding: 9px 22px !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel),
              0 0 26px rgba(143, 214, 232, 0.16) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  text-transform: none !important;
}
/* The ✦ is a pseudo-element, NOT a child node: js/09_execution.js rewrites
   #hud.textContent wholesale every turn, which would delete a real span. */
#hud::before {
  content: '✦';
  color: var(--cz-mint);
  margin-right: 8px;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(159, 224, 210, 0.7);
}
/* Gentle re-entry each time the turn text changes.
   #hud is adopted into the flex #czTopBar column, so it no longer carries the
   translateX(-50%) centering the original inline style used. */
@keyframes czHudIn {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(0)    scale(1.02); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
#hud.cz-hud-enter { animation: czHudIn 0.42s var(--cz-ease); }

/* Check state — obvious, but still cozy: a warm blush wash, no red alarm */
#hud.cz-check {
  background: linear-gradient(180deg,
              rgba(232, 180, 200, 0.5), rgba(200, 130, 165, 0.42)) !important;
  border-color: rgba(232, 180, 200, 0.6) !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel),
              0 0 30px rgba(232, 180, 200, 0.4) !important;
}
#hud.cz-check .cz-hud-star { color: #ffe3ee; }

/* ── BOT THINKING ── */
#botThinkingEl {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.4px !important;
  color: var(--cz-mint) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-pill) !important;
  padding: 8px 20px !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
}

/* ── LAYER FLASH ── "L2" when switching layers ── */
#layerFlash {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  color: var(--cz-lavender-pale) !important;
  text-shadow: 0 0 24px rgba(169, 159, 224, 0.7),
               0 4px 20px rgba(12, 8, 34, 0.6) !important;
  letter-spacing: 2px !important;
}

/* ── QUICK BUTTON + ITS PANEL ─────────────────────────────────────────── */
#hudGearBtn {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  color: var(--cz-midnight) !important;
  background: rgba(246, 241, 230, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: var(--cz-r-pill) !important;
  box-shadow: var(--cz-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  letter-spacing: 0.2px !important;
  transition: transform 0.13s var(--cz-press), box-shadow 0.18s var(--cz-ease) !important;
}
#hudGearBtn:active { transform: scale(0.94); }
@media (hover: hover) { #hudGearBtn:hover { box-shadow: var(--cz-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.9) !important; } }

#hudQuickPanel {
  font-family: var(--cz-font) !important;
  font-size: 13px !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-lg) !important;
  box-shadow: var(--cz-shadow-lg), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 8px 14px !important;
}
#hudQuickPanel .uiToggleRow {
  border-bottom: 1px solid var(--cz-hairline) !important;
  padding: 11px 0 !important;
  font-size: 13px !important;
  border-radius: 8px;
}
#hudQuickPanel .uiToggleRow:last-child { border-bottom: none !important; }
#hudQuickPanel .uiToggleDot.on  { color: var(--cz-mint) !important; text-shadow: 0 0 10px rgba(159,224,210,0.6); }
#hudQuickPanel .uiToggleDot.off { color: rgba(226, 222, 255, 0.22) !important; }

/* ── UI VISIBILITY / WINDOW BUTTON ── */
#uiHideBtn {
  font-family: var(--cz-font) !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-md) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  transition: transform 0.13s var(--cz-press) !important;
}
#uiHideBtn:active { transform: scale(0.92); }

/* ── OFFLINE BANNER ── a calm status strip, not a warning ─────────────── */
#offlineBanner {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface-strong) !important;
  border-top: none !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-lg) !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 10px 18px !important;
  left: 12px !important;
  right: 12px !important;
  /* bottom is set with the rest of the bottom stack, further down */
}
#offlineBanner::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cz-leaf);
  box-shadow: 0 0 10px rgba(143, 216, 168, 0.8);
  flex-shrink: 0;
}
#offlineBanner button {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-pill) !important;
  padding: 5px 14px !important;
  font-size: 11.5px !important;
}

/* ── MOVE PANEL / REVIEW BARS ─────────────────────────────────────────── */
#movePanel {
  font-family: var(--cz-font) !important;
  font-size: 13px !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-lg) !important;
  box-shadow: var(--cz-shadow-lg), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 12px 14px !important;
}
#moveNumBar,
#reviewControls {
  font-family: var(--cz-font) !important;
  background: var(--cz-surface-strong) !important;
  border-top: 1px solid var(--cz-hairline) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
}
#moveNumBarText  { font-size: 12px !important; color: var(--cz-ink-dim) !important; font-weight: 700; }
#reviewCounter   { font-family: var(--cz-font) !important; font-weight: 800 !important; color: var(--cz-ink) !important; }
#reviewControls button { font-family: var(--cz-font) !important; border-radius: var(--cz-r-sm); }
#liveMove { color: var(--cz-mint) !important; font-weight: 800 !important; }

/* ── ARCADE BAR / BANNER ── */
#arcadeBar {
  font-family: var(--cz-font) !important;
  font-size: 11.5px !important;
  color: var(--cz-ink-dim) !important;
  background: var(--cz-surface) !important;
  border-bottom: 1px solid var(--cz-hairline) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
}
#arcadeEventBanner { font-family: var(--cz-font) !important; font-weight: 800 !important; }

/* ── ACCOUNT BADGE ── */
#accountBadge {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--cz-ink-dim) !important;
}

/* ==========================================================================
   3. MENUS, OVERLAYS AND PANELS
   Broad strokes only — the same soft language, applied by class so the
   hundreds of inline-styled rows inside keep working untouched.
   ========================================================================== */

.menuBtn, .modeBtn, #backToMain, #backToMode,
.playModeBtn, .acct-btn, .arcadeToggleBtn, .sfBtn {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  border-radius: var(--cz-r-md) !important;
  transition: transform 0.13s var(--cz-press),
              background 0.18s var(--cz-ease),
              border-color 0.18s var(--cz-ease) !important;
}
.menuBtn, .modeBtn, #backToMain, #backToMode, .playModeBtn {
  color: var(--cz-ink) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 13px 24px !important;
  letter-spacing: 0.2px !important;
}
.menuBtn:active, .modeBtn:active, .playModeBtn:active,
#backToMain:active, #backToMode:active, .acct-btn:active, .sfBtn:active {
  transform: scale(0.96);
}
@media (hover: hover) {
  .menuBtn:hover, .modeBtn:hover, .playModeBtn:hover,
  #backToMain:hover, #backToMode:hover {
    background: var(--cz-surface-strong) !important;
    border-color: var(--cz-hairline-lit) !important;
  }
}

.acct-btn {
  color: var(--cz-ink) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  padding: 12px !important;
  letter-spacing: 0.3px !important;
}
.acct-btn.primary {
  color: var(--cz-midnight) !important;
  background: rgba(246, 241, 230, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--cz-shadow), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
.acct-btn.danger { color: var(--cz-blush) !important; border-color: rgba(232,180,200,0.45) !important; background: rgba(232,180,200,0.12) !important; }
.acct-input {
  font-family: var(--cz-font) !important;
  font-size: 14px !important;
  color: var(--cz-ink) !important;
  background: rgba(30, 24, 66, 0.55) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-md) !important;
  padding: 12px 16px !important;
  letter-spacing: 0 !important;
}
.acct-input:focus { border-color: rgba(159, 224, 210, 0.6) !important; outline: none; }
.acct-tab {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  border-radius: var(--cz-r-md) var(--cz-r-md) 0 0 !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-bottom: none !important;
  color: var(--cz-ink-dim) !important;
  padding: 9px !important;
}
.acct-tab.acct-tab-active { background: var(--cz-surface-strong) !important; color: var(--cz-ink) !important; }
.acct-avatar.sel { border-color: var(--cz-mint) !important; }

/* The gamepad/keyboard focus ring is a hard cyan outline. Same job, soft
   language: a mint halo and a lift instead of a neon box. */
.gp-selected {
  outline: none !important;
  border-color: rgba(159, 224, 210, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(159, 224, 210, 0.22),
              var(--cz-shadow), var(--cz-bevel) !important;
}

/* Menu sub-labels ship hardcoded near-black inline colours (#3a7a9b, #2d5540,
   #663d20…) tuned for the old black panels. On the lighter frosted cards they
   fall under any sane contrast floor, so the descriptions are unreadable. */
.playModeBtn .sub,
#gameModesMenu button > div,
.playModeBtn > div {
  color: var(--cz-ink-soft) !important;
  font-size: 11px !important;
  letter-spacing: 0.2px !important;
  opacity: 0.92;
}
.playSubtitle, #settingsHeader .settingsSubtitle { color: var(--cz-ink-dim) !important; }
.playTitle { color: var(--cz-ink) !important; font-weight: 800 !important; }

/* Overlay scrims: deep indigo haze instead of flat black */
#accountOverlay, #profileOverlay, #helpOverlay, #friendPanel,
#settingsOverlay, .playStep {
  background: rgba(26, 22, 56, 0.78) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#tutorialOverlay, #puzzleSelectOverlay, #puzzleSuccess, #promotionPopup, #promotionWait {
  background: rgba(26, 22, 56, 0.8) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--cz-font) !important;
}

#settingsPanel, #profilePanel, .friendPanelBox, .tut-panel {
  font-family: var(--cz-font) !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-xl) !important;
  box-shadow: var(--cz-shadow-lg), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
}
#settingsHeader h2, #settingsHeader .settingsSubtitle,
.stTab, .advTab, .settingSection h3, .settingRow label,
.chip, .timeChip, .uploadLabel, .previewLabel, .profile-stat,
.playTitle, .playSubtitle, .arcadeRow, .arcadeToggleBtn, .arcadeRateBtn,
#promotionPopup, #promotionPopup h2, .promoBtn, .promoBtn span.promoLabel {
  font-family: var(--cz-font) !important;
}
#settingsHeader h2 { letter-spacing: 3px !important; }
.stTab, .advTab { font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1px !important; }
.stTab.active   { color: var(--cz-ink) !important; border-bottom-color: var(--cz-mint) !important; }
.advTab.active  { color: var(--cz-ink) !important; border-bottom-color: var(--cz-lavender) !important; }
.settingRow label { font-size: 12.5px !important; color: var(--cz-ink-soft) !important; }
.settingSection h3 { color: var(--cz-lavender) !important; letter-spacing: 2px !important; border-bottom-color: var(--cz-hairline) !important; }
.chip, .timeChip, .arcadeToggleBtn, .arcadeRateBtn {
  border-radius: var(--cz-r-pill) !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  color: var(--cz-ink-dim) !important;
}
.chip.active, .timeChip.active {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(159,224,210,0.34), rgba(143,178,232,0.26)) !important;
  border-color: rgba(159,224,210,0.5) !important;
}
.promoBtn {
  border-radius: var(--cz-r-lg) !important;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
}
.promoBtn:hover, .promoBtn:focus { border-color: var(--cz-mint) !important; background: var(--cz-surface-strong) !important; }
.toggle input:checked + .track { background: rgba(159,224,210,0.28) !important; border-color: var(--cz-mint) !important; }
.toggle input:checked ~ .thumb { background: var(--cz-mint) !important; }
.settingSlider::-webkit-slider-thumb { background: var(--cz-mint) !important; }
#zSlider { accent-color: var(--cz-mint); }
/* The pair is global, not just #hudQuickPanel — #uiSettingsOverlay renders the
   same dots and was left with the old #0d2535 "off" state. */
.uiToggleDot.on  { color: var(--cz-mint) !important; }
.uiToggleDot.off { color: rgba(226, 222, 255, 0.22) !important; }

/* ==========================================================================
   4. BACKGROUND STACK
   --------------------------------------------------------------------------
   z-order, bottom to top:
      #czBgLayer  (0)  supplied artwork  ← this file
      #auroraGameBg (1) animated aurora, composited with screen blend
      three.js canvas (1, set inline by 03_scene.js)
      HUD (20+)
   ========================================================================== */
#czBgLayer {
  position: fixed;
  inset: -3vmax;                 /* bleed, so the parallax shift never gaps */
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  will-change: transform;
  transition: opacity 0.6s var(--cz-ease);
}
/* A gentle wash that pushes the artwork back so the board reads as the hero */
#czBgLayer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 46% at 50% 52%, rgba(26, 22, 56, 0.42) 0%, rgba(26, 22, 56, 0) 70%),
    linear-gradient(180deg, rgba(26, 22, 56, 0.22) 0%, rgba(26, 22, 56, 0) 34%);
}

/* When artwork is active the aurora canvas becomes a GLOW layer over it:
   screen blending keeps the ribbons and stars, drops the canvas's own dark
   base to nothing. js/24_cozy_ui.js also tells the aurora painter to skip
   its opaque backdrop fill. */
body.cz-has-bg #auroraGameBg,
body.cz-has-bg #menuAuroraCanvas {
  mix-blend-mode: screen;
  opacity: 0.85;
}
body.cz-has-bg #menuBg { background: transparent !important; }

/* #globalBg is the sci-fi overlay canvas at z-index 10 — floating piece
   glyphs and a perspective grid in menus, a scan-line sweep with projected
   piece wireframes during play. It is decoration only (no raycasting, no game
   state), and it is precisely the "wireframe-heavy, technical HUD" look this
   redesign replaces, so the cozy background retires it.
   Removing body.cz-has-bg brings it straight back. */
body.cz-has-bg #globalBg { display: none !important; }

/* Likewise the stars/nebula canvases, which composite at z-index 2 — ABOVE
   the 3D canvas — and would haze the board once real artwork is behind it. */
body.cz-has-bg #bgCanvas,
body.cz-has-bg #bgPhoto { display: none !important; }

/* ==========================================================================
   5. BOTTOM DOCK  (built by js/24_cozy_ui.js from existing controls)
   ========================================================================== */
#czDock {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 22;
  display: none;                 /* shown by JS only during gameplay */
  align-items: center;
  gap: 8px;
  pointer-events: none;          /* children re-enable — keeps board tappable */
}
#czDock > * { pointer-events: auto; }
#czDock.cz-visible { display: flex; }

/* Adopted children drop their original fixed positioning, exactly as in the
   top bar — #uiHideBtn in particular still carries bottom:26px;right:12px in
   its inline style and would otherwise sit on top of the ? button. */
#czDock #hudGearBtn, #czDock #uiHideBtn {
  position: static !important;
  top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  flex: 0 0 auto;
  z-index: auto !important;
}

/* The carousel of theme cards */
#czThemeStrip {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline);
  border-radius: var(--cz-r-lg);
  box-shadow: var(--cz-shadow), var(--cz-bevel);
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#czThemeStrip::-webkit-scrollbar { display: none; }

#czHelpBtn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 19px;
  font-weight: 800;
  color: var(--cz-midnight);
  background: rgba(246, 241, 230, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: var(--cz-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-family: var(--cz-font);
  cursor: pointer;
  transition: transform 0.13s var(--cz-press);
  touch-action: manipulation;
}
#czHelpBtn:active { transform: scale(0.9); }

/* While the UI is hidden, only the window toggle survives — otherwise there
   would be no way to bring the interface back. */
#czDock.cz-uihidden > *:not(#uiHideBtn) { display: none !important; }
#czDock.cz-uihidden { justify-content: flex-end; }
/* Colour and border only. The `background` SHORTHAND used to live here too,
   and it reset background-REPEAT to its initial `repeat` — at (1,1,0) it
   outranked the `no-repeat !important` on the plain #uiHideBtn rule below,
   so the 19px eye tiled twice across the 42px button and the "hidden" state
   showed TWO struck-through eyes. The wash is now painted as a second
   background layer in that rule instead, where the repeat is declared with
   it. Same trap as [feedback] the id-shorthand-vs-class-icon one: a shorthand
   silently resets every longhand it covers, not only the one being set. */
#uiHideBtn.cz-on {
  color: var(--cz-mint) !important;
  border-color: rgba(159, 224, 210, 0.5) !important;
}
/* ── Bottom stacking order ────────────────────────────────────────────────
   #moveNumBar / #reviewControls keep the very bottom edge (they are the
   game's own full-bleed bars). Everything else stacks upward from there:

     offline banner        ↑ --cz-bottom-3
     dock                  ↑ --cz-bottom-2
     move / review bar     ↑ bottom: 0   (unchanged)

   Written as variables so one number moves the whole stack.               */
:root {
  --cz-bottom-1: 30px;   /* height of the game's move-number bar */
  --cz-bottom-2: 84px;   /* dock top edge   = bottom-1 + dock height + gap */
  --cz-bottom-3: 142px;  /* banner top edge = bottom-2 + banner height + gap */
}
#czDock       { bottom: calc(var(--cz-bottom-1) + 8px + env(safe-area-inset-bottom)) !important; }
#offlineBanner{ bottom: calc(var(--cz-bottom-2) + 8px + env(safe-area-inset-bottom)) !important; }
/* Quick's popup opens above the dock rather than through it */
#hudQuickPanel{ bottom: calc(var(--cz-bottom-2) + 8px + env(safe-area-inset-bottom)) !important;
                left: 12px !important; }
/* "BOT THINKING" floats clear of the whole stack */
#botThinkingEl{ bottom: calc(var(--cz-bottom-3) + 8px + env(safe-area-inset-bottom)) !important; }

/* ── Narrow portrait phones (the 390px target) ──────────────────────────
   Row 1 carries six controls; at default padding they total ~392px against
   370px of usable width and FREE runs off the edge. Tighten padding and gaps
   rather than dropping or stacking any control — everything stays reachable
   and still clears the 44px touch target. */
@media (max-width: 430px) {
  #czTopBar { left: 8px; right: 8px; gap: 7px; }
  .cz-toprow { gap: 6px; }

  #menuBtn          { padding: 9px 11px !important; font-size: 16px !important; }
  #rotateBoardBtn   { padding: 9px 9px  !important; font-size: 12px !important; }
  #hintBtn,
  #undoBtn,
  #puzzleInfoToggle { padding: 9px 10px !important; font-size: 14px !important; }
  #moveToggle,
  #viewToggle       { padding: 9px 10px !important; font-size: 12px !important; }
  #layerVisToggle,
  #threatVisionToggle,
  #panBoardBtn      { padding: 7px 10px !important; font-size: 11px !important; }
  #hud              { font-size: 14px !important; padding: 8px 18px !important; }

  /* Dock: the strip becomes a true scrolling carousel so all four themes stay
     reachable without squeezing Quick or the round buttons. */
  #czDock       { left: 8px; right: 8px; gap: 6px; }
  #czThemeStrip { gap: 6px; padding: 6px 7px; }
  .cz-theme-card{ width: 46px; height: 38px; }
  #hudGearBtn   { padding: 10px 13px !important; font-size: 12px !important; }
  #czHelpBtn    { width: 40px; height: 40px; font-size: 17px; }
  #uiHideBtn    { padding: 9px 10px !important; font-size: 14px !important; }
}

/* ── Layer minimap ── the four layer thumbnails ─────────────────────────
   Built in JS with an inline cssText that is rewritten on every orientation
   change, so only the child canvases are styled here — touching the wrapper
   would be undone the next time _layoutMM() runs. */
#minimap canvas {
  border-radius: 10px !important;
  border: 1px solid var(--cz-hairline);
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel);
  transition: transform 0.15s var(--cz-press), box-shadow 0.2s var(--cz-ease);
}
#minimap canvas:active { transform: scale(0.92); }
@media (hover: hover) { #minimap canvas:hover { box-shadow: var(--cz-shadow), var(--cz-bevel); } }

/* ── Floating online widget (the small ⬤ CONNECTING card) ─────────────── */
#onlineWidget {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.3px !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-md) !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 8px 12px !important;
}
#signalIndicator {
  font-family: var(--cz-font) !important;
  border-radius: var(--cz-r-pill) !important;
}

/* ── Online status strip ── keeps the same soft language as the dock ─────
   It ships as a full-bleed `left:0;right:0` strip, which reads as a stray
   band across the whole screen once everything else is a pill. Shrink-wrap it
   to its text instead: `right:auto` + `width:max-content`, and inline-flex so
   it does not stretch. `display` needs !important because
   onlineUpdateStatusBar() writes `style.display='flex'` on every update. */
#onlineStatusBar {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.3px !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-pill) !important;
  box-shadow: var(--cz-shadow), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 7px 15px !important;
  gap: 10px !important;
  left: 12px !important;
  right: auto !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  bottom: calc(var(--cz-bottom-2) + 8px + env(safe-area-inset-bottom)) !important;
}

/* ==========================================================================
   6. LEFTOVERS FROM THE PRE-REDESIGN SKIN
   Everything below is a control that kept its original sci-fi styling because
   nothing in sections 1–5 addressed it. All of it carries hardcoded inline
   style="" attributes (and several are rewritten by JS on interaction), so
   every property this section owns is !important.
   ========================================================================== */

/* ── UI-visibility toggle ── the stray ◻ / ▣ square next to the ? ────────
   19_online.js rewrites textContent ('◻' / '▣') AND style.color /
   .borderColor on every click, so the glyph cannot be fixed where it lives.
   Blank the text and paint an eye instead, keyed on the .cz-on class that
   watchDockVisibility() already toggles in lockstep with window._uiHidden.

   The icon is an inline SVG data URI, NOT an emoji or a box-drawing glyph:
   both of those depend on a system font, and a missing one renders as the
   tofu box that made the original read as an "odd square symbol". */
#uiHideBtn {
  font-size: 0 !important;
  color: transparent !important;
  border-color: var(--cz-hairline) !important;
  background-repeat: no-repeat !important;
  background-origin: padding-box !important;
  background-position: center !important;
  background-size: 19px 19px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
  min-width: 42px !important;
}
/* UI hidden → the same eye, struck through, in the active mint, over the
   active wash. Two background layers rather than a `background` shorthand
   plus a separate image, so repeat/position/size are stated for BOTH and
   nothing is left at its initial value. */
#uiHideBtn.cz-on {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe0d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.1 10.1 0 0 1 12 20c-7 0-11-8-11-8a18.5 18.5 0 0 1 5.1-5.9M9.9 4.2A9.1 9.1 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.2 3.2m-6.7-1.1a3 3 0 1 1-4.2-4.2'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(159, 224, 210, 0.32), rgba(143, 178, 232, 0.24)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: 19px 19px, 100% 100% !important;
}

/* ── The typeface, applied to whole overlays ────────────────────────────
   Section 3 set the font on the elements it could name, but most of the text
   inside these panels sits on anonymous <div>/<span>s with no class at all
   and simply INHERITS monospace from the overlay container. Naming children
   one by one is unwinnable; declare the family for each panel's whole subtree
   instead. Scoped to the overlays on purpose — the in-game HUD, the move list
   and the board labels are owned by sections 2 and 5. */
#mainMenu, #mainMenu *,
.playStep, .playStep *,
#modeMenu, #modeMenu *,
#botMenu, #botMenu *,
#pauseMenu, #pauseMenu *,
#endMenu, #endMenu *,
#reviewMenu, #reviewMenu *,
#settingsOverlay, #settingsOverlay *,
#uiSettingsOverlay, #uiSettingsOverlay *,
#onlineLobby, #onlineLobby *,
#accountOverlay, #accountOverlay *,
#profileOverlay, #profileOverlay *,
#helpOverlay, #helpOverlay *,
#gameHelpPanel, #gameHelpPanel *,
#friendPanel, #friendPanel *,
#tutorialOverlay, #tutorialOverlay *,
#puzzleSelectOverlay, #puzzleSelectOverlay *,
#puzzleInfoPopup, #puzzleInfoPopup *,
#puzzleSuccess, #puzzleSuccess *,
#supportOverlay, #supportOverlay *,
#welcomeWizard, #welcomeWizard *,
#promotionPopup, #promotionPopup *,
#promotionWait, #promotionWait *,
#hudQuickPanel, #hudQuickPanel *,
#chessClock, #chessClock *,
#movePanel, #movePanel *,
#reviewControls, #reviewControls *,
#arcadeBar, #arcadeBar *,
#gpHintBar, #gpHintBar *,
#layoutToolbar, #layoutToolbar * {
  font-family: var(--cz-font) !important;
}

/* ── Main-menu icon row ── ⚙ 👤 ? ♥ ──────────────────────────────────── */
#mainSettingsBtn, #mainProfileBtn, #mainHelpBtn, #mainSupportBtn {
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  color: var(--cz-ink-soft) !important;
  font-family: var(--cz-font) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 10px 15px !important;
  border-radius: var(--cz-r-md) !important;
  letter-spacing: 0 !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  transition: transform 0.13s var(--cz-press),
              background 0.18s var(--cz-ease),
              border-color 0.18s var(--cz-ease) !important;
}
#mainSettingsBtn:active, #mainProfileBtn:active,
#mainHelpBtn:active, #mainSupportBtn:active { transform: scale(0.93); }
@media (hover: hover) {
  #mainSettingsBtn:hover, #mainProfileBtn:hover,
  #mainHelpBtn:hover, #mainSupportBtn:hover {
    background: var(--cz-surface-strong) !important;
    border-color: var(--cz-hairline-lit) !important;
    color: var(--cz-ink) !important;
  }
}

/* ── Main-menu footer lines ── server status + login ────────────────────
   Both were 9px cyan monospace at 35–50% alpha: legible on the old black
   background, nearly invisible over the artwork. #mainLoginBtn additionally
   carries onmouseover/onmouseout handlers that write style.color directly. */
#serverStatusLine {
  font-family: var(--cz-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--cz-ink-dim) !important;
  padding: 5px 12px !important;
  border-radius: var(--cz-r-pill) !important;
  display: inline-block !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
}
#mainLoginBtn {
  font-family: var(--cz-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  color: var(--cz-mint) !important;
  padding: 8px 16px !important;
  border-radius: var(--cz-r-pill) !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  transition: transform 0.13s var(--cz-press), background 0.18s var(--cz-ease) !important;
}
#mainLoginBtn:active { transform: scale(0.95); }
@media (hover: hover) {
  #mainLoginBtn:hover { background: var(--cz-surface) !important; }
}

/* ── Settings footer ── SAVE / CANCEL / DEFAULT / privacy ──────────────── */
#settingsFooter {
  border-top: 1px solid var(--cz-hairline) !important;
  gap: 8px !important;
}
.sfBtn {
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  color: var(--cz-ink) !important;
  font-size: 12.5px !important;
  letter-spacing: 0.4px !important;
  padding: 10px 20px !important;
  border-radius: var(--cz-r-md) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
}
#sfSave {
  background: rgba(159, 224, 210, 0.20) !important;
  border-color: rgba(159, 224, 210, 0.55) !important;
  color: var(--cz-mint) !important;
}
#sfDefault { color: var(--cz-ink-dim) !important; }
#settingsFooter a {
  font-family: var(--cz-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: var(--cz-ink-dim) !important;
}

/* ── Settings live preview ── the black column with ◀ ▶ under it ───────── */
#settingsPreview {
  /* Shipped as a near-opaque rgba(10,12,20,0.95) block, which cuts a hard
     black rectangle out of the frosted panel. */
  background: rgba(255, 255, 255, 0.04) !important;
  border-left: 1px solid var(--cz-hairline) !important;
}
#settingsPreview canvas {
  border-radius: var(--cz-r-md) !important;
  border: 1px solid var(--cz-hairline) !important;
  background: var(--cz-surface-soft) !important;
  box-shadow: var(--cz-shadow-sm) !important;
}
.previewLabel {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 1.4px !important;
  color: var(--cz-ink-soft) !important;
}
/* ◀ and ▶ are emoji-presentation by default on most platforms, so they came
   out as orange tiles. Same fix as #uiHideBtn: blank the glyph, paint an SVG
   chevron that cannot depend on which font the device happens to ship. */
#prevPieceBtn, #nextPieceBtn {
  background-color: var(--cz-surface) !important;
  border: 1px solid var(--cz-hairline) !important;
  color: transparent !important;
  font-size: 0 !important;
  border-radius: var(--cz-r-sm) !important;
  width: 38px !important;
  height: 26px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
  transition: transform 0.13s var(--cz-press), background-color 0.18s var(--cz-ease) !important;
}
#prevPieceBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
}
#nextPieceBtn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
}
#prevPieceBtn:active, #nextPieceBtn:active { transform: scale(0.9); }

/* ── Range sliders ── `accent-color` is invisible to the palette sweep ───
   The sweep reads color / background / border, so a slider tinted purely by
   accent-color kept the old cyan. !important because the bot menu's Difficulty
   slider carries `style="accent-color:#00ccff"` inline. */
input[type="range"] { accent-color: var(--cz-mint) !important; }

/* ── Native colour inputs ── the only OS-drawn widget left on screen ───── */
.colorSwatch {
  width: 30px !important;
  height: 24px !important;
  border-radius: var(--cz-r-sm) !important;
  border: 1px solid var(--cz-hairline) !important;
  background: transparent !important;
  padding: 2px !important;
  cursor: pointer;
}
.colorSwatch::-webkit-color-swatch-wrapper { padding: 0; }
.colorSwatch::-webkit-color-swatch {
  border: none;
  border-radius: 8px;
}

/* ── Scrollbars inside the panels ──────────────────────────────────────── */
#settingsControls, #onlineLobby, #profileOverlay, .playStep, #helpOverlay {
  scrollbar-width: thin;
  scrollbar-color: var(--cz-hairline-lit) transparent;
}
#settingsControls::-webkit-scrollbar,
#onlineLobby::-webkit-scrollbar,
#profileOverlay::-webkit-scrollbar,
.playStep::-webkit-scrollbar,
#helpOverlay::-webkit-scrollbar { width: 8px; }
#settingsControls::-webkit-scrollbar-thumb,
#onlineLobby::-webkit-scrollbar-thumb,
#profileOverlay::-webkit-scrollbar-thumb,
.playStep::-webkit-scrollbar-thumb,
#helpOverlay::-webkit-scrollbar-thumb {
  background: var(--cz-hairline-lit);
  border-radius: 999px;
}
#settingsControls::-webkit-scrollbar-track,
#onlineLobby::-webkit-scrollbar-track,
#profileOverlay::-webkit-scrollbar-track,
.playStep::-webkit-scrollbar-track,
#helpOverlay::-webkit-scrollbar-track { background: transparent; }

/* ── Catch-all for overlay buttons ──────────────────────────────────────
   The online lobby, support and profile panels build their buttons in JS with
   inline style="" and no class, so nothing above reaches them. The :not()
   chain deliberately steps aside for every control that already has a rule —
   an id+element selector would otherwise outrank those class selectors and
   undo them. */
#onlineLobby button:not(.chip):not(.timeChip):not(.acct-btn):not(.acct-tab):not(.menuBtn):not(.modeBtn):not(.playModeBtn):not(.sfBtn),
#supportOverlay button:not(.chip):not(.acct-btn):not(.menuBtn):not(.modeBtn):not(.sfBtn),
#profileOverlay button:not(.chip):not(.acct-btn):not(.acct-tab):not(.menuBtn):not(.modeBtn):not(.sfBtn),
#friendPanel button:not(.chip):not(.acct-btn):not(.menuBtn):not(.modeBtn):not(.sfBtn) {
  font-family: var(--cz-font) !important;
  font-weight: 700 !important;
  color: var(--cz-ink-soft) !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-sm) !important;
  letter-spacing: 0.3px !important;
  transition: transform 0.13s var(--cz-press), background 0.18s var(--cz-ease) !important;
}
#onlineLobby button:active, #supportOverlay button:active,
#profileOverlay button:active, #friendPanel button:active { transform: scale(0.96); }

/* Section blocks inside those panels — the old skin drew them as hard black
   cards with a 1px navy edge. */
#onlineLobby .settingSection, #profileOverlay .settingSection {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-lg) !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}

/* ── Text inputs across the overlays ───────────────────────────────────── */
#onlineLobby input[type="text"],
#onlineLobby input[type="password"],
#profileOverlay input[type="text"],
.playStep input[type="text"] {
  font-family: var(--cz-font) !important;
  font-size: 13px !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-sm) !important;
  padding: 9px 11px !important;
}
#onlineLobby input::placeholder,
#profileOverlay input::placeholder { color: var(--cz-ink-dim) !important; }

/* ── Reduced motion: keep every state, drop the movement ── */
@media (prefers-reduced-motion: reduce) {
  #hud.cz-hud-enter { animation: none; }
  #czBgLayer { transition: none; }
  .cz-pill, .cz-theme-card, #menuBtn, #moveToggle, #viewToggle,
  #rotateBoardBtn, #hintBtn, #undoBtn, #hudGearBtn, #uiHideBtn {
    transition: none !important;
  }
}

/* ==========================================================================
   7. THE ICON SET
   --------------------------------------------------------------------------
   One drawing language for every symbol in the UI, replacing the emoji and
   box-drawing glyphs the interface used to mix (💡 🧩 📽 ⚙ 👤 🚩 ⚡ 🤖 🌐
   ◈ ⚑ ✥ ⬡ ♟ ☰). js/26_cozy_icons.js strips the glyph out of the text and
   tags the element .cz-ico .cz-ico-<name>; the artwork lives here.

   House style, applied to every icon below without exception:
     · 24×24 viewBox, geometry inset to a ~20px core
     · fill:none, stroke-width 2, stroke-linecap/linejoin round
     · one palette colour per icon, never two — colour carries meaning
       (gold = a hint, rose = a threat), never decoration
   The round caps and joins are what make a line icon read as soft rather than
   technical, and they are why these sit correctly next to Nunito.

   Inline SVG data URIs rather than an icon font or a sprite sheet: a font is
   another network asset that renders as tofu when it fails, and the PWA has to
   work offline.

   TWO mechanisms are in play here and both are deliberate:

   1. The artwork is carried by a custom property (--cz-ico-url), not by
      background-image on the element. Almost every one of these buttons is
      also named by an id rule earlier in this file that sets the `background`
      SHORTHAND — which resets background-image to none. Both rules are
      !important, so the id's higher specificity wins and a class-level
      background-image is silently erased. Custom properties are not part of
      that cascade fight: nothing else ever sets --cz-ico-url.

   2. The icon is drawn by ::before, not by the element's own background. A
      pseudo-element has its own background that the button's shorthand cannot
      reach, and — the reason the ✦ in #hud is a ::before too — it is not a DOM
      node, so it survives the wholesale textContent rewrites that several of
      these buttons get (#layerVisToggle cycles LTD/ALL on every click).

   ::before flows INLINE rather than being absolutely positioned: these buttons
   are a mix of static, fixed and flex children, so an absolute icon would
   anchor to a different box on each one.
   ========================================================================== */

.cz-ico::before {
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  vertical-align: -3.5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: var(--cz-ico-url);
  pointer-events: none;
}
/* Nothing left beside the icon: drop the gap and hold the emptied button open
   at a thumb-sized target. */
.cz-ico.cz-ico-only::before { margin-right: 0; }
.cz-ico.cz-ico-only {
  min-width: 44px !important;
  text-align: center !important;
}

/* ── Sizes per context ─────────────────────────────────────────────────── */
/* Top bar row 2 is a smaller control, so its icons step down with it. */
#layerVisToggle.cz-ico::before,
#threatVisionToggle.cz-ico::before,
#panBoardBtn.cz-ico::before {
  width: 14px; height: 14px; margin-right: 6px; vertical-align: -2.5px;
}
#rotateBoardBtn.cz-ico::before,
#hudGearBtn.cz-ico::before {
  width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px;
}
#mainLoginBtn.cz-ico::before {
  width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px;
}
/* The mode cards carry a title and a <div class="sub"> under it. The icon
   belongs to the title line, which is where an inline ::before puts it. */
.playModeBtn.cz-ico::before {
  width: 20px; height: 20px; margin-right: 11px; vertical-align: -4px;
}
.modeBtn.cz-ico::before {
  width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px;
}

/* The Arcade and CTF cards were tinted per mode by an inline style (#00ff88
   and #ff6600). Those two predate the palette and are the loudest thing on the
   screen; the icon carries the mode now and the card stays calm. */
#ps1Arcade, #ps1CTF {
  border-color: var(--cz-hairline) !important;
  color: var(--cz-ink) !important;
}
#ps1Arcade .sub, #ps1CTF .sub { color: var(--cz-ink-dim) !important; }

/* ── The artwork ──────────────────────────────────────────────────────────
   Default stroke is --cz-ink-soft (#cdc5ee). Where an icon carries meaning it
   takes the palette colour that means it, and nothing else does. */

.cz-ico-menu    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='7' x2='20' y2='7'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='17' x2='20' y2='17'/%3E%3C/svg%3E"); }

.cz-ico-rotate  { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpolyline points='20 3 20 7 16 7'/%3E%3C/svg%3E"); }

/* Gold, because a hint is the one warm thing in the top bar — the accent the
   old 💡 was reaching for, minus the emoji font. */
.cz-ico-bulb    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5'/%3E%3Cpath d='M10.5 21h3'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.4 10.9c.5.4.9 1 .9 1.7v.4h5v-.4c0-.7.4-1.3.9-1.7A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }

.cz-ico-undo    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 5 3.5 9.5 8 14'/%3E%3Cpath d='M3.5 9.5H14a5.5 5.5 0 0 1 0 11h-3'/%3E%3C/svg%3E"); }

.cz-ico-info    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb2e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16.5'/%3E%3Cline x1='12' y1='7.6' x2='12' y2='7.7'/%3E%3C/svg%3E"); }

/* Mint — it toggles how many layers are lit, and mint is the "active/visible"
   colour everywhere else in this skin. */
.cz-ico-layers  { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe0d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 21.5 8 12 13 2.5 8 12 3z'/%3E%3Cpolyline points='2.5 13 12 18 21.5 13'/%3E%3C/svg%3E"); }

/* A scan target, for Tile Threat Scan — you point it at a tile and it reports
   what reaches it, so a crosshair says the job and a flag never did. */
.cz-ico-scan    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cline x1='12' y1='1.5' x2='12' y2='4'/%3E%3Cline x1='12' y1='20' x2='12' y2='22.5'/%3E%3Cline x1='1.5' y1='12' x2='4' y2='12'/%3E%3Cline x1='20' y1='12' x2='22.5' y2='12'/%3E%3C/svg%3E"); }

/* Up/down only — the icon states the gesture that 18_ctf_input.js now actually
   performs. */
.cz-ico-pan     { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99fe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 7.5 12 3.5 16 7.5'/%3E%3Cpolyline points='8 16.5 12 20.5 16 16.5'/%3E%3Cline x1='12' y1='3.5' x2='12' y2='20.5'/%3E%3C/svg%3E"); }

.cz-ico-sliders { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe0d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='21' x2='5' y2='14'/%3E%3Cline x1='5' y1='10' x2='5' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='19' y1='21' x2='19' y2='16'/%3E%3Cline x1='19' y1='12' x2='19' y2='3'/%3E%3Cline x1='2' y1='12' x2='8' y2='12'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='16' y1='16' x2='22' y2='16'/%3E%3C/svg%3E"); }

.cz-ico-play    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe0d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.2v13.6L19 12 8 5.2z'/%3E%3C/svg%3E"); }

.cz-ico-puzzle  { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99fe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.2a2.5 2.5 0 0 1 5 0V5.5h3.3a1 1 0 0 1 1 1v3.3h1.3a2.5 2.5 0 0 1 0 5h-1.3v3.3a1 1 0 0 1-1 1h-3.3v-1.3a2.5 2.5 0 0 0-5 0v1.3H6.2a1 1 0 0 1-1-1V6.5a1 1 0 0 1 1-1h3.3V4.2z'/%3E%3C/svg%3E"); }

.cz-ico-film    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='3'/%3E%3Cline x1='7.5' y1='4.5' x2='7.5' y2='19.5'/%3E%3Cline x1='16.5' y1='4.5' x2='16.5' y2='19.5'/%3E%3Cline x1='2.5' y1='12' x2='21.5' y2='12'/%3E%3C/svg%3E"); }

.cz-ico-gear    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3'/%3E%3C/svg%3E"); }

.cz-ico-user    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb2e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-1.5a4.5 4.5 0 0 0-4.5-4.5h-7A4.5 4.5 0 0 0 4 19.5V21'/%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3C/svg%3E"); }

/* Blush rather than a red heart — it is a support link, not an alert. */
.cz-ico-heart   { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b4c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6a4.6 4.6 0 0 0-6.6 0L12 7.8 10.2 6a4.6 4.6 0 1 0-6.6 6.5l8.4 8.3 8.4-8.3A4.6 4.6 0 0 0 20.4 6z'/%3E%3C/svg%3E"); }

.cz-ico-login   { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99fe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3.5h4.5a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H14'/%3E%3Cpolyline points='9 16.5 13.5 12 9 7.5'/%3E%3Cline x1='13.5' y1='12' x2='3.5' y2='12'/%3E%3C/svg%3E"); }

.cz-ico-pawn    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f1e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6.5' r='3.3'/%3E%3Cpath d='M8.7 10.6h6.6c0 2.6-1.3 3.9-1.8 5.6h-3c-.5-1.7-1.8-3-1.8-5.6z'/%3E%3Cpath d='M6.5 20.5h11c0-1.9-1.4-2.9-3.5-2.9h-4c-2.1 0-3.5 1-3.5 2.9z'/%3E%3C/svg%3E"); }

.cz-ico-zap     { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.5 4.8 13.4h6.3l-.9 8.1 8.6-11h-6.4l.8-8z'/%3E%3C/svg%3E"); }

.cz-ico-flag    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8b4c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5.5' y1='21' x2='5.5' y2='3.5'/%3E%3Cpath d='M5.5 4.5h11l-2 4 2 4h-11'/%3E%3C/svg%3E"); }

.cz-ico-users   { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fb2e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 21v-1.5a4 4 0 0 0-4-4h-5a4 4 0 0 0-4 4V21'/%3E%3Ccircle cx='9' cy='7.5' r='3.6'/%3E%3Cpath d='M22 21v-1.5a4 4 0 0 0-3-3.8'/%3E%3Cpath d='M16 4.1a3.6 3.6 0 0 1 0 6.9'/%3E%3C/svg%3E"); }

.cz-ico-bot     { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe0d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8.5' width='16' height='11.5' rx='3'/%3E%3Cline x1='9' y1='13.5' x2='9' y2='15'/%3E%3Cline x1='15' y1='13.5' x2='15' y2='15'/%3E%3Cline x1='12' y1='8.5' x2='12' y2='5.6'/%3E%3Ccircle cx='12' cy='4' r='1.6'/%3E%3Cline x1='1.8' y1='13' x2='1.8' y2='16'/%3E%3Cline x1='22.2' y1='13' x2='22.2' y2='16'/%3E%3C/svg%3E"); }

.cz-ico-globe   { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd6e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cpath d='M12 3a13.5 13.5 0 0 1 0 18 13.5 13.5 0 0 1 0-18z'/%3E%3C/svg%3E"); }

.cz-ico-back    { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4.5' y2='12'/%3E%3Cpolyline points='10.5 18 4.5 12 10.5 6'/%3E%3C/svg%3E"); }

/* ── TTS threat-count badge ───────────────────────────────────────────────
   The last piece of the old skin left inside the TTS feature: a 2px-radius
   black box with a monospace orange count, following the cursor across a
   screen of rounded pastel. The plates themselves are rounded off by
   window.CZ_TV in js/25_cozy_scene.js; this is their label. */
#threatCountBadge {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  color: var(--cz-ink) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline-lit) !important;
  border-radius: var(--cz-r-sm) !important;
  padding: 6px 11px !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
}

/* ==========================================================================
   8. HELP OVERLAY + LEFTOVER DUPLICATE STATUS
   ========================================================================== */

/* ── Only one connection indicator ─────────────────────────────────────────
   19_online.js ships TWO readouts of the same ONLINE._status: #onlineStatusBar
   (the bottom strip) and #onlineWidget (a card floating at mid-left). Both are
   updated by the same function on the same tick, so they always said the same
   thing — "CONNECTING" twice on one screen, one of them right across the
   board. The bottom strip is the keeper: it is positioned against the dock, so
   it belongs to the UI furniture instead of hovering over the scene.

   display needs !important because onlineUpdateStatusBar() writes
   style.display = 'block' on the widget on every update. */
#onlineWidget { display: none !important; }

/* ── Help overlay ── the last panel still wearing the pre-redesign skin ────
   Reachable from the dock's ? during a match, so it is not a rarely-seen
   corner. Every element inside carries a hardcoded inline style="" and most
   have no id or class, hence the structural selectors and the !important. */
#helpOverlay {
  background: rgba(20, 16, 46, 0.72) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  font-family: var(--cz-font) !important;
  color: var(--cz-ink) !important;
}
/* The card */
#helpOverlay > div {
  width: min(360px, calc(100vw - 32px)) !important;
  background: var(--cz-surface-strong) !important;
  border: 1px solid var(--cz-hairline) !important;
  border-radius: var(--cz-r-xl) !important;
  box-shadow: var(--cz-shadow-lg), var(--cz-bevel) !important;
  -webkit-backdrop-filter: var(--cz-blur);
  backdrop-filter: var(--cz-blur);
  padding: 22px 20px !important;
}
/* Title row: "? HELP" */
#helpOverlay > div > div:first-child > div:first-child {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.6px !important;
  color: var(--cz-ink) !important;
}
#helpClose {
  color: var(--cz-ink-soft) !important;
  font-size: 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--cz-r-pill) !important;
  background: var(--cz-surface-soft) !important;
  border: 1px solid var(--cz-hairline) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdc5ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6.5' y1='6.5' x2='17.5' y2='17.5'/%3E%3Cline x1='17.5' y1='6.5' x2='6.5' y2='17.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  transition: transform 0.13s var(--cz-press) !important;
}
#helpClose:active { transform: scale(0.9); }

#helpTutorialBtn {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.4px !important;
  color: var(--cz-ink) !important;
  background: linear-gradient(180deg,
              rgba(159, 224, 210, 0.26), rgba(143, 178, 232, 0.20)) !important;
  border: 1px solid rgba(159, 224, 210, 0.42) !important;
  border-radius: var(--cz-r-lg) !important;
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  padding: 13px 16px !important;
  transition: transform 0.13s var(--cz-press) !important;
}
#helpTutorialBtn:active { transform: scale(0.97); }
#helpTutorialBtn div {
  font-family: var(--cz-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  color: var(--cz-ink-dim) !important;
  margin-top: 4px !important;
}

/* Section headers — every "IN-GAME CONTROLS" / "MUSIC" style caption. */
#helpOverlay > div > div > div:first-child {
  font-family: var(--cz-font) !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  color: var(--cz-ink-dim) !important;
  margin-bottom: 9px !important;
}
/* Key/value tables and the prose blocks. */
#helpOverlay table { font-size: 11.5px !important; letter-spacing: 0.2px !important; }
#helpOverlay td:first-child  { color: var(--cz-ink-soft) !important; padding: 5px 0 !important; font-weight: 700 !important; }
#helpOverlay td + td         { color: var(--cz-ink-dim)  !important; padding: 5px 0 !important; }
#helpOverlay > div > div > div:last-child { font-size: 11.5px !important; line-height: 1.9 !important; color: var(--cz-ink-dim) !important; }
#helpOverlay a { color: var(--cz-cyan) !important; text-decoration: none !important; border-bottom: 1px solid rgba(143, 214, 232, 0.4); }

/* Inline icons inside the guide tables and the wizard's feature list. These
   are bare <i> elements — the ::before is the whole content. */
.cz-ico-key::before {
  width: 14px !important;
  height: 14px !important;
  margin-right: 7px !important;
  vertical-align: -2.5px !important;
}
.cz-ico-book { --cz-ico-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fe0d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h5.5A3.5 3.5 0 0 1 12 8v12a3 3 0 0 0-3-3H3z'/%3E%3Cpath d='M21 4.5h-5.5A3.5 3.5 0 0 0 12 8v12a3 3 0 0 1 3-3h6z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   9. MENU / GAME SEPARATION AND THE BOTTOM STACK ON PHONES
   Everything here came out of screenshots from a real iPhone — none of it is
   reachable at desktop widths, and the earlier probes missed all of it because
   Chrome's --window-size is the OS window, not the viewport (390 asked for
   gave a 500px page). tools/cdp.py now drives Emulation.setDeviceMetricsOverride.
   ========================================================================== */

/* ── In-game controls must not appear on the menus ─────────────────────────
   js/24_cozy_ui.js sets .cz-ingame on <body> whenever the board is live.
   Without this the main menu carried a "White to move" pill across the AURORA
   CHESS title plus MOVES / TILT in the corner, and the connection pill sat on
   top of LOGIN / SIGN UP. */
body:not(.cz-ingame) #hud,
body:not(.cz-ingame) #moveToggle,
body:not(.cz-ingame) #viewToggle,
body:not(.cz-ingame) #menuBtn,
body:not(.cz-ingame) #onlineStatusBar { display: none !important; }

/* The main menu states the server condition itself, in #serverStatusLine
   ("⬤ SERVER OFFLINE" / "⬤ SERVER ONLINE"), so the floating pill was a second
   copy of the same fact — the same duplication #onlineWidget already had. */

/* ── The stray second help button ─────────────────────────────────────────
   #gameHelpBtn is a 26px circle bottom-right that opens #gameHelpPanel, a
   slide-in controls reference. The dock's ? opens #helpOverlay, which now
   carries the same IN-GAME CONTROLS and HUD BUTTON GUIDE tables. Two help
   buttons, one of them unstyled and sitting on top of the minimap. */
#gameHelpBtn { display: none !important; }

/* ── Minimap ── it collided with the dock on every phone in portrait ───────
   _layoutMM() in 17_themes.js pins it to `bottom:52px` full-width, while the
   dock occupies 38–78px, so Quick / ? / the eye sat on the layer thumbnails
   (measured overlaps: 83×25, 40×26, 42×16). It writes the wrapper's cssText
   wholesale on orientation change, so these have to be !important — but it
   only rewrites when the orientation actually flips, and inline styles carry
   no precedence against !important.

   Scoped to the same aspect ratio _layoutMM() itself branches on (wide =
   innerWidth / innerHeight > 1.3) so the two never disagree about which
   layout is in force. */
@media (max-aspect-ratio: 13/10) {
  #minimap {
    bottom: calc(var(--cz-bottom-2) + 6px + env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }
  /* Pushed above the minimap: on a 320px-wide phone the centred thumbnails
     and this left-aligned pill would otherwise cross. */
  #onlineStatusBar {
    bottom: calc(var(--cz-bottom-3) + 6px + env(safe-area-inset-bottom)) !important;
  }
  #offlineBanner {
    bottom: calc(var(--cz-bottom-3) + 54px + env(safe-area-inset-bottom)) !important;
  }
}
/* Landscape: the column hugs `right:8px`, which on a notched phone held
   sideways is under the rounded corner / camera housing. */
@media (min-aspect-ratio: 13/10) {
  #minimap {
    right: calc(8px + env(safe-area-inset-right)) !important;
    gap: 5px !important;
  }
}

/* The thumbnails are drawn as opaque near-black canvases, which read as holes
   punched in the artwork. They cannot be recoloured from CSS (the canvas owns
   its pixels), but a frame and a lift stop them reading as damage. */
#minimap canvas {
  box-shadow: var(--cz-shadow-sm), var(--cz-bevel) !important;
  border: 1px solid var(--cz-hairline) !important;
}

/* ==========================================================================
   10. TOP BAR — FITTING ROW 1 ON NARROW PHONES
   --------------------------------------------------------------------------
   Row 1 is menu · 180° · hint · undo · [spacer] · MOVES · VIEW, right-anchored
   by #czSpacer. Its content plus gaps measures 359px, so the row only fits
   while the viewport is wider than ~375px + margins. Below that the spacer
   collapses to its 4px minimum and the overflow leaves the last pill — the
   camera-mode toggle — hanging off the right edge: 6.9px clipped at 360px,
   46.9px at 320px. Because it is the LAST item it is always the one that goes,
   and it is the one control whose LABEL IS ITS STATE (FREE / TILT / FLAT /
   SLICE), so losing it costs both the button and the readout.

   The width is not even constant: those four labels measure 46.3–56px, so the
   row silently grows by ~10px when the player cycles the camera, and a device
   sitting inside the margin flips from fine to clipped on a button press.
   Anything relying on ~8px of slack (the default 390/430 case) is not a fit.
   ========================================================================== */

/* Nothing may ever leave the viewport. If a width, a longer label or the
   viewer's larger-text setting still overruns the row after the tightening
   below, the surplus wraps onto a new line — clipped is unreachable, wrapped
   is merely taller, and the bar sits over empty sky. */
.cz-toprow { flex-wrap: wrap; row-gap: 6px; }

/* Under ~400px the "180°" label is what stops the row fitting; the ⟳ icon
   already says the same thing and the title attribute still spells it out. */
@media (max-width: 400px) {
  #czTopBar { gap: 6px; }
  .cz-toprow { gap: 5px; }
  #rotateBoardBtn {
    font-size: 0 !important;                 /* the ::before icon is unaffected */
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
  #rotateBoardBtn.cz-ico::before { margin-right: 0 !important; }
  #moveToggle, #viewToggle { padding: 9px 9px !important; }
}

/* Small phones (SE-class, 320–360). Row 1 keeps every control; the labels that
   remain are the ones carrying state. */
@media (max-width: 360px) {
  #czTopBar { left: 6px; right: 6px; }
  .cz-toprow { gap: 4px; }
  #menuBtn { padding: 9px 9px !important; }
  #hintBtn, #undoBtn, #puzzleInfoToggle { padding: 9px 8px !important; }
  #moveToggle, #viewToggle { padding: 9px 7px !important; font-size: 11.5px !important; }
  #layerVisToggle, #threatVisionToggle, #panBoardBtn {
    padding: 7px 8px !important; font-size: 10.5px !important;
  }
}

/* The camera toggle is the row's last item and therefore the first casualty of
   any overflow. Reserving its widest label's width stops the row reflowing —
   and stops it slipping off the edge — when the player cycles FREE → SLICE. */
#viewToggle { min-width: 58px !important; text-align: center !important; }
@media (max-width: 400px) { #viewToggle { min-width: 54px !important; } }
@media (max-width: 360px) { #viewToggle { min-width: 50px !important; } }
