/* ═══════════════════════════════════════════════════════════════
   POUR PARTY — Multi-Theme Engine
   Themes: Amber (default) · Jungle · Sky Blue · Midnight · Rose Blush
           — each theme owns one fixed background image (--bg-image)
           and a color scheme tuned directly to that art's own
           accent colors, so every button/icon/text stays clearly
           readable on top of it. ─────────────────────────────────
═══════════════════════════════════════════════════════════════ */
/* Fonts: Crimson Pro and DM Sans are loaded via Google Fonts CDN (external network request required).
   CDN URL: https://fonts.googleapis.com
   To bundle fonts locally instead: download the font files, place them in a /fonts/ folder,
   remove this @import, and replace with @font-face declarations pointing to the local files. */
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap");
/* Cartoonic Mode font (Settings → Appearance → Cartoonic Mode) */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap");

/* ── THEME: AMBER (default) — bg-amber.webp — warm cream scene with
   an orange lollipop/leaf border. Deep burnt-orange ink on the
   cream paper reads cleanly straight off the art itself ──────── */
:root,
body[data-theme="warm"] {
  --bg-image: url("../images/bg-amber.webp");
  --paper: #fff8f0;
  --paper2: #fbe8d3;
  --paper3: #f0cd9e;
  --ink: #7a3410;
  --ink-mid: #834216;
  --ink-dim: #9d612f;
  --ink-faint: #edc79a;
  --accent: #e8720f;
  --accent-lt: #f5934a;
  --accent-bg: rgba(232, 114, 15, 0.14);
  --blue: #e8720f;
  --blue-lt: rgba(232, 114, 15, 0.1);
  --row-hl: rgba(232, 114, 15, 0.07);
  --same-hl: rgba(232, 114, 15, 0.14);
  --error-bg: rgba(200, 30, 30, 0.12);
  --error-txt: #c81e1e;
  --success: #2f8a4a;
  --given-bg: rgba(122, 52, 16, 0.06);
  --grid-thin: #f0cd9e;
  --grid-thick: #dba766;
  --box-border: #7a3410;
  --cell-bg: #fffdf9;
  --grid-bg: #fffdf9;
  --shadow: 0 4px 20px rgba(120, 52, 16, 0.16);
  --radius: 8px;
  --screen-bg: transparent;
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: #f0cd9e;
  --btn-primary-bg: #e8720f;
  --btn-primary-color: #fff8f0;
  --btn-icon-white: #fffaf4;
  --bg-overlay: rgba(120, 52, 16, 0.05);
  --grid-wrap-bg: #fbe8d3;
  --grid-wrap-shadow: 0 8px 32px rgba(120, 52, 16, 0.18);
  --grid-wrap-border: #e0b37e;
}

/* ── THEME: JUNGLE — bg-jungle.webp — pastel blue sky with green
   and violet meadow hills. Deep indigo ink stays crisp against the
   light sky-blue paper and the art's own blue/purple palette ──── */
body[data-theme="jungle"] {
  --bg-image: url("../images/bg-jungle.webp");
  --paper: #f7f9fc;
  --paper2: #e9eef8;
  --paper3: #cdd9ef;
  --ink: #16264f;
  --ink-mid: #293962;
  --ink-dim: #4c5b86;
  --ink-faint: #c3ceec;
  --accent: #3d5fdb;
  --accent-lt: #6a86e8;
  --accent-bg: rgba(61, 95, 219, 0.14);
  --blue: #3d5fdb;
  --blue-lt: rgba(61, 95, 219, 0.1);
  --row-hl: rgba(61, 95, 219, 0.07);
  --same-hl: rgba(61, 95, 219, 0.14);
  --error-bg: rgba(200, 30, 30, 0.12);
  --error-txt: #c81e1e;
  --success: #2f8a4a;
  --given-bg: rgba(22, 38, 79, 0.06);
  --grid-thin: #cdd9ef;
  --grid-thick: #93aee0;
  --box-border: #16264f;
  --cell-bg: #fdfeff;
  --grid-bg: #fdfeff;
  --shadow: 0 4px 20px rgba(20, 40, 90, 0.16);
  --radius: 8px;
  --screen-bg: transparent;
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: #cdd9ef;
  --btn-primary-bg: #3d5fdb;
  --btn-primary-color: #f7f9fc;
  --btn-icon-white: #fbfdff;
  --bg-overlay: rgba(20, 40, 90, 0.05);
  --grid-wrap-bg: #e9eef8;
  --grid-wrap-shadow: 0 8px 32px rgba(20, 40, 90, 0.18);
  --grid-wrap-border: #a9bde3;
}

/* ── THEME: SKY BLUE — bg-obsidian.webp — mint/coral/violet confetti
   scene. Deep teal ink on a mint-tinted paper pulls its color right
   from the art's strongest recurring accent ───────────────────── */
body[data-theme="neon"] {
  --bg-image: url("../images/bg-obsidian.webp");
  --paper: #fbfdfa;
  --paper2: #e6f5ee;
  --paper3: #c3e8d8;
  --ink: #0b4a3d;
  --ink-mid: #165e4e;
  --ink-dim: #3c7a6c;
  --ink-faint: #b9e2d4;
  --accent: #0f9c7e;
  --accent-lt: #3ec2a1;
  --accent-bg: rgba(15, 156, 126, 0.14);
  --blue: #0f9c7e;
  --blue-lt: rgba(15, 156, 126, 0.1);
  --row-hl: rgba(15, 156, 126, 0.07);
  --same-hl: rgba(15, 156, 126, 0.14);
  --error-bg: rgba(200, 30, 30, 0.12);
  --error-txt: #c81e1e;
  --success: #2f8a4a;
  --given-bg: rgba(11, 74, 61, 0.06);
  --grid-thin: #c3e8d8;
  --grid-thick: #7cc7ac;
  --box-border: #0b4a3d;
  --cell-bg: #ffffff;
  --grid-bg: #ffffff;
  --shadow: 0 4px 20px rgba(11, 74, 61, 0.15);
  --radius: 8px;
  --screen-bg: transparent;
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: #c3e8d8;
  --btn-primary-bg: #0f9c7e;
  --btn-primary-color: #ffffff;
  --btn-icon-white: #ffffff;
  --bg-overlay: rgba(11, 74, 61, 0.05);
  --grid-wrap-bg: #e6f5ee;
  --grid-wrap-shadow: 0 8px 32px rgba(11, 74, 61, 0.15);
  --grid-wrap-border: #8ecdb4;
}

/* ── THEME: MIDNIGHT — bg-midnight.webp — black candy-party scene
   with gold, purple and teal sweets in the corners. A dark paper
   with warm gold ink (lifted from the art's own gold candy) and a
   violet accent (from the art's purple candy) keeps this the one
   true dark theme ───────────────────────────────────────────── */
body[data-theme="midnight"] {
  --bg-image: url("../images/bg-midnight.webp");
  --paper: #121016;
  --paper2: #1b1720;
  --paper3: #2a2433;
  --ink: #f2c14e;
  --ink-mid: #d9a53f;
  --ink-dim: #a8823f;
  --ink-faint: #4a3f2a;
  --accent: #a870d8;
  --accent-lt: #c79bea;
  --accent-bg: rgba(168, 112, 216, 0.18);
  --blue: #a870d8;
  --blue-lt: rgba(168, 112, 216, 0.12);
  --row-hl: rgba(168, 112, 216, 0.08);
  --same-hl: rgba(168, 112, 216, 0.16);
  --error-bg: rgba(220, 60, 50, 0.18);
  --error-txt: #ff8a75;
  --success: #4fd88a;
  --given-bg: rgba(242, 193, 78, 0.06);
  --grid-thin: #2a2433;
  --grid-thick: #4a3f5e;
  --box-border: #f2c14e;
  --cell-bg: #1a1620;
  --grid-bg: #100e14;
  --shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  --radius: 8px;
  --screen-bg: transparent;
  --card-bg: rgba(18, 16, 22, 0.82);
  --card-border: #2a2433;
  --btn-primary-bg: #a870d8;
  --btn-primary-color: #14121a;
  --btn-icon-white: #fff6e0;
  --bg-overlay: rgba(0, 0, 0, 0.35);
  --grid-wrap-bg: #1b1720;
  --grid-wrap-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --grid-wrap-border: #4a3f5e;
}

/* ════════════════════════════════════════════════
   THEME: ROSE BLUSH (5th theme, key stays "rosegold")
   bg-crimson.webp — cream candy scene with a coral
   lollipop and pink/teal/gold sweets in the corners
════════════════════════════════════════════════ */
body[data-theme="rosegold"] {
  --bg-image: url("../images/bg-crimson.webp");
  --paper: #fffaf7;
  --paper2: #fbe9e4;
  --paper3: #f3cec3;
  --ink: #7a2a30;
  --ink-mid: #83363b;
  --ink-dim: #b3494f;
  --ink-faint: #edc3c0;
  --accent: #d9506a;
  --accent-lt: #ea7d90;
  --accent-bg: rgba(217, 80, 106, 0.14);
  --blue: #d9506a;
  --blue-lt: rgba(217, 80, 106, 0.1);
  --row-hl: rgba(217, 80, 106, 0.07);
  --same-hl: rgba(217, 80, 106, 0.14);
  --error-bg: rgba(200, 30, 30, 0.12);
  --error-txt: #c81e1e;
  --success: #2f8a4a;
  --given-bg: rgba(122, 42, 48, 0.06);
  --grid-thin: #f3cec3;
  --grid-thick: #dd9a95;
  --box-border: #7a2a30;
  --cell-bg: #fffdfb;
  --grid-bg: #fffdfb;
  --shadow: 0 4px 20px rgba(122, 42, 48, 0.16);
  --radius: 8px;
  --screen-bg: transparent;
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: #f3cec3;
  --btn-primary-bg: #d9506a;
  --btn-primary-color: #fffaf7;
  --btn-icon-white: #fffaf7;
  --bg-overlay: rgba(122, 42, 48, 0.05);
  --grid-wrap-bg: #fbe9e4;
  --grid-wrap-shadow: 0 8px 32px rgba(122, 42, 48, 0.18);
  --grid-wrap-border: #e3aca3;
}

/* Monochrome brand — no text-shadow (logo/headings stay flat per theme ink color) */

/* Monochrome popup rule line */
body[data-theme="rosegold"] .popup-rule-line {
  background: var(--accent);
  opacity: 0.6;
}

/* Monochrome — accent-colored text is too close to the background to
   read; keep the accent underline but lighten the label itself. */
body[data-theme="rosegold"] .lb-tab.active {
  color: var(--ink);
}

/* Rose Blush theme preview */
.theme-preview--rosegold {
  background: #f3cec3;
  border: 1.5px solid #d9506a;
  position: relative;
  overflow: hidden;
}
.theme-preview--rosegold .tp-grid {
  border-color: #7a2a30;
  border-radius: 3px;
  overflow: hidden;
}
.theme-preview--rosegold .tp-cell {
  background: #fffdfb;
  border-right: 1px solid #f3cec3;
  border-bottom: 1px solid #f3cec3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(9px, 2.5vw, 13px);
  font-weight: 600;
  color: #d9506a;
  aspect-ratio: 1;
}
.theme-preview--rosegold .tp-cell.tp-given {
  background: rgba(122, 42, 48, 0.06);
  color: #7a2a30;
}
.theme-preview--rosegold .tp-cell.tp-sel {
  background: rgba(217, 80, 106, 0.18);
  color: #d9506a;
}
.theme-preview--rosegold .tp-cell.tp-br {
  border-right: 2px solid #dd9a95;
}
.theme-preview--rosegold .tp-cell.tp-bb {
  border-bottom: 2px solid #dd9a95;
}

/* ════════════════════════════════════════════════
   PARTICLES CANVAS
════════════════════════════════════════════════ */
#particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ════════════════════════════════════════════════
   CONFETTI CANVAS (complete screen)
════════════════════════════════════════════════ */
#confetti-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#s-complete > *:not(#confetti-canvas) {
  position: relative;
  z-index: 1;
}

/* NOTE: .lobby-xp-bar / .lobby-xp-level / .lobby-xp-track / .lobby-xp-fill /
   .lobby-xp-pts are styled in the LOBBY SCREEN section below, as part of
   the dashboard card design. */

/* ════════════════════════════════════════════════
   ACHIEVEMENT BADGES (lobby)
════════════════════════════════════════════════ */
.lobby-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
  margin-bottom: 0;
  min-height: 0;
}
.lobby-badge {
  padding: 4px 10px;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: 20px;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 5px;
  animation: badgePop 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.lobby-badge.gold {
  border-color: var(--accent);
  color: var(--accent);
}
@keyframes badgePop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Achievement banner on complete screen */
.achievement-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
  max-width: 300px;
  width: 100%;
}
.achievement-item {
  padding: 8px 14px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  text-align: center;
  animation: badgePop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ════════════════════════════════════════════════
   XP display on complete screen
════════════════════════════════════════════════ */
#comp-xp {
  color: var(--success) !important;
}

/* ════════════════════════════════════════════════
   HINTS REMAINING display
════════════════════════════════════════════════ */
#hints-remaining-wrap {
  display: none;
}
#hints-remaining-wrap.visible {
  display: flex;
}
#stat-combo-wrap {
  display: none;
}
#stat-combo-wrap.visible {
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════════════
   TIME ATTACK BAR
════════════════════════════════════════════════ */
.time-attack-bar {
  width: 100%;
  max-width: 520px;
  height: 3px;
  background: var(--ink-faint);
  display: none;
  margin-bottom: 4px;
  border-radius: 2px;
  overflow: hidden;
  align-self: center;
}
.time-attack-bar.visible {
  display: block;
}
.time-attack-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition:
    width 1s linear,
    background 0.5s;
  width: 100%;
}
.time-attack-fill.danger {
  background: var(--error-txt);
}

/* ════════════════════════════════════════════════
   CUSTOM PUZZLE IMPORT ROW
════════════════════════════════════════════════ */
.import-row {
  width: 100%;
  max-width: 360px;
  margin-bottom: 12px;
}
.import-toggle {
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: color 0.18s;
}
.import-toggle:hover {
  color: var(--accent);
}
.import-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.import-panel {
  display: none;
  gap: 8px;
  margin-top: 8px;
}
.import-panel.open {
  display: flex;
}
.import-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  outline: none;
  backdrop-filter: blur(8px);
  transition: border-color 0.18s;
}
.import-input:focus {
  border-color: var(--accent);
}
.import-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s;
  white-space: nowrap;
}
.import-btn:hover {
  background: var(--accent);
  color: var(--btn-primary-color);
}

/* ════════════════════════════════════════════════
   LEADERBOARD SCREEN
════════════════════════════════════════════════ */
#s-leaderboard,
#s-achievements {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#s-leaderboard .page-header,
#s-achievements .page-header {
  align-self: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 460px;
}

#s-leaderboard .lb-tabs,
#s-leaderboard .lb-clear {
  align-self: center;
}

#s-leaderboard .lb-list,
#s-achievements .lb-list {
  align-self: center;
}
.lb-tabs {
  display: flex;
  gap: 0;
  max-width: 460px;
  align-self: center;
  width: 100%;
  padding: 12px clamp(18px, 5vw, 32px) 0;
}
.lb-tab {
  flex: 1;
  padding: 8px;
  background: none;
  border: none;
  border-bottom: 2px solid var(--ink-faint);
  color: var(--ink-dim);
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s;
}
.lb-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.lb-list {
  flex: 1;
  max-width: 460px;
  align-self: center;
  width: 100%;
  padding: clamp(14px, 3vw, 20px) clamp(18px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.lb-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  animation: badgePop 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.lb-rank {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-dim);
  min-width: 24px;
  text-align: center;
}
.lb-entry:nth-child(1) .lb-rank {
  color: #d4a820;
}
.lb-entry:nth-child(2) .lb-rank {
  color: #a0a8b0;
}
.lb-entry:nth-child(3) .lb-rank {
  color: #c07840;
}
.lb-time {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  flex: 1;
}
.lb-meta {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  text-transform: uppercase;
  text-align: right;
}
.lb-empty {
  text-align: center;
  color: var(--ink-dim);
  font-size: 0.75rem;
  padding: 40px 0;
  letter-spacing: 0.1em;
}
.lb-clear {
  align-self: center;
  background: none;
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 16px;
  cursor: pointer;
  margin: 0 0 24px;
  transition: all 0.18s;
}
.lb-clear:hover {
  border-color: var(--error-txt);
  color: var(--error-txt);
}

/* ════════════════════════════════════════════════
   ACHIEVEMENTS PAGE (reuses .lb-list / .lb-entry)
════════════════════════════════════════════════ */
.lb-entry.locked {
  opacity: 0.45;
}
.lb-entry.locked .lb-rank {
  color: var(--ink-faint);
}
.lb-entry.locked .lb-time {
  color: var(--ink-dim);
}
.lb-entry.ach-entry .lb-rank svg {
  width: 1.3em;
  height: 1.3em;
  fill: currentColor;
}
.lb-entry:not(.locked).ach-entry .lb-rank {
  color: var(--accent);
}

/* "See More" pill in the lobby badges row */
.lobby-badge-more {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  border-color: var(--accent);
  color: var(--accent);
}
.lobby-badge-more:hover {
  background: var(--accent-bg);
}

/* ════════════════════════════════════════════════
   AD POPUP SCREEN
════════════════════════════════════════════════ */

/* Ad popup — full-screen layout, no card wrapper */
.sponsor-card {
  max-width: 400px !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.sponsor-header {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}
.sponsor-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.7rem, 7.5vw, 3.2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 6px;
  white-space: normal;
}
.sponsor-title br {
  content: "";
}
.sponsor-sub {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--ink-mid);
  text-transform: uppercase;
}

.sponsor-slot-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.sponsor-slot-label {
  font-size: 0.5rem;
  letter-spacing: 0.4em;
  color: var(--ink-mid);
  text-transform: uppercase;
  align-self: center;
  text-align: center;
}
.sponsor-iframe {
  width: 300px;
  height: 250px;
  border: 0;
  display: block;
}
.sponsor-slot {
  width: 300px;
  height: 250px;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sponsor-placeholder {
  text-align: center;
  color: var(--ink-dim);
  padding: 20px;
}
.sponsor-placeholder-size {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.sponsor-placeholder-hint {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--ink-mid);
}

.sponsor-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.sponsor-thanks {
  font-size: 0.5rem;
  letter-spacing: 0.4em;
  color: var(--ink-mid);
  text-transform: uppercase;
}
.sponsor-skip-btn {
  padding: 0.75em 2em;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: var(--radius);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s,
    opacity 0.2s;
  width: 100%;
}
.sponsor-skip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sponsor-skip-btn:not(:disabled):hover {
  background: var(--accent);
  color: var(--btn-primary-color);
}

/* ════════════════════════════════════════════════
   DAILY CHALLENGE DIFF CARD
════════════════════════════════════════════════ */
.diff-card[data-diff="daily"] {
  grid-column: 1 / -1;
}
.diff-card[data-diff="daily"] .diff-name {
  position: relative;
}
.daily-badge {
  display: inline-block;
  font-size: 0.38rem;
  letter-spacing: 0.18em;
  color: var(--btn-primary-color);
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 4px;
}

/* Daily done state */
.diff-card[data-diff="daily"].daily-done {
  opacity: 0.6;
}
.diff-card[data-diff="daily"].daily-done::after {
  content: "\2713 Done today";
  display: block;
  font-size: 0.48rem;
  letter-spacing: 0.18em;
  color: var(--success);
  margin-top: 3px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════
   STAT-TIME hidden state (when timer disabled)
════════════════════════════════════════════════ */
#stat-time-wrap.hidden {
  display: none;
}

/* ════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow: hidden;
  transition:
    background 0.4s,
    color 0.4s;
}

/* ── BACKGROUND: fixed per-theme image + matching gradient overlay ─── */
/* Each theme now owns exactly one background image (--bg-image),
   set alongside its color variables above. No user-facing picker. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  z-index: -2;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: -1;
  transition: background 0.4s;
}

/* Neon City — subtle scanline texture layered over its image */
body[data-theme="neon"]::after {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(6, 96, 214, 0.025) 2px,
      rgba(6, 96, 214, 0.025) 4px
    ),
    var(--bg-image);
  background-size: auto, cover;
  background-position: auto, center;
}

/* ════════════════════════════════════════════════
   SCREENS
════════════════════════════════════════════════ */
.screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: safe center;
  justify-content: safe center;
  padding: 20px;
  overflow-y: auto;
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}
.screen.out {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97) translateY(10px);
}

#s-loading {
  background: transparent;
}

/* ════════════════════════════════════════════════
   SHARED BRAND
════════════════════════════════════════════════ */
.loading-logo,
.brand-logo {
  display: block;
  width: clamp(130px, 55vw, 420px);
  height: auto;
  margin: 0 auto clamp(14px, 2.5vh, 22px);
}
.brand {
  text-align: center;
}

.loading-sub {
  font-size: clamp(0.65rem, 2.2vw, 0.85rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-align: center;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: clamp(24px, 5vh, 40px);
}
.brand-sub {
  font-size: clamp(0.65rem, 2.2vw, 0.85rem);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-align: center;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: clamp(30px, 6vh, 52px);
}

/* Every theme's logo/heading text simply uses that theme's own --ink
   color with no glow/shadow, so it reads as flat, clean text sitting
   directly on the wallpaper (each was chosen for contrast against
   that theme's own background art). */

/* ════════════════════════════════════════════════
   LOADING SCREEN
════════════════════════════════════════════════ */
#s-loading {
  gap: 0;
  z-index: 50;
}

.loading-bar-wrap {
  width: clamp(160px, 44vw, 240px);
  height: 2px;
  background: var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-lt));
  border-radius: 2px;
  transition: width 0.08s linear;
}
.loading-hint {
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-align: center;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════
   LOBBY SCREEN
════════════════════════════════════════════════ */
#s-lobby {
  padding: clamp(18px, 4vh, 32px);
  gap: 0;
}

/* ── Corner-pinned icon buttons ── */
.lobby-corner {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: clamp(16px, 3vh, 22px);
}
.lobby-corner-tl {
  top: clamp(16px, 4vh, 28px);
  left: clamp(16px, 4vw, 28px);
  flex-direction: column;
  align-items: flex-start;
}
.lobby-corner-tr {
  top: clamp(16px, 4vh, 28px);
  right: clamp(16px, 4vw, 28px);
  flex-direction: column;
  align-items: flex-end;
}
.lobby-corner-bl {
  bottom: clamp(16px, 4vh, 28px);
  left: clamp(16px, 4vw, 28px);
  flex-direction: column;
  align-items: flex-start;
}
.lobby-corner-br {
  bottom: clamp(16px, 4vh, 28px);
  right: clamp(16px, 4vw, 28px);
  flex-direction: column;
  align-items: flex-end;
}

/* ── Tablet and below: corner buttons move out of the fixed corners
   and sit as two centered rows (4 buttons each) below the mode chips ── */
@media (max-width: 1024px) {
  #s-lobby {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "tl tr"
      "bl br";
    row-gap: clamp(12px, 2.5vh, 20px);
    column-gap: clamp(16px, 4vw, 24px);
    align-items: center;
  }
  .lobby-hero {
    grid-area: hero;
  }
  .lobby-corner {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 4vw, 24px);
  }
  .lobby-corner-tl {
    grid-area: tl;
    justify-self: end;
  }
  .lobby-corner-tr {
    grid-area: tr;
    justify-self: start;
  }
  .lobby-corner-bl {
    grid-area: bl;
    justify-self: end;
  }
  .lobby-corner-br {
    grid-area: br;
    justify-self: start;
  }
}

/* ── Hero zone: brand + tagline + play button + mode chips, centered by
   the .screen base flex rules ── */
.lobby-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lobby-hero-tag {
  font-size: clamp(0.6rem, 2vw, 0.78rem);
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: var(--ink-dim);
  text-transform: uppercase;
  padding: 7px 18px;
  border: 1px solid var(--ink-faint);
  border-radius: 20px;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  margin-top: clamp(4px, 1.2vh, 10px);
  margin-bottom: clamp(10px, 2.5vh, 20px);
}

/* ── Mode preview chips under the play button ── */
.lobby-mode-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(14px, 3vh, 24px);
}
.lobby-mode-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
}
.lobby-mode-chip svg {
  width: 19px;
  height: 19px;
  fill: var(--accent);
  flex-shrink: 0;
}

/* Midnight — chip stays white, but this theme's ink is gold (too
   washed out on a white chip), so give it the same fixed dark-purple
   tint used for icon-btn/pill buttons. Every other theme already
   reads fine with the default --ink-mid above. */
body[data-theme="midnight"] .lobby-mode-chip {
  color: #3d2d52;
}

/* XP row: icon badge + level/points/track stacked */
.lobby-xp-bar {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lobby-xp-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-lt) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.lobby-xp-icon svg {
  width: 19px;
  height: 19px;
  fill: var(--btn-primary-color);
}
.lobby-xp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lobby-xp-toprow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.lobby-xp-level {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.lobby-xp-track {
  flex: 1;
  height: 5px;
  background: var(--ink-faint);
  border-radius: 3px;
  overflow: hidden;
}
.lobby-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-lt));
  border-radius: 3px;
  transition: width 0.6s ease;
  width: 0%;
}
.lobby-xp-pts {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* Big play button — modern fancy style with glow ring + pulse */
.lobby-center {
  position: relative;
}
.lobby-center::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: clamp(210px, 46vw, 300px);
  height: clamp(210px, 46vw, 300px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.25;
  filter: blur(18px);
  animation: playGlowPulse 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes playGlowPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0.4;
  }
}

.btn-play-big {
  width: clamp(110px, min(40vw, 32vh), 290px);
  height: clamp(110px, min(40vw, 32vh), 290px);
  margin: clamp(24px, 5vh, 40px) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  animation: playFloat 3.2s ease-in-out infinite;
}
@keyframes playFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.btn-play-big:hover {
  transform: translateY(-4px) scale(1.08);
}
.btn-play-big:active {
  transform: translateY(-1px) scale(1.02);
}
/* Themed play artwork — the image itself is the whole button face,
   no extra background/ring/shadow behind it */
.btn-play-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Lobby stats strip — sits inside the dashboard card */
.lobby-meta {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}
.lobby-stat-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
}
.lobby-stat {
  flex: 1;
  text-align: center;
  padding: 4px 6px;
  background: none;
  border: none;
  border-right: 1px solid var(--ink-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  transition: transform 0.15s;
}
.lobby-stat:last-child {
  border-right: none;
}
.lobby-stat:hover {
  transform: translateY(-2px);
}
.lobby-stat-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lobby-stat-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--accent);
  opacity: 0.85;
}
.lobby-stat-val {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.lobby-stat-lbl {
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* Hide stat row when no stats are available */
.lobby-stat-row.hidden {
  display: none;
}
.lobby-meta:has(.lobby-stat-row.hidden) {
  display: none;
}

/* Corner icon buttons — sized for 1-2 per corner */
.lobby-corner .icon-btn {
  width: clamp(52px, 12.5vw, 64px);
  height: clamp(52px, 12.5vw, 64px);
}
.icon-btn {
  width: clamp(58px, 14.5vw, 74px);
  height: clamp(58px, 14.5vw, 74px);
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    filter 0.2s;
  color: #fff;
}
.icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.icon-btn svg {
  width: 52%;
  height: 52%;
  fill: currentColor;
  stroke-width: 2.4;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.icon-btn.sound-muted {
  opacity: 0.55;
}
#btn-lobby-cartoonic.cartoonic-active {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
}

/* Themed background-cover artwork behind every corner icon button —
   one image per theme, icon glyph sits on top in white */
body[data-theme="warm"] .icon-btn,
body[data-theme="warm"] .diff-back-btn,
body[data-theme="warm"] .page-back-btn,
body[data-theme="warm"] .game-act-btn {
  background-image: url("../images/btn-bg/btn-bg-warm.png");
}
body[data-theme="jungle"] .icon-btn,
body[data-theme="jungle"] .diff-back-btn,
body[data-theme="jungle"] .page-back-btn,
body[data-theme="jungle"] .game-act-btn {
  background-image: url("../images/btn-bg/btn-bg-jungle.png");
}
body[data-theme="neon"] .icon-btn,
body[data-theme="neon"] .diff-back-btn,
body[data-theme="neon"] .page-back-btn,
body[data-theme="neon"] .game-act-btn {
  background-image: url("../images/btn-bg/btn-bg-neon.png");
}
body[data-theme="midnight"] .icon-btn,
body[data-theme="midnight"] .diff-back-btn,
body[data-theme="midnight"] .page-back-btn,
body[data-theme="midnight"] .game-act-btn {
  background-image: url("../images/btn-bg/btn-bg-midnight.png");
}
body[data-theme="rosegold"] .icon-btn,
body[data-theme="rosegold"] .diff-back-btn,
body[data-theme="rosegold"] .page-back-btn,
body[data-theme="rosegold"] .game-act-btn {
  background-image: url("../images/btn-bg/btn-bg-rosegold.png");
}

/* Amber — these buttons keep a white pill background in every theme,
   so they use a fixed dark text color from this theme's ink family. */
body[data-theme="warm"] .import-btn,
body[data-theme="warm"] .sponsor-skip-btn,
body[data-theme="warm"] .btn-begin,
body[data-theme="warm"] .btn-comp.filled,
body[data-theme="warm"] .popup-btn-primary,
body[data-theme="warm"] .confirm-ok {
  color: #5a260c;
}

/* Midnight — same white-pill problem as above, fixed dark-purple text */
body[data-theme="midnight"] .import-btn,
body[data-theme="midnight"] .sponsor-skip-btn,
body[data-theme="midnight"] .btn-begin,
body[data-theme="midnight"] .btn-comp.filled,
body[data-theme="midnight"] .popup-btn-primary,
body[data-theme="midnight"] .confirm-ok {
  color: #3d2d52;
}

/* ════════════════════════════════════════════════
   DIFFICULTY SCREEN
════════════════════════════════════════════════ */
#s-difficulty {
  gap: 0;
}

.diff-back-btn {
  position: absolute;
  top: clamp(14px, 3vw, 24px);
  left: clamp(14px, 3vw, 24px);
  width: clamp(48px, 11vw, 58px);
  height: clamp(48px, 11vw, 58px);
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition:
    transform 0.15s,
    filter 0.2s;
}
.diff-back-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.diff-back-btn svg {
  width: 40%;
  height: 40%;
  fill: currentColor;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.diff-heading {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: clamp(14px, 2.5vh, 24px);
  text-align: center;
}
.diff-heading-dot {
  color: var(--accent);
}

.diff-subheading {
  font-size: clamp(0.62rem, 2vw, 0.8rem);
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-align: center;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: clamp(24px, 5vh, 40px);
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-bottom: 24px;
}
.diff-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(14px, 3vw, 22px) 10px;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.diff-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.diff-card.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.diff-icon-wrap {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  color: var(--ink-dim);
  transition: color 0.2s;
}
.diff-card.selected .diff-icon-wrap,
.diff-card:hover .diff-icon-wrap {
  color: var(--accent);
}
.diff-icon-wrap svg {
  width: 100%;
  height: 100%;
}
.diff-name {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.diff-desc {
  font-size: 0.58rem;
  color: var(--ink-mid);
  margin-top: 3px;
}

.btn-begin {
  width: 100%;
  max-width: 360px;
  padding: 0.95em 2em;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: var(--radius);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.18em;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}
.btn-begin:hover {
  background: var(--accent);
  color: var(--btn-primary-color);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* ════════════════════════════════════════════════
   LEVEL SELECT SCREEN — 50-level grid per tier
════════════════════════════════════════════════ */
#s-levels {
  overflow-y: auto;
  padding-top: clamp(70px, 12vh, 110px);
  padding-bottom: 24px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.level-btn {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: calc(var(--radius) * 0.6);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s,
    transform 0.15s,
    box-shadow 0.2s,
    background 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.level-btn:hover:not(.locked) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.level-btn.done {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.level-btn.done::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.level-btn.locked {
  cursor: not-allowed;
  opacity: 0.45;
  color: var(--ink-dim);
}
.level-btn.locked svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Pagination — keeps only 15 levels on screen at once so the level
   grid never needs to scroll. Same card/back-button visual language
   as the rest of the level-select screen. */
.level-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 22px auto 0;
}
.page-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  color: var(--ink-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-nav-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.page-nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}
.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.page-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-dot {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  color: var(--ink-mid);
  font-family: "DM Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-dot:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.page-dot.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--btn-primary-color);
}

/* ════════════════════════════════════════════════
   THEME SELECT SCREEN
════════════════════════════════════════════════ */
#s-theme {
  gap: 0;
  overflow-y: auto;
}

/* Theme grid: 3-col same as diff-grid but allow 5th card full-width */
.theme-diff-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 360px;
}

.theme-diff-card:last-child:nth-child(3n + 2) {
  grid-column: 2 / 4;
}
.theme-diff-card:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}

/* When there are exactly 5 cards, the 5th spans last 2 cols */
.theme-diff-grid .theme-diff-card:nth-child(4):last-child {
  grid-column: 1 / -1;
}
.theme-diff-grid .theme-diff-card:nth-child(5) {
  grid-column: 2 / 4;
}

/* Skins grid: same compact 3-col pattern as the theme page. 4 skins ->
   3 in the first row, the 4th (Test Tube) spans the full row like the
   theme page's last "New" card spans 2 of its 3 columns. */
.skins-grid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 360px;
}

.skin-card--wide {
  grid-column: 1 / -1;
}

/* Icon wrap holds the mini-preview */
.theme-icon-wrap {
  width: 100% !important;
  height: auto !important;
  margin-bottom: 8px !important;
  color: inherit !important;
}

.theme-icon-wrap .theme-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* Preview backgrounds */
.theme-preview--warm {
  background: #fff8f0;
  border: 1.5px solid #e8720f;
}
.theme-preview--jungle {
  background: #cdd9ef;
  border: 1.5px solid #3d5fdb;
}
.theme-preview--neon {
  background: #c3e8d8;
  border: 1.5px solid #0f9c7e;
}
.theme-preview--midnight {
  background: #121016;
  border: 1.5px solid #f2c14e;
}

/* Mini grid inside preview */
.tp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  border: 1.5px solid;
  position: relative;
  z-index: 1;
}

/* Amber mini cells */
.theme-preview--warm .tp-grid {
  border-color: #7a3410;
  border-radius: 2px;
  overflow: hidden;
}
.theme-preview--warm .tp-cell {
  background: #fffdf9;
  border-right: 1px solid #f0cd9e;
  border-bottom: 1px solid #f0cd9e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(7px, 2vw, 11px);
  font-weight: 600;
  color: #e8720f;
  aspect-ratio: 1;
}
.theme-preview--warm .tp-cell.tp-given {
  background: rgba(122, 52, 16, 0.06);
  color: #7a3410;
}
.theme-preview--warm .tp-cell.tp-sel {
  background: rgba(232, 114, 15, 0.2);
  color: #e8720f;
}
.theme-preview--warm .tp-cell.tp-br {
  border-right: 2px solid #dba766;
}
.theme-preview--warm .tp-cell.tp-bb {
  border-bottom: 2px solid #dba766;
}

/* Jungle mini cells */
.theme-preview--jungle .tp-grid {
  border-color: #16264f;
  border-radius: 1px;
  overflow: hidden;
}
.theme-preview--jungle .tp-cell {
  background: #fdfeff;
  border-right: 1px solid #cdd9ef;
  border-bottom: 1px solid #cdd9ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(7px, 2vw, 11px);
  font-weight: 600;
  color: #3d5fdb;
  aspect-ratio: 1;
}
.theme-preview--jungle .tp-cell.tp-given {
  background: rgba(22, 38, 79, 0.06);
  color: #16264f;
}
.theme-preview--jungle .tp-cell.tp-sel {
  background: rgba(61, 95, 219, 0.2);
  color: #3d5fdb;
}
.theme-preview--jungle .tp-cell.tp-br {
  border-right: 2px solid #93aee0;
}
.theme-preview--jungle .tp-cell.tp-bb {
  border-bottom: 2px solid #93aee0;
}

/* Sky Blue mini cells */
.theme-preview--neon .tp-grid {
  border-color: #0b4a3d;
  border-radius: 0;
  overflow: hidden;
}
.theme-preview--neon .tp-cell {
  background: #ffffff;
  border-right: 1px solid #c3e8d8;
  border-bottom: 1px solid #c3e8d8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(7px, 2vw, 11px);
  font-weight: 600;
  color: #0f9c7e;
  aspect-ratio: 1;
}
.theme-preview--neon .tp-cell.tp-given {
  background: rgba(11, 74, 61, 0.05);
  color: #0b4a3d;
}
.theme-preview--neon .tp-cell.tp-sel {
  background: rgba(15, 156, 126, 0.2);
  color: #0f9c7e;
}
.theme-preview--neon .tp-cell.tp-br {
  border-right: 2px solid #7cc7ac;
}
.theme-preview--neon .tp-cell.tp-bb {
  border-bottom: 2px solid #7cc7ac;
}

/* Midnight mini cells */
.theme-preview--midnight .tp-grid {
  border-color: #f2c14e;
  border-radius: 2px;
  overflow: hidden;
}
.theme-preview--midnight .tp-cell {
  background: #1a1620;
  border-right: 1px solid #2a2433;
  border-bottom: 1px solid #2a2433;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(7px, 2vw, 11px);
  font-weight: 600;
  color: #f2c14e;
  aspect-ratio: 1;
}
.theme-preview--midnight .tp-cell.tp-given {
  background: rgba(242, 193, 78, 0.06);
  color: #f2c14e;
}
.theme-preview--midnight .tp-cell.tp-sel {
  background: rgba(168, 112, 216, 0.28);
  color: #c79bea;
}
.theme-preview--midnight .tp-cell.tp-br {
  border-right: 2px solid #4a3f5e;
}
.theme-preview--midnight .tp-cell.tp-bb {
  border-bottom: 2px solid #4a3f5e;
}

.theme-new-icon {
  width: 11px;
  height: 11px;
  vertical-align: middle;
  color: var(--accent);
  display: inline-block;
  margin: 0 1px;
}

/* ════════════════════════════════════════════════
   PREPARING SCREEN
════════════════════════════════════════════════ */
#s-preparing {
  gap: 0;
}

.prep-spinner {
  width: clamp(52px, 13vw, 68px);
  height: clamp(52px, 13vw, 68px);
  margin-bottom: 22px;
  animation: spinCW 1.1s linear infinite;
}
.prep-spinner svg {
  width: 100%;
  height: 100%;
}

@keyframes spinCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.prep-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4em;
}
.prep-sub {
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: clamp(24px, 5vh, 36px);
}
.prep-dots {
  display: flex;
  gap: 8px;
}
.prep-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: prepDot 1.2s ease-in-out infinite;
}
.prep-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.prep-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes prepDot {
  0%,
  80%,
  100% {
    background: var(--ink-faint);
    transform: scale(1);
  }
  40% {
    background: var(--accent);
    transform: scale(1.4);
  }
}

/* ════════════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════════════ */
#s-game {
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  overflow-y: auto;
  align-items: stretch;
}

/* Full-width game topbar — mirrors .page-header style */
.game-page-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 3vw, 22px) clamp(18px, 5vw, 36px)
    clamp(12px, 2.5vw, 18px);
  border-bottom: 1px solid var(--paper3);
  flex-shrink: 0;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Main game body: board centered, sidebars flanking it in a flex row */
.game-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.5vw, 20px) clamp(12px, 3vw, 24px);
  gap: 0;
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.game-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vw, 14px);
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}

/* Controls bar above board */
.game-above-board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 0 2px;
  flex-wrap: wrap;
}

/* Left sidebar — vertical column of action buttons */
.game-action-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  width: auto;
  margin-left: clamp(10px, 2.5vw, 28px);
  margin-right: clamp(28px, 6vw, 64px);
  padding-right: 12px;
}
.game-act-btn {
  width: clamp(60px, 8vw, 80px);
  height: clamp(60px, 8vw, 80px);
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s,
    filter 0.2s;
  color: #fff;
}
.game-act-btn svg {
  width: 48%;
  height: 48%;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.game-act-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.game-act-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  filter: grayscale(0.5) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.game-act-btn:disabled:hover {
  transform: none;
}

/* ── Responsive breakpoints ──────────────────────────────────── */

/* Medium screens: shrink side panels and tighten gaps so nothing
   overlaps the board before it has to wrap */
@media (max-width: 1100px) {
  .game-body {
    gap: 0;
  }
  .game-act-btn {
    width: clamp(50px, 7.5vw, 68px);
    height: clamp(50px, 7.5vw, 68px);
  }
  .num-btn {
    width: clamp(38px, 6vw, 60px);
    height: clamp(38px, 6vw, 60px);
  }
}

/* Tablet / narrow: stack sidebar below board */
@media (max-width: 960px) {
  .game-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 20px) clamp(8px, 3vw, 16px);
    gap: clamp(8px, 2vw, 14px);
  }
  .game-action-sidebar {
    order: 2;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
  }
  .game-center {
    order: 1;
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    align-items: center;
  }
  .game-above-board {
    justify-content: center;
    width: 100%;
  }
  .grid-wrap {
    margin: 0 auto;
  }
  .game-numpad-panel {
    width: 100%;
    align-items: center;
  }
  .numpad {
    width: 100%;
    justify-content: center;
  }
  .num-btn {
    flex: 1 1 0;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    max-width: 52px;
  }
  .game-act-btn {
    width: clamp(56px, 16vw, 72px);
    height: clamp(56px, 16vw, 72px);
  }
}

/* Tablet portrait: additional tightening */
@media (max-width: 768px) {
  .grid-wrap {
    width: min(380px, 88vw);
    max-width: 380px;
    padding: 8px;
  }
  .game-page-header {
    padding: clamp(10px, 2.5vw, 16px) clamp(12px, 3vw, 20px);
  }
  /* Topbar stacks on mobile instead of squeezing title + badge + all the
     stat boxes + pause button into one cramped row: title/badge on top,
     stats + pause below, everything centered. */
  .game-page-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .game-header-left {
    align-items: center;
    text-align: center;
  }
  .top-diff-badge {
    align-self: center;
  }
  .top-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
  .top-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }
  .diff-grid {
    max-width: 320px;
  }
  .btn-begin {
    max-width: 320px;
  }
  .popup-card {
    max-width: 300px;
  }
  .popup-brand {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
  }
  .lb-tabs,
  .lb-list {
    max-width: 360px;
  }
  .lobby-bottom {
    max-width: 340px;
  }
  .lobby-stat-val {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }
}

/* Small mobile: tighten everything further */
@media (max-width: 480px) {
  .game-act-btn {
    width: clamp(48px, 15vw, 60px);
    height: clamp(48px, 15vw, 60px);
  }
  .game-act-btn svg {
    width: 46%;
    height: 46%;
  }
  .num-btn {
    font-size: clamp(0.9rem, 4vw, 1.2rem);
  }
  .toggle-lbl {
    font-size: 0.56rem;
  }
}

.top-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.top-brand-logo {
  display: block;
  height: clamp(36px, 7vw, 50px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.top-title-dot {
  color: var(--accent);
}
.top-diff-badge {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.3em 0.75em;
  border-radius: 20px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 3px;
}
/* Neon badge */
body[data-theme="neon"] .top-diff-badge {
  border-radius: 0;
}
.top-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}
.stat-item {
  text-align: right;
}
.stat-val {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.stat-lbl {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* Grid wrap — theme-specific backgrounds */
.grid-wrap {
  width: min(440px, 88vw);
  max-width: 440px;
  margin-bottom: clamp(10px, 2vw, 18px);
  padding: 10px;
  background: var(--grid-wrap-bg);
  border-radius: 8px;
  box-shadow: var(--grid-wrap-shadow);
  box-sizing: border-box;
}

/* Warm: subtle parchment frame */
body[data-theme="warm"] .grid-wrap {
  border: 1px solid var(--grid-wrap-border);
}

/* Jungle: dense forest floor, leafy border */
body[data-theme="jungle"] .grid-wrap {
  border: 1px solid var(--grid-wrap-border);
  position: relative;
  overflow: hidden;
}
body[data-theme="jungle"] .grid-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 10% 20%,
      rgba(92, 138, 46, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse at 90% 80%,
      rgba(92, 138, 46, 0.06) 0%,
      transparent 40%
    );
  pointer-events: none;
  z-index: 0;
}
body[data-theme="jungle"] #equation-grid {
  position: relative;
  z-index: 1;
}

/* Neon: electric grid frame */
body[data-theme="neon"] .grid-wrap {
  padding: 12px;
  border-radius: 0;
}

/* Midnight: deep space */
body[data-theme="midnight"] .grid-wrap {
  border-radius: 8px;
}

#equation-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border: 2.5px solid var(--box-border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--grid-bg);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 1;
}

/* Neon grid — sharp corners, glowing border */
body[data-theme="neon"] #equation-grid {
  border-radius: 0;
  border-width: 2px;
  box-shadow:
    0 0 0 1px rgba(6, 96, 214, 0.4),
    0 0 30px rgba(6, 96, 214, 0.2);
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--cell-bg);
  border-right: 1px solid var(--grid-thin);
  border-bottom: 1px solid var(--grid-thin);
  transition: background 0.1s;
  aspect-ratio: 1;
}

/* Neon cells get scanline inset */
body[data-theme="neon"] .cell {
  background: #0c0c18;
}
body[data-theme="neon"] .cell:nth-child(odd) {
  background: #0e0e1c;
}

/* Jungle cells — very slightly varied */
body[data-theme="jungle"] .cell {
  background: #0f2412;
}
body[data-theme="jungle"] .cell:nth-child(even) {
  background: #0d2010;
}

/* ── OVERLAY SVG — shared full-grid layer for Consecutive Sudoku dots
   and Arrow Sum Sudoku arrows. Coordinate space is 0-900 (100 units per
   cell) so it never needs recalculating on resize. ────────────────── */
#equation-grid {
  position: relative;
}
.overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.consec-dot {
  fill: var(--ink);
  stroke: var(--card-bg, #fff);
  stroke-width: 3;
}
.arrow-line {
  fill: none;
  stroke: var(--ink-mid);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.62;
}
.arrow-circle {
  fill: none;
  stroke: var(--ink-mid);
  stroke-width: 4.5;
  opacity: 0.62;
}
.arrow-head {
  fill: var(--ink-mid);
  opacity: 0.62;
}

/* Cage borders — replace the classic 3x3-box lines with irregular
   equation-cage boundaries computed in JS (cage-edge-*) */
.cell.cage-edge-top {
  border-top: 2px solid var(--grid-thick);
}
.cell.cage-edge-right {
  border-right: 2px solid var(--grid-thick);
}
.cell.cage-edge-bottom {
  border-bottom: 2px solid var(--grid-thick);
}
.cell.cage-edge-left {
  border-left: 2px solid var(--grid-thick);
}
.cell:nth-child(9n) {
  border-right: none;
}
.cell:nth-child(n + 73) {
  border-bottom: none;
}
.cell.given {
  background: var(--given-bg);
}

/* Theme-specific given cells */
body[data-theme="warm"] .cell.given {
  background: rgba(42, 37, 32, 0.05);
}
body[data-theme="jungle"] .cell.given {
  background: rgba(92, 138, 46, 0.07);
}
body[data-theme="neon"] .cell.given {
  background: rgba(6, 96, 214, 0.06);
}
body[data-theme="midnight"] .cell.given {
  background: rgba(12, 34, 79, 0.06);
}

.cell.selected {
  background: rgba(217, 72, 15, 0.16) !important;
}
body[data-theme="jungle"] .cell.selected {
  background: rgba(92, 138, 46, 0.22) !important;
}
body[data-theme="neon"] .cell.selected {
  background: rgba(6, 96, 214, 0.28) !important;
}
body[data-theme="midnight"] .cell.selected {
  background: rgba(12, 34, 79, 0.28) !important;
}

.cell.row-hl {
  background: var(--row-hl);
}
.cell.same-num {
  background: var(--same-hl) !important;
}
.cell.error {
  background: var(--error-bg);
}

/* Neon cage borders glow */
body[data-theme="neon"] .cell.cage-edge-top {
  border-top: 2px solid rgba(6, 96, 214, 0.6);
}
body[data-theme="neon"] .cell.cage-edge-right {
  border-right: 2px solid rgba(6, 96, 214, 0.6);
}
body[data-theme="neon"] .cell.cage-edge-bottom {
  border-bottom: 2px solid rgba(6, 96, 214, 0.6);
}
body[data-theme="neon"] .cell.cage-edge-left {
  border-left: 2px solid rgba(6, 96, 214, 0.6);
}

/* Jungle cage borders glow */
body[data-theme="jungle"] .cell.cage-edge-top {
  border-top: 2px solid rgba(92, 138, 46, 0.5);
}
body[data-theme="jungle"] .cell.cage-edge-right {
  border-right: 2px solid rgba(92, 138, 46, 0.5);
}
body[data-theme="jungle"] .cell.cage-edge-bottom {
  border-bottom: 2px solid rgba(92, 138, 46, 0.5);
}
body[data-theme="jungle"] .cell.cage-edge-left {
  border-left: 2px solid rgba(92, 138, 46, 0.5);
}

/* Equation clue label — sits in the top-left corner of a cage's anchor cell */
.cage-clue {
  position: absolute;
  top: 2px;
  left: 3px;
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 700;
  color: var(--grid-thick);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  letter-spacing: 0.2px;
}
body[data-theme="neon"] .cage-clue {
  color: #0660d6;
  text-shadow: 0 0 6px rgba(6, 96, 214, 0.5);
}
body[data-theme="jungle"] .cage-clue {
  color: #5c8a2e;
  text-shadow: 0 0 6px rgba(92, 138, 46, 0.4);
}
body[data-theme="midnight"] .cage-clue {
  color: #9a8de0;
}

.cell-num {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.cell.given .cell-num {
  color: var(--ink);
}
.cell:not(.given) .cell-num {
  color: var(--blue);
}
.cell.error .cell-num {
  color: var(--error-txt);
}

/* Jungle user numbers */
body[data-theme="jungle"] .cell:not(.given) .cell-num {
  color: #5c8a2e;
  text-shadow: 0 0 8px rgba(92, 138, 46, 0.4);
}

/* Neon given numbers — pink; user numbers — cyan */
body[data-theme="neon"] .cell.given .cell-num {
  color: #f0f0ff;
}
body[data-theme="neon"] .cell:not(.given) .cell-num {
  color: #0660d6;
  text-shadow: 0 0 8px rgba(6, 96, 214, 0.5);
}

/* Midnight user numbers */
body[data-theme="midnight"] .cell:not(.given) .cell-num {
  color: #6a90e8;
}

.pencil-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 90%;
  height: 90%;
  pointer-events: none;
}
.pencil-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "DM Sans", sans-serif;
  color: var(--ink-mid);
  line-height: 1;
}

/* ── Numpad panel — below the board, horizontal row ── */
.game-numpad-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.numpad {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(4px, 0.8vw, 8px);
  justify-content: center;
  width: 100%;
}
.num-btn {
  width: clamp(36px, 5vw, 52px);
  height: clamp(36px, 5vw, 52px);
  border: 1.5px solid var(--ink-faint);
  border-radius: 12px;
  background: var(--card-bg);
  color: var(--ink);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  user-select: none;
}
.num-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
  transform: scale(1.05);
}
.num-btn:active {
  transform: scale(0.95);
}
.num-btn.erase-btn {
  font-size: clamp(0.9rem, 2vw, 1.2rem);
  color: var(--ink-mid);
  font-family: "DM Sans", sans-serif;
}
.num-btn.pencil-btn {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  font-family: "DM Sans", sans-serif;
  color: var(--ink-mid);
}
.num-btn.pencil-btn.active {
  border-color: var(--blue);
  background: var(--blue-lt);
  color: var(--blue);
}
.num-btn.complete {
  opacity: 0.25;
  pointer-events: none;
}

/* Neon numpad */
body[data-theme="neon"] .num-btn {
  border-radius: 0;
}
body[data-theme="neon"] .num-btn:hover {
  box-shadow: 0 0 10px rgba(6, 96, 214, 0.3);
}

/* Info row below numpad panel */
.numpad-info-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 2px 0;
  border-top: 1px solid var(--paper3);
}

.toggle-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.toggle-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.toggle-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: 0.7rem;
  color: white;
}
.toggle-item.on .toggle-box {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle-lbl {
  font-size: 0.62rem;
  color: var(--ink-mid);
  letter-spacing: 0.08em;
}

.hint-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.62rem;
  color: var(--ink-mid);
}
.mistake-dots {
  display: flex;
  gap: 4px;
}
.mistake-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: background 0.3s;
}
.mistake-dot.used {
  background: var(--error-txt);
}
.mistake-overflow {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--error-txt);
  line-height: 1;
  margin-left: 1px;
}

/* ════════════════════════════════════════════════
   COMPLETE SCREEN
════════════════════════════════════════════════ */
#s-complete {
  gap: 0;
}

.complete-star {
  width: clamp(48px, 12vw, 64px);
  height: clamp(48px, 12vw, 64px);
  margin-bottom: 14px;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.complete-star svg {
  width: 100%;
  height: 100%;
  fill: var(--accent);
}
body[data-theme="neon"] .complete-star svg {
  filter: drop-shadow(0 0 12px var(--accent));
}
body[data-theme="jungle"] .complete-star svg {
  filter: drop-shadow(0 0 10px rgba(92, 138, 46, 0.5));
}

@keyframes popIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.complete-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2em;
  text-align: center;
}
.complete-sub {
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: clamp(20px, 4vh, 36px);
}
.complete-stats {
  display: flex;
  gap: 28px;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.cstat {
  text-align: center;
}
.cstat-val {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.cstat-lbl {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-top: 3px;
}
.complete-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-comp {
  padding: 0.75em 2em;
  border-radius: var(--radius);
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-comp.filled {
  background: rgba(255, 255, 255, 0.92);
  border: none;
  color: var(--ink);
}
.btn-comp.filled:hover {
  background: var(--accent);
  color: var(--btn-primary-color);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.btn-comp.outline {
  background: transparent;
  border: 1.5px solid var(--ink-faint);
  color: var(--ink-mid);
}
.btn-comp.outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ════════════════════════════════════════════════
   PAGE CHROME (settings & info)
════════════════════════════════════════════════ */
.page-header {
  width: 100%;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 4vw, 30px) clamp(18px, 5vw, 32px) clamp(16px, 3vw, 22px);
  border-bottom: 1px solid var(--paper3);
  flex-shrink: 0;
  align-self: center;
}
.page-back-btn {
  width: clamp(46px, 10.5vw, 56px);
  height: clamp(46px, 10.5vw, 56px);
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition:
    transform 0.15s,
    filter 0.2s;
  flex-shrink: 0;
}
.page-back-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.page-back-btn svg {
  width: 38%;
  height: 38%;
  fill: currentColor;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.page-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-weight: 600;
  color: var(--ink);
}

/* ════════════════════════════════════════════════
   SETTINGS PAGE
════════════════════════════════════════════════ */
#s-settings {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow-y: auto;
}

#s-settings .page-header {
  align-self: center;
  flex-shrink: 0;
}

#s-settings .page-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  align-self: center;
  width: 100%;
  max-width: 460px;
  padding: clamp(14px, 3vw, 24px) clamp(18px, 5vw, 32px);
}

.settings-section-label {
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin: 14px 0 4px;
  padding-left: 2px;
}
.settings-section-label:first-child {
  margin-top: 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  gap: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.settings-row--about {
  align-items: flex-start;
}
.settings-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.settings-row-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: var(--ink-dim);
}
.settings-row-info {
  flex: 1;
  min-width: 0;
}
.settings-row-label {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 1px;
}
.settings-row-desc {
  font-size: 0.62rem;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
}

/* Toggle switch */
.sw {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.sw-track {
  position: absolute;
  inset: 0;
  background: var(--ink-faint);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.sw-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.sw input:checked + .sw-track {
  background: var(--accent);
}
.sw input:checked + .sw-track::after {
  transform: translateX(18px);
}

/* ════════════════════════════════════════════════
   INFO PAGE
════════════════════════════════════════════════ */
#s-info {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#s-info .page-header,
#popup-stats .page-header {
  max-width: clamp(480px, 92vw, 800px);
}

#s-info .page-header {
  align-self: center;
  flex-shrink: 0;
  padding-top: clamp(12px, 2.5vw, 18px);
  padding-bottom: clamp(10px, 2vw, 16px);
  border-bottom: none;
}

/* Reuses the popup-card divider look right under the title */
.info-rule-line {
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: var(--card-border);
  align-self: center;
  margin: 0 auto clamp(10px, 2vh, 18px);
  flex-shrink: 0;
}

.info-body {
  flex: 1;
  width: 100%;
  max-width: clamp(480px, 92vw, 800px);
  padding: clamp(10px, 2.5vw, 18px) clamp(18px, 5vw, 32px)
    clamp(24px, 4vh, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  align-self: center;
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
.info-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--accent-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-card-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}
.info-card-body {
  flex: 1;
  min-width: 0;
}
.info-card-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.info-card-text {
  font-size: 0.72rem;
  color: var(--ink-mid);
  line-height: 1.55;
}

.info-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.info-mini-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
.info-mini-card svg {
  width: 18px;
  height: 18px;
  fill: var(--accent);
}
.info-mini-card strong {
  font-size: 0.72rem;
  color: var(--ink);
  font-weight: 600;
  font-family: "Crimson Pro", Georgia, serif;
}
.info-mini-card span {
  font-size: 0.6rem;
  color: var(--ink-dim);
}

.info-shortcuts-grid {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
.info-close-btn {
  margin-top: 6px;
}
.info-sc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--ink-mid);
}

#popup-stats {
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── "Your Stats" popup — reuses the info-card look instead of the
   borderless dashboard-strip style (that style only reads correctly
   inside the lobby's own dashboard card). ── */
#popup-stats .lobby-xp-bar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
#popup-stats .lobby-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
#popup-stats .lobby-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-right: none;
  border-radius: 14px;
  padding: 10px 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
#popup-stats .lobby-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: none;
}
#popup-stats .lb-more-entry {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink-mid);
}
#popup-stats .lb-more-entry .lb-rank {
  color: var(--accent);
}
#popup-stats .lb-more-entry .lb-time {
  color: var(--ink-mid);
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
}
#popup-stats .lb-more-entry:hover {
  border-color: var(--accent);
}
#popup-stats .settings-section-label {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}

/* ── Themed scrollbar for the scrollable pages — matches each theme's
   accent color instead of the browser's default gray bar. ── */
#s-info,
#popup-stats {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
#s-info::-webkit-scrollbar,
#popup-stats::-webkit-scrollbar {
  width: 8px;
}
#s-info::-webkit-scrollbar-track,
#popup-stats::-webkit-scrollbar-track {
  background: transparent;
}
#s-info::-webkit-scrollbar-thumb,
#popup-stats::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#s-info::-webkit-scrollbar-thumb:hover,
#popup-stats::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-lt);
}

/* Cartoonic Mode — chunkier, squared-off sticker scrollbar */
body.cartoonic-mode #s-info,
body.cartoonic-mode #popup-stats {
  scrollbar-color: var(--accent) var(--card-bg);
}
body.cartoonic-mode #s-info::-webkit-scrollbar,
body.cartoonic-mode #popup-stats::-webkit-scrollbar {
  width: 11px;
}
body.cartoonic-mode #s-info::-webkit-scrollbar-track,
body.cartoonic-mode #popup-stats::-webkit-scrollbar-track {
  background: var(--card-bg);
  border-radius: 6px;
}
body.cartoonic-mode #s-info::-webkit-scrollbar-thumb,
body.cartoonic-mode #popup-stats::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 2px solid var(--box-border);
  background-clip: padding-box;
}
.kbd-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 20px;
  padding: 0 5px;
  background: var(--paper2);
  border: 1px solid var(--ink-faint);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 0.62rem;
  color: var(--ink);
  font-family: monospace;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════ */
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 0.65em 1.6em;
  border-radius: 20px;
  z-index: 100;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#toast.success {
  background: var(--success);
  color: var(--paper);
}
#toast.error {
  background: var(--error-txt);
}

body[data-theme="neon"] #toast {
  border-radius: 0;
}
body[data-theme="jungle"] #toast.success {
  color: #0a1a0c;
}

/* ════════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════════ */
@keyframes cellPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
.cell-pop {
  animation: cellPop 0.15s ease;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
}
.shake {
  animation: shake 0.3s ease;
}

@keyframes cellWin {
  0% {
    background: var(--cell-bg);
  }
  50% {
    background: var(--accent-bg);
  }
  100% {
    background: rgba(40, 120, 64, 0.1);
  }
}
.cell-win {
  animation: cellWin 0.6s ease forwards;
}

/* ════════════════════════════════════════════════
   IN-GAME POPUP SCREENS
   (Resume, New Game, Quit — full-screen lobby style)
════════════════════════════════════════════════ */

/* Overlay backdrop behind popup screen — solid lobby-style page */
.popup-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Solid background matching the lobby: theme's fixed image + overlay */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  transition:
    opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme overlay on top of the bg image — mirrors body::before */
.popup-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  transition: background 0.4s;
  pointer-events: none;
}
/* Obsidian Night scanlines on popup */
body[data-theme="neon"] .popup-screen {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(6, 96, 214, 0.025) 2px,
      rgba(6, 96, 214, 0.025) 4px
    ),
    var(--bg-image);
  background-size: auto, cover;
  background-position: auto, center;
}
/* Ensure card sits above the pseudo-element overlay */
.popup-screen .popup-card {
  position: relative;
  z-index: 1;
}
.popup-screen.out {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
}

/* Central card — lobby style panel */
.popup-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: popupSlideIn 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Popup brand title */
.popup-brand {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(2.8rem, 9vw, 4.2rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: clamp(8px, 1.5vh, 14px);
  text-align: center;
}
.popup-brand-dot {
  color: var(--accent);
}

/* Image logo used in place of the text wordmark on the preparing
   screen and the in-game pause popup — smaller than the lobby logo */
.popup-brand-logo {
  display: block;
  width: clamp(130px, 32vw, 190px);
  height: auto;
  margin: 0 auto clamp(10px, 2vh, 16px);
}

/* Larger on the puzzle-solved page now that the star icon above it is
   gone — it has the room to be a proper brand mark instead of a small
   discreet one. */
.complete-page-logo {
  width: clamp(150px, 34vw, 210px);
  margin: 0 auto clamp(10px, 2vh, 18px);
}

.popup-sub {
  font-size: clamp(0.62rem, 2vw, 0.78rem);
  letter-spacing: 0.48em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin-bottom: clamp(18px, 4vh, 30px);
  text-align: center;
}

.popup-rule-line {
  width: clamp(100px, 30vw, 180px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--grid-thick),
    transparent
  );
  margin: 0 auto clamp(20px, 4vh, 32px);
}
body[data-theme="neon"] .popup-rule-line {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 6px var(--accent);
}
body[data-theme="jungle"] .popup-rule-line {
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Game info strip (time + moves) inside popups */
.popup-info-strip {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: clamp(16px, 3vh, 26px);
}
.popup-info-cell {
  flex: 1;
  text-align: center;
  padding: 12px 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: 12px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
body[data-theme="neon"] .popup-info-cell {
  border-radius: 0;
}
.popup-info-val {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.popup-info-lbl {
  font-size: 0.48rem;
  letter-spacing: 0.25em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* Popup action buttons — big primary + secondary */
.popup-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.popup-btn-primary {
  width: 100%;
  padding: 1em 2em;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: var(--radius);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.popup-btn-primary:hover {
  background: var(--accent);
  color: var(--btn-primary-color);
  transform: translateY(-1px);
}
.popup-btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.5);
}
.popup-btn-primary:disabled:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  transform: none;
}
.popup-btn-primary svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.popup-btn-secondary {
  width: 100%;
  padding: 0.8em 2em;
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--radius);
  color: var(--ink-mid);
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.popup-btn-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.popup-btn-secondary svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.popup-btn-danger {
  width: 100%;
  padding: 0.8em 2em;
  background: transparent;
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-family: "DM Sans", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.popup-btn-danger:hover {
  border-color: var(--error-txt);
  color: var(--error-txt);
  transform: translateY(-1px);
}
.popup-btn-danger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.5);
}
.popup-btn-danger:disabled:hover {
  border-color: var(--ink-faint);
  color: var(--ink-dim);
  transform: none;
}
.popup-btn-danger svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Neon popup buttons */
body[data-theme="neon"] .popup-btn-primary,
body[data-theme="neon"] .popup-btn-secondary,
body[data-theme="neon"] .popup-btn-danger {
  border-radius: 0;
}
body[data-theme="neon"] .popup-btn-primary:hover {
  box-shadow: 0 0 20px rgba(6, 96, 214, 0.4);
}

/* Pause icon button (top bar) */
.btn-pause {
  width: clamp(38px, 9vw, 48px);
  height: clamp(38px, 9vw, 48px);
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition:
    transform 0.15s,
    filter 0.2s;
  flex-shrink: 0;
}
.btn-pause:hover {
  transform: translateY(-2px) scale(1.06);
}
.btn-pause:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  filter: grayscale(0.5) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
.btn-pause:disabled:hover {
  transform: none;
}
.btn-pause svg {
  width: 50%;
  height: 50%;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}
body[data-theme="warm"] .btn-pause {
  background-image: url("../images/btn-bg/btn-bg-warm.png");
}
body[data-theme="jungle"] .btn-pause {
  background-image: url("../images/btn-bg/btn-bg-jungle.png");
}
body[data-theme="neon"] .btn-pause {
  background-image: url("../images/btn-bg/btn-bg-neon.png");
}
body[data-theme="midnight"] .btn-pause {
  background-image: url("../images/btn-bg/btn-bg-midnight.png");
}
body[data-theme="rosegold"] .btn-pause {
  background-image: url("../images/btn-bg/btn-bg-rosegold.png");
}

/* ════════════════════════════════════════════════
   CONFIRM DIALOG (legacy, kept for safety)
════════════════════════════════════════════════ */
#confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  align-items: center;
  justify-content: center;
}
.confirm-box {
  background: var(--paper);
  border: 1px solid var(--grid-thick);
  border-radius: 10px;
  padding: 28px 24px 22px;
  width: min(300px, 86vw);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: confirmSlide 0.2s ease both;
}
@keyframes confirmSlide {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.confirm-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}
.confirm-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.confirm-msg {
  font-size: 0.72rem;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 22px;
}
.confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.confirm-cancel {
  flex: 1;
  max-width: 110px;
  padding: 0.6em 1em;
  background: transparent;
  border: 1.5px solid var(--ink-faint);
  border-radius: 6px;
  color: var(--ink-mid);
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.18s;
}
.confirm-cancel:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.confirm-ok {
  flex: 1;
  max-width: 110px;
  padding: 0.6em 1em;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 6px;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.18s;
}
.confirm-ok:hover {
  background: var(--accent);
  color: var(--btn-primary-color);
}

/* ════════════════════════════════════════════════
   BROWSER NOT SUPPORTED SCREEN
   Reuses loader screen structure
════════════════════════════════════════════════ */
#s-nosupport {
  display: none; /* shown via JS only when needed */
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

#s-nosupport.visible {
  display: flex;
}

.nosupport-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  color: var(--accent);
  opacity: 0.85;
}
.nosupport-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nosupport-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.nosupport-msg {
  font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  color: var(--ink-mid);
  line-height: 1.7;
  max-width: 320px;
  margin-bottom: 28px;
}

.nosupport-browsers {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.nosupport-browser {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0.7;
}

.nosupport-browser-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.nosupport-browser-name {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.nosupport-bar-wrap {
  width: clamp(140px, 45vw, 220px);
  height: 2px;
  background: var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════════════════
   CARTOONIC MODE — Settings → Appearance → Cartoonic Mode
   Adds chunky sticker-style borders + a playful heading font on
   top of whichever theme is active. Every color below is pulled
   from that theme's own CSS variables, so no theme color changes —
   only borders / shadows / font / radius.
═══════════════════════════════════════════════════════════════ */

/* Headings & logo — playful rounded font */
body.cartoonic-mode .brand,
body.cartoonic-mode .loading-brand,
body.cartoonic-mode .popup-brand {
  font-family: "Baloo 2", "Crimson Pro", Georgia, serif;
  font-weight: 700;
}
body.cartoonic-mode .page-title,
body.cartoonic-mode .popup-sub,
body.cartoonic-mode .brand-sub,
body.cartoonic-mode .loading-sub,
body.cartoonic-mode .lobby-mode-chip span,
body.cartoonic-mode .diff-name,
body.cartoonic-mode .lobby-xp-level,
body.cartoonic-mode .settings-row-label,
body.cartoonic-mode .info-card-title,
body.cartoonic-mode .hint-bar,
body.cartoonic-mode .toggle-lbl,
body.cartoonic-mode .diff-subheading,
body.cartoonic-mode .prep-sub {
  font-family: "Baloo 2", "DM Sans", sans-serif;
  font-weight: 600;
}

/* Preparing-puzzle screen + mode/difficulty card descriptions —
   pick up the cartoonic font too, same treatment as .diff-name */
body.cartoonic-mode .prep-title {
  font-family: "Baloo 2", "Crimson Pro", Georgia, serif;
  font-weight: 700;
}
body.cartoonic-mode .diff-desc {
  font-family: "Baloo 2", "DM Sans", sans-serif;
  font-weight: 500;
}

/* Chunky sticker borders on UI chrome. */
body.cartoonic-mode .popup-btn-primary,
body.cartoonic-mode .popup-btn-secondary,
body.cartoonic-mode .popup-btn-danger,
body.cartoonic-mode .lobby-mode-chip,
body.cartoonic-mode .diff-card,
body.cartoonic-mode .settings-row,
body.cartoonic-mode .info-card,
body.cartoonic-mode .info-mini-card,
body.cartoonic-mode .info-shortcuts-grid,
body.cartoonic-mode .lobby-stat,
body.cartoonic-mode .lobby-xp-bar {
  border: 3px solid var(--box-border) !important;
  box-shadow: 4px 4px 0 var(--box-border) !important;
}

/* Play button and lobby icon buttons keep their plain themed artwork
   in cartoonic mode too — no sticker border/shadow on either. */

/* Chunky press-down feel on tap */
body.cartoonic-mode .popup-btn-primary:active,
body.cartoonic-mode .popup-btn-secondary:active,
body.cartoonic-mode .popup-btn-danger:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--box-border) !important;
}

/* Rounder, stickier corners */
body.cartoonic-mode .lobby-mode-chip,
body.cartoonic-mode .diff-card,
body.cartoonic-mode .settings-row,
body.cartoonic-mode .info-card {
  border-radius: 16px !important;
}
body.cartoonic-mode .popup-btn-primary,
body.cartoonic-mode .popup-btn-secondary,
body.cartoonic-mode .popup-btn-danger {
  border-radius: 12px !important;
}

/* Toggle switches get an outline to match the sticker look */
body.cartoonic-mode .sw-track {
  border: 2px solid var(--box-border) !important;
  border-radius: 999px !important;
}
body.cartoonic-mode .toggle-box {
  border-width: 2.5px !important;
  border-color: var(--box-border) !important;
  border-radius: 5px !important;
}
body.cartoonic-mode .toggle-item.on .toggle-box {
  border-color: var(--box-border) !important;
}
body.cartoonic-mode .mistake-dot {
  border: 1.5px solid var(--box-border);
}

/* ── In-game screen + remaining buttons (previously missed) ── */
/* diff-back-btn / game-act-btn keep their plain themed artwork in
   cartoonic mode too, same as the lobby icon buttons — no sticker
   border/shadow on any of them. */
body.cartoonic-mode .btn-begin,
body.cartoonic-mode .btn-pause,
body.cartoonic-mode .num-btn,
body.cartoonic-mode .btn-comp,
body.cartoonic-mode .lb-entry,
body.cartoonic-mode .lb-clear {
  border: 3px solid var(--box-border) !important;
  box-shadow: 4px 4px 0 var(--box-border) !important;
}
body.cartoonic-mode .btn-pause {
  box-shadow: 3px 3px 0 var(--box-border) !important;
}
body.cartoonic-mode .num-btn {
  border-radius: 14px !important;
  box-shadow: 2px 2px 0 var(--box-border) !important;
}
body.cartoonic-mode .btn-begin,
body.cartoonic-mode .btn-comp {
  border-radius: 12px !important;
}

/* Press-down feel for the newly added buttons too */
body.cartoonic-mode .btn-begin:active,
body.cartoonic-mode .btn-pause:active,
body.cartoonic-mode .num-btn:active,
body.cartoonic-mode .btn-comp:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--box-border) !important;
}

/* Extra headings pick up the cartoonic font too */
body.cartoonic-mode .diff-heading,
body.cartoonic-mode .complete-title,
body.cartoonic-mode .top-title,
body.cartoonic-mode #popup-stats .settings-section-label {
  font-family: "Baloo 2", "Crimson Pro", Georgia, serif;
  font-weight: 700;
}

/* Popup cards (pause / stats / new-game / reset) — a clean floating
   card with no chunky outline, just rounded corners + soft shadow.
   Keeps the buttons inside them cartoonic without the messy look of
   a border-inside-a-border. NOTE: .sponsor-card is intentionally
   excluded — it's a full-bleed layout with no card wrapper, so this
   shadow/radius would float around empty space with no background
   under it. */
body.cartoonic-mode .popup-card:not(.sponsor-card),
body.cartoonic-mode .confirm-box {
  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* Sponsor / ad page — its own elements get the cartoonic treatment
   directly, instead of a floating card shadow around the whole page. */
body.cartoonic-mode .sponsor-title {
  font-family: "Baloo 2", "Crimson Pro", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2.5rem);
}
body.cartoonic-mode .sponsor-slot {
  border: 3px solid var(--box-border) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--box-border) !important;
}
body.cartoonic-mode .sponsor-skip-btn {
  border: 3px solid var(--box-border) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--box-border) !important;
}
body.cartoonic-mode .sponsor-skip-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--box-border) !important;
}

/* ── In-game topbar — badge, stat boxes, header bar, board ── */
body.cartoonic-mode .top-diff-badge {
  border: 2.5px solid var(--box-border) !important;
  box-shadow: 2px 2px 0 var(--box-border) !important;
}
body.cartoonic-mode .stat-item {
  background: var(--card-bg);
  border: 2.5px solid var(--box-border) !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  box-shadow: 2px 2px 0 var(--box-border) !important;
}
body.cartoonic-mode .game-page-header {
  border-bottom: 3px solid var(--box-border) !important;
  box-shadow: 0 4px 0 var(--box-border) !important;
}
body.cartoonic-mode .grid-wrap {
  border: 4px solid var(--box-border) !important;
  box-shadow: 5px 5px 0 var(--box-border) !important;
}

/* Board numbers — match the Cartoonic Mode font instead of the
   default serif so the puzzle grid text looks consistent with the
   rest of the cartoonic UI. */
body.cartoonic-mode .cell-num {
  font-family: "Baloo 2", "DM Sans", sans-serif;
  font-weight: 700;
}
body.cartoonic-mode .pencil-mark {
  font-family: "Baloo 2", "DM Sans", sans-serif;
  font-weight: 600;
}

/* ================================================================
   BOTTLE SORT — stage, bottles, silhouette-masked liquid, wave,
   realistic pour stream, skins, mode-select
================================================================ */

.bottle-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(18px, 3.4vw, 34px);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(12px, 3vh, 32px) 10px;
  position: relative;
}

/* Hard mode only: 12 bottles need a hard cap of 6 per row, or a wide
   screen would just line them all up in one long row. Grid keeps the
   count locked to 6 columns regardless of viewport width, unlike the
   default flex-wrap used by every other difficulty above. */
.bottle-stage.bottle-stage--six-col {
  display: grid;
  grid-template-columns: repeat(6, clamp(58px, 8.6vw, 92px));
  align-items: end;
  justify-content: center;
}

.bottle-wrap {
  position: relative;
  width: clamp(58px, 8.6vw, 92px);
  height: auto;
  /* Locks the box to the exact aspect ratio of the glass PNG (269x726)
     so object-fit:contain never letterboxes it inside the box. Without
     this, the rendered glass sits slightly off from the box edges and
     the liquid clip-path (traced in % of THIS box) drifts away from
     the real silhouette — that drift is what let liquid "leak" past
     the bottom of the glass. Locking the ratio keeps art and clip
     pixel-for-pixel aligned at every screen size. */
  aspect-ratio: 269 / 726;
  cursor: pointer;
  transition: transform 0.25s ease;
  animation: bottle-idle-sway 4.6s ease-in-out infinite;
  animation-delay: calc(var(--bottle-i, 0) * 0.15s);
  transform-origin: 50% 100%;
}

.bottle-wrap:nth-child(3n) {
  animation-duration: 5.3s;
}
.bottle-wrap:nth-child(3n + 1) {
  animation-duration: 4.9s;
}

.bottle-wrap.lifted {
  transform: translateY(-14px) scale(1.05);
  animation-play-state: paused;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 10px var(--accent-lt));
}

.bottle-glass-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Liquid is clipped to the EXACT bottle silhouette using a polygon
   traced from the bottle art itself — clip-path works everywhere,
   including when the file is opened directly (file://), unlike
   mask-image which some browsers refuse to load from a local file. */
.bottle-liquid-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  animation: bottle-liquid-float 3.4s ease-in-out infinite;
  animation-delay: calc(var(--bottle-i, 0) * 0.15s);
  clip-path: polygon(
    33.9% 4.3%,
    33.9% 5.3%,
    33.9% 6.2%,
    33.9% 7.2%,
    33.9% 8.2%,
    37.7% 9.4%,
    38.6% 10.4%,
    38.6% 11.3%,
    38.6% 12.3%,
    38.1% 13.5%,
    38.1% 14.5%,
    37.7% 15.5%,
    37.3% 16.4%,
    36.4% 17.6%,
    35.6% 18.6%,
    34.7% 19.6%,
    33.9% 20.6%,
    32.6% 21.7%,
    30.9% 22.7%,
    29.2% 23.7%,
    27.1% 24.7%,
    24.2% 25.8%,
    22% 26.8%,
    19.9% 27.8%,
    18.2% 28.8%,
    16.5% 29.9%,
    15.3% 30.9%,
    14.4% 31.9%,
    13.1% 32.9%,
    12.3% 34%,
    11.9% 35%,
    11.4% 36%,
    11% 37%,
    10.6% 38.2%,
    10.6% 39.1%,
    10.6% 40.1%,
    10.6% 41.1%,
    10.6% 42.3%,
    10.6% 43.3%,
    10.6% 44.2%,
    10.6% 45.2%,
    10.6% 46.4%,
    10.6% 47.4%,
    10.6% 48.4%,
    10.6% 49.3%,
    10.6% 50.5%,
    10.6% 51.5%,
    10.6% 52.5%,
    10.6% 53.5%,
    10.6% 54.6%,
    10.6% 55.6%,
    10.6% 56.6%,
    10.6% 57.6%,
    10.6% 58.7%,
    10.6% 59.7%,
    10.6% 60.7%,
    10.6% 61.7%,
    10.6% 62.8%,
    10.6% 63.8%,
    10.6% 64.8%,
    10.6% 65.8%,
    10.6% 66.9%,
    10.6% 67.9%,
    10.6% 68.9%,
    10.6% 69.9%,
    10.6% 71.1%,
    10.6% 72%,
    10.6% 73%,
    10.6% 74%,
    10.6% 75.2%,
    10.6% 76.2%,
    10.6% 77.1%,
    10.6% 78.1%,
    10.6% 79.3%,
    10.6% 80.3%,
    10.6% 81.2%,
    10.6% 82.2%,
    10.6% 83.4%,
    10.6% 84.4%,
    10.6% 85.4%,
    10.6% 86.3%,
    10.6% 87.5%,
    10.6% 88.5%,
    10.6% 89.5%,
    11% 90.5%,
    11.4% 91.6%,
    12.7% 92.6%,
    14% 93.6%,
    16.5% 94.6%,
    24.6% 95.7%,
    75% 95.7%,
    83.1% 94.6%,
    85.2% 93.6%,
    86.9% 92.6%,
    87.7% 91.6%,
    88.6% 90.5%,
    88.6% 89.5%,
    89% 88.5%,
    89% 87.5%,
    89% 86.3%,
    89% 85.4%,
    89% 84.4%,
    89% 83.4%,
    89% 82.2%,
    89% 81.2%,
    89% 80.3%,
    89% 79.3%,
    89% 78.1%,
    89% 77.1%,
    89% 76.2%,
    89% 75.2%,
    89% 74%,
    89% 73%,
    89% 72%,
    89% 71.1%,
    89% 69.9%,
    89% 68.9%,
    89% 67.9%,
    89% 66.9%,
    89% 65.8%,
    89% 64.8%,
    89% 63.8%,
    89% 62.8%,
    89% 61.7%,
    89% 60.7%,
    89% 59.7%,
    89% 58.7%,
    89% 57.6%,
    89% 56.6%,
    89% 55.6%,
    89% 54.6%,
    89% 53.5%,
    89% 52.5%,
    89% 51.5%,
    89% 50.5%,
    89% 49.3%,
    89% 48.4%,
    89% 47.4%,
    89% 46.4%,
    89% 45.2%,
    89% 44.2%,
    89% 43.3%,
    89% 42.3%,
    89% 41.1%,
    89% 40.1%,
    89% 39.1%,
    89% 38.2%,
    88.6% 37%,
    88.1% 36%,
    87.7% 35%,
    87.3% 34%,
    86.4% 32.9%,
    85.2% 31.9%,
    84.3% 30.9%,
    83.1% 29.9%,
    81.4% 28.8%,
    79.7% 27.8%,
    77.5% 26.8%,
    75.4% 25.8%,
    72.9% 24.7%,
    70.8% 23.7%,
    69.1% 22.7%,
    67.8% 21.7%,
    66.1% 20.6%,
    65.3% 19.6%,
    64.4% 18.6%,
    63.6% 17.6%,
    63.1% 16.4%,
    62.3% 15.5%,
    62.3% 14.5%,
    62.3% 13.5%,
    61.9% 12.3%,
    61.9% 11.3%,
    61.9% 10.4%,
    62.7% 9.4%,
    66.5% 8.2%,
    66.5% 7.2%,
    66.5% 6.2%,
    66.5% 5.3%,
    65.7% 4.3%
  );
}

.bottle-liquid-col {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  top: 33%;
  display: flex;
  flex-direction: column-reverse;
}
.bottle-liquid-col::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -6px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 75%
  );
  pointer-events: none;
  z-index: 3;
}

/* Classic skin only: round the liquid column's bottom corners so they
   follow the pill-shaped glass silhouette instead of sitting square
   inside a rounded bottle base. overflow:hidden is what clips the flex
   segments into that rounded shape; the contact-shadow ellipse below
   the liquid is hidden for this skin since it would get clipped anyway. */
.bottle-wrap[data-skin="classic"] .bottle-liquid-col {
  border-radius: 15px 15px 21px 21px;
  overflow: hidden;
}
.bottle-wrap[data-skin="classic"] .bottle-liquid-col::before {
  display: none;
}

/* Mobile/tablet: the 21px base radius reads as too rounded at smaller
   bottle sizes, so it's dialed back on narrower screens. */
@media (max-width: 1024px) {
  .bottle-wrap[data-skin="classic"] .bottle-liquid-col {
    border-radius: 10px 10px 16px 16px;
  }
}

/* Cylindrical-glass highlight running down the whole liquid column —
   the bright vertical streak you see refracting through a rounded
   glass/plastic bottle. Static (no animation), it's what reads as
   "real 3D liquid" instead of a flat tint, matching the vibrant,
   glossy reference look. Sits above the segments but below the surface
   highlight. */
.bottle-liquid-col::after {
  content: "";
  position: absolute;
  top: 2%;
  bottom: 2%;
  left: 9%;
  width: 20%;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.15) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}

.bottle-liquid-seg {
  position: relative;
  width: 100%;
  flex: 0 0 25%; /* 1 / BOTTLE_CAPACITY */
  opacity: 0.97;
  z-index: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset -7px 0 11px rgba(0, 0, 0, 0.2),
    inset 7px 0 11px rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

/* Every internal color boundary gets a soft elliptical "cap" straddling
   the seam, colored the same as its own segment (via background:inherit
   pulling the segment's own gradient). This is what gives the layered
   liquid its rounded, 3D "poured jelly" look instead of flat stacked
   rectangles — matching how each color band reads as its own gently
   domed puck in the reference art. The topmost segment (open liquid
   surface) skips this — it gets the meniscus highlight below instead.
   z-index: 2 makes sure this dome paints ABOVE the segment stacked on
   top of it (later in DOM / higher visually) instead of being hidden
   behind its opaque rectangle — without this the seam just looked
   like a flat straight line, not a curved boundary. */
.bottle-liquid-seg:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: -9px;
  height: 18px;
  border-radius: 50%;
  background: inherit;
  z-index: 2;
  pointer-events: none;
}
.bottle-liquid-seg + .bottle-liquid-seg {
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

/* Same-color-adjacent segments (e.g. a tall single-color layer built
   from several stacked units) should read as ONE solid block — no
   seam line, no domed cap between them. */
.bottle-liquid-seg.liquid-seg-merge-up {
  border-top: none;
  /* Drop the top inset highlight line too — this is what was still
     drawing a faint seam across merged same-color layers even after
     the border and dome cap were removed. */
  box-shadow:
    inset -7px 0 11px rgba(0, 0, 0, 0.2),
    inset 7px 0 11px rgba(255, 255, 255, 0.12);
}
.bottle-liquid-seg.liquid-seg-merge-up:not(:last-child)::after {
  display: none;
}

/* Still, glossy 3D meniscus on the exposed top surface — a domed cap
   plus a bright specular blob, like light hitting real liquid. No
   animation: this is what replaces the old scrolling "sea wave". Since
   the column is flex column-reverse, the DOM's :last-child is always
   the visually topmost (exposed) segment, so this tracks the surface
   automatically as the liquid drains/fills. */
.bottle-liquid-seg:last-child::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -7px;
  height: 12px;
  border-radius: 50%;
  background: inherit;
  filter: brightness(1.42);
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 3;
}
.bottle-liquid-seg:last-child::after {
  content: "";
  position: absolute;
  left: 16%;
  top: -5px;
  width: 34%;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 35% 30%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0) 75%
  );
  pointer-events: none;
  z-index: 4;
}

/* Pour: source bottle lifts, tilts toward whichever side the target
   sits on (direction + distance computed live in JS), pours, settles.
   The liquid mask tilts together with the glass (same transform) so
   the liquid visibly rides the tilt with the bottle, matching the
   reference art — a counter-rotated "always level" liquid was tried
   here and looked wrong (glass tilted but the liquid pattern stayed
   stuck upright inside it), so this stays a single rigid tilt. */
.bottle-wrap.pouring {
  animation: none;
}

/* Destination bottle during a pour — held still (see JS comment at
   toEl.classList.add("pour-target")) so the incoming stream/liquid
   lands exactly where it was aimed instead of drifting with the sway. */
.bottle-wrap.pour-target,
.bottle-wrap.pour-target .bottle-liquid-mask {
  animation-play-state: paused;
}

.bottle-wrap.pouring .bottle-glass-img,
.bottle-wrap.pouring .bottle-liquid-mask,
.bottle-wrap.pouring .bottle-glass-shine {
  animation: bottle-pour-tilt var(--pour-duration, 1.4s)
    cubic-bezier(0.45, 0, 0.55, 1);
  transform-origin: 50% 96%;
}

/* Glass shine — a light streak on the bottle body plus a small
   specular sparkle near the neck, purely decorative on top of the
   glass art (never touches the PNG assets themselves). Strong
   enough to read as glass gloss against light AND dark theme
   backgrounds alike. */
.bottle-glass-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Clipped to the EXACT bottle silhouette — same polygon as
     .bottle-liquid-mask — so the glossy streak can never bleed past
     the glass outline (neck taper, shoulder curve, rounded base),
     no matter which bottle-theme PNG is showing underneath. */
  clip-path: polygon(
    33.9% 4.3%,
    33.9% 5.3%,
    33.9% 6.2%,
    33.9% 7.2%,
    33.9% 8.2%,
    37.7% 9.4%,
    38.6% 10.4%,
    38.6% 11.3%,
    38.6% 12.3%,
    38.1% 13.5%,
    38.1% 14.5%,
    37.7% 15.5%,
    37.3% 16.4%,
    36.4% 17.6%,
    35.6% 18.6%,
    34.7% 19.6%,
    33.9% 20.6%,
    32.6% 21.7%,
    30.9% 22.7%,
    29.2% 23.7%,
    27.1% 24.7%,
    24.2% 25.8%,
    22% 26.8%,
    19.9% 27.8%,
    18.2% 28.8%,
    16.5% 29.9%,
    15.3% 30.9%,
    14.4% 31.9%,
    13.1% 32.9%,
    12.3% 34%,
    11.9% 35%,
    11.4% 36%,
    11% 37%,
    10.6% 38.2%,
    10.6% 39.1%,
    10.6% 40.1%,
    10.6% 41.1%,
    10.6% 42.3%,
    10.6% 43.3%,
    10.6% 44.2%,
    10.6% 45.2%,
    10.6% 46.4%,
    10.6% 47.4%,
    10.6% 48.4%,
    10.6% 49.3%,
    10.6% 50.5%,
    10.6% 51.5%,
    10.6% 52.5%,
    10.6% 53.5%,
    10.6% 54.6%,
    10.6% 55.6%,
    10.6% 56.6%,
    10.6% 57.6%,
    10.6% 58.7%,
    10.6% 59.7%,
    10.6% 60.7%,
    10.6% 61.7%,
    10.6% 62.8%,
    10.6% 63.8%,
    10.6% 64.8%,
    10.6% 65.8%,
    10.6% 66.9%,
    10.6% 67.9%,
    10.6% 68.9%,
    10.6% 69.9%,
    10.6% 71.1%,
    10.6% 72%,
    10.6% 73%,
    10.6% 74%,
    10.6% 75.2%,
    10.6% 76.2%,
    10.6% 77.1%,
    10.6% 78.1%,
    10.6% 79.3%,
    10.6% 80.3%,
    10.6% 81.2%,
    10.6% 82.2%,
    10.6% 83.4%,
    10.6% 84.4%,
    10.6% 85.4%,
    10.6% 86.3%,
    10.6% 87.5%,
    10.6% 88.5%,
    10.6% 89.5%,
    11% 90.5%,
    11.4% 91.6%,
    12.7% 92.6%,
    14% 93.6%,
    16.5% 94.6%,
    24.6% 95.7%,
    75% 95.7%,
    83.1% 94.6%,
    85.2% 93.6%,
    86.9% 92.6%,
    87.7% 91.6%,
    88.6% 90.5%,
    88.6% 89.5%,
    89% 88.5%,
    89% 87.5%,
    89% 86.3%,
    89% 85.4%,
    89% 84.4%,
    89% 83.4%,
    89% 82.2%,
    89% 81.2%,
    89% 80.3%,
    89% 79.3%,
    89% 78.1%,
    89% 77.1%,
    89% 76.2%,
    89% 75.2%,
    89% 74%,
    89% 73%,
    89% 72%,
    89% 71.1%,
    89% 69.9%,
    89% 68.9%,
    89% 67.9%,
    89% 66.9%,
    89% 65.8%,
    89% 64.8%,
    89% 63.8%,
    89% 62.8%,
    89% 61.7%,
    89% 60.7%,
    89% 59.7%,
    89% 58.7%,
    89% 57.6%,
    89% 56.6%,
    89% 55.6%,
    89% 54.6%,
    89% 53.5%,
    89% 52.5%,
    89% 51.5%,
    89% 50.5%,
    89% 49.3%,
    89% 48.4%,
    89% 47.4%,
    89% 46.4%,
    89% 45.2%,
    89% 44.2%,
    89% 43.3%,
    89% 42.3%,
    89% 41.1%,
    89% 40.1%,
    89% 39.1%,
    89% 38.2%,
    88.6% 37%,
    88.1% 36%,
    87.7% 35%,
    87.3% 34%,
    86.4% 32.9%,
    85.2% 31.9%,
    84.3% 30.9%,
    83.1% 29.9%,
    81.4% 28.8%,
    79.7% 27.8%,
    77.5% 26.8%,
    75.4% 25.8%,
    72.9% 24.7%,
    70.8% 23.7%,
    69.1% 22.7%,
    67.8% 21.7%,
    66.1% 20.6%,
    65.3% 19.6%,
    64.4% 18.6%,
    63.6% 17.6%,
    63.1% 16.4%,
    62.3% 15.5%,
    62.3% 14.5%,
    62.3% 13.5%,
    61.9% 12.3%,
    61.9% 11.3%,
    61.9% 10.4%,
    62.7% 9.4%,
    66.5% 8.2%,
    66.5% 7.2%,
    66.5% 6.2%,
    66.5% 5.3%,
    65.7% 4.3%
  );
  /* Cylindrical glass shading traced to the exact silhouette (same
     clip-path as above, so it can never spill past the neck taper,
     shoulder curve or rounded base): a bright rim on the light side,
     a soft dark rim on the far side, plus a brighter shoulder/cap —
     pure shine/highlight cues, no dark shadow pooling at the base. */
  box-shadow:
    inset 3px 0 7px rgba(255, 255, 255, 0.28),
    inset -5px 0 9px rgba(0, 0, 0, 0.14),
    inset 0 10px 12px rgba(255, 255, 255, 0.16);
}

/* Small gloss blob on the cap/neck — light catching the rounded lid,
   the same way it catches the body streak below. */
.bottle-glass-shine::after {
  content: "";
  position: absolute;
  top: 3%;
  left: 30%;
  width: 24%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 38% 32%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  pointer-events: none;
}

.bottle-glass-shine::before {
  content: "";
  position: absolute;
  top: 24%;
  left: 15%;
  width: 13%;
  height: 52%;
  border-radius: 50%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.35) 32%,
    rgba(255, 255, 255, 0) 68%
  );
  filter: blur(1.5px);
  opacity: 0.75;
}

/* Pour shine fix: the glass streak and the liquid's internal highlight
   are both fixed near the left side of the bottle, which only reads
   correctly when the bottle tilts right. For a left-tilting pour
   (target sits on the left — see fromEl.classList.toggle("pour-tilt-left", ...)
   in animatePour()), mirror both highlight streaks over to the right
   side instead, with their gradients reversed to match, so the shine
   stays visually consistent in either pour direction instead of
   flipping to the wrong side of the glass. */
.bottle-wrap.pouring.pour-tilt-left .bottle-glass-shine::before {
  left: auto;
  right: 15%;
  background: linear-gradient(
    260deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.35) 32%,
    rgba(255, 255, 255, 0) 68%
  );
}
.bottle-wrap.pouring.pour-tilt-left .bottle-liquid-col::after {
  left: auto;
  right: 9%;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.52) 0%,
    rgba(255, 255, 255, 0.15) 55%,
    rgba(255, 255, 255, 0) 100%
  );
}

@keyframes bottle-pour-tilt {
  0% {
    transform: translate(0, -14px) rotate(0deg);
  }
  21% {
    transform: translate(var(--pour-dx, 0px), var(--pour-dy, -30px))
      rotate(var(--pour-tilt, 60deg));
  }
  80% {
    transform: translate(var(--pour-dx, 0px), var(--pour-dy, -30px))
      rotate(var(--pour-tilt, 60deg));
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* The liquid inside rides the EXACT same tilt as the glass (no counter-
   rotation) — the water is still contained inside the bottle right up
   until it exits the neck, so as long as it's inside, it visibly leans
   the same way the bottle is leaning. */
.bottle-wrap.pouring .bottle-liquid-col {
  animation: none;
}

/* Stream: a real liquid column computed from the source bottle's
   mouth to the target bottle's mouth (absolute px, set from JS).
   Made thick and glossy — a real pour reads as a solid rope of
   liquid, not a thin thread — with a bright vertical highlight
   running down its center to sell the glassy, syrupy look. */
.pour-stream {
  position: absolute;
  width: 15px;
  border-radius: 8px;
  transform: translateX(-50%);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
}

.pour-stream::after {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 22%;
  width: 30%;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.pour-stream.flowing {
  animation: stream-flow 0.82s ease-in 0.3s forwards;
}

@keyframes stream-flow {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-50%) scaleX(0.7);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  70% {
    height: var(--stream-h);
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
  100% {
    height: var(--stream-h);
    opacity: 0;
    transform: translateX(-50%) scaleX(0.85);
  }
}

.bottle-wrap.splash .bottle-liquid-seg:last-child {
  animation: splash-bump 0.45s ease-out;
}

@keyframes splash-bump {
  0% {
    transform: scaleY(1.16);
  }
  100% {
    transform: scaleY(1);
  }
}

/* Small colored specks flying off where the pour stream hits the
   target's liquid — the "real water splashing" impact look. */
.pour-splash-drop {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  transform: translate(-50%, -50%);
  animation: splash-drop-fly 0.5s ease-out forwards;
}

@keyframes splash-drop-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: translate(
        calc(-50% + var(--drop-dx, 0px)),
        calc(-50% + var(--drop-dy, 16px))
      )
      scale(0.35);
    opacity: 0;
  }
}

@keyframes bottle-idle-sway {
  0%,
  100% {
    transform: rotate(-1.4deg);
  }
  50% {
    transform: rotate(1.4deg);
  }
}

/* Very small, slow vertical drift on the liquid column — just enough
   to feel alive, far short of a visible "wave". */
@keyframes bottle-liquid-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

.bottle-wrap.lifted .bottle-liquid-mask {
  animation-play-state: paused;
}

.bottle-wrap.hint-glow {
  animation: bottle-hint-pulse 0.7s ease-in-out infinite;
}

@keyframes bottle-hint-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(255, 205, 60, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 205, 60, 0.85));
  }
}

.bottle-wrap.bottle-win {
  animation: bottle-win-pop 0.5s ease;
}

@keyframes bottle-win-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.15) translateY(-8px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* ── Mode-select "Coming Soon" locked cards ─────────────────────── */
.diff-card.mode-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
  filter: grayscale(0.6);
}

.mode-soon-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* ── Per-skin bottle shapes ───────────────────────────────────────
   Each new skin has its own aspect ratio and its own liquid clip-path,
   traced from that skin's actual glass art so the liquid always stays
   inside the true silhouette (neck, waist, cone — whatever the shape
   is) instead of the classic-bottle-only polygon above. The glass
   shine reuses the exact same clip-path as the liquid mask, same
   convention as the classic bottle. "top" on .bottle-liquid-col marks
   where each shape's fillable body actually starts (skips a neck when
   there is one; sits near 0 when there isn't) — the liquid column is
   inset only 1-2% left/right/bottom since the clip-path itself now
   hugs the true interior wall closely, corners included. */

.bottle-wrap[data-skin="pouch"] {
  aspect-ratio: 162 / 482;
}
.bottle-wrap[data-skin="pouch"] .bottle-liquid-col {
  top: 25%;
  left: 2%;
  right: 2%;
  bottom: 2%;
}
.bottle-wrap[data-skin="pouch"] .bottle-liquid-mask,
.bottle-wrap[data-skin="pouch"] .bottle-glass-shine {
  clip-path: polygon(
    42% 3.9%,
    38.9% 4.8%,
    42% 8.9%,
    40.7% 10%,
    41.4% 11%,
    41.4% 12%,
    41.4% 13.1%,
    41.4% 14.1%,
    41.4% 15.1%,
    41.4% 16.2%,
    41.4% 17.2%,
    41.4% 18.3%,
    41.4% 19.3%,
    40.7% 20.3%,
    40.7% 21.4%,
    40.7% 22.4%,
    40.7% 23.4%,
    40.1% 24.5%,
    40.1% 25.5%,
    39.5% 26.6%,
    39.5% 27.6%,
    38.9% 28.6%,
    38.3% 29.7%,
    38.3% 30.7%,
    37.7% 31.7%,
    37% 32.8%,
    36.4% 33.8%,
    35.8% 34.9%,
    35.2% 35.9%,
    34.6% 36.9%,
    34% 38%,
    33.3% 39%,
    32.7% 40%,
    32.1% 41.1%,
    31.5% 42.1%,
    30.9% 43.2%,
    29.6% 44.2%,
    29% 45.2%,
    28.4% 46.3%,
    27.8% 47.3%,
    27.2% 48.3%,
    25.9% 49.4%,
    25.3% 50.2%,
    24.7% 51.2%,
    24.1% 52.3%,
    22.8% 53.3%,
    22.2% 54.4%,
    21.6% 55.4%,
    21% 56.4%,
    19.8% 57.5%,
    19.1% 58.5%,
    18.5% 59.5%,
    17.9% 60.6%,
    17.3% 61.6%,
    16.7% 62.7%,
    15.4% 63.7%,
    14.8% 64.7%,
    14.8% 65.8%,
    14.2% 66.8%,
    13.6% 67.8%,
    13% 68.9%,
    13% 69.9%,
    12.3% 71%,
    12.3% 72%,
    11.7% 73%,
    11.7% 74.1%,
    11.7% 75.1%,
    11.7% 76.1%,
    11.7% 77.2%,
    11.7% 78.2%,
    11.7% 79.3%,
    11.7% 80.3%,
    12.3% 81.3%,
    12.3% 82.4%,
    13% 83.4%,
    13% 84.4%,
    13.6% 85.5%,
    14.8% 86.5%,
    15.4% 87.6%,
    16% 88.6%,
    17.3% 89.6%,
    18.5% 90.7%,
    20.4% 91.7%,
    22.2% 92.7%,
    24.7% 93.8%,
    29.6% 94.8%,
    43.8% 95.9%,
    56.2% 95.9%,
    69.8% 94.8%,
    75.3% 93.8%,
    77.8% 92.7%,
    79.6% 91.7%,
    81.5% 90.7%,
    82.7% 89.6%,
    83.3% 88.6%,
    84.6% 87.6%,
    85.2% 86.5%,
    85.8% 85.5%,
    86.4% 84.4%,
    87% 83.4%,
    87% 82.4%,
    87.7% 81.3%,
    87.7% 80.3%,
    87.7% 79.3%,
    88.3% 78.2%,
    88.3% 77.2%,
    88.3% 76.1%,
    88.3% 75.1%,
    87.7% 74.1%,
    87.7% 73%,
    87.7% 72%,
    87% 71%,
    87% 69.9%,
    86.4% 68.9%,
    85.8% 67.8%,
    85.8% 66.8%,
    85.2% 65.8%,
    84.6% 64.7%,
    84% 63.7%,
    83.3% 62.7%,
    82.7% 61.6%,
    82.1% 60.6%,
    81.5% 59.5%,
    80.2% 58.5%,
    79.6% 57.5%,
    79% 56.4%,
    78.4% 55.4%,
    77.8% 54.4%,
    76.5% 53.3%,
    75.9% 52.3%,
    75.3% 51.2%,
    74.1% 50.2%,
    73.5% 49.4%,
    72.8% 48.3%,
    72.2% 47.3%,
    71% 46.3%,
    70.4% 45.2%,
    69.8% 44.2%,
    69.1% 43.2%,
    67.9% 42.1%,
    67.3% 41.1%,
    66.7% 40%,
    66% 39%,
    65.4% 38%,
    64.8% 36.9%,
    63.6% 35.9%,
    63% 34.9%,
    63% 33.8%,
    62.3% 32.8%,
    61.7% 31.7%,
    61.1% 30.7%,
    60.5% 29.7%,
    59.9% 28.6%,
    59.3% 27.6%,
    59.3% 26.6%,
    58.6% 25.5%,
    58.6% 24.5%,
    58% 23.4%,
    58% 22.4%,
    58% 21.4%,
    58% 20.3%,
    58% 19.3%,
    57.4% 18.3%,
    57.4% 17.2%,
    57.4% 16.2%,
    57.4% 15.1%,
    57.4% 14.1%,
    57.4% 13.1%,
    57.4% 12%,
    57.4% 11%,
    58% 10%,
    58% 8.9%,
    59.3% 4.8%,
    56.8% 3.9%
  );
}

.bottle-wrap[data-skin="hourglass"] {
  aspect-ratio: 226 / 624;
}
.bottle-wrap[data-skin="hourglass"] .bottle-liquid-col {
  top: 30%;
  left: 2%;
  right: 2%;
  bottom: 2%;
}
.bottle-wrap[data-skin="hourglass"] .bottle-liquid-mask,
.bottle-wrap[data-skin="hourglass"] .bottle-glass-shine {
  clip-path: polygon(
    28.3% 4%,
    27.9% 5%,
    27.9% 5.9%,
    27.9% 7.1%,
    27.9% 8%,
    28.3% 9.1%,
    31% 10.1%,
    33.6% 11.2%,
    33.6% 12.2%,
    33.6% 13.1%,
    33.6% 14.3%,
    33.6% 15.2%,
    33.2% 16.3%,
    32.7% 17.3%,
    31.9% 18.4%,
    31% 19.4%,
    29.2% 20.5%,
    27.9% 21.5%,
    26.1% 22.4%,
    24.3% 23.6%,
    22.1% 24.5%,
    19.9% 25.6%,
    18.6% 26.6%,
    16.8% 27.7%,
    15.5% 28.7%,
    14.6% 29.6%,
    13.7% 30.8%,
    13.3% 31.7%,
    12.8% 32.9%,
    12.8% 33.8%,
    12.8% 34.9%,
    12.8% 35.9%,
    13.3% 37%,
    13.7% 38%,
    14.2% 38.9%,
    15% 40.1%,
    15.9% 41%,
    17.3% 42.1%,
    18.6% 43.1%,
    19.9% 44.2%,
    21.2% 45.2%,
    23% 46.2%,
    24.8% 47.3%,
    26.1% 48.2%,
    27.4% 49.4%,
    28.8% 50.3%,
    30.1% 51.4%,
    31% 52.4%,
    31.4% 53.5%,
    31.9% 54.5%,
    32.3% 55.4%,
    32.3% 56.6%,
    31.9% 57.5%,
    31.4% 58.7%,
    30.5% 59.6%,
    29.6% 60.7%,
    28.3% 61.7%,
    27% 62.7%,
    25.7% 63.8%,
    24.3% 64.7%,
    22.6% 65.9%,
    21.2% 66.8%,
    19.5% 67.9%,
    18.6% 68.9%,
    17.3% 70%,
    16.4% 71%,
    15.5% 72%,
    14.6% 73.1%,
    13.7% 74%,
    13.3% 75.2%,
    12.8% 76.1%,
    12.4% 77.2%,
    11.9% 78.2%,
    11.5% 79.2%,
    11.5% 80.3%,
    11.1% 81.2%,
    11.1% 82.4%,
    11.1% 83.3%,
    11.1% 84.5%,
    11.1% 85.4%,
    11.1% 86.5%,
    11.1% 87.5%,
    11.1% 88.5%,
    11.5% 89.6%,
    11.9% 90.5%,
    12.4% 91.7%,
    13.3% 92.6%,
    14.6% 93.8%,
    16.4% 94.7%,
    24.3% 95.8%,
    75.2% 95.8%,
    83.6% 94.7%,
    85% 93.8%,
    86.3% 92.6%,
    87.2% 91.7%,
    87.6% 90.5%,
    88.1% 89.6%,
    88.5% 88.5%,
    88.5% 87.5%,
    88.5% 86.5%,
    88.5% 85.4%,
    88.5% 84.5%,
    88.5% 83.3%,
    88.5% 82.4%,
    88.5% 81.2%,
    88.1% 80.3%,
    88.1% 79.2%,
    87.6% 78.2%,
    87.2% 77.2%,
    86.7% 76.1%,
    86.3% 75.2%,
    85.8% 74%,
    85% 73.1%,
    84.1% 72%,
    83.2% 71%,
    82.3% 70%,
    81% 68.9%,
    80.1% 67.9%,
    78.3% 66.8%,
    77% 65.9%,
    75.7% 64.7%,
    74.3% 63.8%,
    72.6% 62.7%,
    71.2% 61.7%,
    70.4% 60.7%,
    69% 59.6%,
    68.6% 58.7%,
    68.1% 57.5%,
    67.7% 56.6%,
    67.7% 55.4%,
    68.1% 54.5%,
    68.1% 53.5%,
    69% 52.4%,
    69.9% 51.4%,
    70.8% 50.3%,
    72.1% 49.4%,
    73.5% 48.2%,
    75.2% 47.3%,
    76.5% 46.2%,
    78.3% 45.2%,
    79.6% 44.2%,
    81% 43.1%,
    82.3% 42.1%,
    83.2% 41%,
    84.5% 40.1%,
    85.4% 38.9%,
    85.8% 38%,
    86.3% 37%,
    86.7% 35.9%,
    86.7% 34.9%,
    86.7% 33.8%,
    86.3% 32.9%,
    86.3% 31.7%,
    85.4% 30.8%,
    85% 29.6%,
    83.6% 28.7%,
    82.7% 27.7%,
    81% 26.6%,
    79.6% 25.6%,
    77.4% 24.5%,
    75.2% 23.6%,
    73.5% 22.4%,
    71.7% 21.5%,
    70.4% 20.5%,
    69% 19.4%,
    68.1% 18.4%,
    67.3% 17.3%,
    66.8% 16.3%,
    66.4% 15.2%,
    65.9% 14.3%,
    65.9% 13.1%,
    65.9% 12.2%,
    66.4% 11.2%,
    68.6% 10.1%,
    71.2% 9.1%,
    71.2% 8%,
    71.2% 7.1%,
    71.2% 5.9%,
    71.2% 5%,
    71.2% 4%
  );
}

.bottle-wrap[data-skin="testtube"] {
  aspect-ratio: 205 / 747;
  width: clamp(43px, 6.4vw, 68px);
}
.bottle-wrap[data-skin="testtube"] .bottle-liquid-col {
  top: 12%;
  left: 2%;
  right: 2%;
  bottom: 2%;
}
.bottle-wrap[data-skin="testtube"] .bottle-liquid-mask,
.bottle-wrap[data-skin="testtube"] .bottle-glass-shine {
  clip-path: polygon(
    13.2% 2.9%,
    10.7% 3.9%,
    11.7% 5%,
    16.6% 8.2%,
    16.6% 9.2%,
    16.6% 10.3%,
    16.6% 11.4%,
    16.6% 12.3%,
    16.6% 13.4%,
    16.6% 14.5%,
    16.6% 15.5%,
    16.6% 16.6%,
    16.6% 17.7%,
    16.6% 18.7%,
    16.6% 19.8%,
    16.6% 20.9%,
    16.6% 21.8%,
    16.6% 22.9%,
    16.6% 24%,
    16.6% 25%,
    16.6% 26.1%,
    16.6% 27.2%,
    16.6% 28.2%,
    16.6% 29.3%,
    16.6% 30.4%,
    16.6% 31.3%,
    16.6% 32.4%,
    16.6% 33.5%,
    16.6% 34.5%,
    16.6% 35.6%,
    16.6% 36.7%,
    16.6% 37.8%,
    16.6% 38.8%,
    16.6% 39.9%,
    16.6% 40.8%,
    16.6% 41.9%,
    16.6% 43%,
    16.6% 44%,
    16.6% 45.1%,
    16.6% 46.2%,
    16.6% 47.3%,
    16.6% 48.3%,
    16.6% 49.4%,
    16.6% 50.3%,
    16.6% 51.4%,
    16.6% 52.5%,
    16.6% 53.5%,
    16.6% 54.6%,
    16.6% 55.7%,
    16.6% 56.8%,
    16.6% 57.8%,
    16.6% 58.9%,
    16.6% 59.8%,
    16.6% 60.9%,
    16.6% 62%,
    16.6% 63.1%,
    16.6% 64.1%,
    16.6% 65.2%,
    16.6% 66.3%,
    16.6% 67.3%,
    16.6% 68.4%,
    16.6% 69.3%,
    16.6% 70.4%,
    16.6% 71.5%,
    16.6% 72.6%,
    16.6% 73.6%,
    16.6% 74.7%,
    16.6% 75.8%,
    16.6% 76.8%,
    16.6% 77.9%,
    16.6% 78.8%,
    16.6% 79.9%,
    16.6% 81%,
    16.6% 82.1%,
    16.6% 83.1%,
    16.6% 84.2%,
    16.6% 85.3%,
    16.6% 86.3%,
    16.6% 87.4%,
    17.1% 88.4%,
    17.6% 89.4%,
    18.5% 90.5%,
    20% 91.6%,
    22% 92.6%,
    24.4% 93.7%,
    28.3% 94.8%,
    34.1% 95.9%,
    48.3% 96.9%,
    51.2% 96.9%,
    65.9% 95.9%,
    71.7% 94.8%,
    75.1% 93.7%,
    77.6% 92.6%,
    79.5% 91.6%,
    81% 90.5%,
    82% 89.4%,
    82.4% 88.4%,
    82.4% 87.4%,
    82.4% 86.3%,
    82.4% 85.3%,
    82.4% 84.2%,
    82.4% 83.1%,
    82.4% 82.1%,
    82.4% 81%,
    82.4% 79.9%,
    82.4% 78.8%,
    82.4% 77.9%,
    82.4% 76.8%,
    82.4% 75.8%,
    82.4% 74.7%,
    82.4% 73.6%,
    82.4% 72.6%,
    82.4% 71.5%,
    82.4% 70.4%,
    82.4% 69.3%,
    82.4% 68.4%,
    82.4% 67.3%,
    82.4% 66.3%,
    82.4% 65.2%,
    82.4% 64.1%,
    82.4% 63.1%,
    82.4% 62%,
    82.4% 60.9%,
    82.4% 59.8%,
    82.4% 58.9%,
    82.4% 57.8%,
    82.4% 56.8%,
    82.4% 55.7%,
    82.4% 54.6%,
    82.4% 53.5%,
    82.4% 52.5%,
    82.4% 51.4%,
    82.4% 50.3%,
    82.4% 49.4%,
    82.4% 48.3%,
    82.4% 47.3%,
    82.4% 46.2%,
    82.4% 45.1%,
    82.4% 44%,
    82.4% 43%,
    82.4% 41.9%,
    82.4% 40.8%,
    82.4% 39.9%,
    82.4% 38.8%,
    82.4% 37.8%,
    82.4% 36.7%,
    82.4% 35.6%,
    82.4% 34.5%,
    82.4% 33.5%,
    82.4% 32.4%,
    82.4% 31.3%,
    82.4% 30.4%,
    82.4% 29.3%,
    82.4% 28.2%,
    82.4% 27.2%,
    82.4% 26.1%,
    82.4% 25%,
    82.4% 24%,
    82.4% 22.9%,
    82.4% 21.8%,
    82.4% 20.9%,
    82.4% 19.8%,
    82.4% 18.7%,
    82.4% 17.7%,
    82.4% 16.6%,
    82.4% 15.5%,
    82.4% 14.5%,
    82.4% 13.4%,
    82.4% 12.3%,
    82.4% 11.4%,
    82.4% 10.3%,
    82.4% 9.2%,
    82.4% 8.2%,
    87.3% 5%,
    88.8% 3.9%,
    86.3% 2.9%
  );
}

/* ── Bottle Skins page (reuses .diff-grid / .diff-card layout) ──── */
.skin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  position: relative;
}

/* Bottle skins selection: unlike the other diff-card variants, picking
   a skin should only light up the small checkbox (filled solid once
   selected) — the card itself keeps its normal background, no accent
   fill/glow behind it. */
.skin-card.selected {
  background: transparent;
  box-shadow: none;
}

/* Selection checkbox, top-right — reuses the level-select square
   button's shape (aspect-ratio 1, same border + radius). Empty/outline
   until picked, then fills solid so it reads as a checked checkbox. */
.skin-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--card-border);
  border-radius: calc(var(--radius) * 0.6);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  z-index: 2;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.skin-check svg {
  width: 13px;
  height: 13px;
  opacity: 0;
  transition: opacity 0.15s;
}
.skin-card.selected .skin-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--btn-primary-color);
}
.skin-card.selected .skin-check svg {
  opacity: 1;
}

.skin-thumb-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  padding: 6px;
  box-sizing: border-box;
  margin-bottom: 8px;
}

/* The Test Tube card spans the full row width (.skin-card--wide), but
   its thumbnail should stay the same size as the 3 cards above it, not
   stretch to fill the row — cap it to roughly one grid column's width
   (same proportion the other thumbs take of their own card) and center
   it, so the whole card ends up the same height as the row above. */
.skin-card--wide .skin-thumb-wrap {
  width: 29%;
  margin-left: auto;
  margin-right: auto;
}

.skin-thumb {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Reuses the exact .bottle-glass-shine look from in-game bottles, just
   re-anchored to sit over the thumb image (which is centered/bottom-
   aligned in its wrap, not stretched edge-to-edge like .bottle-wrap). */
.skin-thumb-shine::before {
  top: 10%;
  left: 38%;
  width: 10%;
  height: 55%;
}

/* Drop the dark "shadowed base" inset that .bottle-glass-shine adds for
   in-game 3D depth — on the flat skin-select thumbnail it just reads as
   a smudge under the bottle, so keep only the light-side rim shines. */
.skin-thumb-shine {
  box-shadow:
    inset 3px 0 7px rgba(255, 255, 255, 0.28),
    inset -5px 0 9px rgba(0, 0, 0, 0.14),
    inset 0 10px 12px rgba(255, 255, 255, 0.16);
}

.segmented-2 {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
}

.segmented-2 .seg-btn {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}

.segmented-2 .seg-btn.active {
  background: rgba(255, 255, 255, 0.15);
  opacity: 1;
}

.bottle-liquid-transfer {
  transition: none;
}

/* #comp-combo-stat is hidden by default — shown via JS on completion */
#comp-combo-stat {
  display: none;
}