/* Equal columns and a shared footer keep the hero aligned for every game. */
.lineup-hero-inner {
  --hero-column-content: 420px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 480px 40px;
  grid-template-areas: "copy art" "controls feature";
  gap: 18px 56px;
  align-items: center;
  min-height: 0;
  padding-block: 24px 32px;
}
.lineup-hero-copy {
  grid-area: copy;
  width: 100%;
  max-width: var(--hero-column-content);
  min-width: 0;
  margin: 0;
  padding: 0;
  justify-self: center;
}
.lineup-hero-copy h1 {
  font-size: 118px;
  letter-spacing: -5px;
  line-height: 1.05;
  margin: 0;
  text-align: left;
}
.lineup-eyebrow { margin: 0 0 24px; }
.lineup-hero-description { margin: 28px 0 0; max-width: 100%; font-size: 14px; line-height: 1.9; }
.lineup-hero-copy .hero-actions { flex-direction: row; align-items: center; justify-content: flex-start; gap: 28px; margin-top: 30px; }
.lineup-hero-art {
  grid-area: art;
  position: relative;
  inset: auto;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(#000 80%, transparent 100%);
}
.focus-emblem {
  width: 82%;
  height: auto;
  top: 30px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  opacity: .07;
}
.emblem-coordinate { top: 24px; right: 8px; }
.lineup-hero-art #hero-character {
  position: absolute;
  width: var(--portrait-width, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  inset: var(--portrait-top, 8px) auto auto var(--portrait-left, 50%);
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center top;
  filter: none;
  mask-image: none;
}
/* Optical offsets account for the silhouette, while the stage stays fixed. */
.lineup-hero-art[data-game="albion-online"] #hero-character { --portrait-width: 98%; }
.lineup-hero-art[data-game="the-isle"] {
  mask-image: linear-gradient(#000 80%, transparent 100%), linear-gradient(90deg, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.lineup-hero-art[data-game="the-isle"] #hero-character { --portrait-width: 176%; --portrait-left: 88%; --portrait-top: 24px; }
.lineup-hero-art[data-game="hunt-showdown"] #hero-character { --portrait-width: 91%; --portrait-left: 52%; }
.lineup-hero-art[data-game="hell-let-loose-vietnam"] #hero-character { --portrait-width: 92%; }
.lineup-hero-art[data-game="sea-of-thieves"] #hero-character { --portrait-width: 90%; --portrait-left: 53%; }
.lineup-hero-art[data-game="arma-reforger"] #hero-character { --portrait-width: 98%; --portrait-left: 59%; }
.lineup-hero-art[data-game="unturned"] #hero-character { --portrait-width: 98%; }
.lineup-hero-art[data-game="bodycam"] #hero-character { --portrait-width: 100%; --portrait-top: 4px; }
.lineup-hero-art[data-game="dayz"] #hero-character { --portrait-width: 105%; --portrait-left: 54%; }
.lineup-hero-art[data-game="roblox"] #hero-character { --portrait-width: 94%; --portrait-left: 50%; --portrait-top: 8px; }
.lineup-hero-art[data-game="squad"] #hero-character { --portrait-width: 104%; --portrait-left: 47%; --portrait-top: 8px; }
.lineup-character-shade { display: none; }
.hero-cycle-controls,
.hero-feature-label {
  position: static;
  width: 100%;
  max-width: var(--hero-column-content);
  min-width: 0;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  justify-self: center;
  align-items: center;
}
.hero-cycle-controls { grid-area: controls; justify-content: space-between; font-size: 11px; }
.hero-cycle-buttons { gap: 16px; }
.hero-cycle-buttons button { width: 36px; height: 36px; }
#hero-game-count { font-size: 10px; }
.hero-feature-label { grid-area: feature; display: flex; gap: 14px; border-left: 0; }
.hero-feature-label .feature-index { font-size: 26px; line-height: 1; }
.hero-feature-label strong { font-size: 15px; }
.hero-feature-label > .icon { display: block; width: 18px; height: 18px; margin-left: auto; }
.hero-game-choice > img { object-fit: cover; }
@media (min-width: 901px) and (max-width: 1190px) {
  .lineup-hero-inner { --hero-column-content: 360px; grid-template-rows: 440px 40px; column-gap: 40px; }
  .lineup-hero-copy h1 { font-size: 100px; letter-spacing: -4px; }
  .lineup-hero-description { font-size: 13px; }
  .lineup-hero-copy .hero-actions { gap: 22px; }
  .lineup-hero-art[data-game="the-isle"] #hero-character { --portrait-top: 42px; }
}
@media (max-width: 900px) {
  .lineup-hero-inner {
    --hero-column-content: 420px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "art" "feature" "copy" "controls";
    gap: 0;
    padding-block: 20px 28px;
  }
  .lineup-hero-art { width: 100%; max-width: 500px; height: 390px; justify-self: center; }
  .focus-emblem { width: 82%; top: 26px; }
  .emblem-coordinate { top: 22px; right: 8px; }
  .hero-feature-label { height: 42px; min-height: 42px; padding-inline: 12px; margin-top: 8px; }
  .hero-feature-label .feature-index { font-size: 21px; }
  .hero-feature-label strong { font-size: 14px; }
  .lineup-hero-copy { padding: 30px 0 0; text-align: center; }
  .lineup-eyebrow { justify-content: center; margin-bottom: 16px; }
  .lineup-hero-copy h1 { font-size: 100px; letter-spacing: -4px; text-align: center; }
  .lineup-hero-description { margin-top: 20px; font-size: 13px; line-height: 1.85; }
  .lineup-hero-copy .hero-actions { justify-content: center; flex-direction: row; gap: 24px; margin-top: 24px; }
  .hero-cycle-controls { margin-top: 28px; padding-inline: 12px; }
}
@media (max-width: 600px) {
  .lineup-hero-inner { padding-block: 16px 24px; }
  .lineup-hero-art { height: clamp(274px, 82vw, 390px); }
  .lineup-hero-copy { padding-top: 24px; }
  .lineup-hero-copy h1 { font-size: clamp(76px, 22vw, 100px); letter-spacing: -3px; }
  .lineup-hero-description { font-size: 12px; margin-top: 18px; }
  .lineup-hero-copy .hero-actions { gap: 22px; margin-top: 24px; }
  .lineup-hero-copy .button-primary { min-height: 46px; padding-inline: 20px; gap: 22px; }
  .hero-cycle-controls { margin-top: 26px; font-size: 10px; }
  .hero-feature-label strong { font-size: 13px; }
}
@media (max-width: 350px) {
  .lineup-hero-copy .hero-actions { gap: 18px; }
  .lineup-hero-description { font-size: 11px; }
  .hero-feature-label, .hero-cycle-controls { padding-inline: 6px; }
  .hero-cycle-buttons { gap: 12px; }
  .hero-game-choice { padding-inline: 6px; gap: 7px; }
  .hero-game-choice > img { width: 29px; height: 32px; }
}