@keyframes pinPulse { 0%{transform:translate(-50%,-50%) scale(0.5);opacity:0.8} 100%{transform:translate(-50%,-50%) scale(2.5);opacity:0} }

/* Construction overlay */
.bld-prog-bar {
  position:absolute; bottom:0; left:0; right:0; height:3px;
  border-radius:0 0 8px 8px; overflow:hidden; background:rgba(0,0,0,0.2);
}
.bld-prog-fill { height:100%; border-radius:0 0 8px 8px; }

/* Map sidebar */
@keyframes cl { 0%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* Gate center */
@keyframes ambPulse { 0%,100%{opacity:0.55;transform:scale(0.97)} 50%{opacity:1;transform:scale(1.02)} }

/* Activation glow — appears when portal opens */
@keyframes gg { 0%,100%{opacity:0.55} 50%{opacity:1} }

/* Outer decorative segmented frame — counter-rotates slowly */
@keyframes gr { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes notchFlash {
  0%,100%{ box-shadow:0 -6px 18px rgba(245,196,50,0.65), 0 0 8px rgba(255,220,60,0.4); }
  50%    { box-shadow:0 -16px 36px rgba(255,238,50,1),  0 0 28px rgba(255,210,30,0.9); }
}
@keyframes ehp { 0%,100%{opacity:0.9;transform:scale(1)} 50%{opacity:1;transform:scale(1.015)} }

/* Base blue radial */
.eh-base {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 44% 40%,
    rgba(175,228,255,0.96) 0%, rgba(90,180,255,0.88) 12%,
    rgba(40,128,242,0.82)  28%, rgba(16,82,210,0.72) 50%,
    rgba(8,46,162,0.5)     68%, rgba(4,22,108,0.3)   84%, transparent 100%
  );
}

/* Rotating swirl — water surface effect */
.eh-swirl {
  position:absolute; inset:-6px; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(80,195,255,0.0) 0deg,   rgba(80,195,255,0.38) 52deg,
    rgba(80,195,255,0.0) 104deg, rgba(80,195,255,0.0)  180deg,
    rgba(80,195,255,0.32) 232deg,rgba(80,195,255,0.0)  284deg,
    rgba(80,195,255,0.0) 360deg
  );
  animation:ehSw 3.2s linear infinite; mix-blend-mode:screen;
}
@keyframes ehSw { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Shimmer highlight — bright spot that drifts */
.eh-shimmer {
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse 36% 26% at 33% 27%, rgba(210,245,255,0.78) 0%, transparent 55%);
  animation:ehShim 3.8s ease-in-out infinite; mix-blend-mode:screen;
}
@keyframes ehShim { 0%,100%{opacity:0.4;transform:translate(0,0)} 50%{opacity:0.72;transform:translate(5px,-3px)} }

/* Counter-rotating ripple (subtle depth) */
.eh-ripple {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(100,215,255,0.06), rgba(48,128,255,0.38), rgba(100,215,255,0.06),
    rgba(28,88,220,0.22),   rgba(100,215,255,0.06)
  );
  animation:ehs 5.5s linear infinite reverse; mix-blend-mode:screen;
}
@keyframes ehs { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Kawoosh burst */
@keyframes ka { 0%{transform:scale(0);opacity:1} 60%{transform:scale(1.5);opacity:0.7} 100%{transform:scale(0.95);opacity:0} }

.dest-name { font-family:'Cinzel',serif; font-size:20px; font-weight:600; color:var(--textbright); letter-spacing:5px; text-align:center; margin-top:12px; text-shadow:0 2px 12px rgba(var(--accent2-rgb),0.2); }
.dest-coords { font-family:'Share Tech Mono',monospace; font-size: 14px; color:var(--textsoft); letter-spacing:2px; text-align:center; margin-top:4px; }

/* Right: info panel */
@keyframes ringDialing { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes chevLock { 0%{transform:scale(1.4) translateY(-4px)} 100%{transform:scale(1)} }
@keyframes kawooshBurst {
  0%   { transform:scale(0) scaleX(0.1); opacity:1; }
  25%  { transform:scale(1.6) scaleX(0.25); opacity:0.95; }
  55%  { transform:scale(1.05) scaleX(0.92); opacity:0.9; }
  80%  { transform:scale(0.98); opacity:0.8; }
  100% { transform:scale(0.96); opacity:0; }
}
@keyframes gateRipple { 0%{transform:translate(-50%,-50%) scale(0.3);opacity:0.9} 100%{transform:translate(-50%,-50%) scale(4);opacity:0} }
@keyframes portalGlow { 0%,100%{opacity:0.7} 50%{opacity:1} }
@keyframes gateSpark {
  0%   { transform:translate(-50%,-50%) scale(1); opacity:1; }
  100% { transform:translate(var(--sx,30px),var(--sy,-30px)) scale(0.1); opacity:0; }
}

/* ── Kawoosh wave rings ── */
@keyframes kawooshWave {
  0%   { transform:scale(0.15); opacity:0.95; border-color:rgba(180,240,255,0.95); border-width:4px; }
  40%  { opacity:0.6; border-color:rgba(80,160,255,0.6); }
  100% { transform:scale(2.0); opacity:0; border-color:rgba(40,80,255,0); border-width:1px; }
}

/* ── Enhanced portal ring when active ── */
@keyframes bellRing { 0%,100%{transform:rotate(0)} 10%,30%{transform:rotate(-12deg)} 20%,40%{transform:rotate(12deg)} 50%{transform:rotate(0)} }
@keyframes fly {
  0%   { transform:translate(0,0); opacity:0; }
  20%  { opacity:0.8; }
  80%  { opacity:0.6; }
  100% { transform:translate(var(--dx),var(--dy)); opacity:0; }
}

/* Sect label */
@keyframes sphereFloat {
  0%,100%{ translate:0 0; }
  50%    { translate:0 -6px; }
}
@keyframes continentSpin {
  0%  { transform:rotate(0deg)   scaleX(1);    }
  25% { transform:rotate(90deg)  scaleX(0.93); }
  50% { transform:rotate(180deg) scaleX(0.85); }
  75% { transform:rotate(270deg) scaleX(0.93); }
  100%{ transform:rotate(360deg) scaleX(1);    }
}
@keyframes atmoPulse { 0%,100%{ opacity:0.7; } 50%{ opacity:1; } }
@keyframes orbitSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes auraPulse {
  0%,100% { transform:scale(1); opacity:0.45; }
  50%     { transform:scale(1.08); opacity:1; }
}
@keyframes sphereGlow {
  0%,100% { filter:brightness(1) drop-shadow(0 0 20px rgba(var(--accent-rgb),0.3)); }
  50%     { filter:brightness(1.08) drop-shadow(0 0 35px rgba(var(--accent-rgb),0.5)); }
}
@keyframes raysSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* OGame troop/ship recruit row */
.og-rec-row {
  display:flex; align-items:center; justify-content:center; gap:3px;
  padding:3px 4px 5px; background:rgba(0,0,0,0.25);
}
.og-rec-inp {
  width:38px; background:rgba(10,20,50,0.9); border:1px solid rgba(var(--accent-rgb),0.5);
  border-radius:3px; color:var(--textbright); font-family:'Share Tech Mono',monospace;
  font-size: 14px; padding:3px 5px; text-align:center;
}
.og-rec-inp:focus { outline:none; border-color:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),0.25), 0 0 4px rgba(var(--accent-rgb),0.15); background:rgba(var(--accent-rgb),0.04); }
.og-rec-btn {
  padding:3px 8px; font-family:'Orbitron',monospace; font-size: 14px; font-weight:700;
  background:rgba(40,130,80,0.2); border:1px solid var(--success); border-radius:3px;
  color:var(--success); cursor:pointer; transition:background 0.15s;
}
.og-rec-btn:hover { background:rgba(40,130,80,0.4); }

/* Mission status card */
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes achUnlock { 0%{transform:scale(0.9);opacity:0} 50%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
@keyframes evPop { from { transform:scale(0.88); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes notifSlideIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes notifFadeOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-10px)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ══ OVERVIEW EVENT CARD ANIMATIONS ══ */
@keyframes shimmerSweep {
  0%   { transform:translateX(-100%) skewX(-15deg); }
  100% { transform:translateX(200%) skewX(-15deg); }
}
@keyframes barStripes {
  0%   { background-position:0 0; }
  100% { background-position:30px 0; }
}
@keyframes cardGlow {
  0%,100% { box-shadow:0 0 12px 2px rgba(var(--card-glow-rgb),0.25), inset 0 0 8px rgba(var(--card-glow-rgb),0.08); }
  50%     { box-shadow:0 0 22px 6px rgba(var(--card-glow-rgb),0.45), inset 0 0 14px rgba(var(--card-glow-rgb),0.15); }
}
@keyframes timerPulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.65; }
}
@keyframes badgeFadeIn {
  from { opacity:0; transform:scale(0.7); }
  to   { opacity:1; transform:scale(1); }
}

/* ══ RESOURCE BAR GLOW ══ */
@keyframes rpBarGlow { 0%,100%{box-shadow:0 0 6px rgba(var(--rc-rgb),0.4)} 50%{box-shadow:0 0 14px rgba(var(--rc-rgb),0.9)} }

/* ══ TOPBAR VALUE FLASH ══ */
@keyframes rbFlash { 0%{opacity:1} 50%{opacity:0.5} 100%{opacity:1} }
.rb-flash { animation:rbFlash 0.3s ease-out; }

/* ══ SECTION ENTER TRANSITION ══ */
@keyframes secEnter { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.sec-entering { animation:secEnter 0.25s ease-out both; }

/* ══ ODOMETER DIGITS ══ */
.odo-digit { display:inline-block; }
.odo-roll { animation:odoRoll 0.35s ease-out; }
@keyframes odoRoll { from{transform:translateY(-60%);opacity:0.3} to{transform:translateY(0);opacity:1} }

/* ══ LOADING SCREEN ══ */
.lo-overlay {
  position:fixed; inset:0; z-index:999999; background:#0a0e17;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Share Tech Mono',monospace; color:var(--accent,#44cc44);
  overflow:hidden; transition:opacity 0.6s ease;
}
.lo-overlay.hide { opacity:0; pointer-events:none; }
.lo-stars {
  position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 45% 10%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 60% 55%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 75% 25%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 88% 65%, rgba(var(--accent-rgb,68,204,68),0.5), transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(var(--accent-rgb,68,204,68),0.4), transparent),
    radial-gradient(1px 1px at 70% 45%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 5% 60%, rgba(255,255,255,0.45), transparent);
  animation:loStarTwinkle 4s ease-in-out infinite;
}
@keyframes loStarTwinkle { 0%,100%{opacity:0.4} 50%{opacity:1} }
.lo-ring-wrap {
  position:relative; width:160px; height:160px;
  display:flex; align-items:center; justify-content:center; z-index:1;
}
.lo-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent;
  border-top:2px solid var(--accent,#44cc44);
  border-right:2px solid rgba(var(--accent-rgb,68,204,68),0.3);
  animation:loRingSpin 2.5s linear infinite;
  box-shadow:0 0 20px rgba(var(--accent-rgb,68,204,68),0.2);
}
.lo-ring-2 {
  inset:12px; border-top-color:rgba(var(--accent-rgb,68,204,68),0.5);
  border-right-color:rgba(var(--accent-rgb,68,204,68),0.15);
  animation-duration:3.5s; animation-direction:reverse;
}
@keyframes loRingSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.lo-logo {
  position:relative; z-index:2;
  font-family:'Orbitron',monospace; font-size:36px; font-weight:900;
  letter-spacing:8px; color:var(--accent,#44cc44);
  text-shadow:0 0 20px rgba(var(--accent-rgb,68,204,68),0.6),
              0 0 40px rgba(var(--accent-rgb,68,204,68),0.3);
  animation:loGlow 2s ease-in-out infinite;
}
@keyframes loGlow { 0%,100%{opacity:0.85;text-shadow:0 0 20px rgba(var(--accent-rgb,68,204,68),0.6),0 0 40px rgba(var(--accent-rgb,68,204,68),0.3)} 50%{opacity:1;text-shadow:0 0 30px rgba(var(--accent-rgb,68,204,68),0.8),0 0 60px rgba(var(--accent-rgb,68,204,68),0.5)} }
.lo-title {
  margin-top:20px; font-size:14px; letter-spacing:6px; opacity:0.7; z-index:1;
  font-family:'Orbitron',monospace;
}
.lo-bar-wrap {
  margin-top:32px; display:flex; align-items:center; gap:12px; z-index:1;
}
.lo-bar-bg {
  width:240px; height:6px; background:rgba(255,255,255,0.08);
  border-radius:3px; overflow:hidden; position:relative;
}
.lo-bar-fill {
  width:0%; height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent,#44cc44), rgba(var(--accent-rgb,68,204,68),0.6));
  transition:width 0.4s ease; position:relative;
  box-shadow:0 0 8px rgba(var(--accent-rgb,68,204,68),0.5);
}
.lo-bar-fill::after {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation:shimmerSweep 1.5s ease-in-out infinite; border-radius:3px;
}
.lo-pct {
  font-size:13px; letter-spacing:2px; opacity:0.7; min-width:36px;
}
.lo-step {
  margin-top:14px; font-size:12px; opacity:0.5; letter-spacing:1px; z-index:1;
}
.lo-console {
  position:absolute; bottom:24px; left:24px; z-index:1;
  font-size:11px; opacity:0.25; line-height:1.6;
  max-width:400px; overflow:hidden;
}
.lo-console div { animation:loConsoleFade 0.3s ease-out; }
@keyframes loConsoleFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ══ UTILITY CLASSES ══ */
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }