:root{--gold:#e8c66a;--ink:#f4ecd6;--bg:#0b0d12;--red:#c0392b;--hp:#3fbf5a;--pw:#3d8bff}
*{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 #6b5a4a;border-radius:6px;padding:9px 14px;cursor:pointer}
button:hover:not(:disabled){background:#3a3040;border-color:var(--gold)}button:disabled{opacity:.45;cursor:default}
button.big{background:#6b3a22;border-color:var(--gold);font-size:1.12em;padding:12px 20px}button.big:hover:not(:disabled){background:#8a4a2c}
button.alt{background:#23304a}button.danger{background:#4a1c1c}button.sm{padding:3px 9px;font-size:.8em}
input{font:inherit;color:var(--ink);background:#15101c;border:1px solid #6b5a4a;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,6,12,.82);z-index:30;padding:10px;overflow:auto}
#hud .overlay{background:rgba(40,0,0,.5)}
.card{background:linear-gradient(#1d1722,#121018);border:1px solid #6b5a4a;border-radius:12px;padding:22px 26px;max-width:520px;width:100%;box-shadow:0 0 40px #000}.card.wide{max-width:700px}
.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:.8em;line-height:1.4}
@media(max-width:560px){.classes{flex-direction:column}.card{padding:16px}}
.bar{position:relative;height:16px;background:#14101a;border:1px solid #6b5a4a;border-radius:4px;overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;width:100%;transition:width .15s}.bar.hp i{background:linear-gradient(#5fe07c,#2f9a47)}.bar.pw i{background:linear-gradient(#6aa8ff,#2c63c9)}
.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:15px;text-shadow:0 1px 2px #000}
#pf,#tf{position:fixed;top:10px;width:210px;background:rgba(14,11,20,.78);border:1px solid #6b5a4a;border-radius:8px;padding:6px 8px;z-index:5;text-shadow:0 1px 2px #000;font-size:.95em}
#pf{left:10px}#tf{left:230px}#tf.hostile{border-color:#c0392b}#tf.friend{border-color:#3fbf5a}
.nm b{color:var(--gold)}.nm span{color:#cdbfa3;font-size:.85em}
#party{position:fixed;left:10px;top:92px;width:170px;z-index:5}
#party .pm{background:rgba(14,11,20,.78);border:1px solid #6b5a4a;border-radius:6px;padding:3px 6px;margin-bottom:4px;font-size:.8em;cursor:pointer}#party .pm.sel{border-color:var(--gold)}#party .pm .bar{height:9px;margin-top:2px}
#topr{position:fixed;right:10px;top:10px;z-index:5;text-align:right;text-shadow:0 1px 3px #000}
#minimap{border:1px solid #6b5a4a;background:rgba(10,8,14,.6);border-radius:80px;width:160px;height:160px;display:block;margin-left:auto}
#zone{margin-top:4px;color:var(--gold)}#room{font-size:.85em;margin-top:3px}#gold{margin-top:3px;font-size:.95em}
#qtrack{position:fixed;right:10px;top:250px;width:250px;z-index:5;font-size:.85em;text-shadow:0 1px 3px #000}
#qtrack .q{background:rgba(14,11,20,.7);border-left:3px solid var(--gold);padding:4px 8px;margin-bottom:5px;border-radius:0 6px 6px 0}#qtrack .q b{color:var(--gold)}#qtrack .q.ready{border-color:#6fe08a}
#log{position:fixed;left:10px;bottom:150px;width:300px;max-height:150px;overflow:hidden;z-index:5;font-size:.8em;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end}
#log div{background:rgba(10,8,14,.55);padding:2px 7px;margin-top:2px;border-radius:4px;animation:lf 12s forwards}@keyframes lf{0%,85%{opacity:1}100%{opacity:0}}
#log .c{color:#9fdcff}#log .g{color:#ffd86a}#log .r{color:#ff9d8a}
#banner{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:8;font-size:2em;color:var(--gold);text-shadow:0 2px 8px #000,0 0 18px #000;text-align:center;pointer-events:none;animation:bn 3.2s forwards;white-space:nowrap}
@keyframes bn{0%{opacity:0;transform:translateX(-50%) scale(.8)}12%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
#bar{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;width:min(430px,98vw)}
#hotbar{display:flex;gap:6px;justify-content:center}
.slot{position:relative;width:64px;height:64px;background:linear-gradient(#2a2230,#16111c);border:2px solid #6b5a4a;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;cursor:pointer;overflow:hidden;padding:0}
.slot .k{position:absolute;left:4px;top:2px;font-size:11px;color:#ddd;text-shadow:0 1px 2px #000}.slot .c{position:absolute;right:4px;bottom:2px;font-size:11px;color:#8fc4ff;text-shadow:0 1px 2px #000}
.slot .cd{position:absolute;inset:0;background:rgba(0,0,0,.65);transform-origin:bottom;transform:scaleY(0);pointer-events:none}.slot .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;text-shadow:0 1px 3px #000;pointer-events:none}
.slot.nopow{border-color:#2a4f8a;filter:saturate(.5)}.slot.flash{border-color:#fff}
.slot .n{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:9px;color:#d9ccb0;text-shadow:0 1px 2px #000;line-height:1}
#xpbar{position:relative;height:10px;margin-top:6px;background:#14101a;border:1px solid #6b5a4a;border-radius:5px;overflow:hidden}#xpbar i{display:block;height:100%;width:0;background:linear-gradient(#c58cff,#7a45c9)}
#xpbar span{position:absolute;inset:0;text-align:center;font-size:9px;line-height:9px;text-shadow:0 1px 2px #000}
#sidebtns{position:fixed;right:10px;bottom:10px;z-index:6;display:flex;flex-direction:column;gap:5px}
#quick{position:fixed;right:10px;bottom:70px;z-index:9;background:#17121d;border:1px solid #6b5a4a;border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:4px}
#qlog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;max-height:80vh;overflow:auto}
#qlog .q{margin:8px 0;padding:6px 8px;border-left:3px solid var(--gold);background:#00000033}
#flash{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 30px #c0000000;transition:box-shadow .25s;z-index:4}#flash.hit{box-shadow:inset 0 0 120px 30px #c0000077}
#dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;max-width:480px;max-height:84vh;overflow:auto}
#dlg h3{margin:.1em 0;color:var(--gold)}#dlg .q{margin:10px 0;padding:8px 10px;background:#00000040;border-radius:8px;border-left:3px solid var(--gold)}#dlg .q.ready{border-color:#6fe08a}#dlg .q p{margin:4px 0}#dlg .rw{color:#cdbfa3;font-size:.85em}
#plates{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.plate{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:12px;text-shadow:0 1px 3px #000,0 0 3px #000;white-space:nowrap}
.plate .b{width:54px;height:5px;margin:2px auto 0;background:#00000099;border:1px solid #000;border-radius:3px;overflow:hidden}.plate .b i{display:block;height:100%;background:#3fbf5a}.plate.mob .b i{background:#d8402f}
.plate .s{color:#fff;background:#000a;border-radius:6px;padding:1px 6px;margin-bottom:2px;font-style:italic}
#floats{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.fl{position:absolute;font-weight:bold;font-size:16px;text-shadow:0 1px 3px #000,0 0 4px #000;transform:translate(-50%,-50%);white-space:nowrap}.fl.crit{font-size:24px}
#touch{position:fixed;inset:0;z-index:7;pointer-events:none}#joyzone{position:absolute;left:0;bottom:0;width:42%;height:55%;pointer-events:auto}
#joybase{position:absolute;width:110px;height:110px;border-radius:50%;background:#ffffff22;border:2px solid #fff6;margin:-55px 0 0 -55px}#joyknob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#ffffffaa}
#touch button{position:absolute;pointer-events:auto;border-radius:50%;width:58px;height:58px;padding:0;font-size:10px;background:#3a2f45dd}
#tt{right:20px;bottom:150px}#ti{right:88px;bottom:150px}#tj{right:20px;bottom:218px}#tp{right:88px;bottom:218px}
@media(pointer:coarse){.slot{width:56px;height:56px}#qtrack,#log{display:none}#sidebtns{bottom:80px}#party{top:90px}}
@media(max-width:700px){#tf{left:10px;top:62px;width:170px}#pf{width:170px}#party{top:120px}#minimap{width:110px;height:110px}#qtrack{display:none}}
#tf.auto{box-shadow:0 0 0 2px #ffb347,0 0 12px #ff8a1f}#tf.auto::after{content:"Auto-attack";position:absolute;right:8px;top:4px;font-size:.7em;color:#ffb347}#tf{position:fixed}
.w.hl{background:#ffd54a;color:#1a1208;border-radius:3px;box-shadow:0 0 0 2px #ffd54a;text-shadow:none}

#phint{position:fixed;left:50%;bottom:190px;transform:translateX(-50%);background:#000c;border:1px solid #c08bff;color:#ffe9a8;padding:8px 18px;border-radius:20px;z-index:20;cursor:pointer;box-shadow:0 0 14px #9a6bff88}
#pmenu{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#000a;z-index:60}
#pmenu .card{background:#1a1424;border:1px solid #9a6bff;border-radius:12px;padding:18px 22px;max-width:420px;color:#eee;text-align:center}
#pmenu h3{margin:0 0 6px;color:#d9b8ff}
#pmenu button{display:block;width:100%;margin:8px 0;padding:10px;border-radius:8px;border:1px solid #7a5ac8;background:#2a2040;color:#fff;cursor:pointer;font-size:1em}
#pmenu button small{display:block;color:#b8a8d8;margin-top:2px}
#pmenu button.sm{background:#222;border-color:#555;padding:6px}
#travel{position:fixed;left:0;top:0;right:0;bottom:0;background:#05030c;display:flex;align-items:center;justify-content:center;color:#d9c8ff;font:1.6em Georgia,serif;z-index:100;animation:tin .6s}
@keyframes tin{from{opacity:0}to{opacity:1}}

#tact{display:flex;gap:6px;margin-top:6px;pointer-events:auto}#tact button{flex:1;padding:4px 6px;border-radius:6px;border:1px solid #7a6a3a;background:#2a2418;color:#ffe9a8;cursor:pointer;font-size:.85em}
#duelq{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:#1a1424e8;border:1px solid #ffb347;color:#fff;padding:10px 16px;border-radius:10px;z-index:40;text-align:center}
#duelq button{margin:6px 4px 0;padding:5px 12px;border-radius:6px;border:1px solid #ffb347;background:#2a2418;color:#ffe9a8;cursor:pointer}
#gold.outlaw{color:#ff6a5a}

#jail{display:none;position:fixed;top:54px;left:50%;transform:translateX(-50%);z-index:60;max-width:90vw;text-align:center;background:rgba(40,16,12,.9);color:#ffd9a0;border:1px solid #b5603a;border-radius:8px;padding:6px 14px;font:600 14px/1.3 sans-serif;pointer-events:none}
#tf{z-index:7}#party{z-index:5;top:170px}