:root{ --bg:#0b0f14; --panel:#111822; --panel2:#0f141b; --text:#e7eef7; --muted:#9fb1c5; --accent:#5aa9e6; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Helvetica,Arial;height:100dvh;overflow:hidden}
.app{display:grid;grid-template-columns:1fr 420px;gap:16px;padding:16px;height:100dvh}
.panel{background:var(--panel);border:1px solid #1b2430;border-radius:12px;padding:16px;min-height:0;overflow:auto}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
h1{margin:0;font-size:18px;font-weight:600}
.phase{color:var(--muted);font-size:14px}
.visual{display:grid;grid-template-rows:auto auto auto 1fr;gap:10px;min-height:0}

.advance-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.advance-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.advance-row .bar{position:relative;width:160px;height:6px;background:#0f141b;border:1px solid #1b2430;border-radius:6px;overflow:hidden}
.advance-row .bar>span{position:absolute;left:0;top:0;bottom:0;width:0;background:#244e72}
.advance-row button{border:1px solid #2a3a4a;background:#121a23;color:var(--text);padding:8px 10px;border-radius:8px;font-size:13px;cursor:pointer}
.advance-row button:disabled{opacity:.5;cursor:not-allowed}

.stats{display:flex;gap:16px;flex-wrap:wrap;padding:12px;background:var(--panel2);border:1px solid #1b2430;border-radius:10px}
.kpi{font-size:14px;color:var(--muted)} .kpi strong{color:var(--text)}

.lore{background:var(--panel2);border:1px solid #1b2430;border-radius:10px;padding:12px}
.lore h3{margin:0 0 6px 0;font-size:13px;color:var(--muted);font-weight:600}
.lore-list{display:grid;gap:6px}
.lore-item{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.lore-bullet{width:10px;height:10px;border-radius:50%;margin-top:3px;background:#223042;outline:1px solid #2a3a4a}
.lore-item.unlocked .lore-bullet{background:#2f6aa0;outline-color:#3a86c3}

.canvas{position:relative;background:radial-gradient(1000px 600px at 30% 40%, #15202b 0%, #0b0f14 70%);border:1px solid #1b2430;border-radius:10px;display:grid;place-items:center;min-height:360px;overflow:hidden}
.caption{position:absolute;bottom:10px;left:12px;right:12px;color:var(--muted);font-size:13px}
.mini{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.boss{position:absolute;right:12px;top:12px;background:#2a0f0f;color:#ffdede;border:1px solid #511c1c;padding:6px 8px;border-radius:8px;font-size:12px;display:none}

.controls{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;min-height:0}
.counter{background:var(--panel2);border:1px solid #1b2430;border-radius:10px;padding:12px}
.big{font-size:28px;font-weight:700}.small{font-size:13px;color:var(--muted)}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clicker{display:grid;gap:8px;background:var(--panel2);border:1px solid #1b2430;border-radius:10px;padding:12px}
button.primary{border:0;border-radius:10px;padding:14px 16px;font-size:16px;font-weight:600;background:linear-gradient(180deg,#2a5c86,#244e72);color:#fff;cursor:pointer}
button.primary:disabled{opacity:.6;cursor:not-allowed}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:1px solid #2a3a4a;background:#121a23;color:var(--text);padding:6px 10px;border-radius:8px;font-size:13px;cursor:pointer}
.tab.active{background:#1a2632}
.section{display:none}
.section.active{display:block}

.shop .item{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:10px 12px;border-bottom:1px solid #1b2430;align-items:center}
.shop .item h4{margin:0;font-size:15px}
.shop .desc{font-size:13px;color:var(--muted)}
.shop .meta{font-size:13px;color:var(--muted)}
.shop .item button{border:1px solid #294761;background:#17222d;color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.shop .item button:disabled{opacity:.5;cursor:not-allowed}
.buyrow{display:flex;gap:6px;align-items:center}

.ach{display:grid;gap:8px}
.ach .a{display:flex;justify-content:space-between;align-items:center;border:1px solid #1b2430;background:var(--panel2);border-radius:8px;padding:8px 10px}
.ach .a.lock .name{color:#6b7f95}
.ach .badge{font-size:12px;color:#c7d7ea}

.tech{display:grid;gap:8px}
.tech .t{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid #1b2430;background:var(--panel2);border-radius:8px;padding:8px 10px}
.tech .t.lock .name{color:#6b7f95}

.spark-wrap{position:relative;display:inline-block}
.spark-tip{position:absolute;transform:translate(-50%,-110%);pointer-events:none;background:#0f141b;border:1px solid #1b2430;border-radius:6px;padding:4px 6px;font-size:12px;color:var(--text);white-space:nowrap;opacity:0;transition:opacity .12s}
.spark-zoom{position:fixed;right:16px;bottom:16px;width:50vw;max-width:960px;height:260px;background:var(--panel2);border:1px solid #1b2430;border-radius:12px;padding:10px 12px;display:none;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:50}
.spark-zoom header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.spark-zoom h4{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.spark-zoom svg{width:100%;height:200px;display:block}

@media (max-width:900px){.app{grid-template-columns:1fr}}

/* ============== Start Overlay ============== */
.start-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(111,76,255,.25), transparent),
              radial-gradient(900px 500px at 10% 110%, rgba(90,169,230,.18), transparent),
              #0b1219f2;
  display: grid; place-items: center;
  z-index: 9999;
  transition: opacity .35s ease;
}
.start-overlay.hidden { opacity: 0; pointer-events: none; }

.start-card {
  width: min(92vw, 720px);
  background: rgba(16,24,33,.85);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(6px);
}

.start-illustration {
  width: 100%; height: 240px; object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.05);
}

.start-title {
  margin: 18px 16px 0; font-size: clamp(28px, 5vw, 44px); font-weight: 800;
  letter-spacing: .3px;
}
.start-title .logo-accent { color: #5aa9e6; }

.start-sub { margin: 6px 16px 10px; opacity: .8; }

.start-actions { display: flex; gap: 10px; justify-content: center; padding: 16px; flex-wrap: wrap; }

.btn { 
  padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: #5aa9e6; border-color: #5aa9e6; color: #0b1219; font-weight: 700; }
.btn.danger { background: #e65a5a; border-color: #e65a5a; color: #fff; }
.btn.ghost { background: transparent; }

.start-note { padding: 0 16px 18px; opacity: .65; font-size: .9rem; }