:root,body{--sa-t:var(--discord-safe-area-inset-top,env(safe-area-inset-top,0px));--sa-r:var(--discord-safe-area-inset-right,env(safe-area-inset-right,0px));--sa-b:var(--discord-safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--sa-l:var(--discord-safe-area-inset-left,env(safe-area-inset-left,0px));--bg:#12141c;--fg:#f4f1ea;--accent:#fc3;--panel:#141620eb}[hidden]{display:none!important}html,body{background:var(--bg);height:100dvh;color:var(--fg);margin:0;font:16px/1.3 system-ui,sans-serif;overflow:hidden}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}#app canvas{width:100%;height:100%;display:block}#ui{pointer-events:none;padding:var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);position:fixed;inset:0}#ui button{pointer-events:auto;font:inherit;color:var(--fg);cursor:pointer;background:#2b2f42;border:0;border-radius:10px;padding:10px 16px}#ui button.primary{background:var(--accent);color:#1a1a1a;font-weight:700}#ui button:disabled{opacity:.6;cursor:default}.panel{pointer-events:auto;background:var(--panel);border-radius:16px;gap:10px;width:min(340px,86vw);padding:18px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.title{text-align:center;margin:0;font-size:22px}.members{gap:6px;max-height:40dvh;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.members li{align-items:center;gap:8px;display:flex}.members li.you .name{color:var(--accent)}.av{border-radius:50%;width:28px;height:28px}.badge{opacity:.7;border:1px solid;border-radius:6px;padding:0 5px;font-size:12px}.link{opacity:.7;word-break:break-all;-webkit-user-select:text;user-select:text;pointer-events:auto;margin:0;font-size:12px}.controls{pointer-events:none;position:absolute;inset:0}.ctl{box-sizing:border-box;color:var(--hud-white);background:var(--hud-disc);box-shadow:inset 0 0 0 1px var(--hud-keyline);pointer-events:none;clip-path:circle(50%);border-radius:50%;place-items:center;display:grid;position:absolute}.ctl svg{width:50%;height:50%;position:relative}.ctl .tank{pointer-events:none;border-radius:50%;position:absolute;inset:0;overflow:hidden}.ctl .heat{pointer-events:none;background:conic-gradient(var(--heat-c,var(--hud-fire)) calc(var(--heat,0) * 360deg), transparent 0);border-radius:50%;position:absolute;inset:3px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px))}.ctl .combo{pointer-events:none;background:conic-gradient(var(--hud-earth) 0 50%, var(--hud-fire) 0 100%);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px))}.ctl .tank:before{content:"";height:calc(var(--tank,0) * 100%);background:var(--hud-water);opacity:.6;position:absolute;bottom:0;left:0;right:0}.ctl{transition:opacity .1s}.ctl .pip{box-sizing:border-box;width:9px;height:9px;box-shadow:inset 0 0 0 1.5px var(--hud-white), 0 0 0 1.5px var(--hud-ink);transform:rotate(var(--a)) translateY(calc(var(--pip-at,36px) * -1));border-radius:50%;margin:-4.5px 0 0 -4.5px;position:absolute;top:50%;left:50%}.ctl .pip.on{background:var(--hud-white)}.ctl .lock{left:var(--lock-at);top:var(--lock-at);width:var(--lock-size);height:var(--lock-size);background:var(--hud-pill);border-radius:50%;place-items:center;display:grid;position:absolute}.ctl .lock svg{width:70%;height:70%}.ctl.locked{opacity:.55;filter:grayscale()}.ctl .hook-glyph{display:none}.ctl.hook{background:var(--hud-cyan);opacity:1;filter:none}.ctl.hook>svg{display:none}.ctl.hook>svg.hook-glyph{display:block}.ctl.hook .tank,.ctl.hook .pip,.ctl.hook .lock{display:none}.hook-cursor{pointer-events:none;width:32px;height:32px;margin:-16px 0 0 -16px;position:absolute}.hook-cursor svg{width:100%;height:100%;display:block}.ctl .ring{pointer-events:none;background:conic-gradient(var(--hud-white) calc(var(--fill,0) * 360deg), transparent 0);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 calc(100% - 4px))}.ctl .ring .notch{background:var(--hud-ink,#12141c);width:3px;height:9px;box-shadow:0 0 0 1px var(--hud-white);transform-origin:50% var(--r,40px);transform:rotate(var(--n,0deg));margin-left:-1.5px;position:absolute;top:0;left:50%}.ctl.flash{opacity:1;filter:none}.ctl.flash:after{content:"";box-shadow:inset 0 0 0 6px var(--hud-white);pointer-events:none;border-radius:50%;position:absolute;inset:0}.controls.faded .ctl{opacity:.35}.danger-edge{pointer-events:none;background:linear-gradient(to top, var(--hud-danger-edge), var(--hud-danger-none));height:28px;position:absolute;bottom:0;left:0;right:0}.danger-edge.landscape{background:linear-gradient(to right, var(--hud-danger-edge), var(--hud-danger-none));width:28px;height:auto;top:0;right:auto}.ko-seal{pointer-events:none;transform-origin:50%;position:absolute;top:0;left:0}.ko-seal canvas{position:absolute}.ko-seal canvas:first-child{width:200%;height:200%;top:-50%;left:-50%}.ko-seal canvas:last-child{width:100%;height:100%;filter:drop-shadow(3px 0 0 var(--hud-key)) drop-shadow(-3px 0 0 var(--hud-key)) drop-shadow(0 3px 0 var(--hud-key)) drop-shadow(0 -3px 0 var(--hud-key)) drop-shadow(0 6px 0 var(--hud-shadow));top:0;left:0}#ui .gear{left:var(--sa-l);top:var(--sa-t);width:40px;height:40px;color:var(--hud-white);background:0 0;border-radius:50%;padding:8px;position:absolute}.gear svg,.sheet svg{width:24px;height:24px;display:block}.settings{pointer-events:auto;background:var(--hud-dim);place-items:center;display:grid;position:absolute;inset:0}.sheet{background:var(--hud-pill);box-shadow:inset 0 0 0 1px var(--hud-keyline);border-radius:20px;gap:10px;padding:14px;display:grid}.sheet .row{align-items:center;gap:8px;display:flex}.sheet .row.end{justify-content:space-between}.sheet .row>svg{color:var(--hud-white);opacity:.7;margin-right:4px}#ui .sheet button{min-width:48px;height:48px;color:var(--hud-white);box-shadow:inset 0 0 0 1.5px var(--hud-line);font-variant-numeric:tabular-nums;background:0 0;border-radius:12px;padding:0 12px;font-weight:700}#ui .sheet button[aria-pressed=true]{background:var(--hud-white);color:var(--hud-ink);box-shadow:none}.sheet button svg{margin:auto}.banner{top:calc(var(--sa-t) + 56px);background:var(--panel);white-space:nowrap;border-radius:10px;padding:8px 14px;position:absolute;left:50%;transform:translate(-50%)}.fatal{pointer-events:auto;text-align:center;background:#000000bf;place-content:center;gap:12px;padding:24px;display:grid;position:absolute;inset:0}.perf{color:#0f0;z-index:9;pointer-events:none;background:#000a;padding:2px 4px;font:12px monospace;position:fixed;top:4px;left:4px}body[data-compact] #ui{visibility:hidden}.pill{top:calc(var(--sa-t) + 8px);box-sizing:border-box;background:var(--hud-pill);height:40px;box-shadow:inset 0 0 0 1px var(--hud-keyline);color:var(--hud-white);pointer-events:none;border-radius:20px;align-items:center;gap:10px;padding:0 12px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.pill .side{align-items:center;gap:8px;display:flex}.pill .side.rival{flex-direction:row-reverse}.pill .glyphs,.pill .pips{align-items:center;gap:4px;display:flex}.pill .side.rival .glyphs,.pill .side.rival .pips{flex-direction:row-reverse}.pill .glyph{width:18px;height:18px;color:var(--pill-mine);transform:scale(var(--pop,1));overflow:visible}.pill .side.rival .glyph{color:var(--pill-rival)}.pill .glyph>path,.pill .glyph>rect{fill:currentColor;stroke:none}.pill .glyph .core,.pill .glyph .cross{display:none}.pill .glyph[data-kind=dark]>path,.pill .glyph[data-kind=dark]>rect{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linejoin:round}.pill .glyph[data-kind=lit\+]{opacity:calc(.55 + .45 * var(--pulse,1))}.pill .glyph[data-kind=teeter]{color:var(--hud-danger);opacity:calc(.6 + .4 * var(--pulse,1))}.pill .glyph[data-kind=teeter] .core{fill:var(--hud-white);stroke:none;display:block}.pill .glyph[data-kind=out]{color:var(--hud-steel)}.pill .glyph[data-kind=out] .cross{fill:none;stroke:var(--hud-white);stroke-width:2.6px;stroke-linecap:round;display:block}.pill .pip{box-sizing:border-box;border:1.5px solid var(--pill-mine);border-radius:50%;width:10px;height:10px;position:relative}.pill .side.rival .pip{border-color:var(--pill-rival)}.pill .pip.won{background:var(--pill-mine)}.pill .side.rival .pip.won{background:var(--pill-rival)}.pill .pip svg{width:10px;height:10px;color:var(--pill-mine);display:none;position:absolute;top:-1.5px;left:-1.5px}.pill .side.rival .pip svg{color:var(--pill-rival)}.pill .pip svg circle{stroke:currentColor}.pill .pip[data-team="1"].won{background:0 0;border-color:#0000}.pill .pip[data-team="1"].won svg{display:block}.pill .timer{width:36px;height:36px;transform:scale(var(--scale,1));transition:transform .12s;position:relative}.pill .timer .ring{width:36px;height:36px;position:absolute;inset:0}.pill .timer .ring circle{stroke:var(--hud-white)}.pill .timer .ring circle.track{stroke:var(--hud-ghost);opacity:.5}.pill .timer .num{color:var(--hud-white);transform:scale(var(--pop,1));place-items:center;display:grid;position:absolute;inset:0}.pill .timer .num.off{opacity:0}.pill .mark2x{background:var(--hud-pill);width:28px;height:28px;box-shadow:inset 0 0 0 1px var(--hud-keyline);color:var(--hud-white);border-radius:50%;place-items:center;margin-left:-14px;display:grid;position:absolute;top:calc(100% + 6px);left:50%}@media (prefers-reduced-motion:reduce){.pill .timer{transition:none}}.stamps{pointer-events:none;position:absolute;inset:0}.stamp{transform-origin:50%;position:absolute;top:0;left:0}.stamp canvas{width:100%;height:100%;filter:drop-shadow(2px 0 0 var(--hud-key)) drop-shadow(-2px 0 0 var(--hud-key)) drop-shadow(0 2px 0 var(--hud-key)) drop-shadow(0 -2px 0 var(--hud-key)) drop-shadow(0 4px 0 var(--hud-shadow));display:block}.cpip{box-sizing:border-box;border:2px solid var(--hud-white);background:var(--hud-dim);border-radius:50%;width:24px;height:24px;position:absolute}.cpip.lit{background:var(--hud-white)}.cards,.results{pointer-events:auto;position:absolute;inset:0}.cards:before,.results:before{content:"";background:var(--hud-wash);position:absolute;inset:0}#ui .card{box-sizing:border-box;background:var(--hud-pill);box-shadow:inset 0 0 0 1px var(--hud-keyline);color:var(--hud-white);border:0;border-radius:16px;justify-content:center;align-items:center;margin:0;padding:0;transition:scale .12s,box-shadow .12s;display:flex;position:absolute}.card .disc{border-radius:50%;flex:none;place-items:center;width:80px;height:80px;display:grid}.card .disc svg{width:56px;height:56px;color:var(--hud-white)}#ui .cards:not(.landscape) .card{justify-content:flex-start;padding-left:12px}.cards:not(.landscape) .card .disc{width:72px;height:72px}#ui .card.on{box-shadow:inset 0 0 0 3px var(--hud-white);scale:1.04}#ui .card.on.breathe{animation:1.6s ease-in-out infinite breathe}@keyframes breathe{0%,to{scale:.97}50%{scale:1.045}}@media (prefers-reduced-motion:reduce){#ui .card.on.breathe,#ui .rematch{animation:none}}#ui .dpip{background:0 0;border:0;border-radius:0;place-items:center;margin:0;padding:0;display:grid;position:absolute}.dpip .dot{box-sizing:border-box;border:2px solid var(--hud-white);border-radius:50%;width:20px;height:20px}.dpip.on .dot{background:var(--hud-white)}#ui .play,#ui .rematch{background:var(--hud-white);color:var(--hud-ink);border:0;border-radius:50%;place-items:center;margin:0;padding:0;display:grid;position:absolute}#ui .play svg{width:52px;height:52px}#ui .rematch svg{width:44px;height:44px}#ui .rematch{transform:scale(var(--squash,1));animation:1.6s ease-in-out infinite breathe}#ui .rematch.pressed{animation:none}.results .hero{transform-origin:50%;position:absolute}.results .hero canvas{width:100%;height:100%;filter:drop-shadow(2px 0 0 var(--hud-key)) drop-shadow(-2px 0 0 var(--hud-key)) drop-shadow(0 2px 0 var(--hud-key)) drop-shadow(0 -2px 0 var(--hud-key)) drop-shadow(0 4px 0 var(--hud-shadow));display:block}.results .table{color:var(--hud-white);position:absolute}.results .row{align-items:center;height:28px;display:flex}.results .row>*{flex:none}.results .glyphcell{place-items:center;width:36px;display:grid}.results .cell{place-items:center;width:44px;display:grid}.results .head .cell svg{width:20px;height:20px}
