/* ============================================================
   YGTC 2026 — Landing Page
   Theme: dark / ember / premium — keyed off the phoenix key art
   --ink is the foreground and --paper the ground, so the whole
   sheet inverts from these two.
   ============================================================ */

:root{
  --ink:#f6efe4;
  --ink-soft:#c2b4a6;
  --muted:#8a7a72;
  --line:#2b2023;
  --line-strong:#4a3437;
  --paper:#0a0708;
  --paper-2:#100b0d;
  --paper-3:#1a1114;
  --gold:#ffa23c;
  --gold-soft:#6b3d18;
  --ember:#ff5f1f;
  --ember-deep:#c11f0b;
  --radius:18px;
  --pad-sec:clamp(72px, 9vw, 150px);
  --ff-th: 'Anuphan', sans-serif;
  --ff-en:'Cormorant Garamond', Georgia, serif;
  --ff-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{ -webkit-tap-highlight-color:transparent }

/* the default OS scrollbar reads as a light seam down a very dark page,
   so it is restyled to sit inside the palette rather than on top of it */
*{ scrollbar-width:thin; scrollbar-color:#4a2a1c transparent }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #6b3d18, #3a2320);
  border:2px solid transparent; background-clip:padding-box; border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, var(--gold), var(--ember-deep)); background-clip:padding-box }
::-webkit-scrollbar-corner{ background:transparent }

html{ scroll-behavior:smooth }

body{
  font-family:var(--ff-th);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  letter-spacing:.1px;
}

img{ max-width:100%; display:block }

::selection{ background:var(--ember); color:#fff }

/* --- background layers -------------------------------------- */
/* the key art stays behind the whole page at a whisper, so scrolling
   out of the hero reads as walking away from the fire rather than
   cutting to a different site */
.page-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("../img/bg.jpg") center 28%/cover no-repeat;
  opacity:.14; filter:saturate(.9);
}
.page-bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(115% 75% at 50% 8%, transparent, #000 76%);
}
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:0;
  transition:opacity 1.4s ease;
}
#bg-canvas.is-live{ opacity:.9 }
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
header, section, footer{ position:relative; z-index:3 }

/* --- shared type -------------------------------------------- */
.mono-label{
  font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.section{ padding:var(--pad-sec) 0 }
.section-title{
  font-weight:600; line-height:1.12; margin:.4rem 0 0;
  font-size:clamp(30px, 4.6vw, 62px); letter-spacing:-.5px;
}
.section-title .thin{ font-weight:200; color:var(--ink-soft) }
.sub-title{ font-weight:600; font-size:clamp(22px,2.6vw,34px); margin:.3rem 0 1rem }
.lead-th{ font-weight:300; font-size:clamp(15px,1.25vw,18px); line-height:1.95; color:var(--ink-soft) }
.lead-th b{ font-weight:600; color:var(--ink) }
.mini-title{
  font-weight:600; font-size:15px; margin:0 0 .7rem;
  padding-left:14px; border-left:3px solid var(--ember);
}
.remark-inline{ font-size:13px; color:var(--muted); margin-top:1.2rem }

/* --- buttons ------------------------------------------------- */
.btn{
  --bs-btn-border-radius:999px;
  font-family:var(--ff-th); font-weight:400; font-size:14px;
  padding:.55rem 1.3rem; border-radius:999px; transition:.35s cubic-bezier(.2,.7,.3,1);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-lg{ padding:.85rem 2.1rem; font-size:15px }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); background:rgba(255,255,255,.02) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); background:rgba(255,162,60,.07) }
.btn-ink{
  background:linear-gradient(140deg, var(--gold), var(--ember) 52%, var(--ember-deep));
  color:#1a0b04; border:1px solid rgba(255,180,110,.5); font-weight:500;
}
.btn-ink:hover{ color:#1a0b04; transform:translateY(-2px); box-shadow:0 16px 40px -16px rgba(255,95,31,.75) }
.btn-outline-ink{ border:1px solid var(--gold); color:var(--gold); background:transparent }
.btn-outline-ink:hover{ background:var(--gold); color:#1a0b04; transform:translateY(-2px) }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(10,7,8,.62);
  backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid var(--line);
  transition:padding .4s ease, background .4s ease;
  padding:14px 0 12px;
}
.topbar.is-shrunk{ padding:7px 0 6px; background:rgba(10,7,8,.9) }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink) }
.brand-mark{ width:42px; height:42px; border-radius:12px; transition:.4s; object-fit:contain }
.topbar.is-shrunk .brand-mark{ width:34px; height:34px }
.brand-text{ display:flex; flex-direction:column; line-height:1 }
.brand-title{ font-weight:600; letter-spacing:.22em; font-size:15px }
.brand-sub{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.2em; color:var(--muted); margin-top:4px; white-space:nowrap }
.topbar-line{ position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:transparent }
.topbar-line span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--ember)) }
.menu-link{ color:var(--ink); text-decoration:none; padding:.5rem 0; border-bottom:1px solid var(--line) }
.offcanvas{ background:var(--paper-2); color:var(--ink) }
.offcanvas .btn-close{ filter:invert(1) grayscale(1) brightness(1.6) }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:clamp(80px,11vh,120px) 0 clamp(70px,9vh,96px); overflow:hidden;
  isolation:isolate;
}
/* the key art at full strength, then a scrim that hands the bottom edge
   over to the page-wide faded copy of the same image */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url("../img/bg.jpg") center 42%/cover no-repeat;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 46% at 50% 34%, rgba(255,120,40,.18), transparent 72%),
    linear-gradient(180deg, rgba(10,7,8,.78) 0%, rgba(10,7,8,.45) 30%, rgba(10,7,8,.86) 78%, var(--paper) 100%);
}
.hero-frame{ position:absolute; inset:26px; border:1px solid rgba(255,255,255,.14); pointer-events:none }
.corner{ position:absolute; width:20px; height:20px; border:2px solid var(--gold) }
.corner.tl{ top:-1px; left:-1px; border-right:0; border-bottom:0 }
.corner.tr{ top:-1px; right:-1px; border-left:0; border-bottom:0 }
.corner.bl{ bottom:-1px; left:-1px; border-right:0; border-top:0 }
.corner.br{ bottom:-1px; right:-1px; border-left:0; border-top:0 }

/* the intro: the hero starts blank and fades in, one property, no movement.
   The grain is a full-viewport blend and the topbar a full-width backdrop
   blur — both repaint whenever anything under them changes, so they sit the
   fade out and come back once it is over */
.is-intro .grain{ display:none }
.is-intro .topbar{ backdrop-filter:none }
.is-intro .hero-inner > *,
.is-intro .corner,
.is-intro .scroll-cue{ opacity:0; transition:opacity .85s ease }
.is-intro.is-revealed .hero-inner > *,
.is-intro.is-revealed .corner,
.is-intro.is-revealed .scroll-cue{ opacity:1 }
/* a light stagger so it arrives as a sequence rather than one flat block */
.is-intro .hero-inner > *:nth-child(2){ transition-delay:.08s }
.is-intro .hero-inner > *:nth-child(3){ transition-delay:.16s }
.is-intro .hero-inner > *:nth-child(4){ transition-delay:.24s }
.is-intro .hero-inner > *:nth-child(5){ transition-delay:.32s }
.is-intro .hero-inner > *:nth-child(6){ transition-delay:.4s }
.is-intro .hero-inner > *:nth-child(7){ transition-delay:.48s }
.is-intro .scroll-cue{ transition-delay:.56s }

.hero-kicker{ margin-bottom:clamp(16px,2.4vh,32px) }
.hero-logo{ position:relative; display:inline-block; margin-bottom:clamp(10px,2vh,24px) }
/* the logo is scaled through the whole intro, and every filter on it has to
   be re-rasterised each frame — one drop-shadow is affordable, the 90px one
   plus a blur was not. The halo below carries the rest of the glow. */
.hero-logo-media{
  position:relative; width:min(380px, 56vw); margin-inline:auto;
  filter:drop-shadow(0 18px 46px rgba(255,90,20,.5));
  will-change:transform, opacity; backface-visibility:hidden;
}
/* the plate and the still share one box, so the swap between them never
   nudges the headline underneath. The ratio is the artwork half of the
   plate, not the whole packed frame, and it is pinned here because the
   backing store is re-sized for DPR at runtime. */
.hero-logo-canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 1;
  opacity:0;
  transition:opacity .7s ease;
}
.hero-logo-still{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .7s ease;
}
/* the still only steps aside once there is a live frame to replace it */
.hero-logo.is-live .hero-logo-canvas{ opacity:1 }
.hero-logo.is-live .hero-logo-still{ opacity:0 }
.hero-halo{
  position:absolute; inset:-18% -16%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,110,30,.36), rgba(255,110,30,.12) 46%, transparent 74%);
  will-change:transform, opacity;
}
.hero-th{
  font-weight:500; font-size:clamp(21px, 3.1vw, 40px); letter-spacing:-.3px; margin:0 0 14px;
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.hero-en{
  font-family:var(--ff-en); font-weight:600; line-height:1.02;
  font-size:clamp(28px, 5.4vw, 74px); letter-spacing:.02em; margin:0;
  background:linear-gradient(180deg,#fff8ec 30%,#ffcf8e 70%,#ff9331);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-en span{ display:block }
.hero-year{
  display:block; font-family:var(--ff-mono); font-style:normal; font-weight:300;
  font-size:clamp(13px,1.3vw,17px); letter-spacing:.7em; color:var(--gold); margin-top:16px; padding-left:.7em;
}
.hero-date{ display:flex; align-items:center; justify-content:center; gap:22px; margin:clamp(20px,3.4vh,38px) 0 16px }
.hero-date .rule{ height:1px; width:min(150px,18vw); background:var(--line-strong) }
.date-text{ font-weight:600; font-size:clamp(18px,2.1vw,28px); margin:0 }
.hero-meta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.hero-meta i{ color:var(--line-strong); font-style:normal }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:clamp(22px,3.4vh,40px) }
.scroll-cue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px }
.scroll-cue i{ display:block; width:1px; height:52px; background:linear-gradient(var(--ink), transparent); animation:cue 2.1s infinite }
@keyframes cue{ 0%{transform:scaleY(.15); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 46%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ============================================================
   TOURNAMENT / GALLERY
   ============================================================ */
.venue-card{
  margin-top:26px; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper-2);
}
.venue-card p{ margin:.5rem 0 0; line-height:1.8; font-size:15px }

.shot{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--paper-2);
}
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1) }
.shot:hover img{ transform:scale(1.045) }
.shot-wide{ aspect-ratio:21/9 }
.shot:not(.shot-wide){ aspect-ratio:4/5 }
.shot figcaption{
  position:absolute; left:14px; bottom:12px; background:rgba(10,7,8,.78);
  backdrop-filter:blur(6px);
  padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong);
}

.marquee{ margin-top:clamp(60px,7vw,110px); border-block:1px solid var(--line); padding:18px 0; overflow:hidden }
.marquee-track{ display:flex; gap:34px; white-space:nowrap; width:max-content }
.marquee-track span{
  font-family:var(--ff-en); font-size:clamp(20px,2.6vw,36px); color:var(--ink-soft); font-weight:300;
}
.ticker-strip{ margin-top:38px; border-block:1px solid var(--line); padding:12px 0; overflow:hidden }
.ticker-track{ display:flex; gap:26px; white-space:nowrap; width:max-content }
.ticker-track span{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; color:var(--muted) }

/* ============================================================
   QUEST — PASSPORT + TIMELINE
   ============================================================ */
.section-quest{ padding:var(--pad-sec) 0; background:linear-gradient(180deg,transparent, rgba(26,17,20,.72) 22%, transparent 88%) }
.quest-head{ margin-bottom:clamp(50px,7vw,90px) }
.quest-head .section-title{ font-family:var(--ff-en); font-weight:300; letter-spacing:.06em; font-size:clamp(38px,6.5vw,92px) }

/* the passport is blown up over the timeline column during the intro, so it
   has to paint above the rail — the rail sits later in the DOM and would
   otherwise draw its line straight across the card */
.passport-sticky{ position:sticky; top:110px; padding-bottom:40px; z-index:5 }
.passport-scaler{ position:relative; transform-origin:center center; will-change:transform }

/* the passport is one printed artwork now (assets/img/card-bg.png, 1600x667):
   the logo, the four mission plates and the two coupons on the right are all
   baked into the image. the only live layers are the stamps, and they are
   pinned to the art by the pixel coordinates measured off that exact file, so
   they keep landing inside the printed circles at any size. */
.passport{
  position:relative; display:block; overflow:hidden;
  border-radius:14px; aspect-ratio:1600/667;
  box-shadow:0 40px 90px -50px #000, 0 0 60px -22px rgba(255,120,40,.5);
}
.pp-art{
  display:block; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}

/* the small circle printed beside NO.XXX = registration confirmed.
   it is only ~44px wide on the artwork, far too small for the ISSUED wordmark,
   so the mark it takes is a tick pressed straight onto the circle */
.pp-seal{
  position:absolute; left:8.66%; top:1.80%; width:3.25%; height:7.80%;
  border-radius:50%; opacity:0;
  transform:rotate(-14deg) scale(.4); transform-origin:50% 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l5 5.2L19.5 6.4' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% 64% no-repeat,
    radial-gradient(circle at 34% 28%, #ffbe6b, #d8451a 72%);
  box-shadow:0 0 0 .1em rgba(255,255,255,.92), 0 3px 8px rgba(0,0,0,.55);
}
.pp-seal.is-on{ opacity:1; transform:rotate(-14deg) scale(1) }

/* the four white circles on the artwork, in source pixels (1600x667):
   diameter 177, centred at (737,132) (999,132) (737,447) (999,447).
   left/top below are those centres minus half the box, as percentages -
   no transform, because gsap drives the transform of the stamp inside. */
.pp-stamps{ position:absolute; inset:0; pointer-events:none }
.stamp-slot{
  position:absolute; width:11.06%; height:26.39%;
  display:grid; place-items:center;
}
.stamp-slot[data-stamp="1"]{ left:40.53%; top:6.60% }
.stamp-slot[data-stamp="2"]{ left:56.91%; top:6.60% }
.stamp-slot[data-stamp="3"]{ left:40.53%; top:53.90% }
.stamp-slot[data-stamp="4"]{ left:56.91%; top:53.90% }

/* the stamp is a stamped mark, not a styled box - the tick, the ring and the
   PASS wordmark all live in the artwork so they press on as one piece */
.stamp{
  display:block; width:90%; aspect-ratio:1/1;
  opacity:0; transform:scale(2.4) rotate(-25deg);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.stamp img{ width:100%; height:100%; object-fit:contain }

.pp-note{ margin:12px 0 0; text-align:center; font-size:10px; color:var(--muted) }

/* the coupons on the right are part of the same print run - the stub just
   re-shows the strip to the right of the printed tear line (x=1229 of 1600),
   which is why its width and background-size are locked to that ratio */
.passport-stub{
  position:absolute; top:0; right:0; width:23.19%; height:100%; z-index:2;
  border-radius:0 14px 14px 0;
  background:url('../img/card-bg.png') 100% 50%/431.27% 100% no-repeat;
  transform-origin:0% 50%; will-change:transform;
  transition:box-shadow .5s ease;
}
/* torn free - it only shifts a little and stays lying next to the passport */
.passport.is-torn ~ .passport-stub{
  box-shadow:0 18px 34px -20px rgba(0,0,0,.95), 0 0 26px -12px rgba(255,120,40,.55);
}
/* the perforation is printed on the artwork itself, so nothing is drawn here -
   the element stays because the tear timeline still keys off it */
.perforation{ display:none }

.passport-hint{ text-align:center; margin-top:20px; transition:opacity .4s }

/* shortcuts to the 6 spots — they ride under the passport and only wake up
   once it has finished docking to the left, so the intro stays uncluttered */
.quest-jump{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:14px;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
.passport-sticky.is-docked .quest-jump{ opacity:1; transform:none; pointer-events:auto }

.qjump{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:9px 10px; text-align:left;
  font-family:var(--ff-th); font-weight:300; color:var(--ink-soft);
  background:rgba(255,255,255,.02);
  border:1px solid var(--line); border-radius:12px;
  cursor:pointer; transition:color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}
.qjump-no{ font-size:9px; letter-spacing:.16em; color:var(--muted); transition:color .3s ease }
.qjump-name{ font-size:11.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% }

.qjump:hover{ border-color:var(--gold-soft); color:var(--ink); transform:translateY(-2px) }
.qjump:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* a spot already stamped keeps a quiet ember tint */
.qjump.is-done{ color:var(--ink); border-color:var(--gold-soft) }
.qjump.is-done .qjump-no{ color:var(--gold-soft) }

/* the spot currently on screen lights up */
.qjump.is-active{
  color:#fff; border-color:var(--gold);
  background:linear-gradient(140deg, rgba(255,162,60,.22), rgba(255,95,31,.08));
  box-shadow:0 0 0 1px rgba(255,162,60,.25), 0 10px 30px -14px rgba(255,95,31,.9);
  transform:translateY(-2px);
}
.qjump.is-active .qjump-no{ color:var(--gold) }

/* the light itself — a soft bloom that breathes while the spot is active */
.qjump-glow{
  position:absolute; inset:-40% -20%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 70% at 22% 50%, rgba(255,162,60,.55), transparent 70%);
  opacity:0; transition:opacity .45s ease;
}
.qjump.is-active .qjump-glow{ opacity:1; animation:qjumpBreathe 2.6s ease-in-out infinite }
@keyframes qjumpBreathe{
  0%,100%{ opacity:.55; transform:scale(1) }
  50%{ opacity:1; transform:scale(1.12) }
}

/* one-shot sweep of light the moment a spot becomes the active one */
.qjump.is-active::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:qjumpSweep .85s ease-out 1;
}
@keyframes qjumpSweep{ to{ transform:translateX(120%) } }

/* timeline */
.timeline{ position:relative; padding-left:clamp(0px,3vw,46px) }
.timeline-rail{
  position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line);
  display:none;
}
.timeline-rail i{
  position:absolute; top:0; left:0; width:100%; height:0; display:block;
  background:linear-gradient(180deg,var(--gold),var(--ember)); box-shadow:0 0 12px rgba(255,95,31,.8);
}
@media (min-width:992px){ .timeline-rail{ display:block } }

.timeline-spacer{ height:0 }
@media (min-width:992px){ .timeline-spacer{ height:74vh } }

.qstep{ padding:clamp(40px,6vw,90px) 0; border-bottom:1px solid var(--line) }
.qstep:last-child{ border-bottom:0 }
.qstep-head{ display:flex; gap:18px; align-items:flex-start }
.qstep-no{
  font-family:var(--ff-mono);
  font-size: 45px;
  color:var(--gold);
  flex:0 0 auto;
  width: 80px;
  height: 80px;
  border:1px solid var(--gold-soft);
  border-radius:50%;
  display:grid;
  place-items:center;
  letter-spacing:.06em;
  background:radial-gradient(closest-side, rgba(255,120,40,.14), transparent);
}
.qstep-head h3{ font-weight:600; font-size:clamp(20px,2.3vw,30px); margin:.35rem 0 .3rem; line-height:1.35 }
.qstep-sub{ color:var(--muted); font-size:14px; margin:0 }
.qstep-shot{
  margin:26px 0 26px; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; position:relative; background:var(--paper-2);
}
/* the booth renders run from 3:2 to nearly 2:1 with signage out to the
   edges, so each one keeps its own shape; width/height on the <img>
   reserves the box before the lazy load lands */
.qstep-shot img{ display:block; width:100%; height:auto }
.qstep-shot figcaption{ position:absolute; left:14px; bottom:12px; background:rgba(10,7,8,.78); backdrop-filter:blur(6px); padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong) }

ul.tick, ol.steps, ol.rule-list{ margin:0; padding:0; list-style:none; counter-reset:s }
ul.tick li, ol.steps li, ol.rule-list li{
  position:relative; padding-left:30px; margin-bottom:12px; font-size:15px; line-height:1.85; color:var(--ink-soft);
}
ul.tick li b, ol.steps li b, ol.rule-list li b{ color:var(--ink); font-weight:600 }
ul.tick li::before{ content:''; position:absolute; left:6px; top:12px; width:8px; height:8px; border:1px solid var(--gold); border-radius:50% }
ol.steps li, ol.rule-list li{ counter-increment:s }
ol.steps li::before, ol.rule-list li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:2px;
  font-family:var(--ff-mono); font-size:11px; color:var(--gold);
}
.reward-line{
  display:inline-block; margin-top:18px; padding:10px 20px; border-radius:999px;
  border:1px solid var(--gold); color:var(--gold); font-weight:500; font-size:14px;
  background:rgba(255,162,60,.06);
}
.wanted{
  margin:0 0 26px; padding:22px 24px; border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--paper-2); font-size:16px; line-height:1.9; color:var(--ink-soft); font-weight:300;
}
.partner-box{ padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2) }
.pill{
  display:inline-block; margin-left:8px; padding:2px 12px; border-radius:999px;
  background:linear-gradient(120deg,var(--gold),var(--ember)); color:#1a0b04;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em;
}
.reward-card{ height:100%; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2) }
.reward-card-alt{
  background:linear-gradient(150deg,#2a1108,#150a06); border-color:var(--gold-soft);
  box-shadow:inset 0 0 60px -30px rgba(255,120,40,.8);
}
.reward-card-alt .mono-label{ color:var(--gold) }
.reward-card p{ font-size:14.5px; line-height:1.85; margin:0 }
.reward-big{ font-weight:600; font-size:clamp(20px,2.2vw,28px) !important; margin:.5rem 0 .6rem !important }

/* the check-in perk callout and the turn-in checklist */
.perk-note{
  margin-top:22px; padding:20px 24px; border:1px solid var(--gold-soft); border-radius:var(--radius);
  background:linear-gradient(150deg,#2a1108,#150a06);
  box-shadow:inset 0 0 60px -30px rgba(255,120,40,.8);
}
.perk-note .mono-label{ color:var(--gold) }
.perk-note p{ margin:.6rem 0 0; font-size:14.5px; line-height:1.85; color:var(--ink-soft) }
.perk-note b{ color:var(--ink); font-weight:600 }
.perk-note small{ display:block; margin-top:.7rem; font-size:12.5px; line-height:1.7; color:var(--muted) }
ul.done{ margin:0; padding:0; list-style:none }
ul.done li{
  position:relative; padding-left:30px; margin-bottom:10px;
  font-size:15px; line-height:1.85; color:var(--ink-soft);
}
ul.done li::before{ content:'✓'; position:absolute; left:5px; top:0; color:var(--gold); font-weight:600 }
.turn-in-line{ margin:1.1rem 0 0; font-size:15px; line-height:1.85; color:var(--ink-soft) }
.turn-in-line b{ color:var(--ink); font-weight:600 }

/* ============================================================
   PRIZES / FLAGS
   ============================================================ */
.section-prizes{ background:rgba(16,11,13,.7); border-block:1px solid var(--line) }
.prize-total{
  font-family: var(--ff-th);
  font-weight:600;
  font-size:clamp(44px,8vw,120px);
  line-height:1;
  margin:.2rem 0 0;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff6e8 22%,#ffc178 62%,#ff7a22);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.flags{
  display:flex; justify-content:center; align-items:flex-start; gap:clamp(12px,3vw,52px);
  margin:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px); perspective:1400px;
}
.flag{position:relative;flex:0 1 auto;/* width:20%; */transform-style:preserve-3d}
.flag-1{/* width:26%; */z-index:3}
.flag-cloth{
  position:relative; overflow:hidden; transform-origin:top center;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.6));
}
.flag-cloth img{ width:100% }
.flag-pole{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  width:min(88%,100%); height:8px; border-radius:4px;
  background:linear-gradient(180deg,#c69a55,#5e3c19); border:1px solid rgba(255,180,110,.35);
  box-shadow:0 0 22px -6px rgba(255,140,50,.6);
}
.flag-1 .flag-pole{ height:10px }
.sheen{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light;
  background:linear-gradient(102deg, transparent 42%, rgba(255,255,255,.9) 49%, rgba(190,170,110,.42) 53%, transparent 60%);
  background-size:300% 100%; background-position:-60% 0; opacity:.9;
}
/* cloth mode: the WebGL fabric carries the artwork, so the flat print, its
   clip and its CSS sheen step aside — and the box has to stop clipping,
   since the billow reaches well past the flag's own rectangle */
.cloth-out{ position:absolute; pointer-events:none; z-index:1 }
.flag-cloth.on-cloth{ overflow:visible; filter:none }
.flag-cloth.on-cloth .sheen{ display:none }
/* ============================================================
   BRACKET
   the joins are drawn, not decorative: every card sends a stub into
   the gap, each pair is tied by one vertical bar, and the bar hands
   the next round a line at exactly the height its card sits at.
   space-around inside every pair is what keeps those heights true.
   ============================================================ */
.bracket{ margin-top:clamp(6px,1.6vw,22px) }
.bracket-scroll{ overflow-x:auto; overflow-y:hidden; padding-bottom:12px }
.bracket-grid{
  --bgap:clamp(16px,2.4vw,38px);
  display:grid; grid-template-columns:repeat(3,minmax(228px,1fr));
  gap:calc(var(--bgap) * 2); align-items:stretch; min-width:760px;
}
.bracket-col{ display:grid; grid-template-rows:auto 1fr; gap:clamp(14px,2vw,26px) }
.bracket-round{
  margin:0; text-align:center; color:var(--gold);
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.bracket-body{ display:flex; flex-direction:column }
.bracket-body-solo{ justify-content:center }
.bracket-pair{ flex:1 1 0; display:flex; flex-direction:column; justify-content:space-around; position:relative }

.bm{
  position:relative; background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px 12px;
  /* the air between cards is a margin, not a gap: space-around then keeps
     every card centred on the quarter marks the joins are drawn to */
  margin-block:9px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s, box-shadow .4s;
}
.bm:hover{ transform:translateY(-3px); border-color:var(--gold-soft); box-shadow:0 24px 44px -30px rgba(255,95,31,.6) }
.bm-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:9px; margin-bottom:4px; border-bottom:1px dotted var(--line);
}
.bm-time{ color:var(--gold) }
.bm-team{ display:flex; align-items:center; gap:10px; padding:7px 0 }
.bm-seed{
  flex:0 0 auto; min-width:36px; text-align:center; font-size:10px; color:var(--muted);
  border:1px solid var(--line); border-radius:7px; padding:3px 6px;
}
.bm-name{ font-size:14.5px; color:var(--ink-soft) }
.bm-vs{
  display:flex; align-items:center; gap:10px; font-size:9.5px; color:var(--muted);
}
.bm-vs::before, .bm-vs::after{ content:''; flex:1 1 auto; height:1px; background:var(--line) }

.bm-final{
  border-color:var(--gold);
  background:linear-gradient(150deg,#2a1108,#150a06);
  box-shadow:inset 0 0 70px -34px rgba(255,120,40,.9);
}
.bm-final .bm-name{ color:var(--ink); font-weight:400 }
.bm-final .bm-seed{ border-color:var(--gold-soft); color:var(--gold) }
.bm-final:hover{ border-color:var(--gold); box-shadow:inset 0 0 70px -34px rgba(255,120,40,.9), 0 30px 60px -34px rgba(255,95,31,.75) }
.bm-foot{
  margin:12px 0 0; padding-top:10px; text-align:center; color:var(--gold);
  border-top:1px dotted var(--gold-soft);
}

/* the joins */
.bracket-col:not(.bracket-col-end) .bm::after{
  content:''; position:absolute; top:50%; right:calc(var(--bgap) * -1);
  width:var(--bgap); height:1px; background:var(--line-strong);
}
.bracket-col:not(.bracket-col-end) .bracket-pair::after{
  content:''; position:absolute; top:25%; bottom:25%; right:calc(var(--bgap) * -1);
  border-right:1px solid var(--line-strong);
}
.bracket-col:not(.bracket-col-end) .bracket-pair::before{
  content:''; position:absolute; top:50%; right:calc(var(--bgap) * -2);
  width:var(--bgap); height:1px; background:var(--line-strong);
}

/* the 3rd-place match sits outside the tree - it is played off the two
   semi-final losers, so hanging it on the bracket would draw a lie */
.third-strip{
  margin-top:clamp(26px,4vw,48px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:12px clamp(20px,3vw,40px); text-align:center;
  padding:18px 22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2);
}
.third-strip > .mono-label{ color:var(--gold) }
.third-line{ display:flex; align-items:center; gap:14px; font-size:clamp(14px,1.5vw,16px); color:var(--ink) }
.third-line i{ font-style:normal; font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em; color:var(--muted) }
.third-note{ margin:0; font-size:13px; color:var(--muted) }

/* ============================================================
   AGENDA
   ============================================================ */
.agenda-head{ position:sticky; top:120px }
.agenda-date{ font-family:var(--ff-mono); font-size:13px; letter-spacing:.2em; margin:22px 0 26px; color:var(--ink) }
.live-btn{
  display:inline-flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line-strong); border-radius:999px; padding:.6rem .7rem .6rem 1.3rem; font-size:14px;
  transition:.35s;
}
.live-btn b{ background:var(--ember-deep); color:#fff; border-radius:999px; padding:.35rem 1rem; font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em }
.live-btn:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 16px 34px -20px rgba(255,95,31,.8) }

.agenda-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);backdrop-filter: blur(3px);/* border-radius: 16px; *//* background-color: rgb(11 11 11 / 40%); */}
.agenda-item{
  display:flex;
  align-items:baseline;
  gap:clamp(14px,3vw,44px);
  padding:22px 6px;
  border-bottom:1px solid var(--line);
  transition:background .4s, padding-left .4s;
}
.agenda-item:hover{ background:rgba(255,162,60,.06); padding-left:18px }
.agenda-item .time{ flex:0 0 auto; width:150px; color:var(--gold); white-space:nowrap; font-family:var(--ff-mono); font-size:13px }
.agenda-item .what{ font-size:clamp(15px,1.6vw,19px); font-weight:300 }
.agenda-item.is-highlight{ background:rgba(255,120,40,.08) }
.agenda-item.is-highlight .what{ font-weight:500 }
.agenda-item.is-final .what{ font-weight:600 }
.agenda-item.is-final::after{
  content:'FINAL'; font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em;
  margin-left:auto; border:1px solid var(--gold); color:var(--gold); border-radius:999px; padding:3px 10px;
}

/* ============================================================
   GIVEAWAY
   ============================================================ */
.section-giveaway{ background:rgba(16,11,13,.7); border-block:1px solid var(--line) }
/* the one line under the shout that tells people why to stay - it has to
   carry across the room, not read like body copy */
.giveaway-lead{ max-width:900px; font-weight:400; font-size:clamp(20px,2.2vw,30px); line-height:1.7 }
.giveaway-shout{
  font-weight:700; font-size:clamp(38px,8.4vw,124px); line-height:.98; margin:.3rem 0 1.4rem; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff6e8 28%,#ffbe72 68%,#ff6f1c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.giveaway-shout span{ display:block }
.item-grid .item-card{
  height:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; text-align:center; transition:.4s cubic-bezier(.2,.7,.3,1);
}
.item-card:hover{ transform:translateY(-6px); box-shadow:0 26px 46px -30px rgba(255,95,31,.55); border-color:var(--gold-soft) }
.item-card img{ width:104px; margin:0 auto 14px; border-radius:14px; border:1px solid var(--line); background:var(--paper-3) }
.item-card p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.item-card-more{
  display:grid;
  place-items:center;
  color: #ffe9df;
  border-color:rgba(255,180,110,.5);
  background:linear-gradient(150deg,var(--gold),var(--ember) 60%,var(--ember-deep));
}
.item-card-more span{ font-size:14px; line-height:1.7 }

.char-card{
  margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--paper-2); position:relative;
  /* six across on desktop: the captions run to different lengths, so the
     cards are stretched to a common height and the bottom edge stays level */
  height:100%; display:flex; flex-direction:column;
}
.char-card img{width:100%;aspect-ratio: 3/4.6;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.char-card:hover img{ transform:scale(1.05) }
.char-card figcaption{
  padding:13px 14px; font-size:13.5px; line-height:1.5; border-top:1px solid var(--line);
  background:var(--paper-2); flex:1 1 auto;
}
@media (min-width:1200px){ .char-grid .char-card figcaption{ font-size:13px } }
/* the six costumes are not one pool - they are three separate ways of
   walking out with one, so each pair carries the condition that wins it */
.pet-set{
  height:100%; display:flex; flex-direction:column; gap:16px;
  padding:18px 18px 20px; border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(255,255,255,.014);
}
.pet-set-head{ padding-bottom:13px; border-bottom:1px dotted var(--line) }
.pet-set-title{
  margin:0; color:var(--gold); font-weight:600; line-height:1.35;
  font-size:clamp(15px,1.55vw,18px); letter-spacing:.01em;
}
.pet-set-sub{ margin:5px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-soft) }
.pet-set .char-grid{ margin-top:auto }

.gadget-shot{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-2) }
.gadget-video{ position:relative; aspect-ratio:16/9; background:#000; box-shadow:0 40px 80px -48px #000, 0 0 60px -34px rgba(255,120,40,.55) }
.gadget-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
.remark-box{
  margin-top:22px; padding:18px 20px; border-left:3px solid var(--ember); background:var(--paper-2);
  border-radius:0 12px 12px 0;
}
.remark-box p{ margin:0; font-size:13px; line-height:1.85; color:var(--ink-soft) }

/* ============================================================
   CONCERT
   ============================================================ */
.poster{
  margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--paper-2); box-shadow:0 50px 90px -50px #000, 0 0 70px -34px rgba(255,120,40,.6);
}
.concert-name{
  font-family:var(--ff-en);
  font-weight:600;
  font-size: clamp(52px,10vw,140px);
  line-height:.95;
  margin:.2rem 0 1.2rem;
  letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff8ee 30%,#ffc98a 70%,#ff8a2a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.concert-meta{ display:flex; gap:44px; flex-wrap:wrap; margin-top:30px }
.concert-meta div{ display:flex; flex-direction:column; gap:8px }
.concert-meta b{ font-weight:500; font-size:16px }

/* ============================================================
   RULES + FOOTER
   ============================================================ */
.section-rules{ background:rgba(16,11,13,.7); border-top:1px solid var(--line) }
.rule-card{ height:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,3vw,42px) }
.remark-final{ text-align:center; margin-top:40px; font-size:13px; color:var(--muted) }

.footer{ padding:clamp(70px,9vw,130px) 0 60px; border-top:1px solid var(--line); background:rgba(10,7,8,.82) }
.footer-logo{ width:96px; margin:0 auto 26px; filter:drop-shadow(0 10px 30px rgba(255,95,31,.5)) }
.footer-title{ font-family:var(--ff-en); font-weight:300; font-size:clamp(24px,3.6vw,50px); line-height:1.15; margin:0 0 18px }
.footer-date{ margin-bottom:34px }
.footer-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.footer-note{ margin:44px 0 0; font-size:12px; color:var(--muted) }

/* ============================================================
   FLOATING PROMO - lucky draw badge, bottom left
   it rides below the nav overlay (z 120) so opening the menu
   buries it, and can be dismissed for the rest of the visit
   ============================================================ */
.float-promo{
  position:fixed; left:clamp(14px,2.4vw,30px); bottom:clamp(14px,2.4vw,30px); z-index:110;
  width:clamp(118px,11.5vw,150px);
  opacity:0; transform:translateY(18px) scale(.86); pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.float-promo.is-ready{ opacity:1; transform:none; pointer-events:auto }
.float-promo.is-gone{ opacity:0; transform:translateY(14px) scale(.86); pointer-events:none }

.float-promo-link{
  display:block; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,180,110,.4);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9), 0 0 0 0 rgba(255,95,31,.4);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
  animation:promo-bob 4.5s ease-in-out infinite;
}
.float-promo-link img{ display:block; width:100%; height:auto }
.float-promo-link:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 50px -16px rgba(0,0,0,.95), 0 0 0 5px rgba(255,95,31,.14);
}
.float-promo-link:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }

/* the badge breathes just enough to catch the eye without nagging */
@keyframes promo-bob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }

.float-promo-close{
  position:absolute; top:-9px; right:-9px; width:26px; height:26px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,180,110,.45); border-radius:50%;
  background:rgba(16,11,13,.92); cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.9);
  transition:background .3s ease, transform .3s ease;
}
.float-promo-close img{ display:block; width:13px; height:auto }
.float-promo-close:hover{ background:var(--ember); transform:scale(1.08) }
.float-promo-close:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

@media (max-width: 575.98px){
  /* the menu button owns the bottom right on phones - keep the badge small
     so the two never crowd the same thumb zone */
  .float-promo{ width:100px; bottom:14px; left:12px }
}

@media (prefers-reduced-motion: reduce){
  .float-promo, .float-promo-link, .float-promo-close{ transition:none }
  .float-promo-link{ animation:none }
}

/* ============================================================
   FLOATING MENU — button bottom right, full-screen overlay
   the page is long, so the menu is always one thumb away and
   opens over everything rather than pushing the layout around
   ============================================================ */
.fab-menu{
  position:fixed; right:clamp(16px,2.4vw,30px); bottom:clamp(16px,2.4vw,30px); z-index:130;
  width:60px; height:60px; padding:0; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:linear-gradient(140deg, var(--gold), var(--ember) 55%, var(--ember-deep));
  border:1px solid rgba(255,180,110,.55); color:#1a0b04; cursor:pointer;
  box-shadow:0 18px 40px -16px rgba(255,95,31,.85), 0 0 0 0 rgba(255,95,31,.45);
  opacity:0; transform:translateY(18px) scale(.85); pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.fab-menu.is-ready{ opacity:1; transform:none; pointer-events:auto }
.fab-menu:hover{ box-shadow:0 22px 50px -14px rgba(255,95,31,1), 0 0 0 6px rgba(255,95,31,.12) }
.fab-menu:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
.fab-bars{ display:grid; gap:4px; width:20px }
.fab-bars i{
  display:block; height:2px; width:100%; border-radius:2px; background:#1a0b04;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .25s ease;
}
.fab-label{ font-size:7.5px; letter-spacing:.18em; color:#2a1108 }
/* the bars fold into a cross while the overlay is up */
.fab-menu.is-open .fab-bars i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.fab-menu.is-open .fab-bars i:nth-child(2){ opacity:0 }
.fab-menu.is-open .fab-bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.fab-menu.is-open .fab-label{ opacity:0 }

.nav-overlay{
  position:fixed; inset:0; z-index:120; visibility:hidden; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.nav-sheet{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 82% 88%, rgba(255,95,31,.18), transparent 55%), rgba(8,5,6,.94);
  backdrop-filter:blur(14px) saturate(1.1);
}
.nav-inner{
  position:relative; width:min(1100px, 100%); max-height:100dvh; overflow-y:auto;
  padding:clamp(58px,7vh,88px) clamp(20px,5vw,60px) clamp(70px,8vh,96px);
  /* the menu keeps its own scroll for short screens, but never draws a bar —
     a scrollbar cutting through the overlay breaks the full-screen feel */
  overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none;
}
.nav-inner::-webkit-scrollbar{ width:0; height:0 }
.nav-kicker{ margin-bottom:clamp(14px,2.5vh,26px) }

.nav-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.nav-jump{
  display:flex; align-items:baseline; gap:clamp(12px,2.5vw,30px);
  padding:clamp(11px,1.8vh,19px) 4px; border-bottom:1px solid var(--line);
  text-decoration:none; color:var(--ink); position:relative;
  transition:padding-left .45s cubic-bezier(.2,.7,.3,1), color .3s ease, background .4s ease;
}
.nav-jump::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:linear-gradient(90deg, var(--gold), var(--ember)); transition:width .5s cubic-bezier(.2,.7,.3,1);
}
.nav-jump:hover, .nav-jump:focus-visible{ padding-left:18px; color:var(--gold); background:rgba(255,162,60,.05) }
.nav-jump:hover::after, .nav-jump:focus-visible::after{ width:100% }
.nav-no{ flex:0 0 auto; font-size:10px; color:var(--muted); transition:color .3s ease }
.nav-jump:hover .nav-no{ color:var(--ember) }
.nav-name{ font-size:clamp(19px,3.2vw,34px); font-weight:300; line-height:1.25; flex:1 1 auto }
.nav-en{ flex:0 0 auto; font-size:9.5px; text-align:right }
/* the section you are standing in is marked, so the menu doubles as a map */
.nav-jump.is-here{ color:var(--gold) }
.nav-jump.is-here .nav-no, .nav-jump.is-here .nav-en{ color:var(--ember) }
.nav-jump.is-here::after{ width:100% }

.nav-foot{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,4vh,40px) }

@media (max-width:575.98px){
  .nav-en{ display:none }
  .fab-menu{ width:54px; height:54px }
}

/* ============================================================
   ANIMATION HELPERS
   ============================================================ */
.reveal, .split-line, .qstep, .item-card, .char-card, .agenda-item{ will-change:transform, opacity }
.split-line{ display:block; overflow:hidden }
/* .hero-en paints its text with a gradient clipped to the glyphs, so the glyphs
   have to stay in its own layer — will-change on the inner .split-line promotes
   them into a layer of their own and the gradient ends up clipped to nothing,
   which is why the headline vanished. The hero lines are not animated any more,
   so nothing here needs promoting. */
#hero .split-line{ will-change:auto }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991.98px){
  /* compact HUD passport that rides along while the quest is on screen */
  .passport-sticky{
    position:fixed; top:58px; left:10px; right:10px; z-index:30; padding:0; margin:0;
    opacity:0; transform:translateY(-14px); pointer-events:none;
    transition:opacity .45s ease, transform .45s ease;
  }
  .passport-sticky.is-live{ opacity:1; transform:none }
  /* the artwork keeps its own proportions on the HUD - it is one printed card,
     so nothing gets stripped out, it just rides along smaller */
  .passport{ box-shadow:0 20px 40px -28px rgba(0,0,0,.55) }
  .passport-scaler{ max-width:460px; margin-inline:auto }
  .pp-note{ display:none }
  .passport-hint{ display:none }
  /* the strip needs its own ground on mobile — it floats over the page */
  .quest-jump{
    grid-template-columns:repeat(6,1fr); gap:5px; margin-top:8px; padding:6px;
    background:rgba(10,7,8,.88); backdrop-filter:blur(10px);
    border:1px solid var(--line); border-radius:12px;
  }
  .qjump{ align-items:center; padding:7px 4px; border-radius:10px; background:rgba(10,7,8,.82) }
  .qjump-name{ display:none }
  .qjump-no{ font-size:10px }
  .quest-layout .col-lg-7{ margin-top:0 }
  .quest-layout{ padding-inline:12px }
  .flags{ gap:8px }
  .flag{ width:30% } .flag-1{ width:36% }
  .agenda-head{ position:static }
  .agenda-item{ flex-direction:column; gap:6px }
  .agenda-item.is-final::after{ margin-left:0 }
}
@media (max-width:767.98px){
  .bracket-grid{ grid-template-columns:1fr; min-width:0; gap:30px }
  .bracket-body{ gap:14px }
  .bracket-pair{ flex:0 0 auto; gap:14px }
  .bm{ margin-block:0 }
  .bm::after, .bracket-pair::before, .bracket-pair::after{ display:none }
}
@media (max-width:575.98px){
  .brand-sub{ display:none }
  .brand-mark{ width:34px; height:34px }
  .hero-date{ gap:12px }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .quest-jump{ opacity:1; transform:none; pointer-events:auto }
}

/* --- scroll-driven video backdrop ---------------------------- */
/* one plate per section, all cut from the same phoenix key art.
   they live under #bg-canvas so the wireframe dust still reads on top,
   and the veil above them is what keeps body copy legible */
.scene-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  --veil:.30;
}
.scene-clip{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
  opacity:0; transform:scale(1.07);
  filter:saturate(.92) contrast(1.06) brightness(.86);
  transition:opacity 1.15s cubic-bezier(.32,0,.16,1), transform 2.2s cubic-bezier(.32,0,.16,1);
  will-change:opacity, transform;
}
.scene-clip.is-active{ opacity:1; transform:scale(1) }
/* the outgoing plate keeps drifting while it fades, so the cut reads as a
   push through the city rather than a dissolve between two stills */
.scene-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 78% at 50% 10%, rgba(255,110,40,.10), transparent 68%),
    linear-gradient(180deg, rgba(10,7,8,calc(var(--veil) * .82)) 0%,
                            rgba(10,7,8,var(--veil)) 42%,
                            rgba(10,7,8,calc(var(--veil) + .12)) 100%);
}
.scene-scrim::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(118% 74% at 50% 44%, transparent 34%, rgba(10,7,8,.78) 100%);
}
/* a breath of ember light on every scene change, so the swap lands as an
   event instead of a crossfade nobody notices */
.scene-flash{
  position:absolute; inset:0; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(62% 46% at 50% 64%, rgba(255,146,64,.55), rgba(255,80,20,.14) 46%, transparent 72%);
}
.scene-flash.is-on{ animation:sceneFlash 1.25s cubic-bezier(.2,0,.2,1) }
@keyframes sceneFlash{ 0%{ opacity:0 } 16%{ opacity:.62 } 100%{ opacity:0 } }

/* with live footage behind the page the two still copies of the key art
   would only mud it up — they stay as the fallback until a frame arrives */
.has-scene-video .page-bg{ opacity:.07 }
.has-scene-video .hero::before{ opacity:.4; transition:opacity 1.3s ease }
.has-scene-video.scene-live .hero::before{ opacity:0 }
/* the panelled sections open up a little so the camera move stays visible
   through them without costing the text its contrast */
.has-scene-video .section-prizes,
.has-scene-video .section-giveaway,
.has-scene-video .section-rules{ background:rgba(16,11,13,.46) }

/* --- loading curtain ----------------------------------------- */
/* the first screen is a full-bleed video plate under a key-art hero, so it
   is held back until both are actually there. only a page whose JS ran can
   raise the curtain, so only a page whose JS ran ever drops it */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 55% at 50% 42%, #17100f 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 118%, rgba(193,31,11,.22), transparent 62%),
    var(--paper);
  overflow:hidden; --p:0;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1);
}
html:not(.is-loading) .preloader:not(.is-out){ display:none }
/* nobody scrolls into the middle of the page while the curtain is down */
html.is-loading, html.is-loading body{ overflow:hidden }
.preloader[hidden]{ display:none }
.preloader.is-out{ transform:translateY(-101%); pointer-events:none }

/* embers drifting up the whole panel, the same ones that fall through the
   scene plates once the page is running */
.pl-embers{ position:absolute; inset:0; pointer-events:none }
.pl-embers i{
  position:absolute; left:var(--x); bottom:-8%;
  width:3px; height:3px; border-radius:50%;
  background:var(--gold); opacity:0;
  box-shadow:0 0 8px 1px rgba(255,120,40,.75);
  transform:scale(var(--s));
  animation:plEmber var(--t) linear var(--d) infinite;
}
@keyframes plEmber{
  0%{ transform:translate3d(0,0,0) scale(var(--s)); opacity:0 }
  12%{ opacity:.85 }
  70%{ opacity:.5 }
  100%{ transform:translate3d(18px,-118vh,0) scale(calc(var(--s) * .3)); opacity:0 }
}

.pl-core{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,3vh,30px); padding:0 24px;
  animation:plIn 1s cubic-bezier(.2,.7,.2,1) both;
  transition:opacity .5s ease, transform .5s ease;
}
.preloader.is-out .pl-core{ opacity:0; transform:scale(.965) }
@keyframes plIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* --- the ring --- */
.pl-ring{ position:relative; width:clamp(216px,30vh,280px); aspect-ratio:1 }
.pl-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible }
.pl-track{ fill:none; stroke:rgba(255,255,255,.09); stroke-width:1.5 }
.pl-fill{
  fill:none; stroke:var(--gold); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:339.292;
  stroke-dashoffset:calc(339.292px * (1 - var(--p)));
  filter:drop-shadow(0 0 6px rgba(255,120,40,.65));
  transition:stroke-dashoffset .18s linear;
}
/* a lit arc running the rim, so the ring is alive even while the fill waits
   on an asset that has not answered yet */
.pl-sweep{
  position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 60%, rgba(255,162,60,.35) 79%, rgba(255,95,31,.9) 90%, transparent 97%);
  -webkit-mask:radial-gradient(closest-side, transparent 79%, #000 81%);
  mask:radial-gradient(closest-side, transparent 79%, #000 81%);
  animation:plSweep 2.8s linear infinite;
}
@keyframes plSweep{ to{ transform:rotate(360deg) } }
.pl-glow{
  position:absolute; inset:8%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,110,40,.42), transparent 74%);
  animation:plBreathe 3.4s ease-in-out infinite;
}
@keyframes plBreathe{ 0%,100%{ opacity:.55; transform:scale(.94) } 50%{ opacity:1; transform:scale(1.06) } }
.pl-mark{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:auto; height:64%;
  filter:drop-shadow(0 8px 26px rgba(255,90,25,.45)) saturate(1.06);
  animation:plBreathe 3.4s ease-in-out infinite;
}
/* the beat the curtain answers: the ring closes and flares once */
.pl-ring.is-full .pl-fill{ stroke:#ffd39a; filter:drop-shadow(0 0 16px rgba(255,150,60,.95)) }
.pl-ring.is-full .pl-glow{ animation:plFlare .62s cubic-bezier(.2,0,.2,1) forwards }
.pl-ring.is-full .pl-sweep{ opacity:0; transition:opacity .35s ease }
@keyframes plFlare{ 0%{ opacity:.6; transform:scale(1) } 45%{ opacity:1; transform:scale(1.5) } 100%{ opacity:0; transform:scale(2.1) } }

/* --- type + bar --- */
.pl-title{
  margin:0; text-align:center; font-family:var(--ff-en); font-weight:300;
  font-size:clamp(17px,2.2vw,25px); letter-spacing:.3em; text-indent:.3em;
  color:var(--ink-soft); line-height:1.5;
}
.pl-title em{
  display:block; font-family:var(--ff-mono); font-style:normal;
  font-size:10px; letter-spacing:.34em; text-indent:.34em; color:var(--muted); margin-top:8px;
}
.pl-bar{
  width:clamp(210px,34vw,360px); height:2px;
  background:rgba(255,255,255,.12); overflow:hidden;
}
.pl-bar i{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--ember-deep), var(--ember) 45%, var(--gold));
  box-shadow:0 0 10px rgba(255,120,40,.75);
}
.pl-status{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  width:clamp(210px,34vw,360px); margin:0;
}
.pl-status b{ font-weight:400; color:var(--gold); font-variant-numeric:tabular-nums }

/* the burning edge the curtain leaves behind as it lifts */
.pl-seam{
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 22%, #fff2df 50%, var(--ember) 78%, transparent);
  box-shadow:0 0 18px 2px rgba(255,120,40,.55);
  opacity:0; transition:opacity .3s ease;
}
.preloader.is-out .pl-seam{ opacity:1 }

@media (prefers-reduced-motion: reduce){
  .preloader, .pl-core{ transition:none }
  .pl-embers{ display:none }
  .pl-core, .pl-sweep, .pl-glow, .pl-mark{ animation:none }
  .pl-fill{ transition:none }
}