:root{--paper:#e8e8e5;--stage:#d7d7d3;--ink:#262626;--muted:#73736f;--line:#b8b8b3;--acid:#dcff1e;--pink:#f83e82;--orange:#ff641b;--accent:#777773}
*{box-sizing:border-box}
html{background:var(--paper);touch-action:manipulation}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}
button{font:inherit}
.page{max-width:1120px;margin:auto;padding:0 28px 28px}
.masthead{height:78px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:12px}
.brand-mark{width:43px;height:38px;background:#080808;overflow:hidden;flex:none}
.brand-mark img{width:100%;height:100%;object-fit:cover;object-position:50% 29%;transform:scale(1.44);display:block}
.brand-copy{display:flex;align-items:baseline;gap:15px;min-width:0}
.brand-copy>span{font-size:10px;letter-spacing:.045em;font-weight:900;white-space:nowrap}
.brand-copy strong{font-size:31px;letter-spacing:-.095em;line-height:1;font-weight:900}
.period{color:var(--accent);transition:color .25s}
.edition{margin-left:auto;text-align:right;font-size:9px;line-height:1.24;letter-spacing:.12em;font-weight:800}
.mute-button{width:40px;height:40px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.mute-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.mute-button .sound-slash{display:none}
.mute-button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.mute-button[aria-pressed="true"] .sound-waves{display:none}
.mute-button[aria-pressed="true"] .sound-slash{display:block}
.mute-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.layout{display:grid;grid-template-columns:minmax(0,620px) minmax(190px,1fr);gap:38px;align-items:start;padding-top:26px}
.machine{min-width:0;border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--paper)}
.scoreboard{display:grid;grid-template-columns:1.45fr 1fr 108px;min-height:77px;border-bottom:1px solid var(--ink)}
.score-readout,.ball-meter{padding:11px 15px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.score-readout+.score-readout,.ball-meter{border-left:1px solid var(--line)}
.micro{font-size:9px;font-weight:900;letter-spacing:.105em;white-space:nowrap}
.score-readout strong{font-size:32px;letter-spacing:-.08em;line-height:1;font-weight:900;font-variant-numeric:tabular-nums}
.best strong{font-size:22px;color:#666660}
.ball-icons{display:grid;grid-template-columns:repeat(3,16px);gap:4px 7px;padding:0 0 3px}
.ball-icons i{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%;background:transparent;transition:background .2s,transform .2s}
.ball-icons i.active{background:var(--accent)}
.ball-icons i.lost{border-color:#999994;opacity:.45}
.stage{height:clamp(410px,60dvh,650px);position:relative;overflow:hidden;background:var(--stage);isolation:isolate}
.stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(38,38,38,.085) 1px,transparent 1px),linear-gradient(to bottom,rgba(38,38,38,.085) 1px,transparent 1px);background-size:25% 25%;pointer-events:none;z-index:0}
.stage:after{content:"";position:absolute;inset:9px;border:1px solid rgba(38,38,38,.17);pointer-events:none;z-index:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.stage-top,.stage-bottom{position:absolute;left:18px;right:18px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none;font-size:9px;font-weight:900;letter-spacing:.095em}
.stage-top{top:19px}.stage-bottom{bottom:17px}
.stage-top span:last-child,.stage-bottom span:last-child{white-space:nowrap}
#combo-label{color:var(--accent)}
#air-clock{font-variant-numeric:tabular-nums}
.control-panel{height:158px;display:grid;grid-template-columns:1fr 35px 1fr;border-top:1px solid var(--ink);user-select:none;-webkit-user-select:none}
.control-side{min-width:0;padding:11px 12px 8px;position:relative}
.control-heading{display:flex;justify-content:space-between;gap:4px;font-size:8px;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.control-hint{color:var(--muted)}
.control-divider{display:grid;place-items:center;color:#8c8c87;font-size:20px}
.joystick{width:108px;height:108px;margin:6px auto 0;border:1px solid #777771;border-radius:50%;position:relative;touch-action:none;cursor:grab;background:rgba(255,255,255,.16)}
.joystick:active{cursor:grabbing}
.joystick-cross{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.joystick-cross:before,.joystick-cross:after{content:"";position:absolute;background:#b1b1ac}
.joystick-cross:before{width:1px;height:100%;left:50%;top:0}.joystick-cross:after{height:1px;width:100%;top:50%;left:0}
.joystick-knob{width:47px;height:47px;background:var(--ink);border:3px solid var(--paper);box-shadow:0 0 0 1px var(--ink);border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--jx,0px),var(--jy,0px));pointer-events:none;transition:background .2s}
.instructions{padding-top:7px}
.instructions-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:19px;border-bottom:1px solid var(--ink);font-size:31px;line-height:1;letter-spacing:-.08em;font-weight:900}
.instructions-title span{font-size:28px;font-weight:400}
.instruction-row{display:flex;gap:16px;border-bottom:1px solid var(--line);padding:15px 0 14px}
.instruction-row b{font-size:10px;letter-spacing:.1em;padding-top:3px;color:#73736f}
.instruction-row p{margin:0;font-size:13px;line-height:1.32;color:#555550}
.instruction-row strong{color:var(--ink);font-size:11px;letter-spacing:.06em;line-height:1.6}
.fine-print{font-size:9px;color:#71716c;font-weight:800;letter-spacing:.1em;line-height:1.4}
.overlay{position:absolute;inset:0;z-index:5;background:rgba(215,215,211,.38);display:grid;place-items:center;padding:22px;transition:opacity .2s,visibility .2s}
.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.overlay-card{background:var(--paper);border:1px solid var(--ink);box-shadow:6px 6px 0 var(--ink);width:min(100%,380px);padding:23px 25px 18px}
.overlay-kicker,.overlay-foot{font-size:9px;font-weight:900;letter-spacing:.13em}
.overlay-card h1{font-size:clamp(53px,13vw,82px);letter-spacing:-.1em;line-height:.92;margin:22px 0 12px;font-weight:900}
.overlay-card h1 span{color:var(--accent)}
.overlay-card p{max-width:290px;font-size:14px;line-height:1.35;margin:0 0 25px;color:#44443f}
#start-button{width:100%;border:0;background:var(--ink);color:var(--paper);padding:14px 15px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:900;letter-spacing:.07em;cursor:pointer}
#start-button:hover,#start-button:focus-visible{background:#41413d;outline:2px solid var(--ink);outline-offset:3px}
#start-button span{font-size:22px;line-height:.65;font-weight:400}
.overlay-foot{margin-top:19px;color:#777771}
body[data-color="1"]{--accent:var(--acid)}
body[data-color="2"]{--accent:var(--pink)}
body[data-color="3"]{--accent:var(--orange)}
body[data-color="4"]{--accent:var(--acid)}
body[data-color]:not([data-color="0"]) .joystick-knob{background:var(--accent)}
@media(max-width:850px){.layout{grid-template-columns:minmax(0,600px);justify-content:center;gap:25px}.instructions{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px;padding-top:0}.instructions-title,.fine-print{grid-column:1/-1}.instruction-row:nth-of-type(2),.instruction-row:nth-of-type(4){border-right:1px solid var(--line);padding-right:15px}}
@media(min-width:561px) and (max-width:850px){.machine{container-type:inline-size}.stage{max-height:min(540px,90cqw)}}
@media(max-width:560px){.page{padding:0 12px 22px}.masthead{height:59px}.brand-mark{width:32px;height:30px}.brand-copy{display:block}.brand-copy>span{display:block;font-size:8px}.brand-copy strong{display:block;font-size:24px}.edition{font-size:8px}.layout{padding-top:10px;gap:19px}.scoreboard{min-height:66px;grid-template-columns:1.35fr 1fr 85px}.score-readout,.ball-meter{padding:10px 9px}.micro{font-size:7px;letter-spacing:.06em}.score-readout strong{font-size:28px}.best strong{font-size:19px}.ball-icons{grid-template-columns:repeat(3,14px);gap:3px}.ball-icons i{width:14px;height:14px}.stage{height:clamp(350px,calc(100dvh - 292px),570px)}.stage-top,.stage-bottom{left:13px;right:13px;font-size:7px;letter-spacing:.06em}.stage-top{top:15px}.stage-bottom{bottom:13px}.control-panel{height:137px;grid-template-columns:1fr 20px 1fr}.control-side{padding:9px 7px}.control-heading{font-size:7px}.control-hint{display:none}.joystick{width:97px;height:97px;margin-top:4px}.joystick-knob{width:42px;height:42px}.instructions{gap:0 13px}.instructions-title{font-size:24px;padding-bottom:12px}.instruction-row{gap:10px;padding:11px 0}.instruction-row p{font-size:11px}.instruction-row strong{font-size:10px}.fine-print{font-size:8px}.overlay-card{padding:19px 19px 17px}.overlay-card h1{margin:17px 0 10px}.overlay-card p{font-size:13px;margin-bottom:20px}}
@media(max-height:720px) and (max-width:560px){.stage{height:350px}.control-panel{height:129px}.joystick{width:89px;height:89px}.joystick-knob{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.001ms!important;animation-duration:.001ms!important}}