:root{--bg:#0e0d14;--panel:#14121ed1;--border:#4a3f6b;--text:#e8e2d0;--muted:#9a93a8;--gold:#e6c36a;--jade:#5fd4e0;--danger:#e0645f;--ok:#8fd16a}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{image-rendering:pixelated;display:block}.muted{color:var(--muted);font-size:11px;font-weight:400}.overlay{z-index:10;background:#08070cbf;place-items:center;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.panel{background:var(--panel);border:1px solid var(--border);text-align:center;max-width:min(440px,100vw - 32px);padding:32px 40px}.panel.wide{max-width:min(640px,100vw - 32px);padding:24px}.panel h1{color:var(--gold);letter-spacing:.3em;margin:0 0 8px;font-size:32px}.tagline{color:var(--muted);margin:0 0 16px;font-size:13px}.panel form{gap:8px;display:flex}.panel #login-form,.auth-actions{flex-direction:column;gap:8px;display:flex}.auth-actions{flex-direction:row}.auth-actions button{flex:1}.auth-hint{margin:8px 0 0}.panel input{border:1px solid var(--border);min-width:0;color:var(--text);background:#000a;flex:1;padding:10px 12px;font-size:15px}button{background:var(--gold);color:#1a1408;cursor:pointer;font-weight:700;font:inherit;border:0;padding:6px 12px;font-weight:700}button.ghost{color:var(--text);border:1px solid var(--border);background:0 0}.panel button{padding:10px 16px}.error{color:var(--danger);min-height:1.2em;margin:12px 0 0;font-size:13px}.report{text-align:left;color:var(--text);white-space:pre-wrap;min-height:3em;line-height:1.7}#result-stats{border-collapse:collapse;width:100%;margin-bottom:12px;font-size:13px}#result-stats td,#result-stats th{border-bottom:1px solid var(--border);padding:4px 6px}#result-stats th{color:var(--muted);font-weight:400}#hud{pointer-events:none;font-size:13px;position:fixed;inset:0}#hud[hidden]{display:none}.panel-box{background:var(--panel);border:1px solid var(--border);padding:6px 10px}.panel-box h3{color:var(--gold);margin:0 0 6px;font-size:13px;font-weight:400}.panel-box[hidden]{display:none}.interactive{pointer-events:auto}#topleft{flex-direction:column;gap:6px;width:min(300px,100vw - 16px);display:flex;position:absolute;top:8px;left:8px}#debug{color:var(--muted);white-space:pre;text-shadow:0 1px 2px #000;font-family:ui-monospace,monospace;font-size:11px}#mission .title{color:var(--gold);font-size:14px}#mission .meta{color:var(--muted);margin:2px 0 6px;font-size:12px}#mission .obj{justify-content:space-between;gap:8px;display:flex}#mission .obj.done{color:var(--ok)}#mission .warn{color:var(--danger);margin-top:4px}#strats .s{justify-content:space-between;gap:8px;padding:1px 0;display:flex}#strats .s.cd{color:var(--muted)}#strats .s.match{color:var(--gold)}#strats .s.armed{color:var(--jade)}#strats .seq{letter-spacing:2px;font-family:ui-monospace,monospace}#strats .seq b{color:var(--gold)}#right{flex-direction:column;gap:6px;width:min(320px,100vw - 16px);max-height:calc(100vh - 16px);display:flex;position:absolute;top:8px;right:8px;overflow:auto}#roster div.me{color:var(--jade)}#panel[hidden]{display:none}.panel-nav{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;display:flex}.exchange-form{flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;display:flex}.exchange-sell{grid-template-columns:2fr 1fr 1fr;gap:6px;width:100%;margin:6px 0;display:grid}.exchange-field{flex-direction:column;gap:2px;min-width:0;display:flex}.exchange-field select,.exchange-field input{width:100%;min-width:0}.exchange-item,.exchange-number,.sect-name,.sect-announce{color:#e7e1cf;background:#171521;border:1px solid #3a3545;padding:4px 6px}.exchange-number{width:64px}.exchange-sell .exchange-number{width:100%}.sect-name{width:150px}.sect-announce{flex:1;min-width:160px}.panel-nav .where{color:var(--gold);flex:1}.panel-nav .visit{border:1px solid var(--border);width:88px;color:var(--text);font:inherit;background:#000a;padding:5px 6px}.tabs{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:6px;display:flex}.tabs .muted{white-space:nowrap;margin-left:auto}button.tab{color:var(--muted);white-space:nowrap;background:0 0;border:0;padding:4px 6px;font-weight:400}button.tab.on{color:var(--gold);border-bottom:2px solid var(--gold)}button.mini{color:var(--jade);border:1px solid var(--border);background:0 0;padding:1px 6px;font-size:11px;font-weight:400}.panel-body{flex-direction:column;gap:4px;display:flex}.panel-body>.muted{margin-top:4px}.equip-row{grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:6px;display:grid}.equip-slot{border:1px solid var(--border);flex-direction:column;align-items:flex-start;gap:2px;padding:4px;font-size:12px;display:flex}.recipe{border-bottom:1px solid #ffffff10;padding:3px 0}.shop-row{padding:2px 0}.gold{color:var(--gold)}.ok{color:var(--ok)}.bad{color:var(--danger)}.setting{cursor:pointer;align-items:center;gap:6px;display:flex}.card{border:1px solid var(--border);margin-bottom:6px;padding:6px 8px}.card.mine{border-color:var(--gold)}.card .name{color:var(--gold)}.card .brief{color:var(--text);margin:4px 0;font-size:12px;line-height:1.5}.card .tags{color:var(--muted);font-size:11px}.row{justify-content:space-between;align-items:center;gap:6px;display:flex}.card .row{justify-content:space-between;align-items:center;gap:6px;margin-top:4px;display:flex}.inv-cols{grid-template-columns:1fr 1fr;gap:8px;display:grid}.inv-cols h4{color:var(--muted);margin:0 0 4px;font-size:12px;font-weight:400}.inv-item{cursor:pointer;border:1px solid #0000;justify-content:space-between;padding:2px 4px;display:flex}.inv-item:hover{border-color:var(--border);background:#ffffff10}.swatch{vertical-align:-1px;width:10px;height:10px;margin-right:4px;display:inline-block}#chat{width:min(420px,100vw - 16px);position:absolute;bottom:8px;left:8px}#chat-log{text-shadow:0 1px 2px #000;flex-direction:column;justify-content:flex-end;gap:2px;max-height:26vh;display:flex;overflow:hidden}#chat-log .sys{color:var(--gold)}#chat-log .from{color:var(--jade)}#chat-input{pointer-events:auto;border:1px solid var(--border);width:100%;color:var(--text);background:#000c;margin-top:4px;padding:6px 8px}#bottom{flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}#prompt{min-height:18px;color:var(--gold);text-shadow:0 1px 2px #000}#hp{border:1px solid var(--border);background:#000a;width:300px;height:10px;position:relative}#hp-fill{background:var(--jade);height:100%;transition:width .15s}#hp-text{text-align:center;text-shadow:0 1px 2px #000;font-size:10px;position:absolute;inset:-3px 0 0}#hotbar{gap:4px;display:flex}.slot{background:var(--panel);border:1px solid var(--border);text-align:center;place-items:center;width:52px;height:52px;font-size:11px;line-height:1.1;display:grid;position:relative}.slot.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}.slot.empty{opacity:.4}.slot .sw{width:16px;height:16px;margin:0 auto 2px}.slot .n{color:var(--gold);font-size:11px;position:absolute;bottom:1px;right:3px}.slot .k{color:var(--muted);font-size:10px;position:absolute;top:1px;left:3px}.slot .cd-mask{pointer-events:none;background:conic-gradient(from 0deg, #000000c7 var(--cd,0deg), transparent 0);position:absolute;inset:0}.slot .cd-text{color:#fff;text-shadow:0 1px 3px #000;pointer-events:none;place-items:center;font-size:15px;font-weight:700;display:grid;position:absolute;inset:0}.slot.cooling{border-color:#6f7b88}.slot.cooling.sel{border-color:var(--gold)}.slot .cd-mask[hidden],.slot .cd-text[hidden]{display:none}#help{color:var(--muted);white-space:nowrap;text-shadow:0 1px 2px #000;font-size:12px}.center-msg{text-align:center;color:var(--danger);text-shadow:0 2px 4px #000;font-size:20px;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.center-msg small{color:var(--text);margin-top:6px;font-size:13px;display:block}.center-msg[hidden]{display:none}@media (width<=760px){#help{display:none}#right{max-height:40vh;top:auto;bottom:150px}#chat{bottom:150px}#hp{width:220px}.slot{width:40px;height:40px;font-size:10px}}.section{color:var(--gold);margin:8px 0 4px;font-size:12px;font-weight:400}.mat-grid,.dirs{flex-wrap:wrap;gap:4px;display:flex}button.mat{color:var(--text);border:1px solid var(--border);background:0 0;padding:3px 6px;font-size:12px;font-weight:400}button.mat.on{border-color:var(--gold);color:var(--gold);background:#e6c36a1a}button.mat.lack{color:var(--muted)}button:disabled{opacity:.4;cursor:not-allowed}.preview{border:1px solid var(--border);flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px;padding:6px;display:flex}.progress{border:1px solid var(--border);background:#000a;height:6px;margin:6px 0}.progress .fill{background:var(--gold);height:100%}.lines{align-items:center;gap:3px;width:100%;display:flex}button.mini.on{color:var(--gold);border-color:var(--gold)}.pressure{grid-template-columns:6em 1fr 2.5em;align-items:center;gap:6px;font-size:12px;display:grid}.pressure .progress{margin:0}.report-text{white-space:pre-wrap;border-left:2px solid var(--gold);background:#e6c36a0d;padding:6px;font-size:12px;line-height:1.7}.fold{cursor:pointer}.touch-hint{display:none}body.touch .touch-hint{display:block}body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body.touch input,body.touch select{-webkit-user-select:text;user-select:text;font-size:16px}#stage canvas{touch-action:none}#touch{pointer-events:none;z-index:5;position:fixed;inset:0}#touch[hidden]{display:none}#touch>*{pointer-events:auto;touch-action:none}#stick,#aim{left:calc(20px + env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));background:#ffffff10;border:2px solid #ffffff30;border-radius:50%;place-items:center;width:124px;height:124px;display:grid;position:absolute}#aim{left:auto;right:calc(20px + env(safe-area-inset-right));border-color:#e0645f55}#aim-knob{border:2px solid var(--danger);pointer-events:none;background:#e0645f55;border-radius:50%;width:52px;height:52px}#touch:has(#strat-pad:not([hidden])) #aim{visibility:hidden}#stick-knob{border:2px solid var(--gold);pointer-events:none;background:#e6c36a66;border-radius:50%;width:52px;height:52px}#touch-buttons{right:calc(16px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,auto);place-items:end center;gap:10px;display:grid;position:absolute}button.tbtn{width:64px;height:64px;color:var(--text);border:2px solid var(--border);touch-action:manipulation;background:#14121ecc;border-radius:50%;padding:0;font-size:15px}button.tbtn:active,button.tbtn.on{border-color:var(--gold);color:var(--gold);background:#e6c36a33}button.tbtn.small{width:48px;height:48px;font-size:12px;font-weight:400}#btn-interact{grid-area:2/3}#touch[data-kind=mission] #touch-buttons{bottom:calc(184px + env(safe-area-inset-bottom));gap:8px}#touch[data-kind=mission] button.tbtn:not(.small){width:56px;height:56px}#btn-strat{grid-area:2/2}button.tbtn.ready{border-color:var(--jade);color:var(--jade);box-shadow:0 0 12px #5fd4e088}#touch:not([data-kind=mission]) .mission-only{display:none}#strat-pad{right:calc(8px + env(safe-area-inset-right));bottom:calc(4px + env(safe-area-inset-bottom));grid-template-rows:repeat(3,56px);grid-template-columns:repeat(3,56px);gap:4px;display:grid;position:absolute}#strat-pad[hidden]{display:none}#strat-pad .tbtn{border-radius:12px;width:56px;height:56px;font-size:22px}#strat-pad [data-dir=U]{grid-area:1/2}#strat-pad [data-dir=L]{grid-area:2/1}#strat-pad [data-dir=R]{grid-area:2/3}#strat-pad [data-dir=D]{grid-area:3/2}body.touch #debug,body.touch #help,body.touch #roster{display:none}body.touch #hotbar{pointer-events:auto;max-width:calc(100vw - 320px - env(safe-area-inset-left) - env(safe-area-inset-right));scrollbar-width:none;overflow-x:auto}body.touch .slot{flex:none;width:40px;height:40px;font-size:9px}body.touch .slot .sw{width:12px;height:12px}body.touch #bottom{bottom:calc(8px + env(safe-area-inset-bottom))}body.touch #hp{width:min(260px,100vw - 320px)}body.touch #chat{left:calc(8px + env(safe-area-inset-left));bottom:calc(160px + env(safe-area-inset-bottom));width:min(340px,45vw)}body.touch #chat-log{max-height:18vh;font-size:12px}body.touch #topleft{left:calc(8px + env(safe-area-inset-left));width:min(260px,42vw);font-size:11px}body.touch #right{right:calc(8px + env(safe-area-inset-right));width:min(360px,52vw);top:calc(8px + env(safe-area-inset-top));max-height:calc(100vh - 190px - env(safe-area-inset-bottom));bottom:auto}body.touch #panel{font-size:12px}body.touch button.tab{padding:8px}body.touch button.mini{padding:5px 9px;font-size:12px}body.touch .fold{color:var(--jade);padding:6px 4px}body.touch .inv-item{padding:6px 4px}body.touch .center-msg{top:30%}body.touch .panel h1{font-size:26px}@media (orientation:portrait){body.touch #right{width:calc(100vw - 16px);max-height:38vh}body.touch #topleft{top:calc(38vh + 16px)}body.touch #hotbar{max-width:calc(100vw - 16px)}body.touch #hp{width:min(260px,100vw - 32px)}body.touch #bottom{bottom:calc(168px + env(safe-area-inset-bottom))}body.touch #chat{bottom:calc(250px + env(safe-area-inset-bottom));width:calc(100vw - 16px)}body.touch #hud[data-kind=mission] #topleft{top:calc(72px + env(safe-area-inset-top))}body.touch #hud[data-kind=mission] #bottom{bottom:calc(312px + env(safe-area-inset-bottom))}body.touch #hud[data-kind=mission] #chat{bottom:calc(392px + env(safe-area-inset-bottom))}#touch:before{content:"横屏体验更佳";left:50%;bottom:calc(150px + env(safe-area-inset-bottom));color:var(--muted);pointer-events:none;font-size:11px;position:absolute;transform:translate(-50%)}}body.touch #strats:not(.active){display:none}body.touch #hud:has(#strats.active) #chat-log{visibility:hidden}#touch:has(#strat-pad:not([hidden])) #touch-buttons>:not(#btn-strat){visibility:hidden}#net{color:var(--ok);text-shadow:0 1px 2px #000;font-family:ui-monospace,monospace;font-size:11px;position:absolute;top:4px;left:50%;transform:translate(-50%)}#net.warn{color:var(--gold)}#net.bad{color:var(--danger)}