/* The game's approved fixed composition, layout 4. Original layered assets. */
:root { --title-cyan:#a8e5ff; --title-gold:#e9bb69; }
.skip-link { position:fixed; top:8px; left:8px; z-index:3000; padding:12px; background:#06111c; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.title-screen.hero-section { height:100svh; min-height:720px; padding:0; isolation:isolate; overflow:hidden; background:#030a15; }
.title-art,.title-background,.title-foreground { position:absolute; pointer-events:none; }
.title-art { inset:0; z-index:-1; overflow:hidden; }
.title-vortex,.title-accents { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.title-vortex { opacity:0; }
.title-vortex.ready { opacity:1; }
.title-motion-toggle { position:absolute; right:24px; bottom:20px; border:1px solid #a8e5ff50; background:#03101bb3; color:#c4e3ed; border-radius:4px; padding:7px 11px; font:400 .75rem/1.4 var(--font-body); cursor:pointer; }
.title-motion-toggle:hover { border-color:#a8e5ff; color:white; }
.title-background { width:104%; height:104%; left:-2%; top:-.82%; object-fit:cover; object-position:50% 20.5%; max-width:none; }
.title-foreground { width:184.889vh; height:104vh; left:-3.5556vh; top:-2vh; }
.title-planet { position:absolute; width:100%; height:100%; max-width:none; }
/* Keep this wrapper out of its own stacking context: parallax belongs on the
   two images, so the screen-blended exhaust can see the planet behind it. */
.title-ship { position:absolute; width:90.167vh; height:50.744vh; left:calc(-10.4vh + .791833vw); top:55.997vh; transform:none; isolation:auto; }
.title-ship img { position:absolute; inset:0; width:100%; height:100%; max-width:none; }
.title-exhaust { mix-blend-mode:screen; }
.title-hull { clip-path:polygon(36.3% 47.61%,36.48% 45.17%,37.8% 42.83%,39.17% 41.02%,39.83% 39.11%,43.9% 36.34%,46.17% 38.58%,46.95% 41.23%,50.84% 36.66%,51.56% 34.33%,48.5% 34.86%,45.69% 32.31%,45.39% 28.06%,46.17% 26.78%,56.94% 19.13%,58.49% 19.55%,61.18% 21.15%,61.24% 22.74%,60.47% 24.97%,57.36% 27.52%,59.45% 29.54%,62.74% 27.52%,65.19% 28.91%,67.4% 25.4%,71.23% 24.02%,75.48% 23.80%,78.05% 26.14%,78.89% 29.12%,78.71% 33.16%,77.57% 38.04%,75.9% 41.44%,72.31% 45.06%,75.6% 49.42%,81.76% 44.53%,83.91% 49.63%,83.31% 52.18%,80.08% 57.07%,75.36% 63.66%,72.55% 65.36%,70.04% 62.49%,69.92% 57.81%,65.25% 55.05%,64% 57.28%,60.89% 57.60%,57.95% 61.11%,55.26% 62.06%,52.33% 61%,49.4% 64.83%,46.35% 62.59%,43.96% 62.59%,43% 60.68%,42.94% 57.07%,43.96% 53.56%,41.57% 54.84%,38.94% 52.82%,37.14% 51.01%); }
.title-wordmark { position:absolute; left:40.15%; top:57.4074%; width:min(41.544vw,72.77vh); margin:0; line-height:0; }
.title-wordmark img { width:100%; height:auto; filter:drop-shadow(0 4px 20px #0009); }
.title-menu { position:absolute; top:15.2778%; left:7.8125%; width:clamp(270px,17.1vw,342px); display:grid; gap:8px; padding:14px; background:rgba(3,15,27,.30); border:1px solid #4acbe294; box-shadow:inset 0 0 0 4px #07142270,0 8px 32px #0004; border-radius:9px; backdrop-filter:blur(5px); }
.title-menu-label { font:500 .75rem/1.4 var(--font-tech); letter-spacing:.12em; color:var(--title-cyan); padding:0 3px 5px; }
.title-action { display:flex; align-items:center; justify-content:flex-start; gap:13px; min-height:47px; padding:10px 14px; font:500 1rem/1.25 var(--font-display); text-transform:uppercase; text-decoration:none; color:var(--title-cyan); border:1px solid #52bdd69c; background:#02101c66; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); transition:background .16s,border-color .16s,color .16s; }
.title-action.primary { border-color:var(--title-gold); color:#fff0c3; background:#4f390e66; }
.title-action:hover,.title-action:focus-visible { border-color:#b8f6ff; color:white; background:#12627980; outline:2px solid #bef4ff; outline-offset:-3px; }
.solid-icon { width:24px; height:24px; object-fit:contain; flex:0 0 auto; pointer-events:none; transition:filter .16s,transform .16s; }
a:hover>.solid-icon,a:focus-visible>.solid-icon,button:hover>.solid-icon,button:focus-visible>.solid-icon,.feature-card:hover .solid-icon { filter:drop-shadow(0 0 5px #5fe8ff) drop-shadow(0 0 11px #28bfffb0); transform:scale(1.08); }
.title-caption { position:absolute; left:40.15%; top:84.5%; padding-right:2rem; color:#d4e9f3; text-shadow:0 2px 8px black; }
.title-caption span { font:500 .875rem/1.6 var(--font-tech); letter-spacing:.16em; }
.title-caption p { font-size:1rem; margin-top:6px; }
.title-scroll { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:.875rem; color:#d4edf7; text-decoration:none; display:flex; gap:20px; align-items:center; }
.title-scroll span { font-size:1.3rem; }
.hud-navbar { background:linear-gradient(#030a18d9,#030a1850); }
.hud-navbar .brand-logo-img { width:32px; height:32px; }
/* Current content inherits the existing site design system. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
section[id] { scroll-margin-top:86px; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid #a8e5ff; outline-offset:4px; }
.section-desc { max-width:860px; margin:20px auto 0; color:var(--text-secondary); }
.game-intro { max-width:940px; }
.intro-copy { max-width:780px; margin:24px auto 0; text-align:left; }
.intro-lead { color:#e7f4fa; font-size:clamp(1.125rem,2vw,1.3rem); line-height:1.75; }
.intro-story { margin-top:22px; color:var(--text-secondary); font-size:1.0625rem; line-height:1.85; }
.intro-scope { margin-top:26px; padding:4px 0 4px 20px; border-left:2px solid #59bdd5; color:#b4cedc; font-size:1rem; line-height:1.75; }
.features-status { display:block; text-align:center; margin:0 0 24px; }
.feature-icon-wrapper .solid-icon { width:34px; height:34px; }
.feature-summary { margin-top:20px; color:#b4d6e7; font:500 .875rem/1.6 var(--font-tech); letter-spacing:.04em; }
.resistance-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 32px; padding:28px 12px 0; }
.resistance-strip>span { display:flex; gap:10px; align-items:center; font:600 1rem/1.4 var(--font-tech); color:#c8e5f1; }
.screen-preview-wrapper { display:block; border:0; border-bottom:1px solid var(--border-cyan); font:inherit; }
.screen-preview-wrapper:focus-visible { outline-offset:-4px; }
.screen-preview-img { display:block; object-fit:contain; }
.screen-card-content h3 { display:flex; gap:10px; align-items:center; font-size:1rem; }
.hangar-grid { grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr); align-items:start; }
.ship-selector-card { color:var(--text-primary); text-align:left; font:inherit; width:100%; }
.ship-info-primary { display:flex; flex-direction:column; gap:6px; }
.ship-info-primary strong { font:600 1rem/1.5 var(--font-display); }
.ship-display-stage { min-width:0; }
.stage-viewport { height:auto; aspect-ratio:16/9; }
.ship-stage-img { width:100%; height:100%; max-width:100%; max-height:100%; filter:none; }
.ship-image-caption { position:absolute; bottom:10px; left:12px; background:#020710d6; color:#c1e6f1; padding:4px 8px; font:500 .75rem/1.5 var(--font-tech); letter-spacing:.08em; }
#stageShipRole { margin-top:6px; color:#b1d6e8; }
.ship-data-note { color:var(--text-muted); font-size:.8125rem; line-height:1.7; }
.faction-zoom-hint { font:inherit; background:#020a1699; border:1px solid #43a3b670; color:white; }
.development-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.development-grid h3 { font-size:1.0625rem; line-height:1.7; margin:14px 0; }
.development-grid p { color:var(--text-secondary); font-size:.9375rem; }
.development-grid p+p { margin-top:16px; }
.development-grid .section-tag { font-size:.7rem; letter-spacing:.08em; }
.release-panel { display:flex; gap:28px; padding:40px; border-top:1px solid #5ba9c770; border-bottom:1px solid #5ba9c770; background:#08142399; }
.release-panel>.solid-icon { width:36px; height:36px; margin-top:6px; }
.release-panel h2 { font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.6; margin:12px 0; }
.release-panel p { max-width:840px; margin-top:14px; }
.community-card>h2 { font-size:clamp(1.4rem,3vw,2rem); margin:12px 0; }
.community-card>p { max-width:740px; margin:16px auto; }
.form-feedback:empty { display:none; }
.footer-links { list-style:none; }
.footer-links li { margin:8px 0; }
.footer-links a { color:var(--text-secondary); text-decoration:none; }
.footer-links a:hover { color:var(--title-cyan); }
.footer-col p { margin-top:16px; line-height:2; }
.modal-image-view { object-fit:contain; }
@media(max-width:1000px) { .development-grid { grid-template-columns:1fr; } .hangar-grid { grid-template-columns:1fr; } .ship-selector-list { display:grid; grid-template-columns:1fr 1fr; } }
@media(min-width:2300px) { .title-menu { left:calc(50% - 900px); } }
@media(max-width:1100px) and (min-width:761px) { .title-menu { left:4%; width:265px; top:17%; } .title-action { font-size:.875rem; min-height:43px; } .title-caption { top:82%; } }
@media(max-width:760px) {
  .title-screen.hero-section { min-height:1080px; height:auto; }
  .title-art { height:530px; }
  .title-background { object-position:65% 25%; }
  .title-foreground { width:960px; height:540px; left:-30px; top:0; }
  .title-ship { width:540px; height:304px; top:55px; left:-60px; }
  .title-wordmark { width:min(86%,440px); left:max(7%,calc(50% - 220px)); top:260px; }
  .title-menu { top:490px; left:7%; width:86%; max-width:none; }
  .title-action { font-size:.9375rem; min-height:42px; }
  .title-caption { left:7%; top:422px; padding-right:7%; }
  .title-caption span { font-size:.875rem; letter-spacing:.02em; }
  .title-caption p { display:none; }
  .title-scroll { bottom:16px; white-space:nowrap; }
  .title-motion-toggle { top:452px; bottom:auto; right:7%; font-size:.6875rem; padding:5px 9px; }
  .section-title { font-size:clamp(1.45rem,6vw,2.5rem); overflow-wrap:anywhere; }
  .release-panel { padding:24px 16px; gap:14px; }
  .release-panel>.solid-icon { width:24px; height:24px; }
  .ship-selector-list { grid-template-columns:1fr; }
  .ship-display-stage { padding:16px; }
  .ship-telemetry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .telemetry-val { font-size:.9375rem; }
  .telemetry-cell { padding:10px; }
  .ship-image-caption { font-size:.6rem; bottom:4px; left:4px; }
}
@media(max-width:480px) { .hud-navbar .btn-wishlist { display:none; } .brand-title { font-size:.875rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .title-motion-toggle { display:none; } }