/* ==========================================================================
   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 ( v2, 2026-11-07 ) is NOT a scaled canvas any more: see "Portrait" at the end.
   TAP TO BEGIN was removed from both layouts ( it is not the in-game button ).

   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-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 .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; }

/* ---- 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; }
}

/* ==========================================================================
   Portrait ( phones / tablets held upright )  — v2, 2026-11-07
   hero-fit.js adds .hero-sp when the window is taller than wide.
   Modelled on the Shadowverse WB phone page: the key visual is a band of
   artwork the width of the screen, the logo sits over its lower edge, the
   store buttons follow, then the banner carousel with the side cards peeking.
   Nothing is scaled; the page scrolls normally after the first screen.
   ========================================================================== */

.kv-stores { display: none; }

.hero.hero-sp {
  --art-h: min(128vw, 66svh);
  --col: min(100vw, 560px);
  height: auto;
  min-height: 0;
  padding: var(--hdr, 60px) 0 34px;
  background: #070508;
  overflow: hidden;
}

/* backdrop, glow and faction washes only cover the artwork band */
.hero.hero-sp .v3-bg-layer {
  inset: var(--hdr, 60px) 0 auto;
  height: calc(var(--art-h) + 8vw);
  --bg-pos-y: 30%;
  -webkit-mask: linear-gradient(#000 70%, transparent);
  mask: linear-gradient(#000 70%, transparent);
}
.hero.hero-sp:before,
.hero.hero-sp:after {
  inset: var(--hdr, 60px) 0 auto;
  height: var(--art-h);
}
.hero.hero-sp:before {
  background:
    radial-gradient(ellipse at 50% 34%, transparent 35%, rgba(6,2,4,.5) 85%),
    linear-gradient(180deg, rgba(5,2,4,.55), transparent 18%);
}
.hero.hero-sp .faction-wash {
  top: var(--hdr, 60px);
  bottom: auto;
  height: var(--art-h);
}

.hero.hero-sp .hero-stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  padding: 0;
}

/* ---- Artwork band: the eight heroes ----------------------------------- */

.hero.hero-sp .hero-flank {
  position: relative;
  inset: auto;
  width: 100%;
  height: var(--art-h);
  overflow: hidden;
}

/* fade the bottom of the band into the page so the logo can sit on it */
.hero.hero-sp .hero-flank::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, #070508 12%, rgba(7,5,8,.82) 45%, rgba(7,5,8,0));
  pointer-events: none;
}

.hero.hero-sp .hero-figure {
  display: block;
  width: auto;
  transform-origin: center bottom;
}
.hero.hero-sp .hero-figure.rank-1 { opacity: 1; }
.hero.hero-sp .hero-figure.rank-2 { opacity: .78; }
.hero.hero-sp .hero-figure.rank-3 { opacity: .6; }
.hero.hero-sp .hero-figure.rank-4 { opacity: .46; }

/* Belnoss and Victor in front, facing each other; the other three of each
   side behind them toward the edges. --y is from the band's bottom.
   ( !important: the landscape values are inline on each <img> ) */
.hero.hero-sp .hero-figure[data-hero="1000001"] { --x: -17% !important; --y: 4% !important; --h: 84% !important; --s: 1 !important; --z: 6 !important; }
.hero.hero-sp .hero-figure[data-hero="1000002"] { --x: 37% !important; --y: 4% !important; --h: 84% !important; --s: 1 !important; --z: 6 !important; }

.hero.hero-sp .hero-figure[data-hero="1000006"] { --x: -30% !important; --y: 30% !important; --h: 66% !important; --s: 1 !important; }
.hero.hero-sp .hero-figure[data-hero="1000016"] { --x: 64% !important; --y: 30% !important; --h: 66% !important; --s: 1 !important; }
.hero.hero-sp .hero-figure[data-hero="1000014"] { --x: 2% !important; --y: 32% !important; --h: 56% !important; --s: 1 !important; }
.hero.hero-sp .hero-figure[data-hero="1000009"] { --x: 41% !important; --y: 32% !important; --h: 56% !important; --s: 1 !important; }
.hero.hero-sp .hero-figure[data-hero="1000010"] { --x: -26% !important; --y: 40% !important; --h: 48% !important; --s: 1 !important; }
.hero.hero-sp .hero-figure[data-hero="1000020"] { --x: 74% !important; --y: 40% !important; --h: 48% !important; --s: 1 !important; }

/* faction emblems faint in the top corners, banners just under the header */
.hero.hero-sp .faction-crest {
  top: 2%;
  width: 30vw;
  max-width: 190px;
  opacity: .26;
  --faction-crest-x: 0px !important;
  --faction-crest-y: 0px !important;
  --faction-crest-scale: 1 !important;
}
.hero.hero-sp .faction-crest-alliance { left: -4vw; }
.hero.hero-sp .faction-crest-pact { right: -4vw; }

.hero.hero-sp .faction-label {
  display: flex;
  top: 10px;
  bottom: auto;
  z-index: 21;
  min-width: 0;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  font-size: 9px;
  letter-spacing: .12em;
  --faction-label-x: 0px !important;
  --faction-label-y: 0px !important;
  --faction-label-scale: 1 !important;
}
.hero.hero-sp .faction-label img { width: 24px; height: 24px; flex-basis: 24px; }
.hero.hero-sp .faction-label-alliance { left: 10px; }
.hero.hero-sp .faction-label-pact { right: 10px; padding: 3px 4px 3px 9px; }

/* particles / embers stay over the artwork and the logo */
.hero.hero-sp .hero-fx {
  inset: var(--hdr, 60px) 0 auto;
  height: calc(var(--art-h) + 30vw);
  -webkit-mask: linear-gradient(#000 72%, transparent);
  mask: linear-gradient(#000 72%, transparent);
}

/* ---- Logo, motto, store buttons, carousel ----------------------------- */

.hero.hero-sp .hero-center {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  margin-top: calc(var(--art-h) * -.3);
  padding: 0 16px;
  gap: 0;
  transform: none;
  justify-content: flex-start;
}

.hero.hero-sp .hero-brand-lockup {
  width: min(80vw, 440px, 52svh);
  transform: none !important;
  rotate: 0deg !important;
}

.hero.hero-sp .motto {
  width: min(92vw, 520px);
  margin: 2px 0 0;
  padding: 0;
  font-size: clamp(13px, 3.9vw, 19px);
  line-height: 1.35;
}
.hero.hero-sp .motto span { display: block; text-wrap: balance; }

.hero.hero-sp .kv-stores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(86vw, 420px);
  margin-top: 18px;
  pointer-events: auto;
}

.kv-store {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid #c99266;
  border-radius: 8px;
  background: linear-gradient(180deg, #1b1114, #0b0608);
  box-shadow: 0 0 0 2px #150709, 0 6px 18px #000a, inset 0 0 14px rgba(255,60,25,.12);
  color: var(--bone, #f2e3c8);
  text-align: center;
  text-decoration: none;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
}
.kv-store small {
  font: 600 10px/1.2 Cinzel, serif;
  letter-spacing: .06em;
  color: #cfae86;
}
.kv-store strong {
  font: 700 17px/1.15 Cinzel, serif;
  letter-spacing: .03em;
  color: #f4dfbd;
}
.kv-store:active { transform: scale(.97); }

.hero.hero-sp .trailer-shell {
  width: min(78vw, 440px);
  height: calc(min(78vw, 440px) * .56);
  margin-top: 30px;
  pointer-events: auto;
}
.hero.hero-sp .trailer-card { width: 100%; left: 0; }
.hero.hero-sp .trailer-card.is-left { transform: translate3d(-24%, 6px, -140px) rotateY(24deg) scale(.82); }
.hero.hero-sp .trailer-card.is-right { transform: translate3d(24%, 6px, -140px) rotateY(-24deg) scale(.82); }
.hero.hero-sp .trailer-label { font-size: clamp(14px, 4.4vw, 22px); }
.hero.hero-sp .play-icon { width: 42px; height: 42px; }
.hero.hero-sp .trailer-hint { right: 8px; top: 8px; font-size: 9px; }
.hero.hero-sp .trailer-arrow { width: 30px; height: 50px; font-size: 32px; }
.hero.hero-sp .trailer-arrow.prev { right: auto; left: calc(-11vw + 2px); }
.hero.hero-sp .trailer-arrow.next { left: auto; right: calc(-11vw + 2px); }
.hero.hero-sp .trailer-dots { bottom: -24px; }

/* the section after the key visual no longer needs its full top band */
.hero.hero-sp + script + .community { padding-top: 48px; }

/* ---- Landscape: store buttons under the carousel ( where TAP TO BEGIN was ) ----
   Shadowverse WB keeps its store badges in the key visual on desktop too. */
.hero.hero-fit .kv-stores {
  display: grid;
  grid-template-columns: repeat(2, 214px);
  gap: 18px;
  order: 10;
  margin: 36px 0 4px;
  pointer-events: auto;
}
.hero.hero-fit .kv-store { min-height: 60px; }
.hero.hero-fit .kv-store small { font-size: 11px; }
.hero.hero-fit .kv-store strong { font-size: 21px; }