:root{--gold:#e8c66a;--ink:#f2e6c8;--bg:#0c0a10;--red:#c0392b;--az:#3d8bff;--ve:#3ddc7a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Georgia,'Times New Roman',serif;overflow:hidden;touch-action:none;user-select:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
.muted{color:#b9ab8f}
button{font:inherit;color:var(--ink);background:#2a2230;border:1px solid #5b4a6e;border-radius:6px;padding:9px 14px;cursor:pointer}
button:hover:not(:disabled){background:#3a2f45;border-color:var(--gold)}
button:disabled{opacity:.45;cursor:default}
button.big{background:#6b2a22;border-color:var(--gold);font-size:1.15em;padding:12px 20px}
button.big:hover:not(:disabled){background:#8a362c}
button.alt{background:#23304a}button.danger{background:#4a1c1c}
input{font:inherit;color:var(--ink);background:#15101c;border:1px solid #5b4a6e;border-radius:6px;padding:9px 10px;width:160px}
#code{width:90px;text-transform:uppercase;text-align:center;letter-spacing:.2em}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,5,12,.82);z-index:20;padding:10px;overflow:auto}
.overlay.hidden{display:none}
#hud .overlay{background:rgba(40,0,0,.55);pointer-events:none}
.card{background:linear-gradient(#1b1424,#110c18);border:1px solid #5b4a6e;border-radius:12px;padding:22px 26px;max-width:520px;width:100%;box-shadow:0 0 40px #000}
.card.wide{max-width:680px}
.card h1{margin:.2em 0;font-size:2.1em;letter-spacing:.04em}.card h1 span{color:var(--gold)}
.card h2{margin:.2em 0}
.topnav a{color:#9d8fb5;text-decoration:none;font-size:.9em}
.row{margin:12px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.classes{flex-wrap:nowrap}
.cls{flex:1;text-align:left;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cls small{color:#b9ab8f;line-height:1.25}.cls.sel{border-color:var(--gold);background:#3d2e1f;box-shadow:0 0 12px #e8c66a55}
.status{color:#8fd18f;min-height:1.3em}.keys{font-size:.82em;line-height:1.4}
@media(max-width:560px){.classes{flex-direction:column}.card{padding:16px}}
#topl{position:fixed;left:12px;top:10px;text-shadow:0 1px 3px #000;font-size:.95em;z-index:5}
#lvname{font-size:1.25em;color:var(--gold)}#party{margin-top:4px;pointer-events:auto}#party button{padding:3px 8px;font-size:.8em}
#minimap{position:fixed;right:10px;top:10px;border:1px solid #5b4a6e;background:rgba(10,8,14,.6);border-radius:6px;z-index:5;width:168px;height:168px}
#cross{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border:1px solid #fff9;border-radius:50%;z-index:4;pointer-events:none}
#hitm{position:fixed;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:4;opacity:0;pointer-events:none;background:
 linear-gradient(45deg,transparent 45%,#fff 47%,#fff 53%,transparent 55%),linear-gradient(-45deg,transparent 45%,#fff 47%,#fff 53%,transparent 55%);transition:opacity .15s}
#toasts{position:fixed;left:50%;bottom:138px;transform:translateX(-50%);text-align:center;z-index:6;pointer-events:none;width:90%}
#toasts div{display:inline-block;background:rgba(10,6,16,.75);border:1px solid #5b4a6e;border-radius:6px;padding:5px 12px;margin:2px;font-size:.95em;animation:fade 4.5s forwards}
@keyframes fade{0%,80%{opacity:1}100%{opacity:0}}
#vitals{position:fixed;left:12px;bottom:12px;width:250px;z-index:5}
#vitals .row{margin:3px 0;gap:6px;flex-wrap:nowrap}#vitals b{width:24px;font-size:.8em;color:#c9b88d}
.bar{position:relative;flex:1;height:16px;background:#1a1420;border:1px solid #5b4a6e;border-radius:4px;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:100%;transition:width .12s}
.bar span{position:absolute;inset:0;text-align:center;font-size:.75em;line-height:16px;text-shadow:0 1px 2px #000}
.hp i{background:linear-gradient(#e0483a,#8c1e17)}.az i{background:linear-gradient(#5aa0ff,#1f55b3)}.ve i{background:linear-gradient(#58e88c,#1d8a47)}
#keysrow{min-height:20px;font-size:.85em}#keysrow span{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:10px;border:1px solid #fff6;color:#111;font-weight:bold}
#wslots{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.ws{min-width:84px;padding:5px 8px;text-align:center;background:rgba(14,10,20,.8);border:1px solid #3d3150;border-radius:6px;font-size:.78em;opacity:.55}
.ws.own{opacity:.95}.ws.sel{border-color:var(--gold);box-shadow:0 0 10px #e8c66a88;opacity:1}.ws b{display:block;color:var(--gold)}.ws small{color:#9bb7ff}
#flash{position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(transparent 45%,rgba(190,0,0,.7));opacity:0}
#bossbar{position:fixed;left:50%;top:14px;transform:translateX(-50%);width:min(420px,60%);text-align:center;z-index:5}#bossbar .bar{height:14px}#bossfill{background:linear-gradient(#c43,#611)}
#touch{position:fixed;inset:0;z-index:8;pointer-events:none}
#joyzone{position:absolute;left:0;top:25%;bottom:0;width:42%;pointer-events:auto}#lookzone{position:absolute;right:0;top:0;bottom:0;width:58%;pointer-events:auto}
#joybase{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:#fff2;border:2px solid #fff5}#joyknob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#fffb}
#touch button{position:absolute;pointer-events:auto;border-radius:50%;width:74px;height:74px;padding:0;font-size:.7em;background:rgba(80,40,30,.7);z-index:2}
#tfire{right:20px;bottom:30px;width:92px!important;height:92px!important;background:rgba(150,40,30,.75)!important}#tjump{right:125px;bottom:26px}#twpn{right:20px;bottom:135px}#tspr{right:105px;bottom:105px}

#tgyro{left:50%;margin-left:-30px;bottom:24px;width:60px!important;height:60px!important}#tgyro.on{background:rgba(53,130,255,.8)!important}