/* ============================================================================
   CHRONOS IDLE - GAME.CSS
   Header Buttons, 3D Metallic Medallion Icons, and Action Bar Scaling
   ============================================================================ */

/* 3D Metallic Medallion Circular Header Icons */
.header-btn-icon,
.hud-btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.15s ease, filter 0.15s ease;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.btn-action:hover .header-btn-icon,
.btn-action:hover .hud-btn-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.75)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

/* Explicit class-to-asset background mappings for 3D medallions */
.header-btn-icon.icon-great-minds,
.hud-btn-icon.icon-great-minds,
.icon-great-minds {
  background-image: url('/assets/icons/great-minds-icon.png');
}

.header-btn-icon.icon-overseers,
.hud-btn-icon.icon-overseers,
.icon-overseers {
  background-image: url('/assets/icons/overseers-icon.png');
}

.header-btn-icon.icon-shop,
.hud-btn-icon.icon-shop,
.icon-shop {
  background-image: url('/assets/icons/shop-icon.png');
}

.header-btn-icon.icon-mint,
.hud-btn-icon.icon-mint,
.header-btn-icon.icon-bullion,
.hud-btn-icon.icon-bullion,
.icon-mint,
.icon-bullion {
  background-image: url('/assets/icons/Bullion.png');
}

.header-btn-icon.icon-caravans,
.hud-btn-icon.icon-caravans,
.icon-caravans {
  background-image: url('/assets/icons/caravans-icon.png');
}

.header-btn-icon.icon-chronicles,
.hud-btn-icon.icon-chronicles,
.icon-chronicles {
  background-image: url('/assets/icons/chronicles-icon.png');
}

.header-btn-icon.icon-settings,
.hud-btn-icon.icon-settings,
.icon-settings {
  background-image: url('/assets/icons/settings-icon.png');
}

/* Stat Pill Medallion for Great Minds */
.hud-relic-img.gm-icon-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* ============================================================================
   TEMPORAL CARAVANS & EXPEDITION MODAL STYLES
   ============================================================================ */

/* Caravans Modal Dual-Tab Navigation */
.caravans-tab-nav {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.caravans-tab-btn {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.caravans-tab-btn:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  color: #f8fafc;
  border-color: rgba(234, 179, 8, 0.4);
}

.caravans-tab-btn.active {
  background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
  border-color: #f59e0b;
  color: #fef08a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
}

.temporal-locked-card {
  text-align: center;
  padding: 36px 20px;
  background: radial-gradient(circle at 50% 20%, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin: 12px 0;
}

.temporal-lock-emblem {
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, rgba(15, 23, 42, 0.4) 70%);
  border: 2px solid rgba(239, 68, 68, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
  animation: pulse-lock 3s infinite ease-in-out;
}

@keyframes pulse-lock {
  0%, 100% { transform: scale(1); box-shadow: 0 0 16px rgba(239, 68, 68, 0.35); }
  50% { transform: scale(1.05); box-shadow: 0 0 26px rgba(239, 68, 68, 0.6); }
}

.temporal-lock-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  color: #f87171;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.temporal-lock-message {
  font-size: 14px;
  color: #cbd5e1;
  max-width: 520px;
  margin: 0 auto 16px;
  line-height: 1.6;
}

.temporal-lock-req {
  display: inline-block;
  font-size: 12px;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 14px;
}

/* Unlocked Expeditions Container & Slots */
.temporal-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.expedition-slot-card {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.expedition-slot-card.active {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
}

.expedition-slot-card.ready-claim {
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.35);
  animation: glow-slot 2s infinite alternate;
}

@keyframes glow-slot {
  from { box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); }
  to { box-shadow: 0 0 22px rgba(245, 158, 11, 0.45); }
}

.expedition-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 8px;
}

.expedition-slot-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.expedition-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.expedition-status-badge.idle {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.expedition-status-badge.running {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.expedition-status-badge.completed {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid #f59e0b;
}

.expedition-progress-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.expedition-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 4px;
  transition: width 0.3s linear;
}

.btn-expedition-launch {
  background: linear-gradient(180deg, #1d4ed8 0%, #1e3a8a 100%);
  border: 1px solid #3b82f6;
  color: #eff6ff;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  margin-top: 8px;
}

.btn-expedition-launch:hover:not(:disabled) {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}

.btn-expedition-claim {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border: 1px solid #fde047;
  color: #ffffff;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
}

.btn-expedition-claim:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.7);
}

/* Custom Convoy Select Dropdown */
.custom-convoy-select {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-convoy-trigger {
  width: 100%;
  background: #0f172a;
  border: 1px solid rgba(234, 179, 8, 0.4);
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.custom-convoy-trigger:hover,
.custom-convoy-trigger:focus-visible {
  border-color: #eab308;
  background: #1e293b;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.25);
}

.custom-convoy-selected-val {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.convoy-currency-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.convoy-selected-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.custom-convoy-caret {
  color: #94a3b8;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.custom-convoy-select.open .custom-convoy-caret {
  transform: rotate(180deg);
  color: #eab308;
}

.custom-convoy-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #0b1120;
  border: 1px solid rgba(234, 179, 8, 0.5);
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(234, 179, 8, 0.2);
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

.custom-convoy-option {
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.custom-convoy-option:last-child {
  border-bottom: none;
}

.custom-convoy-option:hover {
  background: rgba(234, 179, 8, 0.15);
}

.custom-convoy-option.selected {
  background: rgba(56, 189, 248, 0.18);
  border-left: 3px solid #38bdf8;
}

/* ============================================================================
   PREMIUM SHOP - DYNAMIC SCI-FI / QUANTUM VECTOR ICONS & HOVER EFFECTS
   ============================================================================ */

.shop-card-top {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.shop-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.shop-premium-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  margin-right: 15px;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
  transition: transform 0.3s ease, filter 0.3s ease;
  transform-origin: center center;
  overflow: visible;
}

/* Premium Conversion Hover Effects */
.shop-card:hover .shop-premium-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 229, 255, 0.8));
}

/* ============================================================================
   ONBOARDING SEQUENCE: FIRST ASSET CYAN PULSE & HEADER MILESTONE LOCKING
   ============================================================================ */

@keyframes tutorialCyanPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7), inset 0 0 8px rgba(0, 229, 255, 0.3);
    border-color: #00e5ff;
  }
  50% {
    box-shadow: 0 0 22px 5px rgba(0, 229, 255, 0.95), inset 0 0 16px rgba(0, 229, 255, 0.55);
    border-color: #7dd3fc;
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7), inset 0 0 8px rgba(0, 229, 255, 0.3);
    border-color: #00e5ff;
  }
}

.asset-card.tutorial-pulse {
  animation: tutorialCyanPulse 1.6s infinite ease-in-out !important;
  border: 2px solid #00e5ff !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Visually locked / dimmed header buttons before 1,000 Era Wealth milestone */
.header-btn-dimmed {
  opacity: 0.36 !important;
  filter: grayscale(85%) !important;
  cursor: not-allowed !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  pointer-events: auto !important; /* Allow hover/click to inform user of milestone requirement */
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.header-btn-dimmed:hover {
  opacity: 0.5 !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

/* ============================================================================
   ACCESSIBILITY & HIGH CONTRAST FALLBACKS (NO-GLOW / LOW-GRAPHICS / DISABLE-GLOWS)
   ============================================================================ */

/* High-Contrast Selected Buy Quantity Buttons */
.buy-qty-btn.active,
.btn-toggle.active {
  background-color: #2a2a3e !important;
  border: 2px solid #ffd700 !important;
  color: #ffd700 !important;
  font-weight: 800 !important;
}

.no-glow .buy-qty-btn.active,
.low-graphics .buy-qty-btn.active,
body.disable-glows .buy-qty-btn.active,
.no-glow .btn-toggle.active,
.low-graphics .btn-toggle.active,
body.disable-glows .btn-toggle.active {
  background-color: #2a2a3e !important;
  background-image: none !important;
  border: 2px solid #ffd700 !important;
  color: #ffd700 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.no-glow .buy-qty-btn:not(.active),
.low-graphics .buy-qty-btn:not(.active),
body.disable-glows .buy-qty-btn:not(.active),
.no-glow .btn-toggle:not(.active),
.low-graphics .btn-toggle:not(.active),
body.disable-glows .btn-toggle:not(.active) {
  background-color: #1a1a2e !important;
  background-image: none !important;
  border: 1px solid #3d3d5c !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.no-glow .buy-qty-btn:hover:not(.active),
.low-graphics .buy-qty-btn:hover:not(.active),
body.disable-glows .buy-qty-btn:hover:not(.active),
.no-glow .btn-toggle:hover:not(.active),
.low-graphics .btn-toggle:hover:not(.active),
body.disable-glows .btn-toggle:hover:not(.active) {
  background-color: #2a2a3e !important;
  border-color: #ffd700 !important;
  color: #ffffff !important;
}

/* Explicit Fallback for Empty-Looking & Borderless Buttons */
.no-glow .btn,
.no-glow .header-btn,
.no-glow .btn-action,
.no-glow .buy-btn,
.no-glow .btn-buy,
.no-glow .interactive-el,
.low-graphics .btn,
.low-graphics .header-btn,
.low-graphics .btn-action,
.low-graphics .buy-btn,
.low-graphics .btn-buy,
.low-graphics .interactive-el,
body.disable-glows .btn,
body.disable-glows .header-btn,
body.disable-glows .btn-action,
body.disable-glows .buy-btn,
body.disable-glows .btn-buy,
body.disable-glows .interactive-el {
  background-color: #1a1a2e !important; /* dark, metallic solid fallback */
  background-image: none !important;
  border: 1px solid #3d3d5c !important; /* visible solid borders */
  color: #e0e0e0 !important;
}

.no-glow .btn:hover:not(:disabled),
.no-glow .header-btn:hover:not(:disabled),
.no-glow .btn-action:hover:not(:disabled),
.no-glow .interactive-el:hover:not(:disabled),
.low-graphics .btn:hover:not(:disabled),
.low-graphics .header-btn:hover:not(:disabled),
.low-graphics .btn-action:hover:not(:disabled),
.low-graphics .interactive-el:hover:not(:disabled),
body.disable-glows .btn:hover:not(:disabled),
body.disable-glows .header-btn:hover:not(:disabled),
body.disable-glows .btn-action:hover:not(:disabled),
body.disable-glows .interactive-el:hover:not(:disabled) {
  background-color: #2a2a3e !important;
  border-color: #ffd700 !important;
  color: #ffffff !important;
}

/* Primary CTA (EUREKA!) Fallback: Solid Bright Color, No Transparency or Glow */
.no-glow .eureka-spark,
.low-graphics .eureka-spark,
body.disable-glows .eureka-spark {
  background-color: #e5a93c !important;
  background-image: none !important;
  border: 2px solid #ffd700 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
  animation: none !important;
}

.no-glow .eureka-spark .eureka-label,
.low-graphics .eureka-spark .eureka-label,
body.disable-glows .eureka-spark .eureka-label {
  color: #0f172a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

.no-glow .eureka-spark:hover,
.low-graphics .eureka-spark:hover,
body.disable-glows .eureka-spark:hover {
  background-color: #ffd700 !important;
  border-color: #ffffff !important;
}

/* ============================================================================
   BATTERY SAVER MODE (PRESERVES 60FPS SMOOTHNESS, DISABLES GPU EXPENSIVE REPAINTS)
   ============================================================================ */

/* 1. Globally Disable Expensive Filters, Drop-Shadows, Blurs & Heavy Box-Shadows (Whitelisting Brief Cinematic Overlays) */
body.battery-saver *:not(#chronos-warp-overlay *):not(#chronos-monolith-cinematic *),
body.battery-saver *:not(#chronos-warp-overlay *):not(#chronos-monolith-cinematic *)::before,
body.battery-saver *:not(#chronos-warp-overlay *):not(#chronos-monolith-cinematic *)::after {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 2. Halt Sustained Continuous Background Particle Canvases & Decorative Shimmers */
body.battery-saver canvas.background-particles,
body.battery-saver .particle-canvas,
body.battery-saver .proclamation-shimmer {
  display: none !important;
}

/* 3. Disable Decorative Ambient Continuous Pulsing & Glow Keyframe Animations */
body.battery-saver .shimmer,
body.battery-saver .pulse-glow,
body.battery-saver .ambient-glow,
body.battery-saver .banner-shimmer,
body.battery-saver .glow-effect {
  animation: none !important;
}

/* 4. Disable CSS transitions on progress fills to guarantee 1:1 sync with 60fps RAF loop */
.progress-fill,
.asset-progress-fill {
  transition: none !important;
}

/* Parent Progress Track Neon Glow when Asset is in Overdrive (unclipped by overflow:hidden) */
body:not(.battery-saver) .progress-track.is-overdrive,
body:not(.battery-saver) .progress-bar-wrapper.is-overdrive {
  box-shadow: 0 0 14px 3px rgba(255, 165, 0, 0.85), 0 0 28px 6px rgba(255, 100, 0, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #ffe066 !important;
}

body.battery-saver .progress-track.is-overdrive,
body.battery-saver .progress-bar-wrapper.is-overdrive,
.battery-saver .progress-track.is-overdrive,
.battery-saver .progress-bar-wrapper.is-overdrive {
  box-shadow: none !important;
  border-color: var(--border-color, #334155) !important;
}

/* Overdrive Bar Moving Light-Sweep Shine, Layout & High-Contrast Dark Text */
@keyframes overdrive-shine-sweep {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.overdrive-bar,
.progress-fill.overdrive,
.progress-fill.overdrive-bar {
  width: 100% !important;
  background: linear-gradient(110deg, #ff8c00 25%, #ffd700 45%, #ffffff 50%, #ffd700 55%, #ff8c00 75%) !important;
  background-size: 200% 100% !important;
  animation: overdrive-shine-sweep 1.2s linear infinite !important;
  transition: none !important;
}

/* Battery Saver: Disable box-shadow, filter, and keyframes while keeping solid orange fill */
body.battery-saver .overdrive-bar,
body.battery-saver .progress-fill.overdrive,
body.battery-saver .progress-fill.overdrive-bar,
.battery-saver .overdrive-bar,
.battery-saver .progress-fill.overdrive,
.battery-saver .progress-fill.overdrive-bar {
  background: #ff9900 !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

.progress-bar-wrapper:has(.overdrive-bar) .progress-text,
.overdrive-bar ~ .progress-text {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 10px !important;
}

.overdrive-bar ~ .progress-text,
.overdrive-bar ~ .progress-text *,
.progress-bar-wrapper:has(.overdrive-bar) .progress-text,
.progress-bar-wrapper:has(.overdrive-bar) .progress-text * {
  color: #1a1a1a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.overdrive-bar ~ .progress-text .overdrive-badge,
.progress-bar-wrapper:has(.overdrive-bar) .progress-text .overdrive-badge,
.progress-bar-wrapper .progress-text .overdrive-badge {
  background-color: rgba(26, 26, 26, 0.15) !important;
  border-color: #1a1a1a !important;
  color: #1a1a1a !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

.overdrive-bar ~ .progress-text .quantum-bolt-icon,
.progress-bar-wrapper:has(.overdrive-bar) .progress-text .quantum-bolt-icon,
.progress-bar-wrapper .progress-text .quantum-bolt-icon {
  fill: #1a1a1a !important;
  color: #1a1a1a !important;
}

/* ============================================================================
   OVERDRIVE STATUS SUB-LABEL (Directly underneath the Overdrive bar track)
   ============================================================================ */
.overdrive-sub-label,
.speed-label.is-overdrive {
  color: #ffd700 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.overdrive-sub-label .overdrive-badge,
.speed-label.is-overdrive .overdrive-badge {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font-weight: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
}

.overdrive-sub-label svg,
.overdrive-sub-label .quantum-bolt-icon,
.speed-label.is-overdrive svg,
.speed-label.is-overdrive .quantum-bolt-icon {
  fill: currentColor !important;
  color: inherit !important;
}

/* Bright Golden Neon Illumination (Normal Mode: Battery Saver OFF) */
body:not(.battery-saver) .overdrive-sub-label,
body:not(.battery-saver) .speed-label.is-overdrive {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 140, 0, 0.7) !important;
  filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.8));
}

body:not(.battery-saver) .overdrive-sub-label svg,
body:not(.battery-saver) .overdrive-sub-label .quantum-bolt-icon,
body:not(.battery-saver) .speed-label.is-overdrive svg,
body:not(.battery-saver) .speed-label.is-overdrive .quantum-bolt-icon {
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.9));
}

/* Battery Saver Fallback (Readable Gold Without Glow) */
body.battery-saver .overdrive-sub-label,
body.battery-saver .speed-label.is-overdrive,
.battery-saver .overdrive-sub-label,
.battery-saver .speed-label.is-overdrive {
  color: #ffb700 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
}

body.battery-saver .overdrive-sub-label svg,
body.battery-saver .overdrive-sub-label .quantum-bolt-icon,
body.battery-saver .speed-label.is-overdrive svg,
body.battery-saver .speed-label.is-overdrive .quantum-bolt-icon,
.battery-saver .overdrive-sub-label svg,
.battery-saver .overdrive-sub-label .quantum-bolt-icon,
.battery-saver .speed-label.is-overdrive svg,
.battery-saver .speed-label.is-overdrive .quantum-bolt-icon {
  filter: none !important;
  text-shadow: none !important;
}

/* ============================================================================
   PREMIUM SVGS, ASSET SCALING, & GOLDEN AGE BANNER FLOW
   ============================================================================ */

/* Golden Age Banner in Document Flow (Natural Scrolling, No Overlap) */
.golden-age-banner {
  position: relative !important;
  margin: 0 auto 16px auto !important;
  z-index: 10 !important;
}

/* Mint Smelt Button Custom Sigil Asset */
.inline-sigil-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  object-fit: contain;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

/* Caravans Menu Custom Icon */
.inline-caravan-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
  display: inline-block;
}

/* Quantum Energy Bolt Inline Icon */
.quantum-bolt-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  fill: #ffd700;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

.quantum-bolt-icon.cyan {
  fill: #00e5ff;
  filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.7));
}

body.battery-saver .quantum-bolt-icon,
.battery-saver .quantum-bolt-icon {
  filter: none !important;
}

/* Pantheon Geometric Classical Pillar Icon */
.pantheon-pillar-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  stroke: #f59e0b;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
}

body.battery-saver .pantheon-pillar-icon,
.battery-saver .pantheon-pillar-icon {
  filter: none !important;
}

/* Astral Galleon / Celestial Compass Expedition Banner Icon */
.expedition-banner-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 8px;
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8));
}

body.battery-saver .expedition-banner-icon,
.battery-saver .expedition-banner-icon {
  filter: none !important;
}

/* Classical Spartan / Legionnaire Crest Holographic Icon */
.expedition-banner-icon.classical-crest {
  stroke: #ffd700;
  fill: none;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.8)) !important;
}

body.battery-saver .expedition-banner-icon.classical-crest,
.battery-saver .expedition-banner-icon.classical-crest {
  filter: none !important;
}

/* Quantum Signal / Chronos Data Node Transmission Icon */
.quantum-signal-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  stroke: #00e5ff;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.8));
  transition: filter 0.2s ease;
}

body.battery-saver .quantum-signal-icon,
.battery-saver .quantum-signal-icon {
  filter: none !important;
}

/* Epoch Currency Metallic Badges & Icons */
.epoch-currency {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.inline-curr-svg {
  display: inline-block;
  vertical-align: -2px;
  filter: drop-shadow(0 0 3px currentColor);
}

body.battery-saver .inline-curr-svg,
.battery-saver .inline-curr-svg {
  filter: none !important;
}

/* ============================================================================
   CHRONOS GATEWAY RELICS, SPACETIME VORTEX, & WORMHOLE SVGS
   ============================================================================ */

/* Chronos Gateway Activated Modal Relic Icons Container */
.chronos-relic-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 14px auto 18px auto;
}

.chronos-relic-icons .relic-icon {
  width: 48px;
  height: 48px;
  margin: 0 10px;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 10px currentColor);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.chronos-relic-icons .relic-icon:hover {
  transform: scale(1.12);
}

.chronos-relic-icons .relic-hourglass {
  color: #e5a93c;
  stroke: #e5a93c;
}

.chronos-relic-icons .relic-wormhole {
  color: #b366ff;
  stroke: #b366ff;
}

.chronos-relic-icons .relic-monolith {
  color: #00e5ff;
  stroke: #00e5ff;
}

body.battery-saver .chronos-relic-icons .relic-icon,
.battery-saver .chronos-relic-icons .relic-icon {
  filter: none !important;
}

/* Global Spacetime Wormhole Inline SVG */
.inline-wormhole-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 5px;
  filter: drop-shadow(0 0 4px rgba(179, 102, 255, 0.8));
  transition: filter 0.2s ease, transform 0.2s ease;
}

body.battery-saver .inline-wormhole-icon,
.battery-saver .inline-wormhole-icon {
  filter: none !important;
}

/* Enhanced Spacetime Vortex Warp Animation (2.5s Synced Dimensional Warp) */
@keyframes spacetime-vortex {
  0% {
    transform: none;
    filter: none;
    opacity: 1;
    box-shadow: none;
  }
  35% {
    transform: perspective(500px) translateZ(-150px) rotate(4deg);
    filter: blur(8px) contrast(200%) hue-rotate(180deg);
    opacity: 0.8;
    box-shadow: inset 0 0 100px rgba(179, 102, 255, 0.85);
  }
  70% {
    transform: perspective(500px) translateZ(-120px) rotate(-2deg);
    filter: blur(6px) contrast(180%) hue-rotate(120deg);
    opacity: 0.85;
    box-shadow: inset 0 0 120px rgba(0, 229, 255, 0.9);
  }
  88% {
    transform: scale(1.02);
    filter: blur(1.5px) contrast(130%);
    opacity: 0.95;
    box-shadow: 0 0 100px #ffffff, inset 0 0 120px #ffffff;
  }
  100% {
    transform: none;
    filter: none;
    opacity: 1;
    box-shadow: none;
  }
}

body.spacetime-vortex-active,
body.spacetime-vortex-active main,
body.spacetime-vortex-active header,
body.spacetime-vortex-active .epoch-nav {
  animation: spacetime-vortex 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Whitelist Spacetime Vortex Warp in Battery Saver Mode */
body.battery-saver.spacetime-vortex-active,
body.battery-saver .spacetime-vortex-active,
body.battery-saver.spacetime-vortex-active main,
body.battery-saver.spacetime-vortex-active header,
body.battery-saver.spacetime-vortex-active .epoch-nav {
  animation: spacetime-vortex 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Monolith Ancient Pillars Monument Visual in Awakening Cinematic */
.monolith-pillars-monument-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  z-index: 6;
}

.monolith-pillars-monument {
  width: 120px;
  height: 120px;
  stroke: #ffd700;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
  animation: monument-glow-pulse 3s ease-in-out infinite alternate;
}

@keyframes monument-glow-pulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
    transform: scale(0.98);
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 35px rgba(255, 225, 120, 0.6));
    transform: scale(1.02);
  }
}

body.battery-saver #chronos-monolith-cinematic .monolith-pillars-monument {
  stroke: #ffd700 !important;
  filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)) !important;
  animation: monument-glow-pulse 3s ease-in-out infinite alternate !important;
}

/* Ensure Chronos Warp Overlay completely releases pointer events when hidden */
#chronos-warp-overlay.hidden,
.chronos-warp-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Compact Production Rate Stat Box */
.stat-pill.stat-pill-rate {
  min-width: 140px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  justify-content: center;
}

#display-rate {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.rate-main-line {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-green);
  display: inline-flex;
  align-items: center;
}

.rate-sub-pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
  white-space: nowrap;
  line-height: 1.1;
  display: inline-block;
}