/* ==========================================================================
   eSPORTZCRAAZY — Design System
   India's Ultimate Esports & Gaming Community
   --------------------------------------------------------------------------
   Naming convention : esz-block__element--modifier  (all classes prefixed esz-)
   Utilities         : u-* (layout/spacing/colour helpers only)
   State hooks       : is-* / has-* (toggled by JS, never styled standalone)
   Behaviour hooks   : data-ez-* attributes ONLY. JS never selects by class.
   Theme             : permanent DARK futuristic cyberpunk. No light mode.
   Geometry          : border-radius 0–4px ONLY. Shape comes from clip-path
                       chamfers (notched corners) — the signature device.
   Type              : Chakra Petch (display / HUD) / Barlow (body) /
                       Share Tech Mono (every numeral)
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Fonts & Tokens
   02. Reset & Base
   03. Typography primitives
   04. Layout shells, bands & asymmetric grids
   05. Buttons & chips
   06. Section headings & rules
   07. Signature devices (neon border, HUD frame, glass, scan, grid, glow)
   08. Header / Nav / Mega menu / Status bar
   09. Drawer & Ticker
   10. Hero (particle field, prize pool counter)
   11. Tournament cards & registration
   12. Games grid & game glyphs
   13. Bracket
   14. Leaderboards & tables
   15. Team & player profile cards
   16. Live stream grid
   17. Prize pool band & event calendar
   18. Discord band, store preview, news cards
   19. Counters, testimonials, sponsors, CTA
   20. Forms (contact / newsletter)
   21. FAQ accordion & tabs
   22. Page hero (interior), breadcrumbs, pager, share
   23. Footer
   24. Floating UI (WhatsApp, back-to-top, cookie, progress)
   25. Scroll reveal & motion utilities
   26. Utilities
   27. Responsive
   28. Reduced motion & print
   ========================================================================== */

/* ---------- 01. FONTS & TOKENS ------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Barlow:wght@400;500;600&family=Share+Tech+Mono&display=swap");

:root {
  /* surfaces — deep blue-black, never neutral grey */
  --ez-void:       #070312;
  --ez-panel:      #120a26;
  --ez-elevated:   #1b1038;
  --ez-sunken:     #04010c;
  --ez-line:       #2e1f52;
  --ez-line-soft:  #221646;

  /* ink */
  --ez-ink:        #f2ecff;
  --ez-dim:        #a99cc4;
  --ez-faint:      #7d719a;

  /* neon accents */
  --ez-purple:      #a855f7;   /* primary   */
  --ez-purple-deep: #7c3aed;   /* pressed / rails */
  --ez-cyan:        #22d3ee;   /* secondary */
  --ez-blue:        #3b6cff;   /* tertiary — LARGE text & graphics only */
  --ez-magenta:     #ff00ff;   /* glow bloom ONLY, never as a text colour */

  /* glow washes */
  --ez-glow-purple: rgba(168, 85, 247, .38);
  --ez-glow-cyan:   rgba(34, 211, 238, .34);
  --ez-glow-mag:    rgba(255, 0, 255, .22);
  --ez-tint-purple: rgba(168, 85, 247, .12);
  --ez-tint-cyan:   rgba(34, 211, 238, .10);

  /* type */
  --ez-font-display: "Chakra Petch", "Segoe UI Semibold", system-ui, sans-serif;
  --ez-font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ez-font-mono:    "Share Tech Mono", ui-monospace, "SFMono-Regular", monospace;

  /* scale */
  --ez-step--2: .6875rem;
  --ez-step--1: .8125rem;
  --ez-step-0:  .9375rem;
  --ez-step-1:  1.0625rem;
  --ez-step-2:  1.3125rem;
  --ez-step-3:  1.6875rem;
  --ez-step-4:  2.25rem;
  --ez-step-5:  3.125rem;
  --ez-step-6:  4.25rem;

  /* rhythm */
  --ez-gap:        24px;
  --ez-gap-sm:     14px;
  --ez-gap-lg:     40px;
  --ez-shell:      1340px;
  --ez-shell-wide: 1580px;
  --ez-band:       clamp(52px, 6.5vw, 96px);

  /* geometry — chamfers, not radii. THE signature. */
  --ez-radius:     0px;
  --ez-radius-nub: 4px;
  --ez-notch:      14px;   /* panels & cards            */
  --ez-notch-sm:   8px;    /* buttons, inputs, media     */
  --ez-notch-xs:   6px;    /* chips, badges, tabs        */
  --ez-notch-lg:   26px;   /* hero frames, CTA bands     */

  /* clip-path chamfer library — always use the token, never inline a polygon */
  --ez-clip-tr:   polygon(0 0, calc(100% - var(--ez-notch)) 0, 100% var(--ez-notch), 100% 100%, 0 100%);
  --ez-clip-bl:   polygon(0 0, 100% 0, 100% 100%, var(--ez-notch) 100%, 0 calc(100% - var(--ez-notch)));
  --ez-clip-duo:  polygon(0 0, calc(100% - var(--ez-notch)) 0, 100% var(--ez-notch), 100% 100%, var(--ez-notch) 100%, 0 calc(100% - var(--ez-notch)));
  --ez-clip-alt:  polygon(var(--ez-notch) 0, 100% 0, 100% calc(100% - var(--ez-notch)), calc(100% - var(--ez-notch)) 100%, 0 100%, 0 var(--ez-notch));
  --ez-clip-btn:  polygon(0 0, calc(100% - var(--ez-notch-sm)) 0, 100% var(--ez-notch-sm), 100% 100%, var(--ez-notch-sm) 100%, 0 calc(100% - var(--ez-notch-sm)));
  --ez-clip-chip: polygon(var(--ez-notch-xs) 0, 100% 0, 100% calc(100% - var(--ez-notch-xs)), calc(100% - var(--ez-notch-xs)) 100%, 0 100%, 0 var(--ez-notch-xs));
  --ez-clip-lg:   polygon(0 0, calc(100% - var(--ez-notch-lg)) 0, 100% var(--ez-notch-lg), 100% 100%, var(--ez-notch-lg) 100%, 0 calc(100% - var(--ez-notch-lg)));
  --ez-clip-media: polygon(0 0, 100% 0, 100% calc(100% - var(--ez-notch-sm)), calc(100% - var(--ez-notch-sm)) 100%, 0 100%);

  /* shear angle for diagonal section dividers */
  --ez-shear: 3.2vw;

  /* motion */
  --ez-fast:   140ms;
  --ez-snap:   200ms;
  --ez-med:    280ms;
  --ez-slow:   480ms;
  --ez-reveal: 700ms;
  --ez-ease:   cubic-bezier(.22, .68, .28, 1);
  --ez-orbit:  6.5s;

  /* chrome */
  --ez-header-h: 68px;
  --ez-status-h: 38px;
  --ez-shadow:   0 24px 60px -30px rgba(0, 0, 0, .95);
  --ez-bloom:    0 0 0 1px rgba(168, 85, 247, .5), 0 0 24px -4px var(--ez-glow-purple), 0 0 60px -18px var(--ez-glow-mag);
  --ez-z-nav:    600;
  --ez-z-float:  700;
  --ez-z-cookie: 800;
}

/* ---------- 02. RESET & BASE -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ez-header-h) + var(--ez-status-h) + 20px);
}

body {
  margin: 0;
  background: var(--ez-void);
  color: var(--ez-dim);
  font-family: var(--ez-font-body);
  font-size: var(--ez-step-0);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* the ambient neon field the whole site floats on */
  background-image:
    radial-gradient(900px 520px at 12% -6%, rgba(124, 58, 237, .28), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(700px 500px at 50% 108%, rgba(59, 108, 255, .14), transparent 62%);
  background-attachment: fixed;
}

body.is-locked { overflow: hidden; }

svg, video, canvas { max-width: 100%; display: block; }
svg { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
figure, blockquote { margin: 0; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ez-purple), transparent 70%);
  opacity: .5;
  margin: 0;
}

::selection { background: var(--ez-purple-deep); color: #fff; }

:focus-visible {
  outline: 2px solid var(--ez-cyan);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ez-sunken); }
::-webkit-scrollbar-thumb { background: var(--ez-purple-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--ez-purple); }

.esz-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ez-purple);
  color: #10021f;
  padding: 12px 20px;
  font-family: var(--ez-font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: var(--ez-clip-btn);
}
.esz-skip:focus { left: 12px; top: 12px; }

/* ---------- 03. TYPOGRAPHY PRIMITIVES ----------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ez-font-display);
  font-weight: 700;
  color: var(--ez-ink);
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Display scale — mixed case by mandate. Uppercase is for small labels only. */
.esz-d1 { font-size: clamp(2.4rem, 6vw, var(--ez-step-6)); line-height: 1.02; letter-spacing: -.018em; }
.esz-d2 { font-size: clamp(1.9rem, 4.2vw, var(--ez-step-5)); line-height: 1.06; letter-spacing: -.014em; }
.esz-d3 { font-size: clamp(1.55rem, 3vw, var(--ez-step-4)); line-height: 1.12; }
.esz-d4 { font-size: var(--ez-step-3); line-height: 1.2; }
.esz-d5 { font-size: var(--ez-step-2); line-height: 1.26; }

.esz-lede {
  font-size: var(--ez-step-1);
  color: var(--ez-dim);
  line-height: 1.72;
  max-width: 62ch;
}

/* small uppercase HUD label — the ONLY place uppercase display type appears */
.esz-label {
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ez-cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.esz-label--purple { color: var(--ez-purple); }
.esz-label--dim    { color: var(--ez-faint); }

.esz-meta {
  font-size: var(--ez-step--1);
  color: var(--ez-faint);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.5;
}
.esz-meta__dot { width: 3px; height: 3px; background: currentColor; opacity: .7; display: inline-block; }

/* every numeral on the site */
.esz-num {
  font-family: var(--ez-font-mono);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--ez-ink);
  font-variant-numeric: tabular-nums;
}
.esz-num--cyan   { color: var(--ez-cyan); }
.esz-num--purple { color: var(--ez-purple); }
.esz-num--big    { font-size: var(--ez-step-4); line-height: 1; }

/* digit flicker used by the prize-pool counter */
.esz-flick { animation: ez-flicker 3.4s steps(1, end) infinite; }
@keyframes ez-flicker {
  0%, 92%, 100% { opacity: 1; text-shadow: 0 0 12px var(--ez-glow-cyan); }
  93%           { opacity: .55; text-shadow: none; }
  95%           { opacity: 1; }
  96%           { opacity: .7; }
}

.esz-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ez-cyan);
  box-shadow: 0 0 0 0 var(--ez-glow-cyan);
  animation: ez-pulse 1.9s ease-out infinite;
  flex: none;
}
.esz-pulse--purple { background: var(--ez-purple); box-shadow: 0 0 0 0 var(--ez-glow-purple); }
@keyframes ez-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ez-glow-cyan); }
  70%  { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

/* neon link with a travelling underline */
.esz-linkneon {
  color: var(--ez-cyan);
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 3px;
}
.esz-linkneon::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--ez-cyan), var(--ez-purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ez-snap) var(--ez-ease);
}
.esz-linkneon:hover::after, .esz-linkneon:focus-visible::after { transform: scaleX(1); }
.esz-linkneon:hover { filter: drop-shadow(0 0 8px var(--ez-glow-cyan)); }

/* ---------- 04. LAYOUT SHELLS, BANDS & ASYMMETRIC GRIDS ----------------- */
.esz-shell {
  width: 100%;
  max-width: var(--ez-shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.esz-shell--wide   { max-width: var(--ez-shell-wide); }
.esz-shell--narrow { max-width: 880px; }

.esz-band { padding-block: var(--ez-band); position: relative; }
.esz-band--tight  { padding-block: calc(var(--ez-band) * .58); }
.esz-band--panel  { background: linear-gradient(180deg, rgba(18, 10, 38, .86), rgba(7, 3, 18, .86)); }
.esz-band--sunken { background: rgba(4, 1, 12, .72); }

/* diagonal shear dividers — sections shear into one another */
.esz-band--shear {
  clip-path: polygon(0 0, 100% var(--ez-shear), 100% 100%, 0 100%);
  margin-top: calc(var(--ez-shear) * -1);
  padding-top: calc(var(--ez-band) + var(--ez-shear));
}
.esz-band--shear-rev {
  clip-path: polygon(0 var(--ez-shear), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--ez-shear) * -1);
  padding-top: calc(var(--ez-band) + var(--ez-shear));
}
.esz-band--shear-both {
  clip-path: polygon(0 var(--ez-shear), 100% 0, 100% calc(100% - var(--ez-shear)), 0 100%);
  margin-block: calc(var(--ez-shear) * -1);
  padding-block: calc(var(--ez-band) + var(--ez-shear));
}

/* the archetype: asymmetric offset panels. Second column drops down. */
.esz-offset {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .88fr);
  gap: var(--ez-gap-lg);
  align-items: start;
}
.esz-offset > :nth-child(2) { margin-top: clamp(20px, 5vw, 76px); }
.esz-offset--flip { grid-template-columns: minmax(0, .88fr) minmax(0, 1.42fr); }
.esz-offset--flip > :nth-child(1) { margin-top: clamp(20px, 5vw, 76px); }
.esz-offset--flip > :nth-child(2) { margin-top: 0; }

/* diagonal split — content sits against a sheared media plate */
.esz-diag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ez-gap-lg);
  align-items: center;
}

.esz-duo   { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ez-gap); }
.esz-trio  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ez-gap); }
.esz-quad  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ez-gap); }
.esz-quint { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ez-gap-sm); }
.esz-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ez-gap-lg); align-items: start; }
.esz-stack { display: grid; gap: var(--ez-gap-sm); }
.esz-stack--lg { gap: var(--ez-gap); }

/* ---------- 05. BUTTONS & CHIPS ----------------------------------------- */
.esz-btn {
  --btn-bg: linear-gradient(120deg, var(--ez-purple-deep), var(--ez-purple) 58%, var(--ez-blue));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  background: var(--btn-bg);
  color: #ffffff;
  font-family: var(--ez-font-display);
  font-weight: 700;
  font-size: var(--ez-step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  clip-path: var(--ez-clip-btn);
  position: relative;
  transition: filter var(--ez-snap) var(--ez-ease), transform var(--ez-snap) var(--ez-ease);
  border: 0;
  text-align: center;
}
.esz-btn:hover, .esz-btn:focus-visible {
  filter: brightness(1.16) drop-shadow(0 0 14px var(--ez-glow-purple));
  transform: translateY(-2px);
}
.esz-btn:active { transform: translateY(0); }

.esz-btn--cyan  { --btn-bg: linear-gradient(120deg, #0e7490, var(--ez-cyan) 62%, #67e8f9); color: #04121a; }
.esz-btn--cyan:hover { filter: brightness(1.12) drop-shadow(0 0 14px var(--ez-glow-cyan)); }
.esz-btn--ghost {
  background: rgba(168, 85, 247, .08);
  color: var(--ez-ink);
  box-shadow: inset 0 0 0 1px var(--ez-line);
}
.esz-btn--ghost:hover { background: rgba(168, 85, 247, .18); box-shadow: inset 0 0 0 1px var(--ez-purple); }
.esz-btn--sm    { padding: 9px 16px; font-size: var(--ez-step--2); letter-spacing: .12em; }
.esz-btn--lg    { padding: 17px 34px; font-size: var(--ez-step-0); }
.esz-btn--block { display: flex; width: 100%; }
.esz-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

.esz-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.esz-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ez-dim);
  background: rgba(27, 16, 56, .8);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
  line-height: 1;
  transition: color var(--ez-fast), background var(--ez-fast), box-shadow var(--ez-fast);
}
.esz-chip:hover, .esz-chip.is-active {
  color: var(--ez-ink);
  background: rgba(168, 85, 247, .22);
  box-shadow: inset 0 0 0 1px var(--ez-purple), 0 0 18px -6px var(--ez-glow-purple);
}
.esz-chip--live   { color: #eafcff; background: rgba(34, 211, 238, .18); box-shadow: inset 0 0 0 1px var(--ez-cyan); }
.esz-chip--cyan   { color: var(--ez-cyan); }
.esz-chip--purple { color: var(--ez-purple); }

/* ---------- 06. SECTION HEADINGS & RULES -------------------------------- */
.esz-sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 24px;
  margin-bottom: clamp(24px, 3.4vw, 44px);
}
.esz-sechead__eyebrow { display: block; margin-bottom: 10px; }
.esz-sechead__label { font-size: clamp(1.55rem, 3vw, var(--ez-step-4)); line-height: 1.1; }
.esz-sechead__sub { grid-column: 1 / -1; margin: 0; max-width: 68ch; color: var(--ez-dim); }
.esz-sechead__more { justify-self: end; }

/* tick-mark rule — HUD ruler instead of a plain hairline */
.esz-rule {
  height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--ez-line) 0 1px, transparent 1px 14px),
    linear-gradient(90deg, var(--ez-purple), transparent 55%);
  background-size: 14px 10px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: repeat-x, no-repeat;
  opacity: .8;
}

/* ---------- 07. SIGNATURE DEVICES --------------------------------------- */

/* 7a. animated neon gradient border that travels around a panel */
.esz-neon {
  position: relative;
  padding: 1.5px;
  background: var(--ez-line-soft);
  clip-path: var(--ez-clip-duo);
  overflow: hidden;
  isolation: isolate;
}
.esz-neon::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 190%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0 46%,
    var(--ez-cyan) 56%,
    var(--ez-purple) 66%,
    var(--ez-magenta) 71%,
    transparent 78% 100%);
  animation: ez-orbit var(--ez-orbit) linear infinite;
  opacity: .85;
}
.esz-neon__in {
  position: relative;
  z-index: 1;
  height: 100%;
  background: linear-gradient(160deg, var(--ez-panel), var(--ez-void));
  clip-path: var(--ez-clip-duo);
}
.esz-neon--slow::before { animation-duration: 11s; }
.esz-neon--alt { clip-path: var(--ez-clip-alt); }
.esz-neon--alt .esz-neon__in { clip-path: var(--ez-clip-alt); }
@keyframes ez-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 7b. plain chamfered panel */
.esz-panel {
  background: linear-gradient(160deg, rgba(27, 16, 56, .9), rgba(7, 3, 18, .92));
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-duo);
  padding: clamp(18px, 2.4vw, 28px);
  position: relative;
}
.esz-panel--alt   { clip-path: var(--ez-clip-alt); }
.esz-panel--tr    { clip-path: var(--ez-clip-tr); }
.esz-panel--lg    { clip-path: var(--ez-clip-lg); padding: clamp(24px, 3.4vw, 44px); }
.esz-panel--flat  { background: rgba(18, 10, 38, .6); }
.esz-panel--sunk  { background: rgba(4, 1, 12, .8); }

/* 7c. glassmorphism over the neon field */
.esz-glass {
  background: rgba(27, 16, 56, .42);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .28), 0 20px 50px -34px #000;
  clip-path: var(--ez-clip-duo);
}

/* 7d. HUD frame — corner brackets + tick marks */
.esz-hud { position: relative; }
.esz-hud::before, .esz-hud::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--ez-cyan);
  pointer-events: none;
  opacity: .85;
}
.esz-hud::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.esz-hud::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.esz-hud--purple::before, .esz-hud--purple::after { border-color: var(--ez-purple); }
.esz-hud__ticks {
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(34, 211, 238, .5) 0 1px, transparent 1px 10px);
  pointer-events: none;
}
.esz-hud__ticks--top { bottom: auto; top: 4px; }

/* 7e. scanline overlay */
.esz-scan { position: relative; }
.esz-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(242, 236, 255, .04) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* 7f. perspective grid floor */
.esz-gridfloor {
  position: absolute;
  inset: auto 0 0 0;
  height: 52%;
  pointer-events: none;
  background-image:
    linear-gradient(90deg,  rgba(168, 85, 247, .30) 1px, transparent 1px),
    linear-gradient(180deg, rgba(34, 211, 238, .22) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(440px) rotateX(68deg);
  transform-origin: bottom center;
  animation: ez-gridrun 9s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 92%);
  mask-image: linear-gradient(to top, #000 8%, transparent 92%);
  opacity: .75;
}
@keyframes ez-gridrun { to { background-position: 0 68px, 0 68px; } }

/* 7g. glow bloom on hover */
.esz-glow { transition: box-shadow var(--ez-med) var(--ez-ease), filter var(--ez-med) var(--ez-ease), transform var(--ez-med) var(--ez-ease); }
.esz-glow:hover, .esz-glow:focus-within {
  box-shadow: var(--ez-bloom);
  filter: drop-shadow(0 0 18px var(--ez-glow-purple));
  transform: translateY(-4px);
}

/* ---------- 08. HEADER / NAV / MEGA MENU / STATUS BAR -------------------- */
.esz-header {
  position: sticky;
  top: 0;
  z-index: var(--ez-z-nav);
  background: rgba(7, 3, 18, .68);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: background var(--ez-snap), box-shadow var(--ez-snap);
}
.esz-header.is-stuck {
  background: rgba(7, 3, 18, .94);
  box-shadow: 0 1px 0 0 var(--ez-line), 0 18px 40px -34px #000;
}
.esz-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ez-purple) 22%, var(--ez-cyan) 62%, transparent);
  opacity: .55;
}

.esz-header__bar {
  height: var(--ez-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.esz-header__tools { display: flex; align-items: center; gap: 10px; }

.esz-logo { display: inline-flex; align-items: center; gap: 12px; }
.esz-logo__mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 10px var(--ez-glow-purple)); }
.esz-logo__word {
  display: block;
  font-family: var(--ez-font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .01em;
  color: var(--ez-ink);
  line-height: 1.1;
}
.esz-logo__word em { font-style: normal; color: var(--ez-cyan); }
.esz-logo__tag {
  display: block;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: .5625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ez-faint);
}

.esz-nav__list { display: flex; align-items: center; gap: 2px; }
.esz-nav__item { position: relative; }
.esz-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ez-dim);
  position: relative;
  transition: color var(--ez-fast);
  clip-path: var(--ez-clip-chip);
}
.esz-nav__link::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, var(--ez-cyan), var(--ez-purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ez-snap) var(--ez-ease);
}
.esz-nav__link:hover, .esz-nav__link[aria-expanded="true"], .esz-nav__link[aria-current="page"] { color: var(--ez-ink); }
.esz-nav__link:hover::before,
.esz-nav__link[aria-expanded="true"]::before,
.esz-nav__link[aria-current="page"]::before { transform: scaleX(1); }
.esz-nav__caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.esz-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: -20px;
  width: min(820px, 78vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 26px;
  background: rgba(11, 5, 26, .97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px var(--ez-line), var(--ez-shadow);
  clip-path: var(--ez-clip-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--ez-snap) var(--ez-ease), transform var(--ez-snap) var(--ez-ease), visibility var(--ez-snap);
}
.esz-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.esz-mega__col { display: grid; align-content: start; gap: 2px; }
.esz-mega__title {
  font-size: var(--ez-step--2);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ez-cyan);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ez-line);
}
.esz-mega__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  color: var(--ez-dim);
  font-size: var(--ez-step--1);
  transition: color var(--ez-fast), background var(--ez-fast);
  clip-path: var(--ez-clip-chip);
}
.esz-mega__link small { font-family: var(--ez-font-mono); font-size: var(--ez-step--2); color: var(--ez-faint); }
.esz-mega__link:hover { color: var(--ez-ink); background: rgba(168, 85, 247, .16); }
.esz-mega__link:hover small { color: var(--ez-cyan); }
.esz-mega__promo {
  background: linear-gradient(150deg, rgba(124, 58, 237, .3), rgba(4, 1, 12, .8));
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-duo);
  padding: 18px;
}
.esz-mega__promo h4 { font-size: var(--ez-step-1); margin: 8px 0; }

.esz-iconbtn {
  width: 38px; height: 38px;
  display: inline-grid;
  place-items: center;
  color: var(--ez-dim);
  background: rgba(27, 16, 56, .7);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
  transition: color var(--ez-fast), box-shadow var(--ez-fast);
}
.esz-iconbtn:hover { color: var(--ez-cyan); box-shadow: inset 0 0 0 1px var(--ez-cyan), 0 0 16px -6px var(--ez-glow-cyan); }

.esz-burger { display: none; }
.esz-burger__box { display: grid; gap: 4px; width: 17px; }
.esz-burger__box i { height: 2px; background: currentColor; display: block; }

/* live status bar under the header */
.esz-statusbar {
  height: var(--ez-status-h);
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(4, 1, 12, .9);
  border-top: 1px solid var(--ez-line-soft);
  overflow: hidden;
}
.esz-statusbar__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
  background: linear-gradient(120deg, var(--ez-purple-deep), var(--ez-purple));
  color: #fff;
  font-family: var(--ez-font-display);
  font-weight: 700;
  font-size: var(--ez-step--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.esz-statusbar__track {
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 18px;
  height: 100%;
}
.esz-statusbar__track::-webkit-scrollbar { display: none; }
.esz-statusbar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: var(--ez-step--1);
  color: var(--ez-dim);
  transition: color var(--ez-fast);
}
.esz-statusbar__item:hover { color: var(--ez-ink); }
.esz-statusbar__k { font-family: var(--ez-font-display); font-weight: 600; font-size: var(--ez-step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ez-faint); }

/* ---------- 09. DRAWER & TICKER ----------------------------------------- */
.esz-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(340px, 88vw);
  z-index: calc(var(--ez-z-nav) + 5);
  background: rgba(9, 4, 22, .98);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 1px 0 0 var(--ez-line), -30px 0 60px -40px #000;
  padding: 84px 26px 30px;
  transform: translateX(102%);
  transition: transform var(--ez-med) var(--ez-ease);
  overflow-y: auto;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 42px);
}
.esz-drawer.is-open { transform: translateX(0); }
.esz-drawer__link {
  display: block;
  padding: 13px 12px;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step-1);
  color: var(--ez-dim);
  border-bottom: 1px solid var(--ez-line-soft);
  transition: color var(--ez-fast), padding-left var(--ez-fast);
}
.esz-drawer__link:hover { color: var(--ez-cyan); padding-left: 20px; }
.esz-drawer__group { margin-top: 26px; display: grid; gap: 12px; }

.esz-ticker {
  display: flex;
  align-items: stretch;
  background: rgba(4, 1, 12, .86);
  border-bottom: 1px solid var(--ez-line-soft);
  overflow: hidden;
}
.esz-ticker__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: linear-gradient(120deg, #0e7490, var(--ez-cyan));
  color: #04121a;
  font-family: var(--ez-font-display);
  font-weight: 700;
  font-size: var(--ez-step--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.esz-ticker__viewport { overflow: hidden; flex: 1; display: flex; align-items: center; }
.esz-ticker__track { display: flex; gap: 44px; padding: 11px 22px; white-space: nowrap; animation: ez-marquee 46s linear infinite; }
.esz-ticker:hover .esz-ticker__track { animation-play-state: paused; }
.esz-ticker__item { font-size: var(--ez-step--1); color: var(--ez-dim); transition: color var(--ez-fast); }
.esz-ticker__item b { color: var(--ez-purple); font-weight: 600; margin-right: 8px; font-family: var(--ez-font-display); letter-spacing: .1em; text-transform: uppercase; font-size: var(--ez-step--2); }
.esz-ticker__item:hover { color: var(--ez-ink); }
@keyframes ez-marquee { to { transform: translateX(-50%); } }

/* ---------- 10. HERO ---------------------------------------------------- */
.esz-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 112px) clamp(72px, 9vw, 128px);
  isolation: isolate;
}
.esz-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  opacity: .85;
}
.esz-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 420px at 22% 34%, rgba(124, 58, 237, .34), transparent 66%),
    radial-gradient(620px 380px at 84% 20%, rgba(34, 211, 238, .2), transparent 64%),
    linear-gradient(180deg, transparent 40%, rgba(7, 3, 18, .92));
  pointer-events: none;
}
.esz-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.esz-hero__eyebrow { margin-bottom: 18px; }
.esz-hero__title { margin-bottom: 20px; }
.esz-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ez-cyan), var(--ez-purple) 55%, var(--ez-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px var(--ez-glow-purple));
}
.esz-hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.esz-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--ez-line);
}
.esz-hero__fact { display: grid; gap: 2px; }
.esz-hero__fact b { font-family: var(--ez-font-mono); font-size: var(--ez-step-2); color: var(--ez-cyan); font-weight: 400; }
.esz-hero__fact span { font-size: var(--ez-step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ez-faint); font-family: var(--ez-font-display); font-weight: 600; }

/* prize pool counter */
.esz-pool { padding: clamp(22px, 3vw, 32px); }
.esz-pool__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.esz-pool__amount {
  font-family: var(--ez-font-mono);
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1;
  color: var(--ez-ink);
  letter-spacing: .01em;
  text-shadow: 0 0 26px var(--ez-glow-cyan);
  word-break: break-word;
}
.esz-pool__cur { color: var(--ez-cyan); }
.esz-pool__meta { margin-top: 12px; }
.esz-pool__bar {
  height: 6px;
  margin-top: 18px;
  background: rgba(4, 1, 12, .9);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  overflow: hidden;
}
.esz-pool__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ez-cyan), var(--ez-purple), var(--ez-magenta));
  box-shadow: 0 0 16px var(--ez-glow-purple);
  transition: width var(--ez-slow) var(--ez-ease);
}
.esz-pool__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 22px; background: var(--ez-line); }
.esz-pool__cell { background: rgba(7, 3, 18, .92); padding: 14px 12px; text-align: center; }
.esz-pool__cell b { display: block; font-family: var(--ez-font-mono); font-size: var(--ez-step-1); color: var(--ez-ink); font-weight: 400; }
.esz-pool__cell span { font-size: var(--ez-step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ez-faint); font-family: var(--ez-font-display); font-weight: 600; }

/* ---------- 11. TOURNAMENT CARDS ---------------------------------------- */
.esz-tour { display: flex; flex-direction: column; height: 100%; }
.esz-tour__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; clip-path: var(--ez-clip-media); }
.esz-tour__media svg { width: 100%; height: 100%; }
.esz-tour__flags { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.esz-tour__body { padding: 20px clamp(16px, 2vw, 24px) 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.esz-tour__title { font-size: var(--ez-step-2); }
.esz-tour__title a { transition: color var(--ez-fast); }
.esz-tour__title a:hover { color: var(--ez-cyan); }
.esz-tour__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ez-line); margin-top: auto; }
.esz-tour__cell { background: rgba(4, 1, 12, .8); padding: 11px 10px; }
.esz-tour__cell b { display: block; font-family: var(--ez-font-mono); font-size: var(--ez-step-0); color: var(--ez-cyan); font-weight: 400; }
.esz-tour__cell span { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ez-faint); font-family: var(--ez-font-display); font-weight: 600; }
.esz-tour__slots { display: grid; gap: 6px; }
.esz-tour__slotbar { height: 5px; background: rgba(4, 1, 12, .9); box-shadow: inset 0 0 0 1px var(--ez-line); overflow: hidden; }
.esz-tour__slotfill { height: 100%; background: linear-gradient(90deg, var(--ez-purple), var(--ez-cyan)); }
.esz-tour__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- 12. GAMES GRID ---------------------------------------------- */
.esz-game {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 14px;
  text-align: center;
  background: linear-gradient(165deg, rgba(27, 16, 56, .8), rgba(7, 3, 18, .9));
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-duo);
  transition: box-shadow var(--ez-med) var(--ez-ease), transform var(--ez-med) var(--ez-ease);
}
.esz-game:hover, .esz-game:focus-visible {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px var(--ez-purple), 0 0 30px -10px var(--ez-glow-purple);
}
.esz-game__glyph { width: 54px; height: 54px; filter: drop-shadow(0 0 10px var(--ez-glow-cyan)); }
.esz-game__name { font-family: var(--ez-font-display); font-weight: 700; font-size: var(--ez-step-0); color: var(--ez-ink); }
.esz-game__meta { font-family: var(--ez-font-mono); font-size: var(--ez-step--2); color: var(--ez-cyan); }
.esz-game__tag { font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ez-faint); font-family: var(--ez-font-display); font-weight: 600; }

/* ---------- 13. BRACKET -------------------------------------------------- */
.esz-bracketwrap { overflow-x: auto; padding-bottom: 10px; }
.esz-bracket { display: flex; gap: clamp(18px, 3vw, 46px); min-width: 720px; }
.esz-bracket__round { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; flex: 1; min-width: 190px; }
.esz-bracket__rtitle {
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ez-faint);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ez-line);
  margin-bottom: 6px;
}
.esz-bracket__match {
  background: rgba(18, 10, 38, .88);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-btn);
  overflow: hidden;
  transition: box-shadow var(--ez-fast);
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: block;
}
.esz-bracket__match:hover, .esz-bracket__match.is-active {
  box-shadow: inset 0 0 0 1px var(--ez-cyan), 0 0 22px -8px var(--ez-glow-cyan);
}
.esz-bracket__side {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--ez-step--1);
  color: var(--ez-dim);
}
.esz-bracket__side + .esz-bracket__side { border-top: 1px solid var(--ez-line-soft); }
.esz-bracket__seed { font-family: var(--ez-font-mono); font-size: var(--ez-step--2); color: var(--ez-faint); }
.esz-bracket__team { font-family: var(--ez-font-display); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esz-bracket__score { font-family: var(--ez-font-mono); color: var(--ez-ink); }
.esz-bracket__side.is-win { color: var(--ez-ink); background: linear-gradient(90deg, rgba(168, 85, 247, .22), transparent); }
.esz-bracket__side.is-win .esz-bracket__score { color: var(--ez-cyan); }
.esz-bracket__note { padding: 8px 12px; background: rgba(4, 1, 12, .7); font-size: var(--ez-step--2); color: var(--ez-faint); font-family: var(--ez-font-mono); }

/* ---------- 14. LEADERBOARDS & TABLES ----------------------------------- */
.esz-tablewrap { overflow-x: auto; }
.esz-table { font-size: var(--ez-step--1); min-width: 560px; }
.esz-table thead th {
  text-align: left;
  padding: 12px 14px;
  background: rgba(4, 1, 12, .9);
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ez-cyan);
  border-bottom: 1px solid var(--ez-line);
  white-space: nowrap;
}
.esz-table td { padding: 13px 14px; border-bottom: 1px solid var(--ez-line-soft); color: var(--ez-dim); }
.esz-table tbody tr { transition: background var(--ez-fast); }
.esz-table tbody tr:hover { background: rgba(168, 85, 247, .1); }
.esz-table__pos { font-family: var(--ez-font-mono); color: var(--ez-faint); width: 48px; }
.esz-table__team { color: var(--ez-ink); font-family: var(--ez-font-display); font-weight: 600; white-space: nowrap; }
.esz-table__n { font-family: var(--ez-font-mono); color: var(--ez-ink); text-align: right; }
.esz-table__n--hi { color: var(--ez-cyan); }
.esz-table tbody tr.is-qualified .esz-table__pos { color: var(--ez-cyan); position: relative; }
.esz-table tbody tr.is-qualified { background: rgba(34, 211, 238, .07); }
.esz-table__delta--up   { color: var(--ez-cyan); font-family: var(--ez-font-mono); }
.esz-table__delta--down { color: var(--ez-faint); font-family: var(--ez-font-mono); }

/* rank list with oversized outlined numerals */
.esz-rank { display: block; }
.esz-rank__item:last-child { border-bottom: 0; }
.esz-rank__item {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ez-line-soft);
}
.esz-rank__n {
  font-family: var(--ez-font-mono);
  font-size: 2.1rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--ez-purple);
}
.esz-rank__item--top .esz-rank__n { -webkit-text-stroke-color: var(--ez-cyan); }
.esz-rank__name { font-family: var(--ez-font-display); font-weight: 700; color: var(--ez-ink); font-size: var(--ez-step-0); }
.esz-rank__sub { font-size: var(--ez-step--2); color: var(--ez-faint); }
.esz-rank__val { font-family: var(--ez-font-mono); color: var(--ez-cyan); }

/* ---------- 15. TEAM & PLAYER CARDS ------------------------------------- */
.esz-player { display: grid; gap: 14px; padding: 20px; }
.esz-player__top { display: flex; align-items: center; gap: 14px; }
.esz-player__avatar {
  width: 62px; height: 62px;
  flex: none;
  clip-path: var(--ez-clip-chip);
  background: linear-gradient(150deg, var(--ez-purple-deep), var(--ez-void));
  box-shadow: inset 0 0 0 1px var(--ez-purple);
}
.esz-player__tag { font-family: var(--ez-font-display); font-weight: 700; font-size: var(--ez-step-1); color: var(--ez-ink); }
.esz-player__name { font-size: var(--ez-step--1); color: var(--ez-dim); }
.esz-player__role { font-size: var(--ez-step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ez-cyan); font-family: var(--ez-font-display); font-weight: 600; }
.esz-player__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ez-line); }
.esz-player__stat { background: rgba(4, 1, 12, .82); padding: 12px 8px; text-align: center; }
.esz-player__stat b { display: block; font-family: var(--ez-font-mono); font-size: var(--ez-step-1); color: var(--ez-ink); font-weight: 400; }
.esz-player__stat span { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ez-faint); font-family: var(--ez-font-display); font-weight: 600; }

.esz-team { display: grid; gap: 12px; padding: 20px; }
.esz-team__top { display: flex; align-items: center; gap: 14px; }
.esz-team__crest { width: 54px; height: 54px; flex: none; filter: drop-shadow(0 0 10px var(--ez-glow-purple)); }
.esz-team__name { font-family: var(--ez-font-display); font-weight: 700; font-size: var(--ez-step-1); color: var(--ez-ink); }
.esz-team__region { font-size: var(--ez-step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ez-faint); font-family: var(--ez-font-display); font-weight: 600; }
.esz-team__roster { display: flex; flex-wrap: wrap; gap: 6px; }
.esz-team__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ez-line-soft); }

/* ---------- 16. LIVE STREAM GRID ---------------------------------------- */
.esz-stream { display: flex; flex-direction: column; height: 100%; }
.esz-stream__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; clip-path: var(--ez-clip-media); }
.esz-stream__thumb svg { width: 100%; height: 100%; }
.esz-stream__live {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(4, 1, 12, .82);
  box-shadow: inset 0 0 0 1px var(--ez-cyan);
  clip-path: var(--ez-clip-chip);
  font-family: var(--ez-font-display); font-weight: 700;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: #eafcff;
}
.esz-stream__viewers {
  position: absolute; bottom: 10px; right: 10px;
  padding: 5px 10px;
  background: rgba(4, 1, 12, .86);
  font-family: var(--ez-font-mono);
  font-size: var(--ez-step--2);
  color: var(--ez-cyan);
  clip-path: var(--ez-clip-chip);
}
.esz-stream__body { padding: 16px 18px 18px; display: grid; gap: 8px; flex: 1; }
.esz-stream__title { font-size: var(--ez-step-0); line-height: 1.35; }
.esz-stream__caster { display: flex; align-items: center; gap: 10px; font-size: var(--ez-step--1); color: var(--ez-dim); }
.esz-stream__dot { width: 26px; height: 26px; clip-path: var(--ez-clip-chip); background: linear-gradient(150deg, var(--ez-cyan), var(--ez-purple-deep)); flex: none; }

/* ---------- 17. PRIZE BAND & CALENDAR ----------------------------------- */
.esz-prizeband {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ez-line);
  clip-path: var(--ez-clip-lg);
  overflow: hidden;
}
.esz-prizeband__cell {
  background: linear-gradient(170deg, rgba(27, 16, 56, .95), rgba(4, 1, 12, .95));
  padding: clamp(20px, 2.6vw, 30px);
  display: grid;
  gap: 6px;
}
.esz-prizeband__n { font-family: var(--ez-font-mono); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1; color: var(--ez-cyan); text-shadow: 0 0 22px var(--ez-glow-cyan); }
.esz-prizeband__lab { font-family: var(--ez-font-display); font-weight: 600; font-size: var(--ez-step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ez-faint); }
.esz-prizeband__sub { font-size: var(--ez-step--1); color: var(--ez-dim); }

.esz-cal__row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: rgba(18, 10, 38, .6);
  box-shadow: inset 0 0 0 1px var(--ez-line-soft);
  clip-path: var(--ez-clip-btn);
  transition: box-shadow var(--ez-fast), background var(--ez-fast);
}
.esz-cal__row:hover { background: rgba(27, 16, 56, .9); box-shadow: inset 0 0 0 1px var(--ez-purple); }
.esz-cal__date {
  text-align: center;
  padding: 8px 6px;
  background: rgba(4, 1, 12, .85);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
}
.esz-cal__d { display: block; font-family: var(--ez-font-mono); font-size: var(--ez-step-2); color: var(--ez-cyan); line-height: 1; }
.esz-cal__m { display: block; font-family: var(--ez-font-display); font-weight: 600; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ez-faint); margin-top: 4px; }
.esz-cal__title { font-family: var(--ez-font-display); font-weight: 700; color: var(--ez-ink); font-size: var(--ez-step-0); }

/* ---------- 18. DISCORD BAND / STORE / NEWS ----------------------------- */
.esz-discord { padding: clamp(26px, 4vw, 48px); }
.esz-discord__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 52px); align-items: center; }
.esz-discord__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ez-line); }
.esz-discord__stat { background: rgba(4, 1, 12, .9); padding: 18px; display: grid; gap: 4px; }
.esz-discord__stat b { font-family: var(--ez-font-mono); font-size: var(--ez-step-2); color: var(--ez-cyan); font-weight: 400; }
.esz-discord__stat span { font-family: var(--ez-font-display); font-weight: 600; font-size: var(--ez-step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ez-faint); }

.esz-prod { display: flex; flex-direction: column; height: 100%; }
.esz-prod__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; clip-path: var(--ez-clip-media); background: rgba(4, 1, 12, .8); }
.esz-prod__art svg { width: 100%; height: 100%; }
.esz-prod__flag { position: absolute; top: 10px; right: 10px; }
.esz-prod__body { padding: 16px 18px 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.esz-prod__name { font-size: var(--ez-step-0); }
.esz-prod__price { font-family: var(--ez-font-mono); font-size: var(--ez-step-1); color: var(--ez-cyan); }
.esz-prod__was { font-family: var(--ez-font-mono); font-size: var(--ez-step--1); color: var(--ez-faint); text-decoration: line-through; margin-left: 8px; }
.esz-prod__foot { margin-top: auto; padding-top: 12px; }

.esz-post { display: flex; flex-direction: column; height: 100%; }
.esz-post__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; clip-path: var(--ez-clip-media); }
.esz-post__art svg { width: 100%; height: 100%; }
.esz-post__tag { position: absolute; top: 10px; left: 10px; }
.esz-post__body { padding: 16px 18px 20px; display: grid; gap: 10px; flex: 1; align-content: start; }
.esz-post__title { font-size: var(--ez-step-1); line-height: 1.28; }
.esz-post__title a { transition: color var(--ez-fast); }
.esz-post__title a:hover { color: var(--ez-cyan); }
.esz-post__excerpt { font-size: var(--ez-step--1); color: var(--ez-dim); }
.esz-post__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ez-line-soft); }

/* ---------- 19. COUNTERS / TESTIMONIALS / SPONSORS / CTA ---------------- */
.esz-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--ez-line); }
.esz-counter { background: rgba(7, 3, 18, .9); padding: clamp(20px, 2.6vw, 30px); text-align: center; display: grid; gap: 6px; }
.esz-counter__n { font-family: var(--ez-font-mono); font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1; color: var(--ez-ink); text-shadow: 0 0 24px var(--ez-glow-purple); }
.esz-counter__label { font-family: var(--ez-font-display); font-weight: 600; font-size: var(--ez-step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ez-faint); }

.esz-quote { padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 16px; height: 100%; }
.esz-quote__text { font-size: var(--ez-step-1); color: var(--ez-ink); line-height: 1.6; font-family: var(--ez-font-body); font-weight: 500; }
.esz-quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ez-line-soft); }
.esz-quote__avatar { width: 40px; height: 40px; flex: none; clip-path: var(--ez-clip-chip); background: linear-gradient(150deg, var(--ez-cyan), var(--ez-purple-deep)); }
.esz-quote__name { font-family: var(--ez-font-display); font-weight: 700; color: var(--ez-ink); font-size: var(--ez-step--1); }
.esz-quote__from { font-size: var(--ez-step--2); color: var(--ez-faint); }

.esz-sponsors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--ez-line); }
.esz-sponsors__cell {
  background: rgba(4, 1, 12, .9);
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--ez-faint);
  transition: color var(--ez-fast), background var(--ez-fast);
}
.esz-sponsors__cell:hover { color: var(--ez-cyan); background: rgba(27, 16, 56, .9); }

.esz-cta { position: relative; overflow: hidden; }
.esz-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(120deg, rgba(124, 58, 237, .34), rgba(34, 211, 238, .16) 62%, rgba(4, 1, 12, .9));
  box-shadow: inset 0 0 0 1px var(--ez-purple);
  clip-path: var(--ez-clip-lg);
}
.esz-cta__title { font-size: clamp(1.5rem, 3vw, var(--ez-step-4)); }
.esz-cta__sub { margin-top: 8px; color: var(--ez-ink); opacity: .88; }

/* ---------- 20. FORMS ---------------------------------------------------- */
.esz-field { display: grid; gap: 7px; margin-bottom: 18px; }
.esz-field__label {
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ez-dim);
}
.esz-input, .esz-select, .esz-textarea {
  width: 100%;
  padding: 13px 15px;
  background: rgba(4, 1, 12, .8);
  color: var(--ez-ink);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  border: 0;
  clip-path: var(--ez-clip-btn);
  font-size: var(--ez-step-0);
  transition: box-shadow var(--ez-fast);
}
.esz-input::placeholder, .esz-textarea::placeholder { color: var(--ez-faint); }
.esz-input:focus, .esz-select:focus, .esz-textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--ez-cyan), 0 0 18px -6px var(--ez-glow-cyan);
}
.esz-textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.esz-select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ez-cyan) 50%), linear-gradient(135deg, var(--ez-cyan) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.esz-select option { background: var(--ez-panel); color: var(--ez-ink); }
.esz-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--ez-step--1); color: var(--ez-dim); }
.esz-check input { margin-top: 4px; accent-color: var(--ez-purple); width: 16px; height: 16px; flex: none; }

.esz-field__error { font-size: var(--ez-step--2); color: #ffb4e6; min-height: 1em; font-family: var(--ez-font-mono); }
.esz-field.has-error .esz-input,
.esz-field.has-error .esz-select,
.esz-field.has-error .esz-textarea { box-shadow: inset 0 0 0 1px #ff6ad5; }

.esz-formnote {
  font-size: var(--ez-step--1);
  margin-top: 12px;
  padding: 0;
  min-height: 1em;
}
.esz-formnote.is-ok  { color: var(--ez-cyan); padding: 12px 16px; background: rgba(34, 211, 238, .1); box-shadow: inset 0 0 0 1px var(--ez-cyan); clip-path: var(--ez-clip-btn); }
.esz-formnote.is-bad { color: #ffb4e6; padding: 12px 16px; background: rgba(255, 0, 255, .08); box-shadow: inset 0 0 0 1px #ff6ad5; clip-path: var(--ez-clip-btn); }

.esz-sub__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

/* ---------- 21. FAQ & TABS ----------------------------------------------- */
.esz-faq__item {
  background: rgba(18, 10, 38, .6);
  box-shadow: inset 0 0 0 1px var(--ez-line-soft);
  clip-path: var(--ez-clip-btn);
  margin-bottom: 10px;
  transition: box-shadow var(--ez-fast);
}
.esz-faq__item:hover { box-shadow: inset 0 0 0 1px var(--ez-purple); }
.esz-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  text-align: left;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step-0);
  color: var(--ez-ink);
}
.esz-faq__sign { position: relative; width: 14px; height: 14px; flex: none; }
.esz-faq__sign::before, .esz-faq__sign::after {
  content: ""; position: absolute; background: var(--ez-cyan);
  transition: transform var(--ez-snap) var(--ez-ease), opacity var(--ez-snap);
}
.esz-faq__sign::before { left: 0; top: 6px; width: 14px; height: 2px; }
.esz-faq__sign::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.esz-faq__q[aria-expanded="true"] .esz-faq__sign::after { transform: scaleY(0); opacity: 0; }
.esz-faq__a { max-height: 0; overflow: hidden; transition: max-height var(--ez-med) var(--ez-ease); }
.esz-faq__a > div { padding: 0 20px 18px; font-size: var(--ez-step--1); color: var(--ez-dim); }

.esz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.esz-tab {
  padding: 10px 18px;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ez-dim);
  background: rgba(18, 10, 38, .7);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
  transition: color var(--ez-fast), background var(--ez-fast), box-shadow var(--ez-fast);
}
.esz-tab:hover { color: var(--ez-ink); }
.esz-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(120deg, var(--ez-purple-deep), var(--ez-purple));
  box-shadow: inset 0 0 0 1px var(--ez-purple), 0 0 20px -8px var(--ez-glow-purple);
}

/* ---------- 22. PAGE HERO / CRUMBS / PAGER / SHARE ---------------------- */
.esz-phero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(46px, 6vw, 84px);
  background: linear-gradient(150deg, rgba(124, 58, 237, .26), rgba(7, 3, 18, .95));
}
.esz-phero__inner { position: relative; z-index: 1; max-width: 780px; }
.esz-phero__title { margin: 12px 0 14px; }

.esz-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--ez-step--2); color: var(--ez-faint); font-family: var(--ez-font-mono); }
.esz-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ez-purple); }
.esz-crumbs a:hover { color: var(--ez-cyan); }

.esz-pager { display: flex; flex-wrap: wrap; gap: 6px; }
.esz-pager__link {
  min-width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  padding: 0 12px;
  font-family: var(--ez-font-mono);
  color: var(--ez-dim);
  background: rgba(18, 10, 38, .7);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
  transition: color var(--ez-fast), box-shadow var(--ez-fast);
}
.esz-pager__link:hover { color: var(--ez-cyan); box-shadow: inset 0 0 0 1px var(--ez-cyan); }
.esz-pager__link[aria-current="page"] { color: #fff; background: var(--ez-purple); }
.esz-pager__link.is-disabled { opacity: .4; pointer-events: none; }

.esz-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esz-share__label { font-family: var(--ez-font-display); font-weight: 600; font-size: var(--ez-step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ez-faint); }
.esz-share__btn {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  color: var(--ez-dim);
  background: rgba(18, 10, 38, .8);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
  transition: color var(--ez-fast), box-shadow var(--ez-fast);
}
.esz-share__btn:hover { color: var(--ez-cyan); box-shadow: inset 0 0 0 1px var(--ez-cyan), 0 0 16px -6px var(--ez-glow-cyan); }
.esz-share__btn.is-copied { color: var(--ez-cyan); box-shadow: inset 0 0 0 1px var(--ez-cyan); }

/* ---------- 23. FOOTER --------------------------------------------------- */
.esz-footer {
  background: rgba(4, 1, 12, .92);
  border-top: 1px solid var(--ez-line);
  padding-top: clamp(44px, 5vw, 72px);
  position: relative;
}
.esz-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ez-purple), var(--ez-cyan) 45%, var(--ez-blue) 70%, transparent);
  opacity: .8;
}
.esz-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
  gap: clamp(22px, 3vw, 40px);
  padding-bottom: 40px;
}
.esz-footer__about { font-size: var(--ez-step--1); color: var(--ez-dim); margin: 16px 0 18px; }
.esz-footer__title {
  font-size: var(--ez-step--2);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ez-cyan);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ez-line);
}
.esz-footer__links li { margin-bottom: 9px; }
.esz-footer__links a { font-size: var(--ez-step--1); color: var(--ez-dim); transition: color var(--ez-fast), padding-left var(--ez-fast); display: inline-block; }
.esz-footer__links a:hover { color: var(--ez-cyan); padding-left: 6px; }
.esz-footer__contact li { display: flex; gap: 10px; margin-bottom: 13px; font-size: var(--ez-step--1); color: var(--ez-dim); }
.esz-footer__contact svg { flex: none; margin-top: 3px; color: var(--ez-purple); }
.esz-footer__contact a:hover { color: var(--ez-cyan); }
.esz-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-top: 1px solid var(--ez-line);
  font-size: var(--ez-step--2);
  color: var(--ez-faint);
}
.esz-footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.esz-footer__legal a:hover { color: var(--ez-cyan); }
.esz-footer__parent {
  text-align: center;
  padding: 16px 0 26px;
  margin: 0;
  font-family: var(--ez-font-display);
  font-weight: 600;
  font-size: var(--ez-step--2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ez-faint);
  border-top: 1px solid var(--ez-line-soft);
}
.esz-footer__parent strong { color: var(--ez-ink); font-weight: 700; }

.esz-social { display: flex; gap: 8px; flex-wrap: wrap; }
.esz-social__a {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  color: var(--ez-dim);
  background: rgba(27, 16, 56, .8);
  box-shadow: inset 0 0 0 1px var(--ez-line);
  clip-path: var(--ez-clip-chip);
  transition: color var(--ez-fast), box-shadow var(--ez-fast);
}
.esz-social__a:hover { color: var(--ez-cyan); box-shadow: inset 0 0 0 1px var(--ez-cyan), 0 0 16px -6px var(--ez-glow-cyan); }

/* ---------- 24. FLOATING UI --------------------------------------------- */
.esz-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--ez-cyan), var(--ez-purple), var(--ez-magenta));
  box-shadow: 0 0 12px var(--ez-glow-purple);
  z-index: calc(var(--ez-z-float) + 20);
}

.esz-wa {
  position: fixed;
  left: 20px; bottom: 20px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: #128c3e;
  color: #fff;
  clip-path: var(--ez-clip-chip);
  z-index: var(--ez-z-float);
  box-shadow: 0 12px 30px -12px rgba(18, 140, 62, .8);
  transition: transform var(--ez-fast);
}
.esz-wa:hover { transform: translateY(-3px); }

.esz-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--ez-ink);
  background: linear-gradient(140deg, var(--ez-purple-deep), var(--ez-purple));
  clip-path: var(--ez-clip-chip);
  z-index: var(--ez-z-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--ez-snap), transform var(--ez-snap), visibility var(--ez-snap);
  box-shadow: 0 0 24px -8px var(--ez-glow-purple);
}
.esz-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }

.esz-cookie {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 130%);
  width: min(760px, calc(100vw - 40px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: rgba(11, 5, 26, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--ez-purple), 0 24px 60px -30px #000;
  clip-path: var(--ez-clip-duo);
  z-index: var(--ez-z-cookie);
  transition: transform var(--ez-med) var(--ez-ease);
}
.esz-cookie.is-shown { transform: translate(-50%, 0); }
.esz-cookie__text { font-size: var(--ez-step--1); color: var(--ez-dim); margin: 0; flex: 1 1 300px; }
.esz-cookie__text a { color: var(--ez-cyan); text-decoration: underline; }
.esz-cookie__acts { display: flex; gap: 10px; }

/* ---------- 25. SCROLL REVEAL & MOTION ---------------------------------- */
[data-ez-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--ez-reveal) var(--ez-ease), transform var(--ez-reveal) var(--ez-ease);
  will-change: opacity, transform;
}
[data-ez-reveal="left"]  { transform: translateX(-30px); }
[data-ez-reveal="right"] { transform: translateX(30px); }
[data-ez-reveal="fade"]  { transform: none; }
[data-ez-reveal="clip"]  { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path var(--ez-reveal) var(--ez-ease); }
[data-ez-reveal].is-in   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

.u-d1 { transition-delay: 60ms; }
.u-d2 { transition-delay: 120ms; }
.u-d3 { transition-delay: 180ms; }
.u-d4 { transition-delay: 240ms; }
.u-d5 { transition-delay: 300ms; }
.u-d6 { transition-delay: 360ms; }

/* ---------- 26. UTILITIES ------------------------------------------------ */
.u-hide { display: none !important; }
@media (max-width: 1060px) { .u-hide-sm { display: none !important; } }
.u-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-center { text-align: center; }
.u-right  { text-align: right; }
.u-flex   { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.u-wrap   { flex-wrap: wrap; }
.u-mt0 { margin-top: 0; }
.u-mt1 { margin-top: 10px; }
.u-mt2 { margin-top: 20px; }
.u-mt3 { margin-top: 34px; }
.u-mb1 { margin-bottom: 10px; }
.u-mb2 { margin-bottom: 20px; }
.u-mb3 { margin-bottom: 34px; }
.u-gap-sm { gap: var(--ez-gap-sm); }
.u-purple { color: var(--ez-purple); }
.u-cyan   { color: var(--ez-cyan); }
.u-ink    { color: var(--ez-ink); }
.u-muted  { color: var(--ez-faint); }
.u-mono   { font-family: var(--ez-font-mono); }
.u-nowrap { white-space: nowrap; }
.u-maxch  { max-width: 66ch; }
.u-fill   { height: 100%; }

/* ---------- 27. RESPONSIVE ----------------------------------------------- */
@media (max-width: 1200px) {
  .esz-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .esz-sponsors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .esz-quint { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1060px) {
  .esz-nav { display: none; }
  .esz-burger { display: inline-grid; }
  .esz-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .esz-offset, .esz-offset--flip { grid-template-columns: minmax(0, 1fr); }
  .esz-offset > :nth-child(2), .esz-offset--flip > :nth-child(1) { margin-top: 0; }
  .esz-split { grid-template-columns: minmax(0, 1fr); }
  .esz-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esz-prizeband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esz-discord__inner { grid-template-columns: minmax(0, 1fr); }
  .esz-diag { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  :root { --ez-band: 46px; --ez-shear: 5vw; }
  .esz-trio { grid-template-columns: minmax(0, 1fr); }
  .esz-duo  { grid-template-columns: minmax(0, 1fr); }
  .esz-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esz-footer__grid { grid-template-columns: 1fr 1fr; }
  .esz-cta__inner { flex-direction: column; align-items: flex-start; }
  .esz-sechead { grid-template-columns: minmax(0, 1fr); }
  .esz-sechead__more { justify-self: start; }
  .esz-statusbar__label span { display: none; }
  .esz-cal__row { grid-template-columns: 66px minmax(0, 1fr); }
  .esz-cal__row > :last-child { grid-column: 2; justify-self: start; }
}

@media (max-width: 560px) {
  .esz-quad, .esz-quint { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esz-prizeband { grid-template-columns: minmax(0, 1fr); }
  .esz-sponsors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esz-footer__grid { grid-template-columns: 1fr; }
  .esz-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esz-ticker__tag span { display: none; }
  .esz-sub__form { flex-direction: column; align-items: stretch; }
  .esz-hero__facts { gap: 12px 22px; }
  .esz-wa { width: 46px; height: 46px; }
}

/* ---------- 28. REDUCED MOTION & PRINT ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-ez-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .esz-neon::before   { animation: none !important; }
  .esz-gridfloor      { animation: none !important; }
  .esz-ticker__track  { animation: none !important; transform: none !important; }
  .esz-pulse          { animation: none !important; box-shadow: none !important; }
  .esz-flick          { animation: none !important; }
  .esz-hero__canvas   { display: none !important; }
  .esz-glow:hover     { transform: none !important; }
  .esz-btn:hover      { transform: none !important; }
  .esz-game:hover     { transform: none !important; }
}

@media print {
  .esz-header, .esz-statusbar, .esz-ticker, .esz-drawer,
  .esz-wa, .esz-top, .esz-cookie, .esz-progress, .esz-hero__canvas, .esz-gridfloor { display: none !important; }
  body { background: #fff; color: #000; background-image: none; }
  .esz-panel, .esz-neon, .esz-glass, .esz-neon__in { background: #fff !important; box-shadow: none !important; clip-path: none !important; }
  h1, h2, h3, h4 { color: #000; }
}