*{box-sizing:border-box}html{font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#f5f2e3;color:#525c48}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;min-height:44px;padding:8px 14px;background:#fffaf0;color:inherit;border:1px solid #d9dfc8;border-radius:12px;cursor:pointer;touch-action:manipulation}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #c99559;outline-offset:3px}button:disabled{opacity:.4}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.app{max-width:1140px;margin:auto;padding:22px 30px}header{display:flex;align-items:center;justify-content:space-between;font-size:12px}header span{font-size:9px;color:#a3ab91;letter-spacing:2px}header button{min-height:36px;padding:6px 10px;font-size:11px}.title{display:flex;align-items:center;justify-content:space-between;margin:28px 0 20px}.title p{font-size:10px;letter-spacing:3px;color:#a4ac8d;margin:0 0 7px}h1{font-size:43px;letter-spacing:-2px;line-height:1.2;margin:0}h1 span{color:#bb945b}h1 i{font-style:normal;color:#b4b889;font-size:35px;margin-left:15px}.best{display:grid;text-align:right;font-size:10px;color:#a5ad92;gap:3px}.best b{font-size:23px;color:#7d8e6d}main{display:grid;grid-template-columns:minmax(0,750px) minmax(240px,1fr);gap:28px}.play{min-width:0}.hud{display:flex;justify-content:space-between;padding:12px 16px;background:#fffbee;border:1px solid #e1e2cd;border-bottom:0;border-radius:15px 15px 0 0;font-size:10px;color:#a1ac8c}.hud b{display:block;margin-top:3px;font-size:17px;color:#748667}.canvas-wrap{position:relative;overflow:hidden;border-radius:0 0 14px 14px;background:#dce7c7;box-shadow:0 12px 30px #74825212}canvas{display:block;width:100%;height:auto;aspect-ratio:30/17;object-fit:contain;touch-action:none}#trail-name{position:absolute;left:13px;top:12px;font-size:9px;letter-spacing:1px;padding:6px 9px;border-radius:6px;background:#f7f9dfad;color:#8c9c76;pointer-events:none}.status-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:56px;font-size:11px;color:#93a17d}.status-row button{font-size:11px;flex-shrink:0}.eyebrow{font-size:9px;letter-spacing:1.6px;color:#baa071}aside h2{font-size:27px;line-height:1.45;letter-spacing:-1px;margin:13px 0 22px}.balance{display:flex;align-items:center;gap:10px;padding:12px;background:#e8ecd5;border-radius:12px;font-size:9px;color:#9ca981}.balance>div{position:relative;flex:1;height:5px;border-radius:5px;background:linear-gradient(90deg,#b9c99a,#dce5bd 35%,#dce5bd 65%,#b9c99a)}#balance-dot{position:absolute;top:-3px;width:10px;height:11px;left:50%;border-radius:4px;background:#91a774;transform:translateX(-50%)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:73px;padding:7px;touch-action:none;user-select:none;font-size:11px}.controls b{font-size:24px;line-height:1.1}.controls small{font-size:8px;color:#a8b094;margin-top:3px}#gas{background:#92a77a;border-color:#7f9569;color:#ffffed;box-shadow:0 3px 0 #788e64}#gas small{color:#e2ebcf}#brake{background:#e6cda5;border-color:#d6bd94}.rules{font-size:11px;color:#98a381;line-height:1.75}.rules p{margin:8px 0}.rules b{color:#ba9e6e;margin-right:5px}.hint{font-size:9px;line-height:1.8;color:#a9b292}.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:18px;background:#5b6b477d;backdrop-filter:blur(7px);overflow:auto}.overlay[hidden]{display:none}.modal{width:min(460px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:#fffcee;border:1px solid #fff;border-radius:23px;text-align:center;padding:25px;box-shadow:0 20px 75px #465b3336}.bike-mark{font-size:33px;letter-spacing:3px;color:#99ac7a;line-height:1.2}.modal h2{font-size:29px;line-height:1.35;margin:15px 0}.modal h2 em{font-style:normal;color:#af975e}.modal p:not(.eyebrow){font-size:12px;line-height:1.9;color:#97a27c}.modal #primary{display:block;width:100%;min-height:48px;margin:18px 0 9px;background:#91a779;color:#fffdec;border:0;font-weight:700}.modal #restart{width:100%;margin-bottom:5px}.modal a{display:block;padding:10px;font-size:11px;color:#a9b08e}.result-score{font-size:43px;font-weight:800;color:#ae955f}.result-score small{font-size:12px;margin-left:5px}.result-detail{font-size:11px;color:#9fa980;line-height:1.8}@media(max-width:800px){.app{max-width:660px;padding:10px 14px}header span{display:none}.title{margin:15px 0 12px}.title p{font-size:8px}h1{font-size:31px}.best b{font-size:20px}main{display:flex;flex-direction:column;gap:0}.hud{padding:8px 12px}.hud b{font-size:15px}.intro,.rules,.hint{display:none}.status-row{min-height:49px}.controls{grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.controls button{min-height:66px}.balance{padding:9px 12px}}@media(max-width:800px) and (max-height:650px) and (orientation:portrait){.app{padding:6px 10px}.title{margin:7px 0}.title p{display:none}h1{font-size:24px}h1 i{font-size:22px}.best b{font-size:16px}.hud{padding:5px 10px}.hud b{font-size:13px;margin-top:1px}.status-row{font-size:10px}#trail-name{font-size:8px;top:7px;left:8px}.modal{padding:17px}.modal h2{font-size:23px;margin:10px 0}.modal p:not(.eyebrow){font-size:11px;line-height:1.7}.bike-mark{font-size:23px}.modal #primary{margin-top:10px}}@media(orientation:landscape) and (max-height:540px){.app{padding:6px 14px;max-width:1050px}header{height:34px}header span{display:none}.title{position:absolute;left:50%;top:12px;transform:translateX(-50%);margin:0;pointer-events:none}.title p,.best,h1 i{display:none}h1{font-size:20px;letter-spacing:0}main{display:grid;grid-template-columns:minmax(0,1fr) 215px;gap:14px;margin-top:4px}.hud{padding:5px 11px}.hud b{display:inline;font-size:12px;margin-left:5px}canvas{height:calc(100dvh - 126px);min-height:175px}.status-row{min-height:44px;font-size:10px}.intro,.rules,.hint{display:none}.controls{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.controls button{min-height:76px}.balance{padding:10px}.modal{padding:16px 24px;max-width:510px}.bike-mark{display:none}.modal h2{font-size:21px;margin:6px 0}.modal p:not(.eyebrow){font-size:11px;line-height:1.5}.modal #primary{margin:9px 0 3px}.modal .eyebrow{margin:4px 0}}