:root{--ink:#f3f4f6;--muted:#a3a9b3;--panel:rgba(14,16,20,.82);--line:rgba(255,255,255,.12);--accent:#f5c518;--ok:#3ddc68;--bad:#ff5a4f;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0f12;color:var(--ink);font:15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
#view{position:fixed;inset:0;width:100vw;height:100vh;display:block}
.loading{position:fixed;inset:0;z-index:50;display:grid;place-content:center;gap:8px;text-align:center;background:#0d0f12;transition:opacity .45s}
.loading b{font:italic 800 56px/1 "Barlow Condensed",Impact,sans-serif;letter-spacing:.02em}
.loading span{color:var(--muted)}
.loading.done{opacity:0;pointer-events:none}

/* menu */
.menu{position:fixed;inset:0;z-index:20;overflow:auto;background:linear-gradient(90deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.78) 46%,rgba(8,9,12,.15) 78%,rgba(8,9,12,0) 100%)}
.menu-in{max-width:540px;padding:28px 28px 40px 44px}
.brand{display:inline-block;font-weight:800;letter-spacing:-.4px;text-decoration:none;color:var(--muted);margin-bottom:22px}
.menu h1{margin:0;font:italic 800 clamp(64px,9vw,108px)/.86 "Barlow Condensed",Impact,sans-serif;letter-spacing:.01em;text-shadow:0 6px 30px rgba(0,0,0,.4)}
.lede{margin:14px 0 22px;color:#d6dae0;font-size:16px;max-width:44ch}
.daily{padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,rgba(245,197,24,.18),rgba(245,197,24,.04));border:1px solid rgba(245,197,24,.45);box-shadow:0 20px 60px -30px rgba(0,0,0,.8)}
.tag{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.daily h2{margin:0;font:800 32px/1.05 "Barlow Condensed",Impact,sans-serif;letter-spacing:.01em}
.daily p{margin:6px 0 0;color:#d6dae0;font-size:14px}
.daily .best{color:var(--muted);font-size:13px}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;margin-top:16px;border:0;border-radius:12px;background:var(--accent);color:#14151a;font-weight:800;font-size:16px;letter-spacing:.01em;box-shadow:0 10px 30px -10px rgba(245,197,24,.6)}
.go:hover{filter:brightness(1.06)}
.pro{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(10,11,13,.55);text-align:left}
.pro:hover{border-color:rgba(255,255,255,.35)}
.pro>b{flex:none;display:grid;place-items:center;height:30px;padding:0 9px;border-radius:8px;background:#ff5a4f;color:#fff;font:800 13px Inter,sans-serif;letter-spacing:.08em}
.pro span{display:flex;flex-direction:column}.pro strong{font-size:14px}.pro small{color:var(--muted);font-size:12px}
.bkind{display:inline-flex;margin:10px 0 0;padding:3px;border-radius:10px;background:rgba(255,255,255,.06);align-self:flex-start}
.bkind button{min-height:30px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:700;font-size:12.5px}
.bkind button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:var(--ink)}
.who{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
#playDaily svg{width:20px;height:20px;margin-right:10px;background:#fff;border-radius:50%;padding:2px}
.streak{margin:10px 0 0;font-weight:800;font-size:14px;color:var(--accent)}
.lh{margin:28px 0 10px;font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:700}
.levels{display:grid;gap:8px}
.lvl{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(20,22,27,.7)}
.lvl:hover{border-color:rgba(255,255,255,.3)}
.lvl .n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.08);font-weight:800}
.lvl b{display:block;font-size:15px}.lvl em{font-style:normal;color:var(--muted);font-size:13px}
.lvl .b{font:700 15px "Barlow Condensed",sans-serif;color:var(--ok)}
.keys{margin:22px 0 0;color:var(--muted);font-size:12.5px;line-height:1.7}.keys b{color:#d6dae0}
.cta{margin:14px 0 0;font-size:13.5px;color:var(--muted)}.cta a{color:var(--ink);font-weight:600}

/* leaderboard */
.row-l{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.row-l .go{margin-top:16px}.row-l .ghost{margin-top:16px}
.teaser{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px}
.teaser li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;font-size:14px}
.teaser .rk{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:rgba(245,197,24,.2);color:var(--accent);font-weight:800;font-size:12px}
.teaser b{font:700 16px "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums}
.teaser .more{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.board{position:fixed;inset:0;z-index:35;display:grid;place-items:center;background:rgba(8,9,12,.62);backdrop-filter:blur(4px)}
.board-card{width:min(560px,calc(100% - 24px));max-height:calc(100% - 40px);display:flex;flex-direction:column;padding:20px 20px 16px;border-radius:22px;background:rgba(16,18,22,.97);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.board-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.board-card h2{margin:0;font:800 30px/1 "Barlow Condensed",Impact,sans-serif}
.btabs{display:flex;gap:6px;margin:14px 0 0;overflow-x:auto;scrollbar-width:none}
.btabs button{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:600;font-size:13px}
.btabs button[aria-selected="true"]{background:var(--ink);color:#14151a;border-color:var(--ink)}
.board-sub{margin:10px 2px 6px;color:var(--muted);font-size:13px}
.rows{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:120px}
.rows li{display:grid;grid-template-columns:34px 1fr auto auto 68px;gap:10px;align-items:center;padding:9px 6px;border-top:1px solid rgba(255,255,255,.06)}
.rows li.empty{display:block;color:var(--muted);padding:22px 6px;text-align:center}
.rows .rk{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.07);font-weight:800;font-size:13px}
.rows .r1 .rk{background:#f5c518;color:#14151a}.rows .r2 .rk{background:#c9ced6;color:#14151a}.rows .r3 .rk{background:#c9834a;color:#14151a}
.rows .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rows .nm em{font-style:normal;font-size:11px;color:var(--accent);margin-left:4px;text-transform:uppercase;letter-spacing:.08em}
.rows .ex{color:var(--muted);font-size:12px;white-space:nowrap}
.rows .tm{font:700 20px "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums}
.rows li.me{background:rgba(245,197,24,.08);border-radius:10px}
.watch{min-height:32px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12.5px;font-weight:700}
.board-you{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);color:#d6dae0;font-size:13.5px}
.board-you input{width:150px;min-height:34px;margin-left:6px;padding:0 10px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:#0d0f12;color:var(--ink);font:inherit}
.board-you .err{color:var(--bad);font-size:12.5px;margin-left:6px}
.link{border:0;background:none;padding:6px 4px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;font-size:13.5px}
.row.small{margin-top:10px;gap:14px;align-items:center}
.copy-link{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:11px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);font-weight:800;font-size:14px}
.copy-link:hover{background:rgba(255,255,255,.14)}.copy-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.copy-link.done{background:#3ddc68;color:#0b2614;border-color:transparent}
.post{margin:12px 0 0;font-size:14px;color:#d6dae0;min-height:20px}.post b{color:var(--accent)}
.mb-head{margin:0}
/* feedback: the line on the result card and the sheet */
.fb-ask{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;padding:8px 12px;border:1px dashed rgba(255,255,255,.22);border-radius:11px;background:none;color:#d6dae0;font-size:13.5px;font-weight:600}
.fb-ask:hover{border-color:rgba(255,255,255,.45)}.fb-ask u{color:var(--accent);text-underline-offset:3px}
.fb-ask svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.fb{position:fixed;inset:0;z-index:36;display:grid;place-items:center;background:rgba(8,9,12,.62)}
.fb-card{width:min(480px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:20px 20px 18px;border-radius:22px;background:rgba(16,18,22,.98);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.fb-card header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fb-card h2{margin:0;font:800 30px/1 "Barlow Condensed",Impact,sans-serif}
.fb-sub{margin:8px 0 0;color:var(--muted);font-size:13.5px}
.fb-picks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.fb-picks button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:600;font-size:13.5px}
.fb-picks button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#14151a}
.fb-card textarea{display:block;width:100%;min-height:84px;margin:12px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#0d0f12;color:var(--ink);font:14px/1.45 Inter,system-ui,sans-serif;resize:none;user-select:text;-webkit-user-select:text}
.fb-card textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.fb-row{display:flex;align-items:center;gap:12px;margin-top:12px}.fb-row .go{margin:0;min-height:46px}
.fb-msg{margin:0;font-size:13.5px;font-weight:600;color:var(--muted)}.fb-msg.ok{color:var(--ok)}.fb-msg.err{color:var(--bad)}
.mini-board{list-style:none;margin:8px auto 0;padding:4px;max-width:320px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:left}
.mini-board li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:5px 8px;border-radius:9px}
.mini-board .rk{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.08);font-weight:800;font-size:12px;color:var(--ink)}
.mini-board .r1 .rk{background:#f5c518;color:#14151a}.mini-board .r2 .rk{background:#c9ced6;color:#14151a}.mini-board .r3 .rk{background:#c9834a;color:#14151a}
.mini-board .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.mini-board .nm em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-left:4px}
.mini-board li>b{font:700 17px "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.mini-board .me{background:rgba(245,197,24,.16);box-shadow:inset 0 0 0 1px rgba(245,197,24,.45)}
.mini-board .gap{display:block;padding:0;text-align:center;line-height:.9;color:var(--muted)}
.post .go{min-height:46px;margin-top:4px;font-size:15px;background:#fff;color:#14151a;box-shadow:none}
.post .go svg{width:18px;height:18px;margin-right:8px}
.post small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.watchbar{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:12;display:flex;gap:10px;align-items:center;padding:6px 6px 6px 14px;border-radius:12px;background:rgba(16,18,22,.9);border:1px solid rgba(245,197,24,.5);font-weight:700;font-size:13.5px;white-space:nowrap}
body.pro-run #camBtn{display:none}
/* Coach Wade */
.wade{position:fixed;left:50%;bottom:108px;transform:translateX(-50%);z-index:15;display:flex;gap:12px;align-items:center;max-width:min(520px,calc(100% - 32px));padding:10px 16px 10px 10px;border-radius:16px;background:rgba(16,18,22,.94);border:1px solid rgba(245,197,24,.45);box-shadow:0 18px 50px -20px rgba(0,0,0,.9)}
.wade.in{animation:wadeIn .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes wadeIn{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
.av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#f5c518,#d98a10);color:#14151a;font:italic 800 24px "Barlow Condensed",Impact,sans-serif}
.wade b{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--accent)}.wade p{margin:2px 0 0;font-weight:600;font-size:14.5px;line-height:1.35}
.wade-q{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px auto 0;max-width:360px;text-align:left}
.wade-q p{margin:0;font-size:14px;color:#e6e8ec}.wade-q p b{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.wade-q .av{width:34px;height:34px;font-size:20px}
/* crash replay */
.crashfx{position:fixed;inset:0;z-index:28;display:grid;place-items:end center;padding-bottom:12vh;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(120,0,0,.45) 100%);cursor:pointer;animation:flash .5s ease-out}
@keyframes flash{from{background-color:rgba(255,60,40,.35)}to{background-color:rgba(0,0,0,0)}}
.crashfx div{text-align:center}.crashfx .tag{color:#fff;opacity:.8}
.crashfx h2{margin:0;font:italic 800 clamp(48px,9vw,96px)/.9 "Barlow Condensed",Impact,sans-serif;color:#fff;text-transform:uppercase;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.crashfx span{display:block;margin-top:10px;color:rgba(255,255,255,.7);font-size:13px}


/* result */
.result{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(8,9,12,.55);backdrop-filter:blur(3px)}
.result .card{max-height:calc(100% - 24px);overflow:auto;width:min(440px,calc(100% - 32px));padding:26px 26px 22px;border-radius:22px;background:rgba(16,18,22,.94);border:1px solid var(--line);text-align:center;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.time:empty{display:none}
.result h2{margin:0;font:italic 800 46px/1 "Barlow Condensed",Impact,sans-serif;color:var(--bad);text-transform:uppercase}
.result.won h2{color:var(--ok)}
.result .tag{color:var(--muted)}
.time{margin:10px 0 0;font:800 64px/1 "Barlow Condensed",Impact,sans-serif;font-variant-numeric:tabular-nums}
.break{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;color:var(--muted);font-size:13.5px}.break b{color:var(--ink)}
.break.fit{margin-top:4px;font-size:12.5px}
.pb{margin:10px 0 0;color:var(--accent);font-weight:600;font-size:14px}
.row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.row .go{margin-top:0}
.ghost{min-height:52px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:700}
.toast{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:40;padding:10px 16px;border-radius:12px;background:rgba(16,18,22,.92);border:1px solid var(--line);font-weight:700;font-size:14px}

@media (pointer:coarse){
  .menu{background:linear-gradient(180deg,rgba(8,9,12,.55) 0%,rgba(8,9,12,.92) 38%)}
  .menu-in{padding:22px 18px 40px;margin-top:28vh}
  .menu h1{font-size:72px}
  .rows li{grid-template-columns:30px 1fr auto 62px;gap:8px}.rows .ex{display:none}
  .result .card{padding:22px 16px 18px}.result .row .go,.result .row .ghost{min-height:48px;padding:0 14px}
  .watchbar{top:108px}
}

/* ---------------------------------------------------------------- the HUD: glass panels over the yard */
/* see-through, no backdrop blur: a blur over the moving 3D view costs a third of the frame rate on a laptop GPU */
.glass{background:rgba(13,15,19,.6);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 24px -12px rgba(0,0,0,.6)}
.guide{position:fixed;inset:0;width:100vw;height:100vh;z-index:5;pointer-events:none}
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud>*,.hud-top>*{pointer-events:auto}
.hud kbd{display:inline-grid;place-items:center;min-width:18px;height:17px;padding:0 4px;border-radius:5px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);font:700 9.5px/1 Inter,sans-serif;letter-spacing:0;color:#fff;text-shadow:none;vertical-align:middle}
.hb{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.hb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hud-top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.clock{min-width:200px;padding:5px 22px 7px;border-radius:14px;text-align:center}
.clock>span{display:block;font:800 40px/1.02 "Barlow Condensed",Impact,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock em{display:block;font-style:normal;font-weight:800;font-size:12px;color:var(--bad)}
.clock em:empty{display:none}
.hud-stats{display:flex;justify-content:center;align-items:center;white-space:nowrap;font-weight:700;font-size:12px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.hud-stats>*+*::before{content:"·";margin:0 6px;opacity:.55}
.hud-stats .gear{font:800 15px/1 "Barlow Condensed",sans-serif;color:var(--accent)}
.hud-stats .gap.hot{color:#fff;background:var(--bad);padding:1px 6px;border-radius:6px;margin-left:6px}.hud-stats .gap.hot::before{display:none}
.hud-tools{position:absolute;top:16px;right:72px;display:flex;gap:8px}
.chip{min-height:40px;padding:0 14px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:var(--panel);font-weight:700;font-size:13px}
.chip.goal{background:#3ddc68;color:#0b2614;border-color:transparent;font-weight:800}
.chip.goal kbd{background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.2);color:#0b2614;margin-left:4px}
body.out .chip.goal{background:var(--ink);color:#14151a}
.chip.snd{display:grid;place-items:center;width:40px;padding:0}.chip.snd svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chip.snd[aria-pressed="false"]{color:var(--muted)}.chip.snd[aria-pressed="false"] .w{display:none}
/* the coach's whistle: off by default; on, it goes green */
.chip.coach-btn{display:grid;place-items:center;width:40px;padding:0}.chip.coach-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.chip.coach-btn[aria-pressed="true"]{background:#3ddc68;color:#0b2614;border-color:transparent}
body.pro-run #coachBtn{display:none}
.hud-left{position:absolute;left:16px;top:76px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.guide-key{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:10px;font-weight:700;font-size:12px}
.guide-key s{display:block;width:26px;border-top:3px dashed #ffd84a}.guide-key.fwd s{border-top-color:#7fd8ff}
.hud-course{display:none;max-width:300px;padding:8px 12px;border-radius:12px}
body.top-view .hud-course{display:block}
.hud-course b{display:block;font-size:13px}.hud-course span{display:block;font-size:12px;color:rgba(255,255,255,.72)}
.hud-hint{position:absolute;left:50%;top:96px;transform:translateX(-50%);margin:0;padding:7px 12px;border-radius:10px;background:rgba(245,197,24,.95);color:#14151a;font-weight:800;font-size:13px;white-space:nowrap}
.coach-tip{position:absolute;left:50%;top:96px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;margin:0;padding:5px 14px 5px 5px;border-radius:12px;background:rgba(245,197,24,.96);color:#14151a;font-weight:800;font-size:14px;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
.coach-tip .av{width:28px;height:28px;font-size:17px;border-radius:8px;background:#14151a;color:#f5c518}
.coach-tip.ok{background:rgba(61,220,104,.96);color:#0b2614}.coach-tip.ok .av{color:#3ddc68}
.coach-tip.plan{background:rgba(16,18,22,.9);color:#fff;border:1px solid rgba(255,255,255,.2)}
.coach-tip.bad{background:#ff5a4f;color:#fff}.coach-tip.bad .av{color:#ff5a4f}
.hud .coach-tip kbd{background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.2);color:inherit}
.wheel .ghost{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.wheel .ghost::before{content:"";position:absolute;left:50%;top:1px;width:12px;height:22px;margin-left:-6px;border-radius:4px;background:#3ddc68;box-shadow:0 0 0 2px rgba(11,38,20,.85),0 0 12px rgba(61,220,104,.9)}
.practice-tag{display:none;position:absolute;left:50%;top:134px;transform:translateX(-50%);padding:5px 10px;border-radius:8px;background:rgba(255,90,79,.92);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.1em}
body.pro-run .practice-tag{display:block}
body.pro-run #camBtn{display:none}
.mirror-tags{position:absolute;left:0;right:0;top:74px;display:flex;justify-content:space-between;padding:0 24px;pointer-events:none;font-size:10.5px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.6)}
body.top-view .mirror-tags,body.out .mirror-tags{display:none}
.fold{position:absolute;left:50%;top:140px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;background:rgba(245,197,24,.95);color:#14151a;font-weight:800;font-size:14px;white-space:nowrap;animation:foldPulse .7s ease-in-out infinite alternate}
.fold i{font-style:normal;font-size:18px}.hud .fold kbd{background:rgba(0,0,0,.15);border-color:rgba(0,0,0,.2);color:#14151a}
.fold.bad{background:#ff5a4f;color:#fff}.hud .fold.bad kbd{color:#fff}
@keyframes foldPulse{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.05)}}
.look{display:none}
/* the wheel, bottom left; it turns as the cab's wheel does */
.wheel{position:absolute;left:24px;bottom:30px;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;touch-action:none;cursor:grab}
.wheel i{display:block;width:128px;height:128px}
.wheel svg{display:block;width:100%;height:100%;overflow:visible}
.wheel .rim{fill:none;stroke:#474d57;stroke-width:13}.wheel .rim-hi{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2}
.wheel .spoke{fill:none;stroke:#3b4049;stroke-width:11;stroke-linecap:round}
.wheel .hub{fill:#2a2e35;stroke:rgba(255,255,255,.3);stroke-width:2}.wheel .mark{fill:var(--accent)}
.wheel-txt{position:absolute;left:50%;bottom:-21px;transform:translateX(-50%);font:800 11.5px Inter,sans-serif;color:rgba(255,255,255,.75);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.wheel-txt.off{color:#ffd84a}
.wheel .wk{position:absolute;top:50%;left:-9px;transform:translateY(-50%)}.wheel .wk.r{left:auto;right:-9px}
/* the yellow and red knobs, next to the wheel */
.knobs{position:absolute;left:190px;bottom:24px;display:flex;gap:4px;padding:6px 6px 5px;border-radius:14px}
.knob{display:grid;justify-items:center;gap:2px;min-width:62px;padding:3px 6px;border:0;border-radius:10px;background:transparent;font-weight:800;font-size:10px;letter-spacing:.06em;line-height:1.1}
.knob:hover{background:rgba(255,255,255,.06)}
.knob i{width:28px;height:28px;transition:transform .15s,opacity .15s}
.knob.park i{background:#f5c518;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.knob.trailer i{background:#e53b2f;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.knob[aria-pressed="true"] i{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(255,200,40,.6))}
.knob[aria-pressed="false"] i{transform:scale(.82);opacity:.5}
.knob small{font-size:9.5px;font-weight:700;letter-spacing:0;color:rgba(255,255,255,.6)}
.knob[aria-pressed="true"] small{color:var(--accent)}
.knob kbd{margin-top:2px}
/* the gear selector and the pedals, bottom right */
.gears{position:absolute;right:196px;bottom:30px;display:grid;gap:4px;justify-items:center;padding:5px;border-radius:13px}
.gears button{width:42px;height:34px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.62);font:800 19px "Barlow Condensed",sans-serif}
.gears button:hover{background:rgba(255,255,255,.07)}
.gears button[aria-pressed="true"]{background:var(--ink);color:#14151a}
.gears button[data-gear="R"][aria-pressed="true"]{background:#ff5a4f;color:#fff}
.pedals{position:absolute;right:24px;bottom:24px;display:flex;gap:12px;align-items:flex-end}
.pedal{display:grid;justify-items:center;gap:6px;padding:0;border:0;background:none;touch-action:none}
.pedal svg{display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .08s}
.pedal.brake svg{width:84px;height:100px}.pedal.gas svg{width:60px;height:132px}
.pedal .pad{fill:#22262c;stroke-width:2.5}.pedal.brake .pad{stroke:#ff5a4f}.pedal.gas .pad{stroke:#3ddc68}
.pedal .ribs rect{fill:rgba(255,255,255,.16)}
.pedal.on svg{transform:translateY(4px) scale(.96)}.pedal.brake.on .pad{fill:#4a2422}.pedal.gas.on .pad{fill:#1f4a2c}
.pedal span{font-size:11px;font-weight:800;letter-spacing:.08em;text-shadow:0 1px 3px rgba(0,0,0,.85)}
body.out .knobs,body.out .gears{opacity:.45;pointer-events:none}
body.watching .knobs,body.watching .gears,body.watching .wheel{pointer-events:none}
body.watching .pedals,body.watching .look{display:none}
.wade{bottom:36px}

@media (pointer:coarse){
  .hud kbd{display:none!important}
  .hud-top{top:12px;left:12px;right:12px}
  .hb{width:42px;height:42px}
  .clock{min-width:0;padding:3px 14px 5px}.clock>span{font-size:30px}
  .hud-stats{font-size:11px}.hud-stats .gear{font-size:13.5px}.hud-stats>*+*::before{margin:0 4px}
  .hud-tools{top:78px;right:12px;gap:6px}
  .chip{min-height:34px;padding:0 11px;font-size:12px}.chip.snd,.chip.coach-btn{width:34px}
  .hud-left{left:12px;top:78px}
  .guide-key{padding:6px 10px;font-size:11.5px}
  body.top-view .hud-course{display:none}
  .hud-hint{display:none!important}
  .coach-tip{top:124px;max-width:calc(100% - 24px);white-space:normal;font-size:12.5px;line-height:1.25;padding:4px 10px 4px 4px;gap:7px}.coach-tip .av{width:24px;height:24px;font-size:14px}
  .practice-tag{top:120px;font-size:9.5px;padding:4px 8px;white-space:nowrap}
  .mirror-tags{display:none}
  .fold{top:124px;padding:6px 12px;gap:7px;font-size:12.5px}.fold i{font-size:14px}
  body.folding .guide-key{visibility:hidden}
  .look{display:block;position:absolute;top:calc(var(--mirror-bottom,420px) + 6px);min-height:30px;padding:0 9px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(14,16,20,.72);font-weight:800;font-size:10.5px;letter-spacing:.06em;touch-action:none;color:var(--muted)}
  .look.l{left:8px}.look.r{right:8px}.look.on{background:var(--accent);color:#14151a}
  body.top-view .look,body.out .look{display:none}
  .wheel{left:12px;bottom:28px;width:136px;height:136px}.wheel i{width:116px;height:116px}
  .knobs{left:12px;bottom:190px}
  .knob{min-width:58px}
  .gears{right:168px;bottom:30px}.gears button{width:40px;height:34px}
  .pedals{right:12px;bottom:26px;gap:10px}
  .pedal.brake svg{width:78px;height:96px}.pedal.gas svg{width:56px;height:126px}
  .wade{bottom:258px;padding:6px 10px 6px 6px;gap:8px;max-width:calc(100% - 24px);border-radius:12px}.wade p{font-size:12px;line-height:1.3}.wade b{font-size:9px}.av{width:26px;height:26px;font-size:15px;border-radius:8px}
}
@media (pointer:coarse) and (max-width:370px){
  .wheel{width:124px;height:124px}.wheel i{width:106px;height:106px}
  .gears{right:150px}.gears button{width:36px}
  .pedals{gap:8px}.pedal.brake svg{width:68px;height:86px}.pedal.gas svg{width:50px;height:116px}
}