:root{color-scheme:dark;--navy:#101525;--blue:#263d72;--white:#fff3cf;--yellow:#ffd35b;--red:#ce4842}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#090e19;color:var(--white);font-family:'Courier New',monospace}body{display:flex;justify-content:center}button{font:inherit;cursor:pointer;border-radius:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}button:active{transform:translateY(2px)}#app{width:min(100%,680px);height:100svh;min-height:560px;display:flex;flex-direction:column;background:var(--navy);padding:0 16px max(4px,env(safe-area-inset-bottom));border-left:2px solid #304369;border-right:2px solid #304369}header{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:62px;border-bottom:3px solid #bd403d;flex-shrink:0}.brand{font-size:23px;font-weight:900;color:var(--white);text-decoration:none;letter-spacing:-1.3px;white-space:nowrap}.brand span{color:var(--red)}.edition{font-size:12px;color:#a9b7d4;letter-spacing:1px}.toolbar{display:flex;gap:6px}.toolbar button{height:34px;min-width:32px;padding:4px 6px;border:1px solid #526589;background:var(--navy);color:var(--white);font-size:16px}.toolbar #sound{font-size:12px}.toolbar button[aria-pressed=true]{color:var(--yellow);border-color:var(--yellow)}.scoreboard{display:grid;grid-template-columns:1.4fr 1fr 1fr;background:#202f54;border:2px solid #53668c;border-top:0;padding:10px 14px;flex-shrink:0}.scoreboard>div{display:flex;flex-direction:column;gap:4px}.scoreboard>div:not(:first-child){text-align:right}.scoreboard span{font-size:12px;color:#b7c7e3;letter-spacing:1px}.scoreboard strong{font-size:27px;line-height:1;color:var(--yellow);font-weight:900}.scoreboard small{font-size:14px;color:#e2e7f1;margin-left:5px}.playfield{flex:1;min-height:230px;display:flex;align-items:center;justify-content:center;position:relative;background:#101831;border:2px solid #53668c;border-top:0;overflow:hidden}canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;width:100%;height:100%;object-fit:contain}.status{flex-shrink:0;text-align:center;min-height:65px;padding:10px 4px 7px;display:flex;flex-direction:column;justify-content:center;gap:5px}.status strong{font-size:18px;letter-spacing:1px;color:var(--yellow)}.status span{font-size:14px;line-height:1.2;color:#c9d2e5}.status.hot{background:#263d72}.controls{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:16px;align-items:center;flex-shrink:0}.controls>button{height:72px;border:3px solid #8a9dc8;background:#2a4278;box-shadow:inset -3px -3px #18294f,inset 3px 3px #526aa0;color:var(--white);user-select:none;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.controls>button strong{font-size:24px}.controls>button small{font-size:12px;letter-spacing:1px}.controls #action{border-color:#ffe18a;background:#d44b40;box-shadow:inset -3px -3px #8c302c,inset 3px 3px #f27557}.controls #action.ready{background:#fcce53;border-color:white;color:#172347;box-shadow:inset -3px -3px #bb7f38,inset 3px 3px #ffef94}.controls #run.active{background:#5577ae}.momentum>span{display:flex;justify-content:space-between;font-size:12px;color:#c3cfea;margin-bottom:8px}.momentum b{color:var(--yellow)}.meter{height:14px;padding:2px;border:1px solid #788bab;background:#060c1a}.meter>div{height:100%;background:repeating-linear-gradient(90deg,#ffd35b 0 5px,transparent 5px 7px);width:0}footer{padding:12px 0 5px;display:flex;gap:6px;flex-direction:column;align-items:center;color:#9dacca;font-size:11px;line-height:1.3;text-align:center;flex-shrink:0}footer>span:last-child{font-size:10px;color:#7184ac}.result{position:absolute;width:min(290px,88%);top:50%;left:50%;transform:translate(-50%,-50%);background:#172748;border:4px solid #f8d166;outline:3px solid #0b142a;padding:22px;text-align:center;box-shadow:8px 8px #080e20aa}.result[hidden]{display:none}.result>span{font-size:12px;color:#abbce0}.result h1{font-size:24px;margin:14px 0 0;color:var(--yellow)}.bigscore{display:flex;justify-content:center;align-items:baseline;gap:10px}.bigscore strong{font-size:74px;color:var(--white)}.bigscore>span{font-size:20px;color:#a6bbdf}.result dl{border-top:2px solid #526589;padding-top:12px;margin:0 0 16px}.result dl>div{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;text-align:left}.result dt{font-size:12px;color:#a7b8d7}.result dd{font-size:14px;margin:0;text-align:right}.result button,dialog>button:last-child{padding:14px 12px;width:100%;border:2px solid #ffe49e;background:#c74b3f;color:#fff6d5;font-weight:bold;font-size:17px}dialog{background:#172748;color:var(--white);border:3px solid #eec865;padding:28px;width:min(470px,90vw);max-height:90svh}dialog::backdrop{background:#080e20cf}dialog h2{color:var(--yellow);font-size:24px}dialog ol{padding-left:24px}dialog li{padding-left:4px;margin-bottom:20px}dialog li b{font-size:15px}dialog p{font-size:15px;line-height:1.5;color:#c8d4eb}.close{position:absolute;right:12px;top:8px;border:0;background:none;color:#fff;font-size:28px}.fatal{padding:30px;position:absolute;inset:20%;background:var(--navy);color:var(--white)}
@media(min-width:701px){#app{margin:16px 0;height:calc(100svh - 32px);box-shadow:0 0 0 5px #080c15,0 0 0 7px #263755}header{min-height:62px}.scoreboard{padding:9px 18px}.playfield{min-height:240px}.controls{padding:0 16px}.status{min-height:68px}}
@media(max-width:480px){#app{padding-left:8px;padding-right:8px;border:0}header{min-height:54px}.brand{font-size:20px}.edition{display:none}.scoreboard{padding:9px 12px}.scoreboard strong{font-size:25px}.controls{gap:10px;grid-template-columns:1fr 1.05fr 1fr}.controls>button{height:68px}.controls>button strong{font-size:22px}footer{font-size:10px;padding:10px 0 5px}.status strong{font-size:17px}.status span{font-size:13px}}
@media(orientation:landscape) and (max-height:550px){#app{height:auto;min-height:100svh;width:min(100%,840px);display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:52px auto 1fr auto;gap:0 12px;padding:0 12px 6px;margin:0}header{grid-column:1/3;min-height:52px}.edition{display:none}.scoreboard{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;padding:12px 8px}.scoreboard>div:first-child{display:none}.scoreboard strong{font-size:25px}.playfield{grid-row:2/5;grid-column:1;min-height:280px;height:calc(100svh - 62px);border-top:2px solid #53668c}.status{grid-column:2;grid-row:3;align-self:center;padding:12px 0}.status strong{font-size:16px}.status span{font-size:13px;line-height:1.5}.controls{grid-column:2;grid-row:4;grid-template-columns:1fr 1fr;gap:8px;padding:0;align-self:end}.controls .momentum{grid-column:1/3;grid-row:1;padding:0 6px}.controls>button{height:65px}.controls>button strong{font-size:21px}footer{display:none}.result{padding:14px;width:255px}.result h1{font-size:22px;margin:8px 0}.bigscore strong{font-size:49px}.result dl{padding-top:8px;margin-bottom:10px}.result button{padding:9px}}
/* DOS/EGA palette: black score panels, electric blue, cyan, gray, red and green. */
:root{--navy:#080808;--blue:#0000aa;--white:#ffffff;--yellow:#ffff55;--red:#ff5555}header{border-bottom-color:#aaaaaa}.scoreboard{background:#000000;border-color:#aaaaaa}.scoreboard>div:first-child strong{color:#55ff55}.scoreboard>div:last-child strong{color:#ff5555}.scoreboard span{color:#ffffff}.playfield{background:#080808;border-color:#aaaaaa}.controls>button{background:#0000aa;border-color:#aaaaaa;box-shadow:inset -3px -3px #000066,inset 3px 3px #5555ff}.controls #action{background:#aa0000;border-color:#ff5555;box-shadow:inset -3px -3px #660000,inset 3px 3px #ff5555}.controls #action.ready{background:#55ff55;color:#000000;border-color:#ffffff;box-shadow:inset -3px -3px #00aa00,inset 3px 3px #aaffaa}.meter>div{background:repeating-linear-gradient(90deg,#55ff55 0 5px,transparent 5px 7px)}
.trick-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;flex-shrink:0;padding:0 0 4px}.trick-bar button{min-height:46px;border:2px solid #aaaaaa;background:#0000aa;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;touch-action:manipulation;user-select:none}.trick-bar b{font-size:12px}.trick-bar small{font-size:11px;color:#aaaaff}.trick-bar button:disabled{background:#171b28;border-color:#48516a;color:#8994a8;cursor:default;transform:none}.trick-bar button.used{color:#55ff55;border-color:#00aa00}.trick-bar button.performing{color:#ffff55;border-color:#ffff55;background:#282808}.combo-line{display:flex;justify-content:space-between;gap:10px;min-height:24px;font-size:12px;padding:4px 1px 6px;flex-shrink:0}.combo-line #combo{overflow-wrap:anywhere;color:#55ffff}.combo-line #combo-bonus{color:#ffff55;white-space:nowrap}.result>span{display:block;line-height:1.5;overflow-wrap:anywhere}.status{min-height:58px}.playfield{min-height:200px}
@media(max-height:750px) and (orientation:portrait){#app{min-height:580px}header{min-height:46px}.scoreboard{padding:7px 12px}.status{min-height:50px;padding:7px 4px}.status strong{font-size:15px}.status span{font-size:12px}.controls>button{height:58px}.trick-bar button{min-height:43px}footer{padding:7px 0 3px}footer>span:last-child{display:none}.playfield{min-height:190px}}
@media(orientation:landscape) and (max-height:550px){#app{grid-template-rows:46px auto 1fr auto auto auto;grid-template-columns:minmax(0,1fr) 230px}.playfield{grid-row:2/7;height:calc(100svh - 56px)}.trick-bar{grid-column:2;grid-row:4;gap:3px}.trick-bar b{font-size:9px}.trick-bar small{font-size:10px}.trick-bar button{padding:3px 0;min-height:43px}.combo-line{grid-column:2;grid-row:5;font-size:10px}.controls{grid-row:6}.controls>button{height:55px}.result{padding:12px}.result dl{margin-bottom:8px}.result dl>div{margin-bottom:5px}.status{min-height:0}.status span{font-size:12px}}
.short-label{display:none}@media(orientation:landscape) and (max-height:550px){.trick-bar b{font-size:12px}.trick-bar .long-label{display:none}.trick-bar .short-label{display:inline}}
/* Scorecard is a native dialog, so it can use the phone's full height. */
dialog.result{position:fixed;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;width:min(440px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;padding:18px;border:3px solid #ffff55;outline:none;box-shadow:7px 7px #080808aa;background:#080808;color:#fff;text-align:center}dialog.result::backdrop{background:#080e20cc}dialog.result .bigscore strong{font-size:54px}dialog.result h1{font-size:24px;margin:8px 0 0}.judges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:4px 0 15px}.judges>div{border:2px solid #aaa;background:#0000aa;padding:7px 2px;display:flex;flex-direction:column;gap:5px}.judges small{font-size:10px;color:#fff}.judges strong{font-size:25px;color:#ffff55}.result .attempt-summary{padding:10px 0 6px;margin:0}.result .attempt-summary dt{font-size:12px}.result .attempt-summary dd{font-size:13px;max-width:220px}.result .score-breakdown{padding:12px 0 4px;margin:0}.result .score-breakdown dt{font-size:14px;color:#ddd}.result .score-breakdown dd{font-size:14px;font-weight:bold;color:#55ffff}.result #score-note{font-size:12px;color:#aabbd5;line-height:1.5;margin:8px 0 14px}.result>span{color:#55ffff}.result button{position:sticky;bottom:0}.result[hidden]{display:none}@media(max-width:400px){dialog.result{padding:14px}.judges{gap:4px}.judges strong{font-size:23px}.judges small{font-size:9px}.result .attempt-summary dd{max-width:190px}}@media(orientation:landscape) and (max-height:550px){dialog.result{width:min(560px,calc(100vw - 24px));padding:15px}.judges{margin-bottom:10px}.result .bigscore strong{font-size:43px}.result dl>div{margin-bottom:7px}}
/* Mobile controls keep the EGA cabinet layout and room for both thumbs. */
#app{padding-top:env(safe-area-inset-top);padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.toolbar button{min-width:44px;min-height:44px}.toolbar #sound,.toolbar #haptics{font-size:12px}.toolbar [hidden]{display:none}.trick-bar button{touch-action:none;-webkit-touch-callout:none}.controls button,canvas{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}.close{min-width:44px;min-height:44px}.status span{font-size:14px}.combo-line{font-size:14px}.trick-bar b{font-size:14px}
@media(max-width:700px) and (orientation:portrait){
 #app{min-height:660px;height:100svh;padding-bottom:max(10px,env(safe-area-inset-bottom))}header{min-height:52px;gap:6px}.edition{display:none}.brand{font-size:20px}.toolbar{gap:4px}.toolbar button{padding:3px}.scoreboard{padding:7px 10px}.scoreboard strong{font-size:24px}.playfield{min-height:190px}.status{min-height:64px;padding:6px 2px}.status strong{font-size:16px}.status span{font-size:14px;line-height:1.3}.trick-bar{gap:4px}.trick-bar button{min-height:52px;padding:4px 1px}.trick-bar .long-label{display:none}.trick-bar .short-label{display:inline}.trick-bar small{display:none}.combo-line{min-height:36px;align-items:center;padding:4px 0;font-size:13px}.controls{grid-template-columns:1fr 1fr;gap:8px 14px;padding:0}.controls .momentum{grid-column:1/3;grid-row:1}.momentum>span{margin-bottom:4px;font-size:13px}.meter{height:10px}.controls>button{height:72px}.controls>button strong{font-size:25px}.controls>button small{font-size:14px}footer{display:none}
}
@media(max-width:360px) and (orientation:portrait){header{flex-wrap:wrap;padding:4px 0;row-gap:2px}.brand{flex:1}.toolbar{margin-left:auto}.toolbar button{min-width:44px}#app{min-height:690px}}
@media(orientation:landscape) and (max-height:550px){
 #app{grid-template-columns:minmax(0,1fr) minmax(250px,40%);grid-template-rows:52px auto 1fr auto auto auto;gap:0 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}header{min-height:52px}.playfield{height:calc(100svh - 70px);min-height:280px}.scoreboard{padding:6px 8px}.status{padding:7px 0;min-height:60px}.status span{font-size:14px;line-height:1.25}.trick-bar{gap:4px}.trick-bar button{min-width:44px;min-height:48px}.trick-bar b{font-size:14px}.trick-bar small{display:none}.combo-line{font-size:13px;min-height:34px}.controls>button{height:60px}.controls>button small{font-size:14px}.controls .momentum{padding:0}.momentum>span{margin-bottom:4px}
}
/* Replay controls stay on the court; the scorecard remains one tap away. */
#replay-controls{position:absolute;left:6px;right:6px;bottom:6px;background:#080808f0;border:2px solid #55ffff;padding:6px;display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;color:#55ffff;font-size:13px}#replay-controls[hidden]{display:none}#replay-controls button{min-height:44px;background:#0000aa;color:#fff;border:2px solid #aaa;font-size:14px;padding:5px 8px}#replay-progress{grid-column:1/-1;width:100%;height:6px;accent-color:#55ffff}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;bottom:0;background:#080808;padding-top:8px}.result .result-actions button{position:static;min-height:56px;padding:10px 6px;font-size:14px;line-height:1.3}.result #replay{background:#0000aa;border-color:#55ffff}.result #replay:disabled{opacity:.5}.result.record{border-color:#55ff55}.result.record h1{color:#55ff55}.controls>button:disabled{opacity:.5;transform:none;cursor:default}
@media(prefers-reduced-motion:no-preference){.result[open] .judges>div{animation:judge-card .24s ease-out both}.result[open] .judges>div:nth-child(2){animation-delay:.07s}.result[open] .judges>div:nth-child(3){animation-delay:.14s}.result[open] .judges>div:nth-child(4){animation-delay:.21s}.result[open] .judges>div:nth-child(5){animation-delay:.28s}@keyframes judge-card{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}
/* Game modes and local progress share the original arcade palette. */
.mode-bar{display:flex;align-items:center;gap:8px;min-height:50px;padding:3px 0;flex-shrink:0}.mode-bar>span{flex:1;text-align:center;color:#55ffff;font-size:13px;line-height:1.3}.mode-bar button{min-height:44px;padding:5px 8px;border:2px solid #aaa;background:#0000aa;color:#fff;font-size:14px}.mode-bar button:disabled{opacity:.45}.scoreboard span{font-size:12px;letter-spacing:0}.scoreboard strong{white-space:nowrap}#contest-summary{border:2px solid #55ffff;padding:10px;margin:12px 0}#contest-summary[hidden]{display:none}#contest-summary h2{font-size:18px;margin:0 0 10px;color:#55ffff}#contest-summary table{width:100%;border-collapse:collapse;font-size:14px}#contest-summary th,#contest-summary td{padding:6px 2px;text-align:center;border-bottom:1px solid #444}#contest-summary thead th{font-size:12px;color:#aaa}#contest-summary td:last-child{color:#ffff55;font-weight:bold}#contest-summary p{margin:10px 0 0;font-size:16px}#contest-total{color:#55ff55}.result #result-menu{position:static;min-height:44px;margin-top:8px;padding:8px;background:#151515;border-color:#aaa;font-size:14px}.mode-options{display:grid;gap:10px}.mode-options button{display:flex;flex-direction:column;gap:7px;align-items:flex-start;text-align:left;min-height:78px;padding:12px;background:#0000aa;color:#fff;border:2px solid #aaa}.mode-options b{font-size:17px;color:#ffff55}.mode-options span{font-size:14px;line-height:1.4}.progress-stats{display:grid;gap:10px}.progress-stats>div{display:flex;justify-content:space-between;gap:12px;font-size:15px}.progress-stats dd{margin:0;color:#55ffff;text-align:right}#save-status,#mode-warning{font-size:14px}#player-dialog label{display:block;margin:18px 0 8px;font-size:16px}#player-dialog input,#player-dialog select{width:100%;min-height:48px;padding:8px;border:2px solid #aaa;border-radius:0;background:#080808;color:#fff;font:16px 'Courier New',monospace}#save-player{width:100%;min-height:48px;margin-bottom:10px;background:#0000aa;color:#fff;border:2px solid #55ffff;font:16px 'Courier New',monospace}#player-dialog #close-player{background:#222;border-color:#aaa}#app{min-height:710px}
@media(max-width:700px) and (orientation:portrait){#app{min-height:720px}.mode-bar{min-height:50px}.scoreboard{grid-template-columns:1fr 1fr 1.3fr}.scoreboard strong{font-size:23px}.scoreboard small{font-size:13px}}
@media(max-width:360px) and (orientation:portrait){#app{min-height:748px}.mode-bar{gap:4px}.mode-bar button{padding:5px}.mode-bar>span{font-size:12px}}
@media(orientation:landscape) and (max-height:550px){#app{min-height:100svh;grid-template-rows:52px 50px 1fr auto auto auto}.mode-bar{grid-column:1;grid-row:2;align-self:start}.playfield{grid-column:1;grid-row:3/7;height:calc(100svh - 122px);min-height:260px}.scoreboard{grid-column:2;grid-row:2}.status{grid-column:2;grid-row:3}}
.app-strip{display:flex;gap:8px;align-items:center;min-height:48px;padding:5px 0;flex-shrink:0}.app-strip>span{flex:1;color:#55ffff;font-size:12px;line-height:1.3}.app-strip button{min-height:44px;padding:6px 9px;background:#111;color:#fff;border:1px solid #aaa;font:14px 'Courier New',monospace}.app-strip #update-app{color:#ffff55;border-color:#ffff55}.app-strip [hidden]{display:none}.controls #action-hint{font-weight:bold;letter-spacing:0;font-size:14px}#app{min-height:758px}
@media(max-width:700px) and (orientation:portrait){#app{min-height:768px}.status{min-height:68px}}
@media(max-width:360px) and (orientation:portrait){#app{min-height:800px}}
@media(orientation:landscape) and (max-height:550px){#app{min-height:100svh;grid-template-rows:52px 50px 1fr auto auto auto auto}.app-strip{grid-column:1;grid-row:7}.playfield{height:calc(100svh - 174px);min-height:230px}.controls{grid-row:6}.app-strip>span{font-size:12px}}

/* Gameplay states remain legible on touch screens. */
.trick-bar small{display:block;font-size:12px;line-height:1;color:inherit}.trick-bar button.risky{border-color:#ff5555;color:#ffaaaa}#attempt-tip{font-size:14px;color:#ffff55;line-height:1.4}#contest-summary #contest-comparison{font-size:12px;color:#ffff55}#contest-summary #contest-best-attempt{font-size:13px}#contest-total{font-size:23px}