/* 迷你我的帝国 · MVP-1 · 像素风 UI */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:#0d0d16; overscroll-behavior:none; }
body { font-family:"Courier New","Zpix","SimSun",monospace; color:#f8f9fa; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
button { font-family:inherit; cursor:pointer; }

#game { display:flex; flex-direction:column; height:100%; }
/* iOS Safari 地址栏会让 100% 高度抖动，优先用动态视口高度 */
@supports (height:100dvh) { #game { height:100dvh; } }

/* ---------- 顶部 ---------- */
#topbar { background:#16162a; border-bottom:2px solid #2d2d4a; padding:4px 6px; z-index:20; }
.res-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.res-row.sub { margin-top:2px; font-size:12px; opacity:.92; gap:12px; }
.res { white-space:nowrap; font-size:13px; }
.res b { color:#ffd166; font-weight:bold; margin-left:2px; }
.speed { margin-left:auto; display:flex; gap:2px; }
.speed button { background:#22223a; color:#c9c9e0; border:1px solid #3a3a5c; padding:2px 6px; font-size:11px; }
.speed button.on { background:#0f3460; color:#ffd166; border-color:#ffd166; }

/* ---------- 舞台 ---------- */
#stage { position:relative; flex:1; overflow:hidden; background:#0d0d16; }
#map { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:none; cursor:grab; }
#stage.placing #map { cursor:crosshair; }

#float-layer { position:absolute; inset:0; pointer-events:none; z-index:5; }
.float-text { position:absolute; font-size:12px; color:#ffd166; text-shadow:1px 1px 0 #000; animation:floatUp 1s ease-out forwards; white-space:nowrap; }
.float-text.bad { color:#ef476f; }
@keyframes floatUp { from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-22px)} }

#toast-layer { position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:30; display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
.toast { background:rgba(20,20,40,.92); border:1px solid #ffd166; color:#ffd166; padding:6px 14px; font-size:13px; animation:toastIn .2s ease-out; }
.toast.bad { border-color:#ef476f; color:#ef476f; }
@keyframes toastIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

#tile-tip { position:absolute; z-index:15; background:rgba(15,15,30,.94); border:1px solid #3a3a5c; padding:6px 9px; font-size:12px; pointer-events:none; max-width:220px; line-height:1.5; }
#tile-tip b { color:#ffd166; }

/* ---------- 阶段进度 ---------- */
#phasebar { background:#16162a; border-top:2px solid #2d2d4a; display:flex; align-items:center; gap:8px; padding:5px 8px; font-size:12px; z-index:20; }
#phasebar .bar { flex:1; height:10px; background:#22223a; border:1px solid #3a3a5c; }
#phasebar .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,#52b788,#ffd166); }
#phase-goal-num { color:#ffd166; }
#phasebar button { background:#22223a; border:1px solid #3a3a5c; color:#c9c9e0; padding:2px 8px; font-size:11px; }

/* ---------- 底栏 ---------- */
#bottombar { display:flex; background:#16162a; border-top:2px solid #2d2d4a; z-index:20; padding-bottom:env(safe-area-inset-bottom); }
#bottombar button { flex:1; background:none; border:none; border-right:1px solid #22223a; color:#c9c9e0; padding:10px 0; font-size:13px; }
#bottombar button:last-child { border-right:none; }
#bottombar button.on { color:#ffd166; background:#22223a; }

/* ---------- 侧滑面板 ---------- */
#sidepanel { position:absolute; right:0; top:0; bottom:0; width:min(340px,88vw); background:#16162aee; border-left:2px solid #2d2d4a; z-index:25; display:flex; flex-direction:column; }
#sidepanel.hidden { display:none; }
.sp-head { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid #2d2d4a; color:#ffd166; }
.sp-head button { background:none; border:none; color:#c9c9e0; font-size:16px; }
.sp-body { flex:1; overflow-y:auto; padding:10px 12px; font-size:13px; line-height:1.7; }
.sp-body h3 { color:#95d5b2; margin:10px 0 4px; font-size:13px; }
.sp-body .kv { display:flex; justify-content:space-between; }
.sp-body .kv span:last-child { color:#ffd166; }
.log-item { border-bottom:1px dashed #2d2d4a; padding:6px 0; }
.log-item .d { color:#6b6b8f; font-size:11px; }
.log-item.warn .t { color:#ef476f; }
.log-item.good .t { color:#06d6a0; }
.chk { display:flex; align-items:center; gap:6px; padding:2px 0; }
.chk.done { color:#06d6a0; }
.chk.no { color:#8d8db0; }
.civ-card { border:1px solid #2d2d4a; padding:8px; margin-bottom:8px; }
.civ-card h4 { font-size:13px; margin-bottom:4px; }
.civ-card .acts { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.civ-card .acts button { background:#0f3460; color:#fff; border:1px solid #ffd166; padding:3px 8px; font-size:11px; }
.civ-card .acts button:disabled { opacity:.4; }
.btn { background:#0f3460; color:#fff; border:1px solid #ffd166; padding:4px 10px; font-size:12px; }
.btn.danger { border-color:#ef476f; }
.btn:disabled { opacity:.4; }

/* ---------- 建造轮盘 ---------- */
#buildpanel { position:absolute; left:0; right:0; bottom:0; max-height:56vh; background:#16162a; border-top:2px solid #2d2d4a; z-index:26; display:flex; flex-direction:column; }
#buildpanel.hidden { display:none; }
.bp-head { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #2d2d4a; color:#ffd166; }
.bp-head > span { white-space:nowrap; }
.bp-tabs { display:flex; gap:4px; flex:1; overflow-x:auto; }
.bp-tabs button { background:#22223a; border:1px solid #3a3a5c; color:#c9c9e0; padding:3px 8px; font-size:12px; white-space:nowrap; }
.bp-tabs button.on { color:#ffd166; border-color:#ffd166; }
#bp-close { background:none; border:none; color:#c9c9e0; font-size:16px; }
.bp-body { flex:1; overflow-y:auto; padding:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.bp-card { border:1px solid #2d2d4a; background:#1c1c33; padding:8px; cursor:pointer; }
.bp-card:hover { border-color:#ffd166; }
.bp-card.locked { opacity:.45; }
.bp-card.sel { border-color:#06d6a0; }
.bp-card h4 { font-size:13px; color:#f8f9fa; }
.bp-card .cost { font-size:11px; color:#e9c46a; margin-top:2px; }
.bp-card .desc { font-size:11px; color:#8d8db0; margin-top:2px; line-height:1.4; }
.bp-card .lock { font-size:11px; color:#ef476f; margin-top:2px; }
.bp-hint { padding:6px 10px; font-size:11px; color:#6b6b8f; border-top:1px solid #22223a; }

/* ---------- 模态 ---------- */
#modal { position:absolute; inset:0; background:rgba(5,5,12,.75); z-index:40; display:flex; align-items:center; justify-content:center; }
#modal.hidden { display:none; }
#modal-box { background:#16162a; border:2px solid #ffd166; max-width:min(440px,92vw); width:100%; max-height:86vh; overflow-y:auto; padding:18px; }
#modal-box h2 { color:#ffd166; font-size:17px; margin-bottom:10px; }
#modal-box p { font-size:13px; line-height:1.8; margin-bottom:10px; color:#d8d8ec; }
#modal-box .m-opts { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
#modal-box .m-opts button { text-align:left; background:#22223a; border:1px solid #3a3a5c; color:#f8f9fa; padding:9px 12px; font-size:13px; }
#modal-box .m-opts button:hover { border-color:#ffd166; }
#modal-box .m-opts button small { display:block; color:#8d8db0; font-size:11px; margin-top:2px; }

/* ================= 阶段二 / 三 UI ================= */
/* 通用小按钮 */
.btn.tiny { padding:2px 7px; font-size:11px; }
.tag { display:inline-block; font-size:10px; color:#8d8db0; border:1px solid #3a3a5c; padding:0 5px; }
.tag.done { color:#06d6a0; border-color:#06d6a0; }
.sp-body .acts { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.sp-body .acts button { flex:1; min-width:96px; background:#0f3460; color:#fff; border:1px solid #ffd166; padding:5px 8px; font-size:11px; text-align:left; }
.sp-body .acts button small { display:block; color:#c9c9e0; font-size:10px; margin-top:2px; opacity:.8; }
.sp-body select { width:100%; background:#22223a; color:#f8f9fa; border:1px solid #3a3a5c; padding:3px 5px; font-size:12px; font-family:inherit; margin-top:4px; }

/* 奏折卡 */
.memo-card { border:1px solid #2d2d4a; border-left:3px solid #0f3460; background:#1c1c33; padding:8px; margin-bottom:9px; }
.memo-card.urgent { border-left-color:#ef476f; }
.memo-card .mh { display:flex; justify-content:space-between; gap:6px; align-items:baseline; flex-wrap:wrap; }
.memo-card .mh b { color:#ffd166; font-size:13px; }
.memo-card .mh span { font-size:11px; color:#8d8db0; }
.memo-card p { font-size:12px; color:#d8d8ec; line-height:1.6; margin:5px 0; }
.mdata { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11px; color:#8d8db0; margin-bottom:5px; }
.mdata b { color:#95d5b2; }

/* 大臣行 */
.min-row { border:1px solid #2d2d4a; padding:6px 8px; margin-bottom:6px; display:flex; flex-direction:column; gap:2px; }
.min-row b { font-size:12px; color:#f8f9fa; }
.min-row span { font-size:11px; color:#8d8db0; }
.min-row .btn.tiny { align-self:flex-start; margin-top:3px; }

/* 科技树 */
.tech-branch { border:1px solid #2d2d4a; padding:7px; margin-bottom:8px; }
.tech-branch h4 { font-size:12px; color:#95d5b2; margin-bottom:5px; }
.tech-node { border-left:3px solid #3a3a5c; padding:4px 7px; margin-bottom:5px; background:#1a1a30; }
.tech-node.done { border-left-color:#06d6a0; }
.tech-node.next { border-left-color:#ffd166; }
.tech-node.lock { opacity:.5; }
.tech-node .tn-h { display:flex; justify-content:space-between; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; }
.tech-node .tn-d { font-size:11px; color:#8d8db0; }

/* 国策卡 */
.pol-card { border:1px solid #2d2d4a; padding:7px; margin-bottom:6px; }
.pol-card.on { border-color:#06d6a0; background:#14202a; }
.pol-card .pc-h { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12px; color:#f8f9fa; }
.pol-card .pc-d { font-size:11px; color:#8d8db0; margin-top:3px; }

/* 郡县卡 */
.prov-card { border:1px solid #2d2d4a; border-left:3px solid #3a3a5c; padding:7px; margin-bottom:7px; }
.prov-card.ok { border-left-color:#06d6a0; }
.prov-card.warn { border-left-color:#e9c46a; }
.prov-card.bad { border-left-color:#ef476f; }
.prov-card .pc-h { display:flex; justify-content:space-between; gap:6px; font-size:12px; color:#f8f9fa; flex-wrap:wrap; }

/* 军团 */
.raise { display:flex; gap:5px; align-items:center; margin:6px 0 10px; flex-wrap:wrap; }
.raise input { width:74px; background:#22223a; color:#f8f9fa; border:1px solid #3a3a5c; padding:4px 5px; font-size:12px; font-family:inherit; }
.raise select { flex:1; min-width:110px; margin:0; }
.army-card { border:1px solid #2d2d4a; padding:7px; margin-bottom:7px; }
.army-card .ac-h { display:flex; justify-content:space-between; font-size:12px; color:#f8f9fa; }
.army-card .ac-h span { color:#e9c46a; }

/* 战报 */
.battle { border:1px solid #2d2d4a; padding:6px; margin-bottom:8px; }
.battle .br { display:flex; justify-content:space-between; gap:6px; font-size:12px; align-items:baseline; }
.battle .br .good { color:#06d6a0; }
.battle .br .bad { color:#ef476f; }
.battle .bt { font-size:11px; color:#8d8db0; border-bottom:1px dashed #2d2d4a; padding:3px 0 5px; margin-bottom:4px; }
.battle .bsec { font-size:12px; color:#7cc4ff; margin-bottom:4px; }

/* 阶段三：星球列表可点 */
.prov-card[data-planet]:hover { border-color:#7cc4ff; }

/* ---------- 阶段皮肤：二（青铜金属 / 卷云纹） ---------- */
#game.phase2 #topbar,
#game.phase2 #phasebar,
#game.phase2 #bottombar { background:linear-gradient(180deg,#1b2430,#141a24); border-color:#6b5b3e; }
#game.phase2 #sidepanel { background:#141a24f2; border-left-color:#6b5b3e; }
#game.phase2 .sp-head,
#game.phase2 #phase-goal-num,
#game.phase2 .res b { color:#e8c37a; }
#game.phase2 #bottombar button.on { color:#e8c37a; background:#22303f; }
#game.phase2 #phasebar .bar i { background:linear-gradient(90deg,#7a6a45,#e8c37a); }
#game.phase2 #modal-box { border-color:#e8c37a; }
#game.phase2 #modal-box h2 { color:#e8c37a; }
#game.phase2 .btn,
#game.phase2 .sp-body .acts button { background:#2a3a4d; border-color:#e8c37a; }
#game.phase2 .memo-card { background:#18202c; border-left-color:#8a7a52; }
#game.phase2 .memo-card.urgent { border-left-color:#ef476f; }

/* ---------- 阶段皮肤：三（深空 / 星蓝） ---------- */
#game.phase3 #topbar,
#game.phase3 #phasebar,
#game.phase3 #bottombar { background:linear-gradient(180deg,#0e1730,#0a1020); border-color:#3a5a9a; }
#game.phase3 #sidepanel { background:#0a1020f2; border-left-color:#3a5a9a; }
#game.phase3 .sp-head,
#game.phase3 #phase-goal-num,
#game.phase3 .res b { color:#7cc4ff; }
#game.phase3 #bottombar button.on { color:#7cc4ff; background:#132544; }
#game.phase3 #phasebar .bar i { background:linear-gradient(90deg,#3a5a9a,#7cc4ff); }
#game.phase3 #modal-box { border-color:#7cc4ff; }
#game.phase3 #modal-box h2 { color:#7cc4ff; }
#game.phase3 .btn,
#game.phase3 .sp-body .acts button { background:#132544; border-color:#7cc4ff; }

/* ---------- 启动画面 ---------- */
#boot { position:absolute; inset:0; background:#0d0d16; z-index:50; display:flex; align-items:center; justify-content:center; }
#boot.hidden { display:none; }
.boot-inner { text-align:center; max-width:420px; padding:20px; width:100%; }
.boot-inner h1 { font-size:30px; color:#ffd166; letter-spacing:4px; text-shadow:0 0 18px #5a189a; }
.boot-inner .slogan { color:#95d5b2; font-size:13px; margin:10px 0 24px; }
#boot-menu { display:flex; flex-direction:column; gap:10px; }
#boot-menu button { background:#1c1c33; border:1px solid #3a3a5c; color:#f8f9fa; padding:12px; font-size:15px; }
#boot-menu button:hover { border-color:#ffd166; color:#ffd166; }
#boot-menu button small { display:block; font-size:11px; color:#8d8db0; margin-top:3px; }
.boot-inner .ver { margin-top:24px; font-size:11px; color:#4a4a6a; }

@media (max-width:520px){
  .res { font-size:12px; }
  .res-row.sub { font-size:11px; }
  #bottombar button { font-size:11px; padding:9px 0; }
}