:root{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#eee9d9;background:#101522;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1500px;margin:auto;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}header{grid-column:1/-1}.eyebrow{font-size:11px;letter-spacing:3px;color:#91cbbb}h1{font-size:clamp(26px,4vw,48px);letter-spacing:-2px;margin:10px 0}h1 em{font-style:normal;color:#dfe391}header p{font-size:12px;color:#9da6b9}#viewport{height:clamp(450px,70vh,850px);border:1px solid #394054;border-radius:5px;overflow:hidden}canvas{display:block}aside{background:#1c2435;border:1px solid #394054;padding:22px;border-radius:5px}.status{display:grid;gap:12px;margin-bottom:30px;font-size:11px;color:#9da6b9}.status strong{font-size:24px;color:#dfe391}label{display:block;font-size:12px;margin:24px 0}output{float:right;color:#a5d8c8}input{display:block;width:100%;margin-top:14px;accent-color:#dfe391}.buttons{display:grid;gap:10px;margin-top:30px}button{font:inherit;font-weight:700;padding:14px;background:#dfe391;color:#171c2a;border:0;border-radius:3px;cursor:pointer}button+button{background:#354057;color:#eee9d9}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #e883a0;outline-offset:4px}.hint{font-size:11px;line-height:1.9;color:#a6afc2}.specs{border-top:1px solid #394054;margin-top:26px;padding-top:20px;font-size:10px;line-height:2;color:#91cbbb}footer{grid-column:1/-1;color:#818da5;font-size:10px;letter-spacing:1px;display:flex;justify-content:space-between}@media(max-width:800px){main{padding:14px;grid-template-columns:1fr}#viewport{height:58vh}aside{padding:16px}footer{font-size:8px}}html{overflow-x:hidden;overscroll-behavior-x:none;-webkit-text-size-adjust:100%}body{min-width:0;overflow-x:hidden}main,header,aside,#viewport{min-width:0}main{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}#viewport{touch-action:pan-y;position:relative}canvas{width:100%;height:100%;max-width:100%}input[type=range]{height:44px;margin:4px 0 0;touch-action:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{width:28px;height:28px}button{min-height:48px;touch-action:none;-webkit-tap-highlight-color:transparent}@media(pointer:coarse){input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:8px;background:#53607a;border-radius:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#dfe391;border:2px solid #101522;border-radius:50%;margin-top:-10px}input[type=range]::-moz-range-track{height:8px;background:#53607a;border-radius:4px}input[type=range]::-moz-range-thumb{width:26px;height:26px;background:#dfe391;border:2px solid #101522;border-radius:50%}}@media(max-width:800px){main{padding:10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom));gap:8px}header .eyebrow{font-size:9px;letter-spacing:2px}h1{font-size:25px;margin:4px 0;letter-spacing:-1px}header p{display:none}#viewport{height:40vh;height:40dvh;min-height:200px;max-height:500px}aside{padding:10px 14px}.status{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:10px}.status strong{font-size:18px;white-space:nowrap}label{margin:4px 0;font-size:12px}.buttons{grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.hint,.specs{display:none}footer{font-size:8px;letter-spacing:0;gap:8px}}@media(max-height:500px)and (orientation:landscape)and (max-width:1000px){main{height:100vh;height:100dvh;grid-template-columns:minmax(0,1fr) minmax(240px,34%);grid-template-rows:30px minmax(0,1fr);gap:6px;padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}header{grid-column:1/-1;display:flex;align-items:center;gap:20px}header .eyebrow{font-size:8px}h1{font-size:20px;margin:0}header p,footer{display:none}#viewport{height:100%;min-height:0;max-height:none}aside{padding:6px 10px;overflow-y:auto;overscroll-behavior:contain}.status{margin-bottom:2px}.status strong{font-size:16px}label{margin:0;font-size:11px}input[type=range]{height:44px;margin:0}.buttons{margin-top:2px;grid-template-columns:1fr 1fr;gap:8px}button{padding:8px;font-size:12px}.hint,.specs{display:none}}@media(max-width:800px)and (orientation:portrait){main{min-height:100vh;min-height:100dvh;grid-template-rows:auto minmax(210px,1fr) auto;gap:6px;padding:6px;padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;justify-content:space-between;gap:8px}header .eyebrow{font-size:7px;letter-spacing:.5px;max-width:90px}h1{font-size:22px;margin:2px 0}#viewport{height:100%;min-height:210px;max-height:none}aside{padding:8px 10px}.status{margin-bottom:3px}label{margin:1px 0}.buttons{margin-top:2px}footer{display:none}}@media(max-height:500px)and (orientation:landscape)and (max-width:1000px){main{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));grid-template-columns:minmax(0,1fr) minmax(230px,31%);grid-template-rows:24px minmax(0,1fr);gap:4px}header{gap:12px}aside{padding:4px 8px}}#scoreboard{grid-column:1/-1;min-width:0;background:#20162f;border:1px solid #694586;border-radius:4px;padding:5px 8px}.score-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#e8dfcc;line-height:18px}.score-heading strong{color:#dfe391;font-size:16px}.frames{list-style:none;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));padding:0;margin:3px 0 0;gap:3px}.frames li{border:1px solid #514064;background:#151725;min-width:0;text-align:center;display:grid;grid-template-columns:15px 1fr;grid-template-rows:17px 20px;overflow:hidden}.frames li.current{border-color:#e887df;background:#38254b;box-shadow:inset 0 0 0 1px #e887df}.frame-number{font-size:9px;color:#9da6b9;align-self:center}.rolls{display:flex;justify-content:flex-end}.rolls b{font-size:11px;min-width:15px;border-left:1px solid #514064;font-weight:400}.frame-total{grid-column:1/-1;font-size:14px;color:#dfe391}#celebration{position:absolute;left:5%;right:5%;top:42%;padding:15px 5px;text-align:center;z-index:2;pointer-events:none;color:#fff591;background:#251142e8;border:3px solid #fa73d2;text-shadow:3px 3px #6a2889;font-size:clamp(20px,4vw,42px);font-weight:1000;letter-spacing:1px;image-rendering:pixelated;animation:arcade-pop .25s steps(4,end)}#celebration[hidden]{display:none}#celebration.still{animation:none}#celebration[data-kind=spare]{border-color:#45d8ff;color:#b5f5ff}#celebration[data-kind=complete]{font-size:clamp(20px,3vw,34px)}@keyframes arcade-pop{0%{transform:scale(.9);opacity:.4}to{transform:scale(1);opacity:1}}.buttons #mute{grid-column:1/-1;min-height:44px;font-size:11px;padding:7px;background:#342540;color:#d5c9de}@media(max-width:800px){#scoreboard{padding:3px 5px}.frames{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:2px}.frames li{grid-template-rows:15px 16px;grid-template-columns:12px 1fr}.frame-total{font-size:12px}.rolls b{min-width:13px;font-size:10px}.score-heading{font-size:10px;line-height:16px}.score-heading strong{font-size:14px}.buttons{grid-template-columns:1fr 1fr 44px}.buttons #mute{grid-column:auto;font-size:10px;line-height:1.3;padding:3px}.buttons button{font-size:12px;padding:8px}}@media(max-width:800px)and (orientation:portrait){main{grid-template-rows:auto auto minmax(210px,1fr) auto}}@media(max-height:500px)and (orientation:landscape)and (max-width:1000px){main{grid-template-rows:24px auto minmax(0,1fr)}#scoreboard{padding:2px 5px}.score-heading{display:none}.frames{grid-template-columns:repeat(10,minmax(0,1fr))}.frames li{grid-template-rows:14px 16px}#viewport{grid-row:3}aside{grid-row:3}.buttons{grid-template-columns:1fr 1fr}.buttons #mute{grid-column:1/-1}}@media(prefers-reduced-motion:reduce){#celebration{animation:none}}@media(max-height:500px)and (orientation:landscape)and (max-width:1000px){.buttons{grid-template-columns:1fr 1fr 44px}.buttons #mute{grid-column:auto;padding:3px;font-size:10px;line-height:1.3}.buttons button{padding:6px;font-size:11px}}@media(max-width:800px)and (orientation:portrait){main{height:100vh;height:100dvh;min-height:498px;max-height:600px;grid-template-rows:29px 76px minmax(160px,1fr) auto;gap:3px;padding-top:4px;padding-bottom:4px}header{height:29px}#scoreboard{padding:2px 4px}.score-heading{line-height:16px}.frames{margin-top:1px;gap:1px}.frames li{grid-template-rows:13px 13px}.frame-total{font-size:11px;line-height:13px}aside{padding:4px 8px}.status{min-height:22px;margin-bottom:2px;line-height:16px}.status strong{font-size:16px}label{position:relative;height:44px;margin:0;padding:4px 60% 0 0;font-size:10px;line-height:16px}output{display:block;float:none;font-size:11px;white-space:nowrap}input[type=range]{position:absolute;right:0;top:0;width:58%;height:44px;margin:0}.buttons{margin-top:2px;gap:6px}#viewport{min-height:160px}}@media(max-height:500px)and (orientation:landscape)and (max-width:1000px){main{grid-template-rows:20px 36px minmax(0,1fr);gap:3px}aside{padding:2px 6px}.status{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:18px;margin-bottom:0;line-height:16px;font-size:10px}.status strong{font-size:14px}label{position:relative;height:44px;margin:0;padding:4px 60% 0 0;font-size:10px;line-height:16px}output{display:block;float:none;font-size:11px;white-space:nowrap}input[type=range]{position:absolute;right:0;top:0;width:58%;height:44px;margin:0}.buttons{margin-top:2px;gap:4px}}