@font-face{font-family:Bebas;src:url(assets/Bebas.ttf)}@font-face{font-family:Teko;src:url(assets/Teko.ttf)}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Bebas,Impact,sans-serif;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%}
.hide{display:none!important}
button{font-family:Bebas,Impact,sans-serif;cursor:pointer}
#hud{position:fixed;top:max(1.5vh,env(safe-area-inset-top));left:2vw;right:2vw;display:flex;gap:2.5vw;align-items:center;pointer-events:none;font-size:clamp(26px,5.5vh,56px);text-shadow:3px 3px 0 #000,0 0 12px #000}
.hb{display:flex;align-items:center;gap:.25em}.hb.r{margin-left:auto}
.nut{width:1em;height:1em;background:radial-gradient(circle,#0000 28%,#ffd84a 30%,#c99a1c 62%,#0000 64%);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);display:inline-block}
.crt{width:.85em;height:.85em;background:#a5692e;border:.08em solid #5a3410;box-shadow:inset 0 0 0 .1em #c98a48;display:inline-block}
.lif{width:1em;height:.75em;background:#ffd400;border-radius:1em 1em .1em .1em;display:inline-block;box-shadow:inset 0 -.12em 0 #b38f00}
#hhelm{color:#ffd400}
#bossbar{position:fixed;bottom:4vh;left:20vw;right:20vw;text-align:center;font-size:4vh;text-shadow:2px 2px 0 #000}
.bh{height:2.6vh;border:3px solid #eee;background:#300;transform:skewX(-20deg)}#bfill{height:100%;background:linear-gradient(#ff7a5a,#d01010);width:100%;transition:width .3s}
#banner{position:fixed;top:30%;width:100%;text-align:center;font-size:clamp(40px,12vh,130px);color:#ffd400;-webkit-text-stroke:3px #000;text-shadow:0 0 30px #f60,6px 6px 0 #900;pointer-events:none;opacity:0;transition:opacity .3s,transform .3s;font-style:italic}
#banner small{display:block;font-size:.35em;color:#fff;-webkit-text-stroke:1px #000}
#toast{position:fixed;top:18%;width:100%;text-align:center;font-size:clamp(22px,5vh,48px);color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none;opacity:0;transition:opacity .25s}
.scr{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(0,0,0,.15),rgba(0,0,0,.75));text-align:center}
h1{margin:0;line-height:.85;font-style:italic;filter:drop-shadow(6px 6px 0 #000)}
h1 span{display:block;font-size:clamp(40px,9vh,110px);color:#fff;letter-spacing:.08em}
h1 b{display:block;font-size:clamp(80px,22vh,260px);background:linear-gradient(#fff36b,#ffb300 55%,#c25e00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:3px #2a1400}
h2{font-size:clamp(36px,9vh,90px);margin:0 0 2vh;color:#ffd400;text-shadow:4px 4px 0 #000;font-style:italic}
.big{font-size:clamp(26px,5vh,48px);padding:.25em 1.6em;margin:1.2vh;background:linear-gradient(#ffe14a,#f2a900);color:#1a1000;border:3px solid #1a1000;border-radius:.3em;box-shadow:0 6px 0 #6b4300,0 10px 20px #000;transform:skewX(-8deg)}
.big:active{transform:skewX(-8deg) translateY(4px);box-shadow:0 2px 0 #6b4300}
#csel{display:flex;align-items:center;gap:2vw;margin:3vh 0 1vh;font-size:clamp(28px,6vh,60px)}
#csel button{font-size:1em;background:rgba(0,0,0,.5);color:#ffd400;border:2px solid #ffd400;border-radius:.2em;width:1.6em}
#cname{min-width:7em;text-shadow:3px 3px 0 #000}#cname small{display:block;font-size:.4em;color:#ccc;font-family:Teko,sans-serif}
.help{font-family:Teko,sans-serif;font-size:clamp(16px,2.6vh,26px);color:#ddd;max-width:90vw;text-shadow:1px 1px 0 #000}
#mapui{position:fixed;inset:0;pointer-events:none}
#mapui button{pointer-events:auto}
#mapt{position:absolute;top:2vh;left:0;right:0;text-align:center;font-size:clamp(34px,8vh,80px);color:#ffd400;text-shadow:4px 4px 0 #000;font-style:italic}
#mapinfo{position:absolute;bottom:13vh;left:0;right:0;text-align:center;font-size:clamp(22px,4.5vh,44px);text-shadow:2px 2px 0 #000}
#mapinfo small{display:block;font-family:Teko,sans-serif;font-size:.6em;color:#ffe9a0}
#maphelp{position:absolute;top:11vh;left:0;right:0;text-align:center;font-family:Teko,sans-serif;font-size:clamp(15px,2.4vh,24px);color:#eee;text-shadow:1px 1px 0 #000}
#mapgo{position:absolute;bottom:2vh;left:50%;transform:translateX(-50%) skewX(-8deg)}
#mapback{position:absolute;top:2vh;left:2vw;font-size:clamp(16px,2.6vh,26px);background:rgba(0,0,0,.55);color:#fff;border:1px solid #888;border-radius:4px;padding:4px 10px}
#labels{position:fixed;inset:0;pointer-events:none}
.lab{position:absolute;transform:translate(-50%,-100%);font-size:clamp(14px,2.6vh,28px);text-shadow:2px 2px 0 #000,0 0 8px #000;white-space:nowrap;text-align:center;line-height:1}
.lab small{display:block;font-family:Teko,sans-serif;font-size:.7em;color:#ffd400}
.lab.lock{color:#aaa}
#rs{font-size:clamp(22px,4.5vh,44px);line-height:1.5;text-shadow:2px 2px 0 #000}#rs .stamp{display:inline-block;margin-top:1vh;padding:.1em .6em;border:4px solid #2fd35a;color:#2fd35a;transform:rotate(-8deg);font-size:1.2em}
#pbtn{position:fixed;top:max(1.5vh,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:22px;background:rgba(0,0,0,.5);color:#fff;border:1px solid #777;border-radius:6px;width:44px;height:40px}
#touch{position:fixed;inset:0;pointer-events:none}
#joy{position:absolute;left:5vw;bottom:5vh;width:min(36vw,170px);height:min(36vw,170px);border-radius:50%;background:radial-gradient(rgba(255,255,255,.14),rgba(255,255,255,.04));border:2px solid rgba(255,255,255,.35);pointer-events:auto;touch-action:none}
#knob{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:rgba(255,212,0,.8);box-shadow:0 0 12px #000}
#btns{position:absolute;right:4vw;bottom:5vh;display:flex;gap:4vw;align-items:flex-end;pointer-events:auto}
.tb{width:min(22vw,100px);height:min(22vw,100px);border-radius:50%;border:3px solid #fff;font-size:min(5.5vw,26px);color:#fff;text-shadow:1px 1px 0 #000;touch-action:none}
.tb.j{background:rgba(30,160,60,.75);margin-bottom:6vh}.tb.s{background:rgba(220,110,0,.75)}.tb.on{filter:brightness(1.6);transform:scale(.94)}
#fade{position:fixed;inset:0;background:#000;opacity:1;pointer-events:none;transition:opacity .45s}
#load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:6vh;color:#ffd400;background:#000}
#err{position:fixed;inset:10vh 10vw;background:#200;padding:4vh;font-family:Arial;font-size:18px;z-index:9}

.arr{position:absolute;bottom:3vh;font-size:clamp(26px,5vh,48px);width:1.8em;height:1.6em;background:rgba(0,0,0,.55);color:#ffd400;border:2px solid #ffd400;border-radius:.25em}#ml{left:4vw}#mr{right:4vw}
h1 span{font-size:min(9vh,11.5vw)}h1 b{font-size:min(22vh,27vw)}
#mapt{font-size:min(8vh,11vw);top:max(2vh,env(safe-area-inset-top))}
@media (max-aspect-ratio:1/1){#mapt{top:7vh}#maphelp{top:14vh}#pbtn{left:auto;right:2vw;top:calc(max(1.5vh,env(safe-area-inset-top)) + 56px);transform:none}#hud{font-size:30px;gap:4vw}#mapgo{font-size:22px;bottom:3.4vh}#mapinfo{bottom:12vh}.arr{font-size:26px}}
@media (max-aspect-ratio:1/1){#cname{min-width:5.2em;font-size:.8em}#csel{gap:3vw}}