/* A racing-game dashboard, in both colour themes. */
:root{
  --ui-panel:#fff;--ui-panel-deep:#f0f0ef;--ui-detail:#ddd9d8;--ui-glow:#efd9dc;
  --ui-dial:#f8f7f7;--ui-tick:#928d8e;--ui-dial-line:#d9d3d4;--ui-tile:#f8f8f7;
}
:root[data-theme=dark]{
  --ui-panel:#202020;--ui-panel-deep:#181818;--ui-detail:#393536;--ui-glow:#412025;
  --ui-dial:#1b1b1b;--ui-tick:#918b8d;--ui-dial-line:#4b4143;--ui-tile:#252525;
}
.shell{background:var(--bg)}
.sidebar{background:var(--ui-panel-deep);border-right:1px solid var(--line)}
.brand{font-style:italic;letter-spacing:-.04em}
.brand-icon{box-shadow:5px 5px 0 var(--ui-glow)}
.sidebar .navitem{border-radius:2px}
.sidebar .navitem.active{background:linear-gradient(90deg,var(--ui-glow),var(--soft));color:var(--text)}
main>header{border-bottom:0;margin-bottom:20px;padding-bottom:0}
main>header::after{display:none}
main>header h1{font-size:27px;letter-spacing:-.02em}
.theme{background:var(--ui-panel-deep)}
.avatar{box-shadow:4px 4px 0 var(--ui-glow)}
.section-head h2::before{width:5px;height:20px}

/* The speed dial is decorative; the number is the vehicle's actual race speed. */
.game-dashboard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,38%);min-height:310px;overflow:hidden;background:var(--ui-panel);isolation:isolate}
.game-dashboard::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--accent) 0 31%,transparent 31% 32%,var(--accent) 32% 37%,transparent 37%)}
.game-dashboard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,var(--accent) 0 28px,transparent 28px 34px);opacity:.8}
.dashboard-copy{position:relative;z-index:1;min-width:0;padding:30px 34px 34px}
.dashboard-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--accent-text);font-size:13px}
.dashboard-indicator{width:8px;height:8px;background:#d83a4d;box-shadow:0 0 0 4px var(--ui-glow);transform:rotate(45deg)}
.dashboard-indicator.is-off{background:var(--muted);box-shadow:0 0 0 4px var(--soft)}
.dashboard-label{margin-top:23px;color:var(--muted);font-size:13px}
.game-dashboard h2{margin:4px 0 20px;font-size:clamp(27px,3.5vw,40px);line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere}
.dashboard-condition{max-width:310px;margin-bottom:23px}
.dashboard-condition>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px}
.dashboard-condition>div:first-child span{color:var(--muted)}
.dashboard-health{height:7px;background:var(--ui-detail);overflow:hidden;transform:skewX(-18deg)}
.dashboard-health span{display:block;height:100%;background:var(--accent)}
.dashboard-start{display:flex;justify-content:space-between;align-items:center;gap:28px;width:min(100%,275px);padding:14px 17px;background:linear-gradient(110deg,#a3182b,#d12b40);box-shadow:5px 5px 0 var(--ui-glow);font-size:16px;text-align:left}
.dashboard-start>span:last-child{font-size:24px;line-height:1}
.dashboard-instrument{position:relative;display:grid;place-items:center;min-width:0;overflow:hidden;background:linear-gradient(135deg,var(--ui-panel-deep),var(--ui-panel))}
.dashboard-instrument::before{content:'';position:absolute;inset:-80px -35%;background:repeating-linear-gradient(125deg,transparent 0 26px,var(--race-lines) 27px 28px,transparent 29px 55px);transform:translateX(10%)}
.dashboard-flag{position:absolute;top:20px;right:22px;width:70px;height:16px;background:repeating-conic-gradient(var(--race-check) 0 25%,transparent 0 50%) 0 0/16px 16px;transform:skewX(-15deg)}
.speed-caption{position:absolute;top:26px;left:0;right:0;text-align:center;color:var(--muted);font-size:13px}
.speed-dial{position:relative;width:min(210px,72%);aspect-ratio:1;border:1px solid var(--ui-dial-line);border-radius:50%;background:var(--ui-dial);box-shadow:0 0 0 10px var(--ui-panel-deep),0 0 0 11px var(--ui-dial-line),0 12px 30px #0002}
.speed-dial::before{content:'';position:absolute;inset:8%;border:2px solid var(--ui-dial-line);border-top-color:var(--accent);border-right-color:var(--accent);border-radius:50%;transform:rotate(-35deg)}
.speed-dial-ticks{position:absolute;inset:14%;border-radius:50%;background:repeating-conic-gradient(var(--ui-tick) 0deg 1.4deg,transparent 1.4deg 12deg);-webkit-mask:radial-gradient(transparent 0 79%,#000 80%);mask:radial-gradient(transparent 0 79%,#000 80%)}
.speed-dial-inner{position:absolute;inset:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.speed-dial-inner span,.dashboard-power span{color:var(--muted);font-size:13px}
.speed-dial-inner strong{font-size:clamp(38px,5vw,60px);line-height:1.05;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.dashboard-power{position:absolute;right:20px;bottom:16px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.dashboard-power strong{font-size:17px;font-variant-numeric:tabular-nums}
.dashboard-power small{font-size:12px;color:var(--muted)}

.dashboard-stats{gap:8px;margin-top:9px}
.dashboard-stats .stat{position:relative;overflow:hidden;background:var(--ui-tile);box-shadow:none!important;padding-top:18px}
.dashboard-stats .stat::before{content:'';position:absolute;top:0;left:0;width:42px;height:3px;background:var(--accent);transform:skewX(-25deg);transform-origin:left}
.dashboard-stats .stat strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.level-card-compact{background:var(--ui-panel-deep);border-left:4px solid var(--accent)}
.feature-goal{background:linear-gradient(110deg,var(--ui-panel),var(--ui-panel-deep))}
.feature-bar,.progress-track{height:7px;transform:skewX(-12deg)}
.vehicle-card,#content[data-screen=garage] .grid>.card,.stars-card{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--ui-panel),var(--ui-tile))}
.vehicle-card::before,#content[data-screen=garage] .grid>.card::before{content:'';position:absolute;top:0;right:0;width:82px;height:4px;background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 16px);transform:skewX(-25deg)}
.vehicle-card .car-icon,#content[data-screen=garage] .car-icon{width:100%;height:72px;justify-content:start;padding:0 15px;background:linear-gradient(110deg,var(--ui-glow),var(--ui-panel-deep));font-size:36px}
.vehicle-card h3,#content[data-screen=garage] .grid>.card h3{font-size:17px}
.vehicle-card .details,#content[data-screen=garage] .details{padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.carpass-reward{background:linear-gradient(145deg,var(--ui-panel),var(--ui-tile))}
.carpass-step.is-car .carpass-reward{box-shadow:inset 0 4px var(--accent)}
.race-panel{box-shadow:0 20px 70px #0009}

@media(max-width:650px){
 main>header{margin-bottom:17px}
 main>header h1{font-size:24px}
 .game-dashboard{grid-template-columns:minmax(0,1fr) minmax(110px,35%);min-height:254px}
 .dashboard-copy{padding:23px 0 26px 19px}
 .dashboard-label{margin-top:16px}
 .game-dashboard h2{font-size:clamp(23px,6vw,32px);margin:4px 0 17px}
 .dashboard-condition{margin-right:12px;margin-bottom:18px}
 .dashboard-start{width:calc(100% - 10px);gap:8px;padding:12px;font-size:14px}
 .dashboard-start>span:last-child{font-size:20px}
 .dashboard-flag{top:15px;right:11px;width:48px;height:12px;background-size:12px 12px}
 .speed-caption{top:48px;font-size:12px}
 .speed-dial{width:min(150px,80%);box-shadow:0 0 0 6px var(--ui-panel-deep),0 0 0 7px var(--ui-dial-line)}
 .speed-dial-inner strong{font-size:clamp(30px,9vw,44px)}
 .speed-dial-inner span,.dashboard-power span{font-size:12px}
 .dashboard-power{right:10px;bottom:15px}
 .dashboard-power strong{font-size:15px}
 .dashboard-stats .stat{padding:14px 12px}
 .dashboard-stats .stat strong{font-size:17px}
 .vehicle-card .car-icon,#content[data-screen=garage] .car-icon{height:62px}
}
@media(max-width:360px){.game-dashboard{grid-template-columns:minmax(0,1fr) 105px}.dashboard-copy{padding-left:14px}.game-dashboard h2{font-size:23px}.dashboard-kicker,.dashboard-label{font-size:12px}.dashboard-start{font-size:13px}.speed-dial{width:90px}.speed-dial-inner strong{font-size:28px}}