:root{--gold:#ffc93a;--hot:#ff4a3a;--ink:#0b0812;--text:#f4efe6;--muted:#b9b0c8;--head:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}html,body{background:var(--ink);height:100%;color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;margin:0;font:16px/1.45 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app{justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#stage{aspect-ratio:16/9;background:#000;width:min(100vw,177.778dvh);position:relative}#view{width:100%;height:100%;image-rendering:pixelated;outline:none;display:block}#stage:after{content:"";pointer-events:none;background:linear-gradient(#0000 50%,#00000029 50%) 0 0/100% .462963%;position:absolute;inset:0}canvas{image-rendering:pixelated}#pause{opacity:0;cursor:pointer;background:0 0;border:0;width:44px;height:44px;position:absolute;top:1.5%;left:50%;translate:-50%}@media (pointer:coarse){#pause{opacity:.8;background:#00000073;border-radius:50%;justify-content:center;align-items:center;gap:5px;display:flex;top:auto;bottom:2%}#pause span{background:#fff;border-radius:2px;width:5px;height:16px}}#app #pause[hidden],#app #pad[hidden]{display:none}#pad{height:min(46vh,230px);padding:0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-end;display:flex;position:fixed;inset:auto 0 0}.stick{pointer-events:auto;touch-action:none;background:radial-gradient(circle,#ffffff0f,#ffffff24);border:2px solid #ffffff40;border-radius:50%;place-items:center;width:150px;height:150px;display:grid}.knob{pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff,#b9b0c8 60%,#6a6280);border-radius:50%;width:62px;height:62px;box-shadow:0 4px 14px #00000080}.btns{pointer-events:auto;touch-action:none;grid-template-rows:repeat(2,72px);grid-template-columns:repeat(2,72px);gap:12px;display:grid}.btns button{font:800 24px var(--head);color:#fff;touch-action:none;border:2px solid #ffffff59;border-radius:50%}.btns [data-btn=l]{background:#3aa0ff73;grid-area:2/1}.btns [data-btn=h]{background:#ff4a3a80;grid-area:2/2}.btns [data-btn=s]{background:#ffc93a80;grid-area:1/2}.btns button.down{filter:brightness(1.5);transform:scale(.92)}@media (orientation:portrait){#app{padding-top:max(10px, env(safe-area-inset-top));align-items:flex-start}#pad{align-items:center;height:auto;top:calc(56.25vw + 30px)}.stick{width:160px;height:160px}.btns{grid-template-rows:repeat(2,82px);grid-template-columns:repeat(2,82px)}}@media (orientation:landscape) and (pointer:coarse){#pad{height:100%;padding-bottom:max(14px, env(safe-area-inset-bottom))}.stick,.btns{opacity:.85}}#screen:empty{display:none}#screen{padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));touch-action:pan-y;-webkit-user-select:text;user-select:text;background:radial-gradient(#0b08128c,#0b0812e0);place-items:center;display:grid;position:fixed;inset:0;overflow:auto}#screen.clear{background:linear-gradient(90deg,#0b0812d9,#0b081273 40% 60%,#0b0812d9)}h1,h2,h3{font-family:var(--head);letter-spacing:.01em;text-transform:uppercase;margin:0;font-weight:800}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}h1 canvas,h2 canvas,h3 canvas{max-width:100%;height:auto;margin-inline:auto;display:block}h1 canvas{width:calc(var(--w) * clamp(7px, 2.6vw, 13px));filter:drop-shadow(0 0 30px #ff6a1f73)}h1 canvas:first-of-type{width:calc(var(--w) * clamp(4px, 1.3vw, 6px));margin-bottom:.25em}h2 canvas{width:calc(var(--w) * clamp(2px, .55vw, 4px))}h3 canvas{width:calc(var(--w) * 3px)}h2{color:var(--gold);font-size:clamp(24px,4.5vw,40px)}.title,.panel{text-align:center;max-width:640px}.tag{color:var(--text);text-shadow:0 2px 6px #000;max-width:34em;margin:18px auto 26px;font-size:clamp(16px,2.4vw,20px)}.best{color:var(--gold);font-weight:700}.row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px;display:flex}.row.col{flex-direction:column;align-items:stretch;max-width:280px;margin-inline:auto}.row button,.versus .mid button{min-height:48px;color:var(--text);font:800 17px var(--head);text-transform:uppercase;letter-spacing:.04em;background:#1a1428;border:2px solid #f4efe6;border-radius:0;padding:10px 22px;transition:transform .1s,border-color .1s;box-shadow:0 4px #000}.row button.primary,.versus .mid button.primary{color:#1a0c04;background:#ffc93a;border-color:#fff3c4;box-shadow:0 4px #8a3a0c}.row button:hover,.row button:focus-visible,.versus .mid button:hover,.versus .mid button:focus-visible{border-color:#fff;outline:none;transform:translateY(-2px)}.foot{justify-content:center;gap:22px;margin-top:30px;display:flex}.link{color:var(--muted);text-underline-offset:3px;background:0 0;border:0;padding:8px 4px;font-size:14px;text-decoration:underline}.panel{background:#0e0a16eb;border:1px solid #ffc93a59;border-radius:0;padding:28px clamp(18px,4vw,36px);box-shadow:0 20px 60px #0009}.how dl{text-align:left;grid-template-columns:max-content 1fr;gap:8px 18px;margin:20px 0;display:grid}.how dt{color:var(--gold);font-weight:800}.how dd{margin:0}@media (max-width:520px){.how dl{grid-template-columns:1fr}.how dd{margin-bottom:8px}}.result p{margin:14px 0 0;font-size:18px}.result.won h2{color:#7dffb0}.select{justify-items:center;gap:16px;width:min(960px,100%);display:grid}.grid{grid-template-columns:repeat(4,1fr);gap:10px;width:min(560px,100%);display:grid}.card{aspect-ratio:1;color:var(--text);background:linear-gradient(#2a2140,#120d1c);border:2px solid #ffffff26;border-radius:0;padding:0;position:relative;overflow:hidden}.card canvas{width:100%;height:100%}.card span{font:800 12px var(--head);text-transform:uppercase;background:linear-gradient(#0000,#000000d9);padding:3px 4px;position:absolute;inset:auto 0 0}.card[aria-selected=true]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold), 0 0 24px #ffc93a80;background:linear-gradient(#5a3a20,#1c120c)}.detail{background:#0e0a16d9;border:1px solid #ffffff1a;border-radius:0;align-items:center;gap:18px;width:min(640px,100%);min-height:150px;padding:10px 18px;display:flex}.detail>canvas{flex:none;width:130px;height:130px}.detail .who{flex:1;min-width:0}.detail h3{color:var(--gold);font-size:26px}.detail h3 canvas{margin-inline:0}.detail p{margin:2px 0}.tagline{font-weight:600}.origin,.moves{color:var(--muted);font-size:14px}.stats{flex:0 0 160px;gap:6px;display:grid}.stat span{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:12px}.stat i{background:linear-gradient(90deg, var(--gold) var(--v), #ffffff1f var(--v));border-radius:0;height:7px;display:block}@media (max-width:600px){.detail{flex-wrap:wrap}.detail>canvas{width:90px;height:90px}.stats{flex:100%;grid-template-columns:1fr 1fr}}.versus{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:min(1000px,100%);display:grid}.versus .side{text-align:center}.versus .side>canvas{filter:drop-shadow(0 0 20px #ffc93a4d);width:min(220px,30vw);height:min(220px,30vw)}.versus .side.r>canvas{filter:drop-shadow(0 0 20px #ff4a3a66)}.versus.last .side.r>canvas{filter:drop-shadow(0 0 26px #c9a8ffb3)}.versus h3{text-shadow:0 3px #000;font-size:clamp(18px,3vw,30px)}.versus .mid{text-align:center;max-width:300px}.versus .mid p{margin:4px 0}.vs{font:800 clamp(48px, 9vw, 96px) / 1 var(--head);color:var(--hot);text-shadow:0 4px #000,0 0 30px #ff4a3a99}.rung{font:800 15px var(--head);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.lvl{font:800 clamp(20px, 3.4vw, 30px) var(--head);text-transform:uppercase;color:var(--gold)}.last .lvl,.warn{color:#c9a8ff}.arena{color:var(--muted);font-size:14px}.warn{font-weight:700}@media (prefers-reduced-motion:reduce){.row button{transition:none}}