/*
 * RAIN - an idle game about water, patience, and letting go
 *
 * Color palette:
 *   Background:  #0a0e17 -> #1a1e2e
 *   Silver-blue: #c8d6e5
 *   Cyan:        #00d2ff
 *   Slate blue:  #7b68ee
 *   Muted:       #4a5568
 *   Afford:      #48bb78
 *   White:       #ffffff
 */

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

:root {
  --bg-deep: #0a0e17;
  --bg-surface: #1a1e2e;
  --text-primary: #c8d6e5;
  --text-white: #ffffff;
  --accent-cyan: #00d2ff;
  --accent-purple: #7b68ee;
  --muted: #4a5568;
  --afford: #48bb78;
  --glass-bg: rgba(0, 210, 255, 0.05);
  --glass-border: rgba(0, 210, 255, 0.15);
  --glass-bg-hover: rgba(0, 210, 255, 0.1);
  --glass-border-hover: rgba(0, 210, 255, 0.35);
  --purple-glass-bg: rgba(123, 104, 238, 0.08);
  --purple-glass-border: rgba(123, 104, 238, 0.2);
  --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: 14px;
  --radius-lg: 20px;
  --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: linear-gradient(170deg, var(--bg-deep) 0%, var(--bg-surface) 100%);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   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(0, 210, 255, 0.4),
    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: 100px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   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;
  text-shadow:
    0 0 30px rgba(0, 210, 255, 0.3),
    0 0 60px rgba(0, 210, 255, 0.1);
  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;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  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;
}

.rain-click-zone:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 40px rgba(0, 210, 255, 0.08);
}

.rain-click-zone:active {
  transform: scale(0.98);
  background: rgba(0, 210, 255, 0.12);
  border-color: rgba(0, 210, 255, 0.4);
}

.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(0, 210, 255, 0.3));
}

.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(0, 210, 255, 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(0, 210, 255, 0.5);
}

.golden-floater {
  font-size: 1.5rem;
  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.2); }
  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: #a0b4c8;
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(0, 210, 255, 0.12);
  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: linear-gradient(
    to right,
    transparent,
    rgba(200, 214, 229, 0.12),
    transparent
  );
}

.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: 2px;
}

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

.generator-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.generator-row.can-afford {
  border-left-color: var(--afford);
  background: rgba(72, 187, 120, 0.04);
  box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.03);
}

.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: 8px;
  border: 1px solid rgba(140, 220, 255, 0.25);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(80, 180, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.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;
  color: var(--accent-cyan);
  width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.buy-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-med);
  -webkit-tap-highlight-color: transparent;
}

.buy-btn:not(.disabled):hover {
  color: var(--text-white);
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.15);
  transform: scale(1.05);
}

.buy-btn:not(.disabled):active {
  transform: scale(0.97);
}

.buy-btn.disabled {
  color: var(--muted);
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   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 {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius-md);
  background: var(--purple-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--purple-glass-border);
  box-shadow: 0 0 30px rgba(123, 104, 238, 0.08);
}

.prestige-message {
  font-style: italic;
  font-size: 0.9rem;
  color: #b8a9f0;
  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 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--text-white);
  background: linear-gradient(135deg, #7b68ee, #5a4fcf);
  border: 1px solid rgba(123, 104, 238, 0.4);
  padding: 12px 36px;
  border-radius: 100px;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-med);
  animation: pulse-glow 3s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.prestige-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 40px rgba(123, 104, 238, 0.5);
}

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

@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(0, 210, 255, 0.2);
  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: 2px solid;
  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: rgba(0, 210, 255, 0.1);
  border-color: rgba(0, 210, 255, 0.3);
  color: var(--accent-cyan);
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.1);
}

/* Expandable audio dropdown */
.audio-pill {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(15, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  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;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.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: rgba(0, 210, 255, 0.15);
  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: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.achievement-counter-btn:hover {
  color: #ffd700;
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.1);
}

/* Achievements panel */
.achievements-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 70vh;
  background: rgba(10, 14, 23, 0.98);
  border-top: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  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: rgba(10, 14, 23, 0.98);
  z-index: 1;
}

.achievements-panel-title {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: #ffd700;
}

.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(255, 215, 0, 0.04);
  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: #ffd700;
}

.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(180, 210, 255, 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(160, 200, 255, 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(180, 220, 255, 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;
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(10, 14, 23, 0.95);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), 0 0 50px rgba(255, 215, 0, 0.05);
  backdrop-filter: blur(20px);
  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: #ffd700;
  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: rgb(10, 14, 23);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  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 rgba(0, 210, 255, 0.5);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.2), 0 0 50px rgba(0, 210, 255, 0.05);
}

.unlock-toast.upgrade-unlock {
  border: 1px solid rgba(123, 104, 238, 0.5);
  box-shadow: 0 0 20px rgba(123, 104, 238, 0.2), 0 0 50px rgba(123, 104, 238, 0.05);
}

.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(255,255,255,0.35);
  font-size: 0.7rem;
  padding: 0.4rem 1rem;
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  border-radius: 2rem;
  transition: all 0.25s ease;
}
.upgrade-tab:hover {
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
}
.upgrade-tab-active {
  color: rgba(200,180,255,0.9);
  background: rgba(140,120,238,0.12);
  border-color: rgba(140,120,238,0.35);
  box-shadow: 0 0 12px rgba(140,120,238,0.1);
}

.maxed-chip-badge {
  font-size: 0.55rem;
  background: rgba(100,200,255,0.15);
  color: rgba(100,200,255,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: rgba(123, 104, 238, 0.03);
  border-left: 3px solid transparent;
  overflow: hidden;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-med);
  margin-bottom: 2px;
}

.upgrade-row:hover {
  background: rgba(123, 104, 238, 0.06);
}

.upgrade-row.can-afford {
  border-left-color: var(--accent-purple);
  background: rgba(123, 104, 238, 0.06);
  box-shadow: inset 0 0 20px rgba(123, 104, 238, 0.03);
}

.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: 6px;
  border: 1.5px solid rgba(200, 170, 255, 0.45);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(160, 120, 255, 0.2),
    0 0 24px rgba(120, 80, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.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: #b8a9f0;
}

.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: #ffd700;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.upgrade-buy {
  border-color: rgba(123, 104, 238, 0.3);
}

.upgrade-buy:not(.disabled):hover {
  border-color: var(--accent-purple);
  box-shadow: 0 0 15px rgba(123, 104, 238, 0.2);
}

/* ============================================================
   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; }
  .pet-mult-badge { font-size: 0.58rem; padding: 2px 6px; }
  .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(150, 210, 255, 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(100, 170, 255, 0.4);
  box-shadow: 0 0 16px rgba(100, 170, 255, 0.1), inset 0 0 8px rgba(100, 170, 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(100, 170, 255, 0.1);
  border: 1px solid rgba(100, 170, 255, 0.2);
  border-radius: 24px;
  color: rgba(180, 215, 255, 0.7);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.arcade-confirm:hover {
  background: rgba(100, 170, 255, 0.18);
  border-color: rgba(100, 170, 255, 0.35);
  color: rgba(200, 225, 255, 0.9);
}

.arcade-confirm:active {
  transform: scale(0.97);
}

/* --- 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(100, 170, 255, 0.06);
  border-bottom-color: transparent;
}

.leaderboard-entry.is-you .leaderboard-initials {
  color: rgba(120, 185, 255, 0.9);
}

.leaderboard-entry.is-you .leaderboard-rank {
  color: rgba(120, 185, 255, 0.6);
}

.leaderboard-entry.is-you .leaderboard-time {
  color: rgba(120, 185, 255, 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(100, 170, 255, 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(120, 185, 255, 0.45);
  cursor: pointer;
  padding: 0.6rem 1rem;
  user-select: none;
  list-style: none;
  border: 1px solid rgba(120, 185, 255, 0.15);
  border-radius: 6px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  background: rgba(120, 185, 255, 0.04);
}

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

.peek-leaderboard[open] .peek-leaderboard-toggle {
  color: rgba(120, 185, 255, 0.7);
  border-color: rgba(120, 185, 255, 0.25);
  background: rgba(120, 185, 255, 0.07);
}

.peek-leaderboard-toggle:hover {
  color: rgba(120, 185, 255, 0.7);
  border-color: rgba(120, 185, 255, 0.25);
  background: rgba(120, 185, 255, 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 glow pulse */
.generator-row.can-afford {
  border-left-color: rgba(0, 210, 255, 0.4);
  box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.03);
}
.upgrade-row.can-afford {
  border-left-color: rgba(123, 104, 238, 0.5);
  box-shadow: inset 0 0 30px rgba(123, 104, 238, 0.03);
}

/* 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(255, 215, 0, 0.04) 45%,
    rgba(255, 215, 0, 0.08) 50%,
    rgba(255, 215, 0, 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(0, 210, 255, 0.15),
    transparent,
    rgba(0, 210, 255, 0.08),
    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(100,200,255,0.6);
  background: rgba(100,200,255,0.08);
  box-shadow: 0 0 20px rgba(100,200,255,0.15);
  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 {
  background: #0d1526;
  border: 1px solid rgba(100, 170, 255, 0.15);
  border-radius: 6px;
  padding: 28px 32px 24px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.release-modal-date {
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(100, 170, 255, 0.5);
  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(200, 220, 255, 0.65);
  font-family: ui-monospace, 'Cascadia Code', Menlo, monospace;
}

.release-modal-bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(100, 170, 255, 0.4);
}

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

.release-modal-all {
  font-size: 11px;
  color: rgba(100, 170, 255, 0.35);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.release-modal-all:hover { color: rgba(100, 170, 255, 0.65); }

.release-modal-dismiss {
  background: transparent;
  border: 1px solid rgba(100, 170, 255, 0.2);
  color: rgba(200, 220, 255, 0.6);
  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(100, 170, 255, 0.5);
  color: rgba(200, 220, 255, 0.9);
}

/* --- 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 {
  max-width: 360px;
  width: 90%;
  text-align: center;
  padding: 2.5rem 2rem;
  background: rgba(10, 14, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  animation: letgo-rise 0.35s ease forwards;
}

@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(100, 170, 255, 0.1);
  border: 1px solid rgba(100, 170, 255, 0.3);
  color: rgba(140, 200, 255, 0.9);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.letgo-confirm:hover {
  background: rgba(100, 170, 255, 0.18);
  border-color: rgba(100, 170, 255, 0.5);
  color: rgba(180, 220, 255, 1);
}

.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(120, 220, 255, 0.5) !important;
  box-shadow: 0 0 24px rgba(120, 220, 255, 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(120, 220, 255, 0.85);
  text-decoration: none;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(120, 220, 255, 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(120, 220, 255, 0.15);
  padding: 0.2em 0.5em;
  border-radius: 4px;
  font-family: monospace;
  letter-spacing: 0.08em;
  color: rgba(120, 220, 255, 1);
  border: 1px solid rgba(120, 220, 255, 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(100, 170, 255, 0.5);
  line-height: 0.7;
  animation: scroll-bob 2s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(100, 170, 255, 0.3), 0 0 24px rgba(100, 170, 255, 0.15);
}

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

  * {
    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 {
  max-width: 380px;
  width: 100%;
  background: rgba(10, 14, 23, 0.97);
  border: 1px solid rgba(0, 210, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow:
    0 0 60px rgba(0, 210, 255, 0.06),
    0 0 120px rgba(0, 0, 0, 0.4);
}

.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(0, 210, 255, 0.4));
  animation: bounce 2.5s ease-in-out infinite;
}

.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;
  text-shadow: 0 0 20px rgba(0, 210, 255, 0.15);
}

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

.welcome-body p {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(200, 214, 229, 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: #b8a9f0;
  font-weight: 500;
}

.welcome-btn {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--text-white);
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.25);
  padding: 12px 40px;
  border-radius: 100px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-med),
    transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.welcome-btn:hover {
  background: rgba(0, 210, 255, 0.14);
  border-color: rgba(0, 210, 255, 0.45);
  box-shadow: 0 0 30px rgba(0, 210, 255, 0.15);
  transform: scale(1.04);
}

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

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

/* 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(0, 210, 255, 0.7))
         drop-shadow(0 0 28px rgba(0, 210, 255, 0.4))
         drop-shadow(0 0 48px rgba(123, 104, 238, 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(0, 210, 255, 0.25));
  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(0, 210, 255, 0.25));
  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;
}

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

/* Mood indicators */
.pet-low-mood .pet-vis { filter: brightness(0.7) saturate(0.6); }
.pet-starving .pet-vis { animation: sprite-sad 4s ease-in-out infinite; }

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

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

/* ── Contextual menu (appears on pet click) ─────────────── */

.pm {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: pm-in 0.2s ease-out;
  z-index: 20;
}

.pm-fading { animation: pm-out 0.3s ease-in forwards; }

@keyframes pm-in  { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes pm-out { to { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); } }

.pm-stats {
  display: flex;
  gap: 8px;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 8px;
  padding: 3px 10px;
}

.pm-s {
  font-size: 0.62rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
  opacity: 0.8;
}

.pet-mult-label { color: var(--afford); }

.pm-acts {
  display: flex;
  gap: 6px;
}

.pm-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 210, 255, 0.25);
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(8px);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.pm-btn:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.12);
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.2);
}

.pm-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.15));
}

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

.pm-feed:hover { border-color: var(--afford); background: rgba(72, 187, 120, 0.12); box-shadow: 0 0 12px rgba(72, 187, 120, 0.2); }
.pm-play:hover { border-color: var(--accent-purple); background: rgba(123, 104, 238, 0.12); box-shadow: 0 0 12px rgba(123, 104, 238, 0.2); }
.pm-ability:hover { border-color: rgba(255, 215, 0, 0.6); background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 12px rgba(255, 215, 0, 0.2); }
.pm-cooldown { opacity: 0.3; cursor: not-allowed; }
.pm-cooldown:hover { transform: none; box-shadow: 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(72, 187, 120, 0.4); }
.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; }
.pf-death   { color: rgba(150, 200, 255, 0.7); font-size: 0.72rem; 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);
}

.sparkle-drop {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.4));
}

.puddle-sprite {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.4));
  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); }
}

.puddle-danger .sparkle-drop {
  filter: drop-shadow(0 0 6px rgba(255, 100, 50, 0.5));
  animation: sparkle-danger 1.2s ease-in-out infinite;
}

.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(0, 210, 255, 0.06);
  border: 1px solid rgba(0, 210, 255, 0.35);
  color: var(--accent-cyan);
  border-radius: var(--radius-md);
  padding: 8px 26px;
  font-size: 0.85rem;
  cursor: pointer;
  letter-spacing: 0.07em;
  transition: all 0.2s ease;
}

.shimmer-btn:hover {
  background: rgba(0, 210, 255, 0.12);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.2);
  transform: scale(1.06);
}

/* ── Slot info — simple text + summon button ────────────── */

.slot-info {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  white-space: nowrap;
}

.slot-text {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--muted);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

.slot-summon-btn {
  font-size: 0.58rem;
  font-family: var(--font-mono);
  color: var(--accent-purple);
  background: transparent;
  border: 1px solid rgba(123, 104, 238, 0.25);
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.15s ease;
}

.slot-summon-btn:hover {
  border-color: var(--accent-purple);
  background: rgba(123, 104, 238, 0.08);
}

.summon-menu {
  position: absolute;
  bottom: 40px;
  right: 0;
  display: flex;
  gap: 6px;
  background: rgba(10, 14, 23, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(123, 104, 238, 0.2);
  border-radius: 10px;
  padding: 8px;
  animation: pm-in 0.2s ease-out;
  z-index: 25;
}

.summon-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--text-primary);
  transition: all 0.15s ease;
}

.summon-type-btn:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 210, 255, 0.08);
}

.summon-type-cost {
  font-size: 0.55rem;
  font-family: var(--font-mono);
  color: var(--muted);
}

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

.pet-speech {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1e2e;
  border: 2px solid rgba(0, 210, 255, 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(0, 210, 255, 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 #1a1e2e;
  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; }
}

/* ── Synergy label ─────────────────────────────────────── */

.synergy-label {
  font-size: 0.52rem;
  font-family: var(--font-mono);
  color: var(--accent-purple);
  opacity: 0.7;
  letter-spacing: 0.03em;
}

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

/* ── Pet multiplier header badge ─────────────────────────── */

.pet-mult-badge {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--afford);
  background: rgba(72, 187, 120, 0.08);
  border: 1px solid rgba(72, 187, 120, 0.2);
  border-radius: 100px;
  padding: 4px 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Toast variants ─────────────────────────────────────── */

.pet-died-toast .achievement-toast-label { color: rgba(150, 200, 255, 0.7); }

/* ============================================================
   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 (iOS-only weather event)
   ═══════════════════════════════════════════════════════ */

.flood-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 10, 30, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.flood-overlay.flood-active {
  animation: flood-bg-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes flood-bg-pulse {
  0%   { background: rgba(0, 10, 60, 0.85); }
  100% { background: rgba(30, 0, 0, 0.85); }
}

.flood-content {
  text-align: center;
  color: white;
  max-width: 320px;
  padding: 2rem;
}

.flood-emoji {
  font-size: 4rem;
  animation: flood-emoji-bounce 0.6s ease-in-out infinite;
}

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

.flood-message {
  font-size: 1.6rem;
  font-weight: bold;
  color: #ff4444;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0.5rem 0 0.25rem;
  text-shadow: 0 0 20px rgba(255, 68, 68, 0.6);
}

.flood-subtitle {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1.5rem;
}

.flood-progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.flood-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4444, #ff8800, #44ff44);
  border-radius: 6px;
  transition: width 0.1s ease-out;
}

.flood-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: monospace;
}

.flood-timer {
  color: #ff6666;
  font-weight: bold;
}

.flood-result-message {
  margin-top: 1.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  min-height: 2rem;
}

.flood-result-message.flood-success {
  color: #44ff44;
  text-shadow: 0 0 15px rgba(68, 255, 68, 0.5);
  animation: flood-success-flash 0.3s ease;
}

.flood-result-message.flood-failure {
  color: #ff4444;
  text-shadow: 0 0 15px rgba(255, 68, 68, 0.5);
}

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

.flood-overlay.flood-victory {
  animation: flood-victory-bg 0.5s ease;
}

@keyframes flood-victory-bg {
  0%   { background: rgba(0, 255, 0, 0.3); }
  100% { background: rgba(0, 10, 30, 0.85); }
}

.flood-overlay.flood-defeat {
  animation: flood-defeat-bg 0.5s ease;
}

@keyframes flood-defeat-bg {
  0%   { background: rgba(255, 0, 0, 0.3); }
  100% { background: rgba(0, 10, 30, 0.85); }
}

/* 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 (iOS-only)
   ============================================================ */

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

.overclock-btn {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 200, 0, 0.3);
  background: rgba(255, 200, 0, 0.08);
  color: #ffd700;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.2s ease;
}

.overclock-btn.overclock-ready:hover {
  background: rgba(255, 200, 0, 0.15);
  border-color: rgba(255, 200, 0, 0.5);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.2);
}

.overclock-btn.overclock-cooldown {
  color: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  cursor: not-allowed;
}

.overclock-status {
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* 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: #111;
  background: #ffd700;
  border-radius: 0.25rem;
  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 4px rgba(255, 215, 0, 0.3); }
  50%      { box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); }
}

/* Glow border on the active overclocked generator row */
.generator-row.overclock-active {
  border-color: rgba(255, 215, 0, 0.35) !important;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.12), inset 0 0 8px rgba(255, 215, 0, 0.04);
  background: rgba(255, 215, 0, 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(255, 200, 0, 0.08);
  border-color: rgba(255, 200, 0, 0.25);
}

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

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

/* ── Sell button styles (may be visible with Salvage enchantment) ── */
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); }
}

/* ═══════════════════════════════════════════════════════
   EARLY GAME VISUAL JUICE (iOS-only)
   ═══════════════════════════════════════════════════════ */

/* (a) Tap Ripple — concentric circles from tap point */
.ios-ripple-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 1.5px solid rgba(0, 210, 255, 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; }

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

/* (b) Number Pop — already exists via .drop-floater, but enhance for iOS big hits */
.drop-floater.big-hit {
  font-size: 1.6rem;
  color: #ffd700;
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.7), 0 0 40px rgba(255, 215, 0, 0.3);
  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(100, 170, 255, 0.5), 0 0 60px rgba(100, 170, 255, 0.25);
}
@keyframes sky-changes-anim {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}