:root{color-scheme:dark;--orange:#ffad52;--hot:#ff743d;--ink:#090e14;--white:#f7f7f1;--muted:#a9b2be}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0a111b;color:var(--white);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC",Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}#gameRoot{position:absolute;inset:0;overflow:hidden;isolation:isolate}#sky{position:absolute;inset:0;background:linear-gradient(180deg,#111c2d 0%,#38627b 45%,#d0ad91 83%,#d7bea2 100%);transition:background .8s ease}#sky .glow{position:absolute;top:20%;right:15%;width:17vw;height:17vw;min-width:70px;min-height:70px;border-radius:50%;background:radial-gradient(circle,#ffe4ae 1%,#e3b68050 27%,transparent 70%);filter:blur(5px)}canvas#world,canvas#fx{position:absolute;inset:0;width:100%;height:100%;display:block}#world{z-index:1}#fx{z-index:2;pointer-events:none}#vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at 50% 53%,transparent 29%,rgba(4,8,15,.18) 65%,rgba(3,6,11,.65) 100%)}.hidden{display:none!important}.screen{position:absolute;inset:0;z-index:10}.menu{background:linear-gradient(90deg,rgba(4,9,16,.92) 0%,rgba(4,9,16,.65) 33%,transparent 74%),linear-gradient(0deg,rgba(5,10,15,.83),transparent 43%);display:flex;flex-direction:column;pointer-events:none}.menu>*{pointer-events:auto}.menu-bar{height:64px;display:flex;align-items:center;padding:0 max(30px,5vw);gap:20px}.brand-small{font-size:16px;font-weight:1000;font-style:italic;letter-spacing:.09em}.brand-small span{color:var(--orange)}#version{font:700 10px/1.5 monospace;letter-spacing:.23em;color:#d0dae7a6}.minor-button{margin-left:auto;border:1px solid #ffffff59;color:white;background:#0004;padding:8px 13px;border-radius:4px;font-size:11px;letter-spacing:.1em}.menu-copy{margin:auto 0 0 max(30px,8vw);max-width:730px}.eyebrow,.micro{font-size:10px;letter-spacing:.28em;font-weight:800;text-transform:uppercase;color:var(--orange)}.eyebrow{display:flex;align-items:center;gap:11px}.tiny-line{width:30px;height:2px;background:var(--orange)}h1{margin:12px 0 0;line-height:.94;font-size:clamp(48px,7vw,112px);font-weight:1000;letter-spacing:-.065em;text-shadow:0 6px 25px #0009;white-space:nowrap}h1 span{display:block;letter-spacing:.04em;font-size:.47em;margin:0 0 6px 3px;font-weight:950}h1 strong{display:block;font-size:.85em;white-space:nowrap;font-style:italic;letter-spacing:-.06em}h1 em{color:var(--orange);font-style:italic}.tagline{font-size:clamp(12px,1.3vw,17px);color:#e2e6ea;font-weight:600;letter-spacing:.12em;margin:17px 0 15px}.hero-info{display:flex;flex-wrap:wrap;gap:22px;align-items:center;font-size:11px;font-weight:750;color:#fff9;letter-spacing:.12em}.hero-info>span:first-child{color:#fff}.pulse{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange)}.menu-panel{margin:25px 0 max(20px,3vh) max(30px,8vw);width:min(450px,67vw);flex-shrink:0}.menu-panel label{font-size:11px;letter-spacing:.15em;font-weight:800;color:#ffffffc2}.name-line{display:flex;align-items:center;border-bottom:1px solid #ffffff6c;margin:10px 0 17px;background:#0005}.name-line input{flex:1;min-width:0;padding:11px 0;border:0;background:none;outline:none;color:white;font-weight:850;font-size:18px;letter-spacing:.16em}.name-line input::placeholder{color:#ffffff77}.name-line>span{color:#bbb;font:11px monospace}.primary-button{width:100%;border:0;background:linear-gradient(105deg,#ffbc65,#ff763b);color:#16120f;font-size:14px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;padding:15px 18px;display:flex;align-items:center;justify-content:center;gap:12px;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);box-shadow:0 7px 35px #ff8e4070;transition:filter .15s}.primary-button:active{filter:brightness(.84)}.arrow-icon{font-size:22px}.menu-buttons{display:flex;gap:15px;margin-top:14px;flex-wrap:wrap}.menu-buttons button,.subtle-btn{border:0;background:none;color:#f7f7f1d6;font-size:12px;font-weight:750;letter-spacing:.08em;padding:8px 2px}.menu-buttons button:hover,.subtle-btn:hover{color:var(--orange)}.menu-footer{display:flex;justify-content:space-between;gap:15px;margin-top:16px;color:#9aa5b0;letter-spacing:.15em;font:600 9px monospace}.hud{position:absolute;inset:0;z-index:8;pointer-events:none}.hud-top{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:10px;padding:14px max(24px,4vw);background:linear-gradient(#03080fd9,transparent)}.hud-block,.hud-right{align-self:start}.hud-right{text-align:right}.hud-label{font-size:9px;letter-spacing:.17em;color:#f3f4fac2;font-weight:800}.hud-big,.speed-text{display:flex;gap:7px;align-items:baseline;font-size:clamp(26px,4vw,48px);font-weight:1000;letter-spacing:-.065em;line-height:1.1;font-variant-numeric:tabular-nums}.hud-big small,.speed-text small{font-size:12px;letter-spacing:.1em;color:var(--orange)}.speed-text{justify-content:flex-end}.hud-center{text-align:center;align-self:start}#biomeName{font-size:10px;font-weight:900;letter-spacing:.16em;color:#fff}#timerValue{font:1000 clamp(18px,3vw,29px) monospace;color:#fff;letter-spacing:.05em;margin:3px 0}.progress-track{height:3px;background:#ffffff3b;width:170px;max-width:95%;margin:auto}.progress-track>div{height:100%;width:0;background:var(--orange)}#weatherLabel{font-size:11px;color:#dbe2eb;letter-spacing:.08em;margin-top:7px;font-weight:800}.hud-bottom{position:absolute;bottom:max(16px,calc(env(safe-area-inset-bottom) + 4px));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;gap:10px}.control-cluster{display:flex;gap:13px;align-items:flex-end;pointer-events:auto}.drive-control{user-select:none;-webkit-user-select:none;touch-action:none;outline:none;border-radius:15px;border:1px solid #ffffff77;color:#fff;background:linear-gradient(180deg,#172536ba,#0a101bdc);width:clamp(64px,8vw,96px);height:clamp(57px,12vh,81px);font-size:27px;font-weight:1000;box-shadow:0 5px 17px #0009,inset 0 1px #ffffff22;display:flex;flex-direction:column;justify-content:center;align-items:center}.drive-control:active,.drive-control.pressed{background:linear-gradient(180deg,#faaf5ce2,#b64927ec);border-color:#ffcf8f;transform:translateY(2px)}.drive-control.gas{background:linear-gradient(150deg,#ffb85f,#e56a30);color:#190f0b;border:1px solid #ffd293;font-size:17px}.drive-control.gas.pressed{filter:brightness(1.15)}.drive-control.brake{font-size:17px}.drive-control small{font-size:8px;letter-spacing:.12em;opacity:.7}.hud-mini{display:flex;align-items:center;gap:15px;margin-bottom:4px;font-size:10px;color:#fff9;letter-spacing:.07em}#pauseButton{pointer-events:auto;background:#111e2cb5;border:1px solid #ffffff47;color:white;font-size:15px;padding:7px 11px;border-radius:5px}.notice{position:absolute;z-index:11;top:25%;left:50%;transform:translateX(-50%);border:1px solid #f8b85f88;background:#160f0bdc;color:#ffd593;padding:12px 24px;font-size:13px;font-weight:1000;letter-spacing:.12em;text-align:center;min-width:200px;box-shadow:0 10px 30px #0009;pointer-events:none}.modal-shade{position:absolute;inset:0;background:#02070bcc;z-index:25;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(7px)}.modal{position:relative;width:min(570px,100%);max-height:94vh;overflow:auto;background:linear-gradient(150deg,#1d2b3a,#0a111c 70%);border:1px solid #8fa2b45c;padding:clamp(22px,3vw,36px);box-shadow:0 24px 80px #000c}.modal.compact{max-width:450px}.modal h2{font-size:clamp(24px,4vw,39px);margin:7px 0 14px;letter-spacing:.01em}.modal p{color:#bdc8d3;font-size:13px;line-height:1.55}.modal .primary-button{margin-top:18px}.subtle-btn{display:block;width:100%;margin-top:11px}.close{position:absolute;top:16px;right:18px;background:none;color:#fff;border:0;font-size:27px}.result-distance{font-size:clamp(42px,8vw,77px);font-weight:1000;letter-spacing:-.06em;color:#ffd093;line-height:1}.result-distance small{font-size:16px;letter-spacing:.05em}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-block:1px solid #ffffff2b;margin:16px 0;padding:16px 0}.result-stats>div{display:flex;flex-direction:column;gap:7px}.result-stats span{font-size:11px;color:#acbac5}.result-stats b{font-size:15px;white-space:nowrap}#resultNote{font-size:12px;margin:0}.board-modal{max-width:520px}.board-mode{border-bottom:1px solid #ffffff35;padding-bottom:12px}.board-head,.board-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.board-head{font-size:10px;color:#9baebc;letter-spacing:.12em;font-weight:800;padding:7px 4px}.board-rows{max-height:42vh;overflow:auto}.board-row{padding:11px 5px;border-bottom:1px solid #ffffff19}.board-row .rank-number{width:28px;font-size:17px;font-weight:1000;color:#ffbd75}.board-row .board-player{flex:1;min-width:0;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-row .board-score{text-align:right;font:800 14px monospace}.board-row .board-score small{display:block;color:#9fb0bd;font:11px monospace;margin-top:3px}.empty{padding:20px 3px;font-size:13px;color:#b8c6d0}.how-block{border-left:2px solid #e39350;padding:1px 0 1px 13px;margin:15px 0}.how-block b{font-size:13px}.how-block p{margin:6px 0;font-size:12px}.splash{position:absolute;inset:0;z-index:20;pointer-events:none;background:#06090eea;overflow:hidden}.splash-top{position:absolute;top:11%;left:8%;color:#fff8;font:800 11px monospace;letter-spacing:.27em}.splash-top span{color:#ffad52}.launch-trail{position:absolute;left:-20%;top:57%;height:2px;width:110%;background:linear-gradient(90deg,transparent,#ffac5688,white,transparent);transform:skewY(-10deg)}.launch-car{position:absolute;left:15%;top:44%;width:225px;height:90px;transform:translateX(-70vw) scale(.7);animation:whoosh 1.45s .1s cubic-bezier(.13,.58,.42,.97) forwards}.car-main{position:absolute;top:31px;left:5px;width:208px;height:38px;border-radius:30px 54px 13px 15px;background:linear-gradient(140deg,#ffbd71 10%,#ed773d 50%,#641c1c 100%);box-shadow:0 12px 24px #000}.car-window{position:absolute;top:7px;left:75px;width:91px;height:33px;background:linear-gradient(120deg,#849eac,#18273a);clip-path:polygon(23% 0,65% 0,100% 100%,0 100%)}.car-wheel{position:absolute;top:52px;width:34px;height:34px;border:8px solid #0b0d11;background:#83929a;border-radius:50%;box-shadow:0 0 0 3px #282b34}.car-wheel.w1{left:38px}.car-wheel.w2{right:29px}.car-light{position:absolute;left:215px;top:46px;width:170px;height:19px;background:linear-gradient(90deg,#fff8d8b7,transparent);filter:blur(8px)}.launch-text{position:absolute;top:38%;left:50%;transform:translate(-50%,40px);white-space:nowrap;text-align:center;font-size:clamp(40px,7vw,105px);font-weight:1000;font-style:italic;letter-spacing:-.04em;opacity:0;animation:launchwords 1.5s .85s ease-out forwards}.launch-text b{color:#ffae57}.launch-text small{display:block;font-size:12px;font-style:normal;letter-spacing:.29em;margin-top:13px;color:#fff8;font-weight:700}@keyframes whoosh{0%{transform:translateX(-80vw) scale(.7);filter:blur(12px)}37%{filter:blur(0);transform:translateX(4vw) scale(1)}68%{transform:translateX(55vw) scale(1.1)}100%{transform:translateX(150vw) scale(.75);filter:blur(8px)}}@keyframes launchwords{0%{opacity:0;transform:translate(-50%,40px)}25%{opacity:1;transform:translate(-50%,0)}88%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px)}}#rotate{display:none;position:absolute;inset:0;z-index:80;background:#08101b;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:25px}.phone-rotate{font-size:67px;font-weight:300;line-height:1;color:#ffb369;position:relative;transform:rotate(-24deg)}.phone-rotate span{font-size:25px;position:absolute;bottom:1px;right:-22px}#rotate strong{font-size:24px}#rotate small{font-size:13px;color:#9fadbd}#fatal{position:absolute;inset:0;background:#0b0f17;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}#fatal strong{color:#ffaa55;font-size:24px}
@media(max-height:510px){.menu-bar{height:37px;padding-inline:22px}.menu-copy{margin-left:6vw}.menu-panel{margin:14px 0 8px 6vw;width:min(390px,60vw)}h1{font-size:clamp(36px,6.3vw,70px)}h1 span{margin-bottom:4px}.tagline{margin:8px 0}.name-line{margin:5px 0 10px}.name-line input{padding:7px 0;font-size:14px}.primary-button{padding:10px 14px;font-size:12px}.menu-buttons{margin-top:7px;gap:10px}.menu-footer{margin-top:7px}.hero-info{gap:13px}.hud-top{padding:9px 25px}.hud-bottom{left:14px;right:14px;bottom:8px}.drive-control{height:55px;width:67px}.hud-mini{font-size:9px}#tipLabel{display:none}}
@media(max-width:700px){.menu-bar{padding-inline:17px}#version{font-size:8px}.menu-copy{margin-left:5vw}.menu-panel{margin-left:5vw}.hud-top{padding:9px 17px}.hud-label{font-size:8px}.hud-big,.speed-text{font-size:30px}#biomeName{font-size:8px}.hud-bottom{left:10px;right:10px}.control-cluster{gap:8px}.drive-control{width:60px;height:55px}.hud-mini{display:none}}
@media(orientation:portrait) and (max-width:850px) and (pointer:coarse){#rotate{display:flex}}

/* V2: ergonomic thumb controls and compact garage */
.garage-hint{display:none}
.garage-panel{position:absolute;right:max(4vw,env(safe-area-inset-right));bottom:clamp(25px,7vh,75px);width:clamp(225px,29vw,330px);border:1px solid #b6cfdb54;border-radius:15px;background:linear-gradient(150deg,#0c1927e8,#0c131bde);box-shadow:0 18px 50px #0009;padding:13px 14px 11px;backdrop-filter:blur(13px);pointer-events:auto}
.garage-heading{display:flex;justify-content:space-between;align-items:center;font:800 11px/1.3 system-ui;letter-spacing:.12em;margin:0 0 9px;color:#e9eff5}
.garage-heading span:last-child{font:700 9px monospace;color:#ffb575}
.vehicle-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.vehicle-choice{display:flex;align-items:center;gap:8px;min-width:0;text-align:left;border:1px solid #c9dbea35;background:#203040bf;border-radius:8px;color:#e4edf4;padding:7px 9px;min-height:47px;touch-action:manipulation}
.vehicle-choice.active{border-color:#ffc27b;background:linear-gradient(110deg,#493728,#233b4f);box-shadow:inset 0 0 0 1px #efa35e44}
.vehicle-choice:focus-visible{outline:2px solid #ffbf78;outline-offset:2px}
.vehicle-choice .car-symbol{position:relative;width:37px;height:18px;flex:none;border-radius:12px 13px 4px 4px;transform:skewX(-11deg);box-shadow:inset 0 -5px 0 #0004,0 4px 4px #0005;background:var(--car-paint,#eb704e)}
.vehicle-choice .car-symbol:before{content:'';position:absolute;top:-6px;left:11px;width:17px;height:8px;background:#72929e;clip-path:polygon(18% 0,88% 0,100% 100%,0 100%)}
.vehicle-choice .car-symbol:after{content:'';position:absolute;bottom:-4px;left:3px;background:#101824;border-radius:50%;width:8px;height:8px;box-shadow:25px 0 #101824}
.vehicle-choice strong{font-size:11px;line-height:1.16;font-weight:800;white-space:nowrap}
.vehicle-choice small{display:block;color:#a8bbc8;font-size:9px;margin-top:3px;white-space:nowrap}
.garage-stats{display:flex;flex-direction:column;gap:4px;padding-top:10px;font-size:10px;color:#b3c1c9}.garage-stats strong{color:#ffbe79;font-size:11px}.garage-stats small{font-size:10px}
.hud-ranking{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#07101caa;color:#ffe0a8;border:1px solid #eab16e55;border-radius:30px;padding:5px 12px;margin:0 auto 4px;font-size:10px;font-weight:800;pointer-events:auto}
.board-help{font-size:11px!important;color:#ffbf87!important;margin:5px 0 11px!important}
.weather-flash{position:absolute;z-index:8;top:75px;left:50%;transform:translateX(-50%);font-weight:900;font-size:12px;letter-spacing:.15em;background:#0d2036dd;padding:8px 20px;border:1px solid #cbdce868;pointer-events:none}
/* Keep the virtual buttons in each hand's lower reachable zone, respect display cutouts. */
.hud-bottom{bottom:calc(12px + env(safe-area-inset-bottom,0px));left:max(20px,calc(env(safe-area-inset-left,0px) + 12px));right:max(20px,calc(env(safe-area-inset-right,0px) + 12px));align-items:end}
.control-cluster:first-child{gap:14px;margin-left:2px}
.control-cluster:last-child{gap:10px;margin-right:2px}
.drive-control{min-width:65px;min-height:58px;border-radius:22px;box-shadow:0 8px 22px #03091299,inset 0 1px #ffffff55}
.drive-control.steer{width:clamp(76px,10vw,104px);height:clamp(66px,13vh,86px);border-radius:28px;background:linear-gradient(160deg,#3b536abf,#122131f0);font-size:25px}
.drive-control.brake{width:clamp(67px,9vw,88px);height:clamp(63px,12vh,82px);background:linear-gradient(160deg,#324b61e0,#152339ee)}
.drive-control.gas{width:clamp(80px,10vw,108px);height:clamp(70px,14vh,92px);border-radius:30px}
#pauseButton{min-width:39px;min-height:34px}
@media (max-height:510px){.garage-panel{right:max(15px,calc(env(safe-area-inset-right) + 12px));bottom:23px;width:clamp(218px,29vw,260px);padding:9px}.vehicle-choice{padding:5px 7px;min-height:38px}.vehicle-choice .car-symbol{width:29px;height:14px}.vehicle-choice .car-symbol:after{box-shadow:18px 0 #101824}.garage-stats{padding-top:7px;gap:1px}.menu-panel{width:min(390px,49vw)}.menu-footer{display:none}.hud-bottom{bottom:calc(9px + env(safe-area-inset-bottom,0px))}.drive-control.steer{width:74px;height:62px}.drive-control.gas{width:77px;height:64px}.drive-control.brake{width:66px;height:60px}.hud-mini{display:none}}
@media (max-width:700px){.garage-panel{width:226px;right:max(9px,env(safe-area-inset-right));bottom:18px}.vehicle-choice strong{font-size:10px}.vehicle-choice small{font-size:8px}.hud-bottom{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right))}.control-cluster:first-child{gap:11px}.drive-control.steer{width:65px;height:58px}.control-cluster:last-child{gap:8px}.drive-control.gas{width:67px;height:59px}.drive-control.brake{width:60px;height:57px}.hud-ranking{padding:3px 7px;font-size:9px}}
@media (max-width:610px) and (orientation:landscape){.menu-copy{max-width:47vw}.garage-panel{width:45vw}.menu-panel{width:45vw}.menu-buttons{flex-wrap:wrap}}

/* V2 final clarity and ergonomics */
.board-row.my-record{background:#df9c5633;border-left:3px solid #ffc078;padding-left:10px}
#boardHelp{line-height:1.5}
.control-cluster{align-items:center}
.drive-control:focus-visible{outline:2px solid #ffe7b0;outline-offset:3px}
@media (max-height:430px){.menu-copy{margin-top:4px}.garage-panel{bottom:9px}.hud-top{padding-top:7px}.notice{top:26%}.hud-bottom{bottom:calc(10px + env(safe-area-inset-bottom,0px))}}
@media (max-height:350px){.hud-ranking{font-size:9px;padding:3px 5px}#biomeName{font-size:8px}.drive-control.steer{width:65px;height:53px}.drive-control.gas{width:67px;height:53px}.drive-control.brake{width:59px;height:53px}.garage-panel{width:230px}}