:root{--ink:#fff7ea;--night:#0b0b12;--clay:#c8693f;--anime:#6b4fd8;--cyan:#3fe0ff;--gold:#ffd34d;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);color-scheme:dark}html,body{background:var(--night);height:100%;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}[hidden]{display:none!important}#app,.stage{position:fixed;inset:0}.stage canvas{width:100%;height:100%;display:block}.touch{touch-action:none;z-index:5;position:fixed;inset:0}.portrait .touch{background:linear-gradient(#15131f,#0b0b12);border-top:2px solid #2a2638}.stick{width:100px;height:100px;left:calc(24px + var(--sal));bottom:calc(24px + var(--sab));background:radial-gradient(circle,#ffffff14,#ffffff2e);border:2px solid #ffffff59;border-radius:50%;position:absolute}.portrait .stick{bottom:calc(64px + var(--sab));left:calc(20px + var(--sal))}.dpad{width:144px;height:144px;left:calc(14px + var(--sal));bottom:calc(18px + var(--sab));transform:scale(var(--ctl,1));transform-origin:0 100%;position:absolute}.portrait .dpad{bottom:calc(52px + var(--sab))}.dpad .arm,.dpad .hub{box-sizing:border-box;background:#3b3850;border:3px solid #00000080;position:absolute;box-shadow:inset 0 -5px #0000004d}.dpad .hub{width:48px;height:48px;box-shadow:none;border:none;top:48px;left:48px}.dpad .arm-up{border-radius:10px 10px 0 0;width:48px;height:52px;top:0;left:48px}.dpad .arm-down{border-radius:0 0 10px 10px;width:48px;height:52px;bottom:0;left:48px}.dpad .arm-left{border-radius:10px 0 0 10px;width:52px;height:48px;top:48px;left:0}.dpad .arm-right{border-radius:0 10px 10px 0;width:52px;height:48px;top:48px;right:0}.dpad .arm:after{content:"";border:9px solid #0000;width:0;height:0;margin:auto;position:absolute;inset:0}.dpad .arm-up:after{border-top-width:0;border-bottom-color:#fff9}.dpad .arm-down:after{border-top-color:#fff9;border-bottom-width:0}.dpad .arm-left:after{border-left-width:0;border-right-color:#fff9}.dpad .arm-right:after{border-left-color:#fff9;border-right-width:0}.dpad .arm.on{background:#f2c94c;box-shadow:inset 0 5px #00000059,0 0 14px 4px #f2c94c99}.dpad .arm.on:after{filter:brightness(0)}.knob{background:#ffffff8c;border:2px solid #0006;border-radius:50%;width:50px;height:50px;position:absolute;top:25px;left:25px}.pads{right:calc(0px + var(--sar));bottom:calc(0px + var(--sab));width:270px;height:260px;transform:scale(var(--ctl,1));transform-origin:100% 100%;pointer-events:none;position:absolute}.pads .pad,.pads .chord{pointer-events:auto}.portrait .pads{bottom:calc(40px + var(--sab));right:calc(-20px + var(--sar))}.pad{color:#fff;text-shadow:0 2px #000;border:3px solid #00000073;border-radius:50%;place-items:center;font:900 26px/1 system-ui,sans-serif;display:grid;position:absolute;transform:translate(50%,50%);box-shadow:inset 0 -6px #00000040}.pad-L{background:#e8a33a;width:76px;height:76px;bottom:64px;right:190px}.pad-H{background:#e0473a;width:76px;height:76px;bottom:84px;right:78px}.pad-S{background:#3a8fe0;width:72px;height:72px;bottom:176px;right:214px}.pad-X{opacity:.15;background:#b04ae0;width:72px;height:72px;bottom:196px;right:102px}.pad-X.ready{opacity:1;animation:.6s ease-in-out infinite alternate pulse}.held .pad-X.ready{animation-play-state:paused}.pad{transition:transform 40ms ease-out}.pad.on{filter:brightness(1.3);transform:translate(50%,50%)scale(.86);box-shadow:inset 0 6px #00000059,0 0 0 7px #fffc,0 0 18px 8px #ffffff59}.chord{border-radius:12px;width:36px;height:56px;position:absolute;bottom:46px;right:116px}.chord.on{background:#ffffff40}@keyframes pulse{0%{transform:translate(50%,50%)scale(1)}to{transform:translate(50%,50%)scale(1.08)}}.pause-btn{z-index:6;top:calc(52px + var(--sat));color:#fff;letter-spacing:2px;background:#00000073;border:2px solid #fff6;border-radius:10px;width:48px;height:48px;font:900 16px/1 system-ui,sans-serif;position:fixed;left:50%;transform:translate(-50%)}.ui{z-index:10;touch-action:pan-y;position:fixed;inset:0;overflow-y:auto}.screen{box-sizing:border-box;min-height:100%;padding:calc(24px + var(--sat)) 16px calc(24px + var(--sab));background:linear-gradient(115deg,#c8693feb 0 47%,#0000 47.2%),linear-gradient(115deg,#0000 52.8%,#6b4fd8eb 53%),#0b0b12;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex}.screen.pause,.screen.moves,.screen.settings,.screen.results,.screen.continue{background:#08080ee6}.logo{flex-direction:column;align-items:center;display:flex;transform:skew(-10deg)}.logo span{letter-spacing:-2px;color:#fff;text-shadow:4px 4px #000,-2px -2px #000,2px -2px #000,-2px 2px #000;font:italic 900 clamp(48px,13vw,120px)/.9 system-ui,sans-serif}.logo span:last-child{color:var(--gold)}.logo.small span{font-size:clamp(36px,9vw,72px)}.tagline{text-shadow:2px 2px #000;text-align:center;font:italic 700 18px system-ui,sans-serif}.build{opacity:.7;bottom:calc(12px + var(--sab));font-size:12px;position:absolute}.tap{color:#fff;text-shadow:3px 3px #000;cursor:pointer;background:0 0;border:none;min-height:56px;font:italic 900 28px system-ui,sans-serif;animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.2}}h2{text-shadow:3px 3px #000;text-align:center;margin:0;font:italic 900 clamp(28px,7vw,54px)/1 system-ui,sans-serif;transform:skew(-8deg)}h2.win{color:var(--gold)}h2.lose{color:#ff6a5a}.sub{opacity:.85;font:700 18px system-ui,sans-serif}.menu{flex-direction:column;gap:10px;width:min(420px,100%);display:flex}.menu button,.back{color:#111;cursor:pointer;text-align:left;background:#f4efe6;border:3px solid #000;border-radius:4px;flex-direction:column;justify-content:center;align-items:flex-start;min-height:56px;padding:6px 18px;display:flex;transform:skew(-10deg);box-shadow:5px 5px #000}.menu button b{font:italic 900 24px/1.1 system-ui,sans-serif}.menu button i{opacity:.7;font:600 13px system-ui,sans-serif}.menu button.focus,.menu button:hover{background:var(--gold)}.back{align-items:center;min-width:160px;font:italic 900 18px system-ui,sans-serif}.back.focus{background:var(--gold)}.cards{--cols:var(--cols-p,2);--rows:var(--rows-p,1);--reserve:230px;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));width:min(100%, calc(var(--cols) * 220px));gap:12px;display:grid}.card{box-sizing:border-box;min-width:0;height:clamp(88px, calc((100dvh - var(--reserve) - var(--sat) - var(--sab)) / var(--rows) - 12px), 290px);cursor:pointer;color:#fff;text-align:left;border:4px solid #000;border-radius:6px;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:10px 12px;display:flex;overflow:hidden;transform:skew(-6deg);box-shadow:6px 6px #000;container-type:inline-size}.card.focus,.card:hover{outline:4px solid var(--gold)}.card,.vs-side{position:relative}.card>:not(.pic),.vs-side>:not(.pic){z-index:1;position:relative}.card .pic{object-fit:contain;object-position:50% 100%;pointer-events:none;filter:drop-shadow(4px 4px #00000073);width:100%;height:88%;position:absolute;bottom:0;left:0;right:0;transform:skew(6deg)}.pic.flip{transform:scaleX(-1)}.vs-side .pic{object-fit:contain;object-position:50% 100%;pointer-events:none;filter:drop-shadow(6px 6px #00000080);width:70%;height:92%;position:absolute;bottom:0}.vs-left .pic{right:12%}.vs-right .pic{left:12%}.title-art{justify-content:center;align-items:flex-end;gap:4vw;width:min(100%,520px);height:30vh;display:flex}.title-art .pic{object-fit:contain;object-position:50% 100%;pointer-events:none;filter:drop-shadow(5px 5px #00000073);width:46%;height:100%}.card b{text-shadow:3px 3px #000;font:italic 900 clamp(16px,16cqi,40px)/1 system-ui,sans-serif}.card i,.card .medium{text-shadow:1px 1px #000;font:700 clamp(9px,6.5cqi,13px)/1.2 system-ui,sans-serif}.card .medium{text-transform:uppercase;letter-spacing:1.5px;margin-bottom:auto}@media (orientation:landscape){.cards{--cols:var(--cols-l,4);--rows:var(--rows-l,1)}}.card-kiln{background:linear-gradient(160deg,#e9a86a,#c8693f 60%,#6a3018)}.card-sakuga{background:linear-gradient(160deg,#3fe0ff,#6b4fd8 55%,#241a5c)}.card-baren{background:linear-gradient(160deg,#d9432b,#2b3a78 55%,#0e1230)}.card-dither{background:linear-gradient(160deg,#7fe3c4,#bfc6cf 45%,#1b2a4a)}.card-benday{background:linear-gradient(160deg,#2fd6e6,#e63c8f 50%,#ffd84a)}.card-hatch{background:linear-gradient(160deg,#efe6cf,#9aa0a6 50%,#3b3d40)}.card-sfumato{background:linear-gradient(170deg,#f4f1ea 0% 14%,#2f4bb0 22% 62%,#d9b44a 62% 66%,#4a2e1a 66%)}.card-vellum{background:linear-gradient(160deg,#f1d58a,#9a6a32 55%,#2a1a0e)}.card-random,.stage-random{background:repeating-linear-gradient(45deg,#1d1d2a 0 14px,#2c2c40 14px 28px)}.card-random .q{color:var(--gold);text-shadow:5px 5px #000;margin:auto 0;font:italic 900 clamp(56px,42cqi,150px)/1 system-ui,sans-serif}.stage-card{padding:0}.stage-card .stage-prev{width:100%;min-height:0;color:var(--gold);text-shadow:4px 4px #000;flex:auto;justify-content:center;align-items:center;font:italic 900 clamp(48px,36cqi,120px)/1 system-ui,sans-serif;display:flex}.stage-card .stage-prev img{object-fit:cover;width:100%;height:100%;display:block}.stage-card b{overflow-wrap:anywhere;padding:8px 12px 0;font-size:clamp(12px,11cqi,26px);line-height:1.3}.stage-card i{padding:0 12px 10px}.quote{text-align:center;text-shadow:2px 2px #000;max-width:min(520px,100%);margin:0;font:italic 700 clamp(16px,2.6vh,22px)/1.3 system-ui,sans-serif}.stats{border-collapse:collapse;text-shadow:1px 1px #000;width:min(420px,100%);font:700 16px system-ui,sans-serif}.stats th,.stats td{border-bottom:2px solid #ffffff40;padding:4px 10px}.stats th{color:var(--gold);text-align:center;text-transform:uppercase;font:italic 900 16px system-ui,sans-serif}.stats .lbl{text-align:left}.stats .n{text-align:center;font:italic 900 24px system-ui,sans-serif}.time{opacity:.85;font:700 16px system-ui,sans-serif}.count{color:var(--gold);text-shadow:6px 6px #000;font:italic 900 clamp(120px,40vh,240px)/1 system-ui,sans-serif;transform:skew(-8deg)}.count.over{color:#ff6a5a;font-size:clamp(28px,11vw,60px)}.cont{width:min(420px,100%)}.cont .big{text-align:center;align-items:center;min-height:96px}.cont .big b{font-size:36px}.cont .small{text-align:center;align-items:center;min-height:56px}.cont-bust{object-fit:contain;pointer-events:none;filter:drop-shadow(5px 5px #00000080);width:auto;max-width:100%;height:clamp(110px,22vh,200px)}.res-main{flex-direction:column;align-items:center;gap:18px;width:100%;display:flex}.res-art{grid-template-columns:1fr 1fr;gap:12px;width:min(100%,420px);height:clamp(140px,22vh,210px);display:grid}.res-art.none{display:none}.res-l,.res-r{min-height:0;position:relative}.res-pic,.res-bust{object-fit:contain;object-position:50% 100%;pointer-events:none;filter:drop-shadow(5px 5px #00000080);position:absolute;bottom:0}.res-pic{width:100%;height:100%;left:0;right:0}.res-bust{width:auto;max-width:100%;height:64%;left:50%;transform:translate(-50%)}.screen.vs{background:#000;flex-flow:wrap;gap:0}.vs-side{flex-direction:column;flex:40%;justify-content:center;min-height:60vh;padding:20px;display:flex}.vs-left{clip-path:polygon(0 0,100% 0,85% 100%,0 100%);align-items:flex-start}.vs-right{clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);align-items:flex-end}.vs-side b{text-shadow:4px 4px #000;font:italic 900 clamp(30px,7vw,72px)/1 system-ui,sans-serif}.vs-side .medium{letter-spacing:3px;text-transform:uppercase;font:700 14px system-ui,sans-serif}.vs-mark{z-index:2;color:var(--gold);text-shadow:5px 5px #000;font:italic 900 clamp(56px,16vw,140px)/1 system-ui,sans-serif;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)skew(-10deg)}.vs-stage{z-index:2;bottom:calc(24px + var(--sab));text-align:center;width:100%;font:italic 700 18px system-ui,sans-serif;position:absolute}.moves table{border-collapse:collapse;width:min(520px,100%);font:600 16px system-ui,sans-serif}.moves td{border-bottom:1px solid #ffffff1f;padding:6px 10px}.moves td:first-child{color:var(--gold);white-space:nowrap;font-weight:900}.moves .k-special td:last-child{color:var(--cyan)}.moves .k-super td:last-child{color:#ff8af0}.notes{opacity:.8;width:min(520px,100%);margin:0;padding-left:18px;font-size:14px}.sw-settings{flex-direction:column;gap:12px;width:min(560px,100%);display:flex}.sw-settings__head{justify-content:space-between;align-items:center;gap:12px;display:flex}.sw-settings__head h2{margin:0}.sw-settings__close{color:#fff;background:#2a2638;border:2px solid #000;border-radius:4px;min-width:96px;min-height:48px;padding:0 16px;font:800 15px system-ui,sans-serif}.sw-settings__tabs{gap:6px;display:flex}.sw-settings__tab{color:#fff;background:#2a2638;border:2px solid #000;border-radius:4px;flex:1;min-height:52px;font:800 17px system-ui,sans-serif}.sw-settings__tab.on{background:var(--gold);color:#111}.sw-settings__pane{flex-direction:column;gap:10px;display:flex}.swt-row{background:#ffffff0f;border-radius:6px;flex-direction:column;gap:8px;padding:12px;display:flex}.swt-row--toggle{flex-flow:wrap;align-items:center}.swt-row>b{font:italic 800 18px system-ui,sans-serif}.swt-row--toggle>b{flex:140px}.swt-seg{flex-wrap:wrap;gap:6px;display:flex}.swt-seg button{color:#fff;background:#2a2638;border:2px solid #000;border-radius:4px;min-width:64px;min-height:48px;padding:0 12px;font:700 15px system-ui,sans-serif}.swt-seg button.on{background:var(--gold);color:#111}.sw-switch{background:#2a2638;border:2px solid #000;border-radius:22px;width:76px;height:44px;padding:0;position:relative}.sw-switch i{background:#fff;border-radius:50%;width:32px;height:32px;transition:transform .12s;position:absolute;top:4px;left:4px}.sw-switch[aria-checked=true]{background:var(--gold)}.sw-switch[aria-checked=true] i{transform:translate(32px)}.sw-settings button.focus{outline:4px solid var(--cyan);outline-offset:2px}@media (orientation:portrait){.screen.vs{flex-flow:column;padding:0}.vs-side{box-sizing:border-box;flex:50%;width:100%;min-height:0;padding:32px 20px}.vs-left{clip-path:polygon(0 0,100% 0,100% 82%,0 100%);justify-content:flex-start}.vs-right{clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);padding-bottom:calc(64px + var(--sab));justify-content:flex-end}.vs-mark{top:50%}}@media (orientation:landscape) and (height<=520px){.screen{padding-top:calc(10px + var(--sat));padding-bottom:calc(10px + var(--sab));gap:8px}.logo span{font-size:clamp(36px,15vh,110px)}.logo.small span{font-size:clamp(24px,8vh,48px)}.menu{gap:6px}.menu button{min-height:48px;padding:2px 16px}.menu button b{font-size:20px}.main .menu{grid-template-columns:1fr 1fr;width:min(640px,100%);display:grid}.cards{--reserve:140px;gap:10px}.title-art{pointer-events:none;justify-content:space-between;align-items:flex-end;width:auto;height:auto;padding:0 3vw;position:absolute;inset:0}.title-art .pic{width:30vw;height:82vh}h2{font-size:clamp(22px,8vh,44px)}.pause .menu{grid-template-columns:1fr 1fr;width:min(640px,100%);display:grid}.results .menu{flex-flow:row;justify-content:center;gap:6px;width:100%}.results .menu button{flex:1 1 0;min-width:0;padding:2px 8px}.results .menu button b{white-space:nowrap;font-size:clamp(13px,1.8vw,16px)}.cont{flex-direction:row;width:min(640px,100%)}.cont button{flex:1 1 0}.cont .big{min-height:80px}.screen.results,.screen.continue{padding-top:calc(84px + var(--sat))}.screen.results{grid-template-columns:minmax(0,1fr) minmax(0,600px) minmax(0,1fr);align-items:stretch;column-gap:12px;display:grid}.res-art,.res-art.none{display:contents}.res-l{grid-area:1/1}.res-r{grid-area:1/3}.res-main{grid-area:1/2;align-self:center;gap:8px}.count{font-size:clamp(72px,24vh,110px)}.cont-bust{height:clamp(56px,16vh,96px)}}@media (orientation:landscape) and (height<=520px) and (width<=719px){.res-art,.res-art.none{display:none}}