:root{font-family:"Microsoft JhengHei","PingFang TC",system-ui,sans-serif;color:#2f5547;background:#e9eee1;font-synthesis:none;--green:#396b54;--paper:#faf8ee;--scale:1;--tap:44px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:radial-gradient(ellipse at 25% 15%,#f9f8e9 0,transparent 55%),radial-gradient(ellipse at 90% 80%,#d1dfca 0,transparent 65%),#e9eee1}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline:2px solid #a47b30;outline-offset:2px}button:active:not(:disabled){filter:brightness(.95)}[hidden]{display:none!important}
#viewport{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}#game{position:absolute;width:360px;height:640px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;border-radius:18px;overflow:hidden;box-shadow:0 18px 70px #314c3826,0 0 0 1px #bdcbb560;isolation:isolate;background:#e7eddb}#scene{display:block;width:360px;height:640px;position:absolute;inset:0;touch-action:manipulation}.topbar{position:absolute;left:0;top:0;width:360px;height:48px;background:#faf8eef5;display:flex;align-items:center;padding:0 8px 0 12px;gap:8px;box-shadow:0 2px 12px #50604408}.topbar>img{width:28px;height:28px}.station{flex:1;min-width:0}.station>span{display:block;font-size:8px;letter-spacing:1px;color:#819078;margin-bottom:2px}.station h1{font-size:15px;letter-spacing:1px;line-height:1.2;margin:0;font-weight:800;white-space:nowrap}.progress-pill{display:flex;align-items:baseline;gap:3px;background:#e9eedf;border-radius:20px;padding:5px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}.progress-pill b{font-size:14px}.progress-pill span{font-size:9px;color:#879477}.icon-button{width:var(--tap);height:var(--tap);min-width:34px;max-width:49px;border:0;background:transparent;display:grid;place-items:center;padding:10px;margin:0 -2px}.icon-button svg{width:21px;height:21px;fill:none;stroke:#537660;stroke-width:1.8;stroke-linecap:round}.icon-button circle{fill:#faf8ee}.progress-line{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#e0e7d6}.progress-line i{display:block;width:0;height:100%;background:#7da36f;transition:width .35s}.waiting-tag{position:absolute;top:58px;left:18px;right:18px;display:flex;align-items:center;gap:5px;pointer-events:none;font-size:9px;font-weight:600;color:#657b5d}.waiting-tag i{width:5px;height:5px;border-radius:50%;background:#85ac73}.waiting-tag b{color:#3a6549;font-size:10px}.waiting-tag>span{font-size:8px;margin-left:auto;letter-spacing:.7px;font-weight:400;color:#9aa58a}#carControls{position:absolute;inset:0;pointer-events:none}.car-control{position:absolute;padding:0;background:transparent;border:0;border-radius:9px;pointer-events:auto;touch-action:manipulation}.car-control:focus-visible{background:#ffffff30;outline:2px solid #386b50}.car-control:hover{box-shadow:inset 0 0 0 1px #fff8}/* Compact visible buttons retain a larger transparent touch target. */
.tools{position:absolute;left:0;top:576px;width:360px;height:44px;padding:0 64.5px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:7px;background:#faf8ee;box-shadow:0 -2px 10px #3b562609}
.tools button{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;justify-self:center;gap:1px;padding:0;background:transparent;border:0;border-radius:7px;font-size:8px;font-weight:700;width:max(100%,var(--tap));height:max(44px,var(--tap))}
.tools button::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:52.5px;height:35px;background:#f2f2e6;border:1px solid #e0e6d6;border-radius:7px}
.tools button[aria-pressed=true]::before{background:#dce9cf;border-color:#91ae78}
.tool-art{height:17px;display:grid;place-items:center;font-size:16px;line-height:1;color:#6b8e62;font-weight:400}
.tool-art svg{width:18px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tool-art.dots{font-size:17px;letter-spacing:1px;transform:translateY(-3px)}
.statusbar{position:absolute;top:620px;left:0;width:360px;height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#faf8ee;font-size:7px;letter-spacing:.5px;color:#9ca58e}.statusbar .warning{color:#a37233;letter-spacing:0;font-size:8px}#toast{position:absolute;bottom:70px;left:50%;transform:translate(-50%,5px);width:max-content;max-width:322px;padding:9px 13px;margin:0;line-height:1.7;border-radius:12px;background:#2f5148f2;color:#fffbed;font-size:10px;text-align:center;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s;z-index:4;box-shadow:0 5px 18px #263b2b20}#toast.visible{opacity:1;transform:translate(-50%,0)}
.cover{position:absolute;inset:0;z-index:10;background:#dfe8d7b8;backdrop-filter:blur(5px);display:grid;place-items:center;padding:30px}.cover-card{background:#fffdf2;border:1px solid #e4e8d6;border-radius:23px;padding:28px 22px 22px;text-align:center;width:100%;box-shadow:0 18px 50px #38553825}.cover-art{height:58px;margin:0 0 20px;display:grid;place-items:center;color:#bdad69;font-size:52px;line-height:1}.cover-art img{width:58px;height:58px;border-radius:17px;box-shadow:0 5px 14px #395b3c20}.eyebrow{display:block;font-size:8px;letter-spacing:1.8px;font-weight:700;color:#8b9c7b}.cover h2{font-size:24px;margin:14px 0 12px;letter-spacing:1px}.cover p{font-size:12px;line-height:1.9;color:#86917b;margin:0;white-space:pre-line}.primary{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;min-height:48px;border:0;border-radius:11px;padding:12px 17px;background:var(--green);color:#fff9e6;font-size:13px;font-weight:700;margin-top:23px}.cover .primary{min-height:max(48px,var(--tap))}.cover-foot{display:block;font-size:8px;letter-spacing:.8px;color:#a7af9a;margin-top:17px}.orientation-note{display:none;position:fixed;right:18px;top:50%;transform:translateY(-50%);gap:12px;align-items:center;color:#7a8d70;font-size:12px;max-width:180px;pointer-events:none}.orientation-note>span{font-size:29px}.orientation-note p{margin:0;line-height:1.8}.orientation-note small{font-size:10px;display:block;opacity:.75}.reduce-motion *{transition:none!important}
dialog{color:#365947;border:1px solid #dfe5d2;border-radius:22px;background:#fbf9ef;padding:30px 24px 21px;width:min(340px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 20px 65px #213d3240}dialog::backdrop{background:#2a443b80;backdrop-filter:blur(4px)}dialog h2{font-size:21px;margin:15px 0 20px;line-height:1.4}dialog form{position:absolute;right:8px;top:7px}dialog .close{border:0;background:transparent;width:44px;height:44px;font-size:26px;font-weight:300}.setting{display:flex;align-items:center;justify-content:space-between;min-height:55px;border-bottom:1px solid #e2e7d8;font-size:14px}.setting input{accent-color:#527c57;width:23px;height:23px;margin:10px}.menu-row{width:100%;border:0;border-bottom:1px solid #e0e5d5;background:transparent;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:15px 0;min-height:48px;font-size:13px;gap:12px}.menu-row small{display:block;font-size:10px;color:#8c987e;margin-top:6px}.menu-row b{font-size:11px;color:#8da079;white-space:nowrap}.dialog-note{font-size:11px;line-height:1.9;color:#8c987f;margin:19px 0 0}.quiet{text-align:center;font-size:9px;color:#9ba48e;line-height:1.7;margin:12px 0 0}.instructions{padding:0 0 0 22px;margin:0}.instructions li{padding:5px 0 10px 4px;font-size:13px}.instructions li::marker{color:#9aaa84;font-size:11px}.instructions p{font-size:11px;color:#8b987e;line-height:1.8;margin:7px 0 0}
@media(orientation:landscape) and (max-height:600px) and (min-width:650px){.orientation-note{display:flex}}
@media(max-width:400px){#game{border-radius:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.topbar .icon-button{min-width:var(--tap);max-width:none;flex-shrink:0}

.volume-setting{flex-direction:column;align-items:stretch;padding:12px 0 0;gap:4px}.volume-setting>span{display:flex;justify-content:space-between}.volume-setting output{font-size:12px;color:#718765}.volume-setting input[type=range]{width:100%;height:44px;margin:0;accent-color:#527c57}

.restart-link{display:block;width:100%;min-height:max(44px,var(--tap));margin:10px 0 0;padding:8px;border:1px solid #c4d1b8;border-radius:9px;background:#eef2e5;color:#396b54;font-size:11px;font-weight:700}

.sound-choice{gap:10px}.sound-choice select{max-width:72%;min-height:44px;border:1px solid #c4d1b8;border-radius:8px;background:#fffdf2;color:#396b54;font:inherit;font-size:12px;padding:6px}