*{box-sizing:border-box}html,body{margin:0;background:#090c0d;color:#f8f7ee;font-family:Onest,Manrope,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}body{min-height:100dvh;display:flex;justify-content:center}.lab{width:min(100%,500px);background:#111516;min-height:100dvh;display:flex;flex-direction:column}header{display:flex;align-items:center;gap:12px;padding:14px 18px 8px}header a{text-decoration:none;color:#f8f7ee;font-size:24px}header b{font-size:30px;font-weight:900;letter-spacing:-2px}header b span{color:#ceff49;font-size:25px;vertical-align:top}header small{font-size:9px;letter-spacing:1px;color:#a7ada8;margin-left:auto}header button{border:1px solid #414749;border-radius:50%;width:36px;height:36px;background:#232829}.hud{display:flex;justify-content:space-between;align-items:center;padding:0 20px 8px}.hud strong{color:#ceff49;font-size:48px;letter-spacing:-2px;font-weight:900}.hud div{display:flex;gap:14px;align-items:center}.hud time{font-size:18px;font-weight:800}#hearts{color:#ff4d58;white-space:nowrap;font-size:23px}.xp{height:5px;background:#303738;margin:0 20px 12px;border-radius:10px;overflow:hidden}.xp i{display:block;width:0%;height:100%;background:#24d9f5;transition:width .25s}.arena{position:relative;flex:1;min-height:440px;max-height:850px;aspect-ratio: .64;overflow:hidden;background:#303639 url('/art-2d/arena-v1.png') center/100% 100%;touch-action:none}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.screen{position:absolute;top:8%;width:31%;pointer-events:none;text-align:center;transform:rotate(-8deg);text-shadow:0 1px 3px #000}.screen b{display:block;font-size:clamp(9px,2.9vw,14px);font-weight:900}.screen span{font-size:clamp(7px,2vw,10px);display:block;margin-top:2px;color:#c9ccc5}.screen-left{left:7%}.screen-right{right:7%;top:10%;transform:rotate(10deg)}#message{position:absolute;top:29%;left:10%;width:80%;text-align:center;font-size:12px;font-weight:800;text-shadow:0 2px 5px #000;pointer-events:none;transition:opacity .2s}#joystick{position:absolute;left:18px;bottom:28px;width:94px;height:94px;border-radius:50%;border:1px solid #b0b9b855;background:#11151666;touch-action:none;display:grid;place-items:center}#joystick i{display:block;width:45px;height:45px;background:linear-gradient(#bdc3c2,#858e90);border:1px solid #d4d8d4;border-radius:50%;pointer-events:none;box-shadow:0 4px 10px #0006}.hint{position:absolute;bottom:10px;right:14px;color:#e6e8df;font-size:10px;text-shadow:0 2px 4px #000;pointer-events:none}footer{display:flex;gap:6px;padding:12px 14px 0}footer button{flex:1;border:1px solid #414b49;border-radius:22px;background:#242c2b;padding:10px 4px;font-size:11px;font-weight:800}footer button:first-child{background:#ceff49;color:#111516;border-color:#ceff49}.note{color:#a5ada8;font-size:10px;text-align:center;margin:10px 12px 14px}#overlay{position:absolute;inset:0;z-index:5;background:#101718c9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;backdrop-filter:blur(5px)}#overlay[hidden]{display:none}#overlay h1{font-size:38px;line-height:1;letter-spacing:-1.5px;margin:0 0 14px}#overlay p{font-size:14px;color:#c4ccc6;max-width:270px}#overlay button{border:0;border-radius:30px;padding:15px 30px;background:#ceff49;color:#111516;font-weight:900;margin-top:14px}:focus-visible{outline:3px solid #ceff49;outline-offset:3px}@media(min-width:650px){.lab{margin:20px 0;border-radius:22px;overflow:hidden;min-height:0;box-shadow:0 20px 70px #0008}.arena{height:640px;flex:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}