/* ============================================================
   ASHEN THRONE - /cup  (Alliance Siege Cup ad landing page)

   Page-specific layout ONLY. landing/theme.css owns every token,
   the webfont import, and the shared .site-header / .site-footer
   / .eyebrow / .btn primitives - nothing here redeclares them.

   Design source: design_handoff_cup_ad_landing (README.md +
   "Cup Ad Landing.dc.html"). Every value below comes from that
   handoff; where it borrows a treatment from events.css (hero
   scrim, section rule, medal discs, table) the values are the
   same but the classes are namespaced cup-* so the two pages
   cannot collide.
   ============================================================ */

.cup-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* No blanket anchor colour. A `.cup-page a` rule is specificity (0,1,1) and
   silently beats every single-class component rule below it, which painted the
   primary CTA cyan-on-cyan (invisible text until :hover, where the two-class
   rule won). Every anchor on this page is a component that owns its own colour:
   .site-brand / .site-cta from theme.css, .cup-btn, .cup-store (image),
   .cup-foot__links a, .cup-pay__tx. Keep it that way. */
.cup-page a { text-decoration: none; }

.cup-hidden { display: none !important; }

.cup-wrap {
  max-width: 1180px;
  margin: 0 auto;
}
.cup-wrap--narrow { max-width: 820px; }

/* ── shared section frame ─────────────────────────────────── */

.cup-sec {
  padding: 84px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cup-sec--alt { background: var(--bg2); }

.cup-sec--art { position: relative; overflow: hidden; }
.cup-sec--art > .cup-wrap { position: relative; z-index: 1; }

/* Atmospheric backdrop - the same treatment style.css gives
   .pillars / .combat / .chronicle. */
.cup-sec__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('/assets/banner_warlord.jpg') center / cover;
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

.cup-sechead { text-align: center; margin-bottom: 52px; }

.cup-h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.cup-lead {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* ============================================================
   HEADER - shared chrome, nav tabs deliberately absent.
   ============================================================ */

.cup-header { gap: 22px; padding: 0 28px; }

.cup-header__side {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
  flex-shrink: 0;
}

.cup-header__timer {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   1 - HERO
   ============================================================ */

.cup-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.cup-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* _web is the same art resized to what this actually renders at. The full-res
     original stays on disk for the email and for og:image consumers. 300KB -> 111KB. */
  background: url('/assets/events/cup_hero_web.jpg') center 35% / cover no-repeat;
  opacity: 0.9;
}

.cup-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 420px at 74% 44%, rgba(255, 199, 90, 0.14), transparent 62%),
    linear-gradient(90deg, rgba(6, 6, 16, 0.94) 0%, rgba(6, 6, 16, 0.66) 46%, rgba(6, 6, 16, 0.82) 100%),
    linear-gradient(180deg, transparent 38%, rgba(6, 6, 16, 0.92) 100%);
}

.cup-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 28px 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: center;
  min-height: 560px;
}

/* Phase pill */
.cup-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 13px;
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: var(--radius-pill);
  background: rgba(8, 10, 22, 0.7);
  font-family: var(--font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-hot);
}

.cup-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-hot);
  box-shadow: 0 0 8px var(--gold-hot);
  animation: cup-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes cup-dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.cup-hero__title {
  margin: 20px 0 6px;
  font-family: var(--font-brand);
  font-size: clamp(46px, 5.6vw, 82px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff8ec 0%, #ffe3a8 50%, #d99b3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.85));
}

.cup-hero__sub {
  margin-bottom: 16px;
  font-family: var(--font-chrome);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.cup-hero__dates { color: var(--text-dim); }

.cup-hero__body {
  max-width: 540px;
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: #d4d6dc;
  text-wrap: pretty;
}

/* CTA pair */
.cup-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cup-cta-row--center { justify-content: center; }

.cup-btn {
  display: inline-block;
  padding: 17px 34px;
  font-family: var(--font-chrome);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  box-shadow: 0 0 26px rgba(79, 195, 247, 0.45);
  transition: filter 0.15s;
}
.cup-btn:hover { filter: brightness(1.18); }

/* Store badges: never restyled, bordered or recoloured (Play + Apple brand
   guidelines both say scale uniformly and add no chrome).

   The heights differ because the two files are built differently, not as a
   style choice. Google's PNG bakes 41px of transparent padding into every
   side of a 646x250 canvas, so only 67.2% of its box is visible artwork.
   Apple's SVG is 119.66x40 edge to edge. Equal CSS heights would render
   Apple ~49% taller. These two land the VISIBLE artwork at ~40px on both:
   Play 60px x 0.672 = 40.3px, Apple 40px. Change one, recompute the other. */
.cup-store { display: inline-flex; align-items: center; }
.cup-store img { height: 60px; width: auto; display: block; }
.cup-store--apple img { height: 40px; }

/* Trust chips */
.cup-chips {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cup-chip {
  padding: 5px 10px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
}
.cup-chip--ok {
  border-color: rgba(102, 187, 106, 0.45);
  background: rgba(102, 187, 106, 0.08);
  color: var(--ok);
}

/* Right column - trophy + countdown card */
.cup-hero__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.cup-trophy {
  width: 216px;
  height: 216px;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(255, 200, 90, 0.4));
  animation: cup-float 5s ease-in-out infinite;
}

@keyframes cup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.cup-clock {
  width: 100%;
  padding: 18px 20px;
  text-align: center;
  border: 1px solid var(--gold-hot);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.12), transparent 62%),
    linear-gradient(180deg, #17130a 0%, #0a0e1c 100%);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.22);
}

.cup-clock__label {
  font-family: var(--font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.cup-clock__value {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Rendered from the event's prize table, so the tier count is whatever config
   says. Wraps rather than crushing when a table carries more than three. */
.cup-clock__prizes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cup-p1 { color: var(--gold-hot); }
.cup-p2 { color: #d6dce8; }
.cup-p3 { color: #e0a05a; }
/* Fourth place and beyond: paid, but no medal metal. */
.cup-p4 { color: var(--text); }

/* ============================================================
   2 - HOW YOU GET PAID
   ============================================================ */

.cup-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cup-grid2 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cup-step {
  padding: 30px 26px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
}
.cup-step--gold { border-top-color: var(--gold-hot); }

.cup-step__num {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
}
.cup-step--gold .cup-step__num { color: var(--gold-hot); }

.cup-step__title {
  margin: 0 0 12px;
  font-family: var(--font-chrome);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.cup-step__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.cup-note {
  padding: 24px 26px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0e1322, #0a0e1c);
}

.cup-note__label {
  margin-bottom: 10px;
  font-family: var(--font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cup-note__label--ok   { color: var(--ok); }
.cup-note__label--gold { color: var(--gold-hot); }

.cup-note__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.cup-note__body b { color: #fff; }

/* ── Hero receipt ───────────────────────────────────────────
   Ships hidden and is revealed only once the payout fetch has real rows,
   so the strongest claim on the page can never appear without its evidence. */
.cup-receipt {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  font-family: var(--font-chrome);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.cup-receipt__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
}
.cup-receipt a {
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── YOUR SHARE mockup ──────────────────────────────────────
   A static reproduction of the live panel in landing/events.js. Every value is
   a template, never a figure, so this cannot read as a payout that happened. */
.cup-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 26px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.cup-share__title {
  margin: 10px 0 12px;
  font-family: var(--font-brand);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  color: #fff;
}
.cup-share__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.cup-share__panel {
  padding: 18px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0e1322, #0a0e1c);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.cup-share__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cup-share__chrome-label {
  font-family: var(--font-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-hot);
}
/* Says EXAMPLE out loud. Without it a template reads as a real balance. */
.cup-share__badge {
  padding: 3px 8px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  font-family: var(--font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}

.cup-share__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cup-share__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.015);
}
.cup-share__stat--big { grid-column: 1 / -1; }
.cup-share__label {
  font-family: var(--font-chrome);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}
.cup-share__value {
  font-family: var(--font-chrome);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.cup-share__stat--big .cup-share__value {
  font-family: var(--font-brand);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1;
}
.cup-share__value--gold { color: var(--gold-hot); }
.cup-share__tag { color: var(--electric); }
.cup-share__ok {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(102, 187, 106, 0.14);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ok);
}
.cup-share__foot {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .cup-share { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   3 - RECEIPTS
   ============================================================ */

/* Section rule head - the events.css .cupx-section__head treatment. */
.cup-rule {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cup-rule__eyebrow {
  font-family: var(--font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}

.cup-rule__title {
  margin: 6px 0 0;
  font-family: var(--font-brand);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.cup-rule__meta {
  font-family: var(--font-chrome);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.cup-rule__bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-hot), transparent);
}

.cup-proof {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  align-items: start;
}

/* Payouts landed but standings did not (the `upcoming` phase serves no
   leaderboard). Collapse to one centred column so the rail is not stranded
   beside an empty 3fr void. */
.cup-proof--solo {
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
}

/* Standings table */
.cup-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(8, 10, 22, 0.55);
  overflow: hidden;
  overflow-x: auto;
}

.cup-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-chrome);
}

.cup-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}
.cup-table th.num { text-align: right; }
.cup-table .cup-th-rank { width: 58px; }

.cup-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.cup-table td.num { text-align: right; }
.cup-table tr:last-child td { border-bottom: 0; }

.cup-row--1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.09), transparent 60%); }

.cup-td-ally {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.cup-td-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-mute);
}

.cup-td-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cup-td-dim { color: var(--text-dim); }

.cup-td-prize {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-hot);
}
.cup-td-prize.cup-td-dim { color: var(--text-mute); font-family: var(--font-mono); font-size: 12px; }

/* Medal discs */
.cup-medal {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  background: rgba(8, 10, 22, 0.6);
}
.cup-medal--1 {
  color: #1a1204;
  background: linear-gradient(180deg, #ffe97a, #ffd700 55%, #b8870a);
  border-color: #ffe082;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}
.cup-medal--2 {
  color: #0e1116;
  background: linear-gradient(180deg, #f2f5fb, #c6cddc 55%, #8b93a6);
  border-color: #e3e8f2;
}
.cup-medal--3 {
  color: #1a0e04;
  background: linear-gradient(180deg, #f0b06a, #cd7f32 55%, #8a5320);
  border-color: #e6a860;
}

/* Right rail */
.cup-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cup-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cup-tile {
  padding: 16px 18px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0e1322, #0a0e1c);
}

.cup-tile__num {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cup-tile__label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Payout log */
.cup-payout {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(8, 10, 22, 0.55);
}

.cup-payout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.cup-payout__title {
  font-family: var(--font-chrome);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}

.cup-payout__verified {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ok);
  white-space: nowrap;
}

.cup-pay {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(42, 48, 64, 0.6);
}

.cup-pay__who { min-width: 0; }

.cup-pay__name {
  font-family: var(--font-chrome);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
}

.cup-pay__tx {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-mute);
}
a.cup-pay__tx:hover { color: var(--accent); }

.cup-pay__amt {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ok);
}

.cup-payout__foot {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ============================================================
   4 - THE GAME IN 20 SECONDS
   ============================================================ */

.cup-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}

.cup-card__art {
  position: relative;
  height: 190px;
}
/* All three are real game captures, cropped to the 190px box these render in and
   served at 2x. Previously this row alone was 2.2MB, almost all of it the
   keyart PNG, for three thumbnails. */
.cup-card__art--crawler { background: url('/assets/events/cup_card_crawler.jpg') center / cover; }
.cup-card__art--wastes  { background: url('/assets/events/cup_card_wastes.jpg') center / cover; }
.cup-card__art--citadel { background: url('/assets/events/cup_card_citadel.jpg') center / cover; }

.cup-card__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--panel) 100%);
}

.cup-card__body { padding: 22px 24px 26px; }

.cup-card__title {
  margin: 0 0 10px;
  font-family: var(--font-chrome);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.cup-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

/* Counter triangle */
.cup-triangle {
  margin-top: 20px;
  padding: 18px 24px;
  text-align: center;
  border: 1px solid var(--border2);
  background: var(--panel);
}

.cup-triangle__label {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--text-mute);
}

.cup-triangle__run {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.cup-triangle__run .cup-kin { color: var(--kinetic);  font-weight: 800; }
.cup-triangle__run .cup-psi { color: var(--psionic);  font-weight: 800; }
.cup-triangle__run .cup-ele { color: var(--electric); font-weight: 800; }
.cup-triangle__run .cup-chev { margin: 0 10px; color: var(--text-mute); }

/* ============================================================
   5 - FAQ
   ============================================================ */

.cup-faq { border-top: 1px solid var(--border); }
.cup-faq--last { border-bottom: 1px solid var(--border); }

.cup-faq__q {
  display: grid;
  grid-template-columns: 40px 1fr 30px;
  gap: 16px;
  align-items: start;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
}
.cup-faq__q::-webkit-details-marker { display: none; }

.cup-faq__n {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-mute);
}

.cup-faq__t {
  font-family: var(--font-chrome);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.cup-faq__plus {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--accent);
  transition: transform 0.2s;
}
.cup-faq[open] .cup-faq__plus { transform: rotate(45deg); }

.cup-faq__a {
  margin: 0;
  padding: 0 34px 22px 56px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* ============================================================
   6 - CLOSING CTA
   ============================================================ */

.cup-close {
  position: relative;
  overflow: hidden;
  padding: 96px 28px;
  text-align: center;
  background: url('/assets/banner_citadel.jpg') center 28% / cover;
}

.cup-close__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 360px at 50% 118%, rgba(217, 155, 60, 0.20), transparent 60%),
    linear-gradient(180deg, rgba(6, 6, 16, 0.88) 0%, rgba(6, 6, 16, 0.72) 45%, rgba(6, 6, 16, 0.96) 100%);
}

.cup-close__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.cup-close .eyebrow { margin-bottom: 14px; }

.cup-close__title {
  margin: 0 0 10px;
  font-family: var(--font-brand);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
}

.cup-close__clock {
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold-hot);
  font-variant-numeric: tabular-nums;
}

.cup-close__body {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.7;
  color: #d4d6dc;
}

.cup-close__trust {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================================================
   FOOTER - the page's own compact legal footer. The shared
   .site-footer is a 5-column sitemap; on an ad page every extra
   link is an exit, so this keeps the wordmark, the fine print
   and the three legal links only.
   ============================================================ */

.cup-foot {
  background: var(--bg2);
  padding: 40px 28px 34px;
}

.cup-foot__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.cup-foot__brand {
  margin-bottom: 14px;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
}

.cup-foot__fine {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: 0.4px;
  color: var(--text-mute);
  text-wrap: pretty;
}

.cup-foot__links {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-mute);
}
.cup-foot__links a { color: var(--text-mute); }
.cup-foot__links a:hover { color: var(--text-dim); }
.cup-foot__sep { color: var(--border2); }

.cup-foot__cookie {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-mute);
  cursor: pointer;
}
.cup-foot__cookie:hover { color: var(--text-dim); }

/* X Pixel consent. The choice never blocks the Cup page and both actions use
   the same treatment so rejecting is as easy as allowing. */
.cup-consent {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 24px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
  border: 1px solid var(--border2);
  background: rgba(10, 10, 22, 0.97);
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
}
.cup-consent[hidden] { display: none; }

.cup-consent__copy { flex: 1 1 auto; }
.cup-consent__title {
  margin-bottom: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--gold-hot);
}
.cup-consent__copy p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}
.cup-consent__copy a { color: var(--accent); }
.cup-consent__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.cup-consent__button {
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--border2);
  background: var(--bg3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-primary);
  cursor: pointer;
}
.cup-consent__button:hover,
.cup-consent__button:focus-visible {
  border-color: var(--accent);
  color: #fff;
}

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

/* 860-1024px: hero collapses to one column, 3-up grids stay 3-up. */
@media (max-width: 1024px) {
  .cup-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    min-height: 0;
    padding: 52px 28px 56px;
  }
  .cup-hero__right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
  }
  .cup-clock { width: auto; flex: 1 1 300px; }
  .cup-trophy { width: 168px; height: 168px; }
  .cup-proof { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .cup-sec { padding: 64px 20px; }
  .cup-hero__inner { padding: 44px 20px 48px; }
  .cup-sechead { margin-bottom: 40px; }

  .cup-hero__title { font-size: clamp(34px, 9vw, 52px); }
  .cup-hero__sub { font-size: 17px; letter-spacing: 0.14em; }
  .cup-hero__body { font-size: 15px; }

  /* Keep the CTA above the fold on a phone. */
  .cup-trophy { width: 120px; height: 120px; }
  .cup-hero__right { gap: 16px; }

  .cup-grid3,
  .cup-grid2,
  .cup-tiles { grid-template-columns: 1fr; }

  .cup-btn { padding: 15px 24px; font-size: 15px; }

  .cup-rule { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cup-rule__meta { white-space: normal; }

  .cup-close { padding: 72px 20px; }
  .cup-close__clock { font-size: 21px; }

  .cup-faq__q { grid-template-columns: 30px 1fr 24px; gap: 12px; }
  .cup-faq__a { padding: 0 8px 20px 42px; }

  .cup-foot { padding: 32px 20px 28px; }
}

@media (max-width: 520px) {
  .cup-header { padding: 0 14px; }
  .cup-header__side { gap: 10px; }
  .cup-header__timer { display: none; }
  .cup-chips { gap: 6px; }
  .cup-clock__value { font-size: 28px; }
  .cup-consent {
    right: 10px;
    bottom: 10px;
    left: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cup-consent__actions { width: 100%; }
  .cup-consent__button { flex: 1 1 50%; }
}

/* ============================================================
   REDUCED MOTION - the page's only two loops are decorative.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cup-pill__dot,
  .cup-trophy { animation: none; }
  .cup-faq__plus { transition: none; }
}