:root{--panel:286px;--gold:#ffc04d;--ink:#0d1425;--line:#ffffff1f}
html,body{font-family:Segoe UI,Arial,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body>canvas{display:block;position:fixed;left:0;top:0}
button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #7df;outline-offset:3px}
#menu h1{font-family:Segoe UI,Arial,sans-serif;font-weight:900;-webkit-text-stroke:0;font-size:clamp(34px,5vw,64px);letter-spacing:1px;line-height:1.12}
#menu h1,#banner,.wi{filter:none}#menu{background:linear-gradient(150deg,#080e20ee,#112448d9,#0a101fea);overflow-y:auto;box-sizing:border-box;padding:24px 12px}
.dv{box-sizing:border-box;border:1px solid #d59432;border-radius:12px;background:linear-gradient(145deg,#1c2d4c,#101a30);padding:13px 18px;line-height:1.25;transition:background .15s,box-shadow .15s;font-size:17px;box-shadow:0 4px 14px #0003;user-select:none}
.dv:hover{background:#273f64;box-shadow:0 0 0 2px #ffb30045}.dv:active{transform:translateY(1px)}
#press{font-size:20px;animation:none;background:#ffbd43;color:#251a08;padding:14px 24px;border-radius:12px;font-weight:800;box-shadow:0 6px 22px #f903}
#net{background:#090f20f5;overflow-y:auto;box-sizing:border-box;padding:22px 12px;gap:8px;justify-content:flex-start}#net h2{font-size:23px;margin:6px 0}#net .dv{padding:10px 12px;font-size:14px;width:min(360px,85vw)}#net .row2 .dv{width:auto;flex:1}#net .row2{width:min(420px,92vw);justify-content:center}#net .row2 input{min-width:0;flex:1}
#nbig,#nin{font-family:Consolas,monospace;font-weight:800;letter-spacing:6px}#nbig{font-size:40px}#nin{font-size:24px;border-radius:9px;padding:8px}#nros{padding:8px;background:#ffffff09;border-radius:10px;min-width:220px}#nst{max-width:440px;text-align:center;line-height:1.45}
#list{margin-top:100px;margin-bottom:20px}.it{padding:14px 8px!important;min-height:94px!important;font-size:15px!important;border-radius:12px}.it.on{transform:translateY(-4px)!important}#menu.sg #banner{top:54px}#menu.sg h1{font-size:25px}
#hud{box-sizing:border-box;padding:16px}.hb,.kb,.wb{border-radius:6px}.nm{font-size:14px;letter-spacing:.3px}.hb i,.wb i{transition:width .1s linear}
#controls-panel{display:none;position:fixed;right:0;top:0;bottom:0;width:var(--panel);box-sizing:border-box;background:linear-gradient(180deg,#111b2f,#080f1e);border-left:1px solid #ffffff16;z-index:30;overflow:auto;padding:23px 20px;font-size:13px;font-weight:400}
.panel-brand{font-size:25px;font-weight:900;letter-spacing:.8px}.panel-brand span{color:var(--gold)}.panel-brand small{display:block;font-size:10px;letter-spacing:2.5px;color:#9eaeca;margin-top:4px}
#connection-status{font-size:12px;color:#a9c9ec;margin:15px 0;line-height:1.5}.panel-section{border-top:1px solid var(--line);padding:14px 0}.panel-section h2{font-size:12px;text-transform:uppercase;letter-spacing:1.3px;color:var(--gold);margin:0 0 12px}.panel-section p{color:#95a8c6;font-size:11px;line-height:1.6;margin:10px 0 0}
.control-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:7px 0;line-height:1.3}.control-row kbd{font-family:inherit;font-size:10px;font-weight:700;border:1px solid #ffffff24;background:#253249;padding:4px 6px;border-radius:4px;white-space:nowrap;box-shadow:0 2px #030817}
.panel-section label{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.panel-section select{max-width:128px;background:#1d2c45;color:#fff;border:1px solid #ffffff25;border-radius:5px;padding:6px;font-size:12px}.panel-section input{width:128px;accent-color:var(--gold)}
.panel-section button,.panel-actions button{border:1px solid #ffffff25;background:#1b2b44;color:#d7e6fa;border-radius:8px;padding:9px;font-size:11px}.panel-section button{width:100%;margin-top:5px}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.panel-actions a{grid-column:span 2;text-align:center;padding:10px;color:#a1b4d2;font-size:11px}.panel-note{font-size:10px;line-height:1.6;color:#798da9;margin-top:12px}
#enemy-intent,#combat-status{font-size:12px;color:#cbdcf3;line-height:1.6}#enemy-intent{color:#ffce70}#room-toggle{position:fixed;left:12px;bottom:14px;z-index:35;border:1px solid #7df8;background:#102340df;border-radius:8px;padding:9px 14px;font-size:12px}#mobile-settings{display:none;position:fixed;right:12px;top:104px;z-index:20}#mobile-settings button{border:1px solid #fff4;background:#102340c9;border-radius:7px;padding:7px}
body.mob #mobile-settings{display:block}body.mob #help{display:none}body.mob #room-toggle{bottom:auto;top:104px}
body.panel-hidden #menu,body.panel-hidden #dev,body.panel-hidden #net,body.panel-hidden #ask,body.panel-hidden #msg,body.panel-hidden #tut,body.panel-hidden #hud,body.panel-hidden #cap,body.panel-hidden #c2,body.panel-hidden #help{right:0!important}body.panel-hidden #ms2{right:16px!important}
#c2,#cap,#ms{pointer-events:none}#c2{font-size:clamp(22px,3vw,32px)}#cap{font-size:clamp(17px,2vw,24px);line-height:1.4}#ms2{line-height:1.6}
@media(min-width:1050px){body:not(.mob) #controls-panel{display:block}body:not(.mob) #menu,body:not(.mob) #dev,body:not(.mob) #net,body:not(.mob) #ask,body:not(.mob) #msg,body:not(.mob) #tut{right:var(--panel)}body:not(.mob) #hud,body:not(.mob) #cap,body:not(.mob) #c2,body:not(.mob) #help{right:var(--panel)}body:not(.mob) #ms2{right:calc(var(--panel) + 16px)}body:not(.mob) #help{font-size:11px;color:#b5c7df;opacity:.7;bottom:8px;padding:0 120px}body:not(.mob) #ms{right:calc(var(--panel) + 12%);left:12%}}
@media(max-width:600px){#net{padding-top:12px;gap:5px}#net h2{font-size:19px}#net .dv{padding:8px 10px;font-size:12px}#nbig{font-size:30px}#list{grid-template-columns:repeat(2,1fr)!important;max-height:60vh;overflow-y:auto;margin-top:95px}.it{font-size:12px!important;min-height:75px!important}#menu.sg #onbtn{top:40px}.nm{font-size:10px}#hud{padding:8px}#c2{top:26%}}