/*
 * RAIN - an idle game about water, patience, and letting go
 *
 * Default look: FROST — breath condensed on cold night glass.
 * Doctrine lives in docs/QUIET_BRIEF.md. Elevation is lightness, not shadow.
 *
 * Color palette (frost):
 *   Ground:      #0a0f1c
 *   Panel:       #101828
 *   Modal:       #16203a
 *   Ink:         rgba(223, 232, 244, .92) / rgba(174, 186, 205, .6) / .38
 *   Accent:      #a4c9e0  (the one accent: cold white-blue)
 *
 * Skins re-declare the :root tokens on body.skin-X and spot-patch the
 * rest; frost imagery (bg.jpg, panel.png grain, emblem) is gated to the
 * default look via body:not(.win95):not([class*="skin-"]).
 */

/* ============================================================
   1. Custom Properties
   ============================================================ */

:root {
  /* frost surfaces: three levels, ever. Elevation is lightness. */
  --bg-deep: #0a0f1c;
  --bg-surface: #101828;
  --frost-modal: #16203a;
  /* ink: three grey steps of the blue-grey carry 90% of hierarchy */
  --text-primary: rgba(223, 232, 244, 0.92);
  --text-white: #eef3fa;
  --muted: rgba(174, 186, 205, 0.55);
  --ink-low: rgba(174, 186, 205, 0.38);
  /* the one accent, resting below full strength */
  --accent-cyan: #a4c9e0;
  --accent-purple: #a9b6d6;
  --afford: #a4c9e0;
  /* edges: hairline OR lightness step, never both */
  --hairline: rgba(255, 255, 255, 0.07);
  --glass-bg: rgba(164, 201, 224, 0.05);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(164, 201, 224, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.14);
  --purple-glass-bg: rgba(164, 201, 224, 0.05);
  --purple-glass-border: rgba(255, 255, 255, 0.08);
  /* tactility: top inner highlight + one light source above */
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.18);
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.25);
  /* paper tooth: one inline turbulence tile, never animated */
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.7'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'/%3E%3C/svg%3E");
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --transition-fast: 0.15s ease;
  --transition-med: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* ============================================================
   2. Reset & Base
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg-deep);
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-deep);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* the air: near-black frost pane, whispered. Default look only —
   skins and win95 keep their own weather. */
body:not(.win95):not([class*="skin-"])::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--bg-deep) url("/frost/bg.jpg") center / cover no-repeat;
  opacity: 0.5;
}

/* grain at 0.02 over the air: its job is killing banding on dark
   radials. Static always; animated grain is CRT, not paper. */
body:not(.win95):not([class*="skin-"])::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--grain);
  background-size: 200px 200px;
  opacity: 0.02;
  mix-blend-mode: soft-light;
}

/* ============================================================
   3. Rain Background Animation
   ============================================================ */

.rain-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.raindrop-bg {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 20px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(164, 201, 224, 0.35),
    transparent
  );
  opacity: 0.3;
  animation: rainfall linear infinite;
}

.raindrop-bg:nth-child(odd) {
  width: 1px;
  height: 24px;
  opacity: 0.25;
}

.raindrop-bg:nth-child(3n) {
  opacity: 0.4;
  height: 16px;
}

@keyframes rainfall {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(100vh);
  }
}

/* ============================================================
   4. Rain Container
   ============================================================ */

.rain-container {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 20px 60px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   5. Header
   ============================================================ */

.rain-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 12px 0 24px;
}

.rain-logo {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: var(--muted);
  user-select: none;
  flex-shrink: 0;
}

.prestige-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-purple);
  background: var(--purple-glass-bg);
  border: 1px solid var(--purple-glass-border);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* the badge shows the frozen multiplier; this whispers what next cycle pays */
.prestige-badge-delta {
  margin-left: 5px;
  font-size: 0.6rem;
  color: var(--ink-low);
  letter-spacing: 0.02em;
}

/* ============================================================
   6. Hero Section
   ============================================================ */

.hero {
  text-align: center;
  padding: 20px 0 32px;
}

.hero-count {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.1;
  /* the one sacred number wears the only glow on screen */
  text-shadow: 0 0 30px rgba(164, 201, 224, 0.13);
  animation: breathe 4s ease-in-out infinite;
  letter-spacing: -0.02em;
}

.hero-dps {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  transition: color var(--transition-med);
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.92;
  }
}

/* ============================================================
   7. Click Zone
   ============================================================ */

.click-section {
  padding: 0 0 28px;
}

.rain-click-zone {
  position: relative;
  isolation: isolate;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--edge-highlight), var(--shadow-raise);
  cursor: pointer;
  overflow: hidden;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-med);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* frost breath on the glass, below the prompt. Default look only. */
body:not(.win95):not([class*="skin-"]) .rain-click-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/frost/panel.png") center top / cover no-repeat;
  opacity: 0.12;
}

.rain-click-zone:hover {
  border-color: var(--glass-border-hover);
}

/* pressed: descend, and the shadow compresses with you or it reads as
   animation instead of contact */
.rain-click-zone:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.92);
  box-shadow: var(--edge-highlight), var(--shadow-rest);
}

/* hover raises lightness a half-step; default look only */
body:not(.win95):not([class*="skin-"]) .rain-click-zone:hover {
  background: #131c2e;
}

.click-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.click-icon {
  font-size: 2.4rem;
  animation: bounce 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(164, 201, 224, 0.25));
}

.click-text {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

/* Ripple effect */
.raindrop-ripple {
  position: absolute;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  background: transparent;
  border: 2px solid rgba(164, 201, 224, 0.4);
  animation: ripple 0.6s ease-out forwards;
  pointer-events: none;
}

/* Floating +1 text */
.drop-floater {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-cyan);
  pointer-events: none;
  animation: float-up 0.8s ease-out forwards;
  text-shadow: 0 0 10px rgba(164, 201, 224, 0.35);
}

/* Golden is the largest thing the tap surface ever produces, and the only
   thing allowed to wear #ffd700. Behavioral color, not decoration. */
.golden-floater {
  font-size: 1.8rem;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4);
  animation: golden-float-up 1s ease-out forwards;
}

.golden-ripple {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
}

@keyframes golden-float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-30px) scale(1.35); }
  100% { opacity: 0; transform: translateY(-60px) scale(1); }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes float-up {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px);
    opacity: 0;
  }
}

/* ============================================================
   8. Milestone
   ============================================================ */

.milestone-section {
  text-align: center;
  padding: 0 0 32px;
  min-height: 2.4em;
}

#milestone-display {
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(174, 186, 205, 0.6);
  letter-spacing: 0.02em;
  transition: opacity var(--transition-slow);
  line-height: 1.5;
}

#milestone-display:empty {
  opacity: 0;
}

/* ============================================================
   9. Section Dividers
   ============================================================ */

.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

/* the rule dissolves into condensation; default look only */
body:not(.win95):not([class*="skin-"]) .section-divider::before,
body:not(.win95):not([class*="skin-"]) .section-divider::after {
  height: 10px;
  background: url("/frost/divider.png") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
}

.section-divider span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   10. Generators
   ============================================================ */

.generators-section {
  padding: 0 0 28px;
}

#generators-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.generator-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border-left: 3px solid transparent;
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  overflow: hidden;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-med);
}

body:not(.win95):not([class*="skin-"]) .generator-row:hover {
  background: #131c2e;
}

.generator-row.can-afford {
  border-left-color: var(--afford);
}

.generator-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.generator-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.generator-sprite {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
.generator-sprite[data-tier="0"] { background-image: url("/sprites/puddle.png"); }
.generator-sprite[data-tier="1"] { background-image: url("/sprites/gutter.png"); }
.generator-sprite[data-tier="2"] { background-image: url("/sprites/stream.png"); }
.generator-sprite[data-tier="3"] { background-image: url("/sprites/river.png"); }
.generator-sprite[data-tier="4"] { background-image: url("/sprites/lake.png"); }
.generator-sprite[data-tier="5"] { background-image: url("/sprites/reservoir.png"); }
.generator-sprite[data-tier="6"] { background-image: url("/sprites/ocean.png"); }
.generator-sprite[data-tier="7"] { background-image: url("/sprites/cloud.png"); }
.generator-sprite[data-tier="8"] { background-image: url("/sprites/storm.png"); }

.generator-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.generator-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.generator-desc {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--muted);
}

.generator-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 170px;
  justify-content: flex-end;
}

.generator-count {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

/* the frost button: panel-surface fill, hairline edge, top highlight.
   Texture whispers inside via the gated ::before below. */
.buy-btn {
  position: relative;
  isolation: isolate;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  transition:
    background 180ms ease-out,
    border-color 180ms ease-out,
    color 180ms ease-out,
    transform 180ms ease-out,
    box-shadow 180ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

/* frost breath + tiled grain; the generated plate's own edges fought the
   CSS rounding (a plate inside a plate), so the texture tiles edgeless
   instead. Below the label, default look only. */
body:not(.win95):not([class*="skin-"]) .buy-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(214, 230, 244, 0.09), rgba(214, 230, 244, 0) 58%),
    url("/frost/panel.png") center / 360px repeat;
  opacity: 0.45;
}

.buy-btn:not(.disabled):hover {
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.buy-btn:not(.disabled):active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.88);
  box-shadow: var(--edge-highlight), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition-duration: 90ms;
}

/* disabled drops text and edge together; nothing else changes */
.buy-btn.disabled {
  color: rgba(174, 186, 205, 0.3);
  border-color: rgba(255, 255, 255, 0.03);
  cursor: not-allowed;
  pointer-events: none;
}

.generator-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

/* Salvage: a whisper under the buy button */
.sell-btn {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.65;
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.sell-btn:hover {
  color: var(--accent-cyan);
  opacity: 1;
}

.sell-btn:active {
  transform: scale(0.97);
}

/* ============================================================
   11. Stats
   ============================================================ */

.stats-section {
  text-align: center;
  padding: 0 0 32px;
}

.stat-row {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

#total-collected {
  transition: color var(--transition-med);
}

/* ============================================================
   12. Prestige
   ============================================================ */

.prestige-section {
  padding: 0 0 40px;
}

.prestige-available {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--purple-glass-border);
  box-shadow: var(--edge-highlight), var(--shadow-raise);
  overflow: hidden;
}

/* condensation on the letting-go panel; default look only */
body:not(.win95):not([class*="skin-"]) .prestige-available::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/frost/panel.png") center / cover no-repeat;
  opacity: 0.1;
}

.prestige-message {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.prestige-bonus {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 20px;
}

.prestige-btn {
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 36px;
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  transition:
    background-color 180ms ease-out,
    border-color 180ms ease-out,
    transform 180ms ease-out,
    box-shadow 180ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

/* the primary verb alone wears the accent; skins keep their own dress */
body:not(.win95):not([class*="skin-"]) .prestige-btn {
  color: rgba(164, 201, 224, 0.85);
}

body:not(.win95):not([class*="skin-"]) .prestige-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(214, 230, 244, 0.09), rgba(214, 230, 244, 0) 58%),
    url("/frost/panel.png") center / 360px repeat;
  opacity: 0.45;
}

.prestige-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.prestige-btn:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.88);
  box-shadow: var(--edge-highlight), 0 1px 2px rgba(0, 0, 0, 0.35);
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(123, 104, 238, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(123, 104, 238, 0.6);
  }
}

.prestige-locked {
  text-align: center;
  padding: 16px 0;
}

.prestige-locked p {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.4;
  letter-spacing: 0.04em;
}

/* ============================================================
   13. Turbo Frame / Stream transitions
   ============================================================ */

#raindrops-count {
  display: inline-block;
  transition: transform var(--transition-fast);
}

#dps-display {
  transition: color var(--transition-med);
}

/* ============================================================
   14. Scrollbar
   ============================================================ */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(200, 214, 229, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 214, 229, 0.2);
}

/* ============================================================
   15. Selection
   ============================================================ */

::selection {
  background: rgba(164, 201, 224, 0.25);
  color: var(--text-white);
}

/* ============================================================
   16. Weather Events
   ============================================================ */

.weather-section {
  margin: 16px 0;
  min-height: 0;
}

.weather-active {
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid;
  background-color: var(--bg-surface);
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  overflow: hidden;
}

.weather-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weather-emoji {
  font-size: 2rem;
  flex-shrink: 0;
}

.weather-sprite {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.weather-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.weather-name {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.weather-desc {
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.8;
}

.weather-timer {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}

.weather-progress {
  margin-top: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.weather-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s linear;
}

/* Weather overlay - covers full screen for atmosphere */
.weather-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  transition: background 1s ease, opacity 1s ease;
  opacity: 0;
}

/* --- Drizzle: soft neon blue --- */
.weather-drizzle.weather-active {
  background: rgba(0, 150, 255, 0.1);
  border-color: #64b5f6;
  box-shadow: 0 0 15px rgba(100, 181, 246, 0.4), 0 0 40px rgba(100, 181, 246, 0.15), inset 0 0 15px rgba(100, 181, 246, 0.1);
  animation: neon-glow-blue 2s ease-in-out infinite;
}
.weather-drizzle .weather-name,
.weather-drizzle .weather-timer { color: #64b5f6; text-shadow: 0 0 10px rgba(100, 181, 246, 0.5); }
.weather-drizzle .weather-bar { background: #64b5f6; box-shadow: 0 0 8px #64b5f6; }
.weather-overlay.weather-drizzle {
  background: rgba(0, 100, 200, 0.12);
  opacity: 1;
}

/* --- Downpour: intense neon cyan --- */
.weather-downpour.weather-active {
  background: rgba(0, 210, 255, 0.12);
  border-color: #00d2ff;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.5), 0 0 60px rgba(0, 210, 255, 0.2), inset 0 0 20px rgba(0, 210, 255, 0.1);
  animation: neon-glow-cyan 1.5s ease-in-out infinite;
}
.weather-downpour .weather-name,
.weather-downpour .weather-timer { color: #00d2ff; text-shadow: 0 0 12px rgba(0, 210, 255, 0.6); }
.weather-downpour .weather-bar { background: #00d2ff; box-shadow: 0 0 10px #00d2ff; }
.weather-overlay.weather-downpour {
  background: rgba(0, 160, 220, 0.15);
  opacity: 1;
}

/* --- Thunderstorm: electric neon yellow --- */
.weather-thunderstorm.weather-active {
  background: rgba(255, 235, 59, 0.1);
  border-color: #ffeb3b;
  box-shadow: 0 0 20px rgba(255, 235, 59, 0.5), 0 0 60px rgba(255, 235, 59, 0.2), inset 0 0 20px rgba(255, 235, 59, 0.08);
  animation: neon-glow-yellow 1s ease-in-out infinite, lightning-flicker 3s infinite;
}
.weather-thunderstorm .weather-name,
.weather-thunderstorm .weather-timer { color: #ffeb3b; text-shadow: 0 0 15px rgba(255, 235, 59, 0.7); }
.weather-thunderstorm .weather-bar { background: #ffeb3b; box-shadow: 0 0 10px #ffeb3b; }
.weather-overlay.weather-thunderstorm {
  background: rgba(180, 160, 0, 0.12);
  opacity: 1;
  animation: lightning-flash 2.5s infinite;
}

/* --- Hurricane: violent neon purple --- */
.weather-hurricane.weather-active {
  background: rgba(186, 85, 211, 0.12);
  border-color: #da70d6;
  box-shadow: 0 0 25px rgba(218, 112, 214, 0.5), 0 0 70px rgba(218, 112, 214, 0.25), inset 0 0 25px rgba(218, 112, 214, 0.1);
  animation: neon-glow-purple 0.8s ease-in-out infinite;
}
.weather-hurricane .weather-name,
.weather-hurricane .weather-timer { color: #da70d6; text-shadow: 0 0 15px rgba(218, 112, 214, 0.7); }
.weather-hurricane .weather-bar { background: #da70d6; box-shadow: 0 0 12px #da70d6; }
.weather-overlay.weather-hurricane {
  background: rgba(120, 40, 140, 0.18);
  opacity: 1;
}

/* --- Fog: ghostly neon white --- */
.weather-fog.weather-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(200, 210, 220, 0.5);
  box-shadow: 0 0 20px rgba(200, 210, 220, 0.3), 0 0 50px rgba(200, 210, 220, 0.1), inset 0 0 20px rgba(200, 210, 220, 0.05);
  animation: neon-glow-white 3s ease-in-out infinite;
}
.weather-fog .weather-name,
.weather-fog .weather-timer { color: #cfd8dc; text-shadow: 0 0 10px rgba(200, 210, 220, 0.5); }
.weather-fog .weather-bar { background: #b0bec5; box-shadow: 0 0 6px #b0bec5; }
.weather-overlay.weather-fog {
  background: rgba(180, 190, 200, 0.1);
  opacity: 1;
}

/* --- Tsunami: neon green apocalypse --- */
.weather-tsunami.weather-active {
  background: rgba(0, 230, 118, 0.15);
  border-color: #69f0ae;
  box-shadow: 0 0 30px rgba(105, 240, 174, 0.6), 0 0 80px rgba(105, 240, 174, 0.3), 0 0 120px rgba(105, 240, 174, 0.1), inset 0 0 30px rgba(105, 240, 174, 0.15);
  animation: neon-glow-green 0.5s ease-in-out infinite;
}
.weather-tsunami .weather-name,
.weather-tsunami .weather-timer { color: #69f0ae; text-shadow: 0 0 20px rgba(105, 240, 174, 0.8); }
.weather-tsunami .weather-bar { background: #69f0ae; box-shadow: 0 0 15px #69f0ae; }
.weather-overlay.weather-tsunami {
  background: rgba(0, 180, 90, 0.2);
  opacity: 1;
}

/* --- Drought: cracked earth, amber/orange warning --- */
.weather-drought.weather-active {
  background: rgba(255, 152, 0, 0.1);
  border-color: #ff9800;
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.4), 0 0 50px rgba(255, 152, 0, 0.15), inset 0 0 20px rgba(255, 152, 0, 0.08);
  animation: neon-glow-amber 1.5s ease-in-out infinite;
}
.weather-drought .weather-name,
.weather-drought .weather-timer { color: #ff9800; text-shadow: 0 0 12px rgba(255, 152, 0, 0.6); }
.weather-drought .weather-bar { background: #ff9800; box-shadow: 0 0 8px #ff9800; }
.weather-overlay.weather-drought {
  background: rgba(120, 60, 0, 0.15);
  opacity: 1;
}

/* Stop rain animation during drought */
body:has(.weather-overlay.weather-drought) .raindrop-bg {
  animation-play-state: paused;
  opacity: 0.03;
  transition: opacity 2s ease;
}

/* --- Relief: rainbow, warm gold/pink glow --- */
.weather-relief.weather-active {
  background: rgba(255, 215, 0, 0.1);
  border-color: #ffd700;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 100, 150, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.1);
  animation: neon-glow-gold 1.2s ease-in-out infinite;
}
.weather-relief .weather-name,
.weather-relief .weather-timer { color: #ffd700; text-shadow: 0 0 15px rgba(255, 215, 0, 0.7); }
.weather-relief .weather-bar { background: linear-gradient(90deg, #ff6b6b, #ffd700, #69f0ae, #64b5f6, #da70d6); box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
.weather-overlay.weather-relief {
  background: rgba(200, 150, 0, 0.1);
  opacity: 1;
}

/* --- Snow: icy white/blue, slow pulse --- */
.weather-snow.weather-active {
  background: rgba(200, 220, 255, 0.12);
  border-color: #b3e5fc;
  box-shadow: 0 0 20px rgba(179, 229, 252, 0.4), 0 0 50px rgba(179, 229, 252, 0.15), inset 0 0 20px rgba(179, 229, 252, 0.08);
  animation: neon-glow-ice 2s ease-in-out infinite;
}
.weather-snow .weather-name,
.weather-snow .weather-timer { color: #b3e5fc; text-shadow: 0 0 12px rgba(179, 229, 252, 0.6); }
.weather-snow .weather-bar { background: #b3e5fc; box-shadow: 0 0 8px #b3e5fc; }
.weather-overlay.weather-snow {
  background: rgba(200, 220, 255, 0.15);
  opacity: 1;
}
body:has(.weather-overlay.weather-snow) .raindrop-bg {
  opacity: 0.15;
  filter: brightness(2);
  transition: opacity 2s ease, filter 2s ease;
}

/* --- Sleet: grey/steel blue, harsh --- */
.weather-sleet.weather-active {
  background: rgba(150, 170, 190, 0.12);
  border-color: #90a4ae;
  box-shadow: 0 0 20px rgba(144, 164, 174, 0.4), 0 0 50px rgba(144, 164, 174, 0.15), inset 0 0 20px rgba(144, 164, 174, 0.08);
  animation: neon-glow-steel 1.8s ease-in-out infinite;
}
.weather-sleet .weather-name,
.weather-sleet .weather-timer { color: #90a4ae; text-shadow: 0 0 12px rgba(144, 164, 174, 0.6); }
.weather-sleet .weather-bar { background: #90a4ae; box-shadow: 0 0 8px #90a4ae; }
.weather-overlay.weather-sleet {
  background: rgba(100, 120, 140, 0.15);
  opacity: 1;
}

@keyframes neon-glow-ice {
  0%, 100% { box-shadow: 0 0 15px rgba(179, 229, 252, 0.4), 0 0 40px rgba(179, 229, 252, 0.15), inset 0 0 15px rgba(179, 229, 252, 0.1); }
  50% { box-shadow: 0 0 25px rgba(179, 229, 252, 0.6), 0 0 60px rgba(179, 229, 252, 0.25), inset 0 0 25px rgba(179, 229, 252, 0.15); }
}

@keyframes neon-glow-steel {
  0%, 100% { box-shadow: 0 0 15px rgba(144, 164, 174, 0.4), 0 0 40px rgba(144, 164, 174, 0.15), inset 0 0 15px rgba(144, 164, 174, 0.1); }
  50% { box-shadow: 0 0 25px rgba(144, 164, 174, 0.6), 0 0 60px rgba(144, 164, 174, 0.25), inset 0 0 25px rgba(144, 164, 174, 0.15); }
}

/* Neon Glow Animations */
@keyframes neon-glow-blue {
  0%, 100% { box-shadow: 0 0 15px rgba(100, 181, 246, 0.4), 0 0 40px rgba(100, 181, 246, 0.15), inset 0 0 15px rgba(100, 181, 246, 0.1); }
  50% { box-shadow: 0 0 25px rgba(100, 181, 246, 0.6), 0 0 60px rgba(100, 181, 246, 0.25), inset 0 0 25px rgba(100, 181, 246, 0.15); }
}

@keyframes neon-glow-cyan {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 210, 255, 0.5), 0 0 60px rgba(0, 210, 255, 0.2), inset 0 0 20px rgba(0, 210, 255, 0.1); }
  50% { box-shadow: 0 0 35px rgba(0, 210, 255, 0.7), 0 0 90px rgba(0, 210, 255, 0.3), inset 0 0 30px rgba(0, 210, 255, 0.15); }
}

@keyframes neon-glow-yellow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 235, 59, 0.5), 0 0 60px rgba(255, 235, 59, 0.2), inset 0 0 20px rgba(255, 235, 59, 0.08); }
  50% { box-shadow: 0 0 35px rgba(255, 235, 59, 0.7), 0 0 90px rgba(255, 235, 59, 0.35), inset 0 0 30px rgba(255, 235, 59, 0.12); }
}

@keyframes neon-glow-purple {
  0%, 100% { box-shadow: 0 0 25px rgba(218, 112, 214, 0.5), 0 0 70px rgba(218, 112, 214, 0.25), inset 0 0 25px rgba(218, 112, 214, 0.1); }
  50% { box-shadow: 0 0 40px rgba(218, 112, 214, 0.7), 0 0 100px rgba(218, 112, 214, 0.35), inset 0 0 35px rgba(218, 112, 214, 0.15); }
}

@keyframes neon-glow-white {
  0%, 100% { box-shadow: 0 0 20px rgba(200, 210, 220, 0.3), 0 0 50px rgba(200, 210, 220, 0.1), inset 0 0 20px rgba(200, 210, 220, 0.05); }
  50% { box-shadow: 0 0 30px rgba(200, 210, 220, 0.4), 0 0 70px rgba(200, 210, 220, 0.15), inset 0 0 30px rgba(200, 210, 220, 0.08); }
}

@keyframes neon-glow-green {
  0%, 100% { box-shadow: 0 0 30px rgba(105, 240, 174, 0.6), 0 0 80px rgba(105, 240, 174, 0.3), 0 0 120px rgba(105, 240, 174, 0.1), inset 0 0 30px rgba(105, 240, 174, 0.15); }
  50% { box-shadow: 0 0 50px rgba(105, 240, 174, 0.8), 0 0 120px rgba(105, 240, 174, 0.4), 0 0 180px rgba(105, 240, 174, 0.15), inset 0 0 40px rgba(105, 240, 174, 0.2); }
}

@keyframes neon-glow-amber {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 152, 0, 0.4), 0 0 50px rgba(255, 152, 0, 0.15), inset 0 0 20px rgba(255, 152, 0, 0.08); }
  50% { box-shadow: 0 0 30px rgba(255, 152, 0, 0.6), 0 0 70px rgba(255, 152, 0, 0.25), inset 0 0 30px rgba(255, 152, 0, 0.12); }
}

@keyframes neon-glow-gold {
  0%, 100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 100, 150, 0.2), inset 0 0 20px rgba(255, 215, 0, 0.1); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.7), 0 0 90px rgba(255, 100, 150, 0.3), inset 0 0 30px rgba(255, 215, 0, 0.15); }
}

@keyframes lightning-flash {
  0%, 47%, 51%, 88%, 92%, 100% { opacity: 1; }
  48% { opacity: 0.4; }
  49% { background: rgba(255, 255, 255, 0.2); opacity: 1; }
  50% { opacity: 0.8; }
  89% { opacity: 0.5; }
  90% { background: rgba(255, 255, 255, 0.15); opacity: 1; }
  91% { opacity: 0.7; }
}

@keyframes lightning-flicker {
  0%, 46%, 52%, 87%, 93%, 100% { border-color: #ffeb3b; }
  47% { border-color: #fff; box-shadow: 0 0 50px rgba(255, 255, 255, 0.6), 0 0 100px rgba(255, 235, 59, 0.4); }
  48% { border-color: #ffeb3b; }
  88% { border-color: #fff; box-shadow: 0 0 40px rgba(255, 255, 255, 0.4), 0 0 80px rgba(255, 235, 59, 0.3); }
  89% { border-color: #ffeb3b; }
}

/* ============================================================
   17. Audio Toggle
   ============================================================ */

.audio-control {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.audio-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.audio-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.audio-toggle.audio-active {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  color: var(--accent-cyan);
}

/* Expandable audio dropdown */
.audio-pill {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--frost-modal, #16203a);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  box-shadow: var(--edge-highlight), var(--shadow-raise);
}

.audio-control.expanded .audio-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.audio-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  position: relative;
}

.audio-pill-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.audio-pill-btn.active {
  background: var(--glass-bg-hover);
  color: var(--accent-cyan);
}

.audio-pill-btn.muted {
  color: var(--muted);
  opacity: 0.6;
}

.audio-pill-btn.muted::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: rgba(255, 100, 100, 0.7);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* ============================================================
   18. Achievements
   ============================================================ */

/* Achievement counter button */
.achievement-counter-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.achievement-counter-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Achievements panel */
.achievements-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  background: var(--frost-modal, #16203a);
  border-top: 1px solid var(--hairline);
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 -10px 40px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.4s;
  z-index: 500;
  overflow-y: auto;
  padding: 0 20px 20px;
  visibility: hidden;
}

.achievements-panel-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0s;
}

.achievements-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  position: sticky;
  top: 0;
  background: var(--frost-modal, #16203a);
  z-index: 1;
}

.achievements-panel-title {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--accent-cyan);
}

.achievements-panel-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  transition: color var(--transition-fast);
}

.achievements-panel-close:hover {
  color: var(--text-white);
}

.achievements-category {
  margin-bottom: 16px;
}

.achievements-category-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.achievements-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  transition: background var(--transition-fast);
}

.achievement-item.earned {
  background: rgba(164, 201, 224, 0.05);
  overflow: hidden;
}

.achievement-item:not(.earned) {
  opacity: 0.4;
}

.achievement-item-emoji {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}

.achievement-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.achievement-item-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-white);
}

.achievement-item.earned .achievement-item-name {
  color: var(--accent-cyan);
}

.achievement-item-desc {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--muted);
}

/* Hint-eligible unearned achievements: lift opacity so hints are readable */
.achievement-item.has-hints {
  opacity: 0.65;
}

/* Achievement hint purchases */
.achievement-hints {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.achievement-hint-text {
  font-size: 0.65rem;
  font-style: italic;
  color: rgba(174, 186, 205, 0.7);
  line-height: 1.3;
}

.achievement-hint-form {
  display: inline;
}

.achievement-hint-btn {
  font-size: 0.6rem;
  font-family: inherit;
  font-style: italic;
  color: rgba(164, 201, 224, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.achievement-hint-btn:hover {
  color: rgba(196, 220, 236, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

/* Desktop: wider panel, centered */
@media (min-width: 600px) {
  .achievements-panel {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    max-width: 500px;
    border-radius: 16px 16px 0 0;
  }

  .achievements-panel-open {
    transform: translateX(-50%) translateY(0);
  }
}

/* Toast notifications */
#achievement-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* toast level: a clear lightness step, so the border stays transparent
   (skins re-color it; frost lets the step speak) */
.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--frost-modal, #16203a);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-raise);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: auto;
  max-width: 320px;
}

.achievement-toast-visible {
  transform: translateX(0);
}

.achievement-toast-leaving {
  transform: translateX(120%);
  opacity: 0;
}

.achievement-toast-emoji {
  font-size: 1.8rem;
  flex-shrink: 0;
}

.achievement-toast-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achievement-toast-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-cyan);
  font-weight: 600;
}

.achievement-toast-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-white);
}

.achievement-toast-desc {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-primary);
  opacity: 0.8;
}

/* Unlock toasts — generator (cyan) and enchantment (purple) */
.unlock-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--frost-modal, #16203a);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-raise);
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  pointer-events: auto;
  max-width: 320px;
}

.unlock-toast.generator-unlock {
  border: 1px solid var(--glass-border);
}

.unlock-toast.upgrade-unlock {
  border: 1px solid var(--purple-glass-border);
}

.unlock-label-generator {
  color: var(--accent-cyan);
}

.unlock-label-upgrade {
  color: var(--accent-purple);
}

.toast-sprite {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.reset-btn {
  background: rgba(180, 60, 60, 0.2) !important;
  border-color: rgba(180, 60, 60, 0.4) !important;
  color: rgba(255, 120, 120, 0.8) !important;
}

.reset-btn:hover {
  background: rgba(180, 60, 60, 0.35) !important;
}

/* Mobile toast positioning */
@media (max-width: 480px) {
  #achievement-toast {
    top: auto;
    bottom: 20px;
    right: 10px;
    left: 10px;
  }

  .achievement-toast,
  .unlock-toast {
    max-width: none;
    transform: translateY(120%);
  }

  .achievement-toast-visible {
    transform: translateY(0);
  }

  .achievement-toast-leaving {
    transform: translateY(120%);
    opacity: 0;
  }
}

/* ============================================================
   19. Upgrades
   ============================================================ */

.upgrades-section {
  margin-top: 24px;
}

/* --- Maxed Enchantment Collapse --- */
.maxed-summary {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}
.maxed-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.maxed-toggle:hover { color: rgba(255,255,255,0.6); }
.maxed-arrow {
  font-size: 0.55rem;
  transition: transform 0.2s ease;
  display: inline-block;
}
.maxed-arrow-open { transform: rotate(90deg); }
.maxed-count { font-weight: 500; }
.maxed-grid {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.02);
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.05);
}
.maxed-expanded {
  display: flex;
}
.maxed-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  flex: 1 1 auto;
  min-width: 0;
}
.maxed-chip-sprite {
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  flex-shrink: 0;
}
.maxed-chip-emoji { font-size: 0.8rem; flex-shrink: 0; }
.maxed-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.maxed-chip-name { opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maxed-chip-desc {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}
/* --- Enchantment Tabs --- */
.upgrade-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  justify-content: center;
}
.upgrade-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(174, 186, 205, 0.45);
  font-size: 0.7rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  border-radius: 5px;
  box-shadow: var(--edge-highlight);
  transition: all 0.25s ease;
}
.upgrade-tab:hover {
  color: rgba(223, 232, 244, 0.7);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.upgrade-tab-active {
  color: var(--accent-cyan);
  background: rgba(164, 201, 224, 0.08);
  border-color: rgba(164, 201, 224, 0.3);
}

.maxed-chip-badge {
  font-size: 0.55rem;
  background: rgba(164, 201, 224, 0.12);
  color: rgba(164, 201, 224, 0.7);
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.upgrade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border-left: 3px solid transparent;
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  overflow: hidden;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-med);
  margin-bottom: 8px;
}

body:not(.win95):not([class*="skin-"]) .upgrade-row:hover {
  background: #131c2e;
}

.upgrade-row.can-afford {
  border-left-color: var(--accent-purple);
}

.upgrade-row.maxed {
  opacity: 0.5;
}

.upgrade-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.upgrade-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.upgrade-sprite {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
.upgrade-sprite[data-key="iron_fingers"] { background-image: url("/sprites/iron_fingers.png"); }
.upgrade-sprite[data-key="morning_dew"] { background-image: url("/sprites/morning_dew.png"); }
.upgrade-sprite[data-key="rubber_duck"] { background-image: url("/sprites/rubber_duck.png"); }
.upgrade-sprite[data-key="water_wheel"] { background-image: url("/sprites/water_wheel.png"); }
.upgrade-sprite[data-key="bargain_hunter"] { background-image: url("/sprites/bargain_hunter.png"); }

.upgrade-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.upgrade-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-purple);
}

.upgrade-desc {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
}

.upgrade-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 170px;
  justify-content: flex-end;
}

.upgrade-level {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-purple);
  min-width: 36px;
  text-align: right;
}

.maxed-label {
  color: var(--accent-cyan);
  font-weight: 700;
}

.upgrade-buy {
  border-color: rgba(255, 255, 255, 0.08);
}

.upgrade-buy:not(.disabled):hover {
  border-color: rgba(255, 255, 255, 0.14);
}

/* ============================================================
   20. Responsive Adjustments
   ============================================================ */

@media (max-width: 480px) {
  .rain-header { gap: 4px; }
  .rain-logo { font-size: 0.72rem; letter-spacing: 0.2em; }
  .prestige-badge { font-size: 0.58rem; padding: 3px 7px; }
  .header-controls { gap: 4px; }
  .help-toggle { width: 30px; height: 30px; font-size: 0.75rem; }
}

@media (max-width: 380px) {
  .rain-container {
    padding: 16px 14px 48px;
  }

  .rain-click-zone {
    min-height: 170px;
  }

  .generator-row {
    padding: 12px 12px;
  }

  .buy-btn {
    padding: 7px 12px;
    font-size: 0.68rem;
  }

  .generator-emoji {
    font-size: 1.2rem;
    width: 28px;
  }

  .generator-sprite {
    width: 36px;
    height: 36px;
  }

  .upgrade-sprite {
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 481px) {
  .rain-container {
    padding: 28px 24px 80px;
  }

  .rain-click-zone {
    min-height: 220px;
  }
}

/* ============================================================
   The Ending
   ============================================================ */

.game-ended .rain-header .prestige-badge,
.game-ended .generators-section,
.game-ended .upgrades-section,
.game-ended .stats-section,
.game-ended .prestige-section,
.game-ended .weather-section,
.game-ended .milestone-section {
  display: none;
}

.game-ended .hero-count {
  animation: none;
  font-size: clamp(2rem, 8vw, 3.5rem);
  opacity: 0.6;
}

.game-ended .hero-dps {
  display: none;
}

.game-ended .rain-click-zone {
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.01);
}

.game-ended .click-text {
  display: none;
}

.game-ended .click-icon {
  animation: none;
  opacity: 0.4;
}

.game-ended .milestone-text {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-top: 40px;
}

.game-ended .rain-logo {
  opacity: 0.3;
}

/* Stop rain when game has ended */
body:has(.game-ended) .raindrop-bg {
  animation-play-state: paused;
  opacity: 0;
  transition: opacity 3s ease;
}

/* ============================================================
   20. Ending Sequence
   ============================================================ */

.ending-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 3rem;
}

/* --- Thank You Message --- */

.ending-message {
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  margin-bottom: 2.5rem;
  font-style: italic;
  letter-spacing: 0.06em;
  min-height: 1.8em;
}

/* --- Stats Board --- */

.ending-stats-board {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 2rem;
}

.ending-stats-title {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1.5rem;
}

.stat-row-ending {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-row-ending:last-child {
  border-bottom: none;
}

.stat-label-ending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
}

.stat-icon-ending {
  font-size: 1rem;
  opacity: 0.7;
}

.stat-value-ending {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* --- Arcade Entry --- */

.ending-arcade {
  text-align: center;
  margin: 2rem auto;
  max-width: 340px;
}

.arcade-prompt {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1.5rem;
  transition: color 0.4s ease;
}

.arcade-prompt.confirmed {
  color: rgba(164, 201, 224, 0.7);
}

.arcade-slots {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.arcade-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.arcade-arrow {
  width: 44px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 0.7rem;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.arcade-arrow:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.arcade-arrow:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.93);
}

.arcade-letter {
  width: 52px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  letter-spacing: 0;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}

.arcade-letter.active-slot {
  border-color: rgba(164, 201, 224, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
}

.arcade-letter.blink-off {
  color: transparent;
}

.arcade-confirm {
  padding: 0.55rem 2.2rem;
  background: rgba(164, 201, 224, 0.08);
  border: 1px solid rgba(164, 201, 224, 0.25);
  border-radius: 9px;
  color: rgba(164, 201, 224, 0.75);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--edge-highlight);
  transition: all 0.2s ease;
  outline: none;
}

.arcade-confirm:hover {
  background: rgba(164, 201, 224, 0.14);
  border-color: rgba(164, 201, 224, 0.4);
  color: rgba(223, 232, 244, 0.9);
}

.arcade-confirm:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.88);
}

/* --- Leaderboard --- */

.ending-leaderboard {
  width: 100%;
  max-width: 340px;
  margin: 1.5rem auto;
}

.leaderboard-title {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1.2rem;
}

.leaderboard-entry {
  display: flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  gap: 0.8rem;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.leaderboard-entry:last-child {
  border-bottom: none;
}

.leaderboard-rank {
  width: 1.8rem;
  text-align: right;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.3);
  font-variant-numeric: tabular-nums;
}

.leaderboard-initials {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.12em;
  min-width: 3.5rem;
}

.leaderboard-time {
  flex: 1;
  text-align: right;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}

.leaderboard-entry.is-you {
  background: rgba(164, 201, 224, 0.06);
  border-bottom-color: transparent;
}

.leaderboard-entry.is-you .leaderboard-initials {
  color: rgba(164, 201, 224, 0.9);
}

.leaderboard-entry.is-you .leaderboard-rank {
  color: rgba(164, 201, 224, 0.6);
}

.leaderboard-entry.is-you .leaderboard-time {
  color: rgba(164, 201, 224, 0.6);
}

.leaderboard-empty {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
  padding: 1rem;
}

/* --- Water Separator --- */
.water-separator {
  position: relative;
  margin: 0.5rem 0 0;
  overflow: hidden;
}

.water-separator-wave {
  display: block;
  width: 100%;
  height: 24px;
}

.water-separator-drops {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  padding: 0.6rem 0 0.4rem;
}

.water-separator-drops span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: rgba(164, 201, 224, 0.25);
  animation: sep-drip 2.4s ease-in infinite;
}

.water-separator-drops span:nth-child(1) { animation-delay: 0s;    animation-duration: 2.2s; }
.water-separator-drops span:nth-child(2) { animation-delay: 0.5s;  animation-duration: 2.8s; }
.water-separator-drops span:nth-child(3) { animation-delay: 1.1s;  animation-duration: 2.4s; }
.water-separator-drops span:nth-child(4) { animation-delay: 0.3s;  animation-duration: 3.0s; }
.water-separator-drops span:nth-child(5) { animation-delay: 1.7s;  animation-duration: 2.6s; }

@keyframes sep-drip {
  0%   { transform: translateY(0) scaleY(1); opacity: 0.5; }
  60%  { transform: translateY(6px) scaleY(1.4); opacity: 0.8; }
  80%  { transform: translateY(8px) scaleY(0.6); opacity: 0.3; }
  100% { transform: translateY(10px) scaleY(0); opacity: 0; }
}

/* --- Permalink --- */
.permalink-section {
  padding: 0 1rem 1.25rem;
  max-width: 420px;
  margin: 0 auto;
}

.permalink-label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.2);
  text-align: center;
  margin-bottom: 0.4rem;
}

.permalink-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}

.permalink-url {
  flex: 1;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
}

.permalink-copy {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.permalink-copy:hover {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
}

/* --- Leaderboard Peek --- */
.peek-leaderboard-section {
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.peek-elapsed {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.peek-leaderboard {
  max-width: 340px;
  margin: 0 auto;
}

.peek-leaderboard-toggle {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(164, 201, 224, 0.45);
  cursor: pointer;
  padding: 0.6rem 1rem;
  user-select: none;
  list-style: none;
  border: 1px solid rgba(164, 201, 224, 0.15);
  border-radius: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  background: rgba(164, 201, 224, 0.04);
}

.peek-leaderboard-toggle::-webkit-details-marker { display: none; }

.peek-leaderboard[open] .peek-leaderboard-toggle {
  color: rgba(164, 201, 224, 0.7);
  border-color: rgba(164, 201, 224, 0.25);
  background: rgba(164, 201, 224, 0.07);
}

.peek-leaderboard-toggle:hover {
  color: rgba(164, 201, 224, 0.7);
  border-color: rgba(164, 201, 224, 0.25);
  background: rgba(164, 201, 224, 0.07);
}

.peek-leaderboard-body {
  margin-top: 0.75rem;
  animation: fadeIn 0.2s ease;
}

/* --- Attribution --- */
.game-attribution {
  text-align: center;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.12);
  padding: 0.75rem 1rem 1.5rem;
  letter-spacing: 0.05em;
}

.game-attribution a {
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}

.game-attribution a:hover {
  color: rgba(255, 255, 255, 0.4);
}

/* --- Card Shimmer Effects --- */

/* Holographic shine sweep on generator/upgrade cards */
.generator-row::before,
.upgrade-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 80%
  );
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.generator-row,
.upgrade-row {
  position: relative;
}
.generator-row:hover::before,
.upgrade-row:hover::before {
  left: 120%;
}

/* Can-afford: the accent touches live progress, nothing pulses */
.generator-row.can-afford {
  border-left-color: rgba(164, 201, 224, 0.55);
  box-shadow: var(--edge-highlight), var(--shadow-rest);
}
.upgrade-row.can-afford {
  border-left-color: rgba(169, 182, 214, 0.55);
  box-shadow: var(--edge-highlight), var(--shadow-rest);
}

/* Earned achievement subtle gold shimmer */
.achievement-item.earned {
  position: relative;
}
.achievement-item.earned::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(164, 201, 224, 0.04) 45%,
    rgba(164, 201, 224, 0.08) 50%,
    rgba(164, 201, 224, 0.04) 55%,
    transparent 70%
  );
  background-size: 300% 300%;
  animation: achievement-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes achievement-shimmer {
  0% { background-position: 100% 100%; }
  50% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Click zone subtle ripple border animation */
.rain-click-zone::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(164, 201, 224, 0.12),
    transparent,
    rgba(164, 201, 224, 0.06),
    transparent
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 1px;
  animation: click-zone-rotate 6s linear infinite;
  pointer-events: none;
}
@keyframes click-zone-rotate {
  to { filter: hue-rotate(360deg); }
}

/* Weather banner shimmer */
.weather-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  animation: weather-shine 3s ease-in-out infinite;
  pointer-events: none;
}
.weather-active {
  position: relative;
}
@keyframes weather-shine {
  0% { left: -50%; }
  100% { left: 150%; }
}

/* --- Difficulty Picker --- */
.difficulty-picker {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.difficulty-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.25s ease;
  color: rgba(255,255,255,0.5);
}
.difficulty-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
}
.difficulty-selected {
  border-color: rgba(164, 201, 224, 0.55);
  background: rgba(164, 201, 224, 0.08);
  color: rgba(255,255,255,0.9);
}
.difficulty-sprite {
  width: 72px;
  height: 72px;
  border-radius: 0.5rem;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.difficulty-selected .difficulty-sprite {
  opacity: 1;
}
.difficulty-name {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.difficulty-desc {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  line-height: 1.3;
}

/* --- Release Notes Link --- */
/* --- Playing Now Counter --- */
.playing-now {
  text-align: center;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.18);
  padding: 0.5rem 1rem 0.25rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}
.playing-now-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(100, 220, 120, 0.6);
  animation: playing-now-pulse 2s ease-in-out infinite;
}
@keyframes playing-now-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.release-notes-link {
  color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
.release-notes-link:hover {
  color: rgba(255, 255, 255, 0.4);
}

/* --- Release Notes Modal --- */
.release-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 20, 0.82);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.release-modal-panel {
  position: relative;
  isolation: isolate;
  background: var(--frost-modal, #16203a);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 28px 32px 24px;
  max-width: 440px;
  width: 90%;
  overflow: hidden;
  box-shadow: var(--edge-highlight), var(--shadow-raise);
}

body:not(.win95):not([class*="skin-"]) .release-modal-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/frost/panel.png") center / cover no-repeat;
  opacity: 0.1;
}

.release-modal-date {
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(164, 201, 224, 0.55);
  margin-bottom: 18px;
}

.release-modal-bullets {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
}

.release-modal-bullets li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(223, 232, 244, 0.7);
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
}

.release-modal-bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(164, 201, 224, 0.45);
}

.release-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 16px;
}

.release-modal-all {
  font-size: 11px;
  color: rgba(174, 186, 205, 0.38);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.release-modal-all:hover { color: rgba(164, 201, 224, 0.7); }

.release-modal-dismiss {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(223, 232, 244, 0.7);
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  letter-spacing: 0.05em;
}
.release-modal-dismiss:hover {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}

/* --- Let Go Modal --- */
.letgo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 20, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.letgo-overlay.visible {
  opacity: 1;
}

.letgo-modal {
  position: relative;
  isolation: isolate;
  max-width: 360px;
  width: 90%;
  text-align: center;
  padding: 2.5rem 2rem;
  background: var(--frost-modal, #16203a);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--edge-highlight), var(--shadow-raise);
  animation: letgo-rise 0.35s ease forwards;
}

body:not(.win95):not([class*="skin-"]) .letgo-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/frost/panel.png") center / cover no-repeat;
  opacity: 0.1;
}

@keyframes letgo-rise {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.letgo-drop {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  opacity: 0.7;
}

.letgo-line {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1rem;
  letter-spacing: 0.03em;
}

.letgo-subline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.letgo-final {
  color: rgba(255, 255, 255, 0.25);
  font-style: italic;
  margin-bottom: 2rem;
}

.letgo-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.letgo-confirm {
  background: rgba(164, 201, 224, 0.08);
  border: 1px solid rgba(164, 201, 224, 0.3);
  color: rgba(164, 201, 224, 0.85);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: var(--edge-highlight);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.letgo-confirm:hover {
  background: rgba(164, 201, 224, 0.14);
  border-color: rgba(164, 201, 224, 0.45);
  color: rgba(223, 232, 244, 0.95);
}

.letgo-confirm:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.88);
}

.letgo-cancel {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0.4rem;
  transition: color 0.2s;
}

.letgo-cancel:hover {
  color: rgba(255, 255, 255, 0.45);
}

/* --- Begin Again --- */

.ending-again {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ending-again .button_to {
  display: inline;
}

.ending-again-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.4s ease;
  padding: 0;
}

.ending-again-btn:hover {
  color: rgba(255, 255, 255, 0.35);
}

.ending-or {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.12);
  font-style: italic;
}

/* --- Ending Gifts --- */

.ending-gifts {
  margin-top: 3rem;
  text-align: center;
}

.gifts-prompt {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.25);
  font-style: italic;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.gifts-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 420px;
  margin: 0 auto;
}

.gift-box {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  animation: gift-sway 3s ease-in-out infinite;
}

.gift-box:nth-child(2) { animation-delay: 0.4s; }
.gift-box:nth-child(3) { animation-delay: 0.8s; }

@keyframes gift-sway {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.gift-box:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
  transform: translateY(-6px) scale(1.05);
  animation: none;
}

.gift-emoji { font-size: 2.5rem; line-height: 1; }
.gift-num   { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.1em; }

.gift-opened {
  border-color: rgba(164, 201, 224, 0.5) !important;
  box-shadow: 0 0 24px rgba(164, 201, 224, 0.15) !important;
  animation: none !important;
  transform: scale(1.1) !important;
}

.gift-gone {
  transition: opacity 0.4s, transform 0.4s !important;
  opacity: 0 !important;
  transform: scale(0.7) !important;
  pointer-events: none;
}

.gift-reveal {
  margin-top: 1.8rem;
  min-height: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 0.6s;
}

.gift-reveal-show { opacity: 1; }

.gift-link {
  color: rgba(164, 201, 224, 0.85);
  text-decoration: none;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(164, 201, 224, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

.gift-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.gift-code {
  background: rgba(164, 201, 224, 0.12);
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-family: monospace;
  letter-spacing: 0.08em;
  color: rgba(196, 220, 236, 1);
  border: 1px solid rgba(164, 201, 224, 0.3);
}
.gift-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.5rem;
  display: inline-block;
}

/* --- Scroll Hint --- */

.scroll-hint {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 100;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.scroll-hint-hidden {
  opacity: 0;
}

.scroll-arrow {
  font-size: 1.6rem;
  color: rgba(164, 201, 224, 0.5);
  line-height: 0.7;
  animation: scroll-bob 2s ease-in-out infinite;
}

.scroll-arrow-2 {
  animation-delay: 0.3s;
  opacity: 0.5;
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* --- Mobile tweaks --- */

@media (max-width: 480px) {
  .ending-section {
    padding: 1rem 0.75rem 2rem;
  }

  .ending-stats-board,
  .ending-arcade,
  .ending-leaderboard {
    max-width: 100%;
  }

  .arcade-letter {
    width: 46px;
    height: 54px;
    font-size: 1.9rem;
  }

  .arcade-arrow {
    width: 40px;
    height: 28px;
  }

  .arcade-slots {
    gap: 0.8rem;
  }
}

/* ============================================================
   21. Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .raindrop-bg,
  .click-icon,
  .hero-count,
  .prestige-btn {
    animation: none;
  }

  .raindrop-ripple,
  .drop-floater {
    animation: none;
    display: none;
  }

  /* Flood: no shake, no flash, no breathing hint — the art, the banner,
     and the countdown carry the event. The credit floater stays visible
     (it is information) but holds still; JS removes it on its own clock. */
  .screen-shake,
  .flood-tap-hint,
  .flood-overlay .flood-hero,
  .flood-result-message,
  .overclock-badge,
  .credit-floater {
    animation: none;
  }

  .flood-tap-ripple {
    display: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   21. Header Controls (help + audio grouping)
   ============================================================ */

.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.help-toggle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.help-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* ============================================================
   22. Welcome Modal
   ============================================================ */

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: none;
  padding: 20px;
}

.welcome-overlay.welcome-visible {
  opacity: 1;
  visibility: visible;
  animation: welcome-fade-in 0.6s ease forwards;
}

.welcome-overlay.welcome-leaving {
  animation: welcome-fade-out 0.4s ease forwards;
}

@keyframes welcome-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes welcome-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.welcome-modal {
  position: relative;
  isolation: isolate;
  max-width: 380px;
  width: 100%;
  background: var(--frost-modal, #16203a);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--edge-highlight), var(--shadow-raise);
}

body:not(.win95):not([class*="skin-"]) .welcome-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/frost/panel.png") center top / cover no-repeat;
  opacity: 0.1;
}

.welcome-visible .welcome-modal {
  animation: welcome-modal-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.welcome-leaving .welcome-modal {
  animation: welcome-modal-sink 0.35s ease forwards;
}

@keyframes welcome-modal-rise {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes welcome-modal-sink {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

.welcome-drop {
  font-size: 2.2rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 0 12px rgba(164, 201, 224, 0.3));
  animation: bounce 2.5s ease-in-out infinite;
}

/* the frost emblem takes the droplet's place; screen blend folds its
   tile into the glass. Default look only — skins keep the glyph. */
body:not(.win95):not([class*="skin-"]) .welcome-drop {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  font-size: 0;
  background: url("/frost/emblem.png") center / contain no-repeat;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(164, 201, 224, 0.13));
  animation: frost-breathe 6s ease-in-out infinite;
}

@keyframes frost-breathe {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.98; }
}

.welcome-title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text-white);
  line-height: 1.5;
  margin-bottom: 24px;
}

.welcome-body {
  text-align: left;
  margin-bottom: 28px;
}

.welcome-body p {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(174, 186, 205, 0.75);
  margin-bottom: 12px;
}

.welcome-body p:last-child {
  margin-bottom: 0;
}

.welcome-accent {
  color: var(--accent-cyan);
  font-weight: 500;
}

.welcome-accent-purple {
  color: var(--accent-purple);
  font-weight: 500;
}

/* the first verb the player meets: frost recipe, accent resting */
.welcome-btn {
  position: relative;
  isolation: isolate;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--text-white);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 12px 40px;
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  transition:
    background 180ms ease-out,
    border-color 180ms ease-out,
    transform 180ms ease-out,
    box-shadow 180ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

body:not(.win95):not([class*="skin-"]) .welcome-btn {
  color: rgba(164, 201, 224, 0.85);
}

body:not(.win95):not([class*="skin-"]) .welcome-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(214, 230, 244, 0.09), rgba(214, 230, 244, 0) 58%),
    url("/frost/panel.png") center / 360px repeat;
  opacity: 0.45;
}

.welcome-btn:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.welcome-btn:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.88);
  box-shadow: var(--edge-highlight), 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   COMPANIONS — Sprite-based living creatures (Rain v2.0)
   ============================================================ */

/* The world — sits above the hero, transparent, sprites float freely */
.pet-world {
  position: relative;
  width: 100%;
  z-index: 4;
}

.pet-stage {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: visible;
}

/* ── Sprites ─────────────────────────────────────────────── */

.pet-sprite {
  position: absolute;
  cursor: pointer;
  transition: left 3s cubic-bezier(.4,0,.2,1), bottom 3s cubic-bezier(.4,0,.2,1);
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.pet-vis {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pet-breathe 2.5s ease-in-out infinite;
  transition: transform 0.15s ease;
}

/* The condensation pool — grounds the companion on the glass */
.pet-ground {
  position: absolute;
  left: 50%;
  top: 52px;
  transform: translateX(-50%);
  width: 44px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(5, 9, 18, 0.5), rgba(5, 9, 18, 0) 72%);
  pointer-events: none;
  z-index: -1;
}

/* Base breathing — always running, barely perceptible */
@keyframes pet-breathe {
  0%, 100% { transform: scaleX(1) scaleY(1) translateY(0); }
  50%      { transform: scaleX(0.985) scaleY(1.015) translateY(-1px); }
}

/* Fidgets — soft, subtle, ghostly */
.pet-blink {
  animation: pet-do-blink 0.15s ease-in-out !important;
}
@keyframes pet-do-blink {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50%      { transform: scaleX(1.02) scaleY(0.85); }
}

.pet-squish {
  animation: pet-do-squish 0.5s ease-out !important;
}
@keyframes pet-do-squish {
  0%   { transform: scaleX(1) scaleY(1); }
  35%  { transform: scaleX(1.04) scaleY(0.96); }
  65%  { transform: scaleX(0.98) scaleY(1.02); }
  100% { transform: scaleX(1) scaleY(1); }
}

.pet-tilt {
  animation: pet-do-tilt 0.7s ease-in-out !important;
}
@keyframes pet-do-tilt {
  0%, 100% { transform: rotate(0deg); }
  40%      { transform: rotate(3deg) translateX(1px); }
  70%      { transform: rotate(-2deg); }
}

.pet-hop {
  animation: pet-do-hop 0.5s ease-out !important;
}
@keyframes pet-do-hop {
  0%   { transform: translateY(0); }
  20%  { transform: scaleY(0.97); }
  50%  { transform: translateY(-6px) scaleY(1.02); }
  80%  { transform: translateY(0) scaleY(0.99); }
  100% { transform: translateY(0); }
}

/* Glitch/fog — brief digital distortion */
.pet-glitch {
  animation: pet-do-glitch 0.3s steps(2) !important;
}
@keyframes pet-do-glitch {
  0%   { transform: translate(0); filter: none; }
  25%  { transform: translate(-2px, 1px); filter: hue-rotate(40deg) brightness(1.3); }
  50%  { transform: translate(1px, -1px); filter: hue-rotate(-20deg); }
  75%  { transform: translate(-1px, 0); filter: brightness(0.7) saturate(1.5); }
  100% { transform: translate(0); filter: none; }
}

/* Held — picked up by player, wriggling like "put me down!!" */
.pet-held .pet-vis {
  animation: pet-do-jiggle 0.1s ease-in-out infinite !important;
  filter: drop-shadow(0 0 12px rgba(164, 201, 224, 0.45))
         drop-shadow(0 0 28px rgba(164, 201, 224, 0.2));
}
@keyframes pet-do-jiggle {
  0%   { transform: rotate(-6deg) scale(1.12) translateX(-2px); }
  25%  { transform: rotate(4deg) scale(1.1) translateY(-2px); }
  50%  { transform: rotate(-5deg) scale(1.14) translateX(2px); }
  75%  { transform: rotate(7deg) scale(1.1) translateY(1px); }
  100% { transform: rotate(-6deg) scale(1.12) translateX(-2px); }
}

/* Plop — landing after being dropped */
.pet-plop .pet-vis {
  animation: pet-do-plop 0.5s ease !important;
}
@keyframes pet-do-plop {
  0%   { transform: scale(1.08); }
  35%  { transform: scaleX(1.15) scaleY(0.85); }
  60%  { transform: scaleX(0.95) scaleY(1.05); }
  80%  { transform: scaleX(1.02) scaleY(0.98); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* Fog — brief opacity flicker, almost ghostly */
.pet-fog {
  animation: pet-do-fog 1.2s ease-in-out !important;
}
@keyframes pet-do-fog {
  0%, 100% { opacity: 1; filter: none; }
  30%      { opacity: 0.5; filter: blur(1.5px) brightness(1.2); }
  50%      { opacity: 0.35; filter: blur(2px); }
  70%      { opacity: 0.6; filter: blur(1px) brightness(1.1); }
}

.pet-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 6px 12px rgba(164, 201, 224, 0.18));
  pointer-events: none;
}

.pet-emoji-large {
  font-size: 2.8rem;
  line-height: 1;
  animation: sprite-idle 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(164, 201, 224, 0.18));
  pointer-events: none;
}

/* Idle bob — the heartbeat of a living sprite */
@keyframes sprite-idle {
  0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
  20%      { transform: translateY(-6px) scaleX(0.97) scaleY(1.03); }
  50%      { transform: translateY(-10px) scaleX(1) scaleY(1); }
  70%      { transform: translateY(-4px) scaleX(1.02) scaleY(0.98); }
}

/* Facing flip */
.pet-flip .pet-vis { transform: scaleX(-1); }

/* Name + level tag */
.pet-tag {
  text-align: center;
  margin-top: 2px;
  white-space: nowrap;
  pointer-events: none;
}

.pet-tag-name {
  font-size: 0.62rem;
  color: rgba(200, 214, 229, 0.7);
  letter-spacing: 0.04em;
}

.pet-tag-level {
  font-size: 0.58rem;
  font-family: var(--font-mono);
  color: var(--accent-cyan);
  opacity: 0.6;
}

/* Resting and forming companions speak in the faded ink step */
.pet-tag-rest {
  font-size: 0.58rem;
  color: var(--ink-low);
  letter-spacing: 0.04em;
}

/* Age classes — visual maturity */
.pet-middle .pet-frame { filter: drop-shadow(0 6px 12px rgba(123, 104, 238, 0.2)); }

.pet-elder .pet-frame {
  filter: drop-shadow(0 6px 12px rgba(255, 200, 100, 0.2)) saturate(0.8);
}

.pet-ancient .pet-frame {
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.4));
}

@keyframes sprite-ancient {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.04); }
}

/* Wilting — dimmed and slow, the visual of the mood word */
.pet-wilting .pet-vis {
  filter: brightness(0.75) saturate(0.55);
  animation: sprite-sad 4s ease-in-out infinite;
}

@keyframes sprite-sad {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px) rotate(-2deg); }
}

/* ── Dormant — she rests in the mist ────────────────────── */

.pet-dormant .pet-vis {
  animation: pet-rest-breathe 8s ease-in-out infinite;
  opacity: 0.45;
  filter: saturate(0.4) brightness(0.85);
}

/* the mist that holds her */
.pet-dormant .pet-vis::after {
  content: "";
  position: absolute;
  inset: -6px -12px;
  background: radial-gradient(60% 45% at 50% 72%, rgba(174, 186, 205, 0.16), rgba(174, 186, 205, 0) 75%);
  filter: blur(3px);
  pointer-events: none;
}

.pet-dormant .pet-ground { opacity: 0.4; }

@keyframes pet-rest-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* ── Egg — something is forming in the rain ─────────────── */

.pet-egg-shell {
  position: relative;
  width: 42px;
  height: 52px;
  margin-top: 6px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(120% 90% at 35% 25%, rgba(223, 232, 244, 0.10), rgba(223, 232, 244, 0) 55%),
    linear-gradient(180deg, var(--frost-modal, #16203a), var(--bg-surface, #101828));
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.07));
  box-shadow: var(--edge-highlight), var(--shadow-rest);
}

.pet-egg-light {
  position: absolute;
  inset: 32% 30% 36% 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(164, 201, 224, 0.32), rgba(164, 201, 224, 0) 70%);
  animation: egg-light 6s ease-in-out infinite;
}

@keyframes egg-light {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.6; }
}

.pet-egg-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Its time has come — the one glow on the stage */
.pet-egg-ready .pet-egg-shell {
  box-shadow: var(--edge-highlight), var(--shadow-rest), 0 0 16px rgba(164, 201, 224, 0.13);
  animation: egg-sway 3.4s ease-in-out infinite;
}

@keyframes egg-sway {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-2.5deg); }
  70%      { transform: rotate(2.5deg); }
}

/* ── State transitions ──────────────────────────────────── */

/* the mist lets go */
.pet-waking {
  animation: pet-wake-lift 1.4s ease-out;
}

@keyframes pet-wake-lift {
  0%   { opacity: 0.3; filter: blur(3px) saturate(0.4); transform: translateY(4px); }
  100% { opacity: 1; filter: none; transform: translateY(0); }
}

/* she goes to rest */
.pet-settling {
  animation: pet-settle 1.6s ease-in;
}

@keyframes pet-settle {
  0%   { opacity: 1; filter: none; }
  100% { opacity: 0.85; filter: saturate(0.6); }
}

/* first light */
.pet-hatching .pet-vis {
  animation: pet-hatch-burst 1.1s cubic-bezier(.17,.67,.24,1.3);
}

@keyframes pet-hatch-burst {
  0%   { transform: scale(0.4); opacity: 0; filter: brightness(2) blur(2px); }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); filter: none; }
}

/* ── State animations ───────────────────────────────────── */

.pet-entering {
  animation: pet-pop-in 0.8s cubic-bezier(.17,.67,.24,1.3);
}

@keyframes pet-pop-in {
  0%   { opacity: 0; transform: scale(0) translateY(40px); }
  60%  { opacity: 1; transform: scale(1.2) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

.pet-bounce .pet-vis {
  animation: pet-happy-bounce 0.55s ease-out !important;
}

@keyframes pet-happy-bounce {
  0%   { transform: scale(1) translateY(0); }
  25%  { transform: scale(1.25) translateY(-22px); }
  45%  { transform: scale(0.9) translateY(0); }
  65%  { transform: scale(1.1) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

.pet-levelup-glow .pet-vis {
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.3)) !important;
}

.pet-dissolving {
  animation: pet-dissolve 2.5s ease-out forwards;
  pointer-events: none;
}

@keyframes pet-dissolve {
  0%   { opacity: 1; transform: scale(1); filter: none; }
  30%  { opacity: 0.7; filter: blur(1px); }
  100% { opacity: 0; transform: scale(0.3) translateY(-60px); filter: blur(6px); }
}

/* ── Habitat header — the one place the combined number lives ── */

.pet-habitat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 14px 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  z-index: 6;
}

.pet-habitat-line {
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pet-habitat-mult {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pet-habitat-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pet-habitat-slots {
  color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}

.pet-summon-btn {
  position: relative;
  isolation: isolate;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--edge-highlight);
  transition: background 180ms ease-out, border-color 180ms ease-out;
}

.pet-summon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Breakdown — each companion's exact share, each synergy's bonus */
.pet-habitat-detail {
  position: absolute;
  top: calc(100% + 4px);
  left: 14px;
  min-width: 200px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--edge-highlight), var(--shadow-raise);
  animation: pet-panel-in 0.2s ease-out;
  z-index: 30;
}

@keyframes pet-panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pet-hd-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
  font-size: 0.62rem;
  color: var(--muted);
}

.pet-hd-row span:last-child {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pet-hd-rest span,
.pet-hd-rest span:last-child { color: var(--ink-low); }

/* ── Summon menu — the real art, plain names, plain costs ── */

.pet-summon-menu {
  position: absolute;
  top: 30px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--edge-highlight), var(--shadow-raise);
  animation: pet-panel-in 0.2s ease-out;
  z-index: 40;
}

.pet-summon-type {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease-out;
}

.pet-summon-type:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); }

.pet-summon-type:disabled {
  color: rgba(174, 186, 205, 0.3);
  cursor: default;
}

.pet-summon-type:disabled .pet-summon-sprite { opacity: 0.3; }

.pet-summon-sprite {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.pet-summon-name {
  flex: 1;
  text-align: left;
}

.pet-summon-cost {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pet-summon-type:disabled .pet-summon-cost { color: rgba(174, 186, 205, 0.3); }

/* ── Pet card — the quiet panel under the stage ─────────── */

.pet-card-slot {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 260ms ease, opacity 260ms ease;
}

.pet-card-slot.pet-card-open { opacity: 1; }

.pet-card {
  position: relative;
  isolation: isolate;
  max-width: 340px;
  margin: 8px auto 10px;
  padding: 14px 16px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--edge-highlight), var(--shadow-raise);
}

/* frost breath on the card, default look only */
body:not(.win95):not([class*="skin-"]) .pet-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(214, 230, 244, 0.05), rgba(214, 230, 244, 0) 58%),
    url("/frost/panel.png") center / 360px repeat;
  opacity: 0.4;
}

.pc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.pc-name {
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.pc-species {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.pc-xp {
  height: 2px;
  margin-top: 8px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.pc-xp-fill {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.12);
  transition: width 400ms ease;
}

.pc-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
}

.pc-contrib {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pc-mood {
  font-size: 0.66rem;
  color: var(--muted);
}

.pc-mood-faded { color: var(--ink-low); }

/* the single thin care bar, surface tone — no hearts, no meat */
.pc-care {
  height: 2px;
  margin-top: 6px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.pc-care-fill {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.10);
  transition: width 400ms ease;
}

.pc-care-dim { opacity: 0.4; }

.pc-hint {
  margin-top: 10px;
  min-height: 0.9em;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.pc-acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.pc-btn {
  position: relative;
  isolation: isolate;
  flex: 1;
  height: 34px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  transition: background 180ms ease-out, border-color 180ms ease-out,
              transform 180ms ease-out, box-shadow 180ms ease-out;
}

.pc-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.pc-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.88);
  box-shadow: var(--edge-highlight), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition-duration: 90ms;
}

.pc-btn:disabled {
  color: rgba(174, 186, 205, 0.3);
  border-color: rgba(255, 255, 255, 0.03);
  cursor: default;
}

/* progress lives inside the control: a half-step lighter fill, never accent */
.pc-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  z-index: -1;
  background: rgba(255, 255, 255, 0.05);
  transition: width 1s linear;
}

.pc-btn-label { position: relative; }

/* tend is the card's primary verb — it alone wears the accent at rest */
.pc-tend .pc-btn-label { color: rgba(164, 201, 224, 0.85); }
.pc-tend:disabled .pc-btn-label { color: rgba(174, 186, 205, 0.3); }

/* ability ready — full strength only at the moment of change, fading back */
.pc-ready-flash {
  animation: pc-ready 1s ease-out;
}

@keyframes pc-ready {
  0%   { box-shadow: var(--edge-highlight), var(--shadow-rest), 0 0 14px rgba(164, 201, 224, 0.25); }
  100% { box-shadow: var(--edge-highlight), var(--shadow-rest); }
}

.pc-release {
  display: block;
  margin: 10px auto 0;
  padding: 2px 6px;
  background: none;
  border: none;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--ink-low);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pc-release:hover,
.pc-release-armed { color: var(--muted); }

.puddle-storm-sprite {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 200, 50, 0.5));
  animation: puddle-wobble 2s ease-in-out infinite, sparkle-danger 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* ── Floating text reactions ────────────────────────────── */

.pet-floater {
  position: absolute;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
  z-index: 30;
  transform: translateX(-50%);
  animation: floater-rise 1.8s ease-out forwards;
}

.pf-reward  { color: var(--afford); text-shadow: 0 0 8px rgba(164, 201, 224, 0.3); }
.pf-cost    { color: var(--ink-low); font-size: 0.72rem; }
.pf-levelup { color: rgba(255, 215, 0, 0.95); font-size: 0.9rem; text-shadow: 0 0 12px rgba(255, 215, 0, 0.5); }
.pf-arrival { color: var(--accent-cyan); font-size: 0.75rem; font-family: var(--font-body); font-style: italic; }

@keyframes floater-rise {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

/* ── Puddle sparkles ────────────────────────────────────── */

.pet-puddle-sparkle {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  animation: sparkle-appear 0.5s ease-out, sparkle-pulse 2.5s ease-in-out infinite;
  transition: transform 0.15s ease;
}

.pet-puddle-sparkle:hover {
  transform: scale(1.3);
}

.puddle-sprite {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(164, 201, 224, 0.35));
  animation: puddle-wobble 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes puddle-wobble {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50%      { transform: scaleX(1.1) scaleY(0.9); }
}

.sparkle-pop {
  animation: sparkle-pop-out 0.4s ease-out forwards !important;
}

@keyframes sparkle-appear {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes sparkle-danger {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 100, 50, 0.3)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 100, 50, 0.7)); }
}

@keyframes sparkle-pop-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* ── First unlock shimmer ───────────────────────────────── */

.shimmer-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: shimmer-fade-in 1.5s ease-out;
}

.shimmer-dissolving {
  animation: shimmer-dissolve 1.2s ease-out forwards;
}

@keyframes shimmer-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer-dissolve { to { opacity: 0; transform: scale(1.3); filter: blur(8px); } }

.shimmer-puddle {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shimmer-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 210, 255, 0.4);
  width: 30px; height: 30px;
  animation: ripple-out 2.4s ease-out infinite;
}
.shimmer-ripple.r2 { width: 50px; height: 50px; animation-delay: 0.8s; }
.shimmer-ripple.r3 { width: 68px; height: 68px; animation-delay: 1.6s; }

@keyframes ripple-out {
  0%   { opacity: 0.8; transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(1); }
}

.shimmer-glow {
  font-size: 2rem;
  animation: sprite-idle 3s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(0, 210, 255, 0.6));
}

.shimmer-text {
  font-size: 0.8rem;
  color: var(--accent-cyan);
  opacity: 0.65;
  font-style: italic;
  letter-spacing: 0.05em;
}

.shimmer-btn {
  background: rgba(164, 201, 224, 0.06);
  border: 1px solid rgba(164, 201, 224, 0.35);
  color: var(--accent-cyan);
  border-radius: 9px;
  padding: 8px 26px;
  font-size: 0.85rem;
  cursor: pointer;
  letter-spacing: 0.07em;
  box-shadow: var(--edge-highlight);
  transition: all 0.2s ease;
}

.shimmer-btn:hover {
  background: rgba(164, 201, 224, 0.12);
  border-color: rgba(164, 201, 224, 0.5);
}

/* ── Speech bubbles ─────────────────────────────────────── */

.pet-speech {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 2px solid rgba(164, 201, 224, 0.25);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(200, 214, 229, 0.85);
  white-space: nowrap;
  z-index: 25;
  letter-spacing: 0.03em;
  image-rendering: pixelated;
  animation: speech-in 0.3s ease-out;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

/* Pixel-art speech tail */
.pet-speech::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(164, 201, 224, 0.25);
}

.pet-speech::before {
  content: "";
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #101828;
  z-index: 1;
}

.pet-speech-fading {
  animation: speech-out 0.6s ease-in forwards;
}

@keyframes speech-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.8); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes speech-out {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ── Ability burst ──────────────────────────────────────── */

.pet-ability-burst .pet-vis {
  animation: ability-burst 1.2s ease-out !important;
}

@keyframes ability-burst {
  0%   { transform: scale(1); filter: none; }
  15%  { transform: scale(1.3); filter: brightness(2) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
  40%  { transform: scale(0.9); filter: brightness(1.3) drop-shadow(0 0 12px rgba(0, 210, 255, 0.5)); }
  100% { transform: scale(1); filter: none; }
}

/* ── Visual aging (Section 4.4) ────────────────────────── */

.pet-elder .pet-frame {
  filter: drop-shadow(0 6px 12px rgba(255, 200, 100, 0.15)) saturate(0.75) brightness(0.9) !important;
}

.pet-ancient .pet-frame {
  filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.45)) saturate(1.1) brightness(1.05) !important;
}

.pet-ancient .pet-tag-level {
  color: rgba(255, 215, 0, 0.9);
}

/* ── Toast variants — quiet structural moments ──────────── */

.pet-mist-toast .achievement-toast-label,
.pet-storm-toast .achievement-toast-label { color: var(--muted); }

.pet-mist-toast .achievement-toast-name,
.pet-storm-toast .achievement-toast-name { color: var(--ink-low); }

.pet-grown-toast .achievement-toast-name { font-variant-numeric: tabular-nums; }

/* ============================================================
   WINDOWS 95 THEME
   rain.exe — a e s t h e t i c
   ============================================================ */

/* Hide ambient rain in win95 mode */
.win95-rain-bg { display: none; }

/* Global font & colors */
.win95 {
  font-family: "MS Sans Serif", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  color: #000 !important;
  background: #c0c0c0 !important;
  border-radius: 0 !important;
}
.win95 * {
  border-radius: 0 !important;
  font-family: inherit !important;
}

/* Header = title bar */
.win95 .rain-header {
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #fff !important;
  padding: 4px 8px !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.win95 .rain-logo {
  font-weight: bold !important;
  font-size: 0.85rem !important;
  color: #fff !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}
.win95 .rain-logo::before {
  content: "💧 rain.exe - ";
  font-weight: bold;
}
.win95 .prestige-badge {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 1px solid #808080 !important;
  font-size: 0.7rem !important;
  padding: 1px 6px !important;
}
.win95 .help-toggle {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  font-size: 0.7rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.win95 .help-toggle:active {
  border-style: inset !important;
}
.win95 .help-toggle svg {
  width: 12px !important;
  height: 12px !important;
  stroke: #000 !important;
}

/* Main counter */
.win95 .raindrops-display {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
  color: #000 !important;
  padding: 12px !important;
  text-shadow: none !important;
}
.win95 .raindrops-count {
  color: #000080 !important;
  text-shadow: none !important;
  font-family: "Courier New", monospace !important;
}
.win95 .dps-display {
  color: #808080 !important;
  text-shadow: none !important;
}

/* Click zone = button */
.win95 .rain-click-zone {
  background: #c0c0c0 !important;
  border: 2px outset #c0c0c0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  min-height: 120px !important;
}
.win95 .rain-click-zone::after { display: none !important; }
.win95 .rain-click-zone:active {
  border-style: inset !important;
  transform: none !important;
}
.win95 .click-text {
  color: #000 !important;
  text-shadow: none !important;
  font-size: 0.8rem !important;
}
.win95 .click-icon {
  filter: none !important;
}

/* Milestone */
.win95 .milestone-message,
.win95 .milestone-text,
.win95 .milestone-section,
.win95 .milestone-section * {
  color: #000 !important;
  text-shadow: none !important;
  font-style: normal !important;
}

/* Section dividers */
.win95 .section-divider {
  color: #000 !important;
  border-color: #808080 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: bold !important;
  font-size: 0.8rem !important;
}

/* Generator rows = list items */
.win95 .generator-row {
  background: #fff !important;
  border: 1px solid #808080 !important;
  border-left: 3px solid #808080 !important;
  margin-bottom: 1px !important;
  padding: 6px 8px !important;
}
.win95 .generator-row::before { display: none !important; }
.win95 .generator-row.can-afford {
  border-left-color: #000080 !important;
  background: #fff !important;
  box-shadow: none !important;
}
.win95 .generator-name,
.win95 .generator-count {
  color: #000 !important;
  text-shadow: none !important;
}
.win95 .generator-desc {
  color: #808080 !important;
  text-shadow: none !important;
}

/* Buy buttons = win95 buttons */
.win95 .buy-btn {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0.75rem !important;
  padding: 3px 10px !important;
}
.win95 .buy-btn:hover {
  background: #d4d0c8 !important;
}
.win95 .buy-btn:active {
  border-style: inset !important;
}
.win95 .buy-btn.disabled {
  color: #808080 !important;
  text-shadow: 1px 1px 0 #fff !important;
}

/* Upgrade/enchantment rows */
.win95 .upgrade-row {
  background: #fff !important;
  border: 1px solid #808080 !important;
  border-left: 3px solid #808080 !important;
  margin-bottom: 1px !important;
  padding: 6px 8px !important;
}
.win95 .upgrade-row::before { display: none !important; }
.win95 .upgrade-row.can-afford {
  border-left-color: #800080 !important;
  box-shadow: none !important;
}
.win95 .upgrade-name {
  color: #000 !important;
  text-shadow: none !important;
}
.win95 .upgrade-desc {
  color: #808080 !important;
  text-shadow: none !important;
}
.win95 .upgrade-level {
  color: #000 !important;
  text-shadow: none !important;
}

/* Enchantment tabs */
.win95 .upgrade-tab {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
  font-size: 0.7rem !important;
  padding: 2px 10px !important;
}
.win95 .upgrade-tab-active {
  border-style: inset !important;
  background: #fff !important;
  color: #000080 !important;
  box-shadow: none !important;
}

/* Mastered chips */
.win95 .maxed-toggle {
  color: #000 !important;
}
.win95 .maxed-grid {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
}
.win95 .maxed-chip {
  background: #c0c0c0 !important;
  border: 1px solid #808080 !important;
  color: #000 !important;
}
.win95 .maxed-chip-badge {
  background: #000080 !important;
  color: #fff !important;
}
.win95 .maxed-chip-desc {
  color: #808080 !important;
}

/* Weather banner */
.win95 .weather-active {
  background: #ffffcc !important;
  border: 2px solid #000 !important;
  color: #000 !important;
  animation: none !important;
  box-shadow: none !important;
}
.win95 .weather-active::before { display: none !important; }
.win95 .weather-name {
  color: #000080 !important;
  text-shadow: none !important;
}
.win95 .weather-timer {
  color: #000 !important;
  text-shadow: none !important;
}
.win95 .weather-description {
  color: #808080 !important;
  text-shadow: none !important;
}
.win95 .weather-bar {
  background: #000080 !important;
  box-shadow: none !important;
}
.win95 .weather-bar-track {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
}
.win95 .weather-overlay {
  display: none !important;
}

/* Prestige area */
.win95 .prestige-available,
.win95 .prestige-locked {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
  color: #000 !important;
}
.win95 .prestige-message {
  color: #000 !important;
  text-shadow: none !important;
}
.win95 .prestige-bonus {
  color: #808080 !important;
}
.win95 .prestige-btn {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.win95 .prestige-btn:active {
  border-style: inset !important;
}

/* Stats section */
.win95 .stat-label,
.win95 .stat-value {
  color: #000 !important;
  text-shadow: none !important;
}

/* Achievements */
.win95 .achievement-item {
  background: #fff !important;
  border: 1px solid #808080 !important;
}
.win95 .achievement-item.earned {
  background: #ffffcc !important;
}
.win95 .achievement-item.earned::after { display: none !important; }
.win95 .achievement-name {
  color: #000 !important;
  text-shadow: none !important;
}
.win95 .achievement-desc {
  color: #808080 !important;
  text-shadow: none !important;
}

/* Permalink section */
.win95 .permalink-section {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
  color: #000 !important;
}
.win95 .permalink-label {
  color: #808080 !important;
}
.win95 .permalink-link,
.win95 .permalink-url,
.win95 .permalink-section a,
.win95 .permalink-section span {
  color: #0000ff !important;
  text-decoration: underline !important;
}
.win95 .permalink-section code,
.win95 .permalink-section input {
  color: #000 !important;
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
}

/* Leaderboard */
.win95 .leaderboard-peek {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
}
.win95 .leaderboard-entry,
.win95 .leaderboard-peek *,
.win95 .leaderboard-timer,
.win95 .leaderboard-toggle {
  color: #000 !important;
  text-shadow: none !important;
}

/* Attribution */
.win95 .game-attribution {
  color: #808080 !important;
}
.win95 .game-attribution a {
  color: #0000ff !important;
}

/* Playing now */
.win95 .playing-now {
  color: #808080 !important;
}
.win95 .playing-now-dot {
  background: #008000 !important;
  animation: none !important;
}

/* Welcome modal */
.win95 .welcome-overlay {
  background: rgba(0, 128, 128, 0.9) !important;
}
.win95 .welcome-modal {
  background: #c0c0c0 !important;
  border: 2px outset #c0c0c0 !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.win95 .welcome-title {
  color: #000080 !important;
  text-shadow: none !important;
  font-family: "MS Sans Serif", Tahoma, sans-serif !important;
}
.win95 .welcome-body {
  color: #000 !important;
}
.win95 .welcome-body p {
  color: #000 !important;
}
.win95 .welcome-accent,
.win95 .welcome-accent-purple {
  color: #000080 !important;
}
.win95 .welcome-btn {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.win95 .welcome-btn:active {
  border-style: inset !important;
}

/* Settings/release modals */
.win95 .release-modal-backdrop {
  background: rgba(0, 128, 128, 0.9) !important;
}
.win95 .release-modal-panel {
  background: #c0c0c0 !important;
  border: 2px outset #c0c0c0 !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.win95 .release-modal-date {
  background: linear-gradient(90deg, #000080, #1084d0) !important;
  color: #fff !important;
  padding: 3px 6px !important;
  margin: -1rem -1rem 0.5rem !important;
  font-weight: bold !important;
}
.win95 .release-modal-dismiss {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
}
.win95 .release-modal-dismiss:active {
  border-style: inset !important;
}

/* Config modal */
.win95 .difficulty-card {
  background: #fff !important;
  border: 2px inset #c0c0c0 !important;
  color: #000 !important;
}
.win95 .difficulty-selected {
  border: 2px solid #000080 !important;
  background: #ffffcc !important;
  box-shadow: none !important;
}
.win95 .difficulty-name {
  color: #000 !important;
}
.win95 .difficulty-desc {
  color: #808080 !important;
}

/* Toast notifications */
.win95 .achievement-toast {
  background: #c0c0c0 !important;
  border: 2px outset #c0c0c0 !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.win95 .achievement-toast-label {
  color: #808080 !important;
}
.win95 .achievement-toast-name {
  color: #000080 !important;
  text-shadow: none !important;
}
.win95 .achievement-toast-desc {
  color: #000 !important;
}

/* Water separator */
.win95 .water-separator {
  display: none !important;
}

/* Scrollbar */
.win95 ::-webkit-scrollbar {
  width: 16px;
  background: #c0c0c0;
}
.win95 ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
}
.win95 ::-webkit-scrollbar-track {
  background: #fff;
  border: 1px inset #c0c0c0;
}

/* Pet world */
.win95 .pet-world {
  background: #008080 !important;
  border: 2px inset #c0c0c0 !important;
}

/* Sparkle cursor on click zone */
.win95 .rain-click-zone { cursor: pointer; }

/* Hint buttons */
.win95 .achievement-hint-btn {
  background: #c0c0c0 !important;
  color: #000 !important;
  border: 2px outset #c0c0c0 !important;
}

/* General link color */
.win95 a { color: #0000ff !important; }

/* ═══════════════════════════════════════════════════════
   COMBO COUNTER (iOS Resonant Tap visual feedback)
   ═══════════════════════════════════════════════════════ */

.combo-counter {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  text-align: center;
  z-index: 10;
  font-family: monospace;
  line-height: 1.2;
}

.combo-counter.combo-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.combo-counter .combo-count {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  text-shadow: 0 0 8px currentColor;
}

.combo-counter .combo-bonus {
  display: block;
  font-size: 0.7rem;
  opacity: 0.8;
}

.combo-counter.combo-pulse {
  animation: combo-pulse 0.15s ease-out;
}

@keyframes combo-pulse {
  0%   { transform: translateX(-50%) scale(1.25); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Combo color thresholds */
.combo-counter.combo-white  { color: rgba(255, 255, 255, 0.9); }
.combo-counter.combo-blue   { color: #64b5f6; text-shadow: 0 0 10px rgba(100, 181, 246, 0.5); }
.combo-counter.combo-purple { color: #ce93d8; text-shadow: 0 0 10px rgba(206, 147, 216, 0.5); }
.combo-counter.combo-gold   { color: #ffd54f; text-shadow: 0 0 12px rgba(255, 213, 79, 0.6); }

/* Click section needs relative positioning for combo counter */
.click-section {
  position: relative;
}

/* ═══════════════════════════════════════════════════════
   FLOOD MINI-BOSS OVERLAY
   The hero art carries the dread (Quiet Brief rule 27);
   CSS owns the chrome. Flood hues are information, not
   decoration — dried-ember red for the threat, antique
   gold for the surge.
   ═══════════════════════════════════════════════════════ */

.flood-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: #0a0f1c;
}

/* The wave itself. The art's near-empty upper sky hosts the banner; a
   soft scrim keeps text legible over the water below. */
.flood-hero {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 15, 28, 0.35), rgba(10, 15, 28, 0.05) 30%, rgba(10, 15, 28, 0.45)),
    url("/sprites/flood_hero.png") top center / cover no-repeat,
    #0a0f1c;
}

/* Victory swaps the threat for the halo — same sea, one beat later. */
.flood-overlay.flood-victory .flood-hero {
  background:
    linear-gradient(180deg, rgba(10, 15, 28, 0.3), rgba(10, 15, 28, 0.05) 30%, rgba(10, 15, 28, 0.4)),
    url("/sprites/flood_surge_hero.png") top center / cover no-repeat,
    #0a0f1c;
  animation: flood-surge-flash 0.6s ease-out;
}

@keyframes flood-surge-flash {
  0%   { filter: brightness(1.9); }
  100% { filter: brightness(1); }
}

.flood-overlay.flood-defeat .flood-hero {
  filter: saturate(0.6) brightness(0.75);
  transition: filter 0.5s ease-out;
}

/* The challenge banner — fixed to the top of the viewport, unmissable,
   but a quiet plate with a hairline, not a siren. */
.flood-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: max(0.9rem, env(safe-area-inset-top)) 1.25rem 0.9rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.75), rgba(10, 15, 28, 0.25));
  border-bottom: 1px solid var(--hairline);
}

.flood-banner-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(216, 106, 90, 0.92);      /* dried ember, not alarm red */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.flood-banner-emoji {
  font-size: 1rem;
  margin-right: 0.2rem;
}

.flood-banner-call {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.flood-banner-call #flood-timer {
  color: rgba(216, 106, 90, 0.92);
  font-weight: 700;
}

.flood-progress-bar {
  margin: 0.6rem auto 0;
  max-width: 340px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.flood-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(216, 106, 90, 0.9), rgba(212, 180, 106, 0.9));
  border-radius: 3px;
  transition: width 0.1s ease-out;
}

/* Everything below the banner is the tap target. */
.flood-tap-zone {
  position: absolute;
  top: 27%;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.flood-tap-hint {
  position: absolute;
  bottom: max(2.2rem, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--ink-low);
  pointer-events: none;
  animation: flood-hint-breathe 4s ease-in-out infinite;
}

@keyframes flood-hint-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

.flood-tap-ripple {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(216, 106, 90, 0.55);
  border-radius: 50%;
  pointer-events: none;
  animation: flood-tap-ripple 0.5s ease-out forwards;
}

@keyframes flood-tap-ripple {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.flood-result-message {
  position: absolute;
  top: 44%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.flood-result-message.flood-success {
  color: rgba(212, 180, 106, 0.95);     /* antique gold — the surge's own hue */
  text-shadow: 0 0 14px rgba(212, 180, 106, 0.35);
  animation: flood-success-land 0.4s ease;
}

.flood-result-message.flood-failure {
  color: rgba(216, 106, 90, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@keyframes flood-success-land {
  0%   { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   CREDIT FLOATER — one quiet number by the counter whenever
   drops move by server hand (pet costs, cleanup rewards, banked
   adjustments). Accent at the moment of change, then gone
   (Quiet Brief rule 13).
   ============================================================ */

.credit-floater {
  position: fixed;
  transform: translateX(-50%);
  z-index: 500;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  animation: credit-drift 1.4s ease-out forwards;
}

.credit-gain  { color: var(--accent-cyan); text-shadow: 0 0 10px rgba(164, 201, 224, 0.3); }
.credit-spend { color: var(--muted); }

@keyframes credit-drift {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}

/* Screen shake during flood */
.screen-shake {
  animation: screen-shake 0.15s ease-in-out infinite;
}

@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -2px); }
  100% { transform: translate(1px, 2px); }
}

/* Flood weather banner styles */
.weather-flood {
  border-color: #ff4444 !important;
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.15), rgba(0, 100, 255, 0.15)) !important;
}

.weather-flood-surge {
  border-color: #44ff44 !important;
  background: linear-gradient(135deg, rgba(68, 255, 68, 0.15), rgba(255, 215, 0, 0.15)) !important;
}

/* Flood weather overlay */
.weather-overlay.weather-flood {
  background: linear-gradient(180deg, rgba(255, 68, 68, 0.08), rgba(0, 100, 255, 0.12));
}

.weather-overlay.weather-flood-surge {
  background: linear-gradient(180deg, rgba(68, 255, 68, 0.08), rgba(255, 215, 0, 0.1));
}

/* ============================================================
   OVERCLOCK UI — frost treatment. Quiet plate, hairline, top
   inner highlight; the only gold is the lume on the label
   (desaturated antique, Quiet Brief rules 12-13 and 21).
   ============================================================ */

.overclock-bar {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.overclock-btn {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--edge-highlight), var(--shadow-rest);
  color: rgba(212, 180, 106, 0.8);      /* the lume, at rest strength */
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease-out, border-color 180ms ease-out,
              transform 180ms ease-out, box-shadow 180ms ease-out;
}

.overclock-btn.overclock-ready:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

.overclock-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: var(--edge-highlight), 0 1px 2px rgba(0, 0, 0, 0.35);
  transition-duration: 90ms;
}

.overclock-btn.overclock-cooldown {
  color: rgba(174, 186, 205, 0.3);
  border-color: rgba(255, 255, 255, 0.03);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
  cursor: not-allowed;
}

/* Live progress wears the lume a step brighter, with the one faint glow. */
.overclock-status {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--edge-highlight);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: rgba(212, 180, 106, 0.9);
  text-shadow: 0 0 10px rgba(212, 180, 106, 0.18);
}

/* 2x badge on overclocked generator */
.overclock-badge {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  margin-left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #0a0f1c;
  background: rgba(212, 180, 106, 0.92);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  animation: overclock-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes overclock-badge-pulse {
  0%, 100% { box-shadow: 0 0 3px rgba(212, 180, 106, 0.25); }
  50%      { box-shadow: 0 0 9px rgba(212, 180, 106, 0.45); }
}

/* Quiet edge on the active overclocked generator row */
.generator-row.overclock-active {
  border-color: rgba(212, 180, 106, 0.3) !important;
  box-shadow: 0 0 8px rgba(212, 180, 106, 0.1), inset 0 0 8px rgba(212, 180, 106, 0.04);
  background: rgba(212, 180, 106, 0.03);
}

/* Overclock generator picker choices */
.overclock-gen-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 0.75rem;
}

.overclock-gen-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.overclock-gen-choice:hover {
  background: rgba(212, 180, 106, 0.07);
  border-color: rgba(212, 180, 106, 0.22);
}

.overclock-gen-emoji {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.overclock-gen-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
}

.overclock-gen-count {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   THE UNDERCURRENT (reserve bar beneath the tap zone)
   ============================================================ */

.undercurrent-bar {
  max-width: 320px;
  margin: 0.85rem auto 0;
}

.undercurrent-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(164, 201, 224, 0.1);
  overflow: hidden;
}

.undercurrent-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(164, 201, 224, 0.35), rgba(196, 220, 236, 0.75));
  transition: width 0.6s ease;
}

.undercurrent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.35rem;
}

.undercurrent-held {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.35);
}

.undercurrent-release {
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(164, 201, 224, 0.25);
  border-radius: 0.4rem;
  background: rgba(164, 201, 224, 0.06);
  color: var(--accent-cyan);
  font-size: 0.65rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}

.undercurrent-release:hover {
  background: rgba(164, 201, 224, 0.14);
  border-color: rgba(164, 201, 224, 0.45);
}

.undercurrent-release:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ============================================================
   BAROMETRIC SENSE (forecast banner, before the sky decides)
   ============================================================ */

.forecast-banner {
  display: none;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(164, 201, 224, 0.2);
  border-radius: var(--radius-md);
}

.forecast-banner.forecast-visible {
  display: block;
  animation: forecast-breathe 3s ease-in-out infinite;
}

@keyframes forecast-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ============================================================
   TIDAL LOCK (hold the sky, on the weather banner)
   ============================================================ */

.tidal-lock-btn {
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.65rem;
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tidal-lock-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.tidal-lock-held {
  margin-left: 0.5rem;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}

/* ============================================================
   VISUAL SKINS (iOS-only — Phase 4)
   Pure color theming. Does NOT affect sprites or game content.
   Applied via body class: skin-light, skin-oled-dark, etc.
   ============================================================ */

/* ── Skin Selector UI ─────────────────────────────────────── */

.skin-selector {
  margin-top: 0.25rem;
}

.skin-selector-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.skin-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.skin-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

.skin-chip:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
}

.skin-chip-active {
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.1);
  color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.15);
}

.skin-chip-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* Swatch colors per skin */
.skin-swatch-normal    { background: linear-gradient(135deg, #0a0e17, #1a1e2e); }
.skin-swatch-light     { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-color: #dee2e6; }
.skin-swatch-oled-dark { background: #000000; border-color: #00fff5; }
.skin-swatch-sakura    { background: linear-gradient(135deg, #fff0f5, #ffe4e9); border-color: #ff69b4; }
.skin-swatch-neon      { background: linear-gradient(135deg, #0a001a, #1a0033); border-color: #ff006e; }
.skin-swatch-parchment { background: #f4e4c1; border-color: #5c4033; }
.skin-swatch-win95    { background: linear-gradient(135deg, #008080, #c0c0c0); border-color: #808080; }

/* ── SKIN: Light ──────────────────────────────────────────── */

body.skin-light {
  --bg-deep: #f8f9fa;
  --bg-surface: #ffffff;
  --text-primary: #495057;
  --text-white: #212529;
  --accent-cyan: #74b9ff;
  --accent-purple: #a29bfe;
  --muted: #868e96;
  --afford: #38a169;
  --glass-bg: rgba(116, 185, 255, 0.06);
  --glass-border: rgba(116, 185, 255, 0.18);
  --glass-bg-hover: rgba(116, 185, 255, 0.1);
  --glass-border-hover: rgba(116, 185, 255, 0.3);
  --purple-glass-bg: rgba(162, 155, 254, 0.08);
  --purple-glass-border: rgba(162, 155, 254, 0.2);
  background: linear-gradient(170deg, #f8f9fa 0%, #ffffff 100%);
}

body.skin-light .hero-count {
  text-shadow:
    0 0 20px rgba(116, 185, 255, 0.15),
    0 0 40px rgba(116, 185, 255, 0.05);
}

body.skin-light #milestone-display {
  color: #6c757d;
}

body.skin-light .raindrop-bg {
  background: linear-gradient(to bottom, transparent, rgba(116, 185, 255, 0.25), transparent);
}

body.skin-light .generator-row {
  background: rgba(0, 0, 0, 0.015);
}
body.skin-light .generator-row:hover {
  background: rgba(0, 0, 0, 0.03);
}
body.skin-light .generator-row.can-afford {
  background: rgba(56, 161, 105, 0.04);
}

body.skin-light .upgrade-row {
  background: rgba(162, 155, 254, 0.03);
}
body.skin-light .upgrade-row:hover {
  background: rgba(162, 155, 254, 0.06);
}
body.skin-light .upgrade-name {
  color: #6c5ce7;
}

body.skin-light .prestige-message {
  color: #6c5ce7;
}
body.skin-light .prestige-btn {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
  border-color: rgba(162, 155, 254, 0.4);
}

body.skin-light .achievements-panel {
  background: rgba(248, 249, 250, 0.98);
  border-top-color: rgba(255, 215, 0, 0.3);
}
body.skin-light .achievements-panel-header {
  background: rgba(248, 249, 250, 0.98);
}
body.skin-light .achievement-item {
  background: rgba(0, 0, 0, 0.02);
}
body.skin-light .achievement-item.earned {
  background: rgba(255, 215, 0, 0.06);
}

body.skin-light .release-modal-panel {
  background: #ffffff;
  border-color: rgba(116, 185, 255, 0.2);
}
body.skin-light .release-modal-date {
  color: rgba(116, 185, 255, 0.7);
}
body.skin-light .release-modal-bullets li {
  color: #495057;
}

body.skin-light .welcome-modal {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(116, 185, 255, 0.15);
}
body.skin-light .welcome-body p {
  color: rgba(73, 80, 87, 0.85);
}

body.skin-light .audio-pill {
  background: rgba(248, 249, 250, 0.95);
  border-color: rgba(0, 0, 0, 0.1);
}

body.skin-light .section-divider::before,
body.skin-light .section-divider::after {
  background: linear-gradient(to right, transparent, rgba(73, 80, 87, 0.12), transparent);
}

body.skin-light .raindrop-ripple {
  border-color: rgba(116, 185, 255, 0.4);
}
body.skin-light .drop-floater {
  text-shadow: 0 0 10px rgba(116, 185, 255, 0.3);
}

body.skin-light .permalink-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
body.skin-light .permalink-url {
  color: rgba(73, 80, 87, 0.5);
}

body.skin-light .game-attribution {
  color: rgba(73, 80, 87, 0.3);
}
body.skin-light .game-attribution a {
  color: rgba(73, 80, 87, 0.4);
}

body.skin-light .playing-now {
  color: rgba(73, 80, 87, 0.35);
}

body.skin-light .skin-chip {
  color: rgba(0,0,0,0.5);
  border-color: rgba(0,0,0,0.12);
}
body.skin-light .skin-chip:hover {
  color: rgba(0,0,0,0.7);
  border-color: rgba(0,0,0,0.2);
}
body.skin-light .skin-chip-active {
  color: #74b9ff;
  border-color: #74b9ff;
  background: rgba(116, 185, 255, 0.08);
}
body.skin-light .skin-selector-label {
  color: rgba(0,0,0,0.4);
}

/* ── SKIN: OLED Dark ──────────────────────────────────────── */

body.skin-oled-dark {
  --bg-deep: #000000;
  --bg-surface: #050505;
  --text-primary: #e0e0e0;
  --text-white: #ffffff;
  --accent-cyan: #00fff5;
  --accent-purple: #bf5af2;
  --muted: #555555;
  --afford: #30d158;
  --glass-bg: rgba(0, 255, 245, 0.04);
  --glass-border: rgba(0, 255, 245, 0.12);
  --glass-bg-hover: rgba(0, 255, 245, 0.08);
  --glass-border-hover: rgba(0, 255, 245, 0.25);
  --purple-glass-bg: rgba(191, 90, 242, 0.06);
  --purple-glass-border: rgba(191, 90, 242, 0.15);
  background: #000000;
}

body.skin-oled-dark .hero-count {
  text-shadow:
    0 0 30px rgba(0, 255, 245, 0.4),
    0 0 80px rgba(0, 255, 245, 0.15);
}

body.skin-oled-dark .raindrop-bg {
  background: linear-gradient(to bottom, transparent, rgba(0, 255, 245, 0.3), transparent);
}

body.skin-oled-dark .generator-row {
  background: rgba(255, 255, 255, 0.01);
}
body.skin-oled-dark .generator-row.can-afford {
  background: rgba(48, 209, 88, 0.03);
  border-left-color: var(--afford);
}

body.skin-oled-dark .upgrade-row {
  background: rgba(191, 90, 242, 0.02);
}
body.skin-oled-dark .upgrade-name {
  color: #bf5af2;
}
body.skin-oled-dark .prestige-message {
  color: #bf5af2;
}

body.skin-oled-dark .prestige-btn {
  background: linear-gradient(135deg, #bf5af2, #8b3fcf);
  border-color: rgba(191, 90, 242, 0.4);
}

body.skin-oled-dark .achievements-panel {
  background: rgba(0, 0, 0, 0.98);
  border-top-color: rgba(255, 215, 0, 0.2);
}
body.skin-oled-dark .achievements-panel-header {
  background: rgba(0, 0, 0, 0.98);
}

body.skin-oled-dark .release-modal-panel {
  background: #0a0a0a;
  border-color: rgba(0, 255, 245, 0.1);
}

body.skin-oled-dark .welcome-modal {
  background: rgba(5, 5, 5, 0.98);
  border-color: rgba(0, 255, 245, 0.1);
}

body.skin-oled-dark .audio-pill {
  background: rgba(5, 5, 5, 0.95);
}

body.skin-oled-dark .raindrop-ripple {
  border-color: rgba(0, 255, 245, 0.4);
}
body.skin-oled-dark .drop-floater {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(0, 255, 245, 0.5);
}

/* ── SKIN: Sakura ─────────────────────────────────────────── */

body.skin-sakura {
  --bg-deep: #fff0f5;
  --bg-surface: #ffe4e9;
  --text-primary: #8b2252;
  --text-white: #5c1033;
  --accent-cyan: #ff69b4;
  --accent-purple: #db7093;
  --muted: #c0748a;
  --afford: #e85d8c;
  --glass-bg: rgba(255, 105, 180, 0.06);
  --glass-border: rgba(255, 105, 180, 0.18);
  --glass-bg-hover: rgba(255, 105, 180, 0.1);
  --glass-border-hover: rgba(255, 105, 180, 0.3);
  --purple-glass-bg: rgba(219, 112, 147, 0.08);
  --purple-glass-border: rgba(219, 112, 147, 0.2);
  background: linear-gradient(170deg, #fff0f5 0%, #ffe4e9 100%);
}

body.skin-sakura .hero-count {
  text-shadow:
    0 0 30px rgba(255, 105, 180, 0.2),
    0 0 60px rgba(255, 105, 180, 0.08);
}

body.skin-sakura #milestone-display {
  color: #c0748a;
}

body.skin-sakura .raindrop-bg {
  background: linear-gradient(to bottom, transparent, rgba(255, 105, 180, 0.2), transparent);
}

body.skin-sakura .generator-row {
  background: rgba(139, 34, 82, 0.02);
}
body.skin-sakura .generator-row:hover {
  background: rgba(139, 34, 82, 0.04);
}
body.skin-sakura .generator-row.can-afford {
  background: rgba(232, 93, 140, 0.05);
  border-left-color: var(--afford);
  box-shadow: inset 0 0 20px rgba(232, 93, 140, 0.03);
}

body.skin-sakura .upgrade-row {
  background: rgba(219, 112, 147, 0.03);
}
body.skin-sakura .upgrade-row:hover {
  background: rgba(219, 112, 147, 0.06);
}
body.skin-sakura .upgrade-name {
  color: #db7093;
}

body.skin-sakura .prestige-message {
  color: #db7093;
}
body.skin-sakura .prestige-btn {
  background: linear-gradient(135deg, #ff69b4, #db7093);
  border-color: rgba(255, 105, 180, 0.4);
}

body.skin-sakura .achievements-panel {
  background: rgba(255, 240, 245, 0.98);
  border-top-color: rgba(255, 215, 0, 0.3);
}
body.skin-sakura .achievements-panel-header {
  background: rgba(255, 240, 245, 0.98);
}
body.skin-sakura .achievement-item {
  background: rgba(139, 34, 82, 0.02);
}

body.skin-sakura .release-modal-panel {
  background: #fff5f8;
  border-color: rgba(255, 105, 180, 0.15);
}
body.skin-sakura .release-modal-date {
  color: rgba(255, 105, 180, 0.7);
}
body.skin-sakura .release-modal-bullets li {
  color: #8b2252;
}

body.skin-sakura .welcome-modal {
  background: rgba(255, 240, 245, 0.97);
  border-color: rgba(255, 105, 180, 0.12);
}
body.skin-sakura .welcome-body p {
  color: rgba(139, 34, 82, 0.75);
}

body.skin-sakura .audio-pill {
  background: rgba(255, 240, 245, 0.95);
  border-color: rgba(139, 34, 82, 0.1);
}

body.skin-sakura .section-divider::before,
body.skin-sakura .section-divider::after {
  background: linear-gradient(to right, transparent, rgba(139, 34, 82, 0.1), transparent);
}

body.skin-sakura .raindrop-ripple {
  border-color: rgba(255, 105, 180, 0.4);
}
body.skin-sakura .drop-floater {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(255, 105, 180, 0.4);
}

body.skin-sakura .permalink-row {
  background: rgba(139, 34, 82, 0.03);
  border-color: rgba(139, 34, 82, 0.06);
}
body.skin-sakura .permalink-url {
  color: rgba(139, 34, 82, 0.4);
}

body.skin-sakura .game-attribution {
  color: rgba(139, 34, 82, 0.2);
}
body.skin-sakura .game-attribution a {
  color: rgba(139, 34, 82, 0.3);
}

body.skin-sakura .playing-now {
  color: rgba(139, 34, 82, 0.3);
}

body.skin-sakura .skin-chip {
  color: rgba(139, 34, 82, 0.5);
  border-color: rgba(139, 34, 82, 0.15);
}
body.skin-sakura .skin-chip:hover {
  color: rgba(139, 34, 82, 0.7);
}
body.skin-sakura .skin-chip-active {
  color: #ff69b4;
  border-color: #ff69b4;
  background: rgba(255, 105, 180, 0.08);
}
body.skin-sakura .skin-selector-label {
  color: rgba(139, 34, 82, 0.4);
}

/* ── SKIN: Neon ───────────────────────────────────────────── */

body.skin-neon {
  --bg-deep: #0a001a;
  --bg-surface: #110026;
  --text-primary: #ff006e;
  --text-white: #ffffff;
  --accent-cyan: #0066ff;
  --accent-purple: #ff006e;
  --muted: #6b3a7d;
  --afford: #00ff88;
  --glass-bg: rgba(0, 102, 255, 0.06);
  --glass-border: rgba(0, 102, 255, 0.2);
  --glass-bg-hover: rgba(0, 102, 255, 0.1);
  --glass-border-hover: rgba(0, 102, 255, 0.35);
  --purple-glass-bg: rgba(255, 0, 110, 0.06);
  --purple-glass-border: rgba(255, 0, 110, 0.2);
  background: linear-gradient(170deg, #0a001a 0%, #110026 100%);
}

body.skin-neon .hero-count {
  text-shadow:
    0 0 30px rgba(0, 102, 255, 0.5),
    0 0 80px rgba(255, 0, 110, 0.3);
}

body.skin-neon .raindrop-bg {
  background: linear-gradient(to bottom, transparent, rgba(0, 102, 255, 0.35), transparent);
}

body.skin-neon .generator-row {
  background: rgba(0, 102, 255, 0.02);
}
body.skin-neon .generator-row:hover {
  background: rgba(0, 102, 255, 0.05);
}
body.skin-neon .generator-row.can-afford {
  background: rgba(0, 255, 136, 0.04);
  border-left-color: var(--afford);
  box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.03);
}
body.skin-neon .generator-count {
  color: #0066ff;
}

body.skin-neon .upgrade-row {
  background: rgba(255, 0, 110, 0.03);
}
body.skin-neon .upgrade-row:hover {
  background: rgba(255, 0, 110, 0.06);
}
body.skin-neon .upgrade-row.can-afford {
  border-left-color: var(--accent-purple);
  box-shadow: inset 0 0 20px rgba(255, 0, 110, 0.03);
}
body.skin-neon .upgrade-name {
  color: #ff006e;
}

body.skin-neon .prestige-message {
  color: #ff69b4;
}
body.skin-neon .prestige-btn {
  background: linear-gradient(135deg, #ff006e, #0066ff);
  border-color: rgba(255, 0, 110, 0.4);
}
body.skin-neon .prestige-badge {
  color: #ff006e;
  background: rgba(255, 0, 110, 0.08);
  border-color: rgba(255, 0, 110, 0.2);
}

body.skin-neon .achievements-panel {
  background: rgba(10, 0, 26, 0.98);
  border-top-color: rgba(255, 215, 0, 0.2);
}
body.skin-neon .achievements-panel-header {
  background: rgba(10, 0, 26, 0.98);
}

body.skin-neon .release-modal-panel {
  background: #0d0020;
  border-color: rgba(0, 102, 255, 0.15);
}
body.skin-neon .release-modal-date {
  color: rgba(255, 0, 110, 0.7);
}
body.skin-neon .release-modal-bullets li {
  color: rgba(255, 0, 110, 0.65);
}

body.skin-neon .welcome-modal {
  background: rgba(10, 0, 26, 0.97);
  border-color: rgba(0, 102, 255, 0.12);
}
body.skin-neon .welcome-body p {
  color: rgba(255, 0, 110, 0.6);
}

body.skin-neon .audio-pill {
  background: rgba(10, 0, 26, 0.95);
  border-color: rgba(0, 102, 255, 0.12);
}

body.skin-neon .raindrop-ripple {
  border-color: rgba(0, 102, 255, 0.5);
}
body.skin-neon .drop-floater {
  color: #0066ff;
  text-shadow: 0 0 15px rgba(0, 102, 255, 0.6);
}

body.skin-neon .section-divider::before,
body.skin-neon .section-divider::after {
  background: linear-gradient(to right, transparent, rgba(255, 0, 110, 0.12), transparent);
}

body.skin-neon .rain-click-zone::after {
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(0, 102, 255, 0.25),
    transparent,
    rgba(255, 0, 110, 0.15),
    transparent
  );
}

/* ── SKIN: Parchment ──────────────────────────────────────── */

body.skin-parchment {
  --bg-deep: #f4e4c1;
  --bg-surface: #ede0c8;
  --text-primary: #5c4033;
  --text-white: #3a2a1a;
  --accent-cyan: #4a4a4a;
  --accent-purple: #6b5b4e;
  --muted: #8b7d6b;
  --afford: #5a7a4a;
  --glass-bg: rgba(74, 74, 74, 0.04);
  --glass-border: rgba(74, 74, 74, 0.12);
  --glass-bg-hover: rgba(74, 74, 74, 0.08);
  --glass-border-hover: rgba(74, 74, 74, 0.2);
  --purple-glass-bg: rgba(107, 91, 78, 0.06);
  --purple-glass-border: rgba(107, 91, 78, 0.15);
  background: linear-gradient(170deg, #f4e4c1 0%, #ede0c8 100%);
}

body.skin-parchment .hero-count {
  text-shadow:
    0 0 20px rgba(92, 64, 51, 0.12),
    0 0 50px rgba(92, 64, 51, 0.05);
}

body.skin-parchment #milestone-display {
  color: #8b7d6b;
}

body.skin-parchment .raindrop-bg {
  background: linear-gradient(to bottom, transparent, rgba(92, 64, 51, 0.1), transparent);
  opacity: 0.15;
}

body.skin-parchment .generator-row {
  background: rgba(92, 64, 51, 0.02);
}
body.skin-parchment .generator-row:hover {
  background: rgba(92, 64, 51, 0.04);
}
body.skin-parchment .generator-row.can-afford {
  background: rgba(90, 122, 74, 0.04);
  border-left-color: var(--afford);
  box-shadow: inset 0 0 20px rgba(90, 122, 74, 0.03);
}
body.skin-parchment .generator-count {
  color: #4a4a4a;
}

body.skin-parchment .upgrade-row {
  background: rgba(107, 91, 78, 0.03);
}
body.skin-parchment .upgrade-row:hover {
  background: rgba(107, 91, 78, 0.06);
}
body.skin-parchment .upgrade-name {
  color: #6b5b4e;
}

body.skin-parchment .prestige-message {
  color: #6b5b4e;
}
body.skin-parchment .prestige-btn {
  background: linear-gradient(135deg, #6b5b4e, #4a3b2e);
  border-color: rgba(107, 91, 78, 0.4);
}
body.skin-parchment .prestige-badge {
  color: #6b5b4e;
  background: rgba(107, 91, 78, 0.08);
  border-color: rgba(107, 91, 78, 0.2);
}

body.skin-parchment .achievements-panel {
  background: rgba(244, 228, 193, 0.98);
  border-top-color: rgba(92, 64, 51, 0.2);
}
body.skin-parchment .achievements-panel-header {
  background: rgba(244, 228, 193, 0.98);
}
body.skin-parchment .achievements-panel-title {
  color: #5c4033;
}
body.skin-parchment .achievement-item {
  background: rgba(92, 64, 51, 0.02);
}
body.skin-parchment .achievement-item.earned {
  background: rgba(92, 64, 51, 0.06);
}
body.skin-parchment .achievement-item.earned .achievement-item-name {
  color: #5c4033;
}

body.skin-parchment .release-modal-panel {
  background: #f0dbb0;
  border-color: rgba(92, 64, 51, 0.2);
}
body.skin-parchment .release-modal-date {
  color: rgba(92, 64, 51, 0.6);
}
body.skin-parchment .release-modal-bullets li {
  color: #5c4033;
}
body.skin-parchment .release-modal-bullets li::before {
  color: rgba(92, 64, 51, 0.4);
}
body.skin-parchment .release-modal-footer {
  border-top-color: rgba(92, 64, 51, 0.1);
}
body.skin-parchment .release-modal-dismiss {
  color: #5c4033;
  border-color: rgba(92, 64, 51, 0.2);
}

body.skin-parchment .welcome-modal {
  background: rgba(244, 228, 193, 0.97);
  border-color: rgba(92, 64, 51, 0.12);
}
body.skin-parchment .welcome-title {
  text-shadow: none;
}
body.skin-parchment .welcome-body p {
  color: rgba(92, 64, 51, 0.75);
}
body.skin-parchment .welcome-btn {
  background: rgba(92, 64, 51, 0.08);
  border-color: rgba(92, 64, 51, 0.25);
  color: #5c4033;
}
body.skin-parchment .welcome-btn:hover {
  background: rgba(92, 64, 51, 0.14);
  border-color: rgba(92, 64, 51, 0.4);
  box-shadow: 0 0 20px rgba(92, 64, 51, 0.1);
}

body.skin-parchment .audio-pill {
  background: rgba(237, 224, 200, 0.95);
  border-color: rgba(92, 64, 51, 0.1);
}
body.skin-parchment .audio-toggle {
  background: rgba(92, 64, 51, 0.05);
  border-color: rgba(92, 64, 51, 0.1);
}
body.skin-parchment .audio-toggle.audio-active {
  background: rgba(92, 64, 51, 0.1);
  border-color: rgba(92, 64, 51, 0.3);
  color: #4a4a4a;
}

body.skin-parchment .section-divider::before,
body.skin-parchment .section-divider::after {
  background: linear-gradient(to right, transparent, rgba(92, 64, 51, 0.1), transparent);
}

body.skin-parchment .raindrop-ripple {
  border-color: rgba(92, 64, 51, 0.2);
}
body.skin-parchment .drop-floater {
  color: #4a4a4a;
  text-shadow: 0 0 8px rgba(92, 64, 51, 0.2);
}

body.skin-parchment .permalink-row {
  background: rgba(92, 64, 51, 0.04);
  border-color: rgba(92, 64, 51, 0.08);
}
body.skin-parchment .permalink-url {
  color: rgba(92, 64, 51, 0.4);
}
body.skin-parchment .permalink-copy {
  color: rgba(92, 64, 51, 0.4);
  border-color: rgba(92, 64, 51, 0.15);
}

body.skin-parchment .game-attribution {
  color: rgba(92, 64, 51, 0.2);
}
body.skin-parchment .game-attribution a {
  color: rgba(92, 64, 51, 0.3);
}

body.skin-parchment .playing-now {
  color: rgba(92, 64, 51, 0.3);
}

body.skin-parchment .skin-chip {
  color: rgba(92, 64, 51, 0.5);
  border-color: rgba(92, 64, 51, 0.15);
}
body.skin-parchment .skin-chip:hover {
  color: rgba(92, 64, 51, 0.7);
}
body.skin-parchment .skin-chip-active {
  color: #5c4033;
  border-color: #5c4033;
  background: rgba(92, 64, 51, 0.08);
  box-shadow: none;
}
body.skin-parchment .skin-selector-label {
  color: rgba(92, 64, 51, 0.4);
}

body.skin-parchment .rain-click-zone::after {
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(92, 64, 51, 0.08),
    transparent,
    rgba(92, 64, 51, 0.04),
    transparent
  );
}

/* Scrollbar for light skins */
body.skin-light ::-webkit-scrollbar-thumb,
body.skin-sakura ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
}
body.skin-light ::-webkit-scrollbar-thumb:hover,
body.skin-sakura ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.15);
}
body.skin-parchment ::-webkit-scrollbar-thumb {
  background: rgba(92, 64, 51, 0.1);
}
body.skin-parchment ::-webkit-scrollbar-thumb:hover {
  background: rgba(92, 64, 51, 0.2);
}

/* Let Go modal adaptation for light skins */
body.skin-light .letgo-modal,
body.skin-sakura .letgo-modal {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
}
body.skin-light .letgo-line,
body.skin-sakura .letgo-line {
  color: rgba(0, 0, 0, 0.75);
}
body.skin-light .letgo-subline,
body.skin-sakura .letgo-subline {
  color: rgba(0, 0, 0, 0.4);
}
body.skin-parchment .letgo-modal {
  background: rgba(244, 228, 193, 0.95);
  border-color: rgba(92, 64, 51, 0.1);
}
body.skin-parchment .letgo-line {
  color: rgba(58, 42, 26, 0.85);
}
body.skin-parchment .letgo-subline {
  color: rgba(92, 64, 51, 0.5);
}

/* Toast adaptation for light/warm skins */
body.skin-light .achievement-toast,
body.skin-sakura .achievement-toast {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 215, 0, 0.3);
}
body.skin-parchment .achievement-toast {
  background: rgba(244, 228, 193, 0.95);
  border-color: rgba(92, 64, 51, 0.3);
}

/* ── Skin overrides for buy button hover ── */
body.skin-light .buy-btn:not(.disabled):hover,
body.skin-sakura .buy-btn:not(.disabled):hover {
  color: var(--text-white);
  border-color: var(--accent-cyan);
  background: rgba(116, 185, 255, 0.08);
  box-shadow: 0 0 15px rgba(116, 185, 255, 0.1);
}

body.skin-parchment .buy-btn:not(.disabled):hover {
  color: var(--text-white);
  border-color: var(--accent-cyan);
  background: rgba(92, 64, 51, 0.08);
  box-shadow: none;
}

/* Light skins need dark stat text */
body.skin-light .stat-row,
body.skin-sakura .stat-row,
body.skin-parchment .stat-row {
  color: var(--muted);
}

/* Maxed enchantment chips for light skins */
body.skin-light .maxed-chip,
body.skin-sakura .maxed-chip {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.5);
}
body.skin-parchment .maxed-chip {
  background: rgba(92, 64, 51, 0.04);
  border-color: rgba(92, 64, 51, 0.08);
  color: rgba(92, 64, 51, 0.5);
}

body.skin-light .maxed-toggle,
body.skin-sakura .maxed-toggle {
  color: rgba(0, 0, 0, 0.35);
}
body.skin-parchment .maxed-toggle {
  color: rgba(92, 64, 51, 0.4);
}

/* Enchantment tabs for themed skins */
body.skin-light .upgrade-tab {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.35);
}
body.skin-light .upgrade-tab-active {
  color: #6c5ce7;
  background: rgba(108, 92, 231, 0.06);
  border-color: rgba(108, 92, 231, 0.25);
}

body.skin-sakura .upgrade-tab {
  background: rgba(139, 34, 82, 0.02);
  border-color: rgba(139, 34, 82, 0.08);
  color: rgba(139, 34, 82, 0.35);
}
body.skin-sakura .upgrade-tab-active {
  color: #db7093;
  background: rgba(219, 112, 147, 0.08);
  border-color: rgba(219, 112, 147, 0.25);
}

body.skin-parchment .upgrade-tab {
  background: rgba(92, 64, 51, 0.03);
  border-color: rgba(92, 64, 51, 0.1);
  color: rgba(92, 64, 51, 0.35);
}
body.skin-parchment .upgrade-tab-active {
  color: #5c4033;
  background: rgba(92, 64, 51, 0.08);
  border-color: rgba(92, 64, 51, 0.25);
}

/* ═══════════════════════════════════════════════════════
   WEATHER SHIMMER BORDERS (iOS-only)
   Applied to .rain-container when weather is active
   Uses box-shadow + animated border for performance
   (transform/opacity only — no layout triggers)
   ═══════════════════════════════════════════════════════ */

.weather-shimmer {
  position: relative;
}

.weather-shimmer::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  border: 3px solid transparent;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.weather-shimmer.shimmer-active::before {
  opacity: 1;
}

/* Drizzle: soft blue shimmer */
.weather-shimmer.shimmer-drizzle::before {
  border-color: rgba(100, 181, 246, 0.4);
  box-shadow: inset 0 0 30px rgba(100, 181, 246, 0.15), inset 0 0 60px rgba(100, 181, 246, 0.05);
  animation: shimmer-drizzle 3s ease-in-out infinite;
}
@keyframes shimmer-drizzle {
  0%, 100% { border-color: rgba(100, 181, 246, 0.3); box-shadow: inset 0 0 25px rgba(100, 181, 246, 0.1), inset 0 0 50px rgba(100, 181, 246, 0.03); }
  50% { border-color: rgba(100, 181, 246, 0.6); box-shadow: inset 0 0 40px rgba(100, 181, 246, 0.2), inset 0 0 80px rgba(100, 181, 246, 0.08); }
}

/* Downpour: deep blue pulse */
.weather-shimmer.shimmer-downpour::before {
  border-color: rgba(0, 100, 200, 0.5);
  box-shadow: inset 0 0 40px rgba(0, 100, 200, 0.2), inset 0 0 80px rgba(0, 100, 200, 0.08);
  animation: shimmer-downpour 2s ease-in-out infinite;
}
@keyframes shimmer-downpour {
  0%, 100% { border-color: rgba(0, 100, 200, 0.35); box-shadow: inset 0 0 30px rgba(0, 100, 200, 0.12), inset 0 0 60px rgba(0, 100, 200, 0.04); }
  50% { border-color: rgba(0, 150, 255, 0.7); box-shadow: inset 0 0 50px rgba(0, 150, 255, 0.25), inset 0 0 100px rgba(0, 150, 255, 0.1); }
}

/* Thunderstorm: yellow/white lightning crackle */
.weather-shimmer.shimmer-thunderstorm::before {
  border-color: rgba(255, 235, 59, 0.5);
  box-shadow: inset 0 0 30px rgba(255, 235, 59, 0.15), inset 0 0 60px rgba(255, 255, 255, 0.05);
  animation: shimmer-thunderstorm 0.8s ease-in-out infinite;
}
@keyframes shimmer-thunderstorm {
  0%, 100% { border-color: rgba(255, 235, 59, 0.3); box-shadow: inset 0 0 20px rgba(255, 235, 59, 0.1); }
  30% { border-color: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.3), inset 0 0 120px rgba(255, 235, 59, 0.15); }
  35% { border-color: rgba(255, 235, 59, 0.2); box-shadow: inset 0 0 15px rgba(255, 235, 59, 0.08); }
  50% { border-color: rgba(255, 235, 59, 0.5); box-shadow: inset 0 0 35px rgba(255, 235, 59, 0.18); }
}

/* Hurricane: red/orange intense pulse */
.weather-shimmer.shimmer-hurricane::before {
  border-color: rgba(255, 80, 40, 0.5);
  box-shadow: inset 0 0 40px rgba(255, 80, 40, 0.2), inset 0 0 80px rgba(255, 120, 0, 0.08);
  animation: shimmer-hurricane 0.6s ease-in-out infinite;
}
@keyframes shimmer-hurricane {
  0%, 100% { border-color: rgba(255, 80, 40, 0.4); box-shadow: inset 0 0 30px rgba(255, 80, 40, 0.15); }
  50% { border-color: rgba(255, 120, 0, 0.8); box-shadow: inset 0 0 60px rgba(255, 120, 0, 0.3), inset 0 0 100px rgba(255, 80, 40, 0.12); }
}

/* Fog: white/grey gentle fade */
.weather-shimmer.shimmer-fog::before {
  border-color: rgba(200, 210, 220, 0.3);
  box-shadow: inset 0 0 40px rgba(200, 210, 220, 0.1), inset 0 0 80px rgba(255, 255, 255, 0.03);
  animation: shimmer-fog 4s ease-in-out infinite;
}
@keyframes shimmer-fog {
  0%, 100% { border-color: rgba(200, 210, 220, 0.2); box-shadow: inset 0 0 30px rgba(200, 210, 220, 0.06); }
  50% { border-color: rgba(220, 225, 230, 0.45); box-shadow: inset 0 0 50px rgba(220, 225, 230, 0.15), inset 0 0 90px rgba(255, 255, 255, 0.05); }
}

/* Tsunami: cyan/teal rapid shimmer */
.weather-shimmer.shimmer-tsunami::before {
  border-color: rgba(0, 220, 180, 0.6);
  box-shadow: inset 0 0 50px rgba(0, 220, 180, 0.25), inset 0 0 100px rgba(0, 255, 200, 0.1);
  animation: shimmer-tsunami 0.4s ease-in-out infinite;
}
@keyframes shimmer-tsunami {
  0%, 100% { border-color: rgba(0, 220, 180, 0.4); box-shadow: inset 0 0 35px rgba(0, 220, 180, 0.15); }
  50% { border-color: rgba(0, 255, 220, 0.8); box-shadow: inset 0 0 70px rgba(0, 255, 220, 0.35), inset 0 0 120px rgba(0, 220, 180, 0.15); }
}

/* Drought: brown/amber slow fade */
.weather-shimmer.shimmer-drought::before {
  border-color: rgba(160, 100, 30, 0.4);
  box-shadow: inset 0 0 30px rgba(160, 100, 30, 0.12), inset 0 0 60px rgba(200, 140, 50, 0.05);
  animation: shimmer-drought 5s ease-in-out infinite;
}
@keyframes shimmer-drought {
  0%, 100% { border-color: rgba(160, 100, 30, 0.25); box-shadow: inset 0 0 20px rgba(160, 100, 30, 0.08); }
  50% { border-color: rgba(200, 140, 50, 0.5); box-shadow: inset 0 0 40px rgba(200, 140, 50, 0.18), inset 0 0 70px rgba(160, 100, 30, 0.06); }
}

/* Snow: white/silver sparkle */
.weather-shimmer.shimmer-snow::before {
  border-color: rgba(220, 235, 255, 0.4);
  box-shadow: inset 0 0 35px rgba(220, 235, 255, 0.15), inset 0 0 70px rgba(255, 255, 255, 0.05);
  animation: shimmer-snow 2.5s ease-in-out infinite;
}
@keyframes shimmer-snow {
  0%, 100% { border-color: rgba(220, 235, 255, 0.3); box-shadow: inset 0 0 25px rgba(220, 235, 255, 0.1); }
  25% { border-color: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.2); }
  50% { border-color: rgba(200, 220, 245, 0.35); box-shadow: inset 0 0 30px rgba(200, 220, 245, 0.12); }
  75% { border-color: rgba(240, 248, 255, 0.55); box-shadow: inset 0 0 45px rgba(240, 248, 255, 0.18); }
}

/* Sleet: grey/blue-grey */
.weather-shimmer.shimmer-sleet::before {
  border-color: rgba(144, 164, 174, 0.4);
  box-shadow: inset 0 0 30px rgba(144, 164, 174, 0.12), inset 0 0 60px rgba(120, 140, 160, 0.05);
  animation: shimmer-sleet 2s ease-in-out infinite;
}
@keyframes shimmer-sleet {
  0%, 100% { border-color: rgba(144, 164, 174, 0.3); box-shadow: inset 0 0 25px rgba(144, 164, 174, 0.08); }
  50% { border-color: rgba(160, 180, 200, 0.55); box-shadow: inset 0 0 45px rgba(160, 180, 200, 0.2); }
}

/* Relief: green/gold gentle glow */
.weather-shimmer.shimmer-relief::before {
  border-color: rgba(100, 200, 80, 0.4);
  box-shadow: inset 0 0 35px rgba(100, 200, 80, 0.12), inset 0 0 70px rgba(255, 215, 0, 0.05);
  animation: shimmer-relief 3s ease-in-out infinite;
}
@keyframes shimmer-relief {
  0%, 100% { border-color: rgba(100, 200, 80, 0.3); box-shadow: inset 0 0 25px rgba(100, 200, 80, 0.08); }
  50% { border-color: rgba(200, 200, 50, 0.55); box-shadow: inset 0 0 50px rgba(200, 200, 50, 0.18), inset 0 0 90px rgba(255, 215, 0, 0.08); }
}

/* Flood (iOS): red/blue alternating urgent */
.weather-shimmer.shimmer-flood::before {
  border-color: rgba(255, 40, 40, 0.6);
  box-shadow: inset 0 0 50px rgba(255, 40, 40, 0.2), inset 0 0 100px rgba(0, 80, 255, 0.08);
  animation: shimmer-flood 0.3s ease-in-out infinite;
}
@keyframes shimmer-flood {
  0%, 100% { border-color: rgba(255, 40, 40, 0.6); box-shadow: inset 0 0 50px rgba(255, 40, 40, 0.2); }
  50% { border-color: rgba(40, 80, 255, 0.6); box-shadow: inset 0 0 50px rgba(40, 80, 255, 0.2); }
}

/* Flood surge inherits flood shimmer */
.weather-shimmer.shimmer-flood_surge::before {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.25);
  animation: shimmer-flood-surge 0.5s ease-in-out infinite;
}
@keyframes shimmer-flood-surge {
  0%, 100% { border-color: rgba(255, 215, 0, 0.4); box-shadow: inset 0 0 35px rgba(255, 215, 0, 0.15); }
  50% { border-color: rgba(255, 215, 0, 0.8); box-shadow: inset 0 0 70px rgba(255, 215, 0, 0.35); }
}

/* ═══════════════════════════════════════════════════════
   TAP JUICE (every platform since the de-gate)
   ═══════════════════════════════════════════════════════ */

/* (a) Tap Ripple — concentric circles from tap point */
.ios-ripple-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(164, 201, 224, 0.35);
  animation: ios-ripple-expand 0.7s ease-out forwards;
  will-change: transform, opacity;
}
.ios-ripple-ring:nth-child(2) { animation-delay: 0.1s; }
.ios-ripple-ring:nth-child(3) { animation-delay: 0.2s; }

/* golden drops get gold rings, so a proc reads even when the number is missed */
.ios-ripple-ring.golden {
  border-color: rgba(255, 215, 0, 0.55);
}

@keyframes ios-ripple-expand {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* (b) Number Pop — big hits speak louder in the same cold family.
   Gold stays reserved for .golden-floater; big is not lucky. */
.drop-floater.big-hit {
  font-size: 1.6rem;
  color: var(--accent-cyan);
  text-shadow: 0 0 18px rgba(164, 201, 224, 0.6), 0 0 40px rgba(164, 201, 224, 0.25);
  animation: big-hit-float 1s ease-out forwards;
}
@keyframes big-hit-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(-20px) scale(1.3); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.9); }
}

/* (c) Generator Purchase Celebration — CSS confetti burst */
.gen-confetti-container {
  position: fixed;
  top: 50%;
  left: 50%;
  pointer-events: none;
  z-index: 10000;
}
.gen-confetti-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: confetti-burst 0.8s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes confetti-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { opacity: 0; }
}

/* (d) Milestone Flash — golden full-screen flash */
.milestone-flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.25), transparent 70%);
  pointer-events: none;
  z-index: 9998;
  animation: milestone-flash-anim 0.6s ease-out forwards;
  will-change: opacity;
}
@keyframes milestone-flash-anim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* (e) Prestige Build-up — pulsing glow on prestige button as player approaches threshold */
.prestige-approaching {
  animation: prestige-buildup 2s ease-in-out infinite !important;
}
.prestige-approaching-close {
  animation: prestige-buildup-close 1.2s ease-in-out infinite !important;
}
.prestige-approaching-imminent {
  animation: prestige-buildup-imminent 0.6s ease-in-out infinite !important;
}

@keyframes prestige-buildup {
  0%, 100% { box-shadow: 0 0 20px rgba(123, 104, 238, 0.2); }
  50% { box-shadow: 0 0 35px rgba(123, 104, 238, 0.4); }
}
@keyframes prestige-buildup-close {
  0%, 100% { box-shadow: 0 0 25px rgba(123, 104, 238, 0.3); }
  50% { box-shadow: 0 0 50px rgba(123, 104, 238, 0.6), 0 0 80px rgba(123, 104, 238, 0.2); }
}
@keyframes prestige-buildup-imminent {
  0%, 100% { box-shadow: 0 0 30px rgba(123, 104, 238, 0.4), 0 0 60px rgba(255, 215, 0, 0.1); }
  50% { box-shadow: 0 0 60px rgba(123, 104, 238, 0.7), 0 0 100px rgba(255, 215, 0, 0.25); }
}

/* (f) First Weather Event — "THE SKY CHANGES" overlay text */
.sky-changes-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  animation: sky-changes-anim 2.5s ease-in-out forwards;
  will-change: opacity;
}
.sky-changes-text {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 30px rgba(164, 201, 224, 0.4);
}
@keyframes sky-changes-anim {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ─── Cinema credits roll on the ending screen ───────────────────────
   The git log scrolls slowly behind everything else as the Rain song
   plays. Low opacity, slight blur, monospace — ambient texture that
   honors the work without competing with the foreground stats. */
.ending-credits-roll {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  filter: blur(0.4px);
  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  color: #cfd8e3;
  display: flex;
  justify-content: center;
  /* Slow opening-titles fade-in, then hold at the ambient level. */
  animation: ending-credits-fade-in 5s ease-out 1.2s forwards;
}

@keyframes ending-credits-fade-in {
  from { opacity: 0; }
  to   { opacity: 0.18; }
}

.ending-credits-inner {
  position: absolute;
  top: 100%;
  width: 100%;
  max-width: 640px;
  padding: 0 24px;
  text-align: center;
  /* Movie-credits scroll: start just below viewport, translate up by
     own height + viewport height so all content scrolls fully past. */
  animation: ending-credits-scroll 110s linear 5s infinite;
}

@keyframes ending-credits-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% - 100vh)); }
}

.ending-credits-title {
  font-size: 2.2rem;
  letter-spacing: 0.4em;
  font-weight: 200;
  padding: 2em 0 0.5em;
  color: #e6eef8;
}

.ending-credits-subtitle {
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-bottom: 4em;
  opacity: 0.75;
}

.ending-credits-spacer { height: 6em; }

.ending-credits-line {
  font-size: 0.72rem;
  line-height: 1.85;
  display: grid;
  grid-template-columns: 70px 110px 1fr;
  gap: 12px;
  text-align: left;
  opacity: 0.78;
}

.ending-credits-sha   { color: #a4c9e0; }
.ending-credits-ago   { color: #888fa0; font-style: italic; }
.ending-credits-msg   { color: #dde4ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ending-credits-coda {
  padding: 6em 0 8em;
  font-size: 1.05rem;
  line-height: 2;
  letter-spacing: 0.08em;
  color: #e6eef8;
}

.ending-credits-thanks {
  margin-top: 1.5em;
  font-style: italic;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Persistent ♫ Rain — Schwad & Philippe credit, lower-right corner */
.ending-song-credit {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 0.7rem;
  font-style: italic;
  color: #cfd8e3;
  opacity: 0.45;
  z-index: 50;
  pointer-events: none;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .ending-credits-line {
    grid-template-columns: 56px 90px 1fr;
    font-size: 0.65rem;
    gap: 8px;
  }
  .ending-credits-title { font-size: 1.6rem; }
  .ending-song-credit   { font-size: 0.62rem; bottom: 0.8rem; right: 0.8rem; }
}