*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
:root{
  --bg:#0d1620; --bg2:#14202b; --panel:#16242f; --panel2:#1d3040;
  --line:#273a4a; --txt:#e8f0f6; --mut:#90a8bc;
  --acc:#46c2e8; --gold:#ffd24d; --good:#5fd38a; --bad:#ff6b6b;
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",system-ui,sans-serif;
  background:var(--bg); color:var(--txt); overflow:hidden;
  display:flex; flex-direction:column; height:100dvh;
  user-select:none; -webkit-user-select:none;
}
button{font-family:inherit; cursor:pointer; color:inherit; border:none; background:none}
small{font-size:.78em; opacity:.85}

/* ---------- top bar ---------- */
#topbar{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  padding-top:calc(8px + env(safe-area-inset-top));
  background:linear-gradient(180deg,#16242f,#101a23);
  border-bottom:1px solid var(--line); flex:0 0 auto; z-index:5;
}
#topbar .back{color:var(--mut); text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap}
#topbar .brand{font-weight:800; font-size:16px; display:flex; align-items:center; gap:4px}
#topbar .brand .ic{font-size:18px}
#topbar .spacer{flex:1}
#topbar .stat{
  font-size:13px; font-weight:700; background:#0e1922; border:1px solid var(--line);
  padding:5px 9px; border-radius:9px; white-space:nowrap;
}
#topbar .stat #incChip{color:var(--good)}
#topbar button{
  width:36px; height:36px; border-radius:10px; background:#0e1922;
  border:1px solid var(--line); font-size:17px; display:grid; place-items:center;
}
#topbar button:active{background:var(--panel2)}

/* ---------- main / stage ---------- */
#app{flex:1; display:flex; flex-direction:column; min-height:0}
#stage{position:relative; flex:1; min-height:0; background:
  radial-gradient(120% 90% at 50% 0%,#16273a 0%,#0b1620 70%)}
#game{display:block; width:100%; height:100%; touch-action:none}

#banner{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(8,14,20,.82); border:1px solid var(--line); color:var(--txt);
  padding:7px 16px; border-radius:999px; font-weight:800; font-size:14px;
  pointer-events:none; opacity:0; transition:opacity .25s; backdrop-filter:blur(4px);
}
#banner.show{opacity:1}
#toast{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none;
}
#toast .t{
  background:rgba(8,14,20,.86); border:1px solid var(--line); padding:6px 12px;
  border-radius:10px; font-size:12.5px; font-weight:600; opacity:0;
  transform:translateY(8px); transition:opacity .2s,transform .2s;
}
#toast .t.show{opacity:1; transform:translateY(0)}

/* ---------- context panel ---------- */
#panel{
  flex:0 0 auto; background:var(--panel); border-top:1px solid var(--line);
  padding:0 8px; max-height:0; overflow:hidden; transition:max-height .18s ease;
}
#panel.open{max-height:230px; padding:9px 8px; overflow-y:auto}
.pTitle{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; margin-bottom:6px}
.pTitle .sub{font-size:12px; color:var(--mut); font-weight:600}
.pRow{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px}
.chipbtn{
  background:#0f1c26; border:1px solid var(--line); border-radius:10px;
  padding:7px 10px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;
}
.chipbtn .c{color:var(--gold); font-weight:800}
.chipbtn:disabled{opacity:.4}
.chipbtn:active:not(:disabled){background:var(--panel2)}
.chipbtn.act{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset}
.statline{font-size:12.5px; color:var(--mut); line-height:1.6}
.statline b{color:var(--txt)}
.hpwrap{height:7px; background:#0a141b; border-radius:5px; overflow:hidden; margin-top:3px; border:1px solid var(--line)}
.hpwrap > i{display:block; height:100%; background:linear-gradient(90deg,#5fd38a,#37b66a)}

/* ---------- bottom bar ---------- */
#bottombar{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:9px 10px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,#101a23,#16242f); border-top:1px solid var(--line);
}
#bottombar .hint{flex:1; font-size:12.5px; color:var(--mut); text-align:center; font-weight:600}
#bottombar button{padding:11px 14px; border-radius:12px; font-weight:800; font-size:14px}
#bottombar .ghost{background:#0e1922; border:1px solid var(--line); color:var(--txt)}
#bottombar .primary{background:linear-gradient(180deg,#3aa6d9,#2b86c4); color:#04121c; box-shadow:0 3px 0 #1c5d8c}
#bottombar .primary:active{transform:translateY(2px); box-shadow:0 1px 0 #1c5d8c}
#bottombar .primary.warn{background:linear-gradient(180deg,#ffd24d,#f3b73a); box-shadow:0 3px 0 #b07e10}

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; background:rgba(5,9,13,.72); z-index:50;
  display:flex; align-items:flex-end; justify-content:center; backdrop-filter:blur(3px);
}
.modal[hidden]{display:none}
.sheet{
  width:100%; max-width:560px; max-height:88dvh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-bottom:none;
  border-radius:18px 18px 0 0; padding:16px 16px calc(20px + env(safe-area-inset-bottom));
  animation:rise .22s ease;
}
@keyframes rise{from{transform:translateY(40px); opacity:.4} to{transform:translateY(0); opacity:1}}
.sheet h2{font-size:19px; margin-bottom:4px; display:flex; align-items:center; gap:8px}
.sheet .lead{color:var(--mut); font-size:13px; margin-bottom:12px; line-height:1.6}
.sheet h3{font-size:14px; margin:14px 0 7px; color:var(--acc)}
.sheet p, .sheet li{font-size:13.5px; line-height:1.7; color:#d6e4ee}
.sheet ul{padding-left:18px; margin:4px 0}
.sheet .kbd{background:#0e1922; border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:12px}
.closeRow{display:flex; gap:8px; margin-top:16px}
.closeRow button{flex:1; padding:12px; border-radius:12px; font-weight:800; font-size:14px}
.closeRow .x{background:#0e1922; border:1px solid var(--line); color:var(--txt)}
.closeRow .ok{background:linear-gradient(180deg,#3aa6d9,#2b86c4); color:#04121c}
.closeRow .danger{background:#3a1820; border:1px solid #6e2b34; color:#ff9b9b}

/* tech tree grid */
.techgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.techcard{
  background:#0f1c26; border:1px solid var(--line); border-radius:12px; padding:10px;
  display:flex; flex-direction:column; gap:4px; text-align:left;
}
.techcard.done{border-color:var(--good); background:#10241a}
.techcard.locked{opacity:.5}
.techcard:disabled{cursor:default}
.techcard .tn{font-weight:800; font-size:14px; display:flex; justify-content:space-between; align-items:center}
.techcard .tn .cost{color:var(--gold); font-size:12.5px}
.techcard .td{font-size:11.8px; color:var(--mut); line-height:1.5}
.techcard .tier{font-size:10.5px; color:#6f8aa0}

/* reward / choice cards */
.choices{display:flex; flex-direction:column; gap:9px}
.choice{
  text-align:left; background:#0f1c26; border:1px solid var(--line); border-radius:12px;
  padding:12px; display:flex; gap:11px; align-items:center;
}
.choice:active{background:var(--panel2); border-color:var(--acc)}
.choice .ico{font-size:26px; width:34px; text-align:center}
.choice .ct{font-weight:800; font-size:14.5px}
.choice .cd{font-size:12px; color:var(--mut); line-height:1.5}

/* survey table */
.surv{width:100%; border-collapse:collapse; font-size:13px}
.surv th,.surv td{padding:7px 6px; text-align:center; border-bottom:1px solid var(--line)}
.surv th{color:var(--mut); font-weight:700; font-size:11.5px}
.surv td.nm{text-align:left; font-weight:700; display:flex; align-items:center; gap:6px}
.surv .swatch{width:12px; height:12px; border-radius:3px; display:inline-block}
.surv tr.me td{background:#102433}

.big{text-align:center; padding:6px 0}
.big .em{font-size:46px}
.big .sc{font-size:34px; font-weight:900; color:var(--gold); margin:4px 0}
.big .ds{color:var(--mut); font-size:13px}