/* Amy's Sudoku — dark neon aesthetic, touch-friendly */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #07070f;
  --bg-elevated: #0e0e1a;
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --purple: #a855f7;
  --violet: #7c3aed;
  --pink: #f472b6;
  --error: #ff3366;
  --ok: #39ff14;
  --text: #e8e8ff;
  --text-dim: #8a8aaa;
  --cell-bg: rgba(20, 20, 40, 0.85);
  --cell-given: rgba(30, 25, 55, 0.95);
  --glow-cyan: 0 0 8px rgba(0, 240, 255, 0.6), 0 0 20px rgba(0, 240, 255, 0.25);
  --glow-magenta: 0 0 8px rgba(255, 43, 214, 0.55), 0 0 18px rgba(255, 43, 214, 0.2);
  --glow-purple: 0 0 10px rgba(168, 85, 247, 0.5);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --board-max: min(92vw, 420px);
  --cell: calc(var(--board-max) / 9);
  --pad-btn: max(44px, min(12vw, 56px));
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  width: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* Avoid position:fixed on html/body — on iOS it can offset the viewport
     so the header sits above the visible area with no way to scroll back.
     Do not use viewport-fit=cover; safe-area alone does not clear URL bar. */
}

.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0, 240, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 70% 40% at 85% 20%, rgba(255, 43, 214, 0.1), transparent 45%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(124, 58, 237, 0.15), transparent 55%);
  animation: bgPulse 8s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.top-chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
  padding-bottom: 6px;
  margin: 0 -2px;
  padding-left: 2px;
  padding-right: 2px;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 80%, transparent);
}

.header {
  text-align: center;
  padding-top: 4px;
}

.title {
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.4));
  animation: titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.35)); }
  to { filter: drop-shadow(0 0 16px rgba(255, 43, 214, 0.45)); }
}

.tagline {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.stats {
  justify-content: space-around;
  padding: 4px 8px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.stat-value {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
}

.select, .btn {
  min-height: 44px;
  min-width: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s, background 0.2s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  flex: 1;
  max-width: 140px;
}

.select:focus, .btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.btn:active, .select:active {
  transform: scale(0.96);
}

.btn-primary {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(168, 85, 247, 0.3));
  border-color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.btn-primary:hover {
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.7), 0 0 28px rgba(168, 85, 247, 0.3);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(255, 43, 214, 0.4);
}

.btn-icon[aria-pressed="true"] {
  border-color: var(--magenta);
  box-shadow: var(--glow-magenta);
  color: var(--magenta);
}

.btn-toggle[aria-pressed="true"] {
  border-color: var(--purple);
  box-shadow: var(--glow-purple);
  color: #d8b4fe;
  background: rgba(124, 58, 237, 0.25);
}

.btn-lg {
  min-height: 48px;
  padding: 0 28px;
  font-size: 1rem;
}

.icon-music {
  font-size: 1.1rem;
}

.generating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  color: var(--cyan);
  font-size: 0.9rem;
}

.generating.hidden { display: none; }

.gen-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 240, 255, 0.25);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.board-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  min-height: 0;
  padding: 2px 0;
}

.board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: min(var(--board-max), 100%);
  height: min(var(--board-max), 100%);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  gap: 0;
  border: 2px solid var(--cyan);
  border-radius: 6px;
  box-shadow:
    var(--glow-cyan),
    inset 0 0 30px rgba(0, 240, 255, 0.05);
  background: rgba(10, 10, 25, 0.9);
  animation: gridPulse 4s ease-in-out infinite;
  overflow: hidden;
  flex: 0 0 auto;
}

@keyframes gridPulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.45), 0 0 20px rgba(0, 240, 255, 0.15), inset 0 0 30px rgba(0, 240, 255, 0.04);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 43, 214, 0.4), 0 0 28px rgba(168, 85, 247, 0.2), inset 0 0 35px rgba(168, 85, 247, 0.06);
  }
}

button.cell,
.cell {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  width: auto;
  height: auto;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cell-bg);
  border: 1px solid rgba(0, 240, 255, 0.12);
  cursor: pointer;
  min-width: 0;
  min-height: 0;
  font-size: clamp(1rem, 4.2vw, 1.45rem);
  font-weight: 600;
  color: var(--text);
  transition: background 0.15s, box-shadow 0.2s, color 0.15s;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* box borders */
.cell:nth-child(3n):not(:nth-child(9n)) {
  border-right: 2px solid rgba(0, 240, 255, 0.55);
}
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2px solid rgba(0, 240, 255, 0.55);
}

.cell.given {
  background: var(--cell-given);
  color: var(--cyan);
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.5);
  font-weight: 700;
}

.cell.selected {
  background: rgba(0, 240, 255, 0.22);
  box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.35), 0 0 10px rgba(0, 240, 255, 0.3);
  z-index: 1;
}

.cell.peer {
  background: rgba(0, 240, 255, 0.05);
}

/* Per-digit same-number neon highlights (1–9 each unique) */
.cell.same-num {
  z-index: 2;
  animation: sameNumPulse 1.6s ease-in-out infinite alternate;
  color: var(--hn-fg, #00ff66);
  background: var(--hn-bg, rgba(0, 255, 102, 0.32));
  text-shadow:
    0 0 8px var(--hn-glow, rgba(0, 255, 102, 1)),
    0 0 16px var(--hn-glow2, rgba(57, 255, 20, 0.85));
  box-shadow:
    inset 0 0 16px var(--hn-inset, rgba(0, 255, 102, 0.55)),
    0 0 14px var(--hn-glow2, rgba(57, 255, 20, 0.75)),
    0 0 32px var(--hn-glow, rgba(0, 255, 102, 0.45));
}

.cell.given.same-num {
  color: var(--hn-fg, #39ff14);
  font-weight: 700;
}

.cell.selected.same-num {
  background: var(--hn-bg-sel, rgba(0, 255, 102, 0.42));
  box-shadow:
    inset 0 0 18px var(--hn-inset, rgba(0, 255, 102, 0.65)),
    0 0 16px var(--hn-glow2, rgba(57, 255, 20, 0.9)),
    0 0 34px var(--hn-glow, rgba(0, 255, 102, 0.55)),
    inset 0 0 0 2px var(--hn-ring, rgba(57, 255, 20, 0.85));
  z-index: 3;
}

@keyframes sameNumPulse {
  from {
    filter: brightness(0.95);
  }
  to {
    filter: brightness(1.12);
  }
}

/* 1 green · 2 pink · 3 purple · 4 neon aqua · 5 blue · 6 yellow · 7 orange · 8 magenta · 9 acid chartreuse */
.cell.same-num-1 {
  --hn-fg: #00ff66; --hn-bg: rgba(0, 255, 102, 0.34); --hn-bg-sel: rgba(0, 255, 102, 0.45);
  --hn-glow: rgba(0, 255, 102, 0.95); --hn-glow2: rgba(57, 255, 20, 0.85);
  --hn-inset: rgba(0, 255, 102, 0.55); --hn-ring: rgba(57, 255, 20, 0.9);
}
.cell.same-num-2 {
  --hn-fg: #ff7eb6; --hn-bg: rgba(255, 105, 180, 0.34); --hn-bg-sel: rgba(255, 105, 180, 0.48);
  --hn-glow: rgba(255, 105, 180, 0.95); --hn-glow2: rgba(255, 126, 182, 0.85);
  --hn-inset: rgba(255, 105, 180, 0.55); --hn-ring: rgba(255, 126, 182, 0.9);
}
.cell.same-num-3 {
  --hn-fg: #d4a0ff; --hn-bg: rgba(168, 85, 247, 0.36); --hn-bg-sel: rgba(168, 85, 247, 0.5);
  --hn-glow: rgba(192, 132, 252, 0.95); --hn-glow2: rgba(168, 85, 247, 0.85);
  --hn-inset: rgba(168, 85, 247, 0.55); --hn-ring: rgba(216, 180, 254, 0.9);
}
.cell.same-num-4 {
  --hn-fg: #00ffcc; --hn-bg: rgba(0, 255, 204, 0.34); --hn-bg-sel: rgba(0, 255, 204, 0.48);
  --hn-glow: rgba(0, 255, 204, 0.95); --hn-glow2: rgba(0, 230, 180, 0.85);
  --hn-inset: rgba(0, 255, 204, 0.55); --hn-ring: rgba(100, 255, 220, 0.9);
}
.cell.same-num-5 {
  --hn-fg: #7db8ff; --hn-bg: rgba(59, 130, 246, 0.36); --hn-bg-sel: rgba(59, 130, 246, 0.5);
  --hn-glow: rgba(77, 163, 255, 0.95); --hn-glow2: rgba(59, 130, 246, 0.85);
  --hn-inset: rgba(59, 130, 246, 0.55); --hn-ring: rgba(147, 197, 253, 0.9);
}
.cell.same-num-6 {
  --hn-fg: #ffe566; --hn-bg: rgba(250, 204, 21, 0.36); --hn-bg-sel: rgba(250, 204, 21, 0.5);
  --hn-glow: rgba(250, 204, 21, 0.95); --hn-glow2: rgba(253, 224, 71, 0.85);
  --hn-inset: rgba(250, 204, 21, 0.55); --hn-ring: rgba(253, 224, 71, 0.95);
}
.cell.same-num-7 {
  --hn-fg: #ffb347; --hn-bg: rgba(255, 159, 67, 0.36); --hn-bg-sel: rgba(255, 159, 67, 0.5);
  --hn-glow: rgba(255, 159, 67, 0.95); --hn-glow2: rgba(251, 146, 60, 0.85);
  --hn-inset: rgba(255, 159, 67, 0.55); --hn-ring: rgba(253, 186, 116, 0.95);
}
.cell.same-num-8 {
  --hn-fg: #ff4fd8; --hn-bg: rgba(255, 43, 214, 0.34); --hn-bg-sel: rgba(255, 43, 214, 0.48);
  --hn-glow: rgba(255, 43, 214, 0.95); --hn-glow2: rgba(236, 72, 153, 0.85);
  --hn-inset: rgba(255, 43, 214, 0.55); --hn-ring: rgba(244, 114, 182, 0.95);
}
.cell.same-num-9 {
  --hn-fg: #c8ff00; --hn-bg: rgba(200, 255, 0, 0.36); --hn-bg-sel: rgba(200, 255, 0, 0.5);
  --hn-glow: rgba(200, 255, 0, 0.95); --hn-glow2: rgba(180, 255, 40, 0.85);
  --hn-inset: rgba(200, 255, 0, 0.55); --hn-ring: rgba(210, 255, 80, 0.95);
}

.note.same-note {
  color: var(--hn-fg, #00ff66) !important;
  text-shadow:
    0 0 6px var(--hn-glow, rgba(0, 255, 102, 1)),
    0 0 12px var(--hn-glow2, rgba(57, 255, 20, 0.85));
  font-weight: 700;
  transform: scale(1.15);
}
.cell.same-num-1 .note.same-note { color: #00ff66 !important; text-shadow: 0 0 8px rgba(0,255,102,1); }
.cell.same-num-2 .note.same-note { color: #ff7eb6 !important; text-shadow: 0 0 8px rgba(255,105,180,1); }
.cell.same-num-3 .note.same-note { color: #d4a0ff !important; text-shadow: 0 0 8px rgba(168,85,247,1); }
.cell.same-num-4 .note.same-note { color: #00ffcc !important; text-shadow: 0 0 8px rgba(0,255,204,1); }
.cell.same-num-5 .note.same-note { color: #7db8ff !important; text-shadow: 0 0 8px rgba(77,163,255,1); }
.cell.same-num-6 .note.same-note { color: #ffe566 !important; text-shadow: 0 0 8px rgba(250,204,21,1); }
.cell.same-num-7 .note.same-note { color: #ffb347 !important; text-shadow: 0 0 8px rgba(255,159,67,1); }
.cell.same-num-8 .note.same-note { color: #ff4fd8 !important; text-shadow: 0 0 8px rgba(255,43,214,1); }
.cell.same-num-9 .note.same-note { color: #c8ff00 !important; text-shadow: 0 0 8px rgba(200,255,0,1); }

/* Numpad focus colors match digit highlights */
.num-btn.active.num-focus-1 { box-shadow: 0 0 14px rgba(0,255,102,0.8); border-color: #00ff66; color: #00ff66; }
.num-btn.active.num-focus-2 { box-shadow: 0 0 14px rgba(255,105,180,0.8); border-color: #ff7eb6; color: #ff7eb6; }
.num-btn.active.num-focus-3 { box-shadow: 0 0 14px rgba(168,85,247,0.8); border-color: #d4a0ff; color: #d4a0ff; }
.num-btn.active.num-focus-4 { box-shadow: 0 0 14px rgba(0,255,204,0.8); border-color: #00ffcc; color: #00ffcc; }
.num-btn.active.num-focus-5 { box-shadow: 0 0 14px rgba(77,163,255,0.8); border-color: #7db8ff; color: #7db8ff; }
.num-btn.active.num-focus-6 { box-shadow: 0 0 14px rgba(250,204,21,0.8); border-color: #ffe566; color: #ffe566; }
.num-btn.active.num-focus-7 { box-shadow: 0 0 14px rgba(255,159,67,0.8); border-color: #ffb347; color: #ffb347; }
.num-btn.active.num-focus-8 { box-shadow: 0 0 14px rgba(255,43,214,0.8); border-color: #ff4fd8; color: #ff4fd8; }
.num-btn.active.num-focus-9 { box-shadow: 0 0 14px rgba(200,255,0,0.8); border-color: #c8ff00; color: #c8ff00; }

.cell.conflict {
  color: var(--error);
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.7);
  animation: shake 0.35s ease;
}

.cell.wrong-check {
  color: var(--error);
  box-shadow: inset 0 0 10px rgba(255, 51, 102, 0.4);
}

.cell.placed {
  animation: placePop 0.28s ease;
}

.cell.correct-flash {
  animation: correctFlash 0.55s ease;
  box-shadow: inset 0 0 14px rgba(57, 255, 20, 0.55), 0 0 10px rgba(57, 255, 20, 0.35);
  color: #9dffb0;
}

.cell.mark-correct::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.25rem, 6vw, 1.9rem);
  font-weight: 900;
  color: #39ff14;
  text-shadow:
    0 0 6px rgba(57, 255, 20, 1),
    0 0 16px rgba(57, 255, 20, 0.95),
    0 0 28px rgba(120, 255, 80, 0.7);
  pointer-events: none;
  z-index: 2;
  animation: correctTickIn 0.65s ease-out forwards;
  background: rgba(57, 255, 20, 0.14);
}

.cell.mark-wrong {
  color: var(--error);
  text-shadow: 0 0 8px rgba(255, 51, 102, 0.85);
  box-shadow: inset 0 0 12px rgba(255, 51, 102, 0.45);
}

.cell.mark-wrong::after {
  content: "✗";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.1rem, 5.5vw, 1.7rem);
  font-weight: 800;
  color: #ff3366;
  text-shadow:
    0 0 6px rgba(255, 51, 102, 1),
    0 0 14px rgba(255, 0, 80, 0.9);
  pointer-events: none;
  z-index: 2;
  animation: wrongXIn 0.2s ease-out;
  background: rgba(255, 20, 60, 0.12);
}

/* Clues must never show wrong/correct chrome even if a stale class leaks */
.cell.given.mark-wrong,
.cell.given.mark-correct {
  color: inherit;
  text-shadow: none;
  box-shadow: none;
}
.cell.given.mark-wrong::after,
.cell.given.mark-correct::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

@keyframes correctFlash {
  0% { background: rgba(57, 255, 20, 0.35); transform: scale(1.06); }
  100% { background: var(--cell-bg); transform: scale(1); }
}

@keyframes correctTickIn {
  0% { opacity: 0; transform: scale(0.35); }
  35% { opacity: 1; transform: scale(1.18); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}

@keyframes wrongXIn {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

.cell.tap-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 240, 255, 0.25);
  animation: tapFlash 0.25s ease-out forwards;
  pointer-events: none;
}

@keyframes placePop {
  0% { transform: scale(0.85); opacity: 0.5; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@keyframes tapFlash {
  to { opacity: 0; }
}

.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px;
  pointer-events: none;
}

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.4rem, 1.8vw, 0.55rem);
  color: var(--text-dim);
  line-height: 1;
  font-weight: 500;
}

.note.on {
  color: var(--pink);
  text-shadow: 0 0 4px rgba(244, 114, 182, 0.5);
}


/* Place hint — compact how-to under the board (amy17) */
.place-hint {
  margin: 0 auto;
  padding: 0 8px;
  max-width: var(--board-max);
  width: 100%;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(232, 232, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  flex: 0 0 auto;
}

.mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.numpad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  max-width: var(--board-max);
  margin: 0 auto;
  width: 100%;
}

.num-btn {
  aspect-ratio: 1;
  min-height: 44px;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 43, 214, 0.4);
  background: linear-gradient(160deg, rgba(30, 20, 50, 0.95), rgba(15, 15, 35, 0.95));
  color: var(--text);
  font-size: clamp(1rem, 4vw, 1.35rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, border-color 0.2s;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 0 6px rgba(255, 43, 214, 0.15);
}

.num-btn:hover, .num-btn:focus-visible {
  border-color: var(--magenta);
  box-shadow: var(--glow-magenta);
  outline: none;
}

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

.num-btn.used-out {
  opacity: 0.35;
}

.num-btn.active,
.num-btn[aria-pressed="true"] {
  border-color: var(--cyan);
  color: #fff;
  background: linear-gradient(160deg, rgba(0, 240, 255, 0.35), rgba(255, 43, 214, 0.28));
  box-shadow:
    0 0 12px rgba(0, 240, 255, 0.7),
    0 0 24px rgba(255, 43, 214, 0.4),
    inset 0 0 10px rgba(0, 240, 255, 0.25);
  transform: scale(0.96);
}

/* Overlay / win */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 15, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 20px;
  animation: fadeIn 0.35s ease;
}

.overlay.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.overlay-card {
  position: relative;
  background: linear-gradient(160deg, #151528, #0c0c18);
  border: 2px solid var(--cyan);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--glow-cyan), 0 0 40px rgba(168, 85, 247, 0.3);
  overflow: hidden;
  animation: cardPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.win-title {
  font-size: 2.35rem;
  letter-spacing: 0.15em;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--ok), var(--cyan));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
  animation:
    winPulse 0.9s ease-in-out infinite alternate,
    winTitlePop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    winTitleSheen 2.4s linear infinite;
  position: relative;
  z-index: 2;
}

@keyframes winPulse {
  from {
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.65)) drop-shadow(0 0 22px rgba(255, 43, 214, 0.35));
  }
  to {
    filter: drop-shadow(0 0 22px rgba(255, 43, 214, 0.85)) drop-shadow(0 0 28px rgba(57, 255, 20, 0.35));
  }
}

@keyframes winTitlePop {
  0% { transform: scale(0.55); opacity: 0; }
  55% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes winTitleSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.win-message, .win-time {
  color: var(--text-dim);
  margin-bottom: 10px;
  font-size: 0.95rem;
  position: relative;
  z-index: 2;
}

.win-time strong {
  color: var(--cyan);
}

.overlay-card.win-card {
  z-index: 2;
  overflow: hidden;
}

.overlay-card.win-card .btn {
  position: relative;
  z-index: 3;
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.confetti span,
.win-piece {
  position: absolute;
  top: -12px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  animation: fall linear forwards;
  will-change: transform, opacity;
  backface-visibility: hidden;
  opacity: 0.95;
}

.confetti span.cf-circle,
.win-piece.cf-circle {
  border-radius: 50%;
}

.confetti span.cf-strip,
.win-piece.cf-strip {
  border-radius: 1px;
}

@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(var(--spin, 720deg));
    opacity: 0;
  }
}

/* Full-screen win FX layer (behind card, inside overlay) */
#win-fx,
.win-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}

.win-fx.hidden { display: none; }

.win-fx-flash {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.42), rgba(0, 240, 255, 0.18) 32%, transparent 62%);
  animation: winFlash 1.05s ease-out forwards;
}

@keyframes winFlash {
  0% { opacity: 0; transform: scale(0.7); }
  25% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.25); }
}

.win-emoji-burst,
.win-star-burst {
  position: absolute;
  left: 50%;
  top: 38%;
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  transform: translate(-50%, -50%) scale(0.2);
  animation: winEmojiPop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 0 16px rgba(255, 43, 214, 0.7));
  line-height: 1;
}

.win-star-burst {
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  top: 52%;
  animation-delay: 0.12s;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.8));
}

@keyframes winEmojiPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-20deg); }
  35% { opacity: 1; transform: translate(-50%, -55%) scale(1.25) rotate(8deg); }
  70% { opacity: 1; transform: translate(-50%, -60%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.7) rotate(12deg); }
}

.win-piece.win-cannon {
  top: auto;
  animation-name: cannonBurst;
  animation-timing-function: cubic-bezier(0.12, 0.7, 0.25, 1);
  animation-fill-mode: forwards;
}

.win-piece.win-cannon.from-left {
  left: -2%;
}

.win-piece.win-cannon.from-right {
  left: auto;
  right: -2%;
  --cannon-x: calc(-1 * var(--cannon-x, 50vw));
}

@keyframes cannonBurst {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  70% { opacity: 1; }
  100% {
    transform: translate3d(var(--cannon-x, 50vw), var(--cannon-y, -40vh), 0) rotate(var(--spin, 720deg)) scale(0.6);
    opacity: 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Celebration board flash — stronger wave / pulse (amy21) */
.board.celebrate {
  animation: celebrateBoard 2.4s ease;
}

@keyframes celebrateBoard {
  0%, 100% {
    border-color: var(--cyan);
    box-shadow: var(--glow-cyan);
    transform: scale(1);
  }
  15% {
    border-color: var(--magenta);
    box-shadow: var(--glow-magenta), 0 0 28px rgba(255, 43, 214, 0.35);
    transform: scale(1.012);
  }
  35% {
    border-color: var(--purple);
    box-shadow: var(--glow-purple), 0 0 32px rgba(168, 85, 247, 0.4);
    transform: scale(1.018);
  }
  55% {
    border-color: var(--ok);
    box-shadow: 0 0 28px rgba(57, 255, 20, 0.55);
    transform: scale(1.01);
  }
  75% {
    border-color: var(--cyan);
    box-shadow: var(--glow-cyan), 0 0 24px rgba(0, 240, 255, 0.45);
    transform: scale(1.014);
  }
}

.board.celebrate .cell {
  animation: celebrateCellShimmer 1.6s ease both;
  animation-delay: calc(var(--ci, 0) * 0.05s);
}

@keyframes celebrateCellShimmer {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .win-title {
    animation: none;
    transform: none;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
  }
  .board.celebrate {
    animation: none;
    border-color: var(--ok);
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.4);
  }
  .board.celebrate .cell {
    animation: none;
  }
  #win-fx,
  .win-fx,
  .win-fx-flash,
  .win-emoji-burst,
  .win-star-burst,
  .win-piece.win-cannon {
    display: none !important;
  }
  .confetti span {
    animation-duration: 1.1s !important;
  }
}

@media (max-height: 700px) {
  .tagline { display: none; }
  .title { font-size: 1.05rem; letter-spacing: 0.12em; }
  .app { gap: 5px; padding-top: calc(2px + var(--safe-top)); }
}

@media (min-width: 480px) {
  :root {
    --board-max: min(420px, 92vw);
  }
}
/* Phones stay under 600px rule; tablet/desktop can use dynamic viewport */
@media (min-width: 601px) {
  .app {
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
  }
}

/* Mobile (incl. Pro Max): top-down pack, sticky chrome, no greedy board */
@media (max-width: 600px) {
  :root {
    --board-max: min(90vw, 360px);
    --pad-btn: max(34px, min(9.5vw, 46px));
  }

  .app {
    height: auto;
    min-height: 100%;
    min-height: 100dvh;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: flex-start;
    gap: 5px;
    padding-top: calc(2px + var(--safe-top));
  }

  .board-wrap {
    flex: 0 0 auto;
  }

  .top-chrome {
    position: relative;
    top: auto;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .header { padding-top: 0; }
  .tagline { display: none; }
  .title {
    font-size: 1.05rem;
    letter-spacing: 0.14em;
  }

  .toolbar { gap: 4px; }
  .toolbar-row { gap: 4px; }

  /* Reclaim vertical space so title+theme stay on first paint */
  .toolbar-row.volume-row { display: none; }
  .toolbar-row.stats { display: none; }
  .track-label { display: none; }

  .select, .btn {
    min-height: 34px;
    min-width: 34px;
    font-size: 0.78rem;
    padding: 0 8px;
    border-radius: 8px;
  }
  .select-compact {
    max-width: 46%;
    font-size: 0.72rem;
    padding-left: 8px;
    padding-right: 22px;
  }
  .select { max-width: 120px; }

  .music-transport .btn-transport {
    min-width: 34px;
    min-height: 34px;
    padding: 0 6px;
  }
  .music-label { display: none; }

  .mode-row { gap: 4px; }
  .mode-row .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
    font-size: 0.72rem;
  }

  .numpad { gap: 4px; }
  .num-btn {
    min-height: 0;
    border-radius: 8px;
    font-size: clamp(0.9rem, 3.8vw, 1.15rem);
  }

  .generating { padding: 4px; font-size: 0.8rem; }
  .controls { flex: 0 0 auto; }
  .place-hint {
    font-size: 0.62rem;
    padding: 0 4px;
    letter-spacing: 0;
  }
}

@media (max-width: 600px) and (max-height: 740px) {
  :root {
    --board-max: min(88vw, 340px);
    --pad-btn: max(32px, min(9vw, 42px));
  }
  .app { gap: 4px; padding-top: calc(2px + var(--safe-top)); }
  .prefs-row .select-compact { min-height: 30px; }
}

@media (max-width: 600px) and (max-height: 640px) {
  :root {
    --board-max: min(86vw, 300px);
    --pad-btn: max(30px, min(8.5vw, 40px));
  }
  .toolbar-row.music-transport { display: none; }
  .place-hint { display: none; }
  .title { font-size: 0.9rem; letter-spacing: 0.1em; }
  .select, .btn { min-height: 30px; min-width: 30px; }
}

/* Ultra-short phones / landscape-ish short height: shrink board hard, keep header */
@media (max-width: 600px) and (max-height: 560px) {
  :root {
    --board-max: min(82vw, 260px);
    --pad-btn: max(28px, min(8vw, 36px));
  }
  .app { gap: 3px; }
  .mode-row .btn { font-size: 0.68rem; min-height: 28px; }
}

/* Hidden native phone keypad capture — kept off-screen; never focused on iOS */
.native-keypad-input {
  position: fixed;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  pointer-events: none;
  z-index: -1;
  -webkit-text-fill-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}



/* Music transport row */
.music-transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.music-transport .btn-transport {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 1rem;
  border-color: rgba(255, 43, 214, 0.4);
}
.music-transport .btn-transport[aria-pressed="true"] {
  border-color: var(--magenta);
  box-shadow: var(--glow-magenta);
  color: var(--magenta);
}
.track-label {
  flex: 1 1 120px;
  min-width: 0;
  max-width: 180px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pink);
  text-shadow: 0 0 8px rgba(244, 114, 182, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 4px;
}

/* Volume */
.volume-row {
  gap: 10px;
  padding: 0 4px 4px;
}
.volume-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  min-width: 2rem;
}
.volume-slider {
  flex: 1;
  max-width: 220px;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.volume-slider:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 8px;
}
.volume-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,240,255,0.25), rgba(255,43,214,0.45));
  box-shadow: 0 0 8px rgba(0,240,255,0.35);
}
.volume-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0,240,255,0.25), rgba(255,43,214,0.45));
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--cyan) 55%, var(--magenta));
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 12px rgba(0,240,255,0.8), 0 0 18px rgba(255,43,214,0.5);
}
.volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, var(--cyan) 55%, var(--magenta));
  border: 2px solid rgba(255,255,255,0.7);
  box-shadow: 0 0 12px rgba(0,240,255,0.8);
}
.volume-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--cyan);
  min-width: 2rem;
  text-align: right;
  text-shadow: var(--glow-cyan);
}


/* iOS: cells are <button> — kill native chrome */
button.cell,
button.num-btn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
button.cell:disabled {
  opacity: 1;
}

/* —— Prefs row (theme + language) —— */
.prefs-row {
  gap: 8px;
}
.select-compact {
  flex: 1;
  max-width: 160px;
  font-size: 0.8rem;
  padding-left: 10px;
  padding-right: 26px;
}
[dir="rtl"] .select {
  background-position: 12px calc(50% - 3px), 17px calc(50% - 3px);
  padding-right: 14px;
  padding-left: 28px;
}

/* Theme-driven borders / accents use CSS vars */
body {
  --accent: var(--cyan);
  --accent2: var(--magenta);
  --board-border: var(--cyan);
  --board-bg: rgba(10, 10, 25, 0.9);
  --font-display: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body .title {
  font-family: var(--font-display);
}
body .select, body .btn {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
body .select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}
body .select:focus, body .btn:focus-visible {
  outline-color: var(--accent);
}
body .btn-primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--purple) 30%, transparent));
  border-color: var(--accent);
  box-shadow: var(--glow-cyan);
}
body .stat-value {
  color: var(--accent);
  text-shadow: var(--glow-cyan);
}
body .board {
  border-color: var(--board-border);
  background: var(--board-bg);
}
body .cell:nth-child(3n):not(:nth-child(9n)) {
  border-right-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
body .cell:nth-child(n+19):nth-child(-n+27),
body .cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
body .cell.given {
  color: var(--accent);
}
body .cell.selected {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
body .generating { color: var(--accent); }
body .gen-spinner {
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
}
body .volume-label { color: var(--accent2); text-shadow: var(--glow-magenta); }
body .volume-value { color: var(--accent); text-shadow: var(--glow-cyan); }
body .track-label { color: var(--pink); }
body .overlay-card {
  border-color: var(--accent);
  box-shadow: var(--glow-cyan), 0 0 40px color-mix(in srgb, var(--purple) 30%, transparent);
}
body .win-time strong { color: var(--accent); }

/* —— Theme: neon (default / explicit) —— */
body[data-theme="neon"] {
  --bg: #07070f;
  --bg-elevated: #0e0e1a;
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --purple: #a855f7;
  --violet: #7c3aed;
  --pink: #f472b6;
  --text: #e8e8ff;
  --text-dim: #8a8aaa;
  --cell-bg: rgba(20, 20, 40, 0.85);
  --cell-given: rgba(30, 25, 55, 0.95);
  --glow-cyan: 0 0 8px rgba(0, 240, 255, 0.6), 0 0 20px rgba(0, 240, 255, 0.25);
  --glow-magenta: 0 0 8px rgba(255, 43, 214, 0.55), 0 0 18px rgba(255, 43, 214, 0.2);
  --glow-purple: 0 0 10px rgba(168, 85, 247, 0.5);
  --accent: #00f0ff;
  --accent2: #ff2bd6;
  --board-border: #00f0ff;
  --board-bg: rgba(10, 10, 25, 0.9);
  --font-display: "Segoe UI", system-ui, sans-serif;
}
body[data-theme="neon"] .bg-glow {
  background:
    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0, 240, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 70% 40% at 85% 20%, rgba(255, 43, 214, 0.1), transparent 45%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(124, 58, 237, 0.15), transparent 55%);
}

/* —— Theme: sakura / matcha zen —— */
body[data-theme="sakura"] {
  --bg: #1a1518;
  --bg-elevated: #2a2226;
  --cyan: #7dba8a;
  --magenta: #f5a3c0;
  --purple: #c4a484;
  --violet: #8fbc8f;
  --pink: #f8c8dc;
  --text: #f5efe6;
  --text-dim: #a89890;
  --cell-bg: rgba(245, 232, 220, 0.12);
  --cell-given: rgba(125, 186, 138, 0.18);
  --glow-cyan: 0 0 10px rgba(125, 186, 138, 0.45), 0 0 22px rgba(125, 186, 138, 0.2);
  --glow-magenta: 0 0 10px rgba(245, 163, 192, 0.5), 0 0 20px rgba(245, 163, 192, 0.2);
  --glow-purple: 0 0 10px rgba(196, 164, 132, 0.4);
  --accent: #7dba8a;
  --accent2: #f5a3c0;
  --board-border: #f5a3c0;
  --board-bg: rgba(40, 32, 36, 0.92);
  --font-display: "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
}
body[data-theme="sakura"] .bg-glow {
  background:
    radial-gradient(ellipse 70% 45% at 15% 15%, rgba(245, 163, 192, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 40% at 90% 25%, rgba(125, 186, 138, 0.18), transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(245, 232, 220, 0.08), transparent 55%);
}
body[data-theme="sakura"] .bg-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 3px at 12% 30%, rgba(255, 182, 193, 0.55), transparent 4px),
    radial-gradient(circle 2px at 78% 18%, rgba(255, 192, 203, 0.45), transparent 3px),
    radial-gradient(circle 2.5px at 55% 55%, rgba(255, 182, 193, 0.4), transparent 3.5px),
    radial-gradient(circle 2px at 30% 70%, rgba(255, 200, 210, 0.35), transparent 3px),
    radial-gradient(circle 3px at 88% 65%, rgba(255, 182, 193, 0.4), transparent 4px);
  animation: petalDrift 14s ease-in-out infinite alternate;
  opacity: 0.85;
  pointer-events: none;
}
@keyframes petalDrift {
  from { transform: translateY(0) translateX(0); }
  to { transform: translateY(18px) translateX(-10px); }
}
body[data-theme="sakura"] .title {
  background: linear-gradient(90deg, #f5a3c0, #7dba8a, #f8c8dc);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(245, 163, 192, 0.45));
}


/* —— Theme: snow park —— */
body[data-theme="snowpark"] {
  --bg: #0c1520;
  --bg-elevated: #152030;
  --cyan: #a8d8ff;
  --magenta: #7eb8e8;
  --purple: #c5d5e8;
  --violet: #8ecae6;
  --pink: #e0f0ff;
  --text: #f0f7ff;
  --text-dim: #8aa0b8;
  --cell-bg: rgba(200, 220, 240, 0.1);
  --cell-given: rgba(168, 216, 255, 0.16);
  --glow-cyan: 0 0 12px rgba(168, 216, 255, 0.55), 0 0 24px rgba(168, 216, 255, 0.25);
  --glow-magenta: 0 0 10px rgba(126, 184, 232, 0.5), 0 0 18px rgba(126, 184, 232, 0.2);
  --glow-purple: 0 0 10px rgba(197, 213, 232, 0.4);
  --accent: #a8d8ff;
  --accent2: #e0f0ff;
  --board-border: #a8d8ff;
  --board-bg: rgba(16, 28, 42, 0.92);
  --font-display: "Segoe UI", system-ui, sans-serif;
}
body[data-theme="snowpark"] .bg-glow {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(220, 240, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 10% 70%, rgba(142, 202, 230, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 35% at 90% 40%, rgba(255, 255, 255, 0.08), transparent 45%);
}
body[data-theme="snowpark"] .bg-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 10% 20%, rgba(255,255,255,0.7), transparent 2px),
    radial-gradient(circle 1px at 40% 35%, rgba(255,255,255,0.55), transparent 2px),
    radial-gradient(circle 1.5px at 70% 15%, rgba(255,255,255,0.65), transparent 2px),
    radial-gradient(circle 1px at 85% 45%, rgba(255,255,255,0.5), transparent 2px),
    radial-gradient(circle 1.5px at 25% 60%, rgba(255,255,255,0.6), transparent 2px),
    radial-gradient(circle 1px at 55% 75%, rgba(255,255,255,0.45), transparent 2px);
  animation: snowFall 12s linear infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes snowFall {
  from { transform: translateY(-8px); }
  to { transform: translateY(16px); }
}
body[data-theme="snowpark"] .title {
  background: linear-gradient(90deg, #e0f0ff, #a8d8ff, #7eb8e8);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(168, 216, 255, 0.55));
}

/* —— Theme: underwater —— */
body[data-theme="underwater"] {
  --bg: #021820;
  --bg-elevated: #0a2830;
  --cyan: #2ee6d6;
  --magenta: #3aa8ff;
  --purple: #1a6b7a;
  --violet: #00c2b8;
  --pink: #7fffd4;
  --text: #d8fff8;
  --text-dim: #6a9aa0;
  --cell-bg: rgba(10, 50, 60, 0.85);
  --cell-given: rgba(20, 70, 80, 0.92);
  --glow-cyan: 0 0 12px rgba(46, 230, 214, 0.55), 0 0 28px rgba(46, 230, 214, 0.25);
  --glow-magenta: 0 0 10px rgba(58, 168, 255, 0.5), 0 0 20px rgba(58, 168, 255, 0.2);
  --glow-purple: 0 0 10px rgba(0, 194, 184, 0.4);
  --accent: #2ee6d6;
  --accent2: #3aa8ff;
  --board-border: #2ee6d6;
  --board-bg: rgba(4, 30, 40, 0.94);
  --font-display: "Segoe UI", system-ui, sans-serif;
}
body[data-theme="underwater"] .bg-glow {
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(46, 230, 214, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(58, 168, 255, 0.14), transparent 50%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(127, 255, 212, 0.08), transparent 45%);
}
body[data-theme="underwater"] .bg-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 4px at 20% 80%, rgba(127,255,212,0.35), transparent 5px),
    radial-gradient(circle 3px at 45% 60%, rgba(46,230,214,0.3), transparent 4px),
    radial-gradient(circle 5px at 70% 85%, rgba(58,168,255,0.25), transparent 6px),
    radial-gradient(circle 2.5px at 85% 50%, rgba(127,255,212,0.3), transparent 3.5px);
  animation: bubbleRise 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bubbleRise {
  from { transform: translateY(10px); opacity: 0.5; }
  to { transform: translateY(-20px); opacity: 0.9; }
}
body[data-theme="underwater"] .title {
  background: linear-gradient(90deg, #2ee6d6, #3aa8ff, #7fffd4);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(46, 230, 214, 0.5));
}

/* —— Theme: boba milk tea —— */
body[data-theme="boba"] {
  --bg: #2a1f1a;
  --bg-elevated: #3a2c24;
  --cyan: #e8c4a8;
  --magenta: #f5b0c8;
  --purple: #8b5e3c;
  --violet: #c4956a;
  --pink: #ffc0cb;
  --text: #fff5eb;
  --text-dim: #b89a82;
  --cell-bg: rgba(232, 196, 168, 0.12);
  --cell-given: rgba(139, 94, 60, 0.28);
  --glow-cyan: 0 0 10px rgba(232, 196, 168, 0.5), 0 0 20px rgba(232, 196, 168, 0.2);
  --glow-magenta: 0 0 10px rgba(245, 176, 200, 0.5), 0 0 18px rgba(245, 176, 200, 0.2);
  --glow-purple: 0 0 10px rgba(196, 149, 106, 0.4);
  --accent: #e8c4a8;
  --accent2: #f5b0c8;
  --board-border: #c4956a;
  --board-bg: rgba(42, 30, 24, 0.94);
  --font-display: "Segoe UI", "Comic Sans MS", system-ui, sans-serif;
}
body[data-theme="boba"] .bg-glow {
  background:
    radial-gradient(ellipse 70% 45% at 30% 10%, rgba(245, 176, 200, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(232, 196, 168, 0.16), transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(139, 94, 60, 0.2), transparent 55%);
}
body[data-theme="boba"] .bg-glow::before {
  content: "";
  position: absolute;
  inset: auto 0 8% 0;
  height: 40%;
  background-image:
    radial-gradient(circle 5px at 15% 40%, #5c3a21, transparent 6px),
    radial-gradient(circle 4px at 35% 70%, #6b4423, transparent 5px),
    radial-gradient(circle 5px at 55% 30%, #5c3a21, transparent 6px),
    radial-gradient(circle 4px at 75% 60%, #6b4423, transparent 5px),
    radial-gradient(circle 5px at 90% 45%, #5c3a21, transparent 6px);
  opacity: 0.35;
  pointer-events: none;
}
body[data-theme="boba"] .title {
  background: linear-gradient(90deg, #f5b0c8, #e8c4a8, #c4956a);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(245, 176, 200, 0.45));
}

/* —— Theme: Forest —— */
body[data-theme="forest"] {
  --bg: #0c140e;
  --bg-elevated: #152018;
  --cyan: #7ecf8a;
  --magenta: #c4a574;
  --purple: #4a7c59;
  --violet: #a8d5a2;
  --pink: #e8d5a3;
  --text: #e8f0e4;
  --text-dim: #8a9e82;
  --cell-bg: rgba(30, 50, 35, 0.88);
  --cell-given: rgba(45, 70, 50, 0.92);
  --glow-cyan: 0 0 12px rgba(126, 207, 138, 0.5), 0 0 24px rgba(126, 207, 138, 0.22);
  --glow-magenta: 0 0 10px rgba(196, 165, 116, 0.5), 0 0 18px rgba(196, 165, 116, 0.2);
  --glow-purple: 0 0 10px rgba(74, 124, 89, 0.45);
  --accent: #7ecf8a;
  --accent2: #c4a574;
  --board-border: #5a8f62;
  --board-bg: rgba(12, 22, 14, 0.94);
  --font-display: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}
body[data-theme="forest"] .bg-glow {
  background:
    radial-gradient(ellipse 55% 40% at 78% 12%, rgba(255, 220, 140, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 90%, rgba(40, 80, 50, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 35% at 60% 50%, rgba(126, 207, 138, 0.08), transparent 50%);
}
body[data-theme="forest"] .bg-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    conic-gradient(from 200deg at 78% 10%,
      transparent 0deg,
      rgba(255, 230, 160, 0.07) 6deg,
      transparent 12deg,
      transparent 18deg,
      rgba(255, 220, 140, 0.09) 24deg,
      transparent 30deg,
      transparent 38deg,
      rgba(255, 235, 170, 0.06) 44deg,
      transparent 52deg,
      transparent 62deg,
      rgba(255, 225, 150, 0.08) 70deg,
      transparent 80deg,
      transparent 360deg);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
body[data-theme="forest"] .title {
  background: linear-gradient(90deg, #7ecf8a, #c4a574, #a8d5a2);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(126, 207, 138, 0.45));
}



/* —— Theme scene layer (full-bleed FX behind UI) —— */
.theme-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: layout style paint;
}
.bg-glow { z-index: 0; }
.app { z-index: 1; }
body.scene-paused .theme-scene,
body.scene-paused .theme-scene * {
  animation-play-state: paused !important;
}

/* Shared particles */
.sc-el { position: absolute; will-change: transform, opacity; backface-visibility: hidden; }

/* Shared people silhouettes — sized to read at a glance on iPhone */
.sc-p-head {
  position: absolute; width: 15px; height: 15px; border-radius: 50%;
  background: #ffe0c8; box-shadow: inset -1px -1px 0 rgba(200,140,100,0.3);
}
.sc-p-body {
  position: absolute; width: 18px; height: 20px; border-radius: 5px;
  background: #7ec8ff; top: 14px; left: 0;
}
.sc-p-body.med { background: #c4a070; width: 20px; height: 14px; border-radius: 8px; top: 14px; }
.sc-p-body.ski { background: #4a80c0; }
.sc-p-body.elf { background: #3a7a48; }
.sc-p-legs {
  position: absolute; bottom: 0; left: 1px; width: 18px; height: 9px;
  border-radius: 0 0 5px 5px; background: #5a4030;
}
.sc-p-leg {
  position: absolute; bottom: 0; width: 5px; height: 12px; background: #4a3828; border-radius: 1px;
}
.sc-p-leg.l { left: 3px; }
.sc-p-leg.r { left: 11px; }
.sc-p-arm {
  position: absolute; top: 16px; width: 12px; height: 4px; background: #ffe0c8; border-radius: 2px;
}

/* —— amy37 rich multi-part characters (3D CSS/DOM, ~50/50 gender presentation) —— */
.sc-char {
  position: absolute;
  width: 34px;
  height: 58px;
  /* amy37: world scale — visual ~22×38px (~1/3–1/2 of near trees; never taller than mid) */
  --char-scale: 0.65;
  transform: scale(var(--char-scale));
  transform-origin: bottom center;
  z-index: 3;
  pointer-events: none;
}
.sc-char-sprite {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
}
.sc-char-sprite.face-left,
.sc-boba-walker.rev .sc-boba-walker-sprite,
.sc-neon-ped.rev .sc-char-sprite,
.sc-walker.rev .sc-char-sprite,
.sc-hiker.rev .sc-char-sprite {
  transform: scaleX(-1);
}
.sc-char-shadow {
  position: absolute;
  left: 6px; right: 6px; bottom: -2px; height: 6px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.sc-char-head {
  position: absolute;
  top: 0; left: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff6, var(--skin, #e6c09a) 45%, #0003);
  background-color: var(--skin, #e6c09a);
  box-shadow:
    inset -2px -1px 0 rgba(0,0,0,0.12),
    1px 1px 2px rgba(0,0,0,0.15);
  z-index: 4;
}
.sc-char-head-side {
  position: absolute;
  top: 1px; right: -2px;
  width: 5px; height: 14px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18));
  z-index: 1;
}
.sc-char-eye {
  position: absolute;
  top: 6px; width: 2.2px; height: 2.2px;
  border-radius: 50%;
  background: #2a2018;
  z-index: 5;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.25);
}
.sc-char-eye.l { left: 4px; }
.sc-char-eye.r { right: 4px; }
.sc-char-hair {
  position: absolute;
  top: -3px; left: 1px; right: 1px; height: 10px;
  background: var(--hair, #4a3020);
  border-radius: 8px 8px 2px 2px;
  z-index: 3;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.2);
}
/* Hair style silhouettes — feminine styles must read at ~34px wide */
.sc-char.hair-short .sc-char-hair {
  height: 7px; top: -1px; border-radius: 7px 7px 1px 1px;
}
.sc-char.hair-long .sc-char-hair {
  height: 26px; top: -3px; left: -1px; right: -1px;
  border-radius: 9px 9px 3px 3px;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 92% 100%, 70% 78%, 50% 100%, 30% 78%, 8% 100%, 0 55%);
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.22), 0 2px 2px rgba(0,0,0,0.12);
  z-index: 5;
}
.sc-char.hair-bun .sc-char-hair {
  height: 9px; top: -2px;
}
.sc-char.hair-bun .sc-char-hair::after {
  content: "";
  position: absolute;
  top: -7px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hair, #4a3020);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.15);
}
.sc-char.hair-bun .sc-char-hair::before {
  content: "";
  position: absolute;
  top: 6px; left: -2px; right: -2px; height: 10px;
  background: var(--hair, #4a3020);
  border-radius: 0 0 6px 6px;
  opacity: 0.92;
  z-index: -1;
}
.sc-char.hair-ponytail .sc-char-hair {
  height: 9px; top: -2px;
}
.sc-char.hair-ponytail .sc-char-hair::after {
  content: "";
  position: absolute;
  /* amy123: the tail was a 20px rod (taller than the head) swung 22deg out from the side of the head,
     so at a distance it read as an arm or a stick raised over the head (Barcelona's girl with the
     dog, the photographer). Now a short tail tied at the back of the head, hanging to the nape
     behind it */
  top: 4px; right: -2.5px;
  width: 4.5px; height: 11px;
  background: var(--hair, #4a3020);
  border-radius: 3px 3px 3px 4px;
  transform: rotate(10deg); transform-origin: 50% 0;
  z-index: -1;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.25);
}
.sc-char.hair-bob .sc-char-hair {
  height: 16px; top: -2px; left: -2px; right: -2px;
  border-radius: 10px 10px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 88% 100%, 12% 100%, 0 70%);
  z-index: 5;
}
.sc-char.hair-braid .sc-char-hair {
  height: 9px; top: -2px;
}
.sc-char.hair-braid .sc-char-hair::after {
  content: "";
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 22px;
  background:
    repeating-linear-gradient(180deg, var(--hair, #4a3020) 0 3px, #0003 3px 4px);
  border-radius: 2px;
  box-shadow: 1px 0 0 rgba(0,0,0,0.15);
}
.sc-char.hair-afro .sc-char-hair {
  top: -7px; left: -4px; right: -4px; height: 18px;
  border-radius: 50%;
  box-shadow:
    inset -2px -1px 0 rgba(0,0,0,0.18),
    0 0 0 1px rgba(0,0,0,0.08);
}
/* Feminine afro: more volume */
.sc-char.g-f.hair-afro .sc-char-hair {
  top: -8px; left: -5px; right: -5px; height: 20px;
}
.sc-char-headwear {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}
.sc-char.hair-hijab .sc-char-hair { display: none; }
.sc-char.hair-hijab .sc-char-headwear {
  top: -4px; left: -3px; width: 22px; height: 20px;
  background: var(--accent, #c4b090);
  border-radius: 12px 12px 4px 4px;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.15);
  clip-path: polygon(8% 0, 92% 0, 100% 55%, 85% 100%, 15% 100%, 0 55%);
}
.sc-char.hair-hijab .sc-char-headwear::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 2px; right: 2px; height: 10px;
  background: var(--accent, #c4b090);
  border-radius: 0 0 6px 6px;
  opacity: 0.95;
}
.sc-char.hair-beanie .sc-char-hair { height: 4px; top: 2px; }
.sc-char.hair-beanie .sc-char-headwear {
  top: -5px; left: -1px; width: 18px; height: 10px;
  background: linear-gradient(180deg, var(--accent, #c05060), #2a1818);
  border-radius: 10px 10px 2px 2px;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.2);
}
.sc-char.hair-beanie .sc-char-headwear::after {
  content: "";
  position: absolute;
  top: -3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #f0e8e0;
}
/* Women in beanies: long ponytail peek so they don't read male */
.sc-char.g-f.hair-beanie .sc-char-hair {
  height: 6px; top: 1px;
}
.sc-char.g-f.hair-beanie .sc-char-hair::after {
  content: "";
  position: absolute;
  /* amy123: same fix as the ponytail - short, hanging at the nape, behind the head */
  top: 5px; right: -2.5px;
  width: 4.5px; height: 11px;
  background: var(--hair, #4a3020);
  border-radius: 3px;
  transform: rotate(10deg); transform-origin: 50% 0;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.25);
  z-index: -1;
}
.sc-char.hair-hat .sc-char-hair { height: 5px; }
.sc-char.hair-hat .sc-char-headwear {
  top: -6px; left: -3px; width: 22px; height: 8px;
  background: linear-gradient(180deg, #3a3028, #1a1814);
  border-radius: 2px;
}
.sc-char.hair-hat .sc-char-headwear::before {
  content: "";
  position: absolute;
  top: -7px; left: 4px; width: 14px; height: 8px;
  background: #2a2420;
  border-radius: 3px 3px 0 0;
}
.sc-char.g-f.hair-hat .sc-char-hair::after {
  content: "";
  position: absolute;
  top: 5px; right: -2.5px;
  width: 4.5px; height: 11px;
  background: var(--hair, #4a3020);
  border-radius: 3px;
  transform: rotate(10deg); transform-origin: 50% 0;   /* amy123: hanging, not sticking out */
  z-index: -1;
}
.sc-char.hair-scarf .sc-char-hair { height: 6px; }
.sc-char.hair-scarf .sc-char-headwear {
  top: 10px; left: -2px; width: 20px; height: 8px;
  background: var(--accent, #e8e0d0);
  border-radius: 2px;
  box-shadow: 2px 6px 0 -1px var(--accent, #e8e0d0);
}
/* Women with scarf: longer hair visible under/behind */
.sc-char.g-f.hair-scarf .sc-char-hair {
  height: 16px; top: -2px; left: -1px; right: -1px;
  border-radius: 8px 8px 4px 4px;
  z-index: 3;
}

.sc-char-body {
  position: absolute;
  top: 14px; left: 7px;
  width: 20px; height: 24px;
  z-index: 2;
}
.sc-char-body-side {
  position: absolute;
  top: 0; right: -3px;
  width: 5px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.22));
  border-radius: 0 4px 4px 0;
  z-index: 3;
}
.sc-char-top {
  position: absolute;
  inset: 0 0 36% 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 42%), var(--top, #6a8aaa);
  border-radius: 5px 5px 2px 2px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18);
}
.sc-char-jacket {
  position: absolute;
  inset: -1px -2px 30% -2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(180deg, var(--top, #6a8aaa), #1a1820);
  border-radius: 6px 6px 2px 2px;
  z-index: 2;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.2);
  opacity: 0.92;
}
.sc-char-bottom {
  position: absolute;
  left: 1px; right: 1px; bottom: 0; height: 40%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), transparent 35%), var(--bottom, #3a4038);
  border-radius: 2px 2px 3px 3px;
}
/* Feminine silhouette — narrow shoulders + obvious skirt/dress at tiny size */
.sc-char.g-f .sc-char-body {
  width: 17px; left: 8.5px;
}
.sc-char.g-f .sc-char-top {
  border-radius: 6px 6px 3px 3px;
}
.sc-char.g-f .sc-char-jacket {
  inset: -1px -1px 28% -1px;
  border-radius: 7px 7px 3px 3px;
}
.sc-char.g-f .sc-char-bottom {
  left: -3px; right: -3px;
  height: 48%;
  border-radius: 2px 2px 8px 8px;
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  z-index: 2;
}
.sc-char.g-f .sc-char-leg {
  height: 12px;
  width: 5px;
}
.sc-char.g-f .sc-char-leg.l { left: 10px; }
.sc-char.g-f .sc-char-leg.r { left: 19px; }
.sc-char.g-f .sc-char-arm { width: 4.5px; }
.sc-char.g-f .sc-char-arm.l { left: 5px; }
.sc-char.g-f .sc-char-arm.r { right: 5px; }

/* Outfit variants */
.sc-char.outfit-dress .sc-char-bottom {
  left: -4px; right: -4px;
  height: 70%;
  bottom: -8px;
  border-radius: 2px 2px 10px 10px;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  z-index: 2;
}
.sc-char.outfit-dress .sc-char-leg {
  height: 8px;
  opacity: 0.85;
}
.sc-char.outfit-skirt .sc-char-bottom {
  left: -3px; right: -3px;
  height: 52%;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.sc-char.outfit-pants.g-f .sc-char-bottom {
  left: 0; right: 0;
  height: 40%;
  clip-path: none;
  border-radius: 2px 2px 3px 3px;
}
/* Fitted feminine coat over pants (ski/hike) — softer hem flare */
.sc-char.outfit-pants.g-f .sc-char-jacket {
  inset: -1px -2px 22% -2px;
  border-radius: 7px 7px 4px 4px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.sc-char.g-m .sc-char-body { width: 21px; }
.sc-char.g-a .sc-char-body { width: 19px; }

.sc-char-arm {
  position: absolute;
  top: 16px;
  width: 5px; height: 14px;
  background: linear-gradient(180deg, var(--top, #6a8aaa), var(--skin, #e6c09a) 70%);
  border-radius: 2px;
  z-index: 3;
  transform-origin: top center;
}
.sc-char-arm.l { left: 3px; transform: rotate(8deg); }
.sc-char-arm.r { right: 3px; transform: rotate(-8deg); }
.sc-char-hand {
  position: absolute;
  bottom: -3px; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--skin, #e6c09a);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15);
}
.sc-char-leg {
  position: absolute;
  bottom: 0;
  width: 6px; height: 16px;
  background: linear-gradient(180deg, var(--bottom, #3a4038), #1a1814);
  border-radius: 2px;
  z-index: 1;
  transform-origin: top center;
}
.sc-char-leg.l { left: 9px; }
.sc-char-leg.r { left: 19px; }
.sc-char-leg::after {
  content: "";
  position: absolute;
  bottom: 0; left: -1px;
  width: 8px; height: 3px;
  background: #2a2018;
  border-radius: 1px;
}

/* —— Action modifiers + props —— */
.sc-char-prop {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}
.sc-char-prop.cup {
  top: 14px; right: -8px;
  width: 10px; height: 14px;
  border-radius: 1px 1px 3px 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 40%), var(--prop, #d4a090);
  border: 1px solid rgba(255,255,255,0.4);
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.sc-char-prop.cup::before {
  content: "";
  position: absolute; top: -5px; left: 3px;
  width: 2px; height: 7px;
  background: rgba(255,255,255,0.55);
  border-radius: 1px;
}
.sc-char-prop.cup.mini {
  position: relative; display: inline-block;
  top: auto; right: auto;
  width: 6px; height: 9px; margin: 0 1px;
}
.sc-char-prop.cup.pour {
  top: 6px; right: -10px;
  transform: rotate(42deg);
}
.sc-char-prop.stream {
  top: 16px; right: -2px;
  width: 3px; height: 12px;
  background: linear-gradient(to bottom, var(--prop, #ffc8e0), transparent);
  border-radius: 1px;
  opacity: 0.65;
  animation: scCharPour 2.8s ease-in-out infinite;
}
.sc-char-prop.tray {
  top: 12px; right: -16px;
  width: 22px; height: 4px;
  background: #5a4030;
  border-radius: 1px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
.sc-char-prop.food {
  top: 22px; right: -6px;
  width: 10px; height: 6px;
  border-radius: 2px;
  background: linear-gradient(135deg, #e8a070, #c07060);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.sc-char-prop.camera {
  top: 16px; right: -10px;
  width: 12px; height: 9px;
  background: linear-gradient(135deg, #3a3a48, #1a1a22);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.sc-char-prop.camera::after {
  content: "";
  position: absolute;
  top: 2px; left: 3px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #6a8aaa, #1a2830);
  box-shadow: 0 0 3px rgba(100,180,220,0.4);
}
.sc-char-prop.basket {
  top: 20px; right: -12px;
  width: 12px; height: 10px;
  background: linear-gradient(180deg, #c4a070, #8a6840);
  border-radius: 2px 2px 4px 4px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.15);
}
.sc-char-prop.basket::before {
  content: "";
  position: absolute;
  top: -4px; left: 2px; right: 2px; height: 5px;
  border: 2px solid #8a6840;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.sc-char-prop.basket.small {
  width: 9px; height: 7px; right: -8px; top: 28px;
}
.sc-char-prop.ski {
  bottom: 0; left: -4px;
  width: 36px; height: 3px;
  background: linear-gradient(90deg, #d0e0f0, #a0b8d0);
  border-radius: 1px;
  box-shadow: 0 0 3px rgba(200,220,255,0.35);
}
.sc-char-prop.ski-pole {
  top: 10px; right: 0;
  width: 2px; height: 28px;
  background: #8a9aaa;
  transform: rotate(12deg);
  transform-origin: top center;
}
.sc-char-prop.snowball-hand {
  top: 12px; right: -6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(200,230,255,0.7);
}
.sc-char-prop.mug {
  top: 16px; right: -8px;
  width: 9px; height: 10px;
  background: linear-gradient(180deg, #e8d0b0, #c09060);
  border-radius: 1px 1px 2px 2px;
  box-shadow: inset 0 2px 0 rgba(255,200,120,0.35);
}
.sc-char-prop.mug::after {
  content: "";
  position: absolute;
  top: 2px; right: -3px;
  width: 4px; height: 5px;
  border: 2px solid #c09060;
  border-left: none;
  border-radius: 0 4px 4px 0;
}
.sc-char-prop.snow-ball-build {
  top: 24px; left: -8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d0e0f0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sc-char-prop.pack {
  top: 14px; left: 1px;
  width: 10px; height: 14px;
  background: linear-gradient(135deg, #5a4830, #3a2818);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 1px 1px 2px rgba(0,0,0,0.2);
  z-index: 1;
}
.sc-char-prop.pack.big {
  width: 14px; height: 18px; top: 18px; left: -2px;
}
.sc-char-prop.pole {
  top: 10px; right: -2px;
  width: 2.5px; height: 34px;
  background: #8a7050;
  border-radius: 1px;
  transform: rotate(8deg);
  transform-origin: top center;
}
.sc-char-prop.binoculars {
  top: 10px; right: -10px;
  width: 14px; height: 7px;
  background: #3a3a40;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.sc-char-prop.binoculars::before,
.sc-char-prop.binoculars::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 6px; height: 8px;
  border-radius: 2px;
  background: #2a2a30;
  box-shadow: inset 0 0 0 1px #5a5a68;
}
.sc-char-prop.binoculars::before { left: 0; }
.sc-char-prop.binoculars::after { right: 0; }
.sc-char-prop.chat-dot {
  top: -6px; right: -4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 5px -3px 0 -1px rgba(255,255,255,0.4), 9px 1px 0 -2px rgba(255,255,255,0.3);
  animation: scCharChat 2.4s ease-in-out infinite;
}

/* Action pose keyframes */
.sc-char.act-sip .sc-char-arm.r,
.sc-char.act-drink .sc-char-arm.r {
  animation: scCharSipArm 2.6s ease-in-out infinite;
}
.sc-char.act-sip .sc-char-prop.cup,
.sc-char.act-drink .sc-char-prop.cup {
  animation: scCharSipCup 2.6s ease-in-out infinite;
}
.sc-char.act-pour-tea .sc-char-arm.r,
.sc-char.act-pour-pearls .sc-char-arm.r {
  transform: rotate(-40deg);
  animation: scCharPourArm 3s ease-in-out infinite;
}
.sc-char.act-meditate {
  /* parent .sc-meditator provides idle bob */
}
.sc-char.act-meditate .sc-char-leg.l { transform: rotate(-40deg) translate(2px, 2px); height: 10px; }
.sc-char.act-meditate .sc-char-leg.r { transform: rotate(40deg) translate(-2px, 2px); height: 10px; }
.sc-char.act-meditate .sc-char-arm.l { transform: rotate(50deg); }
.sc-char.act-meditate .sc-char-arm.r { transform: rotate(-50deg); }
.sc-char.act-photo .sc-char-arm.r {
  transform: rotate(-25deg);
  animation: scCharPhoto 3.5s ease-in-out infinite;
}
.sc-char.act-stretch .sc-char-arm.l,
.sc-char.act-stretch .sc-char-arm.r {
  animation: scCharStretch 4s ease-in-out infinite;
}
.sc-char.act-stretch .sc-char-arm.l { transform-origin: top center; }
.sc-char.act-throw .sc-char-arm.r {
  transform-origin: top left;
  animation: scThrowArm 2.4s ease-in-out infinite;
}
.sc-char.act-throw.k1 .sc-char-arm.l,
.sc-snow-kid.k1 .sc-char.act-throw .sc-char-arm.l {
  animation: scThrowArm 2.4s ease-in-out infinite reverse;
}
.sc-char.act-wave .sc-char-arm.r {
  transform-origin: top center;
  animation: scCharWave 1.6s ease-in-out infinite;
}
.sc-char.act-cocoa .sc-char-arm.r {
  transform: rotate(-20deg);
  animation: scCharSipArm 3.2s ease-in-out infinite;
}
.sc-char.act-build-snow .sc-char-arm.l,
.sc-char.act-build-snow .sc-char-arm.r {
  transform: rotate(25deg);
  animation: scCharBuild 2.8s ease-in-out infinite;
}
.sc-char.act-build-snow .sc-char-arm.l { transform: rotate(-25deg); }
.sc-char.act-sit-eat {
  height: 48px;
}
.sc-char.act-sit-eat .sc-char-leg.l,
.sc-char.act-sit-eat .sc-char-leg.r {
  height: 10px; bottom: 2px;
  transform: rotate(70deg);
}
.sc-char.act-sit-eat .sc-char-leg.r { transform: rotate(-70deg); }
.sc-char.act-sit-eat .sc-char-arm.r { transform: rotate(-30deg); }
.sc-char.act-forage {
  height: 42px;
}
.sc-char.act-forage .sc-char-body { top: 18px; }
.sc-char.act-forage .sc-char-head { top: 4px; }
.sc-char.act-forage .sc-char-leg.l,
.sc-char.act-forage .sc-char-leg.r {
  height: 10px;
  transform: rotate(55deg);
}
.sc-char.act-forage .sc-char-leg.r { transform: rotate(-15deg); }
.sc-char.act-forage .sc-char-arm.r { transform: rotate(40deg); }
.sc-char.act-rest .sc-char-body { top: 18px; }
.sc-char.act-rest .sc-char-leg.l { transform: rotate(15deg); }
.sc-char.act-rest .sc-char-arm.l { transform: rotate(30deg); }
.sc-char.act-point .sc-char-arm.r {
  transform: rotate(-70deg) translate(2px, -2px);
  height: 16px;
}
.sc-char.act-binoculars .sc-char-arm.l,
.sc-char.act-binoculars .sc-char-arm.r {
  transform: rotate(-40deg);
  top: 12px;
}
.sc-char.act-binoculars .sc-char-arm.l { transform: rotate(40deg); }
.sc-char.act-hike .sc-char-leg.l,
.sc-char.act-walk .sc-char-leg.l,
.sc-char.act-walk-basket .sc-char-leg.l,
.sc-char.act-walk-cup .sc-char-leg.l,
.sc-char.act-walk-coat .sc-char-leg.l {
  animation: scCharWalkL 0.7s ease-in-out infinite;
}
.sc-char.act-hike .sc-char-leg.r,
.sc-char.act-walk .sc-char-leg.r,
.sc-char.act-walk-basket .sc-char-leg.r,
.sc-char.act-walk-cup .sc-char-leg.r,
.sc-char.act-walk-coat .sc-char-leg.r {
  animation: scCharWalkR 0.7s ease-in-out infinite;
}
.sc-char.act-hike .sc-char-arm.l,
.sc-char.act-walk .sc-char-arm.l {
  animation: scCharWalkR 0.7s ease-in-out infinite;
}
.sc-char.act-hike .sc-char-arm.r,
.sc-char.act-walk .sc-char-arm.r {
  animation: scCharWalkL 0.7s ease-in-out infinite;
}
.sc-char.act-chat .sc-char-arm.r {
  transform: rotate(-25deg);
  animation: scCharChatArm 2.2s ease-in-out infinite;
}
.sc-char.act-tray .sc-char-arm.l,
.sc-char.act-tray .sc-char-arm.r {
  transform: rotate(-15deg);
  top: 14px;
}
.sc-char.act-ski {
  animation: none; /* parent .sc-skier handles travel */
}
.sc-char.act-ski .sc-char-leg.l { transform: rotate(20deg); }
.sc-char.act-ski .sc-char-leg.r { transform: rotate(-10deg); }
.sc-char.act-ski .sc-char-arm.l { transform: rotate(30deg); }
.sc-char.act-ski .sc-char-arm.r { transform: rotate(-35deg); }

@keyframes scCharSipArm {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(-40deg) translateY(-2px); }
}
@keyframes scCharSipCup {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg) translateY(-3px); }
}
@keyframes scCharPour {
  0%, 100% { opacity: 0; height: 4px; }
  40%, 60% { opacity: 0.7; height: 14px; }
}
@keyframes scCharPourArm {
  0%, 100% { transform: rotate(-30deg); }
  50% { transform: rotate(-55deg); }
}
@keyframes scCharPhoto {
  0%, 70%, 100% { transform: rotate(-25deg); }
  80% { transform: rotate(-25deg) scale(1.05); }
}
@keyframes scCharStretch {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-110deg) translateY(-4px); }
}
@keyframes scCharWave {
  0%, 100% { transform: rotate(-20deg); }
  50% { transform: rotate(-90deg); }
}
@keyframes scCharBuild {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50% { transform: rotate(35deg) translateY(3px); }
}
@keyframes scCharWalkL {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(-12deg); }
}
@keyframes scCharWalkR {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
@keyframes scCharChat {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 0.85; transform: translateY(-3px); }
}
@keyframes scCharChatArm {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(-35deg); }
}

/* Theme placement wrappers — sized for amy37 smaller world-scale people */
.sc-picnic .sc-char {
  bottom: 8px; left: 6px;
}
.sc-picnic .sc-char.buddy {
  left: 22px;
}
.sc-meditator {
  width: 30px; height: 48px;
}
.sc-meditator .sc-char {
  position: relative; left: 0; bottom: 0;
}
.sc-walker {
  width: 28px; height: 48px;
}
.sc-walker .sc-char {
  position: relative; left: 0; bottom: 0;
}
.sc-skier .sc-char {
  position: relative; left: 0; top: 0;
  width: 28px; height: 40px;
}
.sc-snow-kid {
  width: 28px; height: 46px;
}
.sc-snow-kid .sc-char {
  position: relative; left: 0; bottom: 0;
}
.sc-snow-fight {
  width: 96px; height: 52px;
}
.sc-snow-extra {
  position: absolute; width: 28px; height: 48px;
}
.sc-snow-extra.sc-snow-walker {
  animation: scWalkRelocate 28s linear infinite alternate;
  --walk-from: 2%;
  --walk-to: 12%;
}
.sc-boba-char {
  width: 32px; height: 52px;
}
.sc-boba-char .sc-char {
  position: relative; left: 2px; bottom: 0;
}
.sc-boba-fig,
.sc-char.boba-walk-fig {
  position: absolute; bottom: 0; width: 28px; height: 46px;
  left: 0;
}
.sc-char.boba-walk-fig.buddy { left: 22px; }
.sc-boba-walker { width: 32px; height: 48px; }
.sc-boba-walker.pair { width: 56px; }
.sc-hiker {
  width: 30px; height: 50px;
}
.sc-hiker .sc-char {
  position: relative; left: 0; bottom: 0;
}
.sc-forest-static {
  position: absolute; width: 30px; height: 48px;
}
.sc-neon-ped {
  position: absolute; width: 28px; height: 46px;
  animation: scDrive linear infinite;
  opacity: 0.7;
}
.sc-neon-ped.rev { animation-name: scDriveRev; }
.sc-neon-ped .sc-char {
  position: relative; left: 0; bottom: 0;
}

/* iPhone: slightly larger than desktop for readability, still < nearby trees */
@media (max-width: 600px) {
  .sc-char {
    --char-scale: 0.78;
  }
  .sc-picnic { width: 68px; height: 48px; }
  /* amy41: open a clear plaza under Notes/numpad so village sits with
     the near/fore trees (bottom ~2–8%), NOT raised into the opaque board
     (amy40 bottom 26–30% failed — behind rgba board). */
  body[data-theme="snowpark"] .app {
    padding-bottom: 72px; /* plaza for houses + snowball throwers */
  }
  .sc-snow-fight {
    width: 104px;
    height: 64px;
    z-index: 12;
    overflow: visible;
  }
  .sc-snow-fight .sc-snow-kid,
  .sc-snow-fight .sc-char,
  .sc-snow-fight .sc-snowball {
    opacity: 1;
    visibility: visible;
  }
  .sc-cabin {
    z-index: 8;
    overflow: visible;
  }
}

/* —— neon: cyberpunk city —— */
.sc-cloud {
  height: 28px; border-radius: 40px;
  background: rgba(180,200,255,0.2);
  filter: blur(8px);
  animation: scCloudDrift linear infinite;
}
@keyframes scCloudDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(120vw, 0, 0); }
}
/* Crescent moon — overlapping darker disc (not full/phased) */
.sc-moon {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8e0, #e8d090 55%, #c8a060);
  box-shadow: 0 0 18px rgba(255,230,160,0.28), 0 0 36px rgba(255,200,100,0.12);
  overflow: visible;
}
.sc-moon-shadow {
  position: absolute;
  width: 36px; height: 36px; border-radius: 50%;
  background: #070712;
  top: -2px; left: 14px;
  box-shadow: 0 0 6px #070712;
}
/* 3D skyscrapers — front face + darker side + slight perspective */
.sc-bldg {
  position: absolute;
  background: transparent;
  transform: skewX(var(--skew, -6deg));
  transform-origin: bottom center;
}
.sc-bldg-face {
  position: absolute; inset: 0;
  background-color: #0c0818;
  background-image:
    radial-gradient(circle, var(--win, #00f0ff) 0.85px, transparent 1.05px),
    linear-gradient(180deg, #1a1028 0%, #0c0818 100%);
  background-size: var(--win-gap, 6px) 9px, 100% 100%;
  background-position: 2px 3px, 0 0;
  box-shadow: inset 0 0 0 1px rgba(0,240,255,0.1);
  clip-path: polygon(0 2%, 92% 0, 100% 100%, 0 100%);
}
.sc-bldg-side {
  position: absolute; top: 1%; right: -18%; width: 22%; height: 99%;
  background: linear-gradient(180deg, #080610, #05040c);
  clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
  opacity: 0.85;
  box-shadow: inset 1px 0 0 rgba(0,240,255,0.06);
}
.sc-bldg-top {
  position: absolute; top: -3px; left: 4%; right: 22%; height: 4px;
  background: linear-gradient(90deg, #1a1430, #0e0a1a);
  clip-path: polygon(8% 100%, 100% 100%, 85% 0, 0 0);
  opacity: 0.7;
}
.sc-bldg.far { filter: brightness(0.55) contrast(0.9); transform: skewX(var(--skew, -4deg)) scale(0.92); }
.sc-bldg.mid { filter: brightness(0.75); }
.sc-bldg.near { filter: brightness(0.95); }
.sc-bldg-ant {
  position: absolute; top: -14px; left: 50%; width: 2px; height: 14px;
  background: var(--win, #00f0ff); transform: translateX(-50%);
  box-shadow: 0 0 5px var(--win, #00f0ff); opacity: 0.55;
}
.sc-taxi, .sc-heli {
  position: absolute; width: 28px; height: 12px;
}
.sc-taxi-body {
  position: absolute; inset: 2px 0 0 0; height: 8px; border-radius: 3px 6px 3px 3px;
  background: currentColor;
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
  opacity: 0.85;
}
.sc-taxi-glow {
  position: absolute; right: -8px; top: 3px; width: 10px; height: 4px;
  background: linear-gradient(90deg, rgba(255,220,140,0.5), transparent);
  filter: blur(1.5px); opacity: 0.45;
}
.sc-taxi.rev .sc-taxi-glow {
  right: auto; left: -8px;
  background: linear-gradient(270deg, rgba(255,220,140,0.5), transparent);
}
/* Heli sprite faces RIGHT by default (nose right, tail left); .rev flips via scaleX(-1) */
.sc-heli-sprite {
  position: absolute; inset: 0;
}
.sc-heli.rev .sc-heli-sprite {
  transform: scaleX(-1);
}
.sc-heli-body {
  position: absolute; left: 8px; top: 5px; width: 16px; height: 7px;
  border-radius: 6px 4px 4px 3px; background: currentColor;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.sc-heli-tail {
  position: absolute; left: -2px; top: 7px; width: 12px; height: 2px; background: currentColor;
}
.sc-heli-rotor {
  position: absolute; left: 4px; top: 0; width: 24px; height: 2px;
  background: rgba(255,255,255,0.35);
  animation: scRotor 0.15s linear infinite;
  transform-origin: 12px 1px;
}
@keyframes scRotor {
  from { transform: scaleX(1); }
  50% { transform: scaleX(0.3); }
  to { transform: scaleX(1); }
}
.sc-neon-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background:
    linear-gradient(to top, #0a0614 0%, #12101c 55%, #1a1428 85%, rgba(20,16,32,0.4) 100%);
  box-shadow: inset 0 2px 0 rgba(0,240,255,0.1);
}
.sc-neon-curb { display: none; }
.sc-neon-edge {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 2%, rgba(255,200,80,0.3) 10%, rgba(255,200,80,0.4) 50%, rgba(255,200,80,0.3) 90%, transparent 98%);
  opacity: 0.55;
}
.sc-neon-lane {
  position: absolute; left: -5%; right: -5%; height: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(0,240,255,0.28) 0 18px,
    transparent 18px 36px);
  opacity: 0.4;
}
.sc-streetlamp {
  position: absolute; width: 10px; height: 48px;
  z-index: 2;
}
.sc-lamp-pole {
  position: absolute; bottom: 0; left: 4px; width: 2px; height: 42px;
  background: linear-gradient(to top, #1a1528, #3a3550);
}
.sc-lamp-arm {
  position: absolute; top: 4px; left: 4px; width: 14px; height: 2px;
  background: #3a3550;
  border-radius: 1px;
}
.sc-lamp-glow {
  position: absolute; top: 0; left: 12px; width: 10px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,160,0.85), rgba(255,200,100,0.3) 50%, transparent 70%);
  box-shadow: 0 0 10px rgba(255,220,140,0.4), 0 6px 14px rgba(255,200,100,0.12);
}
/* Real tiny cars — muted, soft, no harsh neon bloom */
.sc-car {
  position: absolute;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--body, #4a6878);
}
.sc-car-sprite {
  position: absolute; inset: 0;
}
.sc-car-body {
  position: absolute; bottom: 3px; left: 0; right: 0; height: 55%;
  background: var(--body, #4a6878);
  border-radius: 3px 5px 2px 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(0,0,0,0.35);
}
.sc-car-cabin {
  position: absolute; bottom: 48%; left: 22%; width: 42%; height: 38%;
  background: var(--body, #4a6878);
  border-radius: 3px 4px 0 0;
  filter: brightness(1.05);
}
.sc-car-roof {
  position: absolute; bottom: 72%; left: 28%; width: 30%; height: 14%;
  background: var(--body, #4a6878);
  border-radius: 2px 3px 0 0;
  filter: brightness(0.9);
}
.sc-car-win {
  position: absolute; bottom: 52%; left: 26%; width: 34%; height: 28%;
  background: rgba(160,190,220,0.45);
  border-radius: 2px 3px 1px 1px;
  box-shadow: inset 0 0 2px rgba(255,255,255,0.2);
}
.sc-car-wheel {
  position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%;
  background: #1a1a22;
  box-shadow: inset 0 0 0 1.5px #2a2a35;
}
.sc-car-wheel.front { right: 4px; }
.sc-car-wheel.rear { left: 4px; }
.sc-car-light {
  position: absolute; bottom: 8px; width: 3px; height: 3px; border-radius: 50%;
}
.sc-car-light.head {
  right: 1px;
  background: rgba(255,240,180,0.75);
  box-shadow: 0 0 3px rgba(255,230,160,0.35);
}
.sc-car-light.tail {
  left: 1px;
  background: rgba(200,60,60,0.7);
  box-shadow: 0 0 2px rgba(180,40,40,0.3);
}
.sc-car.sedan .sc-car-cabin { left: 20%; width: 48%; }
.sc-car.coupe .sc-car-cabin { left: 28%; width: 38%; height: 34%; }
.sc-car.coupe .sc-car-win { left: 30%; width: 32%; }
.sc-truck-cab {
  position: absolute; bottom: 3px; right: 0; width: 32%; height: 78%;
  background: var(--body, #4a6878);
  border-radius: 3px 4px 2px 0;
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.sc-car.truck .sc-car-cabin { display: none; }
.sc-car.truck .sc-car-win {
  bottom: 48%; left: auto; right: 4%; width: 22%; height: 30%;
}
.sc-car.truck .sc-car-body { height: 48%; right: 28%; }
.sc-taxi-sign {
  position: absolute; bottom: 78%; left: 40%; width: 10px; height: 4px;
  background: rgba(220,180,60,0.75);
  border-radius: 1px;
}
.sc-car.taxi .sc-car-body { filter: brightness(1.1); }
/* Motorcycle */
.sc-moto-body {
  position: absolute; bottom: 5px; left: 4px; right: 4px; height: 4px;
  background: var(--body, #4a6878);
  border-radius: 2px;
}
.sc-moto-wheel {
  position: absolute; bottom: 0; width: 5px; height: 5px; border-radius: 50%;
  background: #1a1a22;
}
.sc-moto-wheel.front { right: 1px; }
.sc-moto-wheel.rear { left: 1px; }
.sc-moto-rider {
  position: absolute; bottom: 8px; left: 7px; width: 7px; height: 8px;
  background: #3a4050;
  border-radius: 2px 2px 1px 1px;
}
.sc-moto-rider::before {
  content: ""; position: absolute; top: -4px; left: 1px; width: 5px; height: 5px;
  border-radius: 50%; background: #ffe0c8;
}
.sc-vtrail {
  position: absolute; width: 2px; height: 36px;
  background: linear-gradient(to bottom, transparent, currentColor, transparent);
  filter: blur(2px); opacity: 0.3;
  animation: scVTrail 2.8s linear infinite;
}
@keyframes scDrive {
  from { transform: translate3d(-20vw, 0, 0); }
  to { transform: translate3d(120vw, 0, 0); }
}
@keyframes scDriveRev {
  from { transform: translate3d(120vw, 0, 0); }
  to { transform: translate3d(-20vw, 0, 0); }
}
@keyframes scVTrail {
  0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
  20% { opacity: 0.35; }
  100% { transform: translate3d(0, 110vh, 0); opacity: 0; }
}

/* —— sakura: hanami —— */
.sc-sakura-tree {
  position: absolute; width: 60px; height: 110px;
}
.sc-sak-trunk {
  position: absolute; bottom: 0; left: 50%; width: 8px; height: 55%;
  background: linear-gradient(90deg, #5a3a28, #3a2418);
  transform: translateX(-50%);
  border-radius: 2px;
}
.sc-sak-canopy {
  position: absolute; top: 0; left: 50%; width: 70px; height: 55px;
  transform: translateX(-50%);
}
.sc-sak-cluster {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd0e4, #ff8ab8 60%, #d06090);
  opacity: 0.75;
  box-shadow: 0 0 12px rgba(255,140,180,0.25);
}
.sc-sak-cluster.c0 { width: 42px; height: 36px; left: 5px; top: 8px; }
.sc-sak-cluster.c1 { width: 36px; height: 32px; left: 28px; top: 0; }
.sc-sak-cluster.c2 { width: 30px; height: 28px; left: 18px; top: 22px; }
.sc-sak-canopy.wither .sc-sak-cluster {
  background: radial-gradient(circle at 35% 35%, #e8c0b0, #c08070 60%, #8a5040);
  opacity: 0.55;
}
.sc-petal {
  width: 12px; height: 10px; border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #ffd6e8, #ff8ab8 70%, #e85a9a);
  opacity: 0.85;
  animation: scPetalFall linear infinite;
  box-shadow: 0 0 6px rgba(255,140,180,0.45);
}
.sc-petal.brown {
  background: radial-gradient(circle at 30% 30%, #e8c8a8, #c09060 70%, #8a6040);
  box-shadow: 0 0 4px rgba(180,120,60,0.3);
  opacity: 0.7;
}
.sc-picnic {
  position: absolute; width: 64px; height: 48px;
}
.sc-blanket {
  position: absolute; bottom: 0; left: 0; width: 66px; height: 32px;
  background: #c47878;
  border-radius: 3px; opacity: 0.8;
  transform: skewX(-8deg);
}
.sc-blanket.mono {
  background: #c47878;
  /* solid muted — color set inline per mat */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.sc-lake {
  position: absolute; left: 8%; width: 84%; bottom: 11%; height: 13%;
  border-radius: 50% / 45%;
  background:
    linear-gradient(180deg, rgba(140,190,210,0.35), rgba(80,140,170,0.45) 60%, rgba(60,110,140,0.4));
  box-shadow: inset 0 2px 8px rgba(255,255,255,0.15), 0 0 20px rgba(100,180,200,0.12);
  overflow: hidden;
}
.sc-lake-shine {
  position: absolute; top: 20%; left: 15%; width: 40%; height: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  border-radius: 50%;
  filter: blur(4px);
  animation: scLakeShimmer 6s ease-in-out infinite alternate;
}
@keyframes scLakeShimmer {
  from { transform: translate3d(0, 0, 0); opacity: 0.4; }
  to { transform: translate3d(30%, 4px, 0); opacity: 0.7; }
}
/* Arch bridge spans full lake width — ends meet left & right shores */
.sc-bridge {
  position: absolute; left: 8%; width: 84%; height: 42px;
  z-index: 2;
}
.sc-bridge-arch {
  position: absolute; bottom: 6px; left: 2%; right: 2%; height: 28px;
  border: 3px solid #5a4030;
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: transparent;
  box-shadow: 0 -2px 0 rgba(90,60,40,0.25);
}
.sc-bridge-deck {
  position: absolute; bottom: 4px; left: 0; right: 0; height: 5px;
  background: linear-gradient(180deg, #7a5840, #5a4030);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.sc-bridge-rail {
  position: absolute; bottom: 8px; left: 1%; right: 1%; height: 7px;
  border-top: 1px solid rgba(90,60,40,0.55);
  background: repeating-linear-gradient(90deg, #5a4030 0 2px, transparent 2px 10px);
  opacity: 0.7;
}
.sc-bridge-post {
  position: absolute; bottom: 0; width: 5px; height: 16px;
  background: #4a3020; border-radius: 1px;
}
.sc-bridge-post.left { left: 0; }
.sc-bridge-post.right { right: 0; }
/* amy52 — Sakura desktop mountains: dusty mauve / plum ombré, fading with distance.
   Deliberately NOT blossom pink (#ff8ab8 / #ffd0e4): muted rose-lilac hues. */
.sc-sak-mtns {
  position: absolute; inset: 0;
  pointer-events: none;
}
.sc-sak-skyhaze {
  position: absolute; left: 0; right: 0; bottom: 26%; height: 44%;
  background: linear-gradient(to top,
    rgba(214, 186, 214, 0) 0%,
    rgba(214, 186, 214, 0.10) 38%,
    rgba(232, 200, 214, 0.07) 62%,
    rgba(214, 186, 214, 0) 100%);
}
.sc-sak-mtn {
  position: absolute; left: -2%; width: 104%;
}
/* Ombré: deeper tone at the ridgeline, melting into pale mist at the foot */
.sc-sak-mtn.r0 {
  background: linear-gradient(to bottom, rgba(226, 196, 228, 0.34), rgba(240, 220, 236, 0.11) 75%, rgba(240, 220, 236, 0.04));
  filter: blur(1.6px);
}
.sc-sak-mtn.r1 {
  background: linear-gradient(to bottom, rgba(200, 152, 200, 0.50), rgba(222, 184, 212, 0.19) 72%, rgba(222, 184, 212, 0.07));
  filter: blur(1px);
}
.sc-sak-mtn.r2 {
  background: linear-gradient(to bottom, rgba(164, 106, 156, 0.68), rgba(194, 138, 170, 0.32) 68%, rgba(200, 146, 172, 0.04));
  filter: blur(0.5px);
}
.sc-sak-mtn.r3 {
  background: linear-gradient(to bottom, rgba(122, 66, 112, 0.88), rgba(160, 96, 132, 0.48) 62%, rgba(176, 116, 140, 0.02));
}
.sc-sak-mist {
  position: absolute; left: -10%; width: 120%; height: 7%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(236, 220, 234, 0.16), transparent 70%);
  filter: blur(6px);
  animation: scSakMist 38s ease-in-out infinite alternate;
}
.sc-sak-mist.m1 { animation-duration: 46s; animation-delay: -12s; opacity: 0.85; }
.sc-sak-mist.m2 { animation-duration: 54s; animation-delay: -27s; opacity: 0.7; }
@keyframes scSakMist {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(3%, 0, 0); }
}
/* amy53 — phone: same ombré ranges, scaled into the open band between the
   keypad and the picnic shore. Only mountain layers are touched here. */
@media (max-width: 600px) {
  .sc-sak-skyhaze { bottom: 24%; height: 26%; }
  .sc-sak-mtn.r0 { bottom: 30% !important; height: 17% !important; }
  .sc-sak-mtn.r1 { bottom: 28% !important; height: 14.5% !important; }
  .sc-sak-mtn.r2 { bottom: 26% !important; height: 12% !important; }
  .sc-sak-mtn.r3 { bottom: 24% !important; height: 9.5% !important; }
  .sc-sak-mist { height: 4%; }
  .sc-sak-mist.m0 { bottom: 27.5% !important; }
  .sc-sak-mist.m1 { bottom: 25.5% !important; }
  .sc-sak-mist.m2 { bottom: 23.5% !important; }
}
.sc-sakura-tree.far { filter: brightness(1.1) saturate(0.7) blur(0.4px); }
.sc-sakura-tree.mid { filter: brightness(1.05) saturate(0.85); }
.sc-sakura-tree.near { filter: none; }
.sc-sakura-tree.fore .sc-sak-cluster { opacity: 0.85; }
.sc-person.sit {
  position: absolute; bottom: 14px; left: 12px; width: 22px; height: 36px;
}
.sc-person.sit .sc-p-head { top: 0; left: 3px; }
.sc-person.sit .sc-p-body { top: 14px; background: #e890a0; }
.sc-picnic-food {
  position: absolute; bottom: 12px; right: 6px; width: 14px; height: 9px;
  border-radius: 2px; opacity: 0.85;
}
.sc-meditator {
  position: absolute; width: 28px; height: 42px;
  animation: scMeditate ease-in-out infinite alternate;
}
.sc-meditator .sc-p-head { top: 0; left: 6px; }
.sc-meditator .sc-p-legs { bottom: 0; left: 3px; }
@keyframes scMeditate {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2px, -3px, 0) scale(1.02); }
}
.sc-walker {
  position: absolute; width: 22px; height: 42px;
  left: var(--walk-from, 10%);
  animation: scWalkRelocate linear infinite alternate;
}
.sc-walker .sc-p-head { top: 0; left: 3px; }
.sc-walker .sc-p-body { top: 14px; background: #90b0d0; }
@keyframes scWalkRelocate {
  from { left: var(--walk-from, 10%); transform: translate3d(0, 0, 0); }
  to { left: var(--walk-to, 50%); transform: translate3d(0, -2px, 0); }
}
.sc-lantern {
  width: 18px; height: 26px; border-radius: 6px 6px 10px 10px;
  background: radial-gradient(ellipse at 50% 35%, #ffe8a0, #ff9a4a 70%, #c45a20);
  box-shadow: 0 0 16px rgba(255,160,60,0.55), 0 0 28px rgba(255,120,40,0.25);
  animation: scLanternFloat ease-in-out infinite alternate;
}
.sc-lantern::after {
  content: ""; position: absolute; top: -8px; left: 50%; width: 1px; height: 8px;
  background: rgba(180,120,60,0.5); transform: translateX(-50%);
}
.sc-steam {
  width: 40px; height: 50px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200,230,180,0.22), transparent 70%);
  filter: blur(6px);
  animation: scSteamWisp ease-in-out infinite;
}
@keyframes scPetalFall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate3d(var(--drift, 40px), 110vh, 0) rotate(360deg); opacity: 0.2; }
}
@keyframes scLanternFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(6px, -14px, 0); }
}
@keyframes scSteamWisp {
  0% { transform: translate3d(0, 10px, 0) scale(0.8); opacity: 0; }
  40% { opacity: 0.55; }
  100% { transform: translate3d(8px, -40px, 0) scale(1.3); opacity: 0; }
}

/* —— snowpark: alpine village —— */
.sc-mtn {
  position: absolute; left: -5%; right: -5%; height: 45%;
  background: linear-gradient(to top, rgba(160,190,220,0.35), rgba(200,220,240,0.15));
  clip-path: polygon(0% 100%, 8% 55%, 18% 72%, 28% 35%, 40% 60%, 52% 20%, 65% 50%, 78% 30%, 90% 58%, 100% 40%, 100% 100%);
}
.sc-mtn.layer0 { clip-path: polygon(0 100%, 12% 40%, 25% 65%, 38% 25%, 55% 55%, 70% 18%, 85% 48%, 100% 28%, 100% 100%); }
.sc-mtn.layer1 { clip-path: polygon(0 100%, 15% 50%, 30% 30%, 48% 55%, 62% 22%, 80% 45%, 100% 35%, 100% 100%); filter: brightness(1.1); }
.sc-mtn.layer2 { clip-path: polygon(0 100%, 10% 60%, 22% 40%, 40% 58%, 55% 32%, 72% 52%, 88% 38%, 100% 50%, 100% 100%); }
/* Snow-frosted trees — brown trunks and continuous white/ice-blue canopies */
.sc-snow-tree {
  position: absolute; width: 36px; height: 70px;
}
.sc-snow-tree.far { filter: brightness(0.92) saturate(0.72) blur(0.35px); }
.sc-snow-tree.mid { filter: brightness(0.98) saturate(0.82); }
.sc-snow-tree.near { filter: none; }
.sc-snow-tree .sc-st-trunk {
  position: absolute; bottom: 0; left: 50%; width: 5px; height: 22%;
  background: linear-gradient(90deg, #6a4a30, #4a3020);
  transform: translateX(-50%); border-radius: 1px;
}
.sc-snow-tree .sc-st-canopy {
  position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
  width: 34px; height: 50px;
  background: linear-gradient(112deg, #c3d1df 0%, #f8fbff 34%, #e7eff7 68%, #b4c5d5 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 1px 1px rgba(116,145,171,0.65));
}
.sc-snow-tree .sc-st-canopy::before,
.sc-snow-tree .sc-st-canopy::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  background: linear-gradient(110deg, rgba(190,205,219,0.72), rgba(255,255,255,0.9) 42%, rgba(205,219,232,0.78));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sc-snow-tree .sc-st-canopy::before {
  top: 13px; width: 29px; height: 27px;
}
.sc-snow-tree .sc-st-canopy::after {
  top: 27px; width: 38px; height: 25px;
  background: linear-gradient(105deg, rgba(175,194,211,0.75), rgba(248,252,255,0.94) 44%, rgba(190,207,222,0.84));
}
.sc-snow-tree.far .sc-st-canopy {
  background: linear-gradient(112deg, #aabccc 0%, #dbe6f0 45%, #b6c8d8 100%);
  filter: drop-shadow(0 1px 1px rgba(93,121,148,0.5));
}
.sc-snow-tree.mid .sc-st-canopy {
  background: linear-gradient(112deg, #b8c9d8 0%, #eef5fb 38%, #d3e0eb 72%, #aabecf 100%);
}
.sc-snow-tree.near .sc-st-canopy,
.sc-snow-tree.fore .sc-st-canopy {
  background: linear-gradient(112deg, #d5e1eb 0%, #ffffff 36%, #edf4fa 67%, #bdcedd 100%);
}
.sc-snow-tree.fir-tall .sc-st-canopy {
  width: 30px; height: 62px;
  background: linear-gradient(112deg, #b9cad9 0%, #f5f9fd 36%, #dbe6ef 70%, #a9bdce 100%);
}
.sc-snow-tree.fir-tall { height: 85px; }
.sc-snow-tree.fir-tall .sc-st-canopy::before { top: 17px; width: 27px; height: 34px; }
.sc-snow-tree.fir-tall .sc-st-canopy::after { top: 34px; width: 38px; height: 31px; }
.sc-snow-tree.round .sc-st-canopy {
  width: 34px; height: 32px; border: none; clip-path: none;
  border-radius: 52% 48% 46% 50%;
  background: radial-gradient(ellipse at 34% 28%, #ffffff 0%, #eef5fa 45%, #bdcedd 100%);
  filter: drop-shadow(0 1px 1px rgba(116,145,171,0.55));
  left: 50%; bottom: 20%;
}
.sc-snow-tree.round .sc-st-canopy::before,
.sc-snow-tree.round .sc-st-canopy::after {
  clip-path: none; border-radius: 50%;
  background: radial-gradient(ellipse at 38% 34%, rgba(255,255,255,0.96), rgba(201,216,228,0.76));
}
.sc-snow-tree.round .sc-st-canopy::before { top: 7px; width: 25px; height: 18px; }
.sc-snow-tree.round .sc-st-canopy::after { top: 16px; width: 38px; height: 17px; }
.sc-snow-tree.sparse .sc-st-canopy {
  width: 23px; height: 43px;
  background: linear-gradient(112deg, #afc1d0 0%, #edf4f9 45%, #c4d3df 100%);
  opacity: 0.9;
}
.sc-snow-tree.sparse .sc-st-canopy::before { top: 15px; width: 18px; height: 24px; }
.sc-snow-tree.sparse .sc-st-canopy::after { top: 27px; width: 27px; height: 20px; }
.sc-snow-tree.pine .sc-st-canopy {
  width: 38px; height: 54px;
  background: linear-gradient(112deg, #b6c8d7 0%, #f6faff 36%, #dce8f1 70%, #a9bfce 100%);
}
.sc-snow-tree.pine .sc-st-canopy::before { top: 14px; width: 32px; height: 31px; }
.sc-snow-tree.pine .sc-st-canopy::after { top: 28px; width: 43px; height: 28px; }
.sc-snow-tree.bush {
  height: 40px; width: 30px;
}
.sc-snow-tree.bush .sc-st-canopy {
  width: 30px; height: 21px; border: none; clip-path: none; border-radius: 52%;
  background: radial-gradient(ellipse at 35% 28%, #ffffff 0%, #e7f0f6 55%, #b6c9d8 100%);
  bottom: 8%;
}
.sc-snow-tree.bush .sc-st-canopy::before,
.sc-snow-tree.bush .sc-st-canopy::after { clip-path: none; border-radius: 50%; }
.sc-snow-tree.bush .sc-st-canopy::before { top: 4px; width: 20px; height: 13px; }
.sc-snow-tree.bush .sc-st-canopy::after { top: 9px; width: 34px; height: 13px; }
.sc-snow-tree.bush .sc-st-trunk { height: 12%; }
/* Gassho-zukuri houses: tall thatched A-frames over dark timber bodies. */
.sc-cabin {
  position: absolute;
  width: clamp(82px, 12vw, 142px);
  height: clamp(74px, 10vw, 118px);
  transform-origin: bottom left;
  z-index: 8;
  filter: drop-shadow(0 3px 3px rgba(20, 29, 44, 0.48));
}
.sc-gassho-roof {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 32%; height: 68%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(112deg, rgba(255,255,255,0.58) 0 7%, transparent 21%),
    repeating-linear-gradient(103deg, rgba(74,61,45,0.2) 0 2px, transparent 2px 6px),
    linear-gradient(110deg, #786b58 0%, #b79b70 43%, #8c795d 69%, #5d5549 100%);
  box-shadow: inset 0 -2px 0 rgba(47,40,32,0.52), 0 2px 3px rgba(27,31,38,0.34);
}
/* Soft snow sits on the roof plane, not as separate round blobs. */
.sc-gassho-roof::before {
  content: "";
  position: absolute; inset: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(157deg,
    rgba(255,255,255,0.94) 0%,
    rgba(246,248,244,0.78) 16%,
    rgba(255,255,255,0.22) 36%,
    transparent 54%,
    rgba(232,236,233,0.5) 76%,
    rgba(255,255,255,0.72) 100%);
  opacity: 0.9;
}
.sc-gassho-ridge {
  position: absolute;
  z-index: 4;
  top: -1px; left: 43%; width: 14%; height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #d7d8cd, #fffdf1 48%, #bfc6bf);
  box-shadow: 0 1px 2px rgba(40,48,50,0.38);
}
.sc-gassho-body {
  position: absolute;
  z-index: 1;
  left: 15%; right: 15%; bottom: 0; height: 46%;
  border: 1px solid rgba(32,27,24,0.8);
  background:
    repeating-linear-gradient(90deg, rgba(226,188,126,0.08) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #4b4038 0%, #302a28 65%, #211e20 100%);
  box-shadow: inset 0 4px 0 rgba(119,91,60,0.4), inset 0 -3px 0 rgba(10,14,19,0.45);
}
.sc-gassho-body::before,
.sc-gassho-body::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 3px;
  background: rgba(117,91,62,0.62);
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.sc-gassho-body::before { left: 25%; }
.sc-gassho-body::after { right: 25%; }
.sc-gassho-door {
  position: absolute;
  z-index: 3;
  bottom: 0; left: 43%; width: 14%; height: 35%;
  border: 1px solid #17181a;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, #1b1b1c, #403127 48%, #171719);
}
.sc-gassho-door::after {
  content: "";
  position: absolute; top: 50%; right: 2px; width: 2px; height: 2px;
  border-radius: 50%; background: #d9b66e;
}
.sc-gassho-window {
  position: absolute;
  z-index: 3;
  bottom: 19%; width: 14%; height: 18%;
  border: 2px solid #252021;
  background: linear-gradient(135deg, #ffe7a0, #a8784c 72%);
  box-shadow: 0 0 7px rgba(255,216,126,0.38);
}
.sc-gassho-window.left { left: 22%; }
.sc-gassho-window.right { right: 22%; }
.sc-gassho-window::after {
  content: "";
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(45,33,25,0.72); transform: translateX(-50%);
}
/* Skiers travel diagonally down mountain slope (not falling from sky) */
.sc-skier {
  position: absolute; width: 24px; height: 34px;
  animation: scSkiDown linear infinite;
}
.sc-skier .sc-p-head { top: 0; left: 4px; width: 12px; height: 12px; }
.sc-skier .sc-p-body { top: 12px; left: 3px; width: 15px; height: 15px; }
.sc-ski {
  position: absolute; bottom: 0; left: -3px; width: 28px; height: 3px;
  background: #c0d0e8; border-radius: 1px;
  box-shadow: 0 0 3px rgba(200,220,255,0.3);
}
@keyframes scSkiDown {
  0% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; }
  8% { opacity: 0.75; }
  85% { opacity: 0.65; }
  100% { transform: translate3d(var(--ski-dx, 28vw), var(--ski-dy, 22vh), 0) rotate(24deg); opacity: 0; }
}
.sc-snow-fight {
  position: absolute; width: 90px; height: 52px;
}
.sc-snow-kid {
  position: absolute; bottom: 0; width: 34px; height: 56px;
}
.sc-snow-kid.k0 { left: 0; }
.sc-snow-kid.k1 { right: 0; }
.sc-snow-kid .sc-p-head { top: 0; left: 3px; }
.sc-snow-kid .sc-p-body { top: 14px; background: #e87850; }
.sc-snow-kid.k1 .sc-p-body { background: #5080c0; }
.sc-snow-kid .sc-p-arm { right: -6px; transform-origin: left center; animation: scThrowArm 2.4s ease-in-out infinite; }
.sc-snow-kid.k1 .sc-p-arm { right: auto; left: -6px; transform-origin: right center; }
@keyframes scThrowArm {
  0%, 100% { transform: rotate(-20deg); }
  40% { transform: rotate(50deg); }
}
.sc-snowball {
  position: absolute; top: 6px; left: 26px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px rgba(200,230,255,0.8);
  animation: scSnowballArc 2.4s ease-in-out infinite;
}
@keyframes scSnowballArc {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate3d(32px, -24px, 0); opacity: 1; }
  85% { transform: translate3d(58px, 2px, 0); opacity: 0.8; }
  100% { transform: translate3d(58px, 4px, 0); opacity: 0; }
}
.sc-flake {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px rgba(200,230,255,0.8);
  opacity: 0.85;
  animation: scSnowFall linear infinite;
}
.sc-snow-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--snow-h, 8%);
  background: linear-gradient(to top, rgba(230,240,255,0.55), rgba(200,220,255,0.15) 70%, transparent);
  transition: height 1.2s linear;
  border-radius: 40% 40% 0 0 / 12px 12px 0 0;
}
.sc-snowman {
  position: absolute; bottom: var(--snow-h, 8%); left: 18%;
  width: 48px; height: 70px;
  transform: translateY(10px) scale(var(--sm-scale, 0));
  transform-origin: bottom center;
  transition: transform 1.5s ease, bottom 1.2s linear;
  opacity: 0.85;
}
.sc-snowman .sm-body {
  position: absolute; bottom: 0; left: 8px; width: 32px; height: 32px;
  border-radius: 50%; background: #eef4ff;
  box-shadow: inset -4px -4px 0 rgba(160,180,210,0.35);
}
.sc-snowman .sm-head {
  position: absolute; bottom: 28px; left: 12px; width: 22px; height: 22px;
  border-radius: 50%; background: #f4f8ff;
  box-shadow: inset -3px -3px 0 rgba(160,180,210,0.3);
}
.sc-snowman .sm-eye {
  position: absolute; bottom: 38px; width: 3px; height: 3px; border-radius: 50%; background: #334;
}
.sc-snowman .sm-eye.l { left: 17px; }
.sc-snowman .sm-eye.r { left: 26px; }
.sc-snowman .sm-nose {
  position: absolute; bottom: 34px; left: 30px; width: 0; height: 0;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  border-left: 8px solid #ff8c40;
}
.sc-snowman .sm-hat {
  position: absolute; bottom: 46px; left: 10px; width: 26px; height: 10px;
  background: #2a3040; border-radius: 2px;
}
.sc-snowman .sm-hat::before {
  content: ""; position: absolute; bottom: 8px; left: 5px; width: 16px; height: 12px;
  background: #2a3040; border-radius: 2px 2px 0 0;
}
@keyframes scSnowFall {
  0% { transform: translate3d(0, -5vh, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate3d(var(--drift, 30px), 105vh, 0); opacity: 0.3; }
}

/* —— underwater: rich reef —— */
.sc-ray {
  position: absolute; top: -10%; width: 80px; height: 120%;
  background: linear-gradient(to bottom, rgba(180,240,255,0.14), transparent 70%);
  transform-origin: top center;
  filter: blur(8px);
  animation: scRaySway ease-in-out infinite alternate;
}
.sc-bubble {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(180,240,255,0.55);
  background: rgba(180,240,255,0.08);
  animation: scBubbleUp linear infinite;
}
/* —— underwater coral: 3D volume (amy44) — placement/colors unchanged —— */
.sc-coral {
  position: absolute; width: 18px; height: 36px;
  border-radius: 40% 40% 4px 4px;
  /* volume: light from upper-left, dark far edge */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.06) 32%,
      transparent 55%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%,
      rgba(0,0,0,0.28) 100%),
    currentColor !important;
  box-shadow:
    inset 2px 3px 4px rgba(255,255,255,0.22),
    inset -3px -4px 5px rgba(0,10,25,0.35),
    2px 4px 6px rgba(0,15,35,0.35);
  filter: drop-shadow(2px 3px 2px rgba(0,20,40,0.35));
  transform-style: preserve-3d;
  overflow: visible;
  transform: scale(var(--coral-sca, 1));
}
.sc-coral-side {
  position: absolute; pointer-events: none;
  top: 6%; right: -28%; width: 32%; height: 88%;
  border-radius: 0 40% 6px 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.38));
  opacity: 0.55;
  transform: skewY(-8deg);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.08);
}
.sc-coral-rim {
  position: absolute; pointer-events: none;
  top: 4%; left: 8%; width: 42%; height: 70%;
  border-radius: 40% 20% 30% 40%;
  background: linear-gradient(160deg, rgba(255,255,255,0.35), transparent 70%);
  opacity: 0.55;
  filter: blur(0.3px);
}
.sc-coral::before,
.sc-coral::after {
  content: ""; position: absolute; pointer-events: none;
  box-sizing: border-box;
}
/* branch — forked columns with lit faces */
.sc-coral.branch {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 45%),
    currentColor !important;
  box-shadow:
    6px -10px 0 -2px currentColor,
    -6px -8px 0 -3px currentColor,
    0 -16px 0 -4px currentColor,
    10px -18px 0 -5px currentColor,
    inset 2px 2px 3px rgba(255,255,255,0.25),
    inset -2px -3px 4px rgba(0,0,0,0.3),
    3px 5px 6px rgba(0,15,30,0.35);
}
.sc-coral.branch::before {
  left: -7px; top: -10px; width: 8px; height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent 60%), currentColor;
  box-shadow: inset -2px 0 3px rgba(0,0,0,0.25), 2px 2px 3px rgba(0,0,0,0.2);
  opacity: 0.9;
}
.sc-coral.branch::after {
  right: -4px; top: -14px; width: 7px; height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.15), currentColor);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.3);
  opacity: 0.85;
}
/* fan — ridged surface */
.sc-coral.fan {
  width: 28px; height: 24px;
  border-radius: 50% 50% 4px 4px;
  background:
    repeating-linear-gradient(95deg,
      transparent 0 3px,
      rgba(0,0,0,0.12) 3px 4px),
    linear-gradient(180deg, rgba(255,255,255,0.25), transparent 50%),
    currentColor !important;
  clip-path: polygon(50% 100%, 0 20%, 15% 0, 50% 30%, 85% 0, 100% 20%);
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,0.2),
    inset 0 -3px 4px rgba(0,0,0,0.25),
    2px 4px 5px rgba(0,15,30,0.3);
}
.sc-coral.fan::before {
  inset: 15% 20% 35% 20%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  border-radius: 50%;
  opacity: 0.6;
}
.sc-coral.fan::after {
  bottom: 0; left: 40%; width: 20%; height: 35%;
  background: linear-gradient(90deg, rgba(0,0,0,0.2), transparent, rgba(0,0,0,0.15));
}
/* tube — cylindrical highlights */
.sc-coral.tube {
  width: 10px; height: 32px; border-radius: 6px 6px 2px 2px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.35) 0%,
      transparent 40%,
      rgba(0,0,0,0.25) 100%),
    currentColor !important;
  box-shadow:
    12px 4px 0 0 currentColor,
    -10px 8px 0 -1px currentColor,
    22px 10px 0 -2px currentColor,
    inset 1px 0 2px rgba(255,255,255,0.35),
    inset -2px 0 3px rgba(0,0,0,0.3),
    3px 4px 5px rgba(0,15,30,0.3);
}
.sc-coral.tube::before {
  left: 12px; top: 4px; width: 10px; height: 28px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent 45%, rgba(0,0,0,0.22)), currentColor;
  opacity: 0.95;
}
.sc-coral.tube::after {
  left: -11px; top: 8px; width: 9px; height: 24px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), currentColor);
  opacity: 0.9;
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.25);
}
/* brain — grooved mound */
.sc-coral.brain {
  width: 26px; height: 18px; border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 40% 40%,
      transparent 0 3px,
      rgba(0,0,0,0.14) 3px 4.5px),
    linear-gradient(145deg, rgba(255,255,255,0.3), transparent 50%),
    currentColor !important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.12),
    inset 3px 3px 5px rgba(255,255,255,0.2),
    inset -3px -3px 5px rgba(0,0,0,0.28),
    14px 4px 0 -2px currentColor,
    4px 5px 6px rgba(0,15,30,0.3);
}
.sc-coral.brain::before {
  right: -12px; top: 4px; width: 18px; height: 14px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 40% 40%, transparent 0 2.5px, rgba(0,0,0,0.12) 2.5px 4px),
    linear-gradient(145deg, rgba(255,255,255,0.22), currentColor);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.25);
  opacity: 0.95;
}
.sc-coral.brain::after {
  inset: 18% 22% 28% 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 65%);
}
/* stag — antler branches with lit edges */
.sc-coral.stag {
  width: 16px; height: 42px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.28) 0%, transparent 40%, rgba(0,0,0,0.22) 100%),
    currentColor !important;
  border-radius: 3px;
  box-shadow:
    8px -14px 0 -3px currentColor,
    -7px -12px 0 -4px currentColor,
    4px -24px 0 -5px currentColor,
    -3px -22px 0 -5px currentColor,
    inset 1px 0 2px rgba(255,255,255,0.3),
    inset -2px 0 3px rgba(0,0,0,0.28),
    3px 5px 5px rgba(0,15,30,0.3);
}
.sc-coral.stag::before {
  left: -8px; top: -14px; width: 7px; height: 20px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), currentColor);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.3);
  transform: rotate(-18deg);
  opacity: 0.92;
}
.sc-coral.stag::after {
  right: -6px; top: -18px; width: 7px; height: 22px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), currentColor);
  transform: rotate(16deg);
  opacity: 0.9;
}
/* plate — stacked shelves with thickness */
.sc-coral.plate {
  width: 34px; height: 10px; border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 45%, rgba(0,0,0,0.25) 100%),
    currentColor !important;
  box-shadow:
    0 -8px 0 -2px currentColor,
    0 -14px 0 -4px currentColor,
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.28),
    2px 4px 5px rgba(0,15,30,0.32);
}
.sc-coral.plate::before {
  left: 8%; right: 8%; top: -9px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), currentColor);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.25);
  opacity: 0.95;
}
.sc-coral.plate::after {
  left: 15%; right: 15%; top: -15px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), currentColor);
  opacity: 0.9;
}
/* pillar — stone column */
.sc-coral.pillar {
  width: 12px; height: 44px; border-radius: 6px 6px 2px 2px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.32) 0%,
      transparent 38%,
      rgba(0,0,0,0.28) 100%),
    currentColor !important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,0.1),
    inset 2px 0 3px rgba(255,255,255,0.25),
    inset -2px 0 4px rgba(0,0,0,0.3),
    16px 6px 0 -1px currentColor,
    3px 5px 6px rgba(0,15,30,0.32);
}
.sc-coral.pillar::before {
  left: 16px; top: 6px; width: 11px; height: 38px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.28), transparent 40%, rgba(0,0,0,0.25)), currentColor;
  opacity: 0.95;
}
.sc-coral.pillar::after {
  top: 0; left: 15%; width: 40%; height: 12%;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
}
/* spiral */
.sc-coral.spiral {
  width: 20px; height: 28px; border-radius: 50% 40% 50% 40%;
  background:
    conic-gradient(from 200deg at 45% 45%,
      rgba(255,255,255,0.25), transparent 40%,
      rgba(0,0,0,0.2) 70%, rgba(255,255,255,0.1)),
    currentColor !important;
  box-shadow:
    inset -4px -2px 0 rgba(0,0,0,0.22),
    inset 3px 3px 4px rgba(255,255,255,0.22),
    8px -6px 0 -3px currentColor,
    -6px -10px 0 -4px currentColor,
    3px 4px 5px rgba(0,15,30,0.3);
}
.sc-coral.spiral::before {
  right: -5px; top: -8px; width: 12px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.3), currentColor);
  box-shadow: inset -2px -1px 2px rgba(0,0,0,0.25);
  opacity: 0.9;
}
.sc-coral.spiral::after {
  left: -4px; top: -12px; width: 10px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.22), currentColor);
  opacity: 0.85;
}
/* anemone — lit tentacle tips */
.sc-coral.anemone {
  width: 22px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), transparent 50%),
    currentColor !important;
  box-shadow:
    0 -10px 0 -4px currentColor,
    8px -8px 0 -5px currentColor,
    -8px -8px 0 -5px currentColor,
    12px -2px 0 -6px currentColor,
    -12px -2px 0 -6px currentColor,
    inset 2px 2px 4px rgba(255,255,255,0.25),
    inset -2px -2px 4px rgba(0,0,0,0.25),
    2px 4px 5px rgba(0,15,30,0.28);
}
.sc-coral.anemone::before {
  left: 20%; right: 20%; top: -12px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 80%, currentColor, transparent 70%);
  box-shadow: 0 -2px 4px rgba(255,255,255,0.2);
  opacity: 0.85;
}
.sc-coral.anemone::after {
  inset: 25% 20% 30% 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%);
}
/* lettuce — wavy leaf volume */
.sc-coral.lettuce {
  width: 30px; height: 22px; border-radius: 40% 60% 50% 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.32) 0%, transparent 40%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.22)),
    currentColor !important;
  box-shadow:
    inset 0 -4px 0 rgba(0,0,0,0.15),
    inset 3px 2px 4px rgba(255,255,255,0.22),
    10px 2px 0 -2px currentColor,
    -8px 4px 0 -3px currentColor,
    3px 4px 5px rgba(0,15,30,0.3);
}
.sc-coral.lettuce::before {
  right: -6px; top: 2px; width: 16px; height: 18px;
  border-radius: 50% 40% 50% 40%;
  background: linear-gradient(145deg, rgba(255,255,255,0.25), currentColor);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.22);
  opacity: 0.92;
}
.sc-coral.lettuce::after {
  left: -5px; top: 4px; width: 14px; height: 16px;
  border-radius: 40% 50% 40% 50%;
  background: linear-gradient(145deg, rgba(255,255,255,0.2), currentColor);
  opacity: 0.88;
}
/* finger — tube fingers with cylinder shade */
.sc-coral.finger {
  width: 8px; height: 36px; border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.35) 0%, transparent 40%, rgba(0,0,0,0.28) 100%),
    currentColor !important;
  box-shadow:
    10px 2px 0 0 currentColor,
    20px 6px 0 -1px currentColor,
    -8px 4px 0 -1px currentColor,
    inset 1px 0 2px rgba(255,255,255,0.3),
    inset -1px 0 2px rgba(0,0,0,0.28),
    2px 4px 4px rgba(0,15,30,0.28);
}
.sc-coral.finger::before {
  left: 10px; top: 2px; width: 8px; height: 34px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.3), transparent 40%, rgba(0,0,0,0.22)), currentColor;
  opacity: 0.95;
}
.sc-coral.finger::after {
  left: 20px; top: 6px; width: 7px; height: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), currentColor);
  opacity: 0.9;
}
/* elkhorn — thick branches */
.sc-coral.elkhorn {
  width: 14px; height: 40px; border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.3) 0%, transparent 42%, rgba(0,0,0,0.25) 100%),
    currentColor !important;
  box-shadow:
    10px -16px 0 -2px currentColor,
    -9px -14px 0 -3px currentColor,
    16px -28px 0 -4px currentColor,
    -14px -26px 0 -5px currentColor,
    2px -32px 0 -5px currentColor,
    inset 1px 0 2px rgba(255,255,255,0.28),
    inset -2px 0 3px rgba(0,0,0,0.28),
    3px 5px 5px rgba(0,15,30,0.32);
}
.sc-coral.elkhorn::before {
  left: -10px; top: -18px; width: 9px; height: 24px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), currentColor);
  transform: rotate(-22deg);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.28);
  opacity: 0.92;
}
.sc-coral.elkhorn::after {
  right: -8px; top: -22px; width: 9px; height: 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), currentColor);
  transform: rotate(20deg);
  opacity: 0.9;
}
/* depth layers — cooler/blurred far; saturated near (keep filters) */
.sc-coral.far { filter: brightness(0.5) saturate(0.4) blur(0.9px) drop-shadow(1px 2px 1px rgba(0,20,40,0.2)); }
.sc-coral.far2 { filter: brightness(0.6) saturate(0.5) blur(0.5px) drop-shadow(1px 2px 1px rgba(0,20,40,0.25)); }
.sc-coral.mid { filter: brightness(0.8) saturate(0.75) drop-shadow(2px 3px 2px rgba(0,20,40,0.3)); }
.sc-coral.near { filter: brightness(0.98) saturate(1.05) drop-shadow(2px 4px 3px rgba(0,20,40,0.35)); }
.sc-coral.fore { filter: brightness(1.08) saturate(1.2) drop-shadow(3px 5px 4px rgba(0,20,40,0.4)); }
/* scale + slight per-piece tilt (JS sets --coral-sca / --coral-tilt; left/bottom/colors unchanged) */
.sc-coral.far, .sc-coral.far2 {
  transform: scale(var(--coral-sca, 1));
}
.sc-coral.mid, .sc-coral.near, .sc-coral.fore {
  transform: perspective(140px) rotateY(calc(var(--coral-tilt, 2) * 1deg)) scale(var(--coral-sca, 1));
}

/* —— underwater marine creatures (amy44): multi-part, no emoji —— */
.sc-mar {
  position: absolute;
  width: 40px; height: 24px;
  transform: scale(var(--ms, 1));
  animation: scMarSwim linear infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
.sc-mar.rev { animation-name: scMarSwimRev; }
.sc-mar.far { filter: brightness(0.75) saturate(0.7) blur(0.35px); }
.sc-mar.drift {
  animation: scMarDrift ease-in-out infinite alternate;
  width: 28px; height: 36px;
}
.sc-mar.idle {
  animation: scMarIdle ease-in-out infinite alternate;
  width: 32px; height: 36px;
}
.sc-mar.hover {
  animation: scMarHover ease-in-out infinite alternate;
  width: 18px; height: 32px;
}
.sc-mar.in-school {
  position: absolute;
  animation: scMarSchoolBob ease-in-out infinite alternate;
  animation-delay: var(--bob-d, 0s);
  animation-duration: 1.8s;
  width: 28px; height: 18px;
}
.sc-mar-sprite {
  position: relative;
  width: 100%; height: 100%;
  transform-origin: center center;
}
/* Sprites face LEFT by default (eye/nose left). scMarSwim goes LTR → flip to face travel.
   .rev uses scMarSwimRev (RTL) → keep default left-facing. Same pattern as deer/heli. */
.sc-mar:not(.rev) > .sc-mar-sprite { transform: scaleX(-1); }
.sc-mar.rev > .sc-mar-sprite { transform: scaleX(1); }
.sc-mar-school {
  position: absolute;
  width: 90px; height: 36px;
  animation: scMarSwim linear infinite;
  transform: scale(var(--ms, 1));
  will-change: transform;
  pointer-events: none;
}
.sc-mar-school.rev { animation-name: scMarSwimRev; }
.sc-mar-school:not(.rev) .sc-mar > .sc-mar-sprite { transform: scaleX(-1); }
.sc-mar-school.rev .sc-mar > .sc-mar-sprite { transform: scaleX(1); }
.sc-mar-school.far { filter: brightness(0.8) saturate(0.75) blur(0.3px); }
.sc-mar-side {
  position: absolute; pointer-events: none;
  top: 10%; right: 0; width: 28%; height: 75%;
  border-radius: 0 50% 50% 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.32));
  opacity: 0.55;
}
.sc-mar-eye {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #0a1520;
  box-shadow: 0.5px 0.5px 0 rgba(255,255,255,0.45);
  z-index: 3;
}

/* —— angelfish: tall body + stripes —— */
.sc-mar-angel { width: 26px; height: 30px; }
.sc-mar-angel .sc-mar-body {
  position: absolute; left: 4px; top: 4px;
  width: 16px; height: 22px;
  border-radius: 50% 45% 45% 50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.35), transparent 45%),
    linear-gradient(90deg, #f0e8c8, #d8c878 55%, #a09050);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.25), 1px 2px 3px rgba(0,20,40,0.25);
}
.sc-mar-angel .sc-mar-stripe {
  position: absolute; top: 8%; bottom: 8%; width: 3px;
  background: #2a3040; border-radius: 1px; opacity: 0.85;
}
.sc-mar-angel .sc-mar-stripe.s1 { left: 22%; }
.sc-mar-angel .sc-mar-stripe.s2 { left: 48%; width: 2.5px; }
.sc-mar-angel .sc-mar-stripe.s3 { left: 72%; }
.sc-mar-angel .sc-mar-dorsal {
  position: absolute; left: 8px; top: -2px;
  width: 10px; height: 12px;
  background: linear-gradient(180deg, #e8d888, #c0a858);
  clip-path: polygon(20% 100%, 50% 0, 90% 100%);
  opacity: 0.95;
}
.sc-mar-angel .sc-mar-anal {
  position: absolute; left: 8px; bottom: -1px;
  width: 10px; height: 10px;
  background: linear-gradient(0deg, #d0b868, #a89048);
  clip-path: polygon(20% 0, 50% 100%, 90% 0);
}
.sc-mar-angel .sc-mar-tail {
  position: absolute; right: -2px; top: 8px;
  width: 10px; height: 14px;
  background: linear-gradient(90deg, #c8b060, #908040);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}
.sc-mar-angel .sc-mar-pect {
  position: absolute; left: 10px; top: 12px;
  width: 8px; height: 6px;
  background: rgba(240,220,140,0.7);
  border-radius: 50% 40% 50% 40%;
  transform: rotate(-20deg);
}
.sc-mar-angel .sc-mar-eye { left: 6px; top: 12px; }

/* —— clownfish: orange + white bands —— */
.sc-mar-clown { width: 30px; height: 16px; }
.sc-mar-clown .sc-mar-body {
  position: absolute; left: 2px; top: 2px;
  width: 22px; height: 12px;
  border-radius: 50% 55% 55% 50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.3), transparent 40%),
    linear-gradient(180deg, #ff9a3c, #e86818 60%, #c05010);
  box-shadow: inset -2px -1px 3px rgba(0,0,0,0.28), 1px 2px 3px rgba(0,20,40,0.22);
}
.sc-mar-clown .sc-mar-band {
  position: absolute; top: 5%; bottom: 5%; width: 4px;
  background: #f8f4ee;
  border: 1px solid #1a1820;
  border-width: 0 1.5px;
  border-radius: 1px;
  box-sizing: border-box;
}
.sc-mar-clown .sc-mar-band.b1 { left: 14%; }
.sc-mar-clown .sc-mar-band.b2 { left: 42%; width: 5px; }
.sc-mar-clown .sc-mar-band.b3 { left: 72%; }
.sc-mar-clown .sc-mar-dorsal {
  position: absolute; left: 8px; top: -3px;
  width: 12px; height: 6px;
  background: #ff8a28;
  border-radius: 50% 50% 0 0;
  clip-path: polygon(0 100%, 15% 0, 85% 0, 100% 100%);
}
.sc-mar-clown .sc-mar-anal {
  position: absolute; left: 10px; bottom: -2px;
  width: 10px; height: 5px;
  background: #e06018;
  clip-path: polygon(0 0, 20% 100%, 80% 100%, 100% 0);
}
.sc-mar-clown .sc-mar-tail {
  position: absolute; right: -1px; top: 3px;
  width: 8px; height: 10px;
  background: #e07020;
  clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%);
}
.sc-mar-clown .sc-mar-pect {
  position: absolute; left: 12px; top: 5px;
  width: 7px; height: 5px;
  background: rgba(255,200,120,0.75);
  border-radius: 50%;
  transform: rotate(-25deg);
}
.sc-mar-clown .sc-mar-eye { left: 5px; top: 5px; width: 3.5px; height: 3.5px; }

/* —— tang: yellow body + blue fins —— */
.sc-mar-tang { width: 28px; height: 16px; }
.sc-mar-tang .sc-mar-body {
  position: absolute; left: 3px; top: 2px;
  width: 18px; height: 12px;
  border-radius: 45% 55% 55% 45%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.35), transparent 40%),
    linear-gradient(180deg, #ffe14a, #f0c020 55%, #d0a010);
  box-shadow: inset -2px -1px 3px rgba(0,0,0,0.2), 0 0 0 1.5px #2a6aaa, 1px 2px 3px rgba(0,20,40,0.22);
}
.sc-mar-tang .sc-mar-dorsal {
  position: absolute; left: 6px; top: -3px;
  width: 14px; height: 7px;
  background: linear-gradient(180deg, #3a90d0, #1a5088);
  clip-path: polygon(0 100%, 10% 20%, 90% 0, 100% 100%);
}
.sc-mar-tang .sc-mar-anal {
  position: absolute; left: 8px; bottom: -2px;
  width: 12px; height: 5px;
  background: #2a78b8;
  clip-path: polygon(0 0, 15% 100%, 85% 100%, 100% 0);
}
.sc-mar-tang .sc-mar-tail {
  position: absolute; right: -2px; top: 2px;
  width: 9px; height: 12px;
  background: linear-gradient(90deg, #2a78b0, #1a4878);
  clip-path: polygon(0 30%, 100% 0, 70% 50%, 100% 100%, 0 70%);
}
.sc-mar-tang .sc-mar-pect {
  position: absolute; left: 10px; top: 5px;
  width: 7px; height: 5px;
  background: rgba(80,160,220,0.7);
  border-radius: 50%;
}
.sc-mar-tang .sc-mar-spine {
  position: absolute; right: 6px; top: 6px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #1a3048;
}
.sc-mar-tang .sc-mar-eye { left: 5px; top: 5px; }

/* —— grouper: bulky + lips + spots —— */
.sc-mar-grouper { width: 56px; height: 28px; }
.sc-mar-grouper .sc-mar-body {
  position: absolute; left: 4px; top: 4px;
  width: 40px; height: 20px;
  border-radius: 48% 42% 45% 50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.22), transparent 40%),
    linear-gradient(180deg, #8aaa78, #5a7850 55%, #3a5038);
  box-shadow: inset -3px -2px 4px rgba(0,0,0,0.3), 2px 3px 4px rgba(0,20,40,0.28);
}
.sc-mar-grouper .sc-mar-lips {
  position: absolute; left: -2px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 40% 20% 30% 50%;
  background: linear-gradient(90deg, #6a8860, #4a6848);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.15), inset -1px -1px 2px rgba(0,0,0,0.25);
}
.sc-mar-grouper .sc-mar-lips::after {
  content: ""; position: absolute; left: 1px; top: 4px;
  width: 6px; height: 2px; border-radius: 1px;
  background: rgba(20,30,20,0.45);
}
.sc-mar-grouper .sc-mar-spot {
  position: absolute; border-radius: 50%;
  background: rgba(30,40,28,0.35);
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.15);
}
.sc-mar-grouper .sc-mar-dorsal {
  position: absolute; left: 14px; top: 0;
  width: 24px; height: 8px;
  background: #4a6848;
  clip-path: polygon(0 100%, 8% 30%, 50% 0, 92% 30%, 100% 100%);
}
.sc-mar-grouper .sc-mar-anal {
  position: absolute; left: 18px; bottom: 0;
  width: 16px; height: 6px;
  background: #3a5840;
  clip-path: polygon(0 0, 15% 100%, 85% 100%, 100% 0);
}
.sc-mar-grouper .sc-mar-tail {
  position: absolute; right: 0; top: 6px;
  width: 12px; height: 16px;
  background: #4a6848;
  clip-path: polygon(0 25%, 100% 0, 75% 50%, 100% 100%, 0 75%);
}
.sc-mar-grouper .sc-mar-pect {
  position: absolute; left: 16px; top: 10px;
  width: 12px; height: 8px;
  background: rgba(120,150,100,0.65);
  border-radius: 40% 60% 50% 40%;
  transform: rotate(-18deg);
}
.sc-mar-grouper .sc-mar-gill {
  position: absolute; left: 12px; top: 8px;
  width: 2px; height: 10px;
  border-radius: 1px;
  background: rgba(0,0,0,0.22);
}
.sc-mar-grouper .sc-mar-eye { left: 10px; top: 9px; width: 5px; height: 5px; }

/* —— eel: long sinuous ribbon —— */
.sc-mar-eel {
  width: 72px; height: 14px;
  animation-name: scMarSwim;
}
.sc-mar-eel.rev { animation-name: scMarSwimRev; }
.sc-mar-eel > .sc-mar-sprite {
  --face: 1;
  animation: scEelWave 1.1s ease-in-out infinite;
}
.sc-mar-eel:not(.rev) > .sc-mar-sprite { --face: -1; }
.sc-mar-eel.rev > .sc-mar-sprite { --face: 1; }
.sc-mar-eel .sc-mar-body {
  position: absolute; left: 0; top: 4px;
  width: 68px; height: 7px;
  border-radius: 4px 6px 6px 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent 45%, rgba(0,0,0,0.25)),
    linear-gradient(90deg, #3a7850 0%, #2a6040 40%, #1a4830 80%, #143828);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 2px 3px rgba(0,20,40,0.25);
  overflow: visible;
}
.sc-mar-eel .sc-mar-ridge {
  position: absolute; left: 10px; right: 8px; top: -3px; height: 4px;
  background: linear-gradient(90deg, transparent, #2a6848 20%, #1a5038 80%, transparent);
  border-radius: 2px;
  opacity: 0.7;
  clip-path: polygon(0 100%, 5% 0, 95% 0, 100% 100%);
}
.sc-mar-eel .sc-mar-head {
  position: absolute; left: -2px; top: -1px;
  width: 12px; height: 9px;
  border-radius: 50% 40% 40% 50%;
  background: linear-gradient(135deg, #4a8860, #2a6040);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.25);
}
.sc-mar-eel .sc-mar-jaw {
  position: absolute; left: 0; top: 5px;
  width: 7px; height: 3px;
  border-radius: 0 0 40% 40%;
  background: #1a4030;
  opacity: 0.7;
}
.sc-mar-eel .sc-mar-eye { left: 3px; top: 1px; width: 3px; height: 3px; }
.sc-mar-eel .sc-mar-seg {
  position: absolute; top: 0; bottom: 0; width: 10px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  animation: scEelSeg 1.1s ease-in-out infinite;
  animation-delay: calc(var(--si, 0) * -0.12s);
}
.sc-mar-eel .sc-mar-seg.s0 { left: 14%; }
.sc-mar-eel .sc-mar-seg.s1 { left: 30%; }
.sc-mar-eel .sc-mar-seg.s2 { left: 46%; }
.sc-mar-eel .sc-mar-seg.s3 { left: 62%; }
.sc-mar-eel .sc-mar-seg.s4 { left: 76%; }

/* —— reef shark —— */
.sc-mar-shark { width: 64px; height: 24px; }
.sc-mar-shark .sc-mar-body {
  position: absolute; left: 6px; top: 6px;
  width: 42px; height: 14px;
  border-radius: 45% 55% 50% 40%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), transparent 40%),
    linear-gradient(180deg, #9aacb8, #6a7a88 50%, #4a5868);
  box-shadow: inset 0 -3px 0 rgba(220,230,235,0.35), inset -2px -1px 3px rgba(0,0,0,0.25), 2px 2px 4px rgba(0,20,40,0.28);
}
.sc-mar-shark .sc-mar-snout {
  position: absolute; left: -4px; top: 2px;
  width: 14px; height: 10px;
  border-radius: 60% 30% 40% 50%;
  background: linear-gradient(90deg, #8a9aa8, #6a7a88);
  clip-path: polygon(0 40%, 70% 0, 100% 30%, 100% 70%, 70% 100%, 0 60%);
}
.sc-mar-shark .sc-mar-dorsal {
  position: absolute; left: 22px; top: -2px;
  width: 14px; height: 12px;
  background: linear-gradient(180deg, #7a8a98, #4a5868);
  clip-path: polygon(10% 100%, 45% 0, 90% 100%);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.sc-mar-shark .sc-mar-dorsal-2 {
  position: absolute; left: 40px; top: 4px;
  width: 7px; height: 6px;
  background: #5a6a78;
  clip-path: polygon(10% 100%, 50% 0, 90% 100%);
}
.sc-mar-shark .sc-mar-pect {
  position: absolute; left: 16px; top: 14px;
  width: 16px; height: 8px;
  background: linear-gradient(180deg, #7a8a98, #4a5868);
  clip-path: polygon(0 0, 100% 40%, 90% 100%, 10% 60%);
  transform: rotate(8deg);
}
.sc-mar-shark .sc-mar-pelvic {
  position: absolute; left: 32px; top: 16px;
  width: 8px; height: 5px;
  background: #5a6a78;
  clip-path: polygon(0 0, 100% 50%, 80% 100%, 0 70%);
}
.sc-mar-shark .sc-mar-tail {
  position: absolute; right: -2px; top: 0;
  width: 16px; height: 14px;
  background: linear-gradient(90deg, #6a7a88, #4a5868);
  clip-path: polygon(0 55%, 100% 0, 60% 55%, 100% 55%);
}
.sc-mar-shark .sc-mar-tail-low {
  position: absolute; right: 0; top: 10px;
  width: 12px; height: 10px;
  background: #5a6a78;
  clip-path: polygon(0 0, 100% 100%, 55% 0);
}
.sc-mar-shark .sc-mar-gill {
  position: absolute; top: 8px; width: 1.5px; height: 7px;
  border-radius: 1px; background: rgba(0,0,0,0.28);
}
.sc-mar-shark .sc-mar-gill.g1 { left: 14px; }
.sc-mar-shark .sc-mar-gill.g2 { left: 17px; }
.sc-mar-shark .sc-mar-gill.g3 { left: 20px; }
.sc-mar-shark .sc-mar-eye { left: 8px; top: 9px; width: 3.5px; height: 3.5px; }

/* —— whale shark —— */
.sc-mar-whale { width: 110px; height: 34px; }
.sc-mar-whale .sc-mar-body {
  position: absolute; left: 8px; top: 8px;
  width: 78px; height: 20px;
  border-radius: 48% 45% 45% 48%;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 40%),
    linear-gradient(180deg, #5a7088, #3a4a60 55%, #2a3848);
  box-shadow: inset 0 -4px 0 rgba(200,210,220,0.2), inset -3px -2px 4px rgba(0,0,0,0.28), 2px 3px 5px rgba(0,20,40,0.28);
}
.sc-mar-whale .sc-mar-spot {
  position: absolute; border-radius: 50%;
  background: rgba(220,230,240,0.45);
  box-shadow: 0 0 0 0.5px rgba(180,200,220,0.25);
}
.sc-mar-whale .sc-mar-dorsal {
  position: absolute; left: 40px; top: 0;
  width: 18px; height: 12px;
  background: #4a5a70;
  clip-path: polygon(15% 100%, 50% 0, 85% 100%);
}
.sc-mar-whale .sc-mar-pect {
  position: absolute; left: 28px; top: 20px;
  width: 22px; height: 10px;
  background: linear-gradient(180deg, #4a5a70, #2a3848);
  clip-path: polygon(0 0, 100% 35%, 85% 100%, 5% 55%);
}
.sc-mar-whale .sc-mar-tail {
  position: absolute; right: 0; top: 2px;
  width: 22px; height: 16px;
  background: #3a4a60;
  clip-path: polygon(0 50%, 100% 0, 55% 50%, 100% 55%);
}
.sc-mar-whale .sc-mar-tail-low {
  position: absolute; right: 4px; top: 14px;
  width: 16px; height: 12px;
  background: #2a3848;
  clip-path: polygon(0 0, 100% 100%, 50% 0);
}
.sc-mar-whale .sc-mar-gill {
  position: absolute; top: 12px; width: 2px; height: 8px;
  background: rgba(0,0,0,0.25); border-radius: 1px;
}
.sc-mar-whale .sc-mar-gill.g1 { left: 22px; }
.sc-mar-whale .sc-mar-gill.g2 { left: 26px; }
.sc-mar-whale .sc-mar-mouth {
  position: absolute; left: 2px; top: 12px;
  width: 14px; height: 6px;
  border-radius: 40% 20% 30% 40%;
  background: rgba(20,30,40,0.45);
}
.sc-mar-whale .sc-mar-eye { left: 16px; top: 12px; width: 4px; height: 4px; }

/* —— sea turtle —— */
.sc-mar-turtle { width: 42px; height: 28px; }
.sc-mar-turtle .sc-mar-shell {
  position: absolute; left: 8px; top: 4px;
  width: 26px; height: 18px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.25), transparent 45%),
    linear-gradient(180deg, #4a9870, #2a6848 55%, #1a4830);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), inset 2px 2px 3px rgba(255,255,255,0.15), 2px 3px 4px rgba(0,20,40,0.28);
  overflow: hidden;
}
.sc-mar-turtle .sc-mar-scute {
  position: absolute;
  width: 22%; height: 22%;
  border: 1px solid rgba(20,50,30,0.35);
  border-radius: 2px;
  background: rgba(60,140,90,0.25);
  box-sizing: border-box;
}
.sc-mar-turtle .sc-mar-head {
  position: absolute; left: 0; top: 8px;
  width: 10px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5aaa78, #2a6848);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.25);
}
.sc-mar-turtle .sc-mar-eye { left: 2px; top: 10px; width: 3px; height: 3px; }
.sc-mar-turtle .sc-mar-flip {
  position: absolute;
  width: 12px; height: 6px;
  background: linear-gradient(90deg, #3a8860, #1a4830);
  border-radius: 50% 40% 50% 40%;
  animation: scTurtlePaddle 1.4s ease-in-out infinite;
}
.sc-mar-turtle .sc-mar-flip.fl { left: 6px; top: 2px; transform: rotate(-35deg); animation-delay: 0s; }
.sc-mar-turtle .sc-mar-flip.fr { left: 6px; bottom: 2px; transform: rotate(35deg); animation-delay: 0.7s; }
.sc-mar-turtle .sc-mar-flip.bl { right: 4px; top: 4px; width: 9px; height: 5px; animation-delay: 0.35s; }
.sc-mar-turtle .sc-mar-flip.br { right: 4px; bottom: 4px; width: 9px; height: 5px; animation-delay: 1.05s; }
.sc-mar-turtle .sc-mar-tail {
  position: absolute; right: 2px; top: 11px;
  width: 6px; height: 4px;
  background: #2a6848;
  border-radius: 0 40% 40% 0;
  clip-path: polygon(0 20%, 100% 50%, 0 80%);
}

/* —— jellyfish —— */
.sc-mar-jelly { width: 28px; height: 40px; }
.sc-mar-jelly .sc-mar-bell {
  position: absolute; left: 2px; top: 0;
  width: 24px; height: 16px;
  border-radius: 50% 50% 40% 40%;
  background:
    radial-gradient(ellipse at 40% 35%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(180deg, rgba(180,220,255,0.55), rgba(120,170,230,0.35) 70%, rgba(100,140,200,0.25));
  box-shadow: inset 0 -3px 4px rgba(80,120,180,0.25), 0 0 8px rgba(140,200,255,0.25);
  animation: scJellyPulse 3.2s ease-in-out infinite;
}
.sc-mar-jelly .sc-mar-oral {
  position: absolute; left: 30%; right: 30%; bottom: 0; height: 40%;
  border-radius: 0 0 40% 40%;
  background: rgba(160,200,240,0.25);
}
.sc-mar-jelly .sc-mar-tents {
  position: absolute; left: 2px; right: 2px; top: 14px; height: 26px;
}
.sc-mar-jelly .sc-mar-tent {
  position: absolute; top: 0; width: 1.5px;
  background: linear-gradient(to bottom, rgba(160,200,240,0.55), rgba(140,180,230,0.15), transparent);
  border-radius: 1px;
  transform-origin: top center;
  animation: scJellyTent 2.4s ease-in-out infinite alternate;
}
.sc-mar-jelly .sc-mar-side {
  top: 15%; right: 8%; width: 22%; height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(0,40,80,0.15));
  border-radius: 0 50% 40% 0;
}

/* —— octopus —— */
.sc-mar-octopus { width: 36px; height: 40px; }
.sc-mar-octopus .sc-mar-mantle {
  position: absolute; left: 6px; top: 0;
  width: 24px; height: 18px;
  border-radius: 50% 50% 40% 40%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), transparent 45%),
    linear-gradient(180deg, #c06090, #903060 55%, #702048);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,20,40,0.25);
}
.sc-mar-octopus .sc-mar-eye {
  left: 12px; top: 6px; width: 6px; height: 6px;
  background: #f0e8d8;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.sc-mar-octopus .sc-mar-pupil {
  position: absolute; left: 14px; top: 8px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #1a1020;
  z-index: 4;
}
.sc-mar-octopus .sc-mar-tents {
  position: absolute; left: 2px; right: 2px; top: 14px; height: 26px;
}
.sc-mar-octopus .sc-mar-tent {
  position: absolute; top: 0; width: 4px; height: 22px;
  background: linear-gradient(180deg, #a04878, #702048);
  border-radius: 2px 2px 40% 40%;
  transform-origin: top center;
  animation: scOctTentCurl 2.6s ease-in-out infinite alternate;
  box-shadow: inset 1px 0 1px rgba(255,255,255,0.15);
}
.sc-mar-octopus .sc-mar-sucker {
  position: absolute; left: 50%; width: 3px; height: 3px;
  margin-left: -1.5px; border-radius: 50%;
  background: rgba(255,180,200,0.45);
  box-shadow: inset 0 0 0 0.5px rgba(80,20,40,0.35);
}

/* —— manta / stingray —— */
.sc-mar-manta { width: 72px; height: 28px; }
.sc-mar-stingray { width: 48px; height: 22px; }
.sc-mar-manta .sc-mar-body,
.sc-mar-stingray .sc-mar-body {
  position: absolute; left: 18%; top: 30%;
  width: 40%; height: 40%;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.2), transparent 45%),
    linear-gradient(180deg, #4a6080, #2a3848);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.25);
  z-index: 2;
}
.sc-mar-manta .sc-mar-wing,
.sc-mar-stingray .sc-mar-wing {
  position: absolute; top: 15%;
  width: 38%; height: 70%;
  background: linear-gradient(180deg, #5a7090, #2a3848 70%, #1a2838);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.12), inset 0 -2px 3px rgba(0,0,0,0.25);
  animation: scRayFlap 2.8s ease-in-out infinite;
}
.sc-mar-manta .sc-mar-wing.wl,
.sc-mar-stingray .sc-mar-wing.wl {
  left: 0;
  border-radius: 50% 10% 10% 60%;
  clip-path: polygon(100% 40%, 60% 0, 0 35%, 15% 70%, 55% 100%, 100% 65%);
  animation-delay: 0s;
}
.sc-mar-manta .sc-mar-wing.wr,
.sc-mar-stingray .sc-mar-wing.wr {
  right: 0;
  border-radius: 10% 50% 60% 10%;
  clip-path: polygon(0 40%, 40% 0, 100% 35%, 85% 70%, 45% 100%, 0 65%);
  animation-delay: 1.4s;
}
.sc-mar-manta .sc-mar-ceph {
  position: absolute; top: 28%; width: 10%; height: 28%;
  background: #3a5068;
  border-radius: 40%;
  z-index: 3;
}
.sc-mar-manta .sc-mar-ceph.cl { left: 28%; transform: rotate(-25deg); }
.sc-mar-manta .sc-mar-ceph.cr { right: 28%; transform: rotate(25deg); }
.sc-mar-manta .sc-mar-tail {
  position: absolute; left: 55%; top: 55%;
  width: 40%; height: 3px;
  background: linear-gradient(90deg, #3a4a60, transparent);
  border-radius: 2px;
}
.sc-mar-stingray .sc-mar-tail {
  position: absolute; left: 55%; top: 48%;
  width: 48%; height: 2.5px;
  background: linear-gradient(90deg, #3a4a60, #1a2838 70%, transparent);
  border-radius: 2px;
  transform: rotate(8deg);
}
.sc-mar-manta .sc-mar-eye,
.sc-mar-stingray .sc-mar-eye {
  width: 3px; height: 3px; top: 38%; z-index: 4;
}
.sc-mar-manta .sc-mar-eye.el, .sc-mar-stingray .sc-mar-eye.el { left: 38%; }
.sc-mar-manta .sc-mar-eye.er, .sc-mar-stingray .sc-mar-eye.er { left: 52%; }

/* —— seahorse —— */
.sc-mar-seahorse { width: 16px; height: 34px; }
.sc-mar-seahorse .sc-mar-body {
  position: absolute; left: 4px; top: 8px;
  width: 8px; height: 16px;
  border-radius: 40% 50% 40% 50%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.25), transparent 40%, rgba(0,0,0,0.2)),
    linear-gradient(180deg, #e09050, #c07038 50%, #a05828);
  box-shadow: inset -1px 0 2px rgba(0,0,0,0.25);
}
.sc-mar-seahorse .sc-mar-snout {
  position: absolute; left: 0; top: 4px;
  width: 8px; height: 3px;
  background: #c07840;
  border-radius: 2px;
  transform: rotate(-12deg);
}
.sc-mar-seahorse .sc-mar-eye { left: 5px; top: 6px; width: 3px; height: 3px; }
.sc-mar-seahorse .sc-mar-crown {
  position: absolute; left: 5px; top: 1px;
  width: 6px; height: 5px;
  background: #d08848;
  clip-path: polygon(0 100%, 20% 0, 50% 60%, 80% 0, 100% 100%);
}
.sc-mar-seahorse .sc-mar-dorsal {
  position: absolute; right: 0; top: 10px;
  width: 6px; height: 10px;
  background: rgba(224,160,90,0.7);
  clip-path: polygon(0 0, 100% 20%, 80% 80%, 0 100%);
  animation: scHorseFlutter 0.6s ease-in-out infinite alternate;
}
.sc-mar-seahorse .sc-mar-belly {
  position: absolute; left: 3px; top: 14px;
  width: 7px; height: 8px;
  border-radius: 40%;
  background: rgba(255,200,140,0.35);
}
.sc-mar-seahorse .sc-mar-curl {
  position: absolute; left: 5px; bottom: 0;
  width: 8px; height: 10px;
  border: 2.5px solid #c07038;
  border-top: none; border-left: none;
  border-radius: 0 0 8px 0;
  transform: rotate(8deg);
}

/* —— shrimp —— */
.sc-mar-shrimp { width: 22px; height: 12px; }
.sc-mar-shrimp .sc-mar-body {
  position: absolute; left: 4px; top: 3px;
  width: 14px; height: 6px;
  border-radius: 40% 50% 40% 50%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 50%),
    linear-gradient(90deg, #f0a090, #e07060);
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2);
}
.sc-mar-shrimp .sc-mar-head {
  position: absolute; left: 0; top: 2px;
  width: 6px; height: 6px;
  border-radius: 50% 30% 40% 50%;
  background: #e88878;
}
.sc-mar-shrimp .sc-mar-eye { left: 1px; top: 3px; width: 2.5px; height: 2.5px; }
.sc-mar-shrimp .sc-mar-ant {
  position: absolute; top: 0; width: 8px; height: 1px;
  background: rgba(240,180,160,0.7);
  transform-origin: left center;
}
.sc-mar-shrimp .sc-mar-ant.a1 { left: 0; transform: rotate(-35deg); }
.sc-mar-shrimp .sc-mar-ant.a2 { left: 0; transform: rotate(-55deg); }
.sc-mar-shrimp .sc-mar-tail {
  position: absolute; right: 0; top: 2px;
  width: 5px; height: 7px;
  background: #e07060;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}
.sc-mar-shrimp .sc-mar-leg {
  position: absolute; top: 8px; width: 1.5px; height: 4px;
  background: rgba(240,160,140,0.7);
  border-radius: 1px;
  animation: scShrimpLeg 0.5s ease-in-out infinite alternate;
}

/* —— demoted kraken with sucker detail —— */
.sc-kraken {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  pointer-events: none;
}
.sc-kraken-tent {
  position: absolute; bottom: -15%; width: 12px; height: 50%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), transparent 40%, rgba(0,0,0,0.2)),
    linear-gradient(to top, rgba(80, 20, 50, 0.5), rgba(120, 40, 80, 0.3), transparent);
  border-radius: 40% 40% 0 0;
  transform-origin: bottom center;
  animation: scKrakenRise ease-in-out infinite;
  box-shadow: inset 2px 0 3px rgba(255,255,255,0.1), inset -2px 0 4px rgba(0,0,0,0.25);
}
.sc-kraken-sucker {
  position: absolute; left: 50%; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%;
  background: rgba(180,80,120,0.35);
  box-shadow: inset 0 0 0 1px rgba(40,10,25,0.35);
}

/* —— animations (transform/opacity only) —— */
@keyframes scMarSwim {
  from { transform: translate3d(-18vw, 0, 0) scale(var(--ms, 1)); }
  to { transform: translate3d(118vw, 0, 0) scale(var(--ms, 1)); }
}
@keyframes scMarSwimRev {
  from { transform: translate3d(118vw, 0, 0) scale(var(--ms, 1)); }
  to { transform: translate3d(-18vw, 0, 0) scale(var(--ms, 1)); }
}
@keyframes scMarDrift {
  from { transform: translate3d(0, 0, 0) scale(var(--ms, 1)); opacity: 0.45; }
  to { transform: translate3d(6px, 12px, 0) scale(var(--ms, 1)); opacity: 0.65; }
}
@keyframes scMarIdle {
  from { transform: translate3d(0, 0, 0) scale(var(--ms, 1)); }
  to { transform: translate3d(5px, -5px, 0) scale(var(--ms, 1)); }
}
@keyframes scMarHover {
  from { transform: translate3d(0, 0, 0) scale(var(--ms, 1)); }
  to { transform: translate3d(0, -6px, 0) scale(var(--ms, 1)); }
}
@keyframes scMarSchoolBob {
  from { transform: translate3d(0, 0, 0) scale(var(--ms, 1)); }
  to { transform: translate3d(2px, -3px, 0) scale(var(--ms, 1)); }
}
@keyframes scEelWave {
  0%, 100% { transform: scaleX(var(--face, 1)) translateY(0) rotate(0deg); }
  25% { transform: scaleX(var(--face, 1)) translateY(-2px) rotate(1.5deg); }
  75% { transform: scaleX(var(--face, 1)) translateY(2px) rotate(-1.5deg); }
}
@keyframes scEelSeg {
  from { transform: translateY(-1.5px); opacity: 0.5; }
  to { transform: translateY(1.5px); opacity: 0.9; }
}
@keyframes scTurtlePaddle {
  from { transform: rotate(var(--flip-r, -30deg)) translateX(0); }
  to { transform: rotate(calc(var(--flip-r, -30deg) + 16deg)) translateX(2px); }
}
@keyframes scJellyPulse {
  from { transform: scale(1, 1); }
  to { transform: scale(1.06, 0.92); }
}
@keyframes scJellyTent {
  from { transform: rotate(calc(var(--tw, 1) * -4deg)) translateY(0); }
  to { transform: rotate(calc(var(--tw, 1) * 6deg)) translateY(3px); }
}
@keyframes scOctTentCurl {
  from { transform: rotate(calc(var(--ti, 0) * 2deg - 8deg)) scaleY(1); }
  to { transform: rotate(calc(var(--ti, 0) * 2deg + 10deg)) scaleY(0.92); }
}
@keyframes scRayFlap {
  from { transform: scaleY(1) rotate(0deg); }
  to { transform: scaleY(0.88) rotate(2deg); }
}
@keyframes scHorseFlutter {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.7); }
}
@keyframes scShrimpLeg {
  from { transform: rotate(-10deg); }
  to { transform: rotate(15deg); }
}
@keyframes scKrakenRise {
  0%, 100% { transform: translate3d(0, 45%, 0) rotate(0deg); opacity: 0; }
  20% { opacity: 0.4; }
  45% { transform: translate3d(0, 0, 0) rotate(3deg); opacity: 0.4; }
  70% { transform: translate3d(3px, 6%, 0) rotate(-2deg); opacity: 0.28; }
  85% { opacity: 0.1; }
}
@keyframes scBubbleUp {
  0% { transform: translate3d(0, 100vh, 0) scale(0.6); opacity: 0; }
  15% { opacity: 0.7; }
  100% { transform: translate3d(var(--drift, 20px), -10vh, 0) scale(1.2); opacity: 0; }
}
@keyframes scRaySway {
  from { transform: skewX(-8deg); opacity: 0.35; }
  to { transform: skewX(8deg); opacity: 0.65; }
}

/* mobile: keep critters readable in gutters; slightly smaller */
@media (max-width: 600px) {
  .sc-mar-school { width: 72px; height: 30px; }
  .sc-mar-whale { width: 84px; height: 26px; }
  .sc-mar-shark { width: 52px; height: 20px; }
  .sc-mar-grouper { width: 46px; height: 24px; }
  .sc-mar-eel { width: 58px; }
  .sc-mar-manta { width: 56px; height: 22px; }
}

/* —— boba: Taipei night market —— */
/* —— boba: amy54 layered Taipei night skyline (behind every Boba object) ——
   Far -> near: Yangmingshan ridge, two pale hazy tower bands, Grand Hotel on
   its hill, Miramar wheel, Taipei 101, then darker mid/near apartment blocks
   with warm lit windows, rooftop water tanks, neon signs and temple roofs.
   Atmospheric perspective: farther = paler, hazier, more transparent. */
.sc-tpe-city { position: absolute; inset: 0; pointer-events: none; }
.sc-tpe-glow {
  position: absolute; left: 0; right: 0; bottom: 18%; height: 52%;
  background: linear-gradient(to top,
    rgba(255, 160, 110, 0) 0%,
    rgba(255, 160, 110, 0.13) 22%,
    rgba(230, 130, 150, 0.07) 55%,
    rgba(200, 120, 150, 0) 100%);
}
.sc-tpe-mtn {
  position: absolute; left: -2%; width: 104%; bottom: 30%; height: 22%;
  background: linear-gradient(to bottom, rgba(120, 96, 120, 0.42), rgba(150, 116, 120, 0.16) 70%, rgba(150, 116, 120, 0));
  filter: blur(1.8px);
}
.sc-tpe-mtn.m2 {
  bottom: 28%; height: 15%;
  background: linear-gradient(to bottom, rgba(96, 74, 90, 0.5), rgba(130, 98, 104, 0.18) 70%, rgba(130, 98, 104, 0));
  filter: blur(1.2px);
}
.sc-tpe-layer {
  position: absolute; left: 0; right: 0;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%);
  mask-image: linear-gradient(to top, transparent 0%, #000 30%);
}
.sc-tpe-layer.l0 {
  bottom: 26%; height: 24%; opacity: 0.5; filter: blur(1.3px) saturate(0.7);
  --lw: rgb(122, 94, 98); --ul: rgb(128, 100, 104);
  --fy: 4px; --fb: 2px; --cx: 4px; --cb: 2px; --d1: 7px; --p1: 13px; --d2: 5px; --p2: 11px;
}
.sc-tpe-layer.l1 {
  bottom: 23.5%; height: 26%; opacity: 0.66; filter: blur(0.7px) saturate(0.8);
  --lw: rgb(88, 66, 72); --ul: rgb(96, 72, 78);
  --fy: 5px; --fb: 3px; --cx: 5px; --cb: 2px; --d1: 9px; --p1: 19px; --d2: 6px; --p2: 14px;
}
.sc-tpe-layer.l2 {
  bottom: 21%; height: 22%; opacity: 0.84; filter: blur(0.25px);
  --lw: rgb(52, 38, 42); --ul: rgb(60, 44, 48);
  --fy: 6px; --fb: 3px; --cx: 6px; --cb: 3px; --d1: 12px; --p1: 23px; --d2: 7px; --p2: 17px;
}
.sc-tpe-layer.l3 {
  bottom: 19%; height: 15%; opacity: 0.95;
  --lw: rgb(30, 21, 22); --ul: rgb(38, 28, 28);
  --fy: 7px; --fb: 3px; --cx: 7px; --cb: 3px; --d1: 14px; --p1: 29px; --d2: 8px; --p2: 22px;
}
.sc-tpe-b {
  position: absolute; bottom: 0;
  background-color: var(--lw);
  background-image:
    repeating-linear-gradient(0deg, var(--lw) 0 var(--fb), transparent var(--fb) var(--fy)),
    repeating-linear-gradient(90deg, var(--lw) 0 var(--cb), transparent var(--cb) var(--cx)),
    repeating-linear-gradient(90deg, var(--ul) 0 var(--d1), transparent var(--d1) var(--p1)),
    repeating-linear-gradient(0deg, var(--ul) 0 var(--d2), transparent var(--d2) var(--p2)),
    linear-gradient(var(--win), var(--win));
  background-position: 0 0, 0 0, var(--ox, 0) 0, 0 var(--oy, 0), 0 0;
  box-shadow: inset 0 3px 0 var(--lw), inset 1px 0 0 var(--lw), inset -1px 0 0 var(--lw);
}
.sc-tpe-b.crown::before {
  content: ""; position: absolute; bottom: 100%; left: 18%; right: 18%; height: 7%;
  background: var(--lw);
  box-shadow: 0 -4px 0 -1px var(--lw);
}
.sc-tpe-b.tank::before {
  content: ""; position: absolute; bottom: 100%; left: 18%; width: 5px; height: 6px;
  background: var(--lw); border-radius: 3px 3px 0 0;
  box-shadow: 8px 1px 0 0 var(--lw);
}
.sc-tpe-b.shed::after {
  content: ""; position: absolute; bottom: 100%; right: 10%; width: 36%; height: 5px;
  background: var(--lw);
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}
.sc-tpe-b.ant::after {
  content: ""; position: absolute; bottom: 100%; left: 48%; width: 1px; height: 14px;
  background: linear-gradient(to bottom, #ff5a4a 0 2px, var(--lw) 2px);
}
.sc-tpe-sign {
  position: absolute; right: 10%; top: 14%; width: 3px; height: 44%;
  background: repeating-linear-gradient(180deg, var(--neon) 0 4px, rgba(255, 255, 255, 0.75) 4px 5px);
  box-shadow: 0 0 4px var(--neon), 0 0 9px var(--neon);
  border-radius: 1px; opacity: 0.9;
}
.sc-tpe-sign.h { right: auto; left: 14%; top: 7%; width: 56%; height: 3px; background: var(--neon); }
.sc-tpe-haze { position: absolute; left: 0; right: 0; pointer-events: none; }
.sc-tpe-haze.h1 {
  bottom: 22%; height: 14%;
  background: linear-gradient(to top, rgba(160, 118, 110, 0.2), rgba(160, 118, 110, 0.08) 45%, transparent);
}
.sc-tpe-haze.h2 {
  bottom: 19.5%; height: 10%;
  background: linear-gradient(to top, rgba(140, 100, 92, 0.16), transparent);
}
.sc-tpe-haze.h3 {
  bottom: 17%; height: 7%;
  background: linear-gradient(to top, rgba(110, 76, 66, 0.14), transparent);
}
/* Grand Hotel Taipei (amy55) — red 12-storey palace, golden double-eaved
   hip-and-gable roof with upswept corners, cream balustrades, side wings */
.sc-tpe-grand {
  /* amy56: mid-distance scale + same atmospheric haze as its depth band */
  position: absolute; left: 9.5%; bottom: 30.2%; width: 8.2%; height: 7%;
  opacity: 0.94;
  filter: saturate(0.82) brightness(0.82) contrast(0.85) blur(0.4px) drop-shadow(0 0 3px rgba(255, 140, 80, 0.16));
}
.sc-tpe-hill {
  /* Jiantan hill, toned like the Yangmingshan ridges so it melts into them */
  position: absolute; left: -90%; width: 280%; bottom: -40%; height: 62%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(to bottom, rgba(88, 70, 80, 0.95), rgba(104, 80, 86, 0.55) 55%, rgba(120, 92, 96, 0.1));
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, #000 55%, transparent 100%);
}
.gh-terrace {
  position: absolute; left: 3%; width: 94%; bottom: 4%; height: 4.5%;
  background: linear-gradient(rgba(250, 226, 180, 0.85), rgba(190, 140, 100, 0.7));
}
.gh-fac {
  position: absolute;
  --fl: 12; --bays: 26;
  background-color: #8c1f16;
  background-image:
    linear-gradient(to top, rgba(255, 238, 205, 0.92) 0 1px, transparent 1px),
    linear-gradient(90deg, #c0281a 0 32%, transparent 32%),
    linear-gradient(to bottom, #8c1f16 0 30%, transparent 30%),
    linear-gradient(rgba(255, 216, 140, 0.95), rgba(255, 176, 96, 0.95));
  background-size:
    100% calc(100% / var(--fl)),
    calc(100% / var(--bays)) 100%,
    100% calc(100% / var(--fl)),
    100% 100%;
  box-shadow: inset 2px 0 0 #c0281a, inset -2px 0 0 #c0281a;
}
.gh-main { left: 15%; width: 70%; bottom: 8%; height: 54%; --fl: 12; --bays: 24; }
.gh-wing { bottom: 8%; width: 17%; height: 28%; --fl: 5; --bays: 6; }
.gh-wing.l { left: 1%; }
.gh-wing.r { right: 1%; }
.gh-attic { left: 19%; width: 62%; bottom: 66%; height: 8%; --fl: 1; --bays: 22; }
.gh-porch { left: 41%; width: 18%; bottom: 8%; height: 11%; --fl: 1; --bays: 5; }
.gh-roof {
  position: absolute;
  background:
    repeating-linear-gradient(90deg, rgba(130, 64, 10, 0.28) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ffe07a, #f5b23c 50%, #c06a1c);
}
/* lower skirt eave of the double-eaved roof, corners swept up */
.gh-eave {
  left: 9%; width: 82%; bottom: 60%; height: 8.5%;
  clip-path: polygon(5% 0, 95% 0, 98% 66%, 100% 18%, 99.6% 72%, 98.4% 100%, 1.6% 100%, 0.4% 72%, 0 18%, 2% 66%);
}
/* upper hip-and-gable roof spanning the whole top */
.gh-top {
  left: 11%; width: 78%; bottom: 72%; height: 21%;
  clip-path: polygon(23% 6%, 77% 6%, 79.5% 30%, 86% 56%, 92% 72%, 97% 80%, 100% 50%, 99.5% 88%, 98% 100%, 2% 100%, 0.5% 88%, 0 50%, 3% 80%, 8% 72%, 14% 56%, 20.5% 30%);
}
/* main ridge with curled chiwen ornaments at each end */
.gh-ridge {
  position: absolute; left: 26.5%; width: 47%; bottom: 90.5%; height: 6.5%;
  background: linear-gradient(#ffe58a, #d88a2a);
  clip-path: polygon(0 10%, 1.5% 0, 3% 20%, 3.5% 58%, 96.5% 58%, 97% 20%, 98.5% 0, 100% 10%, 99% 100%, 1% 100%);
}
.gh-wroof {
  bottom: 35%; width: 23%; height: 9%;
  clip-path: polygon(14% 0, 86% 0, 96% 64%, 100% 22%, 99.4% 76%, 98% 100%, 2% 100%, 0.6% 76%, 0 22%, 4% 64%);
}
.gh-wroof.l { left: -2%; }
.gh-wroof.r { right: -2%; }
.gh-proof {
  left: 37%; width: 26%; bottom: 18.5%; height: 6%;
  clip-path: polygon(14% 0, 86% 0, 96% 64%, 100% 20%, 99% 80%, 97% 100%, 3% 100%, 1% 80%, 0 20%, 4% 64%);
}
/* amy60: Miramar Ferris Wheel (Dazhi) on the Miramar mall roof.
   Outer box, diameter and centre unchanged from amy59; look only. */
.sc-tpe-wheel {
  position: absolute; left: 25.2%; bottom: 23.5%; height: 19%; aspect-ratio: 1 / 1.9;
  opacity: 0.8; filter: saturate(0.9) blur(0.3px);
  /* amy61: Miramar "show mode" — one colour at a time, smoothly cycling */
  color: #5dff8a;
  animation: twShow 48s linear infinite;
}
.tw-rim {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1; box-sizing: border-box;
  border-radius: 50%;
  animation: scTpeWheel 80s linear infinite;
}
.tw-rim > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tw-leds { filter: drop-shadow(0 0 1.5px currentColor); }
.tw-spk { fill: none; stroke: currentColor; stroke-width: 0.75; stroke-linecap: round; opacity: 0.9; }
.tw-hoop { fill: none; stroke: currentColor; stroke-width: 0.9; stroke-dasharray: 1.2 1.6; opacity: 0.85; }
.tw-truss { fill: none; filter: drop-shadow(0 0 2px currentColor); }
.tw-r1 { stroke: currentColor; stroke-width: 1.5; }
.tw-r2 { stroke: currentColor; stroke-width: 1.1; opacity: 0.85; }
.tw-lat { stroke: currentColor; stroke-width: 0.55; stroke-linejoin: round; opacity: 0.7; }
.tw-arm { position: absolute; inset: 0; }
.tw-cab {
  position: absolute; left: 48%; top: 1.2%; width: 4%; height: 4.6%;
  border-radius: 38% 38% 45% 45%;
  background:
    linear-gradient(to bottom, transparent 0 22%, rgba(255, 252, 230, 0.9) 22% 58%, transparent 58%),
    currentColor;
  box-shadow: 0 0 2px currentColor;
  animation: scTpeWheelRev 80s linear infinite;
}
.tw-cab.crystal {
  background: linear-gradient(rgba(235, 248, 255, 0.95), rgba(170, 220, 255, 0.75));
  box-shadow: 0 0 3px rgba(220, 245, 255, 0.95);
}
.tw-hub {
  position: absolute; left: 50%; top: 26.32%; width: 13%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fffdf4 0 28%, currentColor 46%, transparent 72%);
  box-shadow: 0 0 6px 1px currentColor;
}
.tw-legs { position: absolute; top: 26.32%; bottom: 30%; left: 0; width: 100%; }
.tw-legs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tw-legs line { stroke-linecap: round; }
.tw-legs.back line { stroke: rgba(150, 150, 172, 0.55); stroke-width: 1.6px; }
.tw-legs.front line { stroke: rgba(214, 214, 228, 0.82); stroke-width: 2.2px; }
.tw-deck {
  position: absolute; left: 28%; width: 44%; bottom: 30%; height: 18.2%;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(to bottom, rgba(255, 246, 225, 0.9) 0 7%, transparent 7%),
    repeating-linear-gradient(90deg, rgba(40, 46, 60, 0.9) 0 1px, transparent 1px 16%),
    linear-gradient(rgba(150, 225, 255, 0.75), rgba(255, 210, 150, 0.8));
  box-shadow: 0 0 5px rgba(150, 220, 255, 0.45);
}
.tw-mall {
  position: absolute; bottom: 0; left: -50%; width: 200%; height: 30%;
  background-color: rgb(78, 70, 76);
  background-image:
    linear-gradient(to bottom, rgba(255, 240, 220, 0.85) 0 2.5%, transparent 2.5%),
    repeating-linear-gradient(0deg, rgb(70, 62, 70) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, rgb(70, 62, 70) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, rgba(255, 196, 140, 0.75), rgba(255, 232, 186, 0.85) 50%, rgba(255, 196, 140, 0.75));
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%);
  mask-image: linear-gradient(to top, transparent 0%, #000 40%);
}
.tw-glass {
  position: absolute; left: 36%; width: 28%; top: 2.5%; height: 70%;
  border-radius: 0 0 50% 50% / 0 0 22% 22%;
  background:
    repeating-linear-gradient(90deg, rgba(30, 40, 60, 0.8) 0 1px, transparent 1px 9%),
    linear-gradient(rgba(140, 220, 255, 0.85), rgba(110, 160, 255, 0.55));
}
@keyframes scTpeWheel { to { transform: rotate(360deg); } }
@keyframes scTpeWheelRev { to { transform: rotate(-360deg); } }
@keyframes twShow {
  0%, 8% { color: #5dff8a; }      /* green */
  12.5%, 20.5% { color: #4aa8ff; } /* blue */
  25%, 33% { color: #a070ff; }     /* purple */
  37.5%, 45.5% { color: #ff70c8; } /* pink */
  50%, 58% { color: #ff4f4f; }     /* red */
  62.5%, 70.5% { color: #ff9a3a; } /* orange */
  75%, 83% { color: #ffd24a; }     /* gold */
  87.5%, 95.5% { color: #f2f2ff; } /* white */
  100% { color: #5dff8a; }
}
/* Taipei 101 — eight flared pagoda segments, pinnacle and spire */
.sc-tpe-101 {
  position: absolute; left: 78%; bottom: 21%; height: 55%; aspect-ratio: 1 / 8.4;
  opacity: 0.9;
  filter: drop-shadow(0 0 7px rgba(130, 255, 220, 0.28));
}
.t101-body {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 1%, rgba(255, 214, 120, 0.9) 1%, rgba(255, 214, 120, 0.9) 1.7%, transparent 1.7%, transparent 7.5%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.16) 1.8%, rgba(0, 0, 0, 0.28) 8.5%),
    repeating-linear-gradient(180deg, rgba(170, 255, 230, 0.2) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #1c3638, #3e7266 42%, #5c9484 55%, #22403c);
}
.t101-beacon {
  position: absolute; top: -2px; left: 50%; width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 6px 1px #ff3b3b;
  animation: scTpeBeacon 2.6s ease-in-out infinite;
}
.t101-podium {
  position: absolute; bottom: 0; left: -120%; width: 340%; height: 7%;
  background-color: rgb(40, 50, 52);
  background-image:
    repeating-linear-gradient(0deg, rgb(40, 50, 52) 0 3px, transparent 3px 7px),
    linear-gradient(rgba(255, 220, 160, 0.75), rgba(255, 220, 160, 0.75));
  clip-path: polygon(6% 30%, 94% 30%, 100% 100%, 0 100%);
}
@keyframes scTpeBeacon { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
/* Temples — swallowtail ridges, lantern-lit doors */
.sc-tpe-temple { position: absolute; bottom: 0; width: 6.5%; height: 64%; }
.tt-body {
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 50%;
  background:
    radial-gradient(ellipse 16% 42% at 50% 100%, rgba(255, 196, 110, 0.95), transparent 75%),
    linear-gradient(#8a2c1e, #561a12);
}
.tt-roof {
  position: absolute;
  background: linear-gradient(#e8763c, #a8381e);
  clip-path: polygon(0 14%, 9% 42%, 20% 52%, 80% 52%, 91% 42%, 100% 14%, 98% 40%, 93% 70%, 100% 100%, 0 100%, 7% 70%, 2% 40%);
}
.tt-roof.lower { left: -8%; width: 116%; bottom: 46%; height: 24%; }
.tt-roof.upper { left: 6%; width: 88%; bottom: 66%; height: 34%; }
.sc-tpe-temple.alt .tt-roof { background: linear-gradient(#d9a040, #a0502a); }
.tt-lamp {
  position: absolute; bottom: 36%; width: 4px; height: 5px; border-radius: 45%;
  background: #ff4a2a; box-shadow: 0 0 5px #ff7a3a;
}
.tt-lamp.a { left: 16%; }
.tt-lamp.b { right: 16%; }
/* amy62: the two desktop temples are no longer identical */
.tt-ridge {
  position: absolute; left: 30%; width: 40%; bottom: 97%; height: 5%;
  background: linear-gradient(90deg, #3aa88c, #7fe0c0 50%, #3aa88c);
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.sc-tpe-temple.alt { width: 6.9%; height: 70%; }
.sc-tpe-temple.alt .tt-body {
  left: 10%; right: 10%; height: 46%;
  background:
    radial-gradient(ellipse 22% 46% at 50% 100%, rgba(255, 222, 140, 0.95), transparent 75%),
    linear-gradient(90deg, transparent 0 22%, rgba(255, 200, 90, 0.35) 22% 24%, transparent 24% 76%, rgba(255, 200, 90, 0.35) 76% 78%, transparent 78%),
    linear-gradient(#9a3020, #5a1810);
}
.sc-tpe-temple.alt .tt-roof.lower { left: -12%; width: 124%; bottom: 42%; height: 22%; }
.sc-tpe-temple.alt .tt-roof.upper { left: 12%; width: 76%; bottom: 60%; height: 30%; }
.sc-tpe-temple.alt .tt-roof { background: linear-gradient(#f0c24a, #b8742a 60%, #7a3a1a); }
.tt-pearl {
  position: absolute; left: 50%; bottom: 87%; width: 9%; aspect-ratio: 1; margin-left: -4.5%;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6c8, #ffc23a 60%, #b06a10);
  box-shadow: 0 0 5px rgba(255, 200, 80, 0.8);
}
.tt-lamp.c { left: 50%; margin-left: -2px; bottom: 30%; background: #ffb02a; box-shadow: 0 0 5px #ffd06a; }
@media (max-width: 600px) {
  .sc-tpe-glow { bottom: 11%; height: 28%; }
  .sc-tpe-mtn { bottom: 21.5%; height: 11%; }
  .sc-tpe-mtn.m2 { bottom: 20%; height: 8.5%; }
  .sc-tpe-layer.l0 { bottom: 19.5%; height: 13%; --fy: 3px; --fb: 1px; --cx: 3px; --cb: 1px; --d1: 5px; --p1: 11px; --d2: 4px; --p2: 9px; }
  .sc-tpe-layer.l1 { bottom: 17.5%; height: 13%; --fy: 4px; --fb: 2px; --cx: 4px; --cb: 2px; --d1: 7px; --p1: 15px; --d2: 5px; --p2: 12px; }
  .sc-tpe-layer.l2 { bottom: 15%; height: 11.5%; --fy: 5px; --fb: 2px; --cx: 5px; --cb: 2px; --d1: 9px; --p1: 19px; --d2: 6px; --p2: 14px; }
  .sc-tpe-layer.l3 { bottom: 12.5%; height: 8.5%; --fy: 6px; --fb: 3px; --cx: 6px; --cb: 3px; --d1: 11px; --p1: 23px; --d2: 7px; --p2: 18px; }
  .sc-tpe-haze.h1 { bottom: 17%; height: 8%; }
  .sc-tpe-haze.h2 { bottom: 14.5%; height: 6%; }
  .sc-tpe-haze.h3 { bottom: 12%; height: 5%; }
  .sc-tpe-grand { left: 34.5%; bottom: 21.2%; width: 15%; height: 3.4%; }
  .gh-fac { background-image:
    linear-gradient(to top, rgba(255, 238, 205, 0.8) 0 0.5px, transparent 0.5px),
    linear-gradient(90deg, #c0281a 0 32%, transparent 32%),
    linear-gradient(to bottom, #8c1f16 0 30%, transparent 30%),
    linear-gradient(rgba(255, 216, 140, 0.95), rgba(255, 176, 96, 0.95)); }
  .sc-tpe-wheel { left: 84%; bottom: 17.5%; height: 10%; }
  .tw-cab { animation: none; rotate: none !important; border-radius: 50%; box-shadow: none; }
  .tw-spk { stroke-width: 1; }
  .tw-hoop { stroke-width: 1.3; }
  .tw-r1 { stroke-width: 2.2; }
  .tw-r2 { stroke-width: 1.6; }
  .tw-lat { stroke-width: 0.9; }
  .tw-legs.back line { stroke-width: 1px; }
  .tw-legs.front line { stroke-width: 1.3px; }
  .sc-tpe-101 { left: 62%; bottom: 14.5%; height: 19.5%; }
  .sc-tpe-temple { width: 15%; }
  .sc-tpe-b.tank::before { width: 4px; height: 4px; box-shadow: 6px 1px 0 0 var(--lw); }
  .sc-tpe-b.ant::after { height: 9px; }
}
.sc-wood-house.farmid { filter: brightness(0.75) saturate(0.55) blur(0.3px); }
/* Wooden village houses */
.sc-wood-house {
  position: absolute; width: 42px; height: 48px;
  z-index: 2; /* amy48-house-above-cups */
}
.sc-wood-house.far { filter: brightness(0.7) saturate(0.5) blur(0.4px); }
.sc-wood-house.mid { filter: brightness(0.85) saturate(0.7); }
.sc-wood-roof {
  position: absolute; top: 0; left: -4px; right: -4px; height: 18px;
  background: var(--roof, #3a2818);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.sc-wood-body {
  position: absolute; top: 16px; left: 2px; right: 2px; bottom: 0;
  background: linear-gradient(180deg, var(--wood, #5a4030), #3a2818);
  border-radius: 0 0 2px 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.sc-wood-win {
  position: absolute; top: 24px; left: 8px; width: 8px; height: 8px;
  background: #ffe8a0;
  box-shadow: 0 0 8px rgba(255,220,140,0.55), 14px 0 0 #ffe8a0, 14px 0 8px rgba(255,220,140,0.4);
  border-radius: 1px;
  opacity: 0.7;
}
.sc-wood-door {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 8px; height: 14px;
  background: #2a1c10; border-radius: 2px 2px 0 0;
}
.sc-warm-lantern {
  position: absolute; width: 10px; height: 14px;
  border-radius: 3px 3px 5px 5px;
  background: radial-gradient(ellipse at 50% 35%, #ffe8b0, #e8a050 70%, #a06030);
  box-shadow: 0 0 10px rgba(255,180,80,0.4), 0 0 18px rgba(255,140,40,0.18);
  animation: scLanternFloat ease-in-out infinite alternate;
}
.sc-warm-lantern::after {
  content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 6px;
  background: rgba(120,80,40,0.45); transform: translateX(-50%);
}
.sc-stall {
  position: absolute; width: 48px; height: 40px;
}
.sc-stall-awning {
  position: absolute; top: 0; left: -4px; right: -4px; height: 12px;
  background: repeating-linear-gradient(90deg, var(--stall-a, #6a4a30) 0 6px, var(--stall-b, #8a6848) 6px 12px);
  border-radius: 2px; clip-path: polygon(0 100%, 5% 0, 95% 0, 100% 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.sc-stall.wood .sc-stall-awning {
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.sc-stall-body {
  position: absolute; top: 12px; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #3a2a1c, #2a1c12);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 0 0 1px rgba(255,220,160,0.06);
}
.sc-stall-sign {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 6px; border-radius: 1px;
  background: var(--stall-a, #6a4a30);
  opacity: 0.75;
}
.sc-stall-sign.warm {
  background: #e8b060;
  box-shadow: 0 0 8px rgba(255,180,80,0.35);
  opacity: 0.7;
}
.sc-stall-lamp {
  position: absolute; top: 8px; right: 2px; width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffe8a0;
  box-shadow: 0 0 8px rgba(255,220,140,0.55);
  opacity: 0.75;
}
.sc-boba-shop {
  position: absolute; bottom: 8%; width: 70px; height: 58px;
  background: linear-gradient(180deg, #6a4a32 0%, #4a3020 100%);
  border-radius: 4px 4px 3px 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.sc-boba-shop.wooden {
  width: 74px; height: 62px;
  z-index: 3;
  background: linear-gradient(180deg, #5a4030 0%, #3a2818 100%);
  border: 1px solid rgba(255,200,120,0.12);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 0 20px rgba(255,180,80,0.04);
}
.sc-boba-shop::before {
  content: ""; position: absolute; top: -14px; left: -6px; right: -6px; height: 18px;
  background: #3a2818; border-radius: 2px 2px 0 0;
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.sc-boba-shop.wooden::before {
  background: linear-gradient(180deg, #4a3020, #2a1c10);
  box-shadow: 0 0 8px rgba(255,180,80,0.1);
}
.sc-boba-shop .sign {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; color: #f0d8a8; letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(255,200,120,0.35);
  white-space: nowrap;
}
.sc-boba-shop.wooden .sign {
  color: #ffe8c0; text-shadow: 0 0 8px rgba(255,200,120,0.4); font-size: 10px;
}
.sc-shop-neon {
  position: absolute; bottom: 8px; left: 6px; right: 6px; height: 3px;
  background: linear-gradient(90deg, #e8b060, #c89040);
  box-shadow: 0 0 8px rgba(255,180,80,0.35); border-radius: 1px; opacity: 0.6;
}
.sc-shop-lamp {
  position: absolute; bottom: 8px; left: 6px; right: 6px; height: 3px;
  background: linear-gradient(90deg, #e8b060, #c89040);
  box-shadow: 0 0 10px rgba(255,180,80,0.4); border-radius: 1px; opacity: 0.7;
}
.sc-shop-win {
  position: absolute; top: 24px; left: 10px; width: 22px; height: 18px;
  background: rgba(255,220,140,0.15);
  border: 1px solid rgba(255,200,120,0.25); border-radius: 2px;
}
.sc-shop-win.warm {
  background: rgba(255,220,140,0.22);
  border-color: rgba(255,200,120,0.3);
  box-shadow: inset 0 0 8px rgba(255,200,100,0.2), 0 0 6px rgba(255,180,80,0.15);
}
.sc-boba-char {
  position: absolute; bottom: 8%; width: 42px; height: 64px;
  animation: scBobWalk 6s ease-in-out infinite;
}
.sc-boba-char .head {
  position: absolute; top: 0; left: 6px; width: 28px; height: 28px;
  border-radius: 50%; background: #ffe0c8;
  box-shadow: inset -2px -2px 0 rgba(220,160,120,0.3);
}
.sc-boba-char .body {
  position: absolute; top: 26px; left: 7px; width: 26px; height: 26px;
  border-radius: 8px; background: #7ec8ff;
}
.sc-boba-char .cup {
  position: absolute; top: 20px; right: -8px; width: 14px; height: 22px;
  border-radius: 2px 2px 3px 3px;
  background: linear-gradient(180deg, rgba(255,200,224,0.72), rgba(232,160,192,0.85));
  border: 1px solid rgba(255,255,255,0.45);
  animation: scSip 2.5s ease-in-out infinite;
  overflow: hidden;
}
.sc-boba-char .cup::before {
  content: ""; position: absolute; top: -6px; left: 3px; width: 2px; height: 8px;
  background: #fff8; border-radius: 1px;
  z-index: 2;
}
/* Layered tapioca pearls visible through translucent cup */
.sc-boba-char .cup::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 9px;
  background:
    radial-gradient(circle at 22% 35%, #2a1508 1.15px, transparent 1.25px),
    radial-gradient(circle at 58% 55%, #3a2010 1.2px, transparent 1.3px),
    radial-gradient(circle at 78% 30%, #1a0c06 1.05px, transparent 1.15px),
    radial-gradient(circle at 40% 75%, #2a180c 1.1px, transparent 1.2px);
  pointer-events: none;
  z-index: 1;
}
.sc-boba-char.pour .cup {
  top: 8px; right: -10px; transform: rotate(40deg);
  animation: scPourCup 3s ease-in-out infinite;
}
.sc-pour-stream {
  position: absolute; top: 18px; right: -4px; width: 3px; height: 14px;
  background: linear-gradient(to bottom, #ffc8e0, transparent);
  border-radius: 1px; opacity: 0.6;
  animation: scPourStream 3s ease-in-out infinite;
}
@keyframes scPourCup {
  0%, 100% { transform: rotate(20deg); }
  50% { transform: rotate(55deg); }
}
@keyframes scPourStream {
  0%, 100% { opacity: 0; height: 4px; }
  40%, 60% { opacity: 0.65; height: 16px; }
}
.sc-pearl {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3a2010; box-shadow: 0 0 4px rgba(60,30,10,0.4);
  animation: scPearlBob ease-in-out infinite;
}
.sc-pearl-float {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a4030, #2a150c 70%, #1a0c06);
  box-shadow:
    inset -2px -2px 3px rgba(0,0,0,0.35),
    inset 2px 2px 3px rgba(255,200,160,0.18),
    0 0 6px rgba(80,40,20,0.25);
  opacity: 0.5;
  animation: scPearlFloat ease-in-out infinite;
}
@keyframes scPearlFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  8%   { opacity: 0.5; }
  25%  { transform: translate3d(var(--dx1, 12px), var(--dy1, -18px), 0) scale(1.05); }
  50%  { transform: translate3d(var(--dx2, -10px), var(--dy2, -8px), 0) scale(0.95); }
  75%  { transform: translate3d(var(--dx3, 16px), var(--dy3, -28px), 0) scale(1.08); }
  92%  { opacity: 0.4; }
  100% { transform: translate3d(var(--dx4, 4px), var(--dy4, -40px), 0) scale(1); opacity: 0; }
}
.sc-cup-big {
  position: absolute; bottom: 10%; left: 12%; width: 36px; height: 48px;
  z-index: 1;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, rgba(255,200,220,0.45), rgba(255,150,190,0.7));
  border: 2px solid rgba(255,255,255,0.35);
  overflow: hidden;
  box-shadow: inset 0 -10px 14px rgba(60,30,20,0.12);
}
.sc-cup-big::before {
  content: ""; position: absolute; top: -2px; left: 50%; width: 4px; height: 18px;
  background: #fff6; transform: translateX(-50%);
  z-index: 2;
}
.sc-cup-liquid {
  position: absolute; left: 2px; right: 2px; bottom: 2px; top: 28%;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}
.sc-shop-cup {
  position: absolute; width: 14px; height: 20px;
  border-radius: 2px 2px 4px 4px;
  border: 1px solid rgba(255,255,255,0.4);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,200,220,0.55), rgba(220,160,180,0.8));
}
.sc-shop-cup::before {
  content: ""; position: absolute; top: -5px; left: 5px; width: 2px; height: 7px;
  background: #fff7; border-radius: 1px;
}
.sc-cup-pearl {
  position: absolute; width: 2.4px; height: 2.4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a3828, #1a0c06 70%);
  box-shadow: inset -0.5px -0.5px 1px rgba(0,0,0,0.45);
  z-index: 1;
  pointer-events: none;
}
.sc-cup-pearl.mini {
  width: 1.6px; height: 1.6px;
}
.sc-cup-pearl.big {
  width: 5px; height: 5px;
  background: radial-gradient(circle at 35% 30%, #6a4030, #2a150c 65%, #1a0c06);
  box-shadow:
    inset -1px -1px 2px rgba(0,0,0,0.4),
    inset 1px 1px 1px rgba(255,200,160,0.15);
}
@keyframes scBobWalk {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(28px, -2px, 0); }
}
@keyframes scSip {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(8deg) translateY(-2px); }
}
@keyframes scPearlBob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -6px, 0); }
}


/* Boba walkers — deer-style facing: outer translates, inner sprite flips on .rev */
.sc-boba-walker {
  position: absolute; width: 48px; height: 46px;
  animation: scDrive linear infinite;
}
.sc-boba-walker.rev { animation-name: scDriveRev; }
.sc-boba-walker.pair { width: 68px; }
.sc-boba-walker-sprite {
  position: absolute; inset: 0;
}
.sc-boba-walker.rev .sc-boba-walker-sprite {
  transform: scaleX(-1);
}
.sc-boba-fig {
  position: absolute; bottom: 0; width: 22px; height: 42px;
}
.sc-boba-fig .sc-p-head { top: 0; left: 3px; width: 14px; height: 14px; }
.sc-boba-fig .sc-p-body { top: 13px; left: 2px; width: 16px; height: 18px; border-radius: 4px; }
.sc-boba-fig .sc-p-leg { height: 11px; }
.sc-boba-cup-mini {
  position: absolute; top: 14px; right: -7px; width: 9px; height: 13px;
  border-radius: 1px 1px 2px 2px;
  border: 1px solid rgba(255,255,255,0.35);
  opacity: 0.9;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,200,220,0.65), rgba(200,140,160,0.85));
}
.sc-boba-cup-mini::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background:
    radial-gradient(circle at 30% 40%, #2a1508 0.85px, transparent 0.95px),
    radial-gradient(circle at 70% 60%, #3a2010 0.9px, transparent 1px),
    radial-gradient(circle at 50% 20%, #1a0c06 0.8px, transparent 0.9px);
  pointer-events: none;
}

/* Reserved boba lanes keep moving drinkers away from display-cup gutters. */
.sc-boba-walker.clear-path {
  animation-name: scDriveClear;
}
.sc-boba-walker.clear-path.rev {
  animation-name: scDriveClearRev;
}
@keyframes scDriveClear {
  from { transform: translate3d(var(--walk-start, 24vw), 0, 0); }
  to { transform: translate3d(var(--walk-end, 76vw), 0, 0); }
}
@keyframes scDriveClearRev {
  from { transform: translate3d(var(--walk-end, 76vw), 0, 0); }
  to { transform: translate3d(var(--walk-start, 24vw), 0, 0); }
}

/* —— forest: layered wildwood —— */
.sc-forest-mtn {
  position: absolute; left: -5%; right: -5%; height: 40%;
  background: linear-gradient(to top, rgba(30, 50, 40, 0.5), rgba(40, 60, 50, 0.2));
  clip-path: polygon(0% 100%, 10% 45%, 22% 65%, 35% 30%, 50% 55%, 62% 22%, 78% 48%, 90% 35%, 100% 50%, 100% 100%);
}
.sc-forest-mtn.layer0 { clip-path: polygon(0 100%, 15% 35%, 30% 55%, 48% 20%, 65% 45%, 80% 25%, 100% 40%, 100% 100%); }
.sc-forest-mtn.layer1 { filter: brightness(1.15); }
.sc-forest-mtn.layer2 { filter: brightness(0.85); }
.sc-forest-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: linear-gradient(to top, rgba(18, 36, 22, 0.75), transparent);
}
.sc-tree {
  position: absolute; bottom: 8%;
  width: 40px; height: 90px;
  filter: drop-shadow(0 0 8px rgba(40, 90, 50, 0.25));
}
.sc-tree.far { filter: brightness(0.55) saturate(0.4) blur(0.55px); }
.sc-tree.farmid { filter: brightness(0.68) saturate(0.55) blur(0.35px); }
.sc-tree.mid { filter: brightness(0.8) saturate(0.7); }
.sc-tree.near { filter: brightness(0.95); }
.sc-tree-trunk {
  position: absolute; bottom: 0; left: 50%; width: 6px; height: 28%;
  background: var(--trunk, #3a2818);
  transform: translateX(-50%);
  border-radius: 1px;
}
.sc-tree-canopy {
  position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 55px solid var(--leaf, #1a3a24);
}
.sc-tree-mid {
  position: absolute; bottom: 45%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 36px solid var(--leaf, #244a30);
  filter: brightness(1.1);
}
/* pine / fir — classic layered triangles */
.sc-tree.pine .sc-tree-canopy,
.sc-tree.fir .sc-tree-canopy {
  border-left-width: 16px; border-right-width: 16px; border-bottom-width: 58px;
}
.sc-tree.fir { height: 105px; }
.sc-tree.fir .sc-tree-canopy {
  border-left-width: 14px; border-right-width: 14px; border-bottom-width: 70px;
}
/* oak — rounded canopy */
.sc-tree.oak .sc-tree-canopy {
  width: 36px; height: 32px; border: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--leaf, #2a5038), #1a3020);
  bottom: 24%;
}
.sc-tree.oak .sc-tree-mid { display: none; }
/* birch — thin trunk + modest canopy */
.sc-tree.birch .sc-tree-trunk {
  width: 4px;
  background: repeating-linear-gradient(180deg, #d8d0c0 0 4px, #3a3028 4px 5px);
}
.sc-tree.birch .sc-tree-canopy {
  border-left-width: 12px; border-right-width: 12px; border-bottom-width: 40px;
  border-bottom-color: var(--leaf, #3a4830);
}
.sc-tree.birch .sc-tree-mid { display: none; }
/* bushy — wide rounded */
.sc-tree.bushy {
  height: 55px; width: 44px;
}
.sc-tree.bushy .sc-tree-canopy {
  width: 40px; height: 28px; border: none; border-radius: 50%;
  background: var(--leaf, #2a5038);
  bottom: 10%;
}
.sc-tree.bushy .sc-tree-trunk { height: 18%; }
.sc-tree.bushy .sc-tree-mid { display: none; }
/* dead / bare */
.sc-tree.dead .sc-tree-canopy {
  border-left-width: 8px; border-right-width: 8px; border-bottom-width: 36px;
  border-bottom-color: #4a4030;
  opacity: 0.55;
}
.sc-tree.dead .sc-tree-mid {
  border-left-width: 5px; border-right-width: 5px; border-bottom-width: 22px;
  border-bottom-color: #5a4838;
  opacity: 0.5;
}
.sc-tree.dead .sc-tree-trunk { background: #4a3828; }
.sc-leaf {
  position: absolute;
  width: 10px; height: 7px;
  border-radius: 0 70% 0 70%;
  background: #6aab5a;
  box-shadow: 0 0 4px rgba(100, 180, 80, 0.35);
  animation: scLeafFall linear infinite;
  opacity: 0.75;
}
.sc-leaf.amber { background: #c4a050; }
.sc-leaf.brown { background: #8a6a3a; }
.sc-firefly {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #dfff9a;
  box-shadow: 0 0 8px #b8ff60, 0 0 16px rgba(180, 255, 80, 0.5);
  animation: scFireflyGlow ease-in-out infinite;
}
.sc-hiker {
  position: absolute; width: 28px; height: 46px;
  animation: scDrive linear infinite;
}
.sc-hiker.rev { animation-name: scDriveRev; }
.sc-hiker-sprite {
  position: absolute; inset: 0;
}
.sc-hiker.rev .sc-hiker-sprite {
  transform: scaleX(-1);
}
.sc-hiker .sc-p-head { top: 0; left: 6px; width: 14px; height: 14px; }
.sc-p-body.hike {
  top: 13px; left: 4px; width: 16px; height: 19px;
  background: #4a6a58; border-radius: 4px;
}
.sc-hiker-pack {
  position: absolute; top: 14px; left: 0; width: 9px; height: 14px;
  background: #3a3020; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.sc-hiker-pole {
  position: absolute; top: 10px; right: -3px; width: 3px; height: 32px;
  background: #8a7050; border-radius: 1px;
  transform: rotate(8deg);
  transform-origin: top center;
}
.sc-hiker .sc-p-leg { bottom: 0; height: 12px; }
.sc-deer, .sc-moose {
  position: absolute; width: 48px; height: 38px;
  animation: scDrive linear infinite;
}
/* Outer translates; inner sprite flips so head/legs match travel direction */
.sc-deer.rev { animation-name: scDriveRev; }
.sc-deer-sprite, .sc-moose-sprite {
  position: absolute; inset: 0;
}
.sc-deer.rev .sc-deer-sprite,
.sc-moose.rev .sc-moose-sprite {
  transform: scaleX(-1);
}
.sc-deer-body, .sc-moose-body {
  position: absolute; bottom: 8px; left: 5px; width: 32px; height: 16px;
  background: #8a6040; border-radius: 8px;
}
.sc-deer-head, .sc-moose-head {
  position: absolute; bottom: 16px; left: 30px; width: 13px; height: 11px;
  background: #8a6040; border-radius: 5px;
}
.sc-deer-antler, .sc-moose-antler {
  position: absolute; bottom: 26px; width: 2px; height: 12px; background: #6a4030;
}
.sc-deer-antler.l { left: 32px; transform: rotate(-20deg); }
.sc-deer-antler.r { left: 38px; transform: rotate(20deg); }
.sc-deer-antler.l::before, .sc-deer-antler.r::before {
  content: ""; position: absolute; top: 2px; left: 0; width: 6px; height: 2px; background: #6a4030;
}
.sc-deer-leg {
  position: absolute; bottom: 0; left: 10px; width: 4px; height: 11px; background: #6a4030;
  box-shadow: 16px 0 0 #6a4030;
}
.sc-moose { width: 48px; height: 36px; }
.sc-moose-body { width: 34px; height: 16px; background: #5a4030; }
.sc-moose-head { left: 32px; width: 12px; height: 10px; background: #5a4030; }
.sc-moose-antler { height: 14px; width: 3px; background: #4a3020; }
.sc-moose-antler.l { left: 34px; }
.sc-moose-antler.r { left: 40px; }
.sc-moose-antler.l::before, .sc-moose-antler.r::before {
  content: ""; position: absolute; top: 0; width: 10px; height: 3px; background: #4a3020;
  box-shadow: 0 5px 0 #4a3020;
}
.sc-rabbit {
  position: absolute; width: 14px; height: 14px;
  animation: scRabbitHop ease-in-out infinite;
}
.sc-rab-body {
  position: absolute; bottom: 0; left: 2px; width: 12px; height: 9px;
  background: #d8d0c0; border-radius: 50%;
}
.sc-rab-ear {
  position: absolute; top: -6px; width: 3px; height: 10px;
  background: #d8d0c0; border-radius: 2px;
}
.sc-rab-ear.l { left: 4px; transform: rotate(-8deg); }
.sc-rab-ear.r { left: 9px; transform: rotate(8deg); }
@keyframes scRabbitHop {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(8px, -10px, 0); }
  50% { transform: translate3d(16px, 0, 0); }
  80% { transform: translate3d(24px, -8px, 0); }
}
@keyframes scLeafFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.8; }
  100% { transform: translate3d(var(--lx, 40px), 110vh, 0) rotate(var(--lr, 360deg)); opacity: 0.15; }
}
@keyframes scFireflyGlow {
  0%, 100% { opacity: 0.15; transform: translate3d(0, 0, 0) scale(0.7); }
  40% { opacity: 1; transform: translate3d(var(--fx, 8px), var(--fy, -10px), 0) scale(1.15); }
  70% { opacity: 0.45; transform: translate3d(calc(var(--fx, 8px) * -0.6), calc(var(--fy, -10px) * 0.4), 0) scale(0.9); }
}


/* —— Digit-complete celebration (scene2) —— */
.digit-toast {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 40;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #0a0a12;
  background: var(--digit-toast-bg, #00ff66);
  box-shadow:
    0 0 18px var(--digit-toast-glow, rgba(0,255,102,0.65)),
    0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.digit-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.digit-toast.hidden { display: none; }

.digit-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  overflow: hidden;
}
.digit-burst span {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0.95;
  animation: digitBurstFly 1.1s ease-out forwards;
}
@keyframes digitBurstFly {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) rotate(540deg) scale(0.2); opacity: 0; }
}

/* amy99: the generic digit-complete highlight - a soft glow in place, no movement */
.cell.digit-complete-pulse {
  animation: digitCompletePulse 0.75s ease-in-out 2;
  z-index: 2;
}
@keyframes digitCompletePulse {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 0 transparent; }
  45% { filter: brightness(1.25); box-shadow: inset 0 0 0 2px var(--hn-glow, rgba(0,255,102,0.85)), 0 0 10px var(--hn-glow, rgba(0,255,102,0.55)); }
}


/* —— Theme full-screen digit-complete overlays (amy19) —— */
#theme-celebrate,
.theme-celebrate {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}
.theme-celebrate > * {
  pointer-events: none;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Reduced motion: brief fade only */
.theme-celebrate.tc-reduced {
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.18), transparent 65%);
  animation: tcFadeBrief 0.5s ease forwards;
}
@keyframes tcFadeBrief {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-celebrate:not(.tc-reduced) > * {
    animation: none !important;
  }
}

/* —— boba: tapioca pearls pour & bounce —— */
.tc-boba-cup {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 56px;
  height: 70px;
  margin-left: -28px;
  border-radius: 6px 6px 16px 16px;
  background: linear-gradient(180deg, rgba(255,210,230,0.55), rgba(255,140,180,0.85));
  border: 2px solid rgba(255,255,255,0.4);
  opacity: 0;
  animation: tcCupTip 0.7s ease-out forwards;
}
.tc-boba-cup::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 5px;
  height: 16px;
  background: rgba(255,255,255,0.45);
  transform: translateX(-50%);
  border-radius: 1px;
}
@keyframes tcCupTip {
  0% { opacity: 0; transform: rotate(-18deg) translateY(-20px); }
  30% { opacity: 1; transform: rotate(22deg) translateY(4px); }
  70% { opacity: 1; transform: rotate(-8deg) translateY(0); }
  100% { opacity: 0; transform: rotate(0deg) translateY(-12px); }
}
.tc-pearl {
  position: absolute;
  top: -4%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6a4030, #2a150c 70%, #1a0c06);
  box-shadow:
    inset -2px -2px 3px rgba(0,0,0,0.35),
    inset 2px 2px 3px rgba(255,200,160,0.18),
    0 0 6px rgba(80,40,20,0.25);
  animation: tcPearlSpill 2.6s ease-in forwards;
}
@keyframes tcPearlSpill {
  0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  8% { opacity: 1; }
  55% { transform: translate3d(calc(var(--tc-x, 0) * 0.45), 72vh, 0) scale(1.05); opacity: 1; }
  72% { transform: translate3d(calc(var(--tc-x, 0) * 0.7), calc(72vh - var(--tc-bounce, 22vh)), 0) scale(1); }
  88% { transform: translate3d(var(--tc-x, 0), 88vh, 0) scale(0.95); opacity: 0.85; }
  100% { transform: translate3d(var(--tc-x, 0), 110vh, 0) scale(0.7); opacity: 0; }
}

/* —— neon: lightning + shockwave —— */
.tc-neon-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,240,255,0.35), rgba(255,43,214,0.12) 45%, transparent 70%);
  opacity: 0;
  animation: tcNeonFlash 1.1s ease-out forwards;
}
@keyframes tcNeonFlash {
  0% { opacity: 0; }
  8% { opacity: 1; }
  18% { opacity: 0.15; }
  32% { opacity: 0.85; }
  50% { opacity: 0.2; }
  70% { opacity: 0.55; }
  100% { opacity: 0; }
}
.tc-neon-shock {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 3px solid #00f0ff;
  box-shadow: 0 0 22px #ff2bd6, 0 0 40px #00f0ff;
  opacity: 0;
  animation: tcShockwave 1.4s ease-out 0.35s forwards;
}
@keyframes tcShockwave {
  0% { transform: scale(0.2); opacity: 0.95; }
  70% { opacity: 0.45; }
  100% { transform: scale(42); opacity: 0; }
}
.tc-bolt {
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, #fff, var(--tc-bolt-c, #00f0ff) 40%, transparent);
  box-shadow: 0 0 10px var(--tc-bolt-c, #00f0ff), 0 0 22px var(--tc-bolt-c, #00f0ff);
  clip-path: polygon(40% 0, 70% 0, 55% 38%, 85% 38%, 20% 100%, 40% 48%, 15% 48%);
  opacity: 0;
  transform: rotate(var(--tc-rot, 0deg));
  animation: tcBoltCrack 0.55s ease-out forwards;
}
@keyframes tcBoltCrack {
  0% { opacity: 0; transform: rotate(var(--tc-rot, 0deg)) scaleY(0.2); }
  20% { opacity: 1; transform: rotate(var(--tc-rot, 0deg)) scaleY(1); }
  55% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--tc-rot, 0deg)) scaleY(1.05); }
}
.tc-neon-spark {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
  opacity: 0;
  animation: tcNeonSpark 1.3s ease-out forwards;
}
@keyframes tcNeonSpark {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.15); opacity: 0; }
}

/* —— forest: tea steam / mist —— */
.tc-forest-mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(210,230,190,0.28), transparent 55%),
    radial-gradient(ellipse at 70% 85%, rgba(180,210,160,0.22), transparent 50%),
    linear-gradient(to top, rgba(200,220,180,0.22), transparent 70%);
  opacity: 0;
  animation: tcMistCover 3.1s ease-in-out forwards;
}
@keyframes tcMistCover {
  0% { opacity: 0; transform: translate3d(0, 12%, 0); }
  25% { opacity: 0.95; transform: translate3d(0, 0, 0); }
  70% { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(0, -8%, 0); }
}
.tc-steam {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(210,230,190,0.38), transparent 70%);
  filter: blur(8px);
  opacity: 0;
  animation: tcSteamRise 2.8s ease-out forwards;
}
@keyframes tcSteamRise {
  0% { transform: translate3d(0, 20px, 0) scale(0.6); opacity: 0; }
  22% { opacity: 0.7; }
  70% { opacity: 0.45; }
  100% { transform: translate3d(var(--tc-drift, 0), -70vh, 0) scale(1.6); opacity: 0; }
}

/* —— snowpark: avalanche —— */
.tc-snow-bank {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -6%;
  height: 28%;
  border-radius: 50% 50% 0 0 / 40px 40px 0 0;
  background: linear-gradient(to top, rgba(240,246,255,0.72), rgba(210,226,255,0.18));
  opacity: 0;
  animation: tcSnowSettle 3.1s ease-out forwards;
}
@keyframes tcSnowSettle {
  0% { opacity: 0; transform: translate3d(0, 40%, 0); }
  40% { opacity: 0.85; transform: translate3d(0, 0, 0); }
  80% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(0, 8%, 0); }
}
.tc-snow {
  position: absolute;
  top: -8%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(200,230,255,0.85);
  animation: tcAvalanche 2.6s ease-in forwards;
}
@keyframes tcAvalanche {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 1; }
  70% { transform: translate3d(calc(var(--tc-sx, 0) * 0.6), 78vh, 0) scale(1); opacity: 0.95; }
  100% { transform: translate3d(var(--tc-sx, 0), 108vh, 0) scale(0.7); opacity: 0; }
}

/* —— sakura: petal surge / explode —— */
.tc-petal {
  position: absolute;
  top: 42%;
  left: 50%;
  border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #ffd6e8, #ff8ab8 70%, #e85a9a);
  box-shadow: 0 0 8px rgba(255,140,180,0.5);
  opacity: 0;
  animation: tcPetalBurst 2.6s ease-out forwards;
}
@keyframes tcPetalBurst {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.85; }
  100% { transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0.7) rotate(var(--pr, 360deg)); opacity: 0; }
}

/* —— underwater: frantic swimmers —— */
.tc-critter {
  position: absolute;
  left: -18%;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(80,200,255,0.45));
  opacity: 0;
  animation: tcSwimAcross 2.8s ease-in-out forwards;
}
.tc-critter.rev {
  left: auto;
  right: -18%;
  animation-name: tcSwimAcrossRev;
}
@keyframes tcSwimAcross {
  0% { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate3d(70vw, -8vh, 0) scale(1.05); opacity: 1; }
  100% { transform: translate3d(130vw, 6vh, 0) scale(0.9); opacity: 0; }
}
@keyframes tcSwimAcrossRev {
  0% { transform: translate3d(0, 0, 0) scaleX(-1) scale(0.85); opacity: 0; }
  12% { opacity: 1; }
  50% { transform: translate3d(-70vw, 8vh, 0) scaleX(-1) scale(1.05); opacity: 1; }
  100% { transform: translate3d(-130vw, -4vh, 0) scaleX(-1) scale(0.9); opacity: 0; }
}
.tc-bubble {
  position: absolute;
  bottom: -4%;
  border-radius: 50%;
  border: 1px solid rgba(180,230,255,0.55);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(120,200,255,0.08));
  animation: tcBubbleUp 2.6s ease-out forwards;
  opacity: 0;
}
@keyframes tcBubbleUp {
  0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: translate3d(12px, -110vh, 0) scale(1.1); opacity: 0; }
}

/* RTL tweaks */
[dir="rtl"] .app { direction: rtl; }
[dir="rtl"] .toolbar-row { flex-direction: row-reverse; }
[dir="rtl"] .mode-row { flex-direction: row-reverse; }
[dir="rtl"] .music-transport { flex-direction: row-reverse; }
[dir="rtl"] .volume-row { flex-direction: row-reverse; }
[dir="rtl"] .prefs-row { flex-direction: row-reverse; }
/* —— amy57: desktop-only Taiwanese night market (Boba Village) —— */
.sc-market { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* amy58 desktop only: existing street figures/stalls/cups walk in front of
   the market rows (pure stacking order; positions/sizes unchanged). */
@media (min-width: 601px) {
  body[data-theme="boba"] .theme-scene > .sc-stall,
  body[data-theme="boba"] .theme-scene > .sc-boba-char,
  body[data-theme="boba"] .theme-scene > .sc-boba-walker,
  body[data-theme="boba"] .theme-scene > .sc-cup-big { z-index: 4; }
}
@media (max-width: 600px) { .sc-market { display: none !important; } }
.mk-row { position: absolute; inset: 0; }
.mk-row.r0 { filter: saturate(0.7) brightness(0.74) blur(0.35px); opacity: 0.86; }
.mk-row.r1 { filter: saturate(0.82) brightness(0.84) blur(0.15px); opacity: 0.94; }
.mk-row.r2 { filter: saturate(0.94) brightness(0.94); }
/* perf: tiny far-row figures stay still; steam only on the nearest row */
.mk-row.r0 .sc-char, .mk-row.r0 .sc-char *, .mk-row.r1 .sc-char, .mk-row.r1 .sc-char *,
.mk-vendor .sc-char, .mk-vendor .sc-char * { animation: none !important; }
.mk-row.r0 .mk-steam { display: none; }
.mk-stall { position: absolute; }
.mk-back {
  position: absolute; left: 4%; right: 4%; top: 26%; bottom: 30%;
  background:
    linear-gradient(90deg, #3a2618 0 5%, transparent 5% 95%, #3a2618 95%),
    radial-gradient(ellipse 70% 90% at 50% 20%, rgba(255, 214, 150, 0.85), rgba(150, 90, 50, 0.9) 70%, rgba(60, 36, 24, 0.95));
}
.mk-counter {
  position: absolute; left: 2%; right: 2%; bottom: 0; height: 38%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0 7%, transparent 7%),
    linear-gradient(180deg, transparent 0 18%, var(--c1) 18% 34%, transparent 34%),
    linear-gradient(180deg, #8a5a36, #5a3a22);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  border-radius: 1px;
}
.mk-canopy {
  position: absolute; left: -7%; width: 114%; top: 0; height: 28%;
  background: linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 70%, #000));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.35);
  border-radius: 2px 2px 0 0;
}
.mk-canopy.striped {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(90deg, var(--c1) 0 12.5%, var(--c2) 12.5% 25%);
}
.mk-canopy.scallop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 42%;
  background: radial-gradient(circle at 50% 0, var(--c2) 0 58%, transparent 62%) 0 0 / 12.5% 100% repeat-x;
}
.mk-canopy.striped.scallop::after {
  background: radial-gradient(circle at 50% 0, var(--c1) 0 58%, transparent 62%) 0 0 / 12.5% 100% repeat-x;
}
.mk-canopy.tent {
  top: -12%; height: 40%;
  clip-path: polygon(50% 0, 100% 72%, 100% 100%, 0 100%, 0 72%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, var(--c1) 0 10%, var(--c2) 10% 20%);
}
.mk-lights {
  position: absolute; left: -4%; right: -4%; top: 29%; height: 7%;
  background: radial-gradient(circle, #fff3b0 0 28%, rgba(255, 220, 120, 0.5) 34%, transparent 52%) 0 0 / 9% 100% repeat-x;
}
.mk-lanterns::before, .mk-lanterns::after {
  content: ""; position: absolute; top: 27%; width: 9%; height: 15%;
  border-radius: 45%;
  background: radial-gradient(circle at 40% 35%, #ffb070, #e0302a 60%, #8a1a14);
  box-shadow: 0 0 6px rgba(255, 90, 50, 0.8);
}
.mk-lanterns.gold::before, .mk-lanterns.gold::after {
  background: radial-gradient(circle at 40% 35%, #fff0a0, #f0b030 60%, #9a6010);
  box-shadow: 0 0 6px rgba(255, 200, 80, 0.8);
}
.mk-lanterns::before { left: -3%; }
.mk-lanterns::after { right: -3%; }
.mk-sign {
  position: absolute; left: 12%; right: 12%; bottom: 100%; margin-bottom: -2px;
  height: auto; padding: 1px 0; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Serif CJK TC", sans-serif;
  font-weight: 700; line-height: 1.1;
  color: #fff; background: rgba(20, 12, 10, 0.92);
  border: 1px solid var(--glow); border-radius: 2px;
  text-shadow: 0 0 3px var(--glow), 0 0 6px var(--glow);
  box-shadow: 0 0 6px var(--glow), inset 0 0 4px rgba(255, 255, 255, 0.15);
}
.mk-stall.r0 .mk-sign { font-size: 5.5px; }
.mk-stall.r1 .mk-sign { font-size: 6.5px; }
.mk-stall.r2 .mk-sign { font-size: 8px; }
.mk-vendor { position: absolute; left: 34%; bottom: 24%; width: 34px; height: 58px; }
.mk-vendor .sc-char { left: 0; bottom: 0; z-index: auto; }
.mk-vendor-s {
  position: absolute; left: 40%; bottom: 30%; width: 22%; height: 34%;
  background:
    radial-gradient(circle at 50% 22%, #e0b890 0 20%, transparent 22%),
    linear-gradient(180deg, transparent 0 40%, var(--vt, #c06060) 40%);
  border-radius: 40% 40% 0 0;
}
/* goods on the counter */
.mk-goods { position: absolute; left: 10%; right: 10%; bottom: 36%; height: 16%; }
.mk-goods.t-boba {
  background:
    repeating-linear-gradient(90deg, transparent 0 6%, rgba(240, 214, 180, 0.95) 6% 15%, transparent 15% 22%);
  -webkit-mask-image: linear-gradient(to top, #000 0 85%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0 85%, transparent 85%);
  box-shadow: inset 0 -3px 0 rgba(40, 20, 10, 0.75);
}
.mk-goods.t-tofu { background: repeating-linear-gradient(90deg, #e0a040 0 11%, #a86a20 11% 13%, transparent 13% 18%); height: 11%; }
.mk-goods.t-xlb {
  left: 20%; right: 20%; height: 22%;
  background:
    repeating-linear-gradient(180deg, #d8b070 0 28%, #8a6232 28% 36%),
    #c8a060;
  border-radius: 30% 30% 4px 4px;
}
.mk-goods.t-squid {
  height: 30%;
  background: repeating-linear-gradient(90deg, transparent 0 8%, #d0703a 8% 17%, transparent 17% 22%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, transparent 100%);
  border-radius: 40% 40% 0 0;
}
.mk-goods.t-chicken {
  background:
    radial-gradient(ellipse 22% 60% at 22% 60%, #f0b040 0 70%, transparent 74%),
    radial-gradient(ellipse 22% 60% at 50% 55%, #d89030 0 70%, transparent 74%),
    radial-gradient(ellipse 22% 60% at 78% 60%, #e8a838 0 70%, transparent 74%);
}
.mk-goods.t-ice {
  height: 20%;
  background:
    radial-gradient(circle at 20% 100%, #ffd84a 0 22%, transparent 24%),
    radial-gradient(circle at 50% 100%, #ff8ab8 0 24%, transparent 26%),
    radial-gradient(circle at 80% 100%, #9ae6ff 0 22%, transparent 24%);
}
.mk-goods.t-sausage { background: repeating-linear-gradient(90deg, #c03a2a 0 12%, #7a1a12 12% 14%, transparent 14% 19%); height: 9%; border-radius: 3px; }
.mk-goods.t-oyster {
  background:
    radial-gradient(ellipse 30% 70% at 28% 60%, #f0d070 0 55%, #c07a30 60%, transparent 66%),
    radial-gradient(ellipse 30% 70% at 72% 60%, #f0d070 0 55%, #c07a30 60%, transparent 66%);
}
.mk-goods.t-tanghulu {
  height: 30%;
  background:
    radial-gradient(circle, #ff3a4a 0 38%, transparent 42%) 0 0 / 16% 33%,
    repeating-linear-gradient(90deg, transparent 0 7%, #d8c090 7% 9%, transparent 9% 16%);
}
.mk-goods.t-pepper {
  background: radial-gradient(circle at 50% 70%, #e8c070 0 40%, #a87030 46%, transparent 52%) 0 0 / 25% 100% repeat-x;
}
.mk-goods.wall { left: 6%; right: 6%; top: 28%; bottom: auto; height: 32%; }
.mk-goods.wall.t-game {
  background:
    radial-gradient(circle, #ff4a6a 0 30%, transparent 36%) 0 0 / 20% 34%,
    radial-gradient(circle, #ffd84a 0 30%, transparent 36%) 10% 50% / 20% 34%,
    radial-gradient(circle, #4ad8ff 0 30%, transparent 36%) 5% 100% / 20% 34%,
    rgba(255, 240, 220, 0.25);
}
.mk-goods.wall.t-claw {
  background:
    linear-gradient(90deg, rgba(200, 240, 255, 0.35) 0 48%, transparent 48% 52%, rgba(200, 240, 255, 0.35) 52%),
    radial-gradient(circle, #ff9ac8 0 32%, transparent 36%) 0 100% / 25% 45%,
    radial-gradient(circle, #ffe08a 0 32%, transparent 36%) 12% 100% / 25% 45%,
    rgba(120, 60, 160, 0.6);
  box-shadow: 0 0 6px rgba(255, 120, 220, 0.6);
}
.mk-steam {
  position: absolute; left: 30%; width: 40%; bottom: 52%; height: 44%;
  animation: mkSteam 3.6s ease-out infinite;
  background:
    radial-gradient(ellipse 30% 40% at 35% 70%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 28% 36% at 65% 40%, rgba(255, 255, 255, 0.35), transparent 70%);
  filter: blur(1.5px);
}
@keyframes mkSteam {
  0% { transform: translate3d(0, 20%, 0) scale(0.8); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate3d(6%, -40%, 0) scale(1.15); opacity: 0; }
}
/* people */
.mk-person { position: absolute; width: 34px; height: 58px; }
.mk-flip { position: absolute; inset: 0; }
.mk-person .sc-char { left: 0; bottom: 0; z-index: auto; }
.mk-walk { animation: mkStroll linear infinite alternate; }
.mk-walk .mk-flip { animation: mkFlip linear infinite; }
@keyframes mkStroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--d, 60px), 0, 0); } }
@keyframes mkFlip {
  0%, 49.9% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}
/* front row canopies peeking up from the bottom edge */
.mk-front {
  position: absolute; height: 60px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.35) 60%),
    repeating-linear-gradient(90deg, var(--c1) 0 10%, var(--c2) 10% 20%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5), 0 -4px 14px color-mix(in srgb, var(--glow) 30%, transparent);
}
.mk-front.scallop {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.35) 60%),
    var(--c1);
}
.mk-front::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 6px;
  background: radial-gradient(circle, #fff3b0 0 30%, rgba(255, 220, 120, 0.5) 36%, transparent 55%) 0 0 / 14px 100% repeat-x;
  filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.9));
}
.mk-fsign {
  position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  padding: 0 5px; font-size: 10px; font-weight: 700; line-height: 13px; white-space: nowrap;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Serif CJK TC", sans-serif;
  color: #fff; background: rgba(20, 12, 10, 0.9);
  border: 1px solid var(--glow); border-radius: 2px;
  text-shadow: 0 0 3px var(--glow), 0 0 6px var(--glow);
  box-shadow: 0 0 6px var(--glow);
}
/* amy61: fireworks canvases (sky: behind all skyline buildings; t101: the
   Taipei 101 show, just in front of the tower, behind nearer blocks). */
.sc-fw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* amy63: Forest aurora canvas — first in the scene, behind everything */
.sc-aurora { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

/* —— amy64: Theme: Beach (Surfers Paradise, Gold Coast — daytime) —— */
body[data-theme="beach"] {
  --bg: #0b2c3c;
  --bg-elevated: #0f3a4e;
  --cyan: #2ad4d0;
  --magenta: #ff7a5c;
  --purple: #1a8fa8;
  --violet: #ffd27a;
  --pink: #ffb38a;
  --text: #f4fbff;
  --text-dim: #a8d4dc;
  --cell-bg: rgba(8, 52, 70, 0.88);
  --cell-given: rgba(12, 72, 92, 0.93);
  --glow-cyan: 0 0 12px rgba(42, 212, 208, 0.5), 0 0 24px rgba(42, 212, 208, 0.22);
  --glow-magenta: 0 0 10px rgba(255, 122, 92, 0.5), 0 0 18px rgba(255, 122, 92, 0.2);
  --glow-purple: 0 0 10px rgba(26, 143, 168, 0.45);
  --accent: #2ad4d0;
  --accent2: #ffc861;
  --board-border: #ffd27a;
  --board-bg: rgba(6, 40, 56, 0.92);
  --font-display: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}
body[data-theme="beach"] .bg-glow {
  background:
    radial-gradient(ellipse 60% 40% at 88% 6%, rgba(255, 246, 210, 0.35), transparent 60%),
    linear-gradient(180deg, #2a7fd4 0%, #8fc6ef 60%, #f0d495 100%);
}
body[data-theme="beach"] .title {
  background: linear-gradient(90deg, #2ad4d0, #ffd27a, #ff7a5c);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(6, 40, 56, 0.55));
}
/* bright daytime sky: keep the HUD text crisp (colour/shadow only — no layout change) */
body[data-theme="beach"] .stats,
body[data-theme="beach"] .volume-row {
  background: rgba(6, 40, 56, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="beach"] .stat-label,
body[data-theme="beach"] .volume-label { color: #d8f4f6; }
body[data-theme="beach"] .stat-value,
body[data-theme="beach"] .volume-value { color: #7ff0ea; text-shadow: 0 1px 2px rgba(4, 30, 44, 0.8); }
body[data-theme="beach"] .track-label { color: #ffd27a; text-shadow: 0 1px 3px rgba(4, 30, 44, 0.95), 0 0 8px rgba(4, 30, 44, 0.6); }
body[data-theme="beach"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(4, 30, 44, 0.95), 0 0 6px rgba(4, 30, 44, 0.7); }
.bc-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bc-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.bc-scene > canvas.bc-sea { height: auto; }
.bc-clouds { position: absolute; inset: 0; pointer-events: none; }
.bc-cloud {
  position: absolute;
  will-change: transform;
  animation: bcCloud 240s linear infinite;
}
@keyframes bcCloud {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--travel, 120vw), 0, 0); }
}
.bc-people { position: absolute; inset: 0; pointer-events: none; }
/* person anchor = feet centre */
.bc-p { position: absolute; width: 0; height: 0; z-index: 3; }
.bc-p > .sc-char { left: -17px; bottom: 0; z-index: auto; }
/* beachwear: bare arms + legs, swim bottoms, bare feet */
.sc-char.bc-wear .sc-char-arm { background: linear-gradient(180deg, var(--skin, #e6c09a), var(--skin, #e6c09a)); }
.sc-char.bc-wear.sleeves .sc-char-arm { background: linear-gradient(180deg, var(--top, #6a8aaa) 0 45%, var(--skin, #e6c09a) 45%); }
.sc-char.bc-wear .sc-char-leg { background: linear-gradient(180deg, var(--bottom, #3a4038) 0 26%, var(--skin, #e6c09a) 26%); }
.sc-char.bc-wear.sleeves.guard .sc-char-leg { background: linear-gradient(180deg, var(--bottom) 0 40%, var(--skin, #e6c09a) 40%); }
.sc-char.bc-wear .sc-char-leg::after { background: var(--skin, #e6c09a); filter: brightness(0.9); }
.sc-char.bc-wear.outfit-skirt .sc-char-leg { background: var(--skin, #e6c09a); }
.sc-char.bc-wear.shirtless .sc-char-top {
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255,255,255,0.18), transparent 70%),
    linear-gradient(90deg, transparent 47%, rgba(0,0,0,0.08) 50%, transparent 53%),
    var(--skin, #e6c09a);
}
.sc-char.bc-wear.bikini .sc-char-top {
  background: linear-gradient(180deg, var(--skin, #e6c09a) 0 14%, var(--top) 14% 52%, var(--skin, #e6c09a) 52%);
}
.sc-char.bc-wear.bikini .sc-char-bottom { height: 30%; }
.sc-char.bc-wear.guard .sc-char-hair::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 6px;
  background: #e3262c; border-radius: 6px 6px 1px 1px;
}
/* sitting on a towel (cross-legged), lying sunbathers */
.bc-p.bc-sit > .sc-char { bottom: -6px; }
.bc-p.bc-lie > .sc-char {
  transform: translate(0, 8px) rotate(-90deg) scale(var(--char-scale));
  transform-origin: 50% 100%;
}
.bc-p.bc-lie .sc-char-shadow { display: none; }
.bc-p.bc-kid .snow-ball-build { background: radial-gradient(circle at 35% 35%, #f0d495, #c79a52) !important; }
/* walkers pace the sand and turn round at each end */
.bc-p.bc-walk { animation: bcWalkX 30s ease-in-out infinite alternate; }
.bc-p.bc-walk > .sc-char { animation: bcFlip 60s steps(1, end) infinite; }
@keyframes bcWalkX { from { transform: translateX(0); } to { transform: translateX(var(--dx, 100px)); } }
@keyframes bcFlip { 0% { scale: 1 1; } 50% { scale: -1 1; } 100% { scale: 1 1; } }
.bc-carry {
  position: absolute; left: -10px; top: 24px; width: 44px; height: 7px;
  border-radius: 50%; background: linear-gradient(180deg, #fff 0 30%, #2ad4d0 30%);
  transform: rotate(-8deg); z-index: 7; box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
/* swimmers: head and shoulders above water, stroking */
.bc-swim {
  position: absolute; width: 0; height: 0; z-index: 3;
  animation: bcBob 2.6s ease-in-out infinite;
}
.bc-swim-clip {
  position: absolute; left: calc(-17px * var(--s)); bottom: 0;
  width: calc(34px * var(--s)); height: calc(26px * var(--s)); overflow: hidden;
}
.bc-swim-clip > .sc-char { left: calc(-17px + 17px * var(--s)); bottom: calc(-32px * var(--s)); }
.sc-char.bc-swimmer .sc-char-arm.l { animation: bcStroke 1.3s linear infinite; }
.sc-char.bc-swimmer .sc-char-arm.r { animation: bcStroke 1.3s linear infinite; animation-delay: -0.65s; }
.bc-swim-ring {
  position: absolute; left: calc(-20px * var(--s)); top: calc(-3px * var(--s));
  width: calc(40px * var(--s)); height: calc(8px * var(--s));
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.75);
  background: radial-gradient(ellipse, rgba(255,255,255,0.25), transparent 70%);
  animation: bcRing 2.6s ease-in-out infinite;
}
@keyframes bcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes bcStroke { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes bcRing { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 0.55; } }
/* surfers riding along the break */
.bc-surf {
  position: absolute; width: 0; height: 0; z-index: 3;
  animation: bcRide 10s ease-in-out infinite;
}
@keyframes bcRide {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(calc(var(--dx, 100px) * 0.5), -6px); }
  90% { opacity: 1; }
  100% { transform: translate(var(--dx, 100px), 2px); opacity: 0; }
}
.bc-board {
  position: absolute; left: calc(-24px * var(--s)); top: calc(-4px * var(--s));
  width: calc(48px * var(--s)); height: calc(7px * var(--s));
  border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
  transform: rotate(-4deg);
}
.bc-surf.rev .bc-board { transform: rotate(4deg); }
.bc-surf > .sc-char { left: -17px; bottom: calc(1px * var(--s)); }
.sc-char.bc-surfer .sc-char-leg.l { transform: rotate(28deg); }
.sc-char.bc-surfer .sc-char-leg.r { transform: rotate(-28deg); }
.sc-char.bc-surfer .sc-char-arm.l { transform: rotate(75deg); }
.sc-char.bc-surfer .sc-char-arm.r { transform: rotate(-75deg); }
.sc-char.bc-surfer .sc-char-body { top: 17px; }
.sc-char.bc-surfer .sc-char-head { top: 3px; }
.bc-wake {
  position: absolute; left: calc(-60px * var(--s)); top: calc(-5px * var(--s));
  width: calc(44px * var(--s)); height: calc(9px * var(--s));
  background: radial-gradient(ellipse at 100% 50%, rgba(255,255,255,0.9), rgba(255,255,255,0.35) 45%, transparent 70%);
  border-radius: 50%;
}
.bc-surf.rev .bc-wake { left: calc(16px * var(--s)); transform: scaleX(-1); }

/* —— beach digit celebration: wave splash + lorikeet burst —— */
.tc-beach-wave {
  position: absolute; left: -10%; right: -10%; bottom: -40%; height: 60%;
  background:
    radial-gradient(ellipse 12% 30% at 10% 0%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(ellipse 14% 32% at 32% 2%, rgba(255,255,255,0.9), transparent 70%),
    radial-gradient(ellipse 12% 30% at 55% 0%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(ellipse 14% 30% at 78% 3%, rgba(255,255,255,0.9), transparent 70%),
    linear-gradient(180deg, rgba(220,255,250,0.85) 0%, rgba(80,210,210,0.75) 18%, rgba(20,140,180,0.7) 60%, rgba(10,90,140,0.6) 100%);
  border-radius: 45% 55% 0 0 / 30% 30% 0 0;
  opacity: 0;
  animation: tcBeachWave 2.6s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes tcBeachWave {
  0% { opacity: 0; transform: translate3d(0, 40%, 0) skewX(-6deg); }
  20% { opacity: 0.95; }
  45% { transform: translate3d(0, -48%, 0) skewX(4deg); opacity: 0.9; }
  100% { transform: translate3d(0, 60%, 0) skewX(-2deg); opacity: 0; }
}
.tc-drop {
  position: absolute; bottom: 10%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(140,230,240,0.85) 55%, rgba(40,170,200,0.6));
  opacity: 0;
  animation: tcDrop 1.8s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes tcDrop {
  0% { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  12% { opacity: 1; }
  55% { transform: translate3d(calc(var(--tc-x) * 0.6), calc(var(--tc-up) * -1), 0) scale(1); }
  100% { transform: translate3d(var(--tc-x), 10vh, 0) scale(0.6); opacity: 0; }
}
.tc-lori {
  position: absolute; left: 50%; top: 52%; width: 26px; height: 14px; margin: -7px 0 0 -13px;
  opacity: 0;
  animation: tcLoriFly 2.6s cubic-bezier(.25,.6,.35,1) forwards;
}
.tc-lori .li { position: absolute; inset: 0; }
.tc-lori.flip .li { transform: scaleX(-1); }
.tc-lori .lb {
  position: absolute; left: 4px; top: 4px; width: 18px; height: 7px; border-radius: 50%;
  background: linear-gradient(90deg, #2fbf3a 0 40%, #3a50d8 40% 60%, #ff5a1f 60% 78%, #2f3ad0 78%);
}
.tc-lori .lh { position: absolute; right: 0; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #2f3ad0; }
.tc-lori .lh::after { content: ""; position: absolute; right: -3px; top: 2px; border: 2px solid transparent; border-left: 4px solid #ff6a2a; }
.tc-lori .lt { position: absolute; left: -6px; top: 6px; width: 12px; height: 3px; background: linear-gradient(90deg, #c8d93a, #3fae3a); border-radius: 2px; }
.tc-lori .lw {
  position: absolute; left: 6px; top: -2px; width: 11px; height: 9px;
  background: linear-gradient(180deg, #2fbf3a 0 60%, #ff4a22 60% 85%, #ffd400 85%);
  border-radius: 80% 20% 60% 40%; transform-origin: 50% 100%;
  animation: tcLoriFlap 0.16s ease-in-out infinite alternate;
}
@keyframes tcLoriFlap { from { transform: scaleY(1); } to { transform: scaleY(-0.8); } }
@keyframes tcLoriFly {
  0% { transform: translate3d(0, 0, 0) rotate(var(--tc-rot)) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate3d(var(--sx), var(--sy), 0) rotate(var(--tc-rot)) scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-cloud, .bc-p.bc-walk, .bc-p.bc-walk > .sc-char, .bc-swim, .bc-surf, .bc-swim-ring,
  .sc-char.bc-swimmer .sc-char-arm { animation-play-state: paused !important; }
}
/* amy65: sandcastle builders (occasional event) */
.bc-castle { position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.bc-castle.on { opacity: 1; }
.bc-p.bc-ck { opacity: 0; transition: opacity 1.2s ease; }
.bc-p.bc-ck.on { opacity: 1; }
/* kneeling at the castle: hips down, knees on the sand */
.bc-p.bc-ck .sc-char-sprite { top: 9px; }
.bc-p.bc-ck .sc-char-leg { height: 8px; bottom: 9px; width: 7px; transform: none; }
.bc-p.bc-ck .sc-char-leg::after { display: none; }
.bc-p.bc-ck .snow-ball-build { display: none; }

/* —— amy65: Theme: Sydney (Circular Quay — harbour day into night) —— */
body[data-theme="sydney"] {
  --bg: #0a2238;
  --bg-elevated: #0e2e4a;
  --cyan: #4fb4e8;
  --magenta: #f2b632;
  --purple: #1f6aa8;
  --violet: #f6e7b8;
  --pink: #ffd27a;
  --text: #f6f8fb;
  --text-dim: #b4c8dc;
  --cell-bg: rgba(8, 36, 62, 0.88);
  --cell-given: rgba(14, 52, 86, 0.93);
  --glow-cyan: 0 0 12px rgba(79, 180, 232, 0.5), 0 0 24px rgba(79, 180, 232, 0.22);
  --glow-magenta: 0 0 10px rgba(242, 182, 50, 0.5), 0 0 18px rgba(242, 182, 50, 0.2);
  --glow-purple: 0 0 10px rgba(31, 106, 168, 0.45);
  --accent: #4fb4e8;
  --accent2: #f2b632;
  --board-border: #f2d38a;
  --board-bg: rgba(6, 30, 52, 0.92);
  --font-display: "Segoe UI", "Hiragino Sans", system-ui, sans-serif;
}
body[data-theme="sydney"] .bg-glow { background: linear-gradient(180deg, #2c72c4 0%, #94c4ea 70%, #d5e9f3 100%); }
body[data-theme="sydney"] .title {
  background: linear-gradient(90deg, #4fb4e8, #f6f2e6, #f2b632);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(6, 30, 52, 0.6));
}
body[data-theme="sydney"] .stats,
body[data-theme="sydney"] .volume-row {
  background: rgba(6, 30, 52, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="sydney"] .stat-label,
body[data-theme="sydney"] .volume-label { color: #dce8f4; }
body[data-theme="sydney"] .stat-value,
body[data-theme="sydney"] .volume-value { color: #8fd2f6; text-shadow: 0 1px 2px rgba(4, 20, 40, 0.8); }
body[data-theme="sydney"] .track-label { color: #f6d77a; text-shadow: 0 1px 3px rgba(4, 20, 40, 0.95), 0 0 8px rgba(4, 20, 40, 0.6); }
body[data-theme="sydney"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(4, 20, 40, 0.95), 0 0 6px rgba(4, 20, 40, 0.7); }
.sy-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sy-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.sy-scene > canvas.sy-fw { height: 100%; }
.sy-scene > canvas.sy-dark, .sy-scene > canvas.sy-lights { opacity: 0; visibility: hidden; }
.sy-sun { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.sy-sun-disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fffef6 0 55%, #fff1c4 75%, rgba(255, 236, 170, 0) 100%); }
.sy-sun-glare { position: absolute; inset: -150%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 248, 220, 0.55) 0, rgba(255, 240, 200, 0.18) 30%, rgba(255, 240, 200, 0) 65%); }
.sy-sun.low .sy-sun-disc { background: radial-gradient(circle, #fff3c0 0 45%, #ffb35c 75%, rgba(255, 140, 60, 0) 100%); }
.sy-sun.low .sy-sun-glare { background: radial-gradient(circle, rgba(255, 190, 110, 0.6) 0, rgba(255, 140, 80, 0.22) 30%, rgba(255, 120, 60, 0) 65%); }
.sy-moon { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; opacity: 0; filter: drop-shadow(0 0 6px rgba(230, 236, 255, 0.55)); }
.sy-clouds { position: absolute; inset: 0; pointer-events: none; }
.sy-cloud { position: absolute; will-change: transform; animation: bcCloud 240s linear infinite; }
.sy-people { position: absolute; inset: 0; pointer-events: none; }
.sy-p { position: absolute; width: 0; height: 0; z-index: 3; }
.sy-p > .sc-char { left: -17px; bottom: 0; z-index: auto; }
.sy-p.sy-walk { animation: bcWalkX 30s ease-in-out infinite alternate; }
.sy-p.sy-walk > .sc-char { animation: bcFlip 60s steps(1, end) infinite; }
/* the busker's guitar: spruce top, dark sound hole, long neck */
.sy-guitar {
  position: absolute; left: 13px; top: 27px; width: 15px; height: 9px; z-index: 8;
  border-radius: 45% 55% 55% 45% / 50%;
  background: radial-gradient(circle at 42% 50%, #2a1a10 0 18%, transparent 20%), linear-gradient(180deg, #e2b26a, #b9803e);
  transform: rotate(-24deg); transform-origin: 30% 50%;
  animation: syStrum 0.5s ease-in-out infinite alternate;
}
.sy-guitar::after { content: ""; position: absolute; left: 13px; top: 3px; width: 13px; height: 2px; background: #5a3a20; border-radius: 1px; }
@keyframes syStrum { from { rotate: 0deg; } to { rotate: 3deg; } }
.sy-case {
  position: absolute; left: calc(14px * var(--s)); top: calc(-4px * var(--s)); width: calc(22px * var(--s)); height: calc(5px * var(--s));
  border-radius: 40%; background: radial-gradient(ellipse at 50% 50%, #c84a5a 0 55%, #1c1416 60%);
  box-shadow: inset 0 0 0 1px #1c1416;
}
@media (prefers-reduced-motion: reduce) {
  .sy-cloud, .sy-p.sy-walk, .sy-p.sy-walk > .sc-char, .sy-guitar { animation-play-state: paused !important; }
}
/* amy65: Sydney finish-a-number — ferry + gulls by day, fireworks at night */
.tc-sy-ferry {
  position: absolute; left: -40vmin; bottom: 14vh; width: 34vmin; height: 9vmin;
  animation: tcSyFerry 3.2s cubic-bezier(0.3, 0.1, 0.6, 1) forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 20, 40, 0.35));
}
.tc-sy-ferry .h { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: #1f5a36; clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%); border-top: 0.6vmin solid #c8b06a; }
.tc-sy-ferry .d1 { position: absolute; left: 7%; right: 7%; bottom: 32%; height: 26%; background: repeating-linear-gradient(90deg, #f1e7c0 0 6%, #34444e 6% 10%); border-top: 0.5vmin solid #b8473a; }
.tc-sy-ferry .d2 { position: absolute; left: 20%; right: 20%; bottom: 58%; height: 20%; background: repeating-linear-gradient(90deg, #efe2b0 0 7%, #34444e 7% 11%); border-top: 0.5vmin solid #b8473a; }
.tc-sy-ferry .w { position: absolute; bottom: 78%; width: 9%; height: 14%; background: #f1e7c0; }
.tc-sy-ferry .w.l { left: 22%; } .tc-sy-ferry .w.r { right: 22%; }
.tc-sy-ferry .m { position: absolute; bottom: 92%; width: 0.5vmin; height: 16%; background: #e8e2d0; }
.tc-sy-ferry .m.l { left: 26%; } .tc-sy-ferry .m.r { right: 26%; }
.tc-sy-ferry .wake { position: absolute; right: 96%; bottom: -4%; width: 60%; height: 20%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85)); border-radius: 50%; }
@keyframes tcSyFerry { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 50vmin)); } }
.tc-sy-gull { position: absolute; left: 50%; top: 62%; width: 0; height: 0; animation: tcSyGull 2.4s ease-out forwards; opacity: 0; }
.tc-sy-gull i {
  position: absolute; left: -2.2vmin; top: -1vmin; width: 4.4vmin; height: 2vmin;
  border-top: 0.55vmin solid #f6f8fa; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: drop-shadow(0 1px 1px rgba(40, 60, 80, 0.5));
  animation: tcSyFlap 0.28s ease-in-out infinite alternate;
}
@keyframes tcSyFlap { from { transform: scaleY(1); } to { transform: scaleY(0.35) translateY(0.6vmin); } }
@keyframes tcSyGull {
  0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate3d(var(--sx), var(--sy), 0) scale(1.4); opacity: 0; }
}
.tc-sy-rocket {
  position: absolute; bottom: 0; width: 0.5vmin; height: 5vmin; margin-left: -0.25vmin;
  background: linear-gradient(180deg, #fff6d0, rgba(255, 200, 100, 0)); border-radius: 1vmin;
  animation: tcSyRocket 0.32s ease-out forwards; opacity: 0;
}
@keyframes tcSyRocket { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--up))); opacity: 0; } }
.tc-sy-spark {
  position: absolute; width: 0.9vmin; height: 0.9vmin; margin: -0.45vmin; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 1.2vmin var(--c), 0 0 0.4vmin #fff;
  opacity: 0; animation: tcSySpark 1.7s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes tcSySpark {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.4); opacity: 0; }
}

/* —— amy66: Theme: Boston (the Charles River Basin from Magazine Beach) —— */
body[data-theme="boston"] {
  --bg: #0c1e36;
  --bg-elevated: #12294a;
  --cyan: #6aa8e0;
  --magenta: #e2b13c;
  --purple: #2a5a96;
  --violet: #f4e4c0;
  --pink: #f0c870;
  --text: #f6f8fb;
  --text-dim: #b8c6d8;
  --cell-bg: rgba(10, 30, 58, 0.88);
  --cell-given: rgba(18, 44, 80, 0.93);
  --glow-cyan: 0 0 12px rgba(106, 168, 224, 0.5), 0 0 24px rgba(106, 168, 224, 0.22);
  --glow-magenta: 0 0 10px rgba(226, 177, 60, 0.55), 0 0 18px rgba(226, 177, 60, 0.22);
  --glow-purple: 0 0 10px rgba(42, 90, 150, 0.45);
  --accent: #6aa8e0;
  --accent2: #e2b13c;
  --board-border: #e8c46a;
  --board-bg: rgba(8, 26, 50, 0.92);
  --font-display: "Georgia", "Hiragino Mincho ProN", "Times New Roman", serif;
}
body[data-theme="boston"] .bg-glow { background: linear-gradient(180deg, #3a78c8 0%, #a2c8e8 70%, #dbe8ee 100%); }
body[data-theme="boston"] .title {
  background: linear-gradient(90deg, #e2b13c, #fff4d6, #a51c30);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(8, 26, 50, 0.6));
}
body[data-theme="boston"] .stats,
body[data-theme="boston"] .volume-row {
  background: rgba(8, 26, 50, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="boston"] .stat-label,
body[data-theme="boston"] .volume-label { color: #dce6f2; }
body[data-theme="boston"] .stat-value,
body[data-theme="boston"] .volume-value { color: #f0cf78; text-shadow: 0 1px 2px rgba(4, 16, 36, 0.8); }
body[data-theme="boston"] .track-label { color: #f0cf78; text-shadow: 0 1px 3px rgba(4, 16, 36, 0.95), 0 0 8px rgba(4, 16, 36, 0.6); }
body[data-theme="boston"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(4, 16, 36, 0.95), 0 0 6px rgba(4, 16, 36, 0.7); }
.bs-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bs-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.bs-scene > canvas.bs-dark, .bs-scene > canvas.bs-lights { opacity: 0; visibility: hidden; }
.bs-moon { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; opacity: 0; filter: drop-shadow(0 0 7px rgba(240, 236, 220, 0.55)); }
.bs-moon.low { filter: sepia(0.6) saturate(1.8) hue-rotate(-12deg) drop-shadow(0 0 9px rgba(255, 190, 120, 0.6)); }
/* amy66: Boston finish-a-number — swan boat + ducklings by day, Pops fireworks at night */
.tc-bs-swanboat {
  position: absolute; left: -52vmin; bottom: 12vh; width: 50vmin; height: 20.5vmin;
  animation: tcBsBoat 3.6s cubic-bezier(0.3, 0.1, 0.6, 1) forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 20, 40, 0.3));
}
.tc-bs-swanboat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-bs-swanboat .wake { position: absolute; right: 97%; bottom: 3%; width: 40%; height: 8%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8)); border-radius: 50%; }
@keyframes tcBsBoat { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 60vmin)); } }
.tc-bs-ducks {
  position: absolute; right: -34vmin; bottom: 6vh; width: 30vmin; height: 7.5vmin;
  animation: tcBsDucks 3.6s linear forwards;
}
.tc-bs-ducks svg { width: 100%; height: 100%; transform: scaleX(-1); overflow: visible; }
.tc-bs-ducks g { animation: tcBsBob 0.5s ease-in-out infinite alternate; }
.tc-bs-ducks g:nth-child(odd) { animation-delay: 0.25s; }
@keyframes tcBsBob { from { translate: 0 0; } to { translate: 0 0.8px; } }
@keyframes tcBsDucks { from { transform: translateX(0); } to { transform: translateX(calc(-55vw - 30vmin)); } }
.tc-bs-rocket {
  position: absolute; bottom: 0; width: 0.5vmin; height: 5vmin; margin-left: -0.25vmin;
  background: linear-gradient(180deg, #fff6d0, rgba(255, 200, 100, 0)); border-radius: 1vmin;
  animation: tcBsRocket 0.32s ease-out forwards; opacity: 0;
}
@keyframes tcBsRocket { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--up))); opacity: 0; } }
.tc-bs-spark {
  position: absolute; width: 0.9vmin; height: 0.9vmin; margin: -0.45vmin; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 1.2vmin var(--c), 0 0 0.4vmin #fff;
  opacity: 0; animation: tcBsSpark 1.7s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes tcBsSpark {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-bs-ducks g { animation: none; }
}
@media (min-width: 601px) {
  .tc-bs-swanboat { bottom: 15vh; }
  .tc-bs-ducks { bottom: 16vh; }
}

/* —— amy67: Theme: London (the Thames at Westminster from the Albert Embankment) —— */
body[data-theme="london"] {
  --bg: #0e1a33;
  --bg-elevated: #15254a;
  --cyan: #8fb0e0;
  --magenta: #e3b649;
  --purple: #1f3a6e;
  --violet: #f4ead2;
  --pink: #e8c66a;
  --text: #f7f5ef;
  --text-dim: #c4cad8;
  --cell-bg: rgba(14, 26, 52, 0.88);
  --cell-given: rgba(24, 40, 78, 0.93);
  --glow-cyan: 0 0 12px rgba(143, 176, 224, 0.5), 0 0 24px rgba(143, 176, 224, 0.22);
  --glow-magenta: 0 0 10px rgba(227, 182, 73, 0.55), 0 0 18px rgba(227, 182, 73, 0.22);
  --glow-purple: 0 0 10px rgba(31, 58, 110, 0.45);
  --accent: #8fb0e0;
  --accent2: #e3b649;
  --board-border: #e3b649;
  --board-bg: rgba(10, 20, 44, 0.92);
  --font-display: "Baskerville", "Georgia", "Hiragino Mincho ProN", "Times New Roman", serif;
}
body[data-theme="london"] .bg-glow { background: linear-gradient(180deg, #5a86c0 0%, #b4c8de 70%, #dfe4ea 100%); }
body[data-theme="london"] .title {
  background: linear-gradient(90deg, #e3b649, #fff6dc, #c8102e);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(10, 20, 44, 0.6));
}
body[data-theme="london"] .stats,
body[data-theme="london"] .volume-row {
  background: rgba(10, 20, 44, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="london"] .stat-label,
body[data-theme="london"] .volume-label { color: #e2e6ee; }
body[data-theme="london"] .stat-value,
body[data-theme="london"] .volume-value { color: #f0cf78; text-shadow: 0 1px 2px rgba(6, 12, 30, 0.8); }
body[data-theme="london"] .track-label { color: #f0cf78; text-shadow: 0 1px 3px rgba(6, 12, 30, 0.95), 0 0 8px rgba(6, 12, 30, 0.6); }
body[data-theme="london"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 12, 30, 0.95), 0 0 6px rgba(6, 12, 30, 0.7); }
.ld-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ld-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.ld-scene > canvas.ld-dark, .ld-scene > canvas.ld-lights, .ld-scene > canvas.ld-wet, .ld-scene > canvas.ld-sky-oc, .ld-scene > canvas.ld-sky-ocn { opacity: 0; visibility: hidden; }
.ld-scene > canvas.ld-rain { z-index: 4; visibility: hidden; }
.ld-veil {
  position: absolute; left: 0; right: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(180deg, rgba(150, 156, 166, 0) 0%, rgba(150, 156, 166, 0.28) 30%, rgba(150, 156, 166, 0.5) 75%, rgba(150, 156, 166, 0.35) 100%);
}
/* everyone on the Embankment carries a brolly; up it goes when a shower blows in */
.ld-umb {
  position: absolute; left: -7px; top: -17px; width: 48px; height: 44px; z-index: 9;
  opacity: 0; transform: scale(0.25, 0.1); transform-origin: 50% 70%;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  pointer-events: none;
}
.ld-umb::before {
  content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 15px;
  border-radius: 24px 24px 3px 3px / 15px 15px 3px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0 7px, rgba(255, 255, 255, 0.16) 7px 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.18)),
    var(--umb, #1c1c22);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.ld-umb::after {
  content: ""; position: absolute; left: 23px; top: 1px; width: 5px; height: 40px;
  border-left: 2px solid #2a2a2e; border-bottom: 2px solid #2a2a2e; border-bottom-left-radius: 4px;
  box-sizing: border-box;
}
body[data-ld-rain="1"] .ld-umb { opacity: 1; transform: scale(1, 1); }
@media (prefers-reduced-motion: reduce) { .ld-umb { transition: none; } }
/* amy67: London finish-a-number — the Red Arrows by day, fireworks over the Eye at night */
.tc-ld-arrows {
  position: absolute; left: 0; top: 22vh; width: 0; height: 0;
  animation: tcLdFly 3.4s cubic-bezier(0.25, 0.05, 0.55, 1) forwards;
}
@keyframes tcLdFly {
  from { transform: translate(-12vmin, 6vh) rotate(-4deg); }
  to { transform: translate(calc(100vw + 50vmin), -6vh) rotate(-4deg); }
}
.tc-ld-jet {
  position: absolute; left: var(--x); top: var(--y); width: 9vmin; height: 3.1vmin; margin: -1.55vmin 0 0 -4.5vmin;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.tc-ld-jet svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tc-ld-jet .smoke {
  position: absolute; right: 96%; top: 48%; width: 70vw; height: 1.3vmin; margin-top: -0.65vmin;
  background: linear-gradient(270deg, var(--sm) 0%, color-mix(in srgb, var(--sm) 55%, transparent) 30%, transparent 100%);
  border-radius: 1vmin; filter: blur(2px); opacity: 0.85;
  transform-origin: right center; animation: tcLdSmoke 3.4s linear forwards;
}
@keyframes tcLdSmoke { from { transform: scaleX(0.05) scaleY(0.6); } to { transform: scaleX(1) scaleY(1.8); } }
.tc-ld-rocket {
  position: absolute; bottom: 0; width: 0.5vmin; height: 5vmin; margin-left: -0.25vmin;
  background: linear-gradient(180deg, #fff6d0, rgba(255, 200, 100, 0)); border-radius: 1vmin;
  animation: tcLdRocket 0.32s ease-out forwards; opacity: 0;
}
@keyframes tcLdRocket { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--up))); opacity: 0; } }
.tc-ld-spark {
  position: absolute; width: 0.9vmin; height: 0.9vmin; margin: -0.45vmin; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 1.2vmin var(--c), 0 0 0.4vmin #fff;
  opacity: 0; animation: tcLdSpark 1.7s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes tcLdSpark {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.4); opacity: 0; }
}
@media (max-width: 600px) {
  .tc-ld-arrows { top: 14vh; }
}

/* —— amy69: Theme: Tokyo (the Rainbow Bridge from Odaiba Beach) —— */
body[data-theme="tokyo"] {
  --bg: #0c1630;
  --bg-elevated: #14224a;
  --cyan: #8cc8f0;
  --magenta: #f2683a;
  --purple: #1c2f66;
  --violet: #f6f2ea;
  --pink: #ff9a6a;
  --text: #f8f6f2;
  --text-dim: #c6cede;
  --cell-bg: rgba(12, 22, 48, 0.88);
  --cell-given: rgba(22, 36, 76, 0.93);
  --glow-cyan: 0 0 12px rgba(140, 200, 240, 0.5), 0 0 24px rgba(140, 200, 240, 0.22);
  --glow-magenta: 0 0 10px rgba(242, 104, 58, 0.55), 0 0 18px rgba(242, 104, 58, 0.22);
  --glow-purple: 0 0 10px rgba(28, 47, 102, 0.45);
  --accent: #8cc8f0;
  --accent2: #f2683a;
  --board-border: #e84a1e;
  --board-bg: rgba(10, 18, 42, 0.92);
  --font-display: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
}
body[data-theme="tokyo"] .bg-glow { background: linear-gradient(180deg, #2f6fc0 0%, #a8cbe8 70%, #dce8f0 100%); }
body[data-theme="tokyo"] .title {
  background: linear-gradient(90deg, #e84a1e, #fff4e8, #6ab4f0);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 10px rgba(10, 18, 42, 0.6));
}
body[data-theme="tokyo"] .stats,
body[data-theme="tokyo"] .volume-row {
  background: rgba(10, 18, 42, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="tokyo"] .stat-label,
body[data-theme="tokyo"] .volume-label { color: #e2e8f2; }
body[data-theme="tokyo"] .stat-value,
body[data-theme="tokyo"] .volume-value { color: #ffb08a; text-shadow: 0 1px 2px rgba(6, 12, 30, 0.8); }
body[data-theme="tokyo"] .track-label { color: #ffb08a; text-shadow: 0 1px 3px rgba(6, 12, 30, 0.95), 0 0 8px rgba(6, 12, 30, 0.6); }
body[data-theme="tokyo"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 12, 30, 0.95), 0 0 6px rgba(6, 12, 30, 0.7); }
.tk-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tk-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.tk-scene > canvas.tk-dark, .tk-scene > canvas.tk-lights { opacity: 0; visibility: hidden; }
/* amy69: Tokyo finish-a-number - koinobori by day, hanabi over the bay at night */
.tc-tk-koi {
  position: absolute; left: 0; top: 20vh; width: 0; height: 0;
  animation: tcTkFly 3.6s cubic-bezier(0.3, 0.05, 0.6, 1) forwards;
}
@keyframes tcTkFly {
  from { transform: translate(-14vmin, 5vh); }
  to { transform: translate(calc(100vw + 54vmin), -4vh); }
}
.tc-tk-carp {
  position: absolute; left: var(--x); top: var(--y); width: calc(15vmin * var(--s)); height: calc(5vmin * var(--s));
  margin: calc(-2.5vmin * var(--s)) 0 0 calc(-7.5vmin * var(--s));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  animation: tcTkSwim 0.7s ease-in-out infinite alternate;
  transform-origin: 92% 50%;
}
.tc-tk-carp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes tcTkSwim {
  from { transform: rotate(-4deg) scaleY(0.92) skewX(-6deg); }
  to { transform: rotate(4deg) scaleY(1.04) skewX(6deg); }
}
.tc-tk-rocket {
  position: absolute; bottom: 0; width: 0.45vmin; height: 5vmin; margin-left: -0.22vmin;
  background: linear-gradient(180deg, #fff2c8, rgba(255, 200, 100, 0)); border-radius: 1vmin;
  animation: tcTkRocket 0.34s ease-out forwards; opacity: 0;
}
@keyframes tcTkRocket { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--up))); opacity: 0; } }
.tc-tk-spark {
  position: absolute; width: 0.85vmin; height: 0.85vmin; margin: -0.42vmin; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 1.2vmin var(--c), 0 0 0.4vmin #fff;
  opacity: 0; animation: tcTkSpark 1.7s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes tcTkSpark {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.4); opacity: 0; }
}
/* the gold willow (shidare-yanagi): slower, drooping far further */
.tc-tk-willow { animation: tcTkWillow 2.4s cubic-bezier(0.1, 0.6, 0.4, 1) forwards; }
@keyframes tcTkWillow {
  0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * 0.9), calc(var(--dy) * 0.9)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 16vmin)) scale(0.35); opacity: 0; }
}
@media (max-width: 600px) {
  .tc-tk-koi { top: 13vh; }
}

/* —— amy70: Theme: Paris (the Seine from the Cours la Reine) —— */
body[data-theme="paris"] {
  --bg: #0e1630;
  --bg-elevated: #18224a;
  --cyan: #e8c878;
  --magenta: #d8394a;
  --purple: #1c2a5e;
  --violet: #f6f0e2;
  --pink: #f0a0a8;
  --text: #faf6ec;
  --text-dim: #cfd2de;
  --cell-bg: rgba(14, 22, 48, 0.88);
  --cell-given: rgba(26, 36, 78, 0.93);
  --glow-cyan: 0 0 12px rgba(232, 200, 120, 0.45), 0 0 24px rgba(232, 200, 120, 0.2);
  --glow-magenta: 0 0 10px rgba(216, 57, 74, 0.5), 0 0 18px rgba(216, 57, 74, 0.2);
  --glow-purple: 0 0 10px rgba(28, 42, 94, 0.45);
  --accent: #e8c878;
  --accent2: #d8394a;
  --board-border: #c8a24a;
  --board-bg: rgba(12, 18, 44, 0.92);
  --font-display: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;
}
body[data-theme="paris"] .bg-glow { background: linear-gradient(180deg, #3c78c4 0%, #b4cfe6 70%, #e2e8ee 100%); }
body[data-theme="paris"] .title {
  background: linear-gradient(90deg, #4a7ae0, #fff8ec 50%, #e8404e);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(12, 18, 44, 0.6));
}
body[data-theme="paris"] .stats,
body[data-theme="paris"] .volume-row {
  background: rgba(12, 18, 44, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="paris"] .stat-label,
body[data-theme="paris"] .volume-label { color: #e6e8f2; }
body[data-theme="paris"] .stat-value,
body[data-theme="paris"] .volume-value { color: #f2d48a; text-shadow: 0 1px 2px rgba(8, 12, 30, 0.8); }
body[data-theme="paris"] .track-label { color: #f2d48a; text-shadow: 0 1px 3px rgba(8, 12, 30, 0.95), 0 0 8px rgba(8, 12, 30, 0.6); }
body[data-theme="paris"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(8, 12, 30, 0.95), 0 0 6px rgba(8, 12, 30, 0.7); }
.pa-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pa-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.pa-scene > canvas.pa-dark, .pa-scene > canvas.pa-lights { opacity: 0; visibility: hidden; }
/* Parisians: the marinière, the beret, the baguette, a busker's accordion, a painter's palette */
.sc-char.pa-mariniere .sc-char-top { background: repeating-linear-gradient(180deg, #f6f4ee 0 1.6px, #1c2a5e 1.6px 3px); }
.sc-char.pa-mariniere .sc-char-arm { background: linear-gradient(180deg, #f6f4ee, var(--skin, #e6c09a) 70%); }
.sc-char.pa-beret .sc-char-headwear {
  top: -3px; left: -2px; width: 20px; height: 7px;
  background: linear-gradient(180deg, var(--accent, #1a1a22), #0c0c10);
  border-radius: 55% 45% 30% 30% / 80% 80% 20% 20%;
  transform: rotate(-9deg); box-shadow: none;
}
.sc-char.pa-beret .sc-char-headwear::after {
  content: ""; position: absolute; top: -2px; left: 52%; width: 1.6px; height: 3px;
  background: var(--accent, #1a1a22); border-radius: 1px; transform: none;
}
.sc-char.pa-trench .sc-char-jacket { background: linear-gradient(180deg, #d2bc90, #a88c5c); }
.pa-baguette {
  position: absolute; left: 21px; top: 9px; width: 3.4px; height: 26px; z-index: 9;
  background: repeating-linear-gradient(160deg, #d8a256 0 4px, #f0d090 4px 5px);
  border-radius: 2px; transform: rotate(22deg);
}
.pa-accordion {
  position: absolute; left: 5px; top: 19px; width: 24px; height: 11px; z-index: 9;
  display: flex; justify-content: space-between;
  animation: paSqueeze 1.3s ease-in-out infinite alternate;
}
.pa-accordion::before, .pa-accordion::after {
  content: ""; width: 6px; height: 11px; border-radius: 1.5px;
  background: linear-gradient(180deg, #c8283a, #8a1424);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.pa-acc-bellows {
  position: absolute; left: 6px; right: 6px; top: 1px; bottom: 1px;
  background: repeating-linear-gradient(90deg, #1a1a22 0 1.4px, #f2f0ea 1.4px 2.6px);
}
@keyframes paSqueeze { from { transform: scaleX(0.82); } to { transform: scaleX(1.06); } }
.pa-acc-case {
  position: absolute; left: 4px; bottom: -2px; width: 14px; height: 4px;
  background: linear-gradient(180deg, #5a2a1a, #3a1a10); border-radius: 1px;
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.pa-palette {
  position: absolute; left: 0; top: 24px; width: 8px; height: 5px; z-index: 9; border-radius: 50%;
  background: radial-gradient(circle at 30% 40%, #d8283a 0 1px, transparent 1.2px), radial-gradient(circle at 60% 35%, #2a4fa8 0 1px, transparent 1.2px), radial-gradient(circle at 50% 70%, #f0c030 0 1px, transparent 1.2px), #c8a070;
}
body.scene-paused .pa-accordion { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pa-accordion { animation: none; } }
/* amy70: Paris finish-a-number - the Patrouille de France by day, 14 July fireworks at night */
.tc-pa-pat {
  position: absolute; left: 0; top: 16vh; width: 0; height: 0;
  animation: tcPaFly 3.8s cubic-bezier(0.3, 0.05, 0.6, 1) forwards;
}
@keyframes tcPaFly {
  from { transform: translate(-10vmin, 6vh); }
  to { transform: translate(calc(100vw + 60vmin), -3vh); }
}
.tc-pa-jet { position: absolute; left: var(--x); top: var(--y); width: 6vmin; height: 2.1vmin; margin: -1.05vmin 0 0 -3vmin; }
.tc-pa-jet svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
.tc-pa-smoke {
  position: absolute; right: 92%; top: 50%; width: 60vmin; height: 1.5vmin; margin-top: -0.75vmin;
  background: linear-gradient(270deg, var(--c), rgba(255, 255, 255, 0));
  border-radius: 1vmin; opacity: 0.85; filter: blur(0.35vmin);
  transform-origin: 100% 50%; animation: tcPaSmoke 3.8s ease-out forwards;
}
@keyframes tcPaSmoke { from { transform: scaleX(0.05); } 30% { transform: scaleX(1); } to { transform: scaleX(1.1) scaleY(1.8); opacity: 0.55; } }
.tc-pa-rocket {
  position: absolute; bottom: 0; width: 0.45vmin; height: 5vmin; margin-left: -0.22vmin;
  background: linear-gradient(180deg, #fff2c8, rgba(255, 200, 100, 0)); border-radius: 1vmin;
  animation: tcPaRocket 0.34s ease-out forwards; opacity: 0;
}
@keyframes tcPaRocket { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--up))); opacity: 0; } }
.tc-pa-spark {
  position: absolute; width: 0.85vmin; height: 0.85vmin; margin: -0.42vmin; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 1.2vmin var(--c), 0 0 0.4vmin #fff;
  opacity: 0; animation: tcPaSpark 1.7s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes tcPaSpark {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.4); opacity: 0; }
}
.tc-pa-gold { animation: tcPaGold 2.4s cubic-bezier(0.1, 0.6, 0.4, 1) forwards; }
@keyframes tcPaGold {
  0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * 0.9), calc(var(--dy) * 0.9)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 16vmin)) scale(0.35); opacity: 0; }
}
@media (max-width: 600px) {
  .tc-pa-pat { top: 11vh; }
}

/* —— amy71: Theme: New York (Lower Manhattan from Pier 1, Brooklyn Bridge Park) —— */
body[data-theme="newyork"] {
  --bg: #0c1426;
  --bg-elevated: #16223c;
  --cyan: #f4c430;
  --magenta: #2fa08a;
  --purple: #1a2a48;
  --violet: #f2f4f6;
  --pink: #f0b8a0;
  --text: #f6f6f2;
  --text-dim: #c9d0dc;
  --cell-bg: rgba(12, 20, 38, 0.88);
  --cell-given: rgba(24, 36, 62, 0.93);
  --glow-cyan: 0 0 12px rgba(244, 196, 48, 0.45), 0 0 24px rgba(244, 196, 48, 0.2);
  --glow-magenta: 0 0 10px rgba(47, 160, 138, 0.5), 0 0 18px rgba(47, 160, 138, 0.2);
  --glow-purple: 0 0 10px rgba(26, 42, 72, 0.45);
  --accent: #f4c430;
  --accent2: #5fc4ab;
  --board-border: #f4c430;
  --board-bg: rgba(10, 16, 32, 0.92);
  --font-display: "Futura", "Avenir Next", "Century Gothic", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}
body[data-theme="newyork"] .bg-glow { background: linear-gradient(180deg, #4a82c0 0%, #b8cfe2 70%, #dfe6ec 100%); }
body[data-theme="newyork"] .title {
  background: linear-gradient(90deg, #f4c430, #fffaf0 50%, #5fc4ab);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.08em;
  filter: drop-shadow(0 0 10px rgba(10, 16, 32, 0.6));
}
body[data-theme="newyork"] .stats,
body[data-theme="newyork"] .volume-row {
  background: rgba(10, 16, 32, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="newyork"] .stat-label,
body[data-theme="newyork"] .volume-label { color: #e6eaf2; }
body[data-theme="newyork"] .stat-value,
body[data-theme="newyork"] .volume-value { color: #f6cf50; text-shadow: 0 1px 2px rgba(6, 10, 24, 0.8); }
body[data-theme="newyork"] .track-label { color: #f6cf50; text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 8px rgba(6, 10, 24, 0.6); }
body[data-theme="newyork"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 6px rgba(6, 10, 24, 0.7); }
.ny-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ny-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.ny-scene > canvas.ny-dark, .ny-scene > canvas.ny-lights { opacity: 0; visibility: hidden; }
/* New Yorkers: the ball cap, the I-heart-NY tee, the Anthora coffee cup, a busker's sax, a dog */
.sc-char.ny-cap .sc-char-hair { height: 5px; }
.sc-char.ny-cap .sc-char-headwear {
  top: -3px; left: -1px; width: 18px; height: 7px;
  background: linear-gradient(180deg, #24346a, #121c3c);
  border-radius: 8px 8px 1px 1px; box-shadow: none;
}
.sc-char.ny-cap .sc-char-headwear::before {
  content: ""; position: absolute; top: 5px; left: 12px; width: 9px; height: 2.4px;
  background: #121c3c; border-radius: 0 2px 2px 0;
}
.sc-char.ny-cap .sc-char-headwear::after {
  content: ""; position: absolute; top: 1.5px; left: 6px; width: 4px; height: 3px;
  border: 0.8px solid #f2f2f0; border-radius: 1px; transform: none; background: none;
}
.sc-char.ny-heart .sc-char-top::after {
  content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 4px;
  background: radial-gradient(circle at 30% 35%, #d8203a 0 1.4px, transparent 1.6px), radial-gradient(circle at 70% 35%, #d8203a 0 1.4px, transparent 1.6px), linear-gradient(135deg, transparent 0 40%, #d8203a 40% 60%, transparent 60%);
}
.sc-char.ny-anthora .sc-char-prop.cup {
  background: linear-gradient(180deg, #f6f6f2 0 22%, #1f4fa8 22% 78%, #f6f6f2 78%);
  border-color: rgba(255, 255, 255, 0.7);
}
.sc-char.ny-anthora .sc-char-prop.cup::after {
  content: ""; position: absolute; left: 2px; top: 5px; width: 4px; height: 3px;
  border-top: 1px solid #f0d070; border-bottom: 1px solid #f0d070;
}
.ny-sax {
  position: absolute; left: 13px; top: 18px; width: 4px; height: 17px; z-index: 9;
  background: linear-gradient(90deg, #b8862a, #f2cc6a 50%, #a8761e);
  border-radius: 2px 2px 3px 3px; transform: rotate(-14deg); transform-origin: 50% 0;
  animation: nySax 1.6s ease-in-out infinite alternate;
}
.ny-sax::after {
  content: ""; position: absolute; left: -1px; bottom: -3px; width: 8px; height: 5px;
  background: linear-gradient(180deg, #e8be5a, #a8761e); border-radius: 0 0 4px 4px;
  transform: rotate(18deg);
}
@keyframes nySax { from { transform: rotate(-14deg); } to { transform: rotate(-6deg); } }
.ny-sax-case {
  position: absolute; left: 4px; bottom: -2px; width: 15px; height: 4px;
  background: linear-gradient(180deg, #8a1424 0 40%, #1a1a20 40%); border-radius: 1px;
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.ny-dog {
  position: absolute; left: 40px; bottom: 0; width: 14px; height: 8px; z-index: 4;
  background: linear-gradient(180deg, #c89058, #9a6634); border-radius: 5px 6px 2px 2px;
}
.ny-dog::before {
  content: ""; position: absolute; right: -4px; top: -4px; width: 7px; height: 6px;
  background: #b07a44; border-radius: 3px 4px 2px 3px;
}
.ny-dog::after {
  content: ""; position: absolute; left: -4px; top: 0; width: 5px; height: 2px;
  background: #9a6634; border-radius: 2px; transform: rotate(-30deg);
}
.ny-dog-leash {
  position: absolute; left: -18px; top: -14px; width: 22px; height: 1px;
  background: #c8283a; transform: rotate(32deg); transform-origin: 0 0;
}
.ny-pretzel {
  position: absolute; left: 22px; top: 17px; width: 7px; height: 6px; z-index: 9;
  border: 1.6px solid #a8642a; border-radius: 50% 50% 40% 40%;
  box-shadow: inset 0 0 0 0.6px #f6f0e0;
}
body.scene-paused .ny-sax { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ny-sax { animation: none; } }
/* amy71: New York finish-a-number - ticker tape and the fireboat salute by day, Fourth of July fireworks at night */
.tc-ny-tape {
  position: absolute; top: -4vh; width: 0.9vmin; height: 0.6vmin; background: var(--c);
  box-shadow: 0 0 0.2vmin rgba(0, 0, 0, 0.25); opacity: 0;
  animation: tcNyTape 3s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
.tc-ny-strip { width: 0.45vmin; height: 2.8vmin; }
@keyframes tcNyTape {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(var(--r)); opacity: 0; }
}
.tc-ny-fireboat {
  position: absolute; bottom: 22vh; left: 0; width: 22vmin; height: 6.6vmin;
  animation: tcNyBoat 4.2s ease-in-out forwards;
}
.tc-ny-fireboat svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)); }
@keyframes tcNyBoat {
  from { transform: translateX(-20vmin); }
  to { transform: translateX(calc(100vw + 2vmin)); }
}
.tc-ny-fireboat svg.tc-ny-jets {
  inset: auto; left: -33.3%; top: -218%; width: 166.7%; height: 306%; overflow: visible; filter: none;
}
.tc-ny-jets path {
  fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 3.5; opacity: 0;
  animation: tcNyJet 3.6s linear forwards;
}
.tc-ny-jets path.tc-ny-mist { stroke-width: 7; stroke-dasharray: none; filter: blur(2px); animation-name: tcNyMist; }
@keyframes tcNyJet {
  0% { opacity: 0; stroke-dashoffset: 0; }
  12% { opacity: 0.95; }
  80% { opacity: 0.9; }
  100% { opacity: 0; stroke-dashoffset: -60; }
}
@keyframes tcNyMist { 0% { opacity: 0; } 20% { opacity: 0.35; } 80% { opacity: 0.3; } 100% { opacity: 0; } }
.tc-ny-rocket {
  position: absolute; bottom: 0; width: 0.45vmin; height: 5vmin; margin-left: -0.22vmin;
  background: linear-gradient(180deg, #fff2c8, rgba(255, 200, 100, 0)); border-radius: 1vmin;
  animation: tcNyRocket 0.34s ease-out forwards; opacity: 0;
}
@keyframes tcNyRocket { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(-1 * var(--up))); opacity: 0; } }
.tc-ny-spark {
  position: absolute; width: 0.85vmin; height: 0.85vmin; margin: -0.42vmin; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 1.2vmin var(--c), 0 0 0.4vmin #fff;
  opacity: 0; animation: tcNySpark 1.7s cubic-bezier(0.15, 0.7, 0.4, 1) forwards;
}
@keyframes tcNySpark {
  0% { transform: translate(0, 0) scale(1.4); opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.4); opacity: 0; }
}
.tc-ny-gold { animation: tcNyGold 2.4s cubic-bezier(0.1, 0.6, 0.4, 1) forwards; }
@keyframes tcNyGold {
  0% { transform: translate(0, 0) scale(1.3); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * 0.9), calc(var(--dy) * 0.9)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 16vmin)) scale(0.35); opacity: 0; }
}
@media (max-width: 600px) {
  .tc-ny-fireboat { bottom: 9vh; width: 24vmin; height: 7.2vmin; }
}

/* —— amy72: Theme: Munich (the old town and the Alps from the Monopteros, Englischer Garten) —— */
body[data-theme="munich"] {
  --bg: #0e1a30;
  --bg-elevated: #172846;
  --cyan: #6ab4ff;
  --magenta: #e8c25a;
  --purple: #1a3058;
  --violet: #f4f6fa;
  --pink: #f0c8a8;
  --text: #f6f8fc;
  --text-dim: #c8d4e6;
  --cell-bg: rgba(12, 22, 42, 0.88);
  --cell-given: rgba(22, 40, 70, 0.93);
  --glow-cyan: 0 0 12px rgba(106, 180, 255, 0.45), 0 0 24px rgba(106, 180, 255, 0.2);
  --glow-magenta: 0 0 10px rgba(232, 194, 90, 0.5), 0 0 18px rgba(232, 194, 90, 0.2);
  --glow-purple: 0 0 10px rgba(26, 48, 88, 0.45);
  --accent: #6ab4ff;
  --accent2: #e8c25a;
  --board-border: #6ab4ff;
  --board-bg: rgba(10, 18, 36, 0.92);
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
}
body[data-theme="munich"] .bg-glow { background: linear-gradient(180deg, #2a64b8 0%, #9cc2e8 60%, #7c9c50 100%); }
body[data-theme="munich"] .title {
  background: linear-gradient(90deg, #8ac6ff, #ffffff 50%, #e8c25a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.08em;
  filter: drop-shadow(0 0 10px rgba(10, 18, 36, 0.6));
}
body[data-theme="munich"] .stats,
body[data-theme="munich"] .volume-row {
  background: rgba(10, 18, 36, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="munich"] .stat-label,
body[data-theme="munich"] .volume-label { color: #e6ecf6; }
body[data-theme="munich"] .stat-value,
body[data-theme="munich"] .volume-value { color: #9ccaff; text-shadow: 0 1px 2px rgba(6, 10, 24, 0.8); }
body[data-theme="munich"] .track-label { color: #9ccaff; text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 8px rgba(6, 10, 24, 0.6); }
body[data-theme="munich"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 6px rgba(6, 10, 24, 0.7); }
.mu-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mu-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.mu-scene > canvas.mu-dark, .mu-scene > canvas.mu-lights { opacity: 0; visibility: hidden; }
/* Tracht: Lederhosen with the H-braces and wool Loferl, the Dirndl with its apron, the green hat */
.sc-char.mu-lederhosen .sc-char-leg {
  background: linear-gradient(180deg, #6a4a2e 0 34%, var(--skin, #e6c09a) 34% 56%, #e8e2d2 56% 82%, #2a2018 82%);
}
.sc-char.mu-lederhosen .sc-char-bottom { background: linear-gradient(180deg, #7a5634, #5a3c22); }
.sc-char.mu-lederhosen .sc-char-top::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 0; bottom: -2px;
  background: linear-gradient(90deg, #5a3c22 0 2px, transparent 2px calc(100% - 2px), #5a3c22 calc(100% - 2px)),
    linear-gradient(180deg, transparent 0 34%, #5a3c22 34% 48%, transparent 48%);
}
.sc-char.mu-dirndl .sc-char-top::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 3px;
  background: #f6f2ea; border-radius: 0 0 3px 3px;
}
.sc-char.mu-dirndl .sc-char-arm { background: linear-gradient(180deg, #f6f2ea 0 45%, var(--skin, #e6c09a) 45%); }
.sc-char.mu-dirndl .sc-char-bottom::after {
  content: ""; position: absolute; left: 28%; right: 28%; top: 0; bottom: 6%;
  background: linear-gradient(180deg, #e8a8b4, #d88a9a); border-radius: 0 0 2px 2px;
}
.sc-char.mu-dirndl-b .sc-char-bottom::after { background: linear-gradient(180deg, #c8dcf0, #a8c4e2); }
.sc-char.mu-hut .sc-char-headwear { background: linear-gradient(180deg, #3e5a3a, #24361e); }
.sc-char.mu-hut .sc-char-headwear::before { background: #34502e; }
.sc-char.mu-hut .sc-char-headwear::after {
  content: ""; position: absolute; top: -10px; right: 3px; width: 3px; height: 8px;
  background: linear-gradient(180deg, #e8e0cc, #6a5a48); border-radius: 2px 2px 0 0; transform: rotate(18deg);
}
/* a Maß: a litre of Helles in its dimpled glass with a white head */
.mu-mass {
  position: absolute; left: 22px; top: 22px; width: 7px; height: 9px; z-index: 9;
  background: linear-gradient(180deg, #fffaf0 0 22%, #f0b830 22%); border-radius: 1px 1px 2px 2px;
  box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.7);
}
.mu-mass::after { content: ""; position: absolute; right: -3px; top: 3px; width: 3px; height: 4px; border: 1px solid rgba(255, 255, 255, 0.8); border-left: 0; border-radius: 0 2px 2px 0; }
.mu-brezn {
  position: absolute; left: 21px; top: 20px; width: 8px; height: 7px; z-index: 9;
  border: 1.8px solid #8a4a1e; border-radius: 50% 50% 40% 40%;
  box-shadow: inset 0 0 0 0.6px #f6f0e0;
}
/* the Steirische Harmonika: two painted wooden ends and the bellows between */
.mu-squeeze {
  position: absolute; left: 4px; top: 19px; width: 22px; height: 10px; z-index: 9;
  background: linear-gradient(90deg, #7a2a1e 0 22%, #f2ecde 22% 26%, #2a2a30 26% 30%, #f2ecde 30% 34%, #2a2a30 34% 38%, #f2ecde 38% 42%, #2a2a30 42% 46%, #f2ecde 46% 50%, #2a2a30 50% 54%, #f2ecde 54% 58%, #2a2a30 58% 62%, #f2ecde 62% 66%, #2a2a30 66% 70%, #f2ecde 70% 78%, #7a2a1e 78%);
  border-radius: 2px; transform-origin: 50% 50%;
  animation: muSqueeze 1.2s ease-in-out infinite alternate;
}
@keyframes muSqueeze { from { transform: scaleX(0.82); } to { transform: scaleX(1.06); } }
.mu-hatcase {
  position: absolute; left: 8px; bottom: -1px; width: 12px; height: 4px;
  background: radial-gradient(ellipse at 50% 30%, #1e2a1a 0 45%, #3e5a3a 50%); border-radius: 50%;
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.mu-blanket { position: absolute; background: repeating-linear-gradient(90deg, #c8283a 0 4px, #f4f0e8 4px 8px); border-radius: 2px; opacity: 0.9; transform: skewX(-20deg); }
/* a Dackel, naturally */
.mu-dackel {
  position: absolute; left: 38px; bottom: 0; width: 16px; height: 6px; z-index: 4;
  background: linear-gradient(180deg, #8a4a24, #6a3418); border-radius: 4px 5px 2px 2px;
}
.mu-dackel::before { content: ""; position: absolute; right: -5px; top: -3px; width: 7px; height: 5px; background: #7a4020; border-radius: 3px 4px 2px 3px; }
.mu-dackel::after { content: ""; position: absolute; left: -4px; top: 0; width: 5px; height: 1.6px; background: #6a3418; border-radius: 2px; transform: rotate(-24deg); }
.mu-dackel-leash { position: absolute; left: -18px; top: -14px; width: 22px; height: 1px; background: #2a5aa8; transform: rotate(32deg); transform-origin: 0 0; }
body.scene-paused .mu-squeeze { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mu-squeeze { animation: none; } }
/* amy72: Munich finish-a-number - the Glockenspiel: Schäffler dancers, blue-white lozenges and the golden rooster by day; the night watchman and the Münchner Kindl at night */
.tc-mu-rauten {
  position: absolute; top: -4vh; width: 1.3vmin; height: 1.3vmin; background: var(--c);
  transform: rotate(45deg); box-shadow: 0 0 0.25vmin rgba(0, 20, 60, 0.35); opacity: 0;
  animation: tcMuRauten 2.4s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
@keyframes tcMuRauten {
  0% { transform: translate(0, 0) rotate(45deg) scaleY(1); opacity: 1; }
  50% { transform: translate(calc(var(--sx) * 0.5), 54vh) rotate(calc(45deg + var(--r) * 0.5)) scaleY(0.4); }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(calc(45deg + var(--r))) scaleY(1); opacity: 0; }
}
.tc-mu-schaeffler {
  position: absolute; bottom: 4vh; left: 0; display: flex; gap: 0.6vmin; height: 9vmin;
  animation: tcMuRow 3.3s ease-in-out forwards;
}
.tc-mu-dancer { width: 5.4vmin; height: 9vmin; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); animation: tcMuHop 0.44s ease-in-out infinite alternate; }
@keyframes tcMuHop { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-1.2vmin) rotate(4deg); } }
@keyframes tcMuRow { from { transform: translateX(-40vmin); } to { transform: translateX(calc(100vw + 4vmin)); } }
/* on a wide screen the coopers and the watchman stop and dance (or stand) beside the board */
.tc-mu-schaeffler.tc-mu-stay { animation: tcMuRowIn 3.3s ease-out forwards; }
.tc-mu-watch.tc-mu-stay { animation: tcMuWatchIn 3.3s ease-out forwards; }
@keyframes tcMuRowIn { 0% { transform: translateX(-40vmin); opacity: 1; } 35% { transform: translateX(var(--to)); } 85% { transform: translateX(var(--to)); opacity: 1; } 100% { transform: translateX(var(--to)); opacity: 0; } }
@keyframes tcMuWatchIn { 0% { transform: translateX(-10vmin); opacity: 0; } 8% { opacity: 1; } 45% { transform: translateX(var(--to)); } 85% { transform: translateX(var(--to)); opacity: 1; } 100% { transform: translateX(var(--to)); opacity: 0; } }
.tc-mu-rooster {
  position: absolute; width: 10vmin; height: 10vmin; opacity: 0;
  filter: drop-shadow(0 0 1.2vmin rgba(255, 210, 90, 0.7));
  animation: tcMuRooster 3.3s ease-out forwards;
}
.tc-mu-rooster svg { width: 100%; height: 100%; }
@keyframes tcMuRooster {
  0%, 18% { opacity: 0; transform: scale(0.6); }
  28% { opacity: 1; transform: scale(1.1); }
  38% { transform: scale(0.95) rotate(-6deg); }
  48% { transform: scale(1.12) rotate(4deg); }
  58% { transform: scale(0.96) rotate(-6deg); }
  68% { transform: scale(1.12) rotate(4deg); }
  88% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.tc-mu-watch {
  position: absolute; bottom: 4vh; left: 0; width: 8vmin; height: 12vmin;
  animation: tcMuWatch 3.3s linear forwards;
}
.tc-mu-watch svg { width: 100%; height: 100%; }
.tc-mu-lantern {
  position: absolute; left: 3%; top: 58%; width: 6vmin; height: 6vmin; margin: -3vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.7), rgba(255, 200, 100, 0) 70%);
  animation: tcMuFlicker 0.3s ease-in-out infinite alternate;
}
@keyframes tcMuFlicker { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes tcMuWatch { 0% { transform: translateX(-10vmin); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(100vw + 2vmin)); opacity: 0; } }
.tc-mu-angel {
  position: absolute; width: 20vmin; height: 12.5vmin; opacity: 0;
  filter: drop-shadow(0 0 1.6vmin rgba(255, 230, 160, 0.65));
  animation: tcMuAngel 3.3s ease-in-out forwards;
}
.tc-mu-angel svg { width: 100%; height: 100%; }
@keyframes tcMuAngel { 0% { opacity: 0; transform: translateY(2vmin); } 20% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1vmin); } }
.tc-mu-star {
  position: absolute; width: 0.7vmin; height: 0.7vmin; margin: -0.35vmin; border-radius: 50%;
  background: #fff6d8; box-shadow: 0 0 1vmin #ffe9a8; opacity: 0;
  animation: tcMuStar 1.8s ease-in-out forwards;
}
@keyframes tcMuStar { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(0.6); } }
@media (max-width: 600px) {
  .tc-mu-schaeffler { bottom: 2vh; height: 8vmin; }
  .tc-mu-dancer { width: 4.8vmin; height: 8vmin; }
  .tc-mu-watch { bottom: 2vh; }
}

/* —— amy73: Theme: Zurich (the old town, the lake and the Alps from the ETH Polyterrasse) —— */
body[data-theme="zurich"] {
  --bg: #0c1a2e;
  --bg-elevated: #15283f;
  --cyan: #5ab0f0;
  --magenta: #e8d6a0;
  --purple: #183456;
  --violet: #f6f8fa;
  --pink: #f2c6b0;
  --text: #f6f8fc;
  --text-dim: #c6d4e4;
  --cell-bg: rgba(10, 22, 40, 0.88);
  --cell-given: rgba(20, 40, 68, 0.93);
  --glow-cyan: 0 0 12px rgba(90, 176, 240, 0.45), 0 0 24px rgba(90, 176, 240, 0.2);
  --glow-magenta: 0 0 10px rgba(232, 214, 160, 0.5), 0 0 18px rgba(232, 214, 160, 0.2);
  --glow-purple: 0 0 10px rgba(24, 52, 86, 0.45);
  --accent: #5ab0f0;
  --accent2: #e8d6a0;
  --board-border: #5ab0f0;
  --board-bg: rgba(8, 18, 34, 0.92);
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body[data-theme="zurich"] .bg-glow { background: linear-gradient(180deg, #2462b8 0%, #a2c6ea 50%, #9a9a98 100%); }
body[data-theme="zurich"] .title {
  background: linear-gradient(90deg, #8ac6ff, #ffffff 50%, #8ac6ff);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(8, 18, 34, 0.6));
}
body[data-theme="zurich"] .stats,
body[data-theme="zurich"] .volume-row {
  background: rgba(8, 18, 34, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="zurich"] .stat-label,
body[data-theme="zurich"] .volume-label { color: #e6ecf6; }
body[data-theme="zurich"] .stat-value,
body[data-theme="zurich"] .volume-value { color: #9ccaff; text-shadow: 0 1px 2px rgba(6, 10, 24, 0.8); }
body[data-theme="zurich"] .track-label { color: #9ccaff; text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 8px rgba(6, 10, 24, 0.6); }
body[data-theme="zurich"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 6px rgba(6, 10, 24, 0.7); }
.zu-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.zu-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.zu-scene > canvas.zu-dark, .zu-scene > canvas.zu-lights { opacity: 0; visibility: hidden; }
/* a Freitag bag: recycled truck tarpaulin, every one a different patchwork */
.zu-freitag {
  position: absolute; left: 30px; bottom: 0; width: 13px; height: 10px; z-index: 4;
  background: linear-gradient(90deg, #e8c02a 0 40%, #2a5aa8 40% 62%, #e8e4dc 62%);
  border-radius: 2px; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35);
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.zu-freitag::after { content: ""; position: absolute; left: 2px; top: -4px; width: 8px; height: 5px; border: 1.4px solid #2a2a2e; border-bottom: 0; border-radius: 4px 4px 0 0; }
.zu-freitag-b { left: -14px; background: linear-gradient(90deg, #c8282e 0 30%, #f2f0ea 30% 70%, #3a7a3a 70%); }
/* a box of Luxemburgerli, mint green with the brown ribbon */
.zu-spruengli {
  position: absolute; left: 22px; top: 22px; width: 10px; height: 6px; z-index: 9;
  background: linear-gradient(90deg, #a8dccb 0 44%, #6a4a2e 44% 56%, #a8dccb 56%);
  border-radius: 1px; box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.6);
}
/* the paper, held open */
.zu-nzz {
  position: absolute; left: 14px; top: 16px; width: 16px; height: 11px; z-index: 9;
  background: repeating-linear-gradient(180deg, #f4f2ea 0 1.4px, #b8b6ae 1.4px 2px);
  border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
/* a Bernese mountain dog */
.zu-dog {
  position: absolute; left: 36px; bottom: 0; width: 15px; height: 8px; z-index: 4;
  background: linear-gradient(180deg, #1e1a18 0 55%, #f2ece2 55% 70%, #8a4a24 70%); border-radius: 4px 5px 2px 2px;
}
.zu-dog::before { content: ""; position: absolute; right: -5px; top: -4px; width: 7px; height: 6px; background: linear-gradient(90deg, #1e1a18 0 55%, #f2ece2 55%); border-radius: 3px 4px 3px 3px; }
.zu-dog::after { content: ""; position: absolute; left: -4px; top: 1px; width: 6px; height: 2.4px; background: #1e1a18; border-radius: 2px; transform: rotate(-24deg); }
.zu-dog-leash { position: absolute; left: -18px; top: -14px; width: 22px; height: 1px; background: #c8282e; transform: rotate(32deg); transform-origin: 0 0; }
/* amy73: Zurich finish-a-number - Sechseläuten: the Böögg burns and bursts under white-and-blue confetti by day; the Räbeliechtli lantern procession at night */
.tc-zu-flag {
  position: absolute; top: -4vh; width: 1.6vmin; height: 1.6vmin; opacity: 0;
  background: linear-gradient(135deg, #ffffff 0 50%, #1f6fd0 50%);
  box-shadow: 0 0 0.25vmin rgba(0, 20, 60, 0.35);
  animation: tcZuFlag 2.4s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
@keyframes tcZuFlag {
  0% { transform: translate(0, 0) rotate(0deg) scaleY(1); opacity: 1; }
  50% { transform: translate(calc(var(--sx) * 0.5), 54vh) rotate(calc(var(--r) * 0.5)) scaleY(0.4); }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(var(--r)) scaleY(1); opacity: 0; }
}
.tc-zu-boeoegg { position: absolute; opacity: 0; animation: tcZuShow 3.3s ease-out forwards; filter: drop-shadow(0 0 1vmin rgba(0, 0, 0, 0.3)); }
.tc-zu-boeoegg svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tcZuShow { 0% { opacity: 0; transform: translateY(2vmin); } 10% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; } 100% { opacity: 0; } }
.tc-zu-head { transform-box: fill-box; transform-origin: 50% 80%; animation: tcZuHead 3.3s ease-in forwards; }
@keyframes tcZuHead { 0%, 62% { transform: none; opacity: 1; } 66% { transform: translateY(-18%) scale(1.25) rotate(-8deg); opacity: 1; } 74% { transform: translateY(-120%) scale(0.4) rotate(40deg); opacity: 0; } 100% { opacity: 0; } }
.tc-zu-fire {
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 45%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 240, 160, 0.95) 0 18%, rgba(255, 150, 40, 0.85) 38%, rgba(220, 60, 20, 0.5) 60%, rgba(220, 60, 20, 0) 72%);
  border-radius: 50% 50% 20% 20% / 70% 70% 20% 20%;
  animation: tcZuFire 3.3s ease-in forwards, tcZuFlick 0.16s ease-in-out infinite alternate;
}
.tc-zu-fire-b { left: 24%; right: 24%; animation-delay: 0.15s, 0.08s; }
@keyframes tcZuFire { 0% { transform: scaleY(0.1); opacity: 0; } 15% { opacity: 1; } 60% { transform: scaleY(1.5); } 80% { transform: scaleY(1.9); opacity: 1; } 100% { transform: scaleY(1.6); opacity: 0; } }
@keyframes tcZuFlick { from { filter: brightness(0.9); } to { filter: brightness(1.25); } }
.tc-zu-burst {
  position: absolute; width: 0.9vmin; height: 0.9vmin; margin: -0.45vmin; border-radius: 50%; opacity: 0;
  background: #fff4c0; box-shadow: 0 0 1.2vmin #ffb040;
  animation: tcZuBurst 1s ease-out 2.15s forwards;
}
@keyframes tcZuBurst { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.4); } }
/* the lantern procession: across under the number pad on a phone, beside the board on a wide screen */
.tc-zu-raebe { position: absolute; bottom: 4vh; left: 0; display: flex; gap: 1.2vmin; height: 10vmin; animation: tcZuWalk 3.3s linear forwards; }
.tc-zu-raebe.tc-zu-side { bottom: 6vh; overflow: hidden; animation: tcZuFade 3.3s ease-in-out forwards; }
.tc-zu-raebe.tc-zu-side .tc-zu-kid { animation: tcZuSideWalk 3.3s linear forwards, tcZuBob 0.5s ease-in-out infinite alternate; }
.tc-zu-kid { position: relative; width: 5.2vmin; height: 10vmin; animation: tcZuBob 0.5s ease-in-out infinite alternate; }
.tc-zu-kid svg { width: 100%; height: 100%; }
.tc-zu-lantern {
  position: absolute; left: 52%; top: 50%; width: 3vmin; height: 2.6vmin; border-radius: 45% 45% 50% 50%;
  background: radial-gradient(circle at 50% 55%, #fff2b0 0 25%, #f0a040 55%, #c86a20 80%);
  box-shadow: 0 0 2.2vmin rgba(255, 190, 90, 0.9);
  animation: tcZuSway 0.7s ease-in-out infinite alternate;
}
@keyframes tcZuSway { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes tcZuBob { from { transform: translateY(0); } to { transform: translateY(-0.5vmin); } }
@keyframes tcZuWalk { 0% { transform: translateX(-45vmin); } 100% { transform: translateX(calc(100vw + 4vmin)); } }
@keyframes tcZuSideWalk { 0% { transform: translateX(-50vmin); } 100% { transform: translateX(10vmin); } }
@keyframes tcZuFade { 0% { opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.tc-zu-spark {
  position: absolute; width: 0.7vmin; height: 0.7vmin; margin: -0.35vmin; border-radius: 50%;
  background: #fff2c8; box-shadow: 0 0 1vmin #ffcf7a; opacity: 0;
  animation: tcZuSpark 1.8s ease-in-out forwards;
}
@keyframes tcZuSpark { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) {
  .tc-zu-fire, .tc-zu-lantern, .tc-zu-kid { animation-iteration-count: 1; }
}

/* —— amy74: Theme: Barcelona (the city, the Sagrada Família and the sea from the Bunkers del Carmel) —— */
body[data-theme="barcelona"] {
  --bg: #0e1a30;
  --bg-elevated: #172a46;
  --cyan: #3ab4e8;
  --magenta: #f4b83a;
  --purple: #1a3a64;
  --violet: #fff6e6;
  --pink: #f08a6a;
  --text: #fbf8f2;
  --text-dim: #d6dce8;
  --cell-bg: rgba(12, 24, 44, 0.88);
  --cell-given: rgba(22, 42, 72, 0.93);
  --glow-cyan: 0 0 12px rgba(58, 180, 232, 0.45), 0 0 24px rgba(58, 180, 232, 0.2);
  --glow-magenta: 0 0 10px rgba(244, 184, 58, 0.5), 0 0 18px rgba(244, 184, 58, 0.2);
  --glow-purple: 0 0 10px rgba(26, 58, 100, 0.45);
  --accent: #3ab4e8;
  --accent2: #f4b83a;
  --board-border: #3ab4e8;
  --board-bg: rgba(10, 20, 38, 0.92);
  --font-display: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
}
body[data-theme="barcelona"] .bg-glow { background: linear-gradient(180deg, #1f66c2 0%, #9cc8ee 40%, #4a88b4 48%, #a49e92 100%); }
body[data-theme="barcelona"] .title {
  background: linear-gradient(90deg, #f4b83a, #fff6e6 35%, #3ab4e8 65%, #f08a6a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(10, 20, 38, 0.6));
}
body[data-theme="barcelona"] .stats,
body[data-theme="barcelona"] .volume-row {
  background: rgba(10, 20, 38, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="barcelona"] .stat-label,
body[data-theme="barcelona"] .volume-label { color: #eef0f6; }
body[data-theme="barcelona"] .stat-value,
body[data-theme="barcelona"] .volume-value { color: #ffd27a; text-shadow: 0 1px 2px rgba(6, 10, 24, 0.8); }
body[data-theme="barcelona"] .track-label { color: #ffd27a; text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 8px rgba(6, 10, 24, 0.6); }
body[data-theme="barcelona"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 10, 24, 0.95), 0 0 6px rgba(6, 10, 24, 0.7); }
.bn-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bn-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.bn-scene > canvas.bn-dark, .bn-scene > canvas.bn-lights { opacity: 0; visibility: hidden; }
/* a beach towel in red and white stripes spread on the concrete */
.bn-towel {
  position: absolute; left: -8px; bottom: -3px; width: 44px; height: 6px; z-index: 0;
  background: repeating-linear-gradient(90deg, #d8423a 0 5px, #f6f2ea 5px 10px);
  border-radius: 2px; transform: scale(var(--char-scale, 1)) skewX(-30deg); transform-origin: left bottom; opacity: 0.95;
}
/* a bottle of cava */
.bn-cava {
  position: absolute; left: -10px; bottom: 0; width: 4px; height: 13px; z-index: 4;
  background: linear-gradient(180deg, #e8c84a 0 22%, #2a4a2a 22%); border-radius: 1.5px 1.5px 1px 1px;
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.bn-cava::after { content: ""; position: absolute; left: 0.5px; top: 7px; width: 3px; height: 3px; background: #f2ecd8; }
/* a Spanish guitar, held across the body */
.bn-guitar {
  position: absolute; left: 6px; top: 24px; width: 22px; height: 9px; z-index: 9;
  background: radial-gradient(circle at 30% 50%, #2a1a10 0 1.6px, transparent 1.8px), radial-gradient(ellipse at 28% 50%, #c88a48 0 62%, transparent 64%), radial-gradient(ellipse at 62% 50%, #c88a48 0 50%, transparent 52%);
  transform: rotate(-18deg); transform-origin: 30% 50%;
}
.bn-guitar::after { content: ""; position: absolute; left: 19px; top: 3.4px; width: 13px; height: 2px; background: #5a3a20; border-radius: 1px; }
/* a little ratter on a lead */
.bn-dog {
  position: absolute; left: 36px; bottom: 0; width: 12px; height: 6px; z-index: 4;
  background: linear-gradient(180deg, #c8a070 0 70%, #8a6a40 70%); border-radius: 3px 4px 2px 2px;
}
.bn-dog::before { content: ""; position: absolute; right: -4px; top: -4px; width: 6px; height: 5px; background: #c8a070; border-radius: 2px 3px 3px 3px; }
.bn-dog::after { content: ""; position: absolute; left: -3px; top: 0; width: 4px; height: 2px; background: #c8a070; border-radius: 2px; transform: rotate(-30deg); }
.bn-dog-leash { position: absolute; left: -18px; top: -14px; width: 22px; height: 1px; background: #3a3030; opacity: 0.8; transform: rotate(32deg); transform-origin: 0 0; }
/* amy74: Barcelona finish-a-number - a castell rises and the enxaneta raises her hand under the senyera's stripes by day; a correfoc's devils and sparks at night */
.tc-bn-flag {
  position: absolute; top: -4vh; width: 1.8vmin; height: 1.3vmin; opacity: 0;
  background: repeating-linear-gradient(180deg, #f4c430 0 0.15vmin, #d8242c 0.15vmin 0.3vmin);
  box-shadow: 0 0 0.25vmin rgba(60, 20, 0, 0.35);
  animation: tcBnFlag 1.2s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
@keyframes tcBnFlag {
  0% { transform: translate(0, 0) rotate(0deg) scaleY(1); opacity: 1; }
  50% { transform: translate(calc(var(--sx) * 0.5), 54vh) rotate(calc(var(--r) * 0.5)) scaleY(0.4); }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(var(--r)) scaleY(1); opacity: 0; }
}
.tc-bn-castell { position: absolute; opacity: 0; animation: tcBnShow 3.3s ease-out forwards; filter: drop-shadow(0 0 1vmin rgba(0, 0, 0, 0.35)); }
.tc-bn-castell svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tcBnShow { 0% { opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
.tc-bn-lv { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: tcBnUp 0.32s ease-out forwards; }
@keyframes tcBnUp { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: none; } }
.tc-bn-aleta { opacity: 0; animation: tcBnAleta 0.6s ease-out 2.05s forwards; }
@keyframes tcBnAleta { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }
.tc-bn-top { animation: tcBnUp 0.32s ease-out forwards, tcBnWave 0.25s ease-in-out 2.1s 4 alternate; }
@keyframes tcBnWave { from { transform: none; } to { transform: translateY(-4%); } }
/* the correfoc: across under the number pad on a phone, beside the board on a wide screen */
.tc-bn-diables { position: absolute; bottom: 4vh; left: 0; display: flex; gap: 2vmin; height: 12vmin; animation: tcBnRun 3.3s linear forwards; }
.tc-bn-diables.tc-bn-side { bottom: 8vh; overflow: hidden; animation: tcBnFade 3.3s ease-in-out forwards; }
.tc-bn-diables.tc-bn-side .tc-bn-diable { animation: tcBnSideRun 3.3s linear forwards, tcBnHop 0.3s ease-in-out infinite alternate; }
.tc-bn-diable { position: relative; width: 7vmin; height: 12vmin; animation: tcBnHop 0.3s ease-in-out infinite alternate; }
.tc-bn-diable svg { width: 100%; height: 100%; }
.tc-bn-carretilla {
  position: absolute; left: 78%; top: -6%; width: 4vmin; height: 4vmin; margin: -2vmin; border-radius: 50%;
  background: radial-gradient(circle, #fff6c8 0 18%, rgba(255, 190, 80, 0.9) 34%, rgba(255, 110, 30, 0.4) 58%, rgba(255, 110, 30, 0) 72%);
  box-shadow: 0 0 3vmin rgba(255, 170, 60, 0.9);
  animation: tcBnSpin 0.18s linear infinite;
}
@keyframes tcBnSpin { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.15); } }
@keyframes tcBnHop { from { transform: translateY(0); } to { transform: translateY(-0.8vmin); } }
@keyframes tcBnRun { 0% { transform: translateX(-45vmin); } 100% { transform: translateX(calc(100vw + 4vmin)); } }
@keyframes tcBnSideRun { 0% { transform: translateX(-50vmin); } 100% { transform: translateX(12vmin); } }
@keyframes tcBnFade { 0% { opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.tc-bn-spark {
  position: absolute; width: 0.6vmin; height: 0.6vmin; margin: -0.3vmin; border-radius: 50%;
  background: #fff2c0; box-shadow: 0 0 1vmin #ffaf40; opacity: 0;
  animation: tcBnSpark 0.9s ease-out forwards;
}
@keyframes tcBnSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1.3); } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.3); } }
@media (prefers-reduced-motion: reduce) {
  .tc-bn-carretilla, .tc-bn-diable, .tc-bn-top { animation-iteration-count: 1; }
}

/* —— amy76: Theme: Reykjavík (Mt Esja, Harpa and Hallgrímskirkja across the harbour from Grandi) —— */
body[data-theme="reykjavik"] {
  --bg: #0a1426;
  --bg-elevated: #13223c;
  --cyan: #4ee0a8;
  --magenta: #ff7ac0;
  --purple: #1c3456;
  --violet: #f2f6ff;
  --pink: #b89cff;
  --text: #f6f8fc;
  --text-dim: #d2dcea;
  --cell-bg: rgba(10, 20, 38, 0.88);
  --cell-given: rgba(20, 38, 66, 0.93);
  --glow-cyan: 0 0 12px rgba(78, 224, 168, 0.45), 0 0 24px rgba(78, 224, 168, 0.2);
  --glow-magenta: 0 0 10px rgba(255, 122, 192, 0.5), 0 0 18px rgba(255, 122, 192, 0.2);
  --glow-purple: 0 0 10px rgba(28, 52, 86, 0.45);
  --accent: #4ee0a8;
  --accent2: #ff7ac0;
  --board-border: #4ee0a8;
  --board-bg: rgba(8, 18, 34, 0.92);
  --font-display: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
}
body[data-theme="reykjavik"] .bg-glow { background: linear-gradient(180deg, #2458a0 0%, #a4c6e2 50%, #3e6e8e 58%, #a2a19c 100%); }
body[data-theme="reykjavik"] .title {
  background: linear-gradient(90deg, #4ee0a8, #f2f6ff 35%, #8ab4ff 65%, #ff7ac0);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(8, 18, 34, 0.6));
}
body[data-theme="reykjavik"] .stats,
body[data-theme="reykjavik"] .volume-row {
  background: rgba(8, 18, 34, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="reykjavik"] .stat-label,
body[data-theme="reykjavik"] .volume-label { color: #eef2f8; }
body[data-theme="reykjavik"] .stat-value,
body[data-theme="reykjavik"] .volume-value { color: #8ef0c4; text-shadow: 0 1px 2px rgba(4, 10, 22, 0.8); }
body[data-theme="reykjavik"] .track-label { color: #8ef0c4; text-shadow: 0 1px 3px rgba(4, 10, 22, 0.95), 0 0 8px rgba(4, 10, 22, 0.6); }
body[data-theme="reykjavik"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(4, 10, 22, 0.95), 0 0 6px rgba(4, 10, 22, 0.7); }
.rk-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rk-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.rk-scene > canvas.rk-dark, .rk-scene > canvas.rk-lights, .rk-scene > canvas.rk-aur-refl { opacity: 0; visibility: hidden; }
/* the northern lights: the curtains drift, fold and brighten, the rays shimmer */
.rk-aur { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: filter 1.2s ease-out; }
.rk-aur > canvas { position: absolute; left: -2%; top: 0; width: 104%; pointer-events: none; transform-origin: 50% 100%; mix-blend-mode: screen; }
.rk-aur-0 { animation: rkAurA 19s ease-in-out infinite alternate, rkAurF 4.3s ease-in-out infinite alternate; }
.rk-aur-1 { animation: rkAurB 23s ease-in-out infinite alternate, rkAurF 5.7s ease-in-out -2s infinite alternate; }
@keyframes rkAurA { 0% { transform: translateX(-1.6%) scaleY(0.92) skewX(-3deg); } 50% { transform: translateX(0.6%) scaleY(1.06) skewX(1.5deg); } 100% { transform: translateX(1.6%) scaleY(0.97) skewX(3.5deg); } }
@keyframes rkAurB { 0% { transform: translateX(1.4%) scaleY(1.04) skewX(2.5deg); } 50% { transform: translateX(-0.8%) scaleY(0.9) skewX(-1.5deg); } 100% { transform: translateX(-1.4%) scaleY(1.08) skewX(-3deg); } }
@keyframes rkAurF { 0% { opacity: 0.72; } 40% { opacity: 1; } 70% { opacity: 0.84; } 100% { opacity: 0.95; } }
.rk-aur.rk-surge { filter: brightness(1.22) saturate(1.1); }
.rk-scene > canvas.rk-aur-refl { animation: rkAurR 6s ease-in-out infinite alternate; }
@keyframes rkAurR { from { filter: brightness(0.85); } to { filter: brightness(1.15); } }
/* the Imagine Peace Tower's beam over Viðey */
.rk-beam {
  position: absolute; width: 8px; opacity: 0; visibility: hidden; pointer-events: none;
  background: linear-gradient(0deg, rgba(236, 244, 255, 0.75) 0%, rgba(220, 234, 255, 0.35) 35%, rgba(200, 220, 255, 0.08) 80%, rgba(200, 220, 255, 0) 100%);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 40%, #000 60%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 40%, #000 60%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .rk-aur > canvas, .rk-scene > canvas.rk-aur-refl { animation: none; }
}
/* a lopapeysa: the round yoke of the Icelandic wool sweater */
.rk-lopi {
  position: absolute; left: -1px; top: 0; width: 22px; height: 7px; z-index: 3; border-radius: 5px 5px 2px 2px;
  background: repeating-linear-gradient(90deg, #3a3a40 0 2px, #f2ece0 2px 3px, #8a5a3a 3px 5px, #f2ece0 5px 6px);
  box-shadow: inset 0 -1.5px 0 #3a3a40;
}
/* the photographer's tripod */
.rk-tripod {
  position: absolute; left: 30px; bottom: 0; width: 14px; height: 30px; z-index: 2;
  background: linear-gradient(100deg, transparent 46%, #2a2a30 47% 53%, transparent 54%), linear-gradient(80deg, transparent 46%, #2a2a30 47% 53%, transparent 54%), linear-gradient(90deg, transparent 45%, #2a2a30 46% 54%, transparent 55%);
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.rk-tripod::after { content: ""; position: absolute; left: 3px; top: -3px; width: 8px; height: 5px; background: #1a1a1e; border-radius: 1px; }
.rk-tripod.rk-l { left: -16px; }
/* a fishing rod over the quay's edge */
.rk-rod { position: absolute; left: 20px; top: 20px; width: 34px; height: 1.2px; background: #2a2a2a; transform: rotate(-38deg); transform-origin: 0 50%; z-index: 9; }
.rk-rod::after { content: ""; position: absolute; right: 0; top: 0; width: 0.8px; height: 26px; background: rgba(240, 240, 240, 0.7); }
/* an Icelandic sheepdog on a lead */
.rk-dog {
  position: absolute; left: 36px; bottom: 0; width: 12px; height: 7px; z-index: 4;
  background: linear-gradient(180deg, #e8d2a8 0 60%, #b88a50 60%); border-radius: 3px 4px 2px 2px;
}
.rk-dog::before { content: ""; position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; background: #c89a60; border-radius: 2px 3px 3px 3px; }
.rk-dog::after { content: ""; position: absolute; left: -4px; top: -4px; width: 5px; height: 5px; border: 1.5px solid #e8d2a8; border-color: #e8d2a8 transparent transparent #e8d2a8; border-radius: 50%; }
.rk-dog-leash { position: absolute; left: -18px; top: -14px; width: 22px; height: 1px; background: #d8462e; transform: rotate(32deg); transform-origin: 0 0; }
/* amy76: Reykjavík finish-a-number - the Viking thunderclap ("HÚH!") with raised arms and falling Icelandic flags by day; ribbons of northern lights at night */
.tc-rk-flag {
  position: absolute; top: -4vh; width: 2vmin; height: 1.44vmin; opacity: 0;
  background:
    linear-gradient(90deg, transparent 32%, #dc1e35 32% 40%, transparent 40%),
    linear-gradient(180deg, transparent 44%, #dc1e35 44% 56%, transparent 56%),
    linear-gradient(90deg, transparent 28%, #fff 28% 44%, transparent 44%),
    linear-gradient(180deg, transparent 36%, #fff 36% 64%, transparent 64%),
    #02529c;
  box-shadow: 0 0 0.25vmin rgba(0, 20, 60, 0.35);
  animation: tcRkFlag 1.2s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
@keyframes tcRkFlag {
  0% { transform: translate(0, 0) rotate(0deg) scaleY(1); opacity: 1; }
  50% { transform: translate(calc(var(--sx) * 0.5), 54vh) rotate(calc(var(--r) * 0.5)) scaleY(0.4); }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(var(--r)) scaleY(1); opacity: 0; }
}
.tc-rk-clap { position: absolute; filter: drop-shadow(0 0 1vmin rgba(0, 0, 0, 0.4)); }
.tc-rk-clap svg { width: 100%; height: 100%; overflow: visible; }
.tc-rk-arm { transform-box: view-box; transform-origin: 50% 100%; animation: tcRkClap 3.3s linear forwards; opacity: 0; }
.tc-rk-al { --o: -14px; --c: 6px; --rot: -8deg; }
.tc-rk-ar { --o: 14px; --c: -6px; --rot: 8deg; }
@keyframes tcRkClap {
  0% { transform: translateX(var(--o)) rotate(var(--rot)); opacity: 0; }
  3% { transform: translateX(var(--o)) rotate(var(--rot)); opacity: 1; }
  4.5% { transform: translateX(var(--c)) rotate(0deg); }
  16.7% { transform: translateX(var(--o)) rotate(var(--rot)); }
  28.8% { transform: translateX(var(--c)) rotate(0deg); }
  38.6% { transform: translateX(var(--o)) rotate(var(--rot)); }
  48.5% { transform: translateX(var(--c)) rotate(0deg); }
  56.1% { transform: translateX(var(--o)) rotate(var(--rot)); }
  63.6% { transform: translateX(var(--c)) rotate(0deg); }
  68.9% { transform: translateX(var(--o)) rotate(var(--rot)); }
  74.2% { transform: translateX(var(--c)) rotate(0deg); }
  78.0% { transform: translateX(var(--o)) rotate(var(--rot)); }
  81.8% { transform: translateX(var(--c)) rotate(0deg); }
  84.2% { transform: translateX(var(--o)) rotate(var(--rot)); }
  86.7% { transform: translateX(var(--c)) rotate(0deg); }
  88.5% { transform: translateX(var(--o)) rotate(var(--rot)); }
  90.3% { transform: translateX(var(--c)) rotate(0deg); }
  96% { transform: translateX(var(--o)) rotate(var(--rot)); opacity: 1; }
  100% { transform: translateX(var(--o)) rotate(var(--rot)); opacity: 0; }
}
.tc-rk-huh {
  position: absolute; transform: translate(-50%, -50%) scale(0.6); opacity: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.04em; color: #fff;
  text-shadow: 0 0 1.2vmin rgba(2, 82, 156, 0.95), 0 0.3vmin 0 #dc1e35, 0 0 3vmin rgba(255, 255, 255, 0.5);
  animation: tcRkHuh 0.3s ease-out forwards;
}
@keyframes tcRkHuh { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
/* after dark: the aurora sweeps across */
.tc-rk-ribbon {
  position: absolute; left: -60vw; width: 220vw; height: 26vh; opacity: 0; border-radius: 50%;
  filter: blur(1.6vmin); mix-blend-mode: screen; transform-origin: 50% 50%;
  animation: tcRkRibbon 2.8s ease-in-out forwards;
}
@keyframes tcRkRibbon {
  0% { opacity: 0; transform: translateX(-20vw) skewX(-24deg) scaleY(0.4); }
  25% { opacity: 0.85; }
  55% { transform: translateX(10vw) skewX(18deg) scaleY(1.1); opacity: 0.95; }
  100% { opacity: 0; transform: translateX(30vw) skewX(-12deg) scaleY(0.7); }
}
.tc-rk-star {
  position: absolute; width: 0.5vmin; height: 0.5vmin; margin: -0.25vmin; border-radius: 50%;
  background: #f2fff8; box-shadow: 0 0 1vmin #8affc8; opacity: 0;
  animation: tcRkStar 1.2s ease-in-out forwards;
}
@keyframes tcRkStar { 0% { opacity: 0; transform: scale(0.4); } 40% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(0.6); } }

/* —— amy78: Theme: Hong Kong (Victoria Harbour and the Island skyline from the Avenue of Stars) —— */
body[data-theme="hongkong"] {
  --bg: #0a1022;
  --bg-elevated: #141c36;
  --cyan: #5ad8ff;
  --magenta: #ff4a6a;
  --purple: #24204a;
  --violet: #fff4f0;
  --pink: #ffc24a;
  --text: #f8f6fc;
  --text-dim: #dcd8ea;
  --cell-bg: rgba(12, 16, 36, 0.88);
  --cell-given: rgba(26, 30, 62, 0.93);
  --glow-cyan: 0 0 12px rgba(90, 216, 255, 0.45), 0 0 24px rgba(90, 216, 255, 0.2);
  --glow-magenta: 0 0 10px rgba(255, 74, 106, 0.5), 0 0 18px rgba(255, 74, 106, 0.2);
  --glow-purple: 0 0 10px rgba(36, 32, 74, 0.45);
  --accent: #ff4a6a;
  --accent2: #ffc24a;
  --board-border: #ff4a6a;
  --board-bg: rgba(10, 14, 32, 0.92);
  --font-display: "Avenir Next", "PingFang HK", "Microsoft JhengHei", "Trebuchet MS", sans-serif;
}
body[data-theme="hongkong"] .bg-glow { background: linear-gradient(180deg, #4a7ab0 0%, #b8cada 50%, #3c6a84 60%, #bdbab2 100%); }
body[data-theme="hongkong"] .title {
  background: linear-gradient(90deg, #ff4a6a, #fff4f0 35%, #ffc24a 65%, #5ad8ff);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(10, 14, 32, 0.6));
}
body[data-theme="hongkong"] .stats,
body[data-theme="hongkong"] .volume-row {
  background: rgba(10, 14, 32, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="hongkong"] .stat-label,
body[data-theme="hongkong"] .volume-label { color: #f2eef8; }
body[data-theme="hongkong"] .stat-value,
body[data-theme="hongkong"] .volume-value { color: #ffd27a; text-shadow: 0 1px 2px rgba(6, 8, 20, 0.8); }
body[data-theme="hongkong"] .track-label { color: #ffd27a; text-shadow: 0 1px 3px rgba(6, 8, 20, 0.95), 0 0 8px rgba(6, 8, 20, 0.6); }
body[data-theme="hongkong"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 8, 20, 0.95), 0 0 6px rgba(6, 8, 20, 0.7); }
.hk-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hk-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.hk-scene > canvas.hk-dark, .hk-scene > canvas.hk-lights { opacity: 0; visibility: hidden; }
/* the harbour's mirror: the streaks of light sway gently with the swell */
.hk-reflbox { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.hk-reflbox > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; transform-origin: 50% 0; animation: hkSwell 7s ease-in-out infinite alternate; }
@keyframes hkSwell { 0% { transform: scaleY(0.97) translateX(-1px); } 50% { transform: scaleY(1.03) translateX(1px); } 100% { transform: scaleY(0.99) translateX(-0.5px); } }
@media (prefers-reduced-motion: reduce) {
  .hk-reflbox > canvas { animation: none; }
}
/* the photographer's tripod */
.hk-tripod {
  position: absolute; left: 30px; bottom: 0; width: 14px; height: 30px; z-index: 2;
  background: linear-gradient(100deg, transparent 46%, #2a2a30 47% 53%, transparent 54%), linear-gradient(80deg, transparent 46%, #2a2a30 47% 53%, transparent 54%), linear-gradient(90deg, transparent 45%, #2a2a30 46% 54%, transparent 55%);
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.hk-tripod::after { content: ""; position: absolute; left: 3px; top: -3px; width: 8px; height: 5px; background: #1a1a1e; border-radius: 1px; }
.hk-tripod.hk-l { left: -16px; }
/* a cup of Hong Kong milk tea */
.hk-tea { position: absolute; left: 21px; top: 21px; width: 5px; height: 6px; background: linear-gradient(180deg, #c89a6a 0 30%, #f4f0e8 30%); border-radius: 0 0 1.5px 1.5px; z-index: 9; }
/* a shiba on a lead */
.hk-dog {
  position: absolute; left: 36px; bottom: 0; width: 12px; height: 7px; z-index: 4;
  background: linear-gradient(180deg, #d8904a 0 60%, #f4e8d8 60%); border-radius: 3px 4px 2px 2px;
}
.hk-dog::before { content: ""; position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; background: #d8904a; border-radius: 2px 3px 3px 3px; }
.hk-dog::after { content: ""; position: absolute; left: -4px; top: -4px; width: 5px; height: 5px; border: 1.5px solid #d8904a; border-color: #d8904a transparent transparent #d8904a; border-radius: 50%; }
.hk-dog-leash { position: absolute; left: -18px; top: -14px; width: 22px; height: 1px; background: #d8242a; transform: rotate(32deg); transform-origin: 0 0; }
/* amy78: Hong Kong finish-a-number - a lion dance with red packets and gold by day; fireworks over the harbour at night */
.tc-hk-packet, .tc-hk-gold {
  position: absolute; top: -4vh; opacity: 0;
  animation: tcHkFall 1.8s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
.tc-hk-packet { width: 1.6vmin; height: 2.4vmin; border-radius: 0.2vmin; background: linear-gradient(180deg, #d8242a 0 70%, #b81c22 70%); box-shadow: inset 0 0 0 0.18vmin #f2c23a; }
.tc-hk-gold { width: 1.1vmin; height: 1.1vmin; background: linear-gradient(135deg, #fff2b0, #f2c23a 50%, #c89a2a); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@keyframes tcHkFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  50% { transform: translate(calc(var(--sx) * 0.5), 54vh) rotate(calc(var(--r) * 0.5)); }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(var(--r)); opacity: 0; }
}
.tc-hk-lion { position: absolute; filter: drop-shadow(0 0 1vmin rgba(0, 0, 0, 0.4)); opacity: 0; transform-origin: 50% 100%; animation: tcHkLion 3.2s ease-in-out forwards; }
.tc-hk-lion svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tcHkLion {
  0% { opacity: 0; transform: translateY(30%) scale(0.7); }
  8% { opacity: 1; transform: translateY(0) scale(1) rotate(-6deg); }
  20% { transform: translateY(-6%) rotate(6deg); }
  32% { transform: translateY(0) rotate(-5deg); }
  44% { transform: translateY(-8%) rotate(5deg); }
  56% { transform: translateY(0) rotate(-4deg); }
  66% { transform: translateY(-14%) scale(1.06) rotate(0deg); }
  80% { transform: translateY(-4%) scale(1.1) rotate(3deg); }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10%) scale(0.95); }
}
.tc-hk-lid { animation: tcHkBlink 3.2s steps(1) forwards; }
@keyframes tcHkBlink { 0%, 30%, 34%, 60%, 64%, 100% { height: 0; } 31%, 61% { height: 24px; } }
.tc-hk-jaw { transform-box: fill-box; transform-origin: 50% 0; animation: tcHkJaw 0.4s ease-in-out 6 alternate; }
@keyframes tcHkJaw { from { transform: translateY(0); } to { transform: translateY(12%); } }
/* after dark: fireworks */
.tc-hk-flash { position: absolute; width: 30vmin; height: 30vmin; margin: -15vmin; border-radius: 50%; opacity: 0; mix-blend-mode: screen; animation: tcHkFlash 0.9s ease-out forwards; }
@keyframes tcHkFlash { 0% { opacity: 0; transform: scale(0.2); } 15% { opacity: 0.8; } 100% { opacity: 0; transform: scale(1.2); } }
.tc-hk-spark { position: absolute; width: 0.6vmin; height: 0.6vmin; margin: -0.3vmin; border-radius: 50%; opacity: 0; animation: tcHkSpark 1.6s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes tcHkSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(1.4); }
  6% { opacity: 1; }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.5); }
}

/* —— amy79: Theme: Portland (downtown, the Willamette bridges and Mt Hood from the Rose Test Garden) —— */
body[data-theme="portland"] {
  --bg: #0e1a16;
  --bg-elevated: #18282a;
  --cyan: #6ad8c8;
  --magenta: #ee4c6a;
  --purple: #24343a;
  --violet: #fff4f4;
  --pink: #f6c45a;
  --text: #f6f8f4;
  --text-dim: #d8e2dc;
  --cell-bg: rgba(12, 24, 22, 0.88);
  --cell-given: rgba(24, 40, 38, 0.93);
  --glow-cyan: 0 0 12px rgba(106, 216, 200, 0.45), 0 0 24px rgba(106, 216, 200, 0.2);
  --glow-magenta: 0 0 10px rgba(238, 76, 106, 0.5), 0 0 18px rgba(238, 76, 106, 0.2);
  --glow-purple: 0 0 10px rgba(36, 52, 58, 0.45);
  --accent: #ee4c6a;
  --accent2: #f6c45a;
  --board-border: #ee4c6a;
  --board-bg: rgba(10, 22, 20, 0.92);
  --font-display: "Avenir Next", "Trebuchet MS", sans-serif;
}
body[data-theme="portland"] .bg-glow { background: linear-gradient(180deg, #6a8eaa 0%, #c2ccd2 50%, #3a5a4a 62%, #6a8a5a 100%); }
body[data-theme="portland"] .title {
  background: linear-gradient(90deg, #ee4c6a, #fff4f4 35%, #f6c45a 65%, #6ad8c8);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(10, 22, 20, 0.6));
}
body[data-theme="portland"] .stats,
body[data-theme="portland"] .volume-row {
  background: rgba(10, 22, 20, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="portland"] .stat-label,
body[data-theme="portland"] .volume-label { color: #f2f6f0; }
body[data-theme="portland"] .stat-value,
body[data-theme="portland"] .volume-value { color: #ffd27a; text-shadow: 0 1px 2px rgba(6, 14, 12, 0.8); }
body[data-theme="portland"] .track-label { color: #ffd27a; text-shadow: 0 1px 3px rgba(6, 14, 12, 0.95), 0 0 8px rgba(6, 14, 12, 0.6); }
body[data-theme="portland"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 14, 12, 0.95), 0 0 6px rgba(6, 14, 12, 0.7); }
.pd-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pd-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.pd-scene > canvas.pd-dark, .pd-scene > canvas.pd-lights,
.pd-scene > canvas.pd-sky-set, .pd-scene > canvas.pd-sky-rise, .pd-scene > canvas.pd-sky-night, .pd-scene > canvas.pd-sky-rain,
.pd-scene > canvas.pd-alpen, .pd-scene > canvas.pd-mist { opacity: 0; visibility: hidden; }
/* the photographer's tripod */
.pd-tripod {
  position: absolute; left: 30px; bottom: 0; width: 14px; height: 30px; z-index: 2;
  background: linear-gradient(100deg, transparent 46%, #2a2a30 47% 53%, transparent 54%), linear-gradient(80deg, transparent 46%, #2a2a30 47% 53%, transparent 54%), linear-gradient(90deg, transparent 45%, #2a2a30 46% 54%, transparent 55%);
  transform: scale(var(--char-scale, 1)); transform-origin: left bottom;
}
.pd-tripod::after { content: ""; position: absolute; left: 3px; top: -3px; width: 8px; height: 5px; background: #1a1a1e; border-radius: 1px; }
.pd-tripod.pd-l { left: -16px; }
/* a food-cart coffee in a paper cup */
.pd-cup { position: absolute; left: 21px; top: 21px; width: 5px; height: 6px; background: linear-gradient(180deg, #f4f0e8 0 25%, #8a5a3a 25% 45%, #f4f0e8 45%); border-radius: 0 0 1.5px 1.5px; z-index: 9; }
/* a dog on a lead */
.pd-dog {
  position: absolute; left: 36px; bottom: 0; width: 13px; height: 7px; z-index: 4;
  background: linear-gradient(180deg, #2a2420 0 65%, #3a322c 65%); border-radius: 3px 4px 2px 2px;
}
.pd-dog::before { content: ""; position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; background: #2a2420; border-radius: 2px 3px 3px 3px; }
.pd-dog::after { content: ""; position: absolute; left: -4px; top: -3px; width: 5px; height: 2px; background: #2a2420; border-radius: 2px; transform: rotate(-30deg); }
.pd-dog-leash { position: absolute; left: -18px; top: -14px; width: 22px; height: 1px; background: #2a8a6a; transform: rotate(32deg); transform-origin: 0 0; }
/* the bike being wheeled along */
.pd-bike { position: absolute; left: 26px; bottom: 0; width: 28px; height: 16px; z-index: 4; }
.pd-bike-w { position: absolute; bottom: 0; width: 12px; height: 12px; border: 1.6px solid #1c1c20; border-radius: 50%; box-sizing: border-box; }
.pd-bike-w::after { content: ""; position: absolute; left: 4px; top: 4px; width: 1.5px; height: 1.5px; background: #888; border-radius: 50%; }
.pd-bike-a { left: 0; }
.pd-bike-b { right: 0; }
.pd-bike-f { position: absolute; left: 6px; bottom: 5px; width: 16px; height: 6px; border-top: 2px solid #2a7a8a; border-left: 2px solid #2a7a8a; transform: skewX(-25deg); box-sizing: border-box; }
.pd-bike-f::before { content: ""; position: absolute; left: -4px; top: -5px; width: 6px; height: 2px; background: #1c1c20; }
.pd-bike-f::after { content: ""; position: absolute; right: -3px; top: -6px; width: 2px; height: 6px; background: #1c1c20; }
/* a brolly goes up when the drizzle sets in */
.pd-umb {
  position: absolute; left: -7px; top: -17px; width: 48px; height: 44px; z-index: 9;
  opacity: 0; transform: scale(0.25, 0.1); transform-origin: 50% 70%;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
  pointer-events: none;
}
.pd-umb::before {
  content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 15px;
  border-radius: 24px 24px 3px 3px / 15px 15px 3px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.0) 0 7px, rgba(255, 255, 255, 0.16) 7px 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(0, 0, 0, 0.18)),
    var(--umb, #1c1c22);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.pd-umb::after {
  content: ""; position: absolute; left: 23px; top: 1px; width: 5px; height: 40px;
  border-left: 2px solid #2a2a2e; border-bottom: 2px solid #2a2a2e; border-bottom-left-radius: 4px;
  box-sizing: border-box;
}
.pd-wet .pd-umb { opacity: 1; transform: scale(1, 1); }
@media (prefers-reduced-motion: reduce) { .pd-umb { transition: none; } }
/* amy79: Portland finish-a-number - a rose blooms under falling petals by day; a neon "PORTLAND OREGON" sign and fireworks at night */
.tc-pd-petal {
  position: absolute; top: -4vh; width: 1.5vmin; height: 1.1vmin; border-radius: 60% 40% 60% 40%; opacity: 0;
  animation: tcPdFall 1.8s cubic-bezier(0.35, 0.1, 0.6, 1) forwards;
}
@keyframes tcPdFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  50% { transform: translate(calc(var(--sx) * 0.5), 54vh) rotate(calc(var(--r) * 0.5)); }
  85% { opacity: 1; }
  100% { transform: translate(var(--sx), 108vh) rotate(var(--r)); opacity: 0; }
}
.tc-pd-rose { position: absolute; opacity: 0; filter: drop-shadow(0 0 1.2vmin rgba(0, 0, 0, 0.35)); animation: tcPdRose 3.2s ease-out forwards; }
.tc-pd-rose svg { width: 100%; height: 100%; overflow: visible; }
@keyframes tcPdRose {
  0% { opacity: 0; transform: translateY(20%) scale(0.6) rotate(-10deg); }
  10% { opacity: 1; }
  45% { transform: translateY(0) scale(1) rotate(0deg); }
  80% { opacity: 1; transform: scale(1.05) rotate(4deg); }
  100% { opacity: 0; transform: scale(1.1) rotate(6deg); }
}
.tc-pd-pet { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.15); animation: tcPdOpen 1.1s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards; }
.tc-pd-r3 { animation-delay: 0.15s; }
.tc-pd-r2 { animation-delay: 0.35s; }
.tc-pd-r1 { animation-delay: 0.55s; }
.tc-pd-r0 { animation-delay: 0.75s; }
@keyframes tcPdOpen { to { transform: scale(1); } }
.tc-pd-leaf { transform-box: fill-box; transform-origin: 100% 50%; animation: tcPdOpen 0.8s ease-out forwards; transform: scale(0.3); }
.tc-pd-sign { position: absolute; opacity: 0; animation: tcPdSign 3.2s linear forwards; }
.tc-pd-sign svg { width: 100%; height: 100%; overflow: visible; }
.tc-pd-or { stroke: #ffd24a; stroke-width: 2; filter: drop-shadow(0 0 3px #ffb020); }
.tc-pd-stag { stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #ff6a6a); }
.tc-pd-t1 { font: 700 26px "Avenir Next", "Trebuchet MS", sans-serif; fill: #fff4f4; letter-spacing: 2px; stroke: #ff3a3a; stroke-width: 0.8; filter: drop-shadow(0 0 3px #ff3a3a) drop-shadow(0 0 7px #ff2a2a); }
.tc-pd-t2 { font: 700 15px "Avenir Next", "Trebuchet MS", sans-serif; fill: #ff5a5a; letter-spacing: 6px; filter: drop-shadow(0 0 4px #ff2a2a); }
@keyframes tcPdSign {
  0% { opacity: 0; } 4% { opacity: 1; } 6% { opacity: 0.2; } 9% { opacity: 1; } 11% { opacity: 0.4; } 14% { opacity: 1; }
  88% { opacity: 1; } 100% { opacity: 0; }
}
.tc-pd-flash { position: absolute; width: 30vmin; height: 30vmin; margin: -15vmin; border-radius: 50%; opacity: 0; mix-blend-mode: screen; animation: tcPdFlash 0.9s ease-out forwards; }
@keyframes tcPdFlash { 0% { opacity: 0; transform: scale(0.2); } 15% { opacity: 0.8; } 100% { opacity: 0; transform: scale(1.2); } }
.tc-pd-spark { position: absolute; width: 0.6vmin; height: 0.6vmin; margin: -0.3vmin; border-radius: 50%; opacity: 0; animation: tcPdSpark 1.6s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes tcPdSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(1.4); }
  6% { opacity: 1; }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 6vmin)) scale(0.5); }
}

/* —— amy81: Theme: the Maldives (Baa Atoll's lagoon from a Sunset Water Villa at Landaa Giraavaru) —— */
body[data-theme="maldives"] {
  --bg: #06222e;
  --bg-elevated: #0c3242;
  --cyan: #46e0d6;
  --magenta: #ff7a5a;
  --purple: #0e3a4a;
  --violet: #f4fffc;
  --pink: #ffd27a;
  --text: #f4fbfa;
  --text-dim: #d4ecec;
  --cell-bg: rgba(6, 34, 46, 0.86);
  --cell-given: rgba(10, 48, 62, 0.92);
  --glow-cyan: 0 0 12px rgba(70, 224, 214, 0.45), 0 0 24px rgba(70, 224, 214, 0.2);
  --glow-magenta: 0 0 10px rgba(255, 122, 90, 0.5), 0 0 18px rgba(255, 122, 90, 0.2);
  --glow-purple: 0 0 10px rgba(14, 58, 74, 0.45);
  --accent: #ff7a5a;
  --accent2: #ffd27a;
  --board-border: #46e0d6;
  --board-bg: rgba(5, 30, 40, 0.9);
  --font-display: "Avenir Next", "Trebuchet MS", sans-serif;
}
body[data-theme="maldives"] .bg-glow { background: linear-gradient(180deg, #4a9ade 0%, #cfe8f2 41%, #5ad0d6 43%, #2aa8c0 70%, #a07650 100%); }
body[data-theme="maldives"] .title {
  background: linear-gradient(90deg, #46e0d6, #f4fffc 35%, #ffd27a 65%, #ff7a5a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(4, 26, 36, 0.6));
}
body[data-theme="maldives"] .stats,
body[data-theme="maldives"] .volume-row {
  background: rgba(4, 30, 40, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="maldives"] .stat-label,
body[data-theme="maldives"] .volume-label { color: #f0fbfa; }
body[data-theme="maldives"] .stat-value,
body[data-theme="maldives"] .volume-value { color: #ffd27a; text-shadow: 0 1px 2px rgba(2, 16, 22, 0.8); }
body[data-theme="maldives"] .track-label { color: #ffd27a; text-shadow: 0 1px 3px rgba(2, 16, 22, 0.95), 0 0 8px rgba(2, 16, 22, 0.6); }
body[data-theme="maldives"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(2, 16, 22, 0.95), 0 0 6px rgba(2, 16, 22, 0.7); }
.md-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.md-scene > canvas, .md-caust > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.md-scene > canvas.md-dark, .md-scene > canvas.md-lights, .md-scene > canvas.md-sea-set,
.md-scene > canvas.md-sky-set, .md-scene > canvas.md-sky-rise, .md-scene > canvas.md-sky-night { opacity: 0; visibility: hidden; }
/* the caustics: two nets of light on the sand, breathing in and out of each other */
.md-caust { position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden; mix-blend-mode: screen; }
.md-caust > canvas { animation: mdCaust 3.6s ease-in-out infinite; }
.md-caust > canvas.md-caust-b { animation-delay: -1.8s; }
@keyframes mdCaust { 0%, 100% { opacity: 0.15; transform: translateX(0); } 50% { opacity: 1; transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .md-caust > canvas { animation: none; opacity: 0.6; } }
body.scene-paused .md-caust > canvas { animation-play-state: paused; }
/* a champagne flute */
.md-glass { position: absolute; left: 22px; top: 18px; width: 4px; height: 9px; z-index: 9;
  background: linear-gradient(180deg, rgba(255, 240, 190, 0.95) 0 55%, rgba(255, 255, 255, 0.7) 55% 62%, transparent 62%),
    linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.8) 40% 60%, transparent 60%);
  border-radius: 1px 1px 0 0; }
/* amy104: a villa guest's glass of red wine: a round bowl on a stem */
.md-glass.md-wine { width: 5px; height: 9px; background:
    radial-gradient(ellipse 50% 40% at 50% 38%, rgba(150, 20, 50, 0.95) 0 60%, rgba(255, 255, 255, 0.75) 62% 100%, transparent 101%) top / 100% 60% no-repeat,
    linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.85) 40% 60%, transparent 60%) bottom / 100% 40% no-repeat; border-radius: 2px 2px 0 0; }
.md-guest { transition: none; }
/* amy115: the guest carries no glass (it sat on her shoulder as a block) */
.md-guest .md-wine { display: none; }
/* amy81: Maldives finish-a-number - a manta ray glides through sunbeams with a burst of reef fish by day; the 'sea of stars' and a glowing turtle at night */
.tc-md-ray { position: absolute; top: -10vh; width: 7vw; height: 120vh; opacity: 0; transform: rotate(14deg); transform-origin: top center;
  background: linear-gradient(180deg, rgba(255, 252, 220, 0.5), rgba(255, 252, 220, 0)); filter: blur(6px); animation: tcMdRay 3.0s ease-in-out forwards; }
@keyframes tcMdRay { 0% { opacity: 0; } 25% { opacity: 0.8; } 70% { opacity: 0.5; } 100% { opacity: 0; } }
.tc-md-manta { position: absolute; left: 0; opacity: 0; filter: drop-shadow(0 1.4vmin 1.6vmin rgba(0, 30, 40, 0.35)); animation: tcMdManta 3.2s cubic-bezier(0.4, 0.1, 0.5, 0.9) forwards; }
.tc-md-manta svg { width: 100%; height: 100%; overflow: visible; transform: rotate(90deg); }
@keyframes tcMdManta {
  0% { opacity: 0; transform: translate(-40vw, 18vh) rotate(-8deg); }
  12% { opacity: 1; }
  50% { transform: translate(38vw, -12vh) rotate(-14deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(110vw, -30vh) rotate(-18deg); }
}
.tc-md-wing { transform-origin: 0 0; animation: tcMdFlap 1.05s ease-in-out 3; }
@keyframes tcMdFlap { 0%, 100% { transform: scaleX(1) scaleY(1); } 50% { transform: scaleX(0.82) scaleY(1.12); } }
.tc-md-fish { position: absolute; width: 2.2vmin; height: 1.1vmin; margin: -0.55vmin -1.1vmin; opacity: 0; border-radius: 60% 40% 40% 60% / 50%;
  background: var(--fc); animation: tcMdFish 1.9s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
.tc-md-fish::after { content: ""; position: absolute; left: -0.8vmin; top: 0.05vmin; border: 0.5vmin solid transparent; border-right: 0.8vmin solid var(--fc); border-left: 0; }
@keyframes tcMdFish {
  0% { opacity: 0; transform: translate(0, 0) scaleX(var(--fl)) scale(0.4); }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scaleX(var(--fl)) scale(1); }
}
.tc-md-star { position: absolute; width: 0.7vmin; height: 0.7vmin; margin: -0.35vmin; border-radius: 50%; opacity: 0;
  background: #8af4ff; box-shadow: 0 0 1vmin #3ad8ff, 0 0 2vmin #1aa8ff; animation: tcMdStar 1.8s ease-out forwards; }
@keyframes tcMdStar {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  15% { opacity: 1; transform: scale(1.3); }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--sx), var(--rise)) scale(0.6); }
}
.tc-md-wave { position: absolute; left: -10vw; right: -10vw; bottom: -30vh; height: 40vh; opacity: 0; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(70, 220, 255, 0.55), rgba(20, 120, 220, 0.2) 40%, rgba(20, 120, 220, 0) 70%);
  mix-blend-mode: screen; animation: tcMdWave 3.0s ease-in-out forwards; }
@keyframes tcMdWave { 0% { opacity: 0; transform: translateY(20vh); } 30% { opacity: 1; } 60% { opacity: 0.8; transform: translateY(-14vh); } 100% { opacity: 0; transform: translateY(-30vh); } }
.tc-md-turtle { position: absolute; left: 0; opacity: 0; animation: tcMdTurtle 3.2s ease-in-out forwards; }
.tc-md-turtle svg { width: 100%; height: 100%; overflow: visible; }
.tc-md-glow { fill: rgba(60, 210, 255, 0.35); stroke: #7af0ff; stroke-width: 2; filter: drop-shadow(0 0 4px #3ad8ff) drop-shadow(0 0 10px #1a9aff); }
@keyframes tcMdTurtle {
  0% { opacity: 0; transform: translate(-30vw, 6vh) rotate(-6deg); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(105vw, -10vh) rotate(-10deg); }
}

/* —— amy82: day/night cycle overlays for the single-time-of-day levels —— */
.cy-back, .cy-front { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cy-back .cy-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.cy-sun { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, #fffef4 0 42%, rgba(255, 236, 170, 0.95) 52%, rgba(255, 214, 140, 0) 72%);
  box-shadow: 0 0 calc(30px + 50px * var(--cy-g, 0)) calc(8px + 22px * var(--cy-g, 0)) rgba(255, 200, 120, calc(0.35 + 0.3 * var(--cy-g, 0))); }
.cy-warm, .cy-blue { position: absolute; inset: 0; }
.cy-warm { mix-blend-mode: soft-light; }
.cy-blue { background: linear-gradient(180deg, #1a2a66, #2c3f80 60%, #23305e); mix-blend-mode: multiply; }
.cy-lights { position: absolute; inset: 0; width: 100%; height: 100%; }
.cy-bio { position: absolute; inset: 0; }
.cy-bio i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #9ff8ff;
  box-shadow: 0 0 6px 2px rgba(80, 230, 255, 0.7); opacity: 0; animation: cyBio 5s ease-in-out infinite; }
.cy-bio i.big { width: 5px; height: 5px; background: #c8b0ff; box-shadow: 0 0 10px 4px rgba(150, 120, 255, 0.55); }
@keyframes cyBio { 0%, 100% { opacity: 0; transform: translate(0, 0); } 40% { opacity: 0.95; } 60% { opacity: 0.6; transform: translate(6px, -14px); } }
.cy-shafts { position: absolute; inset: 0; mix-blend-mode: screen; }
.cy-shafts i { position: absolute; top: -10%; height: 85%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(220, 255, 250, 0.45), rgba(180, 240, 255, 0.12) 55%, rgba(180, 240, 255, 0));
  filter: blur(6px); animation: cyShaft 9s ease-in-out infinite alternate; }
@keyframes cyShaft { from { transform: skewX(-10deg); opacity: 0.55; } to { transform: skewX(8deg); opacity: 1; } }
body.cy-uw-night .sc-mar-jelly { filter: drop-shadow(0 0 6px rgba(120, 240, 255, 0.85)); }
@media (prefers-reduced-motion: reduce) {
  .cy-bio i, .cy-shafts i { animation: none; opacity: 0.6; }
}
body.scene-paused .cy-back *, body.scene-paused .cy-front * { animation-play-state: paused !important; }
/* —— amy83: legible HUD by day (no layout change: colour/background only) —— */
body.cy-on .stats, body.cy-on .volume-row, body.cy-on .board, body.cy-on .place-hint, body.cy-on .track-label {
  transition: background-color 1.2s linear, box-shadow 1.2s linear, color 1.2s linear;
}
body.cy-lit[data-theme="boba"] .stats,
body.cy-lit[data-theme="boba"] .volume-row {
  background-color: rgba(42, 30, 24, calc(0.58 + 0.32 * var(--cyd)));
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, calc(0.06 * var(--cyd)));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.cy-lit[data-theme="boba"] .stat-label,
body.cy-lit[data-theme="boba"] .volume-label {
  color: #e6cdb6;
}
body.cy-lit[data-theme="boba"] .board {
  background-color: rgb(42, 30, 24);
}
body.cy-lit[data-theme="boba"] .place-hint {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7);
  background-color: rgba(42, 30, 24, calc(0.55 * var(--cyd)));
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(42, 30, 24, calc(0.55 * var(--cyd)));
}
body.cy-lit[data-theme="boba"] .btn {
  background-color: rgba(42, 30, 24, calc(0.5 + 0.4 * var(--cyd)));
}
body.cy-lit[data-theme="boba"] .track-label {
  background-color: rgba(42, 30, 24, calc(0.55 + 0.3 * var(--cyd)));
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(42, 30, 24, calc(0.55 + 0.3 * var(--cyd)));
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.6);
}
body.cy-lit[data-theme="snowpark"] .board {
  background-color: rgb(16, 28, 42);
}
body.cy-lit[data-theme="sakura"] .board {
  background-color: rgb(40, 32, 36);
}
body.cy-lit[data-theme="forest"] .board {
  background-color: rgb(12, 22, 14);
}
body.cy-lit[data-theme="neon"] .board {
  background-color: rgb(10, 10, 25);
}
body.cy-lit[data-theme="underwater"] .board {
  background-color: rgb(4, 30, 40);
}
/* —— amy83: legible, backed HUD on every level (QA items 3, 5, 11) —— */
body[data-theme="snowpark"] .stats,
body[data-theme="snowpark"] .volume-row {
  background-color: rgba(12, 21, 32, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="snowpark"] .toolbar .btn,
body[data-theme="snowpark"] .controls .mode-row .btn,
body[data-theme="snowpark"] .toolbar .select {
  background-color: rgba(12, 21, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="snowpark"] .track-label {
  background-color: rgba(12, 21, 32, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(12, 21, 32, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="snowpark"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(12, 21, 32, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(12, 21, 32, 0.62);
}
body[data-theme="sakura"] .stats,
body[data-theme="sakura"] .volume-row {
  background-color: rgba(26, 21, 24, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="sakura"] .toolbar .btn,
body[data-theme="sakura"] .controls .mode-row .btn,
body[data-theme="sakura"] .toolbar .select {
  background-color: rgba(26, 21, 24, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="sakura"] .track-label {
  background-color: rgba(26, 21, 24, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(26, 21, 24, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="sakura"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(26, 21, 24, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(26, 21, 24, 0.62);
}
body[data-theme="forest"] .stats,
body[data-theme="forest"] .volume-row {
  background-color: rgba(12, 20, 14, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="forest"] .toolbar .btn,
body[data-theme="forest"] .controls .mode-row .btn,
body[data-theme="forest"] .toolbar .select {
  background-color: rgba(12, 20, 14, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="forest"] .track-label {
  background-color: rgba(12, 20, 14, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(12, 20, 14, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="forest"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(12, 20, 14, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(12, 20, 14, 0.62);
}
body[data-theme="neon"] .stats,
body[data-theme="neon"] .volume-row {
  background-color: rgba(7, 7, 15, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="neon"] .toolbar .btn,
body[data-theme="neon"] .controls .mode-row .btn,
body[data-theme="neon"] .toolbar .select {
  background-color: rgba(7, 7, 15, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="neon"] .track-label {
  background-color: rgba(7, 7, 15, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(7, 7, 15, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="neon"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(7, 7, 15, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(7, 7, 15, 0.62);
}
body[data-theme="underwater"] .stats,
body[data-theme="underwater"] .volume-row {
  background-color: rgba(2, 24, 32, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="underwater"] .toolbar .btn,
body[data-theme="underwater"] .controls .mode-row .btn,
body[data-theme="underwater"] .toolbar .select {
  background-color: rgba(2, 24, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="underwater"] .track-label {
  background-color: rgba(2, 24, 32, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(2, 24, 32, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="underwater"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(2, 24, 32, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(2, 24, 32, 0.62);
}
body[data-theme="beach"] .stats,
body[data-theme="beach"] .volume-row {
  background-color: rgba(6, 40, 56, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="beach"] .toolbar .btn,
body[data-theme="beach"] .controls .mode-row .btn,
body[data-theme="beach"] .toolbar .select {
  background-color: rgba(6, 40, 56, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="beach"] .track-label {
  background-color: rgba(6, 40, 56, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(6, 40, 56, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="beach"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(6, 40, 56, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(6, 40, 56, 0.62);
}
body[data-theme="sydney"] .stats,
body[data-theme="sydney"] .volume-row {
  background-color: rgba(6, 30, 52, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="sydney"] .toolbar .btn,
body[data-theme="sydney"] .controls .mode-row .btn,
body[data-theme="sydney"] .toolbar .select {
  background-color: rgba(6, 30, 52, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="sydney"] .track-label {
  background-color: rgba(6, 30, 52, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(6, 30, 52, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="sydney"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(6, 30, 52, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(6, 30, 52, 0.62);
}
body[data-theme="boston"] .stats,
body[data-theme="boston"] .volume-row {
  background-color: rgba(8, 26, 50, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="boston"] .toolbar .btn,
body[data-theme="boston"] .controls .mode-row .btn,
body[data-theme="boston"] .toolbar .select {
  background-color: rgba(8, 26, 50, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="boston"] .track-label {
  background-color: rgba(8, 26, 50, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(8, 26, 50, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="boston"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(8, 26, 50, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(8, 26, 50, 0.62);
}
body[data-theme="london"] .stats,
body[data-theme="london"] .volume-row {
  background-color: rgba(10, 20, 44, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="london"] .toolbar .btn,
body[data-theme="london"] .controls .mode-row .btn,
body[data-theme="london"] .toolbar .select {
  background-color: rgba(10, 20, 44, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="london"] .track-label {
  background-color: rgba(10, 20, 44, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 20, 44, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="london"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 20, 44, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 20, 44, 0.62);
}
body[data-theme="tokyo"] .stats,
body[data-theme="tokyo"] .volume-row {
  background-color: rgba(10, 18, 42, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="tokyo"] .toolbar .btn,
body[data-theme="tokyo"] .controls .mode-row .btn,
body[data-theme="tokyo"] .toolbar .select {
  background-color: rgba(10, 18, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="tokyo"] .track-label {
  background-color: rgba(10, 18, 42, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 18, 42, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="tokyo"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 18, 42, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 18, 42, 0.62);
}
body[data-theme="paris"] .stats,
body[data-theme="paris"] .volume-row {
  background-color: rgba(12, 18, 44, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="paris"] .toolbar .btn,
body[data-theme="paris"] .controls .mode-row .btn,
body[data-theme="paris"] .toolbar .select {
  background-color: rgba(12, 18, 44, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="paris"] .track-label {
  background-color: rgba(12, 18, 44, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(12, 18, 44, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="paris"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(12, 18, 44, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(12, 18, 44, 0.62);
}
body[data-theme="newyork"] .stats,
body[data-theme="newyork"] .volume-row {
  background-color: rgba(10, 16, 32, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="newyork"] .toolbar .btn,
body[data-theme="newyork"] .controls .mode-row .btn,
body[data-theme="newyork"] .toolbar .select {
  background-color: rgba(10, 16, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="newyork"] .track-label {
  background-color: rgba(10, 16, 32, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 16, 32, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="newyork"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 16, 32, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 16, 32, 0.62);
}
body[data-theme="munich"] .stats,
body[data-theme="munich"] .volume-row {
  background-color: rgba(10, 18, 36, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="munich"] .toolbar .btn,
body[data-theme="munich"] .controls .mode-row .btn,
body[data-theme="munich"] .toolbar .select {
  background-color: rgba(10, 18, 36, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="munich"] .track-label {
  background-color: rgba(10, 18, 36, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 18, 36, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="munich"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 18, 36, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 18, 36, 0.62);
}
body[data-theme="zurich"] .stats,
body[data-theme="zurich"] .volume-row {
  background-color: rgba(8, 18, 34, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="zurich"] .toolbar .btn,
body[data-theme="zurich"] .controls .mode-row .btn,
body[data-theme="zurich"] .toolbar .select {
  background-color: rgba(8, 18, 34, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="zurich"] .track-label {
  background-color: rgba(8, 18, 34, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(8, 18, 34, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="zurich"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(8, 18, 34, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(8, 18, 34, 0.62);
}
body[data-theme="barcelona"] .stats,
body[data-theme="barcelona"] .volume-row {
  background-color: rgba(10, 20, 38, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="barcelona"] .toolbar .btn,
body[data-theme="barcelona"] .controls .mode-row .btn,
body[data-theme="barcelona"] .toolbar .select {
  background-color: rgba(10, 20, 38, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="barcelona"] .track-label {
  background-color: rgba(10, 20, 38, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 20, 38, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="barcelona"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 20, 38, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 20, 38, 0.62);
}
body[data-theme="reykjavik"] .stats,
body[data-theme="reykjavik"] .volume-row {
  background-color: rgba(8, 18, 34, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="reykjavik"] .toolbar .btn,
body[data-theme="reykjavik"] .controls .mode-row .btn,
body[data-theme="reykjavik"] .toolbar .select {
  background-color: rgba(8, 18, 34, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="reykjavik"] .track-label {
  background-color: rgba(8, 18, 34, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(8, 18, 34, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="reykjavik"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(8, 18, 34, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(8, 18, 34, 0.62);
}
body[data-theme="hongkong"] .stats,
body[data-theme="hongkong"] .volume-row {
  background-color: rgba(10, 14, 32, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="hongkong"] .toolbar .btn,
body[data-theme="hongkong"] .controls .mode-row .btn,
body[data-theme="hongkong"] .toolbar .select {
  background-color: rgba(10, 14, 32, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="hongkong"] .track-label {
  background-color: rgba(10, 14, 32, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 14, 32, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="hongkong"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 14, 32, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 14, 32, 0.62);
}
body[data-theme="portland"] .stats,
body[data-theme="portland"] .volume-row {
  background-color: rgba(10, 22, 20, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="portland"] .toolbar .btn,
body[data-theme="portland"] .controls .mode-row .btn,
body[data-theme="portland"] .toolbar .select {
  background-color: rgba(10, 22, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="portland"] .track-label {
  background-color: rgba(10, 22, 20, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(10, 22, 20, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="portland"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(10, 22, 20, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(10, 22, 20, 0.62);
}
body[data-theme="maldives"] .stats,
body[data-theme="maldives"] .volume-row {
  background-color: rgba(4, 30, 40, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="maldives"] .toolbar .btn,
body[data-theme="maldives"] .controls .mode-row .btn,
body[data-theme="maldives"] .toolbar .select {
  background-color: rgba(4, 30, 40, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="maldives"] .track-label {
  background-color: rgba(4, 30, 40, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(4, 30, 40, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="maldives"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(4, 30, 40, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(4, 30, 40, 0.62);
}
body[data-theme="snowpark"] .stat-label, body[data-theme="snowpark"] .volume-label { color: #c4d8ec; }
body[data-theme="sakura"] .stat-label, body[data-theme="sakura"] .volume-label { color: #e4d2c8; }
body[data-theme="forest"] .stat-label, body[data-theme="forest"] .volume-label { color: #cfdcc4; }
body[data-theme="neon"] .stat-label, body[data-theme="neon"] .volume-label { color: #c8c8ee; }
body[data-theme="underwater"] .stat-label, body[data-theme="underwater"] .volume-label { color: #a8dcdc; }
body[data-theme="beach"] .top-chrome {
  background: linear-gradient(180deg, rgba(8, 46, 62, 0.9), rgba(8, 46, 62, 0.78));
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 22px rgba(2, 24, 36, 0.28), inset 1px 0 0 rgba(127, 240, 234, 0.16), inset -1px 0 0 rgba(127, 240, 234, 0.16), inset 0 -1px 0 rgba(127, 240, 234, 0.2);
}
/* —— amy83: Taipei in daylight: sunlit tiled towers, glass windows reflecting the sky —— */
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l0 {
  --lw: color-mix(in srgb, rgb(122, 94, 98), rgb(176, 190, 206) calc(var(--cyk) * 100%));
  --ul: color-mix(in srgb, rgb(128, 100, 104), rgb(166, 180, 198) calc(var(--cyk) * 100%));
  opacity: calc(0.5 + (0.62 - 0.5) * var(--cyk));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l1 {
  --lw: color-mix(in srgb, rgb(88, 66, 72), rgb(196, 198, 204) calc(var(--cyk) * 100%));
  --ul: color-mix(in srgb, rgb(96, 72, 78), rgb(176, 180, 188) calc(var(--cyk) * 100%));
  opacity: calc(0.66 + (0.82 - 0.66) * var(--cyk));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l2 {
  --lw: color-mix(in srgb, rgb(52, 38, 42), rgb(214, 204, 190) calc(var(--cyk) * 100%));
  --ul: color-mix(in srgb, rgb(60, 44, 48), rgb(190, 180, 168) calc(var(--cyk) * 100%));
  opacity: calc(0.84 + (0.95 - 0.84) * var(--cyk));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l3 {
  --lw: color-mix(in srgb, rgb(30, 21, 22), rgb(196, 180, 162) calc(var(--cyk) * 100%));
  --ul: color-mix(in srgb, rgb(38, 28, 28), rgb(170, 154, 138) calc(var(--cyk) * 100%));
  opacity: calc(0.95 + (1 - 0.95) * var(--cyk));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l1 > .sc-tpe-b:nth-child(3n) {
  --lw: color-mix(in srgb, rgb(70, 52, 58), rgb(214, 216, 220) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l1 > .sc-tpe-b:nth-child(5n+2) {
  --lw: color-mix(in srgb, rgb(70, 52, 58), rgb(190, 176, 170) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l2 > .sc-tpe-b:nth-child(3n) {
  --lw: color-mix(in srgb, rgb(44, 32, 36), rgb(226, 226, 222) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l2 > .sc-tpe-b:nth-child(4n+1) {
  --lw: color-mix(in srgb, rgb(44, 32, 36), rgb(200, 170, 158) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l2 > .sc-tpe-b:nth-child(7n+3) {
  --lw: color-mix(in srgb, rgb(44, 32, 36), rgb(176, 186, 196) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l3 > .sc-tpe-b:nth-child(3n) {
  --lw: color-mix(in srgb, rgb(26, 18, 18), rgb(214, 206, 196) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l3 > .sc-tpe-b:nth-child(4n+1) {
  --lw: color-mix(in srgb, rgb(26, 18, 18), rgb(186, 156, 140) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-layer.l3 > .sc-tpe-b:nth-child(5n+2) {
  --lw: color-mix(in srgb, rgb(26, 18, 18), rgb(160, 168, 176) calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-tpe-b {
  background-image:
    repeating-linear-gradient(0deg, var(--lw) 0 var(--fb), transparent var(--fb) var(--fy)),
    repeating-linear-gradient(90deg, var(--lw) 0 var(--cb), transparent var(--cb) var(--cx)),
    repeating-linear-gradient(90deg, var(--ul) 0 var(--d1), transparent var(--d1) var(--p1)),
    repeating-linear-gradient(0deg, var(--ul) 0 var(--d2), transparent var(--d2) var(--p2)),
    linear-gradient(180deg, color-mix(in srgb, var(--win), rgba(205, 225, 240, 0.95) calc(var(--cyk) * 100%)), color-mix(in srgb, var(--win), rgba(120, 158, 196, 0.92) calc(var(--cyk) * 100%)) 45%, color-mix(in srgb, var(--win), rgba(120, 158, 196, 0.92) calc(var(--cyk) * 100%)));
  box-shadow: inset 0 3px 0 var(--lw), inset 1px 0 0 var(--lw), inset -1px 0 0 var(--lw), inset -4px 0 0 rgba(50, 60, 80, calc(0.16 * var(--cyk)));
}
body.cy-lit[data-theme="boba"] .sc-tpe-b:nth-child(3n+2) {
  background-image:
    repeating-linear-gradient(0deg, var(--lw) 0 var(--fb), transparent var(--fb) var(--fy)),
    repeating-linear-gradient(90deg, var(--lw) 0 var(--cb), transparent var(--cb) var(--cx)),
    repeating-linear-gradient(90deg, var(--ul) 0 var(--d1), transparent var(--d1) var(--p1)),
    repeating-linear-gradient(0deg, var(--ul) 0 var(--d2), transparent var(--d2) var(--p2)),
    linear-gradient(180deg, color-mix(in srgb, var(--win), rgba(205, 225, 240, 0.95) calc(var(--cyk) * 100%)), color-mix(in srgb, var(--win), rgba(150, 184, 212, 0.9) calc(var(--cyk) * 100%)) 45%, color-mix(in srgb, var(--win), rgba(150, 184, 212, 0.9) calc(var(--cyk) * 100%)));
  box-shadow: inset 0 3px 0 var(--lw), inset 1px 0 0 var(--lw), inset -1px 0 0 var(--lw), inset -4px 0 0 rgba(50, 60, 80, calc(0.16 * var(--cyk)));
}
body.cy-lit[data-theme="boba"] .sc-tpe-b:nth-child(3n+3) {
  background-image:
    repeating-linear-gradient(0deg, var(--lw) 0 var(--fb), transparent var(--fb) var(--fy)),
    repeating-linear-gradient(90deg, var(--lw) 0 var(--cb), transparent var(--cb) var(--cx)),
    repeating-linear-gradient(90deg, var(--ul) 0 var(--d1), transparent var(--d1) var(--p1)),
    repeating-linear-gradient(0deg, var(--ul) 0 var(--d2), transparent var(--d2) var(--p2)),
    linear-gradient(180deg, color-mix(in srgb, var(--win), rgba(205, 225, 240, 0.95) calc(var(--cyk) * 100%)), color-mix(in srgb, var(--win), rgba(98, 132, 168, 0.92) calc(var(--cyk) * 100%)) 45%, color-mix(in srgb, var(--win), rgba(98, 132, 168, 0.92) calc(var(--cyk) * 100%)));
  box-shadow: inset 0 3px 0 var(--lw), inset 1px 0 0 var(--lw), inset -1px 0 0 var(--lw), inset -4px 0 0 rgba(50, 60, 80, calc(0.16 * var(--cyk)));
}
body.cy-lit[data-theme="boba"] .sc-tpe-sign {
  opacity: calc(0.9 + (0.45 - 0.9) * var(--cyk));
  box-shadow: 0 0 calc(4px * (1 - var(--cyk))) var(--neon);
}
body.cy-lit[data-theme="boba"] .sc-tpe-mtn {
  background: linear-gradient(to bottom, color-mix(in srgb, rgba(120, 96, 120, 0.42), rgba(104, 138, 132, 0.6) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(150, 116, 120, 0.16), rgba(150, 178, 182, 0.3) calc(var(--cyk) * 100%)) 70%, rgba(150, 178, 182, 0));
}
body.cy-lit[data-theme="boba"] .sc-tpe-mtn.m2 {
  background: linear-gradient(to bottom, color-mix(in srgb, rgba(96, 74, 90, 0.5), rgba(78, 116, 96, 0.72) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(130, 98, 104, 0.18), rgba(130, 168, 150, 0.3) calc(var(--cyk) * 100%)) 70%, rgba(130, 168, 150, 0));
}
body.cy-lit[data-theme="boba"] .sc-tpe-haze.h1 {
  background: linear-gradient(to top, color-mix(in srgb, rgba(160, 118, 110, 0.2), rgba(222, 232, 242, 0.5) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(160, 118, 110, 0.08), rgba(222, 232, 242, 0.2) calc(var(--cyk) * 100%)) 45%, transparent);
}
body.cy-lit[data-theme="boba"] .sc-tpe-haze.h2 {
  background: linear-gradient(to top, color-mix(in srgb, rgba(140, 100, 92, 0.16), rgba(226, 234, 242, 0.4) calc(var(--cyk) * 100%)), transparent);
}
body.cy-lit[data-theme="boba"] .sc-tpe-haze.h3 {
  background: linear-gradient(to top, color-mix(in srgb, rgba(110, 76, 66, 0.14), rgba(230, 236, 240, 0.3) calc(var(--cyk) * 100%)), transparent);
}
body.cy-lit[data-theme="boba"] .sc-tpe-grand {
  filter: saturate(calc(0.82 + (1.08 - 0.82) * var(--cyk))) brightness(calc(0.82 + (1.06 - 0.82) * var(--cyk))) contrast(calc(0.85 + (1 - 0.85) * var(--cyk))) blur(0.4px);
}
body.cy-lit[data-theme="boba"] .sc-tpe-hill {
  background: linear-gradient(to bottom, color-mix(in srgb, rgba(88, 70, 80, 0.95), rgba(70, 108, 72, 0.96) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(104, 80, 86, 0.55), rgba(96, 130, 90, 0.6) calc(var(--cyk) * 100%)) 55%, color-mix(in srgb, rgba(120, 92, 96, 0.1), rgba(120, 150, 110, 0.1) calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .gh-fac {
  background-image:
    linear-gradient(to top, rgba(255, 238, 205, 0.92) 0 1px, transparent 1px),
    linear-gradient(90deg, #c0281a 0 32%, transparent 32%),
    linear-gradient(to bottom, #8c1f16 0 30%, transparent 30%),
    linear-gradient(color-mix(in srgb, rgba(255, 216, 140, 0.95), rgba(232, 214, 196, 0.95) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(255, 176, 96, 0.95), rgba(150, 120, 112, 0.95) calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .sc-tpe-wheel {
  filter: saturate(calc(0.9 + (0 - 0.9) * var(--cyk))) brightness(calc(1 + (2.6 - 1) * var(--cyk))) blur(0.3px);
  opacity: calc(0.8 + (0.92 - 0.8) * var(--cyk));
}
body.cy-lit[data-theme="boba"] .tw-leds {
  filter: drop-shadow(0 0 calc(1.5px * (1 - var(--cyk))) currentColor);
}
body.cy-lit[data-theme="boba"] .tw-truss {
  filter: drop-shadow(0 0 calc(2px * (1 - var(--cyk))) currentColor);
}
body.cy-lit[data-theme="boba"] .tw-mall {
  background-color: color-mix(in srgb, rgb(78, 70, 76), rgb(200, 200, 206) calc(var(--cyk) * 100%));
  background-image:
    linear-gradient(to bottom, rgba(255, 240, 220, 0.85) 0 2.5%, transparent 2.5%),
    repeating-linear-gradient(0deg, color-mix(in srgb, rgb(70, 62, 70), rgb(188, 188, 196) calc(var(--cyk) * 100%)) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, color-mix(in srgb, rgb(70, 62, 70), rgb(188, 188, 196) calc(var(--cyk) * 100%)) 0 2px, transparent 2px 7px),
    linear-gradient(90deg, color-mix(in srgb, rgba(255, 196, 140, 0.75), rgba(120, 160, 196, 0.85) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(255, 232, 186, 0.85), rgba(170, 202, 228, 0.9) calc(var(--cyk) * 100%)) 50%, color-mix(in srgb, rgba(255, 196, 140, 0.75), rgba(120, 160, 196, 0.85) calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .sc-tpe-101 {
  filter: drop-shadow(0 0 calc(7px * (1 - var(--cyk))) rgba(130, 255, 220, 0.28));
  opacity: calc(0.9 + (1 - 0.9) * var(--cyk));
}
body.cy-lit[data-theme="boba"] .t101-body {
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 1%, color-mix(in srgb, rgba(255, 214, 120, 0.9), rgba(214, 236, 230, 0.75) calc(var(--cyk) * 100%)) 1%, color-mix(in srgb, rgba(255, 214, 120, 0.9), rgba(214, 236, 230, 0.75) calc(var(--cyk) * 100%)) 1.7%, transparent 1.7%, transparent 7.5%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.16) 1.8%, rgba(0, 0, 0, 0.28) 8.5%),
    repeating-linear-gradient(180deg, rgba(170, 255, 230, 0.2) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, color-mix(in srgb, #1c3638, #3c7a7a calc(var(--cyk) * 100%)), color-mix(in srgb, #3e7266, #76b0aa calc(var(--cyk) * 100%)) 42%, color-mix(in srgb, #5c9484, #a6d2cc calc(var(--cyk) * 100%)) 55%, color-mix(in srgb, #22403c, #4a8886 calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .t101-podium {
  background-color: color-mix(in srgb, rgb(40, 50, 52), rgb(130, 156, 160) calc(var(--cyk) * 100%));
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, rgb(40, 50, 52), rgb(130, 156, 160) calc(var(--cyk) * 100%)) 0 3px, transparent 3px 7px),
    linear-gradient(color-mix(in srgb, rgba(255, 220, 160, 0.75), rgba(176, 206, 220, 0.85) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(255, 220, 160, 0.75), rgba(176, 206, 220, 0.85) calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .tt-body {
  background:
    radial-gradient(ellipse 16% 42% at 50% 100%, color-mix(in srgb, rgba(255, 196, 110, 0.95), rgba(60, 20, 14, 0.9) calc(var(--cyk) * 100%)), transparent 75%),
    linear-gradient(#a8382a, #74241a);
}
body.cy-lit[data-theme="boba"] .tt-lamp {
  box-shadow: 0 0 calc(5px * (1 - var(--cyk))) #ff7a3a;
}
body.cy-lit[data-theme="boba"] .sc-wood-house.far {
  filter: brightness(calc(0.7 + (0.95 - 0.7) * var(--cyk))) saturate(calc(0.5 + (0.7 - 0.5) * var(--cyk))) blur(0.4px);
}
body.cy-lit[data-theme="boba"] .sc-wood-house.farmid {
  filter: brightness(calc(0.75 + (0.98 - 0.75) * var(--cyk))) saturate(calc(0.55 + (0.75 - 0.55) * var(--cyk))) blur(0.3px);
}
body.cy-lit[data-theme="boba"] .sc-wood-house.mid {
  filter: brightness(calc(0.85 + (1.04 - 0.85) * var(--cyk))) saturate(calc(0.7 + (0.85 - 0.7) * var(--cyk)));
}
body.cy-lit[data-theme="boba"] .sc-wood-house.far {
  opacity: calc(0.2 + (0.38 - 0.2) * var(--cyk)) !important;
}
body.cy-lit[data-theme="boba"] .sc-wood-house.farmid {
  opacity: calc(0.3 + (0.55 - 0.3) * var(--cyk)) !important;
}
body.cy-lit[data-theme="boba"] .sc-wood-house.mid {
  opacity: calc(0.4 + (0.75 - 0.4) * var(--cyk)) !important;
}
body.cy-lit[data-theme="boba"] .sc-wood-house.near {
  opacity: calc(0.52 + (0.92 - 0.52) * var(--cyk)) !important;
}
body.cy-lit[data-theme="boba"] .sc-wood-house {
  --wood: color-mix(in srgb, #5a4030, #a07a56 calc(var(--cyk) * 100%)) !important;
  --roof: color-mix(in srgb, #3a2818, #5c5f68 calc(var(--cyk) * 100%)) !important;
}
body.cy-lit[data-theme="boba"] .sc-wood-roof {
  box-shadow: 0 0 4px rgba(0, 0, 0, calc(0.2 * (1 - var(--cyk))));
}
body.cy-lit[data-theme="boba"] .sc-wood-body {
  background: linear-gradient(180deg, var(--wood, #5a4030), color-mix(in srgb, #3a2818, #6e5034 calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .sc-wood-win {
  background: color-mix(in srgb, #ffe8a0, #7c98ae calc(var(--cyk) * 100%));
  box-shadow: 0 0 calc(8px * (1 - var(--cyk))) rgba(255, 220, 140, 0.55), 14px 0 0 color-mix(in srgb, #ffe8a0, #7c98ae calc(var(--cyk) * 100%));
}
body.cy-lit[data-theme="boba"] .sc-stall-body {
  background: linear-gradient(180deg, color-mix(in srgb, #3a2a1c, #8c6c4c calc(var(--cyk) * 100%)), color-mix(in srgb, #2a1c12, #6a4e36 calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .sc-stall-sign.warm {
  background: color-mix(in srgb, #e8b060, #d8a868 calc(var(--cyk) * 100%));
  box-shadow: 0 0 calc(8px * (1 - var(--cyk))) rgba(255, 180, 80, 0.35);
}
body.cy-lit[data-theme="boba"] .sc-boba-shop.wooden {
  background: linear-gradient(180deg, color-mix(in srgb, #5a4030, #9c7654 calc(var(--cyk) * 100%)) 0%, color-mix(in srgb, #3a2818, #6c4e34 calc(var(--cyk) * 100%)) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, calc(0.35 - 0.15 * var(--cyk)));
}
body.cy-lit[data-theme="boba"] .sc-boba-shop.wooden::before {
  background: linear-gradient(180deg, color-mix(in srgb, #4a3020, #7a5436 calc(var(--cyk) * 100%)), color-mix(in srgb, #2a1c10, #4e3622 calc(var(--cyk) * 100%)));
  box-shadow: none;
}
body.cy-lit[data-theme="boba"] .sc-shop-win.warm {
  background: color-mix(in srgb, rgba(255, 220, 140, 0.22), rgba(170, 205, 230, 0.75) calc(var(--cyk) * 100%));
  box-shadow: inset 0 0 calc(8px * (1 - var(--cyk))) rgba(255, 200, 100, 0.2);
}
body.cy-lit[data-theme="boba"] .sc-boba-shop.wooden .sign {
  text-shadow: 0 1px 1px rgba(40, 20, 10, calc(0.6 * var(--cyk))), 0 0 calc(8px * (1 - var(--cyk))) rgba(255, 200, 120, 0.4);
}
body.cy-lit[data-theme="boba"] .mk-row.r0 {
  filter: saturate(calc(0.7 + (0.85 - 0.7) * var(--cyk))) brightness(calc(0.74 + (0.98 - 0.74) * var(--cyk))) blur(0.35px);
}
body.cy-lit[data-theme="boba"] .mk-row.r1 {
  filter: saturate(calc(0.82 + (0.92 - 0.82) * var(--cyk))) brightness(calc(0.84 + (1.02 - 0.84) * var(--cyk))) blur(0.15px);
}
body.cy-lit[data-theme="boba"] .mk-row.r2 {
  filter: saturate(calc(0.94 + (1 - 0.94) * var(--cyk))) brightness(calc(0.94 + (1.04 - 0.94) * var(--cyk)));
}
body.cy-lit[data-theme="boba"] .mk-back {
  background:
    linear-gradient(90deg, #3a2618 0 5%, transparent 5% 95%, #3a2618 95%),
    radial-gradient(ellipse 70% 90% at 50% 20%, color-mix(in srgb, rgba(255, 214, 150, 0.85), rgba(150, 122, 96, 0.92) calc(var(--cyk) * 100%)), color-mix(in srgb, rgba(150, 90, 50, 0.9), rgba(110, 84, 62, 0.94) calc(var(--cyk) * 100%)) 70%, color-mix(in srgb, rgba(60, 36, 24, 0.95), rgba(70, 50, 36, 0.96) calc(var(--cyk) * 100%)));
}
body.cy-lit[data-theme="boba"] .mk-sign,
body.cy-lit[data-theme="boba"] .mk-fsign {
  text-shadow: 0 0 calc(3px * (1 - var(--cyk))) var(--glow), 0 0 calc(6px * (1 - var(--cyk))) var(--glow);
  box-shadow: 0 0 calc(6px * (1 - var(--cyk))) var(--glow);
}
body.cy-lit[data-theme="boba"] .mk-lanterns::before,
body.cy-lit[data-theme="boba"] .mk-lanterns::after {
  box-shadow: 0 0 calc(6px * (1 - var(--cyk))) rgba(255, 90, 50, 0.8);
}
/* —— amy83: Underwater in daylight —— */
body.cy-lit[data-theme="underwater"] .sc-coral {
  filter: saturate(calc(1 + (1.15 - 1) * var(--cyk)));
}

/* —— amy84: Neon City rebuilt — a rain-slick megacity canyon (scene canvases) —— */
.nc-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #06030f; }
.nc-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.nc-scene > canvas.nc-dark, .nc-scene > canvas.nc-lit, .nc-scene > canvas.nc-sky-set,
.nc-scene > canvas.nc-sky-rise, .nc-scene > canvas.nc-sky-night { opacity: 0; visibility: hidden; }
.nc-scene > .sy-sun { filter: blur(0.6px) saturate(1.2); }
.nc-scene > .sy-sun .sy-sun-disc { background: radial-gradient(circle, #fff6dc 0 45%, #ffd08a 70%, rgba(255, 170, 90, 0) 100%); }
body[data-theme="neon"] .board { background-color: rgb(10, 10, 25); }
/* amy84: Neon City finish-a-number - a glitch hologram burst and a breaching AV that hijacks the sky with the number */
.tc-nc-cv { position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }

/* —— amy85: Forest rebuilt — a Lapland valley under the northern lights (scene canvases) —— */
.fv-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #050a16; }
.fv-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.fv-scene > canvas.fv-aur { mix-blend-mode: screen; filter: blur(1.1px); }
.fv-scene > canvas.fv-glow { mix-blend-mode: screen; opacity: 0; visibility: hidden; }
.fv-scene > canvas.fv-lakeaur { mix-blend-mode: screen; filter: blur(0.8px); }
.fv-scene > canvas.fv-set, .fv-scene > canvas.fv-night, .fv-scene > canvas.fv-lit, .fv-scene > canvas.fv-sky-set,
.fv-scene > canvas.fv-sky-rise, .fv-scene > canvas.fv-sky-night { opacity: 0; visibility: hidden; }
.fv-scene > .sy-sun .sy-sun-disc { background: radial-gradient(circle, #fffbe8 0 45%, #ffe2a8 70%, rgba(255, 200, 120, 0) 100%); }
/* amy85: Forest finish-a-number - an aurora surge, the number in rays of light, and a skein of swans */
.tc-fv-cv { position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }

/* —— amy86: Snow Park rebuilt — a Zermatt-style village under the Matterhorn (scene canvases) —— */
.zm-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #0a1430; }
.zm-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.zm-scene > canvas.zm-glow { opacity: 0; visibility: hidden; }
.zm-scene > canvas.zm-set, .zm-scene > canvas.zm-night, .zm-scene > canvas.zm-lit, .zm-scene > canvas.zm-sky-set,
.zm-scene > canvas.zm-sky-rise, .zm-scene > canvas.zm-sky-night { opacity: 0; visibility: hidden; }
.zm-scene > .sy-sun .sy-sun-disc { background: radial-gradient(circle, #fffbe8 0 45%, #ffe2a8 70%, rgba(255, 200, 120, 0) 100%); }
/* amy86: Snow Park finish-a-number - drawn snow crystals form the number, a ski jumper sails past */
.tc-zm-cv { position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }

/* —— amy87: Sakura rebuilt — Chidorigafuchi moat in full bloom (scene canvases) —— */
.kf-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #0e1636; }
.kf-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.kf-scene > canvas.kf-set, .kf-scene > canvas.kf-night, .kf-scene > canvas.kf-lit, .kf-scene > canvas.kf-sky-set,
.kf-scene > canvas.kf-sky-rise, .kf-scene > canvas.kf-sky-night { opacity: 0; visibility: hidden; }
.kf-scene > .sy-sun .sy-sun-disc { background: radial-gradient(circle, #fffbe8 0 45%, #ffe2a8 70%, rgba(255, 200, 120, 0) 100%); }
/* amy87: Sakura finish-a-number - a storm of drawn petals forms the number, then a gust blows it away */
.tc-kf-cv { position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
/* —— amy88: Sydney (Badu Gili projections, Luna Park wheel, cyclist) + gull / lorikeet celebrations —— */
.sy-scene > canvas.sy-badu { opacity: 0; visibility: hidden; transition: opacity 1.6s ease; }
.tc-sy-cv, .tc-bc-cv, .tc-tk-cv, .tc-ld-cv { position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }

/* amy91: Sakura's painted layers fade in as each one completes */
.kf-scene > canvas.kf-reveal { animation: kfReveal 0.45s ease-out; }
@keyframes kfReveal { from { opacity: 0; } }

/* amy91: Munich - Marienplatz */
.mu-scene > canvas.mu-sky-set, .mu-scene > canvas.mu-sky-rise, .mu-scene > canvas.mu-sky-night, .mu-scene > canvas.mu-sky-snow,
.mu-scene > canvas.mu-flood, .mu-scene > canvas.mu-snow, .mu-scene > canvas.mu-alps { opacity: 0; visibility: hidden; }
.mu-scene > canvas.mu-glock, .mu-scene > canvas.mu-life, .mu-scene > canvas.mu-flakes { pointer-events: none; }

/* amy93: Barcelona layers fade in as they finish painting */
.bn-scene > canvas.bn-reveal { animation: kfReveal 0.45s ease-out; }

/* —— amy99: ONE arcade font on every level, self-hosted (works offline), with the title, the
   selects, the buttons, the timer and the board locked to the same metrics everywhere —— */
@font-face {
  font-family: "Amy Arcade";
  src: url("fonts/pixelify-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amy Arcade";
  src: url("fonts/pixelify-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root { --font-arcade: "Amy Arcade", "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
html body[data-theme] .app *:where(:not(.cell, .note, .num-btn, #numpad button, #timer, .stat-value):not(:has(.cell, .num-btn, #numpad button, #timer, .stat-value))),
html body[data-theme] .digit-toast,
html body[data-theme] #win-overlay,
html body[data-theme] #win-overlay * { font-family: var(--font-arcade) !important; }
html body[data-theme] .title { font-weight: 700 !important; letter-spacing: 0.12em !important; line-height: 1.2 !important; }
html body[data-theme] .tagline { letter-spacing: 0.02em !important; line-height: 1.35 !important; font-weight: 400 !important; }
html body[data-theme] .select,
html body[data-theme] .btn { font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; }
html body[data-theme] .stat-label,
html body[data-theme] .volume-label { letter-spacing: 0.12em !important; font-weight: 500 !important; }
html body[data-theme] .track-label { letter-spacing: 0.04em !important; font-weight: 600 !important; }
html body[data-theme] .place-hint { letter-spacing: 0.02em !important; font-weight: 400 !important; }
/* amy100: the board digits, the number pad, the timer and the difficulty value are back on each
   level's own amy98 type (they are excluded from the arcade override above) */

/* —— amy100: the title on its own polished display face (Orbitron, self-hosted), identical on
   every level; the rest of the UI stays on Pixelify and the digits on each level's amy98 type —— */
@font-face {
  font-family: "Amy Title";
  src: url("fonts/orbitron-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
html body[data-theme] .app h1.title { font-family: "Amy Title", var(--font-arcade) !important; font-weight: 800 !important; letter-spacing: 0.08em !important; line-height: 1.2 !important; }
/* amy100: Neon City's sign face (Oxanium), used on its canvases */
@font-face {
  font-family: "Amy Sign";
  src: url("fonts/oxanium-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}
/* amy101: Sakura appears in one go - the sky at once, the rest together when it is ready */
.kf-scene.kf-wait > canvas:not(.kf-sky) { visibility: hidden !important; }
.kf-scene.kf-in > canvas:not(.kf-sky) { animation: kfReveal 0.35s ease-out; }
/* amy101: London's marching lane (King's Guard, Household Cavalry) */
.ld-scene > canvas.ld-march { z-index: 3; }

/* amy104: the Gold Coast after dark */
.bc-night { position: absolute; inset: 0; pointer-events: none; }
.bc-night .bc-nightcv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* lit by the esplanade lamps: softer and warmer than daylight, still clearly readable */
.bc-night .bc-p, .bc-night .bc-tipsy { filter: brightness(0.72) saturate(0.8) sepia(0.12); }
.bc-night .bc-tipsy .bc-p { filter: none; }
.bc-night .sc-char-prop.cup .sc-cup-pearl { display: none; }
/* a stubby of beer */
.bc-night .bc-beer .sc-char-prop.cup { width: 8px; height: 16px; right: -6px; border-radius: 3px 3px 2px 2px; border: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.5) 0 22%, transparent 42%), linear-gradient(180deg, #d8d4c8 0 12%, #c06a18 12% 38%, #fff6e0 38% 68%, #c06a18 68%); }
/* a glass of wine */
.bc-night .bc-wine .sc-char-prop.cup { width: 8px; height: 13px; right: -6px; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, rgba(230,240,255,0.6) 0 8%, #d0203c 8% 46%, rgba(230,240,255,0.7) 46% 56%, transparent 56%) center top / 8px 7px no-repeat,
    linear-gradient(90deg, transparent 43%, rgba(230,240,255,0.7) 43% 57%, transparent 57%) center 7px / 8px 5px no-repeat,
    linear-gradient(180deg, rgba(230,240,255,0.7), rgba(230,240,255,0.7)) center 12px / 6px 1px no-repeat; }
.bc-night .d2 .sc-char-arm.r, .bc-night .d2 .sc-char-prop.cup { animation-delay: -1.1s; }
.bc-night .d3 .sc-char-arm.r, .bc-night .d3 .sc-char-prop.cup { animation-delay: -0.6s; animation-duration: 3.4s; }
.bc-night .d4 .sc-char-arm.r, .bc-night .d4 .sc-char-prop.cup { animation-delay: -2s; animation-duration: 3s; }
/* the tipsy couple: weaving slowly along the sand, swaying out of step with each other */
.bc-tipsy { position: absolute; width: 0; height: 0; animation: bcTipsyX 26s ease-in-out infinite alternate; }
.bc-tipsy-sway { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; animation: bcTipsySway 2.9s ease-in-out infinite; }
.bc-tipsy .bc-p { animation: bcTipsyLean 2.3s ease-in-out infinite; transform-origin: 0 0; }
.bc-tipsy .bc-p.t2 { animation-delay: -1.2s; animation-duration: 2.6s; }
.bc-tipsy .sc-char-sprite { animation: bcFlip 52s steps(1, end) infinite; }
.bc-tipsy .sc-char.act-walk .sc-char-leg, .bc-tipsy .sc-char.act-walk-cup .sc-char-leg { animation-duration: 1.4s !important; }
@keyframes bcTipsyX { 0% { transform: translateX(0); } 22% { transform: translateX(calc(var(--dx) * 0.3)); } 30% { transform: translateX(calc(var(--dx) * 0.26)); } 62% { transform: translateX(calc(var(--dx) * 0.7)); } 70% { transform: translateX(calc(var(--dx) * 0.66)); } 100% { transform: translateX(var(--dx)); } }
@keyframes bcTipsySway { 0%, 100% { transform: rotate(-5deg) translateY(0); } 30% { transform: rotate(4deg) translateY(-1px); } 55% { transform: rotate(7deg) translateY(0); } 80% { transform: rotate(-2deg) translateY(-1px); } }
@keyframes bcTipsyLean { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .bc-tipsy, .bc-tipsy-sway, .bc-tipsy .bc-p { animation: none; } }

/* amy105: Portland's dusk and night layers wait, unseen, until painted, then fade in */
.pd-scene canvas.pd-wait { opacity: 0 !important; }
.pd-scene canvas.pd-fadein { transition: opacity 0.6s ease; }

/* —— amy107: Underwater by the hour, and its rare visitors —— */
.cy-front .uwx-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.uwx-caust { position: absolute; inset: 0; pointer-events: none; }
.uwx-caust > canvas { position: absolute; left: -3%; top: -3%; width: 106%; height: 106%; will-change: transform, opacity; animation: uwxCaust 7s ease-in-out infinite; }
.uwx-caust > canvas.uwx-caust-b { animation-delay: -3.5s; animation-duration: 8.4s; }
@keyframes uwxCaust { 0%, 100% { opacity: 0.1; transform: translate(0, 0) scale(1); } 50% { opacity: 0.55; transform: translate(1.2%, 0.8%) scale(1.015); } }
/* the night: the sea goes dark; the moon shines through the surface as a soft glow and faint rays */
.uwx-dark { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 62% 0%, rgba(2, 8, 20, 0.15), rgba(1, 5, 14, 0.75) 70%, rgba(0, 3, 10, 0.9)); }
.uwx-moon { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 22% 16% at 64% 0%, rgba(200, 225, 255, 0.55), rgba(140, 180, 240, 0.18) 55%, rgba(120, 160, 230, 0) 100%),
    radial-gradient(ellipse 60% 40% at 64% 0%, rgba(110, 150, 220, 0.18), rgba(110, 150, 220, 0) 100%); }
.uwx-moon i { position: absolute; top: -4%; width: 7%; height: 62%; transform-origin: 50% 0; will-change: transform, opacity;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(190, 215, 255, 0.26), rgba(170, 200, 255, 0.08) 55%, rgba(160, 195, 255, 0) 100%);
  animation: uwxMoonRay 11s ease-in-out infinite alternate; }
@keyframes uwxMoonRay { from { transform: skewX(-12deg); opacity: 0.4; } to { transform: skewX(6deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .uwx-caust > canvas, .uwx-moon i { animation: none; } }
body[data-theme="copenhagen"] {
  --bg: #101c2a;
  --bg-elevated: #18283a;
  --cyan: #f2c14e;
  --magenta: #d8553a;
  --purple: #24344a;
  --violet: #fff8ea;
  --pink: #f6d38a;
  --text: #fbf6ec;
  --text-dim: #e6dccb;
  --cell-bg: rgba(16, 28, 42, 0.86);
  --cell-given: rgba(24, 40, 58, 0.92);
  --glow-cyan: 0 0 12px rgba(242, 193, 78, 0.45), 0 0 24px rgba(242, 193, 78, 0.2);
  --glow-magenta: 0 0 10px rgba(216, 85, 58, 0.5), 0 0 18px rgba(216, 85, 58, 0.2);
  --glow-purple: 0 0 10px rgba(36, 52, 74, 0.45);
  --accent: #d8553a;
  --accent2: #f6d38a;
  --board-border: #f2c14e;
  --board-bg: rgba(14, 26, 40, 0.9);
  --font-display: "Gill Sans", "Avenir Next", "Trebuchet MS", sans-serif;
}
body[data-theme="copenhagen"] .bg-glow { background: linear-gradient(180deg, #6ea6dc 0%, #d8e6ee 24%, #e8b93c 30%, #bd4a32 38%, #5d88ab 46%, #3e6470 54%, #2c4a54 76%, #8e887e 80%, #6e685e 100%); }
body[data-theme="copenhagen"] .title {
  background: linear-gradient(90deg, #f2c14e, #fff8ea 35%, #f6d38a 65%, #d8553a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(10, 18, 28, 0.6));
}
body[data-theme="copenhagen"] .stats,
body[data-theme="copenhagen"] .volume-row {
  background: rgba(12, 24, 38, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="copenhagen"] .stat-label,
body[data-theme="copenhagen"] .volume-label { color: #f6f0e4; }
body[data-theme="copenhagen"] .stat-value,
body[data-theme="copenhagen"] .volume-value { color: #f6d38a; text-shadow: 0 1px 2px rgba(6, 12, 20, 0.8); }
body[data-theme="copenhagen"] .track-label { color: #f6d38a; text-shadow: 0 1px 3px rgba(6, 12, 20, 0.95), 0 0 8px rgba(6, 12, 20, 0.6); }
body[data-theme="copenhagen"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(6, 12, 20, 0.95), 0 0 6px rgba(6, 12, 20, 0.7); }
body[data-theme="copenhagen"] .stats,
body[data-theme="copenhagen"] .volume-row {
  background-color: rgba(12, 24, 38, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="copenhagen"] .toolbar .btn,
body[data-theme="copenhagen"] .controls .mode-row .btn,
body[data-theme="copenhagen"] .toolbar .select {
  background-color: rgba(12, 24, 38, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="copenhagen"] .track-label {
  background-color: rgba(12, 24, 38, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(12, 24, 38, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="copenhagen"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(12, 24, 38, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(12, 24, 38, 0.62);
}
.cp-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cp-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.cp-scene > canvas.cp-dark, .cp-scene > canvas.cp-lights { opacity: 0; visibility: hidden; }
.cp-beer .sc-char-prop.cup { background: linear-gradient(180deg, #fffbe8 0 22%, #e8a82a 22% 100%) !important; border-radius: 1px 1px 2px 2px; }
.cp-hotdog .sc-char-prop.cup { background: linear-gradient(180deg, #e8c06a 0 30%, #b8502a 30% 70%, #e8c06a 70% 100%) !important; width: 9px !important; height: 4px !important; border-radius: 2px; }

/* amy109: desktop - a receding reef landscape (pre-rendered canvas) behind the front reef */
.uw-reefbg { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; }
@media (max-width: 600px) { .uw-reefbg:not(.uw-wreckm) { display: none; } }

/* amy111: global facing guard (see the end of app.js) mirrors a travelling figure whose facing
   disagrees with its direction of travel */
.sc-char-sprite.sc-facefix, .sc-boba-walker-sprite.sc-facefix { scale: -1 1 !important; }

/* —— amy112: the title screen. A live, random level fills the screen; the game's UI waits
   underneath, laid out and invisible (so nothing moves when it appears); the title card is a
   fixed overlay that fades away into the game on any key, click or tap. —— */
.title-screen { display: none; }
html:not(.no-title) body.ts-on .title-screen {
  display: flex; position: fixed; inset: 0; z-index: 2000; flex-direction: column; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  opacity: 1; transition: opacity 0.7s ease, transform 0.7s ease;
}
html:not(.no-title) body.ts-on .app { opacity: 0; pointer-events: none; }
html:not(.no-title) body.ts-on.ts-out .app, html:not(.no-title) body.ts-on.ts-done .app { opacity: 1; pointer-events: auto; transition: opacity 0.7s ease 0.1s; }
html:not(.no-title) body.ts-on.ts-out .title-screen { opacity: 0; transform: scale(1.04); pointer-events: none; }
html:not(.no-title) body.ts-on.ts-done .title-screen { display: none; }
.title-screen:focus { outline: none; }
.ts-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 46% at 50% 46%, rgba(6, 8, 22, 0.62) 0%, rgba(6, 8, 22, 0.34) 55%, rgba(6, 8, 22, 0) 100%),
              linear-gradient(to top, rgba(6, 8, 22, 0.55) 0%, rgba(6, 8, 22, 0) 22%); }
.ts-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(0.9rem, 3.2vh, 2rem); padding: 0 4vw; margin-top: -4vh; text-align: center; }
.ts-title { margin: 0; font-family: "Amy Title", "Segoe UI", system-ui, sans-serif; font-weight: 900; line-height: 1.05;
  font-size: clamp(1.9rem, 8.8vw, 6.4rem); letter-spacing: 0.07em; color: #f4fbff; white-space: nowrap;
  text-shadow: 0 0 0.08em #fff, 0 0 0.28em rgba(120, 220, 255, 0.85), 0 0 0.7em rgba(80, 160, 255, 0.55), 0 0.06em 0.02em rgba(0, 0, 30, 0.6); }
.ts-press { margin: 0; font-family: "Amy Title", "Segoe UI", system-ui, sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: clamp(0.72rem, 2.3vw, 1.25rem); letter-spacing: 0.2em; color: #fff4fb;
  text-shadow: 0 0 0.5em rgba(255, 120, 200, 0.85), 0 0.1em 0.1em rgba(0, 0, 30, 0.7);
  animation: tsPulse 2.4s ease-in-out infinite; }
@keyframes tsPulse { 0%, 100% { opacity: 0.42; } 50% { opacity: 1; } }
.ts-credit { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(0.9rem, 3vh, 1.8rem)); margin: 0; text-align: center;
  font-family: "Amy Title", "Segoe UI", system-ui, sans-serif; font-weight: 500; font-size: clamp(0.62rem, 1.6vw, 0.9rem); letter-spacing: 0.24em;
  color: rgba(240, 246, 255, 0.86); text-shadow: 0 0.1em 0.3em rgba(0, 0, 20, 0.8); }
@media (prefers-reduced-motion: reduce) { .ts-press { animation-duration: 4s; } .title-screen, body.ts-on .app { transition-duration: 0.2s !important; } }

/* amy123: Maldives deck people. The drink is a flute held in the hand (it rides the arm), the big
   generic cup that read as a block on the shoulder is hidden, and the black top hat is a wide
   straw sun hat */
.md-p .sc-char-prop.cup { display: none; }
.md-glass.md-inhand { left: 0.5px; top: auto; bottom: -9px; width: 4px; height: 9px; z-index: 4; }
.md-p .sc-char.hair-hat .sc-char-headwear { top: -3px; left: -7px; width: 28px; height: 4px;
  background: linear-gradient(180deg, #e8d29a, #c9ac68); border-radius: 50%; box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.md-p .sc-char.hair-hat .sc-char-headwear::before { top: -5px; left: 7px; width: 14px; height: 6px;
  background: linear-gradient(180deg, #ecd8a4, #d2b574); border-radius: 6px 6px 1px 1px;
  box-shadow: inset 0 -2px 0 #c0564a; }
.md-p.md-d2 .sc-char-arm.r, .md-p.md-d2 .sc-char-prop { animation-delay: -1.3s; }

/* amy123: the far wreck's canvases: full height, behind the reef */
.uw-wreckfar { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
body[data-theme="vegas"] {
  --bg: #120c24;
  --bg-elevated: #1c1434;
  --cyan: #ffc94a;
  --magenta: #ff3d8a;
  --purple: #2a1c4a;
  --violet: #fff8ea;
  --pink: #7fe0ff;
  --text: #fbf6ec;
  --text-dim: #e6dccb;
  --cell-bg: rgba(18, 12, 36, 0.86);
  --cell-given: rgba(30, 20, 56, 0.92);
  --glow-cyan: 0 0 12px rgba(255, 201, 74, 0.45), 0 0 24px rgba(255, 201, 74, 0.2);
  --glow-magenta: 0 0 10px rgba(255, 61, 138, 0.5), 0 0 18px rgba(255, 61, 138, 0.2);
  --glow-purple: 0 0 10px rgba(36, 52, 74, 0.45);
  --accent: #ff3d8a;
  --accent2: #7fe0ff;
  --board-border: #ffc94a;
  --board-bg: rgba(16, 10, 32, 0.9);
  --font-display: "Gill Sans", "Avenir Next", "Trebuchet MS", sans-serif;
}
body[data-theme="vegas"] .bg-glow { background: linear-gradient(180deg, #2f6fc4 0%, #acd0e8 26%, #c4b8c4 31%, #c8b6a0 40%, #b09a80 100%); }
body[data-theme="vegas"] .title {
  background: linear-gradient(90deg, #ffc94a, #fff8ea 35%, #7fe0ff 65%, #ff3d8a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(10, 18, 28, 0.6));
}
body[data-theme="vegas"] .stats,
body[data-theme="vegas"] .volume-row {
  background: rgba(18, 12, 36, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body[data-theme="vegas"] .stat-label,
body[data-theme="vegas"] .volume-label { color: #f6f0e4; }
body[data-theme="vegas"] .stat-value,
body[data-theme="vegas"] .volume-value { color: #7fe0ff; text-shadow: 0 1px 2px rgba(8, 4, 16, 0.8); }
body[data-theme="vegas"] .track-label { color: #7fe0ff; text-shadow: 0 1px 3px rgba(8, 4, 16, 0.95), 0 0 8px rgba(8, 4, 16, 0.6); }
body[data-theme="vegas"] .place-hint { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(8, 4, 16, 0.95), 0 0 6px rgba(8, 4, 16, 0.7); }
body[data-theme="vegas"] .stats,
body[data-theme="vegas"] .volume-row {
  background-color: rgba(18, 12, 36, 0.8);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="vegas"] .toolbar .btn,
body[data-theme="vegas"] .controls .mode-row .btn,
body[data-theme="vegas"] .toolbar .select {
  background-color: rgba(18, 12, 36, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-theme="vegas"] .track-label {
  background-color: rgba(18, 12, 36, 0.72);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(18, 12, 36, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
body[data-theme="vegas"] .place-hint {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-left: 8px;
  padding-right: 8px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
  background-color: rgba(18, 12, 36, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(18, 12, 36, 0.62);
}
.vg-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vg-scene > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.vg-scene > canvas.vg-dark, .vg-scene > canvas.vg-lights { opacity: 0; visibility: hidden; }
body[data-theme="vegas"][data-vg-night="1"] .bg-glow { background: linear-gradient(180deg, #050818 0%, #141838 30%, #3a2448 60%, #6a3450 80%, #1a1630 100%); }
.vg-old { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.8s ease; }
.vg-old > canvas { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
/* amy143 (t299u): Vegas builds in short slices; its layers wait hidden, then fade in */
.vg-scene.vg-wait > canvas:not(.vg-sky) { visibility: hidden !important; }
.vg-scene.vg-in > canvas:not(.vg-sky) { animation: none; }
@keyframes vgIn { from { opacity: 0; } }

/* amy144: Bayou */
body[data-theme="bayou"] {
  --bg: #0c1614;
  --bg-elevated: #14221e;
  --cyan: #c8f060;
  --magenta: #f08ab0;
  --purple: #1c2c26;
  --violet: #f2f6ea;
  --pink: #8ae8d0;
  --text: #f2f4ea;
  --text-dim: #cfd8c8;
  --cell-bg: rgba(12, 22, 20, 0.86);
  --cell-given: rgba(22, 36, 32, 0.92);
  --glow-cyan: 0 0 12px rgba(200, 240, 96, 0.45), 0 0 24px rgba(200, 240, 96, 0.2);
  --glow-magenta: 0 0 10px rgba(240, 138, 176, 0.5), 0 0 18px rgba(240, 138, 176, 0.2);
  --glow-purple: 0 0 10px rgba(28, 44, 38, 0.45);
  --accent: #c8f060;
  --accent2: #8ae8d0;
  --board-border: #c8f060;
  --board-bg: rgba(10, 20, 18, 0.9);
  --font-display: "Gill Sans", "Avenir Next", "Trebuchet MS", sans-serif;
}
body[data-theme="bayou"] .bg-glow { background: linear-gradient(180deg, #7f9ea0 0%, #cfdccf 24%, #8a9e90 32%, #2a3c36 60%, #14221e 100%); }
body[data-theme="bayou"][data-bu-night="1"] .bg-glow { background: linear-gradient(180deg, #060c16 0%, #1c3038 26%, #12201e 40%, #08100e 100%); }
body[data-theme="bayou"] .title {
  background: linear-gradient(90deg, #c8f060, #f2f6ea 40%, #8ae8d0 70%, #f08ab0);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(6, 14, 12, 0.6));
}
body[data-theme="bayou"] .stats,
body[data-theme="bayou"] .volume-row { background-color: rgba(12, 22, 20, 0.8); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-theme="bayou"] .stat-label,
body[data-theme="bayou"] .volume-label { color: #eef2e6; }
body[data-theme="bayou"] .stat-value,
body[data-theme="bayou"] .volume-value { color: #c8f060; text-shadow: 0 1px 2px rgba(4, 10, 8, 0.8); }
body[data-theme="bayou"] .toolbar .btn,
body[data-theme="bayou"] .controls .mode-row .btn,
body[data-theme="bayou"] .toolbar .select { background-color: rgba(12, 22, 20, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-theme="bayou"] .track-label { color: #c8f060; background-color: rgba(12, 22, 20, 0.72); border-radius: 8px; box-shadow: 0 0 0 4px rgba(12, 22, 20, 0.72); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
body[data-theme="bayou"] .place-hint { width: fit-content; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95); background-color: rgba(12, 22, 20, 0.62); border-radius: 8px; box-shadow: 0 0 0 3px rgba(12, 22, 20, 0.62); }
.bu-fog { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vg-scene.vg-wait > .bu-fog { visibility: hidden !important; }
.bu-fog > canvas { position: absolute; pointer-events: none; will-change: transform; animation-name: buDrift; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes buDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--d), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .bu-fog > canvas { animation: none; } }
@media (max-width: 600px) { body[data-theme="bayou"] .volume-row, body[data-theme="bayou"] .toolbar .select { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(12, 22, 20, 0.92); } }

/* amy145: Kyoto */
body[data-theme="kyoto"] {
  --bg: #160c10;
  --bg-elevated: #22141a;
  --cyan: #ffb84a;
  --magenta: #e8483a;
  --purple: #3a1c22;
  --violet: #f2f6ea;
  --pink: #f0d080;
  --text: #f2f4ea;
  --text-dim: #cfd8c8;
  --cell-bg: rgba(28, 14, 18, 0.86);
  --cell-given: rgba(40, 22, 26, 0.92);
  --glow-cyan: 0 0 12px rgba(255, 184, 74, 0.45), 0 0 24px rgba(255, 184, 74, 0.2);
  --glow-magenta: 0 0 10px rgba(232, 72, 58, 0.5), 0 0 18px rgba(232, 72, 58, 0.2);
  --glow-purple: 0 0 10px rgba(28, 44, 38, 0.45);
  --accent: #ffb84a;
  --accent2: #f0d080;
  --board-border: #ffb84a;
  --board-bg: rgba(24, 12, 16, 0.9);
  --font-display: "Gill Sans", "Avenir Next", "Trebuchet MS", sans-serif;
}
body[data-theme="kyoto"] .bg-glow { background: linear-gradient(180deg, #5c8ec8 0%, #d4dceb 30%, #a07848 36%, #5a3a24 62%, #22141a 100%); }
body[data-theme="kyoto"][data-ky-night="1"] .bg-glow { background: linear-gradient(180deg, #050a1c 0%, #1c2c50 30%, #2a1a1a 40%, #100808 100%); }
body[data-theme="kyoto"] .title {
  background: linear-gradient(90deg, #ffb84a, #f2f6ea 40%, #f0d080 70%, #e8483a);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 0 10px rgba(6, 14, 12, 0.6));
}
body[data-theme="kyoto"] .stats,
body[data-theme="kyoto"] .volume-row { background-color: rgba(28, 14, 18, 0.8); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-theme="kyoto"] .stat-label,
body[data-theme="kyoto"] .volume-label { color: #eef2e6; }
body[data-theme="kyoto"] .stat-value,
body[data-theme="kyoto"] .volume-value { color: #ffb84a; text-shadow: 0 1px 2px rgba(4, 10, 8, 0.8); }
body[data-theme="kyoto"] .toolbar .btn,
body[data-theme="kyoto"] .controls .mode-row .btn,
body[data-theme="kyoto"] .toolbar .select { background-color: rgba(28, 14, 18, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body[data-theme="kyoto"] .track-label { color: #ffb84a; background-color: rgba(28, 14, 18, 0.72); border-radius: 8px; box-shadow: 0 0 0 4px rgba(28, 14, 18, 0.72); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
body[data-theme="kyoto"] .place-hint { width: fit-content; margin-left: auto; margin-right: auto; padding-left: 8px; padding-right: 8px; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95); background-color: rgba(28, 14, 18, 0.62); border-radius: 8px; box-shadow: 0 0 0 3px rgba(28, 14, 18, 0.62); }

/* amy159: day/night button: warm gold "night is on" state, never the red/magenta pressed look */
#btn-daynight { color: #f6d27a; border-color: rgba(246, 210, 122, 0.45); }
#btn-daynight[aria-pressed="true"] { color: #ffd76a; border-color: rgba(255, 215, 106, 0.85); box-shadow: 0 0 6px rgba(255, 200, 80, 0.35); background: rgba(255, 200, 80, 0.10); }
#btn-daynight:focus:not(:focus-visible) { outline: none; }

/* amy159: Taipei after dark: a deep blue-violet night over the city instead of the flat milk-tea
   brown, keeping a warm sodium glow low over the skyline (the day/evening skies paint over this) */
body[data-theme="boba"] .bg-glow {
  background:
    radial-gradient(ellipse 90% 38% at 50% 78%, rgba(255, 150, 100, 0.20), transparent 70%),
    radial-gradient(ellipse 70% 45% at 30% 10%, rgba(245, 176, 200, 0.08), transparent 55%),
    linear-gradient(to bottom, #0f1430 0%, #1b1d3e 38%, #3a2b44 66%, #5a3a3a 82%, #2a1f1a 100%);
}