:root{--void: #0a0c10;--gunmetal: #161b22;--gunmetal-2: #1f2630;--brass: #b08d3e;--brass-bright: #d9b45c;--bone: #d9cdb4;--bone-dim: #8f8672;--blood: #7e1b1b;--blood-bright: #c03030;--warp: #45d8c2;--display: "Cinzel", "Noto Serif TC", serif;--serif-tc: "Noto Serif TC", serif;--body: "Noto Sans TC", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:var(--void);color:var(--bone);font-family:var(--body);overflow:hidden}#app{height:100%}button{font-family:inherit;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.75em 1.75em;background:linear-gradient(180deg,var(--gunmetal-2),var(--gunmetal));color:var(--bone);border:1px solid var(--brass);font-size:1rem;font-weight:500;letter-spacing:.08em;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:border-color .2s,color .2s,background .2s}.btn:hover{border-color:var(--brass-bright);color:var(--brass-bright)}.btn:focus-visible{outline:2px solid var(--warp);outline-offset:2px}.btn.primary{background:linear-gradient(180deg,#3a2e14,#241c0c);border-color:var(--brass-bright);color:var(--brass-bright);font-weight:700}.btn.danger{border-color:var(--blood-bright);color:var(--blood-bright)}.btn:disabled{opacity:.45;cursor:not-allowed}.panel{background:linear-gradient(160deg,#1f2630eb,#10141af2);border:1px solid rgba(176,141,62,.5);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);padding:1.5rem}.eyebrow{font-family:var(--display);font-size:.72rem;letter-spacing:.35em;color:var(--brass);text-transform:uppercase}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;overflow-y:auto}.home-bg{position:fixed;inset:0;background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(126,27,27,.28),transparent 60%),radial-gradient(ellipse 60% 40% at 50% 110%,rgba(69,216,194,.07),transparent 60%),var(--void);pointer-events:none}.home-title{font-family:var(--serif-tc);font-weight:900;font-size:clamp(2.6rem,8vw,5.5rem);line-height:1.05;text-align:center;color:var(--bone);text-shadow:0 0 40px rgba(176,141,62,.35)}.home-title .en{display:block;font-family:var(--display);font-weight:900;font-size:.34em;letter-spacing:.5em;color:var(--brass);margin-top:.5em}.home-tagline{margin-top:1.2rem;color:var(--bone-dim);letter-spacing:.15em;text-align:center}.home-actions{margin-top:2.8rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.rule-line{width:min(420px,70vw);height:1px;margin:2rem auto 0;background:linear-gradient(90deg,transparent,var(--brass),transparent)}.lobby{width:min(1080px,100%);display:flex;flex-direction:column;gap:1.6rem;padding:3.2rem 0}.lobby-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.lobby-head h1{font-family:var(--serif-tc);font-weight:900;font-size:1.7rem}.lobby-user{display:flex;align-items:center;gap:.7rem;color:var(--bone-dim);font-size:.9rem}.lobby-user img{width:34px;height:34px;border-radius:50%;border:1px solid var(--brass)}.faction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}.faction-card{position:relative;padding:.9rem .8rem;background:var(--gunmetal);border:1px solid rgba(176,141,62,.3);color:var(--bone);text-align:left;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:border-color .15s,background .15s,transform .15s}.faction-card:hover{border-color:var(--brass-bright);transform:translateY(-2px)}.faction-card.selected{border-color:var(--warp);background:linear-gradient(160deg,rgba(69,216,194,.12),var(--gunmetal))}.faction-card.selected:after{content:"✦ 效忠中";position:absolute;top:.5rem;right:.6rem;font-size:.65rem;color:var(--warp);letter-spacing:.1em}.faction-card .fc-name{font-weight:700;font-size:.95rem}.faction-card .fc-king{margin-top:.3rem;font-size:.72rem;color:var(--bone-dim)}.mode-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}.mode-card h3{font-family:var(--serif-tc);font-weight:900;color:var(--brass-bright);margin-bottom:.6rem;letter-spacing:.08em}.mode-card p{color:var(--bone-dim);font-size:.85rem;line-height:1.6;margin-bottom:1rem}.mode-card .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.mode-card input[type=text]{background:var(--void);border:1px solid rgba(176,141,62,.4);color:var(--bone);padding:.6em .8em;font-family:var(--body);font-size:.95rem;letter-spacing:.2em;width:9em;text-transform:uppercase}.mode-card input[type=text]:focus-visible{outline:2px solid var(--warp);outline-offset:1px}.mode-card select{background:var(--void);border:1px solid rgba(176,141,62,.4);color:var(--bone);padding:.6em .8em;font-family:var(--body)}.records table{width:100%;border-collapse:collapse;font-size:.85rem}.records th,.records td{padding:.45em .6em;text-align:left;border-bottom:1px solid rgba(176,141,62,.15)}.records th{color:var(--brass);font-weight:500;letter-spacing:.1em}.records .win{color:var(--warp)}.records .loss{color:var(--blood-bright)}#game-canvas{position:fixed;inset:0;display:block}.hud{position:fixed;inset:0;pointer-events:none;z-index:5}.hud>*{pointer-events:auto}.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:.7rem 1.2rem;background:linear-gradient(180deg,rgba(10,12,16,.9),transparent)}.hud-top .title{font-family:var(--display);font-weight:700;letter-spacing:.3em;color:var(--brass);font-size:.85rem}.hud-player{display:flex;align-items:center;gap:.6rem;font-size:.85rem}.hud-player .dot{width:9px;height:9px;border-radius:50%;background:var(--bone-dim)}.hud-player.active .dot{background:var(--warp);box-shadow:0 0 8px var(--warp)}.hud-player .faction-tag{color:var(--bone-dim);font-size:.75rem}.hud-player.disconnected{opacity:.5}.hud-status{position:absolute;bottom:1.1rem;left:50%;transform:translate(-50%);padding:.55em 1.6em;background:#10141ae0;border:1px solid rgba(176,141,62,.5);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-size:.95rem;letter-spacing:.12em;white-space:nowrap}.hud-status.check{border-color:var(--blood-bright);color:var(--blood-bright)}.hud-log{position:absolute;top:4rem;right:1rem;width:264px;max-height:46vh;overflow-y:auto;background:#10141ad1;border:1px solid rgba(176,141,62,.35);padding:.7rem .9rem;font-size:.78rem;font-variant-numeric:tabular-nums}.hud-log h4{font-family:var(--display);font-size:.65rem;letter-spacing:.3em;color:var(--brass);margin-bottom:.5rem}.hud-log .mv{display:flex;gap:.5em;color:var(--bone-dim);line-height:1.55;margin-bottom:.35em}.hud-log .mv b{color:var(--brass);font-weight:500;min-width:1.5em;flex-shrink:0}.hud-actions{position:absolute;bottom:1.1rem;right:1rem;display:flex;gap:.6rem}.hud-actions .btn{padding:.5em 1.1em;font-size:.82rem}.hud-room{position:absolute;top:4rem;left:1rem;background:#10141ad1;border:1px solid rgba(176,141,62,.35);padding:.6rem .9rem;font-size:.8rem;color:var(--bone-dim)}.hud-room b{color:var(--warp);letter-spacing:.25em;font-size:1rem}.hud-unit{position:absolute;top:4rem;left:1rem;width:min(258px,44vw);background:linear-gradient(160deg,#1f2630e6,#10141aeb);border:1px solid rgba(176,141,62,.45);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);padding:.9rem 1rem 1rem;font-size:.78rem;animation:unit-in .18s ease-out}@keyframes unit-in{0%{opacity:0;transform:translate(-8px)}}.hud-unit.lower{top:8.4rem}.hud-unit .u-role{margin-top:.55rem;font-family:var(--display);font-size:.7rem;letter-spacing:.28em;color:var(--warp)}.hud-unit .u-name{font-family:var(--serif-tc);font-weight:900;font-size:1.18rem;color:var(--bone);margin-top:.15rem;line-height:1.3}.hud-unit .u-en{font-size:.66rem;color:var(--bone-dim);letter-spacing:.08em;margin-top:.1rem}.hud-unit .u-attack{margin-top:.65rem;padding:.5em .7em;background:#0a0c1099;border-left:3px solid var(--brass);color:var(--bone-dim);line-height:1.6}.hud-unit .u-attack b{display:block;color:var(--brass-bright);font-weight:700;letter-spacing:.08em}.hud-unit .u-attack.ranged{border-left-color:var(--blood-bright)}.hud-unit .u-attack.ranged b{color:var(--blood-bright)}.hud-unit .u-attack.psychic{border-left-color:#b06cff}.hud-unit .u-attack.psychic b{color:#b06cff}.hud-unit .u-rule{display:flex;gap:.6em;margin-top:.55rem;line-height:1.6;color:var(--bone-dim)}.hud-unit .u-rule b{color:var(--brass);font-weight:500;flex-shrink:0;letter-spacing:.1em}.overlay{position:fixed;inset:0;z-index:20;background:#06080ac7;display:flex;align-items:center;justify-content:center;padding:1.5rem}.promo-box{text-align:center;max-width:640px;width:100%}.promo-box h2{font-family:var(--serif-tc);font-weight:900;font-size:1.6rem;color:var(--brass-bright);letter-spacing:.25em;margin-bottom:.4rem}.promo-box p{color:var(--bone-dim);margin-bottom:1.4rem;letter-spacing:.1em}.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem}.promo-card{padding:1rem .8rem;background:var(--gunmetal);border:1px solid rgba(176,141,62,.4);color:var(--bone);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:border-color .15s,transform .15s,box-shadow .15s}.promo-card:hover{border-color:var(--warp);transform:translateY(-3px);box-shadow:0 0 24px #45d8c240}.promo-card .role{font-family:var(--display);font-size:.65rem;letter-spacing:.3em;color:var(--brass)}.promo-card .unit{margin-top:.4rem;font-weight:700;font-size:.95rem}.promo-card .unit-en{margin-top:.2rem;font-size:.7rem;color:var(--bone-dim)}.banter-overlay{cursor:pointer;background:#06080a9e}.banter-box{max-width:720px;width:100%;text-align:center}.banter-vs{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-bottom:2.2rem;flex-wrap:wrap}.banter-vs .bf{font-family:var(--serif-tc);font-weight:900;font-size:1.5rem;color:var(--bone);text-shadow:0 0 24px rgba(176,141,62,.5)}.banter-vs .vs-mark{font-family:var(--display);font-weight:900;font-size:2rem;color:var(--blood-bright);letter-spacing:.1em;text-shadow:0 0 30px rgba(192,48,48,.7)}.banter-line{min-height:3.2em;margin:.9rem 0;padding:.9rem 1.3rem;text-align:left;font-size:1.05rem;line-height:1.7;letter-spacing:.04em;background:linear-gradient(160deg,#1f2630e6,#10141aeb);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}.banter-line.white{border-left:3px solid var(--brass)}.banter-line.black{border-left:3px solid var(--blood-bright)}.banter-line .speaker{color:var(--brass);font-weight:700;margin-right:.4em}.banter-hint{margin-top:1.6rem;color:var(--bone-dim);font-size:.8rem;letter-spacing:.3em;animation:banter-blink 1.6s infinite}@keyframes banter-blink{50%{opacity:.3}}.end-box{text-align:center}.end-box .verdict{font-family:var(--serif-tc);font-weight:900;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:.3em;text-shadow:0 0 50px rgba(176,141,62,.4)}.end-box .verdict.win{color:var(--brass-bright)}.end-box .verdict.loss{color:var(--blood-bright)}.end-box .verdict.draw{color:var(--bone-dim)}.end-box .detail{margin-top:.8rem;color:var(--bone-dim);letter-spacing:.15em}.end-box .row{margin-top:2rem;display:flex;gap:1rem;justify-content:center}.loading-box{text-align:center}.loading-bar{width:min(340px,70vw);height:3px;margin:1.4rem auto 0;background:#b08d3e33;overflow:hidden}.loading-bar>div{height:100%;width:0%;background:var(--brass);transition:width .2s}.loading-box .msg{margin-top:.9rem;color:var(--bone-dim);font-size:.85rem;letter-spacing:.2em}.toast{position:fixed;top:1rem;left:50%;transform:translate(-50%);z-index:40;background:#7e1b1beb;color:var(--bone);border:1px solid var(--blood-bright);padding:.6em 1.4em;font-size:.9rem;letter-spacing:.1em;animation:toast-in .25s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-width:720px){.hud-log{display:none}}