/* ===== 丧尸小城 - 赛博朋克末日废土 UI ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#06080f;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif; color:#cfe6f5; user-select:none; }
#app { position:relative; width:100%; height:100%; }
/* 层级：画布（人物/怪物/地图）z-index:1 → HUD（武器栏等）z-index:10 → 面板 20+ */
#gameCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; background:#0a0e1a; z-index:1; }
.hidden { display:none !important; }

/* ===== 通用面板 ===== */
.screen { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:radial-gradient(ellipse at 50% 30%, #101a30 0%, #06080f 75%);
  z-index:20; padding:20px; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:20px; background:rgba(4,6,12,.82); z-index:40; backdrop-filter:blur(3px); }
.title { font-size:56px; letter-spacing:12px; color:#22d3ee;
  text-shadow:0 0 18px #22d3ee, 0 0 46px #0ea5b7, 0 0 4px #fff; }
.subtitle { color:#7c8db0; letter-spacing:4px; font-size:13px; }
.neonText { color:#a78bfa; text-shadow:0 0 14px #a78bfa; letter-spacing:3px; }
.goldRow { font-size:22px; color:#fbbf24; text-shadow:0 0 10px rgba(251,191,36,.6); }
.lobbyInfo { color:#7c8db0; font-size:13px; text-align:center; line-height:1.7; }
.tip { max-width:520px; text-align:center; color:#5b6b8c; font-size:12px; line-height:1.7; }
.insureRow { color:#93c5fd; font-size:13px; cursor:pointer; }
.panelTitle { color:#22d3ee; letter-spacing:4px; text-shadow:0 0 12px rgba(34,211,238,.7); }
.goldMini { font-size:14px; color:#fbbf24; margin-left:14px; }
.panelBody { width:min(720px,94vw); max-height:62vh; overflow-y:auto; background:rgba(13,20,38,.9);
  border:1px solid #1e3a5f; border-radius:10px; padding:14px; box-shadow:0 0 24px rgba(34,211,238,.12) inset; }

/* ===== 按钮 ===== */
.btn { padding:10px 30px; font-size:15px; letter-spacing:3px; color:#cfe6f5; background:#101a30;
  border:1px solid #2b4a7a; border-radius:6px; cursor:pointer; transition:all .15s; }
.btn:hover { border-color:#22d3ee; color:#22d3ee; box-shadow:0 0 14px rgba(34,211,238,.45); }
.btn.primary { border-color:#22d3ee; color:#06080f; background:linear-gradient(180deg,#38e0f8,#0e9cb5);
  font-weight:bold; box-shadow:0 0 18px rgba(34,211,238,.5); }
.btn.primary:hover { filter:brightness(1.15); }
.btn.big { padding:16px 60px; font-size:20px; }
.btn.ghost { border-color:#3a4a68; color:#7c8db0; }
.btn.mini { padding:4px 12px; font-size:12px; letter-spacing:1px; }
.btn.warn { border-color:#f472b6; color:#f472b6; }
.btn:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.btnCol { display:flex; flex-direction:column; gap:12px; align-items:center; }
.btnRow { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.closeBtn { margin-top:6px; }

/* ===== 商店 ===== */
.tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.tab { padding:7px 18px; font-size:13px; background:#0d1426; border:1px solid #1e3a5f;
  border-radius:6px 6px 0 0; cursor:pointer; color:#7c8db0; }
.tab.on { color:#22d3ee; border-color:#22d3ee; box-shadow:0 0 10px rgba(34,211,238,.35); }
.shopItem { display:flex; align-items:center; gap:10px; padding:9px 10px; border-bottom:1px solid #16233f; }
.shopItem:last-child { border-bottom:none; }
.si-icon { width:34px; height:34px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-size:18px; background:#101a30; border:1px solid #2b4a7a; flex:none; }
.si-main { flex:1; min-width:0; }
.si-name { font-size:14px; color:#e2f3ff; }
.si-name .cat { font-size:11px; color:#7c8db0; margin-left:6px; }
.si-desc { font-size:11px; color:#5b6b8c; margin-top:2px; line-height:1.5; }
.si-state { font-size:11px; color:#34d399; margin-top:2px; }
.si-state.bad { color:#f87171; }
.si-ops { display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex:none; }
.price { color:#fbbf24; font-size:12px; }
.secTitle { color:#a78bfa; font-size:13px; letter-spacing:2px; margin:10px 0 4px; }

/* 图鉴 */
.dexGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.dexCell { padding:8px; border-radius:6px; border:1px solid #1e3a5f; background:#0d1426;
  font-size:12px; text-align:center; }
.dexCell.lock { opacity:.3; filter:grayscale(1); }
.dexCell .nm { display:block; margin-bottom:3px; }
.dexCell .pr { font-size:10px; color:#fbbf24; }

/* ===== 三选一卡片 ===== */
.cardRow { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.upCard { width:170px; padding:20px 14px; background:#0d1426; border:1px solid #7c3aed; border-radius:10px;
  text-align:center; cursor:pointer; transition:all .15s; }
.upCard:hover { transform:translateY(-6px); box-shadow:0 0 22px rgba(167,139,250,.55); border-color:#a78bfa; }
.upCard .ic { font-size:34px; }
.upCard .nm { color:#a78bfa; margin:8px 0 4px; font-size:15px; }
.upCard .ds { color:#7c8db0; font-size:11px; line-height:1.5; }

/* ===== 弹窗 ===== */
.modalBox { position:relative; width:min(420px,92vw); max-height:76vh; overflow-y:auto;
  background:#0d1426; border:1px solid #22d3ee; border-radius:12px;
  padding:26px 22px; text-align:center; box-shadow:0 0 30px rgba(34,211,238,.35); }
.modalBox h3 { color:#22d3ee; letter-spacing:3px; margin-bottom:12px; }
.modalBox p { color:#9fb4d8; font-size:13px; line-height:1.8; margin-bottom:18px; white-space:pre-line; }
/* §5.32p 弹窗 ✕（目前只有任务板显示；modal() 打开时会把它藏回去） */
.modalClose { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:8px;
  border:1px solid #334155; background:#0f172a; color:#9fb4d8; font-size:14px; line-height:1;
  cursor:pointer; z-index:1; }
.modalClose:active { background:#1e293b; color:#e2e8f0; }

/* ===== HUD ===== */
#hud { position:absolute; inset:0; pointer-events:none; z-index:10; }
#hud button, #hud .slot, #joystick { pointer-events:auto; }
#hudTop { position:absolute; top:10px; left:0; right:0; display:flex; align-items:center;
  justify-content:center; gap:18px; padding:0 12px; }
#hpWrap { position:relative; width:200px; height:20px; background:#132038; border:1px solid #2b4a7a;
  border-radius:10px; overflow:hidden; }
#hpBar { height:100%; width:100%; background:linear-gradient(90deg,#16a34a,#4ade80); transition:width .15s; }
#hpWrap span, #worthWrap span { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:11px; color:#fff; text-shadow:0 0 3px #000; }
#timer { font-size:26px; color:#22d3ee; text-shadow:0 0 10px rgba(34,211,238,.8);
  font-variant-numeric:tabular-nums; }
#timer.low { color:#f87171; text-shadow:0 0 12px rgba(248,113,113,.9); animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.45; } }
#worthWrap { position:relative; width:230px; height:20px; background:#132038; border:1px solid #4a3b12;
  border-radius:10px; overflow:hidden; }
#worthBar { height:100%; width:0%; background:linear-gradient(90deg,#b45309,#fbbf24); transition:width .2s; }
#worthWrap.ready { border-color:#fbbf24; box-shadow:0 0 14px rgba(251,191,36,.7); }
#factorWrap { position:absolute; top:42px; left:50%; transform:translateX(-50%); width:170px; height:10px;
  background:#160f2e; border:1px solid #5b21b6; border-radius:5px; overflow:hidden; }
#factorBar { height:100%; width:0%; background:linear-gradient(90deg,#7c3aed,#a78bfa); }
#factorWrap span { position:absolute; top:-3px; left:0; right:0; text-align:center; font-size:9px; color:#cbb8ff; }
#minimap { position:absolute; top:64px; right:10px; border:1px solid #1e3a5f; border-radius:6px;
  background:rgba(8,12,24,.85); }
#weaponBar { position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; }
#consBar { position:absolute; bottom:74px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
#defBar { position:absolute; bottom:12px; right:12px; display:flex; flex-direction:column; gap:6px; }
.slot { position:relative; min-width:52px; height:52px; background:rgba(13,20,38,.9);
  border:1px solid #2b4a7a; border-radius:8px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; font-size:10px; color:#9fb4d8; cursor:pointer; padding:2px 4px; }
.slot .ic { font-size:18px; line-height:1.1; }
.slot .sub { font-size:9px; color:#6b7fa3; }
.slot.on { border-color:#22d3ee; box-shadow:0 0 12px rgba(34,211,238,.55); color:#22d3ee; }
.slot.broken { border-color:#f87171; }
.slot.broken .sub { color:#f87171; }
.slot .key { position:absolute; top:1px; left:4px; font-size:8px; color:#5b6b8c; }
.slot.cool::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); border-radius:8px; }
#buffBar { position:absolute; top:64px; left:12px; display:flex; flex-direction:column; gap:4px;
  font-size:11px; color:#93c5fd; text-shadow:0 0 4px #000; }

/* 摇杆（移动端） */
#joystick { position:absolute; bottom:70px; left:26px; width:110px; height:110px; border-radius:50%;
  border:1px solid rgba(34,211,238,.35); background:rgba(13,20,38,.35); display:none; }
#stick { position:absolute; left:35px; top:35px; width:40px; height:40px; border-radius:50%;
  background:rgba(34,211,238,.5); box-shadow:0 0 12px rgba(34,211,238,.6); }
body.touch #joystick { display:block; }

/* ===== Boss 警告 / Toast ===== */
#bossWarn { position:absolute; top:26%; left:0; right:0; text-align:center; font-size:30px; color:#f87171;
  letter-spacing:8px; text-shadow:0 0 20px #ef4444; z-index:30; animation:blink .5s infinite; pointer-events:none; }
#toast { position:absolute; top:16%; left:50%; transform:translateX(-50%); padding:8px 22px;
  background:rgba(13,20,38,.92); border:1px solid #22d3ee; border-radius:20px; font-size:13px;
  color:#22d3ee; z-index:35; pointer-events:none; white-space:nowrap; }

/* 结算表 */
.stRow { display:flex; justify-content:space-between; padding:5px 4px; font-size:13px;
  border-bottom:1px dashed #16233f; }
.stRow b { color:#fbbf24; }
.itemTag { display:inline-block; padding:2px 8px; margin:2px; border-radius:4px; font-size:11px;
  background:#101a30; border:1px solid currentColor; }

@media (max-width:640px) {
  /* 移动端首页紧凑布局 */
  .screen { gap:8px; padding:12px; justify-content:flex-start; padding-top:20px; }
  .title { font-size:32px; letter-spacing:6px; margin-bottom:4px; }
  .subtitle { font-size:11px; margin-bottom:2px; }
  .goldRow { font-size:18px; margin:4px 0; }
  .lobbyInfo { font-size:12px; margin:2px 0; }
  .btnCol { gap:8px; }
  .btn { padding:8px 20px; font-size:13px; }
  .btn.big { padding:12px 40px; font-size:16px; }
  .tip { font-size:11px; max-width:95vw; line-height:1.5; margin-top:6px; }
  .insureRow { font-size:12px; margin:4px 0; }
  
  /* 版本信息缩小 */
  #versionInfo { font-size:10px; bottom:6px; right:8px; }
  #versionText { font-size:10px; }
  #btnChangelog, #btnForceRefresh { font-size:10px; }
  
  /* HUD 调整 */
  #hpWrap { width:130px; } 
  #worthWrap { width:150px; }
  #timer { font-size:20px; }
  #minimap { width:110px; height:82px; }
  .slot { min-width:44px; height:46px; }
}

/* ===== 德林卡：台词气泡 / 成就弹窗（§5.15 F-201 / F-202） ===== */
#bossLine{
  position:fixed; left:50%; top:16%; transform:translateX(-50%);
  max-width:78vw; padding:10px 18px; z-index:60;
  background:linear-gradient(180deg,rgba(60,10,70,.94),rgba(20,4,28,.94));
  border:1px solid rgba(232,121,249,.7); border-radius:10px;
  color:#f0abfc; font-size:15px; font-weight:700; letter-spacing:.5px;
  text-align:center; box-shadow:0 0 26px rgba(232,121,249,.45);
  animation:lineIn .28s ease-out;
}
@keyframes lineIn{from{opacity:0;transform:translateX(-50%) translateY(-12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#achPop{
  position:fixed; right:14px; top:96px; z-index:60;
  min-width:210px; padding:10px 14px;
  background:linear-gradient(180deg,rgba(12,20,34,.96),rgba(6,10,18,.96));
  border:1px solid rgba(250,204,21,.75); border-radius:10px;
  color:#fde047; font-size:13px; line-height:1.6;
  box-shadow:0 0 22px rgba(250,204,21,.35);
  animation:achIn .3s ease-out;
}
#achPop span{color:#94a3b8; font-size:11px}
@keyframes achIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

/* ===== §5.29 躺平模式 HUD ===== */
#towerHud { position:absolute; inset:0; pointer-events:none; }
#towerHud.hidden { display:none; }
#twTop { position:absolute; top:10px; left:0; right:0; display:flex; justify-content:center;
  gap:14px; pointer-events:none; }
.twBox { background:rgba(2,6,23,.78); border:1px solid #1e293b; border-radius:10px;
  padding:6px 14px; text-align:center; color:#e2e8f0; font-size:15px; min-width:96px; }
.twBox.big { min-width:132px; border-color:#38bdf8; }
/* §5.29b 双方金币合并成一行后需要更宽 */
.twBox.wide { min-width:176px; }
.twBox.wide b { font-size:18px; }
.twBox b { display:block; font-size:20px; color:#fbbf24; line-height:1.15; }
.twBox.big b { color:#67e8f9; font-size:26px; }
.twSub { display:block; font-size:11px; color:#94a3b8; margin-top:1px; }
#twAdvWrap { position:absolute; top:78px; left:50%; transform:translateX(-50%);
  width:min(560px,86vw); text-align:center; pointer-events:none; }
#twAdvBar { position:relative; height:14px; background:rgba(2,6,23,.8);
  border:1px solid #1e293b; border-radius:7px; overflow:hidden; display:flex; }
#twAdvP { background:linear-gradient(90deg,#0ea5e9,#67e8f9); width:0%; }
#twAdvE { background:linear-gradient(90deg,#f87171,#7f1d1d); width:0%; margin-left:auto; }
#twAdvTxt { font-size:12px; color:#cbd5e1; }
/* §5.29b 召唤卡从 2 张变 5 张（最多再加 3 张武器卡 = 8 张）。
   不加 flex-wrap 的话 8×78px 会直接溢出窗口（实测预览窗口只有 264px 宽），
   卡牌被裁掉、点不到。同时宽度 78→72px 给换行留余地。 */
#twCards { position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; flex-wrap:wrap; justify-content:center; row-gap:8px;
  width:max-content; max-width:min(96vw,760px); gap:8px; pointer-events:auto; }
.twCard { width:72px; padding:7px 4px; background:rgba(2,6,23,.85); border:2px solid #334155;
  border-radius:12px; text-align:center; cursor:pointer; user-select:none;
  transition:transform .08s, border-color .12s; }
.twCard:hover { transform:translateY(-3px); }
.twCard.on { border-color:#67e8f9; box-shadow:0 0 14px rgba(103,232,249,.45); }
.twCard.dim { opacity:.45; }
.twCard .ic { display:block; font-size:24px; line-height:1.1; }
.twCard .nm { display:block; font-size:12px; color:#e2e8f0; }
.twCard .cs { display:block; font-size:12px; color:#fbbf24; }
.twQuit { position:absolute; top:10px; right:12px; pointer-events:auto; }

/* ===== §5.31 触摸屏控制选择器 ===== */
.selector-card { background: #0f172a; border-radius: 16px; padding: 24px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.6); text-align: center; }
.selector-card h3 { color: #22d3ee; margin-bottom: 8px; letter-spacing: 2px; }
.selector-btns { display: flex; gap: 16px; justify-content: center; margin-top: 16px; }
.sel-btn { padding: 14px 28px; font-size: 16px; border-radius: 10px; border: 2px solid #334155; background: #1e293b; color: #94a3b8; cursor: pointer; transition: all 0.2s; }
.sel-btn:hover { border-color: #22d3ee; color: #22d3ee; }
.sel-btn.active { border-color: #22d3ee; background: linear-gradient(180deg, #38e0f8, #0e9cb5); color: #06080f; font-weight: bold; box-shadow: 0 0 18px rgba(34,211,238,.5); }

/* ===== §5.32 云端存档UI ===== */
.slot-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34,211,238,.3); }
#cloudSaveLogin input::placeholder { color: #475569; }