*{margin:0;padding:0;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}html,body{height:100dvh;overflow:hidden}body{background:#0a0a0a;color:#fff;font-family:monospace;display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;gap:8px;padding:8px 0;box-sizing:border-box}#mode-switch,#versus-controls{flex:0 0 auto}#mode-switch{display:flex;gap:4px;padding:4px;border:1px solid #333;border-radius:4px;background:#0006}.mode-btn{font-family:monospace;font-size:.9rem;padding:6px 14px;border:1px solid transparent;border-radius:3px;background:transparent;color:#888;cursor:pointer;letter-spacing:1px;transition:color .2s,background .2s,border-color .2s}.mode-btn:hover{color:#ccc}.mode-btn.active{background:linear-gradient(135deg,#00eaff22,#ff2d9522);border-color:#fff;color:#fff;text-shadow:0 0 8px currentColor}.mode-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}#versus-app{display:flex;align-items:stretch;justify-content:center;gap:18px;padding:6px;flex:1 1 auto;min-height:0;box-sizing:border-box;border:2px solid #1a1a3a;border-radius:8px;background:radial-gradient(ellipse at center,#0a0a22,#050510);box-shadow:0 0 30px #00eaff1a,0 0 30px #ff2d951a;position:relative}.vs-start-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;padding:clamp(18px,3vw,34px) clamp(42px,8vw,96px);font-family:monospace;font-weight:900;letter-spacing:.2em;color:#fff;background:linear-gradient(135deg,#00eaff2e,#ff2d952e);border:3px solid #fff;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;animation:vs-start-overlay-pulse 1.8s ease-in-out infinite;text-shadow:0 0 14px #fff,0 0 28px #00eaff}.vs-start-overlay:hover,.vs-start-overlay:focus-visible{outline:none;cursor:pointer;color:#fff;border-color:#fff;background:linear-gradient(90deg,#00eaff,#ff2d95,#fe0,#00eaff);background-size:300% 100%;animation:vs-start-wobble .52s ease-in-out infinite alternate,vs-start-gradient-pan 2.6s linear infinite;box-shadow:0 0 0 3px #000,0 0 0 7px #fff,0 0 50px #00eafff2,0 0 110px #ff2d95e6}.vs-start-overlay:hover .vs-start-overlay-label,.vs-start-overlay:focus-visible .vs-start-overlay-label{-webkit-text-stroke:1px #000;text-shadow:-2px 0 0 #000,2px 0 0 #000,0 -2px 0 #000,0 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,-4px 0 #00eaff,4px 0 #ff2d95,0 0 18px #fff,0 0 36px #fff}.vs-start-overlay:hover .vs-start-overlay-hint,.vs-start-overlay:focus-visible .vs-start-overlay-hint{color:#fff;font-weight:900;text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.8)}.vs-start-overlay:hover .vs-start-overlay-label>span,.vs-start-overlay:focus-visible .vs-start-overlay-label>span{animation:vs-start-letter-dance .62s cubic-bezier(.22,1.6,.36,1) infinite}.vs-start-overlay:hover .vs-start-overlay-label>span:nth-child(1),.vs-start-overlay:focus-visible .vs-start-overlay-label>span:nth-child(1){animation-delay:0ms}.vs-start-overlay:hover .vs-start-overlay-label>span:nth-child(2),.vs-start-overlay:focus-visible .vs-start-overlay-label>span:nth-child(2){animation-delay:70ms}.vs-start-overlay:hover .vs-start-overlay-label>span:nth-child(3),.vs-start-overlay:focus-visible .vs-start-overlay-label>span:nth-child(3){animation-delay:.14s}.vs-start-overlay:hover .vs-start-overlay-label>span:nth-child(4),.vs-start-overlay:focus-visible .vs-start-overlay-label>span:nth-child(4){animation-delay:.21s}.vs-start-overlay:hover .vs-start-overlay-label>span:nth-child(5),.vs-start-overlay:focus-visible .vs-start-overlay-label>span:nth-child(5){animation-delay:.28s}.vs-start-overlay:active{animation-play-state:paused;transform:translate(-50%,-50%) scale(1.02);box-shadow:0 0 0 3px #000,0 0 0 7px #fff,0 0 25px #00eaff80,0 0 55px #ff2d9580}@keyframes vs-start-wobble{0%{transform:translate(-50%,-50%) scale(1.08) rotate(-1.2deg)}to{transform:translate(-50%,-50%) scale(1.14) rotate(1.2deg)}}@keyframes vs-start-gradient-pan{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes vs-start-letter-dance{0%,to{transform:translateY(0) scale(1) rotate(0)}50%{transform:translateY(-14px) scale(1.2) rotate(-4deg)}}.vs-start-overlay[hidden]{display:none}.vs-start-overlay-label{font-size:clamp(2.2rem,6vw,4.8rem);line-height:1;display:inline-flex;gap:.03em}.vs-start-overlay-label>span{display:inline-block;transform-origin:center bottom}.vs-start-overlay-hint{font-size:clamp(.7rem,1.5vw,1rem);color:#bbb;font-weight:500;letter-spacing:.3em}@keyframes vs-start-overlay-pulse{0%,to{box-shadow:0 0 30px #00eaff8c,0 0 60px #ff2d9566;transform:translate(-50%,-50%) scale(1)}50%{box-shadow:0 0 55px #00eaffd9,0 0 110px #ff2d95bf;transform:translate(-50%,-50%) scale(1.04)}}.vs-side{display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;gap:8px;position:relative;min-height:0;min-width:0}.vs-player-tag{font-size:1rem;font-weight:700;letter-spacing:2px;padding:3px 14px;border-radius:3px;text-shadow:0 0 8px currentColor;border:1px solid currentColor}.vs-side-left .vs-player-tag{color:#00eaff}.vs-side-right .vs-player-tag{color:#ff2d95}.vs-board{display:block;height:auto;width:auto;max-height:100%;max-width:100%;min-height:0;min-width:0;border:2px solid #333;touch-action:none;image-rendering:pixelated}.vs-side-left .vs-board{box-shadow:0 0 18px #00eaff59}.vs-side-right .vs-board{box-shadow:0 0 18px #ff2d9559}.vs-lead-counter{position:absolute;top:25%;z-index:10;pointer-events:none;font-family:monospace;font-weight:900;font-size:clamp(2.5rem,7vw,6rem);letter-spacing:.02em;line-height:1;opacity:0;transition:opacity .25s ease;-webkit-text-stroke:2px #000;-webkit-user-select:none;user-select:none;white-space:nowrap;display:flex;align-items:baseline;gap:.05em}.vs-side-left .vs-lead-counter{right:-4%;color:#00eaff;text-shadow:0 0 12px #00eaff,0 0 28px #00eaff,0 0 54px #00eaff,3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000}.vs-side-right .vs-lead-counter{left:-4%;color:#ff2d95;text-shadow:0 0 12px #ff2d95,0 0 28px #ff2d95,0 0 54px #ff2d95,3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000}.vs-lead-counter.active{opacity:1}.vs-lead-counter .vs-lead-unit{font-size:.45em;font-weight:700;opacity:.85;align-self:flex-end}.vs-lead-num{position:relative;display:inline-block}.vs-lead-num:before,.vs-lead-num:after{content:attr(data-num);position:absolute;left:0;top:0;color:inherit;pointer-events:none;opacity:0;transform-origin:center}.vs-lead-counter.pop .vs-lead-num:before{animation:vs-lead-ghost .5s cubic-bezier(.22,1,.36,1)}.vs-lead-counter.pop .vs-lead-num:after{animation:vs-lead-ghost-big .58s cubic-bezier(.22,1,.36,1)}@keyframes vs-lead-ghost{0%{opacity:.55;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(2.1);filter:blur(3px)}}@keyframes vs-lead-ghost-big{0%{opacity:.35;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(3);filter:blur(6px)}}.vs-lead-counter.pop .vs-lead-num{animation:vs-lead-pop .55s cubic-bezier(.22,1.6,.36,1)}@keyframes vs-lead-pop{0%{transform:scale(1)}15%{transform:scale(1.9) rotate(-3deg);color:#fff;filter:brightness(1.4)}35%{transform:scale(.85) rotate(2deg)}55%{transform:scale(1.15) rotate(-1deg)}80%{transform:scale(.95)}to{transform:scale(1);color:inherit;filter:none}}.vs-lead-counter.tier-fire.active{animation:vs-lead-fire-pulse .7s ease-in-out infinite alternate}@keyframes vs-lead-fire-pulse{0%{filter:drop-shadow(0 0 14px #ff9422) drop-shadow(0 0 28px #ff5522)}to{filter:drop-shadow(0 0 28px #ffcc44) drop-shadow(0 0 52px #ff2211)}}.vs-lead-counter.tier-blaze.active{animation:vs-lead-blaze-pulse .42s ease-in-out infinite alternate,vs-lead-blaze-shake .2s ease-in-out infinite}@keyframes vs-lead-blaze-pulse{0%{filter:drop-shadow(0 0 22px #ffee00) drop-shadow(0 0 48px #ff0033)}to{filter:drop-shadow(0 0 38px #ffaa00) drop-shadow(0 0 72px #ff00aa) drop-shadow(0 0 100px #ff5500)}}@keyframes vs-lead-blaze-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-1px,3px)}}.vs-next-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.vs-next-label{font-size:.7rem;color:#666;letter-spacing:2px}.vs-next{border:1px solid #333;width:72px;height:72px}.vs-center{display:flex;align-items:stretch;align-self:stretch;flex:0 0 auto;min-height:0}#vs-gauge{display:block;height:100%;max-height:100%;border-radius:4px}#versus-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;padding:6px 12px;border:1px solid #222;border-radius:4px;background:#00000080}.vs-btn{font-family:monospace;font-size:.9rem;font-weight:700;letter-spacing:1px;padding:6px 16px;border:1px solid #555;border-radius:3px;background:transparent;color:#fff;cursor:pointer;text-shadow:0 0 6px currentColor;transition:background .15s,border-color .15s}.vs-btn:hover{background:#ffffff14;border-color:#fff}.vs-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}.vs-speed-label{font-size:.85rem;color:#aaa;display:flex;align-items:center;gap:6px}.vs-speed-label input{width:110px}.vs-btn-small{font-size:.75rem;padding:4px 10px;letter-spacing:.5px;color:#b967ff}.vs-btn-small:hover{border-color:#b967ff;color:#fff}#vs-ambient{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;background:#08081a}#vs-commentator{position:fixed;left:0;right:0;top:12vh;z-index:30;pointer-events:none;text-align:center;font-family:monospace;letter-spacing:2px}.vs-comm-main{display:inline-block;font-size:clamp(1.6rem,4.5vw,3.4rem);font-weight:700;color:var(--comm-color, #fff);padding:.2em .4em;opacity:0;text-shadow:0 0 8px var(--comm-color, #fff),0 0 22px var(--comm-color, #fff),0 0 42px var(--comm-color, #fff),3px 3px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000;-webkit-text-stroke:1px #000;filter:drop-shadow(0 4px 0 rgba(0,0,0,.6));transform:scale(.3);will-change:transform,opacity}.vs-comm-anim{animation:vs-comm-pop var(--comm-duration, 1.5s) cubic-bezier(.22,1.6,.36,1) forwards}@keyframes vs-comm-pop{0%{opacity:0;transform:scale(.3) translateY(20px) rotate(-2deg)}8%{opacity:1;transform:scale(1.35) translateY(0) rotate(1deg)}15%{transform:scale(.92) rotate(-.5deg)}22%{transform:scale(1.08)}30%{transform:scale(1)}70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1) translateY(-14px)}}.vs-comm-main:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.3) 3px,rgba(0,0,0,.3) 4px);mix-blend-mode:multiply;opacity:.5}#app{display:flex;gap:24px;flex:1 1 auto;min-height:0;min-width:0;max-width:100%;padding:0 12px;align-items:center;justify-content:center;box-sizing:border-box}#board{display:block;height:auto;width:auto;max-height:100%;max-width:100%;min-height:0;min-width:0;border:2px solid #333;touch-action:none;image-rendering:pixelated}#sidebar{display:flex;flex-direction:column;gap:16px;max-height:100%;overflow-y:auto;padding-right:4px;flex:0 0 auto}#hold-piece{text-align:center}#hold-piece h3{font-size:1rem;margin-bottom:8px;color:#888}#hold-canvas{border:1px solid #333}#next-piece{text-align:center}#next-piece h3{font-size:1rem;margin-bottom:8px;color:#888}#preview{border:1px solid #333}.queue-canvas{border:1px solid #333;width:80px;height:80px;margin-top:4px}#score-panel{font-size:1rem;line-height:2;color:#ccc}#score-panel span{color:#fff;font-weight:700}#theme-label{font-size:1rem;text-align:center;padding:8px;border:1px solid #333;border-radius:4px;transition:color .3s,border-color .3s}#theme-progress{height:3px;border-radius:1px;background:#ffffff1a;margin-top:4px;overflow:hidden}#theme-progress-bar{height:100%;width:0%;border-radius:1px;transition:background .3s}#ai-controls{display:flex;flex-direction:column;gap:8px}#ai-toggle{font-family:monospace;font-size:1rem;padding:8px 16px;border:1px solid #555;border-radius:4px;background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s}#ai-toggle:focus-visible,#mute-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}#ai-toggle.active{background:#4caf50;color:#000;border-color:#4caf50}#ai-speed-control{font-size:1rem;display:flex;flex-direction:column;gap:4px}#ai-speed-bar{height:4px;border-radius:2px;background:#4caf50;transition:background .3s}#ai-speed{width:100%}#mute-toggle{font-family:monospace;font-size:1rem;padding:8px 16px;border:1px solid #555;border-radius:4px;background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s}#mute-toggle.muted{opacity:.5}#das-controls{display:flex;flex-direction:column;gap:4px;font-size:1rem}#das-controls input{width:100%}@media(max-width:720px){html,body{height:auto;min-height:100dvh;overflow:visible}#versus-app{flex-wrap:wrap;gap:6px;padding:4px}.vs-center{order:3;flex-basis:100%;min-width:0}#vs-gauge{max-width:100%;height:auto}.vs-board{max-width:44vw}.vs-next-wrap{display:none}.vs-player-tag{font-size:.75rem;padding:2px 8px}}@media(max-width:600px){body{align-items:center;padding:8px}#app{flex-direction:column;align-items:center;gap:8px}#board{touch-action:none;max-width:min(90vw,27.5vh);max-height:55vh;aspect-ratio:1 / 2}#sidebar{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;max-width:95vw;overflow-y:visible;max-height:none}#hold-piece{order:0}#hold-piece h3{display:none}#hold-canvas{max-width:20vw}#next-piece{order:1}#next-piece h3{display:none}#preview{max-width:20vw}.queue-canvas{max-width:15vw;max-height:15vw}#score-panel{order:2;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:1rem}#ai-controls{order:4;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center}#ai-speed-control{flex-direction:row;align-items:center;gap:4px;font-size:1rem}#ai-speed{width:80px}#mute-toggle{order:5;padding:6px 12px}#das-controls{order:6;flex-direction:row;flex-wrap:wrap;gap:4px 8px;align-items:center}#das-controls label{font-size:1rem;white-space:nowrap}#das-controls input{width:60px}#theme-label{display:none}}