:root {
  --ink: #2b1a0c;
  --parch: #f4e6c4;
  --parch2: #e9d3a1;
  --wood: #6b3f1d;
  --wood2: #8a5427;
  --gold: #f2c33d;
  --sea: #1f6f9f;
  --font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d4f7a; font-family: var(--font); color: #fff; user-select: none; }
#scene { position: fixed; inset: 0; }
#scene canvas { display: block; touch-action: none; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#turnbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(30, 18, 8, .78); border: 2px solid var(--wood2); border-radius: 14px;
  padding: 6px 18px; font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none;
}
#turnbar i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff4; }
#turnbar em { font-style: normal; font-size: 14px; background: var(--gold); color: var(--ink); padding: 2px 8px; border-radius: 8px; animation: pulse 1s infinite alternate; }
#turnbar b { font-size: 24px; min-width: 34px; text-align: center; background: #0006; border-radius: 8px; padding: 0 6px; }
#turnbar b.low { color: #ff6b5b; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
#minimap { position: absolute; top: 12px; left: 12px; border: 3px solid var(--wood2); border-radius: 10px; background: #1f78b4; box-shadow: 0 4px 14px rgba(0,0,0,.35); pointer-events: none; }
#teams { position: absolute; top: 12px; right: 12px; width: 230px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.team { background: rgba(30, 18, 8, .72); border: 2px solid transparent; border-radius: 10px; padding: 6px 10px; transition: .2s; }
.team.act { border-color: var(--gold); box-shadow: 0 0 12px #f2c33d88; }
.team.dead { opacity: .45; filter: grayscale(1); }
.tn { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.tn i { width: 12px; height: 12px; border-radius: 3px; }
.tn small { color: #d9c9a8; font-weight: 400; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hpb { height: 7px; background: #0008; border-radius: 4px; margin-top: 5px; overflow: hidden; }
.hpb div { height: 100%; transition: width .4s; }
#unitinfo { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); font-size: 15px; background: rgba(30,18,8,.6); padding: 3px 12px; border-radius: 8px; pointer-events: none; }
#unitinfo:empty { display: none; }
#hint { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); max-width: min(900px, 70vw); font-size: 14px; text-align: center; text-shadow: 0 1px 3px #000, 0 0 8px #000a; pointer-events: none; line-height: 1.5; }
#hint .ang { color: #ffe08a; margin-left: 8px; white-space: nowrap; }
#weapons { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; background: linear-gradient(#7a4a22, #4d2d10); border: 3px solid #3a200b; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
#weapons.spectate { opacity: .75; }
.wslot { position: relative; width: 54px; height: 64px; border: 2px solid #3a200b; border-radius: 8px; background: var(--parch); padding: 4px 4px 14px; transition: transform .1s; }
.wslot svg { width: 100%; height: 100%; display: block; }
.wslot:hover:not(.locked):not(.empty) { transform: translateY(-4px); }
.wslot.sel { background: #ffe58a; border-color: #fff; box-shadow: 0 0 0 2px var(--gold), 0 0 14px var(--gold); transform: translateY(-6px); }
.wslot.empty { filter: grayscale(1) brightness(.6); opacity: .45; cursor: default; }
.wslot.locked { cursor: default; }
.wslot .cnt { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-weight: 800; color: var(--ink); font-size: 12px; }
.wslot .key { position: absolute; top: 1px; left: 4px; font-size: 10px; color: #8a6a3a; }
#wtip { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--parch); color: var(--ink); padding: 8px 14px; border-radius: 10px; border: 2px solid var(--wood2); font-size: 14px; opacity: 0; transition: opacity .15s; pointer-events: none; max-width: 420px; z-index: 3; }
#wtip.show { opacity: 1; }
#sidebtns { position: absolute; right: 12px; bottom: 14px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
#sidebtns button { min-width: 52px; }
#sidebtns button { background: linear-gradient(#a8692f, #6b3f1d); border: 2px solid #3a200b; color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 15px; font-weight: 700; box-shadow: 0 4px 10px #0006; }
#sidebtns button:disabled { opacity: .45; cursor: default; }
#btnEnd { background: linear-gradient(#d0503a, #8a2418) !important; }
#floaters { position: absolute; inset: 0; pointer-events: none !important; overflow: hidden; }
.floater { position: absolute; left: 0; top: 0; font-size: 26px; font-weight: 900; -webkit-text-stroke: 1.5px #000; text-shadow: 0 2px 4px #000; pointer-events: none; }
#toast { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -10px); background: rgba(30,18,8,.85); border: 2px solid var(--gold); padding: 12px 26px; border-radius: 14px; font-size: 24px; font-weight: 800; opacity: 0; transition: .3s; pointer-events: none !important; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 聊天 ---------- */
#chat { position: fixed; left: 12px; bottom: 150px; width: 290px; z-index: 5; }
#chatLog { max-height: 180px; overflow-y: auto; font-size: 13px; line-height: 1.45; text-shadow: 0 1px 2px #000; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.18); margin-bottom: 4px; scrollbar-width: thin; }
#chatLog:empty { display: none; }
#chatLog div { word-break: break-all; }
#chatLog .sys { color: #ffe08a; }
#chatIn { width: 100%; padding: 7px 10px; border-radius: 8px; border: 2px solid #0004; background: rgba(255,255,255,.85); font-family: var(--font); font-size: 13px; outline: none; }
#chatIn:focus { background: #fff; border-color: var(--gold); }
body.inlobby #chat { left: auto; right: 16px; bottom: 16px; width: 320px; }

/* ---------- 大厅 ---------- */
#lobby { position: fixed; inset: 0; overflow-y: auto; padding: 22px 20px 70px; background: radial-gradient(ellipse at 50% 120%, #2a8fc7 0%, #0d4f7a 55%, #072c45 100%); z-index: 4; }
.banner { text-align: center; margin-bottom: 18px; }
.banner h1 { margin: 0; font-size: 56px; letter-spacing: 6px; color: var(--gold); text-shadow: 0 4px 0 #8a5a10, 0 8px 18px #0008; font-weight: 900; }
.banner h1 span { color: #fff; font-size: 40px; vertical-align: top; }
.banner .sub { color: #cfe8ff; font-size: 14px; letter-spacing: 2px; }
.cols { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; }
.card { background: linear-gradient(var(--parch), var(--parch2)); color: var(--ink); border: 4px solid var(--wood); border-radius: 16px; padding: 14px 16px; width: 290px; box-shadow: 0 10px 30px #0007, inset 0 0 30px #c9a86655; }
.card.wide { width: 540px; }
.card h2 { margin: 0 0 10px; font-size: 19px; border-bottom: 2px dashed #b08a50; padding-bottom: 6px; }
.card h2 small { font-size: 12px; color: #8a5a26; font-weight: 400; }
.card h3 { font-size: 14px; margin: 12px 0 4px; }
.card label { display: block; font-size: 13px; margin: 8px 0; font-weight: 700; }
.card label input:not([type=checkbox]), .card select { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border-radius: 8px; border: 2px solid #b08a50; background: #fffaf0; font-family: var(--font); font-size: 14px; color: var(--ink); }
.card select:disabled { opacity: .7; }
.card .chk { display: flex; gap: 6px; align-items: center; }
.desc { font-size: 12px; color: #6b4a1a; margin-top: -2px; min-height: 16px; }
#plist { list-style: none; padding: 0; margin: 0; font-size: 14px; }
#plist li { padding: 3px 0; display: flex; gap: 6px; align-items: center; }
#plist li.off { opacity: .45; }
#plist .host { background: var(--gold); border-radius: 6px; padding: 0 6px; font-size: 11px; }
#urls { margin-top: 12px; font-size: 12px; background: #fff8; border-radius: 8px; padding: 8px; word-break: break-all; }
#urls b { display: block; font-size: 15px; color: #0d4f7a; user-select: text; }
#slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { border-radius: 12px; padding: 12px; min-height: 104px; color: #fff; position: relative; box-shadow: inset 0 -30px 40px #0003; display: flex; flex-direction: column; gap: 6px; }
.slot h4 { margin: 0; font-size: 18px; text-shadow: 0 1px 2px #0008; }
.slot .who { font-size: 15px; font-weight: 700; flex: 1; text-shadow: 0 1px 2px #0008; }
.slot .who.empty { opacity: .75; font-weight: 400; font-style: italic; }
.slot .btns { display: flex; gap: 6px; }
.slot button { flex: 1; border: 2px solid #0004; background: #fff; color: var(--ink); border-radius: 8px; padding: 6px; font-weight: 700; font-size: 13px; }
.slot button.alt { background: #ffffffaa; }
.slot.mine { outline: 3px solid #fff; outline-offset: -3px; }
.big { display: block; width: 100%; margin-top: 14px; padding: 14px; font-size: 22px; font-weight: 900; color: #fff; border: 3px solid #3a200b; border-radius: 14px; background: linear-gradient(#e0553d, #9a2a18); box-shadow: 0 6px 0 #5a1608, 0 10px 20px #0006; letter-spacing: 4px; }
.big:disabled { filter: grayscale(.8); opacity: .6; cursor: default; }
.big:not(:disabled):active { transform: translateY(3px); box-shadow: 0 3px 0 #5a1608; }
#hostNote { font-size: 12px; color: #6b4a1a; margin-top: 8px; min-height: 16px; }
.foot { text-align: center; color: #cfe8ffcc; font-size: 13px; margin-top: 18px; }

/* ---------- 结束 / 帮助 ---------- */
#over { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(var(--parch), var(--parch2)); color: var(--ink); border: 5px solid var(--wood); border-radius: 20px; padding: 26px 40px; text-align: center; z-index: 6; box-shadow: 0 20px 60px #000a; min-width: 360px; }
#over h1 { margin: 0 0 6px; font-size: 44px; -webkit-text-stroke: 1px #0006; }
#over p { margin: 0 0 6px; font-size: 16px; }
#overNote { font-size: 13px; color: #6b4a1a; margin-top: 8px; }
#help { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(var(--parch), var(--parch2)); color: var(--ink); border: 4px solid var(--wood); border-radius: 16px; padding: 18px 24px; z-index: 7; max-width: 640px; box-shadow: 0 20px 60px #000a; }
#help h2 { margin: 0 0 10px; }
#help table { border-collapse: collapse; font-size: 14px; width: 100%; }
#help td { padding: 4px 8px; border-bottom: 1px dashed #b08a50; }
#help td:first-child { font-weight: 700; white-space: nowrap; }
#help p { font-size: 14px; }
#help button { padding: 8px 20px; border-radius: 8px; border: 2px solid var(--wood); background: var(--gold); font-weight: 700; }
#conn { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #000c; padding: 14px 24px; border-radius: 12px; z-index: 20; font-size: 16px; }

@media (max-width: 1100px) {
  .wslot { width: 42px; height: 52px; padding: 3px 3px 12px; }
  #teams { width: 180px; }
  #minimap { transform: scale(.8); transform-origin: top left; }
}

#btnFire { background: linear-gradient(#3fbf5a, #1f7a32) !important; animation: pulse .6s infinite alternate; }
#btnQuick { font-size: 13px !important; }
#btnQuick.on { box-shadow: 0 0 0 2px var(--gold), 0 4px 10px #0006 !important; }

/* ---------- 屏幕按钮（瞄准微调 / 风扇 / 引爆） ---------- */
#btnFire { display: none !important; }
#btnChat { display: none; }
#aimpad { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: rgba(30,18,8,.82); border: 2px solid var(--wood2); border-radius: 14px; padding: 6px 8px; z-index: 4; max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; }
#aimpad .grp { display: flex; align-items: center; gap: 3px; }
#aimpad .grp span, #fanpad span { font-size: 12px; color: #e9d3a1; margin-right: 2px; }
#aimpad button, #fanpad button { min-width: 40px; height: 40px; border-radius: 10px; border: 2px solid #3a200b; background: linear-gradient(#a8692f, #6b3f1d); color: #fff; font-size: 16px; font-weight: 800; touch-action: none; user-select: none; -webkit-user-select: none; }
#aimpad button.txt { padding: 0 10px; font-size: 14px; }
#aimpad button.fire { padding: 0 14px; font-size: 16px; background: linear-gradient(#3fbf5a, #1f7a32); }
#aimpad button.down, #fanpad button.down { filter: brightness(1.35); transform: translateY(1px); }
#fanpad { position: absolute; right: 90px; bottom: 150px; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: 18px 44px 44px; gap: 4px; background: rgba(30,18,8,.82); border: 2px solid var(--wood2); border-radius: 14px; padding: 6px; z-index: 4; }
#fanpad span { grid-column: 1 / 4; text-align: center; }
#fanpad .u { grid-column: 2; grid-row: 2; } #fanpad .l { grid-column: 1; grid-row: 3; } #fanpad .d { grid-column: 2; grid-row: 3; } #fanpad .r { grid-column: 3; grid-row: 3; }
#actbtn { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 14px 28px; font-size: 20px; font-weight: 900; color: #fff; border: 3px solid #3a200b; border-radius: 16px; background: linear-gradient(#e0553d, #9a2a18); box-shadow: 0 6px 0 #5a1608; z-index: 4; touch-action: manipulation; }
#minimap { pointer-events: auto !important; cursor: pointer; }
#portraitTip { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); background: rgba(30,18,8,.85); border: 2px solid var(--gold); border-radius: 12px; padding: 6px 14px; font-size: 13px; z-index: 6; white-space: nowrap; }

/* ---------- 手机 / 小屏 ---------- */
@media (max-width: 900px), (max-height: 520px) {
  #minimap { width: 120px; height: 84px; top: 8px; left: 8px; border-width: 2px; transform: none; }
  #turnbar { top: 8px; font-size: 15px; padding: 4px 12px; gap: 6px; }
  #turnbar b { font-size: 17px; min-width: 26px; }
  #turnbar em { font-size: 11px; padding: 1px 6px; }
  #teams { top: 8px; right: 8px; width: 140px; gap: 4px; }
  .team { padding: 3px 7px; border-radius: 8px; }
  .tn { font-size: 12px; } .tn small { display: none; }
  .hpb { height: 5px; margin-top: 3px; }
  #weapons { left: 8px; bottom: 8px; transform: none; max-width: calc(100vw - 80px); overflow-x: auto; overscroll-behavior: contain; padding: 4px; gap: 3px; border-width: 2px; scrollbar-width: none; }
  #weapons::-webkit-scrollbar { display: none; }
  .wslot { flex: 0 0 auto; width: 40px; height: 48px; padding: 2px 2px 11px; }
  .wslot.sel { transform: translateY(-2px); }
  .wslot .key { display: none; }
  .wslot .cnt { font-size: 10px; }
  #sidebtns { right: 8px; bottom: 8px; gap: 4px; }
  #sidebtns button { min-width: 0; padding: 6px 8px; font-size: 13px; border-radius: 8px; }
  #btnQuick { display: none; }
  #btnChat { display: inline-block; }
  #hint { bottom: 66px; font-size: 12px; max-width: calc(100vw - 100px); left: calc(50% - 40px); }
  #unitinfo { display: none; }
  #aimpad, #actbtn { bottom: 66px; }
  #aimpad { gap: 6px; padding: 4px 6px; }
  #aimpad button { min-width: 36px; height: 36px; font-size: 14px; }
  #fanpad { bottom: 66px; right: 70px; }
  body.aiming #hint { display: none; }
  #chat { display: none; left: 8px; bottom: 66px; width: min(290px, 60vw); }
  body.chatOpen #chat { display: block; }
  #toast { font-size: 17px; padding: 8px 16px; top: 18%; }
  .floater { font-size: 20px; }
}