@font-face { font-family: Ridge; src: url('ui-redesign/fonts/kenney-future.ttf'); font-display: swap; }
:root { --ink: #10191b; --panel: #182628; --cream: #f8f2df; --gold: #f4c460; --line: #426366; --muted: #b1c7c4; --mint: #68dfbd; --coral: #fa967b; --blue: #8ac9ef; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; color: var(--cream); font-family: Georgia, serif; overscroll-behavior: none; }
html, body { width: 100%; height: 100%; overflow: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: 13px Ridge, sans-serif; cursor: pointer; border: 1px solid #688e98; border-radius: 13px; background: linear-gradient(135deg, #315766, #203b48); padding: 17px 18px; min-height: 58px; box-shadow: 0 4px 0 #08171c, inset 0 1px 0 #ffffff12; transition: filter 120ms, transform 120ms; }
button:not(:disabled):hover { filter: brightness(1.12); }
button:not(:disabled):active { transform: translateY(2px); }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
#ridge-app { position: relative; width: min(100%, 520px); height: 100%; height: 100dvh; margin: auto; overflow: hidden; isolation: isolate; background: var(--ink); }
#ridge-app.driving { width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
#road-view { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.topbar { position: absolute; z-index: 4; left: 12px; right: 12px; top: max(8px, env(safe-area-inset-top)); height: 44px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.topbar .icon { pointer-events: auto; }
.topbar h1 { flex: 1; text-align: center; font: 18px Ridge, sans-serif; letter-spacing: 1px; margin: 0; text-shadow: 0 2px 3px var(--ink); }
.icon { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex-shrink: 0; text-decoration: none; color: var(--cream); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; font: bold 22px Georgia, serif; }
.icon img { width: 23px; height: 23px; filter: brightness(0) invert(1); object-fit: contain; }
#hud { position: absolute; z-index: 1; top: calc(max(8px, env(safe-area-inset-top)) + 54px); left: 12px; right: 12px; padding: 10px 12px; background: #10191bdc; border: 1px solid #4b605f80; border-radius: 9px; font-family: Ridge, sans-serif; pointer-events: none; }
.readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.readings b { font-size: 24px; display: block; font-weight: normal; font-variant-numeric: tabular-nums; }
.readings small { display: block; font-size: 9px; margin-top: 2px; color: var(--muted); }
.gauges { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.race-mode .gauges { grid-template-columns: 1fr; }
.gauges label { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; font: 10px Georgia, serif; }
meter { width: 100%; height: 10px; accent-color: var(--gold); }
meter::-webkit-meter-bar { background: #3e4c49; border: 0; }
meter::-webkit-meter-optimum-value { background: var(--gold); }
#pedals { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
#pedals button { position: relative; padding: 0; min-width: 0; user-select: none; -webkit-user-select: none; touch-action: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; filter: none; }
#pedals b, #pedals small { position: absolute; left: 0; right: 0; pointer-events: none; text-shadow: 0 2px 5px #000; opacity: 0.65; }
#pedals b { top: 76%; font: 18px Ridge, sans-serif; color: var(--coral); }
#pedals small { top: calc(76% + 26px); color: var(--cream); font: 9px Ridge, sans-serif; }
#pedals #gas b { color: var(--mint); }
#pedals [aria-pressed="true"] b { opacity: 1; text-shadow: 0 0 7px currentColor, 0 0 18px currentColor, 0 2px 5px #000; }
#pedals button:focus-visible { outline-offset: -4px; }
#damage-flash { position: absolute; inset: 0; background: #ff2020; opacity: 0; pointer-events: none; z-index: 20; }
#race-countdown { position: absolute; z-index: 3; top: 43%; width: 100%; text-align: center; font: 72px Ridge, sans-serif; color: var(--gold); text-shadow: 0 4px 18px #000; pointer-events: none; }
.menu { position: absolute; z-index: 3; inset: 0; padding: calc(68px + env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; justify-content: safe center; gap: 14px; background: radial-gradient(ellipse at 100% 0, #28564f99, transparent 65%), repeating-linear-gradient(135deg, #ffffff03 0 1px, transparent 1px 28px), linear-gradient(180deg, #102527ed, #101b24fc); overflow-y: auto; }
.menu[data-screen="home"] { justify-content: flex-end; background: transparent; }
.eyebrow { margin: 0; font: 10px Ridge, sans-serif; color: var(--gold); letter-spacing: 2px; }
.menu h2 { margin: 0; font: 32px Ridge, sans-serif; line-height: 1.25; }
.menu p { line-height: 1.5; margin: 0; color: #c6d0c7; }
.menu .primary { background: linear-gradient(135deg, #9af3cc, #48c3ae); color: #0d2925; border-color: #a8f9da; }.menu .race-button { background: linear-gradient(135deg, #82bee2, #416eac); border-color: #a9daf5; }
.menu [data-action="cars"] { background: linear-gradient(135deg, #b85542, #743d3a); border-color: var(--coral); }
.menu [data-action="upgrades"], .upgrade button { background: linear-gradient(135deg, #f4cb76, #d89c3d); border-color: #ffe0a0; color: #302111; }
.menu [data-action="home"], .menu [data-action="finish"] { background: #1b303b; border-color: #476271; color: #c2d7db; }
.car-card [aria-pressed="true"] { background: #68dfbd; border-color: #abf5da; color: #0d2925; }
.menu button strong { display: block; font: 17px Ridge, sans-serif; margin-bottom: 5px; }
.menu button span { font-size: 14px; }
.menu .wallet { color: var(--gold); font-size: 18px; }
.home-actions { display: grid; gap: 12px; }.menu[data-screen="home"] .home-actions { margin-top: auto; margin-bottom: 24px; }.menu[data-screen="home"] .home-actions button { min-height: 52px; padding: 14px 18px; }.track { text-align: left; padding: 20px; border-left-width: 5px; }
.track[data-track="1"] { background: linear-gradient(115deg, #256253, #1b3935); border-color: var(--mint); }
.track[data-track="2"] { background: linear-gradient(115deg, #935537, #4c352c); border-color: #f4bb72; }
.track[data-track="3"] { background: linear-gradient(115deg, #386687, #213a54); border-color: var(--blue); }
.track[data-track="4"] { background: linear-gradient(115deg, #273139, #0b1016); border-color: #aebec5; }
.track small { display: block; color: #e2ecdd; margin-top: 8px; }
.race-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.race-list .track { min-width: 0; padding: 11px; }
.race-list .track strong { font-size: 13px; margin: 0; }
.race-list .track small { margin-top: 5px; }
.race-list .track:disabled { opacity: 0.5; }
.menu[data-screen="races"] { justify-content: flex-start; }
.race-list [data-track="1"] { background: linear-gradient(115deg, #256253, #1b3935); border-color: var(--mint); }
.race-list [data-track="2"] { background: linear-gradient(115deg, #935537, #4c352c); border-color: #f4bb72; }
.race-list [data-track="3"] { background: linear-gradient(115deg, #386687, #213a54); border-color: var(--blue); }
.race-list [data-track="4"] { background: linear-gradient(115deg, #273139, #0b1016); border-color: #aebec5; }
.car-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 9px; align-items: center; border: 1px solid var(--line); background: #223334; padding: 10px; border-radius: 9px; }
.car-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.car-tabs button { min-width: 0; padding: 10px 4px; font-size: 13px; }
.car-tabs [aria-pressed="true"] { background: #68dfbd; border-color: #abf5da; color: #0d2925; }
.menu[data-screen="cars"] { justify-content: flex-start; }
.car-card h3 { margin: 0 0 4px; font-size: 18px; }
.car-card p { font-size: 12px; }
.car-card button { padding: 10px; }
.car-preview { width: var(--car-width); height: var(--car-length); background: var(--paint); border: 2px solid #111; justify-self: center; position: relative; }
.car-preview::after { content: ''; position: absolute; top: 25%; left: 15%; width: 70%; height: 20%; background: #b7d4d0; }
.car-preview--coupe { border-radius: 5px 5px 1px 1px; }
.car-preview--gt { clip-path: polygon(18% 0, 82% 0, 100% 60%, 94% 100%, 6% 100%, 0 60%); }
.paint { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.paint input { width: 52px; height: 32px; padding: 2px; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; }
.upgrade { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px; background: #223334; border: 1px solid var(--line); border-radius: 9px; gap: 10px; }
.upgrade h3 { margin: 0 0 4px; font-size: 18px; }
.upgrade p { font-size: 12px; }
.upgrade button { padding: 10px; min-width: 90px; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.results div { padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.results b { font: 24px Ridge, sans-serif; display: block; margin-bottom: 5px; }
.results span { font-size: 13px; color: var(--muted); }
.race-standings { margin: 0; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 10px; background: #101b21; }
.race-standings li { padding: 5px 0; font-size: 14px; }
.race-standings li::marker { color: var(--gold); }
.race-standings li span:last-child { float: right; color: var(--muted); }
.menu[data-screen="race-results"] { justify-content: flex-start; }
dialog { width: min(92%, 470px); max-height: 82dvh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--cream); padding: 20px; }
dialog::backdrop { background: #000b; }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
dialog h2 { font: 22px Ridge, sans-serif; }
dialog p { font-size: 16px; line-height: 1.5; }
.reset-progress { display: grid; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.reset-progress p { margin: 0; font-size: 14px; }
.reset-progress [role="alert"] { color: #ffc2ae; font-weight: bold; }
.reset-progress button { background: #853c3d; border-color: #e7897f; }
#debug { position: absolute; z-index: 2; top: calc(166px + env(safe-area-inset-top)); left: 8px; margin: 0; padding: 8px; background: #000b; color: #9eedee; font: 11px/1.5 monospace; pointer-events: none; }
#save-warning { position: absolute; z-index: 5; bottom: 2px; left: 10px; right: 10px; font-size: 10px; text-align: center; color: var(--gold); pointer-events: none; }
@media (max-height: 660px) { .menu { gap: 10px; padding-left: 18px; padding-right: 18px; }.menu h2 { font-size: 26px; }.menu button { min-height: 54px; padding: 15px; }.upgrade { padding: 8px; }.upgrade p { font-size: 11px; }.readings b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }