*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hide{display:none!important}
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,#2a3f7a,#0b0f1f 70%);z-index:50;overflow:auto;padding:14px}
.lbox{width:min(760px,100%);text-align:center}
h1{font-size:clamp(28px,6vw,52px);letter-spacing:4px;margin:6px 0;background:linear-gradient(#fff6c8,#e0a526);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px #e0a52655}
.sub{opacity:.75;margin:0 0 12px}
input{width:100%;max-width:360px;padding:11px 14px;border-radius:10px;border:1px solid #ffffff33;background:#0008;color:#fff;font-size:16px;margin:6px 0}
#classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin:10px 0}
.cl{padding:9px 6px;border-radius:12px;background:#ffffff10;border:2px solid transparent;cursor:pointer}
.cl.on{border-color:#ffd24a;background:#ffd24a22}
.cl i{display:block;width:26px;height:26px;border-radius:50%;margin:0 auto 5px;box-shadow:0 0 10px currentColor}
.cl b{display:block;font-size:13px}.cl small{opacity:.65;font-size:11px}
#cdesc{min-height:38px;font-size:13px;opacity:.85;margin-bottom:8px}
button{font:inherit;color:#fff;cursor:pointer;border:0}
.big,.adm button,#cont button{padding:12px 22px;border-radius:12px;background:linear-gradient(#ffcf4a,#d4880f);color:#231300;font-weight:800;font-size:16px;margin:6px}
.adm{margin-top:14px;padding-top:12px;border-top:1px solid #ffffff22}
.adm button{background:linear-gradient(#b98bff,#6a2ad9);color:#fff}
#cont button{background:linear-gradient(#6affb0,#1d9e5c);color:#012}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud>*{pointer-events:auto}
#topl{position:absolute;left:10px;top:max(10px,env(safe-area-inset-top));width:min(290px,48vw);background:#0009;border-radius:12px;padding:8px 10px;border:1px solid #ffffff22}
#pname2{font-weight:800;font-size:15px}#ptitle{font-size:12px;color:#ffd24a;margin-bottom:4px}
.bar{position:relative;height:15px;background:#0008;border-radius:8px;margin:3px 0;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;transition:width .15s}
.hp i{background:linear-gradient(#ff6b6b,#b31212)}.mp i{background:linear-gradient(#6bb5ff,#1245b3)}.xp i{background:linear-gradient(#ffe58a,#c99400)}
.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:15px;text-shadow:0 1px 2px #000}
#info{font-size:12px;opacity:.9;margin-top:3px}
#topr{position:absolute;right:10px;top:max(10px,env(safe-area-inset-top));text-align:center}
#mini{width:150px;height:150px;border-radius:50%;border:3px solid #d9b25a;background:#0008;display:block}
#zone{font-size:12px;margin-top:4px;background:#0009;border-radius:8px;padding:3px 8px;max-width:170px}
#menu{position:absolute;right:176px;top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100vw - 500px)}
@media (max-width:760px){#menu{right:auto;left:10px;top:175px;flex-direction:column;max-width:none}}
#menu button{width:52px;height:48px;border-radius:12px;background:#000a;border:1px solid #ffffff2a;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#menu b{font-size:8px;font-weight:600;opacity:.8}
#log{position:absolute;left:10px;bottom:190px;width:min(340px,60vw);font-size:12px;pointer-events:none}
#log div{background:#0007;border-radius:6px;padding:2px 7px;margin-top:2px;width:fit-content;max-width:100%}
#talk{position:absolute;left:50%;bottom:210px;transform:translateX(-50%);padding:10px 18px;border-radius:20px;background:#ffd24a;color:#231300;font-weight:800;cursor:pointer}
#skills{position:absolute;right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:250px;height:230px}
#skills button{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4c5a86,#141a2e);border:2px solid #d9b25a;font-size:12px;font-weight:700;overflow:hidden}
#skills kbd{position:absolute;bottom:2px;left:0;right:0;font-size:9px;opacity:.7;font-family:inherit}
.sk{width:62px;height:62px}.sk em{font-style:normal;font-size:10px;line-height:1.05;display:block;padding:0 4px}
.sk u{position:absolute;inset:0;background:#000b;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:18px}
.sk u:empty{display:none}
#batk{width:92px;height:92px;right:0;bottom:0;font-size:36px!important;background:radial-gradient(circle at 40% 35%,#c9433a,#4a0d0d)!important}
#s0{right:100px;bottom:0}#s1{right:108px;bottom:72px}#s2{right:68px;bottom:136px}#s3{right:0;bottom:104px;width:70px!important;height:70px!important;border-color:#ff7a1a!important}
.sm{width:48px;height:48px;font-size:20px!important}
#bpot{right:180px;bottom:60px}#bmount{right:176px;bottom:118px}
#potn{position:absolute;top:2px;right:6px;font-size:10px}
#joy{position:absolute;left:24px;bottom:max(24px,env(safe-area-inset-bottom));width:140px;height:140px;border-radius:50%;background:#ffffff14;border:2px solid #ffffff33;display:none}
#knob{position:absolute;left:45px;top:45px;width:50px;height:50px;border-radius:50%;background:#ffffff55}
@media (pointer:coarse){#joy{display:block}#skills kbd{display:none}}
#panel{position:fixed;inset:0;background:#0007;z-index:30;display:flex;align-items:center;justify-content:center;padding:10px}
#pin{width:min(640px,100%);max-height:88vh;overflow:auto;background:linear-gradient(#1e2440,#11152a);border:2px solid #d9b25a;border-radius:16px;padding:14px 16px;box-shadow:0 10px 40px #000}
#pin h2{margin:0 0 4px;font-size:20px;color:#ffd24a}#pin h3{margin:12px 0 6px;font-size:15px}
#pin .x{float:right;background:#ffffff22;border-radius:8px;padding:4px 10px}
#pin table{width:100%;border-collapse:collapse;font-size:13px}#pin td,#pin th{padding:5px 4px;border-bottom:1px solid #ffffff14;text-align:left}
.b{display:inline-block;padding:6px 10px;border-radius:8px;background:#3a4a86;margin:2px;font-size:13px}
.b.g{background:#1d9e5c}.b.r{background:#9e1d2a}.b.y{background:#c99400;color:#1a1000}.b.off{opacity:.35;pointer-events:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px;border-bottom:1px solid #ffffff14;font-size:13px}
.say{background:#0006;border-radius:10px;padding:10px;margin:8px 0;font-style:italic}
.muted{opacity:.6;font-size:12px}
#toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:40;pointer-events:none;text-align:center}
#toast div{background:#000c;border:1px solid #d9b25a;padding:9px 18px;border-radius:12px;margin:5px;font-weight:700;animation:tf 3s forwards}
#toast div.big{font-size:22px;color:#ffd24a;border-width:2px}
@keyframes tf{0%{opacity:0;transform:translateY(10px)}10%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#fx{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.dmg{position:absolute;font-weight:900;font-size:17px;text-shadow:0 2px 3px #000,0 0 2px #000;white-space:nowrap}
.dmg.c{font-size:24px;color:#ffd24a}
#dead{position:fixed;inset:0;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#400a;font-size:40px;font-weight:900;text-align:center}
#s4{right:176px;bottom:176px;border-color:#ff4ad9!important;background:radial-gradient(circle at 40% 35%,#a03ad9,#2a0a3a)!important}
#hudq{font-size:11px;color:#ffe27a;margin-top:4px;line-height:1.25}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:6px;background:#ffffff1a;margin-left:4px}
#creator{margin:6px auto 8px;max-width:620px;text-align:left}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0;font-size:12px}
.crow span{width:62px;opacity:.75}
.sw{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;border:2px solid #ffffff33;cursor:pointer;font-style:normal;font-size:11px;padding:0 7px;color:#fff}
.sw.on{border-color:#ffd24a;box-shadow:0 0 8px #ffd24a}