/* sgc-effects.css — Visual polish & sci-fi FX overlay
   Pure additive layer — no existing file modified */

/* ===== A. Hover glow on interactive cards ===== */
.unit-card,
.ship-card,
.tc-card.tc-avail,
.pog-bld-row {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.unit-card:hover,
.ship-card:hover,
.tc-card.tc-avail:hover,
.pog-bld-row:hover {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45), 0 0 40px rgba(var(--accent-rgb), 0.15);
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.6);
}

/* ===== B. Scanlines overlay on main panels ===== */
.pog-content,
.tr-panel,
.tr-center {
  position: relative;
}
.pog-content::after,
.tr-panel::after,
.tr-center::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(180, 220, 255, 0.06) 2px,
    rgba(180, 220, 255, 0.06) 3px
  );
  z-index: 999;
  border-radius: inherit;
}

/* ===== C. Neon text-shadow on section titles ===== */
.pog-section-title,
.tr-section-lbl,
.trc-header,
.tpb-title,
.sf-name {
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7), 0 0 25px rgba(var(--accent-rgb), 0.3);
}

/* ===== D. Progress bar glow during construction ===== */
.bld-prog-fill {
  box-shadow: 0 0 8px var(--warn), 0 0 20px rgba(240, 160, 48, 0.5);
  animation: progGlow 1.8s ease-in-out infinite;
}
@keyframes progGlow {
  0%, 100% { box-shadow: 0 0 8px var(--warn), 0 0 20px rgba(240, 160, 48, 0.5); }
  50%      { box-shadow: 0 0 14px var(--warn), 0 0 35px rgba(240, 160, 48, 0.7); }
}

/* ===== E. Notification & alert effects ===== */
.notif-toast {
  --nt-col: var(--accent);
  border-left: 3px solid var(--nt-col);
  animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  display:flex; align-items:center; gap:8px; position:relative; overflow:hidden;
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.15);
}
.nt-ico {
  font-size:16px; flex-shrink:0; opacity:0.9;
  filter:drop-shadow(0 0 4px currentColor);
}
.nt-msg { flex:1; }
.nt-timer {
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--nt-col); opacity:0.4; transform-origin:left;
  animation:ntTimer 5s linear forwards;
}
@keyframes ntTimer { from{transform:scaleX(1)} to{transform:scaleX(0)} }
.notif-toast.nt-exit {
  animation: toastOut 0.4s ease-in forwards;
}
@keyframes toastIn {
  0%   { opacity:0; transform:translateX(40px) scale(0.9); }
  100% { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes toastOut {
  0%   { opacity:1; transform:translateX(0); }
  100% { opacity:0; transform:translateX(50px) scale(0.85); }
}

.def-alert-bar {
  animation: alertPulse 1.5s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 60, 60, 0.4); }
  50%      { box-shadow: 0 0 25px rgba(255, 60, 60, 0.7); }
}

/* ===== F. Loading spinner ===== */
@keyframes sgcSpin {
  to { transform: rotate(360deg); }
}
.sgc-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: sgcSpin 0.8s linear infinite;
}

/* ===== G. Min font-size bumps (8-10px → 11px) ===== */
.cdx-tab,
.cdx-back,
.cdx-rarity-badge,
.art-discovery-btn {
  font-size: max(11px, inherit);
}

/* ===== K. ARTIFACT section — bigger fonts & stronger effects ===== */

/* Titles & labels bumped up */
.art-bonus-summary-title { font-size: 14px !important; letter-spacing: 4px; text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6); }
.art-progress-lbl        { font-size: 14px !important; letter-spacing: 4px; }
.art-rarity-badge        { font-size: 11px !important; padding: 4px 12px !important; }
.art-bonus-tag           { font-size: 13px !important; padding: 6px 14px !important; }
.art-discovery-btn       { font-size: 12px !important; padding: 12px 28px !important; }
.art-discovery-title     { font-size: 18px !important; letter-spacing: 10px; }
.art-discovery-name      { font-size: 24px !important; }
.art-discovery-rarity    { font-size: 15px !important; }
.art-discovery-fx        { font-size: 14px !important; }

/* Codex cards — bigger text */
.cdx-card-icon { font-size: 36px !important; margin-bottom: 10px !important; }
.cdx-card-name { font-size: 15px !important; }
.cdx-card-sub  { font-size: 12px !important; }
.cdx-tab       { font-size: 12px !important; padding: 14px 20px !important; }
.cdx-back      { font-size: 11px !important; }
.cdx-title     { font-size: 22px !important; }

/* Progress bar — thicker + glow */
.art-progress-bar {
  height: 10px !important;
  border-radius: 5px !important;
}
.art-progress-fill {
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6), 0 0 30px rgba(var(--accent-rgb), 0.3) !important;
}

/* Bonus summary — stronger border glow */
.art-bonus-summary {
  border-color: rgba(var(--accent-rgb), 0.4) !important;
  box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.12), inset 0 0 30px rgba(var(--accent-rgb), 0.04);
}

/* ===== L. Rarity Accordion (collapsible) ===== */
.art-accordion {
  margin-bottom: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(var(--accent-rgb), 0.02);
}
.art-accordion-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s;
  border-bottom: 1px solid transparent;
}
.art-accordion-hdr:hover {
  background: rgba(var(--accent-rgb), 0.06);
}
.art-accordion-arrow {
  font-size: 11px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}
.art-acc-open > .art-accordion-hdr .art-accordion-arrow {
  transform: rotate(90deg);
}
.art-accordion-count {
  margin-left: auto;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 1px;
}
.art-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.art-acc-open > .art-accordion-body {
  max-height: 2000px;
}
.art-accordion-body > .cdx-grid {
  padding: 12px 14px 16px;
}

/* Rarity-colored left border on accordion */
.art-accordion[data-rarity="common"]   { border-left: 3px solid rgba(124,201,124,0.5); }
.art-accordion[data-rarity="rare"]     { border-left: 3px solid rgba(110,170,255,0.5); }
.art-accordion[data-rarity="legendary"]{ border-left: 3px solid rgba(255,187,51,0.5); }
.art-accordion[data-rarity="ancient"]  { border-left: 3px solid rgba(0,229,255,0.5); }

/* Header text glow by rarity */
.art-accordion-hdr.art-rarity-common    { color: #7cc97c; text-shadow: 0 0 12px rgba(124,201,124,0.5); }
.art-accordion-hdr.art-rarity-rare      { color: #6eaaff; text-shadow: 0 0 12px rgba(110,170,255,0.5); }
.art-accordion-hdr.art-rarity-legendary { color: #ffbb33; text-shadow: 0 0 14px rgba(255,187,51,0.5); }
.art-accordion-hdr.art-rarity-ancient   { color: #00e5ff; text-shadow: 0 0 14px rgba(0,229,255,0.6); }

/* Open state — glow border */
.art-acc-open.art-accordion[data-rarity="common"]   { box-shadow: 0 0 15px rgba(124,201,124,0.12); }
.art-acc-open.art-accordion[data-rarity="rare"]     { box-shadow: 0 0 15px rgba(110,170,255,0.12); }
.art-acc-open.art-accordion[data-rarity="legendary"]{ box-shadow: 0 0 15px rgba(255,187,51,0.15); }
.art-acc-open.art-accordion[data-rarity="ancient"]  { box-shadow: 0 0 18px rgba(0,229,255,0.15); }

/* Rarity cards — stronger hover glow */
.cdx-card[data-rarity="common"]:hover  { box-shadow: 0 0 20px rgba(124,201,124,0.3), 0 4px 20px rgba(124,201,124,0.15) !important; }
.cdx-card[data-rarity="rare"]:hover    { box-shadow: 0 0 20px rgba(110,170,255,0.35), 0 4px 20px rgba(110,170,255,0.18) !important; }
.cdx-card[data-rarity="legendary"]:hover { box-shadow: 0 0 25px rgba(255,187,51,0.4), 0 4px 20px rgba(255,187,51,0.2) !important; }
.cdx-card[data-rarity="ancient"]:hover { box-shadow: 0 0 25px rgba(0,229,255,0.4), 0 4px 20px rgba(0,229,255,0.2) !important; }

/* Rarity left accent bar — thicker + glow */
.cdx-card[data-rarity]::after { width: 4px !important; opacity: 0.85 !important; }
.cdx-card[data-rarity="common"]::after  { box-shadow: 0 0 8px rgba(124,201,124,0.4); }
.cdx-card[data-rarity="rare"]::after    { box-shadow: 0 0 8px rgba(110,170,255,0.4); }
.cdx-card[data-rarity="legendary"]::after { box-shadow: 0 0 8px rgba(255,187,51,0.5); }
.cdx-card[data-rarity="ancient"]::after { box-shadow: 0 0 10px rgba(0,229,255,0.5); }

/* Discovery popup — stronger glow ring */
.art-discovery-popup {
  box-shadow: 0 0 80px rgba(var(--accent-rgb), 0.15), 0 0 160px color-mix(in srgb, var(--art-color) 30%, transparent) !important;
}
.art-discovery-glow {
  border-width: 3px !important;
  opacity: 0.7 !important;
}

/* Codex detail overlay — bigger fonts */
.cdx-detail-icon  { font-size: 52px !important; }
.cdx-detail-name  { font-size: 18px !important; }
.cdx-detail-sub   { font-size: 14px !important; }
.cdx-detail-row   { font-size: 15px !important; }
.cdx-detail-desc  { font-size: 15px !important; }
.cdx-detail-close { font-size: 12px !important; }

/* ===== M. Section accordion — bigger titles ===== */
.section-accordion {
  font-size: 16px !important;
  letter-spacing: 3px !important;
  padding: 14px 18px !important;
}
.section-accordion .chevron {
  font-size: 18px !important;
}

/* ===== H. Active state press feedback ===== */
.pog-bld-btn:active,
.uc-train:active,
.sc-build:active,
.tc-btn:active {
  transform: scale(0.95);
  transition: transform 0.08s ease;
}

/* ===== I. Ambient glow on accent borders ===== */
.pog-section-title {
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.4);
  padding-bottom: 4px;
}

/* ===== J. Button hover glow ===== */
.pog-bld-btn:hover,
.uc-train:hover,
.sc-build:hover,
.tc-btn:hover {
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.2);
  filter: brightness(1.15);
}

/* ===== N. Resource image icons ===== */
.rb-ico {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.25));
  margin-right: 1px;
}
.rp-ico {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.25));
}
img.res-ico {
  vertical-align: middle;
  object-fit: contain;
  margin-right: 3px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.35));
}
/* Per-resource colored glows on icons */
img.res-ico.metal  { filter: drop-shadow(0 0 5px rgba(91,141,217,0.6)) drop-shadow(0 0 10px rgba(91,141,217,0.25)); }
img.res-ico.naq    { filter: drop-shadow(0 0 5px rgba(240,192,64,0.6)) drop-shadow(0 0 10px rgba(240,192,64,0.25)); }
img.res-ico.naqria { filter: drop-shadow(0 0 5px rgba(72,202,228,0.6)) drop-shadow(0 0 10px rgba(72,202,228,0.25)); }
img.res-ico.energy { filter: drop-shadow(0 0 5px rgba(240,192,64,0.6)) drop-shadow(0 0 10px rgba(240,192,64,0.25)); }
img.res-ico.pop    { filter: drop-shadow(0 0 5px rgba(46,204,136,0.6)) drop-shadow(0 0 10px rgba(46,204,136,0.25)); }

/* Resource value text next to icons — enhanced visibility */
.bld-cost-item       { font-weight:700; font-size:14px; color:var(--textbright); }
.bld-stat-badge-label img.res-ico { width:18px; height:18px; }
.tc-cost img.res-ico  { width:14px; height:14px; }
.res-tech-cost img.res-ico { width:14px; height:14px; }

/* Resource-colored text for inline values */
span.metal, .metal > span  { color:#7ab3ff; text-shadow:0 0 6px rgba(91,141,217,0.3); font-weight:700; }
span.naq, .naq > span      { color:#f0c040; text-shadow:0 0 6px rgba(212,146,10,0.3); font-weight:700; }
span.naqria, .naqria > span { color:#5ee8ff; text-shadow:0 0 6px rgba(72,202,228,0.3); font-weight:700; }

/* Notification toasts — allow img inside */
.notif-toast img.res-ico { width:16px; height:16px; vertical-align:-3px; }

/* Topbar resource items — alignment */
.rb-lbl { display: inline-flex; align-items: center; line-height: 1; }

/* ===== O. Resource storage warnings ===== */
/* Right-panel bar: amber glow when >90%, red pulse when full */
.rp-bar-fill.res-warn {
  background: linear-gradient(90deg, rgba(var(--rc-rgb,var(--accent-rgb)),0.6), #f0a030) !important;
  box-shadow: 0 0 8px rgba(240,160,48,0.6), 0 0 16px rgba(240,160,48,0.2) !important;
}
.rp-bar-fill.res-full {
  background: linear-gradient(90deg, #cc3030, #ff5555) !important;
  box-shadow: 0 0 10px rgba(255,60,60,0.7), 0 0 24px rgba(255,60,60,0.3) !important;
  animation: resFullPulse 1.8s ease-in-out infinite;
}
/* Right-panel card warnings */
.rp-res-card:has(.res-warn) { border-color: rgba(240,160,48,0.35) !important; }
.rp-res-card:has(.res-full) { border-color: rgba(255,60,60,0.4) !important; animation: rpCardFullPulse 2s ease-in-out infinite; }
@keyframes rpCardFullPulse {
  0%, 100% { box-shadow: inset 0 0 6px rgba(255,60,60,0.05), 0 0 4px rgba(255,60,60,0.1); }
  50%      { box-shadow: inset 0 0 12px rgba(255,60,60,0.12), 0 0 10px rgba(255,60,60,0.2); }
}
@keyframes resFullPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,60,60,0.5), 0 0 16px rgba(255,60,60,0.15); }
  50%      { box-shadow: 0 0 14px rgba(255,60,60,0.9), 0 0 30px rgba(255,60,60,0.35); }
}
/* Topbar item: subtle border glow when approaching max */
.rb-item.res-warn {
  border-color: rgba(240,160,48,0.5) !important;
  box-shadow: inset 0 0 8px rgba(240,160,48,0.1), 0 0 6px rgba(240,160,48,0.15);
}
.rb-item.res-full {
  border-color: rgba(255,60,60,0.6) !important;
  box-shadow: inset 0 0 10px rgba(255,60,60,0.12), 0 0 8px rgba(255,60,60,0.2);
  animation: rbFullPulse 2s ease-in-out infinite;
}
@keyframes rbFullPulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(255,60,60,0.08), 0 0 6px rgba(255,60,60,0.15); }
  50%      { box-shadow: inset 0 0 14px rgba(255,60,60,0.18), 0 0 12px rgba(255,60,60,0.3); }
}
/* Resource value flash when a big gain arrives */
.rb-val.res-flash, .rp-res-val.res-flash {
  animation: resFlash 0.6s ease-out;
}
@keyframes resFlash {
  0%   { filter: brightness(2.2); transform: scale(1.15); }
  100% { filter: brightness(1);   transform: scale(1);    }
}

/* ===== P. Page transition fade between sections ===== */
#planetSection,
.sec-full {
  transition: opacity 0.18s ease-out;
}
#planetSection.sec-fading,
.sec-full.sec-fading {
  opacity: 0;
}

/* ===== Q. Stagger fade-in on grid cards ===== */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bld-grid > .bld-card,
.bld-grid > .res-tech-card,
.og-bld-grid > .og-bld-card {
  animation: cardFadeIn 0.3s ease-out both;
}
.bld-grid > :nth-child(1)  { animation-delay: 0ms; }
.bld-grid > :nth-child(2)  { animation-delay: 40ms; }
.bld-grid > :nth-child(3)  { animation-delay: 80ms; }
.bld-grid > :nth-child(4)  { animation-delay: 120ms; }
.bld-grid > :nth-child(5)  { animation-delay: 160ms; }
.bld-grid > :nth-child(6)  { animation-delay: 200ms; }
.bld-grid > :nth-child(7)  { animation-delay: 240ms; }
.bld-grid > :nth-child(8)  { animation-delay: 280ms; }
.bld-grid > :nth-child(9)  { animation-delay: 320ms; }
.bld-grid > :nth-child(10) { animation-delay: 360ms; }
.bld-grid > :nth-child(n+11) { animation-delay: 400ms; }
.og-bld-grid > :nth-child(1)  { animation-delay: 0ms; }
.og-bld-grid > :nth-child(2)  { animation-delay: 35ms; }
.og-bld-grid > :nth-child(3)  { animation-delay: 70ms; }
.og-bld-grid > :nth-child(4)  { animation-delay: 105ms; }
.og-bld-grid > :nth-child(5)  { animation-delay: 140ms; }
.og-bld-grid > :nth-child(6)  { animation-delay: 175ms; }
.og-bld-grid > :nth-child(7)  { animation-delay: 210ms; }
.og-bld-grid > :nth-child(8)  { animation-delay: 245ms; }
.og-bld-grid > :nth-child(n+9) { animation-delay: 280ms; }
.res-tech-grid > .res-tech-card {
  animation: cardFadeIn 0.3s ease-out both;
}
.res-tech-grid > :nth-child(1) { animation-delay: 0ms; }
.res-tech-grid > :nth-child(2) { animation-delay: 50ms; }
.res-tech-grid > :nth-child(3) { animation-delay: 100ms; }
.res-tech-grid > :nth-child(4) { animation-delay: 150ms; }
.res-tech-grid > :nth-child(5) { animation-delay: 200ms; }
.res-tech-grid > :nth-child(6) { animation-delay: 250ms; }
.res-tech-grid > :nth-child(n+7) { animation-delay: 300ms; }

/* ===== R. Ripple effect on buttons ===== */
.ripple-host { position: relative; overflow: hidden; }
.ripple-ring {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: rippleExpand 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ===== S. Particle trail on active progress bars ===== */
.og-slot.building .og-slot-fill::after,
.bld-card .bld-prog-fill::after {
  content: '';
  position: absolute;
  top: -1px; right: -2px;
  width: 8px; height: calc(100% + 2px);
  background: radial-gradient(circle, rgba(255,220,120,0.95) 0%, rgba(240,160,48,0.6) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,200,60,0.7), 0 0 14px 4px rgba(240,160,48,0.3);
  animation: progParticle 1.2s ease-in-out infinite;
}
@keyframes progParticle {
  0%, 100% { opacity: 0.6; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
/* Flowing dots along the bar */
.og-slot.building .og-slot-fill::before,
.bld-card .bld-prog-fill::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 12px,
    rgba(255,255,255,0.3) 12px,
    rgba(255,255,255,0.3) 16px
  );
  animation: progFlow 0.8s linear infinite;
}
@keyframes progFlow {
  from { background-position: 0 0; }
  to   { background-position: 28px 0; }
}
/* Ensure fill is positioned for pseudo-elements */
.og-slot-fill,
.bld-prog-fill {
  position: relative;
  overflow: visible;
}

/* ===== T. Star sparkles behind planet ===== */
#rpPlanetView { position:relative; }
#rpPlanetView::before {
  content:'';
  position:absolute; top:-10px; left:-10px; right:-10px; height:180px;
  pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 18% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 42% 45%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 92% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 8% 48%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 62% 4%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 85% 35%, rgba(var(--accent-rgb),0.5), transparent),
    radial-gradient(1.5px 1.5px at 12% 28%, rgba(var(--accent-rgb),0.35), transparent),
    radial-gradient(1px 1px at 55% 60%, rgba(var(--accent-rgb),0.3), transparent),
    radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 25% 32%, rgba(255,255,255,0.3), transparent);
  animation: starTwinkle 5s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%,100% { opacity:0.35; }
  33%     { opacity:0.9; }
  66%     { opacity:0.5; }
}

/* ===== T2. Light rays emanating from planet ===== */
#rpPlanetView::after {
  content:'';
  position:absolute;
  top:-40px; left:50%; width:280px; height:280px;
  transform:translateX(-50%);
  pointer-events:none; z-index:0;
  background:conic-gradient(
    from 0deg at 50% 46%,
    transparent 0deg,
    rgba(var(--accent-rgb),0.06) 8deg,
    transparent 18deg,
    transparent 40deg,
    rgba(var(--accent-rgb),0.04) 50deg,
    transparent 60deg,
    transparent 85deg,
    rgba(var(--accent-rgb),0.07) 92deg,
    transparent 102deg,
    transparent 128deg,
    rgba(var(--accent-rgb),0.04) 138deg,
    transparent 148deg,
    transparent 170deg,
    rgba(var(--accent-rgb),0.06) 178deg,
    transparent 188deg,
    transparent 215deg,
    rgba(var(--accent-rgb),0.05) 222deg,
    transparent 232deg,
    transparent 260deg,
    rgba(var(--accent-rgb),0.07) 268deg,
    transparent 278deg,
    transparent 305deg,
    rgba(var(--accent-rgb),0.04) 312deg,
    transparent 322deg,
    transparent 345deg,
    rgba(var(--accent-rgb),0.05) 353deg,
    transparent 360deg
  );
  animation:raysSpin 45s linear infinite;
  mask-image:radial-gradient(circle, transparent 25%, black 40%, black 80%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle, transparent 25%, black 40%, black 80%, transparent 100%);
}

/* ===== U. Faction ambient edge vignette ===== */
/* Subtle faction-colored glow at the edges of the main content */
[class*="faction-"] .center-content { position: relative; }
[class*="faction-"] .center-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at top center, rgba(var(--accent-rgb),0.06) 0%, transparent 50%),
              radial-gradient(ellipse at bottom center, rgba(var(--accent-rgb),0.04) 0%, transparent 45%);
}
/* Topbar resource items — faction styling handled in layout.css */

/* ===== WARP TRANSITION BETWEEN SECTIONS ===== */
.warp-overlay {
  position:fixed; inset:0; z-index:99998; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.warp-flash {
  position:absolute; inset:0;
  background:radial-gradient(circle at center, rgba(var(--accent-rgb),0.25) 0%, transparent 60%);
  animation:warpFlash 0.4s ease-out forwards;
}
@keyframes warpFlash {
  0%   { opacity:0; transform:scale(0.3); }
  40%  { opacity:1; transform:scale(1.2); }
  100% { opacity:0; transform:scale(2); }
}
.warp-lines {
  position:absolute; inset:-20%; border-radius:50%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg, rgba(var(--accent-rgb),0.08) 4deg, transparent 8deg,
    transparent 20deg, rgba(var(--accent-rgb),0.06) 24deg, transparent 28deg,
    transparent 45deg, rgba(var(--accent-rgb),0.1) 48deg, transparent 52deg,
    transparent 70deg, rgba(var(--accent-rgb),0.07) 74deg, transparent 78deg,
    transparent 90deg, rgba(var(--accent-rgb),0.08) 94deg, transparent 98deg,
    transparent 120deg, rgba(var(--accent-rgb),0.06) 124deg, transparent 128deg,
    transparent 150deg, rgba(var(--accent-rgb),0.09) 154deg, transparent 158deg,
    transparent 180deg, rgba(var(--accent-rgb),0.07) 184deg, transparent 188deg,
    transparent 210deg, rgba(var(--accent-rgb),0.08) 214deg, transparent 218deg,
    transparent 240deg, rgba(var(--accent-rgb),0.06) 244deg, transparent 248deg,
    transparent 270deg, rgba(var(--accent-rgb),0.1) 274deg, transparent 278deg,
    transparent 300deg, rgba(var(--accent-rgb),0.07) 304deg, transparent 308deg,
    transparent 330deg, rgba(var(--accent-rgb),0.08) 334deg, transparent 338deg,
    transparent 360deg
  );
  animation:warpSpin 0.4s linear forwards;
}
@keyframes warpSpin { from{transform:rotate(0) scale(0.5);opacity:1} to{transform:rotate(90deg) scale(2);opacity:0} }

/* ===== ACHIEVEMENT EPIC POPUP ===== */
.ach-flash {
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  background:radial-gradient(circle, rgba(255,200,60,0.35) 0%, transparent 60%);
  animation:achFlash 0.6s ease-out forwards;
}
@keyframes achFlash { 0%{opacity:1;transform:scale(0.5)} 50%{opacity:0.8;transform:scale(1.5)} 100%{opacity:0;transform:scale(2)} }
.ach-epic { position:relative; overflow:visible; }
.ach-pop-label { animation:achLabelIn 0.6s ease-out; }
@keyframes achLabelIn { from{letter-spacing:12px;opacity:0} to{letter-spacing:4px;opacity:1} }
.ach-badge-glow { animation:achBadgeGlow 2s ease-in-out infinite; }
@keyframes achBadgeGlow {
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,200,60,0.5));transform:scale(1)}
  50%{filter:drop-shadow(0 0 20px rgba(255,200,60,0.9));transform:scale(1.05)}
}
.ach-particles { position:absolute; top:50%; left:50%; width:0; height:0; pointer-events:none; }
.ach-particle {
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--gold); opacity:0;
  animation:achParticle 1.2s ease-out calc(var(--i) * 0.08s) forwards;
}
@keyframes achParticle {
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(calc(cos(calc(var(--i) * 45deg)) * 80px), calc(sin(calc(var(--i) * 45deg)) * 80px)) scale(0);opacity:0}
}

/* Reduced motion: disable all custom animations */
@media (prefers-reduced-motion: reduce) {
  .bld-grid > *, .og-bld-grid > *, .res-tech-grid > * { animation: none !important; }
  #planetSection, .sec-full { transition: none !important; }
  .ripple-ring { animation: none !important; }
  .og-slot-fill::after, .og-slot-fill::before,
  .bld-prog-fill::after, .bld-prog-fill::before { animation: none !important; content: none !important; }
  .warp-overlay, .lo-ring, .lo-stars { animation: none !important; }
  .nt-timer { animation: none !important; }
}