:root{--zc-background:#f4f2ea;--zc-surface:#fffdf6;--zc-ink:#25272c;--zc-muted:#666970;--zc-accent:#2e50de;--zc-accent-ink:#fff;--zc-border:#c8ccd2;--zc-soft:#e6e8ea;--zc-lane-black:#1b1c21;--zc-lane-paper:#f6f2df;--zc-lane:#7b9bff;--zc-radius:3px}*{box-sizing:border-box}body{margin:0;background:var(--zc-background);color:var(--zc-ink);font:13px/1.5 system-ui,sans-serif}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid var(--zc-border);background:var(--zc-surface);color:var(--zc-ink);cursor:pointer;padding:9px 12px;border-radius:3px}button:disabled,select:disabled{opacity:.5;cursor:default}:focus-visible{outline:3px solid var(--zc-accent);outline-offset:4px}.game{width:min(1100px,100%);margin:auto;padding:23px 30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.9fr);gap:17px 36px;align-content:start}.game[data-lane="1"]{--zc-lane:#ed9985}.game[data-lane="2"]{--zc-lane:#c5adf2}.game[data-lane="3"]{--zc-lane:#eacf5c}.game>header{grid-column:1;grid-row:1}.eyebrow{font:700 9px ui-monospace,monospace;letter-spacing:.11em;color:var(--zc-muted)}h1{font:850 clamp(46px,5.6vw,68px)/.96 system-ui,sans-serif;letter-spacing:-.07em;margin:15px 0 12px}h1 em{display:block;font-size:.45em;font-style:normal;font-weight:500;letter-spacing:-.025em;line-height:1.4;margin-top:9px}header p{font-size:11px;color:var(--zc-muted);max-width:290px;margin:0}.stats{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,1fr);align-self:end;border:2px solid var(--zc-lane-black);box-shadow:5px 5px 0 var(--zc-lane-black);background:var(--zc-lane-paper);color:var(--zc-lane-black)}.stats>div{padding:13px 14px}.stats>div+div{border-left:2px solid var(--zc-lane-black)}.stats span{display:block;font:700 8px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.07em}.stats strong{display:block;font:800 32px/1.3 system-ui,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.play-area{display:contents}.board-wrap{position:relative;grid-column:1;grid-row:2/5;display:flex;flex-direction:column;align-items:center;background:var(--zc-lane-paper);border:3px solid var(--zc-lane-black);border-top:13px solid var(--zc-lane);box-shadow:7px 7px 0 var(--zc-lane-black);padding:16px 18px 22px;min-width:0;align-self:start}.board-wrap:after{content:'4';position:absolute;left:18px;bottom:14px;font:900 40px/.8 system-ui,sans-serif;color:var(--zc-lane-black);opacity:.12;pointer-events:none}.board-coordinate{font:700 8px ui-monospace,monospace;letter-spacing:.13em;color:var(--zc-lane-black);margin-bottom:15px}.board{width:min(100%,240px);aspect-ratio:10/18;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(18,minmax(0,1fr));gap:2px;padding:5px;background:#252c3b;border:2px solid var(--zc-lane-black);border-radius:0}.cell{min-width:0;min-height:0;background:#323d50;border:1px solid #4b566944}.cell.filled{background:var(--zc-piece);border:1px solid #171c2c;box-shadow:inset 2px 2px #ffffff4d,inset -2px -2px #00000024}.landed{animation:settle .2s ease-out}.streams{grid-column:2;grid-row:2;min-width:0}.streams h2{font-size:20px;line-height:1.1;margin:2px 0 7px;letter-spacing:-.045em}.stream-note{font-size:10px;color:var(--zc-muted);margin:0 0 8px}.current-piece{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0 10px;border-bottom:1px solid var(--zc-border);font:9px ui-monospace,monospace;color:var(--zc-muted)}.lane-list{display:grid;gap:8px;margin-top:12px}.lane{--zc-track:#ced9ff;position:relative;display:flex;align-items:center;gap:16px;padding:11px 13px;border:2px solid var(--zc-lane-black);border-radius:0;background:var(--zc-track);color:var(--zc-lane-black);min-width:0;min-height:58px;text-align:left;transition:transform .12s,box-shadow .12s}.lane[data-lane="1"]{--zc-track:#ffd4bd}.lane[data-lane="2"]{--zc-track:#e7d6fb}.lane[data-lane="3"]{--zc-track:#f5e6a1}.lane[aria-pressed=true]{transform:translate(-3px,-2px);box-shadow:4px 4px 0 var(--zc-lane-black)}.lane-name{display:flex;gap:7px;align-items:center;flex:none}.lane-name b{font:900 26px/.9 system-ui,sans-serif;letter-spacing:-.05em}.lane-name>span{display:none}.lane-name i{font:16px system-ui,sans-serif;opacity:0}.lane[aria-pressed=true] .lane-name i{opacity:1}.lane-previews{display:flex;align-items:center;justify-content:space-between;gap:9px;flex:1;min-width:0}.shape-preview{display:grid;grid-template-columns:repeat(var(--zc-w),6px);grid-template-rows:repeat(var(--zc-h),6px);gap:1px;justify-content:center;align-content:center;min-height:24px}.shape-preview i{grid-column:calc(var(--zc-x) + 1);grid-row:calc(var(--zc-y) + 1);min-width:6px;min-height:6px;background:var(--zc-shape);outline:1px solid #1b1c2166;border-radius:0}.challenge{position:relative;grid-column:2;grid-row:3;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--zc-border);padding-top:12px;min-width:0}.challenge h2{font-size:18px;line-height:1.2;letter-spacing:-.03em;margin:6px 0}.challenge p{font-size:10px;color:var(--zc-muted);margin:0;line-height:1.6}.objective-picker{display:grid;gap:5px;font-size:9px;color:var(--zc-muted);min-width:127px}.objective-picker select{font-size:10px;max-width:145px;padding:7px}.challenge .eyebrow{font-size:8px}#run-progress{position:absolute;top:0;left:0;width:100%;height:3px;border:0;accent-color:var(--zc-accent)}#run-progress::-webkit-progress-bar{background:var(--zc-soft)}#run-progress::-webkit-progress-value{background:var(--zc-accent)}.controls{grid-column:2;grid-row:4;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-self:start}.controls button{font-size:11px}.controls .primary{background:var(--zc-accent);color:var(--zc-accent-ink);border-color:var(--zc-accent)}.speed{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;font-size:9px;color:var(--zc-muted)}.speed input{min-width:0;flex:1;min-height:44px;accent-color:var(--zc-accent)}.speed span{font-variant-numeric:tabular-nums;min-width:45px}.status,.save-status{grid-column:1/-1;font-size:10px;color:var(--zc-muted);margin:0;line-height:1.6}.status{margin-top:7px}.save-status{margin-top:-10px;font-size:9px}footer{grid-column:1/-1;border-top:1px solid var(--zc-border);padding-top:12px;font-size:9px;color:var(--zc-muted)}@keyframes settle{from{transform:translateY(-4px);opacity:.4}to{transform:none;opacity:1}}
@media(max-width:650px){.game{padding:14px 12px;grid-template-columns:1fr;gap:12px}.game>header{grid-column:1;grid-row:1;position:relative}h1{font-size:38px;margin:8px 0 6px}h1 em{font-size:18px;margin-top:3px}.eyebrow{font-size:7px}header p{font-size:9px;max-width:none}.stats{grid-column:1;grid-row:2;box-shadow:3px 3px 0 var(--zc-lane-black)}.stats>div{padding:5px 10px;display:flex;align-items:center;justify-content:space-between;gap:5px}.stats strong{font-size:24px}.stats span{font-size:7px}.play-area{display:grid;grid-column:1;grid-row:3;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.board-wrap{grid-column:auto;grid-row:auto;padding:10px 7px 12px;border-width:2px;border-top-width:7px;box-shadow:4px 4px 0 var(--zc-lane-black)}.board-coordinate{font-size:5px;letter-spacing:.01em;margin-bottom:10px}.board{width:100%;gap:2px;padding:3px}.board-wrap:after{display:none}.streams{grid-column:auto;grid-row:auto}.streams h2{font-size:15px;line-height:1.1;margin:0 0 5px}.stream-note{font-size:8px;line-height:1.5}.current-piece{font-size:7px;gap:4px;padding:3px 0 6px}.current-piece .shape-preview{grid-template-columns:repeat(var(--zc-w),3px);grid-template-rows:repeat(var(--zc-h),3px);min-height:15px}.current-piece .shape-preview i{min-width:3px;min-height:3px}.lane-list{gap:8px;margin-top:9px}.lane{display:block;padding:7px 8px;min-height:51px}.lane-name{justify-content:space-between;margin-bottom:5px}.lane-name b{font-size:18px}.lane-name i{font-size:12px}.lane-previews{gap:2px}.shape-preview{grid-template-columns:repeat(var(--zc-w),4px);grid-template-rows:repeat(var(--zc-h),4px);min-height:15px}.shape-preview i{min-width:4px;min-height:4px}.challenge{grid-column:1;grid-row:4;padding-top:10px;gap:10px}.challenge h2{font-size:15px;margin:5px 0}.challenge p{font-size:8px}.challenge .eyebrow{font-size:7px}.objective-picker{font-size:8px;min-width:125px}.objective-picker select{font-size:9px;min-height:44px}.controls{grid-column:1;grid-row:5;grid-template-columns:1fr 1fr;gap:6px}.controls button{min-height:44px}.speed{font-size:9px}.status,.save-status{font-size:9px}.save-status{margin-top:-5px}footer{font-size:8px}}
[data-motion=reduced] *,[data-motion=reduced] *::before{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

/* A tall 10×18 board and all four lane choices fit the player viewport. */
html,body{height:100%;overflow:hidden}
.game{height:100dvh;max-height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto;gap:7px 24px;overflow:hidden;padding-bottom:7px}
.game>header{min-height:0}
.game h1{font-size:clamp(35px,5vw,54px);margin:5px 0}
.board-wrap{height:100%;min-height:0;align-self:stretch;overflow:hidden;padding:8px 12px 12px}
.board-coordinate{margin-bottom:6px}
.board{height:calc(100% - 22px);width:auto;max-width:100%}
.streams{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lane-list{gap:5px;margin-top:6px}
.lane{min-height:44px;padding:6px 9px}
.challenge{padding-top:5px}
.controls{gap:5px}
.status{margin-top:1px}
.save-status{margin-top:0}
footer{padding-top:4px}
.streams:focus-visible{outline:2px solid var(--zc-accent);outline-offset:-2px}
@media(max-width:650px){.game{grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto auto;gap:4px;padding:6px 9px}.game h1{font-size:clamp(26px,8vw,32px);margin:2px 0}.game h1 em{font-size:14px;margin-top:1px}header p{line-height:1.2}.stats>div{padding:3px 6px}.stats strong{font-size:19px}.play-area{height:100%;min-height:0;overflow:hidden;gap:8px}.board-wrap{height:100%;padding:5px 4px 7px}.board-coordinate{margin-bottom:3px}.board{height:calc(100% - 12px);width:auto;max-width:100%}.streams{height:100%;min-height:0}.streams h2{font-size:13px;margin:0 0 2px}.stream-note{line-height:1.2;margin:0 0 3px}.lane-list{gap:4px;margin-top:4px}.lane{min-height:43px;padding:3px 5px}.lane-name{margin-bottom:1px}.challenge{padding-top:4px}.challenge h2{font-size:13px;margin:1px 0}.challenge p{line-height:1.2}.controls button{min-height:38px}.speed input{min-height:34px}footer{padding-top:2px}}
@media(min-width:651px) and (max-height:760px){.game{padding-top:8px;gap:4px 24px}.game h1{font-size:42px;line-height:.92;margin:2px 0}.game h1 em{font-size:20px;line-height:1.1;margin-top:2px}.game header p{font-size:10px;line-height:1.2}.stats>div{padding:6px 9px}.stats strong{font-size:24px}.streams h2{font-size:17px;margin:0 0 3px}.stream-note{margin-bottom:3px;line-height:1.2}.current-piece{padding:2px 0 4px}.lane{min-height:40px;padding:3px 8px}.challenge{padding-top:2px}.challenge h2{font-size:15px;margin:2px 0}.challenge p{line-height:1.2}.objective-picker select{min-height:34px}.controls button{min-height:36px;padding:5px}.speed input{min-height:26px}}