/* ===========================================================
   Wen Miner — space-cat clicker theme v1.1
   =========================================================== */

:root {
  --bg-0: #0a0720;
  --bg-1: #15103a;
  --bg-2: #1f1854;
  --panel: rgba(26, 22, 64, 0.72);
  --panel-edge: rgba(255, 210, 63, 0.22);
  --panel-edge-strong: rgba(255, 210, 63, 0.55);

  --wen-yellow: #ffce4a;
  --wen-yellow-soft: #ffe48a;
  --wen-gold: #ffd23f;
  --wen-orange: #ff9b3d;
  --wen-pink: #ff5d8f;
  --wen-pink-soft: #ff9bba;
  --wen-purple: #9a4dff;
  --wen-mint: #7ee0c2;
  --wen-cream: #fff5e0;

  --text: #fff5e0;
  --text-dim: #c8b8e0;
  --text-faint: #7a6dad;

  --success: #7ee0c2;
  --danger: #ff5d8f;

  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-hard: 0 4px 0 rgba(0, 0, 0, 0.4);

  --radius: 14px;
  --radius-sm: 10px;
  --transition: 180ms cubic-bezier(.4,.0,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text);
  /* Body background shifts hue subtly by time of day via --tod-hue */
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, hsla(var(--tod-hue, 50deg), 90%, 60%, 0.08), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 100%, rgba(154, 77, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #0a0720 0%, #15103a 50%, #0a0720 100%);
  background-attachment: fixed;
  /* Whole app fits in the viewport — no page-level scroll. Inner panels
     handle their own overflow. Mobile / narrow viewports re-enable scroll. */
  overflow: hidden;
  transition: background 4s ease;
  /* Mobile: disable double-tap-to-zoom across the app. Buttons fire as taps
     without the 300ms zoom-detection delay. Pinch zoom still works. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}


/* Use dynamic viewport height (dvh) when available — accounts for the
   iOS Safari address bar showing/hiding. Falls back to 100vh on older
   browsers via the cascade. */
body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* The screenShake wrapper is the actual flex column: header, timeline,
   game, mission/footer — fills exactly the viewport. */
#screenShake {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  height: 100vh; height: 100dvh;
}
header.topbar { flex: 0 0 auto; }
nav.era-timeline { flex: 0 0 auto; }
main.game { flex: 1; min-height: 0; }
footer.footer { flex: 0 0 auto; }
#screenShake.shake { animation: shake 220ms ease-out; }
@keyframes shake {
  0% { transform: translate(0,0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(3px, -3px); }
  60% { transform: translate(-2px, 4px); }
  80% { transform: translate(3px, -1px); }
  100% { transform: translate(0,0); }
}

/* stars */
#stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 80% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 80%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 35%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 60%, #ffd23f 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 70%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 50%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 88%, #ffd23f 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 50%, #fff 50%, transparent 51%);
  background-size: 1000px 1000px;
  opacity: 0.7;
  animation: starsDrift 60s linear infinite;
}
@keyframes starsDrift { from { background-position: 0 0; } to { background-position: -300px 200px; } }

/* ============================ TOP BAR =============================== */
.topbar {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(10, 7, 32, 0.92), rgba(10, 7, 32, 0.6));
  border-bottom: 1px solid var(--panel-edge);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand h1 {
  margin: 0;
  font-family: 'Bungee', 'Press Start 2P', monospace;
  font-size: 24px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff2a8 0%, var(--wen-gold) 50%, #c98a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.brand .tagline {
  margin: 2px 0 0;
  color: var(--wen-pink-soft);
  font-size: 12px;
  letter-spacing: 0.4px;
}
.cat-name-btn {
  background: none;
  border: none;
  color: var(--wen-gold);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  border-bottom: 1px dashed rgba(255, 210, 63, 0.4);
  transition: color 180ms ease, border-color 180ms ease;
}
.cat-name-btn:hover {
  color: var(--wen-pink);
  border-bottom-color: var(--wen-pink);
}
.cat-name-btn:focus-visible {
  outline: 2px solid var(--wen-gold);
  outline-offset: 2px;
}

.coin-emblem {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff2a8, var(--wen-gold) 55%, #c79a1a 100%);
  display: grid;
  place-items: center;
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: #2a1e57;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25), 0 0 20px rgba(255, 210, 63, 0.5);
  border: 2px solid #b9881a;
  animation: coinFloat 3s ease-in-out infinite;
}
.coin-emblem span { transform: translateY(-1px); }
@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(8deg); }
}

.counters { display: flex; gap: 14px; align-items: stretch; }
.counter {
  background: rgba(26, 22, 64, 0.6);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  min-width: 130px;
  text-align: right;
}
.counter-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-faint);
}
.counter-value {
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: var(--wen-gold);
  margin-top: 2px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  line-height: 1;
}
.counter-value.pop { animation: countPop 320ms cubic-bezier(0.2, 0.8, 0.3, 1.4); }
@keyframes countPop {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,210,63,0)); }
  35%  { transform: scale(1.26); color: var(--wen-pink); filter: drop-shadow(0 0 8px rgba(255,93,143,0.8)); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,210,63,0)); }
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  background: rgba(26, 22, 64, 0.6);
  border: 1px solid var(--panel-edge);
  color: var(--text);
  font-size: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: var(--transition);
}
.icon-btn:hover {
  background: rgba(255, 210, 63, 0.15);
  border-color: var(--panel-edge-strong);
  transform: translateY(-1px);
}
.icon-btn.danger:hover { background: rgba(255, 93, 143, 0.18); color: var(--wen-pink); }
.icon-btn.active {
  background: rgba(255, 210, 63, 0.18);
  border-color: var(--wen-gold);
  color: var(--wen-gold);
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.35);
}

.save-indicator {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.6;
  transition: var(--transition);
}
.save-indicator.flash {
  color: var(--wen-mint);
  opacity: 1;
  animation: save-pulse 700ms ease-out;
}
@keyframes save-pulse {
  0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(20, 241, 149, 0); }
  35%  { transform: scale(1.08); text-shadow: 0 0 10px rgba(20, 241, 149, 0.6); }
  100% { transform: scale(1);    text-shadow: 0 0 0 rgba(20, 241, 149, 0); }
}

/* ============================ ERA TIMELINE ========================== */
.era-timeline {
  position: relative;
  z-index: 5;
  flex-shrink: 0;       /* don't let #screenShake (min-height:100vh) squeeze this strip to 0 */
  display: flex;
  gap: 4px;
  padding: 8px 18px;
  background: rgba(10, 7, 32, 0.85);
  border-bottom: 1px solid var(--panel-edge);
  overflow-x: auto;
  scrollbar-width: none;
}
.era-timeline::-webkit-scrollbar { display: none; }
.era-node {
  position: relative;
  flex: 1;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(26, 22, 64, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  cursor: not-allowed;
  font-family: inherit;
  color: var(--text-faint);
  opacity: 0.45;
  filter: grayscale(0.8);
  transition: var(--transition);
}
.era-node.visitable {
  opacity: 0.85;
  filter: none;
  cursor: pointer;
  border-color: var(--panel-edge);
}
.era-node.visitable:hover {
  transform: translateY(-2px);
  background: rgba(255, 210, 63, 0.12);
  border-color: var(--panel-edge-strong);
  opacity: 1;
}
.era-node.reached {
  opacity: 1;
  filter: none;
}
.era-node.current {
  /* When --era-tint is set inline (per-era color), use it for the glow.
     Falls back to gold for the default appearance. */
  background: linear-gradient(135deg, color-mix(in srgb, var(--era-tint, #ffd23f) 35%, transparent), color-mix(in srgb, var(--era-tint, #ff8b3d) 18%, transparent));
  border-color: var(--era-tint, var(--wen-gold));
  box-shadow: 0 0 14px color-mix(in srgb, var(--era-tint, #ffd23f) 40%, transparent);
}
.era-node .era-emoji { font-size: 18px; line-height: 1; }
.era-node .era-date {
  font-size: 8px;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.4px;
  color: var(--text-dim);
}
.era-node.current .era-date { color: var(--wen-gold); }

/* ============================ CLICK-POWER POPOVER =================== */
.counter-clickable {
  position: relative;
  cursor: help;
}
.counter-clickable:hover { background: rgba(255, 210, 63, 0.06); border-color: var(--panel-edge-strong); }
.click-power-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: linear-gradient(180deg, #15103a 0%, #0a0720 100%);
  border: 2px solid var(--wen-gold);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  box-shadow: var(--shadow-soft), 0 0 18px rgba(255, 210, 63, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: var(--transition);
  z-index: 100;
  text-align: left;
  font-family: 'Fredoka', sans-serif;
}
.click-power-pop.shown { opacity: 1; transform: translateY(0); }
.cpp-title {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  color: var(--wen-gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--panel-edge);
}
.cpp-section {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--wen-pink-soft);
  margin: 8px 0 4px;
  font-family: 'Bungee', sans-serif;
}
.cpp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 2px 0;
  color: var(--text);
}
.cpp-row span { color: var(--text-dim); }
.cpp-row b {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  color: var(--wen-gold);
}
.cpp-row.cpp-crit b { color: var(--wen-pink); }
.cpp-total {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--panel-edge);
  font-family: 'Bungee', sans-serif;
  font-size: 14px;
  color: var(--wen-mint);
  text-align: right;
  letter-spacing: 0.5px;
}

/* ============================ RARITY / SETS ========================= */
.shop-item.rarity-common    { border-left: 4px solid #6a6a7a; }
.shop-item.rarity-uncommon  { border-left: 4px solid #5fa14a; }
.shop-item.rarity-rare      { border-left: 4px solid #4cc3ff; }
.shop-item.rarity-epic      { border-left: 4px solid #9a4dff; }
.shop-item.rarity-legendary { border-left: 4px solid var(--wen-gold); box-shadow: 0 0 10px rgba(255, 210, 63, 0.18); }
.shop-icon { position: relative; }
.rarity-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #6a6a7a;
  border: 1.5px solid var(--bg-1);
}
.rarity-common  .rarity-dot { background: #6a6a7a; }
.rarity-uncommon .rarity-dot { background: #5fa14a; }
.rarity-rare    .rarity-dot { background: #4cc3ff; }
.rarity-epic    .rarity-dot { background: #9a4dff; }
.rarity-legendary .rarity-dot { background: var(--wen-gold); box-shadow: 0 0 6px var(--wen-gold); }
.rarity-label {
  font-family: 'Bungee', sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  opacity: 0.7;
}
.rarity-common .rarity-label { color: #8a8a9a; }
.rarity-uncommon .rarity-label { color: #7fc35a; }
.rarity-rare .rarity-label { color: #6cd3ff; }
.rarity-epic .rarity-label { color: #b87bff; }
.rarity-legendary .rarity-label { color: var(--wen-gold); }

.shop-set-hints {
  display: flex; gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.set-hint {
  font-size: 9px;
  font-family: 'Bungee', sans-serif;
  background: rgba(255, 210, 63, 0.12);
  color: var(--wen-gold);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.4px;
}

.gear-sets-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  padding: 8px;
  background: rgba(154, 77, 255, 0.08);
  border: 1px solid rgba(154, 77, 255, 0.25);
  border-radius: var(--radius-sm);
}
.gear-set-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 3px 6px;
  border-radius: 4px;
}
.gear-set-chip.complete {
  background: linear-gradient(90deg, rgba(255, 210, 63, 0.22), transparent);
  color: var(--text);
}
.gear-set-name { flex: 1; font-weight: 700; }
.gear-set-progress {
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  color: var(--text-faint);
}
.gear-set-chip.complete .gear-set-progress { color: var(--wen-mint); }
.gear-set-bonus {
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  color: var(--wen-gold);
}

/* EQUIPPED SUMMARY PANEL */
.gear-equipped {
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.08) 0%, rgba(0,0,0,0.35) 100%);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.gear-equipped-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.gear-equipped-label { color: var(--wen-gold); }
.gear-equipped-count { color: var(--text-dim); }
.gear-equipped-mult {
  margin-left: auto;
  color: var(--wen-mint);
  font-size: 11px;
}
.gear-slot-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.gear-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  border-radius: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.05);
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.gear-slot:hover { transform: translateY(-2px); }
.gear-slot.empty { opacity: 0.4; border-style: dashed; }
.gear-slot.equipped { border-color: rgba(255,255,255,0.15); }
.gear-slot.equipped.rarity-common    { box-shadow: 0 0 0 1px #6a6a7a inset; }
.gear-slot.equipped.rarity-uncommon  { box-shadow: 0 0 0 1px #5fa14a inset, 0 0 6px rgba(95,161,74,0.3); }
.gear-slot.equipped.rarity-rare      { box-shadow: 0 0 0 1px #4cc3ff inset, 0 0 8px rgba(76,195,255,0.4); }
.gear-slot.equipped.rarity-epic      { box-shadow: 0 0 0 1px #9a4dff inset, 0 0 10px rgba(154,77,255,0.5); }
.gear-slot.equipped.rarity-legendary { box-shadow: 0 0 0 1.5px var(--wen-gold) inset, 0 0 14px rgba(255,210,63,0.55); }
.gear-slot-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.gear-slot-icon.empty { filter: grayscale(1) brightness(0.6); }
.gear-slot-tag {
  font-family: 'Bungee', sans-serif;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.gear-slot.just-equipped {
  animation: slotEquip 700ms cubic-bezier(0.2, 0.7, 0.3, 1.3);
}
@keyframes slotEquip {
  0%   { transform: scale(0.4); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.gear-slot.just-equipped::after {
  content: '✓';
  position: absolute;
  top: -6px; right: -4px;
  background: var(--wen-mint);
  color: #0a3025;
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 8px rgba(20,241,149,0.7);
  animation: slotCheck 1.4s ease-out forwards;
}
@keyframes slotCheck {
  0%   { opacity: 0; transform: scale(0); }
  20%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* BULK BUY BUTTON */
.gear-bulk-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--wen-purple) 0%, #5b2ab3 100%);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  margin-bottom: 12px;
  transition: var(--transition);
  text-align: left;
}
.gear-bulk-btn.ready {
  background: linear-gradient(135deg, #0a7a55 0%, #14f195 100%);
  color: #0a3025;
  border-color: var(--wen-mint);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 22px rgba(20,241,149,0.35);
  animation: bulkPulse 2.4s ease-in-out infinite;
}
.gear-bulk-btn.empty {
  background: rgba(40, 30, 80, 0.45);
  color: var(--text-faint);
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.7;
}
.gear-bulk-btn:disabled { transform: none; }
.gear-bulk-btn.ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 36px rgba(20,241,149,0.55);
  filter: brightness(1.08);
}
.gear-bulk-icon { font-size: 22px; line-height: 1; }
.gear-bulk-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.gear-bulk-line1 { font-size: 12px; letter-spacing: 1.2px; }
.gear-bulk-line2 { font-size: 10px; letter-spacing: 0.8px; opacity: 0.85; font-family: 'Fredoka', sans-serif; font-weight: 600; margin-top: 2px; }
@keyframes bulkPulse {
  0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 22px rgba(20,241,149,0.35); }
  50%      { box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 36px rgba(20,241,149,0.6); }
}

/* ============================ HELPERS TAB =========================== */
.helpers-header {
  background: linear-gradient(180deg, rgba(20, 241, 149, 0.1) 0%, rgba(0,0,0,0.35) 100%);
  border: 1px solid rgba(20, 241, 149, 0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.helpers-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(20,241,149,0.08) 50%, transparent 60%);
  animation: helpersHeaderShine 3.6s ease-in-out infinite;
}
@keyframes helpersHeaderShine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.helpers-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.helpers-header-label {
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--wen-mint);
}
.helpers-header-cps {
  font-family: 'Bungee', sans-serif;
  font-size: 20px;
  color: var(--wen-mint);
  text-shadow: 0 0 12px rgba(20, 241, 149, 0.4);
}
.helpers-header-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.3px;
  position: relative;
}

.helper-card {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  transition: var(--transition);
}
.helper-card.affordable {
  border-color: var(--wen-mint);
  box-shadow: 0 0 8px rgba(126, 224, 194, 0.18);
}
.helper-card.owned { background: rgba(20, 241, 149, 0.04); }
.helper-card:hover {
  background: rgba(255, 210, 63, 0.04);
  border-color: var(--panel-edge-strong);
  transform: translateY(-1px);
}
.helper-card.affordable:hover {
  box-shadow: 0 4px 12px rgba(126, 224, 194, 0.25);
}
.helper-icon-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.helper-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c2266, #1a1640);
  border: 1px solid var(--panel-edge);
  display: grid; place-items: center;
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.helper-card.owned .helper-icon {
  border-color: var(--wen-mint);
  box-shadow: inset 0 0 8px rgba(20,241,149,0.18);
}
.helper-owned-pill {
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--wen-mint);
  background: rgba(20, 241, 149, 0.15);
  border: 1px solid rgba(20, 241, 149, 0.4);
  border-radius: 10px;
  padding: 2px 8px;
  min-width: 32px;
  text-align: center;
}
.helper-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.helper-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.helper-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.helper-cps {
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--wen-mint);
  white-space: nowrap;
}
.helper-contribution-text {
  font-family: 'Bungee', sans-serif;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--wen-mint);
  margin: 2px 0;
  white-space: nowrap;
}
.helper-contribution-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.helper-contribution-row .helper-contribution-text { flex: 1; margin: 2px 0; }
.helper-share-pct {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--wen-gold, #ffd23f);
  background: rgba(255, 210, 63, 0.12);
  border: 1px solid rgba(255, 210, 63, 0.3);
  padding: 1px 5px;
  border-radius: 6px;
  cursor: help;
}
.helper-share-bar {
  height: 3px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  overflow: hidden;
  margin: 3px 0 4px;
}
.helper-share-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wen-mint, #14f195), var(--wen-gold, #ffd23f));
  border-radius: 2px;
  transition: width 280ms ease;
}
.helper-tier-hint {
  font-size: 9px;
  color: rgba(243, 238, 232, 0.45);
  letter-spacing: 0.04em;
  margin: 1px 0 4px;
  font-style: italic;
}
.helper-desc {
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.3;
}
.helper-buy-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.helper-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--panel-edge);
  background: rgba(0,0,0,0.4);
  color: var(--text-faint);
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: var(--transition);
}
.helper-buy.can {
  border-color: var(--wen-mint);
  background: linear-gradient(180deg, rgba(20, 241, 149, 0.18), rgba(20, 241, 149, 0.06));
  color: var(--wen-mint);
}
.helper-buy.can:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(20, 241, 149, 0.3), rgba(20, 241, 149, 0.12));
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 12px rgba(20, 241, 149, 0.35);
}
.helper-buy.cant, .helper-buy:disabled {
  cursor: not-allowed;
  opacity: 0.35;
  pointer-events: none;
}
.helper-buy.max {
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.22), rgba(255, 210, 63, 0.08));
  border-color: var(--wen-gold);
  color: var(--wen-gold);
}
.helper-buy.max:hover {
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 14px rgba(255, 210, 63, 0.45);
}
.helper-buy-x {
  font-size: 11px;
  letter-spacing: 0.6px;
}
.helper-buy-cost {
  font-size: 9px;
  letter-spacing: 0.4px;
  opacity: 0.85;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

/* GEAR DELTA INDICATOR */
.gear-delta-row { margin-top: 3px; }
.gear-delta {
  display: inline-block;
  font-family: 'Bungee', sans-serif;
  font-size: 9px;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 3px;
}
.gear-delta.up   { background: rgba(20,241,149,0.15); color: var(--wen-mint); border: 1px solid rgba(20,241,149,0.35); }
.gear-delta.side { background: rgba(255,210,63,0.12); color: var(--wen-gold); border: 1px solid rgba(255,210,63,0.3); }
.gear-delta.down { background: rgba(255,93,143,0.12); color: var(--wen-pink); border: 1px solid rgba(255,93,143,0.3); opacity: 0.7; }

/* UPGRADE highlight on affordable+upgrade cards */
.shop-item.affordable.upgrade {
  border-color: var(--wen-mint);
  box-shadow: 0 0 14px rgba(126, 224, 194, 0.3), 0 0 0 1px var(--wen-mint) inset;
  animation: upgradeReady 2.6s ease-in-out infinite;
}
@keyframes upgradeReady {
  0%, 100% { box-shadow: 0 0 14px rgba(126, 224, 194, 0.3), 0 0 0 1px var(--wen-mint) inset; }
  50%      { box-shadow: 0 0 22px rgba(126, 224, 194, 0.5), 0 0 0 1px var(--wen-mint) inset; }
}

/* ============================ EASTER EGG CURSOR ===================== */
/* Hover effect uses filter only — using transform would override the SVG element's
   own transform="translate(...) rotate(...)" attribute and snap it to the wrong spot. */
[data-egg] {
  cursor: pointer;
  pointer-events: auto;
  transition: filter 220ms ease;
}
[data-egg]:hover {
  filter: drop-shadow(0 0 10px var(--wen-gold)) drop-shadow(0 0 18px var(--wen-pink)) brightness(1.18);
}

/* ============================ MISSION MILESTONES ==================== */
.quest-progress { position: relative; }
.quest-progress::before,
.quest-progress::after,
.quest-progress .milestone {
  content: '';
  position: absolute;
  top: -2px;
  width: 1.5px;
  height: 12px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 1;
}
.quest-progress::before { left: 25%; }
.quest-progress::after  { left: 75%; }
.quest-progress > .milestone-50 {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 2px;
  height: 12px;
  background: rgba(255, 210, 63, 0.5);
  z-index: 1;
}

/* ============================ SCENE FADE TRANSITION ================= */
.cat-stage .scene-layer { transition: opacity 380ms ease-out; }
.cat-stage.scene-transitioning .scene-layer { opacity: 0.2; }

/* ============================ LAYOUT ================================= */
.game {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: 18px;
  padding: 18px;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel.center { align-items: stretch; min-height: 0; }

/* Left + right panels: full height of the grid row, scroll if content exceeds.
   Mobile/single-column layout overrides this below. */
.panel.left {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  min-height: 0;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--wen-gold) transparent;
}
.panel.left::-webkit-scrollbar { width: 6px; }
.panel.left::-webkit-scrollbar-thumb {
  background: var(--wen-gold);
  border-radius: 3px;
}
.panel.left::-webkit-scrollbar-track { background: transparent; }
/* Add a subtle bottom shadow so users see there's more below when scrolled */
.panel.left::after { content: ''; flex: 0 0 4px; }

.card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}
.card h2 {
  margin: 0 0 10px;
  font-family: 'Bungee', sans-serif;
  font-size: 13px;
  color: var(--wen-pink-soft);
  letter-spacing: 1.4px;
}

/* ============================ LOCATION =============================== */
.location-card { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.location-art {
  width: 64px; height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c2266, #1a1640);
  border: 1px solid var(--panel-edge-strong);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.location-art::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 60%, var(--loc-color, var(--wen-gold)) 0%, transparent 70%);
  opacity: 0.55;
}
.location-art::after {
  content: var(--loc-emoji, '"🛋️"');
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: location-art-bob 4.6s ease-in-out infinite;
}
@keyframes location-art-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-1.5deg); }
}
/* Subtle glow halo that drifts independently — adds depth without being noisy */
.location-art::before {
  animation: location-glow 7s ease-in-out infinite;
}
@keyframes location-glow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.70; transform: scale(1.08); }
}
.location-name { font-weight: 700; font-size: 17px; color: var(--text); }
.location-mult { font-size: 12px; color: var(--wen-gold); margin-top: 2px; }

/* ============================ BIG BUTTON ============================= */
.big-btn {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--wen-pink), #c93b6b);
  color: white; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-hard);
  transition: var(--transition);
}
.big-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.4); }
.big-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.big-btn:disabled {
  background: linear-gradient(180deg, #3d3267, #2a2050);
  color: var(--text-faint);
  cursor: not-allowed; box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.travel-controls {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px;
  align-items: stretch;
}
.travel-unlock-bar {
  margin-top: 8px;
  height: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
}
.travel-unlock-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wen-mint) 0%, var(--wen-gold) 60%, var(--wen-pink) 100%);
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.5);
  transition: width 400ms ease-out;
  position: relative;
  overflow: hidden;
}
.travel-unlock-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: travelUnlockShine 2.4s ease-in-out infinite;
}
@keyframes travelUnlockShine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}
.travel-arrow {
  background: linear-gradient(180deg, #3a3267, #2a2050);
  color: var(--wen-cream);
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-hard);
  transition: var(--transition);
  display: grid; place-items: center;
}
.travel-arrow:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--wen-purple), #5b2ab3);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0,0,0,0.4);
}
.travel-arrow:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.travel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}

.big-btn.ready { animation: readyPulse 1.4s ease-in-out infinite; }
@keyframes readyPulse {
  0%, 100% { box-shadow: var(--shadow-hard), 0 0 0 0 rgba(255, 93, 143, 0.6); }
  50% { box-shadow: var(--shadow-hard), 0 0 0 8px rgba(255, 93, 143, 0); }
}
.big-btn-sub { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; font-weight: 500; }

/* ============================ STATS ================================== */
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.stats li {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(0,0,0,0.18);
  border-radius: 5px;
  padding: 4px 8px;
  color: var(--text-dim);
}
.stats li span { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.75; }
.stats b { color: var(--wen-cream); font-family: 'Bungee', sans-serif; font-size: 13px; letter-spacing: 0.3px; }
.stats li.stat-rank {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(154, 77, 255, 0.16), rgba(255, 93, 143, 0.12));
  border: 1px solid rgba(154, 77, 255, 0.35);
  cursor: help;
}
.stats li.stat-rank b {
  color: #e6b1ff;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* ============================ ACHIEVEMENTS ========================== */
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.ach-header-label { color: var(--text-dim); }
.ach-header-count { color: var(--wen-gold); font-size: 14px; }
.ach-header-pct {
  display: inline-block;
  font-size: 9px;
  color: var(--text-dim, rgba(243,238,232,0.65));
  font-weight: 400;
  margin-left: 4px;
  vertical-align: middle;
}
.ach-progress {
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ach-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wen-mint), var(--wen-gold));
  box-shadow: 0 0 6px rgba(255,210,63,0.5);
  transition: width 500ms ease-out;
}

.ach-section {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 8px;
}
.ach-section.complete {
  background: rgba(255, 210, 63, 0.06);
  border-color: rgba(255, 210, 63, 0.35);
  box-shadow: 0 0 10px rgba(255, 210, 63, 0.15);
}
.ach-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  user-select: none;
  padding: 4px 4px;
  margin-left: -4px;
  margin-right: -4px;
  border-radius: 6px;
  transition: background 140ms ease;
}
.ach-section-head:hover {
  background: rgba(255, 210, 63, 0.06);
}
.ach-section-icon { font-size: 14px; line-height: 1; }
.ach-section-label { color: var(--text); flex: 1; }
.ach-section.complete .ach-section-label { color: var(--wen-gold); }
.ach-section-count {
  font-size: 9px;
  color: var(--text-dim);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ach-section.complete .ach-section-count { color: var(--wen-mint); }
.ach-section.complete .ach-section-head::after {
  content: '✓';
  color: var(--wen-mint);
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
}
.ach-section-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ach-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-align: left;
}
.ach-section-chev {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: 4px;
  transition: transform 200ms ease;
}
.ach-section.collapsed .ach-section-grid { display: none; }
.ach-section.collapsed .ach-section-head { margin-bottom: 0; }
.ach-section:not(.complete) .ach-section-head:hover { color: var(--wen-gold); }

/* GEAR FILTER PILLS */
.gear-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.gear-filter-pill {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 0.8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--transition);
}
.gear-filter-pill.active {
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.18), rgba(255, 139, 61, 0.1));
  border-color: var(--wen-gold);
  color: var(--wen-gold);
}
.gear-filter-pill:hover:not(.active) {
  color: var(--text);
  border-color: var(--panel-edge-strong);
}
.ach {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center;
  font-size: 18px;
  position: relative;
  opacity: 0.4;
  filter: grayscale(1);
  transition: var(--transition);
  cursor: help;
}
.ach.unlocked {
  opacity: 1;
  filter: none;
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.18), rgba(255, 139, 61, 0.18));
  border-color: var(--panel-edge-strong);
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.3);
}
/* Tier coloring — only applies when unlocked. Bronze (early) → Legendary (endgame).
   Subtle, won't fight with the existing gold glow but adds visual depth. */
.ach.tier-bronze.unlocked    { box-shadow: 0 0 10px rgba(205, 127, 50, 0.35); border-color: rgba(205, 127, 50, 0.5); }
.ach.tier-silver.unlocked    { box-shadow: 0 0 11px rgba(192, 192, 192, 0.4);  border-color: rgba(192, 192, 192, 0.55); }
.ach.tier-gold.unlocked      { box-shadow: 0 0 14px rgba(255, 210, 63, 0.5);   border-color: rgba(255, 210, 63, 0.7); }
/* Just-unlocked — short celebratory pulse on a freshly-cleared achievement */
.ach.just-unlocked {
  animation: ach-just-unlocked 2.4s ease-out;
  z-index: 5;
}
@keyframes ach-just-unlocked {
  0%   { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 210, 63, 0); }
  20%  { transform: scale(1.25); box-shadow: 0 0 24px rgba(255, 210, 63, 0.9); }
  40%  { transform: scale(1.05); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1);    box-shadow: 0 0 0 rgba(255, 210, 63, 0); }
}

.ach.tier-legendary.unlocked {
  box-shadow: 0 0 16px rgba(154, 77, 255, 0.55);
  border-color: rgba(154, 77, 255, 0.7);
  background: linear-gradient(135deg, rgba(154, 77, 255, 0.22), rgba(255, 93, 143, 0.18));
  animation: ach-legendary-glow 2.4s ease-in-out infinite;
}
@keyframes ach-legendary-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(154, 77, 255, 0.45); }
  50%      { box-shadow: 0 0 20px rgba(154, 77, 255, 0.7); }
}
.ach-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0a0720;
  border: 1px solid var(--panel-edge-strong);
  color: var(--text);
  padding: 6px 8px; border-radius: 6px;
  font-size: 11px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: var(--transition);
  z-index: 10;
}
.ach:hover .ach-tip { opacity: 1; }
.ach-tip-date {
  display: block;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  font-size: 9px;
  color: var(--wen-mint, #14f195);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ============================ CAT STAGE ============================= */
.cat-stage {
  flex: 1;
  /* No hard min-height — the stage adapts to whatever the parent flex column
     gives it. Cat-btn uses clamp() so the cat keeps a sane minimum size. */
  min-height: 0;
  /* Capped by the flex parent, not by viewport math */
  max-height: 100%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 210, 63, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 0%, rgba(154, 77, 255, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, rgba(26, 22, 64, 0.4), rgba(10, 7, 32, 0.7));
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
/* Cinematic vignette layered above every scene — darkens corners for depth */
.cat-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0.42) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius);
}
/* Subtle atmospheric haze drifting across each scene */
.cat-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.03) 40%, transparent 60%, rgba(255,255,255,0.02) 80%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  animation: stageHaze 22s linear infinite;
  border-radius: var(--radius);
}
@keyframes stageHaze {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(30%); }
}

/* planet floor at bottom */
.planet-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, var(--floor-color, rgba(255, 210, 63, 0.4)) 0%, transparent 70%);
  pointer-events: none;
}

.stage-glow {
  position: absolute;
  bottom: 80px;
  left: calc(50% - 210px);
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.28) 0%, transparent 65%);
  pointer-events: none;
  animation: glowPulse 3.6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 1; }
}
.cat-shadow {
  position: absolute;
  bottom: 80px;
  width: 240px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 65%);
  animation: shadowBounce 2.4s ease-in-out infinite;
}
@keyframes shadowBounce {
  0%, 100% { transform: scaleX(1); opacity: 0.6; }
  50% { transform: scaleX(0.85); opacity: 0.4; }
}

/* COMBO HUD (active-clicking reward) */
.combo-hud {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px) scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.92), rgba(255, 139, 61, 0.92));
  border: 2.5px solid #1a0a30;
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 22px rgba(255, 210, 63, 0.55);
  border-radius: 12px;
  padding: 8px 14px 6px;
  min-width: 180px;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1.4);
}
.combo-hud.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.combo-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: #1a0a30;
  font-family: 'Bungee', sans-serif;
}
.combo-count {
  font-size: 22px;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.4);
}
.combo-label {
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.85;
}
.combo-mult {
  font-size: 16px;
  color: #5a1830;
  margin-left: auto;
}
.combo-timer {
  height: 4px;
  background: rgba(26, 10, 48, 0.35);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.combo-timer-fill {
  height: 100%;
  background: #1a0a30;
  border-radius: 2px;
  width: 100%;
  transition: width 80ms linear;
}
.combo-hud.combo-hot {
  background: linear-gradient(135deg, rgba(255, 93, 143, 0.95), rgba(153, 69, 255, 0.92));
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 28px rgba(255, 93, 143, 0.7);
  animation: comboHotPulse 0.6s ease-in-out infinite;
}
.combo-hud.combo-hot .combo-row { color: #fff; }
.combo-hud.combo-hot .combo-count { text-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 12px rgba(255,255,255,0.8); }
.combo-hud.combo-hot .combo-mult { color: #ffd23f; }
.combo-hud.combo-blazing {
  background: linear-gradient(135deg, rgba(255, 93, 58, 0.95), rgba(255, 210, 63, 0.95));
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 36px rgba(255, 93, 58, 0.85), 0 0 60px rgba(255, 210, 63, 0.5);
  animation: comboBlazingPulse 0.4s ease-in-out infinite;
}
@keyframes comboHotPulse {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  50%      { transform: translateX(-50%) translateY(-2px) scale(1.04); }
}
@keyframes comboBlazingPulse {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1) rotate(0); }
  25%      { transform: translateX(-50%) translateY(-3px) scale(1.06) rotate(-0.8deg); }
  75%      { transform: translateX(-50%) translateY(-3px) scale(1.06) rotate(0.8deg); }
}

/* CAT THOUGHT BUBBLE (era mood) */
.cat-thought {
  position: absolute;
  bottom: 460px;
  left: calc(50% + 80px);
  z-index: 4;
  pointer-events: none;
  animation: thoughtFloat 4s ease-in-out infinite;
}
.cat-thought-bubble {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #ffffff 0%, #d8e4ec 100%);
  border: 3px solid #1a1a2a;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 -4px 8px rgba(0,0,0,0.08);
  position: relative;
}
.cat-thought-emoji {
  font-size: 32px;
  line-height: 1;
  animation: thoughtPulse 2.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.15));
}
.cat-thought-dot {
  position: absolute;
  background: #fff;
  border: 2.5px solid #1a1a2a;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.cat-thought .dot-1 {
  width: 14px; height: 14px;
  bottom: -10px; left: 12px;
  animation: dotPop 2.4s ease-in-out infinite;
}
.cat-thought .dot-2 {
  width: 8px; height: 8px;
  bottom: -22px; left: 4px;
  animation: dotPop 2.4s ease-in-out infinite 0.4s;
}
@keyframes thoughtFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes thoughtPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes dotPop {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1; transform: scale(1); }
}

.cat-btn {
  position: absolute;
  /* Scale the cat itself with available height — clamp() guarantees a sane
     min/max regardless of viewport. The bottom offset shrinks too so the
     cat keeps anchored to the litterbox at the bottom of the stage. */
  bottom: clamp(40px, 8vh, 76px);
  width: clamp(240px, 26vw, 340px);
  height: clamp(260px, 28vw, 360px);
  /* Center horizontally without using transform so the catIdle keyframe
     animation can keep ownership of transform. */
  left: 0; right: 0; margin: 0 auto;
  background: none; border: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  z-index: 2;
  animation: catIdle 2.4s ease-in-out infinite;
  outline: none;
  /* Mobile: disable double-tap zoom on the cat — taps register as clicks
     without the 300ms zoom delay. Also kill the iOS tap highlight flash. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.cat-btn:hover { filter: brightness(1.06) drop-shadow(0 0 18px rgba(255, 210, 63, 0.45)); }
.cat-btn.clicking { animation: catSquish 500ms ease-out; }
.cat-btn:focus-visible::after {
  content: ''; position: absolute; inset: -20px;
  border: 3px dashed var(--wen-gold);
  border-radius: 50%;
}

@keyframes catIdle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}
@keyframes catSquish {
  0%   { transform: scale(1) translateY(0) rotate(0); }
  30%  { transform: scale(1.08, 0.86) translateY(28px) rotate(-2deg); }  /* big hunch over the box */
  60%  { transform: scale(1.04, 0.92) translateY(20px) rotate(0); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

#catSVG {
  width: 100%; height: 100%;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

/* tool arm swings on click */
#catToolArm {
  transform-origin: 158px 165px;
  transition: transform 80ms ease-out;
}
/* cat rake: paws plant outward in the litter, then DRAG inward (real scraping motion) */
.cat-btn.swinging #catLeftArm  { animation: pawRakeLeft  500ms ease-out; }
.cat-btn.swinging #catToolArm  { animation: pawRakeRight 500ms ease-out; }
@keyframes pawRakeLeft {
  /* left paw: plant on the outside (negative X), drag toward center (positive X) */
  0%   { transform: translate(0, 0)        rotate(0); }
  12%  { transform: translate(-12px, 50px) rotate(-22deg); }  /* PLANT — paw down + out */
  26%  { transform: translate(22px, 50px)  rotate(22deg); }   /* DRAG — pulled inward across litter */
  38%  { transform: translate(8px, 20px)   rotate(5deg); }    /* LIFT — paw raises */
  52%  { transform: translate(-12px, 50px) rotate(-22deg); }  /* plant again */
  68%  { transform: translate(22px, 50px)  rotate(22deg); }   /* drag again */
  80%  { transform: translate(8px, 20px)   rotate(5deg); }    /* lift */
  100% { transform: translate(0, 0)        rotate(0); }
}
@keyframes pawRakeRight {
  /* right paw: mirror, offset timing so paws alternate */
  0%   { transform: translate(0, 0)         rotate(0); }
  6%   { transform: translate(8px, 20px)    rotate(-5deg); }
  20%  { transform: translate(12px, 50px)   rotate(22deg); }  /* plant — paw down + out (right side) */
  34%  { transform: translate(-22px, 50px)  rotate(-22deg); } /* drag — pulled inward across litter */
  46%  { transform: translate(-8px, 20px)   rotate(-5deg); }
  60%  { transform: translate(12px, 50px)   rotate(22deg); }  /* plant again */
  76%  { transform: translate(-22px, 50px)  rotate(-22deg); } /* drag again */
  88%  { transform: translate(-8px, 20px)   rotate(-5deg); }
  100% { transform: translate(0, 0)         rotate(0); }
}
#catLeftArm { transform-origin: 50px 165px; }
#catToolArm { transform-origin: 158px 165px; }

#catTail { transform-origin: 165px 175px; animation: tailWag 2.8s ease-in-out infinite; }
@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

/* eye blink */
.cat-eyes { animation: blink 5s ease-in-out infinite; transform-origin: center center; }
@keyframes blink {
  0%, 92%, 96%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}

.click-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bungee', sans-serif;
  font-size: 13px;
  color: var(--wen-gold);
  letter-spacing: 3px;
  pointer-events: none;
  opacity: 0.85;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  animation: hintBlink 1.4s ease-in-out infinite;
}
@keyframes hintBlink {
  0%, 100% { opacity: 0.9; transform: translate(-50%, 0); }
  50% { opacity: 0.4; transform: translate(-50%, 2px); }
}

/* gear aura for endgame */
#gearAura { animation: auraSpin 12s linear infinite; transform-origin: 100px 120px; }
@keyframes auraSpin {
  0% { transform: rotate(0); opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { transform: rotate(360deg); opacity: 0.4; }
}

/* floating "+N" numbers */
.float-layer, .particle-layer, .loot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.loot-layer { z-index: 5; }

.float {
  position: absolute;
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: var(--wen-gold);
  text-shadow: 0 0 8px rgba(255, 210, 63, 0.7), 0 2px 0 rgba(0,0,0,0.6);
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
  white-space: nowrap;
  transform: translate(-50%, 0);
}
.float.meme {
  color: var(--wen-pink);
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  text-shadow: 0 0 8px rgba(255, 93, 143, 0.7), 0 2px 0 rgba(0,0,0,0.5);
  transform: translate(-50%, 0) rotate(var(--rot, -4deg));
  animation: memeFloat 1.4s ease-out forwards;
}
.float.crit, .float.big {
  color: #fff;
  font-size: 44px;
  letter-spacing: 1.5px;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--wen-pink),
    0 0 28px var(--wen-pink),
    3px 3px 0 #1a0524,
    -2px 2px 0 #1a0524;
  animation: critPop 1.4s cubic-bezier(0.22, 0.7, 0.3, 1.2) forwards;
  filter: drop-shadow(0 0 12px rgba(255, 93, 143, 0.9));
}
.float.crit::before {
  content: 'CRIT! ';
  display: block;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--wen-gold);
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--wen-gold),
    2px 2px 0 #1a0524;
  margin-bottom: -2px;
}
@keyframes critPop {
  0%   { transform: translate(-50%, 0) scale(0.2) rotate(-8deg); opacity: 0; }
  20%  { transform: translate(-50%, -14px) scale(1.5) rotate(4deg); opacity: 1; }
  35%  { transform: translate(-50%, -22px) scale(0.9) rotate(-2deg); }
  50%  { transform: translate(-50%, -32px) scale(1.12) rotate(1deg); }
  100% { transform: translate(-50%, -130px) scale(0.95) rotate(0); opacity: 0; }
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  18% { transform: translate(-50%, -10px) scale(1.22); opacity: 1; }
  100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}
@keyframes memeFloat {
  0% { transform: translate(-50%, 0) rotate(var(--rot, -4deg)) scale(0.4); opacity: 0; }
  16% { transform: translate(-50%, -16px) rotate(var(--rot, -4deg)) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -130px) rotate(var(--rot, -4deg)) scale(1); opacity: 0; }
}

.particle {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff2a8, var(--wen-gold) 55%, #b87f0e 100%);
  pointer-events: none;
  animation: partFly 700ms ease-out forwards;
}
@keyframes partFly {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0.95; }
  100% { transform: var(--p-end) scale(0.2); opacity: 0; }
}

/* HEART/SPARKLE BURST (egg found, big finds) */
.heart-particle {
  position: absolute;
  font-size: 26px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: heartFly 1400ms cubic-bezier(0.18, 0.7, 0.3, 1) forwards;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(255,210,63,0.5));
  z-index: 25;
}
@keyframes heartFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0); }
  20%  { opacity: 1; transform: translate(calc(-50% + var(--hx) * 0.2), calc(-50% + var(--hy) * 0.2)) scale(1.3) rotate(calc(var(--hr) * 0.3)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--hx)), calc(-50% + var(--hy))) scale(0.9) rotate(var(--hr)); }
}

/* Cat thought "celebrate" flicker */
.cat-thought-emoji.flicker {
  animation: thoughtFlicker 0.9s ease-in-out infinite;
}
@keyframes thoughtFlicker {
  0%, 100% { transform: scale(1.2) rotate(0); filter: drop-shadow(0 0 6px #ffd23f); }
  25%      { transform: scale(1.45) rotate(-8deg); }
  50%      { transform: scale(1.15) rotate(8deg); }
  75%      { transform: scale(1.4) rotate(-4deg); }
}

/* TRAVEL CONFETTI BURST */
.confetti {
  position: absolute;
  width: 10px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
  animation: confettiFly 1100ms cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
  will-change: transform, opacity;
  z-index: 30;
}
@keyframes confettiFly {
  0%   { transform: translate(0,0) rotate(0deg) scale(0.4); opacity: 0; }
  10%  { opacity: 1; transform: translate(calc(var(--cx) * 0.1), calc(var(--cy) * 0.1)) rotate(calc(var(--cr) * 0.1)) scale(1.2); }
  100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.7); opacity: 0; }
}

/* BIG TRAVEL BANNER */
.big-banner {
  pointer-events: none;
  background: linear-gradient(135deg, rgba(20,241,149,0.95) 0%, rgba(153,69,255,0.95) 60%, rgba(255,93,143,0.95) 100%);
  color: #0a0212;
  border: 4px solid #ffd23f;
  border-radius: 14px;
  padding: 18px 28px;
  text-align: center;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.4), 0 18px 48px rgba(20,241,149,0.45), 0 0 80px rgba(255,210,63,0.5);
  animation: bigBannerIn 2.8s ease forwards;
  min-width: 340px;
  font-family: 'Bungee', sans-serif;
  position: fixed;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1500;
  overflow: hidden;
}
.big-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: bigBannerShine 1.8s ease 0.2s;
}
.big-banner-icon { font-size: 52px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.25)); }
.big-banner-title {
  font-size: 28px; letter-spacing: 3px;
  color: #0a0212;
  text-shadow: 2px 2px 0 #ffd23f, 4px 4px 0 rgba(0,0,0,0.35);
  margin-bottom: 6px;
}
.big-banner-body {
  font-size: 13px; letter-spacing: 1.5px;
  color: #0a0212;
  opacity: 0.95;
  font-weight: 700;
}
@keyframes bigBannerIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  18%  { transform: translate(-50%, -50%) scale(0.94) rotate(-1deg); }
  26%  { transform: translate(-50%, -50%) scale(1.04) rotate(0.5deg); }
  35%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 30px)) scale(0.92); }
}
@keyframes bigBannerShine {
  to { transform: translateX(100%); }
}

/* ============================ LOCATION SCENES ======================= */
/* MEMECOIN ERA (2024) — pump.fun parabolic chaos */
.cat-stage[data-location="memecoins"] {
  background: linear-gradient(180deg, #3a0a44 0%, #1a0524 100%);
}
.cat-stage[data-location="memecoins"] .scene-memecoins { display: block; }
.scene-memecoins svg { width: 100%; height: 100%; display: block; }
.scene-memecoins .mc-live { animation: mcPulse 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes mcPulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #14f195); } 50% { opacity: 0.5; filter: drop-shadow(0 0 12px #14f195); } }
.scene-memecoins .mc-chart {
  stroke-dasharray: 280; stroke-dashoffset: 280;
  animation: mcChartDraw 4s ease-in-out infinite;
}
.scene-memecoins .mc-c1 { animation-delay: 0s; }
.scene-memecoins .mc-c2 { animation-delay: 0.3s; }
.scene-memecoins .mc-c3 { animation-delay: 0.6s; }
.scene-memecoins .mc-c4 { animation-delay: 0.9s; }
.scene-memecoins .mc-c5 { animation-delay: 1.2s; }
.scene-memecoins .mc-c6 { animation-delay: 1.5s; }
@keyframes mcChartDraw {
  0% { stroke-dashoffset: 280; }
  60%, 90% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 280; }
}
.scene-memecoins .mc-jackpot { animation: mcJackpot 0.8s ease-in-out infinite; }
@keyframes mcJackpot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* BREAKPOINT SINGAPORE (Sep 2024) — Marina Bay, MOODENG, AI agents */
.cat-stage[data-location="breakpoint4"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 15%, rgba(255, 210, 63, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #1a3a6a 0%, #2a1a3a 100%);
}
.cat-stage[data-location="breakpoint4"] .scene-breakpoint4 { display: block; }
.scene-breakpoint4 svg { width: 100%; height: 100%; display: block; }
.scene-breakpoint4 .sg-star  { animation: sgTwinkle 2s ease-in-out infinite; }
.scene-breakpoint4 .sg-s2    { animation-delay: 0.4s; }
.scene-breakpoint4 .sg-s3    { animation-delay: 0.8s; }
@keyframes sgTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.scene-breakpoint4 .sg-live  { animation: sgPulse 1.3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sgPulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #14f195); } 50% { opacity: 0.5; filter: drop-shadow(0 0 10px #14f195); } }

/* FIREDANCER ERA (2024-25) — cosmic endgame */
.cat-stage[data-location="firedancer"] {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(154, 77, 255, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 35%, rgba(255, 93, 143, 0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(126, 224, 194, 0.3) 0%, transparent 60%),
    linear-gradient(180deg, #1a0540 0%, #0a0218 100%);
}
.cat-stage[data-location="firedancer"] .scene-firedancer { display: block; }
.scene-firedancer svg { width: 100%; height: 100%; display: block; }
.scene-firedancer .fd-nebula { animation: fdSwirl 50s linear infinite; transform-origin: center; transform-box: fill-box; }
.scene-firedancer .fd-n2     { animation-duration: 65s; animation-direction: reverse; }
@keyframes fdSwirl { to { transform: rotate(360deg); } }
.scene-firedancer .fd-flame-group { animation: fdFlicker 0.5s ease-in-out infinite; transform-origin: 400px 560px; transform-box: fill-box; }
@keyframes fdFlicker {
  0%, 100% { transform: translate(400px, 460px) scaleY(1) scaleX(1); }
  50%      { transform: translate(400px, 460px) scaleY(1.06) scaleX(0.95); }
}
.scene-firedancer .fd-stars circle { animation: fdStarTwinkle 3s ease-in-out infinite; }
@keyframes fdStarTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.scene-firedancer .fd-live { animation: fdLive 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes fdLive { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); } 50% { opacity: 0.5; filter: drop-shadow(0 0 14px currentColor); } }
.scene-firedancer .fd-tps  { animation: fdTpsTick 1.5s steps(2) infinite; }
@keyframes fdTpsTick { 0%, 50% { opacity: 1; } 51%, 60% { opacity: 0.5; } 61%, 100% { opacity: 1; } }
/* fd-bubble each have their own SVG transform="translate(x,y)" — animate opacity only,
   NOT transform (CSS transform overrides the SVG attribute and collapses bubbles to 0,0). */
.scene-firedancer .fd-bubble  { animation: fdBubble 6s ease-in-out infinite; opacity: 0; }
.scene-firedancer .fd-b1 { animation-delay: 0s; }
.scene-firedancer .fd-b2 { animation-delay: 1.5s; }
.scene-firedancer .fd-b3 { animation-delay: 3s; }
.scene-firedancer .fd-b4 { animation-delay: 4.5s; }
@keyframes fdBubble {
  0%, 80%, 100% { opacity: 0; }
  6%, 70%       { opacity: 1; }
}
.scene-firedancer .fd-orbit  { animation: fdOrbit 20s linear infinite; transform-origin: 400px 460px; transform-box: fill-box; }
.scene-firedancer .fd-o2     { animation-duration: 28s; animation-direction: reverse; }
.scene-firedancer .fd-o3     { animation-duration: 36s; }
@keyframes fdOrbit { to { transform: translate(400px, 460px) rotate(360deg); } }
.scene-firedancer .fd-data line { animation: fdDataFlow 2s linear infinite; }
@keyframes fdDataFlow { to { stroke-dashoffset: -24; } }

/* AIRDROP SZN (Jan 31, 2024) — JUP + WEN parachuting */
.cat-stage[data-location="airdrops"] {
  background: linear-gradient(180deg, #7ee0c2 0%, #ffd23f 50%, #ff9bba 100%);
}
.cat-stage[data-location="airdrops"] .scene-airdrops { display: block; }
.scene-airdrops svg { width: 100%; height: 100%; display: block; }
/* ad-drop parachutes each have their own SVG transform="translate(x,y)" positioning them.
   CSS transform here was overriding that and collapsing all parachutes to the same spot.
   Replaced rigid `translate` keyframes with a tiny rotate-only sway that doesn't fight the SVG position. */
.scene-airdrops .ad-drop { animation: adFloat 6s ease-in-out infinite; transform-origin: 0 0; transform-box: fill-box; }
.scene-airdrops .ad-d1 { animation-delay: 0s; }
.scene-airdrops .ad-d2 { animation-delay: -2s; }
.scene-airdrops .ad-d3 { animation-delay: -4s; }
@keyframes adFloat {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}
.scene-airdrops .ad-bird { animation: adBird 8s ease-in-out infinite; }
@keyframes adBird {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(60px); }
  100% { transform: translateX(0); }
}

/* BREAKPOINT AMSTERDAM (Nov 2023) — canals, tulips, comeback confirmed */
.cat-stage[data-location="breakpoint3"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 15%, rgba(255, 155, 61, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a3a 0%, #3a2418 100%);
}
.cat-stage[data-location="breakpoint3"] .scene-breakpoint3 { display: block; }
.scene-breakpoint3 svg { width: 100%; height: 100%; display: block; }
.scene-breakpoint3 .am-boat { animation: amBoat 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes amBoat {
  0%, 100% { transform: translate(80px, 200px) rotate(-1deg); }
  50%      { transform: translate(85px, 198px) rotate(1deg); }
}
.scene-breakpoint3 .am-ripple { animation: amRipple 3s ease-in-out infinite; }
@keyframes amRipple { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(8px); opacity: 0.3; } }

/* THE REBUILD (2023) — BONK Christmas, Saga ships, color returns */
.cat-stage[data-location="rebuild"] {
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 140, 0, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a44 0%, #3a2a52 60%, #4a3a18 100%);
}
.cat-stage[data-location="rebuild"] .scene-rebuild { display: block; }
.cat-stage[data-location="rebuild"] .stage-glow { opacity: 0.28; }
.scene-rebuild svg { width: 100%; height: 100%; display: block; }
.scene-rebuild .rb-ornament { transform-origin: center; transform-box: fill-box; animation: rbGlow 2s ease-in-out infinite; }
.scene-rebuild .rb-o1 { animation-delay: 0s; }
.scene-rebuild .rb-o2 { animation-delay: 0.3s; }
.scene-rebuild .rb-o3 { animation-delay: 0.6s; }
@keyframes rbGlow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
  50%      { opacity: 0.85; filter: drop-shadow(0 0 8px currentColor); }
}
.scene-rebuild .rb-live { animation: rbPulse 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes rbPulse { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #14f195); } 50% { opacity: 0.5; filter: drop-shadow(0 0 12px #14f195); } }
.scene-rebuild .rb-steam { animation: rbSteam 2.4s ease-in-out infinite; }
@keyframes rbSteam { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.6; transform: translateY(-4px); } }
.scene-rebuild .rb-bar { transform-origin: bottom; transform-box: fill-box; }

/* THE WINTER (Nov 2022) — FTX fallout, snow falls, $200 → $8 */
.cat-stage[data-location="winter"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 10%, rgba(168, 197, 214, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #1a2a44 0%, #2a3a52 60%, #3a4a62 100%);
}
.cat-stage[data-location="winter"] .scene-winter { display: block; }
.cat-stage[data-location="winter"] .stage-glow { opacity: 0.18; }
.scene-winter svg { width: 100%; height: 100%; display: block; }
.scene-winter .wn-flake { animation: wnFall 8s linear infinite; }
.scene-winter .wn-f2    { animation-duration: 11s; animation-delay: -2s; }
.scene-winter .wn-f3    { animation-duration: 14s; animation-delay: -5s; }
@keyframes wnFall {
  0%   { transform: translateY(-20px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0; }
}
.scene-winter .wn-warn { animation: wnWarn 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes wnWarn { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #ff1830); } 50% { opacity: 0.5; filter: drop-shadow(0 0 12px #ff1830); } }
.scene-winter .wn-chart {
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: wnChartFall 6s ease-in-out infinite;
}
@keyframes wnChartFall {
  0%   { stroke-dashoffset: 420; }
  60%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 420; }
}
.scene-winter .wn-typing { animation: wnType 2s steps(2) infinite; }
@keyframes wnType { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.4; } }
.scene-winter .wn-glow { animation: wnHeat 2.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes wnHeat { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.15); } }
.scene-winter .wn-heater { animation: wnFlicker 0.6s ease-in-out infinite; }
@keyframes wnFlicker { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }

/* BREAKPOINT LISBON II (Nov 2022) — same Estoril venue, doomed celebration */
.cat-stage[data-location="breakpoint2"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 15%, rgba(255, 123, 106, 0.15) 0%, transparent 70%),
    linear-gradient(180deg, #2a1a2a 0%, #15082a 100%);
}
.cat-stage[data-location="breakpoint2"] .scene-breakpoint2 { display: block; }
.cat-stage[data-location="breakpoint2"] .stage-glow { opacity: 0.22; }
.scene-breakpoint2 svg { width: 100%; height: 100%; display: block; }
.scene-breakpoint2 .bp2-storm { animation: bp2StormDrift 18s linear infinite; }
@keyframes bp2StormDrift { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }
.scene-breakpoint2 .bp2-warn { animation: bp2Warn 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bp2Warn {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #ff5d8f); }
  50%      { opacity: 0.5; filter: drop-shadow(0 0 12px #ff5d8f); }
}
.scene-breakpoint2 .bp2-chart {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: bp2ChartFall 5s ease-in-out infinite;
}
@keyframes bp2ChartFall {
  0%   { stroke-dashoffset: 320; }
  60%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 320; }
}
.scene-breakpoint2 .bp2-chart-tip { animation: bp2TipShake 1.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bp2TipShake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(2px, -1px); }
  50%      { transform: translate(-2px, 1px); }
  75%      { transform: translate(1px, 2px); }
}
.scene-breakpoint2 .bp2-wave { animation: bp2Wave 5s ease-in-out infinite; }
@keyframes bp2Wave { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(8px); opacity: 0.3; } }
.scene-breakpoint2 .bp2-flute   { animation: bp2FluteWobble 4s ease-in-out infinite; transform-origin: bottom; transform-box: fill-box; }
.scene-breakpoint2 .bp2-flute-2 { animation-delay: -1s; }
.scene-breakpoint2 .bp2-flute-3 { animation: bp2FluteToppling 6s ease-in-out infinite; }
@keyframes bp2FluteWobble {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1deg); }
}
@keyframes bp2FluteToppling {
  0%, 90% { transform: rotate(-6deg); }
  95%     { transform: rotate(-18deg); }
  100%    { transform: rotate(-6deg); }
}
.scene-breakpoint2 .bp2-bubble { animation: bp2Bubble 2s ease-in-out infinite; }
@keyframes bp2Bubble { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-12px); } }

/* THE GREAT OUTAGE (Sep 14, 2021) — red, sleep-deprived, halt timer ticking */
.cat-stage[data-location="outage"] {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 24, 48, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #0a0408 0%, #1a0a14 60%, #0a0408 100%);
}
.cat-stage[data-location="outage"] .scene-outage { display: block; }
.cat-stage[data-location="outage"] .stage-glow { opacity: 0.15; }

.scene-outage svg { width: 100%; height: 100%; display: block; }

/* NFT SZN (Late 2021 — Mid 2022) — gallery vibe with Magic Eden + PFP mania */
.cat-stage[data-location="nfts"] {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 155, 61, 0.16) 0%, transparent 70%),
    linear-gradient(180deg, #1a0824 0%, #3a1a44 60%, #2a1208 100%);
}
.cat-stage[data-location="nfts"] .scene-nfts { display: block; }
.scene-nfts svg { width: 100%; height: 100%; display: block; }
.scene-nfts .nft-live {
  animation: nftLivePulse 1.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes nftLivePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Header warning indicators pulse aggressively */
.scene-outage .ou-warn,
.scene-outage .ou-board-warn {
  animation: ouWarnPulse 0.8s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes ouWarnPulse {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 4px #ff1830); }
  50%      { opacity: 0.4; filter: drop-shadow(0 0 14px #ff1830); }
}

/* Server LEDs blink red at different rates — chaotic */
.scene-outage .ou-led      { animation: ouRed 1.4s ease-in-out infinite; }
.scene-outage .ou-led-fast { animation: ouRed 0.45s ease-in-out infinite; }
@keyframes ouRed {
  0%, 60%   { opacity: 1;   filter: drop-shadow(0 0 3px #ff1830); }
  70%, 100% { opacity: 0.25; filter: drop-shadow(0 0 8px #ff1830); }
}

/* The one hopeful green LED — slow steady pulse */
.scene-outage .ou-led-hope {
  animation: ouHope 2.4s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
@keyframes ouHope {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 4px #14f195); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 12px #14f195); }
}

/* Halt timer "ticks" — subtle digit flicker every second */
.scene-outage .ou-timer { animation: ouTick 1s steps(2) infinite; }
@keyframes ouTick {
  0%, 50%   { opacity: 1; }
  51%, 55%  { opacity: 0.5; }
  56%, 100% { opacity: 1; }
}

/* Restart vote progress bar slowly creeping toward 66% threshold */
.scene-outage .ou-vote-fill {
  transform-origin: left;
  transform-box: fill-box;
  animation: ouVote 8s ease-in-out infinite;
}
@keyframes ouVote {
  0%   { transform: scaleX(0.85); }
  50%  { transform: scaleX(1.1); }
  100% { transform: scaleX(0.85); }
}

/* Tweet cards appear staggered (as if posted one at a time during the incident).
   IMPORTANT: must NOT use `transform` here — CSS transform overrides each tweet's
   own SVG transform="translate(0, N)" attribute and collapses all 4 tweets to (0,0).
   Use opacity only. */
.scene-outage .ou-tweet {
  opacity: 0;
  animation: ouTweetIn 12s ease-in-out infinite;
}
.scene-outage .ou-tweet-1 { animation-delay: 0s; }
.scene-outage .ou-tweet-2 { animation-delay: 1.5s; }
.scene-outage .ou-tweet-3 { animation-delay: 3s; }
.scene-outage .ou-tweet-4 { animation-delay: 4.5s; }
@keyframes ouTweetIn {
  0%, 6%, 88%, 100% { opacity: 0; }
  10%, 84% { opacity: 1; }
}

/* Desk lamp flickers (long night, almost dead bulb) */
.scene-outage .ou-lamp,
.scene-outage .ou-lamp-cone {
  animation: ouLampFlicker 3.6s ease-in-out infinite;
}
@keyframes ouLampFlicker {
  0%, 100% { opacity: 1; }
  62%, 64% { opacity: 0.5; }
  66%, 70% { opacity: 1; }
  72%, 73% { opacity: 0.4; }
  74%, 100% { opacity: 1; }
}

/* Terminal cursor blink on the error monitor */
.scene-outage .ou-cursor { animation: ouCursor 1s steps(2) infinite; }
@keyframes ouCursor {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* BREAKPOINT LISBON I (Nov 2021) — Estoril coastline + conference vibes */
.cat-stage[data-location="breakpoint1"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 15%, rgba(255, 210, 63, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #1a0a2e 0%, #2a1a3a 60%, #1a0a25 100%);
}
.cat-stage[data-location="breakpoint1"] .scene-breakpoint1 { display: block; }
.cat-stage[data-location="breakpoint1"] .stage-glow { opacity: 0.25; }

.scene-breakpoint1 svg { width: 100%; height: 100%; display: block; }

/* String lights twinkle */
.scene-breakpoint1 .bp1-light   { animation: bp1Twinkle 1.6s ease-in-out infinite; }
.scene-breakpoint1 .bp1-light-2 { animation: bp1Twinkle 2.1s ease-in-out infinite 0.4s; }
.scene-breakpoint1 .bp1-light-3 { animation: bp1Twinkle 1.3s ease-in-out infinite 0.7s; }
@keyframes bp1Twinkle {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
  50%      { opacity: 0.5; filter: drop-shadow(0 0 8px currentColor); }
}

/* Sun glows slowly */
.scene-breakpoint1 .bp1-sun { animation: bp1Sun 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bp1Sun {
  0%, 100% { opacity: 0.95; filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.4)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 16px rgba(255, 210, 63, 0.8)); }
}

/* Birds drift */
.scene-breakpoint1 .bp1-bird   { animation: bp1BirdFlight 14s ease-in-out infinite; }
.scene-breakpoint1 .bp1-bird-2 { animation: bp1BirdFlight 18s ease-in-out infinite reverse; }
@keyframes bp1BirdFlight {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(40px, -6px); }
  100% { transform: translate(80px, 0); }
}

/* Boat bobs on the water */
.scene-breakpoint1 .bp1-boat { animation: bp1BoatBob 4s ease-in-out infinite; }
@keyframes bp1BoatBob {
  0%, 100% { transform: translate(60px, 200px) rotate(-1deg); }
  50%      { transform: translate(63px, 198px) rotate(1deg); }
}

/* Waves ripple */
.scene-breakpoint1 .bp1-wave   { animation: bp1Wave 4s ease-in-out infinite; }
.scene-breakpoint1 .bp1-wave-2 { animation: bp1Wave 5s ease-in-out infinite 0.5s; }
@keyframes bp1Wave {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(8px); opacity: 0.4; }
}

/* LIVE dot pulses */
.scene-breakpoint1 .bp1-live { animation: bp1Pulse 1.3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bp1Pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #14f195); }
  50%      { opacity: 0.6; filter: drop-shadow(0 0 12px #14f195); }
}

/* Chart line slowly redraws (going up) */
.scene-breakpoint1 .bp1-chart {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: bp1ChartDraw 6s ease-in-out infinite;
}
@keyframes bp1ChartDraw {
  0%   { stroke-dashoffset: 400; }
  60%  { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 400; }
}
.scene-breakpoint1 .bp1-chart-tip { animation: bp1TipPulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bp1TipPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #14f195); }
  50%      { transform: scale(1.4); filter: drop-shadow(0 0 12px #14f195); }
}

/* DEFI SUMMER (2020-21) — yield farms, vacation vibes, five-digit APRs */
.cat-stage[data-location="defi"] {
  background:
    radial-gradient(ellipse 70% 30% at 50% 10%, rgba(255, 255, 200, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, #ff9bba 0%, #ffce4a 40%, #7ee0c2 80%, #a8e8c2 100%);
}
.cat-stage[data-location="defi"] .scene-defi { display: block; }
.cat-stage[data-location="defi"] .stage-glow { opacity: 0.3; }

.scene-defi svg { width: 100%; height: 100%; display: block; }

/* Sun gently pulses + rays rotate */
.scene-defi .df-sun-rays { transform-origin: 660px 160px; transform-box: fill-box; animation: dfRays 24s linear infinite; }
@keyframes dfRays { to { transform: rotate(360deg); } }

/* Clouds drift slowly across */
.scene-defi .df-cloud   { animation: dfCloud 38s linear infinite; }
.scene-defi .df-cloud-2 { animation: dfCloud 50s linear infinite reverse; }
@keyframes dfCloud {
  0%   { transform: translateX(-20px); }
  100% { transform: translateX(80px); }
}

/* Token crops sway gently */
/* Sway animation removed — CSS transform: rotate() was overriding each crop's SVG transform="translate(x, y)"
   attribute and snapping the flowers to (0,0), making them appear to "disappear" on each cycle. The crops
   remain static at their authored positions until we wrap them in an inner <g> for animation. */

/* Dashboard LIVE dot pulses */
.scene-defi .df-live-dot { animation: dfPulse 1.3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes dfPulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #14f195); }
  50%      { opacity: 0.6; filter: drop-shadow(0 0 12px #14f195); }
}

/* TVL number bumps subtly (number go up energy) */
.scene-defi .df-tvl { animation: dfTvlBump 3s ease-in-out infinite; transform-origin: right; transform-box: fill-box; }
@keyframes dfTvlBump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Chart streamer animates dashing upward */
.scene-defi .df-chart-streamer {
  stroke-dashoffset: 0;
  animation: dfChartFlow 1.4s linear infinite;
}
@keyframes dfChartFlow { to { stroke-dashoffset: -24; } }

/* Drink umbrella spins lazily */
.scene-defi .df-umbrella { transform-origin: center bottom; animation: dfUmbrella 8s ease-in-out infinite; }
@keyframes dfUmbrella {
  0%, 100% { transform: translate(10px, -50px) rotate(-6deg); }
  50%      { transform: translate(10px, -50px) rotate(6deg); }
}

/* MAINNET BETA (March 16, 2020) — launch day, pandemic, "BETA" forever */
.cat-stage[data-location="mainnet"] {
  background:
    radial-gradient(ellipse 70% 30% at 50% 12%, rgba(255, 230, 150, 0.22) 0%, transparent 70%),
    linear-gradient(180deg, #1a0a2e 0%, #2a1654 55%, #1a0a2e 100%);
}
.cat-stage[data-location="mainnet"] .scene-mainnet { display: block; }
.cat-stage[data-location="mainnet"] .stage-glow { opacity: 0.3; }

.scene-mainnet svg { width: 100%; height: 100%; display: block; }

/* Bunting flags sway gently */
.scene-mainnet .bunting { transform-origin: 400px 60px; animation: buntingSway 4s ease-in-out infinite; }
@keyframes buntingSway {
  0%, 100% { transform: rotate(-0.6deg); }
  50%      { transform: rotate(0.6deg); }
}

/* The famous BETA sticker that never came off — slow tilt back and forth */
.scene-mainnet .mn-beta-sticker { transform-origin: center; animation: betaWobble 6s ease-in-out infinite; }
@keyframes betaWobble {
  0%, 100% { transform: translate(310px, 100px) rotate(0deg); }
  50%      { transform: translate(310px, 100px) rotate(3deg); }
}

/* LIVE indicator pulses green */
.scene-mainnet .mn-live { animation: livePulse 1.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes livePulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px #14f195); }
  50%      { opacity: 0.7; filter: drop-shadow(0 0 12px #14f195); }
}

/* Block production bars — newest bar pulses */
.scene-mainnet .mn-bar-new { animation: newBlockPulse 1.6s ease-out infinite; transform-origin: bottom; transform-box: fill-box; }
@keyframes newBlockPulse {
  0%   { transform: scaleY(0); opacity: 0; }
  20%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

/* Uptime timer pulse on each second-tick */
.scene-mainnet .mn-uptime { animation: uptimeBlink 2s steps(2) infinite; }
@keyframes uptimeBlink {
  0%, 50%  { opacity: 1; }
  51%, 60% { opacity: 0.45; }
}

/* TPS bar progress slowly filling (theoretically) */
.scene-mainnet .mn-tps-fill { animation: tpsFill 8s ease-in-out infinite; transform-origin: left; transform-box: fill-box; }
@keyframes tpsFill {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.6); }
}

/* Candle flame flicker on the rocket cake */
.scene-mainnet .mn-candle-flame { transform-origin: bottom center; transform-box: fill-box; animation: flameFlicker 0.8s ease-in-out infinite; }
@keyframes flameFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  50%      { transform: scaleY(1.2) scaleX(0.85); opacity: 0.85; }
}

/* Champagne fizz wisps drift up */
.scene-mainnet .mn-fizz, .scene-mainnet .mn-steam {
  animation: fizzRise 2.4s ease-in-out infinite;
}
.scene-mainnet .mn-fizz { animation-delay: 0.3s; }
.scene-mainnet .mn-steam:nth-child(2) { animation-delay: 1.2s; }
@keyframes fizzRise {
  0%   { opacity: 0;   transform: translateY(6px); }
  30%  { opacity: 0.6; }
  70%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translateY(-8px); }
}

/* Balloons bob */
.scene-mainnet .mn-balloon { animation: balloonBob 5s ease-in-out infinite; transform-origin: bottom; transform-box: fill-box; }
.scene-mainnet .mn-balloon-2 { animation-delay: -1.8s; }
@keyframes balloonBob {
  0%, 100% { transform: translate(140px, 200px); }
  50%      { transform: translate(143px, 196px); }
}
.scene-mainnet .mn-balloon-2 {
  animation-name: balloonBob2;
}
@keyframes balloonBob2 {
  0%, 100% { transform: translate(740px, 290px); }
  50%      { transform: translate(737px, 294px); }
}

/* THE GARAGE (Solana 2018) — dim concrete + warm ceiling bulb */
.cat-stage[data-location="garage"] {
  background:
    radial-gradient(ellipse 50% 30% at 50% 12%, rgba(255, 245, 184, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #1a1a26 0%, #2a2a36 60%, #3a3a46 100%);
}
.cat-stage[data-location="garage"] .scene-garage { display: block; }
.cat-stage[data-location="garage"] .stage-glow { opacity: 0.25; }

.scene-garage svg { width: 100%; height: 100%; display: block; }

/* server rack LEDs blink at different rates */
.scene-garage .led-a { animation: ledBlink 1.4s ease-in-out infinite; }
.scene-garage .led-b { animation: ledBlink 0.9s ease-in-out infinite 0.3s; }
.scene-garage .led-c { animation: ledBlink 2.1s ease-in-out infinite 0.6s; }
@keyframes ledBlink {
  0%, 55%   { opacity: 1; }
  60%, 100% { opacity: 0.22; }
}

/* standing dev's marker arm bobs (drawing motion) */
.scene-garage .dev-marker-arm { animation: drawMarker 1.6s ease-in-out infinite; }
@keyframes drawMarker {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(10deg); }
}

/* the pink marker line on the whiteboard appears + erases (drawing it) */
.scene-garage .marker-line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: drawLine 4s ease-in-out infinite;
}
@keyframes drawLine {
  0%, 12%   { stroke-dashoffset: 80; }
  35%, 65%  { stroke-dashoffset: 0; }
  88%, 100% { stroke-dashoffset: 80; }
}

/* monitor code lines flicker as if typing */
.scene-garage .code-line:nth-child(odd)  { animation: codeFlicker 2.2s ease-in-out infinite; }
.scene-garage .code-line:nth-child(even) { animation: codeFlicker 2.8s ease-in-out infinite 0.4s; }
@keyframes codeFlicker {
  0%, 90%, 100% { opacity: 1; }
  92%, 94%      { opacity: 0.3; }
}

/* cursor blink on code editor */
.scene-garage .code-cursor { animation: cursorBlink 1.1s steps(2) infinite; }
@keyframes cursorBlink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* chart bars are static — they were scaling outside the monitor frame */

/* ceiling bulb gentle pulse */
.scene-garage .bulb { animation: bulbPulse 3.6s ease-in-out infinite; transform-origin: 400px 100px; }
@keyframes bulbPulse {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 1; filter: brightness(1.08); }
}

/* coffee steam wisps drift up */
.scene-garage .steam-wisp { animation: steamRise 3s ease-in-out infinite; }
.scene-garage .steam-wisp:nth-child(2) { animation-delay: 1.2s; }
@keyframes steamRise {
  0%   { opacity: 0;   transform: translateY(8px); }
  30%  { opacity: 0.5; }
  70%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translateY(-8px); }
}

/* Default cat-stage backdrop — overridden by each location below */
.cat-stage[data-location="couch"] {
  background:
    /* couch back / cushion */
    linear-gradient(180deg, transparent 0%, transparent 55%, #6a4a2a 55%, #5a3a1e 100%),
    /* warm wallpaper */
    linear-gradient(180deg, #5e4683 0%, #7a5ba0 50%, #5e4683 100%);
}
.cat-stage[data-location="garden"] {
  background:
    /* grass */
    linear-gradient(180deg, transparent 0%, transparent 58%, #5fa14a 58%, #3d7a2a 100%),
    /* sky */
    linear-gradient(180deg, #87ceeb 0%, #b8e0f0 50%, #c9d8e8 100%);
}
.cat-stage[data-location="cafe"] {
  background:
    /* cafe counter */
    linear-gradient(180deg, transparent 0%, transparent 60%, #5a3818 60%, #3a2010 100%),
    /* warm beige interior */
    linear-gradient(180deg, #c89868 0%, #a87045 60%);
}
.cat-stage[data-location="tower"] {
  background:
    /* dark city ground */
    linear-gradient(180deg, transparent 0%, transparent 65%, #1a1230 65%, #0a0518 100%),
    /* sunset sky */
    linear-gradient(180deg, #ff7b9d 0%, #ff9b3d 25%, #6b3088 60%, #1a1230 100%);
}
.cat-stage[data-location="moon"] {
  background:
    /* moon surface */
    linear-gradient(180deg, transparent 0%, transparent 60%, #6a6a7a 60%, #3a3a4a 100%),
    /* dark space */
    radial-gradient(ellipse at 50% 30%, #2a2050 0%, #0a0720 70%);
}
.cat-stage[data-location="mars"] {
  background:
    /* red dust ground */
    linear-gradient(180deg, transparent 0%, transparent 58%, #b03a18 58%, #6a2010 100%),
    /* dusty red sky */
    linear-gradient(180deg, #ff8a5a 0%, #d4583a 50%, #8b3a1a 100%);
}
.cat-stage[data-location="galaxy"] {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(154, 77, 255, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 35%, rgba(255, 93, 143, 0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(126, 224, 194, 0.3) 0%, transparent 60%),
    linear-gradient(180deg, #1a0540 0%, #0a0218 100%);
}

/* SCENE DECORATIONS: a layer of SVG/CSS shapes per location */
.scene-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.scene { display: none; position: absolute; inset: 0; }
/* When a scene becomes the active scene, fade it in. Keeps era jumps smooth
   instead of the instant swap. Animation only fires when display flips to block. */
.cat-stage .scene[style*="block"],
.cat-stage > div .scene,
.cat-stage[data-location] .scene { /* no-op selector to enable animation parsing */ }
@keyframes scene-fade-in {
  from { opacity: 0; transform: scale(0.992) translateY(2px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* The animation applies via display:block selectors below — listed once here. */
.cat-stage[data-location="garage"] .scene-garage,
.cat-stage[data-location="mainnet"] .scene-mainnet,
.cat-stage[data-location="defi"] .scene-defi,
.cat-stage[data-location="breakpoint1"] .scene-breakpoint1,
.cat-stage[data-location="outage"] .scene-outage,
.cat-stage[data-location="nfts"] .scene-nfts,
.cat-stage[data-location="breakpoint2"] .scene-breakpoint2,
.cat-stage[data-location="winter"] .scene-winter,
.cat-stage[data-location="rebuild"] .scene-rebuild,
.cat-stage[data-location="breakpoint3"] .scene-breakpoint3,
.cat-stage[data-location="airdrops"] .scene-airdrops,
.cat-stage[data-location="memecoins"] .scene-memecoins,
.cat-stage[data-location="breakpoint4"] .scene-breakpoint4,
.cat-stage[data-location="firedancer"] .scene-firedancer {
  animation: scene-fade-in 320ms ease-out;
}
.cat-stage[data-location="couch"]  .scene-couch  { display: block; }
.cat-stage[data-location="garden"] .scene-garden { display: block; }
.cat-stage[data-location="cafe"]   .scene-cafe   { display: block; }
.cat-stage[data-location="tower"]  .scene-tower  { display: block; }
.cat-stage[data-location="moon"]   .scene-moon   { display: block; }
.cat-stage[data-location="mars"]   .scene-mars   { display: block; }
.cat-stage[data-location="galaxy"] .scene-galaxy { display: block; }

/* hide the default planet-floor + stage-glow for non-galaxy locations
   so each backdrop reads cleanly. Galaxy keeps the cosmic glow. */
.cat-stage[data-location="couch"]  .stage-glow,
.cat-stage[data-location="garden"] .stage-glow,
.cat-stage[data-location="cafe"]   .stage-glow,
.cat-stage[data-location="tower"]  .stage-glow,
.cat-stage[data-location="moon"]   .stage-glow,
.cat-stage[data-location="mars"]   .stage-glow { opacity: 0.4; }

/* COUCH scene: TV silhouette, window */
.scene-couch::before {
  content: ''; position: absolute;
  left: 6%; top: 12%;
  width: 90px; height: 60px;
  background: linear-gradient(135deg, #1a1230, #2a2050);
  border: 4px solid #4a3820;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.scene-couch::after {
  content: ''; position: absolute;
  right: 8%; top: 14%;
  width: 80px; height: 90px;
  background: linear-gradient(180deg, #b8d8f0 0%, #87ceeb 100%);
  border: 5px solid #4a3820;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}

/* GARDEN scene: sun, clouds, flowers */
.scene-garden::before {
  /* sun */
  content: ''; position: absolute;
  top: 8%; right: 10%;
  width: 70px; height: 70px;
  background: radial-gradient(circle, #fff4a8 0%, #ffd23f 60%, #ff9b3d 100%);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(255, 210, 63, 0.6);
}
.scene-garden::after {
  /* clouds */
  content: ''; position: absolute;
  top: 18%; left: 12%; width: 90px; height: 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    32px -8px 0 -2px #fff,
    -28px 4px 0 -4px #fff,
    240px 24px 0 0 #fff,
    270px 14px 0 -4px #fff;
  opacity: 0.95;
}

/* CAFE scene: hanging mugs + shelf */
.scene-cafe::before {
  /* shelf */
  content: ''; position: absolute;
  top: 18%; left: 6%; right: 6%;
  height: 8px;
  background: #4a2a10;
  border-radius: 2px;
  box-shadow: 0 6px 6px rgba(0,0,0,0.4);
}
.scene-cafe::after {
  /* row of mugs (using box-shadow trick for repeated dots) */
  content: ''; position: absolute;
  top: calc(18% - 22px); left: 12%;
  width: 22px; height: 22px;
  background: #f0e0c8;
  border-radius: 3px 3px 8px 8px;
  border: 2px solid #4a2a10;
  box-shadow:
    50px  0 0 0 #d8b88a, 50px  0 0 2px #4a2a10,
    100px 0 0 0 #ffd23f, 100px 0 0 2px #4a2a10,
    150px 0 0 0 #c98a6a, 150px 0 0 2px #4a2a10,
    200px 0 0 0 #f0e0c8, 200px 0 0 2px #4a2a10,
    250px 0 0 0 #ff5d8f, 250px 0 0 2px #4a2a10,
    300px 0 0 0 #b8d8f0, 300px 0 0 2px #4a2a10;
}

/* TOWER scene: skyscraper silhouettes with lit windows */
.scene-tower::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 30%;
  height: 35%;
  background:
    /* lit windows pattern repeated */
    radial-gradient(circle 1.5px at 50% 50%, rgba(255, 220, 100, 0.95) 60%, transparent 65%) 0 0/12px 16px,
    /* building silhouettes - using clip-path-like gradients */
    linear-gradient(180deg, transparent 0%, #1a1230 30%, #0a0518 100%);
  clip-path: polygon(
    0% 100%,
    0% 60%, 8% 60%, 8% 30%, 14% 30%, 14% 70%,
    20% 70%, 20% 20%, 26% 20%, 26% 55%,
    32% 55%, 32% 40%, 40% 40%, 40% 65%,
    48% 65%, 48% 10%, 56% 10%, 56% 50%,
    64% 50%, 64% 25%, 72% 25%, 72% 60%,
    80% 60%, 80% 35%, 88% 35%, 88% 70%,
    96% 70%, 96% 45%, 100% 45%, 100% 100%
  );
}
.scene-tower::after {
  /* moon */
  content: ''; position: absolute;
  top: 8%; right: 14%;
  width: 56px; height: 56px;
  background: radial-gradient(circle at 35% 35%, #fff5e0 0%, #d4d4e0 70%, #8a8aa0 100%);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(255, 245, 224, 0.5);
}

/* MOON scene: Earth in distance + craters */
.scene-moon::before {
  /* Earth */
  content: ''; position: absolute;
  top: 12%; left: 14%;
  width: 100px; height: 100px;
  background:
    radial-gradient(ellipse 30px 18px at 30% 35%, #5fa14a 50%, transparent 55%),
    radial-gradient(ellipse 26px 14px at 65% 60%, #5fa14a 50%, transparent 55%),
    radial-gradient(ellipse 20px 12px at 20% 70%, #5fa14a 50%, transparent 55%),
    radial-gradient(circle, #4a7ba8 0%, #2a5680 70%, #1a3050 100%);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(74, 123, 168, 0.6);
}
.scene-moon::after {
  /* craters on the lunar surface */
  content: ''; position: absolute;
  left: 0; right: 0; bottom: 0; height: 40%;
  background:
    radial-gradient(circle 16px at 14% 40%, #4a4a5a 50%, transparent 55%),
    radial-gradient(circle 10px at 32% 60%, #4a4a5a 50%, transparent 55%),
    radial-gradient(circle 22px at 60% 30%, #4a4a5a 50%, transparent 55%),
    radial-gradient(circle 14px at 82% 55%, #4a4a5a 50%, transparent 55%),
    radial-gradient(circle 8px at 95% 35%, #4a4a5a 50%, transparent 55%);
}

/* MARS scene: two moons + red rocks */
.scene-mars::before {
  /* Phobos */
  content: ''; position: absolute;
  top: 8%; right: 24%;
  width: 30px; height: 26px;
  background: radial-gradient(ellipse at 35% 35%, #d8c8b0 0%, #8a7a6a 80%);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(216, 200, 176, 0.4);
}
.scene-mars::after {
  /* Deimos + red rocks */
  content: ''; position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 14px 10px at 88% 14%, #b8a890 60%, transparent 65%),
    /* rocks */
    radial-gradient(circle 16px at 12% 75%, #6a2818 60%, transparent 65%),
    radial-gradient(circle 22px at 28% 82%, #8b3a1a 60%, transparent 65%),
    radial-gradient(circle 14px at 70% 78%, #6a2818 60%, transparent 65%),
    radial-gradient(circle 18px at 88% 84%, #8b3a1a 60%, transparent 65%);
}

/* GALAXY scene: swirling nebula + distant planet */
.scene-galaxy::before {
  /* distant ringed planet */
  content: ''; position: absolute;
  top: 14%; right: 16%;
  width: 70px; height: 70px;
  background: radial-gradient(circle at 35% 35%, #ffd23f 0%, #ff9b3d 50%, #b04a00 100%);
  border-radius: 50%;
  box-shadow:
    0 0 32px rgba(255, 155, 61, 0.5),
    -8px 28px 0 -32px rgba(255, 210, 63, 0.6),
    0 0 0 8px transparent;
}
.scene-galaxy::after {
  /* spiral arms — conic gradient */
  content: ''; position: absolute;
  top: 50%; left: 30%;
  width: 280px; height: 280px;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(154, 77, 255, 0.18) 60deg,
    transparent 120deg, rgba(255, 93, 143, 0.18) 180deg,
    transparent 240deg, rgba(126, 224, 194, 0.18) 300deg,
    transparent 360deg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: galaxySpin 60s linear infinite;
  filter: blur(20px);
}
@keyframes galaxySpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ============================ LITTERBOX SKINS ====================== */
/* Default (couch) — cardboard */
.lb-shadow   { fill: rgba(0,0,0,0.45); }
.lb-body     { fill: #7a5a3d; stroke: #2a1810; }
.lb-top      { fill: #a37a52; stroke: #2a1810; }
.lb-interior { fill: #3d2a14; }
.lb-granule  { stroke: none; }
.lb-g-a      { fill: #d4b889; }
.lb-g-b      { fill: #c9a96f; }
.lb-label    { fill: #3d2a14; }

/* Garden — wooden planter */
.cat-stage[data-location="garden"] .lb-body     { fill: #8b5e30; stroke: #3a1f08; }
.cat-stage[data-location="garden"] .lb-top      { fill: #b07a45; stroke: #3a1f08; }
.cat-stage[data-location="garden"] .lb-interior { fill: #4a2a14; }
.cat-stage[data-location="garden"] .lb-g-a      { fill: #6a8540; }   /* soil with greens */
.cat-stage[data-location="garden"] .lb-g-b      { fill: #4a5530; }
.cat-stage[data-location="garden"] .lb-label    { fill: #2a4a1a; }

/* Cafe — burlap coffee bean sack */
.cat-stage[data-location="cafe"]   .lb-body     { fill: #b88a55; stroke: #4a2a10; }
.cat-stage[data-location="cafe"]   .lb-top      { fill: #d8a878; stroke: #4a2a10; }
.cat-stage[data-location="cafe"]   .lb-interior { fill: #2a1a08; }
.cat-stage[data-location="cafe"]   .lb-g-a      { fill: #4a2a18; }   /* coffee beans */
.cat-stage[data-location="cafe"]   .lb-g-b      { fill: #6a3a20; }
.cat-stage[data-location="cafe"]   .lb-label    { fill: #2a1a08; }

/* Mewtropolis — chrome / glass */
.cat-stage[data-location="tower"]  .lb-body     { fill: #a8b0c0; stroke: #1a1a2a; }
.cat-stage[data-location="tower"]  .lb-top      { fill: #d8dde8; stroke: #1a1a2a; }
.cat-stage[data-location="tower"]  .lb-interior { fill: #2a2840; }
.cat-stage[data-location="tower"]  .lb-g-a      { fill: #ffd23f; }   /* gold credit chips */
.cat-stage[data-location="tower"]  .lb-g-b      { fill: #d8b830; }
.cat-stage[data-location="tower"]  .lb-label    { fill: #1a1a2a; }

/* Moon — silver crate */
.cat-stage[data-location="moon"]   .lb-body     { fill: #5a5a6a; stroke: #1a1825; }
.cat-stage[data-location="moon"]   .lb-top      { fill: #8a8aa0; stroke: #1a1825; }
.cat-stage[data-location="moon"]   .lb-interior { fill: #1a1825; }
.cat-stage[data-location="moon"]   .lb-g-a      { fill: #e0e0ec; }   /* moon dust */
.cat-stage[data-location="moon"]   .lb-g-b      { fill: #b8b8c8; }
.cat-stage[data-location="moon"]   .lb-label    { fill: #fff5e0; opacity: 0.8; }

/* Mars — alien hex crate */
.cat-stage[data-location="mars"]   .lb-body     { fill: #8b3a1a; stroke: #2a0a04; }
.cat-stage[data-location="mars"]   .lb-top      { fill: #c64a2a; stroke: #2a0a04; }
.cat-stage[data-location="mars"]   .lb-interior { fill: #2a0a04; }
.cat-stage[data-location="mars"]   .lb-g-a      { fill: #ff8a5a; }   /* mars dust */
.cat-stage[data-location="mars"]   .lb-g-b      { fill: #d4583a; }
.cat-stage[data-location="mars"]   .lb-label    { fill: #fff5e0; opacity: 0.8; }

/* Galaxy — glowing portal/wormhole edge */
.cat-stage[data-location="galaxy"] .lb-body     { fill: #2a0a4a; stroke: #1a0530; }
.cat-stage[data-location="galaxy"] .lb-top      { fill: #6a2aa0; stroke: #1a0530; }
.cat-stage[data-location="galaxy"] .lb-interior { fill: #0a0218; }
.cat-stage[data-location="galaxy"] .lb-g-a      { fill: #ffd23f; }   /* star dust */
.cat-stage[data-location="galaxy"] .lb-g-b      { fill: #ff5d8f; }
.cat-stage[data-location="galaxy"] .lb-label    { fill: #ffd23f; opacity: 0.9; }
.cat-stage[data-location="galaxy"] #litterbox { filter: drop-shadow(0 0 16px rgba(255, 93, 143, 0.5)); }

/* ============================ LITTERBOX ============================= */
.litterbox {
  position: absolute;
  bottom: 76px;            /* above helper strip */
  left: 50%;
  transform: translateX(-50%);
  width: 360px;            /* wider so paws stay above litter */
  height: 150px;           /* taller so the rim reaches up to paw level */
  z-index: 4;              /* covers the cat's lower body so cat looks like it's IN the box */
  pointer-events: none;
  filter: drop-shadow(0 7px 10px rgba(0,0,0,0.65));
  animation: litterIdle 6s ease-in-out infinite;
}
.litterbox.scratch { animation: litterShake 0.32s ease-out; }
.litterbox svg { width: 100%; height: 100%; }
.litterbox.scraping { animation: litterShake 0.6s ease-out; }
/* NOTE: every keyframe must include translateX(-50%) so the centering transform
   is preserved — otherwise the box jumps half its width to the right. */
@keyframes litterIdle {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -2px); }
}
@keyframes litterShake {
  0%   { transform: translate(-50%, 0)                  rotate(0); }
  10%  { transform: translate(calc(-50% - 3px), 1px)    rotate(-1deg); }
  25%  { transform: translate(calc(-50% + 4px), -2px)   rotate(2deg); }
  40%  { transform: translate(calc(-50% - 3px), 1px)    rotate(-1.5deg); }
  60%  { transform: translate(calc(-50% + 3px), -1px)   rotate(1deg); }
  80%  { transform: translate(calc(-50% - 1px), 0)      rotate(0); }
  100% { transform: translate(-50%, 0)                  rotate(0); }
}
#litterGranules { transform-origin: 65px 33px; }
.litterbox.scraping #litterGranules { animation: granuleShuffle 0.6s ease-out; }
@keyframes granuleShuffle {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  60% { transform: translateY(1px); }
}

/* ============================ ALT COINS ============================ */
.alt-coin-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.alt-coin {
  position: absolute;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  display: grid; place-items: center;
  border: 2.5px solid;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
  animation: altFloat var(--dur, 3.4s) ease-out forwards;
  transform-origin: center;
  letter-spacing: 0.5px;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.alt-coin small { font-size: 8px; opacity: 0.85; margin-top: -2px; letter-spacing: 0; }
@keyframes altFloat {
  0%   { transform: translate(-50%, 0) scale(0.2) rotate(0); opacity: 0; }
  15%  { transform: translate(calc(-50% + var(--dx, 0px) * 0.4), calc(var(--dy-mid, -90px))) scale(1.15) rotate(180deg); opacity: 1; }
  85%  { transform: translate(calc(-50% + var(--dx, 0px)), calc(var(--dy-end, -160px))) scale(1) rotate(560deg); opacity: 0.95; }
  100% { transform: translate(calc(-50% + var(--dx, 0px) * 1.05), calc(var(--dy-end, -160px) - 30px)) scale(0.85) rotate(720deg); opacity: 0; }
}
.alt-coin:hover { filter: drop-shadow(0 0 14px currentColor) brightness(1.18); transform: translate(-50%, 0) scale(1.15) rotate(0); }
.alt-coin.caught { animation: altCaught 380ms ease-out forwards; pointer-events: none; }
@keyframes altCaught {
  0%   { transform: translate(-50%, 0) scale(1); opacity: 1; filter: drop-shadow(0 0 20px currentColor) brightness(1.4); }
  100% { transform: translate(-50%, -56px) scale(1.7); opacity: 0; }
}

/* ============================ HELPER STRIP ========================== */
.helper-strip {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 18px;
  z-index: 4;
  pointer-events: none;
  max-height: 110px;
}
.helper-slot {
  position: relative;
  width: 52px; height: 52px;
  background: linear-gradient(160deg, rgba(44, 34, 102, 0.85), rgba(26, 22, 64, 0.85));
  border: 2px solid var(--panel-edge-strong);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 -3px 0 rgba(0,0,0,0.3);
  flex-shrink: 0;
  pointer-events: auto;
  cursor: help;
  filter: drop-shadow(0 0 0 transparent);
  transition: filter 200ms ease-out;
}
.helper-slot.active { animation: helperBob 1.6s ease-in-out infinite; }
.helper-slot.wiggle { animation: helperWiggle 0.45s ease-out; }
.helper-slot:hover { filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.65)); }
.helper-slot:nth-child(2n).active { animation-delay: -0.4s; }
.helper-slot:nth-child(3n).active { animation-delay: -0.8s; }
.helper-slot:nth-child(4n).active { animation-delay: -1.2s; }
.helper-slot:nth-child(5n).active { animation-delay: -1.6s; }
@keyframes helperBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-7px) rotate(-3deg); }
}
@keyframes helperWiggle {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  30%  { transform: translateY(-12px) rotate(-12deg) scale(1.18); }
  60%  { transform: translateY(-6px) rotate(8deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

.helper-count {
  position: absolute;
  bottom: -6px;
  right: -8px;
  background: linear-gradient(180deg, var(--wen-gold), #c98a14);
  color: #2a1e57;
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 12px;
  border: 1.5px solid #2a1e57;
  letter-spacing: 0.3px;
  text-shadow: none;
  line-height: 1.2;
  pointer-events: none;
}

/* Helper voice — small thought bubble above a random helper in the strip.
   Fires periodically. Pure visual sugar that makes the crew feel alive. */
.helper-voice {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 22, 60, 0.95);
  border: 1px solid var(--wen-mint, #14f195);
  color: #c5ffec;
  padding: 4px 8px;
  border-radius: 12px;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  animation: helper-voice-life 3s ease-out forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.helper-voice::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--wen-mint, #14f195);
  border-bottom: 0;
}
@keyframes helper-voice-life {
  0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

.helper-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0a0720;
  border: 1px solid var(--panel-edge-strong);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
  z-index: 20;
}
.helper-slot:hover .helper-tip { opacity: 1; }

.helper-pop {
  position: absolute;
  bottom: 100%;
  left: 50%;
  font-family: 'Bungee', sans-serif;
  font-size: 12px;
  color: var(--wen-mint);
  text-shadow: 0 0 6px rgba(126, 224, 194, 0.7), 0 2px 0 rgba(0,0,0,0.55);
  white-space: nowrap;
  pointer-events: none;
  animation: helperPopFloat 1.1s ease-out forwards;
  transform: translate(-50%, 0);
}
@keyframes helperPopFloat {
  0%   { transform: translate(-50%, 0)    scale(0.55); opacity: 0; }
  18%  { transform: translate(-50%, -10px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -52px) scale(1);    opacity: 0; }
}

/* shrink helpers a little when many are owned to make room */
.helper-strip.compact .helper-slot { width: 42px; height: 42px; font-size: 22px; }
.helper-strip.compact .helper-count { font-size: 10px; padding: 1px 5px; }

/* ===========================  LOOT DROPS  =========================== */
.loot {
  position: absolute;
  width: 56px; height: 64px;
  pointer-events: auto;
  cursor: pointer;
  animation: lootFall var(--fall, 7s) linear forwards;
  transform: translate(-50%, 0);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  transition: filter 120ms ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.loot:hover { filter: drop-shadow(0 6px 14px rgba(255, 210, 63, 0.7)) brightness(1.15); }
.loot.collected { animation: lootCollect 360ms ease-out forwards; }
@keyframes lootFall {
  0% { top: -80px; transform: translate(-50%, 0) rotate(0); }
  100% { top: 110%; transform: translate(-50%, 0) rotate(360deg); }
}
@keyframes lootCollect {
  0% { transform: translate(-50%, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50px) scale(1.6); opacity: 0; }
}

.loot-bag {
  background: linear-gradient(180deg, #c69140 0%, #8b5d20 100%);
  border-radius: 8px 8px 14px 14px;
  border: 2px solid #5b3a18;
  display: grid;
  place-items: center;
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: #fff5e0;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  box-shadow: inset 0 -8px 0 rgba(0,0,0,0.2);
}
.loot-bag::before {
  content: ''; position: absolute; top: -6px; left: 8px; right: 8px; height: 10px;
  background: #5b3a18;
  border-radius: 4px 4px 0 0;
}
.loot-fish {
  background: linear-gradient(120deg, #7ee0c2 0%, #4cc3ff 100%);
  border: 2px solid #1a6b9a;
  border-radius: 50% 8% 50% 8%;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.loot-treat {
  background: radial-gradient(circle at 30% 30%, #fff2a8, var(--wen-gold) 55%, #c79a1a 100%);
  border: 2px solid #7a5400;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Bungee', sans-serif;
  font-size: 28px;
  color: #2a1e57;
  animation: lootFall var(--fall, 7s) linear forwards, lootSpin 2s linear infinite;
}
@keyframes lootSpin {
  0% { box-shadow: 0 0 16px rgba(255, 210, 63, 0.5); }
  50% { box-shadow: 0 0 28px rgba(255, 210, 63, 0.9); }
  100% { box-shadow: 0 0 16px rgba(255, 210, 63, 0.5); }
}

/* Era-themed loot capsules — colored circles with the emoji/text inside */
.loot-warm, .loot-cool, .loot-hot, .loot-fresh, .loot-gold {
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: 'Bungee', sans-serif;
  font-size: 26px;
  border-width: 2.5px;
  border-style: solid;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  letter-spacing: 0.5px;
  line-height: 1;
}
.loot-warm  { background: linear-gradient(160deg, #ffd23f 0%, #ff8b3d 100%); border-color: #5a3a18; color: #3a1a00; }
.loot-cool  { background: linear-gradient(160deg, #7ee0c2 0%, #4cc3ff 100%); border-color: #1a4a6b; color: #0a2a3a; }
.loot-hot   { background: linear-gradient(160deg, #ff9bba 0%, #ff5d8f 100%); border-color: #a83260; color: #fff;    }
.loot-fresh { background: linear-gradient(160deg, #a8e8c2 0%, #14f195 100%); border-color: #0a5a3a; color: #08291f; }
.loot-gold  {
  background: radial-gradient(circle at 30% 30%, #fff2a8 0%, #ffd23f 55%, #c79a1a 100%);
  border-color: #7a5400;
  color: #2a1e57;
  font-size: 22px;
  animation: lootFall var(--fall, 7s) linear forwards, lootGoldGlow 2s ease-in-out infinite;
}
@keyframes lootGoldGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 210, 63, 0.55); }
  50%      { box-shadow: 0 0 26px rgba(255, 210, 63, 0.9);  }
}
/* shorter text labels (BONK/WIF/etc.) render smaller so they fit */
.loot-warm, .loot-cool, .loot-hot, .loot-fresh { font-size: 24px; }
.loot:has(> *) { font-size: 11px; } /* fallback for long tickers */

/* ============================ MISSIONS BAR ========================== */
.quests-bar {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
}
.quest-tab {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  color: var(--wen-pink-soft);
  letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.quest-body { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.mission-jump {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--wen-mint), #0fae6f);
  color: #0a3025;
  border: 1px solid var(--wen-mint);
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 0.8px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 10px rgba(20, 241, 149, 0.35);
  transition: var(--transition);
  vertical-align: middle;
}
.mission-jump:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 0 14px rgba(20, 241, 149, 0.55);
  filter: brightness(1.05);
}
.quest-progress { height: 8px; background: rgba(0,0,0,0.4); border-radius: 4px; overflow: hidden; }
.quest-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wen-orange), var(--wen-gold));
  width: 0%;
  border-radius: 4px;
  transition: width 300ms ease-out;
  box-shadow: 0 0 12px rgba(255, 210, 63, 0.5);
}

/* ============================ TABS / SHOP =========================== */
.panel.right {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tabs {
  display: flex; gap: 0;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--panel-edge);
  flex-shrink: 0;
}
.tab-btn {
  flex: 1; background: none; border: none;
  color: var(--text-dim);
  padding: 14px 12px;
  font-family: 'Bungee', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: var(--transition);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--wen-gold);
  border-bottom-color: var(--wen-gold);
  background: rgba(255, 210, 63, 0.08);
}

.tab-content {
  padding: 10px; overflow-y: auto; flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--wen-gold) transparent;
}
.tab-content::-webkit-scrollbar { width: 6px; }
.tab-content::-webkit-scrollbar-thumb { background: var(--wen-gold); border-radius: 3px; }
.tab-content.hidden { display: none; }

.shop-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.shop-item:hover {
  background: rgba(255, 210, 63, 0.08);
  border-color: var(--panel-edge-strong);
  transform: translateX(2px);
}
.shop-item.affordable { border-color: var(--wen-mint); box-shadow: 0 0 10px rgba(126, 224, 194, 0.18); }
.shop-item.affordable::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--wen-mint);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.shop-item.locked {
  opacity: 0.55; cursor: default;
  background: rgba(0,0,0,0.4);
  border-style: dashed;
}
.shop-item.locked .shop-icon { filter: grayscale(1) brightness(0.6); }
.shop-item.locked .shop-name::after {
  content: '🔒'; margin-left: 6px; font-size: 12px;
}
.shop-item.maxed { opacity: 0.65; cursor: default; }
.shop-item.maxed::after {
  content: 'EQUIPPED';
  position: absolute; top: 6px; right: 8px;
  font-family: 'Bungee', sans-serif;
  font-size: 9px; color: var(--wen-mint);
  letter-spacing: 1px;
}

.shop-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2c2266, #1a1640);
  border: 1px solid var(--panel-edge);
  display: grid; place-items: center;
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.shop-meta { min-width: 0; }
.shop-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-effect { font-size: 11px; color: var(--wen-mint); margin-top: 2px; }
.shop-desc {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
  font-style: italic;
  line-height: 1.25;
}
.shop-side { text-align: right; min-width: 72px; }
.shop-cost {
  font-family: 'Bungee', sans-serif;
  font-size: 13px;
  color: var(--wen-gold);
  letter-spacing: 0.5px;
}
.shop-cost.unaffordable { color: var(--wen-pink); }
.shop-cost.owned { color: var(--wen-mint); }
.shop-owned { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

.shop-preview {
  font-size: 10px;
  color: var(--wen-purple);
  margin-top: 2px;
  letter-spacing: 0.3px;
  font-style: italic;
}

/* Era headers in the gear shop */
.gear-era-header {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  color: var(--wen-gold);
  letter-spacing: 1.2px;
  margin: 12px 0 6px;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(255, 210, 63, 0.18), transparent);
  border-left: 3px solid var(--wen-gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.gear-era-header:first-child { margin-top: 0; }
.gear-era-header.locked {
  color: var(--text-faint);
  border-left-color: var(--text-faint);
  background: linear-gradient(90deg, rgba(122, 109, 173, 0.12), transparent);
}
.gear-era-header .gear-era-emoji { font-size: 16px; }
.gear-era-header .gear-era-name  { flex: 1; }
.gear-era-header .gear-era-date  {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.shop-slot {
  text-transform: uppercase;
  font-size: 9px;
  font-family: 'Bungee', sans-serif;
  color: var(--text-faint);
  letter-spacing: 0.8px;
  font-weight: 400;
}

/* Stats sparkline (WEN/sec over last 60s) */
.stats-spark {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--panel-edge);
}
.stats-spark-label {
  font-family: 'Bungee', sans-serif;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--wen-mint);
  opacity: 0.85;
  margin-bottom: 4px;
}
.stats-spark-svg {
  display: block;
  width: 100%;
  height: 36px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  padding: 2px;
  box-sizing: border-box;
}

/* ============================ MODAL (settings, etc.) ================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 7, 32, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-card {
  position: relative;
  background: linear-gradient(135deg, #1a1640 0%, #100828 100%);
  border: 2px solid var(--panel-edge-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard), 0 0 40px rgba(255, 210, 63, 0.18);
  width: min(420px, 92vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn 220ms cubic-bezier(0.2, 0.7, 0.3, 1.25);
}
@keyframes modalIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-edge);
  background: rgba(255, 210, 63, 0.06);
}
.modal-head h2 {
  margin: 0;
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--wen-gold);
}
.modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-edge);
  color: var(--text);
  width: 30px; height: 30px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}
.modal-close:hover {
  background: rgba(255, 93, 143, 0.18);
  border-color: var(--wen-pink);
  color: var(--wen-pink);
}
.modal-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: var(--text);
}
.setting-label {
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.setting-row input[type="text"] {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-edge);
  color: var(--wen-gold);
  font-family: 'Bungee', sans-serif;
  font-size: 13px;
  letter-spacing: 0.8px;
  padding: 8px 12px;
  border-radius: 6px;
  width: 180px;
  text-align: right;
}
.setting-row input[type="text"]:focus {
  outline: none;
  border-color: var(--wen-gold);
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.2);
}
.setting-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--wen-mint);
  cursor: pointer;
}
.setting-divider {
  border: 0;
  border-top: 1px dashed var(--panel-edge);
  margin: 4px 0;
}
.setting-danger-btn {
  background: linear-gradient(135deg, #5b1a30, #3a0a18);
  border: 1px solid var(--wen-pink);
  color: var(--wen-pink);
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}
.setting-danger-btn:hover {
  background: linear-gradient(135deg, #7a2640, #4a1428);
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.setting-about {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  padding-top: 4px;
}
.setting-shortcuts {
  padding: 2px 0;
}
.setting-shortcuts-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 700;
}
.kbd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--text-dim);
}
.kbd-list kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  color: var(--wen-gold, #ffd23f);
  margin-right: 4px;
}
/* Cat fur color swatches — clickable circles in settings. Active gets a
   gold ring. Applies as a hue-rotate via .cat-stage's data-fur attribute. */
.fur-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.fur-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--fur, #aac);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: all 140ms ease;
}
.fur-swatch:hover { transform: scale(1.12); }
.fur-swatch.active {
  border-color: var(--wen-gold, #ffd23f);
  box-shadow: 0 0 8px rgba(255, 210, 63, 0.5);
}
/* Apply a hue/sat filter to the entire cat svg based on the fur selection.
   The cat's fur and accessories use the same gradient stops; this re-tints
   the body without breaking gear visibility. */
/* hue-rotate is applied to the entire SVG; values tuned starting from the
   default cyan-ish fur (~200°). Black uses saturation+brightness instead. */
.cat-stage[data-fur="black"]  #catSVG { filter: saturate(0.1) brightness(0.45); }
.cat-stage[data-fur="orange"] #catSVG { filter: sepia(0.6) hue-rotate(-30deg) saturate(2.6) brightness(1.05); }
.cat-stage[data-fur="pink"]   #catSVG { filter: sepia(0.5) hue-rotate(280deg) saturate(2.4) brightness(1.05); }
.cat-stage[data-fur="gold"]   #catSVG { filter: sepia(0.65) hue-rotate(-12deg) saturate(2.4) brightness(1.1); }
.cat-stage[data-fur="violet"] #catSVG { filter: sepia(0.55) hue-rotate(220deg) saturate(2.2) brightness(0.95); }

.setting-faux-wallet {
  margin-top: 6px;
  padding: 5px 8px;
  background: rgba(154, 77, 255, 0.08);
  border: 1px dashed rgba(154, 77, 255, 0.35);
  border-radius: 5px;
  font-size: 10px;
  color: var(--text-dim);
}
.setting-faux-wallet code {
  display: block;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  color: #e6b1ff;
  word-break: break-all;
  font-size: 9px;
  margin-top: 2px;
  cursor: help;
}

/* Save backup section — export to clipboard / import from text */
.setting-backup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0;
}
.setting-backup-head { display: flex; flex-direction: column; gap: 2px; }
.setting-backup-sub  { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.setting-backup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.setting-backup-btn {
  flex: 1;
  min-width: 130px;
  background: linear-gradient(135deg, rgba(20,241,149,0.13), rgba(20,241,149,0.06));
  border: 1px solid rgba(20,241,149,0.5);
  color: #b4f5d3;
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 1.2px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}
.setting-backup-btn:hover {
  background: linear-gradient(135deg, rgba(20,241,149,0.22), rgba(20,241,149,0.10));
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.setting-backup-box {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--panel-edge);
  border-radius: 6px;
  color: var(--text);
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  line-height: 1.4;
  padding: 8px 10px;
  resize: vertical;
}
.setting-backup-status {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
}
.setting-backup-status.ok   { background: rgba(20,241,149,0.12);  color: #14f195; border: 1px solid rgba(20,241,149,0.35); }
.setting-backup-status.err  { background: rgba(255,93,143,0.12);  color: #ff5d8f; border: 1px solid rgba(255,93,143,0.35); }

.setting-about-line {
  font-style: italic;
  opacity: 0.85;
}
.setting-prestige {
  background: linear-gradient(135deg, rgba(154, 77, 255, 0.12), rgba(20, 241, 149, 0.06));
  border: 1px solid rgba(154, 77, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
}
.setting-prestige-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.setting-prestige-count {
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  color: var(--wen-mint);
  text-shadow: 0 0 8px rgba(20, 241, 149, 0.4);
}
.setting-prestige-body {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}
.setting-prestige-body b {
  color: var(--wen-gold);
  font-weight: 700;
}
.setting-prestige-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--wen-purple), #5b2ab3);
  border: 1px solid rgba(154, 77, 255, 0.5);
  color: #fff;
  font-family: 'Bungee', sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition);
}
.setting-prestige-btn:not(:disabled):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 18px rgba(154, 77, 255, 0.4);
}
.setting-prestige-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(40, 28, 80, 0.5);
}
.setting-prestige-btn.ready {
  background: linear-gradient(135deg, #14f195, #0a7a55);
  color: #08291f;
  animation: prestigeReadyPulse 2.4s ease-in-out infinite;
}
@keyframes prestigeReadyPulse {
  0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 16px rgba(20, 241, 149, 0.4); }
  50%      { box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 28px rgba(20, 241, 149, 0.7); }
}

/* ============================ TOASTS ================================ */
.toast-layer {
  position: fixed;
  bottom: 70px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: linear-gradient(135deg, #2a1e57, #1a1640);
  border: 1px solid var(--panel-edge-strong);
  border-left: 4px solid var(--wen-gold);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-width: 260px;
  max-width: 340px;
  box-shadow: var(--shadow-soft), 0 0 16px rgba(255, 210, 63, 0.18);
  /* Fade + small lift instead of horizontal slide — slide-from-right made the
     element render off-screen on narrow viewports, which caused mobile browsers
     to scroll the page to "bring it into view" (especially with aria-live). */
  animation: toastIn 350ms ease-out, toastOut 350ms ease-in 3.5s forwards;
  display: flex;
  align-items: center;
  gap: 12px;
  will-change: transform, opacity;
}
.toast-icon { font-size: 28px; }
.toast-title {
  font-family: 'Bungee', sans-serif;
  font-size: 12px;
  color: var(--wen-gold);
  letter-spacing: 0.8px;
}
.toast-body { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.3; }
@keyframes toastIn  { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { to   { transform: translateY(-8px); opacity: 0; } }

/* ACHIEVEMENT TOAST — bigger, gold border, shimmer */
.toast.toast-achievement {
  background: linear-gradient(135deg, #3a2a08 0%, #2a1e57 60%, #3a1a5a 100%);
  border: 2px solid var(--wen-gold);
  border-left: 6px solid var(--wen-gold);
  box-shadow: var(--shadow-soft), 0 0 28px rgba(255, 210, 63, 0.45), 0 0 60px rgba(255, 93, 143, 0.25);
  padding: 14px 18px;
  min-width: 300px;
  position: relative;
  overflow: hidden;
  animation: toastIn 380ms cubic-bezier(0.2, 0.7, 0.3, 1.3), achievementGlow 1.6s ease-in-out infinite, toastOut 350ms ease-in 4.2s forwards;
}
.toast-achievement .achievement-icon {
  font-size: 36px;
  filter: drop-shadow(0 0 8px rgba(255, 210, 63, 0.8));
  animation: achievementIconSpin 1.2s ease-out;
}
.toast-achievement .toast-badge {
  font-family: 'Bungee', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--wen-gold);
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(255,210,63,0.5);
}
.toast-achievement .toast-title {
  font-size: 16px;
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 210, 63, 0.6);
}
.toast-achievement .toast-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: toastShine 2.2s ease-in-out 0.2s infinite;
  pointer-events: none;
}
@keyframes achievementGlow {
  0%, 100% { box-shadow: var(--shadow-soft), 0 0 22px rgba(255, 210, 63, 0.4), 0 0 60px rgba(255, 93, 143, 0.2); }
  50%      { box-shadow: var(--shadow-soft), 0 0 36px rgba(255, 210, 63, 0.7), 0 0 80px rgba(255, 93, 143, 0.4); }
}
@keyframes achievementIconSpin {
  0%   { transform: rotate(-30deg) scale(0.2); }
  60%  { transform: rotate(15deg) scale(1.3); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes toastShine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

/* ============================ FOOTER ================================ */
.footer {
  position: relative; z-index: 2;
  padding: 12px 24px;
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--panel-edge);
  background: rgba(10, 7, 32, 0.7);
  letter-spacing: 0.5px;
}
.version { color: var(--wen-gold); font-family: 'Bungee', sans-serif; }
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  color: rgba(20, 241, 149, 0.8);
}
.online-pill .online-dot {
  width: 6px; height: 6px;
  background: #14f195;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(20, 241, 149, 0.7);
  animation: online-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes online-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1180px) {
  .game { grid-template-columns: 240px 1fr 300px; }
  /* .cat-btn now uses clamp() — no override needed here */
}
@media (max-width: 980px) {
  /* Mobile layout — cat stage is hero, side panels move to bottom drawer.
     The whole experience fits in the viewport: compact header, era timeline,
     cat scene, mission bar, bottom nav. Tap a nav tab to open a drawer. */

  /* Mobile: page does NOT scroll. Body is exactly the visible viewport
     using dvh so it auto-resizes as iOS Safari shows/hides its address
     bar. No fullscreen prompt — we just live with whatever chrome the
     browser shows. The game shrinks/grows to fit. */
  html, body { overflow: hidden; height: 100%; }
  body { height: 100vh; height: 100dvh; }
  #screenShake {
    height: 100vh; height: 100dvh;
    overflow: hidden;
  }
  main.game { flex: 1; min-height: 0; }

  /* Compact topbar — brand + actions share row 1, counters take row 2.
     Auto-flow would push actions to a third row, so pin both explicitly. */
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 8px 12px;
  }
  .brand          { grid-row: 1; grid-column: 1; gap: 8px; }
  .topbar-actions { grid-row: 1; grid-column: 3; gap: 6px; }
  .counters       { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; align-items: stretch; }
  .coin-emblem { width: 32px; height: 32px; font-size: 14px; }
  .brand h1 { font-size: 15px; }
  .topbar-actions .save-indicator { display: none; }
  .icon-btn { width: 32px; height: 32px; padding: 4px; font-size: 14px; }
  .counter {
    min-width: 0;
    padding: 4px 8px;
    text-align: center;
  }
  .counter-label { font-size: 8px; letter-spacing: 0.6px; }
  .counter-value { font-size: 14px; margin-top: 0; }

  /* Era timeline tighter — wider nodes + no letter-spacing so "NOV 2023"
     and "JAN 2024" fit comfortably on a single line */
  nav.era-timeline { padding: 4px 8px; gap: 6px; }
  .era-node {
    padding: 4px 6px;
    min-width: 64px;
  }
  .era-node .era-emoji { font-size: 16px; }
  .era-node .era-date {
    font-size: 8px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Main game: only the center panel is shown. Left/right move to drawer. */
  .game {
    grid-template-columns: 1fr;
    padding: 8px;
    gap: 8px;
  }
  .panel.left,
  .panel.right { display: none; }
  .panel.center {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    gap: 8px;
  }
  .cat-stage {
    flex: 1;
    min-height: 320px;
    max-height: none;
  }
  /* Mobile: cat + litterbox sized as a matched pair. Litterbox should sit
     directly under the cat with a small overlap, helper-strip below.
     Tuned widths match clamp() ratios so visual proportions stay consistent. */
  .cat-btn {
    bottom: clamp(80px, 14vh, 110px);
    width: clamp(180px, 48vw, 220px);
    height: clamp(190px, 52vw, 230px);
  }
  /* Cat thought bubble re-anchored — base bottom:460 was off the top of the
     smaller mobile cat-stage. Place it directly above the cat instead. */
  .cat-thought {
    bottom: clamp(280px, 42vh, 360px);
    left: calc(50% + 60px);
  }
  .cat-thought-bubble { width: 48px; height: 48px; }
  .cat-thought-emoji { font-size: 24px; }
  .litterbox {
    bottom: clamp(58px, 11vh, 84px);
    width: clamp(170px, 52vw, 220px);   /* matched to the cat's bottom area */
    height: clamp(82px, 22vw, 100px);
  }
  /* Helper strip beneath — slightly larger slots so count pills fit cleanly
     within their own column. Extra row-spacing accommodates the dropped pill. */
  .helper-strip { bottom: 4px; padding: 0 6px; gap: 12px; max-height: 64px; }
  .helper-slot { width: 44px; height: 44px; }
  /* Helper count pill — visibly smaller than the slot. Bottom-centered.
     With the compact count format (×1.2K instead of ×1200) the pill stays
     short enough to clearly sit INSIDE the slot's column. */
  .helper-slot .helper-count {
    bottom: -6px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    padding: 1px 3px;
    border: 0;
    letter-spacing: 0;
    line-height: 1.1;
    border-radius: 5px;
    min-width: 0;
    max-width: 32px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  }
  .helper-slot .helper-pop { font-size: 10px; }
  /* Mission box compressed — title + body inline, tiny progress bar */
  .quests-bar { padding: 5px 10px 6px; margin-top: 0; }
  .quest-tab { display: inline; font-size: 8px; margin-right: 6px; opacity: 0.7; }
  .quest-body { display: inline; font-size: 11px; line-height: 1.25; margin: 0; color: var(--text-dim); }
  .quest-body b { color: var(--wen-cream); }
  .quest-progress { margin-top: 4px; height: 4px; }
  .quests-bar .mission-jump { padding: 3px 8px; font-size: 10px; margin: 4px 0 0; }
  /* Hide footer text content on mobile (keep online pill only) */
  footer.footer { padding: 6px 12px; font-size: 9px; gap: 8px; }
  footer.footer > span:first-child { display: none; }
  footer.footer .version { display: none; }

  /* Mobile sticky strip — sits ABOVE the bottom nav, shows next affordable
     upgrade. Two-tap targets: body opens the drawer, BUY quick-purchases. */
  .mobile-strip {
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, rgba(26, 22, 64, 0.95), rgba(14, 10, 38, 0.98));
    border-top: 1px solid rgba(255, 210, 63, 0.25);
    flex: 0 0 auto;
    z-index: 4;
  }
  .mobile-strip-tap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: none;
    border: 0;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    min-width: 0;
  }
  .mobile-strip-icon {
    font-size: 22px;
    flex-shrink: 0;
  }
  .mobile-strip-text { display: flex; flex-direction: column; min-width: 0; }
  .mobile-strip-label {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim, rgba(243,238,232,0.55));
  }
  .mobile-strip-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wen-cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-strip-buy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: linear-gradient(180deg, var(--wen-mint, #14f195), #0fae6f);
    border: 0;
    color: #062c1d;
    font-family: 'Bungee', sans-serif;
    cursor: pointer;
    min-width: 80px;
    transition: filter 140ms ease;
  }
  .mobile-strip-buy:hover { filter: brightness(1.1); }
  .mobile-strip-buy:active { filter: brightness(0.95); }
  .mobile-strip-cost { font-size: 10px; letter-spacing: 0.5px; }
  .mobile-strip-buy-label { font-size: 12px; letter-spacing: 1.5px; }
  /* BUY ALL — secondary button shown when there are 2+ affordable upgrades.
     Tighter, gold-tinted to differentiate from the primary green BUY. */
  .mobile-strip-buyall {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: linear-gradient(180deg, var(--wen-gold, #ffd23f), #b9881a);
    border: 0;
    color: #2a1e57;
    font-family: 'Bungee', sans-serif;
    cursor: pointer;
    min-width: 56px;
    border-left: 1px solid rgba(0,0,0,0.18);
    transition: filter 140ms ease;
  }
  .mobile-strip-buyall:hover { filter: brightness(1.1); }
  .mobile-strip-buyall:active { filter: brightness(0.95); }
  .mobile-strip-buyall-count { font-size: 11px; letter-spacing: 0.4px; }
  .mobile-strip-buyall-label { font-size: 10px; letter-spacing: 1px; }
  /* Empty state — strip stays the same height but reads as a quiet progress
     indicator so the layout doesn't shift when nothing is affordable. */
  .mobile-strip.empty {
    border-top-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(20, 16, 50, 0.85), rgba(14, 10, 38, 0.95));
  }
  .mobile-strip.empty .mobile-strip-icon { opacity: 0.55; }
  .mobile-strip.empty .mobile-strip-name {
    font-weight: 500;
    color: var(--text-dim, rgba(243, 238, 232, 0.55));
    font-size: 11px;
    font-style: italic;
  }

  /* Bottom nav — sticky strip at the bottom for quick access to sections */
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: linear-gradient(180deg, rgba(10, 7, 32, 0.85), rgba(10, 7, 32, 0.98));
    border-top: 1px solid var(--panel-edge-strong);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    z-index: 5;
  }
  .mobile-nav-btn {
    background: none;
    border: 0;
    color: var(--text-dim, rgba(243,238,232,0.65));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    font-family: 'Bungee', sans-serif;
    font-size: 10px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 140ms ease, color 140ms ease;
  }
  .mobile-nav-btn .mobile-nav-icon { font-size: 18px; line-height: 1; }
  .mobile-nav-btn:hover { color: var(--wen-cream); }
  .mobile-nav-btn.active {
    color: var(--wen-gold);
    background: rgba(255, 210, 63, 0.10);
  }
  /* Notification badge — appears on a tab when there's something to do */
  .mobile-nav-btn { position: relative; }
  .mobile-nav-badge {
    position: absolute;
    top: 2px;
    right: 18%;
    min-width: 8px;
    height: 8px;
    background: var(--wen-pink, #ff5d8f);
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(10, 7, 32, 0.95), 0 0 8px rgba(255, 93, 143, 0.6);
    animation: mnav-pulse 1.6s ease-in-out infinite;
  }
  .mobile-nav-badge.has-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-family: 'Bungee', sans-serif;
    font-size: 9px;
    color: #fff;
    display: grid;
    place-items: center;
    background: var(--wen-pink, #ff5d8f);
  }
  @keyframes mnav-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
  }

  /* Slide-up drawer for the moved panels */
  .mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
  }
  .mobile-drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(5, 4, 18, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .mobile-drawer.open .mobile-drawer-backdrop { opacity: 1; }
  .mobile-drawer-sheet {
    position: relative;
    width: 100%;
    max-height: 80vh;
    background: linear-gradient(180deg, #1a1640, #0e0a26);
    border-top: 1px solid var(--panel-edge-strong);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgba(0,0,0,0.5);
    transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-drawer.open .mobile-drawer-sheet { transform: translateY(0); }
  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    /* visual grab-handle */
    position: relative;
  }
  .mobile-drawer-head::before {
    content: '';
    position: absolute;
    top: 5px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
  }
  .mobile-drawer-title {
    font-family: 'Bungee', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--wen-gold);
    margin-top: 4px;
  }
  .mobile-drawer-close {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 2px;
  }
  .mobile-drawer-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 16px;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* Cards inside drawer: full width, no max-height inherited */
  .mobile-drawer-body .card { max-height: none; }
  .mobile-drawer-body .tab-content { padding: 0; flex: 0 0 auto; overflow: visible; }

  /* When drawer is open, hide the bottom nav so it doesn't compete */
  body.drawer-open .mobile-nav { opacity: 0; pointer-events: none; }

  /* Mobile toasts: anchor center-bottom, narrower. Cleared above strip+nav. */
  .toast-layer { left: 12px; right: 12px; bottom: 130px; align-items: stretch; }
  .toast { min-width: 0; width: 100%; max-width: 100%; padding: 8px 12px; }
  .toast-title { font-size: 11px; }
  .toast-body  { font-size: 12px; }
  .toast-icon  { font-size: 22px; }

  /* Buff badge — moved out of the topbar so it doesn't overlap counters.
     !important because the base .buff-badge rule lives later in the file
     with equal specificity. */
  .buff-badge {
    top: 148px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    min-width: 0 !important;
    padding: 4px 10px !important;
    font-size: 11px;
  }
  .buff-badge-title { font-size: 10px; }
  .buff-badge-timer { font-size: 11px; }
  .buff-badge-icon  { font-size: 18px; }

  /* Combo HUD — scaled down so it doesn't dominate the cat scene */
  .combo-hud { transform: translateX(-50%) scale(0.7); transform-origin: top center; }

  /* +N floats — scale down so they don't cover the whole scene on mobile */
  .float           { font-size: 16px; }
  .float.meme      { font-size: 14px; }
  .float.crit,
  .float.big       { font-size: 26px; letter-spacing: 0.5px; }
}

/* Desktop / wide viewports: hide mobile-only chrome */
@media (min-width: 981px) {
  .mobile-nav, .mobile-drawer, .mobile-strip, .fs-start-overlay { display: none !important; }
}

/* Fullscreen prompt — covers the screen with a clear swipe hint. Crucially
   pointer-events is auto on the card (for showing) but touch-action is
   pan-y so the user can swipe through to scroll the underlying page —
   which is what iOS Safari needs to hide its address bar. */
.fs-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 50%, rgba(28, 22, 60, 0.92), rgba(5, 4, 18, 0.96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fs-start-in 320ms ease-out;
  /* The overlay forwards vertical swipes to the page scroll so iOS will
     hide its chrome on the gesture. */
  touch-action: pan-y;
}
@keyframes fs-start-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fs-start-overlay.dismiss { animation: fs-start-out 280ms ease-in forwards; }
@keyframes fs-start-out {
  to { opacity: 0; transform: scale(0.96); }
}
.fs-start-card {
  width: min(360px, 92vw);
  background: linear-gradient(170deg, #221858, #100a2c);
  border: 1px solid rgba(255, 210, 63, 0.4);
  border-radius: 18px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 210, 63, 0.15);
}
.fs-start-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
  animation: fs-start-bob 2s ease-in-out infinite;
}
@keyframes fs-start-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.fs-start-title {
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  color: var(--wen-gold, #ffd23f);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.fs-start-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #f3eee8);
  margin-bottom: 18px;
}
/* Big animated arrow that hints "swipe up" */
.fs-swipe-arrow {
  font-size: 48px;
  font-family: 'Bungee', sans-serif;
  color: var(--wen-mint, #14f195);
  margin: 14px auto 6px;
  animation: fs-swipe-up 1.4s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(20, 241, 149, 0.65);
  line-height: 1;
}
@keyframes fs-swipe-up {
  0%   { transform: translateY(10px);  opacity: 0.4; }
  50%  { transform: translateY(-6px);  opacity: 1; }
  100% { transform: translateY(10px);  opacity: 0.4; }
}
.fs-start-hint {
  font-size: 11px;
  color: var(--text-dim, rgba(243, 238, 232, 0.6));
  margin-top: 14px;
  font-style: italic;
}
@media (max-width: 560px) {
  /* Narrow phones — most styling already handled by the <=980 block above.
     This block tightens a few additional things just for small screens. */
  .brand .tagline { display: none; }                /* settings ⚙ takes over */
  .toast-layer { bottom: 76px; }                    /* clear of bottom nav */
  .game { padding: 12px; gap: 12px; }
  .ach-list { grid-template-columns: repeat(5, 1fr); }
  .ach-section-grid { grid-template-columns: repeat(6, 1fr); }
  /* Make the settings modal fit smaller screens cleanly */
  .modal-card { width: min(400px, 96vw); max-height: 90vh; }
  .modal-body { padding: 12px 14px 16px; }
  .setting-row input[type="text"] { width: 140px; }
  /* Helper buy row tightens up */
  .helper-buy-row { grid-template-columns: repeat(2, 1fr); }
  /* Era timeline scrolls horizontally on mobile already; just compact dates */
  .era-node .era-date { font-size: 9px; }
  /* Sparkline still readable */
  .stats-spark-svg { height: 28px; }
  /* Tooltip narrower on mobile to fit screen */
  .era-tooltip { max-width: 240px; font-size: 11px; }
  .era-tooltip-flavor { font-size: 11px; }
}

/* Daily challenge card — one rotating challenge per day with a claim button.
   Shows progress bar and current/target. Hidden until the day's challenge is set. */
.daily-card { border: 1px solid rgba(255, 210, 63, 0.25); }
.daily-card h2 { color: var(--wen-gold, #ffd23f); }
.daily-body {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.daily-icon {
  font-size: 28px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255, 210, 63, 0.10);
  border: 1px solid rgba(255, 210, 63, 0.3);
  border-radius: 10px;
  flex-shrink: 0;
}
.daily-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.daily-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #f3eee8);
  line-height: 1.3;
}
.daily-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.daily-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  overflow: hidden;
}
.daily-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wen-gold, #ffd23f), var(--wen-mint, #14f195));
  border-radius: 3px;
  transition: width 280ms ease;
}
.daily-progress-label {
  font-size: 10px;
  font-weight: 700;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  color: var(--text-dim, rgba(243,238,232,0.65));
  white-space: nowrap;
}
.daily-claim-btn {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 210, 63, 0.08);
  border: 1px solid rgba(255, 210, 63, 0.3);
  border-radius: 6px;
  color: var(--text-dim, rgba(243,238,232,0.6));
  font-family: 'Bungee', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  cursor: not-allowed;
  transition: all 180ms ease;
}
.daily-claim-btn.ready {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(20,241,149,0.25), rgba(255,210,63,0.18));
  border-color: var(--wen-mint, #14f195);
  color: #c5ffec;
  animation: daily-ready-pulse 2s ease-in-out infinite;
}
.daily-claim-btn.ready:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
@keyframes daily-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(20, 241, 149, 0); }
  50%      { box-shadow: 0 0 16px rgba(20, 241, 149, 0.4); }
}

/* Collapsible cards — header clicks to toggle. Saves vertical space in the
   left panel without losing access to the data. Chevron rotates on collapse. */
.card.collapsible > h2.card-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding-right: 4px;
}
.card.collapsible > h2.card-toggle > span:first-child { flex: 1; }
.card-toggle-chevron {
  font-size: 12px;
  color: var(--text-dim, rgba(243,238,232,0.55));
  transition: transform 200ms ease;
  display: inline-block;
}
.card.collapsible[data-collapsed="true"] .card-toggle-chevron {
  transform: rotate(-90deg);
}
.card-toggle-count {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 210, 63, 0.8);
  background: rgba(255, 210, 63, 0.1);
  border: 1px solid rgba(255, 210, 63, 0.25);
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}
.card.collapsible[data-collapsed="true"] .card-body {
  display: none;
}
.card.collapsible .card-body {
  /* Tiny entrance so expanding doesn't feel jarring */
  animation: card-body-in 200ms ease-out;
}
@keyframes card-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card.collapsible > h2.card-toggle:hover {
  color: var(--wen-gold, #ffd23f);
}

/* Personal Records — high-water-mark list in the left panel. Hidden until the
   player has racked up at least one record worth showing. */
.records-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.records-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(255, 210, 63, 0.06);
  border: 1px solid rgba(255, 210, 63, 0.15);
  border-radius: 6px;
}
.records-list .record-icon {
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.records-list .record-label {
  font-size: 11px;
  color: var(--text-dim, rgba(243,238,232,0.7));
  letter-spacing: 0.04em;
}
.records-list b {
  font-family: 'JetBrains Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--wen-gold, #ffd23f);
}

/* Logo spin — one-off rotate on the W coin emblem when easter egg fires */
@keyframes spinOnce {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(720deg); }
}

/* Rave mode — triggered by Konami code (↑↑↓↓←→←→BA). 8 seconds of color
   cycling and a wobble. Pointer interaction is unaffected; just visual sugar. */
.cat-stage.rave-mode {
  animation: rave-color 0.4s linear infinite;
}
.cat-stage.rave-mode .cat-btn {
  animation: rave-wobble 0.5s ease-in-out infinite;
}
@keyframes rave-color {
  0%   { filter: hue-rotate(0deg) saturate(1.15); }
  25%  { filter: hue-rotate(90deg) saturate(1.4); }
  50%  { filter: hue-rotate(180deg) saturate(1.6); }
  75%  { filter: hue-rotate(270deg) saturate(1.4); }
  100% { filter: hue-rotate(360deg) saturate(1.15); }
}
@keyframes rave-wobble {
  0%, 100% { transform: rotate(-2deg) scale(1.02); }
  50%      { transform: rotate(2deg) scale(1.05); }
}

/* Floating buff badge — anchored top-center, fades in when an event is active.
   Shows icon + title + countdown timer + progress bar that drains. */
.buff-badge {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(28, 22, 60, 0.95), rgba(20, 14, 40, 0.95));
  border: 1px solid var(--wen-gold, #ffd23f);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(255, 210, 63, 0.3);
  backdrop-filter: blur(6px);
  animation: buff-badge-in 240ms ease-out;
  min-width: 220px;
}
@keyframes buff-badge-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.buff-badge-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  animation: buff-badge-icon-pulse 1.6s ease-in-out infinite;
}
@keyframes buff-badge-icon-pulse {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.12) rotate(3deg); }
}
.buff-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.buff-badge-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--wen-gold, #ffd23f);
  font-family: 'Bungee', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}
.buff-badge-timer {
  font-size: 10px;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  color: rgba(255,255,255,0.7);
}
.buff-badge-bar {
  position: absolute;
  left: 12px; right: 12px; bottom: 3px;
  height: 2px;
  background: rgba(0,0,0,0.3);
  border-radius: 1px;
  overflow: hidden;
}
.buff-badge-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--wen-gold, #ffd23f), var(--wen-mint, #14f195));
  border-radius: 1px;
  transition: width 200ms linear;
}

/* Settings cog pulses when prestige is ready (subtle "look here" signal) */
.icon-btn.prestige-ready-pulse {
  animation: prestige-cog-pulse 1.8s ease-in-out infinite;
  color: var(--wen-mint, #14f195);
  text-shadow: 0 0 8px rgba(20, 241, 149, 0.7);
}
@keyframes prestige-cog-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18) rotate(20deg); }
}

/* Cursor trail — tiny soft dots that fade out behind the cursor on cat-stage.
   Pointer-events off so they never block interaction. Cap is enforced in JS. */
.cursor-trail {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.7), rgba(255, 210, 63, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: cursor-trail-fade 700ms ease-out forwards;
  will-change: transform, opacity;
}
@keyframes cursor-trail-fade {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
}

/* Click ripple — expanding ring radiates from cat click point. Provides
   subtle tactile confirmation. Crit clicks get a gold ring instead of cyan. */
.click-ripple {
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid rgba(126, 224, 194, 0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: ripple-expand 580ms ease-out forwards;
  box-shadow: 0 0 8px rgba(126, 224, 194, 0.45);
}
.click-ripple.crit {
  border-color: var(--wen-gold, #ffd23f);
  box-shadow: 0 0 16px rgba(255, 210, 63, 0.6);
}
@keyframes ripple-expand {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(8);   opacity: 0; }
}

/* Cat idle animations — subtle ear twitches and eye blinks, periodic. They
   only run when the cat is in 'happy' mood (default), so they don't fight
   with the excited/sleepy mood styles. */
.cat-stage[data-mood="happy"] .cat-ear-left,
.cat-stage:not([data-mood]) .cat-ear-left {
  transform-origin: 60px 56px;
  animation: cat-ear-twitch-l 11s ease-in-out infinite;
}
.cat-stage[data-mood="happy"] .cat-ear-right,
.cat-stage:not([data-mood]) .cat-ear-right {
  transform-origin: 140px 56px;
  animation: cat-ear-twitch-r 13s ease-in-out infinite 1.5s;
}
@keyframes cat-ear-twitch-l {
  0%, 92%, 100% { transform: rotate(0deg); }
  94%           { transform: rotate(-8deg); }
  96%           { transform: rotate(4deg); }
  98%           { transform: rotate(-2deg); }
}
@keyframes cat-ear-twitch-r {
  0%, 92%, 100% { transform: rotate(0deg); }
  94%           { transform: rotate(8deg); }
  96%           { transform: rotate(-4deg); }
  98%           { transform: rotate(2deg); }
}

/* Eye blink — periodic squeeze when eyes are visible. Only happens in happy mood. */
.cat-stage[data-mood="happy"] .mood-happy,
.cat-stage:not([data-mood]) .mood-happy {
  transform-origin: 100px 101px;
  animation: cat-eye-blink 7s ease-in-out infinite;
}
@keyframes cat-eye-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
  97%           { transform: scaleY(1); }
}

/* Cat's Diary — chronological journal in a modal. Entries are color-coded
   by type so eras, achievements, eggs, and prestige all read distinctly. */
.diary-card {
  width: min(560px, 92vw);
  max-height: 80vh;
}
.diary-body { padding: 0; }
.diary-list {
  padding: 0;
  overflow-y: auto;
  max-height: calc(80vh - 80px);
}
.diary-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-dim, rgba(243,238,232,0.6));
  font-style: italic;
}
.diary-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}
.diary-entry:hover { background: rgba(255, 255, 255, 0.02); }
.diary-entry-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.diary-entry-body { flex: 1; min-width: 0; }
.diary-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.diary-entry-title {
  flex: 1;
  font-weight: 700;
  color: var(--text, #f3eee8);
  font-size: 13px;
}
.diary-entry-time {
  font-size: 10px;
  color: var(--text-dim, rgba(243,238,232,0.55));
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
}
.diary-entry-text {
  font-size: 12px;
  color: rgba(243, 238, 232, 0.75);
  line-height: 1.4;
}
/* Color-coding per entry type */
.diary-entry.diary-era         { border-left: 3px solid var(--wen-gold, #ffd23f); }
.diary-entry.diary-era         .diary-entry-icon { background: rgba(255, 210, 63, 0.12); border-color: rgba(255, 210, 63, 0.3); }
.diary-entry.diary-achievement { border-left: 3px solid var(--wen-mint, #14f195); }
.diary-entry.diary-achievement .diary-entry-icon { background: rgba(20, 241, 149, 0.12); border-color: rgba(20, 241, 149, 0.3); }
.diary-entry.diary-egg         { border-left: 3px solid var(--wen-pink, #ff5d8f); }
.diary-entry.diary-egg         .diary-entry-icon { background: rgba(255, 93, 143, 0.12); border-color: rgba(255, 93, 143, 0.3); }
.diary-entry.diary-prestige    { border-left: 3px solid #9945ff; }
.diary-entry.diary-prestige    .diary-entry-icon { background: rgba(153, 69, 255, 0.18); border-color: rgba(153, 69, 255, 0.4); }

/* Bonus Round banner — top-center, glowing, with live countdown */
.bonus-banner {
  position: fixed;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.96), rgba(255, 139, 61, 0.96));
  border: 2px solid #fff5b8;
  color: #2a1e57;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 1.5px;
  font-size: 14px;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(255, 210, 63, 0.5), 0 0 16px rgba(255, 210, 63, 0.4);
  z-index: 80;
  animation: bonus-bob 1.2s ease-in-out infinite;
}
.bonus-icon { font-size: 22px; }
.bonus-time {
  background: rgba(0, 0, 0, 0.18);
  color: #2a1e57;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  min-width: 36px;
  text-align: center;
}
@keyframes bonus-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* Cat moods — swap the inner eye contents and accessory layers based on the
   cat-stage's data-mood attribute. Set by JS based on activity (combo, idle, etc).
   Default mood: happy. The dark eye rings stay constant; only iris/highlight/zzz vary. */
.cat-stage .mood-excited,
.cat-stage .mood-sleepy,
.cat-stage .cat-sleepy-zzz { display: none; }
.cat-stage[data-mood="happy"]   .mood-happy   { display: inline; }
.cat-stage[data-mood="excited"] .mood-happy   { display: none; }
.cat-stage[data-mood="excited"] .mood-excited { display: inline; animation: cat-excited-spin 1.2s ease-in-out infinite; transform-origin: 100px 100px; }
.cat-stage[data-mood="sleepy"]  .mood-happy   { display: none; }
.cat-stage[data-mood="sleepy"]  .mood-sleepy  { display: inline; }
.cat-stage[data-mood="sleepy"]  .cat-sleepy-zzz { display: inline; animation: cat-zzz 2.2s ease-in-out infinite; }
@keyframes cat-excited-spin {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes cat-zzz {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px); }
}

/* Visitor lane — a horizontal strip near the bottom where cameo characters
   walk in from the right, pause briefly, drop a quote, then walk off-left.
   Sits just above the helper-strip so it doesn't fight for visual space. */
.visitor-lane {
  /* Walk above where the cat sits so visitors are fully visible. Anchored to
     a fraction of the cat-stage's height; tuned to fall between the scenery
     and the cat (cat takes the lower half). */
  position: absolute;
  left: 0; right: 0;
  bottom: 35%;
  height: 60px;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.visitor {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: visitor-walk 16s linear forwards;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
@keyframes visitor-walk {
  0%   { transform: translateX(110%); }
  20%  { transform: translateX(70%); }
  35%, 65% { transform: translateX(30%); }  /* pause to deliver line */
  80%  { transform: translateX(-10%); }
  100% { transform: translateX(-110%); }
}
.visitor-emoji {
  font-size: 38px;
  line-height: 1;
  animation: visitor-bob 0.7s ease-in-out infinite;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.25));
}
@keyframes visitor-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}
.visitor-bubble {
  background: rgba(28, 22, 60, 0.94);
  border: 1px solid var(--wen-gold, #ffd23f);
  border-radius: 12px;
  padding: 6px 10px;
  max-width: 240px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #f3eee8;
  line-height: 1.35;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0;
  animation: visitor-bubble-in 16s ease-out forwards;
}
@keyframes visitor-bubble-in {
  0%, 18%  { opacity: 0; transform: translateY(6px); }
  25%      { opacity: 1; transform: translateY(0); }
  68%      { opacity: 1; }
  78%, 100%{ opacity: 0; }
}
.visitor-bubble::after {
  content: '';
  position: absolute;
  left: -8px; bottom: 8px;
  border: 8px solid transparent;
  border-right-color: var(--wen-gold, #ffd23f);
  border-left: 0;
}

/* Ambient particles — drift across the scene, themed per era. Pointer-events off
   so they don't intercept clicks. Each particle's animation duration + delay is
   set inline by JS for per-particle staggering. */
.ambient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2; /* above scene art, below cat */
}
.ambient-particle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

/* Dust mote — small soft blob, drifts side-to-side as it floats up */
.ambient-particle.p-dust {
  width: 4px; height: 4px;
  background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%);
  border-radius: 50%;
  animation: amb-dust 14s linear forwards;
}
@keyframes amb-dust {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate(40px, -360px); }
}

/* Stars — twinkle then fade (mainnet) */
.ambient-particle.p-star {
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.6);
  animation: amb-star 5.5s ease-in-out forwards;
}
@keyframes amb-star {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.6) translateY(-30px); }
}

/* Leaves — drift down with a gentle sway (defi summer) */
.ambient-particle.p-leaf {
  width: 8px; height: 12px;
  background: linear-gradient(135deg, #7ed95a, #4a9a32);
  border-radius: 50% 0 50% 0;
  animation: amb-leaf 9s ease-in forwards;
}
@keyframes amb-leaf {
  0%   { opacity: 0; transform: translate(0, -20px) rotate(0deg); }
  10%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(50px, 380px) rotate(540deg); }
}

/* Snowflakes — slow fall with horizontal drift (winter) */
.ambient-particle.p-snow {
  width: 5px; height: 5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
  animation: amb-snow 13s linear forwards;
}
@keyframes amb-snow {
  0%   { opacity: 0; transform: translate(0, -20px); }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(60px, 460px); }
}

/* Sparks — rise up + fade, perfect for fire scenes (firedancer, outage warning) */
.ambient-particle.p-spark {
  width: 4px; height: 4px;
  background: radial-gradient(circle, #ffd23f, #ff5d8f);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 210, 63, 0.9);
  animation: amb-spark 4.5s ease-out forwards;
}
@keyframes amb-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate(0, -40px) scale(1); }
  100% { opacity: 0; transform: translate(20px, -300px) scale(0.3); }
}

/* JPEG squares — translucent rotating pixels (NFT szn) */
.ambient-particle.p-pixel {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, rgba(255,155,61,0.45), rgba(153,69,255,0.45));
  border: 1px solid rgba(255,255,255,0.25);
  animation: amb-pixel 11s linear forwards;
}
@keyframes amb-pixel {
  0%   { opacity: 0; transform: translate(0, -10px) rotate(0deg); }
  15%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(70px, 420px) rotate(540deg); }
}

/* Confetti — for breakpoint conference vibes (multi-color flecks) */
.ambient-particle.p-confetti {
  width: 8px; height: 3px;
  border-radius: 1px;
  animation: amb-confetti 7s linear forwards;
}
@keyframes amb-confetti {
  0%   { opacity: 0; transform: translate(0, -10px) rotate(0deg); }
  10%  { opacity: 0.85; }
  100% { opacity: 0; transform: translate(30px, 460px) rotate(720deg); }
}

/* Coins — money raining (memecoin era / airdrops) */
.ambient-particle.p-coin {
  width: 10px; height: 10px;
  background: radial-gradient(circle, #ffd23f, #c79a1a);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  animation: amb-coin 6s ease-in forwards;
}
@keyframes amb-coin {
  0%   { opacity: 0; transform: translate(0, -20px) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 460px) rotate(900deg); }
}

/* Code particles — small monospace 0/1 (garage/mainnet) */
.ambient-particle.p-code {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  color: rgba(126, 224, 194, 0.55);
  text-shadow: 0 0 4px rgba(126, 224, 194, 0.4);
  animation: amb-code 8s linear forwards;
}
@keyframes amb-code {
  0%   { opacity: 0; transform: translateY(-10px); }
  20%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(400px); }
}

/* Counter flash — when WEN balance / per-sec / per-click updates, the number
   briefly pulses. Subtle, but adds life to passive idle stats. */
@keyframes counter-flash {
  0%   { color: var(--wen-gold, #ffd23f); text-shadow: 0 0 8px rgba(255, 210, 63, 0.5); }
  100% { color: inherit; text-shadow: none; }
}
.counter-flash {
  animation: counter-flash 380ms ease-out 1;
}

/* Tickers collected — small grid of pill badges in the left panel.
   Each pill is a ticker the player has caught from the litterbox, with its count.
   Top-3 by count are gilded; the rest are dim. The card auto-hides until they've caught one. */
.ticker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(243, 238, 232, 0.7);
  letter-spacing: 0.02em;
  cursor: default;
  transition: transform 120ms ease, background 120ms ease;
}
.ticker-pill .ticker-name { font-weight: 700; }
.ticker-pill .ticker-count {
  font-size: 9px;
  font-weight: 700;
  color: rgba(243, 238, 232, 0.45);
  padding: 0 4px;
  background: rgba(0,0,0,0.25);
  border-radius: 5px;
}
.ticker-pill:hover { transform: translateY(-1px); }
.ticker-pill.top {
  background: linear-gradient(135deg, rgba(255,210,63,0.18), rgba(255,210,63,0.04));
  border-color: rgba(255, 210, 63, 0.4);
  color: var(--wen-gold, #ffd23f);
}
.ticker-pill.top .ticker-count { color: rgba(255, 210, 63, 0.7); }
.ticker-pill.wen-pill {
  background: linear-gradient(135deg, rgba(255, 93, 143, 0.25), rgba(153, 69, 255, 0.18));
  border-color: rgba(255, 93, 143, 0.55);
  color: #ffd23f;
  box-shadow: 0 0 12px rgba(255, 93, 143, 0.25);
}
.ticker-total {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

/* Era node — when current AND has an unfound egg, pulse the emoji gently
   to draw the eye. Less aggressive than a banner; still a clear nudge. */
.era-node.current .era-emoji {
  animation: era-emoji-bob 2.4s ease-in-out infinite;
}
@keyframes era-emoji-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Egg hint badge — appears in the location card when the era has an unfound egg.
   Click reveals a written hint (without spoiling exact pixel position). */
/* Universal hidden-attribute respect — without this, any explicit `display:` rule
   in a more-specific selector overrides the browser's default `[hidden] { display: none }`. */
[hidden] { display: none !important; }

/* Reduce motion — disables the most animation-heavy decorations so the page
   feels lighter on lower-end devices or for users who prefer less motion. */
body.reduce-motion .ambient-layer,
body.reduce-motion .visitor-lane,
body.reduce-motion .cursor-trail { display: none !important; }
body.reduce-motion .coin-emblem,
body.reduce-motion .era-node.current .era-emoji,
body.reduce-motion .egg-hint-icon,
body.reduce-motion .location-art::before,
body.reduce-motion .location-art::after,
body.reduce-motion .online-dot,
body.reduce-motion .ach.tier-legendary.unlocked,
body.reduce-motion .helper-slot.active { animation: none !important; }
body.reduce-motion * { transition-duration: 0.01ms !important; }

.egg-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 9px;
  background: rgba(255, 210, 63, 0.12);
  border: 1px dashed rgba(255, 210, 63, 0.5);
  border-radius: 14px;
  color: rgba(255, 210, 63, 0.9);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, color 140ms ease;
  font-family: var(--font-body, system-ui), sans-serif;
}
.egg-hint:hover {
  background: rgba(255, 210, 63, 0.22);
  color: #ffe88a;
  transform: translateY(-1px);
}
.egg-hint .egg-hint-icon {
  font-size: 13px;
  animation: egg-hint-pulse 1.8s ease-in-out infinite;
}
@keyframes egg-hint-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.25); opacity: 1; }
}

/* Era timeline hover tooltip — educational history popup */
.era-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  min-width: 240px;
  padding: 12px 14px;
  background: linear-gradient(170deg, rgba(28, 22, 60, 0.97), rgba(18, 14, 36, 0.97));
  border: 1px solid rgba(255, 210, 63, 0.5);
  border-radius: 12px;
  color: #f3eee8;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 210, 63, 0.08) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 140ms ease, transform 140ms ease;
  font-family: var(--font-body, system-ui), sans-serif;
}
.era-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.era-tooltip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.era-tooltip-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.era-tooltip-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.era-tooltip-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--wen-gold, #ffd23f);
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.era-tooltip-date {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.era-tooltip-mult {
  font-size: 11px;
  font-weight: 700;
  color: #14f195;
  background: rgba(20, 241, 149, 0.12);
  border: 1px solid rgba(20, 241, 149, 0.35);
  padding: 3px 7px;
  border-radius: 8px;
  flex-shrink: 0;
}
.era-tooltip-flavor {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 8px;
  color: rgba(243, 238, 232, 0.85);
}
.era-tooltip-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.era-tooltip-status.locked { color: #ff5d8f; }
.era-tooltip-status.visitable { color: #52e8c6; }
.era-tooltip-status.current { color: var(--wen-gold, #ffd23f); }
.era-tooltip-status.reached { color: rgba(243, 238, 232, 0.55); }