/* ===== from game.html ===== */
/* ---------- BASE ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; min-height:100%; background:#0a0804; }
body { font-family:'Press Start 2P',monospace; color:#e8d8a0; display:flex; flex-direction:column; font-size:13px; }
.game-html, .game-body { height:100%; overflow:hidden; }
svg, canvas { image-rendering:pixelated; image-rendering:crisp-edges; }

/* ---------- TOPBAR ---------- */
#topbar {
  height:58px; flex-shrink:0;
  background:#1a0e04;
  border-bottom:4px solid #c8901c;
  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:'Press Start 2P',monospace; font-size:0.9rem; color:#f0c840; text-shadow:2px 2px #7a4400; }
.t-logo span { color:#60d020; }
#t-online {
  font-family:'Press Start 2P',monospace; font-size:0.45rem;
  color:#60d020; display:flex; align-items:center; gap:5px;
}
#t-online::before {
  content:''; display:inline-block;
  width:6px; height:6px; background:#60d020;
  box-shadow:0 0 4px #60d020;
  animation:onlinePulse 1.5s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%,100%{ opacity:1; } 50%{ opacity:0.3; }
}
.t-btn {
  background:#2a1808;
  border:2px solid #c8901c;
  border-bottom:4px solid #7a4800;
  color:#f0c840; padding:4px 10px; font-family:'Press Start 2P',monospace;
  font-size:0.65rem; cursor:pointer;
  transition:all 0.08s;
}
.t-btn:hover { background:#3a2010; 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 - core panel
------------------------------ */
#left {
  background:#0e0a04;
  border-right:4px solid #c8901c;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden; position:relative;
}

/* name plate */
#nameplate {
  width:100%; text-align:center;
  background:#1a0e04;
  border-bottom:4px solid #c8901c;
  padding:10px 6px 8px;
}
.np-name { font-family:'Press Start 2P',monospace; font-size:0.55rem; color:#f0c840; text-shadow:1px 1px #7a4400; }
#egg-count {
  font-family:'Press Start 2P',monospace; font-size:1.4rem;
  color:#fff; text-shadow:2px 2px #006600, 0 0 12px rgba(100,255,50,0.4);
  margin-top:6px; line-height:1.2;
}
#eps-label { font-size:0.45rem; color:#80a030; margin-top:4px; }

/* core 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(40,120,20,0.18) 0%, transparent 70%);
  pointer-events:none;
}

/* glow blob */
.egg-glow {
  position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(100,220,60,0.2),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 10px 28px rgba(78, 112, 255, 0.3)) drop-shadow(0 0 24px rgba(124, 188, 255, 0.2)) drop-shadow(0 4px 8px rgba(0,0,0,0.78));
}
#egg-btn:active { transform:translate(-50%,-50%) scale(0.88); }
#egg-btn svg { width:100%; height:100%; image-rendering:auto; shape-rendering:geometricPrecision; }

.bh-disk-rotor {
  transform-origin: 110px 110px;
  animation: bhSpin 11s linear infinite;
}

@keyframes bhSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orbit-ring {
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px dashed rgba(160,220,80,0.1);
  transform:translate(-50%,-50%); pointer-events:none;
}
/* Outer wrapper rotates around the core 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)} }

/* hatch bar */
#hatch-wrap-outer {
  width:100%; padding:6px 14px 10px;
  background:linear-gradient(0deg,#120c04,transparent);
}
#hatch-lbl { font-size:0.62rem; color:#705828; text-align:center; margin-bottom:3px; letter-spacing:.5px; }
#hatch-track {
  width:100%; height:7px; background:#0a0804;
  border:1px solid #3a2808; border-radius:4px; overflow:hidden;
}
#hatch-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,#40b020,#c0e010);
  border-radius:4px; transition:width .25s;
}

/* float +N */
.fn {
  position:fixed; font-family:'Press Start 2P',monospace;
  font-size:0.8rem; color:#ffff00; pointer-events:none;
  text-shadow:2px 2px #006600;
  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 #c8901c; border-right:4px solid #c8901c;
  position: relative;
}

#center-top {
  flex-shrink:0;
  background:#1a0e04;
  border-bottom:4px solid #c8901c;
}
#news-bar {
  min-height:48px; display:flex; align-items:center; justify-content:center;
  padding:8px 16px; text-align:center;
  border-bottom:2px solid #3a2010;
}
#news-text { font-size:13px; color:#f0c840; line-height:1.45; letter-spacing:0.2px; }
#news-text.news-science { font-size:16px; font-weight:700; color:#d2ecff; }

#tab-row { display:flex; border-bottom:4px solid #3a2010; }
.ctab {
  padding:11px 16px; font-size:12px;
  color:#604820; cursor:pointer; border-right:2px solid #2a1008;
  transition:all .1s; position:relative;
}
.ctab:hover { color:#f0c840; background:#2a1408; }
.ctab.on { color:#ffff00; background:#2a1408; }
.ctab.on::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:4px; background:#f0c840; }

/* -- MAIN SCENE AREA -- */
#scene-main {
  flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative;
}

/* building bar */
#building-bar {
  flex:1; overflow-x:hidden; overflow-y:auto;
  background:#1a1208;
  border-top:4px solid #c8901c;
  display:flex; flex-direction:column; gap:0;
  scrollbar-width:thin; scrollbar-color:#c8901c #0a0804;
}
#building-bar::-webkit-scrollbar { width:6px; }
#building-bar::-webkit-scrollbar-thumb { background:#c8901c; }
.bslot {
  flex-shrink:0; min-height:64px;
  border-bottom:2px solid #3a2808;
  display:flex; flex-direction:row; align-items:flex-start;
  position:relative; overflow:hidden;
}
.bslot:nth-child(odd)  { background:#1e1408; }
.bslot:nth-child(even) { background:#160e04; }
.bslot:last-child { border-bottom:none; }
.bslot-label {
  font-size:0.45rem;
  color:#f0c840;
  padding:10px 8px; flex-shrink:0; width:110px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  z-index:1;
  border-right:2px solid #3a2808;
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
}
.bslot-label svg { display:block; }
.bslot-lname { font-size:0.4rem; color:#c8a840; 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; }
#ms-panel    { flex:1; padding:14px 16px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; display:none; }

.stat-group-title { font-size:.45rem; color:#c8901c; margin-bottom:4px; }
.srow { display:flex; justify-content:space-between; padding:4px 0; border-bottom:2px solid #2a1808; font-size:.45rem; color:#a08040; }
.srow span { color:#ffff00; }

.ms-row {
  display:flex; align-items:center; gap:10px;
  background:#0e0804; border:2px solid #3a2008;
  padding:8px 10px; font-size:.45rem; color:#604820;
}
.ms-row.done { border-color:#c8901c; color:#f0c840; background:#1a1004; }
.ms-ico { display:flex; align-items:center; }

/* ------------------------------
   RIGHT � shop
------------------------------ */
#right {
  background:#0e0804;
  border-left:4px solid #c8901c;
  display:flex; flex-direction:column; overflow:hidden;
}
#shop-head {
  background:#1a0e04;
  border-bottom:4px solid #c8901c; padding:10px 12px 8px;
  display:flex; align-items:center; justify-content:space-between;
}
#shop-title { font-family:'Press Start 2P',monospace; font-size:0.75rem; color:#f0d050; text-shadow:2px 2px #7a4400; }

/* buy qty selector */
#qty-bar {
  display:flex; align-items:center; gap:3px;
  background:#0a0804;
  border-bottom:4px solid #3a2010; padding:6px 8px;
}
#qty-bar label { font-size:.4rem; color:#806030; margin-right:4px; }
.qty-btn {
  background:#1a0e04;
  border:2px solid #c8901c; border-bottom:4px solid #7a4800;
  color:#f0c840; padding:4px 8px; font-family:'Press Start 2P',monospace;
  font-size:.45rem; cursor:pointer;
  transition:all .08s;
}
.qty-btn:hover { background:#2a1408; color:#fff; }
.qty-btn:active { border-bottom-width:2px; transform:translateY(2px); }
.qty-btn.sel { background:#3a2008; border-color:#ffff00; color:#ffff00; }

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

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

.si-ico-wrap {
  width:52px; height:52px; flex-shrink:0;
  background:#0a0804;
  border:2px solid #3a2010;
  display:flex; align-items:center; justify-content:center;
  margin-right:10px; position:relative;
  image-rendering:auto;
}
.si-ico-wrap .si-owned {
  position:absolute; bottom:-2px; right:-2px;
  background:#0a0804; border:2px solid #c8901c;
  font-size:.4rem; color:#ffff00;
  padding:1px 3px; font-family:'Press Start 2P',monospace;
  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:auto; }

.shop-icon-smooth {
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 30% 25%, #58deff, #2b3b72 70%);
  border: 1px solid #62c5ff;
  box-shadow: 0 0 10px rgba(74, 208, 255, 0.45);
  font-size:16px;
  line-height:1;
}

.shop-icon-smooth.theme-tech {
  background: radial-gradient(circle at 30% 25%, #77f3ff, #1e4d84 70%);
  border-color:#86deff;
  box-shadow: 0 0 12px rgba(90, 218, 255, 0.55);
}

.shop-icon-smooth.theme-nature {
  background: radial-gradient(circle at 30% 25%, #a5ff8a, #2f6d2c 70%);
  border-color:#9de98f;
  box-shadow: 0 0 12px rgba(140, 255, 125, 0.46);
}

.shop-icon-smooth.theme-industry {
  background: radial-gradient(circle at 30% 25%, #ffd6aa, #7a4a2a 70%);
  border-color:#f2c18f;
  box-shadow: 0 0 10px rgba(255, 176, 122, 0.38);
}

.shop-icon-smooth.theme-combat {
  background: radial-gradient(circle at 30% 25%, #ff8e8e, #7e2733 70%);
  border-color:#ff9ea9;
  box-shadow: 0 0 12px rgba(255, 116, 142, 0.48);
}

.shop-icon-smooth.theme-energy {
  background: radial-gradient(circle at 30% 25%, #ffe97a, #88651b 70%);
  border-color:#ffe58a;
  box-shadow: 0 0 12px rgba(255, 219, 97, 0.5);
}

.shop-icon-smooth.theme-void {
  background: radial-gradient(circle at 30% 25%, #d38dff, #41206f 72%);
  border-color:#d7a4ff;
  box-shadow: 0 0 12px rgba(199, 126, 255, 0.52);
}

.shop-icon-smooth.theme-royal {
  background: radial-gradient(circle at 30% 25%, #ffe085, #84621f 72%);
  border-color:#ffd97a;
  box-shadow: 0 0 12px rgba(255, 212, 92, 0.5);
}

.shop-icon-smooth.theme-cosmic {
  background: radial-gradient(circle at 30% 25%, #9bb5ff, #2d2b7f 72%);
  border-color:#a9beff;
  box-shadow: 0 0 12px rgba(136, 148, 255, 0.45);
}

.shop-icon-smooth.locked {
  background: radial-gradient(circle at 30% 25%, #8a8a8a, #343434 70%);
  border-color:#7f7f7f;
  box-shadow:none;
}

.cost-star {
  color:#ffe77d;
  text-shadow:0 0 6px rgba(255, 231, 125, 0.6);
}

.si-info { flex:1; min-width:0; }
.si-name { font-size:.5rem; color:#f0c840; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-desc { font-size:.4rem; color:#806030; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-cost { font-size:.45rem; color:#60d020; margin-top:4px; display:flex; align-items:center; gap:3px; }
.si-cost-bad { color:#e03020; }

/* ------------------------------
   OVERLAYS
------------------------------ */
#hatch-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;
}
#hatch-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:'Press Start 2P',monospace; font-size:1.1rem; color:#f0d050; text-shadow:3px 3px #7a4400; }
#hov-sub { color:#60d020; font-size:.55rem; }
.hov-ok {
  background:#1a4010;
  border:2px solid #60c030; border-bottom:4px solid #306010;
  color:#a0f040; font-family:'Press Start 2P',monospace; font-size:.6rem;
  padding:10px 28px; cursor:pointer; margin-top:8px;
  transition:all .1s;
}
.hov-ok:hover { background:#2a6020; }
.hov-ok:active { border-bottom-width:2px; transform:translateY(2px); }

/* achievement bar */
#ach-bar {
  position:fixed; bottom:0; left:300px; right:290px;
  background:#0e1804;
  border-top:4px solid #60c030;
  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:#60a020; }
.ach-txt .ach-name { font-size:.55rem; color:#a0f050; margin-top:4px; }
#ach-x { margin-left:auto; background:transparent; border:2px solid #306010; color:#60a020; font-size:.5rem; cursor:pointer; padding:2px 6px; font-family:'Press Start 2P',monospace; }

/* toast */
#toast {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:#0a0804;
  border:2px solid #f0c840; border-bottom:4px solid #7a4800;
  padding:8px 20px; font-size:.5rem; color:#f0c840;
  z-index:200; transition:transform .2s;
  white-space:nowrap; pointer-events:none;
  font-family:'Press Start 2P',monospace;
}
#toast.on { transform:translateX(-50%) translateY(0); }

/* scrollbars */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#0a0804; }
::-webkit-scrollbar-thumb { background:#c8901c; }

/* Login erfolgt auf separaten Seiten (login/register/forgot/reset). */

/* topbar user badge */
#user-badge {
  font-family:'Press Start 2P',monospace;
  font-size:0.52rem; color:#60d020;
  display:flex; align-items:center; gap:6px;
}
#user-badge .t-btn {
  font-size:0.5rem; padding:3px 7px;
  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:#1a0e04;
  border-bottom:3px solid #c8901c;
  display:flex; align-items:center; justify-content:space-between;
}
#lb-title { font-size:13px; color:#f0d050; text-shadow:1px 1px #7a4400; }
#lb-refresh {
  background:#2a1808; border:2px solid #c8901c; border-bottom:3px solid #7a4800;
  color:#f0c840; font-family:'Press Start 2P',monospace; font-size:10px;
  padding:5px 10px; cursor:pointer;
}
#lb-refresh:hover { background:#3a2408; }
#lb-refresh:active { border-bottom-width:1px; transform:translateY(1px); }
#lb-list {
  flex:1; overflow-y:auto; padding:0;
  scrollbar-width:thin; scrollbar-color:#c8901c #0a0804;
}
.lb-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-bottom:2px solid #2a1808;
  font-size:11px; transition:background .1s;
}
.lb-row:hover { background:#1a1208; }
.lb-row:nth-child(odd) { background:#1a1408; }
.lb-row:nth-child(odd):hover { background:#221808; }
.lb-rank { font-size:12px; min-width:28px; text-align:center; color:#604820; }
.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:#f0c840; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row.is-me .lb-name { color:#60d020; }
.lb-stars { color:#60d020; white-space:nowrap; }
.lb-eps  { color:#a08040; font-size:10px; white-space:nowrap; }
.lb-medal { font-size:.78rem; min-width:20px; text-align:center; }
#lb-loading, #lb-empty {
  font-family:'Press Start 2P',monospace; font-size:10px;
  color:#604820; 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:'Press Start 2P',monospace; font-size:.7rem; color:#f0d050;
  text-shadow:2px 2px #7a4400; margin-bottom:2px;
}
.ie-section-title { font-family:'Press Start 2P',monospace; font-size:.42rem; color:#c8901c; margin-bottom:4px; }
.ie-desc { font-family:'Press Start 2P',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:'Press Start 2P',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:'Press Start 2P',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:'Press Start 2P',monospace; font-size:.6rem; color:#ffff00; text-shadow:2px 2px #7a4400; }
#event-desc  { font-family:'Press Start 2P',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; }
}

/* --- GOLD CORE --- */
#egg-btn.gold-core svg rect { transition:fill .3s; }
#egg-btn.gold-core { filter:drop-shadow(0 0 20px #ffd700) drop-shadow(0 0 8px #ff8800) !important; }
@keyframes goldPulse {
  0%,100%{ filter:drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 6px #ff8800); }
  50%    { filter:drop-shadow(0 0 32px #ffff00) drop-shadow(0 0 16px #ffd700); }
}
#egg-btn.gold-core { animation:goldPulse 0.8s ease-in-out infinite; }

/* --- COSMIC FRENZY --- */
.frenzy-runner {
  position:fixed; bottom:0; pointer-events:none; z-index:8500;
  font-size:0; /* use SVG only */
  animation:frenzyRun linear forwards;
}
.frenzy-runner svg { display:block; }
.frenzy-runner.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; }
}

/* --- STAR RAIN --- */
.rain-core {
  position:fixed; top:-40px; pointer-events:none; z-index:8800;
  animation:coreDrop linear forwards;
  image-rendering:pixelated;
}
@keyframes coreDrop {
  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:#1a0e04; border:2px solid #c8901c; border-bottom:4px solid #7a4800;
  color:#f0c840; padding:4px 10px; font-family:'Press Start 2P',monospace;
  font-size:.55rem; cursor:pointer; transition:all .08s;
  display:flex; align-items:center; gap:5px;
}
#sound-btn:hover { background:#3a2010; color:#fff; }
#sound-btn:active { border-bottom-width:2px; transform:translateY(2px); }
#sound-btn.muted { border-color:#604020; color:#604020; }

/* ---------- SPACE THEME COLOR OVERRIDE ---------- */
body { background:#05070d; color:#d8e6ff; }
#topbar, #center-top, #nameplate, #shop-head { background:#0d1628; }
#left, #center, #right { background:#0a1322; }
#center { border-left-color:#2f5078; border-right-color:#2f5078; }
#topbar, #nameplate, #center-top, #shop-head { border-color:#2f5078; }
#building-bar { background:#111d31; border-top-color:#2f5078; }
.bslot:nth-child(odd)  { background:#12213a; }
.bslot:nth-child(even) { background:#0f1b2f; }
.bslot, .bslot-label, .srow, .ms-row, .si { border-color:#2b4467; }
.t-logo, #news-text, .np-name, #lb-title, #shop-title { color:#9ed8ff; text-shadow:none; }
#egg-count { color:#f2f7ff; text-shadow:0 0 12px rgba(74,208,255,0.35); }
#eps-label, .srow, .bslot-lname, .si-desc { color:#88a4c7; }
.ctab { color:#88a4c7; }
.ctab.on, .ctab:hover, .si-name, .stat-group-title { color:#7dfc9a; }
.ctab.on::after { background:#4ad0ff; }
.t-btn, #sound-btn, .qty-btn, .ie-btn, .hov-ok, #lb-refresh {
  background:#13233a;
  border-color:#35567e;
  color:#d8e6ff;
}
.t-btn:hover, #sound-btn:hover, .qty-btn:hover, .ie-btn:hover, .hov-ok:hover, #lb-refresh:hover {
  background:#1a2f4c;
}
.qty-btn.sel { background:#214067; color:#7dfc9a; border-color:#4ad0ff; }
#hatch-fill, #event-timer-fill { background:linear-gradient(90deg,#4ad0ff,#7dfc9a); }
#hatch-track, #event-timer-track { background:#091120; border-color:#2b4467; }
#toast { background:#0f1b2f; border-color:#2f5078; color:#9ed8ff; }

/* ===== from index.html ===== */
:root {
      --bg: #05070d;
      --bg2: #0b1220;
      --card: #101a2b;
      --line: #2f5078;
      --text: #d8e6ff;
      --muted: #88a4c7;
      --accent: #4ad0ff;
      --accent2: #7dfc9a;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Segoe UI", Tahoma, sans-serif;
      color: var(--text);
      background:
        radial-gradient(800px 500px at 80% -10%, rgba(74, 208, 255, 0.2), transparent 60%),
        radial-gradient(900px 600px at -5% 100%, rgba(125, 252, 154, 0.16), transparent 60%),
        linear-gradient(160deg, var(--bg), var(--bg2));
      display: flex;
      flex-direction: column;
    }
    header {
      padding: 18px 22px;
      border-bottom: 1px solid var(--line);
      background: rgba(6, 12, 21, 0.7);
      backdrop-filter: blur(6px);
      position: sticky;
      top: 0;
    }
    .brand { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.04em; }
    .brand span { color: var(--accent); }
    main {
      width: min(1100px, 92vw);
      margin: 40px auto;
      display: grid;
      gap: 24px;
      grid-template-columns: 1.2fr 1fr;
    }
    .card {
      background: linear-gradient(180deg, rgba(16, 26, 43, 0.95), rgba(12, 19, 33, 0.95));
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 22px;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
    }
    h1 { margin: 0 0 14px; font-size: clamp(1.6rem, 3vw, 2.6rem); }
    h2 { margin-top: 0; }
    p { color: var(--muted); line-height: 1.6; }
    .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .btn {
      text-decoration: none;
      color: #061425;
      background: linear-gradient(90deg, var(--accent), #84e3ff);
      padding: 11px 15px;
      border-radius: 10px;
      font-weight: 700;
      border: 1px solid #8de6ff;
    }
    .btn.alt {
      color: var(--text);
      background: #13233a;
      border-color: #36577f;
    }
    ul { margin: 14px 0 0 0; padding-left: 18px; color: var(--muted); }
    li { margin: 8px 0; }
    .stat {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 12px;
    }
    .box {
      border: 1px solid #2b4667;
      border-radius: 12px;
      padding: 12px;
      background: #0f1a2b;
    }
    .label { color: var(--muted); font-size: 0.85rem; }
    .val { margin-top: 6px; font-size: 1.15rem; font-weight: 700; color: var(--accent2); }
    @media (max-width: 900px) {
      main { grid-template-columns: 1fr; margin-top: 20px; }
    }

/* ===== from admin.html ===== */
:root {
      --bg: #060b14;
      --card: #0e1a2d;
      --line: #305179;
      --text: #d8e6ff;
      --muted: #8ba7ca;
      --accent: #4ad0ff;
      --ok: #88ffc2;
      --warn: #ffd27f;
    }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: "Segoe UI", Tahoma, sans-serif; background: var(--bg); color: var(--text); }
    .wrap { width: min(1200px, 94vw); margin: 22px auto; }
    .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .muted { color: var(--muted); }
    .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
    button {
      background: #12243d;
      border: 1px solid #35567e;
      color: var(--text);
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
    }
    .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
    .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
    pre { white-space: pre-wrap; overflow: auto; background: #0b1526; border-radius: 10px; padding: 10px; border: 1px solid #2a4464; min-height: 220px; }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
    input, select {
      background: #0b1526;
      border: 1px solid #2a4464;
      border-radius: 8px;
      color: var(--text);
      padding: 8px;
    }
    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    th, td { border-bottom: 1px solid #2a4464; text-align: left; padding: 7px 6px; }
    .status { min-height: 20px; color: var(--warn); }
    .status.ok { color: var(--ok); }
    @media (max-width: 950px) { .grid { grid-template-columns: 1fr; } }

/* ===== from assets/auth.css ===== */
:root {
  --bg: #05070d;
  --bg2: #0b1220;
  --card: #0f1a2b;
  --line: #2f5078;
  --text: #d8e6ff;
  --muted: #88a4c7;
  --accent: #4ad0ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Tahoma, sans-serif;
  background:
    radial-gradient(750px 480px at 80% -10%, rgba(74, 208, 255, 0.2), transparent 60%),
    radial-gradient(850px 600px at -8% 100%, rgba(125, 252, 154, 0.16), transparent 60%),
    linear-gradient(160deg, var(--bg), var(--bg2));
  color: var(--text);
}
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.auth-card {
  width: min(460px, 96vw);
  background: linear-gradient(180deg, rgba(15, 26, 43, 0.97), rgba(12, 20, 33, 0.97));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}
h1 { margin: 0 0 8px; }
.sub { margin-top: 0; color: var(--muted); }
form { display: grid; gap: 12px; margin-top: 16px; }
label { font-size: 0.95rem; display: grid; gap: 6px; }
input {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #35567e;
  background: #0a1527;
  color: var(--text);
}
button {
  border: 1px solid #8de6ff;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), #84e3ff);
  color: #061425;
  font-weight: 700;
  padding: 11px;
  cursor: pointer;
}
.msg { min-height: 22px; color: #f7c95c; margin-top: 14px; }
.msg.ok { color: #88ffc2; }
.links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
a { color: #9ed8ff; }

/* ===== start page v2 ===== */
.start-body {
  margin: 0;
  min-height: 100vh;
  color: #dbe8ff;
  font-family: 'Space Mono', monospace;
  background:
    radial-gradient(950px 520px at 85% -15%, rgba(255, 177, 95, 0.17), transparent 62%),
    radial-gradient(900px 700px at -10% 105%, rgba(89, 214, 255, 0.16), transparent 58%),
    linear-gradient(160deg, #080d18, #12142b 55%, #200f1e);
  position: relative;
}

.start-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(#fff 0.8px, transparent 0.8px);
  background-size: 3px 3px;
}

.start-header {
  width: min(1160px, 94vw);
  margin: 18px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(8, 13, 25, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.start-brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
}

.start-brand span { color: #59d6ff; }

.start-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.start-nav a {
  color: #b9caf0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.start-nav a:hover { border-color: #59d6ff; color: #ffffff; }

.start-main {
  width: min(1160px, 94vw);
  margin: 22px auto 30px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1.45fr 1fr;
}

.start-hero,
.start-panel,
.start-strip {
  border: 1px solid rgba(115, 146, 205, 0.45);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 17, 33, 0.9), rgba(22, 17, 36, 0.88));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.start-hero {
  padding: 26px;
  grid-row: span 2;
}

.start-kicker {
  display: inline-block;
  margin: 0 0 14px;
  font-family: 'Orbitron', sans-serif;
  color: #ffb672;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.start-hero h1 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  line-height: 1.25;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
}

.start-copy {
  color: #9fb1d6;
  margin: 14px 0 0;
  max-width: 60ch;
  line-height: 1.6;
}

.start-cta {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.start-btn {
  text-decoration: none;
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.start-btn-primary {
  color: #1d1010;
  background: linear-gradient(90deg, #ffb672, #ffe36d);
  border-color: #ffd58d;
}

.start-btn-ghost {
  color: #dbe8ff;
  border-color: #4d6c9f;
  background: rgba(18, 34, 59, 0.55);
}

.start-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.start-tags span {
  border: 1px solid #426488;
  background: rgba(22, 36, 58, 0.65);
  color: #9fc9f1;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.start-desc {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #3b557a;
  background: rgba(13, 21, 38, 0.8);
}

.start-desc h2 {
  margin: 0 0 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.02rem;
}

.start-desc p {
  margin: 0;
  color: #a6b9d8;
  line-height: 1.55;
}

.start-panel {
  padding: 22px;
}

.start-panel h2 {
  margin: 0 0 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
}

.start-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.start-grid article {
  border-radius: 12px;
  border: 1px solid #3d5678;
  padding: 12px;
  background: rgba(11, 22, 39, 0.75);
}

.start-grid .t {
  margin: 0;
  color: #8ca4cb;
  font-size: 0.8rem;
}

.start-grid .v {
  margin: 6px 0 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
}

.start-inline {
  display: block;
  margin-top: 10px;
  color: #59d6ff;
}

.start-patchlog ul {
  margin: 0;
  padding-left: 18px;
  color: #adc0dd;
  line-height: 1.55;
}

.start-patchlog li { margin-bottom: 8px; }

.start-strip {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.start-strip-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.start-strip h3 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
}

.start-strip p {
  margin: 8px 0 0;
  color: #97abcb;
}

@media (max-width: 940px) {
  .start-main { grid-template-columns: 1fr; }
  .start-hero { grid-row: auto; }
  .start-strip { flex-direction: column; align-items: flex-start; }
}

/* ===== help page ===== */
.help-body {
  margin: 0;
  min-height: 100vh;
  color: #dce6ff;
  font-family: 'Space Mono', monospace;
  background:
    radial-gradient(800px 480px at 10% -10%, rgba(81, 193, 255, 0.2), transparent 58%),
    radial-gradient(900px 620px at 100% 110%, rgba(255, 174, 92, 0.14), transparent 60%),
    linear-gradient(160deg, #060c18, #121a30 55%, #1d132d);
}

.help-header {
  width: min(1160px, 94vw);
  margin: 16px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(8, 15, 28, 0.58);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.help-brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.help-header nav { display: flex; gap: 12px; flex-wrap: wrap; }
.help-header a { color: #9dc8f2; text-decoration: none; }
.help-header a:hover { color: #ffffff; }

.help-main {
  width: min(1160px, 94vw);
  margin: 18px auto 30px;
  display: grid;
  gap: 14px;
}

.help-card {
  border: 1px solid #3a5477;
  border-radius: 14px;
  background: rgba(13, 21, 38, 0.86);
  padding: 18px;
}

.help-card h1,
.help-card h2,
.help-card h3 {
  margin-top: 0;
  font-family: 'Orbitron', sans-serif;
}

.help-card p,
.help-card li { color: #aabedf; }

.help-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-grid article {
  border: 1px solid #38506f;
  border-radius: 10px;
  padding: 10px;
  background: rgba(9, 16, 31, 0.7);
}

.sim-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.sim-row label {
  font-size: 0.9rem;
  color: #9fb4d8;
  display: grid;
  gap: 6px;
}

.sim-row select,
.sim-row input {
  background: #0b1528;
  color: #dbe8ff;
  border: 1px solid #3a557a;
  border-radius: 10px;
  padding: 9px;
}

.sim-btn {
  border: 1px solid #ffd58d;
  border-radius: 10px;
  color: #1f1410;
  background: linear-gradient(90deg, #ffb672, #ffe36d);
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.sim-out {
  margin-top: 10px;
  border: 1px solid #3f597f;
  border-radius: 10px;
  background: rgba(9, 15, 28, 0.75);
  padding: 12px;
  min-height: 56px;
}

.sim-note {
  margin-top: 8px;
  color: #8ea4c8;
  font-size: 0.85rem;
}

@media (max-width: 880px) {
  .help-grid { grid-template-columns: 1fr; }
  .sim-row { grid-template-columns: 1fr; }
}

/* ===== game readability boost ===== */
#topbar .t-logo { font-size: 1.05rem; }
#topbar .t-btn,
#topbar #sound-btn { font-size: 0.8rem; padding: 6px 11px; }
#user-badge,
#t-online,
#t-username { font-size: 0.7rem; }

#news-text { font-size: 0.62rem; }
.ctab { font-size: 0.68rem; }

.np-name { font-size: 0.74rem; }
#eps-label { font-size: 0.62rem; }

#hatch-lbl { font-size: 0.72rem; }

.stat-group-title { font-size: 0.7rem; }
.srow { font-size: 0.68rem; }

.ms-row { font-size: 0.66rem; }

#shop-title { font-size: 0.95rem; }
#qty-bar label { font-size: 0.62rem; }
.qty-btn { font-size: 0.68rem; }

.si-name { font-size: 0.74rem; }
.si-desc { font-size: 0.62rem; }
.si-cost { font-size: 0.68rem; }
.si-ico-wrap .si-owned { font-size: 0.58rem; }

#lb-title { font-size: 0.8rem; }
#lb-refresh { font-size: 0.6rem; }
.lb-row { font-size: 0.62rem; }
.lb-rank { font-size: 0.7rem; }
.lb-eps { font-size: 0.58rem; }

#event-title { font-size: 0.8rem; }
#event-desc { font-size: 0.62rem; }

#toast { font-size: 0.72rem; }

#ie-box h2 { font-size: 0.9rem; }
.ie-section-title { font-size: 0.6rem; }
.ie-desc { font-size: 0.56rem; }
.ie-btn { font-size: 0.66rem; }

.ach-txt .ach-sub { font-size: 0.58rem; }
.ach-txt .ach-name { font-size: 0.7rem; }

/* ===== in-game chat + status ===== */
#chat-panel {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: min(430px, calc(100% - 24px));
  height: min(48vh, 390px);
  z-index: 30;
  border: 2px solid #2b4467;
  border-radius: 12px;
  background: rgba(8, 15, 28, 0.96);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  padding: 8px;
  gap: 8px;
}

#chat-panel.open { display: flex; }

#chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px 0;
  color: #9ed8ff;
  font-size: 0.62rem;
}

#chat-close {
  background: #13233a;
  border: 1px solid #35567e;
  color: #dbe8ff;
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.6rem;
}

#chat-list {
  flex: 1;
  overflow-y: auto;
  border: 2px solid #2b4467;
  border-radius: 10px;
  background: #0b1423;
  padding: 8px;
}

.chat-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(74, 208, 255, 0.15);
}

.chat-row:last-child { border-bottom: none; }
.chat-user { color: #7dfc9a; font-size: 0.68rem; min-width: 90px; }
.chat-msg { color: #dbe8ff; font-size: 0.68rem; word-break: break-word; }

#chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

#chat-input {
  background: #0b1528;
  border: 1px solid #3a557a;
  color: #dbe8ff;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.68rem;
}

#chat-send {
  background: #13233a;
  border: 1px solid #35567e;
  color: #dbe8ff;
  border-radius: 10px;
  padding: 9px 13px;
  cursor: pointer;
  font-size: 0.68rem;
}

#chat-toggle-btn.active {
  background: #1d385c;
  border-color: #4ad0ff;
  color: #7dfc9a;
}

#status-panel {
  margin: 8px;
  border: 2px solid #2b4467;
  border-radius: 10px;
  background: #0b1423;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

#status-title {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(74, 208, 255, 0.25);
  color: #9ed8ff;
  font-size: 0.64rem;
}

#status-list {
  padding: 6px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.status-row {
  font-size: 0.6rem;
  color: #aabedf;
}
.status-row.ok { color: #7dfc9a; }
.status-row.warn { color: #ffd27f; }
.status-row.error { color: #ff8f8f; }

/* black hole center ambience */
.egg-glow {
  background: radial-gradient(circle, rgba(151, 74, 255, 0.28), transparent 65%);
}

@media (max-width: 880px) {
  #chat-panel {
    right: 8px;
    left: 8px;
    width: auto;
    height: min(45vh, 360px);
  }
}

/* ===== start faq + wiki ===== */
.start-faq details {
  border: 1px solid #3b567a;
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(10, 17, 32, 0.78);
  margin-bottom: 8px;
}

.start-faq summary {
  cursor: pointer;
  color: #dbe8ff;
  font-weight: 700;
}

.start-faq p { margin: 10px 0 2px; }

.wiki-wrap {
  overflow-x: auto;
  border: 1px solid #38506f;
  border-radius: 10px;
}

.wiki-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  background: rgba(8, 14, 27, 0.75);
}

.wiki-table th,
.wiki-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(99, 143, 205, 0.35);
  text-align: left;
}

.wiki-table th { color: #9ed8ff; font-family: 'Orbitron', sans-serif; }
.wiki-table td { color: #c8d8f1; }

/* ===== auth v2 ===== */
.auth2-body {
  margin: 0;
  min-height: 100dvh;
  display: grid !important;
  place-items: center;
  padding: 22px;
  overflow: auto;
  font-family: 'Space Mono', monospace;
  color: #dbe8ff;
  background:
    radial-gradient(900px 540px at 90% -10%, rgba(255, 177, 95, 0.18), transparent 62%),
    radial-gradient(880px 580px at -10% 110%, rgba(89, 214, 255, 0.16), transparent 58%),
    linear-gradient(165deg, #070c18, #131932 55%, #1d1228);
}

.auth2-wrap {
  position: relative;
  inset: auto;
  margin: 0;
  width: min(640px, 96vw);
  max-width: 640px;
  padding: 0;
  display: block;
  overflow: visible;
}

.auth2-card {
  width: 100%;
  border: 1px solid #3a567b;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 17, 33, 0.93), rgba(18, 15, 34, 0.92));
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
  padding: 22px;
}

@media (max-height: 680px) {
  .auth2-body {
    place-items: start center;
  }
}

.auth2-kicker {
  margin: 0 0 8px;
  color: #ffbf7a;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.auth2-card h1 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 2rem);
}

.auth2-sub {
  margin-top: 8px;
  color: #9db2d6;
  line-height: 1.55;
}

.auth2-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.auth2-form label {
  display: grid;
  gap: 6px;
  color: #a7bcde;
  font-size: 0.92rem;
}

.auth2-form input {
  width: 100%;
  background: #0b1528;
  border: 1px solid #3a557a;
  color: #dbe8ff;
  border-radius: 10px;
  padding: 11px;
  font-size: 0.95rem;
}

.auth2-btn {
  border: 1px solid #ffd58d;
  border-radius: 10px;
  color: #1f1410;
  background: linear-gradient(90deg, #ffb672, #ffe36d);
  padding: 11px 14px;
  font-weight: 700;
  cursor: pointer;
}

.auth2-msg {
  min-height: 24px;
  margin-top: 12px;
  color: #f7c95c;
}

.auth2-msg.ok { color: #88ffc2; }

.auth2-links {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.auth2-links a { color: #9ed8ff; }