/* ==========================================================================
   Mixed Martial Cards - Competitive Portal
   Direction: inked comic-book fight promotion, taken from the game's own key
   art. Blue corner vs red corner, crown gold, torn cloth. The signature device
   is the TORN EDGE - every full-bleed section is bounded by a ragged hem
   (see --torn-*), never a straight rule and never a plain diagonal.
   ========================================================================== */

:root {
  /* Ground - near-black with a violet cast, sampled from the cage shadow */
  --ink: #0a0810;
  --ink-stroke: #050308;
  --bruise: #1d1430;
  --bruise-2: #241a3b;

  /* Corner colours, straight off the capsule art's paint splatter */
  --corner-blue: #2f6dff;
  --corner-red: #d81f3c;

  /* The crown and the banner */
  --crown: #e8b93f;
  --velvet: #7d1228;

  /* Type */
  --bone: #f2ece4;
  --smoke: #8f88a0;

  --danger: #ff6b6b;
  --hairline: rgba(242, 236, 228, 0.12);

  /* Per-section identity. Overridden by .sec--* variants; never re-declare
     padding in those variants, only these custom properties. */
  --section-accent: var(--corner-blue);
  --section-ground: var(--ink);

  --easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Torn hems. Two variants so three stacked sections don't visibly repeat.
     Vertical values stay between 0.5% and 3.4% so the tear reads as a hem,
     not as a sawtooth. */
  --torn-a: polygon(
    0% 2.2%, 6% 0.6%, 13% 2.8%, 21% 0.9%, 29% 3.1%, 37% 1.2%, 46% 3.4%,
    55% 1.0%, 63% 3.0%, 72% 1.4%, 80% 3.3%, 88% 0.8%, 95% 2.6%, 100% 1.1%,
    100% 98.6%, 94% 100%, 86% 97.4%, 78% 99.4%, 70% 97.0%, 61% 99.2%,
    52% 96.8%, 44% 99.0%, 35% 97.2%, 27% 99.3%, 18% 97.0%, 10% 99.1%,
    4% 97.3%, 0% 99.0%
  );
  /* Flat top, torn bottom - for art that meets the page only along its lower edge. */
  --torn-hem: polygon(
    0% 0%, 100% 0%,
    100% 96.4%, 93% 100%, 86% 96.8%, 79% 99.6%, 71% 96.6%, 63% 99.4%, 55% 96.9%,
    47% 99.7%, 39% 96.5%, 31% 99.3%, 23% 96.7%, 15% 99.5%, 8% 96.6%, 0% 99.2%
  );
  --torn-b: polygon(
    0% 1.0%, 8% 3.0%, 16% 0.7%, 24% 2.9%, 33% 1.1%, 41% 3.2%, 50% 0.8%,
    58% 2.7%, 67% 1.3%, 75% 3.3%, 83% 1.0%, 91% 2.9%, 96% 0.9%, 100% 2.4%,
    100% 99.1%, 92% 97.2%, 84% 99.3%, 75% 97.0%, 66% 99.2%, 57% 97.3%,
    48% 99.4%, 39% 97.1%, 30% 99.0%, 22% 97.4%, 14% 99.2%, 7% 97.1%, 0% 98.8%
  );
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--bone);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { flex: 1; }

a { color: var(--corner-blue); text-decoration: none; }
a:hover { color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--crown);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

/* The one bold move: display titles wear the capsule wordmark's own treatment
   - bone fill inside a hard black ring - so a heading reads as lifted straight
   off the key art. paint-order puts the stroke behind the fill so the letter
   shapes stay crisp instead of being eaten from the inside. */
.display-title {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--bone);
  -webkit-text-stroke: 0.11em var(--ink-stroke);
  paint-order: stroke fill;
  text-shadow: 0 0.05em 0 rgba(0, 0, 0, 0.6);
}

.display-title--sm { font-size: clamp(2rem, 4.5vw, 3.4rem); }

.eyebrow {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  color: var(--section-accent);
  margin: 0 0 0.9rem;
  display: block;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: rgba(242, 236, 228, 0.86);
  max-width: 46ch;
  margin: 0 0 1.1rem;
}

.body-copy { color: var(--smoke); max-width: 54ch; }
.body-copy p { margin: 0 0 1rem; }

h2, h3 { font-family: "Barlow", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }

.dim { color: var(--smoke); }

/* --------------------------------------------------------------------------
   Shell - header / footer
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Three columns so the nav is centred on the viewport, not on whatever is
     left over after the brand. The empty third column is load-bearing. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.stuck {
  background: rgba(10, 8, 16, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}

.brand {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: var(--bone);
}
.brand span { color: var(--crown); }

.site-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.88rem;
}
.site-nav a { color: var(--smoke); cursor: pointer; position: relative; padding-bottom: 3px; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--crown);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--easing);
}
.site-nav a:hover { color: var(--bone); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }
.site-nav a.active { color: var(--bone); }

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 3rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  text-align: center;
  background: #07050c;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.social-links a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--smoke);
  transition: transform 0.2s var(--easing), border-color 0.2s ease, background 0.2s ease;
}
.social-links a:hover {
  transform: translateY(-3px);
  border-color: var(--crown);
  background: rgba(232, 185, 63, 0.09);
}
.social-links svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.social-links img { width: 20px; height: 20px; display: block; }

.footer-note {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--smoke);
}

/* --------------------------------------------------------------------------
   Sections - the torn-edge machinery
   -------------------------------------------------------------------------- */

.sec {
  position: relative;
  padding: clamp(4.5rem, 10vw, 9rem) 0;
  isolation: isolate;
  --section-accent: var(--corner-blue);
  --section-ground: var(--ink);
}

/* The ground is a separate clipped layer so the tear never crops the text. */
.sec__ground {
  position: absolute;
  inset: -1.5rem 0;
  z-index: -2;
  background: var(--section-ground);
  pointer-events: none;
}
.sec--torn-a > .sec__ground { clip-path: var(--torn-a); }
.sec--torn-b > .sec__ground { clip-path: var(--torn-b); }

.sec--kingslayer {
  --section-accent: var(--crown);
  --section-ground: radial-gradient(120% 100% at 20% 40%, #2a0a16 0%, #16091c 45%, var(--ink) 100%);
}
.sec--team {
  --section-accent: var(--corner-red);
  --section-ground: radial-gradient(120% 100% at 80% 40%, #2b1030 0%, var(--bruise) 40%, var(--ink) 100%);
}
/* Closing call to action - the only centred section on the page, which is what marks it as the
   end of the pitch (the sponsor band after it is a coda, not another pitch of its own). */
.sec--cta {
  --section-accent: var(--corner-blue);
  --section-ground: radial-gradient(90% 120% at 50% 100%, #101a3d 0%, #0d0a1c 55%, var(--ink) 100%);
  text-align: center;
}
.sec--cta .lede { margin-left: auto; margin-right: auto; margin-bottom: 2rem; }

.btn-steam {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  font-size: 1rem;
}
.btn-steam:hover { text-decoration: none; }
.btn-steam svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

.sec__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.sec__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Alternating alignment as the page progresses. */
.sec__split.is-art-left > .sec__art { order: -1; }

.sec__art { display: flex; justify-content: center; position: relative; }

/* --------------------------------------------------------------------------
   Art treatments - each asset used differently
   -------------------------------------------------------------------------- */

/* Capsule art: the hero IS the art. It already carries the wordmark, so the page
   adds no headline of its own - the copy simply emerges from underneath it.
   Nothing crops the image horizontally (that was clipping the logo); the only
   treatment is a single tilted gradient mask, which gives both the dissolve and
   the non-square edge the brief asks for without a hard clip anywhere. */
.hero { padding-top: 0; }
.hero__banner {
  position: relative;
  width: 100%;
  height: clamp(240px, 38vw, 540px);
  /* `top`, not a centred percentage: the wordmark starts about 3% down the source art, so ANY
     top crop clips "MIXED". Cover takes what it needs off the bottom instead, which is where the
     art dissolves anyway. */
  background: url("/img/capsule.png") center top / cover no-repeat;
  clip-path: var(--torn-hem);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
/* The dissolve is a DARKENING overlay, not an alpha mask - a mask would fade the torn hem away
   with the art. This way the art still sinks into the page and the tear stays crisp against it. */
.hero__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 8, 16, 0.8) 86%, var(--ink) 100%);
  pointer-events: none;
}
/* The header sits over the art while the page is unscrolled - this keeps the brand
   and nav legible against whatever the top of the image happens to be. */
.hero__banner::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(10, 8, 16, 0.72), transparent);
  pointer-events: none;
}
/* Cage mesh, only here - grounds the hero without becoming a page-wide tic. */
.hero__mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/cage.png") center / 480px repeat;
  opacity: 0.05;
  pointer-events: none;
}

/* No headline above it, so the welcome copy carries the section on its own. */
.hero__copy { max-width: 62ch; }
.hero__copy .lede { font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--bone); max-width: none; }

/* Broken crown: a floating object, held UNDER its native width so it cannot
   go soft. Restraint, not a blown-up hero. */
.art-crown { position: relative; }
.art-crown::before {
  content: "";
  position: absolute;
  inset: -18%;
  /* broken_crown.png is landscape (883x524), so this box is wider than tall. A forced `circle`
     sizes to the farthest corner and overshoots the shorter (vertical) axis, so the background gets
     hard-clipped flat at the box's top/bottom edges instead of fading out - the "cuts off vertically"
     look. Default `ellipse` (unset here) conforms to the box's own aspect ratio, so it always reaches
     every edge smoothly regardless of the art's proportions. */
  background: radial-gradient(rgba(125, 18, 40, 0.55) 0%, transparent 68%);
  z-index: -1;
}
.art-crown img {
  width: 100%;
  max-width: 520px;
  height: auto;
  transform: rotate(-6deg);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}

/* Banner: hangs from its staff and sways, pivoting at the crossbar. */
.art-banner { position: relative; }
.art-banner::before {
  content: "";
  position: absolute;
  inset: -14%;
  background: radial-gradient(circle, rgba(216, 31, 60, 0.28) 0%, transparent 66%);
  z-index: -1;
}
.art-banner img {
  max-height: 620px;
  width: auto;
  max-width: 100%;
  transform-origin: 50% 4%;
  animation: sway 9s ease-in-out infinite;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6));
}

@keyframes sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}

/* --------------------------------------------------------------------------
   Live inlay - the one or two real facts each home section carries
   -------------------------------------------------------------------------- */

.inlay {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1.75rem 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--hairline);
}
.stat__label {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--smoke);
  display: block;
}
.stat__value { font-weight: 600; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

button, .btn {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.92rem;
  cursor: pointer;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.7rem 1.4rem;
  transition: transform 0.18s var(--easing), border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
button:hover, .btn:hover { transform: translateY(-2px); border-color: var(--section-accent); }

button.primary, .btn.primary {
  background: var(--crown);
  border-color: var(--crown);
  color: #17110a;
}
button.primary:hover, .btn.primary:hover {
  background: #f6cd58;
  border-color: #f6cd58;
  color: #17110a;
}

button.danger { border-color: rgba(255, 107, 107, 0.4); color: var(--danger); }

/* Text link with a moving arrow - used for "Learn more". */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.95rem;
  color: var(--section-accent);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.link-more:hover { transform: none; color: var(--bone); }
.link-more .arrow { transition: transform 0.25s var(--easing); }
.link-more:hover .arrow { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Panels, tables, pills
   -------------------------------------------------------------------------- */

.card, .panel {
  position: relative;
  background: linear-gradient(180deg, rgba(36, 26, 59, 0.85), rgba(20, 14, 34, 0.85));
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.75rem;
}
/* A hairline of section colour along the top edge - the panel's only ornament. */
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--section-accent);
  opacity: 0.75;
}

/* For panels whose children own their padding (event card, stakes card). */
.panel--flush { padding: 0; overflow: hidden; }

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* Watch CTA - reuses the site's own signature (torn hem, crown gold) rather than inventing a new
   motif for what is, after all, just a link out to Twitch/YouTube. The torn strip along the top
   is the same device the throne rail uses at panel scale (see .throne::after below). */
.watch-cta {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, rgba(232, 185, 63, 0.1), rgba(20, 14, 34, 0.85));
  border: 1px solid var(--hairline);
  border-radius: 3px;
  margin-bottom: 1.75rem;
  overflow: hidden;
}
.watch-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--crown);
  opacity: 0.75;
  clip-path: var(--torn-hem);
}
.watch-cta h2 { margin: 0.35rem 0 0.4rem; }
.watch-cta .dim { max-width: 46ch; }
.watch-cta__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.1rem; }

.watch-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--bone);
  transition: transform 0.2s var(--easing), border-color 0.2s ease, background 0.2s ease;
}
.watch-link img { width: 20px; height: 20px; display: block; }
.watch-link:hover { transform: translateY(-2px); border-color: var(--crown); background: rgba(232, 185, 63, 0.09); color: var(--bone); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 420px; }
th, td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--hairline); }
th {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  color: var(--smoke);
  border-bottom-color: rgba(242, 236, 228, 0.2);
}
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(242, 236, 228, 0.04); }

/* Podium weight for the top three of a standings table. */
tr.rank-1 td { color: var(--crown); font-weight: 600; }
tr.rank-2 td { color: #cfd3dd; }
tr.rank-3 td { color: #c9a07a; }

.pill {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}
.pill.gold { background: rgba(232, 185, 63, 0.14); color: var(--crown); border: 1px solid rgba(232, 185, 63, 0.42); }
.pill.active { background: rgba(216, 31, 60, 0.16); color: #ff8593; border: 1px solid rgba(216, 31, 60, 0.5); }
.pill.muted { background: rgba(242, 236, 228, 0.07); color: var(--smoke); }

.team-tag { display: inline-flex; align-items: center; gap: 0.45rem; }
.team-tag img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* In a heading the icon has to scale with the type, or a 20px banner sits next to 50px letters
   looking like a stray favicon. em units tie it to whatever size the title resolves to. */
.display-title .team-tag { gap: 0.28em; }
.display-title .team-tag img {
  width: 0.88em;
  height: 0.88em;
  border-radius: 0.1em;
  box-shadow: 0 0.06em 0.2em rgba(0, 0, 0, 0.6);
}

.crown { height: 1em; vertical-align: -0.15em; margin-right: 0.25em; }

.page-loading {
  min-height: 60vh;
  display: grid;
  place-items: center;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.85rem;
  color: var(--smoke);
}

.error { color: var(--danger); font-size: 0.9rem; margin-top: 0.5rem; }
.hint { font-size: 0.82rem; color: var(--smoke); margin-top: 0.45rem; line-height: 1.5; }

.match {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
.match.mine { border-color: var(--crown); background: rgba(232, 185, 63, 0.07); }
.match .side.winner { font-weight: 700; color: var(--crown); }

.preview-section { margin-top: 1rem; }
.preview-section h3 {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--smoke);
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Event card - the King and the event he can be taken from, as one object
   -------------------------------------------------------------------------- */

.event-card { --section-accent: var(--crown); padding: 0; overflow: hidden; }

.event-card__body {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) 1.28fr;
  gap: 0;
}

/* The throne rail. Its right boundary is a torn hem, not a border - the same
   signature device the sections use, at panel scale. */
.throne {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(160deg, rgba(125, 18, 40, 0.55), rgba(22, 9, 28, 0.5));
}
.throne::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -1px;
  width: 12px;
  background: var(--crown);
  opacity: 0.5;
  clip-path: polygon(
    0% 0%, 60% 3%, 20% 8%, 80% 13%, 30% 19%, 70% 25%, 25% 31%, 85% 37%,
    35% 43%, 65% 49%, 20% 55%, 80% 61%, 30% 67%, 75% 73%, 25% 79%, 70% 85%,
    35% 91%, 60% 96%, 0% 100%
  );
}
.throne__king { font-size: 1.35rem; font-weight: 700; margin: 0.35rem 0 0.4rem; }
.throne--empty { background: linear-gradient(160deg, rgba(35, 26, 55, 0.6), rgba(16, 11, 26, 0.6)); }

.event-main { padding: clamp(1.5rem, 3vw, 2.25rem); }
.event-main__title { margin: 0.35rem 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.event-meta {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  color: var(--smoke);
  margin: 0 0 1rem;
}
.event-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0 0.5rem; }

.ks-review { font-size: 1.05rem; }
.modal__body { transition: opacity 0.16s ease; }
.modal__body.ks-step-fade { opacity: 0; }

/* --------------------------------------------------------------------------
   Rewards - fused into the thing they are the incentive for, never floating
   -------------------------------------------------------------------------- */

.stake-band {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(232, 185, 63, 0.3);
  background: linear-gradient(180deg, rgba(232, 185, 63, 0.07), transparent 70%);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.stake-band__title {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  color: var(--section-accent);
  margin: 0 0 1.25rem;
}
/* A rollcall, not a card grid - a bordered rectangle around one or two prizes just reads as an
   empty box wearing a picture. Nothing here is boxed: entries are separated from each other by a
   hairline only, and the art itself is torn out of its rectangle with the site's own signature
   clip-path (see --torn-hem in :root) instead of sitting in a frame, so it never looks like a
   screenshot in a box no matter what the source image's own edges look like. */
.stake-list { display: flex; flex-direction: column; gap: 1.75rem; }
.stake + .stake { padding-top: 1.75rem; border-top: 1px solid var(--hairline); }
.stake__title {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  color: var(--stake-accent, var(--crown));
  margin: 0 0 0.9rem;
}
.stake__row { display: flex; align-items: center; gap: 1.4rem; }
/* The glow lives on its own unclipped element behind the art, not as a filter on the torn image
   itself - Chromium clips filter output to an element's PRE-clip-path box, so a drop-shadow stacked
   on the same element as clip-path gets hard-cropped at the original rectangle. Exactly the
   "abrupt rectangle" cutoff this replaces. */
.stake__media-wrap {
  position: relative;
  flex: 0 0 108px;
  width: 108px;
  height: 108px;
}
.stake__media-wrap::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: radial-gradient(circle, var(--stake-accent, var(--crown)) 0%, transparent 70%);
  filter: blur(14px);
  opacity: 0.65;
}
.stake__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--torn-hem);
}
.stake__desc { flex: 1 1 auto; min-width: 0; color: var(--smoke); font-size: 0.9rem; line-height: 1.55; margin: 0; }
/* No image on this entry - the write-up alone gets the row's full width rather than sitting in a
   half-empty flex box. */
.stake__row:has(.stake__desc:only-child) .stake__desc { flex-basis: 100%; }

/* --------------------------------------------------------------------------
   Outcome block - how an archived event opens
   -------------------------------------------------------------------------- */

.outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.outcome__slot {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: rgba(10, 8, 16, 0.4);
}
.outcome__slot--king { border-color: rgba(232, 185, 63, 0.45); background: rgba(232, 185, 63, 0.07); }
.outcome__slot--slayer { border-color: rgba(216, 31, 60, 0.5); background: rgba(216, 31, 60, 0.09); }
.outcome__name { font-size: 1.5rem; font-weight: 700; margin: 0.3rem 0; line-height: 1.15; }
.outcome__slot--king .outcome__name { color: var(--crown); }
.outcome__slot--slayer .outcome__name { color: #ff6b7d; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(5, 3, 8, 0.78);
  backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease both;
}
.modal {
  position: relative;
  width: min(480px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bruise-2), #140e22);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  animation: modal-in 0.32s var(--easing) both;
}
.modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--crown);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 55%, 94% 100%, 88% 50%, 81% 96%, 74% 48%, 67% 100%,
    59% 52%, 52% 98%, 45% 46%, 38% 100%, 30% 54%, 23% 96%, 16% 50%, 9% 100%,
    3% 52%, 0% 92%
  );
}
.modal__title { margin: 0.35rem 0 1.25rem; font-size: 1.45rem; }
.modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  font-size: 1.1rem;
  letter-spacing: 0;
}

label {
  display: block;
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--smoke);
  margin: 1rem 0 0.35rem;
}
input, select, textarea {
  width: 100%;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--bone);
  background: rgba(10, 8, 16, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.65rem 0.8rem;
  transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--crown); }
input::placeholder { color: rgba(143, 136, 160, 0.7); }

/* --------------------------------------------------------------------------
   Motion - one orchestrated system
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--easing), transform 0.5s var(--easing);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

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

@media (max-width: 900px) {
  .sec__split { grid-template-columns: 1fr; }
  /* Art stops competing for space and becomes an atmospheric layer behind. */
  .sec__split.is-art-left > .sec__art { order: 0; }
  .sec__art { position: absolute; inset: 0; z-index: -1; opacity: 0.16; align-items: center; pointer-events: none; }
  .sec__art img { max-height: 100%; }
  .sec__inner { position: relative; }
  .hero__banner { height: clamp(180px, 52vw, 320px); }
  .event-card__body { grid-template-columns: 1fr; }
  .throne::after { top: auto; bottom: -1px; left: 0; right: 0; width: auto; height: 10px; clip-path: none; }
  .lede, .body-copy { max-width: none; }
}

@media (max-width: 640px) {
  .site-header { grid-template-columns: 1fr; justify-items: center; gap: 0.7rem; text-align: center; }
  .site-nav { font-size: 0.8rem; }
  .display-title { -webkit-text-stroke-width: 0.09em; }
}

/* --------------------------------------------------------------------------
   Sponsors - "Around the Octagon": logos rendered as fence plates bolted to
   the cage, echoing the eight-sided ring itself. This is the one and only
   sponsor placement on the site (see renderHome in pages.js) - there used to
   be a second, duplicate mention in the footer; that's gone. The per-
   tournament credit strip below is a separate, quieter feature that keeps
   the hairline/pill vocabulary used everywhere else.
   -------------------------------------------------------------------------- */

.sec--sponsors {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  text-align: center;
  --section-ground: radial-gradient(140% 90% at 50% 0%, #171022 0%, var(--ink) 60%);
}
.sec--sponsors .eyebrow { color: var(--crown); }
.sec--sponsors .lede { max-width: 46ch; }

/* A faint chain-link wash behind the plates - just enough to read as the cage fence, never loud
   enough to fight the logos sitting on top of it. */
.sec--sponsors .sec__inner::before {
  content: "";
  position: absolute;
  inset: -2rem -1rem auto -1rem;
  height: 320px;
  background-image:
    repeating-linear-gradient(60deg, rgba(242, 236, 228, 0.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, rgba(242, 236, 228, 0.05) 0 1px, transparent 1px 26px);
  mask-image: radial-gradient(60% 100% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 100% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

.sponsor-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 2.25rem;
}

/* Each plate is an octagon, not a rounded card - the shape is the whole point. */
.sponsor-plate {
  --plate-accent: var(--corner-blue);
  width: clamp(128px, 15vw, 156px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  background: linear-gradient(155deg, #201a2d 0%, #100b18 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--easing), border-color 0.3s ease, box-shadow 0.3s ease;
}
.sponsor-row > :nth-child(even) { --plate-accent: var(--corner-red); }

.sponsor-plate:hover {
  transform: translateY(-6px) scale(1.045);
  border-color: var(--plate-accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 26px -6px var(--plate-accent);
}

.sponsor-plate__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.25) contrast(0.9);
  opacity: 0.82;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.sponsor-plate:hover .sponsor-plate__logo { filter: none; opacity: 1; }

.sponsor-plate__name {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  color: var(--smoke);
  line-height: 1.15;
  text-align: center;
  transition: color 0.3s ease;
}
.sponsor-plate:hover .sponsor-plate__name { color: var(--bone); }

/* Per-tournament credit: a single quiet line, never its own panel. */
.sponsor-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
.sponsor-strip__label {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  color: var(--smoke);
}
.sponsor-strip__item { display: inline-flex; align-items: center; opacity: 0.85; }
.sponsor-strip__item img { height: 22px; width: auto; max-width: 90px; object-fit: contain; filter: grayscale(0.15); }