/* ===================================================================
   Tournaments page.

   Scoped to .tr- so nothing leaks onto the other twenty pages.

   The four supplied backgrounds are each used only in their assigned
   section, at their own proportions — none is stretched, and none has
   an effect painted onto it. Effects sit in their own layers above.
   =================================================================== */

:root {
  --tr-ease: cubic-bezier(0.16, 0.84, 0.32, 1);
  --tr-enter: 560ms;
}

/* ------------------------- shared pieces -------------------------- */
/* Small technical lettering, as in the approved blueprint annotations. */
.tr-blueprint,
.tr-stage-wall, .tr-org-wall, .tr-closing-wall, .tr-stub-foot, .tr-reward-foot {
  font-family: var(--body);
  font-size: clamp(9.5px, 0.72vw, 11px);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

.tr-rule { display: flex; align-items: center; gap: 14px; }
.tr-rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  max-width: 120px;
  background: linear-gradient(90deg, rgba(0, 98, 255, 0.5), transparent);
}

/* ============================ 1 — HERO ============================ */
.tr-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  height: 92svh;
  max-height: 900px;
  overflow: hidden;
  isolation: isolate;
  background: #02101f;
  color: #fff;
}
.tr-hero-art { position: absolute; inset: 0; z-index: 0; }
.tr-hero-art img {
  width: 100%; height: 100%;
  /* cover keeps the supplied proportions and never stretches. The
     focal point keeps the batsman and the bat inside the frame. */
  object-fit: cover;
  object-position: 68% 42%;
  will-change: transform;
}
.tr-hero-shade {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(2, 13, 26, 0.94) 4%, rgba(2, 13, 26, 0.72) 34%, rgba(2, 13, 26, 0.12) 64%),
    linear-gradient(0deg, rgba(2, 13, 26, 0.55), transparent 40%);
}
.tr-hero-copy {
  position: relative; z-index: 3;
  width: min(720px, 52%);
  padding: 118px var(--pad-x) 40px;
}
/* The approved hero sets the headline in caps, large and tight. */
.tr-h1 {
  text-transform: uppercase;
  font-size:var(--ds-hero);
  line-height:1.05;
  letter-spacing:0;
}
.tr-hero-lede { font-size: var(--text-body); color: #d7e4ee; max-width: 46ch; margin: 20px 0 0; }

.tr-marks { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 26px 0 0; padding: 0; list-style: none; }
.tr-marks li { display: flex; align-items: center; gap: 10px; font-size: var(--text-meta); color: #cfe0f3; }
.tr-marks .icon { color: var(--cyan); width: 21px; height: 21px; }

/* The handwritten line from the approved hero. */
.tr-script {
  margin: 30px 0 0;
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.45;
  color: #9dcaea;
}
.tr-script::after {
  content: "";
  display: block;
  width: 118px; height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

@media (max-width: 1000px) {
  .tr-hero { height: auto; max-height: none; min-height: 0; }
  .tr-hero-copy { width: 100%; padding-top: 106px; padding-bottom: 48px; }
  /* Text above imagery on a phone: the gradient lifts off the top of
     the frame so the batsman stays visible beneath the copy. */
  .tr-hero-shade {
    background: linear-gradient(0deg, rgba(2, 13, 26, 0.96) 0%, rgba(2, 13, 26, 0.88) 40%, rgba(2, 13, 26, 0.34) 74%, rgba(2, 13, 26, 0.16) 100%);
  }
  .tr-hero-art img { object-position: 64% 32%; }
  .tr-marks { gap: 10px 22px; }
}

/* ========================= 2 — QUICK PLAY ========================= */
.tr-quick-grid {
  display: grid;
  /* The ticket carries this section in the approved design, so it gets
     the larger share rather than sitting beside the copy as an aside. */
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
  position: relative;
}
.tr-quick-grid h2 { font-size:var(--ds-title); }
.tr-ticket-tag {
  position: absolute;
  right: 0; top: -34px;
  margin: 0;
  font-family: var(--body);
  font-size: clamp(9.5px, 0.72vw, 11px);
  font-weight: 700; letter-spacing: 0.22em; line-height: 1.6;
  text-transform: uppercase;
  text-align: right;
  color: #91aac0;
}
@media (max-width: 1000px) { .tr-ticket-tag { display: none; } }
@media (max-width: 1000px) { .tr-quick-grid { grid-template-columns: 1fr; } }

/* ---- the ticket: CSS and SVG, no illustration ---- */
.tr-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(110px, 13vw, 176px);
  color: #e7f0ff;
  filter: drop-shadow(0 28px 44px rgba(4, 22, 44, 0.32));
  transform-style: preserve-3d;
  transition: transform 420ms var(--tr-ease);
}
.tr-ticket-main,
.tr-ticket-stub {
  background: linear-gradient(150deg, #082b4b, #00142c 70%);
  border: 1px solid rgba(25, 200, 255, 0.28);
}
.tr-ticket-main { border-radius: 14px 0 0 14px; border-right: 0; padding: clamp(20px, 2.3vw, 34px); }
.tr-ticket-stub {
  border-radius: 0 14px 14px 0;
  border-left: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 14px 10px;
  text-align: center;
  position: relative;
}
/* The perforation. A dashed rule plus the two notches that make a
   ticket read as a ticket. */
.tr-ticket-stub::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  border-left: 2px dashed rgba(25, 200, 255, 0.45);
}
.tr-ticket-stub::after {
  content: "";
  position: absolute;
  left: -9px; top: -9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 calc(100% + 0px) 0 0 var(--white);
}

.tr-ticket-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(25, 200, 255, 0.22);
}
.tr-ticket-brand {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.tr-ticket-meta { margin: 0; display: flex; gap: 14px; }
.tr-ticket-meta span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #94bedc;
  padding-left: 14px; border-left: 1px solid rgba(143, 184, 218, 0.4);
}
.tr-ticket-meta span:first-child { border-left: 0; padding-left: 0; }

.tr-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tr-steps-gap);
  margin: 20px 0 0;
  padding: 0;
  list-style: none;

  /* The connectors below are measured from these, so the number's
     size, the gap it needs and the grid gap all live in one place. */
  --tr-steps-gap: 10px;
  --tr-n-size: clamp(24px, 2.6vw, 40px);
  /* Two digits of Barlow Condensed at --tr-n-size. "01" is narrower
     than "02"/"03", so this takes the wider one and the connector
     starts clear of all three. */
  --tr-n-w: calc(var(--tr-n-size) * 0.95);
  --tr-n-clear: 14px;
}
.tr-step { position: relative; display: grid; justify-items: start; gap: 4px; }
.tr-step-n {
  font-family: var(--display);
  font-size: var(--tr-n-size);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.tr-step-icon { color: var(--cyan); }
.tr-step-icon .icon { width: clamp(26px, 2.4vw, 34px); height: clamp(26px, 2.4vw, 34px); }
.tr-step-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #cfe0f3; line-height: 1.35;
}
/* The connectors draw in sequence: 01 to 02, then 02 to 03.

   One connector per step, anchored to that step's own column, rather
   than a single bar laid across the whole row. The bar was an SVG at
   `inset: 22px 12% auto 12%` carrying a fixed gap at 140-160 of a 300
   unit viewBox — the middle of the row. But the numbers sit at the
   START of each column, not in the middle, so at 1440 the blank ran
   207-227 while "02" occupied 188-222 and the line was drawn straight
   through the digits.

   Measured from the grid, each connector leaves the same clearance
   either side whatever the width, and there is no coordinate to keep
   in step with the layout. */
.tr-step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* The number's own middle: line-height is 1, so half its size. */
  top: calc(var(--tr-n-size) / 2);
  left: calc(var(--tr-n-w) + var(--tr-n-clear));
  /* Reach into the grid gap to stop short of the NEXT number. */
  right: calc(var(--tr-n-clear) - var(--tr-steps-gap));
  height: 2px;
  background: var(--cyan);
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: left center;
}
[data-ticket].is-running .tr-step:not(:last-child)::after {
  animation: tr-draw 620ms var(--tr-ease) forwards;
  /* --i is on the <li>: 0, then 1. The second segment starts as the
     first is arriving, so the line reads as one travelling stroke. */
  animation-delay: calc(var(--i, 0) * 340ms);
}
@keyframes tr-draw { to { transform: scaleX(1); } }

.tr-ticket-note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(143, 184, 218, 0.34);
  font-size: 13px; color: #b4cce6; text-align: center;
}
.tr-ticket-checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; padding: 0; list-style: none; }
.tr-ticket-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfe0f3; }
.tr-ticket-checks .icon { width: 17px; height: 17px; color: var(--cyan); }

.tr-stub-n {
  font-family: var(--display);
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 800; line-height: 0.88; color: #fff;
}
.tr-stub-label {
  font-family: var(--display);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: #fff;
}
.tr-stub-foot { margin-top: 10px; color: #7cafd5; letter-spacing: 0.16em; }
.tr-stub-label + .tr-stub-foot::before {
  content: ""; display: block; width: 34px; height: 1px;
  margin: 0 auto 10px; background: var(--cyan);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tr-ticket:hover { transform: perspective(1200px) rotateX(1.4deg) rotateY(-2deg) translateY(-3px); }
}
@media (max-width: 560px) {
  .tr-ticket { grid-template-columns: 1fr; }
  .tr-ticket-main { border-radius: 14px 14px 0 0; border-right: 1px solid rgba(25, 200, 255, 0.28); border-bottom: 0; }
  .tr-ticket-stub { border-radius: 0 0 14px 14px; border-left: 1px solid rgba(25, 200, 255, 0.28); border-top: 0; grid-auto-flow: column; padding: 12px; }
  .tr-ticket-stub::before { left: 10px; right: 10px; top: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(25, 200, 255, 0.45); }
  .tr-ticket-stub::after { display: none; }
  .tr-stub-foot { margin-top: 0; }
  .tr-stub-label + .tr-stub-foot::before { display: none; }
  .tr-steps { grid-template-columns: 1fr; }
  .tr-step { grid-auto-flow: column; justify-items: center; align-items: center; gap: 12px; grid-template-columns: auto auto 1fr; }
  /* Stacked one per row: there is no horizontal run to connect. */
  .tr-step:not(:last-child)::after { display: none; }
}

/* ---- blueprint annotations ---- */
.tr-blueprint {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(18px, 2.4vw, 32px);
  padding-top: 14px;
  border-top: 1px solid rgba(0, 98, 255, 0.14);
  color: #91aac0;
}
.tr-blueprint span:nth-child(2) { text-align: center; }
.tr-blueprint span:nth-child(3) { text-align: right; }
@media (max-width: 760px) { .tr-blueprint { display: none; } }

/* ---- the reward strip ---- */
.tr-reward {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin-top: clamp(18px, 2.4vw, 30px);
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 32px);
  border-radius: 12px;
  background: linear-gradient(100deg, #002c64, #064db1 58%, #003375);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tr-reward-mark {
  display: grid; place-items: center;
  width: 54px; height: 54px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.tr-reward-mark .icon { width: 26px; height: 26px; color: #fff; }
.tr-reward > div { flex: 1 1 auto; min-width: 0; padding-left: clamp(14px, 2vw, 26px); border-left: 1px solid rgba(255, 255, 255, 0.28); }
.tr-reward-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 33px);
  font-weight: 700;
}
.tr-reward-title em { font-style: normal; color: #7fe4ff; }
.tr-reward-sub { margin: 4px 0 0; font-size: var(--text-small); color: #cfe0f3; }
.tr-reward-foot { flex: 0 0 auto; color: #a5c1e6; text-align: right; }
/* A brief highlight sweep when the strip arrives. */
.tr-reward::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.22), transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
[data-reward].is-running::after { animation: tr-sweep 1.1s var(--tr-ease) 240ms 1; }
@keyframes tr-sweep { to { transform: translateX(110%); } }
@media (max-width: 760px) {
  .tr-reward { flex-wrap: wrap; }
  .tr-reward > div { border-left: 0; padding-left: 0; }
  .tr-reward-foot { display: none; }
}

/* ========================== 3 — THE CUPS ==========================
   The stage IS the section. Its box carries the background's own
   aspect ratio, and the copy, the cups and the level cards are all
   positioned inside that same percentage space — so the cups stand on
   their platforms and each card sits under its own cup at any width.

   Nothing here crops the background: bounding is done by capping the
   width, never by changing the ratio. */
.tr-cups { background: #03182b; padding: 0; }

.tr-stage {
  position: relative;
  aspect-ratio: 1810 / 869;
  /* Full width, and it only gives width back when its own height would
     otherwise run past one screen. 2.0828 is 1810/869, so the cap lands
     at exactly one viewport tall and never a pixel narrower — the stage
     is never shrunk to fit a rule that was not binding. Centred, so a
     capped stage reads as a deliberate letterbox rather than a
     left-aligned accident. */
  width: min(100%, calc(100svh * 2.0828));
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
}
/* The frame holds the background and the cups together, so they can
   never separate — whatever the surrounding layout does, a cup stays
   on its platform. */
.tr-stage-frame { position: absolute; inset: 0; z-index: 0; }
.tr-stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Darkens the left third so the copy reads over the image without
   touching the image itself. */
.tr-stage-veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(4, 22, 44, 0.92) 2%, rgba(4, 22, 44, 0.66) 26%, rgba(4, 22, 44, 0.06) 52%);
}

.tr-cups-copy {
  position: absolute;
  z-index: 3;
  left: var(--pad-x);
  top: clamp(24px, 5%, 64px);
  width: min(430px, 34%);
}
.tr-cups-copy h2 { font-size:var(--ds-title); }
.tr-cups-copy p { font-size:var(--ds-copy); line-height:1.55; color: #cfe0f3; margin: 12px 0; }
.tr-cups-copy .note { font-size: clamp(12.5px, 0.95vw, 15px); }

/* The cups. Base meets the platform top; stature is a transform so it
   never feeds back into layout. */
.tr-cup {
  position: absolute;
  z-index: 2;
  left: var(--cx);
  top: var(--top);
  /* 14.5% is the largest the tallest cup can be without its top
     leaving the frame: its box is 3.12x its width in frame-height
     terms, and the Lords platform leaves 41% of headroom above it.
     Bigger than this and the trophy gets cut, which is what happened
     at 22%. --foot lifts the transparent margin under each trophy so
     it stands on the plinth rather than hovering over it. */
  width: 14.5%;
  transform: translate(-50%, calc(-100% + var(--foot, 0%))) scale(var(--scale));
  transform-origin: 50% 100%;
  transition: transform 700ms var(--tr-ease);
  will-change: transform;
}
.tr-cup img { width: 100%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)); }
/* The glow is its own layer, never painted onto the background. */
.tr-cup::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4%;
  width: 155%; height: 24%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(25, 200, 255, 0.6), transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  [data-stage].is-running .tr-cup::after { animation: tr-glow 3.6s ease-in-out infinite; }
  [data-stage].is-running .tr-cup[data-cup="1"]::after { animation-delay: 0.4s; }
  [data-stage].is-running .tr-cup[data-cup="2"]::after { animation-delay: 0.8s; }
  [data-stage].is-running .tr-cup[data-cup="3"]::after { animation-delay: 1.2s; }
  @keyframes tr-glow { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.95; } }
}

.tr-stage-wall {
  position: absolute; right: 2%; top: 20%;
  z-index: 3;
  text-align: left;
  color: rgba(66, 160, 235, 0.72);
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  /* The Lords cup's right edge sits at 90.45% of the stage (cx 83.2%
     plus half of the 14.5% cup), and this block is pinned 2% off the
     right edge — so it has 7.5% of the stage width to live in. At
     2.5vw it was 134px wide in a 109px gap and overlapped the trophy
     by 23px at every width, because both are proportional to the
     stage. 1.95vw fits the gap with about 7px to spare, at 1280,
     1482 and 1920 alike. */
  font-size: clamp(13px, 1.95vw, 36px);
  line-height: 0.95;
}

/* Level cards: each centred under its own cup, in the same space. */
.tr-levels {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: 30%;
  margin: 0; padding: 0; list-style: none;
}
.tr-level {
  position: absolute;
  bottom: 4%;
  left: var(--cx);
  width: 20%;
  transform: translateX(-50%);
  padding: clamp(8px, 1vw, 14px) clamp(9px, 1.1vw, 16px);
  border-top: 2px solid rgba(25, 200, 255, 0.6);
  background: linear-gradient(180deg, rgba(7, 32, 60, 0.9), rgba(4, 20, 40, 0.82));
  backdrop-filter: blur(3px);
  border-radius: 0 0 8px 8px;
}
.tr-level-eyebrow {
  margin: 0 0 3px;
  font-family:var(--ds-ui);
  font-size:var(--ds-eyebrow); font-weight:600; letter-spacing:.14em;
  text-transform: uppercase; color: var(--cyan);
}
.tr-level h3 { font-size:var(--ds-card)!important; margin-bottom: 3px; }
.tr-level p { margin: 0; font-size:var(--ds-copy); color: #cfe0f3; line-height:1.55; }
.tr-level-req {
  margin-top: 6px !important;
  padding-top: 5px;
  border-top: 1px solid rgba(120, 175, 225, 0.25);
  color: #a2bfda !important;
}

/* Below 900px the stage would be too short to hold overlaid copy, so
   the section stacks: copy, then the stage, then the cards in a grid.
   The stage keeps its aspect ratio, so the cups stay on the platforms. */
@media (max-width: 900px) {
  /* The frame keeps its ratio here too, so the desktop figure holds. */
  .tr-cup { width: 14.5%; }
  .tr-cups { padding: clamp(32px, 5svh, 56px) 0 clamp(26px, 4svh, 44px); }
  .tr-stage { aspect-ratio: auto; display: grid; gap: 14px; }
  /* The frame comes into flow, keeping its aspect ratio; the cups are
     absolute inside it, so the alignment is untouched. */
  .tr-stage-frame { position: relative; aspect-ratio: 1810 / 869; grid-row: 2; }
  .tr-stage-veil { display: none; }
  .tr-cups-copy { position: static; width: auto; padding-inline: var(--pad-x); grid-row: 1; }
  .tr-stage-wall { display: none; }
  .tr-levels {
    position: static;
    grid-row: 3;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-inline: var(--pad-x);
  }
  .tr-level { position: static; width: auto; transform: none; border-radius: 8px; }
}
@media (max-width: 560px) { .tr-levels { grid-template-columns: 1fr; } }

/* ===================== 4 — HOW A TOURNAMENT RUNS =================== */
.tr-format-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: center;
}
.tr-bracket { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.tr-bracket-col {
  background: #edf6ff;
  border-radius: 10px;
  padding: 14px 12px;
}
.tr-bracket-title {
  margin: 0 0 10px;
  font-family: var(--body);
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue); text-align: center;
}
.tr-bracket-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.tr-bracket-col li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border-radius: 6px; padding: 8px 10px;
  font-size: 13.5px; color: var(--ink);
}
.tr-bracket-col .icon { width: 18px; height: 18px; }
.tr-bracket-col li.tr-arrow { background: transparent; justify-content: center; padding: 0; }
.tr-bracket-col li.tr-arrow .icon { width: 16px; height: 16px; transform: rotate(90deg); color: var(--blue); }
.tr-bracket-cup { display: grid; place-items: center; margin-top: 10px; color: var(--blue); }
.tr-bracket-cup .icon { width: 30px; height: 30px; }
.tr-bracket-wires { width: 100%; height: 220px; overflow: visible; }
.tr-bracket-wires path {
  fill: none; stroke: rgba(0, 98, 255, 0.55); stroke-width: 1.6;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
[data-bracket].is-running .tr-bracket-wires path { animation: tr-draw 800ms var(--tr-ease) forwards; }
[data-bracket].is-running .tr-bracket-wires path:nth-child(2) { animation-delay: 110ms; }
[data-bracket].is-running .tr-bracket-wires path:nth-child(3) { animation-delay: 220ms; }
[data-bracket].is-running .tr-bracket-wires path:nth-child(4) { animation-delay: 330ms; }

.tr-know ul { margin: 12px 0 0; padding: 0; list-style: none; }
.tr-know li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; font-size: var(--text-small); color: var(--body-text);
}
.tr-know-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 8px; background: #e7f0ff; color: var(--blue);
}
.tr-know-mark .icon { width: 19px; height: 19px; }

@media (max-width: 1100px) {
  .tr-format-grid { grid-template-columns: 1fr 1fr; }
  .tr-bracket { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 700px) {
  .tr-format-grid { grid-template-columns: 1fr; }
  .tr-bracket { grid-template-columns: 1fr; }
  .tr-bracket-wires { height: 40px; }
}

/* =========================== 5 — PRIZES =========================== */
.tr-prizes { background: #edf6ff; }
.tr-prizes-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
}
.tr-pull {
  border-left: 3px solid var(--blue);
  padding: 2px 0 2px 16px;
  margin: 18px 0 0;
  font-size: var(--text-small);
  color: var(--ink);
}
.tr-stages {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.tr-stage-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  transition: transform var(--tr-enter) var(--tr-ease), box-shadow var(--tr-enter) var(--tr-ease);
}
.tr-stage-mark { display: grid; place-items: center; margin-bottom: 10px; color: var(--blue); }
.tr-stage-mark .icon { width: 34px; height: 34px; }
.tr-stage-card h3 {
  font-size:var(--ds-card)!important;
  letter-spacing:0;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tr-stage-card p { margin: 0; font-size:1rem; color: var(--body-text); }
.tr-stage-arrow { display: grid; place-items: center; color: var(--blue); }
.tr-stage-arrow .icon { width: 20px; height: 20px; }
/* Each stage lifts in turn, so the sequence reads as a progression. */
[data-stages].is-running .tr-stage-card {
  animation: tr-lift 1.6s var(--tr-ease) calc(var(--i) * 260ms) 1;
}
@keyframes tr-lift {
  0%, 100% { transform: none; box-shadow: 0 2px 10px -6px rgba(4, 22, 44, 0.3); }
  22%, 55% { transform: translateY(-6px); box-shadow: 0 16px 30px -18px rgba(0, 98, 255, 0.75); }
}
@media (max-width: 1000px) { .tr-prizes-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) {
  .tr-stages { grid-template-columns: 1fr; }
  .tr-stage-arrow { transform: rotate(90deg); }
}

/* ========================= 6 — ORGANISERS ========================= */
.tr-organisers, .tr-closing {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #03182b;
  color: #fff;
  padding-block: clamp(42px, 6svh, 74px);
  min-height: 420px;
}
.tr-org-art, .tr-closing-art { position: absolute; inset: 0; z-index: 0; }
.tr-org-art img, .tr-closing-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Keep the three faces in frame. */
.tr-org-art img { object-position: 66% 42%; }
.tr-closing-art img { object-position: 72% 50%; }
.tr-org-shade, .tr-closing-shade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(3, 17, 34, 0.96) 6%, rgba(3, 17, 34, 0.76) 38%, rgba(3, 17, 34, 0.16) 70%);
}
/* 52% is the reference's column. The old `min(620px, 52%)` capped it
   at 620px from 1192px upward, which is every desktop width — and the
   five-item job row needs 736px at 1482 and 774px at 1920, so the last
   item wrapped to a second row and the section grew a line taller than
   the reference. The measure is held on the paragraph instead, where
   line length actually matters, so the row keeps its width without the
   lede turning into a 770px line. */
.tr-org-copy, .tr-closing-copy {
  position: relative; z-index: 3;
  width: 52%;
  /* These two carry `.wrap` in the markup, which is `max-width: var(--maxw);
     margin-inline: auto` — correct for the full-width grids on this page,
     wrong here. A 52% column inside a full-bleed flex band got centred by
     that auto margin: 355.7px of left margin at 1482, so the copy started
     at 24% of the width with the whole left quarter of the photograph
     empty, while every other section's copy starts at --pad-x. Reset the
     start edge to the page gutter and let the right margin absorb the
     slack. It also puts the text back over the dark end of the shade
     gradient instead of running out across the players. */
  margin-inline: var(--pad-x) auto;
}
.tr-org-copy > p, .tr-closing-copy > p { max-width: 620px; }

.tr-org-wall, .tr-closing-wall {
  position: absolute; right: 3%; top: 26%; z-index: 3;
  text-align: right; color: rgba(190, 224, 255, 0.55);
  font-size: clamp(10px, 1vw, 14px); line-height: 1.6;
}

/* The reference carries all five on one row. 26px of column gap cost
   104px across four gaps, which was enough to push the fifth item onto
   a second line at 1366 even once the column was freed to 52%. 18px
   holds the row on one line from 1366 up (measured at 1366, 1482,
   1690, 1920 and 2560). At 1280 the five labels total 679px against a
   666px column and it still wraps to two rows — left alone rather than
   squeezed further, because the section's min-height absorbs the extra
   line without moving anything else. */
.tr-jobs { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 20px 0 0; padding: 0; list-style: none; }
.tr-jobs li { display: flex; align-items: center; gap: 9px; font-size: var(--text-meta); color: #cfe0f3; }
.tr-jobs .icon { width: 20px; height: 20px; color: var(--cyan); }

@media (max-width: 900px) {
  .tr-org-copy, .tr-closing-copy { width: 100%; }
  .tr-org-shade, .tr-closing-shade {
    background: linear-gradient(0deg, rgba(3, 17, 34, 0.96) 0%, rgba(3, 17, 34, 0.86) 46%, rgba(3, 17, 34, 0.42) 100%);
  }
  .tr-org-wall, .tr-closing-wall { display: none; }
}

/* ------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tr-bracket-wires path { stroke-dashoffset: 0; animation: none; }
  /* Drawn, not drawing. */
  .tr-step:not(:last-child)::after { transform: scaleX(1); animation: none; }
  .tr-reward::after { display: none; }
  [data-stages].is-running .tr-stage-card { animation: none; }
  .tr-cup::after { opacity: 0.5; animation: none; }
  .tr-cup { transition: none; }
  .tr-ticket:hover { transform: none; }
  .tr-hero-art img, .tr-org-art img, .tr-closing-art img { transform: none !important; }
}

/* The stage now caps itself against one screen (see .tr-stage), so the
   old max-height block is gone. It fired at any viewport 820px tall or
   less and cut the stage to 36svh * 2.0828 — about 615px inside a
   1482px section, left-aligned, with the copy, cups and cards all
   colliding inside the remnant. Three of its five rules targeted
   .tr-cups-head, a class this page has never had.

   Below this width the overlaid layout has no room, so the section
   stacks instead of shrinking. Keyed to the stage's own width, not the
   viewport's, because a short wide viewport narrows the stage too. */
@media (min-width: 901px) and (max-height: 470px) {
  .tr-stage { aspect-ratio: auto; display: grid; gap: 14px; }
  .tr-stage-frame { position: relative; aspect-ratio: 1810 / 869; grid-row: 2; }
  .tr-stage-veil, .tr-stage-wall { display: none; }
  .tr-cups-copy { position: static; width: auto; padding-inline: var(--pad-x); grid-row: 1; }
  .tr-levels {
    position: static; grid-row: 3; height: auto;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding-inline: var(--pad-x);
  }
  .tr-level { position: static; width: auto; transform: none; border-radius: 8px; }
}

/* The approved design sets its section headings larger than the site
   default. These match it without touching the shared type scale. */
.tr-format h2, .tr-prizes h2, .tr-organisers h2, .tr-closing h2 {
  font-size:var(--ds-title);
}
.tr-closing-copy p, .tr-org-copy p { font-size:var(--ds-copy); }