/* ==========================================================================
   The Arena — dark theme + page components, layered on styles.css
   ========================================================================== */

/* ---------- Dark theme ---------- */

.arena-page .main-wrapper {
  background-color: var(--black);
  color: var(--light-grey);
}

.arena-page ::selection {
  background: var(--white);
  color: var(--black);
}

.arena-page h1,
.arena-page h2,
.arena-page h3,
.arena-page h4,
.arena-page .number-heading,
.arena-page .statement {
  color: var(--white);
}

.arena-page .content-wrapper {
  border-left-color: var(--white-line);
}

.arena-page .content-wrapper--hero {
  border-top-color: var(--white-line);
  border-right-color: var(--white-line);
}

.arena-page .cell {
  border-top-color: var(--white-line);
  border-right-color: var(--white-line);
}

.arena-page .section-pad--bottom {
  border-top-color: var(--white-line);
}

.arena-page .button {
  border-color: var(--white-line);
}

.arena-page .cover::before {
  background-color: var(--white);
}

.arena-page .statement .cover {
  color: var(--black);
  background-color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .arena-page .statement .cover {
    color: inherit;
    background: none;
  }
}

.arena-page .accordion {
  border-right-color: var(--white-line);
}

.arena-page .accordion__top {
  border-top-color: var(--white-line);
}

.arena-page .accordion__title {
  color: var(--white);
}

.arena-page .accordion__icon svg {
  color: var(--white);
}

.arena-page .hero__logo-col,
.arena-page .hero__info-col {
  border-color: var(--white-line);
}

/* ---------- Navbar (dark) ---------- */

.navbar--arena {
  background-color: var(--black);
}

.navbar--arena .navbar__inner {
  border-color: var(--white-line);
}

.navbar--arena .navbar__logo,
.navbar--arena .navbar__link {
  color: var(--white);
}

/* ---------- Hero ---------- */

.arena-hero {
  position: relative;
  width: 100%;
  height: 70svh;
  min-height: 520px;
  overflow: hidden;
  background-color: var(--black);
}

.arena-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}

.arena-hero__panel {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--pad);
}

.arena-hero__title {
  max-width: 12ch;
  font-size: clamp(4.5rem, 9vw, 10rem);
}

.arena-hero__meta {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  color: var(--white);
}

.arena-wordmark {
  font-family: var(--font-display);
  font-size: clamp(4rem, 6vw, 7rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: var(--white);
  text-transform: uppercase;
}

.arena-hero__ctas {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

.arena-hero__ctas .button {
  width: 100%;
  min-width: 0;
}

/* ---------- Rules ---------- */

.rule {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--pad);
  flex: 25%;
  max-width: 25%;
  min-height: 20rem;
}

.rule__value {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 6vw, 7rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: var(--white);
  text-transform: uppercase;
}

.rule__label {
  color: var(--marquee-red);
}

/* ---------- Matches ---------- */

.match-grid {
  display: flex;
  flex-wrap: wrap;
  overflow: clip;
}

.match {
  display: flex;
  flex-flow: column;
  flex: 50%;
  max-width: 50%;
}

.match__media {
  position: relative;
  display: block;
  border-top: var(--border) solid var(--white-line);
  border-right: var(--border) solid var(--white-line);
  overflow: clip;
}

.match__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.match__info {
  flex: 1;
  display: flex;
  flex-flow: column;
  gap: 0.75rem;
}

.match__meta {
  color: var(--light-grey);
}

.match__teams {
  font-size: 1.5rem;
}

.match__vs {
  color: var(--marquee-red);
}

.match__links {
  display: flex;
  gap: 1.25rem;
  margin-top: auto;
}

.match__links a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--light-grey);
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}

.match__links a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ---------- Hosts ---------- */

.hosts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-content: flex-start;
}

.host {
  display: flex;
  flex-flow: column;
  gap: 0.4rem;
  padding: 1rem 1.25rem;
  border: var(--border) solid var(--white-line);
  transition: background-color var(--speed) var(--ease);
}

.host__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--white);
  text-transform: uppercase;
  transition: color var(--speed) var(--ease);
}

.host__role {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .host:hover {
    background-color: var(--white);
  }

  .host:hover .host__name {
    color: var(--black);
  }
}

/* ---------- Prizes ---------- */

.prize {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--pad);
  min-height: 18rem;
}

.prize__amount {
  font-family: var(--font-display);
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: var(--white);
  text-transform: uppercase;
}

.prize--first .prize__amount {
  color: var(--yellow);
}

/* ---------- Sponsors ---------- */

.sponsor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-content: flex-start;
}

.sponsor {
  padding: 1rem 1.25rem;
  border: var(--border) solid var(--white-line);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--light-grey);
  text-transform: uppercase;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .sponsor:hover {
    background-color: var(--white);
    color: var(--black);
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  .rule {
    min-height: 16rem;
  }
}

@media (max-width: 767px) {
  .arena-hero {
    height: 60svh;
    min-height: 420px;
  }

  .rules-row {
    flex-flow: row;
    flex-wrap: wrap;
  }

  .rule {
    flex: 50%;
    max-width: 50%;
    min-height: 12rem;
  }

  .match {
    flex: 100%;
    max-width: 100%;
  }

  .arena-hero__ctas {
    flex-flow: column;
  }

  .arena-hero__ctas .button {
    width: 100%;
    min-width: 0;
  }

  .prize {
    min-height: 12rem;
  }
}