:root {
  --space-bg-0: #030712;
  --space-bg-1: #0a1630;
  --space-bg-2: #111f45;
  --space-panel: #0c1430;
  --space-panel-2: #0f1b3d;
  --space-border: #2c67d8;
  --space-border-soft: #1f3c7a;
  --space-text: #dbe9ff;
  --space-text-soft: #8aa7d8;
  --space-accent: #5be7ff;
  --space-accent-2: #98a8ff;
  --space-good: #66f5c6;
}

/* ---------- BASE ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:radial-gradient(circle at 20% 10%, #1a2d66 0%, var(--space-bg-0) 55%); }
body { font-family:'Orbitron',monospace; color:var(--space-text); display:flex; flex-direction:column; font-size:13px; }
svg, canvas { image-rendering:pixelated; image-rendering:crisp-edges; }

/* ---------- TOPBAR ---------- */
#topbar {
  height:58px; flex-shrink:0;
  background:linear-gradient(180deg,#132859,#0b1430);
  border-bottom:4px solid var(--space-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px;
  image-rendering:pixelated;
  position:relative; z-index:20;
}
#topbar-left {
  display:flex; flex-direction:column; gap:4px; justify-content:center;
}
.t-logo { font-family:'Orbitron',monospace; font-size:0.9rem; color:var(--space-accent); text-shadow:2px 2px #122c5a; }
.t-logo span { color:#9db3ff; }
#t-online {
  font-family:'Orbitron',monospace; font-size:0.56rem;
  font-weight:600;
  color:var(--space-good); display:flex; align-items:center; gap:5px;
}
#t-online::before {
  content:''; display:inline-block;
  width:6px; height:6px; background:var(--space-good);
  box-shadow:0 0 4px var(--space-good);
  animation:onlinePulse 1.5s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%,100%{ opacity:1; } 50%{ opacity:0.3; }
}
#chat-toggle-btn.on {
  background:#1b3470;
  border-color:#8bdfff;
  color:#ffffff;
}
.t-btn {
  background:#13254c;
  border:2px solid var(--space-border);
  border-bottom:4px solid #183a82;
  color:var(--space-accent); padding:4px 10px; font-family:'Orbitron',monospace;
  font-size:0.68rem; cursor:pointer;
  transition:all 0.08s;
}
.t-btn:hover { background:#1b3470; color:#fff; }
.t-btn:active { border-bottom-width:2px; transform:translateY(2px); }
.t-btns { display:flex; gap:6px; }

/* ---------- LAYOUT ---------- */
#game {
  flex:1; display:grid;
  grid-template-columns: 300px 1fr 290px;
  overflow:hidden;
}

/* ------------------------------
   LEFT � egg panel
------------------------------ */
#left {
  background:linear-gradient(180deg,#0b1533,#090f24);
  border-right:4px solid var(--space-border);
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden; position:relative;
}

/* name plate */
#nameplate {
  width:100%; text-align:center;
  background:#101f46;
  border-bottom:4px solid var(--space-border);
  padding:10px 6px 8px;
}
.np-name { font-family:'Orbitron',monospace; font-size:0.55rem; color:var(--space-accent); text-shadow:1px 1px #163362; }
#egg-count {
  font-family:'Orbitron',monospace; font-size:1.4rem;
  color:#fff; text-shadow:2px 2px #00335f, 0 0 12px rgba(91,231,255,0.5);
  margin-top:6px; line-height:1.2;
}
#eps-label { font-size:0.45rem; color:var(--space-text-soft); margin-top:4px; }

/* egg scene */
#egg-scene {
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; width:100%;
  overflow:hidden;
}
/* radial jungle bg */
#egg-scene::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 55% at 50% 55%, rgba(72,130,255,0.24) 0%, transparent 70%);
  pointer-events:none;
}

/* glow blob */
.egg-glow {
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(91,231,255,0.22),transparent 65%);
  animation:glowP 3s ease-in-out infinite; pointer-events:none;
}
@keyframes glowP { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.2);opacity:1} }

/* orbit scene */
#scene { position:relative; width:260px; height:260px; flex-shrink:0; }

#egg-btn {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:136px; height:164px;
  cursor:pointer; user-select:none; z-index:10;
  transition:transform 0.07s;
  filter:drop-shadow(0 8px 24px rgba(91,231,255,0.35)) drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
#egg-btn:active { transform:translate(-50%,-50%) scale(0.88); }
#egg-btn svg { width:100%; height:100%; }

.orbit-ring {
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px dashed rgba(132,175,255,0.22);
  transform:translate(-50%,-50%); pointer-events:none;
}
/* Outer wrapper rotates around the egg center */
.orb {
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  pointer-events:none;
  animation: orbRotate linear infinite;
  will-change:transform;
}
/* Inner holds the actual icon, offset outward by radius */
.orb-inner {
  position:absolute;
  width:20px; height:20px;
  top:-10px;
  animation: orbCounter linear infinite;
  will-change:transform;
}
@keyframes orbRotate  { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes orbCounter { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }

/* Boost bar */
#Boost-wrap-outer {
  width:100%; padding:6px 14px 10px;
  background:linear-gradient(0deg,#0b1738,transparent);
}
#Boost-lbl { font-size:0.62rem; color:var(--space-text-soft); text-align:center; margin-bottom:3px; letter-spacing:.5px; }
#Boost-track {
  width:100%; height:7px; background:#070d1f;
  border:1px solid var(--space-border-soft); border-radius:4px; overflow:hidden;
}
#Boost-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,#57d0ff,#8d9dff);
  border-radius:4px; transition:width .25s;
}

/* float +N */
.fn {
  position:fixed; font-family:'Orbitron',monospace;
  font-size:0.8rem; color:#c8f2ff; pointer-events:none;
  text-shadow:2px 2px #093a71;
  animation:fnUp .9s ease-out forwards; z-index:999;
}
@keyframes fnUp { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-60px)} }

/* ------------------------------
   CENTER � scene + info
------------------------------ */
#center {
  display:flex; flex-direction:column; overflow:hidden;
  border-left:4px solid var(--space-border); border-right:4px solid var(--space-border);
  position:relative;
}

#center-top {
  flex-shrink:0;
  background:#0f1d43;
  border-bottom:4px solid var(--space-border);
}
#news-bar {
  min-height:50px; display:flex; align-items:center; justify-content:center;
  padding:10px 18px; text-align:center;
  border-bottom:2px solid #1f3c7a;
}
#news-text {
  font-size:0.72rem;
  font-weight:600;
  color:#e1f6ff;
  line-height:1.55;
}

#tab-row { display:flex; border-bottom:4px solid #1a3268; }
.ctab {
  padding:8px 14px; font-size:0.58rem;
  color:#6f8fcb; cursor:pointer; border-right:2px solid #172d5f;
  transition:all .1s; position:relative;
}
.ctab:hover { color:var(--space-accent); background:#162c60; }
.ctab.on { color:#d9eeff; background:#162c60; }
.ctab.on::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:4px; background:var(--space-accent); }

/* -- MAIN SCENE AREA -- */
#scene-main {
  flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#08132e,#0a1738 60%,#0b1940);
}

/* building bar */
#building-bar {
  flex:1; overflow-x:hidden; overflow-y:auto;
  background:#0a1634;
  border-top:4px solid var(--space-border);
  display:flex; flex-direction:column; gap:0;
  scrollbar-width:thin; scrollbar-color:#2f63c8 #0b1430;
}
#building-bar::-webkit-scrollbar { width:6px; }
#building-bar::-webkit-scrollbar-thumb { background:#2f63c8; }
.bslot {
  flex-shrink:0; min-height:64px;
  border-bottom:2px solid #1f3f80;
  display:flex; flex-direction:row; align-items:flex-start;
  position:relative; overflow:hidden;
}
.bslot:nth-child(odd)  { background:#102652; }
.bslot:nth-child(even) { background:#0d2148; }
.bslot:last-child { border-bottom:none; }
.bslot-label {
  font-size:0.58rem;
  color:#9fd2ff;
  padding:10px 8px; flex-shrink:0; width:110px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  z-index:1;
  border-right:2px solid #1f3f80;
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
}
.bslot-label svg { display:block; }
.bslot-lname { font-size:0.54rem; color:#9fd8ff; margin-top:2px; }
.bslot-stage {
  flex:1; overflow:visible; height:auto;
  z-index:1;
  display:flex; align-items:center; justify-content:flex-start;
  flex-wrap:wrap; gap:3px; padding:8px;
}
.slot-walker svg { display:block; image-rendering:pixelated; }

/* stats panel */
#stats-panel {
  flex:1; padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg,#0b1d45,#0b1a3f);
}
#ms-panel {
  flex:1; padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; display:none;
  background:linear-gradient(180deg,#0b1d45,#0b1a3f);
}

.stat-group-title { font-size:.58rem; color:#c8efff; margin-bottom:4px; }
.srow {
  display:flex; justify-content:space-between; padding:4px 0;
  border-bottom:2px solid #1f3f80; font-size:.58rem; color:#c0dcff;
}
.srow span { color:var(--space-good); }

.ms-row {
  display:flex; align-items:center; gap:10px;
  background:#0d2148; border:2px solid #1f3f80;
  padding:8px 10px; font-size:.58rem; color:#b8d8ff;
}
.ms-row.done {
  border-color:var(--space-accent);
  color:#dff6ff;
  background:linear-gradient(180deg,#16366f,#13315f);
  box-shadow:inset 0 0 0 1px rgba(91,231,255,.25);
}
.ms-ico { display:flex; align-items:center; }

/* ------------------------------
   RIGHT � shop
------------------------------ */
#right {
  background:#0a122a;
  border-left:4px solid var(--space-border);
  display:flex; flex-direction:column; overflow:hidden;
  font-family:'Orbitron',monospace;
}
#shop-head {
  background:#0f1d43;
  border-bottom:4px solid var(--space-border); padding:10px 12px 8px;
  display:flex; align-items:center; justify-content:space-between;
}
#shop-title { font-family:'Orbitron',monospace; font-size:0.82rem; color:var(--space-accent); text-shadow:2px 2px #153462; }

/* buy qty selector */
#qty-bar {
  display:flex; align-items:center; gap:3px;
  background:#0b1430;
  border-bottom:4px solid #1a3268; padding:6px 8px;
}
#qty-bar label { font-size:.56rem; color:var(--space-text-soft); margin-right:4px; font-family:'Orbitron',monospace; letter-spacing:.5px; }
.qty-btn {
  background:#13254c;
  border:2px solid var(--space-border); border-bottom:4px solid #183a82;
  color:var(--space-accent); padding:4px 8px; font-family:'Orbitron',monospace;
  font-size:.66rem; font-weight:800; letter-spacing:.6px; cursor:pointer;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(91,231,255,.3);
  transition:all .08s;
}
.qty-btn:hover { background:#1b3470; color:#fff; }
.qty-btn:active { border-bottom-width:2px; transform:translateY(2px); }
.qty-btn.sel { background:#1b3470; border-color:#8bdfff; color:#dff6ff; }

/* shop list */
#shop-list { flex:1; overflow-y:auto; padding:0; display:flex; flex-direction:column; }

/* chat panel */
#chat-panel {
  position:absolute;
  right:14px;
  bottom:14px;
  width:min(420px, calc(100% - 28px));
  height:250px;
  border:3px solid var(--space-border);
  border-bottom:5px solid #173c82;
  background:#08122c;
  display:flex;
  flex-direction:column;
  z-index:35;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
#chat-panel.hidden {
  display:none;
}
#chat-head {
  padding:6px 8px;
  border-bottom:2px solid #1a3268;
  font-size:.45rem;
  color:var(--space-accent);
}
#chat-list {
  flex:1;
  overflow-y:auto;
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.chat-line {
  font-size:.4rem;
  color:#b9d6ff;
  line-height:1.5;
  word-break:break-word;
}
.chat-line .chat-user {
  color:#6fe8ff;
}
#chat-row {
  display:flex;
  gap:6px;
  padding:6px;
  border-top:2px solid #1a3268;
}
#chat-input {
  flex:1;
  min-width:0;
  background:#0b1430;
  border:2px solid #1f3c7a;
  color:#dff6ff;
  font-family:'Orbitron',monospace;
  font-size:.4rem;
  padding:6px;
  outline:none;
}
#chat-send {
  background:#13254c;
  border:2px solid var(--space-border);
  border-bottom:4px solid #183a82;
  color:var(--space-accent);
  font-family:'Orbitron',monospace;
  font-size:.4rem;
  padding:6px 8px;
  cursor:pointer;
}
#chat-send:active {
  border-bottom-width:2px;
  transform:translateY(2px);
}

.si {
  display:flex; align-items:center; gap:0;
  padding:8px 8px; cursor:pointer;
  border-bottom:2px solid #1a3268;
  position:relative; transition:background .1s;
  min-height:68px; flex-shrink:0;
}
.si:hover:not(.locked) { background:#142b5d; }
.si.locked { opacity:.35; cursor:not-allowed; filter:saturate(0); }
.si.affordable { background:#101f45; }
.si.affordable::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--space-accent);
}

.si-ico-wrap {
  width:52px; height:52px; flex-shrink:0;
  background:#0b1430;
  border:2px solid #1f3c7a;
  display:flex; align-items:center; justify-content:center;
  margin-right:10px; position:relative;
  image-rendering:pixelated;
}
.si-ico-wrap .si-owned {
  position:absolute; bottom:-2px; right:-2px;
  background:#0a1738; border:2px solid #66b8ff;
  font-size:.62rem; color:#ecf8ff;
  padding:1px 4px; font-family:'Orbitron',monospace; font-weight:700;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 8px rgba(91,231,255,.25);
  min-width:16px; text-align:center;
}
.si-icon-inner { display:flex; align-items:center; justify-content:center; }
.si-icon-inner svg { display:block; image-rendering:pixelated; }

.si-info { flex:1; min-width:0; }
.si-name { font-size:.74rem; font-weight:800; color:#e7f6ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.2px; }
.si-desc { font-size:.58rem; color:#bed9ff; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-cost {
  font-size:.7rem; font-weight:800; color:#85ffd8; margin-top:4px;
  display:flex; align-items:center; gap:3px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(102,245,198,.2);
}
.si-cost-bad { color:#ff6b6b; text-shadow:none; }

/* ------------------------------
   OVERLAYS
------------------------------ */
#Boost-ov {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.92); z-index:100;
  flex-direction:column; align-items:center; justify-content:center; gap:20px;
}
#Boost-ov.on { display:flex; }
#hov-emo { animation:hb .4s ease-in-out infinite alternate; }
@keyframes hb { from{transform:scale(.9)} to{transform:scale(1.1)} }
#hov-title { font-family:'Orbitron',monospace; font-size:1.1rem; color:#f0d050; text-shadow:3px 3px #7a4400; }
#hov-title { font-family:'Orbitron',monospace; font-size:1.1rem; color:var(--space-accent); text-shadow:3px 3px #14315f; }
#hov-sub { color:var(--space-good); font-size:.55rem; }
.hov-ok {
  background:#163565;
  border:2px solid var(--space-border); border-bottom:4px solid #1a488f;
  color:#c8f4ff; font-family:'Orbitron',monospace; font-size:.6rem;
  padding:10px 28px; cursor:pointer; margin-top:8px;
  transition:all .1s;
}
.hov-ok:hover { background:#1f4888; }
.hov-ok:active { border-bottom-width:2px; transform:translateY(2px); }

/* achievement bar */
#ach-bar {
  position:fixed; bottom:0; left:300px; right:290px;
  background:#0d1b40;
  border-top:4px solid var(--space-accent);
  padding:8px 14px;
  display:flex; align-items:center; gap:12px;
  transform:translateY(100%); transition:transform .3s;
  z-index:50;
}
#ach-bar.on { transform:translateY(0); }
#ach-ico { display:flex; }
.ach-txt .ach-sub { font-size:.4rem; color:var(--space-text-soft); }
.ach-txt .ach-name { font-size:.55rem; color:#dff6ff; margin-top:4px; }
#ach-x { margin-left:auto; background:transparent; border:2px solid #335fae; color:#9ec2ff; font-size:.5rem; cursor:pointer; padding:2px 6px; font-family:'Orbitron',monospace; }

/* toast */
#toast {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:#0b1430;
  border:2px solid var(--space-border); border-bottom:4px solid #1a488f;
  padding:8px 20px; font-size:.5rem; color:#cfe7ff;
  z-index:200; transition:transform .2s;
  white-space:nowrap; pointer-events:none;
  font-family:'Orbitron',monospace;
}
#toast.toast-event {
  background:#0c1f46;
  border-color:#5be7ff;
  border-bottom-color:#2c67d8;
  color:#ecf9ff;
  box-shadow:0 0 18px rgba(91,231,255,.28);
}
#toast.on { transform:translateX(-50%) translateY(0); }

/* scrollbars */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#0b1430; }
::-webkit-scrollbar-thumb { background:#2f63c8; }

/* ------------------------------
   LOGIN OVERLAY
------------------------------ */
#login-overlay {
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 20% 10%, #182f68 0%, #050914 60%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0;
}
#login-overlay.hidden { display:none; }

.lo-logo {
  font-family:'Orbitron',monospace;
  font-size:2.2rem; font-weight:800; color:var(--space-accent);
  text-shadow:3px 3px #173866, 0 0 24px rgba(91,231,255,0.35);
  margin-bottom:10px; letter-spacing:2.4px;
}
.lo-logo span { color:#9db3ff; }
.lo-sub {
  font-family:'Orbitron',monospace;
  font-size:.68rem; font-weight:600; color:#b8d5ff; margin-bottom:36px;
}

.lo-box {
  background:#0d1a3c;
  border:3px solid var(--space-border);
  border-bottom:6px solid #1a488f;
  padding:30px 34px;
  min-width:460px;
  max-width:min(92vw, 560px);
  display:flex; flex-direction:column; gap:16px;
}
.lo-tabs {
  display:flex; gap:0; margin-bottom:8px;
  border-bottom:3px solid var(--space-border);
}
.lo-tab {
  font-family:'Orbitron',monospace;
  font-size:.74rem; font-weight:700; color:#9ec2ff;
  padding:10px 20px; cursor:pointer;
  border:none; background:transparent;
  border-right:2px solid #17325f;
  transition:all .1s;
}
.lo-tab:hover { color:var(--space-accent); background:#183769; }
.lo-tab.active { color:#dff6ff; background:#183769; }

.lo-field {
  display:flex; flex-direction:column; gap:6px;
}
.lo-field label {
  font-family:'Orbitron',monospace;
  font-size:.62rem; font-weight:600; color:#b8d5ff;
}
.lo-field input {
  background:#091026;
  border:2px solid #1f3c7a; border-bottom:4px solid #112957;
  color:#e4f0ff; font-family:'Orbitron',monospace; font-weight:600;
  font-size:.74rem; padding:11px 13px; outline:none;
  transition:border-color .1s;
}
.lo-field input:focus { border-color:var(--space-accent); }

.lo-btn {
  background:#173a73;
  border:2px solid var(--space-border); border-bottom:4px solid #1b4d9b;
  color:#d6f3ff; font-family:'Orbitron',monospace; font-weight:800;
  font-size:.8rem; padding:12px; cursor:pointer;
  transition:all .1s; margin-top:8px;
}
.lo-btn:hover { background:#1f4b92; color:#ffffff; }
.lo-btn:active { border-bottom-width:2px; transform:translateY(2px); }

#lo-error {
  font-family:'Orbitron',monospace;
  font-size:.6rem; color:#ff7a7a;
  min-height:18px; text-align:center;
}
#lo-loading {
  font-family:'Orbitron',monospace;
  font-size:.6rem; color:var(--space-accent);
  text-align:center; display:none;
  animation:loFade 1s ease-in-out infinite alternate;
}
@keyframes loFade { from{opacity:.3} to{opacity:1} }

/* topbar user badge */
#user-badge {
  font-family:'Orbitron',monospace;
  font-size:0.6rem; color:var(--space-good);
  display:flex; align-items:center; gap:6px;
}
#user-badge .t-btn {
  font-size:0.58rem; padding:4px 8px;
  border-bottom-width:3px;
}

/* ------------------------------
   LEADERBOARD PANEL
------------------------------ */
#lb-panel {
  flex:1; display:none; flex-direction:column; overflow:hidden;
}
#lb-panel.visible { display:flex; }
#lb-header {
  padding:10px 16px 6px;
  background:#0f1d43;
  border-bottom:3px solid var(--space-border);
  display:flex; align-items:center; justify-content:space-between;
}
#lb-title {
  font-family:'Orbitron',monospace;
  font-size:1rem;
  font-weight:800;
  letter-spacing:1.2px;
  color:var(--space-accent);
  text-shadow:0 0 10px rgba(91,231,255,.35);
}
#lb-refresh {
  background:#13254c; border:2px solid var(--space-border); border-bottom:3px solid #1b4d9b;
  color:var(--space-accent);
  font-family:'Orbitron',monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.8px;
  padding:5px 10px; cursor:pointer;
}
#lb-refresh:hover { background:#1b3470; }
#lb-refresh:active { border-bottom-width:1px; transform:translateY(1px); }
#lb-list {
  flex:1; overflow-y:auto; padding:0;
  scrollbar-width:thin; scrollbar-color:#2f63c8 #0b1430;
}
.lb-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:2px solid #1a3268;
  font-family:'Orbitron',monospace;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.35px;
  transition:background .1s;
}
.lb-row:hover { background:#132c61; }
.lb-row:nth-child(odd) { background:#102652; }
.lb-row:nth-child(odd):hover { background:#153164; }
.lb-rank { font-size:.72rem; min-width:34px; text-align:center; color:#86a9e5; }
.lb-row.rank-1 .lb-rank { color:#ffd700; text-shadow:0 0 6px rgba(255,215,0,.5); }
.lb-row.rank-2 .lb-rank { color:#c0c0c0; }
.lb-row.rank-3 .lb-rank { color:#cd7f32; }
.lb-name { flex:1; color:#d4e9ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row.is-me .lb-name { color:var(--space-accent); }
.lb-eggs { color:var(--space-good); white-space:nowrap; }
.lb-eps  { color:#88a7d8; font-size:.56rem; white-space:nowrap; }
.lb-medal { font-size:.88rem; min-width:22px; text-align:center; }
#lb-loading, #lb-empty {
  font-family:'Orbitron',monospace; font-size:.66rem;
  color:#87a4d4; text-align:center; padding:30px 16px;
}

/* ------------------------------
   IMPORT / EXPORT MODAL
------------------------------ */
#ie-overlay {
  display:none; position:fixed; inset:0; z-index:8000;
  background:rgba(0,0,0,.88); align-items:center; justify-content:center;
}
#ie-overlay.on { display:flex; }
#ie-box {
  background:#0e0a04; border:3px solid #c8901c; border-bottom:6px solid #7a4800;
  padding:22px 26px; min-width:360px; display:flex; flex-direction:column; gap:14px;
}
#ie-box h2 {
  font-family:'Orbitron',monospace; font-size:.7rem; color:#f0d050;
  text-shadow:2px 2px #7a4400; margin-bottom:2px;
}
.ie-section-title { font-family:'Orbitron',monospace; font-size:.42rem; color:#c8901c; margin-bottom:4px; }
.ie-desc { font-family:'Orbitron',monospace; font-size:.35rem; color:#604820; margin-bottom:8px; line-height:1.8; }
#ie-import-area { background:#050302; border:2px dashed #3a2010; padding:10px; display:flex; flex-direction:column; gap:6px; }
#ie-import-area textarea {
  background:#050302; border:none; outline:none; color:#f0e4c0;
  font-family:monospace; font-size:.55rem; resize:vertical; min-height:60px; width:100%;
}
.ie-btn {
  background:#1a3a08; border:2px solid #60c030; border-bottom:4px solid #2a6008;
  color:#a0f040; font-family:'Orbitron',monospace; font-size:.5rem;
  padding:8px 14px; cursor:pointer; transition:all .1s;
}
.ie-btn:hover { background:#2a5010; }
.ie-btn:active { border-bottom-width:2px; transform:translateY(2px); }
.ie-btn.secondary { background:#1a1808; border-color:#c8901c; border-bottom-color:#7a4800; color:#f0c840; }
.ie-btn.danger    { background:#3a0808; border-color:#e04020; border-bottom-color:#801808; color:#ff8060; }
#ie-error { font-family:'Orbitron',monospace; font-size:.38rem; color:#e04020; min-height:12px; }
.ie-row { display:flex; gap:8px; align-items:center; }
#ie-file-input { display:none; }
#event-banner {
  position:fixed; top:66px; left:50%; transform:translateX(-50%) translateY(-160px);
  background:#0a0804;
  border:3px solid #f0c840; border-bottom:5px solid #7a4800;
  padding:10px 20px; z-index:300;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .3s;
  min-width:320px; text-align:center;
}
#event-banner.on { transform:translateX(-50%) translateY(0); }
#event-icon { margin-bottom:2px; }
#event-title { font-family:'Orbitron',monospace; font-size:.6rem; color:#ffff00; text-shadow:2px 2px #7a4400; }
#event-desc  { font-family:'Orbitron',monospace; font-size:.42rem; color:#f0c840; }
#event-timer-bar {
  width:100%; height:6px; background:#1a0e04; border:2px solid #3a2010; margin-top:4px;
}
#event-timer-fill {
  height:100%; background:linear-gradient(90deg,#f0c840,#ff8000);
  transition:width .1s linear;
}

/* ══════════════════════════════
   EVENT ANIMATIONS
══════════════════════════════ */

/* --- METEOR SHOWER --- */
.meteor {
  position:fixed; pointer-events:none; z-index:9000;
  width:6px; height:6px;
  background:#ff8000;
  box-shadow:0 0 4px #ff4000, 2px 2px 0 #ffcc00;
  animation:meteorFall linear forwards;
}
.meteor::after {
  content:'';
  position:absolute; right:6px; top:2px;
  width:20px; height:2px;
  background:linear-gradient(90deg,transparent,#ff8000);
}
@keyframes meteorFall {
  from { transform:translate(0,0) rotate(40deg); opacity:1; }
  to   { transform:translate(300px,500px) rotate(40deg); opacity:0; }
}

/* --- X10 CORE (BLACK THEME) --- */
#egg-btn.gold-egg svg rect { transition:fill .3s; }
#egg-btn.gold-egg { filter:drop-shadow(0 0 18px #0a1022) drop-shadow(0 0 8px #3d66b8) !important; }
@keyframes goldPulse {
  0%,100%{ filter:drop-shadow(0 0 14px #0a1022) drop-shadow(0 0 6px #3d66b8); }
  50%    { filter:drop-shadow(0 0 26px #050913) drop-shadow(0 0 14px #4a78d0); }
}
#egg-btn.gold-egg { animation:goldPulse 0.8s ease-in-out infinite; }

/* --- Astro FRENZY --- */
.frenzy-Astro {
  position:fixed; bottom:0; pointer-events:none; z-index:8500;
  font-size:0; /* use SVG only */
  animation:frenzyRun linear forwards;
}
.frenzy-Astro svg { display:block; }
.frenzy-Astro.flipped svg { transform:scaleX(-1); }
@keyframes frenzyRun {
  from { transform:translateX(var(--from-x)) translateY(0); }
  60%  { transform:translateX(var(--to-x))   translateY(-30px); }
  80%  { transform:translateX(var(--to-x))   translateY(0px); }
  to   { transform:translateX(var(--to-x))   translateY(0); opacity:0; }
}

/* --- EGG RAIN --- */
.rain-egg {
  position:fixed; top:-40px; pointer-events:none; z-index:8800;
  animation:eggDrop linear forwards;
  image-rendering:pixelated;
}
@keyframes eggDrop {
  from { transform:translateY(0) rotate(0deg); opacity:1; }
  80%  { opacity:1; }
  to   { transform:translateY(110vh) rotate(360deg); opacity:0; }
}

/* --- TIME WARP --- */
#timewarp-overlay {
  position:fixed; inset:0; z-index:9500;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(120,0,255,0.85) 0%,rgba(60,0,180,0.6) 40%,rgba(0,0,0,0) 100%);
  opacity:0; transition:opacity .3s;
}
#timewarp-overlay.on { opacity:1; }
@keyframes portalSpin {
  from { transform:translate(-50%,-50%) rotate(0deg) scale(1); }
  50%  { transform:translate(-50%,-50%) rotate(180deg) scale(1.3); }
  to   { transform:translate(-50%,-50%) rotate(360deg) scale(1); }
}
#timewarp-portal {
  position:fixed; top:50%; left:50%;
  width:200px; height:200px;
  border-radius:50%;
  border:6px solid #cc44ff;
  box-shadow:0 0 40px #9900ff, inset 0 0 40px #6600cc;
  pointer-events:none; z-index:9600;
  opacity:0; transition:opacity .3s;
  animation:portalSpin 1s linear infinite;
}
#timewarp-portal.on { opacity:1; }

/* ══════════════════════════════
   SOUND SETTINGS
══════════════════════════════ */
#sound-btn {
  background:#13254c;
  border:2px solid var(--space-border);
  border-bottom:4px solid #183a82;
  color:var(--space-accent); padding:4px 10px; font-family:'Orbitron',monospace;
  font-size:.55rem; cursor:pointer; transition:all .08s;
  display:flex; align-items:center; gap:5px;
}
#sound-btn:hover { background:#1b3470; color:#fff; }
#sound-btn:active { border-bottom-width:2px; transform:translateY(2px); }
#sound-btn.muted {
  background:#101a34;
  border-color:#27497f;
  border-bottom-color:#1a3157;
  color:#6f8fcb;
}