:root {
    --ink: #202321;
    --paper: #f4f5ef;
    --coral: #ed4b42;
    --lime: #d9f263;
    --body: 'DM Sans', 'Trebuchet MS', sans-serif;
    --display: 'Barlow Condensed', Impact, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #92b7c3; color: var(--ink); font-family: var(--body); }
button, select, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.game-shell { position: fixed; inset: 0; overflow: hidden; background: #92b7c3; }
#drive-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.exit-link { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 9px; color: white; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-decoration: none; text-shadow: 0 1px 4px #132525a8; }
.exit-link span { font-size: 20px; }
.hud { position: absolute; z-index: 2; top: max(15px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: grid; grid-template-columns: auto 112px 132px; align-items: center; gap: 13px; padding: 10px 12px; border: 1px solid #ffffff69; background: #202a2bd9; color: white; backdrop-filter: blur(9px); }
.hud-main { display: flex; gap: 15px; }
.hud-main > div, .safety-meter, .damage-meter { min-width: 49px; }
.hud-label, .safety-meter span, .damage-meter span { display: flex; justify-content: space-between; color: #d7e1db; font-size: 8px; font-weight: 800; letter-spacing: .8px; }
.hud-main strong { display: block; margin-top: 3px; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; }
.hud-main small { font-family: var(--body); font-size: 8px; }
.meter-track { height: 5px; margin-top: 7px; overflow: hidden; background: #ffffff39; }
.meter-track i { display: block; width: 100%; height: 100%; background: var(--lime); transition: width .2s ease, background-color .2s ease; }
.damage-meter .meter-track i { background: #75d29c; }
.radio-panel { position: absolute; z-index: 2; top: max(83px, calc(env(safe-area-inset-top) + 78px)); right: max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #ffffff69; background: #202a2bd9; color: white; backdrop-filter: blur(9px); }
.radio-panel label { font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.radio-panel select { max-width: 150px; border: 0; background: transparent; color: white; font-size: 11px; }
.radio-panel option { color: var(--ink); }
.trip-message { position: absolute; z-index: 2; top: 110px; left: 50%; max-width: min(80vw, 360px); padding: 8px 13px; transform: translateX(-50%); border: 1px solid #ffffff70; background: #202a2bd9; color: white; font-size: 11px; font-weight: 700; text-align: center; backdrop-filter: blur(9px); }
.drive-actions { position: absolute; z-index: 2; right: max(16px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; gap: 7px; }
.drive-actions button { min-height: 36px; padding: 0 10px; border: 1px solid #ffffff8a; background: #202a2bd9; color: white; font-size: 9px; font-weight: 800; letter-spacing: .6px; backdrop-filter: blur(7px); }
.drive-actions button:hover, .drive-actions button[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
.touch-controls { position: absolute; z-index: 2; right: max(16px, env(safe-area-inset-right)); bottom: max(72px, calc(env(safe-area-inset-bottom) + 68px)); left: max(16px, env(safe-area-inset-left)); display: none; justify-content: space-between; align-items: end; pointer-events: none; }
.steering-controls, .pedal-controls { display: flex; gap: 9px; pointer-events: auto; }
.touch-controls button { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #ffffff8a; border-radius: 50%; background: #202a2bd9; color: white; font-size: 19px; font-weight: 800; touch-action: none; user-select: none; }
.touch-controls button[data-control="accelerate"], .touch-controls button[data-control="brake"] { width: 65px; height: 65px; border-radius: 18px; font-size: 11px; }
.touch-controls button[data-active="true"] { transform: scale(.94); background: var(--coral); }
.intro-screen, .result-screen { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 18px; background: #17272e35; }
.intro-panel, .result-panel { width: min(500px, 100%); max-height: calc(100% - 24px); overflow-y: auto; padding: 27px 30px 24px; border: 1px solid #ffffff94; background: var(--paper); box-shadow: 0 22px 80px #1d2e3360; animation: panel-in .35s both; }
.game-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #58645d; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.game-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #5aaf73; box-shadow: 0 0 0 4px #5aaf7322; }
h1, h2, p { margin-top: 0; }
h1, .result-panel h2 { margin-bottom: 12px; font-family: var(--display); font-size: 53px; font-weight: 900; line-height: .85; text-transform: uppercase; }
h1 em { color: var(--coral); font-style: normal; }
.story-copy { max-width: 420px; margin-bottom: 16px; color: #626a62; font-size: 12px; line-height: 1.65; }
.trip-brief { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 7px; margin-bottom: 14px; padding: 10px 0; border-top: 1px solid #d9ddd2; border-bottom: 1px solid #d9ddd2; }
.trip-brief span { color: #778078; font-size: 7px; font-weight: 800; letter-spacing: .7px; }
.trip-brief b { display: block; margin-top: 4px; color: var(--ink); font-size: 9px; letter-spacing: 0; }
.intro-radio { display: block; margin-bottom: 6px; color: #626a62; font-size: 10px; font-weight: 700; }
.intro-radio + .start-button { width: 100%; }
.control-hint { margin: 10px 0 0; color: #778078; font-size: 9px; text-align: center; }
.start-button { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 0 15px; border: 0; background: var(--ink); color: white; font-size: 11px; font-weight: 800; letter-spacing: .8px; }
.start-button span { color: var(--lime); font-size: 18px; }
.start-button:hover { background: var(--coral); }
.result-panel { width: min(410px, 100%); text-align: center; }
.result-panel .game-eyebrow { justify-content: center; }
.result-panel h2 { font-size: 46px; }
.result-panel > p:not(.game-eyebrow) { color: #626a62; font-size: 12px; }
.result-stats { display: flex; justify-content: center; gap: 18px; margin: 18px 0; }
.result-stats span { color: #626a62; font-size: 9px; }
.result-stats b { display: block; color: var(--ink); font-family: var(--display); font-size: 24px; }
.result-panel .start-button { width: 100%; }
.result-exit { display: inline-block; margin-top: 14px; color: #626a62; font-size: 10px; font-weight: 700; text-decoration: none; }
.result-exit:hover { color: var(--coral); }
[hidden] { display: none !important; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 720px) {
    .hud { top: max(12px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); grid-template-columns: 1fr 104px; gap: 7px 10px; padding: 8px; }
    .hud-main { gap: 11px; }
    .hud-main strong { font-size: 22px; }
    .damage-meter { grid-column: 1 / -1; }
    .radio-panel { top: max(103px, calc(env(safe-area-inset-top) + 96px)); right: max(10px, env(safe-area-inset-right)); }
    .trip-message { top: 149px; font-size: 10px; }
    .touch-controls { display: flex; bottom: max(70px, calc(env(safe-area-inset-bottom) + 65px)); }
    .drive-actions { right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
    .drive-actions button { min-height: 33px; padding: 0 8px; }
    .exit-link { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); font-size: 8px; }
    .intro-panel, .result-panel { padding: 21px 19px 18px; }
    h1 { font-size: 46px; }
    .trip-brief { grid-template-columns: 1.25fr 1fr 1fr; gap: 4px; }
}
@media (max-height: 560px) and (max-width: 900px) {
    .intro-panel, .result-panel { padding: 15px 18px; }
    h1 { font-size: 40px; }
    .story-copy { margin-bottom: 9px; font-size: 10px; }
    .trip-brief { margin-bottom: 8px; }
    .control-hint { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }