@font-face{font-family:Fredoka;src:url(../assets/ui/fredoka-bold.ttf)format("truetype");font-style:normal;font-weight:700;font-display:swap}:root{color:#254c43;font-synthesis:none;--ink:#254c43;--mint:#e0f2d9;--edge:#367665;--display:Fredoka,ui-rounded,sans-serif;background:#287e70;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,Noto Sans KR,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:3px;outline:3px solid #da5d32}button:disabled{opacity:.55;cursor:wait}button{transition:transform .1s,background .1s,box-shadow .1s}button:hover{filter:brightness(1.04)}button:active{transform:translateY(2px)}#app{height:100dvh;min-height:560px;padding:0 max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:radial-gradient(circle at 4px 4px,#ffffff0c 2px,#0000 2.5px) 0 0/24px 24px;grid-template-rows:auto auto minmax(120px,1fr) auto;max-width:1600px;margin:auto;display:grid;overflow:hidden}header{padding:10px 8px 12px;padding-top:max(10px,env(safe-area-inset-top));justify-content:space-between;align-items:center;gap:12px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand-icon{object-fit:contain;filter:drop-shadow(0 3px #19594f);flex:none;width:66px;height:66px;transform:rotate(-8deg)}.brand strong{white-space:nowrap;color:#ffdf76;font-family:var(--display);letter-spacing:1px;text-shadow:0 3px #174f47;font-size:34px;font-weight:700;line-height:1.05;display:block}.brand strong>span{color:#ffa187;margin-left:2px;display:inline-block;transform:rotate(12deg)}.brand small{color:#f2ffe8;margin-top:5px;font-size:14px;font-weight:600;display:block}.brand small span{color:#c8e8d6}.toolbar{flex:none;gap:9px;display:flex}.toolbar button{background:#e6f5d9;border:2px solid #174f47;border-radius:14px;min-width:46px;min-height:46px;padding:0 14px;font-size:16px;font-weight:800;box-shadow:0 4px #174f47,inset 0 2px #fff9}.toolbar #demo{background:#ffda71}.toolbar #demo[aria-pressed=true]{background:#ffad87}.toolbar #pause,.toolbar #restart{padding:0 10px;font-size:23px}.toolbar button:active{box-shadow:0 1px #174f47}.hud{background:#e0f2d9;border:3px solid #174f47;border-bottom:0;border-radius:24px 24px 0 0;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.55fr);align-items:center;gap:30px;padding:12px 26px 14px;display:grid;position:relative;box-shadow:inset 0 3px #f5ffed}.metric{align-items:center;gap:12px;min-width:0;display:flex;position:relative}.metric-value{min-width:0}.metric small{font:700 14px var(--display);letter-spacing:1px;color:#4e705e;white-space:nowrap;display:block}.metric strong{font:700 34px/1.05 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;display:block}.metric em{color:#4e705e;font:600 16px ui-rounded,sans-serif}.metric-icon{color:#8e6728;background:#ffe7a1;border:2px solid #c3a451;border-radius:14px;flex:none;place-items:center;width:42px;height:42px;font-size:29px;display:grid;transform:rotate(-6deg);box-shadow:0 2px #b3cba0}.timer .metric-icon{background:#ffddca;border-color:#c68e73}.falls .metric-icon{background:#fceac0}.clock-icon:before{content:"";border:2px solid #9c6348;border-radius:50%;width:22px;height:22px}.clock-icon:after{content:"";border-bottom:2px solid #9c6348;border-left:2px solid #9c6348;width:7px;height:8px;position:absolute;top:9px;left:18px}.distance{padding-bottom:9px}.track{background:#b8d6b7;border:2px solid #639780;border-radius:8px;max-width:330px;height:9px;position:absolute;bottom:-4px;left:54px;right:0;overflow:hidden}.track i{background:repeating-linear-gradient(115deg,#ffd562 0 10px,#ffe697 10px 18px);border-radius:6px;width:0;height:100%;display:block}.playfield{background:#c9dcd8;border:0;border-left:3px solid #174f47;border-right:3px solid #174f47;min-width:0;min-height:0;position:relative;overflow:hidden}#game-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}#badge{font:700 14px var(--display);letter-spacing:.6px;color:#f3ffe4;background:#2d7664;border:2px solid #f0ffe0;border-radius:7px 7px 12px;max-width:calc(100% - 28px);padding:7px 12px;position:absolute;top:12px;left:14px;box-shadow:0 3px #244e4530}#speed{font:700 14px var(--display);color:#294e43;background:#f0ffe5ed;border:2px solid #588171;border-radius:9px;padding:5px 10px;position:absolute;bottom:12px;right:14px}#sound{color:#294e43;touch-action:manipulation;background:#f0ffe5ed;border:2px solid #588171;border-radius:12px;place-items:center;width:44px;height:44px;padding:9px;display:grid;position:absolute;bottom:8px;left:10px}#sound svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}#sound .sound-off,#sound[aria-pressed=true] .sound-waves{display:none}#sound[aria-pressed=true] .sound-off{display:block}footer{background:var(--mint);border:3px solid #174f47;border-top:4px solid #78a17e;border-radius:0 0 24px 24px;padding:12px 24px 10px;position:relative;box-shadow:0 5px #174f47,inset 0 2px #f5ffed}.instructions{justify-content:space-between;align-items:center;gap:12px;max-width:1100px;margin:0 auto 10px;display:flex}.instructions b{font-size:16px;font-weight:750;line-height:1.4}.instructions p{color:#527261;margin:0;font-size:16px;line-height:1.4}.instructions p strong{color:#315a49}.dot{background:#f6bd4f;border:2px solid #a78035;border-radius:3px;width:10px;height:10px;margin-right:9px;display:inline-block;transform:rotate(12deg)}.control-heading,.controls{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(12px,4vw,40px);max-width:900px;margin-inline:auto;display:grid}.control-heading{color:#527261;text-align:center;margin-bottom:6px;font-size:14px;font-weight:700}.controls{row-gap:9px}.leg{background:var(--tint);border:2px solid color-mix(in srgb,var(--leg),#254c43 22%);touch-action:none;-webkit-user-select:none;user-select:none;min-width:0;min-height:62px;box-shadow:0 4px 0 color-mix(in srgb,var(--leg),#254c43 28%),inset 0 3px 0 #fff9;border-radius:15px;grid-template-columns:44px 1fr auto;align-items:center;gap:0 12px;padding:7px 14px;display:grid;position:relative}.leg kbd{background:var(--key);border:2px solid color-mix(in srgb,var(--leg),#254c43 20%);width:40px;height:40px;font:700 28px var(--display);color:#294a40;border-radius:11px;grid-area:span 2/1;place-items:center;display:grid;box-shadow:inset 0 2px #fff7}.leg span{text-align:left;word-break:keep-all;font-size:16px;font-weight:750;line-height:1.3}.leg i{text-align:right;color:#486657;background:#ffffff80;border-radius:7px;grid-area:1/3/span 2;margin:0;padding:4px 9px;font-size:14px;font-style:normal}.leg span{grid-area:1/2/span 2}.leg.is-on{background:var(--key);box-shadow:0 1px 0 color-mix(in srgb,var(--leg),#254c43 28%),inset 0 2px 5px #254c4318;transform:translateY(3px)}.leg.is-on kbd{background:#fff9}.balance{justify-content:center;align-items:center;gap:12px;min-width:0;max-width:460px;margin:13px auto 0;display:flex}.balance small{font:700 14px var(--display);letter-spacing:1px}.balance span{color:#527261;min-width:74px;font-size:14px}.level{background:linear-gradient(90deg,#e7a082,#a9d191 40% 60%,#e7a082);border:1px solid #759877;border-radius:5px;flex:1;height:9px;position:relative}.level:after{content:"";border-left:2px solid #ffe8;height:100%;position:absolute;top:0;left:50%}.level i{z-index:1;background:#29443d;border:3px solid #f1ffe5;border-radius:50%;width:15px;height:15px;position:absolute;top:-4px;left:50%;transform:translate(-50%);box-shadow:0 1px 2px #254c4366}.footnote{color:#527261;justify-content:space-between;gap:12px;max-width:1100px;margin:9px auto 0;font-size:14px;line-height:1.4;display:flex}#overlay{z-index:4;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;background:#173f48a3;grid-template-columns:minmax(0,1fr);place-items:center;padding:14px;display:grid;position:fixed;inset:0;overflow:auto}#overlay[hidden],.instructions[hidden],#recovery[hidden]{display:none}.overlay-card{pointer-events:auto;text-align:center;background:#e9f6dc;border:3px solid #315f4d;border-radius:30px;width:min(480px,100%);min-width:0;max-width:100%;margin:auto;padding:20px 32px 26px;position:relative;box-shadow:0 7px #173c34,inset 0 4px #fff9,0 20px 70px #173c3455}.overlay-mascot{object-fit:contain;width:120px;height:120px;margin:-4px auto 10px;display:block;transform:rotate(-6deg)}.overlay-card small{letter-spacing:1px;font:700 14px var(--display);color:#725d28;background:#ffdd7b;border-radius:7px;padding:6px 12px;display:inline-block}.overlay-card h1{word-break:keep-all;margin:14px 0 10px;font-size:26px}.overlay-card p{color:#527261;overflow-wrap:anywhere;margin:0 0 20px;font-size:16px;line-height:1.5}.overlay-card button,#get-up{color:#433d23;background:#ffcf62;border:2px solid #9e7330;border-radius:13px;min-height:46px;padding:11px 24px;font-size:16px;font-weight:800;box-shadow:0 4px #9e7330,inset 0 2px #fff9}.overlay-card button:active,#get-up:active{box-shadow:0 1px #9e7330}#recovery{justify-content:space-between;align-items:center;gap:12px;max-width:1100px;min-height:52px;margin:0 auto 10px;display:flex}#recovery>div{min-width:0}#recovery strong{color:#a34f36;font-size:16px}#recovery p{color:#527261;overflow-wrap:anywhere;margin:4px 0 0;font-size:16px;line-height:1.4}#get-up{touch-action:manipulation;flex:none;min-width:108px;padding:9px 14px}@media (width>=1100px) and (height>=750px){.hud{padding-inline:calc(50% - 530px)}footer{padding-top:16px;padding-bottom:14px}.controls .leg{min-height:64px}}@media (width<=800px){#app{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom))}.brand small span,.footnote span:last-child{display:none}.hud{gap:18px;padding-inline:18px}.metric{gap:8px}.metric-icon{width:36px;height:36px;font-size:25px}.clock-icon:after{top:6px;left:15px}.track{left:44px}.instructions{display:block}.instructions p{margin-top:4px}footer{padding-inline:16px}.leg{gap:0 8px}.leg i{padding:3px 6px}}@media (width<=500px){#app{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}header{padding:8px 2px 10px;padding-top:max(8px,env(safe-area-inset-top));gap:6px}.brand{gap:5px}.brand-icon{width:42px;height:48px}.brand strong{letter-spacing:.4px;font-size:23px}.brand small{margin-top:2px;font-size:14px}.toolbar{gap:5px}.toolbar button{border-radius:11px;min-width:44px;min-height:44px;padding:0 8px}.toolbar #pause,.toolbar #restart{padding:0 7px;font-size:21px}.hud{border-radius:18px 18px 0 0;grid-template-columns:1.3fr 1fr .55fr;gap:9px;padding:10px 12px 13px}.metric{gap:0}.metric-icon{display:none}.metric small{letter-spacing:.1px}.metric strong{font-size:28px}.metric em{font-size:14px}.track{height:7px;bottom:-4px;left:0;right:4px}.distance{padding-bottom:5px}.playfield{border-width:3px}#badge{max-width:calc(100% - 16px);padding:5px 8px;font-size:14px;top:8px;left:8px}#speed{bottom:8px;right:8px}footer{border-radius:0 0 18px 18px;padding:10px 10px 8px}.instructions{margin-bottom:8px}.instructions b,.instructions p{font-size:16px}.control-heading{margin-bottom:5px}.controls{row-gap:9px}.leg{border-radius:12px;grid-template-columns:36px 1fr;gap:0 7px;min-height:66px;padding:6px 7px}.leg kbd{border-radius:9px;grid-row:span 2;width:34px;height:39px;font-size:26px}.leg span{grid-row:1;font-size:16px}.leg i{text-align:left;background:0 0;grid-area:2/2;margin:2px 0 0;padding:0;font-size:14px}.balance{gap:9px;margin-top:12px}.footnote{margin-top:8px}.footnote span:not(:first-child){display:none}.overlay-card{border-radius:24px;padding:16px 18px 22px}.overlay-card h1{font-size:24px}.overlay-mascot{width:100px;height:100px}#recovery{gap:8px}#get-up{min-width:100px;padding:9px}}@media (width<=360px){.brand-icon{display:none}.brand strong{font-size:22px}.hud{padding-inline:9px}.leg{grid-template-columns:30px 1fr;gap:0 5px;padding-inline:5px}.leg kbd{width:28px;height:35px;font-size:24px}footer{padding-inline:8px}}@media (height<=700px){.balance{display:none}.controls .leg{min-height:56px;padding-top:4px;padding-bottom:4px}.control-heading{margin-bottom:4px}.overlay-mascot{width:80px;height:80px}.overlay-card{padding-block:12px 18px}}@media (height<=559px){#app{min-height:0;padding-bottom:max(6px,env(safe-area-inset-bottom))}header{padding-top:max(3px,env(safe-area-inset-top));padding-bottom:7px}.brand-icon,.brand small,.footnote,.balance{display:none}.brand strong{font-size:25px}.hud{padding-top:5px;padding-bottom:8px}.metric strong{font-size:24px}.metric-icon{display:none}.track{left:0}.instructions{margin-bottom:6px}.instructions p{display:none}footer{padding-top:6px;padding-bottom:8px}.controls{row-gap:7px}.controls .leg{grid-template-columns:30px 1fr;gap:0 6px;min-height:48px;padding-top:2px;padding-bottom:2px}.leg kbd{width:28px;height:34px;font-size:24px}.leg span{grid-row:1}.leg i{text-align:left;background:0 0;grid-area:2/2;margin:0;padding:0}.control-heading{margin-bottom:4px}.overlay-mascot{display:none}.overlay-card h1{margin:10px 0 6px}.overlay-card p{margin-bottom:12px}#recovery{min-height:46px;margin-bottom:6px}#recovery strong{display:none}#recovery p{margin:0;line-height:1.2}}@media (height<=560px) and (width>=501px){#app{padding-inline:max(12px,env(safe-area-inset-left))}.brand-icon,.brand small,.footnote,.balance,#badge{display:none}header{padding-top:max(2px,env(safe-area-inset-top));padding-bottom:6px}.hud{justify-content:space-between;gap:16px;padding:4px 16px;display:flex}.metric,.metric-value{align-items:center;gap:8px;display:flex}.metric-icon,.track{display:none}.distance{padding-bottom:0}.metric strong{font-size:24px}.metric small{margin:0}.instructions{display:flex}.instructions p{display:none}footer{padding-top:5px;padding-bottom:7px}.control-heading{margin-bottom:3px}.controls .leg{min-height:46px}.controls .leg.is-on{transform:none}#recovery{margin-bottom:3px}#recovery>div{align-items:center;gap:10px;display:flex}}@media (height<=359px) and (width>=501px){#app{grid-template-rows:auto auto minmax(80px,1fr) auto;padding-bottom:5px}.control-heading,.instructions{display:none}.controls .leg{grid-template-columns:28px 1fr auto;min-height:44px}.controls .leg kbd,.controls .leg span{grid-row:auto}.controls .leg i{grid-area:1/3;margin-left:4px}.hud{gap:8px;padding-block:2px}.metric,.metric-value{gap:4px}.metric small{letter-spacing:0}#recovery{min-height:46px}#recovery>div{display:block}.overlay-card{max-width:calc(100vw - 28px)}}@media (width<=360px){.brand strong{letter-spacing:0;font-size:20px}.toolbar{gap:4px}.toolbar button{padding-inline:7px}}@media (height<=560px) and (width>=501px){header{padding-bottom:3px}footer{padding-top:3px;padding-bottom:5px}.controls .leg{min-height:44px}#recovery{min-height:44px;margin-bottom:0}#get-up{min-height:44px;padding-block:8px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}@media (height<=389px) and (width>=501px){header{padding-top:max(1px,env(safe-area-inset-top));padding-bottom:1px}.hud{padding-block:2px}footer{padding-top:2px;padding-bottom:4px}.control-heading{display:none}.controls{row-gap:6px}.controls .leg{grid-template-columns:28px 1fr auto;min-height:45px}.controls .leg kbd,.controls .leg span{grid-row:auto}.controls .leg i{grid-area:1/3;margin-left:4px}#recovery>div{display:block}}