*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:#12202a;color:white;font-family:system-ui,sans-serif;user-select:none;-webkit-user-select:none}canvas{display:block;width:100%;height:100%}button,a{font:inherit;font-weight:800;color:white;touch-action:none}button{cursor:pointer}#hud{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 52px);left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;pointer-events:none}#hud span{background:#10232cd9;border:1px solid #ffffff35;border-radius:9px;padding:7px 11px;font-weight:800;font-size:14px}#controls{position:fixed;inset:0;pointer-events:none}#steering{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));display:flex;border-radius:70px;background:#14394544;border:1px solid #d3f3ee65;pointer-events:auto}#steering button{width:72px;height:104px;border:0;background:transparent;font-size:29px}#pedals{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;gap:14px;align-items:flex-end;pointer-events:auto}#pedals button{border-radius:50%;background:#193b4655;border:2px solid #d8f5ef88}#gas{width:104px;height:104px}#brake{width:82px;height:82px}button.held{background:#2fbbba88!important;border-color:#d5fffe!important}#panel,#result{position:fixed;inset:max(68px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));margin:auto;max-width:950px;max-height:650px;padding:20px;border:1px solid #66dad480;border-radius:20px;background:#10232cf5;box-shadow:0 16px 70px #0008;overflow:auto;touch-action:pan-y;display:flex;gap:24px;align-items:center}#panel img{width:46%;height:100%;max-height:400px;object-fit:cover;border-radius:12px}#panel>div{flex:1}h1{font-size:clamp(24px,4vw,42px);line-height:1.08;margin:8px 0 15px}p{font-size:16px;line-height:1.45}.eyebrow{color:#88eee2;font-size:13px;font-weight:850;letter-spacing:.11em}.keys{font-size:13px;color:#c4d4df}#panel button,#result button{padding:14px 23px;border:0;border-radius:11px;background:#33c9bd;color:#092b30;margin:8px 8px 8px 0}a{display:inline-block;text-decoration:none;font-size:13px;padding:13px 10px;color:#d9e6ed}#result{display:block;text-align:center;height:fit-content;max-width:540px}#result[hidden],#panel[hidden]{display:none}#countdown{position:fixed;top:35%;left:0;right:0;text-align:center;font-weight:950;font-size:76px;text-shadow:0 4px 12px #000;pointer-events:none}#notice{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 100px);width:100%;text-align:center;color:#fff4af;font-weight:800;font-size:13px;pointer-events:none}#build{position:fixed;bottom:4px;left:50%;transform:translateX(-50%);font-size:10px;opacity:.65;pointer-events:none}@media(orientation:portrait){#panel{display:block;padding:16px}#panel img{width:100%;height:150px}#hud{gap:4px;width:calc(100% - 20px);justify-content:center}#hud span{padding:7px 5px;font-size:12px}#steering button{width:55px;height:94px}#pedals{gap:7px;right:max(12px,env(safe-area-inset-right))}#gas{width:92px;height:92px}#brake{width:70px;height:70px}}@media(max-height:410px){#panel{padding:14px;gap:16px}#panel img{width:40%}h1{font-size:25px;margin-bottom:8px}p{font-size:14px;margin:8px 0}.keys{font-size:12px}#steering button{height:90px}#gas{width:92px;height:92px}}
#location{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 88px);width:100%;text-align:center;font-size:11px;color:#e3f5ef;text-shadow:0 1px 3px #000;pointer-events:none}#notice{top:calc(max(8px,env(safe-area-inset-top)) + 107px)}select{font:inherit;max-width:100%;padding:7px;background:#193b46;color:#fff;border:1px solid #70beb7;border-radius:8px;touch-action:manipulation}#panel label{display:block;font-size:13px;margin:7px 0}#next[hidden]{display:none}#standings{font-size:13px;line-height:1.7}
#strategy{position:fixed;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 8px);left:50%;transform:translateX(-50%);background:#10232ccc;border-radius:8px;padding:5px 8px;font-size:11px;pointer-events:none;white-space:nowrap}#pit-info{position:fixed;top:calc(max(8px,env(safe-area-inset-top)) + 126px);left:0;width:100%;text-align:center;color:#ffe19a;font-size:12px;pointer-events:none}@media(orientation:portrait){#strategy{bottom:126px;font-size:10px}}@media(max-height:410px){#strategy{font-size:10px;bottom:20px}#pit-info{top:130px;font-size:11px}}
/* P07–P16: precision touch steering, compact strategy feedback and race setup. */
#panel{align-items:flex-start;max-height:760px}#panel img{position:sticky;top:0;max-height:440px}#panel .pit-guide{font-size:13px;line-height:1.5;color:#e3dac0;background:#eeb95e0d;border-left:2px solid #dcba69;padding:8px 10px;margin:12px 0}.race-options{display:flex;flex-wrap:wrap;gap:8px 14px}.race-options label{flex:1;min-width:145px}#panel label select{display:block;margin-top:4px;width:100%}#record{font-size:12px;color:#a5d6d1;min-height:18px}#length-hint{color:#e9d199;margin:5px 0 10px}#steering{background:linear-gradient(90deg,#122d3d66,#3d747744,#122d3d66)}#steering:after{content:'';position:absolute;left:50%;top:35%;height:30%;border-left:1px solid #d3f3ee4a;pointer-events:none}#steering button{touch-action:none}#strategy.low{color:#ffe1a0;border:1px solid #d39b53}#pit-info{padding:0 8px;line-height:1.3;text-shadow:0 2px 5px #000}#resume{position:fixed;left:50%;top:55%;transform:translateX(-50%);border:1px solid #74d7ce;border-radius:10px;background:#16383bed;padding:13px 18px}#resume[hidden]{display:none}#result #garage{background:#25434f;color:#e9ffff}#panel button,#result button{font-size:13px}#build{font-variant-numeric:tabular-nums}#hud span{font-variant-numeric:tabular-nums}#panel :focus-visible,#result :focus-visible,#resume:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(orientation:portrait){#panel img{position:static;height:135px}#panel h1{font-size:30px}#panel p{font-size:14px}#panel p.keys,#panel p.pit-guide{font-size:12px}#strategy{bottom:126px}#panel label{font-size:12px}#panel button{padding:13px 15px}#pit-info{max-width:100%;font-size:11px}}
@media(max-height:410px){#panel img{width:35%;height:auto;max-height:230px}#panel h1{font-size:25px}#panel .pit-guide{margin:8px 0;padding:6px 9px}#panel button{padding:11px 14px}#pit-info{font-size:10px;top:127px}#location{font-size:10px}}