@font-face{font-family:Bricolage;src:url(bricolage.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
:root{--ink:#322f46;--cream:#fff5db;--plum:#553850;--red:#a54135;--tea:#36766c;--gold:#fec36a;--display:Bricolage,"Arial Rounded MT Bold",system-ui,sans-serif;--body:system-ui,-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}
body{display:grid;place-items:center;background-color:#eeddb7;background-image:repeating-linear-gradient(48deg,#b6897833 0 1px,transparent 1px 20px),repeating-linear-gradient(138deg,#b6897826 0 1px,transparent 1px 20px);font:16px var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent}
#game{position:relative;isolation:isolate;width:min(100%,464px);height:100vh;height:100dvh;max-height:920px;overflow:hidden;background:#efdcb5;user-select:none;-webkit-user-select:none}
#stage{width:100%;height:100%;display:block;touch-action:none}
button{border:0;cursor:pointer;touch-action:manipulation;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
button:focus-visible{outline:3px solid #397788;outline-offset:2px}
#preferences{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));display:flex;z-index:4;gap:4px}
#preferences button,.utility{min-width:44px;min-height:44px;border:1.5px solid #55385066;border-radius:50%;background:#fff6dff2;color:var(--ink);font-size:14px;font-weight:750;box-shadow:0 2px #513d4926}
#preferences #sound{font-size:24px;position:relative;font-family:Georgia,serif}
#sound[aria-pressed=false] span::after{content:'';width:23px;height:2px;background:var(--ink);position:absolute;left:10px;top:20px;transform:rotate(-47deg);box-shadow:0 1px var(--cream)}
#poster{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(41px + env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom))}
.wordmark{position:relative;transform:rotate(-5deg);text-align:center;filter:drop-shadow(0 3px 0 #fff1cf)}
h1,h2,p{margin:0}
h1{font:800 clamp(51px,min(18vw,9.4vh),80px)/.82 var(--display);letter-spacing:-.065em;padding:7px 9px 11px}
h1 span{display:block;color:var(--ink);-webkit-text-stroke:5px var(--cream);paint-order:stroke fill;text-shadow:1px 3px 0 var(--cream),3px 5px 0 #514444}
h1 span:first-child{color:var(--red);font-size:.95em}
.flourish{position:absolute;right:-4px;top:2px;color:#d79051;font-size:24px}
.ticket{background:var(--cream);border:1.8px solid #493c43;border-radius:18px;box-shadow:0 4px 0 #5a4754,0 8px 18px #65432635;text-align:center}
.welcome{width:min(100%,340px);padding:12px 16px 8px;pointer-events:auto}
h2{font:800 clamp(23px,6.5vw,31px)/1.05 var(--display);letter-spacing:-.045em}
.legend{display:flex;justify-content:center;gap:12px;margin:6px 0 9px}
.legend>span{display:flex;align-items:center;gap:3px;font:650 12px var(--body)}
.legend canvas{width:32px;height:26px}
.action{display:flex;align-items:center;justify-content:center;gap:14px;background:#365f56;color:#fff8e3;width:100%;min-height:48px;border:1px solid #293c3a;border-radius:10px;box-shadow:0 3px #233b37;font:800 20px var(--display);letter-spacing:-.02em}
.action b{font-family:var(--body);font-size:22px;line-height:.8}.action:active{transform:translateY(2px);box-shadow:0 1px #233b37}
.gesture,.back{font:650 12px/1.2 var(--body)}.gesture{display:block;margin:9px 0 0;color:#5d5553}
#hud{position:absolute;top:max(9px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;align-items:center;gap:9px;pointer-events:none}
#hud .utility{pointer-events:auto;line-height:1;font:800 20px var(--display);color:var(--plum)}
.counter,.distance{border:1.5px solid #5c4849;background:#fff4dced;border-radius:13px;box-shadow:0 2px #70565640}
.counter{position:relative;display:grid;align-items:center;justify-content:start;grid-template-columns:29px auto;grid-template-rows:22px 11px;column-gap:2px;min-width:69px;height:45px;padding:4px 9px 4px 3px}
.counter canvas{width:32px;height:26px;grid-row:1/3}.counter strong{font:800 22px/1 var(--display)}.counter small,.distance span{font:760 8px/1.1 var(--body);letter-spacing:.08em}
.distance{flex:1;max-width:190px;margin-left:auto;padding:7px 12px}.distance>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.distance b{font:800 14px var(--display);font-variant-numeric:tabular-nums}
.track{height:5px;background:#d6c6a4;border-radius:6px;margin-top:3px;overflow:hidden}.track i{height:100%;display:block;background:#43796b;transform-origin:left}
#feedback,#controlHint{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;border:1px solid #665360;background:#fff3dcf5;border-radius:25px;padding:6px 13px;font:750 14px/1.2 var(--body);white-space:nowrap;color:#385b52;box-shadow:0 2px #6c565335}
#feedback{top:17%}#feedback[data-kind=hit]{color:#933d33}#controlHint{bottom:max(5%,env(safe-area-inset-bottom));color:var(--plum)}
#sheet{position:absolute;bottom:max(4%,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),340px);padding:16px}
#sheet p{font:600 14px/1.4 var(--body);margin:7px 0 12px}#game[data-mode=paused] #sheet{bottom:50%;transform:translate(-50%,50%)}.back{display:block;margin:4px auto -7px;background:none;min-height:44px;padding:0 14px;text-decoration:underline;text-underline-offset:3px}
@media(min-width:550px) and (min-height:580px){#game{height:calc(100dvh - 28px);border-radius:15px;border:2px solid #6e5554;box-shadow:0 12px 40px #64433242}}
@media(max-height:540px){#poster{padding:8px 10px 9px}.wordmark{align-self:flex-start;transform:rotate(-4deg);margin-left:12px}h1{font-size:33px;line-height:.84}.flourish{font-size:11px}.welcome{padding:5px 12px 5px;width:min(84%,335px)}h2{font-size:21px}.legend{margin:2px 0 4px}.legend canvas{height:18px;width:22px}.action{min-height:44px;font-size:17px}.gesture{margin:5px 0 0;font-size:10px}#sheet{bottom:9px;padding:9px 14px}#sheet p{margin:4px 0 7px}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}