/* Launch screen and GPU help share the NFS player's type, color and geometry. */
@font-face { font-family: MW Condensed; src: url("./assets/RobotoCondensed.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
#welcome, #gpu-help { --gold: #dcb66b; --text: #efece3; --muted: #b6b5ae; --line: #39403d; color: var(--text); font: 16px/1.5 system-ui, sans-serif; }
#welcome { display: block; text-align: left; padding: 0; background: #101415; }
#welcome::before { inset: 0; height: auto; background: url("./assets/flatout2-poster.jpg") center 65% / cover; opacity: .055; pointer-events: none; }
#welcome > * { position: relative; }
.launch-icon { width: 23px; height: 23px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.launch-header { min-height: 64px; padding: 12px clamp(20px, 5vw, 80px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #101415b3; }
.launch-brand { font: italic 700 26px/1.1 MW Condensed, sans-serif; text-transform: uppercase; }
#welcome button { font: 600 15px/1.4 system-ui, sans-serif; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px; transition: background .15s; }
#welcome button:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
#welcome .launch-files { color: var(--gold); background: transparent; padding: 0; border: 0; font-size: 14px; font-weight: 400; }
.launch-hero { max-width: 1360px; min-height: calc(100dvh - 128px); margin: auto; padding: 32px 40px; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); gap: 48px; align-items: center; }
.launch-copy { padding: 12px 0; }
#welcome .launch-title { font: 900 clamp(42px,4.8vw,76px)/1.05 MW Condensed,sans-serif; letter-spacing: -.025em; margin: 0 0 18px; transform: none; text-shadow: none; }
#welcome .launch-title span { color: var(--text); }
.launch-intro { font-size: clamp(18px,1.6vw,24px); font-weight: 600; margin: 0 0 28px; }
.launch-description { font-size: 18px; line-height: 1.5; margin: 0 0 28px; }
#welcome #start { background: var(--gold); color: #12130f; border: 1px solid #edca85; min-height: 70px; padding: 12px 28px; font: 700 34px/1.2 MW Condensed,sans-serif; width: min(100%,460px); justify-content: space-between; letter-spacing: normal; box-shadow: none; }
#welcome #start:hover { background: #eccb88; }
#welcome #start span { margin: 0; }
#start .launch-icon { width: 30px; height: 30px; stroke-width: 2.3; }
.launch-defaults { display: flex; gap: 18px; align-items: flex-start; margin-top: 24px; }
.launch-defaults .launch-icon { margin-top: 3px; }
.launch-defaults p { margin: 0; font-size: 16px; }
.launch-defaults small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
#welcome .gpu-choice { display: block; max-width: 460px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.launch-gpu-row { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.launch-gpu-row .launch-icon { color: var(--gold); }
#welcome .gpu-status { font-size: 16px; color: var(--text); }
#welcome .gpu-warning { border: 1px solid #dcb66b88; border-radius: 3px; color: var(--gold); margin: 0 0 16px; padding: 10px 12px; font-size: 13px; background: transparent; max-width: none; }
#welcome .secondary { background: #101415b3; color: var(--gold); border: 1px solid var(--gold); min-height: 50px; padding: 10px 18px; }
#welcome .secondary:hover { background: #dcb66b18; }
.launch-poster { width: 100%; height: auto; max-width: calc((100dvh - 192px)*2/3); max-height: calc(100dvh - 192px); justify-self: center; object-fit: contain; border: 1px solid var(--line); border-radius: 2px; background: #121617; box-shadow: 0 12px 40px #0005; }
.launch-footer { min-height: 64px; border-top: 1px solid var(--line); padding: 16px clamp(20px,5vw,80px); display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 14px; }
.launch-footer > span { display: flex; align-items: center; gap: 14px; }
#gpu-help { background: #171d1d; border: 1px solid var(--line); border-radius: 4px; width: min(580px,calc(100vw - 32px)); padding: 34px; max-height: calc(100dvh - 32px); }
#gpu-help::backdrop { background: #050909c9; backdrop-filter: blur(5px); }
#gpu-help .launch-dialog-close { position: absolute; right: 12px; top: 12px; padding: 4px; background: transparent; border: 0; color: var(--muted); }
#gpu-help h2 { font: 700 32px/1.15 MW Condensed,sans-serif; margin: 0 20px 22px 0; }
#gpu-help p, #gpu-help li { font-size: 15px; line-height: 1.65; }
#gpu-help ol { padding-left: 22px; }
#gpu-help li { padding-left: 6px; margin: 14px 0; }
#gpu-help code { color: var(--gold); font-size: 13px; }
#gpu-help .gpu-command { border: 1px solid var(--line); background: #101415; padding: 12px; margin-top: 8px; }
#gpu-help .gpu-note { color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-bottom: 0; font-size: 15px!important; }
@media (max-height:800px) and (min-width:761px) { .launch-hero { padding-top:24px; padding-bottom:24px; gap:40px; } #welcome .launch-title { font-size:clamp(42px,4.4vw,66px); } .launch-intro,.launch-description { margin-bottom:20px; } .launch-description { font-size:16px; } #welcome #start { min-height:60px; font-size:30px; } .launch-defaults,#welcome .gpu-choice { margin-top:18px; } #welcome .gpu-choice { padding-top:16px; } .launch-poster { max-height:calc(100dvh - 176px); } }
@media (max-width:1000px) and (min-width:761px) { .launch-hero { padding:24px; gap:30px; } #welcome .launch-title { font-size:50px; } .launch-description { font-size:16px; } .launch-defaults p,#welcome .gpu-status { font-size:14px; } }
@media (max-width:760px) { .launch-header { padding:12px 20px; gap:12px; } .launch-brand { font-size:22px; } #welcome .launch-files { gap:8px; font-size:12px; max-width:130px; } .launch-hero { grid-template-columns:1fr; padding:36px 24px; gap:36px; } .launch-copy { padding:0; } #welcome .launch-title { font-size:clamp(38px,8vw,60px); letter-spacing:-.02em; } .launch-intro { font-size:20px; line-height:1.5; margin-bottom:24px; } .launch-description { font-size:16px; } #welcome #start { min-height:62px; font-size:30px; } .launch-defaults { gap:12px; } .launch-defaults p { font-size:14px; } .launch-defaults small { font-size:12px; } #welcome .gpu-status { font-size:14px; } .launch-gpu-row { gap:12px; } #welcome .secondary { font-size:14px; } .launch-poster { width:min(100%,400px); max-width:400px; max-height:none; } .launch-footer { align-items:flex-start; flex-direction:column; padding:20px 24px; font-size:13px; gap:14px; } #gpu-help { padding:28px 24px; } }
@media (prefers-reduced-motion:reduce) { #welcome button { transition:none; } }