/* 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;
  top: 3px; right: -6px;
  width: 6px; height: 20px;
  background: var(--hair, #4a3020);
  border-radius: 3px 3px 4px 4px;
  transform: rotate(22deg);
  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;
  top: 4px; right: -7px;
  width: 6px; height: 18px;
  background: var(--hair, #4a3020);
  border-radius: 3px;
  transform: rotate(24deg);
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.25);
  z-index: 7;
}
.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: -5px;
  width: 5px; height: 14px;
  background: var(--hair, #4a3020);
  border-radius: 3px;
  transform: rotate(20deg);
}
.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; }
.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 —— */
.sc-taipei101 {
  position: absolute; bottom: 28%; right: 8%; width: 28px; height: 120px;
}
.sc-t101-seg {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(22px - var(--si, 0) * 1.2px);
  height: 12px;
  bottom: calc(var(--si, 0) * 13px);
  background: linear-gradient(180deg, #2a2040, #1a1028);
  border: 1px solid rgba(0,240,255,0.2);
  box-shadow: inset 0 0 6px rgba(0,200,255,0.1), 0 0 4px rgba(0,200,255,0.08);
  border-radius: 1px;
}
.sc-t101-ant {
  position: absolute; top: -18px; left: 50%; width: 2px; height: 22px;
  background: linear-gradient(to top, #00f0ff, transparent);
  transform: translateX(-50%);
  box-shadow: 0 0 6px #00f0ff; opacity: 0.7;
}
/* Far city / village silhouette band — fills empty mid skyline */
.sc-city-skyline {
  position: absolute; left: 0; right: 0; bottom: 26%; height: 38%;
  pointer-events: none;
}
.sc-city-sil {
  position: absolute; bottom: 0;
  background: linear-gradient(180deg, #2a1c14, #1a100c);
  border-radius: 1px 1px 0 0;
  box-shadow: inset 0 0 0 1px rgba(255,200,120,0.04);
}
.sc-city-sil::before {
  content: ""; position: absolute; top: -6px; left: 10%; right: 10%; height: 8px;
  background: #241810;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.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; }
}

.cell.digit-complete-pulse {
  animation: digitCompletePulse 0.7s ease 2;
  z-index: 2;
}
@keyframes digitCompletePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.12); filter: brightness(1.35); box-shadow: 0 0 16px var(--hn-glow, rgba(0,255,102,0.9)); }
}


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