:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#172e30;background:#f7efdb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #29444538;border-radius:14px;min-height:48px;padding:12px 18px;background:#fff9ec;color:#172e30;font-weight:800;transition:background .15s,transform .15s}button:hover{background:#ffdf9c}button:active{transform:translateY(2px)}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:4px solid #e56338;outline-offset:3px}button:disabled{opacity:.55;cursor:default}button[aria-selected=true],button.selected{background:#173e3f;color:#fff7df;border-color:#173e3f}button small{display:block;font-size:10px;letter-spacing:.04em;margin-top:3px}button svg{max-width:100%}[hidden]{display:none!important}#scene{position:fixed;width:100%;height:100%;inset:0;z-index:0;pointer-events:none}header{position:relative;z-index:2;display:flex;align-items:center;gap:18px;padding:20px 4vw}.back{font-size:25px;color:#173e3f;text-decoration:none;border:1px solid #173e3f55;border-radius:50px;min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 18px}.back span{font-size:11px;font-weight:900;letter-spacing:.12em}.brand{font-size:21px;font-weight:1000;letter-spacing:-1px;line-height:1}.brand b{color:#cc512b}.brand small{display:block;font-size:8px;letter-spacing:.22em;margin-top:8px}.badge{margin-left:auto;padding:12px 18px;border:1px solid #173e3f40;border-radius:50px;background:#fbf5e7d9;font-size:13px;font-weight:900;white-space:nowrap}.panel{position:relative;z-index:1;margin:25px 4vw 48px;max-width:1320px}.intro{max-width:700px;min-height:250px;pointer-events:none}.eyebrow{font:800 10px system-ui;letter-spacing:.2em;color:#985436}.intro h1{font-size:clamp(46px,6.4vw,86px);letter-spacing:-.065em;line-height:.98;margin:17px 0}.intro em{font-style:normal;color:#cf532c}.intro p,.builder>p{font-size:15px;color:#56625a}.garage-body{margin-top:20px;background:#f9f3e4ee;border:1px solid #d3c5a6;border-radius:24px;padding:20px;box-shadow:0 15px 60px #59462e12;max-width:1000px}.tabs{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #d3c5a6}.tabs button{border-radius:50px;font-size:12px;padding:12px 22px}.choices{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:16px 0;max-height:300px;overflow:auto;padding:4px}.choice{position:relative;text-align:left;padding:10px;min-height:115px;border-radius:13px;border:1px solid #d3c5a6;background:#fffaf0}.choice svg{display:block;width:100%;height:55px}.choice .name{display:block;font-size:12px;line-height:1.25}.choice .detail{font-size:10px;display:block;margin-top:5px;opacity:.8}.choice.selected:after{content:'✓';position:absolute;right:8px;top:6px}.choice.locked{background:#eae4d7;color:#7b7e70}.choice .swatch{height:50px;border-radius:9px;display:block;margin-bottom:8px;border:1px solid #0002}.primary{background:#ce552e;color:#fff8e7;border-color:#ce552e;min-height:58px;padding:16px 26px;letter-spacing:.04em}.primary:hover{background:#b94723}.primary span{margin-left:20px}.quiet{background:#f8f0ddc9}.launch-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.fine{font-size:11px;color:#77786c;margin-bottom:0}.race-info{position:absolute;top:104px;left:4vw;min-width:230px;background:#fff6e4e8;padding:16px 20px;border-radius:15px;border:1px solid #c8b795;z-index:1}.race-info span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.race-info strong{display:block;font-size:24px;margin-top:6px}.progress{height:5px;background:#d9cbae;border-radius:8px;margin-top:10px;overflow:hidden}.progress i{display:block;background:#c95430;height:100%;width:0}.hint{position:absolute;z-index:1;top:114px;right:4vw;font-size:12px;background:#fff6e4eb;padding:14px;border-radius:12px;max-width:260px}#toast{position:absolute;z-index:1;top:35%;width:100%;text-align:center;font-size:clamp(22px,4vw,45px);font-weight:1000;color:#173e3f;text-shadow:0 2px #fff5de;pointer-events:none}.controls{position:fixed;z-index:3;bottom:max(42px,env(safe-area-inset-bottom));left:4vw;right:4vw;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.control-group{display:flex;gap:8px;pointer-events:auto}.controls button{min-width:66px;min-height:74px;font-size:27px;background:#fcf1dbea;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 4px 0 #94816b77;padding:8px 12px}.controls button.held,.controls button[aria-pressed=true]{background:#173e3f;color:white;transform:translateY(3px)}.controls .gas{background:#cddfb8}.controls .jump{background:#efaa68}.modal{position:fixed;z-index:5;inset:0;background:#172e3077;display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}.modal-card{width:min(480px,100%);max-height:90svh;overflow:auto;background:#fff4df;border:1px solid #d3c5a6;border-radius:24px;padding:30px;box-shadow:0 20px 80px #0003}.modal-card h2{font-size:34px;letter-spacing:-.04em;margin:14px 0}.modal-card button{width:100%;margin-top:10px;min-height:58px}.modal-card p{line-height:1.6}.builder{background:#fff4e3eF;padding:25px;border-radius:24px;border:1px solid #c6b99b;margin:25px auto 50px;width:92vw}.builder h2{font-size:42px;letter-spacing:-.05em;margin:12px 0}.palette{display:flex;gap:8px;flex-wrap:wrap}.palette button{min-width:125px;min-height:64px}.palette b{font-size:22px;margin-right:8px}#course{width:100%;height:260px;border:1px solid #cab79b;border-radius:14px;margin:18px 0;touch-action:none;background:#f2dfb9}.builder-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.builder-tools strong{font-size:12px}#builderStatus{min-height:20px;font-size:12px}footer{position:fixed;bottom:7px;left:0;right:0;z-index:4;text-align:center;font:10px monospace;color:#173e3fa0;pointer-events:none}body.riding{overflow:hidden}body.riding header{background:linear-gradient(#f8eedad9,transparent)}
@media(min-width:1100px){.garage-body{max-width:850px}.intro{min-height:265px}.panel{margin-top:28px}}@media(max-width:750px){header{gap:9px;padding:14px 4vw}.brand{font-size:17px}.brand small{font-size:6px}.back{padding:8px 12px}.back span{display:none}.badge{padding:10px;font-size:11px}.intro{min-height:220px}.intro h1{font-size:58px}.intro p{max-width:230px;line-height:1.5}.garage-body{padding:14px;margin-top:15px}.tabs{gap:5px}.tabs button{padding:10px 12px;font-size:11px}.choices{grid-template-columns:repeat(3,1fr);max-height:310px}.choice{min-height:110px}.controls{left:12px;right:12px;gap:4px}.control-group{gap:5px}.controls button{min-width:60px;min-height:70px;padding:6px 9px}.controls button small{font-size:8px}.tricks{justify-content:flex-end;flex-wrap:wrap;max-width:250px}.hint{top:170px;font-size:10px;max-width:190px}.race-info{top:90px;padding:12px;min-width:185px}.race-info strong{font-size:20px}.builder h2{font-size:32px}.builder{padding:18px}#garageButton{font-size:11px;padding:9px;min-height:44px}}
@media(max-height:520px) and (min-width:650px){header{padding:8px 3vw}.panel{margin-top:0}.intro{min-height:120px}.intro h1{font-size:42px}.intro p,.eyebrow{display:none}.garage-body{margin-top:8px;padding:10px}.choices{grid-template-columns:repeat(5,1fr);max-height:145px;margin:6px 0}.choice{min-height:90px}.choice svg{height:38px}.tabs{padding-bottom:6px}.tabs button{min-height:44px;padding:8px 16px}.fine{display:none}.controls{bottom:40px}.controls button{min-height:64px}.race-info{top:65px}.hint{top:70px}}

#track3d,.race-fallback-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#raceLoading{position:fixed;z-index:8;top:42%;left:50%;transform:translate(-50%,-50%);max-width:calc(100% - 40px);padding:20px 26px;border:1px solid #e8d5a94d;border-radius:16px;background:#292219ed;color:#fff3da;font:700 15px system-ui;text-align:center;pointer-events:none}
.track-loading{font:700 12px system-ui;color:#725b3d;line-height:1.5;margin:12px 0}
.telemetry{display:flex;justify-content:space-between;gap:24px;margin-top:10px;font-variant-numeric:tabular-nums}.telemetry b{font-size:25px}#timer{color:#b84b27}
.controls .brake{background:#e99d86}.controls .boost{background:#ffd674}.controls .boost:disabled{background:#d1d6c7;opacity:.85}.controls .tricks button{min-width:58px}
@media(max-width:850px){.controls{display:grid;grid-template-columns:1fr;gap:8px;bottom:max(40px,env(safe-area-inset-bottom))}.control-group{width:100%;justify-content:center}.drive-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.controls .tricks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:none;gap:5px}.controls button,.controls .tricks button{min-width:0;min-height:64px;padding:7px 2px;font-size:24px}.controls .drive-controls button{min-height:72px}.controls button small{font-size:8px}.hint{top:205px;max-width:200px}.race-info{top:85px;min-width:195px}}
@media(max-height:500px){.controls{bottom:24px;gap:5px}.controls button,.controls .drive-controls button{min-height:52px}.race-info{top:65px;padding:8px}.race-info strong{font-size:15px}.telemetry b{font-size:18px}.telemetry{margin-top:4px}.hint{top:68px;max-width:220px}}

.number-picker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 18px}.number-picker label{font-size:11px;font-weight:900;letter-spacing:.08em}.number-picker input{width:84px;min-height:54px;border:2px solid #173e3f;border-radius:12px;font:900 24px system-ui;text-align:center;background:#fff9ec;color:#173e3f}.number-picker button{min-width:54px;min-height:54px;font-size:22px}.number-picker span{font-size:11px}.builder-tools button{min-height:54px}

.course-card { border: 2px solid #537172; border-radius: 14px; padding: 12px; min-width: 0; }
.course-card h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.course-card canvas { display: block; width: 100%; max-width: 320px; height: 120px; }
.course-card button { min-height: 64px; margin: 6px; }
#courseName { display: block; width: min(100%, 360px); min-height: 44px; font: inherit; margin: 8px 0 16px; }
#myGarage, #createCourse, #saveCourse, #builderGarage, #newCourse { min-height: 64px; }

.choices.course-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-height: 480px; }
.course-list > p, .course-list > button { grid-column: 1 / -1; }
/* Two-thumb phone layout: a floating stick for the left thumb, two big buttons for the right. */
.thumbs{display:none}
body.thumb-layout:not(.starting) .controls{display:none!important}
body.thumb-layout .thumbs{display:block}
.thumb-zone{position:fixed;z-index:3;left:0;bottom:0;width:55%;height:62%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.thumb-ring{position:absolute;left:max(100px,calc(env(safe-area-inset-left) + 88px));top:calc(100% - 104px);width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:50%;border:3px solid #173e3f66;background:#fff6e44d;pointer-events:none;transition:background .12s,border-color .12s}
.thumb-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:#cddfb8ee;box-shadow:0 3px 0 #0003}
.thumb-tag{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center;font:800 10px/1.35 system-ui;letter-spacing:.06em;color:#173e3f;background:#fff6e4d9;border-radius:9px;padding:4px 8px}
.thumb-zone.active .thumb-ring{background:#fff6e480;border-color:#173e3f}
.thumb-zone.active .thumb-tag{opacity:0}
.thumb-zone.drifting .thumb-knob{background:#173e3f}
.thumb-button{position:fixed;z-index:3;border-radius:50%;padding:0;display:grid;place-content:center;font-size:40px;line-height:1;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:0 5px 0 #94816b88}
.thumb-button small{font-size:10px;margin-top:4px}
.thumb-jump{right:max(22px,calc(env(safe-area-inset-right) + 14px));bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px));width:120px;height:120px;background:#efaa68}
.thumb-boost{right:max(150px,calc(env(safe-area-inset-right) + 142px));bottom:max(96px,calc(env(safe-area-inset-bottom) + 84px));width:84px;height:84px;font-size:30px;background:#ffd674}
.thumb-boost:disabled{background:#d1d6c7;opacity:.9}
.thumb-button.held{background:#173e3f;color:#fff;transform:translateY(3px)}
@media(orientation:portrait){.thumb-boost{right:max(40px,calc(env(safe-area-inset-right) + 32px));bottom:max(170px,calc(env(safe-area-inset-bottom) + 158px))}}
/* Keep the shared Play together button clear of the right thumb on short landscape phones. */
@media(max-height:500px){body.thumb-layout.riding .arcade-room-open[data-game="daredevil-races"]{top:140px}}


.lap-picker{border:0;padding:12px 0;margin:0}.lap-picker legend{font-size:12px;font-weight:800;letter-spacing:.1em}#lapChoices{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}#lapChoices button{min-width:0;min-height:64px;font-size:22px}#lapChoices button[aria-pressed="true"]{background:#173f42;color:#fff;border:3px solid #ffb64d}.start-sequence{position:fixed;inset:20% 15% auto;text-align:center;pointer-events:none;z-index:5;text-shadow:0 3px 12px #172e30}.start-sequence strong{display:block;color:#fff5d9;font-size:clamp(48px,14vw,120px);line-height:1.2}.start-sequence span{display:block;color:white;font-weight:800;background:#173f42e8;border-radius:18px;padding:10px;font-size:16px}.launch-button{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom));width:150px;min-height:100px;z-index:9;background:#ffc447;color:#172e30;font-size:32px;touch-action:none;user-select:none;-webkit-touch-callout:none}.launch-button small{display:block;font-size:12px}body.starting .controls{visibility:visible}body.starting .controls button{min-height:64px}body.starting .thumbs{visibility:hidden}@media(max-width:600px){#lapChoices{grid-template-columns:repeat(4,1fr)}}

/* The garage uses the same full-screen dirt world as the race. This reserved
   area keeps the actual selected model beside the headline and above choices. */
.garage-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:24px;align-items:center;min-height:300px}
.garage-hero .intro{min-height:0;max-width:650px;padding:16px 20px 16px 0;text-shadow:0 1px 10px #fff9e6}
.garage-hero .intro p{color:#32413b}
.garage-preview{margin:0;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
#garageBikePreview{position:relative;width:100%;height:280px}
#garagePreviewStatus{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:14px;color:#203c37;padding:16px}
.garage-preview figcaption{align-self:center;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 10px;padding:9px 16px;border-radius:14px;background:#fff8e7e8;border:1px solid #c6b48f;color:#173e3f;max-width:100%;text-align:center}
.garage-preview figcaption strong{font-size:15px}.garage-preview figcaption>span:last-child{font-size:12px}.garage-preview figcaption .eyebrow{font-size:8px;color:#725133}
.choices.helmet-list,.choices.glove-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.glove-inspect{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:64px;border:1px solid #b7a88b;border-radius:14px;background:#fff8e8;color:#173e3f;font-size:13px;font-weight:800;text-decoration:none;text-align:center;padding:12px}
.glove-inspect:hover{background:#ffdf9c}
#garage .garage-body{background:#fbf6e9f2;box-shadow:0 12px 48px #2f271b24}
#garage .primary{min-height:64px}
@media(max-width:750px){.garage-hero{grid-template-columns:1fr;gap:0;min-height:0}.garage-hero .intro{padding:0}.garage-hero .intro h1{font-size:34px;line-height:1.05;margin:10px 0}.garage-hero .intro h1 br{display:none}.garage-hero .intro p{display:none}.garage-hero .intro>.eyebrow{font-size:8px}#garageBikePreview{height:180px}.garage-preview figcaption{padding:7px 12px;gap:4px 8px}.garage-preview figcaption strong{font-size:13px}.garage-preview figcaption .eyebrow{display:none}#garage .garage-body{margin-top:14px}}
@media(max-height:520px) and (min-width:650px){.garage-hero{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:20px;min-height:0}.garage-hero .intro{padding:0}.garage-hero .intro h1{font-size:40px;margin:8px 0}.garage-hero .intro p{display:none}#garageBikePreview{height:145px}.garage-preview figcaption{padding:5px 12px}.garage-preview figcaption .eyebrow{display:none}.garage-preview figcaption strong{font-size:12px}.garage-preview figcaption>span:last-child{font-size:10px}#garage .garage-body{margin-top:10px}}
/* Keep the chosen ride in sight while the options scroll under the thumbs. */
body.in-garage{overflow:hidden}
#garage{display:flex;flex-direction:column;height:calc(100svh - 124px);margin-top:0;margin-bottom:20px}
#garage .garage-hero{flex:0 0 auto}
#garage .garage-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;width:min(100%,1000px)}
#garage .choices{max-height:none;overflow:visible}
@media(min-width:1100px){#garage .garage-body{width:min(100%,850px)}}
@media(max-width:750px){#garage{height:calc(100svh - 90px);margin-bottom:14px}}
@media(max-height:520px) and (min-width:650px){#garage{height:calc(100svh - 78px);margin-bottom:14px}}
body.in-garage header{padding-right:180px;background:linear-gradient(#fff6e5ee,#fff6e599)}
.garage-hero .intro{border-radius:22px;padding:20px;background:linear-gradient(105deg,#fff6e5f0,#fff6e5bb 70%,#fff6e500);text-shadow:none}
.garage-hero .intro h1{font-size:clamp(40px,5.2vw,72px)}
@media(max-width:750px){body.in-garage header{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;padding:12px 4vw}.in-garage .back{grid-column:1;grid-row:1}.in-garage .brand{grid-column:2;grid-row:1}.in-garage .badge{grid-column:3;grid-row:1;margin-left:0}.in-garage #soundToggle{grid-column:2;grid-row:2;justify-self:start;width:120px;min-width:0!important;padding:8px;font-size:12px;white-space:nowrap}.in-garage .arcade-room-open[data-game="daredevil-races"]{top:76px;right:12px}.in-garage .arcade-shop-link{top:128px;right:12px}.garage-hero .intro{padding:8px 12px;max-width:200px}.garage-hero .intro h1{font-size:28px}#garage{height:calc(100svh - 140px)}#garageBikePreview{height:210px}}
@media(max-height:520px) and (min-width:650px){.garage-hero .intro{padding:10px 16px}.garage-hero .intro h1{font-size:36px}#garageBikePreview{height:145px}}

/* Riding remains a single visible action while the garage choices scroll. */
#garage .garage-launch{flex:0 0 auto;justify-content:flex-end;gap:10px;margin-top:10px;padding:8px 12px;border:1px solid #d3c5a6;border-radius:20px;background:#fbf6e9f5;box-shadow:0 8px 32px #2f271b24}
#garage .garage-launch #start{min-width:190px;min-height:64px}
#garage .garage-launch #resume{min-height:64px}
#garage .garage-launch .track-loading{flex-basis:100%;margin:0;font-size:12px;text-align:right}
#garage .choice svg{border-radius:8px;background:#fff8e8}
#garage .choice.selected svg{box-shadow:0 0 0 1px #fff8e866}
@media(min-width:751px) and (max-width:1099px) and (min-height:521px){
  #garageBikePreview{height:260px}
}
@media(max-width:750px){
  #garage{height:calc(100svh - 164px - env(safe-area-inset-bottom))}
  #garage .intro>.eyebrow{display:none}
  #garageBikePreview{height:195px}
  #garage .tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:10px;scrollbar-width:thin}
  #garage .tabs button{flex:0 0 auto;min-height:44px}
  #garage .garage-launch{gap:8px;padding:8px;margin-top:8px;border-radius:16px}
  #garage .garage-launch #start{min-width:180px;flex:0 1 58%;font-size:14px;padding:12px}
  #garage .garage-launch #start span{margin-left:8px}
  #garage .garage-launch #resume{flex:1 1 auto;min-width:0;padding:10px;font-size:12px}
}
@media(max-height:520px) and (min-width:650px){
  #garage{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:16px;height:calc(100svh - 96px - env(safe-area-inset-bottom))}
  #garage .garage-hero{grid-column:1;grid-row:1;display:flex;min-height:0;gap:0}
  #garage .garage-hero .intro{display:none}
  #garage .garage-preview{width:100%;min-height:0;justify-content:flex-end}
  #garageBikePreview{height:auto;min-height:145px;flex:1 1 auto}
  #garage .garage-body{grid-column:2;grid-row:1;width:100%;margin:0;padding:10px;border-radius:18px}
  #garage .tabs{flex-wrap:nowrap;gap:4px;padding-bottom:6px;overflow-x:auto;scrollbar-width:none}
  #garage .tabs button{flex:0 0 auto;min-width:64px;padding:8px 7px;font-size:10px;white-space:nowrap}
  #garage .choices{grid-template-columns:repeat(3,minmax(0,1fr));margin:6px 0}
  #garage .choice{min-height:94px;padding:8px}
  #garage .choice svg{height:38px}
  #garage .garage-launch{grid-column:1/-1;grid-row:2;margin-top:10px;padding:8px 10px 8px 176px}
  #garage .garage-launch #start{min-width:220px}
  body.in-garage .arcade-shop-link{top:auto;right:auto;left:calc(4vw + 12px);bottom:calc(42px + env(safe-area-inset-bottom))}
}


body.starting #startCue{animation:startBeat 1s ease-out infinite}@keyframes startBeat{0%{transform:scale(1.13)}45%,100%{transform:scale(1)}}

@media(max-width:600px){body.starting .controls .tricks{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media(max-height:500px){.start-sequence{inset:15% 22% auto}.start-sequence strong{font-size:clamp(36px,7vw,64px);white-space:nowrap}.start-sequence span{font-size:13px;padding:8px}}

.difficulty-picker { border: 0; margin: 18px 0; padding: 0; min-width: 0; }
.difficulty-picker legend { font-weight: 800; margin-bottom: 10px; }
#difficultyChoices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#difficultyChoices button { min-height: 64px; min-width: 0; padding: 10px 6px; font-size: 14px; }
#difficultyChoices button[aria-pressed="true"] { background: #f4c365; color: #172e30; outline: 3px solid #172e30; outline-offset: 2px; }
@media (max-width: 540px) { #difficultyChoices { grid-template-columns: repeat(2, minmax(0, 1fr)); } #difficultyChoices button:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Place stays beside the trick score, clear of the two-thumb controls. */
.race-score{display:flex;align-items:center;justify-content:space-between;gap:12px}.race-place{font-size:24px;line-height:1;white-space:nowrap;color:#a74320;font-variant-numeric:tabular-nums}.finish-place{font-size:36px;font-weight:1000;color:#a74320;margin:12px 0}
@media(max-height:500px){.race-place{font-size:22px}}


/* Information stays above the two thumb zones. */
#minimap{position:fixed;top:150px;right:4vw;z-index:2;width:164px;padding:8px 10px;background:#0c192eea;color:#f5f6ef;border:1px solid #93b2cf;border-radius:14px;pointer-events:none}
#minimap b{display:block;text-align:center;font-size:12px}#raceMap{display:block;width:140px;height:130px}#mapGaps{display:block;font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums}.map-legend{display:block;font-size:9px;color:#d1dfeb;margin-top:4px}
#raceHud .hint{top:390px;max-width:230px}
@media(max-width:600px){#minimap{top:270px;right:12px;width:140px;padding:7px}#raceMap{width:124px;height:115px}#mapGaps{font-size:9px}#raceHud .hint{top:116px;max-width:148px;font-size:10px}}
@media(max-height:500px){#minimap{top:70px;right:190px;width:128px;padding:6px}#raceMap{width:114px;height:78px}#mapGaps{font-size:9px;line-height:1.2}#minimap .map-legend{display:none}#raceHud .hint{top:70px;right:330px;font-size:10px;max-width:175px}}

.speedometer{position:fixed;z-index:2;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%);width:150px;padding:10px 16px;border:1px solid #93b2cf;border-radius:16px;background:#0c192eea;color:#fff6e4;text-align:center;pointer-events:none;font-variant-numeric:tabular-nums}
.speedometer b{display:block;font-size:28px;line-height:1.2}
.speed-track{height:6px;margin-top:7px;background:#ffffff30;border-radius:4px;overflow:hidden}
.speed-track i{display:block;width:0;height:100%;background:#ffc447}
body.thumb-layout .speedometer{bottom:calc(28px + env(safe-area-inset-bottom))}
@media(max-width:600px) and (orientation:portrait){body.thumb-layout .speedometer{bottom:calc(220px + env(safe-area-inset-bottom))}.speedometer{bottom:calc(200px + env(safe-area-inset-bottom));width:124px;padding:8px 10px}.speedometer b{font-size:24px}}
@media(max-height:500px){.speedometer{bottom:calc(95px + env(safe-area-inset-bottom));width:124px;padding:7px 10px}.speedometer b{font-size:24px}body.thumb-layout .speedometer{bottom:calc(24px + env(safe-area-inset-bottom))}}


.race-fallback-canvas[hidden]+.city-streetlife-overlay{display:none!important}

.city-horizon-background:has(+.race-fallback-canvas[hidden]){display:none!important}

.racer-name{display:grid;gap:8px;margin:12px 0}.racer-name label{font-size:12px;font-weight:800;letter-spacing:.08em}.racer-name input{width:100%;min-height:64px;padding:12px 16px;border:2px solid #bca77d;border-radius:12px;background:#fff8e8;color:#183c3e;font:700 20px system-ui;user-select:text;touch-action:manipulation}.racer-name small{font-size:11px;color:#52645d}#daredevilTV{position:absolute;top:92px;right:24px;width:224px;padding:10px 12px;background:#071a2bf2;border:3px solid #e5b65c;border-radius:10px;color:#f4eee0;pointer-events:none}#daredevilTV h2{margin:0 0 8px;font:900 15px system-ui;color:#ffd673;letter-spacing:.04em}#daredevilTV h2 small{font-size:8px;color:#fff}#tvStandings{list-style:none;margin:0;padding:0;display:grid;gap:3px}#tvStandings li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:6px;font:600 12px system-ui}#tvStandings span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.your-position{color:#ffd673}body.riding:has(#daredevilTV:not([hidden])) #minimap{top:280px}@media(max-width:600px){#daredevilTV{top:92px;right:12px;width:44%;padding:8px}#daredevilTV h2{font-size:11px}#tvStandings li{font-size:10px;grid-template-columns:30px minmax(0,1fr);gap:2px}body.riding:has(#daredevilTV:not([hidden])) .race-info{min-width:0;max-width:49%}body.riding:has(#daredevilTV:not([hidden])) #minimap{top:260px}}@media(max-height:500px) and (min-width:650px){#daredevilTV{top:66px;right:12px;width:175px}#daredevilTV h2{font-size:12px}#tvStandings li{font-size:10px}body.riding:has(#daredevilTV:not([hidden])) #minimap{top:70px;right:200px}}
/* Keep the broadcast clear of the arcade Shop overlay and the riding controls. */
#daredevilTV{top:140px}body.riding:has(#daredevilTV:not([hidden])) #minimap{top:320px}
@media(max-width:600px){#daredevilTV{top:140px}body.riding:has(#daredevilTV:not([hidden])) #minimap{top:280px}}
@media(max-height:500px) and (min-width:650px){#daredevilTV{top:66px;right:160px}body.riding:has(#daredevilTV:not([hidden])) #minimap{top:70px;right:350px}body.riding:has(#daredevilTV:not([hidden])) #raceHud .hint{display:none}}

/* Replay controls stay at the thumb edge; the track remains visible above. */
.tv-screen { position:fixed; inset:0; z-index:90; color:#fff5e5; overflow:auto; background:#0e2029; padding:24px 24px 100px; }
.tv-screen:has(.tv-player:not([hidden])) { background:transparent; pointer-events:none; }
.tv-screen button,.tv-screen input { pointer-events:auto; min-height:64px; font:inherit; }
.tv-screen button { border:2px solid #dfaa64; border-radius:14px; background:#183641; color:#fff5e5; padding:12px 20px; cursor:pointer; }
.tv-screen button:focus-visible { outline:4px solid white; outline-offset:3px; }
.tv-screen button:disabled { opacity:.5; cursor:default; }
.tv-library { max-width:900px; margin:auto; }
.tv-library h1 { font-size:clamp(28px,6vw,60px); margin:12px 0; }
.tv-library em { color:#ffc461; }
.tv-races { display:grid; gap:16px; }
.tv-race { background:#18303a; padding:18px; border-radius:18px; border:1px solid #718281; }
.tv-race h2 { margin:0; }
.tv-race button { margin:4px; }
.tv-close { position:fixed; bottom:max(16px,env(safe-area-inset-bottom)); left:16px; }
.tv-caption { position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; gap:8px; text-shadow:0 2px 6px #000; }
.tv-moment { color:#ffe39b; font-weight:bold; }
.tv-transport { position:fixed; bottom:max(92px,calc(env(safe-area-inset-bottom) + 80px)); left:12px; right:12px; background:#102632ed; border-radius:16px; padding:12px; pointer-events:auto; }
.tv-transport label { display:flex; align-items:center; gap:12px; }
.tv-seek { flex:1; min-width:60px; width:100%; accent-color:#ffc461; }
.tv-clock { display:block; text-align:center; font-variant-numeric:tabular-nums; }
.tv-buttons { display:flex; justify-content:space-between; gap:8px; }
@media(max-width:600px) { .tv-screen { padding:16px 12px 100px; } .tv-race button { display:block; width:100%; margin:8px 0 0; } .tv-buttons button { flex:1; padding:8px; } }
@media(max-height:450px) { .tv-transport { bottom:10px; left:180px; } .tv-transport label { font-size:12px; } .tv-transport input { min-height:44px; } .tv-buttons button { padding:6px 12px; } }

#openTV, #finishTV { min-height:64px; }


.steering-setting{margin:16px 0 0;border:1px solid #cab79b;border-radius:16px;padding:12px;min-width:0}
.steering-setting legend{font-weight:900;padding:0 8px}
.steering-setting-body{display:flex;align-items:center;justify-content:center;gap:24px}
.steering-slider{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:13px}
#steeringSpeed{writing-mode:vertical-lr;direction:rtl;width:64px;height:150px;accent-color:#ce552e;touch-action:none}
#steeringSpeed:focus-visible{outline:4px solid #e56338;outline-offset:3px}
.steering-step-controls{min-width:128px;text-align:center}
#steeringSpeedValue{font-size:24px;font-weight:900}
.steering-step-controls button{min-height:64px;margin-top:8px}
@media(max-height:500px){#pause .modal-card{padding:16px;max-height:94svh}#pause .modal-card h2{font-size:24px;margin:6px 0}.steering-setting-body{gap:12px}#steeringSpeed{height:128px}}


#settingsButton{min-width:128px;min-height:64px;margin-top:10px}