/* ═══════════════════════════════════════════════════════════════
   TROP BEACH — Clean White Theme
           — solid white background across all pages
           — black color scheme for mode select screen
═══════════════════════════════════════════════════════════════ */
/* Font: Bungee is 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=Bungee&display=swap");

/* ── THEME: AMBER (default) — clean white background ──────── */
:root,
body[data-theme="warm"] {
  --bg-image: url('../images/beach-background-lobby.jpg');
  --paper: #ffffff;
  --paper2: #f5f5f5;
  --paper3: #e0e0e0;
  --ink: #000000;
  --ink-mid: #333333;
  --ink-dim: #666666;
  --ink-faint: #cccccc;
  --accent: #000000;
  --accent-lt: #444444;
  --accent-bg: rgba(0, 0, 0, 0.08);
  --blue: #000000;
  --blue-lt: rgba(0, 0, 0, 0.06);
  --row-hl: rgba(0, 0, 0, 0.04);
  --same-hl: rgba(0, 0, 0, 0.08);
  --error-bg: rgba(200, 30, 30, 0.12);
  --error-txt: #c81e1e;
  --success: #2f8a4a;
  --given-bg: rgba(0, 0, 0, 0.04);
  --grid-thin: #e0e0e0;
  --grid-thick: #999999;
  --box-border: #000000;
  --cell-bg: #ffffff;
  --grid-bg: #ffffff;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  --radius: 8px;
  --screen-bg: transparent;
  --card-bg: #ffffff;
  --card-border: #e0e0e0;
  --btn-primary-bg: #000000;
  --btn-primary-color: #ffffff;
  --btn-icon-white: #ffffff;
  --bg-overlay: transparent;
  --grid-wrap-bg: #f5f5f5;
  --grid-wrap-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --grid-wrap-border: #e0e0e0;
}



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



/* ════════════════════════════════════════════════
   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):not(.diff-back-btn) {
  position: relative;
  z-index: 1;
}
#s-complete .complete-title,
#popup-pause .complete-title {
  max-width: 480px;
  width: 100%;
}
#popup-pause .complete-title,
#popup-newgame .popup-brand {
  font-size: 5.4rem;
}
#s-complete .complete-sub,
#s-complete .complete-stats,
#s-complete .complete-btns,
#s-complete .achievement-banner,
#popup-pause .complete-sub,
#popup-pause .complete-stats,
#popup-pause .popup-btn-stack {
  width: 340px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

/* 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: #000000 !important;
}
#s-complete .cstat-lbl {
  color: #000000;
}

/* ════════════════════════════════════════════════
   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);
}
 
/* ════════════════════════════════════════════════
   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-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-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-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;
  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: 560px !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-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 6px;
  white-space: normal;
  text-align: center;
}
.sponsor-title br {
  content: "";
}
.sponsor-sub {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--ink);
  text-transform: uppercase;
}

.sponsor-slot-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.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-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);
  text-transform: uppercase;
}
.sponsor-skip-btn {
  padding: 1em 2em;
  background: #a2ff00;
  border: 2px solid #000000;
  border-radius: 0;
  color: #000000;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  width: 100%;
  max-width: 460px;
}
.sponsor-skip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.sponsor-skip-btn:not(:disabled):hover {
  background: #a2ff00;
  transform: scale(1.05);
  box-shadow: none;
}
.sponsor-skip-btn:not(:disabled):active {
  transform: scale(0.97);
}
.sponsor-skip-btn.blink {
  animation: arrowBlink 0.25s ease;
}


/* ════════════════════════════════════════════════
   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: "Bungee", system-ui, sans-serif;
  overflow: hidden;
  transition:
    background 0.4s,
    color 0.4s;
}
button,
input,
select,
textarea {
  font-family: inherit;
}

/* ── BACKGROUND: beach lobby image ─── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: -1;
}

body.no-bg::after,
body.no-bg::before {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}



/* ════════════════════════════════════════════════
   SCREENS
════════════════════════════════════════════════ */
.screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: 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(160px, 65vw, 500px);
  height: auto;
  margin: 0 auto clamp(14px, 2.5vh, 22px);
}
.brand {
  text-align: center;
}

/* Bungee is now the global font — no per-element override needed */

.loading-sub {
  font-size: 1.1rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-align: center;
  color: #000000;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 5vh, 40px);
}
.brand-sub {
  font-size: 1.1rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-align: center;
  color: #000000;
  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(280px, 60vw, 420px);
  height: 3px;
  background: var(--ink-faint);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.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-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(280px, 60vw, 420px);
  margin: 0 auto;
  gap: 12px;
}
.loading-hint {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-align: left;
  color: var(--ink-dim);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.loading-pct {
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   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 tl"
      "bl br";
    row-gap: clamp(12px, 2.5vh, 20px);
    column-gap: clamp(16px, 4vw, 24px);
    align-items: center;
  }
  .lobby-hero {
    grid-area: hero;
  }
  .lobby-hero .brand-logo {
    margin-top: clamp(8px, 2.5vh, 20px);
  }
  #s-lobby .lobby-corner {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(16px, 4vw, 24px);
  }
  #s-lobby .lobby-corner-tl {
    position: absolute;
    top: clamp(16px, 4vh, 28px);
    left: clamp(16px, 4vw, 28px);
    z-index: 6;
  }
  #s-lobby .lobby-corner-tr {
    position: absolute;
    top: clamp(16px, 4vh, 28px);
    right: clamp(16px, 4vw, 28px);
    z-index: 6;
  }
  #s-lobby .lobby-corner-bl {
    grid-area: bl;
    justify-self: end;
  }
  #s-lobby .lobby-corner-br {
    grid-area: br;
    justify-self: start;
  }
  /* Hide sound button in lobby settings dropdown on mobile (standalone exists in lobby corner) */
  #s-lobby .settings-dropdown .sd-sound {
    display: none;
  }
  /* Settings dropdown opens to the left on mobile, horizontal layout */
  .settings-dropdown-wrap {
    align-items: flex-end;
  }
  .settings-dropdown {
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%) translateX(8px);
    flex-direction: row;
    padding: 0 12px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: none;
  }
  .settings-dropdown.open {
    transform: translateY(-50%) translateX(-6px);
  }
  /* Push logo and heading on mobile without overflowing viewport */
  .lobby-hero .brand-logo {
    margin-top: clamp(10px, 4vh, 24px);
    width: clamp(130px, 36vw, 210px);
    max-height: 22vh;
    object-fit: contain;
  }
  .lobby-hero .brand-sub {
    margin-bottom: clamp(6px, 1.8vh, 14px);
    font-size: clamp(0.55rem, 1.8vw, 0.72rem);
    letter-spacing: 0.18em;
    text-indent: 0.18em;
  }
  .btn-play-big {
    width: clamp(112px, min(32vw, 32vh), 165px) !important;
    height: clamp(112px, min(32vw, 32vh), 165px) !important;
    margin: clamp(4px, 1.5vh, 10px) 0 !important;
  }
  /* Mobile typography reductions */
  .brand-logo,
  .loading-logo {
    width: clamp(130px, 38vw, 220px);
  }
  .loading-sub {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
  .diff-subheading,
  .complete-sub,
  .prep-sub {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
}

/* ── 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);
}




/* 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(130px, min(46vw, 36vh), 340px);
  height: clamp(130px, min(46vw, 36vh), 340px);
  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-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: #000000;
}
.icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.icon-btn svg {
  width: 52%;
  height: 52%;
  fill: currentColor;
  stroke-width: 2.4;
  display: block;
}
.icon-btn.sound-muted,
.icon-btn.music-muted {
  opacity: 0.55;
}

/* ── Cue Toggle Button (Lobby) ─── */
.cue-toggle-btn {
  position: relative;
}
.cue-toggle-btn .cue-btn-icon {
  width: 58%;
  height: 58%;
  display: block;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cue-toggle-btn:active .cue-btn-icon {
  transform: rotate(-18deg) scale(0.92);
}
.cue-toggle-btn .cue-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a2ff00;
  color: #000000;
  font-family: "Bungee", "Arial Black", sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #000000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  line-height: 1;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}
.cue-toggle-btn:hover .cue-badge {
  transform: scale(1.15);
}
.cue-toggle-btn[data-cue="1"] .cue-badge {
  background: #f7b731; /* warm amber/gold for Classic Oak */
}
.cue-toggle-btn[data-cue="2"] .cue-badge {
  background: #00f2fe; /* cyan for Midnight Carbon */
}
.cue-toggle-btn[data-cue="3"] .cue-badge {
  background: #ff3838; /* crimson for Crimson Dragon */
  color: #ffffff;
}

/* ── Manual Sliders Toggle Button ───────────────────────────── */
.manual-toggle-btn {
  position: relative;
  overflow: visible !important;
}
.manual-btn-icon {
  width: 58%;
  height: 58%;
}
.manual-badge {
  position: absolute;
  bottom: -3px;
  right: -5px;
  min-width: 22px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #2a313d;
  border: 1.5px solid #000000;
  color: #ffffff;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 8px;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s, color 0.2s;
}
.manual-toggle-btn.active .manual-badge,
.sd-manual-toggle.active {
  background: #a2ff00 !important;
  color: #000000 !important;
}

/* ── Settings dropdown (top-right corner) ─── */
.settings-dropdown-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.settings-toggle svg {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-toggle.open svg {
  transform: rotate(180deg);
}
.settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 9;
}
.settings-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(6px);
  margin-bottom: 12px;
}

/* Mobile: dropdown opens horizontally to the left */
@media (max-width: 768px) {
  .settings-dropdown-wrap {
    align-items: flex-end;
  }
  .settings-dropdown {
    top: 50%;
    right: 100%;
    left: auto;
    transform: translateY(-50%) translateX(8px);
    flex-direction: row;
    padding: 0 12px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: none;
  }
  .settings-dropdown.open {
    transform: translateY(-50%) translateX(-6px);
  }
}

/* Themed background-cover artwork behind every corner icon button */
.icon-btn,
.diff-back-btn,
.page-back-btn,
.game-act-btn {
  background-image: url("../images/btn-bg/btn-bg-warm.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"] .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: #000000;
}





.diff-back-btn {
  position: absolute;
  top: clamp(16px, 4vh, 28px);
  left: clamp(16px, 4vw, 28px);
  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: #000000;
  transition:
    transform 0.15s,
    filter 0.2s;
}
.diff-back-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.diff-back-btn svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
  display: block;
  stroke: currentColor;
  stroke-width: 0.5;
}

.diff-heading {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 800;
  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);
}

.mode-heading {
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: clamp(12px, 2.5vh, 22px);
}
.heading-accent {
  color: #a2ff00;
}
.letter-border {
  display: inline-block;
  -webkit-text-stroke: 5.5px #000000;
  paint-order: stroke fill;
  margin: 0 1px;
  line-height: 1;
}

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

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin-bottom: 24px;
}
.diff-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 28px) clamp(12px, 3vw, 18px);
  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-icon-wrap i {
  font-size: 1.8rem;
}

/* Mode select screen — options card */
#s-mode {
  background: transparent !important;
  align-items: center;
  justify-content: safe center;
  padding: max(16px, 2.5vh) 20px;
  box-sizing: border-box;
}
.mode-options-card {
  width: clamp(320px, 80vw, 420px);
  background: transparent;
  border: none;
  border-radius: 20px;
  padding: clamp(24px, 5vw, 36px) clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mode-options-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: min(92vw, 540px);
}
.mode-option-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
  max-height: 90px;
  opacity: 1;
  overflow: visible;
}
.mode-option-row.mode-row-collapsed {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transform: scaleY(0);
  overflow: hidden !important;
}
.mode-arrow-btn {
  width: clamp(52px, 12.5vw, 64px);
  height: clamp(52px, 12.5vw, 64px);
  border-radius: 50%;
  background: transparent;
  background-image: url("../images/btn-bg/btn-bg-warm.png");
  background-size: cover;
  background-position: center;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s;
  animation: none;
}
.mode-arrow-btn.blink {
  animation: arrowBlink 0.25s ease;
}
@keyframes arrowBlink {
  0% { filter: brightness(1); }
  40% { filter: brightness(0.4) saturate(0); }
  100% { filter: brightness(1); }
}
.mode-arrow-btn svg {
  width: 60%;
  height: 60%;
  fill: currentColor;
}
.mode-arrow-btn:hover:not(:disabled) {
  transform: scale(1.1);
}
.mode-arrow-btn:disabled {
  opacity: 1;
  cursor: default;
  background-image: url("../images/btn-bg/circle-black-white.png");
}
.mode-arrow-btn:disabled svg {
  fill: #000000;
}
.mode-option-label {
  min-width: clamp(210px, 56vw, 310px);
  text-align: center;
  padding: 16px 20px;
  border: 2px solid #000000;
  border-radius: 0;
  background: #ffffff;
  font-size: clamp(0.85rem, 3vw, 1.05rem);
  font-weight: 800;
  color: #000000;
  letter-spacing: 0.04em;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* 1st Option: Game Mode -> Parrot Green */
#mode-game-type-row .mode-option-label {
  background: #a2ff00 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
/* 2nd Option: Difficulty -> White */
#mode-diff-row .mode-option-label {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}
/* 3rd Option: Table Selection -> White */
#mode-table-label {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
/* 4th Option: Guideline Length -> White bg, Black text, Black border */
#mode-guide-label {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
.mode-option-locked .mode-option-label {
  border-color: #000000;
  color: #000000;
  background: #ffffff;
}
.mode-subheading {
  font-weight: 700;
  color: rgba(0,0,0,0.35);
}
.mode-options-btns {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: clamp(16px, 3.5vh, 32px);
  margin-bottom: 0;
  width: 100%;
  max-width: 540px;
  justify-content: center;
  align-items: stretch;
}
.mode-options-btns .btn-opt {
  background: var(--ink) !important;
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 30px;
}
#btn-mode-continue {
  flex: 2;
  min-height: 88px;
  background: #a2ff00 !important;
  color: #000000 !important;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  border: 3px solid #000000 !important;
  border-radius: 0 !important;
  letter-spacing: 0.04em;
}
#btn-mode-continue .btn-opt-icon {
  fill: #000000;
  width: 28px;
  height: 28px;
}
#btn-mode-continue:hover:not(:disabled) {
  background: #a2ff00 !important;
  transform: scale(1.05);
  box-shadow: none;
  filter: brightness(1);
}
#btn-mode-continue:active:not(:disabled) {
  transform: scale(0.97);
}
#btn-mode-continue.blink {
  animation: arrowBlink 0.25s ease;
}

.btn-opt-icon {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}
.mode-options-btns .btn-opt:hover {
  background: var(--ink-mid);
}
.mode-options-secondary {
  flex: 1;
  max-width: 180px;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 24px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-options-secondary:hover {
  background: var(--ink);
  color: #a2ff00;
}

.diff-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.diff-desc {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--ink-dim);
  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-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 {
  background: transparent !important;
  align-items: center;
  justify-content: center;
  padding-top: clamp(50px, 10vh, 80px);
}
#s-levels > :not(.diff-back-btn):not(.lobby-corner) {
  width: 100%;
  max-width: 420px;
}
#s-play {
  justify-content: flex-start;
  padding-top: 0;
}

/* ── PLAY SCREEN: buttons (independent positioning) ────────── */
.play-game-btn {
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  border-radius: 50%;
  background-image: url("../images/btn-bg/btn-bg-warm.png");
  background-size: cover;
  background-position: center;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.play-game-btn svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
}
.play-game-btn:hover {
  transform: translateY(-2px) scale(1.06);
}
.play-back-btn {
  position: absolute;
  top: clamp(16px, 4vh, 32px);
  left: clamp(16px, 4vw, 32px);
  z-index: 10;
}
.play-game-settings {
  position: absolute;
  top: clamp(16px, 4vh, 32px);
  right: clamp(16px, 4vw, 32px);
  z-index: 10;
}
.play-game-settings .icon-btn {
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  border-radius: 50%;
}
.play-game-settings .icon-btn svg {
  width: 55%;
  height: 55%;
}

/* ── PLAY SCREEN: table section (independent, centered, below topbar) ─────────── */
.play-table-section {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 24px);
  padding: clamp(6px, 1.2vh, 16px) clamp(8px, 1.8vw, 20px);
  box-sizing: border-box;
}
.play-table-wrap {
  position: relative;
  height: 80%;
  width: auto;
  max-width: 80%;
  max-height: 980px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.32));
}
.play-table-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── PLAY SCREEN: box row (centered independently) ─────────── */
.play-box-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 8px);
  width: 100%;
  padding: clamp(6px, 1.2vh, 10px) clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}
.play-box {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.play-box-flank {
  flex: 1 1 0;
  max-width: 500px;
  min-width: 0;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.play-balls-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
  min-width: 0;
  width: 100%;
}
.play-ball {
  width: clamp(26px, 4vw, 38px);
  height: clamp(26px, 4vw, 38px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bungee", system-ui, sans-serif;
  font-weight: 300;
  color: #000000;
  position: relative;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border: 2.5px solid #000000;
}
.play-ball span {
  position: relative;
  z-index: 2;
  font-size: clamp(9px, 1.5vw, 14px);
  line-height: 1;
  font-weight: 300;
  color: #000000;
}
/* Solid numbered balls (left side — solids 1-7) */
.play-ball-solid {
  background: #ffffff;
  border: 2.5px solid #000000;
}
.play-ball-solid span {
  color: #000000;
  font-weight: 300;
}
/* Striped balls (right side — stripes 9-15, pure black) */
.play-ball-striped {
  background: #000000;
  border: 2.5px solid #000000;
}
.play-ball-striped::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  height: 40%;
  background: #ffffff;
  z-index: 1;
}
.play-ball-striped span {
  color: #000000;
  font-weight: 300;
  text-shadow: none;
}
.play-reward-heading {
  display: none;
}
.play-name-btn {
  width: 100%;
  background: #a2ff00;
  border: 2px solid #000000;
  border-radius: 0;
  color: #000000;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  box-sizing: border-box;
  position: relative;
  transition: background 0.2s, transform 0.15s;
}
.play-box-side {
  width: clamp(70px, 12vw, 100px);
  height: 100px;
  border: 4px solid #000000;
  border-radius: 6px;
  background: #ffffff;
  padding: 3px;
  box-sizing: border-box;
}
.play-box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.play-box-center {
  width: clamp(100px, 15vw, 150px);
  max-width: 150px;
  height: 125px;
  background: #000000;
  border: 4px solid #000000;
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-box-center-content {
  display: none;
}
/* Hide any PRIZE / 5000K text inside center box */
.play-box-center *:not(::before):not(::after) {
  display: none !important;
}
.play-box-center::before,
.play-box-center::after {
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.play-box-center::before {
  content: "V";
  color: #a2ff00;
}
.play-box-center::after {
  content: "S";
  color: #a2ff00;
}
.play-coin-img {
  display: none;
}
.play-treasure-text {
  display: none;
}

/* In-game screens use game-bg image */
body.no-bg #s-play {
  background: transparent;
}
body.no-bg #s-game {
  background: var(--paper);
}

.levels-diff-nav {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
  width: 100%;
  max-width: 420px;
}
.levels-diff-link {
  flex: 1;
  padding: 10px 14px;
  background: #ffffff;
  border: 3.5px solid #000000;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.levels-diff-link.active {
  background: #a2ff00;
  color: #000000;
}
.levels-diff-link:hover:not(.active) {
  background: #f0f0f0;
}

.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: 3px solid #000000;
  border-radius: calc(var(--radius) * 0.6);
  color: var(--ink);
  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.active {
  border-color: #000000;
  background: #a2ff00;
  color: #000000;
}
.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;
  color: #000000;
  border: 3px solid #000000;
}
.level-btn.locked svg {
  width: 15px;
  height: 15px;
  fill: #000000;
}

/* 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: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  background-image: url("../images/btn-bg/circle-black-white.png");
  background-size: cover;
  background-position: center;
  border: none;
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s;
}
.page-nav-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.page-nav-btn:hover:not(:disabled) {
  transform: scale(1.1);
}
.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.page-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-dot {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 50%;
  background: transparent;
  background-image: url("../images/btn-bg/btn-bg-warm.png");
  background-size: cover;
  background-position: center;
  border: none;
  color: #000000;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
.page-dot:hover {
  transform: scale(1.1);
}
.page-dot.active {
  background-image: url("../images/btn-bg/circle-black-white.png");
  background-size: cover;
  background-position: center;
  color: #000000;
}



/* ════════════════════════════════════════════════
   PREPARING SCREEN
════════════════════════════════════════════════ */
#s-preparing .popup-brand-logo {
  width: clamp(195px, 48vw, 285px);
}
#s-preparing {
  gap: 0;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg-image) center / cover no-repeat !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#s-preparing.out {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
}

.prep-spinner {
  width: clamp(48px, 12vw, 64px);
  height: clamp(48px, 12vw, 64px);
  margin-top: 20px;
  margin-bottom: 26px;
  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-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: #000000;
  text-transform: uppercase;
  margin-bottom: clamp(24px, 5vh, 36px);
}
.prep-dots {
  display: flex;
  gap: 8px;
}
.prep-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #000000;
  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: #000000;
    transform: scale(1);
  }
  40% {
    background: #a2ff00;
    transform: scale(1.4);
  }
}

/* ════════════════════════════════════════════════
   GAME SCREEN
════════════════════════════════════════════════ */
#s-game {
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  overflow-y: auto;
  align-items: stretch;
  position: relative;
}
.game-pause-btn {
  position: absolute;
  top: clamp(16px, 4vh, 28px);
  right: clamp(16px, 4vw, 28px);
  z-index: 50;
  width: clamp(48px, 6vw, 60px);
  height: clamp(48px, 6vw, 60px);
  border-radius: 50%;
  background-image: url("../images/btn-bg/btn-bg-warm.png");
  background-size: cover;
  background-position: center;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  transition: transform 0.15s;
}
.game-pause-btn svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.game-pause-btn:hover {
  transform: scale(1.1);
}

/* 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: 2px solid var(--ink);
  flex-shrink: 0;
  background: #ffffff;
  position: relative;
  z-index: 5;
}
.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: #000000;
}
.game-act-btn svg {
  width: 48%;
  height: 48%;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}
.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-page-header {
    padding: clamp(10px, 2vw, 16px) clamp(10px, 2.5vw, 16px);
  }
  .play-box-side {
    width: clamp(55px, 10vw, 80px);
    height: 80px;
  }
  .play-box-center {
    width: clamp(80px, 12vw, 120px);
    height: 100px;
  }
  .play-box-center::before,
  .play-box-center::after {
    font-size: 3rem;
  }
  .play-name-btn {
    font-size: clamp(0.65rem, 1.8vw, 0.85rem);
    padding: 6px 10px;
  }
  .play-box-flank {
    height: 100px;
  }
  .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(8px, 2vw, 12px) clamp(8px, 2.5vw, 16px);
  }
  /* 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: 8px;
  }
  .game-header-left {
    align-items: center;
    text-align: center;
  }
  .top-diff-badge {
    align-self: center;
  }
  .top-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .top-title {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
  }
  /* Play screen topbar — single row on mobile without breaking design */
  .play-box-row {
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1vw, 6px);
    padding: clamp(4px, 1vh, 8px) clamp(6px, 2vw, 16px);
  }
  .play-box-flank {
    flex: 1 1 0;
    width: auto;
    height: 75px;
    min-width: 0;
  }
  .play-box-side {
    width: clamp(50px, 14vw, 70px);
    height: 70px;
  }
  .play-box-center {
    width: clamp(70px, 16vw, 100px);
    height: 85px;
  }
  .play-box-center::before,
  .play-box-center::after {
    font-size: 2.4rem;
  }
  .play-name-btn {
    font-size: clamp(0.6rem, 2.5vw, 0.8rem);
    padding: 5px 8px;
    letter-spacing: 0.1em;
  }
  .play-ball {
    width: clamp(22px, 5vw, 30px);
    height: clamp(22px, 5vw, 30px);
    border-width: 2px;
  }
  .play-ball span {
    font-size: clamp(8px, 2vw, 11px);
  }
  .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);
  }
  /* Tutorial popup — tablet */
  .tut-card {
    padding: 14px 16px 12px;
    border-radius: 14px;
  }
  .tut-step-badge {
    font-size: 0.68rem;
    padding: 2px 9px;
    margin-bottom: 8px;
  }
  .tut-icon {
    font-size: 1.9rem;
    margin-bottom: 5px;
  }
  .tut-title {
    font-size: 1rem;
    margin-bottom: 7px;
  }
  .tut-body {
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 13px;
  }
  .tut-actions {
    gap: 8px;
  }
  .tut-btn {
    font-size: 0.72rem;
    padding: 7px 14px;
  }
  /* Mode / options screen (Pick your Challenge) — tighten on tablets */
  .mode-heading {
    margin-bottom: clamp(10px, 2vh, 16px);
  }
  .mode-options-list {
    gap: 12px;
  }
  .mode-option-row {
    gap: 8px;
  }
  .mode-arrow-btn {
    width: clamp(42px, 11vw, 52px);
    height: clamp(42px, 11vw, 52px);
  }
  .mode-option-label {
    min-width: clamp(160px, 50vw, 260px);
    padding: 12px 14px;
    font-size: clamp(0.75rem, 3.2vw, 0.92rem);
  }
  .mode-options-btns {
    margin-top: clamp(12px, 2.5vh, 22px);
  }
  #btn-mode-continue {
    min-height: 68px;
    font-size: 1.2rem;
    padding: 12px 24px;
  }
}

/* Small mobile: tighten everything further */
@media (max-width: 480px) {
  .game-page-header {
    padding: clamp(6px, 1.5vw, 10px) clamp(6px, 2vw, 12px);
    gap: 6px;
  }
  .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;
  }
  /* Play screen topbar small mobile */
  .play-box-row {
    gap: 4px;
    padding: 4px clamp(4px, 1.5vw, 8px);
    flex-wrap: nowrap !important;
  }
  .play-box-side {
    width: clamp(42px, 14vw, 56px);
    height: 56px;
    border-width: 3px;
  }
  .play-box-center {
    width: clamp(56px, 16vw, 80px);
    height: 68px;
  }
  .play-box-center::before,
  .play-box-center::after {
    font-size: 1.8rem;
  }
  .play-name-btn {
    font-size: clamp(0.5rem, 3vw, 0.7rem);
    padding: 4px 6px;
    letter-spacing: 0.08em;
  }
  .play-box-flank {
    flex: 1 1 0;
    width: auto;
    height: 60px;
    min-height: 0;
  }
  .play-ball {
    width: clamp(18px, 4.5vw, 24px);
    height: clamp(18px, 4.5vw, 24px);
    border-width: 1.5px;
  }
  .play-ball span {
    font-size: clamp(7px, 2vw, 9px);
  }  .play-topbar-line {
    height: 2px;
    max-width: 90%;
  }
  /* Smaller back/settings buttons on mobile */
  .play-back-btn,
  .play-game-settings {
    top: clamp(8px, 2vh, 16px);
  }
  .cue-power-slider-wrap,
  .fine-aim-slider-wrap {
    width: clamp(28px, 6vw, 36px);
    height: clamp(180px, 48vh, 260px);
    padding: 6px 3px;
  }
  .play-back-btn {
    left: clamp(8px, 2vw, 16px);
  }
  .play-game-settings {
    right: clamp(8px, 2vw, 16px);
  }
  .play-back-btn .icon-btn,
  .play-game-settings .icon-btn {
    width: clamp(36px, 10vw, 44px);
    height: clamp(36px, 10vw, 44px);
  }
  .play-back-btn .icon-btn svg,
  .play-game-settings .icon-btn svg {
    width: 50%;
    height: 50%;
  }
  /* Mode / options screen (Pick your Challenge) — small phones */
  .diff-back-btn {
    width: clamp(40px, 10vw, 48px);
    height: clamp(40px, 10vw, 48px);
    top: clamp(10px, 2.5vh, 18px);
    left: clamp(10px, 2.5vw, 18px);
  }
  .mode-heading {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    margin-bottom: 10px;
  }
  .letter-border {
    -webkit-text-stroke-width: 3.5px;
  }
  .mode-options-list {
    gap: 8px;
  }
  .mode-option-row {
    gap: 6px;
  }
  .mode-arrow-btn {
    width: clamp(36px, 10vw, 44px);
    height: clamp(36px, 10vw, 44px);
  }
  .mode-option-label {
    min-width: 0;
    flex: 1 1 auto;
    padding: 9px 8px;
    font-size: clamp(0.66rem, 3.6vw, 0.8rem);
    letter-spacing: 0.02em;
  }
  .mode-options-btns {
    margin-top: 10px;
    gap: 8px;
  }
  #btn-mode-continue {
    min-height: 56px;
    font-size: 1rem;
    padding: 10px 18px;
  }
  #btn-mode-continue .btn-opt-icon {
    width: 22px;
    height: 22px;
  }
  /* Tutorial popup — small phones */
  .tut-card {
    padding: 11px 13px 10px;
    border-radius: 12px;
    border-width: 2px;
  }
  .tut-step-badge {
    font-size: 0.6rem;
    padding: 2px 8px;
    margin-bottom: 6px;
  }
  .tut-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
  }
  .tut-title {
    font-size: 0.88rem;
    margin-bottom: 5px;
  }
  .tut-body {
    font-size: 0.72rem;
    line-height: 1.35;
    margin-bottom: 10px;
  }
  .tut-actions {
    gap: 6px;
  }
  .tut-btn {
    font-size: 0.64rem;
    padding: 6px 11px;
    border-radius: 16px;
  }
}

/* Tutorial popup — very small phones (further shrink) */
@media (max-width: 360px) {
  .tut-card {
    padding: 9px 11px 8px;
    border-radius: 10px;
  }
  .tut-step-badge {
    font-size: 0.56rem;
    padding: 1px 7px;
    margin-bottom: 5px;
  }
  .tut-icon {
    font-size: 1.4rem;
    margin-bottom: 3px;
  }
  .tut-title {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }
  .tut-body {
    font-size: 0.66rem;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .tut-actions {
    gap: 5px;
  }
  .tut-btn {
    font-size: 0.58rem;
    padding: 5px 9px;
    border-radius: 14px;
  }
}

.top-title {
  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;
}

.top-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}
.stat-item {
  text-align: right;
}
.stat-val {
  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;
}

/* Grid frame */
.grid-wrap {
  border: 1px solid var(--grid-wrap-border);
}

#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;
}



.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;
}



/* ── 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);
}



.cell.selected {
  background: rgba(217, 72, 15, 0.16) !important;
}


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



/* Equation clue label — sits in the top-left corner of a cage's anchor cell */
.cage-clue {
  position: absolute;
  top: 2px;
  left: 3px;
  font-weight: 700;
  color: var(--grid-thick);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  letter-spacing: 0.2px;
}


.cell-num {
  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);
}



.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;
  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-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);
}
.num-btn.pencil-btn {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  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;
}



/* 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;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.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);
}


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

.complete-title {
  font-size: clamp(3rem, 10vw, 4.4rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.2em;
  text-align: center;
  line-height: 1.15;
}
.complete-sub {
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  color: #000000;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: clamp(20px, 4vh, 36px);
}
.complete-stats {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.cstat {
  flex: 1;
  text-align: center;
  padding: 14px 8px 12px;
  border: 2px solid #000000;
  border-radius: 0;
}
.comp-stat-parrot {
  background: #a2ff00;
}
.comp-stat-white {
  background: #ffffff;
}
.cstat-val {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 600;
  color: #000000;
  line-height: 1;
}
.comp-xp-val {
  color: #a2ff00;
}
.cstat-lbl {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: #000000;
  text-transform: uppercase;
  margin-top: 3px;
}
.complete-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.comp-btn-confirm {
  width: 100%;
  padding: 1.3em 2em;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 0;
  color: #000000;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.comp-btn-confirm:hover {
  background: #a2ff00;
  transform: translateY(-1px);
}
.comp-btn-confirm svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.comp-btn-keep {
  width: 100%;
  padding: 1.3em 2em;
  background: #000000;
  border: 2px solid #000000;
  border-radius: 0;
  color: #ffffff;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.comp-btn-keep:hover {
  background: #a2ff00;
  color: #000000;
  border-color: #000000;
  transform: translateY(-1px);
}
.comp-btn-keep svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ════════════════════════════════════════════════
   PAGE CHROME (info page)
════════════════════════════════════════════════ */
.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: #000000;
  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;
}
.page-title {
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-weight: 600;
  color: var(--ink);
}

.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;
}

/* ════════════════════════════════════════════════
   STATS PAGE (reuses info layout classes)
════════════════════════════════════════════════ */
#popup-stats .page-header {
  max-width: clamp(480px, 92vw, 800px);
}

/* 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-close-btn {
  margin-top: 6px;
}

#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-size: 0.78rem;
  font-weight: 600;
}
#popup-stats .lb-more-entry:hover {
  border-color: var(--accent);
}
#popup-stats .settings-section-label {
  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. ── */
#popup-stats {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
#popup-stats::-webkit-scrollbar {
  width: 8px;
}
#popup-stats::-webkit-scrollbar-track {
  background: transparent;
}
#popup-stats::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#popup-stats::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-lt);
}


/* ════════════════════════════════════════════════
   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);
}



/* ════════════════════════════════════════════════
   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 — white background */
/* Card-only overlay — semi-transparent backdrop + floating popup-card */
.popup-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #ffffff;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.popup-card-overlay.out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.popup-card-overlay .popup-card {
  position: relative;
  z-index: 1;
}

.popup-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #ffffff;
  transition:
    opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure card sits above pseudo-element */
.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-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);
}


/* 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: 16px 10px 14px;
  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;
}

.popup-info-val {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.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-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-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-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;
}

/* ── NEW GAME PAGE OVERRIDES ── */


#popup-newgame .ng-sub {
  color: #000000;
}

#popup-newgame,
#popup-pause {
  padding: 20px;
}
#popup-pause .popup-card {
  max-width: 560px;
  margin: auto 0;
}

#popup-newgame .popup-btn-stack,
#popup-pause .popup-btn-stack {
  margin-top: 10px;
}

/* Pause page button overrides */
#popup-pause .pause-btn-parrot {
  width: 100%;
  padding: 1.3em 2em;
  background: #a2ff00;
  border: 2px solid #000000;
  border-radius: 0;
  color: #000000;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#popup-pause .pause-btn-parrot:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-1px);
}
#popup-pause .pause-btn-parrot svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
#popup-pause .pause-btn-white {
  width: 100%;
  padding: 1.3em 2em;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 0;
  color: #000000;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#popup-pause .pause-btn-white:hover {
  background: #a2ff00;
  transform: translateY(-1px);
}
#popup-pause .pause-btn-white svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Info cells */
.ng-info-parrot {
  background: #a2ff00;
  border: 2px solid #000000;
  border-radius: 0;
}
.ng-info-parrot .popup-info-val {
  color: #000000;
}
.ng-info-parrot .popup-info-lbl {
  color: #000000;
}
.ng-info-white {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 0;
}
.ng-info-white .popup-info-val {
  color: #000000;
}
.ng-info-white .popup-info-lbl {
  color: #000000;
}

/* Yes, New Game button */
.ng-btn-confirm {
  width: 100%;
  padding: 1.3em 2em;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 0;
  color: #000000;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ng-btn-confirm:hover {
  background: #a2ff00;
  transform: translateY(-1px);
}
.ng-btn-confirm svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Keep Playing button */
.ng-btn-keep {
  width: 100%;
  padding: 1.3em 2em;
  background: #000000;
  border: 2px solid #000000;
  border-radius: 0;
  color: #ffffff;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ng-btn-keep:hover {
  background: #a2ff00;
  color: #000000;
  border-color: #000000;
  transform: translateY(-1px);
}
.ng-btn-keep svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* 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: #000000;
  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;
}
.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));
}
.btn-pause {
  background-image: url("../images/btn-bg/btn-bg-warm.png");
}

/* ════════════════════════════════════════════════
   CONFIRM DIALOG (legacy, kept for safety)
════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   BROWSER NOT SUPPORTED SCREEN
   Reuses loader screen structure
════════════════════════════════════════════════ */
#s-nosupport {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: #ffffff;
}
#s-nosupport.visible {
  display: flex;
}
.nosupport-title {
  font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  max-width: 680px;
  width: 100%;
}

.nosupport-msg {
  font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  color: #000000;
  line-height: 1.7;
  max-width: 480px;
  width: 100%;
  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: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #000000;
}

.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;
}

/* ================================================================
   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%
  );
}

.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;
}

/* ═══════════════════════════════════════════════════════════════
   8-BALL POOL — Canvas Overlay
═══════════════════════════════════════════════════════════════ */
#pool-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: crosshair;
  touch-action: none;
  border-radius: inherit;
}
/* Pool overlay floats above the REAL table image — the image stays visible. */
.play-table-wrap.pool-active {
  background: transparent;
}
/* Play screen backdrop: keep wallpaper visible across lobby and in-game */
body.pool-mode #s-play {
  background: transparent;
}
/* In-game background specifically uses beach-background-in-game.jpg */
body.pool-mode::after {
  background-image: url('../images/beach-background-in-game.jpg') !important;
}
/* Mode game-type selector styling */
#mode-game-type-row .mode-option-label {
  background: #a2ff00;
  color: #000000;
  border-color: #000000;
}
#mode-gametype-label {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════
   8-BALL POOL — Topbar driven by the pool engine (body.pool-mode)
   The pool engine updates the existing topbar row (names, group    balls, center VS medallion) in real time.
   Styling: Black borders, Parrot green background, Crisp white text
   with black borders for maximum visibility against light backgrounds.
═══════════════════════════════════════════════════════════════ */

/* Center VS medallion: parrot background, black border, big 5rem white letters */
body.pool-mode .play-box-center {
  width: clamp(150px, 20vw, 230px);
  height: 125px;
  max-width: none;
  padding: 8px;
  background: #a2ff00;
  border: 4px solid #000000;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
body.pool-mode .play-box-center::before,
body.pool-mode .play-box-center::after {
  font-size: 5rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-shadow: 2.5px 2.5px 0 #000000, -2.5px -2.5px 0 #000000, 2.5px -2.5px 0 #000000, -2.5px 2.5px 0 #000000, 0 3px 0 #000000;
  -webkit-text-stroke: 1.5px #000000;
}

/* Player photo frames (either side of VS) — thick black border, white fill */
body.pool-mode .play-box-side {
  width: clamp(70px, 12vw, 100px);
  height: 100px;
  border: 4px solid #000000;
  background: #ffffff;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Back button and settings toggle in-game — black border, prominent shadow */
body.pool-mode .play-game-settings {
  position: absolute;
  top: clamp(10px, 2vh, 18px);
  right: clamp(14px, 2.5vw, 24px);
  z-index: 70;
}
body.pool-mode .play-back-btn,
body.pool-mode .play-game-settings .settings-toggle,
body.pool-mode .play-game-settings .settings-dropdown .icon-btn {
  background-image: url("../images/btn-bg/btn-bg-warm.png");
  border: 3.5px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Player name plates — parrot background, black border, crisp white text */
body.pool-mode .play-name-btn {
  font-size: clamp(0.85rem, 2.2vw, 1.2rem);
  letter-spacing: 0.1em;
  padding: 10px 18px;
  background: #a2ff00;
  border: 3px solid #000000;
  color: #ffffff;
  text-shadow: 1.5px 1.5px 0 #000000, -1.5px -1.5px 0 #000000, 1.5px -1.5px 0 #000000, -1.5px 1.5px 0 #000000;
  -webkit-text-stroke: 0.8px #000000;
  font-weight: 900;
  border-radius: 6px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
body.pool-mode .play-name-btn.turn-active {
  box-shadow: 0 0 16px #a2ff00, 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: #000000;
  transform: scale(1.02);
}
body.pool-mode .play-box-flank {
  border: 3px solid #000000;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
body.pool-mode .play-box-flank.turn-active {
  border-color: #000000;
  box-shadow: 0 0 0 3px #a2ff00, 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Group balls in topbar: rich authentic ball colors with 3D spherical gradients & numbers */
body.pool-mode .play-ball {
  border: 2px solid #000000;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 1.5px 2px rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
body.pool-mode .play-ball span {
  font-size: clamp(8px, 1.3vw, 12px);
  color: #ffffff;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
  position: relative;
  z-index: 2;
}

/* Open table blank balls: clean subtle glossy white */
body.pool-mode .play-ball.blank-ball {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2e4e8 60%, #a0a6b0 100%) !important;
}

/* Striped ball center badge with authentic ivory band */
body.pool-mode .play-ball.play-ball-striped::before {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  right: 0;
  background: #fdfdfc;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
body.pool-mode .play-ball.play-ball-striped span {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Pocketed ball: empty circle (no fill, no stripe, no number) */
body.pool-mode .play-ball.pocketed {
  background: transparent !important;
  border: 2px dashed rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
}
body.pool-mode .play-ball.pocketed::before {
  display: none !important;
}
body.pool-mode .play-ball.pocketed span {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MANUAL 8 BALL POOL CONTROLS (Matching Image 2: media_1788781770490.png)
   Left: Manual Cue Power Slider with real selected cue stick
   Right: Manual Fine-Aim Wheel with notched tactile grooves
   Top-Right: 3D Cue Ball Spin trigger button
   Overlay: Full-Screen 3D Cue Spin Overlay (Matching Image 1)
═══════════════════════════════════════════════════════════════ */

/* Top-Right Cue Ball Spin Drag Widget (Direct on-ball control) */
.play-spin-trigger-wrap {
  display: none;
  position: absolute;
  top: clamp(10px, 2vh, 18px);
  right: clamp(72px, 8.5vw, 92px);
  z-index: 70;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto !important;
  cursor: crosshair;
}
/* Only visible when play screen is active and not transitioned out */
body.pool-mode #s-play:not(.out) .play-spin-trigger-wrap {
  display: block;
}
.cue-ball-btn {
  position: relative;
  width: clamp(52px, 6.2vw, 64px);
  height: clamp(52px, 6.2vw, 64px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffffff 0%, #f4f6f9 45%, #cfd5de 78%, #9ea8b8 100%);
  border: 2.5px solid #000000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.95), inset 0 -4px 8px rgba(0, 0, 0, 0.35);
  cursor: crosshair;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
  outline: none;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto !important;
  touch-action: none;
}
.cue-ball-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 1);
}
.cue-ball-btn:active {
  transform: scale(0.98);
}
.cue-ball-mini-highlight {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 32%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
}
.cue-ball-mini-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid #d81616;
  background: rgba(216, 22, 22, 0.2);
  box-shadow: 0 0 6px rgba(216, 22, 22, 0.7);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  pointer-events: none;
  transition: left 0.05s linear, top 0.05s linear;
  box-sizing: border-box;
}

/* Sliders Visibility Toggle (Forced ON by default on mobile / force-landscape, opt-in on PC) */
body.sliders-enabled .cue-power-slider-wrap,
body.sliders-enabled .fine-aim-slider-wrap {
  display: flex !important;
}
body.force-landscape:not(.sliders-disabled) .cue-power-slider-wrap,
body.force-landscape:not(.sliders-disabled) .fine-aim-slider-wrap {
  display: flex !important;
}
@media (max-width: 900px) {
  body:not(.sliders-disabled) .cue-power-slider-wrap,
  body:not(.sliders-disabled) .fine-aim-slider-wrap {
    display: flex !important;
  }
}
body:not(.sliders-enabled):not(.force-landscape) .cue-power-slider-wrap,
body:not(.sliders-enabled):not(.force-landscape) .fine-aim-slider-wrap,
body.sliders-disabled .cue-power-slider-wrap,
body.sliders-disabled .fine-aim-slider-wrap {
  display: none !important;
}


/* ── LEFT MANUAL CUE POWER SLIDER (Image 2 Left Box) ───────── */
.cue-power-slider-wrap {
  width: clamp(34px, 3.8vw, 44px);
  height: min(78%, 380px);
  background: linear-gradient(180deg, #1e2634 0%, #10151e 40%, #0a0d13 75%, #161e2b 100%);
  border: 2px solid #364456;
  border-radius: 20px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -3px 8px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 8px 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  flex-shrink: 0;
  cursor: grab;
}
.cue-power-slider-wrap:active {
  cursor: grabbing;
}
.cue-power-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #090c10;
  border: 1px solid #141b24;
  box-shadow: inset 0 4px 10px #000000, 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cue-power-level-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.55) 0%, rgba(241, 196, 15, 0.65) 50%, rgba(230, 126, 34, 0.75) 80%, rgba(231, 76, 60, 0.9) 100%);
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
  pointer-events: none;
  z-index: 1;
  transition: height 0.04s ease-out;
}
.cue-power-stick {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}
#cue-power-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}

/* ── RIGHT MANUAL FINE-AIM WHEEL (Image 2 Right Box) ───────── */
.fine-aim-slider-wrap {
  width: clamp(34px, 3.8vw, 44px);
  height: min(78%, 380px);
  background: linear-gradient(180deg, #1e2634 0%, #10151e 40%, #0a0d13 75%, #161e2b 100%);
  border: 2px solid #364456;
  border-radius: 20px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -3px 8px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.35);
  padding: 8px 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  flex-shrink: 0;
  cursor: ns-resize;
}
.fine-aim-track {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #090d12;
  border: 1.5px solid #10151c;
  box-shadow: inset 0 6px 14px #000000, 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fine-aim-wheel {
  position: absolute;
  inset: -30px 0 -30px 0;
  background: repeating-linear-gradient(
    to bottom,
    #2c3748 0px,
    #2c3748 3px,
    #4a5c75 4px,
    #4a5c75 5.5px,
    #0d131c 6px,
    #0d131c 15px
  );
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  will-change: transform;
}
.fine-aim-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.15) 25%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(0, 0, 0, 0.15) 75%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}
.fine-aim-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: #a2ff00;
  box-shadow: 0 0 8px #a2ff00, 0 0 2px #ffffff;
  pointer-events: none;
  z-index: 2;
}

/* ── FULLSCREEN CUE SPIN OVERLAY (Matching media_1788788273705.png) ── */
.spin-fullscreen-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto !important;
}
.spin-fullscreen-overlay.open {
  display: flex !important;
}
.spin-fullscreen-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  cursor: pointer;
}
.spin-fullscreen-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  animation: spinFadeIn 0.16s ease-out both;
}
@keyframes spinFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.spin-overlay-header {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 3.8vw, 1.7rem);
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: clamp(12px, 2.5vh, 20px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9);
  user-select: none;
}
.spin-giant-arena {
  width: clamp(280px, 54vh, 420px);
  height: clamp(280px, 54vh, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  position: relative;
}
.spin-giant-ball {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #ffffff 0%, #fbfcfd 32%, #e5eaf0 66%, #b5c0cb 92%, #8e9ca8 100%);
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.95), inset 0 -14px 28px rgba(0, 0, 0, 0.35);
  cursor: crosshair;
}
.spin-giant-highlight {
  position: absolute;
  top: 10%;
  left: 18%;
  width: 38%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}
.spin-reticle-ring {
  position: absolute;
  width: clamp(48px, 9vw, 60px);
  height: clamp(48px, 9vw, 60px);
  border-radius: 50%;
  border: 5px solid #d81616;
  background: transparent;
  box-shadow: 0 0 8px rgba(216, 22, 22, 0.45);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  pointer-events: none;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE ROTATE OVERLAY
═══════════════════════════════════════════════════════════════ */
#rotate-device-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 24, 0.96);
  z-index: 99999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #ffffff;
}
@media (max-width: 900px) and (orientation: portrait) {
  #rotate-device-overlay {
    display: flex;
  }
}
.rotate-device-content {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rotate-phone-anim {
  width: 64px;
  height: 64px;
  color: #a2ff00;
  animation: phoneRotate 2.2s infinite ease-in-out;
}
.rotate-phone-anim svg {
  width: 100%;
  height: 100%;
}
@keyframes phoneRotate {
  0% { transform: rotate(0deg); }
  35% { transform: rotate(-90deg); }
  70% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
.rotate-title {
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: #ffffff;
}
.rotate-desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
}
.rotate-force-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #a2ff00;
  color: #000000;
  border: 2.5px solid #000000;
  border-radius: 28px;
  padding: 10px 20px;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
  margin-top: 4px;
}
.rotate-force-btn:hover {
  transform: scale(1.04);
  background: #b5ff24;
}
.rotate-force-btn:active {
  transform: scale(0.96);
}

/* User bypassed or force-rotated landscape — hide the overlay */
body.force-landscape #rotate-device-overlay {
  display: none !important;
}

/* Software-rotate the entire viewport 90° so the game looks landscape
   on devices whose browser cannot lock orientation via screen.orientation.lock().
   We rotate around the center of the (portrait) viewport, then shift the
   already-rotated element so it fills the screen edge-to-edge. */
@media (max-width: 900px) and (orientation: portrait) {
  body.force-landscape {
    width: 100vh;
    height: 100vw;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100%);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIRST-TIME PLAYER TUTORIAL OVERLAY
   ═══════════════════════════════════════════════════════════════ */

.pool-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none !important;
  display: none;
}
.pool-tutorial-overlay.tut-active {
  display: block;
  pointer-events: none !important;
}

/* Subtle semi-transparent backdrop — non-blocking so game stays fully interactive */
.tut-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none !important;
}

/* Spotlight ring that glows around the target element */
.tut-spotlight {
  position: absolute;
  border-radius: 50%;
  width: 0;
  height: 0;
  box-shadow:
    0 0 0 3px #a2ff00,
    0 0 0 6px rgba(162, 255, 0, 0.35),
    0 0 30px 12px rgba(162, 255, 0, 0.18);
  pointer-events: none !important;
  transition: left 0.4s cubic-bezier(0.34,1.2,0.64,1),
              top 0.4s cubic-bezier(0.34,1.2,0.64,1),
              width 0.4s cubic-bezier(0.34,1.2,0.64,1),
              height 0.4s cubic-bezier(0.34,1.2,0.64,1);
  animation: tutSpotPulse 1.6s ease-in-out infinite;
}
@keyframes tutSpotPulse {
  0%, 100% { box-shadow: 0 0 0 3px #a2ff00, 0 0 0 6px rgba(162,255,0,0.35), 0 0 30px 12px rgba(162,255,0,0.18); }
  50%       { box-shadow: 0 0 0 5px #a2ff00, 0 0 0 12px rgba(162,255,0,0.22), 0 0 44px 18px rgba(162,255,0,0.10); }
}

/* Tutorial card — fully interactive buttons on top of game */
.tut-card {
  position: fixed !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
  width: clamp(240px, 80vw, 340px);
  background: #0f141c;
  border: 2.5px solid #a2ff00;
  border-radius: 16px;
  padding: 16px 18px 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.85), 0 0 0 1px rgba(162,255,0,0.2);
  transition: left 0.3s ease, top 0.3s ease;
  animation: tutCardIn 0.35s cubic-bezier(0.34,1.3,0.64,1) both;
  box-sizing: border-box;
}
@keyframes tutCardIn {
  from { opacity: 0; transform: scale(0.82) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.tut-card.tut-card-changing {
  animation: tutCardFlip 0.28s ease both;
}
@keyframes tutCardFlip {
  0%   { opacity: 1; transform: scale(1); }
  45%  { opacity: 0; transform: scale(0.88) translateY(8px); }
  55%  { opacity: 0; transform: scale(0.88) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.tut-step-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-family: "Bungee", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #000;
  background: #a2ff00;
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.tut-icon {
  font-size: 2.2rem;
  margin-bottom: 6px;
  line-height: 1;
  text-align: center;
  animation: tutIconBounce 1.2s ease-in-out infinite alternate;
}
@keyframes tutIconBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}

.tut-title {
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.25;
}

.tut-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin-bottom: 16px;
}

.tut-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.tut-btn {
  font-family: "Bungee", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease;
}
.tut-btn:active { transform: scale(0.94); }

.tut-btn-skip {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
}
.tut-btn-skip:hover {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
}

.tut-btn-next {
  background: #a2ff00;
  color: #000000;
}
.tut-btn-next:hover {
  background: #b5ff24;
  transform: scale(1.04);
}

/* Animated arrow pointer */
.tut-arrow {
  position: absolute;
  width: 36px;
  height: 48px;
  pointer-events: none;
  animation: tutArrowBob 0.9s ease-in-out infinite alternate;
  transition: left 0.4s cubic-bezier(0.34,1.2,0.64,1),
              top 0.4s cubic-bezier(0.34,1.2,0.64,1),
              transform 0.3s ease;
  display: none;
}
.tut-arrow.tut-arrow-visible { display: block; }
@keyframes tutArrowBob {
  from { transform: translateY(0) rotate(var(--arrow-rot, 0deg)); }
  to   { transform: translateY(-8px) rotate(var(--arrow-rot, 0deg)); }
}

/* ── MOBILE COMPACT TOPBAR & SLIDERS OVERRIDES ───────────────────────── */
@media (max-width: 900px), (max-height: 520px) {
  body.pool-mode .play-box-row,
  .play-box-row {
    height: clamp(30px, 8vh, 38px) !important;
    padding: 2px 6px !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
  }
  body.pool-mode .play-box-center {
    width: clamp(44px, 10vw, 62px) !important;
    height: clamp(26px, 7vh, 34px) !important;
    padding: 2px !important;
    border: 4px solid #000000 !important;
    border-radius: 8px !important;
  }
  body.pool-mode .play-box-center::before,
  body.pool-mode .play-box-center::after {
    font-size: clamp(0.95rem, 3vw, 1.3rem) !important;
  }
  body.pool-mode .play-box-side {
    width: clamp(26px, 6.5vw, 34px) !important;
    height: clamp(26px, 7vh, 34px) !important;
    border: 4px solid #000000 !important;
    border-radius: 8px !important;
  }
  body.pool-mode .play-box-flank {
    height: clamp(26px, 7vh, 34px) !important;
    border: 3px solid #000000 !important;
    border-radius: 8px !important;
  }
  body.pool-mode .play-name-btn {
    font-size: clamp(0.5rem, 1.4vw, 0.64rem) !important;
    padding: 1px 5px !important;
    border: 3px solid #000000 !important;
    border-radius: 6px !important;
  }
  body.pool-mode .play-balls-row {
    gap: 2px !important;
    padding: 1px 2px !important;
  }
  body.pool-mode .play-ball {
    width: clamp(11px, 2.6vw, 14px) !important;
    height: clamp(11px, 2.6vw, 14px) !important;
    border-width: 2px !important;
  }
  body.pool-mode .play-ball span {
    font-size: clamp(5.5px, 1.1vw, 7.5px) !important;
  }
  .cue-power-slider-wrap,
  .fine-aim-slider-wrap {
    width: clamp(22px, 3.6vw, 28px) !important;
    height: min(74%, 210px) !important;
    border-radius: 12px !important;
    border: 1.5px solid #364456 !important;
    padding: 3px 2px !important;
  }
  .cue-power-track,
  .fine-aim-track {
    border-radius: 10px !important;
  }
  .play-table-wrap {
    height: 94% !important;
    max-width: 94% !important;
  }
}

/* Also explicit overrides for body.force-landscape strictly on mobile portrait viewports */
@media (max-width: 900px) and (orientation: portrait) {
  body.force-landscape.pool-mode .play-box-row,
  body.force-landscape .play-box-row {
    height: clamp(30px, 8vh, 38px) !important;
    padding: 2px 6px !important;
    gap: 3px !important;
    flex-wrap: nowrap !important;
  }
  body.force-landscape.pool-mode .play-box-center {
    width: clamp(38px, 8vw, 52px) !important;
    height: clamp(26px, 6.5vh, 32px) !important;
    padding: 2px !important;
    border: 4px solid #000000 !important;
    border-radius: 8px !important;
  }
  body.force-landscape.pool-mode .play-box-center::before,
  body.force-landscape.pool-mode .play-box-center::after {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem) !important;
  }
  body.force-landscape.pool-mode .play-box-side {
    width: clamp(26px, 5.5vw, 32px) !important;
    height: clamp(26px, 6.5vh, 32px) !important;
    border: 4px solid #000000 !important;
    border-radius: 8px !important;
  }
  body.force-landscape.pool-mode .play-box-flank {
    height: auto !important;
    border: 3px solid #000000 !important;
    border-radius: 8px !important;
    gap: 2px !important;
  }
  body.force-landscape.pool-mode .play-name-btn {
    font-size: clamp(0.48rem, 1.2vw, 0.60rem) !important;
    padding: 1px 6px !important;
    border: 3px solid #000000 !important;
    border-radius: 6px !important;
  }
  body.force-landscape.pool-mode .play-balls-row {
    gap: 2px !important;
    padding: 1px 2px !important;
  }
  body.force-landscape.pool-mode .play-ball {
    width: clamp(10px, 2.2vw, 13px) !important;
    height: clamp(10px, 2.2vw, 13px) !important;
    border-width: 2px !important;
  }
  body.force-landscape.pool-mode .play-ball span {
    font-size: clamp(5px, 0.9vw, 6.5px) !important;
  }
  body.force-landscape .cue-power-slider-wrap,
  body.force-landscape .fine-aim-slider-wrap {
    width: clamp(22px, 3.6vw, 28px) !important;
    height: min(74%, 210px) !important;
    border-radius: 12px !important;
    border: 1.5px solid #364456 !important;
    padding: 3px 2px !important;
  }
  body.force-landscape .cue-power-track,
  body.force-landscape .fine-aim-track {
    border-radius: 10px !important;
  }
  body.force-landscape .play-table-wrap {
    height: 94% !important;
    max-width: 94% !important;
  }

  /* Mode / options screen (Pick your Challenge) — in rotated landscape
     mode the visible height is limited to the phone's real width, so the
     heading + 4 selector rows + Play button must be compressed to fit
     without scrolling. */
  body.force-landscape #s-mode {
    padding: min(3vw, 14px) 16px !important;
  }
  body.force-landscape .mode-heading {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    margin-bottom: min(1.6vw, 8px) !important;
  }
  body.force-landscape .mode-options-list {
    gap: min(1.4vw, 8px) !important;
  }
  body.force-landscape .mode-option-row {
    gap: 6px !important;
  }
  body.force-landscape .mode-arrow-btn {
    width: clamp(32px, 8vw, 42px) !important;
    height: clamp(32px, 8vw, 42px) !important;
  }
  body.force-landscape .mode-option-label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: min(1.8vw, 9px) 8px !important;
    font-size: clamp(0.62rem, 3vw, 0.78rem) !important;
  }
  body.force-landscape .mode-options-btns {
    margin-top: min(1.8vw, 10px) !important;
  }
  body.force-landscape #btn-mode-continue {
    min-height: 46px !important;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
  }
  body.force-landscape #btn-mode-continue .btn-opt-icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* Tutorial popup — rotated landscape mode: the local "height" the card
     must fit within is the phone's real width, so keep it compact. */
  body.force-landscape .tut-card {
    padding: min(2vw, 10px) min(2.4vw, 12px) min(1.8vw, 9px) !important;
    border-radius: 12px !important;
  }
  body.force-landscape .tut-step-badge {
    font-size: 0.6rem !important;
    padding: 1px 8px !important;
    margin-bottom: min(1.4vw, 6px) !important;
  }
  body.force-landscape .tut-icon {
    font-size: 1.5rem !important;
    margin-bottom: min(0.8vw, 4px) !important;
  }
  body.force-landscape .tut-title {
    font-size: 0.86rem !important;
    margin-bottom: min(1vw, 5px) !important;
  }
  body.force-landscape .tut-body {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
    margin-bottom: min(1.8vw, 9px) !important;
  }
  body.force-landscape .tut-actions {
    gap: 6px !important;
  }
  body.force-landscape .tut-btn {
    font-size: 0.6rem !important;
    padding: 5px 10px !important;
  }
}