html,body{touch-action:none;-webkit-user-select:none;user-select:none;color:#f4eedb;background:#10180f;height:100%;margin:0;font:600 14px/1.2 system-ui,sans-serif;overflow:hidden}canvas.view{display:block;position:fixed;inset:0}button,.btn,.link{font:inherit;color:inherit;cursor:pointer}.hud{pointer-events:none;position:fixed;inset:0}.hud>*{pointer-events:auto}.hud .bars{pointer-events:none;position:absolute;inset:0}.bar{background:#000a;border:1px solid #000;border-radius:2px;width:44px;height:6px;position:absolute;top:-12px;left:-22px}.bar i{border-radius:1px;height:100%;display:block}.bar.self i{background:#5fe06a}.bar.ally i{background:#43a2ff}.bar.enemy i{background:#ff4b3e}.bar.dragon{width:90px;height:8px;left:-45px}.bar.dragon i{background:#9be3ff}.top{top:18px;left:max(8px, env(safe-area-inset-left));pointer-events:none;text-shadow:0 1px 2px #000;align-items:center;gap:8px;display:flex;position:absolute}.timer{font-variant-numeric:tabular-nums;background:#0008;border-radius:6px;padding:1px 8px;font-size:17px}.dragon{color:#bfeaff;font-size:12px}.dbar{vertical-align:middle;background:#0009;border-radius:3px;width:80px;height:7px;display:inline-block}.dbar i{background:#9be3ff;border-radius:3px;height:100%;display:block}.frames{color:#fffb;text-shadow:0 1px 1px #000;pointer-events:none;font:500 10px/1.2 ui-monospace,monospace;position:absolute;top:4px;left:6px}.menu-btn{background:#0009;border:0;border-radius:10px;width:44px;height:44px;font-size:22px;position:absolute;top:6px;right:8px}.self{pointer-events:none;width:220px;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.self-hp{background:#000a;border:1px solid #000;border-radius:4px;height:16px;position:relative;overflow:hidden}.self-hp i{background:linear-gradient(#7ef08a,#3fae4b);position:absolute;inset:0 auto 0 0}.self-hp span{text-align:center;text-shadow:0 1px 1px #000;font-size:11px;line-height:16px;display:block;position:relative}.ability{right:max(24px, env(safe-area-inset-right));touch-action:none;background:radial-gradient(#4a6bc8,#1d2f6a);border:3px solid #f6dc8a;border-radius:50%;width:84px;height:84px;position:absolute;bottom:28px;overflow:hidden;box-shadow:0 2px 10px #000a}.ability b{text-shadow:0 1px 2px #000;font-size:15px;position:relative}.ability .cd{background:conic-gradient(#000b calc(var(--k,0) * 360deg), transparent 0);position:absolute;inset:0}.ability.cooling{border-color:#888}.stick{pointer-events:none;background:#0003;border:2px solid #fff6;border-radius:50%;width:110px;height:110px;display:none;position:absolute;top:-55px;left:-55px}.stick.on{display:block}.stick i{background:#fffc;border-radius:50%;width:44px;height:44px;position:absolute;top:33px;left:33px}.respawn{text-shadow:0 2px 4px #000;pointer-events:none;font-size:26px;display:none;position:absolute;top:40%;left:50%;transform:translate(-50%)}.respawn.on{display:block}.panel{box-sizing:border-box;text-align:center;background:#142019ee;border:2px solid #c8a85a;border-radius:12px;min-width:260px;max-width:calc(100vw - 32px);max-height:calc(100vh - 24px);padding:12px 18px;display:none;position:absolute;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.panel.on{display:block}.panel h1{margin:4px 0;font-size:34px}.panel h2{margin:2px 0 8px;font-size:18px}.panel h1.win{color:#ffd95a}.panel h1.loss{color:#ff6b5e}.panel h1.draw{color:#cfd7e0}.panel p{color:#d8d2bd;margin:4px 0 10px;font-weight:500}.panel button{background:#2b3b2a;border:1px solid #c8a85a;border-radius:8px;min-width:110px;min-height:40px;margin:3px;display:inline-block}.panel .link{color:#f6dc8a;margin-top:6px;display:inline-block}.zoom{margin-top:8px;display:block}.zoom input{accent-color:#c8a85a;width:100%;min-height:40px;margin:0;display:block}.hud.idle>:not(.start):not(.frames){display:none}.hero-page{flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:8px;display:flex;position:fixed;top:0;left:0;right:0}.hp-row{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.hp-now{text-align:center;flex-basis:100%}.btn{text-transform:capitalize;background:#2b3b2acc;border:1px solid #c8a85a;border-radius:8px;justify-content:center;align-items:center;min-width:72px;min-height:36px;padding:0 10px;text-decoration:none;display:inline-flex}.btn.on{color:#142019;background:#c8a85a}.hp-now{text-shadow:0 1px 2px #000}