.about-page {
  min-height: 100vh;
}

:root {
  --motion-fast: 320ms;
  --motion-normal: 620ms;
  --motion-slow: 900ms;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-flow: cubic-bezier(0.16, 1, 0.3, 1);
}


.about-main,
.about-page .site-foot {
  position: relative;
  z-index: 2;
}

.about-main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: calc(var(--nav-h) + 10vh) 0 10vh;
}

.about-hero {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 7vh 18px 9vh;
}

.about-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(280px, 58vw);
  margin-bottom: 28px;
}

.about-emblem span {
  flex: 1;
  height: 1px;
}

.about-emblem span:first-child { background: linear-gradient(90deg, transparent, var(--gold-2)); }
.about-emblem span:last-child { background: linear-gradient(90deg, var(--gold-2), transparent); }

.about-emblem i {
  width: 8px;
  height: 8px;
  background: var(--gold-2);
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(200, 170, 110, 0.75);
}

.about-kicker,
.about-card-label {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  color: var(--gold-2);
}

.about-kicker {
  margin-bottom: 18px;
  font-size: 11px;
}

.about-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--gold-3);
  text-shadow: 0 10px 42px rgba(0, 0, 0, 0.72);
}

.about-title span {
  background: linear-gradient(180deg, #f7ecd0 8%, #c8aa6e 58%, #8d6b2f 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-lead {
  max-width: 700px;
  margin-top: 28px;
  color: var(--muted);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.025em;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-card {
  position: relative;
  min-height: 310px;
  padding: clamp(30px, 4.3vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(120, 90, 40, 0.34);
  background:
    linear-gradient(145deg, rgba(17, 28, 45, 0.72), rgba(5, 9, 16, 0.76)),
    radial-gradient(circle at 90% 0%, rgba(60, 111, 174, 0.16), transparent 42%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 24px 60px rgba(0, 0, 0, 0.25);
}

.about-card::after {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(200, 170, 110, 0.07);
}

.about-card-wide {
  grid-column: 1 / -1;
  min-height: 350px;
}

.about-card-index {
  position: absolute;
  top: 18px;
  right: 24px;
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1;
  color: rgba(200, 170, 110, 0.055);
  user-select: none;
}

.about-card-label {
  margin-bottom: 18px;
  font-size: 10px;
}

.about-card h2 {
  max-width: 650px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 44px);
  line-height: 1.14;
  font-weight: 600;
  color: var(--gold-3);
}

.about-card p:not(.about-card-label) {
  max-width: 720px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.about-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12vh 20px 5vh;
}

.about-quote > p {
  max-width: 850px;
  margin: 10px 0 34px;
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 50px);
  line-height: 1.35;
  color: var(--gold-3);
}

.about-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid rgba(200, 170, 110, 0.42);
  color: var(--gold-2);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color 420ms ease,
    border-color 420ms ease,
    background 420ms ease,
    transform 520ms var(--ease-soft);
}

.about-cta:hover {
  color: var(--gold-3);
  border-color: var(--gold-2);
  background: rgba(200, 170, 110, 0.06);
  transform: translateY(-2px);
}

.about-page .site-foot {
  margin-top: 2vh;
}

.about-page .topnav {
  transform: none;
  opacity: 1;
}

@media (max-width: 720px) {
  .about-main {
    width: min(100% - 26px, 1180px);
    padding-top: calc(var(--nav-h) + 5vh);
  }

  .about-hero {
    min-height: 58vh;
    padding-inline: 8px;
  }

  .about-title {
    letter-spacing: 0.01em;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-card-wide {
    grid-column: auto;
  }

  .about-card {
    min-height: 0;
    padding: 32px 28px 36px;
  }

  .about-quote {
    padding-top: 9vh;
  }
}

/* ---------- static team cards ---------- */
.about-roster {
  padding: 2vh 0 10vh;
}

.about-section-heading {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.about-section-heading .about-kicker {
  margin-bottom: 12px;
}

.about-roster-copy {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.about-player-stage {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  align-items: start;
}

.about-player-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 170, 110, 0.34);
  background:
    linear-gradient(180deg, rgba(12, 22, 35, 0.9), rgba(5, 9, 16, 0.98)),
    radial-gradient(circle at 50% 18%, rgba(72, 116, 166, 0.16), transparent 52%);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.035);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition:
    transform var(--motion-normal) var(--ease-soft),
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease,
    opacity var(--motion-normal) ease;
}

.about-player-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 3;
  border: 1px solid rgba(200, 170, 110, 0.08);
  clip-path: inherit;
  pointer-events: none;
}

.about-player-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 170, 110, 0.72);
  box-shadow:
    0 32px 58px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(200, 170, 110, 0.06),
    inset 0 1px rgba(255, 255, 255, 0.04);
}

.about-player-portrait {
  position: relative;
  aspect-ratio: 4 / 4.9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(66, 108, 158, 0.22), transparent 45%),
    linear-gradient(180deg, #101b2a 0%, #07101a 100%);
}

.about-player-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 8, 14, 0.18) 62%, rgba(4, 8, 14, 0.94) 100%);
  pointer-events: none;
}

.about-player-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: none;
  filter: saturate(0.9) contrast(1.03);
  transition:
    transform 820ms var(--ease-soft),
    filter 700ms ease;
}

.about-player-card.has-art .about-player-art {
  display: block;
}

.about-player-card:hover .about-player-art {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.05);
}

.about-player-monogram {
  font-family: var(--font-display);
  font-size: clamp(54px, 5.4vw, 86px);
  font-weight: 700;
  line-height: 1;
  color: rgba(200, 170, 110, 0.22);
  text-shadow: 0 0 38px rgba(200, 170, 110, 0.08);
  user-select: none;
}

.about-player-monogram.has-role-icon {
  width: clamp(58px, 5vw, 82px);
  height: clamp(58px, 5vw, 82px);
  display: grid;
  place-items: center;
  opacity: 0.72;
  filter: drop-shadow(0 0 18px rgba(200, 170, 110, 0.12));
}

.about-player-role-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.94;
  filter:
    sepia(1)
    saturate(2.2)
    hue-rotate(356deg)
    brightness(1.18)
    contrast(0.96)
    drop-shadow(0 0 8px rgba(213, 173, 85, 0.12));
  transition:
    transform 550ms var(--ease-soft),
    opacity 450ms ease,
    filter 550ms ease;
}

.about-player-card:hover .about-player-role-icon {
  transform: scale(1.07);
  opacity: 1;
  filter:
    sepia(1)
    saturate(2.7)
    hue-rotate(356deg)
    brightness(1.28)
    contrast(0.98)
    drop-shadow(0 0 10px rgba(213, 173, 85, 0.26));
}

.about-player-card.has-art .about-player-monogram {
  display: none;
}

.about-player-role {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--gold-2);
}

.about-player-info {
  position: relative;
  z-index: 2;
  min-height: 138px;
  padding: 20px 15px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid rgba(120, 90, 40, 0.28);
  background: linear-gradient(180deg, rgba(6, 12, 20, 0.9), rgba(4, 8, 14, 0.98));
}

.about-player-eyebrow {
  min-height: 14px;
  margin-bottom: 8px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: rgba(160, 155, 140, 0.62);
}

.about-player-name {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 600;
  color: var(--gold-3);
  letter-spacing: 0.035em;
}

.about-player-tag {
  display: inline-block;
  margin-top: 8px;
  line-height: 1.25;
}

.about-player-error {
  margin: 28px auto 0;
  text-align: center;
  color: #d18b8b;
  font-size: 13px;
}

@media (max-width: 980px) {
  .about-player-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .about-section-heading {
    margin-bottom: 34px;
  }

  .about-player-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-player-info {
    min-height: 120px;
    padding: 17px 10px 19px;
  }
}

@media (max-width: 390px) {
  .about-player-stage {
    grid-template-columns: 1fr;
    max-width: 270px;
    margin: 0 auto;
  }
}

/* ---------- expanded champion-pool hover ---------- */
.about-player-stage {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  transition: gap 820ms var(--ease-flow);
}

.about-player-card {
  grid-column: span 2;
  z-index: 1;
  transform-origin: center top;
  will-change: transform;
  transition:
    width var(--motion-slow) var(--ease-flow),
    transform var(--motion-normal) var(--ease-soft),
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease,
    opacity var(--motion-normal) ease;
}

.about-player-card:hover {
  transform: none;
}

.about-player-stage.has-expanded-card {
  align-items: start;
  gap: clamp(14px, 1.5vw, 22px);
}

/* During the expanded state every non-active card moves to the second row. */
.about-player-stage.has-expanded-card .about-player-card {
  order: 2;
}

/* Four remaining cards occupy a centred row beneath the active card. */
.about-player-stage.has-expanded-card .about-player-card:not(.is-expanded) {
  grid-column: span 2;
}

.about-player-stage.has-expanded-card .about-player-card.is-row-start {
  grid-column: 2 / span 2;
}

/*
  The expanded card now spans the whole grid for positioning, while its actual
  width is capped by BOTH viewport width and viewport height. This keeps the
  zoom dramatic without letting the bottom of the card escape the screen.
*/
.about-player-card.is-expanded {
  order: 1 !important;
  grid-column: 1 / -1 !important;
  justify-self: center;
  width: min(
    420px,
    72vw,
    calc((100dvh - 205px) * 0.80)
  );
  min-width: 270px;
  z-index: 30;
  border-color: rgba(200, 170, 110, 0.9);
  box-shadow:
    0 44px 90px rgba(0, 0, 0, 0.62),
    0 0 48px rgba(200, 170, 110, 0.11),
    inset 0 1px rgba(255, 255, 255, 0.055);
}

/* Keep the original tall-card silhouette. */
.about-player-card.is-expanded .about-player-portrait {
  aspect-ratio: 4 / 4.9;
}

/* Information grows with the card, but is capped so the entire card fits. */
.about-player-card.is-expanded .about-player-info {
  min-height: clamp(112px, 13dvh, 150px);
  padding: clamp(18px, 2.2dvh, 28px) 22px clamp(20px, 2.5dvh, 30px);
}

.about-player-card.is-expanded .about-player-eyebrow {
  margin-bottom: 9px;
  font-size: clamp(8px, .72vw, 10px);
}

.about-player-card.is-expanded .about-player-name {
  font-size: clamp(22px, 2.2vw, 32px);
}

.about-player-card.is-expanded .about-player-tag {
  margin-top: 8px;
}

.about-player-card.has-champion-pool.is-expanded .about-player-monogram,
.about-player-card.has-champion-pool.is-expanded .about-player-art {
  opacity: 0;
  visibility: hidden;
}

.about-champion-collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: #050910;
  transition:
    opacity 720ms var(--ease-soft),
    visibility 0s linear 720ms;
}

.about-player-card.has-champion-pool.is-expanded .about-champion-collage {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 820ms var(--ease-soft) 100ms,
    visibility 0s linear 0s;
}

.about-champion-shot {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 24%, rgba(32, 49, 68, .38), transparent 52%),
    #070b11;
  isolation: isolate;
}

.about-champion-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, var(--champion-darkness, 0.35));
  pointer-events: none;
}

/*
  Each splash keeps the full artwork as its source, but every champion gets a
  dedicated focal point and scale from about-players.json. The image is larger
  than its panel and translated so the champion's face / upper body sits near
  the visual centre of that panel rather than wherever the source composition
  happens to place them.
*/
.about-champion-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--champion-focus, 50% 16%);
  display: block;
  filter: saturate(0.9) contrast(1.06);
  transform: scale(calc(var(--champion-scale, 1.00) + 0.025));
  transform-origin: var(--champion-focus, 50% 16%);
  transition:
    transform 1.15s var(--ease-flow),
    filter 850ms ease,
    opacity 850ms ease;
}

.about-player-card.is-expanded .about-champion-shot img {
  transform: scale(var(--champion-scale, 1.00));
  filter: saturate(1) contrast(1.08);
}

.about-champion-shot[data-position="left"] {
  left: 0;
  width: 35%;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}

.about-champion-shot[data-position="center"] {
  left: 33%;
  width: 34%;
  z-index: 3;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  box-shadow: -24px 0 40px rgba(0,0,0,.44), 24px 0 40px rgba(0,0,0,.44);
}

.about-champion-shot[data-position="right"] {
  right: 0;
  width: 35%;
  z-index: 1;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.about-champion-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 7, 12, 0.28), transparent 14%, transparent 86%, rgba(3, 7, 12, 0.28)),
    linear-gradient(180deg, transparent 52%, rgba(4, 8, 14, 0.08) 70%, rgba(4, 8, 14, 0.86) 100%);
}

.about-player-card.is-expanded .about-player-role {
  z-index: 8;
  bottom: 18px;
  font-size: 10px;
}

@media (max-height: 720px) and (min-width: 621px) {
  .about-player-card.is-expanded {
    width: min(330px, 64vw, calc((100dvh - 175px) * 0.79));
    min-width: 235px;
  }

  .about-player-card.is-expanded .about-player-info {
    min-height: 96px;
    padding-block: 14px 18px;
  }

  .about-player-card.is-expanded .about-player-name {
    font-size: clamp(19px, 2vw, 26px);
  }
}

@media (max-width: 980px) {
  .about-player-stage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .about-player-card {
    grid-column: span 2;
  }

  .about-player-card.is-expanded {
    grid-column: 1 / -1 !important;
    width: min(390px, 72vw, calc((100dvh - 190px) * 0.80));
  }

  .about-player-stage.has-expanded-card .about-player-card.is-row-start {
    grid-column: 1 / span 2;
  }
}

@media (max-width: 620px) {
  .about-player-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-player-card {
    grid-column: span 1;
  }

  .about-player-card.is-expanded {
    grid-column: 1 / -1 !important;
    width: min(330px, 88vw);
    min-width: 0;
  }

  .about-player-stage.has-expanded-card .about-player-card.is-row-start {
    grid-column: span 1;
  }

  .about-player-card.is-expanded .about-player-info {
    min-height: 104px;
    padding-block: 16px 20px;
  }
}

@media (max-width: 390px) {
  .about-player-stage {
    grid-template-columns: 1fr;
  }

  .about-player-card,
  .about-player-card.is-expanded,
  .about-player-stage.has-expanded-card .about-player-card.is-row-start {
    grid-column: 1 !important;
  }
}

/* Two-champion pools keep the same expanded-card treatment without inventing a third champion. */
.about-champion-collage[data-count="2"] .about-champion-shot[data-position="left"] {
  left: 0;
  width: 52%;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.about-champion-collage[data-count="2"] .about-champion-shot[data-position="center"] {
  left: auto;
  right: 0;
  width: 52%;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------- hover intent stability ---------- */
.about-player-card.has-champion-pool {
  cursor: default;
}

/* While the FLIP reflow is settling, keep the visual state calm. JavaScript
   ignores accidental cross-card hover until this short lock expires. */
.about-player-stage.is-reflowing .about-player-card {
  transition:
    width var(--motion-slow) var(--ease-flow),
    transform var(--motion-normal) var(--ease-soft),
    border-color var(--motion-normal) ease,
    box-shadow var(--motion-normal) ease,
    opacity var(--motion-normal) ease;
}

/* ---------- player profile horizontal expansion ---------- */
.about-player-core {
  position: relative;
  min-width: 0;
}

.about-player-details {
  /* Hidden profile data must not add height to the normal roster card. */
  position: absolute;
  inset: 0;
  min-width: 0;
  height: 100%;
  padding: clamp(28px, 3vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(26px);
  pointer-events: none;
  border-left: 1px solid rgba(200, 170, 110, 0.2);
  background:
    linear-gradient(145deg, rgba(12, 22, 35, 0.97), rgba(5, 9, 16, 0.985)),
    radial-gradient(circle at 12% 20%, rgba(83, 111, 255, 0.09), transparent 38%);
  transition:
    opacity 650ms var(--ease-soft),
    transform 950ms var(--ease-flow),
    visibility 0s linear 950ms;
}

.about-player-details-kicker,
.about-player-detail-block h5 {
  margin: 0;
  font-family: var(--font-ui);
  text-transform: uppercase;
  color: var(--gold-2);
}

.about-player-details-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
}

.about-player-details-name {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  color: var(--gold-3);
}

.about-player-details-rule {
  width: min(180px, 42%);
  height: 1px;
  margin: 20px 0 26px;
  background: linear-gradient(90deg, var(--gold-2), transparent);
}

.about-player-details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
}

.about-player-detail-block h5 {
  margin-bottom: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.about-player-detail-block p {
  margin: 0;
  color: rgba(220, 216, 204, 0.72);
  font-family: var(--font-ui);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.75;
}

.about-player-expand-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 50;
  width: 34px;
  height: 64px;
  padding: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  border: 1px solid rgba(200, 170, 110, 0.2);
  background: rgba(4, 8, 14, 0.48);
  color: rgba(247, 236, 208, 0.72);
  cursor: pointer;
  backdrop-filter: blur(5px);
  transform: translateY(-50%);
  transition:
    opacity 420ms ease,
    background 420ms ease,
    color 420ms ease,
    left 950ms var(--ease-flow),
    right 950ms var(--ease-flow);
}

.about-player-expand-toggle span {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transform: translateX(1px);
  transition: transform 720ms var(--ease-soft);
}

.about-player-expand-toggle:hover,
.about-player-expand-toggle:focus-visible {
  background: rgba(200, 170, 110, 0.13);
  color: var(--gold-3);
  border-color: rgba(200, 170, 110, 0.5);
  outline: none;
}

.about-player-card.is-expanded .about-player-expand-toggle {
  opacity: 0.72;
  visibility: visible;
}

.about-player-card.is-expanded .about-player-expand-toggle:hover {
  opacity: 1;
}

.about-player-card.is-details-open {
  width: min(1180px, calc(100vw - 56px));
  height: var(--profile-fixed-height);
  min-height: var(--profile-fixed-height);
  display: grid;
  grid-template-columns: var(--profile-core-width) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  transition:
    width 1.05s var(--ease-flow),
    border-color 700ms ease,
    box-shadow 700ms ease;
}

.about-player-card.is-details-open .about-player-core {
  width: var(--profile-core-width);
  height: var(--profile-fixed-height);
  min-height: 0;
  overflow: hidden;
}

.about-player-card.is-details-open .about-player-portrait {
  aspect-ratio: 4 / 4.9;
}

.about-player-card.is-details-open .about-player-info {
  min-height: 0;
}

.about-player-card.is-details-open .about-player-details {
  position: relative;
  inset: auto;
  width: 100%;
  height: var(--profile-fixed-height);
  min-height: 0;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  overflow: hidden;
  transition:
    opacity 700ms var(--ease-soft) 180ms,
    transform 950ms var(--ease-flow) 80ms,
    visibility 0s linear 0s;
}

.about-player-card.is-details-open .about-player-expand-toggle {
  left: calc(var(--profile-core-width) - 17px);
  right: auto;
  opacity: 0.9;
}

.about-player-card.is-details-open .about-player-expand-toggle span {
  transform: rotate(180deg) translateX(-1px);
}

.about-player-stage.has-details-card .about-player-card:not(.is-details-open) {
  pointer-events: none;
}

@media (max-width: 900px) {
  .about-player-card.is-details-open {
    width: min(94vw, 760px);
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
  }

  .about-player-card.is-details-open .about-player-core {
    width: 100%;
  }

  .about-player-card.is-details-open .about-player-expand-toggle {
    left: calc(38% - 17px);
  }

  .about-player-details-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 620px) {
  .about-player-expand-toggle {
    width: 30px;
    height: 54px;
  }

  .about-player-card.is-details-open {
    width: min(92vw, 520px);
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .about-player-card.is-details-open .about-player-core {
    width: 100%;
    height: auto;
  }

  .about-player-card.is-details-open .about-player-details {
    padding: 26px 22px 30px;
    border-left: 0;
    border-top: 1px solid rgba(200, 170, 110, 0.2);
  }

  .about-player-card.is-details-open .about-player-expand-toggle {
    left: auto;
    right: 8px;
    top: calc(var(--profile-fixed-height) * 0.42);
  }
}

/* =========================================================
   ABOUT STORY
   ========================================================= */

.about-story {
  width: min(1180px, calc(100% - 48px));
  margin: 72px auto 0;
}

.about-story-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
  transform: translateY(-30px);
}

.about-story-heading span {
  width: 110px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 165, 90, 0.7)
  );
}

.about-story-heading span:last-child {
  background: linear-gradient(
    90deg,
    rgba(201, 165, 90, 0.7),
    transparent
  );
}

.about-story-heading p {
  margin: 0;
  color: #c9a55a;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}

/* THREE COLUMNS */

.about-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-story-item {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 245px;
  padding: 0 42px;
}

.about-story-item:not(:last-child) {
  border-right: 1px solid rgba(201, 165, 90, 0.32);
}

/* Keep old markup harmless if the 01 / 02 / 03 spans are still in about.html. */
.about-story-index {
  display: none !important;
}

.about-story-content {
  padding-top: 0;
}

.about-story-content h2 {
  margin: 0;
  color: #eee7d8;
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.about-story-accent {
  position: relative;
  width: 38px;
  height: 1px;
  margin: 16px 0 18px;
  background: rgba(201, 165, 90, 0.75);
}

.about-story-accent::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: #c9a55a;
  transform: translate(-50%, -50%) rotate(45deg);
}

.about-story-content p {
  max-width: 310px;
  margin: 0;
  color: rgba(222, 216, 202, 0.68);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

/* =========================================================
   STATS BAR
   ========================================================= */

.about-stats {
  position: relative;
  isolation: isolate;
  width: min(1180px, calc(100% - 48px));
  min-height: 112px;
  margin: 42px auto 96px;
  padding: 20px 56px;

  display: grid;
  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1.35fr;
  align-items: center;

  border: 1px solid rgba(201, 165, 90, 0.68);
  background: rgba(5, 9, 16, 0.22);

  clip-path: polygon(
    14px 0,
    calc(100% - 14px) 0,
    100% 14px,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    14px 100%,
    0 calc(100% - 14px),
    0 14px
  );

  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.16),
    0 0 24px rgba(0, 0, 0, 0.12);
}

/* Inner frame, matching the reference without the old skewed side-lines. */
.about-stats::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  pointer-events: none;

  border: 1px solid rgba(201, 165, 90, 0.16);

  clip-path: polygon(
    9px 0,
    calc(100% - 9px) 0,
    100% 9px,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    9px 100%,
    0 calc(100% - 9px),
    0 9px
  );
}

/* Bottom ornament: line — diamond — line. No extra HTML needed. */
.about-stats::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 280px;
  height: 12px;
  transform: translateX(-50%);
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0,
      rgba(201, 165, 90, 0.52) 40%,
      transparent 40%
    ) left center / 46% 1px no-repeat,
    linear-gradient(
      90deg,
      transparent 0,
      rgba(201, 165, 90, 0.52) 60%,
      transparent 60%
    ) right center / 46% 1px no-repeat,
    linear-gradient(45deg, #d5ad55 0 50%, transparent 50% 100%) center / 7px 7px no-repeat;

  filter: drop-shadow(0 0 5px rgba(213, 173, 85, 0.35));
}

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.about-stat strong {
  color: #d5ad55;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 0 18px rgba(201, 165, 90, 0.08);
}

.about-stat span {
  color: #c9a55a;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.about-stat-rank strong {
  font-size: 25px;
}

.about-stat-divider {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  margin: 0 30px;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(201, 165, 90, 0.18) 15%,
    rgba(201, 165, 90, 0.62) 50%,
    rgba(201, 165, 90, 0.18) 85%,
    transparent 100%
  );
}

.about-stat-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #d5ad55;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(213, 173, 85, 0.35);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .about-story {
    margin-top: 58px;
  }

  .about-story-heading {
    transform: translateY(-18px);
  }

  .about-story-grid {
    grid-template-columns: 1fr;
  }

  .about-story-item {
    min-height: 0;
    padding: 30px 0;
  }

  .about-story-item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(201, 165, 90, 0.22);
  }

  .about-story-content p {
    max-width: 650px;
  }

  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 10px;
    padding: 30px 34px;
  }

  .about-stat-divider {
    display: none;
  }
}

@media (max-width: 520px) {
  .about-story {
    width: calc(100% - 28px);
  }

  .about-story-heading {
    gap: 10px;
    transform: translateY(-14px);
  }

  .about-story-heading span {
    width: 44px;
  }

  .about-story-heading p {
    font-size: 10px;
  }

  .about-story-item {
    padding: 26px 0;
  }

  .about-stats {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    margin-top: 30px;
    margin-bottom: 82px;
    padding: 28px 22px;
  }

  .about-stat {
    padding: 10px 0;
  }

  .about-stat-rank strong {
    font-size: 23px;
  }

  .about-stats::after {
    width: 190px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .about-player-card,
  .about-player-art,
  .about-player-role-icon,
  .about-champion-collage,
  .about-champion-shot img,
  .about-player-details,
  .about-player-expand-toggle,
  .about-player-expand-toggle span,
  .about-cta {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   ABOUT PAGE NAVIGATION
   ========================================================= */

.about-topnav {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  width: 100%;
  height: 72px;

  padding: 0 44px;
}

/* LEFT */

.about-nav-left {
  grid-column: 1;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 42px;
}


/* CENTER LOGO */

.about-nav-brand {
  position: absolute;
  left: 50%;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);

  text-decoration: none;
}

.about-nav-logo {
  display: block;

  width: 58px;
  height: 58px;

  object-fit: contain;

  transition:
    transform 500ms var(--ease-soft),
    filter 500ms ease;
}

.about-nav-brand:hover .about-nav-logo {
  transform: scale(1.07);

  filter:
    brightness(1.1)
    drop-shadow(0 0 10px rgba(201, 165, 90, 0.18));
}

/* RIGHT */

.about-nav-right {
  grid-column: 3;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 34px;
}

/* LOGIN */

.about-login-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 105px;
  height: 38px;

  padding: 0 22px;

  border: 1px solid rgba(201, 165, 90, 0.55);

  color: var(--gold-2);
  background: transparent;

  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;

  overflow: hidden;

  transition:
    color 350ms ease,
    border-color 350ms ease,
    background-color 350ms ease,
    box-shadow 450ms ease,
    transform 450ms var(--ease-soft);
}

.about-login-btn:hover {
  color: var(--gold-3);

  border-color: rgba(201, 165, 90, 0.95);

  background: rgba(201, 165, 90, 0.06);

  box-shadow:
    0 0 20px rgba(201, 165, 90, 0.08),
    inset 0 0 18px rgba(201, 165, 90, 0.025);

  transform: translateY(-1px);
}

/* tiny gold sweep */

.about-login-btn::before {
  content: "";

  position: absolute;
  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 225, 150, 0.09),
    transparent
  );

  transform: skewX(-18deg);

  transition: left 700ms var(--ease-soft);

  pointer-events: none;
}

.about-login-btn:hover::before {
  left: 150%;
}


/* HGG shared atmosphere: Home-equivalent local hero spotlight */
.about-hero {
  position: relative;
  isolation: isolate;
}

.about-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 90vw;
  height: 78vh;
  transform: translateX(-50%);
  background: radial-gradient(
    46% 52% at 50% 34%,
    rgba(110, 165, 230, 0.11),
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
}