:root{font-family:Microsoft JhengHei,PingFang TC,sans-serif;color:#f4f1e5;background:#172224;font-synthesis:none;font-weight:400}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #eed6a6;outline-offset:5px}button{color:inherit}#game,#viewport,.vignette{position:fixed;inset:0}canvas{display:block;outline:none}.vignette{pointer-events:none;background:linear-gradient(180deg,#12262b38,transparent 30%,transparent 60%,#08111355)}.topbar{position:absolute;top:30px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;z-index:3}.brand{display:flex;align-items:center;gap:12px;font-size:18px;letter-spacing:4px;text-shadow:0 1px 12px #10201d}.brand-icon{font-size:43px;font-family:serif;line-height:1}.brand small{display:block;font-size:8px;letter-spacing:3.4px;margin-top:3px;color:#ececdbb0}.route-tag{font-size:11px;letter-spacing:2px;display:flex;align-items:center;gap:12px;text-shadow:0 1px 8px #10201d}.live-dot{width:5px;height:5px;background:#d8d8b7;border-radius:50%;box-shadow:0 0 10px #d8d8b7}.divider{opacity:.5}.icon-button{border:1px solid #f4f1e540;background:#152c2c38;border-radius:50%;width:38px;height:38px;font-size:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.journey{position:absolute;top:145px;left:44px;line-height:2.5;font-size:13px;letter-spacing:3px;opacity:0;transition:opacity 1.5s;text-shadow:0 1px 8px #10201d}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#c6d0c7}.journey .eyebrow{display:block;font-size:8px;letter-spacing:3px}.journey-rule{display:block;width:32px;height:1px;background:#e5e7cc99;margin-top:14px}.playing .journey{opacity:.85}.driving-hud{position:absolute;bottom:85px;right:45px;display:flex;align-items:center;gap:24px;pointer-events:none;text-shadow:0 1px 10px #000}.speed{display:flex;align-items:baseline;gap:8px}.speed>span:first-child{font-family:Georgia,serif;font-size:47px;font-weight:400;font-variant-numeric:tabular-nums}.unit{font-size:8px;letter-spacing:2px;opacity:.65}.hud-line{height:34px;width:1px;background:#d2d7cb40}.distance .eyebrow{font-size:8px}.distance>div{font-size:18px;letter-spacing:1px;margin-top:5px;font-variant-numeric:tabular-nums}.distance small{font-size:10px;opacity:.6}.bottom-controls{position:absolute;bottom:24px;left:44px;right:44px;display:flex;justify-content:center;gap:32px;font-size:15px;letter-spacing:1px;color:#eef0e8;text-shadow:0 1px 8px #000;pointer-events:none}.bottom-controls span{display:flex;align-items:center;gap:10px}.bottom-controls kbd{font-size:14px;padding:5px 10px;background:#0a1214a6}.menu{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;padding:0 7% 9vh;background:linear-gradient(0deg,#060c0ee6 0%,#060c0e8c 32%,transparent 62%),linear-gradient(90deg,#060c0e66,transparent 55%);transition:opacity .45s,visibility .45s}.menu.closed{opacity:0;visibility:hidden;pointer-events:none}.menu-card{width:100%;max-width:560px}.title{margin:0;font-size:clamp(54px,9vw,92px);line-height:1.05;font-weight:800;letter-spacing:.08em;text-shadow:0 2px 30px #000a}.title-en{margin-top:10px;font-size:15px;font-weight:600;letter-spacing:.5em;color:#f2b632}.lane{height:3px;margin:26px 0 30px;width:190px;background:repeating-linear-gradient(90deg,#f2b632 0 22px,transparent 22px 36px)}.menu p{font-size:17px;line-height:1.7;letter-spacing:.08em;color:#e9ebe4;margin:0 0 28px;text-shadow:0 1px 12px #000a}.primary{background:#f2b632;color:#1a1608;border:0;border-radius:4px;padding:16px 44px;font-size:18px;font-weight:700;letter-spacing:.3em;transition:background .2s,transform .2s}.primary:hover:not(:disabled){background:#ffca52;transform:translateY(-2px)}.primary:disabled{background:#ffffff1f;color:#ffffffa8;cursor:progress;letter-spacing:.2em}.panel{margin-top:28px;padding:16px;border-radius:8px;background:#0a1214b8;border:1px solid #ffffff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.settings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pill{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 12px;border:1px solid #ffffff2e;border-radius:6px;background:#ffffff0f;color:#eef0e8;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s}.pill:hover{background:#ffffff1f;border-color:#f2b632}.select-pill{cursor:pointer}.select-pill span{color:#aeb6aa}.select-pill select{background:transparent;color:inherit;border:0;padding:0;font-size:14px;cursor:pointer}.select-pill select option{background:#14292c}.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 16px;margin-top:16px;padding-top:16px;border-top:1px solid #ffffff1f;font-size:13px;color:#cfd5ca}.keys div{display:flex;align-items:center;gap:5px}.keys span{margin-left:5px}kbd{min-width:28px;text-align:center;font-size:12px;font-weight:600;border:1px solid #ffffff40;border-bottom-width:3px;border-radius:5px;padding:3px 6px;background:#ffffff14}.reset{border:0;background:none;font-size:14px;color:#dfe3da;text-decoration:underline;text-underline-offset:4px;padding:0 0 0 22px}.actions{display:flex;align-items:center}#game:not(.playing) .topbar,#game:not(.playing) .journey{opacity:0;pointer-events:none}.driving-hud,.bottom-controls{transition:opacity .5s}#game:not(.playing) .driving-hud,#game:not(.playing) .bottom-controls{opacity:0}#toast{position:absolute;top:100px;left:50%;transform:translate(-50%);background:#12292bd9;padding:11px 20px;border:1px solid #d4ddca33;font-size:11px;letter-spacing:1px;opacity:0;transition:opacity .25s;pointer-events:none}#toast.show{opacity:1}#cruise-indicator{position:absolute;right:44px;top:105px;font-size:11px;letter-spacing:2px;text-align:right;text-shadow:0 1px 10px #000}#cruise-indicator span{display:block;font-size:9px;letter-spacing:1px;margin-top:7px;opacity:.65}#error{position:fixed;z-index:20;inset:30%;background:#17292a;padding:40px;border:1px solid #c4cbb1;line-height:2}#error[hidden]{display:none}@media(max-width:800px){.topbar{left:22px;right:22px;top:20px}.route-tag{display:none}.bottom-controls{gap:10px;left:15px;right:15px;flex-wrap:wrap;font-size:13px;bottom:15px}.journey{left:24px;top:100px}.driving-hud{right:25px;bottom:80px}}@media(max-width:800px){.menu{padding:0 24px 6vh}.menu p{font-size:15px}.settings{grid-template-columns:1fr}.keys{display:none}}@media(max-height:650px){.lane{margin:16px 0 14px}.menu p{margin-bottom:18px}.keys{display:none}.panel{margin-top:16px}}.touch,.touch-hint{display:none}.touch{position:absolute;inset:0;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch button{pointer-events:auto;touch-action:none;border:1px solid #ffffff55;background:#0a1214a6;color:#f4f1e5;font-size:16px;font-weight:700;letter-spacing:.1em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent}.touch button:active,.touch button.on{background:#f2b632;color:#1a1608;border-color:#f2b632}.touch-stick{--d: min(190px, 44vw, 52vh);position:absolute;left:max(22px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:var(--d);height:var(--d);border-radius:50%;pointer-events:auto;touch-action:none;background:radial-gradient(circle,#0a121466,#0a1214a6);border:2px solid #ffffff4d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent}.touch-stick.held{border-color:#f2b632}.stick-mark{position:absolute;font-size:calc(var(--d) * .1);color:#ffffff8c;line-height:1}.stick-mark.up{top:9%;left:50%;transform:translate(-50%)}.stick-mark.down{bottom:9%;left:50%;transform:translate(-50%)}.stick-mark.left{left:9%;top:50%;transform:translateY(-50%)}.stick-mark.right{right:9%;top:50%;transform:translateY(-50%)}.stick-knob{position:absolute;inset:31%;border-radius:50%;background:#f4f1e5d9;box-shadow:0 2px 12px #000a}.touch-stick.held .stick-knob{background:#f2b632}.touch-cruise{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));height:52px;padding:0 26px;border-radius:26px;font-size:16px!important}@media(pointer:coarse){#game.playing .touch{display:block}.bottom-controls,.keys,.journey{display:none}.touch-hint{display:block;margin-top:12px;font-size:13px;color:#cfd5ca}.icon-button{width:44px;height:44px}.topbar{top:max(16px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}.driving-hud{top:max(16px,env(safe-area-inset-top));bottom:auto;right:50%;transform:translate(50%);gap:16px}.speed>span:first-child{font-size:34px}.unit,.distance .eyebrow{font-size:10px}.distance>div{font-size:15px}#toast{top:78px;max-width:90vw;text-align:center}#cruise-indicator{top:70px;right:max(20px,env(safe-area-inset-right));font-size:12px}#cruise-indicator span{display:none}.menu-card{padding-bottom:env(safe-area-inset-bottom)}}@media(max-width:800px)and (pointer:coarse){.brand small{display:none}.driving-hud{top:calc(max(16px,env(safe-area-inset-top)) + 58px)}#toast,#cruise-indicator{top:calc(max(16px,env(safe-area-inset-top)) + 130px)}}@media(max-height:480px){.menu{align-items:center;padding:0 max(4%,env(safe-area-inset-left))}.menu-card{max-width:780px;display:grid;grid-template-columns:1fr 1.15fr;column-gap:36px;align-items:center}.title,.title-en,.lane{grid-column:1}.title{font-size:46px}.title-en{font-size:12px}.lane{margin:14px 0 0;width:140px}.actions{grid-column:2;grid-row:1;align-self:end}.panel{grid-column:2;grid-row:2 / span 2;margin-top:14px;padding:12px}.settings{grid-template-columns:repeat(3,1fr);gap:8px}.pill{height:36px;padding:0 6px;font-size:12px;gap:4px}.select-pill select{font-size:12px}.primary{padding:12px 36px;font-size:16px}.touch-hint{margin-top:10px;font-size:12px}.driving-hud{gap:12px}.brand{display:none}}