html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:Impact,'Arial Black',sans-serif;color:#fff;user-select:none}
canvas{position:fixed;inset:0;width:100%;height:100%}
.hide{display:none!important}
#hud{position:fixed;top:2vh;left:2vw;right:2vw;display:flex;align-items:flex-start;gap:2vw}
.bar{flex:1}.bar.r{text-align:right}
.name{font-size:3vh;letter-spacing:.1em;text-shadow:2px 2px 0 #000;font-style:italic}
.hp{position:relative;height:3.2vh;background:#300;border:3px solid #eee;transform:skewX(-20deg);box-shadow:0 0 10px #000;overflow:hidden}
.bar.r .hp{transform:skewX(20deg)}
.hp>div{position:absolute;top:0;bottom:0;right:0;left:0}
.bar.r .hp>div{left:auto}
.fill{background:linear-gradient(#fff36b,#f2b705 60%,#c78400)}.dmg{background:#e11}
.bar.l .hp>div{left:auto;right:0}
.meter{height:1vh;margin-top:.6vh;background:#123;border:2px solid #9cf}.meter div{height:100%;background:linear-gradient(90deg,#08f,#0ff);width:0}
.bar.r .meter div{margin-left:auto}
.wins{font-size:3vh;color:#ffd600;height:3vh}
#timer{font-size:7vh;min-width:12vh;text-align:center;text-shadow:3px 3px 0 #000;color:#fff;border:3px solid #eee;background:rgba(0,0,0,.4);padding:0 1vh}
#big{position:fixed;top:32%;width:100%;text-align:center;font-size:14vh;font-style:italic;color:#ffd600;-webkit-text-stroke:3px #000;text-shadow:0 0 30px #f60,6px 6px 0 #900;pointer-events:none;transition:transform .15s}
#spec{position:fixed;top:22%;width:100%;text-align:center;font-size:5vh;color:#0ff;-webkit-text-stroke:2px #000;text-shadow:0 0 20px #08f;font-style:italic}
.scr{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(transparent 30%,rgba(0,0,0,.85))}
h1{margin:0;text-align:center;font-style:italic;line-height:.9}h1 span{display:block;font-size:12vh;color:#ffd600;-webkit-text-stroke:3px #000;text-shadow:0 0 40px #f80}
h1 b{display:block;font-size:16vh;color:#ff3d00;-webkit-text-stroke:3px #000;text-shadow:0 0 40px #f00}
#menu div{font-size:5vh;color:#aaa;text-align:center;margin:1vh}#menu div.on{color:#ffd600;text-shadow:0 0 15px #f80}
.help{font-family:monospace;font-size:1.8vh;text-align:center;background:rgba(0,0,0,.6);padding:1vh 2vw}
h2{font-size:8vh;font-style:italic;color:#ffd600;-webkit-text-stroke:2px #000;margin:2vh}
#select{justify-content:flex-start}
#grid{display:grid;grid-template-columns:repeat(11,10vh);gap:1vh}
.cell{height:11vh;position:relative;border:3px solid #444;background:linear-gradient(160deg,#333,#111);overflow:hidden;font-size:1.5vh;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.5vh}
.cell i{position:absolute;left:50%;top:18%;width:6vh;height:3.2vh;margin-left:-3vh;border-radius:3vh 3vh 0 0}
.cell u{position:absolute;left:50%;top:38%;width:6vh;height:6vh;margin-left:-3vh;border:1vh solid #cf0;box-sizing:border-box}
.cell.p0{border-color:#29f;box-shadow:0 0 20px #29f inset}.cell.p1{border-color:#f33;box-shadow:0 0 20px #f33 inset}.cell.p0.p1{border-color:#c3f}
#pinfo{position:fixed;bottom:3vh;left:3vw;right:3vw;display:flex;justify-content:space-between;font-size:2.4vh;text-shadow:2px 2px 0 #000}
#p0i{color:#6bf}#p1i{color:#f77;text-align:right}#pinfo b{font-size:5vh;display:block}
#end p{font-size:3vh}
#load{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:6vh;background:#000}

#login{background:radial-gradient(#1a2230,#000);z-index:5}#lf{display:flex;flex-direction:column;gap:1.5vh;width:min(420px,85vw);margin-top:3vh;font-family:Arial,sans-serif}
#lf p{text-align:center;font-size:2.4vh;margin:0}#lf input{font-size:2.6vh;padding:1.2vh;border:2px solid #ffd600;background:#111;color:#fff;border-radius:4px}
#lf button{font-family:Impact,sans-serif;font-size:3.4vh;padding:1vh;background:#ffd600;color:#000;border:0;border-radius:4px;cursor:pointer}#lmsg{color:#ff6b6b;text-align:center;font-size:2.2vh;min-height:3vh}
#who{position:fixed;bottom:1vh;right:1vw;z-index:6;font-family:Arial;font-size:1.8vh;background:rgba(0,0,0,.6);padding:.6vh 1vw;border-radius:4px}#who button{margin-left:.6vw;cursor:pointer}

html,body{touch-action:none;-webkit-text-size-adjust:100%;overscroll-behavior:none;position:fixed;inset:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
input{touch-action:manipulation;user-select:text;-webkit-user-select:text;font-size:16px!important}
#hud{top:max(2vh,env(safe-area-inset-top));left:max(2vw,env(safe-area-inset-left));right:max(2vw,env(safe-area-inset-right))}
#who{bottom:max(1vh,env(safe-area-inset-bottom));right:max(1vw,env(safe-area-inset-right))}
#menu div{cursor:pointer;padding:1vh 4vw}.cell{cursor:pointer}#end{cursor:pointer}
#touch{position:fixed;inset:0;z-index:4;pointer-events:none}
#joy{position:absolute;left:max(4vw,env(safe-area-inset-left));bottom:max(5vh,env(safe-area-inset-bottom));width:34vh;height:34vh;border-radius:50%;background:rgba(255,255,255,.12);border:3px solid rgba(255,255,255,.35);pointer-events:auto;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:14vh;height:14vh;margin:-7vh;border-radius:50%;background:rgba(255,214,0,.7);border:3px solid #fff}
#btns{position:absolute;right:max(3vw,env(safe-area-inset-right));bottom:max(4vh,env(safe-area-inset-bottom));width:46vh;height:42vh;pointer-events:none}
.tb{position:absolute;width:16vh;height:16vh;border-radius:50%;border:3px solid #fff;font-family:Impact,sans-serif;font-size:2.4vh;color:#fff;pointer-events:auto;touch-action:none;opacity:.8;-webkit-user-select:none}
.tb.on{transform:scale(.9);opacity:1;filter:brightness(1.5)}
.tb.p{right:18vh;bottom:0;background:#c62828}.tb.k{right:0;bottom:9vh;background:#1565c0}.tb.t{right:18vh;bottom:18vh;background:#ef6c00}.tb.s{right:0;bottom:27vh;background:#00838f;width:14vh;height:14vh}.tb.b{right:36vh;bottom:2vh;background:#455a64;width:13vh;height:13vh}
#rot{display:none;position:fixed;inset:0;z-index:20;background:#000;color:#ffd600;font-size:6vw;align-items:center;justify-content:center;text-align:center;line-height:1.6}
@media (orientation:portrait) and (pointer:coarse){#rot{display:flex}}
@media (pointer:coarse){h1 span{font-size:10vh}h1 b{font-size:13vh}#menu div{font-size:7vh}.help{display:none}#grid{grid-template-columns:repeat(6,13vh)}.cell{height:13vh;font-size:2vh}#pinfo{font-size:2.6vh}#lf{margin-top:1vh;gap:1vh}#lf button{padding:1.5vh}#login h1 span{font-size:7vh}#login h1 b{font-size:9vh}}
#err{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center;text-align:center;padding:5vw;font-family:Arial;font-size:4vh;color:#ffd600}
@media (pointer:coarse){h1 span,h1 b{-webkit-text-stroke:1px #000}#who{top:max(1vh,env(safe-area-inset-top));bottom:auto}#lf p{font-size:3.5vh}#lf button{font-size:5vh}}