/* ==========================================================================
   hero-fit.css  ( 2026-11-07 )
   Same landing scene on every screen.

   hero-fit.js lays the first screen out on a fixed design canvas and scales
   the whole canvas to the screen, instead of letting each piece resize on its
   own ( which used to hide the heroes and squash the scene on phones ).

     landscape canvas  1440 x 827   ( the desktop scene at 1440 x 900, below the 73 px header )
     portrait canvas    430 x 760   ( a phone-shaped arrangement of the same pieces )

   The canvas is stretched to the screen's shape first, so nothing is letterboxed:
   heroes sit at % positions and spread out, the centre column stays centred.
   Every size inside is a plain px value of that canvas. If JS does not run,
   .hero-fit is never added and the old responsive rules still apply.
   ========================================================================== */

.hero.hero-fit {
  height: 100svh;
  min-height: 0;
}

/* The stage covers the screen under the header. Its two layers ( heroes z 3,
   centre column z 5 ) are scaled separately so the faction FX ( z 4 ) can still
   sit between them; scaling the stage itself would flatten that order. */
.hero.hero-fit .hero-stage {
  position: absolute;
  inset: var(--hdr, 72px) 0 0;
  width: auto;
  height: auto;
  padding-top: 0;
}

/* Landscape keeps the desktop's empty bands: the global "section { padding: 95px 0 }"
   puts the hero layers 94 px below the header and 95 px above the bottom ( canvas px ). */
.hero.hero-fit { --pad-t: 94; --pad-b: 95; }
.hero.hero-fit.hero-portrait { --pad-t: 0; --pad-b: 0; }

.hero.hero-fit .hero-flank,
.hero.hero-fit .hero-center {
  position: absolute;
  inset: auto;
  left: 0;
  top: calc(var(--pad-t) * var(--fit-k, 1) * 1px);
  width: calc(var(--fit-w, 1440) * 1px);
  height: calc((var(--fit-h, 827) - var(--pad-t) - var(--pad-b)) * 1px);
  transform: scale(var(--fit-k, 1));
  transform-origin: 0 0;
}

.hero.hero-fit .hero-fx { inset: var(--hdr, 72px) 0 0; }

/* ---- Landscape canvas: the desktop values at 1440 x 900 ------------------ */

.hero.hero-fit .hero-center {
  padding: 14px 24px 45px;
  gap: 12.6px;
}

.hero.hero-fit .hero-brand-lockup { width: 518px; }

.hero.hero-fit .motto {
  font-size: 23px;
  margin-top: -34px;
}

.hero.hero-fit .trailer-shell {
  width: 620px;
  height: 171px;
  margin-top: auto;
}

.hero.hero-fit .trailer-label { font-size: 24px; }
.hero.hero-fit .plate-label { font-size: 22px; }

.hero.hero-fit .crest-plate-btn {
  width: 432px;
  margin: 26px 0 18px;
}

.hero.hero-fit .faction-crest { width: 166px; opacity: .38; }
.hero.hero-fit .faction-crest-alliance { left: 24px; }
.hero.hero-fit .faction-crest-pact { right: 24px; }
.hero.hero-fit .faction-label { display: flex; top: 51%; }

/* every hero on every screen ( phones used to drop ranks 2-4 ) */
.hero.hero-fit .hero-figure { display: block; width: auto; }
.hero.hero-fit .hero-figure.rank-1 { opacity: 1; }
.hero.hero-fit .hero-figure.rank-2 { opacity: .8; }
.hero.hero-fit .hero-figure.rank-3 { opacity: .64; }
.hero.hero-fit .hero-figure.rank-4 { opacity: .48; }

/* ---- Portrait canvas ( phones and tablets held upright ) ----------------- */

.hero.hero-fit.hero-portrait .hero-center {
  padding: 4px 14px 16px;
  gap: 6px;
}

.hero.hero-fit.hero-portrait .hero-brand-lockup {
  width: 330px;
  transform: translate(6px, -4px) scale(1) !important;
}

.hero.hero-fit.hero-portrait .motto {
  width: 400px;
  font-size: 17px;
  margin-top: -20px;
  padding: 4px 12px;
  text-wrap: balance;
}
.hero.hero-fit.hero-portrait .motto span { text-wrap: balance; }

.hero.hero-fit.hero-portrait .trailer-shell {
  width: 318px;
  height: 128px;
}

.hero.hero-fit.hero-portrait .trailer-label { font-size: 16px; }
.hero.hero-fit.hero-portrait .play-icon { width: 40px; height: 40px; }
.hero.hero-fit.hero-portrait .trailer-arrow { width: 28px; height: 46px; font-size: 30px; }
.hero.hero-fit.hero-portrait .plate-label { font-size: 17px; }

.hero.hero-fit.hero-portrait .crest-plate-btn {
  width: 300px;
  margin: 22px 0 4px;
}

/* app.js places the crests and banners with desktop px offsets ( inline vars ); reset them here */
.hero.hero-fit.hero-portrait .faction-crest {
  top: 3%;
  width: 104px;
  --faction-crest-x: 0px !important;
  --faction-crest-y: 0px !important;
  --faction-crest-scale: 1.6 !important;
}
.hero.hero-fit.hero-portrait .faction-crest-alliance { left: -10px; }
.hero.hero-fit.hero-portrait .faction-crest-pact { right: -10px; }

.hero.hero-fit.hero-portrait .faction-label {
  top: auto;
  bottom: 31.5%;
  min-width: 0;
  --faction-label-x: 0px !important;
  --faction-label-y: 0px !important;
  --faction-label-scale: 1 !important;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .1em;
}
.hero.hero-fit.hero-portrait .faction-label img { width: 30px; height: 30px; flex-basis: 30px; }
.hero.hero-fit.hero-portrait .faction-label-alliance { left: 6px; padding: 4px 10px 4px 5px; }
.hero.hero-fit.hero-portrait .faction-label-pact { right: 6px; padding: 4px 5px 4px 10px; }

/* Portrait hero placement: front pair face each other in the middle band,
   the other three of each side stand behind them toward the edges.
   ( !important because the landscape values are inline on each <img> ) */
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000001"] { --x: -10% !important; --y: 26% !important; --h: 44% !important; --s: 1 !important; }
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000006"] { --x: -9% !important; --y: 40% !important; --h: 36% !important; --s: 1 !important; }
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000014"] { --x: 15% !important; --y: 46% !important; --h: 30% !important; --s: 1 !important; }
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000010"] { --x: -10% !important; --y: 54% !important; --h: 28% !important; --s: 1 !important; }

.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000002"] { --x: 44% !important; --y: 26% !important; --h: 44% !important; --s: 1 !important; }
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000016"] { --x: 63% !important; --y: 40% !important; --h: 36% !important; --s: 1 !important; }
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000009"] { --x: 47% !important; --y: 46% !important; --h: 30% !important; --s: 1 !important; }
.hero.hero-fit.hero-portrait .hero-figure[data-hero="1000020"] { --x: 74% !important; --y: 54% !important; --h: 28% !important; --s: 1 !important; }

/* ---- Header on short landscape screens ( phones on their side ) ---------- */

@media (max-width: 1100px) and (min-width: 851px) {
  .menu { display: block; }
  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    background: #0a0507f8;
    flex-direction: column;
    align-items: stretch;
  }
  .navlinks.open { display: flex; }
  .navlinks a { padding: 8px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  nav { height: 52px; }
  .brand img.brand-crest { height: 38px !important; }
  .brand-name { font-size: 20px; }
  .menu { padding: 5px 12px; }
  .navlinks { top: 100%; max-height: calc(100svh - 64px); overflow-y: auto; }
}