/* ===== 三角洲行动 网页同人版 ===== */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; }
html,body { width:100%; height:100%; overflow:hidden; background:#07090b; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:#dfe6ea; }
button { font-family:inherit; }

#app { position:relative; width:100%; height:100%; }
#canvas-wrap { position:absolute; inset:0; }
#canvas-wrap canvas { display:block; }
.hidden { display:none !important; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; pointer-events:none; z-index:10; }

#compass { position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(8,12,14,.45); border:1px solid rgba(255,255,255,.12); border-radius:4px; }
#raid-timer { position:absolute; top:12px; right:18px; font-size:22px; font-weight:700;
  color:#ffd44d; text-shadow:0 0 6px rgba(0,0,0,.8); letter-spacing:2px; }
#objective-tip { position:absolute; top:52px; left:50%; transform:translateX(-50%);
  font-size:13px; color:#9fd8a8; text-shadow:0 1px 3px #000; }

#crosshair { position:absolute; left:50%; top:50%; width:0; height:0; }
.ch-line { position:absolute; background:#e8f4ff; box-shadow:0 0 2px #000; }
.ch-t,.ch-b { width:2px; height:8px; left:-1px; }
.ch-l,.ch-r { height:2px; width:8px; top:-1px; }
.ch-dot { position:absolute; width:2px; height:2px; left:-1px; top:-1px; background:#ffde59; }
#hitmarker { position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
  opacity:0; transform:rotate(45deg); transition:opacity .08s; }
#hitmarker::before,#hitmarker::after { content:""; position:absolute; background:#fff; }
#hitmarker::before { width:2px; height:26px; left:12px; }
#hitmarker::after { height:2px; width:26px; top:12px; }
#hitmarker.kill::before,#hitmarker.kill::after { background:#ff4b3a; }
#hitmarker.show { opacity:.95; }

#hud-left { position:absolute; left:22px; bottom:20px; width:290px; }
#op-tag { font-size:14px; margin-bottom:6px; color:#cfe3ef; }
#op-tag #op-class { margin-left:8px; font-size:12px; color:#7fb4d8; border:1px solid #35566d; padding:1px 6px; border-radius:3px; }
#hp-bar { position:relative; height:18px; background:rgba(10,14,17,.72); border:1px solid rgba(255,255,255,.18); border-radius:3px; overflow:hidden; }
#hp-fill { height:100%; width:100%; background:linear-gradient(90deg,#3ddc74,#7bed9f); transition:width .15s; }
#hp-fill.low { background:linear-gradient(90deg,#e33d2c,#ff7a45); }
#hp-text { position:absolute; right:6px; top:0; line-height:18px; font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 2px #000; }
#armor-row { display:flex; gap:10px; margin-top:5px; font-size:12px; color:#9db8c9; }
#armor-row span { background:rgba(10,14,17,.6); padding:2px 8px; border-radius:3px; border:1px solid rgba(255,255,255,.1); }
#med-hint { margin-top:5px; font-size:11px; color:#6f8898; }

#hud-right { position:absolute; right:22px; bottom:20px; text-align:right; }
#weapon-name { font-size:15px; color:#cfe3ef; margin-bottom:2px; }
#ammo-box { font-size:34px; font-weight:800; color:#fff; text-shadow:0 0 8px rgba(0,0,0,.9); }
#ammo-sep { color:#6f8898; margin:0 4px; font-size:22px; }
#ammo-reserve { font-size:20px; color:#9db8c9; }
#ammo-mag.empty { color:#ff5340; }
#fire-mode { font-size:12px; color:#7fb4d8; margin-top:2px; }
#ability-slot { position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  background:rgba(10,14,17,.6); border:1px solid rgba(255,255,255,.15); padding:6px 12px; border-radius:4px; overflow:hidden; }
#ability-cd { position:absolute; left:0; top:0; bottom:0; background:rgba(80,160,255,.25); width:0%; }
#ability-key { border:1px solid #6da7cc; color:#9fd4f5; font-size:12px; padding:0 5px; border-radius:3px; }
#ability-name { font-size:13px; color:#cfe3ef; }
#ability-slot.ready { border-color:#57c7ff; box-shadow:0 0 10px rgba(87,199,255,.35); }

#interact-tip { position:absolute; left:50%; top:58%; transform:translateX(-50%);
  background:rgba(8,12,14,.7); border:1px solid rgba(255,255,255,.2); padding:8px 16px;
  border-radius:4px; font-size:14px; }
#interact-tip b { color:#ffd44d; }
#progress-wrap { position:absolute; left:50%; top:64%; transform:translateX(-50%); width:280px; text-align:center; }
#progress-label { font-size:13px; margin-bottom:4px; color:#cfe3ef; text-shadow:0 1px 2px #000; }
#progress-bar { height:8px; background:rgba(10,14,17,.7); border:1px solid rgba(255,255,255,.25); border-radius:4px; overflow:hidden; }
#progress-fill { height:100%; width:0%; background:#ffd44d; }

#extract-banner { position:absolute; left:50%; top:20%; transform:translateX(-50%);
  font-size:20px; font-weight:700; color:#7bed9f; text-shadow:0 0 10px rgba(0,0,0,.9); }
#killfeed { position:absolute; right:20px; top:70px; text-align:right; font-size:13px; }
#killfeed .kf { margin-bottom:4px; background:rgba(8,12,14,.55); padding:3px 10px; border-radius:3px; border-right:3px solid #ff4b3a; }
#killfeed .kf b { color:#ffd44d; }

#damage-vignette { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(200,20,10,.55) 100%); transition:opacity .1s; }
#lowhp-vignette { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(160,0,0,.6) 100%); }
#dmg-numbers { position:absolute; inset:0; overflow:hidden; }
.dmg-num { position:absolute; font-size:15px; font-weight:800; color:#ffd44d; text-shadow:0 1px 3px #000; transition:none; }
.dmg-num.head { color:#ff5340; font-size:17px; }
#reveal-tip { position:absolute; top:90px; left:50%; transform:translateX(-50%); color:#ff8f6b; font-size:13px; text-shadow:0 1px 3px #000; }

/* ---------- 地图 ---------- */
#map-overlay { position:absolute; inset:0; z-index:40; background:rgba(4,7,9,.88);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.map-title { font-size:18px; margin-bottom:10px; letter-spacing:2px; color:#cfe3ef; }
.map-title .map-close { font-size:12px; color:#6f8898; margin-left:14px; }
#map-canvas { border:1px solid #2c3c46; background:#0b1116; max-height:82vh; max-width:82vh; }

/* ---------- 局内背包 ---------- */
#inv-overlay { position:absolute; inset:0; z-index:50; background:rgba(4,7,9,.82);
  display:flex; align-items:center; justify-content:center; }
#inv-window { width:min(1180px,96vw); max-height:92vh; background:#0d1318; border:1px solid #2c3c46;
  border-radius:6px; padding:14px 18px; display:flex; flex-direction:column; }
#inv-title { font-size:18px; letter-spacing:2px; margin-bottom:10px; color:#cfe3ef; }
#inv-title .inv-close { float:right; font-size:12px; color:#6f8898; }
#inv-columns { display:flex; gap:14px; overflow:auto; }
.inv-panel { flex:1; min-width:280px; }
.panel-head { font-size:13px; color:#8fb6cf; background:#131c23; padding:5px 10px; border-left:3px solid #3d7ea6; margin:8px 0 6px; }
.panel-head.safe-head { border-left-color:#c8a03c; color:#e5c46a; }
.panel-head span { float:right; color:#6f8898; }
#equip-list { display:flex; flex-direction:column; gap:4px; margin-bottom:4px; }
.equip-row { display:flex; justify-content:space-between; background:#10181f; border:1px solid #1f2c35;
  padding:5px 10px; border-radius:3px; font-size:13px; }
.equip-row .slot-label { color:#6f8898; }

.grid-box { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:44px; gap:3px;
  background:#0a0f13; border:1px solid #1f2c35; padding:5px; border-radius:4px; min-height:52px;
  grid-auto-flow:dense; }
.item-card { position:relative; border-radius:3px; padding:4px 6px; font-size:11px; cursor:pointer;
  overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(0,0,0,.25)); border:1px solid #333; }
.item-card .i-name { font-weight:700; line-height:1.2; text-shadow:0 1px 2px #000; }
.item-card .i-sub { font-size:10px; color:#c8d6de; opacity:.85; }
.item-card:hover { filter:brightness(1.25); }
.item-card .i-actions { position:absolute; inset:auto 0 0 0; display:none; background:rgba(0,0,0,.72); padding:2px; gap:2px; }
.item-card:hover .i-actions { display:flex; }
.item-card .i-actions button { flex:1; font-size:10px; padding:2px 0; background:#1c2b36; color:#cfe3ef;
  border:1px solid #35566d; border-radius:2px; cursor:pointer; }
.item-card .i-actions button:hover { background:#2d495e; }
.r1 { border-color:#8d979e; background:linear-gradient(160deg,#39424a,#20262b); }
.r2 { border-color:#3f9d54; background:linear-gradient(160deg,#274d33,#16281d); }
.r3 { border-color:#3d84c0; background:linear-gradient(160deg,#1f4463,#12222f); }
.r4 { border-color:#9251c9; background:linear-gradient(160deg,#46276b,#221336); }
.r5 { border-color:#d8a930; background:linear-gradient(160deg,#6b5216,#31250a); }
.r6 { border-color:#e05340; background:linear-gradient(160deg,#6e241a,#33100b); }
#inv-hint { margin-top:10px; font-size:12px; color:#6f8898; }

/* ---------- 菜单 ---------- */
#menu-layer { position:absolute; inset:0; z-index:60; }
#menu-layer:empty { pointer-events:none; }
.screen { position:absolute; inset:0; display:flex; flex-direction:column;
  background:radial-gradient(ellipse at 30% 20%, #14212b 0%, #080d11 60%, #05080a 100%); }
.screen::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px); }

.title-wrap { text-align:center; margin-top:9vh; }
.game-title { font-size:64px; font-weight:900; letter-spacing:14px; color:#e8f1f6;
  text-shadow:0 0 26px rgba(80,170,255,.35), 0 4px 2px #000; }
.game-title .df-red { color:#ff5340; }
.game-sub { margin-top:6px; font-size:16px; color:#7fa8c4; letter-spacing:6px; }
.fan-note { margin-top:8px; font-size:12px; color:#54707f; }

.menu-btns { margin:6vh auto 0; display:flex; flex-direction:column; gap:12px; width:340px; }
.menu-btn { position:relative; padding:14px 22px; font-size:18px; letter-spacing:4px; text-align:left;
  color:#dfe6ea; background:linear-gradient(90deg, rgba(28,43,54,.9), rgba(16,24,31,.7));
  border:1px solid #2c4657; border-left:4px solid #3d7ea6; cursor:pointer; transition:all .12s; }
.menu-btn:hover { background:linear-gradient(90deg, rgba(52,86,109,.95), rgba(24,37,47,.8));
  border-left-color:#ffd44d; transform:translateX(6px); }
.menu-btn .btn-sub { display:block; font-size:11px; letter-spacing:1px; color:#7395a9; margin-top:3px; }
.menu-btn.primary { border-left-color:#ff8f3d; }
.menu-foot { position:absolute; bottom:16px; width:100%; text-align:center; font-size:12px; color:#54707f; }
.coin-tag { position:absolute; top:20px; right:26px; font-size:16px; color:#ffd44d; background:rgba(10,15,19,.7);
  padding:6px 14px; border-radius:4px; border:1px solid #453a17; }

.sub-screen { padding:26px 40px; overflow:auto; }
.sub-title { font-size:26px; letter-spacing:4px; color:#e8f1f6; margin-bottom:4px; }
.sub-title small { font-size:13px; color:#6f8898; margin-left:12px; letter-spacing:1px; }
.back-btn { position:absolute; top:24px; right:34px; padding:8px 20px; background:#182530; color:#cfe3ef;
  border:1px solid #2c4657; cursor:pointer; font-size:14px; border-radius:3px; z-index:5; }
.back-btn:hover { background:#24394a; }

/* 干员卡片 */
.op-row { display:flex; gap:14px; margin:16px 0; flex-wrap:wrap; }
.op-card { width:220px; background:#10181f; border:1px solid #223442; border-radius:5px; padding:14px; cursor:pointer; transition:all .12s; }
.op-card:hover { border-color:#3d7ea6; transform:translateY(-3px); }
.op-card.sel { border-color:#ffd44d; box-shadow:0 0 14px rgba(255,212,77,.25); }
.op-avatar { width:64px; height:64px; border-radius:50%; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:900; color:#0b1116; }
.op-name { font-size:18px; font-weight:700; }
.op-en { font-size:11px; color:#6f8898; margin-left:6px; }
.op-class-tag { display:inline-block; margin:6px 0; font-size:11px; padding:2px 8px; border-radius:3px; border:1px solid #35566d; color:#8fc2e0; }
.op-desc { font-size:12px; color:#9db8c9; line-height:1.6; }
.op-skill { margin-top:8px; font-size:12px; color:#ffd44d; }
.op-skill small { color:#8ba4b5; display:block; margin-top:2px; }

/* 地图卡片 */
.map-row { display:flex; gap:14px; margin:10px 0 18px; flex-wrap:wrap; }
.map-card { width:240px; background:#10181f; border:1px solid #223442; border-radius:5px; overflow:hidden; cursor:pointer; }
.map-card .map-pic { height:110px; display:flex; align-items:flex-end; padding:8px 12px; font-size:20px; font-weight:800;
  text-shadow:0 1px 4px #000; }
.map-card .map-meta { padding:8px 12px; font-size:12px; color:#9db8c9; }
.map-card.sel { border-color:#ffd44d; }
.map-card.locked { opacity:.45; cursor:not-allowed; }

/* 备战 loadout */
.loadout-wrap { display:flex; gap:18px; flex-wrap:wrap; }
.loadout-col { flex:1; min-width:330px; }
.slot-box { background:#10181f; border:1px solid #223442; border-radius:4px; padding:10px 12px; margin-bottom:8px; }
.slot-box .sb-label { font-size:12px; color:#6f8898; margin-bottom:5px; }
.slot-box .sb-item { font-size:14px; }
.slot-box .sb-item.empty { color:#54707f; }
.slot-box button { float:right; font-size:11px; background:#1c2b36; border:1px solid #35566d; color:#cfe3ef; padding:2px 8px; cursor:pointer; border-radius:2px; }
.stash-list { max-height:420px; overflow:auto; background:#0a0f13; border:1px solid #1f2c35; border-radius:4px; padding:6px; }
.stash-item { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; margin-bottom:3px;
  border-radius:3px; font-size:13px; border:1px solid transparent; background:#111a21; }
.stash-item:hover { border-color:#35566d; }
.stash-item .si-name { font-weight:700; }
.stash-item .si-meta { font-size:11px; color:#8ba4b5; }
.stash-item .si-actions { display:flex; gap:6px; }
.stash-item button { font-size:11px; background:#1c2b36; border:1px solid #35566d; color:#cfe3ef; padding:3px 10px; cursor:pointer; border-radius:2px; }
.stash-item button:hover { background:#2d495e; }
.stash-item button.sell { border-color:#6b5216; color:#ffd44d; }
.deploy-btn { display:block; width:340px; margin:26px auto 10px; padding:16px; font-size:20px; letter-spacing:8px;
  background:linear-gradient(90deg,#b3541e,#e07b39); color:#fff; border:none; cursor:pointer; border-radius:4px; font-weight:800; }
.deploy-btn:hover { filter:brightness(1.15); }
.deploy-btn:disabled { filter:grayscale(1); cursor:not-allowed; }

/* 黑市 */
.shop-tabs { display:flex; gap:8px; margin:12px 0; }
.shop-tab { padding:6px 18px; background:#131c23; border:1px solid #223442; cursor:pointer; font-size:13px; border-radius:3px; }
.shop-tab.sel { border-color:#ffd44d; color:#ffd44d; }
.shop-grid { display:flex; flex-wrap:wrap; gap:10px; }
.shop-card { width:230px; background:#10181f; border:1px solid #223442; border-radius:4px; padding:10px 12px; }
.shop-card .sc-name { font-weight:700; font-size:14px; }
.shop-card .sc-desc { font-size:11px; color:#8ba4b5; margin:4px 0; min-height:28px; }
.shop-card .sc-buy { display:flex; justify-content:space-between; align-items:center; }
.shop-card .sc-price { color:#ffd44d; font-size:13px; }
.shop-card button { font-size:12px; background:#1c2b36; border:1px solid #35566d; color:#cfe3ef; padding:4px 14px; cursor:pointer; border-radius:2px; }
.shop-card button:hover { background:#2d495e; }
.shop-card button:disabled { opacity:.4; cursor:not-allowed; }

/* 结算 */
.settle-box { width:640px; margin:7vh auto; background:#0d1318; border:1px solid #2c3c46; border-radius:6px; padding:30px 40px; position:relative; z-index:2; }
.settle-result { font-size:36px; font-weight:900; letter-spacing:8px; text-align:center; margin-bottom:6px; }
.settle-result.ok { color:#7bed9f; text-shadow:0 0 18px rgba(60,220,120,.4); }
.settle-result.dead { color:#ff5340; text-shadow:0 0 18px rgba(255,60,40,.4); }
.settle-sub { text-align:center; color:#8ba4b5; font-size:13px; margin-bottom:18px; }
.settle-stats { display:flex; justify-content:space-around; margin-bottom:18px; }
.settle-stats div { text-align:center; }
.settle-stats .st-v { font-size:24px; font-weight:800; color:#e8f1f6; }
.settle-stats .st-k { font-size:12px; color:#6f8898; margin-top:2px; }
.settle-loot { max-height:230px; overflow:auto; background:#0a0f13; border:1px solid #1f2c35; padding:8px; border-radius:4px; margin-bottom:14px; }
.settle-loot .sl-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 8px; }
.settle-total { text-align:right; font-size:16px; color:#ffd44d; margin-bottom:18px; }

/* 设置 */
.settings-box { width:520px; margin-top:18px; }
.set-row { display:flex; align-items:center; justify-content:space-between; background:#10181f;
  border:1px solid #223442; padding:10px 16px; margin-bottom:8px; border-radius:4px; font-size:14px; }
.set-row input[type=range] { width:220px; }
.set-row .set-val { width:46px; text-align:right; color:#ffd44d; font-size:13px; }

/* 帮助 */
.help-cols { display:flex; gap:30px; flex-wrap:wrap; margin-top:14px; }
.help-block { min-width:300px; }
.help-block h3 { font-size:15px; color:#8fc2e0; margin-bottom:8px; border-left:3px solid #3d7ea6; padding-left:8px; }
.help-block table { font-size:13px; border-collapse:collapse; }
.help-block td { padding:4px 12px 4px 0; color:#9db8c9; }
.help-block td.k { color:#ffd44d; font-weight:700; white-space:nowrap; }

#toast { position:absolute; left:50%; bottom:12%; transform:translateX(-50%); z-index:99;
  background:rgba(8,12,14,.85); border:1px solid #35566d; color:#e8f1f6; padding:10px 24px;
  border-radius:4px; font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; }
#toast.show { opacity:1; }

/* 死亡黑屏 */
#death-fade { position:absolute; inset:0; background:#000; opacity:0; transition:opacity 1.4s; z-index:30; pointer-events:none; }