:root{--bg: #1b2330;--panel: #222c3b;--line: rgba(255, 255, 255, .12);--text: #f4f6fa;--dim: rgba(244, 246, 250, .65);--blue: #3b82f6;--blue-light: #93c5fd;--rare: #a78bfa;--legendary: #fbbf24;font-family:system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;color:var(--text)}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#game{position:fixed;top:0;right:0;bottom:0;left:0;touch-action:none}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud:before{content:"";position:absolute;top:0;left:0;right:0;height:calc(env(safe-area-inset-top,0px) + 84px);background:linear-gradient(#101620bf,#10162000)}#hud .top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 46px);left:0;right:0;height:24px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;font-size:12px;font-weight:600;color:#f4f6fad9;text-shadow:0 1px 2px rgba(0,0,0,.7)}.battle{position:relative;pointer-events:auto;cursor:pointer}#hud-battle{display:block;max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle .tip{min-width:200px;white-space:normal;line-height:1.6;font-weight:500}.battle .tip b{color:#fde68a}.morale-row{position:absolute;top:calc(env(safe-area-inset-top,0px) + 4px);left:0;right:0;display:flex;justify-content:space-between;gap:6px;padding:0 6px}.morale{display:flex;align-items:center;gap:3px;padding:2px 7px 2px 2px;border-radius:22px;background:#10162080;border:1px solid rgba(255,255,255,.12);text-shadow:0 1px 2px rgba(0,0,0,.6)}.morale.theirs{flex-direction:row-reverse;padding:2px 2px 2px 7px}.morale .face{width:34px;height:34px;flex:none}.morale .info{display:flex;flex-direction:column;gap:2px}.morale.theirs .info{align-items:flex-end}.morale .lv{display:flex;align-items:center;gap:3px;font:900 13px/1 system-ui,sans-serif}.morale.mine .lv{color:#8ec5ff}.morale.theirs .lv{color:#ff9a8f}.morale .falling{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ffb4a8}.morale .vals{display:flex;gap:4px;font:800 10.5px/1 system-ui,sans-serif;letter-spacing:-.2px}.morale .vals>span{display:inline-flex;align-items:center}.morale .vals img{width:14px;height:14px}.morale .vals .zero b{color:#f4f6fa80}#building-menu{position:fixed;z-index:5;width:0;height:0;animation:menu-in .14s ease-out}@keyframes menu-in{0%{transform:scale(.6);opacity:0}}#building-menu button{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:2px solid #f2c14e;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3b4a62,#1f2938);color:var(--text);box-shadow:0 4px 12px #00000073;line-height:1.05}#building-menu button:disabled{border-color:#fff3;opacity:.55;filter:grayscale(.8)}#building-menu .icon{width:30px;height:30px;margin-bottom:-2px;pointer-events:none}#building-menu .label{font-size:10px;font-weight:700}#building-menu .cost{font-size:11px;font-weight:800;color:#fde047}#building-menu .cost:after{content:" 兵";font-size:9px}#building-menu .card{position:absolute;left:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:#181f2beb;white-space:nowrap;font-size:12px;pointer-events:none}#building-menu .detail{color:var(--dim);font-size:11px}.mute{pointer-events:auto;border:0;background:#ffffff1a;border-radius:7px;font-size:13px;line-height:1;padding:3px 6px}.quit{pointer-events:auto;border:0;border-radius:7px;background:#7f1d1dbf;color:#fff;font-size:12px;padding:3px 7px}.skills{position:absolute;left:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);display:flex;align-items:flex-end;gap:8px;pointer-events:auto}.skills button{--p: 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0;border:0;background:none;color:var(--dim);font:inherit}.skills .disc{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:conic-gradient(#f2c14e calc(var(--p) * 1%),#ffffff24 0);box-shadow:0 3px 10px #0006}.skills .disc:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3b4a62,#1f2938)}.skills .icon{position:relative;width:29px;height:29px;pointer-events:none;filter:grayscale(1) brightness(.85);opacity:.6}.skills .cd{position:absolute;font-size:15px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000}.skills .name{font-size:10px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}.skills button.ready{color:var(--text)}.skills button.ready .icon{filter:none;opacity:1}.skills button.ready .disc{box-shadow:0 0 0 2px #f2c14e59,0 0 14px #f2c14e8c}.skills button.cooling .icon{opacity:.25}.skills button.active .disc:before{background:radial-gradient(circle at 35% 30%,#d97706,#92400e)}.energy-num{margin:0 0 20px;font-size:13px;font-weight:800;color:#fde047;text-shadow:0 1px 2px rgba(0,0,0,.8)}.pct{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);width:48px;height:48px;pointer-events:auto}.pct-main,.pct-menu button{border:1.5px solid rgba(255,255,255,.5);border-radius:50%;background:#10162057;color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.75)}.pct-main{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;padding:0;opacity:.78;transition:opacity .15s,border-color .15s,background .15s;touch-action:none}.pct-main b{font-size:15px;line-height:1}.pct-main.open,.pct-main:active{opacity:1;border-color:var(--blue-light);background:#10162080}.pct-menu{position:absolute;left:50%;top:50%;width:0;height:0}.pct-menu button{position:absolute;left:calc(var(--x) - 21px);top:calc(var(--y) - 21px);width:42px;height:42px;padding:0;font-size:14px;transition:transform .08s;animation:pct-out .16s ease-out backwards;animation-delay:calc(var(--i) * 25ms)}@keyframes pct-out{0%{transform:translate(calc(var(--x) * -1),calc(var(--y) * -1)) scale(.4);opacity:0}}.pct-menu button small{font-size:9px}.pct-menu button.active{background:#3b82f6d9;border-color:#93c5fdf2;box-shadow:0 0 10px #3b82f699}.pct-menu button.hover{border-color:#fff;border-width:2px;transform:scale(1.15)}#overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#0a0e14b8}#overlay[hidden]{display:none}.panel{width:100%;max-width:440px;max-height:100%;overflow-y:auto;padding:24px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.panel h1,.panel h2{margin:0 0 8px}.panel .sub{color:var(--dim);margin:0 0 16px}.howto{padding-left:20px;line-height:1.6;font-size:15px}.blue{color:var(--blue-light)}button.primary{width:100%;min-height:48px;margin-top:8px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:17px;font-weight:700}.panel h1.title{text-align:center;font-size:30px;letter-spacing:4px}button.who{display:block;margin:0 auto 16px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--text);font-size:15px}button.who small{color:var(--dim);margin-left:4px}.modes{display:grid;gap:10px}button.mode{display:grid;gap:2px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#3b82f624;color:var(--text)}button.mode b{font-size:20px}button.mode span{color:var(--dim);font-size:13px}button.link{display:block;margin:12px auto 0;border:0;background:none;color:var(--blue-light);font-size:15px}input.text{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#00000040;color:var(--text);font-size:18px;-webkit-user-select:text;user-select:text}.panel .error{color:#fca5a5;margin:6px 0 0}.searching{display:flex;align-items:center;gap:10px;padding:18px 0;color:var(--dim)}.spinner{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--blue-light);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.opponent{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:14px;margin:8px 0;border:1px solid var(--line);border-radius:12px;font-size:18px}.opponent .sub{flex-basis:100%;margin:0;font-size:14px}.ai-tag{padding:1px 6px;border-radius:6px;background:#64748b;color:#fff;font-size:12px;font-weight:700}.join{display:flex;gap:8px;margin-top:14px}.join input.code{flex:1;letter-spacing:6px;text-align:center}.join button.primary{width:auto;margin:0;padding:0 22px}button.primary.ghost{background:#3b82f62e;border:1px solid var(--blue)}.room-code{letter-spacing:4px;color:var(--blue-light)}.seats{display:grid;gap:8px;margin:14px 0}.seat{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px}.seat.me{border-color:var(--blue)}.seat.empty{color:var(--dim);border-style:dashed}.seat small{padding:1px 6px;border-radius:6px;background:#ffffff1a;font-size:12px}.seat em{margin-left:auto;font-style:normal;color:var(--dim);font-size:14px}.seat em.on{color:#86efac}.seat em.off{color:#fca5a5}.map-pick{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 4px}.map-pick button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:none;color:var(--text);font-size:22px}.panel .center{text-align:center}.count{text-align:center;font-size:72px;font-weight:800;color:var(--blue-light)}#hud-notice{position:absolute;top:calc(env(safe-area-inset-top,0px) + 76px);left:50%;transform:translate(-50%);padding:6px 12px;border-radius:10px;background:#7f1d1dd9;color:#fff;font-size:14px;white-space:nowrap}.toast{position:fixed;left:50%;bottom:24%;transform:translate(-50%);padding:10px 16px;border-radius:12px;background:#0f172aeb;color:#fff;font-size:15px;z-index:20}.cards{display:grid;gap:10px}.card{display:grid;gap:4px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:12px;background:#ffffff0a;color:var(--text);font-size:14px}.card strong{font-size:17px}.card .rarity{font-size:12px;color:var(--dim)}.card.rare{border-color:var(--rare)}.card.legendary{border-color:var(--legendary)}