* { box-sizing: border-box; }
body { margin: 0; background: #10171b; color: #edf3f5; font: 15px system-ui, sans-serif; }
main { max-width: 1600px; margin: auto; padding: 20px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { margin: 0; font-size: 24px; letter-spacing: .04em; }
header p { margin: 4px 0 16px; color: #a9b9c2; }
#game { position: relative; background: #000; aspect-ratio: 16 / 9; }
canvas { display: block; width: 100%; height: 100%; outline: none; }
[hidden] { display: none !important; }
.overlay { position: absolute; inset: 0; background: #10171be8; z-index: 5; }
#cover { display: grid; place-content: center; text-align: center; padding: 24px; }
#cover h2 { margin: 0 0 8px; }
#status { max-width: 650px; line-height: 1.6; overflow-wrap: anywhere; }
progress { width: min(360px, 65vw); margin: 16px auto; accent-color: #ee5a42; }
button, select { border: 0; border-radius: 10px; color: #fff; font: inherit; }
button { background: #ee5a42; padding: 12px 20px; min-height: 46px; font-weight: 650; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, .spring-slider:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #74daff; outline-offset: 3px; }
footer { margin-top: 16px; align-items: start; }
footer p { margin: 0 0 10px; line-height: 1.7; color: #b7c4cb; }
a { color: #b7dced; }
kbd { color: white; font: inherit; font-weight: 650; }
.notices { font-size: 12px; line-height: 1.8; color: #b7c4cb; }
.touch { overflow: hidden; overscroll-behavior: none; }
.touch main { width: 100%; max-width: none; padding: 0; }
.touch header, .touch footer { display: none; }
.touch #game { width: 100%; height: 100dvh; aspect-ratio: auto; }
.touch canvas { touch-action: none; }
.touch #cover { padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
#touch-ui { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#instruments { position: absolute; top: max(4px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: auto auto auto auto; align-items: baseline; gap: 6px; padding: 8px 10px; background: #10171bcc; border: 1px solid #ffffff20; border-radius: 12px; font-variant-numeric: tabular-nums; }
#speed { font-size: 32px; line-height: 1; min-width: 2ch; text-align: right; }
#instruments span { font-size: 11px; color: #c6d0d5; }
#gear-column { display: grid; justify-items: center; align-self: center; padding-left: 13px; margin-left: 7px; border-left: 1px solid #ffffff40; min-width: 6ch; }
#gear { font-size: 25px; line-height: 1; color: #a3e9ff; }
#gear-column span { white-space: nowrap; }
#lap-clock { display: grid; justify-items: center; align-self: center; gap: 2px; border-left: 1px solid #ffffff40; padding-left: 10px; margin-left: 4px; }
#lap-time { font-size: 17px; line-height: 1; }
#menu-button { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); background: #10171bd9; border: 1px solid #ffffff40; pointer-events: auto; padding: 10px 14px; }
.spring-slider { --value: 0; position: absolute; touch-action: none; pointer-events: auto; border: 1px solid #ffffff65; background: #10171ba8; border-radius: 28px; color: #edf3f5; box-shadow: 0 2px 16px #0004; }
.spring-slider .positive, .spring-slider .negative { position: absolute; font-size: 11px; font-weight: 750; letter-spacing: .07em; }
.spring-slider .rail { position: absolute; border-radius: 4px; background: #ffffff45; }
.spring-slider .centre { position: absolute; background: #ffffffaa; }
.spring-slider .thumb { position: absolute; width: 46px; height: 46px; border: 2px solid #fff; border-radius: 50%; background: #ee5a42e8; box-shadow: 0 2px 8px #0006; }
.vertical { width: 84px; height: clamp(164px, 49dvh, 260px); left: max(8px, calc(env(safe-area-inset-left) - 18px)); top: 50%; transform: translateY(-50%); }
.vertical .positive { top: 11px; left: 0; width: 100%; text-align: center; }
.vertical .negative { bottom: 11px; left: 0; width: 100%; text-align: center; }
.vertical .rail { top: 28px; bottom: 28px; width: 4px; left: calc(50% - 2px); }
.vertical .centre { width: 22px; height: 2px; left: calc(50% - 11px); top: calc(50% - 1px); }
.vertical .thumb { left: calc(50% - 23px); top: calc(50% - 23px - var(--value) * (50% - 28px)); }
.horizontal { height: 84px; width: clamp(160px, 32vw, 280px); right: max(8px, calc(env(safe-area-inset-right) - 18px)); bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); }
.horizontal .negative { left: 12px; top: calc(50% - 8px); }
.horizontal .positive { right: 12px; top: calc(50% - 8px); }
.horizontal .rail { left: 28px; right: 28px; height: 4px; top: calc(50% - 2px); }
.horizontal .centre { width: 2px; height: 22px; top: calc(50% - 11px); left: calc(50% - 1px); }
.horizontal .thumb { top: calc(50% - 23px); left: calc(50% - 23px + var(--value) * (50% - 28px)); }
#mobile-menu { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.menu-panel { max-width: 620px; margin: 0 auto; }
.menu-heading { position: sticky; top: -1px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #10171b; padding: 8px 0 12px; z-index: 1; }
.menu-heading h2 { margin: 0; font-size: 22px; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.menu-actions button { background: #26343d; font-size: 14px; padding: 12px; }
details { margin-top: 16px; padding: 0 14px 14px; background: #1c292f; border-radius: 12px; }
summary { padding: 16px 0; font-weight: 700; cursor: pointer; }
.handling-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
select { padding: 10px; background: #354650; }
#setting-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
#setting-sliders label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; font-size: 13px; }
input[type=range] { grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; accent-color: #ee5a42; touch-action: pan-y; }
output { font-variant-numeric: tabular-nums; color: #a3e9ff; }
#traction-label { display: block; margin: 16px 0; }
#traction { width: 22px; height: 22px; vertical-align: middle; accent-color: #ee5a42; }
.hint { line-height: 1.6; color: #b7c4cb; font-size: 13px; }
@media (max-width: 520px) {
  #instruments { left: 8px; transform: none; gap: 4px; padding: 8px; }
  #speed { font-size: 28px; }
  #gear-column { padding-left: 8px; margin-left: 2px; min-width: 5ch; }
  #lap-clock { padding-left: 8px; margin-left: 2px; }
  #lap-time { font-size: 15px; }
  #setting-sliders { grid-template-columns: 1fr; }
}