/* ============================================================
   VOLTRA · WEEKLY SCRIM
   Anti-design (NOT brutalist): chrome metallic + neon MLBB,
   but with photocopier grain + tilted stamps + scanlines
   ============================================================ */

/* === HARD RESET FOR HIDDEN ATTR === */
[hidden]{display:none!important}

/* === ROOT TOKENS — DARK ESPORTS === */
:root{
  --bg:#0a0a14;
  --bg-2:#10101e;
  --ink:#f0eee6;
  --ink-2:#bdbab0;
  --ink-3:#7a786f;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);

  /* MLBB esports neon palette */
  --gold:#ffb547;
  --gold-2:#ffd23f;
  --pink:#ff3b6b;
  --cyan:#22d3ee;
  --magenta:#d946ef;
  --red:#ef4444;
  --green:#22c55e;
  --yellow:#facc15;
  --acid:#d8ff00;
  --blue:#3b82f6;

  --paper:#f5efe3;

  --font-display:'Archivo Black', 'Bebas Neue', 'Impact', sans-serif;
  --font-mono:'Space Mono', ui-monospace, 'JetBrains Mono', monospace;
  --font-body:'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-cond:'Rajdhani', 'Bebas Neue', sans-serif;
  --font-hand:'Caveat', cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);

  --maxw:1280px;

  --nav-h:64px;
  --tabbar-h:62px;
}

/* === LIGHT MODE === */
[data-theme="light"]{
  --bg:#f5efe3;
  --bg-2:#ece4d2;
  --ink:#0a0a14;
  --ink-2:#3d3a32;
  --ink-3:#76716a;
  --line:rgba(0,0,0,.12);
  --line-2:rgba(0,0,0,.22);
}

/* === BODY + NOISE === */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 12px);
  position:relative;
}

/* Photocopy noise overlay — fixed */
.grain{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
  mix-blend-mode:overlay;
  opacity:.35;
}
/* Scanline overlay — fixed */
.scanlines{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,.025) 2px,
    rgba(255,255,255,.025) 3px
  );
  mix-blend-mode:overlay;
}

body.loading{overflow:hidden}

/* === PRELOADER — chrome metallic + tilt === */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(217,70,239,.18), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(34,211,238,.18), transparent 60%),
    var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.preloader__chrome{
  width:min(440px, 86vw);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
  position:relative;
  /* CSS safety net (anti-stuck-overlay) */
  animation:preHide 0s linear 1.9s forwards;
}
@keyframes preHide{to{opacity:0;visibility:hidden;pointer-events:none}}
.preloader.done{animation:rise .9s var(--ease) forwards}
@keyframes rise{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}

.preloader__crown{
  font-size:48px;
  background:linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 50%, #b8791d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 12px rgba(255,181,71,.4));
  animation:crownPulse 1.6s ease-in-out infinite;
}
@keyframes crownPulse{
  0%,100%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 12px rgba(255,181,71,.4))}
  50%{transform:scale(1.08) rotate(2deg);filter:drop-shadow(0 0 20px rgba(255,210,63,.7))}
}

.preloader__brand{
  font-family:var(--font-display);
  font-size:clamp(3rem, 12vw, 5.5rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1;
  background:linear-gradient(180deg, #fff 0%, #c0bdb0 40%, #6a6860 80%, #fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,59,107,.35));
}
.preloader__brand span{
  background:linear-gradient(180deg, var(--pink) 0%, var(--gold) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,59,107,.5));
}
.preloader__sub{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.preloader__bar{
  height:2px; width:100%;
  background:var(--line);
  position:relative; overflow:hidden;
  border-radius:99px;
}
.preloader__fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--cyan), var(--pink), var(--gold));
  transform-origin:left center;
  transform:scaleX(0);
  animation:fill 1.6s var(--ease) forwards;
}
@keyframes fill{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.preloader__row{
  width:100%;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
}

/* === TOP MARQUEE BAR === */
.marquee{
  position:relative; z-index:60;
  background:var(--ink);
  color:var(--bg);
  border-bottom:2px solid var(--pink);
  overflow:hidden; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px;
  font-weight:700; text-transform:uppercase;
  letter-spacing:.18em;
  padding:9px 0;
}
.marquee__track{
  display:inline-flex; gap:60px;
  padding-left:60px;
  animation:marquee 38s linear infinite;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* === NAV — integrated pill === */
.nav{
  position:sticky; top:0; z-index:50;
  width:max-content; max-width:calc(100vw - 24px);
  margin:14px auto;
  padding:8px 10px 8px 18px;
  display:flex; align-items:center; gap:8px;
  background:rgba(15,13,28,.72);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.05);
  border:1px solid var(--line-2);
  border-radius:99px;
}
.nav__brand{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display);
  font-size:18px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink);
  text-decoration:none; padding-right:6px;
}
.nav__brand-mark{
  background:linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nav__brand span span{color:var(--pink)}
.nav__brand-text{white-space:nowrap}
.nav__status{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px var(--green), 0 0 12px rgba(34,197,94,.5);
  animation:statusPulse 1.6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes statusPulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.4; transform:scale(.7)}
}
.nav__links{display:flex; gap:2px}
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
  text-decoration:none; border-radius:99px;
  transition:all .2s var(--ease);
  position:relative;
}
.nav__link:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.nav__link.is-active{background:rgba(255,59,107,.18);color:var(--pink)}
.nav__link.is-active::after{
  content:''; position:absolute;
  left:50%; bottom:-4px;
  width:5px; height:5px;
  background:var(--pink);
  border-radius:50%;
  transform:translateX(-50%);
  box-shadow:0 0 8px var(--pink);
}
.nav__icon{flex-shrink:0; opacity:.7; transition:opacity .2s var(--ease)}
.nav__link:hover .nav__icon,
.nav__link.is-active .nav__icon{opacity:1}
.nav__divider{
  width:1px; height:22px;
  background:var(--line);
  flex-shrink:0;
}
.nav__cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:linear-gradient(90deg, var(--pink), var(--magenta));
  color:#fff;
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  border-radius:99px; text-decoration:none;
  box-shadow:0 0 16px rgba(255,59,107,.4);
  transition:all .2s var(--ease);
}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(255,59,107,.6)}

.theme-toggle{
  position:relative;
  display:inline-grid; place-items:center;
  width:38px; height:38px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-2);
  cursor:pointer;
  flex-shrink:0;
}
.theme-toggle:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.theme-toggle__sun,.theme-toggle__moon{position:absolute;transition:all .3s var(--ease)}
[data-theme="dark"] .theme-toggle__sun{opacity:1;transform:rotate(0)}
[data-theme="dark"] .theme-toggle__moon{opacity:0;transform:rotate(-90deg)}
[data-theme="light"] .theme-toggle__sun{opacity:0;transform:rotate(90deg)}
[data-theme="light"] .theme-toggle__moon{opacity:1;transform:rotate(0)}

/* === MAIN CONTAINER === */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  position:relative; z-index:5;
}
main{position:relative;z-index:5}

/* === HERO === */
.hero{
  position:relative;
  min-height:88vh;
  padding:60px 0 80px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.1) contrast(1.05);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0%, rgba(10,10,20,.7) 60%),
    linear-gradient(180deg, rgba(10,10,20,.5) 0%, rgba(10,10,20,.8) 100%);
}
.hero__inner{
  position:relative; z-index:5;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
  display:flex; flex-direction:column; gap:18px;
}
.hero__crown{
  font-size:clamp(60px, 12vw, 100px);
  background:linear-gradient(180deg, var(--gold-2), var(--gold), #b8791d);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,181,71,.5));
  align-self:center;
  animation:crownPulse 2.4s ease-in-out infinite;
}
.hero__eyebrow{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:8px;
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(3.5rem, 14vw, 10rem);
  letter-spacing:-.02em;
  line-height:.9;
  text-transform:uppercase;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
}
.hero__v{
  background:linear-gradient(180deg, #fff 0%, var(--ink-2) 50%, #6a6860 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 0 rgba(217,70,239,.4));
}
.hero__olt{
  background:linear-gradient(180deg, #fff 0%, #d4d2c8 50%, #6a6860 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__em{
  font-family:var(--font-hand);
  font-style:normal;
  font-weight:700;
  font-size:clamp(1.8rem, 5vw, 3.2rem);
  text-transform:lowercase;
  color:var(--pink);
  filter:drop-shadow(0 0 16px rgba(255,59,107,.5));
}
.hero__sub{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-family:var(--font-cond);
  font-size:clamp(1.2rem, 3vw, 1.8rem);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink);
}
.hero__divider{color:var(--ink-3)}
.hero__lede{
  max-width:62ch;
  font-size:clamp(15px, 2vw, 18px);
  color:var(--ink);
  line-height:1.6;
  font-weight:500;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.hero__lede .accent{color:var(--pink);font-weight:700}
.hero__lede strong{color:var(--gold);font-weight:700}

.hero__row{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}

.hero__strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-top:32px;
  padding-top:28px;
  border-top:1px dashed var(--line-2);
  max-width:780px;
}
.stat{display:flex; flex-direction:column; gap:4px}
.stat__n{
  font-family:var(--font-mono);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:700;
  color:var(--gold);
  line-height:1;
  letter-spacing:-.02em;
}
.stat__l{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* === TAPE STRIPS / STAMPS === */
.tape{
  display:inline-block;
  padding:4px 14px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  background:var(--yellow);
  color:var(--bg);
  position:relative;
  transform:rotate(-1.5deg);
}
.tape::before,.tape::after{
  content:''; position:absolute;
  top:-3px; bottom:-3px; width:10px;
  background:rgba(0,0,0,.08);
  border-left:1px dashed rgba(0,0,0,.4);
  border-right:1px dashed rgba(0,0,0,.4);
}
.tape::before{left:-12px}
.tape::after{right:-12px}
.tape--cyan{background:var(--cyan);color:var(--bg)}
.tape--pink{background:var(--pink);color:#fff}
.tape--yellow{background:var(--yellow);color:var(--bg)}

.stamp{
  display:inline-block;
  border:3px solid var(--red);
  color:var(--red);
  padding:4px 12px;
  font-family:var(--font-display);
  font-size:11px; font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  transform:rotate(-4deg);
  position:relative;
  background:transparent;
}
.stamp::before{
  content:''; position:absolute;
  inset:-5px;
  border:1px solid var(--red);
}
.stamp--cyan{border-color:var(--cyan);color:var(--cyan)}
.stamp--cyan::before{border-color:var(--cyan)}
.stamp--yellow{border-color:var(--yellow);color:var(--yellow)}
.stamp--yellow::before{border-color:var(--yellow)}
.stamp--pink{border-color:var(--pink);color:var(--pink)}
.stamp--pink::before{border-color:var(--pink)}
.stamp--green{border-color:var(--green);color:var(--green)}
.stamp--green::before{border-color:var(--green)}
.stamp--tilt-l{transform:rotate(-8deg)}
.stamp--tilt-r{transform:rotate(6deg)}

/* === CUTOUT CARDS — sharp corners, hard shadow === */
.cutout{
  background:rgba(255,255,255,.04);
  border:2px solid var(--ink);
  padding:18px 20px;
  position:relative;
  box-shadow:5px 5px 0 var(--ink);
}
[data-theme="light"] .cutout{
  background:var(--paper);
  border-color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
.cutout--cyan{border-color:var(--cyan);box-shadow:5px 5px 0 var(--cyan)}
.cutout--pink{border-color:var(--pink);box-shadow:5px 5px 0 var(--pink)}
.cutout--yellow{border-color:var(--yellow);box-shadow:5px 5px 0 var(--yellow)}
.cutout--green{border-color:var(--green);box-shadow:5px 5px 0 var(--green)}
.cutout--gold{
  background:linear-gradient(135deg, var(--gold), var(--gold-2));
  border-color:var(--ink);
  box-shadow:8px 8px 0 var(--pink);
}
.cutout--gold .stamp{border-color:var(--ink);color:var(--ink)}
.cutout--gold .stamp::before{border-color:var(--ink)}
.cutout--gold h2,.cutout--gold p{color:var(--ink)}

/* === TYPOGRAPHY HELPERS === */
.eyebrow{
  display:inline-block;
  font-size:10px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--pink);
  padding:4px 0;
  border-bottom:2px solid var(--pink);
}
.h2{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3.4rem);
  letter-spacing:-.02em;
  line-height:1.05;
  text-transform:uppercase;
  margin-top:14px;
}
.h2 .accent{color:var(--pink)}
.underline{
  position:relative;
  display:inline-block;
  color:var(--ink);
  font-weight:700;
  z-index:0;
}
.underline::after{
  content:'';
  position:absolute;
  left:-4px; right:-4px; bottom:-2px;
  height:14px;
  background:var(--gold);
  z-index:-1;
  transform:skew(-8deg);
  opacity:.85;
}
.kbd{
  display:inline-block;
  padding:3px 9px;
  background:var(--gold);
  color:var(--bg);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  border-radius:3px;
  border:1.5px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.scribble{
  font-family:var(--font-hand);
  font-weight:700;
  color:var(--pink);
  font-style:normal;
  display:inline-block;
}
.scribble--big{font-size:clamp(2rem, 5vw, 3rem);text-transform:lowercase}
[data-theme="light"] .scribble{color:var(--pink)}
.link{text-decoration:none;border-bottom:2px solid currentColor}
.link--cyan{color:var(--cyan)}
.link--gold{color:var(--gold)}

/* === SECTION COMMON === */
section{padding:80px 0; position:relative; z-index:5}
section .container{display:flex; flex-direction:column; gap:36px}

/* === BRIEF === */
.brief__head{display:flex; flex-direction:column; gap:6px; max-width:60ch}
.brief__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
}
.brief__card{display:flex; flex-direction:column; gap:8px}
.brief__chip{
  font-size:10px; letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.brief__h{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 2.5vw, 1.8rem);
  letter-spacing:-.01em;
  text-transform:uppercase;
  line-height:1.1;
}
.brief__card p{color:var(--ink-2); font-size:14px}

.callout{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 22px;
  background:rgba(255,59,107,.08);
  border-left:4px solid var(--pink);
  border-radius:0;
}
.callout__tag{flex-shrink:0}
.callout p{font-size:14px; color:var(--ink-2); line-height:1.6}
.callout strong{color:var(--ink); font-weight:700}

/* === PRIZE === */
.prize__head{display:flex; flex-direction:column; gap:6px; max-width:60ch}
.prize__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.prize__tile{
  display:flex; flex-direction:column; gap:14px;
  padding:24px 22px;
  border:3px solid var(--ink);
  position:relative;
  box-shadow:6px 6px 0 var(--ink);
}
.prize__tile--gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#0a0a14;
  border-color:#0a0a14;
  box-shadow:6px 6px 0 var(--pink);
  transform:rotate(-1deg);
}
.prize__tile--silver{
  background:linear-gradient(135deg, #c0c5cb 0%, #e8eef3 100%);
  color:#0a0a14;
  border-color:#0a0a14;
  box-shadow:6px 6px 0 var(--cyan);
  transform:rotate(.5deg);
}
.prize__tile--bronze{
  background:linear-gradient(135deg, #b8791d 0%, #d49a4a 100%);
  color:#0a0a14;
  border-color:#0a0a14;
  box-shadow:6px 6px 0 var(--ink);
  transform:rotate(-.5deg);
}
.prize__tile--gold .prize__ribbon{color:var(--gold)}
.prize__tile--silver .prize__ribbon{color:var(--cyan)}
.prize__tile--bronze .prize__ribbon{color:var(--pink)}
.prize__crown{
  font-size:48px;
  background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.95));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.3));
}
.prize__tile--silver .prize__crown,
.prize__tile--bronze .prize__crown{
  background:linear-gradient(180deg, rgba(0,0,0,.85), #000);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prize__pos{
  font-size:11px;
  letter-spacing:.22em;
  font-weight:700;
}
.prize__amt{display:flex; align-items:baseline; gap:8px}
.prize__num{
  font-family:var(--font-display);
  font-size:clamp(3rem, 6vw, 4.5rem);
  line-height:.9;
  letter-spacing:-.02em;
}
.prize__unit{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  font-weight:700;
}
.prize__plus{
  font-size:10px;
  letter-spacing:.22em;
}
.prize__ribbon{
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:absolute;
  top:-12px; right:-8px;
  padding:6px 12px 6px 10px;
  background:#0a0a14;
  border:2px solid #0a0a14;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  transform:rotate(-4deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  color:var(--gold);
  z-index:3;
}
.prize__ribbon::before{
  content:'';
  position:absolute;
  inset:2px;
  border:1px solid currentColor;
  pointer-events:none;
  opacity:.5;
}
.prize__ribbon__dot{
  width:8px; height:8px;
  background:currentColor;
  border-radius:50%;
  box-shadow:0 0 8px currentColor;
  flex-shrink:0;
}
.prize__tile--gold .prize__ribbon{color:var(--gold)}
.prize__tile--silver .prize__ribbon{color:var(--cyan)}
.prize__tile--bronze .prize__ribbon{color:var(--pink)}
.prize__foot{
  text-align:center;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* === FORMAT === */
.format__head{display:flex; flex-direction:column; gap:6px; max-width:60ch}
.format__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.fmt{
  display:grid;
  grid-template-columns:60px 1fr auto;
  align-items:center;
  gap:16px;
  padding:18px 20px;
}
.fmt__stage{
  font-family:var(--font-display);
  font-size:32px;
  color:var(--pink);
  line-height:1;
}
.fmt--sf .fmt__stage{color:var(--cyan)}
.fmt--gf .fmt__stage{color:var(--gold)}
.fmt__body h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.fmt__body p{font-size:13px; color:var(--ink-2); margin-top:2px}
.fmt__badge{
  padding:8px 14px;
  background:var(--ink);
  color:var(--bg);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}
.fmt--gf .fmt__badge{background:var(--gold)}

.format__rules{
  list-style:none;
  padding:18px 22px;
  background:rgba(0,0,0,.3);
  border:1px solid var(--line);
  border-left:4px solid var(--cyan);
  display:flex; flex-direction:column; gap:8px;
  font-size:12px;
  letter-spacing:.04em;
}
[data-theme="light"] .format__rules{background:rgba(0,0,0,.04)}
.format__rules li{display:flex; gap:10px; align-items:flex-start}
.format__rules .kbd{flex-shrink:0}

/* === BRACKET === */
.bracket__head{display:flex; flex-direction:column; gap:6px; max-width:60ch}
.bracket__lede{color:var(--ink-2); font-size:14px; margin-top:6px}

.bracket__grid{
  display:grid;
  grid-template-columns:2fr 2fr 1.4fr;
  gap:24px;
  align-items:start;
  padding:24px;
  background:rgba(0,0,0,.25);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--pink);
  overflow-x:auto;
}
[data-theme="light"] .bracket__grid{background:var(--paper)}

.bracket__round{display:flex; flex-direction:column; gap:14px}
.bracket__rh{
  font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
  padding-bottom:8px;
  border-bottom:1px dashed var(--line-2);
}
.bracket__round--sf .bracket__rh{color:var(--cyan)}
.bracket__round--gf .bracket__rh{color:var(--gold)}

.bracket__match{
  display:flex; flex-direction:column; gap:8px;
  padding:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.bracket__match--final{
  background:linear-gradient(135deg, rgba(255,181,71,.15), rgba(255,59,107,.15));
  border:2px solid var(--gold);
  box-shadow:0 0 24px rgba(255,181,71,.2);
}
.bracket__team{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  border-left:3px solid var(--pink);
}
.bracket__team b{font-weight:700; text-transform:uppercase}
.bracket__team .mono{color:var(--ink-3);font-size:10px;letter-spacing:.18em}
.bracket__team--champ{
  background:var(--gold);
  color:var(--ink);
  border-left-color:var(--pink);
}
.bracket__crown{
  display:inline-block;
  margin-top:10px;
  align-self:center;
}

.bracket__ctas{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
}

/* === REGISTER === */
.register__panel{
  padding:40px 28px;
  display:flex; flex-direction:column; gap:18px;
  align-items:center;
  text-align:center;
  position:relative;
}
.register__h{
  font-family:var(--font-display);
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing:-.02em;
  line-height:1;
  text-transform:uppercase;
  color:var(--ink);
}
.register__p{
  max-width:60ch;
  color:var(--ink);
  font-size:15px;
  opacity:.85;
}
.register__ctas{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.register__foot{
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink);
  opacity:.7;
  margin-top:8px;
}

/* === CTA === */
.cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:0;
  cursor:pointer;
  transition:all .2s var(--ease);
}
.cta--primary{
  background:linear-gradient(90deg, var(--pink), var(--magenta));
  color:#fff;
  box-shadow:4px 4px 0 var(--ink);
  border:2px solid var(--ink);
}
.cta--primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.cta--ghost{
  background:transparent;
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--pink);
}
.cta--ghost:hover{background:var(--ink);color:var(--bg);box-shadow:4px 4px 0 var(--pink)}
.cta--big{padding:18px 32px; font-size:14px}

/* === MODALS === */
.modal{
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fadeIn .2s var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__panel{
  width:min(520px, 100%);
  max-height:90vh;
  background:var(--bg-2);
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--pink);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:pop .3s var(--ease-bounce);
}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.modal--wide .modal__panel{max-width:920px;max-height:90vh}
.modal--wide .teamlist-grid{flex:1 1 auto;overflow-y:auto;padding:4px 24px 24px}

.modal__hd{
  flex-shrink:0;
  padding:22px 24px 18px;
  border-bottom:1px dashed var(--line-2);
  display:flex; flex-direction:column; gap:6px;
}
.modal__tag{
  font-size:10px;
  letter-spacing:.22em;
  font-weight:700;
  color:var(--pink);
}
.modal__h{
  font-family:var(--font-display);
  font-size:1.6rem;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.modal__sub{
  font-size:11px;
  letter-spacing:.22em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.modal__bd{
  padding:22px 24px;
  display:flex; flex-direction:column; gap:14px;
  overflow-y:auto;
}
.modal__ft{
  flex-shrink:0;
  padding:16px 24px;
  border-top:1px dashed var(--line-2);
  display:flex; justify-content:space-between; gap:12px;
}

/* === FORMS === */
.field{display:flex; flex-direction:column; gap:6px; flex:1}
.field__l{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.field__i{
  padding:12px 14px;
  background:transparent;
  border:1px solid var(--line-2);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:14px;
  outline:none;
  border-radius:0;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field__i:focus{
  border-color:var(--pink);
  background:rgba(255,59,107,.06);
}
.field-row{display:flex; gap:12px}
.field-row .field{flex:1}

.check{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); cursor:pointer}
.check input{margin-top:3px; accent-color:var(--pink)}

.form__msg{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  min-height:18px;
}
.form__msg.is-err{color:var(--red)}
.form__msg.is-ok{color:var(--green)}
.form__actions{display:flex; gap:12px; justify-content:flex-end}

/* === BUTTONS === */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  border:2px solid var(--ink);
  background:transparent;
  color:var(--ink);
  border-radius:0;
  transition:all .2s var(--ease);
  text-decoration:none;
}
.btn--primary{
  background:var(--pink); color:#fff;
  border-color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.btn--primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn--ghost:hover{background:var(--ink); color:var(--bg)}
.btn--sm{padding:9px 14px; font-size:10px}

/* === TEAM LIST (modal--wide) === */
.teamlist-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}
.teamlist-card{
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-2);
  border-left:3px solid var(--pink);
  display:flex; flex-direction:column; gap:6px;
}
.teamlist-card.is-empty{
  border-left-color:var(--line-2);
  border-style:dashed;
  opacity:.7;
}
.teamlist-card__name{
  font-family:var(--font-display);
  font-size:1.05rem;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.teamlist-card__cap{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--cyan);
}
.teamlist-card__members{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.04em;
  color:var(--ink-2);
  line-height:1.6;
}
.teamlist-card__ts{
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:auto;
}

/* === TOAST === */
.toast{
  position:fixed; bottom:80px; left:50%;
  transform:translateX(-50%);
  z-index:500;
  padding:14px 22px;
  background:var(--ink);
  color:var(--bg);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:2px solid var(--pink);
  box-shadow:4px 4px 0 var(--pink);
  animation:toastIn .3s var(--ease-bounce), toastOut .3s var(--ease) 2.4s forwards;
}
@keyframes toastIn{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes toastOut{to{transform:translate(-50%,30px);opacity:0}}

/* === FOOTER === */
.foot{
  position:relative; z-index:5;
  background:var(--ink);
  color:var(--bg);
  padding:32px 24px;
  margin-top:60px;
}
.foot__row{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
}
.foot__l{display:flex; flex-direction:column; gap:4px}
.foot__brand{
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.foot__brand span{color:var(--pink)}
.foot__sub{font-size:10px; letter-spacing:.22em; color:var(--ink-3)}
.foot__c{text-align:center; font-size:10px; letter-spacing:.18em; color:var(--ink-2)}
.foot__r{text-align:right}
.foot__studio{
  font-family:var(--font-mono);
  font-size:11px; font-weight:700;
  letter-spacing:.18em;
  color:var(--bg);
  text-decoration:none;
  padding:8px 14px;
  border:1px solid var(--bg);
  transition:all .2s var(--ease);
  display:inline-block;
}
.foot__studio:hover{background:var(--pink); color:#fff; border-color:var(--pink)}

/* === BOTTOM TABBAR (mobile only) === */
.tabbar{
  display:none;
}

[data-theme="light"] .prize__tile{color:var(--ink)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .bracket__grid{grid-template-columns:1fr 1fr; gap:18px}
  .bracket__round--gf{grid-column:1 / -1}
}
@media (max-width:760px){
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 8px)}
  .container{padding:0 18px}
  section{padding:60px 0}

  .hero{min-height:auto;padding:36px 0 56px}
  .hero__strip{grid-template-columns:repeat(2, 1fr); padding-top:22px; gap:14px}
  .prize__grid{grid-template-columns:1fr; gap:18px}
  .prize__tile{transform:none}
  .format__list{grid-template-columns:1fr}
  .bracket__grid{grid-template-columns:1fr; padding:18px; gap:16px}
  .brief__grid{grid-template-columns:repeat(2, 1fr)}
  .foot__row{grid-template-columns:1fr; text-align:center; gap:14px}
  .foot__r{text-align:center}
  .foot__c{order:-1}
  .hero__title{font-size:clamp(3rem, 18vw, 5rem)}
  .hero__row{flex-direction:column; align-items:stretch}
  .cta{justify-content:center}
  .register__panel{padding:32px 20px}
  .field-row{flex-direction:column; gap:14px}
  .modal__ft{flex-direction:column}
  .modal__ft .btn{width:100%; justify-content:center}
}
@media (max-width:680px){
  /* mobile nav = rich glass command bar (brand + 3 icon links + divider + CTA) */
  .nav{
    position:fixed;
    top:auto;
    bottom:12px;
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:calc(100vw - 16px);
    max-width:480px;
    margin:0;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
    gap:6px;
    border-radius:24px;
    justify-content:space-between;
  }
  .nav__brand{
    display:flex;
    padding-right:4px;
    border-right:1px solid var(--line);
    margin-right:2px;
  }
  .nav__brand-text{font-size:14px; letter-spacing:.02em}
  .nav__brand-mark{font-size:16px}
  .nav__links{
    display:flex;
    flex:1;
    justify-content:space-around;
    align-items:center;
    gap:0;
    padding:0;
  }
  .nav__link{
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    text-align:center;
    font-size:9px;
    padding:6px 2px;
    letter-spacing:.06em;
    border-radius:14px;
    min-height:46px;
  }
  .nav__link span{font-size:9px;letter-spacing:.08em}
  .nav__icon{width:18px; height:18px; opacity:.85}
  .nav__link.is-active::after{width:4px;height:4px;bottom:2px}
  .nav__divider{display:none}
  .nav__cta{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:10px 14px;
    font-size:11px;
    letter-spacing:.12em;
    flex-shrink:0;
    box-shadow:0 0 16px rgba(255,59,107,.5);
  }
  .nav__cta span{display:inline}
  .tabbar{display:none}  /* nav handles mobile bottom now */
}
@media (max-width:380px){
  /* keep ALL text visible on small Android — shrink to fit, don't hide */
  .nav{padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px)); gap:4px; border-radius:20px; width:calc(100vw - 12px)}
  .nav__brand{padding-right:5px; margin-right:2px; gap:5px}
  .nav__brand-text{font-size:11px; letter-spacing:.01em}
  .nav__brand-mark{font-size:14px}
  .nav__status{width:5px; height:5px}
  .nav__links{gap:0}
  .nav__link{min-height:42px; padding:4px 1px; font-size:8px; letter-spacing:.04em; gap:2px; border-radius:12px}
  .nav__link span{font-size:8px; letter-spacing:.04em}
  .nav__icon{width:15px; height:15px}
  .nav__cta{padding:8px 10px; font-size:9px; letter-spacing:.08em; gap:3px}
  .nav__cta svg{width:12px; height:12px}
}
@media (max-width:320px){
  /* absolute minimum — Galaxy Fold cover, etc. — still show all text */
  .nav__brand-text{font-size:10px; letter-spacing:0}
  .nav__link{font-size:7px}
  .nav__link span{font-size:7px}
  .nav__cta{padding:7px 8px; font-size:8px}
  .nav__status{display:none}  /* only on absolute minimum */
}
@media (max-width:440px){
  .hero__title{font-size:clamp(2.6rem, 14vw, 4rem)}
  .hero__strip{grid-template-columns:repeat(2,1fr); gap:10px}
  .stat__n{font-size:1.4rem}
  .brief__grid{grid-template-columns:1fr}
  .prize__num{font-size:3rem}
}