:root { --ink: #040505; --paper: #f3f0e9; --muted: #a9a69e; --line: rgba(243,240,233,.27); --red: #df2e21; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--ink); }
body { overflow: hidden; color: var(--paper); font-family: "Helvetica Neue", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
#unity-container { position: absolute; overflow: hidden; background: var(--ink); }
#unity-container.unity-desktop { position: fixed; inset: 0; width: 100%; height: 100%; }
#unity-container.unity-mobile { position: fixed; inset: 0; width: 100%; height: 100%; }
#unity-canvas { display: block; width: 100% !important; height: 100% !important; background: var(--ink); outline: none; }
.unity-mobile #unity-canvas { width: 100%; height: 100%; }

#f1-loading-screen { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #050606; transition: opacity .62s ease, visibility .62s ease; }
#f1-loading-screen[hidden] { display: none; }
#f1-loading-screen.is-complete { opacity: 0; visibility: hidden; }
.loading-header { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px); min-height: 66px; padding: 10px clamp(18px, 4.3vw, 64px); border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: clamp(11px, 1.7vw, 24px); min-width: 0; }
.brand-mclaren { width: clamp(52px, 7vw, 84px); height: auto; object-fit: contain; }
.brand-divider { display: block; width: 1px; height: 31px; background: rgba(243,240,233,.52); }
.brand-honda { width: clamp(108px, 15vw, 180px); height: auto; object-fit: contain; }
.archive-label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: clamp(7px, .78vw, 10px); letter-spacing: .08em; line-height: 1.2; }
.archive-label b { color: var(--paper); font-size: clamp(8px, .92vw, 11px); letter-spacing: .12em; }
.personal-mark { width: clamp(38px, 5.5vw, 67px); height: clamp(38px, 5.5vw, 67px); margin-left: auto; object-fit: contain; opacity: .92; }
.loading-stage { display: grid; flex: 1 1 auto; place-items: center; min-height: 0; overflow: hidden; padding: clamp(12px, 2.5vh, 28px) 20px 6px; }
.loader-cover { display: block; width: min(78vw, 102dvh); max-height: calc(100dvh - 180px); object-fit: contain; box-shadow: 0 22px 60px rgba(0,0,0,.25); }
/* A compact centered loading axis, intentionally without a footer panel. */
.loading-readout { position: relative; display: grid; flex: 0 0 auto; grid-template-columns: 1fr; align-items: center; gap: clamp(13px, 1.3vw, 20px); align-self: center; width: min(54vw, 840px); min-height: 0; padding: 0 0 clamp(20px, 3vh, 34px); background: transparent; transform: translateY(clamp(-36px, -3.2vh, -18px)); }
.loading-copy { display: flex; justify-content: center; align-items: center; padding-right: clamp(18px, 1.4vw, 26px); color: var(--paper); text-align: center; }
#loading-phase { font-size: clamp(8px, .62vw, 11px); font-weight: 800; letter-spacing: .14em; }
#loading-detail { display: none; margin: 0; color: var(--muted); font-size: clamp(7px, .5vw, 9px); letter-spacing: .06em; line-height: 1.4; }
#loading-slow-note { position: absolute; left: calc(50% - clamp(9px, .7vw, 13px)); bottom: 1px; width: max-content; max-width: min(80vw, 420px); margin: 0; transform: translateX(-50%); color: #d1ccc0; font-size: clamp(7px, .5vw, 9px); letter-spacing: .03em; line-height: 1.4; text-align: center; }
.has-error #loading-detail { display: block; position: absolute; top: calc(100% + 5px); left: calc(50% - clamp(9px, .7vw, 13px)); width: min(76vw, 520px); transform: translateX(-50%); text-align: center; }
.loading-progress-row { display: flex; align-items: center; gap: clamp(8px, .75vw, 14px); min-width: 0; padding-left: clamp(18px, 1.4vw, 26px); }
#unity-progress-bar-empty { --loader-progress: 0; position: relative; flex: 1; height: 4px; min-width: 0; background: rgba(242,239,231,.78); }
#unity-progress-bar-full { width: 0; height: 100%; background: var(--red); transition: width .12s linear; }
#loading-wheel { position: absolute; z-index: 2; top: 50%; left: calc(var(--loader-progress) * 100%); width: clamp(32px, 3.35vw, 52px); height: clamp(32px, 3.35vw, 52px); object-fit: contain; transform: translate(-50%, -50%) rotate(calc(var(--loader-progress) * 1440deg)); filter: drop-shadow(0 5px 5px rgba(0,0,0,.48)); transition: left .12s linear, transform .12s linear; }
.progress-marker { position: absolute; z-index: 1; top: -7px; width: 1px; height: 18px; background: rgba(243,240,233,.82); }.marker-one { left: 25%; }.marker-two { left: 50%; }.marker-three { left: 75%; }
#loading-percent { flex: 0 0 auto; color: var(--red); font-family: "Arial Narrow", "Helvetica Neue", sans-serif; font-size: clamp(20px, 2.1vw, 32px); font-weight: 800; line-height: .82; letter-spacing: -.06em; text-align: right; }
.is-rendering #loading-wheel { filter: drop-shadow(0 0 8px rgba(223,46,33,.42)) drop-shadow(0 5px 5px rgba(0,0,0,.48)); }
.has-error #loading-phase, .has-error #loading-percent { color: var(--red); }

#unity-warning { position: absolute; z-index: 5; left: 20px; right: 20px; top: 68px; max-width: 440px; margin: auto; } #unity-warning[hidden] { display: none; }
.unity-notice { border-left: 2px solid var(--red); padding: 10px 12px; color: var(--paper); background: rgba(12,12,12,.93); box-shadow: 0 10px 30px rgba(0,0,0,.32); font-size: 11px; line-height: 1.45; }.unity-notice-warning { border-left-color: #d9af58; }.unity-notice-error { border-left-color: var(--red); }
#unity-footer { position: absolute; z-index: 2; right: 16px; bottom: 16px; left: auto; width: auto; min-height: 0; padding: 0; background: transparent; border: 0; }
.footer-engine, #unity-build-title { display: none; }
#unity-fullscreen-button { display: grid; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid rgba(243,240,233,.42); border-radius: 50%; background: rgba(5,6,6,.2); backdrop-filter: blur(5px); cursor: pointer; } #unity-fullscreen-button span { position: relative; display: block; width: 12px; height: 12px; margin: auto; border: 1px solid rgba(243,240,233,.85); } #unity-fullscreen-button span::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 4px; height: 4px; background: transparent; border-left: 1px solid rgba(243,240,233,.85); border-top: 1px solid rgba(243,240,233,.85); } #unity-fullscreen-button:hover { border-color: var(--red); background: rgba(223,46,33,.18); } #unity-fullscreen-button:hover span { border-color: var(--red); }
#unity-fullscreen-button[hidden] { display: none; }
@media (max-height: 680px) { .loading-header { min-height: 56px; } .loader-cover { width: min(76vw, 92dvh); max-height: 345px; } .loading-readout { gap: 9px; width: min(54vw, 840px); padding-bottom: 14px; transform: translateY(-14px); } #loading-slow-note { display: none; } }
@media (max-width: 700px) { .loading-header { min-height: 54px; padding: 7px 16px; gap: 12px; } .brand-divider { height: 24px; } .archive-label { display: none; } .loader-cover { width: min(89vw, 620px); max-height: 51vh; } .loading-readout { width: min(82vw, 460px); gap: 8px; padding-bottom: 25px; } .loading-progress-row { gap: 9px; } #loading-percent { font-size: 23px; } #unity-footer { right: 11px; bottom: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Mobile gesture ownership and browser safe areas. */
#unity-canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { overscroll-behavior: none; }
@media (pointer: coarse) { #unity-footer { right: max(11px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); } .loading-header { padding-top: max(7px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } }
#unity-container.unity-mobile { height: 100dvh; }