/* EASL Season 3 — theme + bespoke page CSS.
   Do not restyle .sc-stage, .sc-copy or any [data-sc-*] selector: mechanism,
   not ours to touch. Everything below is our own classes and our own tokens. */

:root{
  --sc-canvas:      #0B0A08;
  --sc-surface:     #17140F;
  --sc-ink:         #F4EFE3;
  --sc-ink-soft:    #948C79;
  --sc-accent:      #E3B24C;
  --sc-accent-ink:  #14110B;
  --sc-font-display:"Oswald", system-ui, sans-serif;
  --sc-font-text:   "Archivo", system-ui, sans-serif;

  --easl-canvas-1: #0B0A08;
  --easl-canvas-2: #121009;
  --easl-canvas-3: #0E0D0A;
  --easl-hair:     color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --easl-neg:      #E2604A;
}

::selection{ background: color-mix(in oklab, var(--sc-accent) 55%, transparent); color:#171208; }

body{ background: var(--sc-canvas); }

/* ---------------------------------------------------------------- a2hs -- */
.a2hs-banner{
  position: relative; z-index: 60; display: flex; align-items: center; gap: 8px;
  background: color-mix(in oklab, var(--sc-accent) 14%, var(--sc-surface));
  border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 35%, var(--easl-hair));
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.a2hs-banner__link{
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: var(--sc-ink); text-decoration: none; font-size: 13px; font-weight: 700; font-family: var(--sc-font-text);
}
.a2hs-banner__icon{ width: 20px; height: 20px; flex-shrink: 0; color: var(--sc-accent); }
.a2hs-banner__icon svg{ width: 100%; height: 100%; }
.a2hs-banner__text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2hs-banner__arrow{ color: var(--sc-accent); flex-shrink: 0; transition: transform 150ms var(--sc-ease-out); }
.a2hs-banner__link:hover .a2hs-banner__arrow{ transform: translateX(3px); }
.a2hs-banner__close{
  appearance: none; background: none; border: none; color: var(--sc-ink-soft); font-size: 18px;
  line-height: 1; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
}
.a2hs-banner__close:hover{ color: var(--sc-ink); }
@media (max-width: 480px){ .a2hs-banner__text{ white-space: normal; } }

/* ---------------------------------------------------------------- rail -- */
.rail{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; gap: clamp(2px, 0.6vw, 10px);
  padding: 10px clamp(10px, 3vw, 28px) calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(11,10,8,0.92), rgba(11,10,8,0.65) 70%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--easl-hair);
  opacity: 0; transform: translateY(10px);
  transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out);
  pointer-events: none;
}
.rail.rail--on{ opacity: 1; transform: none; pointer-events: auto; }
.rail__slot{
  appearance: none; border: 1px solid var(--easl-hair); background: rgba(255,255,255,0.02);
  border-radius: 10px; padding: 6px clamp(6px, 1.1vw, 12px) 5px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 44px; min-height: 44px; cursor: pointer;
  transition: border-color 200ms var(--sc-ease-out), background 200ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.rail__slot img{
  width: clamp(16px, 2.6vw, 22px); height: clamp(16px, 2.6vw, 22px); object-fit: contain;
  filter: grayscale(1) brightness(0.55); opacity: 0.35;
  transform: scale(0.85);
  transition: filter 260ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out), transform 420ms var(--sc-ease-drawer);
}
.rail__slot span{
  font-family: var(--sc-font-text); font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--sc-ink-soft); display:none;
}
@media (min-width: 720px){ .rail__slot span{ display:block; } }
.rail__slot:hover{ border-color: color-mix(in oklab, var(--sc-accent) 35%, var(--easl-hair)); }
.rail__slot:focus-visible{ outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.rail__slot.is-lit{ background: color-mix(in oklab, var(--sc-accent) 8%, rgba(255,255,255,0.02)); border-color: color-mix(in oklab, var(--sc-accent) 45%, var(--easl-hair)); }
.rail__slot.is-lit img{ filter:none; opacity: 1; transform: scale(1); }
.rail__slot.is-lit span{ color: var(--sc-ink); }
.rail__slot.is-flash{ animation: rail-flash 640ms var(--sc-ease-out); }
@keyframes rail-flash{
  0%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 0%, transparent); }
  35%{ box-shadow: 0 0 0 8px color-mix(in oklab, var(--sc-accent) 30%, transparent); transform: scale(1.08); }
  100%{ box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* ---------------------------------------------------------------- hero -- */
.act--hero{
  min-height: 100svh; position: relative; overflow: clip;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 78% 6%, #171307 0%, var(--easl-canvas-1) 46%, #050403 100%);
}
.hero__field{ position: absolute; inset: 0; z-index: 0; }
.hero__rings{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition: opacity 1200ms var(--sc-ease-out) 200ms; }
.act--hero.is-lit .hero__rings{ opacity: 1; }
.ring{ fill:none; stroke: var(--sc-accent); stroke-width: 1.2; opacity: 0.16; }
.ring--2{ opacity: 0.11; } .ring--3{ opacity: 0.07; } .ring--4{ opacity: 0.045; }
.hero__beam{
  position: absolute; top: -10%; width: 46vw; height: 130%;
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-accent) 14%, transparent), transparent 70%);
  filter: blur(30px); opacity: 0; transition: opacity 1400ms var(--sc-ease-out) 300ms;
  transform: skewX(-8deg);
}
.hero__beam--l{ left: -8vw; }
.hero__beam--r{ right: -8vw; transform: skewX(8deg); }
.act--hero.is-lit .hero__beam{ opacity: 1; }

.hero__stage{ position: relative; z-index: 1; text-align: center; padding: 0 var(--sc-gutter); max-width: 46rem; }
.hero__crestwrap{ position: relative; width: clamp(200px, 26vw, 340px); height: clamp(200px, 26vw, 340px); margin: 0 auto var(--sc-4); }
.hero__glow{
  position: absolute; inset: -60%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--sc-accent) 55%, transparent) 0%, transparent 68%);
  opacity: 0; transform: scale(0.4);
  transition: opacity 900ms var(--sc-ease-out), transform 1100ms var(--sc-ease-drawer);
}
.act--hero.is-lit .hero__glow{ opacity: 0.9; transform: scale(1); }
.hero__crest{
  position: relative; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(0.86);
  filter: drop-shadow(0 0 0 transparent);
  transition: opacity 700ms var(--sc-ease-out), transform 900ms var(--sc-ease-drawer), filter 900ms var(--sc-ease-out);
}
.act--hero.is-lit .hero__crest{
  opacity: 1; transform: scale(1);
  filter: drop-shadow(0 0 34px color-mix(in oklab, var(--sc-accent) 55%, transparent));
}
.hero__kicker{
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent);
  margin: 0 0 var(--sc-3); opacity: 0; transform: translateY(8px);
  transition: opacity 560ms var(--sc-ease-out) 200ms, transform 560ms var(--sc-ease-out) 200ms;
}
.hero__title{
  font-family: var(--sc-font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.6rem, 5vw + 1rem, 6rem); line-height: 0.98; letter-spacing: 0.01em;
  color: var(--sc-ink); margin: 0 0 var(--sc-4); text-wrap: balance;
  opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--sc-ease-out) 320ms, transform 620ms var(--sc-ease-out) 320ms;
}
.hero__countdown{
  display: flex; justify-content: center; gap: clamp(10px, 2.5vw, 20px); margin: 0 auto var(--sc-4);
  opacity: 0; transform: translateY(10px);
  transition: opacity 620ms var(--sc-ease-out) 460ms, transform 620ms var(--sc-ease-out) 460ms;
}
.cd__unit{ display: flex; flex-direction: column; align-items: center; min-width: 3.4em; }
.cd__num{
  font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-accent);
  font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums;
}
.cd__label{
  font-family: var(--sc-font-text); color: var(--sc-ink-soft); font-size: var(--sc-t-xs);
  text-transform: uppercase; letter-spacing: var(--sc-track-wide); margin-top: var(--sc-1);
}
.hero__kickoff{
  font-family: var(--sc-font-text); color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
  margin: 0 auto; text-wrap: pretty;
  opacity: 0; transform: translateY(10px);
  transition: opacity 620ms var(--sc-ease-out) 560ms, transform 620ms var(--sc-ease-out) 560ms;
}
.hero__ctaRow{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sc-3); margin: var(--sc-6) auto 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 620ms var(--sc-ease-out) 640ms, transform 620ms var(--sc-ease-out) 640ms;
}
.hero__scrollcue{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: var(--sc-7) auto 0; color: var(--sc-ink-soft);
  opacity: 0; transform: translateY(10px);
  transition: opacity 620ms var(--sc-ease-out) 760ms, transform 620ms var(--sc-ease-out) 760ms;
}
.hero__scrollcue-label{ font-family: var(--sc-font-text); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.hero__scrollcue svg{ width: 20px; height: 20px; color: var(--sc-accent); animation: heroScrollBounce 1.8s ease-in-out infinite; }
@keyframes heroScrollBounce{
  0%, 100%{ transform: translateY(0); opacity: 0.55; }
  50%{ transform: translateY(6px); opacity: 1; }
}
.act--hero.is-lit .hero__kicker,
.act--hero.is-lit .hero__title,
.act--hero.is-lit .hero__countdown,
.act--hero.is-lit .hero__kickoff,
.act--hero.is-lit .hero__ctaRow,
.act--hero.is-lit .hero__scrollcue{ opacity: 1; transform: none; }

/* -------------------------------------------------------------- acts --- */
.act{ position: relative; background: var(--easl-canvas-2); padding-block: var(--sc-section); }
.act:nth-of-type(odd){ background: var(--easl-canvas-3); }
.act__eyebrow{
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: var(--sc-track-wide); text-transform: uppercase; color: var(--sc-accent);
  margin: 0 0 var(--sc-2);
}
.act__grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--sc-7), 6vw, var(--sc-10)); align-items: center; }
.act__grid--rev{ grid-template-columns: 0.9fr 1.1fr; }
.act__grid--rev .act__copy{ order: 2; }
.act__grid--rev .act__figure{ order: 1; }
@media (max-width: 860px){
  .act__grid, .act__grid--rev{ grid-template-columns: 1fr; }
  .act__grid--rev .act__copy, .act__grid--rev .act__figure{ order: initial; }
}
.act__figure{ display:flex; flex-direction:column; }

/* draft */
.draft__budget{
  background: var(--sc-surface); border: 1px solid var(--easl-hair); border-radius: 18px;
  padding: var(--sc-7) var(--sc-6); box-shadow: var(--sc-e2); position: relative;
}
.draft__num{
  font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.2rem, 6vw, 5.2rem);
  color: var(--sc-accent); line-height: 1; font-variant-numeric: tabular-nums;
}
.draft__unit{ display:block; font-family: var(--sc-font-text); color: var(--sc-ink-soft); margin-top: var(--sc-2); font-size: var(--sc-t-sm); }
.draft__unit--sm{ margin-top: var(--sc-6); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }
.draft__slots{ display:flex; gap: 6px; margin-top: var(--sc-5); flex-wrap: wrap; }
.slot{ width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--easl-hair); background: rgba(255,255,255,0.03); }
.slot--gk{ display:flex; align-items:center; justify-content:center; font: 700 9px var(--sc-font-text); color: var(--sc-accent); border-color: color-mix(in oklab, var(--sc-accent) 45%, var(--easl-hair)); }

/* leaderboard list */
.lb-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.lb-list li{ display:flex; align-items:center; gap: var(--sc-4); padding: var(--sc-3) 0; border-bottom: 1px solid var(--easl-hair); font-family: var(--sc-font-text); color: var(--sc-ink); }
.lb-list li:last-child{ border-bottom: none; }
.lb-list__pts{ font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-accent); min-width: 2.6ch; font-size: var(--sc-t-lg); }
.lb-list__pts--neg{ color: var(--easl-neg); }

/* schedule */
.schedule__panel{
  position: relative; background: var(--sc-surface); border: 1px solid var(--easl-hair); border-radius: 18px;
  padding: var(--sc-8) var(--sc-6); overflow: hidden; text-align:center;
}
.schedule__grid{ position:absolute; inset:0; opacity:0.5; }
.schedule__grid span{ position:absolute; background: var(--easl-hair); }
.schedule__grid span:nth-child(1){ left:0; right:0; top:33%; height:1px; }
.schedule__grid span:nth-child(2){ left:0; right:0; top:66%; height:1px; }
.schedule__grid span:nth-child(3){ top:0; bottom:0; left:33%; width:1px; }
.schedule__grid span:nth-child(4){ top:0; bottom:0; left:66%; width:1px; }
.schedule__big{ position:relative; display:block; font-family: var(--sc-font-display); font-weight:700; font-size: clamp(3.4rem, 7vw, 6rem); color: var(--sc-ink); line-height:1; }
.schedule__label{ position:relative; display:block; margin-top: var(--sc-2); color: var(--sc-ink-soft); font-family: var(--sc-font-text); }

/* league table */
.ltable{ margin-top: var(--sc-7); border-top: 1px solid var(--easl-hair); }
.ltable__head, .ltable__row{
  display:grid; grid-template-columns: 1fr repeat(5, 44px); align-items:center;
  padding: var(--sc-3) 0; border-bottom: 1px solid var(--easl-hair); gap: var(--sc-2);
}
.ltable__head{ font-family: var(--sc-font-text); font-size: var(--sc-t-xs); text-transform: uppercase; letter-spacing: var(--sc-track-wide); color: var(--sc-ink-soft); }
.ltable__head span{ text-align:center; }
.ltable__head span:first-child{ text-align:left; }
.ltable__row{ font-family: var(--sc-font-text); color: var(--sc-ink); transition: background 200ms var(--sc-ease-out); }
.ltable__row span{ text-align:center; font-variant-numeric: tabular-nums; }
.ltable__row:hover{ background: rgba(255,255,255,0.025); }
.ltable__club{ display:flex; align-items:center; gap: var(--sc-3); text-align:left !important; justify-content:flex-start !important; font-weight: 600; }
.ltable__club img{ width:22px; height:22px; object-fit:contain; }
@media (max-width: 640px){
  .ltable__head, .ltable__row{ grid-template-columns: 1fr repeat(5, 28px); font-size: var(--sc-t-xs); }
}

/* sponsors — a looping slideshow of sponsor logos, each flattened onto a
   plain white card so wildly different source backgrounds read as one set. */
.sponsor-gallery{
  margin-top: var(--sc-7); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sponsor-gallery__track{ display:flex; gap: var(--sc-4); width:max-content; animation: sponsor-scroll 32s linear infinite; }
.sponsor-gallery:hover .sponsor-gallery__track{ animation-play-state: paused; }
.sponsor-gallery__card{
  flex: 0 0 auto; width: 190px; height: 108px; background:#fff; border-radius: 14px;
  box-shadow: var(--sc-e2); overflow:hidden;
}
.sponsor-gallery__card img{ display:block; width:100%; height:100%; object-fit:contain; }
@keyframes sponsor-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* season 3 */
.season3__block{ text-align:center; max-width: 40rem; margin-inline:auto; }
.season3__count{ display:flex; flex-wrap:wrap; gap: 0 0.4ch; justify-content:center; }
.season3__was{ color: var(--sc-ink-soft); text-decoration: line-through; text-decoration-color: var(--easl-neg); text-decoration-thickness: 3px; }
.season3__now{ color: var(--sc-accent); }

/* rules */
.rules__list{ margin-top: var(--sc-7); border-top: 1px solid var(--easl-hair); max-width: 46rem; }
.rules__row{ display:flex; justify-content:space-between; gap: var(--sc-5); padding: var(--sc-3) 0; border-bottom: 1px solid var(--easl-hair); font-family: var(--sc-font-text); }
.rules__row span{ color: var(--sc-ink-soft); }
.rules__row strong{ color: var(--sc-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rules__row strong.rules__neg{ color: var(--easl-neg); }
.rules__row--rule strong{ color: var(--sc-ink); }

/* close */
.act--close{
  min-height: 78svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background: radial-gradient(120% 100% at 50% 0%, #171307 0%, var(--easl-canvas-1) 55%, #050403 100%);
  padding-bottom: calc(var(--sc-9) + 70px);
}
.close__inner{ max-width: 34rem; padding: 0 var(--sc-gutter); }
.act--close .sc-display--xl{ margin: 0 0 var(--sc-6); }
.foot{ margin-top: var(--sc-9); display:flex; align-items:center; gap: var(--sc-2); color: var(--sc-ink-soft); font-family: var(--sc-font-text); font-size: var(--sc-t-xs); }
.foot img{ width: 28px; height: 28px; object-fit: contain; opacity: 0.8; }

/* cta */
.cta{
  appearance:none; border:none; cursor:pointer; display:inline-block;
  font-family: var(--sc-font-text); font-weight:700; font-size: var(--sc-t-base);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 0.95em 2em; border-radius: 999px; letter-spacing: 0.01em;
  box-shadow: var(--sc-e2); transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.cta:hover{ transform: translateY(-2px); box-shadow: var(--sc-e3); }
.cta:active{ transform: translateY(0) scale(0.97); }
.cta:focus-visible{ outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.cta--block{ width: 100%; text-align:center; }
.cta--sm{ padding: 0.75em 1.6em; font-size: var(--sc-t-sm); }
.cta--ghost{
  background: transparent; color: var(--sc-ink); box-shadow: none;
  border: 1px solid var(--easl-hair);
}
.cta--ghost:hover{ border-color: color-mix(in oklab, var(--sc-accent) 40%, var(--easl-hair)); }
a.cta{ text-decoration: none; }

/* --------------------------------------------------------------- auth --- */
.authmodal{ position: fixed; inset: 0; z-index: 90; display: none; align-items:center; justify-content:center; }
.authmodal.is-open{ display:flex; }
.authmodal__scrim{ position:absolute; inset:0; background: rgba(6,5,3,0.72); backdrop-filter: blur(4px); }
.authmodal__box{
  position:relative; width: min(360px, calc(100vw - 2.5rem)); background: var(--sc-surface);
  border: 1px solid var(--easl-hair); border-radius: 18px; padding: var(--sc-7) var(--sc-6);
  box-shadow: var(--sc-e3); text-align:center;
}
.authmodal__x{
  position:absolute; top: var(--sc-3); right: var(--sc-3); background:none; border:none; color: var(--sc-ink-soft);
  font-size: 1.4rem; line-height:1; cursor:pointer; width:32px; height:32px;
}
.authmodal__x:focus-visible{ outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.authmodal__crest{ display:block; width: 88px; height: 88px; object-fit: contain; margin: 0 auto var(--sc-4); }
.authmodal__tabs{ display:flex; gap: var(--sc-2); background: rgba(255,255,255,0.03); border-radius: 10px; padding: 4px; margin-bottom: var(--sc-5); }
.authmodal__tab{ flex:1; appearance:none; border:none; background:transparent; color: var(--sc-ink-soft); font-family: var(--sc-font-text); font-weight:700; font-size: var(--sc-t-sm); padding: 0.6em; border-radius: 7px; cursor:pointer; }
.authmodal__tab.active{ background: var(--sc-accent); color: var(--sc-accent-ink); }
.authmodal__form{ display:grid; gap: var(--sc-3); }
.authmodal__form input{
  width:100%; background: rgba(255,255,255,0.04); border: 1px solid var(--easl-hair); border-radius: 10px;
  padding: 0.85em 1em; color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-sm); outline:none;
}
.authmodal__form input:focus-visible{ border-color: var(--sc-accent); }
.authmodal__err{ color: var(--easl-neg); font-size: var(--sc-t-xs); min-height: 1em; margin:0; }
.authmodal__note{ color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin: var(--sc-4) 0 0; }

@media (prefers-reduced-motion: reduce){
  .rail__slot img, .hero__crest, .hero__rings, .hero__beam, .hero__glow, .hero__kicker, .hero__title, .hero__countdown, .hero__kickoff, .hero__scrollcue{ transition-duration: 1ms !important; }
  .hero__scrollcue svg{ animation: none !important; }
  .sponsor-gallery__track{ animation: none !important; flex-wrap: wrap; }
  .sponsor-gallery{ overflow: visible; -webkit-mask-image: none; mask-image: none; }
}