:root{
  --bg:#04080f; --bg2:#071018; --ink:#dfeaf5; --muted:#8aa0b6;
  --cyan:#39d6ff; --teal:#2bf0d0; --gold:#ffcf45; --red:#ff5d6c; --vio:#a98bff;
  --line:rgba(120,200,255,.14);
  --pulse:#54a8ff; --arc:#c08bff; --frost:#5fe4ff; --flame:#ff8a3c; --rail:#ff5d8a; --bank:#ffd24a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:radial-gradient(120% 90% at 50% -10%,#0a1726 0%,var(--bg2) 45%,var(--bg) 100%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;
}
.topbar{
  position:fixed;top:0;left:0;right:0;height:46px;z-index:30;
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(180deg,rgba(8,16,26,.92),rgba(8,16,26,.55) 70%,transparent);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.topbar .back{color:var(--muted);text-decoration:none;font-size:13px;font-weight:600}
.topbar .back:hover{color:var(--cyan)}
.topbar .brand{font-weight:800;letter-spacing:-.01em;font-size:15px}
.topbar .hs{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.topbar .hs b{color:var(--gold);font-size:13px}

#stage{position:fixed;inset:0;top:46px;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* HUD */
#hud{position:absolute;top:8px;left:8px;right:8px;z-index:12;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.hudChip{
  background:rgba(10,22,36,.6);border:1px solid var(--line);border-radius:11px;
  padding:5px 10px;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.02em;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.hudChip b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;margin-left:3px}
.hudChip.core b{color:var(--teal)} .hudChip.gold b{color:var(--gold)} .hudChip.gold{color:var(--gold)}

#topctrl{position:absolute;top:8px;right:8px;z-index:13;display:flex;gap:6px}
.ctrlBtn{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(10,22,36,.62);color:var(--ink);font-size:14px;font-weight:800;cursor:pointer;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.ctrlBtn:active{transform:scale(.94)}

/* 토스트 */
#toast{
  position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:14;
  background:rgba(8,18,30,.82);border:1px solid var(--line);border-radius:12px;
  padding:8px 16px;font-size:13px;font-weight:700;white-space:nowrap;
  box-shadow:0 8px 26px rgba(0,0,0,.4);transition:opacity .3s;
}
#toast.hidden{opacity:0;pointer-events:none}

/* 타워 액션 팝업 */
#towerPop{
  position:absolute;z-index:18;width:172px;
  background:rgba(9,19,32,.95);border:1px solid var(--line);border-radius:13px;
  padding:10px;box-shadow:0 14px 40px rgba(0,0,0,.55);
}
#towerPop.hidden{display:none}
.tpTitle{font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px;margin-bottom:5px}
.tpLv{font-size:10px;color:var(--gold);background:rgba(255,207,69,.12);padding:1px 6px;border-radius:6px}
.tpStats{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.tpStats b{color:var(--ink)}
.tpBtns{display:flex;gap:6px}
.tpBtn{flex:1;padding:8px 4px;border:0;border-radius:9px;font-size:11px;font-weight:800;cursor:pointer;color:#06121e}
.tpBtn.up{background:linear-gradient(180deg,#6fe0ff,#27b6e6)}
.tpBtn.up:disabled{opacity:.4;cursor:default}
.tpBtn.sell{background:linear-gradient(180deg,#ff8a98,#e0455a);color:#2a0a0e}

/* 빌드 바 */
#buildbar{
  position:absolute;left:0;right:0;bottom:0;z-index:15;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(6,13,22,.96),rgba(6,13,22,.6) 70%,transparent);
  display:flex;gap:8px;align-items:stretch;
}
#towerBar{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}
#towerBar::-webkit-scrollbar{display:none}
.tBtn{
  flex:0 0 auto;width:62px;border:1px solid var(--line);border-radius:12px;
  background:rgba(12,24,38,.72);color:var(--ink);cursor:pointer;padding:6px 3px 5px;
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .1s,border-color .15s;
}
.tBtn:active{transform:scale(.95)}
.tBtn.sel{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 16px rgba(57,214,255,.35)}
.tBtn.poor{opacity:.5}
.tBtn .ic{width:26px;height:26px;border-radius:8px;display:block}
.tBtn .nm{font-size:9px;font-weight:700;letter-spacing:-.02em;line-height:1.05;text-align:center;height:21px;display:flex;align-items:center}
.tBtn .cs{font-size:10px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.bigBtn{
  flex:0 0 auto;align-self:stretch;min-width:104px;border:0;border-radius:13px;cursor:pointer;
  background:linear-gradient(180deg,#34e0b8,#16b691);color:#062018;font-weight:900;font-size:14px;
  letter-spacing:-.01em;box-shadow:0 6px 18px rgba(22,182,145,.35);padding:0 14px;
}
.bigBtn:active{transform:scale(.97)}
.bigBtn.running{background:linear-gradient(180deg,#3a526b,#26384b);color:var(--muted);box-shadow:none}

/* 오버레이 패널 */
.overlay{
  position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(3,7,13,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.overlay.hidden{display:none}
.panel{
  width:100%;max-width:420px;max-height:90vh;overflow:auto;text-align:center;
  background:linear-gradient(180deg,rgba(15,28,44,.96),rgba(8,16,27,.96));
  border:1px solid var(--line);border-radius:22px;padding:24px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(120,200,255,.12);
}
.panel.wide{max-width:520px}
.panel h1{margin:0 0 2px;font-size:32px;font-weight:900;letter-spacing:-.02em}
.panel h1 .em{filter:drop-shadow(0 0 12px rgba(57,214,255,.6))}
.panel h2{margin:0 0 10px;font-size:21px;font-weight:900;letter-spacing:-.01em}
.subt{margin:0 0 14px;font-size:14px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--cyan),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:#b9cadb}
.sub b{color:var(--ink)} .cIn{color:var(--cyan)} .cCore{color:var(--teal)}
.btn{
  display:block;width:100%;margin:8px 0 0;padding:14px;border:0;border-radius:14px;cursor:pointer;
  font-size:16px;font-weight:900;letter-spacing:-.01em;
  background:linear-gradient(180deg,#46dcff,#1f9ed6);color:#04141f;box-shadow:0 8px 22px rgba(31,158,214,.4);
}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);box-shadow:none;font-size:14px}
.ctrl{margin:16px 0 0;font-size:11.5px;color:var(--muted);line-height:1.7}
.ctrl b{color:#cfe}

.howBody{text-align:left;font-size:12.5px;line-height:1.6;color:#b9cadb}
.howBody p{margin:5px 0}
.howBody .hsub{font-weight:800;color:var(--cyan);font-size:12px;letter-spacing:.04em;margin:2px 0 4px}
.howBody b{color:var(--ink)}
.howBody hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.dot{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:3px;box-shadow:0 0 8px currentColor}
.tPulse{background:var(--pulse);color:var(--pulse)} .tArc{background:var(--arc);color:var(--arc)}
.tFrost{background:var(--frost);color:var(--frost)} .tFlame{background:var(--flame);color:var(--flame)}
.tRail{background:var(--rail);color:var(--rail)} .tBank{background:var(--bank);color:var(--bank)}

/* 증강 카드 */
#augGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:6px}
.augCard{
  background:linear-gradient(180deg,rgba(20,36,56,.9),rgba(10,20,34,.9));
  border:1px solid var(--line);border-radius:15px;padding:13px 9px;cursor:pointer;text-align:center;
  transition:transform .12s,border-color .15s,box-shadow .15s;
}
.augCard:hover{transform:translateY(-3px);border-color:var(--cyan);box-shadow:0 10px 26px rgba(57,214,255,.25)}
.augCard .ai{font-size:26px;display:block;margin-bottom:6px;filter:drop-shadow(0 0 8px rgba(57,214,255,.5))}
.augCard .at{font-size:12.5px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em}
.augCard .ad{font-size:10.5px;color:var(--muted);line-height:1.45}
@media (max-width:430px){ #augGrid{grid-template-columns:1fr;gap:7px} .augCard{display:flex;align-items:center;gap:10px;text-align:left;padding:10px}
  .augCard .ai{margin:0;font-size:22px} .augCard .at{margin-bottom:2px} }

.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 4px}
.statgrid .cell{background:rgba(10,22,36,.7);border:1px solid var(--line);border-radius:13px;padding:11px}
.statgrid .k{font-size:11px;color:var(--muted);margin-bottom:3px}
.statgrid .v{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums}
.statgrid .v.gold{color:var(--gold)}