:root{--bg-color:#1e1e1e;--panel-color:#242424;--txt-color:#fefefe;--muted-color:#a9a9a9;--line-color:#aeaeae;--c1:#858585;--c2:#4f4f4f;--accent:#fff36b}*{box-sizing:border-box}html,body{overflow:hidden;width:100%;height:100%;margin:0}body,button{text-transform:uppercase;font-family:"Press Start 2P",monospace}body{background:var(--bg-color);color:var(--txt-color);user-select:none;font-size:16px;line-height:1.6}button{color:inherit}#app{display:flex;width:100vw;height:100vh;background:var(--bg-color);flex-direction:column;height:100dvh}#top-board{z-index:5;display:flex;padding:max(7px,env(safe-area-inset-top))max(10px,env(safe-area-inset-right))7px max(10px,env(safe-area-inset-left));background:var(--bg-color);border-bottom:1px solid #383838;align-items: center;gap:16px;min-height:62px}.scoreboard{display:flex;flex-wrap:wrap;align-items: center;gap:4px 22px;min-width:0}.scoreboard span:not(:first-child):before{content:"/";color:#5f5f5f;margin-right:22px}#playfield{position:relative;overflow:hidden;background:var(--bg-color);flex:1;min-height:0}#box{position:absolute;z-index:2;border-width:1px;border-color:var(--txt-color);cursor:none;touch-action:manipulation}#box.mode-blind{cursor:crosshair;animation:fade-out 2s linear forwards}#box.mode-flash{cursor:crosshair;transition:opacity .12s linear}#box.mode-flash.box-hidden{opacity:0}#box.round-result{opacity:1;animation:none;cursor:pointer}.line{position:absolute;z-index:1;pointer-events:none;background:var(--line-color)}.line-v{width:1px;height:100%;top:0}.line-h{width:100%;height:1px;left:0}.bullseye,.bullseye i{position:absolute;pointer-events:none;top:50%;left:50%}.bullseye i{display:block;border-radius:50%;transform:translate(-50%,-50%)}.bullseye i:first-child{background:var(--c1);width:24px;height:24px}.bullseye i:nth-child(2){background:var(--c2);width:12px;height:12px}.bullseye i:nth-child(3){background:#fff;width:2px;height:2px}.click-marker{position:absolute;z-index:3;border:2px solid var(--accent);pointer-events:none;border-radius:50%;width:9px;height:9px;transform:translate(-50%,-50%)}.click-marker.perfect{border-color:#70ff8d;box-shadow:0 0 0 3px #70ff8d33}.round-score{position:absolute;z-index:4;text-align:right;white-space:nowrap;pointer-events:none;background:var(--bg-color);padding:5px 7px;bottom:8px;right:8px}.round-score b{font-size:1.25em}.round-score small{display:block;color:var(--muted-color);font-size:.55em;line-height:1.5}.start-hint{position:absolute;z-index:1;color:var(--muted-color);text-align:center;pointer-events:none;max-width:calc(100% - 40px);font-size:.65rem;bottom:24px;left:50%;transform:translate(-50%)}.start-hint.subtle{opacity:.45}.btn{display:inline-flex;border:1px solid var(--txt-color);cursor:pointer;background:var(--bg-color);border-radius:0;justify-content:center;align-items: center;gap:8px;min-height:44px;padding:9px 15px;font-size:.65rem;line-height:1.45;box-shadow:5px 5px #fff3}.btn:hover,.btn:active{box-shadow:none;transform:translate(5px,5px)}.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.mode-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.audio-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.volume-control input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.btn.compact{min-height:38px;padding:6px 12px}.btn.primary{border-color:var(--accent);color:var(--accent)}#btn-menu{flex:none;margin-left:auto}.dialog{position:fixed;z-index:20;overflow:auto;border:4px double var(--txt-color);background:var(--panel-color);width:min(720px,100vw - 32px);max-height:calc(100dvh - 32px);padding:28px;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax #0000009e}.eyebrow{color:var(--muted-color);font-size:.56rem;line-height:1.6}.dialog h1,.dialog h2,.dialog p{margin:0}.dialog h1{margin-top:7px;font-size:clamp(1.7rem,7vw,3rem);line-height:1.2}.dialog h1 small{color:var(--muted-color);font-size:.28em}.dialog h2{margin-top:5px;font-size:clamp(1rem,3vw,1.5rem);line-height:1.5}.final-dialog{text-align:center;width:min(580px,100vw - 32px)}.recap-shell{width:min(200px,52vw);margin:20px auto 24px}.recap-caption{display:flex;color:var(--muted-color);justify-content:space-between;margin-bottom:5px;font-size:.45rem;line-height:1.5}.recap-target{position:relative;aspect-ratio:1;border:1px solid var(--txt-color);background:var(--bg-color);overflow:hidden;width:100%;box-shadow:5px 5px #fff3}.recap-line{position:absolute;z-index:1;display:block;background:var(--c2)}.recap-line-v{width:1px;height:100%;top:0;left:50%}.recap-line-h{width:100%;height:1px;top:50%;left:0}.recap-bullseye,.recap-bullseye i{position:absolute;pointer-events:none;top:50%;left:50%}.recap-bullseye{z-index:2}.recap-bullseye i{display:block;border-radius:50%;transform:translate(-50%,-50%)}.recap-bullseye i:first-child{background:var(--c1);width:28px;height:28px}.recap-bullseye i:nth-child(2){background:var(--c2);width:14px;height:14px}.recap-bullseye i:nth-child(3){background:var(--txt-color);width:2px;height:2px}.recap-callouts{position:absolute;z-index:3;overflow:hidden;width:100%;height:100%;inset:0}.shot-impact{fill:var(--accent);stroke:var(--bg-color);stroke-width:.75;filter:drop-shadow(0 0 1.2px var(--accent))}.run-stats,.lifetime-stats{display:grid;gap:10px}.run-stats{grid-template-columns:repeat(4,1fr);border-top:1px solid #474747;border-bottom:1px solid #474747;gap:0}.run-stats div,.lifetime-stats div{border:1px solid #474747;min-width:0;padding:10px 6px}.run-stats div{position:relative;border:0}.run-stats div+div:before{content:"/";position:absolute;color:#5f5f5f;left:0}.run-stats b,.run-stats small,.lifetime-stats b,.lifetime-stats small{display:block}.run-stats b,.lifetime-stats b{color:var(--accent);font-size:.8rem}.run-stats b.zero,.lifetime-stats b.zero{color:var(--muted-color)}.run-stats small,.lifetime-stats small{color:var(--muted-color);margin-top:6px;font-size:.42rem;line-height:1.5}.new-record{color:#70ff8d;font-size:.65rem;margin-top:18px!important}.dialog-actions,.menu-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:22px}.dialog-heading{display:flex;justify-content:space-between;align-items: flex-start;gap:18px}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}.mode-card{cursor:pointer;text-align:left;background:var(--bg-color);border:1px solid #595959;min-height:100px;padding:14px}.mode-card:last-child:nth-child(odd){grid-column:1/-1;min-height:0}.card-skew b{display:inline-block;transform:skew(-12deg)}.mode-card:hover{border-color:var(--txt-color)}.mode-card.selected{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}.mode-card b,.mode-card small{display:block}.mode-card b{color:var(--accent);font-size:.7rem}.mode-card small{color:var(--muted-color);margin-top:10px;font-size:.48rem;line-height:1.65}.lifetime-stats{grid-template-columns:repeat(5,1fr);text-align:center;margin-top:18px}.audio-panel{background:var(--bg-color);border:1px solid #474747;margin-top:18px}.audio-heading{display:flex;color:var(--muted-color);border-bottom:1px solid #474747;justify-content:space-between;align-items: center;gap:16px;padding:7px 10px;font-size:.45rem;line-height:1.5}.audio-heading output{color:var(--accent)}.audio-controls{display:grid;grid-template-columns:auto auto minmax(180px,1fr);align-items:stretch}.audio-toggle{display:flex;cursor:pointer;color:#777;background:0 0;border:0;border-right:1px solid #474747;align-items: center;gap:8px;min-height:46px;padding:8px 12px;font-size:.48rem}.audio-toggle:hover{color:var(--txt-color)}.audio-toggle i{background:0 0;border:1px solid #666;width:7px;height:7px}.audio-toggle.enabled{color:var(--txt-color)}.audio-toggle.enabled i{border-color:var(--accent);background:var(--accent);box-shadow:0 0 7px color-mix(in srgb,var(--accent)65%,transparent)}.volume-control{display:grid;grid-template-columns:auto minmax(90px,1fr);color:var(--muted-color);align-items: center;gap:12px;min-height:46px;padding:8px 12px;font-size:.43rem}.volume-control input{appearance:none;cursor:ew-resize;background:repeating-linear-gradient(90deg,#5a5a5a 0 3px,#0000 3px 10%) 50%/100% 8px no-repeat;width:100%;height:22px;margin:0}.volume-control input::-webkit-slider-thumb{border:2px solid var(--accent);appearance:none;background:var(--bg-color);border-radius:0;width:11px;height:20px;box-shadow:3px 0 #ffffff26}.volume-control input::-moz-range-track{background:repeating-linear-gradient(90deg,#5a5a5a 0 3px,#0000 3px 10%);border:0;height:8px}.volume-control input::-moz-range-thumb{border:2px solid var(--accent);background:var(--bg-color);border-radius:0;width:9px;height:18px;box-shadow:3px 0 #ffffff26}.menu-actions .btn{flex-direction:column}.menu-actions .btn small{color:var(--muted-color);font-size:.42rem}.menu-note{color:#757575;text-align:center;font-size:.44rem;line-height:1.7;margin-top:22px!important}.spin-wheel:hover{animation:spin-wheel 1s ease-in-out infinite both}.toast{position:fixed;z-index:40;left:50%;bottom:max(18px,env(safe-area-inset-bottom));border:1px solid var(--txt-color);background:var(--bg-color);padding:10px 14px;font-size:.55rem;transform:translate(-50%)}#color{position:fixed;z-index:100;pointer-events:none;mix-blend-mode:multiply;inset:0}@keyframes fade-out{0%{border-color:var(--txt-color)}to{border-color:var(--bg-color)}}@keyframes spin-wheel{0%,20%,40%,to{transform:rotate3d(0,0,0,0)}10%,30%,50%{transform:rotateX(180deg)}0%{color:red}20%{color:#0ff}40%{color:#ff69b4}to{color:inherit}}@media (max-width:700px){body{font-size:11px}#top-board{gap:8px;min-height:58px}.scoreboard{gap:2px 10px;line-height:1.5}.scoreboard span:not(:first-child):before{margin-right:10px}.dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:18px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:78px}.lifetime-stats{grid-template-columns:repeat(3,1fr)}.audio-controls{grid-template-columns:1fr 1fr}.audio-toggle:nth-child(2){border-right:0}.volume-control{grid-column:1/-1;border-top:1px solid #474747}.run-stats{grid-template-columns:repeat(2,1fr)}.run-stats div:nth-child(3),.run-stats div:nth-child(4){border-top:1px solid #474747}.run-stats div:nth-child(3):before{content:none}.dialog-actions .btn,.menu-actions .btn{flex:150px}.round-score{font-size:.7rem}}@media (max-height:680px){.recap-shell{width:130px;margin:10px auto 14px}.dialog{padding-block-start:16px;padding-block-end:16px}.dialog-actions,.menu-actions{margin-top:14px}}@media (prefers-reduced-motion:reduce){#box.mode-blind{animation-duration:.01ms}#box.mode-flash{transition:none}.spin-wheel:hover{animation:none}}