@charset "UTF-8";
:root{color-scheme:dark;--bg:#101c23;--mint:#aaf1ca;--muted:#9cacb6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 20%,#244a4750,transparent 55%),var(--bg);color:#edf5ed;font-family:Arial,"Microsoft JhengHei",sans-serif}.shell{max-width:1060px;padding:0 32px 36px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;height:76px;border-bottom:1px solid #ffffff18;font-size:12px}header a{color:#c2d7d3;text-decoration:none}header span{letter-spacing:2px;color:var(--muted);font-size:10px}.heading{display:flex;align-items:center;justify-content:space-between;padding:28px 0}.eyebrow{font-size:10px;letter-spacing:2.4px;color:var(--mint);margin:0 0 12px}h1{font-size:38px;letter-spacing:2px;margin:0}h1 span{color:var(--mint);margin-left:16px}.subtitle{font-size:13px;color:var(--muted);margin:12px 0 0}button{font:inherit;border:1px solid #ffffff25;color:#edf5ed;background:#253940;border-radius:10px;cursor:pointer;min-height:44px;padding:10px 20px}button:hover{background:#35534f}button:focus-visible,a:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.game-layout{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:48px;align-items:start}.game-frame{border:1px solid #ffffff20;border-radius:18px;overflow:hidden;background:#162a32;box-shadow:0 20px 60px #0003}.hud{display:flex;justify-content:space-between;gap:8px;padding:17px 20px;background:#1d3239}.hud>div{display:flex;flex-direction:column;gap:7px}.hud>div:last-child{text-align:right}.hud span{font-size:10px;color:var(--muted)}.hud strong{font-size:22px;letter-spacing:1px;font-variant-numeric:tabular-nums}.hud #health{font-size:16px;color:#f3a39d;letter-spacing:2px;line-height:26px}.stage{position:relative}canvas{width:100%;height:auto;display:block;aspect-ratio:3/4}.overlay{position:absolute;inset:0;background:#10232de8;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;text-align:center;backdrop-filter:blur(5px)}.overlay[hidden]{display:none}.overlay h2{font-size:30px;margin:7px 0 14px}.overlay>p:not(.eyebrow){font-size:14px;line-height:1.9;color:#b9cbd1;margin:0 0 26px}.overlay button{background:var(--mint);color:#163b30;border:0;font-weight:bold;padding:15px 32px}.hint{font-size:11px;color:var(--muted);margin-top:22px}.controls{display:flex;justify-content:space-between;align-items:center;padding:12px;gap:8px}.controls button{width:110px;font-size:24px;touch-action:none;user-select:none}.controls button span{font-size:12px}.controls>span{font-size:10px;color:var(--muted)}aside{padding-top:22px}aside h2{font-size:24px;margin:0 0 15px}aside>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.9}.legend{list-style:none;padding:12px 0;margin:0}.legend li{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid #ffffff12}.legend i{display:block;width:54px;height:10px;flex-shrink:0;border-radius:3px}.normal{background:#aaf1ca}.spike{background:#f19b91;clip-path:polygon(0 100%,15% 0,30% 100%,45% 0,60% 100%,75% 0,90% 100%,100% 100%)}.belt{background:repeating-linear-gradient(110deg,#eabe79 0 7px,#836d4b 7px 10px)}.spring{background:#b9a7ef}.crumble{background:#94acbc;border:2px dashed #425d6c}.legend b{display:block;font-size:13px;font-weight:500}.legend span{display:block;font-size:11px;color:var(--muted);margin-top:6px}.tip{font-size:12px;color:var(--mint);background:#aaf1ca09;border:1px solid #aaf1ca25;border-radius:10px;padding:18px;margin-top:14px}.tip span{display:block;color:#b3c6c8;line-height:1.8;margin-top:9px}.save-note{font-size:11px!important}@media(max-width:760px){.shell{padding:0 16px 24px;max-width:540px}header{height:56px}.heading{padding:22px 0}h1{font-size:30px}.game-layout{display:block}aside{padding-top:28px}.controls>span{font-size:9px}.hud{padding:14px}.hud #health{letter-spacing:0}.subtitle{font-size:11px}.overlay h2{font-size:26px}}@media(max-height:850px) and (min-width:761px){.game-layout{grid-template-columns:minmax(0,420px) 1fr;gap:48px}.heading{padding:18px 0}header{height:60px}}

/* Keep play centered; instructions stay folded below the game. */
.shell{max-width:1060px}header{height:56px}.heading,.game-layout{width:min(480px,calc((100svh - 280px)*.75));min-width:min(300px,100%);max-width:100%;margin-inline:auto}.heading{padding:18px 0}.heading h1{font-size:28px}.heading .eyebrow{font-size:8px;margin-bottom:7px}.subtitle{font-size:11px;margin-top:7px}.game-layout{display:flex;flex-direction:column;gap:0}.game-frame{width:100%}.hud{padding:12px 16px}.hud strong{font-size:20px}.controls{padding:8px 12px}.controls button{min-height:44px;padding:6px 12px}aside{width:100%;padding-top:12px;color:var(--muted)}aside details{border-top:1px solid #ffffff12;font-size:11px}aside summary{cursor:pointer;padding:12px 0;color:#9cacb6;font-size:11px;letter-spacing:.5px}aside summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}aside details>p{font-size:11px;line-height:1.8;margin:3px 0 8px;color:var(--muted)}.legend{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding:0}.legend li{gap:10px;padding:10px 0}.legend i{width:28px;opacity:.65}.legend b{font-size:11px;color:#b0bec4}.legend span{font-size:10px;line-height:1.6;margin-top:3px}.tip{background:none;border:0;border-radius:0;padding:8px 0;margin:0;color:var(--muted);font-size:11px}.tip span{font-size:10px;color:var(--muted);margin-top:4px}.save-note{font-size:10px!important;color:#7f939f!important;text-align:center;margin:4px 0}.moving{background:#79c9e8}.ice{background:repeating-linear-gradient(120deg,#c4e8f5 0 8px,#effaff 8px 10px)}.narrow{background:#e3cd8f;max-width:18px}
@media(max-width:760px){.heading,.game-layout{width:min(480px,100%)}.heading{padding:16px 0}aside{padding-top:10px}}
@media(max-width:360px){.legend{grid-template-columns:1fr}.controls>span{display:none}.hud #health{font-size:14px}}
/* Compact game controls and personal results. */
.heading,.game-layout{width:min(480px,calc((100svh - 330px)*.75));min-width:min(300px,100%)}.toolbar{display:flex;flex-direction:column;gap:4px;margin-left:8px}.toolbar button{min-height:32px;padding:5px 10px;font-size:10px;border-radius:7px}.mode-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:#142830;border-bottom:1px solid #ffffff0d;font-size:11px;color:var(--muted)}.mode-bar label{display:flex;align-items:center;gap:8px}.mode-bar select{font:inherit;background:#213941;color:#d5e7e5;border:1px solid #ffffff20;border-radius:6px;padding:5px 8px;min-height:32px}.mode-bar select:focus-visible{outline:2px solid var(--mint)}.mode-bar select:disabled{opacity:.65}.mode-bar #time{font-variant-numeric:tabular-nums}.toast{position:absolute;left:50%;top:54px;transform:translateX(-50%);border:1px solid #aaf1ca40;border-radius:20px;background:#152c35eb;color:var(--mint);font-size:12px;padding:9px 15px;white-space:nowrap;pointer-events:none}.toast[hidden],.results[hidden]{display:none}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;margin:-8px 0 20px;padding:12px 0;border-block:1px solid #ffffff15}.results span{display:block;color:var(--muted);font-size:10px}.results strong{display:block;font-size:14px;margin-top:6px}.overlay{padding:20px}.overlay>p:not(.eyebrow){font-size:12px;margin-bottom:20px}.overlay h2{font-size:25px}.hint{font-size:10px;line-height:1.8}.personal-records{width:100%;margin-top:6px;border-top:1px solid #ffffff12;color:var(--muted);font-size:11px}.personal-records summary{padding:12px 0;cursor:pointer}.personal-records p{font-size:10px;line-height:1.9;margin:6px 0}.personal-records #record-list{white-space:pre-line}.recent-label{color:#aaf1ca99}.personal-records summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
@media(max-width:760px){.heading,.game-layout{width:min(480px,calc((100svh - 260px)*.75));min-width:min(280px,100%)}.shell{padding-inline:12px}.heading .subtitle{font-size:10px}.heading h1{font-size:26px}.heading .eyebrow{font-size:7px}header{height:44px}.hud{padding:10px 12px}.hud #health{font-size:14px}.controls button{width:96px}.controls>span{font-size:9px}.overlay h2{font-size:22px}.results{gap:8px}.results strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.overlay{backdrop-filter:none}}
@media(max-width:760px){.heading,.game-layout{width:min(480px,calc((100svh - 330px)*.75));min-width:min(240px,100%)}.controls>span{display:none}.controls button{width:45%}.hud strong{font-size:18px}.hud #health{font-size:13px;letter-spacing:0}.heading h1{font-size:24px}.heading .subtitle{max-width:150px;line-height:1.6}.results{gap:4px}}
/* iPad: comfortable tap targets, safe areas and no long-press callout on controls. */
.shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.controls button{-webkit-user-select:none;-webkit-touch-callout:none}.mode-bar select{font-size:16px;min-height:44px}summary{touch-action:manipulation;min-height:44px}.toolbar button{min-height:44px;min-width:64px}
@media(pointer:coarse){.controls button{min-height:52px}.heading,.game-layout{width:min(480px,calc((100svh - 380px)*.75));min-width:min(260px,100%)}.toolbar{flex-direction:row}.heading{flex-wrap:wrap;gap:10px}.heading .subtitle{max-width:none}.heading .toolbar{margin-left:auto}.mode-bar{padding-block:4px}}
@media(pointer:coarse) and (max-height:650px) and (orientation:landscape){header{height:44px}.heading{padding:8px 0}.heading .eyebrow,.heading .subtitle{display:none}.heading,.game-layout{width:260px;min-width:min(260px,100%)}.heading h1{font-size:23px}.controls>span{display:none}.controls button{width:45%}.overlay h2{font-size:20px}.overlay{padding:14px}.overlay>p:not(.eyebrow){margin-bottom:12px}.hint{margin-top:12px}}
@media(pointer:coarse) and (max-height:650px) and (orientation:landscape){.heading,.game-layout{width:min(560px,calc((100svh - 230px)*.75 + 100px));min-width:min(290px,100%)}header{height:36px}.heading{padding:6px 0;flex-wrap:nowrap}.heading .toolbar{flex-direction:row}.toolbar button{min-height:44px;min-width:56px;padding:4px 6px}.game-frame{display:grid;grid-template-columns:minmax(0,1fr) 100px}.mode-bar,.hud{grid-column:1/-1}.mode-bar{padding:2px 12px}.hud{padding:6px 12px}.hud>div{gap:3px}.hud strong{font-size:17px}.stage{grid-column:1;grid-row:3}.controls{grid-column:2;grid-row:3;flex-direction:column;justify-content:space-around;padding:8px}.controls button{width:100%;min-height:64px}.controls button span{display:block}.results{gap:3px;padding:8px 0;margin-bottom:12px}.results strong{font-size:11px}.overlay{padding:10px}.overlay h2{font-size:18px;margin:4px 0 8px}.overlay>p:not(.eyebrow){font-size:10px;line-height:1.5}.overlay button{min-height:44px;padding:8px 18px}.hint{font-size:9px;margin-top:8px}.overlay .eyebrow{font-size:8px;margin-bottom:5px}}
/* Direction icons flank the lower-middle of the stage, independent of the HUD. */
.game-frame{display:block;overflow:visible}.mode-bar{border-radius:17px 17px 0 0}.stage canvas,.stage .overlay{border-radius:0 0 17px 17px}.stage .overlay{z-index:3}.stage .toast{z-index:2}.stage>.controls{position:absolute;inset:0;display:block;pointer-events:none;padding:0;z-index:1}.stage>.controls button{position:absolute;top:68%;transform:translateY(-50%);display:grid;place-items:center;width:64px;height:64px;min-height:64px;padding:12px;border-radius:50%;border:1px solid #aaf1ca66;background:#214139dd;color:#bdf4d4;box-shadow:0 5px 18px #0004;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.stage>.controls #left{left:8px}.stage>.controls #right{right:8px}.stage>.controls svg{display:block;width:100%;height:100%;pointer-events:none}.stage>.controls button:hover{background:#315b4e}.stage>.controls button:active{background:#aaf1ca;color:#173c30;box-shadow:0 2px 6px #0004}.stage>.controls button:disabled{opacity:.25;pointer-events:none}
@media(min-width:700px){.stage>.controls button{width:80px;height:80px;min-height:80px;padding:18px}.stage>.controls #left{left:-96px}.stage>.controls #right{right:-96px}}
@media(pointer:coarse){.heading,.game-layout{width:min(480px,calc((100svh - 320px)*.75));min-width:min(260px,100%)}}
@media(pointer:coarse) and (max-height:650px) and (orientation:landscape){.heading,.game-layout{width:min(480px,calc((100svh - 230px)*.75));min-width:min(240px,100%)}.game-frame{display:block}.stage>.controls button{width:64px;height:64px;min-height:64px;padding:12px}.stage>.controls #left{left:8px}.stage>.controls #right{right:8px}}
@media(pointer:coarse) and (max-height:650px) and (orientation:landscape) and (min-width:700px){.stage>.controls #left{left:-80px}.stage>.controls #right{right:-80px}}
/* Maximize the stage: one configuration row, one compact status row below. */
header{height:40px}.heading,.game-layout{width:min(600px,calc((100svh - 155px)*.75));min-width:min(240px,100%);max-width:100%}.heading{padding:6px 0;display:block}.heading .compact-title{display:none}.heading .toolbar{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;margin:0}.toolbar label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}.toolbar select{font:inherit;font-size:16px;min-height:44px;padding:5px 6px;border:1px solid #ffffff20;background:#213941;color:#d5e7e5;border-radius:7px;max-width:110px}.toolbar select:focus-visible{outline:2px solid var(--mint)}.toolbar button{min-height:44px;min-width:56px;padding:4px 8px}.game-frame{display:block}.stage canvas,.stage .overlay{border-radius:17px 17px 0 0}.game-frame>.hud{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;min-height:40px;border-radius:0 0 17px 17px}.game-frame>.hud>div{display:flex;flex-direction:row;align-items:center;gap:4px;white-space:nowrap}.game-frame>.hud span{font-size:9px}.game-frame>.hud strong{font-size:13px;letter-spacing:0}.game-frame>.hud #health{font-size:12px;line-height:18px;letter-spacing:0}.game-frame>.hud>div:nth-child(2)>span{display:none}.stage>.toast{top:28px}
@media(max-width:699px){.game-frame>.hud{flex-wrap:wrap;justify-content:space-around}.game-frame>.hud>div{gap:3px}.game-frame>.hud span{font-size:8px}.game-frame>.hud strong{font-size:11px}.toolbar label{font-size:10px}.toolbar select{max-width:85px}.heading,.game-layout{width:min(600px,calc((100svh - 170px)*.75));min-width:min(240px,100%)}}
@media(pointer:coarse) and (max-height:650px) and (orientation:landscape){header{height:32px}.heading{padding:4px 0}.heading,.game-layout{width:min(600px,calc((100svh - 140px)*.75));min-width:min(240px,100%)}.heading .toolbar{flex-direction:row}.game-frame>.hud{padding:5px 8px;min-height:34px}.stage canvas,.stage .overlay{border-radius:17px 17px 0 0}}
@media(min-width:700px){.heading,.game-layout{max-width:calc(100% - 192px)}}