:root{--bg:#0b0d18;--panel:#100e1cd1;--edge:#3a3352;--text:#efe6d2;--muted:#9a90b0;--fire:#ff9a3c;--fire-2:#ffe27a;--danger:#ff5a4a;--ok:#6ad04a;--pixel:"Press Start 2P", monospace;--body:"VT323", monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font:20px/1.2 var(--body);margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none}canvas#view{image-rendering:pixelated;image-rendering:crisp-edges;display:block;position:fixed;inset:0}canvas#overlay{pointer-events:none;position:fixed;inset:0}[hidden]{display:none!important}kbd{font:14px var(--pixel);color:var(--fire-2);border:2px solid var(--edge);background:#0006;padding:0 4px}b{color:var(--fire-2);font-weight:400}.panel,.home-card,.lobby-card,.results-card{background:var(--panel);border:3px solid var(--edge);box-shadow:0 0 0 3px #0008,inset 0 0 0 2px #0004}.btn{font:12px var(--pixel);color:var(--text);border:3px solid var(--edge);cursor:pointer;background:#2a2440;padding:12px 16px;box-shadow:inset -3px -3px #0006,inset 3px 3px #ffffff14}.btn:hover{background:#362e54}.btn:active{box-shadow:inset 3px 3px #0006}.btn.primary{color:#fff6dc;background:#b4521c;border-color:#ffb04a}.btn.primary:hover{background:#cc6424}.btn.small{padding:8px 10px;font-size:10px}.btn.ghost{background:0 0}.btn:disabled{opacity:.45;cursor:not-allowed}input{font:22px var(--body);color:var(--text);border:3px solid var(--edge);background:#0008;outline:none;padding:6px 10px}input:focus{border-color:var(--fire)}.muted{color:var(--muted)}.err{color:var(--danger);min-height:1.2em;margin:6px 0 0}.screen{background:radial-gradient(at 50% 120%,#4a1e10 0%,#1a1020 45%,#0b0d18 75%);place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:auto}.stars{pointer-events:none;opacity:.7;background-image:radial-gradient(1px 1px at 10% 20%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 70% 10%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 30% 60%,#ccf 50%,#0000 51%),radial-gradient(1px 1px at 85% 45%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 55% 30%,#ffd 50%,#0000 51%),radial-gradient(1px 1px at 15% 80%,#fff 50%,#0000 51%);background-size:300px 300px;position:absolute;inset:0}.home-card{width:min(480px,100%);padding:28px;position:relative}h1{font:30px/1.2 var(--pixel);color:var(--fire-2);text-shadow:3px 3px #b4521c,6px 6px #0008;align-items:center;gap:14px;margin:0 0 12px;display:flex}.flame{width:24px;height:32px;image-rendering:pixelated;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='2' fill='%23ffe27a'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23ffe27a'/%3E%3Crect x='1' y='3' width='1' height='3' fill='%23ff9a3c'/%3E%3Crect x='4' y='2' width='1' height='4' fill='%23ff9a3c'/%3E%3Crect x='2' y='4' width='2' height='2' fill='%23ff9a3c'/%3E%3Crect x='0' y='5' width='1' height='2' fill='%23ff4a1a'/%3E%3Crect x='5' y='4' width='1' height='3' fill='%23ff4a1a'/%3E%3Crect x='1' y='6' width='4' height='2' fill='%23ff4a1a'/%3E%3C/svg%3E") 50%/contain no-repeat;flex:none;animation:.4s steps(2,end) infinite flick}@keyframes flick{50%{transform:translateY(-2px)scaleX(.9)}}.tagline{color:var(--muted);margin:0 0 22px}.field{font:10px var(--pixel);color:var(--muted);gap:6px;margin-bottom:14px;display:grid}.row{gap:10px;margin-bottom:10px;display:flex}.row .btn{flex:1}.row.join input{text-transform:uppercase;width:120px;font:16px var(--pixel);letter-spacing:4px;text-align:center}.howto{color:var(--muted);margin-top:14px}.howto summary{cursor:pointer;font:10px var(--pixel);color:var(--text)}.howto li{margin:6px 0}.lobby-card{width:min(920px,100%);padding:22px;position:relative}.lobby-card header{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:18px;display:flex}#room-code{font:28px var(--pixel);color:var(--fire-2);letter-spacing:6px}#crew-count{font:10px var(--pixel);color:var(--muted);align-items:center;gap:6px;margin-left:auto;display:flex}#crew-count button{width:34px;padding:8px 0}#crew-count button.on{background:#b4521c;border-color:#ffb04a}#crews{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;display:grid}.crew{border:3px solid var(--edge);cursor:pointer;background:#0005;min-height:140px;padding:10px}.crew:hover{background:#ffffff0a}.crew.mine{box-shadow:inset 0 0 0 2px var(--c)}.crew h4{font:11px var(--pixel);color:var(--c);margin:0 0 8px}.crew .p{align-items:center;gap:8px;margin:4px 0;display:flex}.crew .p canvas{width:24px;height:28px;image-rendering:pixelated}.crew .p .cls{color:var(--muted);margin-left:auto;font-size:16px}.crew .p.off{opacity:.4}.crew .join-hint{color:var(--muted);font-size:16px}h3{font:11px var(--pixel);color:var(--muted);margin:20px 0 10px}#classes{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;display:grid}.cls-card{border:3px solid var(--edge);cursor:pointer;background:#0005;grid-template-columns:36px 1fr;gap:4px 10px;padding:10px;display:grid}.cls-card:hover{background:#ffffff0a}.cls-card.on{border-color:var(--fire);background:#ff9a3c14}.cls-card canvas{width:36px;height:42px;image-rendering:pixelated;grid-row:span 2}.cls-card .n{font:10px var(--pixel);color:var(--fire-2);align-self:end}.cls-card .d{color:var(--muted);font-size:16px}.lobby-card footer,.results-card footer{align-items:center;gap:12px;margin-top:20px;display:flex}.lobby-card footer .btn,.results-card footer .btn{margin-left:auto}.results-card{width:min(760px,100%);padding:24px}.results-card h2{font:20px/1.4 var(--pixel);color:var(--fire-2);margin:0 0 16px}.place{border-left:6px solid var(--c);background:#0005;align-items:center;gap:12px;margin-bottom:6px;padding:8px 10px;display:flex}.place .n{font:14px var(--pixel);width:40px}.place .who{color:var(--muted);text-align:right;margin-left:auto}#stats{border-collapse:collapse;width:100%;margin-top:16px;font-size:18px}#stats th{font:9px var(--pixel);color:var(--muted);text-align:left;padding:6px}#stats td{border-top:1px solid #ffffff12;padding:4px 6px}#hud{pointer-events:none;position:fixed;inset:0}#hud .panel{padding:8px 10px}#phase{text-align:center;text-shadow:2px 2px #000;position:absolute;top:10px;left:50%;transform:translate(-50%)}#phase-label{font:14px var(--pixel);color:var(--fire-2)}#phase.night #phase-label{color:#9ab4ff}#phase.warn #phase-label{color:var(--danger);animation:.6s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.4}}#phase-time{font:26px var(--body)}.bar{border:2px solid var(--edge);background:#0009;width:180px;height:8px}.bar i{background:var(--fire);height:100%;display:block}#phase .bar{margin:2px auto 0}#crew-panel{width:230px;position:absolute;top:10px;left:10px}#crew-panel h4{font:10px var(--pixel);color:var(--c);margin:0 0 6px}.res{gap:12px;font-size:22px;display:flex}.res span{align-items:center;gap:4px;display:flex}.res img,#bottom img,#build-menu img{image-rendering:pixelated}.parts{gap:2px;margin-top:8px;font-size:18px;display:grid}.parts .ok{color:var(--ok)}.parts .cost{color:var(--muted);margin-left:6px}.launch{color:var(--fire-2);margin-top:6px}#map-wrap{padding:6px;position:absolute;top:10px;right:10px}#minimap{width:150px;height:150px;image-rendering:pixelated;display:block}#rivals{margin-top:4px;font-size:17px}#rivals div{justify-content:space-between;gap:8px;display:flex}#feed{text-align:right;text-shadow:2px 2px #000;width:340px;font-size:19px;position:absolute;top:230px;right:10px}#feed div{margin:2px 0;transition:opacity .5s}#hint{font:11px var(--pixel);color:var(--fire-2);text-shadow:2px 2px #000;white-space:nowrap;position:absolute;bottom:84px;left:50%;transform:translate(-50%)}#status{text-align:center;font:16px/1.6 var(--pixel);text-shadow:3px 3px #000;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}#status small{font:22px var(--body);color:var(--muted);display:block}#bottom{white-space:nowrap;align-items:center;gap:18px;font-size:20px;display:flex;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}#bottom .stat{align-items:center;gap:6px;display:flex}#bottom .bar.hp{width:120px;height:12px}#bottom .bar.hp i{background:var(--ok)}#bottom .key{font:9px var(--pixel);color:var(--muted)}#bottom .cd{color:var(--muted)}#bottom .ready{color:var(--fire-2)}#build-menu{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:6px;max-width:96vw;display:flex;position:absolute;bottom:66px;left:50%;transform:translate(-50%)}.bm{border:2px solid var(--edge);cursor:pointer;background:#0006;min-width:78px;padding:3px 6px}.bm.on{border-color:var(--fire);background:#ff9a3c22}.bm.no{opacity:.45}.bm.done{border-color:var(--ok)}.bm .k{font:9px var(--pixel);color:var(--fire-2)}.bm .c{color:var(--muted);align-items:center;gap:6px;font-size:16px;display:flex}.bm .c img{width:14px}.bm.sep{cursor:default;background:0 0;border:none;min-width:6px;padding:0}#scoreboard{min-width:420px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#scoreboard table{border-collapse:collapse;width:100%;font-size:19px}#scoreboard td,#scoreboard th{text-align:left;padding:3px 8px}#scoreboard th{font:9px var(--pixel);color:var(--muted)}#help{width:min(470px,94vw);font-size:17px;position:absolute;top:230px;right:10px}#hud.building #hint{bottom:140px}#help h4{font:11px var(--pixel);color:var(--fire-2);margin:4px 0 8px}#help table td{padding:2px 8px}#chat{pointer-events:auto;text-align:right;width:340px;position:absolute;bottom:60px;right:10px}#chat-log{text-shadow:2px 2px #000;flex-direction:column;justify-content:flex-end;max-height:160px;font-size:18px;display:flex;overflow:hidden}#chat-input{width:100%;margin-top:4px;font-size:18px}#corner{pointer-events:auto;gap:6px;display:flex;position:absolute;bottom:10px;right:10px}.icon-btn{font:16px var(--body);background:var(--panel);color:var(--text);border:3px solid var(--edge);cursor:pointer;width:40px;height:40px}.icon-btn:hover{border-color:var(--fire)}.icon-btn.off{color:var(--muted);text-decoration:line-through}#conn{font:14px var(--pixel);background:var(--panel);border:3px solid var(--danger);z-index:10;padding:16px 20px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@media (width<=700px){#feed,#chat{width:60vw}#crew-panel{width:180px;font-size:16px}#map-wrap{transform-origin:100% 0;transform:scale(.7)}#bottom{gap:8px;font-size:16px}#bottom .bar.hp{width:70px}}#objective{text-align:center;pointer-events:none;max-width:min(720px,92vw);position:absolute;top:74px;left:50%;transform:translate(-50%)}#objective-text{color:var(--fire-2);background:var(--panel);border:3px solid #b4521c;padding:4px 14px;font-size:24px;animation:.25s steps(3,end) pop;display:inline-block;box-shadow:0 0 0 3px #0008}#objective-tip{color:var(--muted);text-shadow:2px 2px #000;margin-top:4px;font-size:19px}@keyframes pop{0%{transform:scale(.9)}}.modal{pointer-events:auto;z-index:5;background:#05060fb0;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.modal-card{background:var(--panel);border:3px solid var(--edge);width:min(760px,100%);padding:22px 24px;box-shadow:0 0 0 3px #000a}.modal-card h2{font:18px/1.4 var(--pixel);color:var(--fire-2);text-align:center;margin:0 0 16px}.steps{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.step{border:3px solid var(--edge);background:#0006;padding:12px;position:relative}.step .num{font:18px var(--pixel);color:#1b1422;background:var(--fire);place-items:center;width:34px;height:34px;margin-bottom:8px;display:grid;box-shadow:3px 3px #0008}.step h4{font:11px/1.5 var(--pixel);color:var(--fire-2);margin:0 0 6px}.step p{color:var(--text);margin:0;font-size:19px;line-height:1.35}.intro-card .tip{text-align:center;color:var(--muted);margin:16px 0 12px}.intro-card .btn{min-width:200px;margin:0 auto;display:block}.settings-card{width:min(440px,100%)}.setting{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:22px;display:flex}.setting .btn{min-width:76px}.seg{gap:4px;display:flex}.seg .btn.on,#crew-count button.on{background:#b4521c;border-color:#ffb04a}.setting-actions{gap:8px;margin-top:14px;display:flex}.setting-actions .btn{flex:1}.btn.danger{border-color:var(--danger);background:#6a1e22}.btn.danger:hover{background:#8a262c}@media (width<=700px){.steps{grid-template-columns:1fr}}.home-card .lang-btn{position:absolute;top:10px;right:10px}.how-strip{border-top:2px solid var(--edge);color:var(--muted);gap:6px;margin-top:16px;padding-top:14px;display:grid}.how-strip b{font:11px var(--pixel);color:#1b1422;background:var(--fire);margin-right:6px;padding:2px 6px}.lobby-how{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;display:grid}.lobby-how .step{align-items:flex-start;gap:10px;padding:10px;display:flex}.lobby-how .step .num{flex:none;width:28px;height:28px;margin:0;font-size:14px}.lobby-how .step p{color:var(--muted);font-size:17px}@media (width<=760px){.lobby-how{grid-template-columns:1fr}}html[lang^=zh]{--body:"VT323", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--pixel:"Press Start 2P", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif}html[lang^=zh] body{font-size:17px}html[lang^=zh] .btn{font-size:14px;font-weight:700}html[lang^=zh] .btn.small{font-size:13px}html[lang^=zh] .field,html[lang^=zh] h3,html[lang^=zh] .crew h4,html[lang^=zh] .cls-card .n,html[lang^=zh] #crew-panel h4,html[lang^=zh] .step h4,html[lang^=zh] .bm .k,html[lang^=zh] #help h4{font-size:14px;font-weight:700}html[lang^=zh] #phase-label{font-size:18px;font-weight:700}html[lang^=zh] #hint{font-size:15px;font-weight:700}html[lang^=zh] #status{font-size:22px;font-weight:700}html[lang^=zh] #status small{font-size:16px;font-weight:500}html[lang^=zh] #objective-text{font-size:19px;font-weight:700}html[lang^=zh] #objective-tip,html[lang^=zh] .step p,html[lang^=zh] #feed,html[lang^=zh] #chat-log{font-size:15px}html[lang^=zh] .results-card h2,html[lang^=zh] .modal-card h2{font-size:22px;font-weight:700}html[lang^=zh] .cls-card .d,html[lang^=zh] .crew .join-hint,html[lang^=zh] .crew .p .cls{font-size:14px}html[lang^=zh] .setting{font-size:17px}html[lang^=zh] .row.join input{letter-spacing:2px;font-size:14px}#bottom .vitals{flex-direction:column;align-items:stretch;gap:3px}.vrow{align-items:center;gap:6px;display:flex}.bolt{text-align:center;color:#f2c43a;width:18px}#bottom .bar.en{width:120px;height:8px;position:relative}#bottom .bar.en i{background:#f2c43a;position:absolute;inset:0 auto 0 0}#bottom .bar.en b{background:#b4521c;position:absolute;inset:0 auto 0 0}#bottom .bar.en.ex i{background:#e04848;animation:.4s steps(2,end) infinite blink}#en-text{color:var(--muted);min-width:64px;font-size:15px}.over{color:var(--danger)}#xpbar{text-align:center;text-shadow:2px 2px #000;position:absolute;bottom:86px;left:50%;transform:translate(-50%)}#xp-label{font-size:19px}#xp-label b{color:var(--fire-2)}#xpbar .bar{width:260px;height:7px;margin:2px auto 0}#xpbar .bar i{background:#8ad04a}#hud.building #xpbar{display:none}#hint{bottom:128px}#traits{pointer-events:auto;width:236px;padding:6px 8px;position:absolute;bottom:10px;left:10px}#traits h4{font:10px var(--pixel);color:var(--fire-2);margin:0 0 4px}#traits.has h4{animation:.8s steps(2,end) infinite blink}.trait{grid-template-columns:14px 1fr auto 22px;align-items:center;gap:6px;padding:0;font-size:15px;line-height:1;display:grid}.trait .k{font:8px var(--pixel);color:var(--muted)}.trait .pips{gap:2px;display:flex}.trait .pips i{background:#ffffff18;border:1px solid #0008;width:7px;height:7px}.trait .pips i.on{background:var(--c)}.trait button{width:22px;height:16px;font:12px var(--body);color:var(--text);border:2px solid var(--edge);cursor:pointer;visibility:hidden;background:#2a2440;padding:0}#traits.has .trait button{visibility:visible}.trait button:hover{border-color:var(--fire)}#traits:not(.has){opacity:.75}#class-pick{pointer-events:auto;border-color:var(--fire);width:250px;max-height:calc(100vh - 440px);position:absolute;top:170px;left:10px;overflow:auto}#class-pick h4{font:10px var(--pixel);color:var(--fire-2);margin:0 0 6px;animation:.8s steps(2,end) infinite blink}.pick{border:2px solid var(--edge);cursor:pointer;background:#0006;grid-template-columns:28px 1fr;gap:2px 8px;margin-bottom:6px;padding:6px;display:grid}.pick:hover{border-color:var(--fire);background:#ff9a3c18}.pick canvas{width:24px;height:28px;image-rendering:pixelated;grid-row:span 2}.pick .n{color:var(--fire-2);font-size:20px}.pick .d{color:var(--muted);font-size:15px;line-height:1.15}.tree-card{width:min(1040px,100%);max-height:92vh;overflow:auto}.tree-card .btn{min-width:180px;margin:14px auto 0;display:block}.tree-hint{text-align:center;margin:0 0 10px}.tree{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.tree .col{align-content:start;gap:6px;display:grid}.tnode{border:2px solid var(--edge);background:#0006;grid-template-columns:24px 1fr;gap:0 6px;padding:5px 6px;display:grid}.tnode canvas{width:22px;height:26px;image-rendering:pixelated;grid-row:span 2}.tnode .n{color:var(--text);justify-content:space-between;gap:4px;font-size:18px;display:flex}.tnode .n small{color:var(--muted);font-size:14px}.tnode .d{color:var(--muted);font-size:14px;line-height:1.15}.tnode.t1{border-color:#6a5a8a}.tnode.t1 .n{color:var(--fire-2)}.tnode.t2{margin-left:10px}.tnode.t3{margin-left:20px}.tnode.owned{border-color:var(--ok);background:#6ad04a1a}.tnode.avail{border-color:var(--fire);cursor:pointer;animation:.9s steps(2,end) infinite glow}.tnode.avail:hover{background:#ff9a3c26}.tnode.dim{opacity:.45}@keyframes glow{50%{box-shadow:0 0 0 2px #ff9a3c66}}.tree-root{text-align:center;color:var(--muted);margin-bottom:8px}@media (width<=860px){.tree{grid-template-columns:repeat(2,1fr)}}html[lang^=zh] .tnode .n,html[lang^=zh] .pick .n{font-size:15px;font-weight:700}html[lang^=zh] .tnode .d,html[lang^=zh] .pick .d,html[lang^=zh] .trait{font-size:13px}html[lang^=zh] #traits h4,html[lang^=zh] #class-pick h4{font-size:13px;font-weight:700}html[lang^=zh] #xp-label{font-size:15px}.tline{color:var(--muted);margin-top:6px;font-size:17px}.tline.over{color:var(--danger)}.tline.calm{color:#7ad8ff}