:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #071321; color: #f7fbff; }
.sky-canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.sky-topbar { position: fixed; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .7rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid rgba(210,239,255,.18); background: linear-gradient(180deg, rgba(4,12,22,.82), rgba(4,12,22,.28)); backdrop-filter: blur(8px); }
.sky-topbar a { color: #d9f8ff; font-weight: 850; text-decoration: none; }
.sky-brand { display: grid; text-align: center; }
.sky-brand strong { font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; }
.sky-brand small { color: #91b4c4; font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sky-topbar button { padding: .55rem .8rem; border: 1px solid rgba(210,239,255,.25); border-radius: 9px; background: rgba(8,25,40,.72); color: #f7fbff; font: inherit; font-weight: 800; cursor: pointer; }
.sky-topbar > div:last-child { display: flex; gap: .45rem; }
.sky-hud { position: fixed; z-index: 3; top: 82px; left: clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: repeat(5, minmax(78px, auto)); overflow: hidden; border: 1px solid rgba(203,238,255,.2); border-radius: 12px; background: rgba(5,17,29,.7); box-shadow: 0 12px 40px rgba(0,0,0,.24); backdrop-filter: blur(8px); }
.sky-hud > div { display: grid; gap: .1rem; min-width: 86px; padding: .58rem .72rem; border-right: 1px solid rgba(203,238,255,.12); }
.sky-hud > div:last-child { border-right: 0; }
.sky-hud span { color: #87a9b8; font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sky-hud strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.sky-message { position: fixed; z-index: 3; top: 150px; left: 50%; margin: 0; padding: .5rem .85rem; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; background: rgba(3,14,24,.62); color: #dff8ff; font-size: .76rem; font-weight: 800; text-align: center; transform: translateX(-50%); backdrop-filter: blur(7px); }
.sky-overlay { position: fixed; z-index: 6; inset: 0; display: grid; place-items: center; padding: 1.2rem; background: radial-gradient(circle at 50% 30%, rgba(32,112,154,.18), rgba(2,9,17,.84)); backdrop-filter: blur(7px); }
.sky-overlay[hidden] { display: none; }
.sky-card { width: min(620px, 100%); padding: clamp(1.4rem, 5vw, 2.8rem); border: 1px solid rgba(214,243,255,.24); border-radius: 22px; background: rgba(6,22,36,.88); box-shadow: 0 30px 100px rgba(0,0,0,.48); text-align: center; }
.sky-card p:first-child { margin: 0; color: #8feaff; font-size: .7rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.sky-card h1 { margin: .3rem 0 .75rem; font-size: clamp(3rem, 10vw, 6rem); line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
.sky-card > span { display: block; max-width: 520px; margin: auto; color: #b9d1dc; line-height: 1.6; }
.sky-card button { margin-top: 1.25rem; padding: .8rem 1.35rem; border: 0; border-radius: 11px; background: linear-gradient(135deg, #8ff4ff, #ffda75); color: #07121e; font: inherit; font-weight: 950; cursor: pointer; }
.drive-controls { position: fixed; z-index: 5; right: 1rem; bottom: 1rem; display: none; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 54px); gap: .4rem; }
.drive-controls button { border: 1px solid rgba(255,255,255,.25); border-radius: 13px; background: rgba(5,18,31,.72); color: white; font-size: 1.1rem; font-weight: 950; backdrop-filter: blur(8px); touch-action: none; }
.drive-controls button[data-control="up"], .drive-controls button[data-control="throttle"] { grid-column: 2; }
.drive-controls button[data-control="left"] { grid-column: 1; grid-row: 2; }
.drive-controls button[data-control="down"], .drive-controls button[data-control="brake"] { grid-column: 2; grid-row: 2; }
.drive-controls button[data-control="right"] { grid-column: 3; grid-row: 2; }
.race-position { color: #ffe07c; }
.race-circuits { display: grid; grid-template-columns: repeat(4, 1fr); gap: .42rem; width: min(470px, 100%); margin: 1.25rem auto 0; }
.race-circuit-button { min-height: 50px; padding: .35rem; border: 1px solid rgba(205,239,255,.22); border-radius: 9px; background: rgba(31,69,91,.52); color: #f8fbff; cursor: pointer; font: inherit; }
.race-circuit-button strong, .race-circuit-button small { display: block; }
.race-circuit-button small { margin-top: .12rem; color: #a8c7d3; font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.race-circuit-button.is-selected { border-color: #ffe07c; box-shadow: 0 0 0 2px rgba(255,224,124,.2); }
.race-circuit-button:disabled { cursor: not-allowed; opacity: .4; }
.race-garage { position: fixed; z-index: 7; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(3,12,21,.78); backdrop-filter: blur(10px); }
.race-garage[hidden] { display: none; }
.race-garage-card { width: min(640px, 100%); padding: clamp(1.2rem, 4vw, 2rem); border: 1px solid rgba(214,243,255,.25); border-radius: 20px; background: linear-gradient(145deg, rgba(7,27,44,.97), rgba(8,14,30,.98)); box-shadow: 0 32px 90px rgba(0,0,0,.52); text-align: center; }
.race-garage-card > p { margin: 0; color: #8feaff; font-size: .68rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.race-garage-card h2 { margin: .25rem 0; font-size: clamp(2.2rem, 7vw, 4.2rem); line-height: .9; text-transform: uppercase; }
.race-garage-card > strong { color: #ffe07c; }
.race-garage-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.1rem; }
.race-garage-option { min-height: 104px; padding: .65rem; border: 1px solid rgba(203,238,255,.18); border-radius: 12px; background: rgba(26,51,75,.7); color: #f7fbff; cursor: pointer; font: inherit; }
.race-garage-option strong, .race-garage-option small { display: block; }
.race-garage-option small { margin-top: .35rem; color: #a9c6d2; line-height: 1.35; }
.race-garage-option.is-equipped { border-color: #ffe07c; box-shadow: 0 0 0 2px rgba(255,224,124,.18); }
.race-garage-option:disabled { cursor: not-allowed; opacity: .45; }
.race-garage-card > button { margin-top: 1rem; padding: .7rem 1rem; border: 1px solid rgba(210,239,255,.24); border-radius: 10px; background: rgba(36,74,99,.8); color: #f7fbff; font: inherit; font-weight: 850; cursor: pointer; }
@media (pointer: coarse), (max-width: 760px) { .drive-controls { display: grid; } }
@media (max-width: 620px) { .sky-brand small { display: none; } .sky-hud { top: 74px; right: .7rem; left: .7rem; grid-template-columns: repeat(5, 1fr); } .sky-hud > div { min-width: 0; padding: .48rem; } .sky-hud strong { font-size: .75rem; } .sky-message { top: 137px; max-width: 86vw; white-space: nowrap; } .race-circuits { grid-template-columns: repeat(2, 1fr); } .race-garage-options { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sky-overlay { backdrop-filter: none; } }