/* ============================================================
   Zenith Esports — shared theme, language & motion system
   Loaded by index.html, tournament.html and diamond-plan.html
   ============================================================ */

:root{
  /* paired with the display font already used per page (Orbitron) */
  --font-main:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Noto Sans Myanmar','Noto Sans Thai','Segoe UI',Roboto,sans-serif;
}

/* ---------- dark (default) already comes from each page's :root ---------- */

/* ---------- light mode ----------
   NOTE: uses :root[data-theme="light"] (not just [data-theme="light"])
   so this beats the plain `:root{...}` dark-color block that each page
   defines in its own <style>. Both selectors have the same specificity,
   so without the extra :root here, whichever one happens to load later
   in the HTML wins — which was silently canceling the whole toggle. */
:root[data-theme="light"]{
  --void:#F3EFFC;
  --void-rgb:243,239,252;
  --panel:#FFFFFF;
  --panel-raised:#F4EFFF;
  --line:#DDD3F3;
  --violet:#7C4CED;
  --violet-dim:#C9B7F0;
  --cyan:#0E9AA3;
  --signal:#E11D74;
  --hi:#1B1030;
  --mid:#5C4C7C;
  --dim:#8C7FA6;
}
/* ============================================================
   Shared animated background — every page, identically
   ------------------------------------------------------------
   Each page used to paint its own static purple radials, and the
   home page additionally sat on a blurred video that washed the
   whole hero mauve. Both are gone; pages now set only the flat
   base colour and this one fixed layer supplies the deep-blue
   aurora, so every category matches automatically.

   position:fixed keeps it out of flex/grid flow (so it is safe
   inside the home page's flex body) and stops it scrolling with
   content, which also means it costs one composited layer rather
   than repainting on scroll.
   ============================================================ */
body::before{
  content:"";
  position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 42vh at 18% 16%, rgba(56,110,255,0.30), transparent 62%),
    radial-gradient(34vw 38vh at 82% 12%, rgba(96,84,255,0.24), transparent 62%),
    radial-gradient(40vw 44vh at 68% 84%, rgba(24,74,190,0.26), transparent 62%),
    radial-gradient(30vw 34vh at 12% 78%, rgba(40,150,220,0.16), transparent 62%);
  filter:blur(28px);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
/* Slow, low-amplitude drift: the blobs breathe and slide a little
   rather than obviously looping, so it reads as ambience. */
@keyframes auroraDrift{
  0%  {transform:translate3d(0,0,0) scale(1);}
  50% {transform:translate3d(2.5%,-2%,0) scale(1.08);}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03);}
}
/* Lighter, cooler wash so the same animation reads correctly on
   the pale background instead of muddying it. */
[data-theme="light"] body::before{
  background:
    radial-gradient(38vw 42vh at 18% 16%, rgba(56,110,255,0.16), transparent 62%),
    radial-gradient(34vw 38vh at 82% 12%, rgba(124,76,237,0.12), transparent 62%),
    radial-gradient(40vw 44vh at 68% 84%, rgba(24,120,200,0.12), transparent 62%),
    radial-gradient(30vw 34vh at 12% 78%, rgba(14,154,163,0.10), transparent 62%);
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none;}
}

[data-theme="light"] .brand .mark,
[data-theme="light"] .pay-chip .swatch,
[data-theme="light"] .proof-head .swatch{background:#fff;box-shadow:0 0 0 1px var(--line) inset;}
[data-theme="light"] .hero-btn.primary{box-shadow:0 8px 22px rgba(124,76,237,0.28);}

html{transition:background-color .35s ease;}
body,
.card,.pass-card,.pay-chip,.stat,.ticket,.tab,.hero-btn,input,select,.upload-box{
  transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

/* ============================================================
   header controls: admin pill + language switch + theme toggle + menu
   Every page defines its own local <style> for these (leftover from
   before this shared file existed), so plain `.lang-switch{}` here would
   lose to whichever loads later in the given page. Scoping through
   `.hdr-controls` / `header` raises the specificity just enough that
   this file always wins, which is what makes it possible to guarantee
   one consistent control height across every page from a single place.
   ============================================================ */
:root{ --hdr-ctrl-h:42px; }

.hdr-controls{display:flex;align-items:center;gap:10px;}

.hdr-controls .admin-toggle,
.hdr-controls .ads-manage-btn,
.hdr-controls .lang-switch,
.hdr-controls .theme-toggle,
header .mobile-menu-btn{
  height:var(--hdr-ctrl-h);box-sizing:border-box;margin:0;
}

.hdr-controls .lang-switch{
  position:relative;display:flex;align-items:stretch;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px;
}
.hdr-controls .lang-switch button{
  position:relative;z-index:2;border:none;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.5px;
  color:var(--dim);padding:0 12px;border-radius:999px;transition:color .25s ease;
}
.hdr-controls .lang-switch button.active{color:#fff;}
.hdr-controls .lang-switch .pill{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(33.333% - 2px);
  background:linear-gradient(135deg,var(--violet),#6D3FE0);border-radius:999px;
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1;
}

.hdr-controls .theme-toggle{
  position:relative;width:var(--hdr-ctrl-h);border-radius:12px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hdr-controls .theme-toggle:hover{border-color:var(--violet-dim);}
.hdr-controls .theme-toggle .icon-wrap{position:relative;width:20px;height:20px;}
.hdr-controls .theme-toggle svg{
  position:absolute;inset:0;width:20px;height:20px;
  transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.hdr-controls .theme-toggle .icon-sun{color:#FFB454;opacity:0;transform:rotate(-90deg) scale(.4);}
.hdr-controls .theme-toggle .icon-moon{color:var(--cyan);opacity:1;transform:rotate(0) scale(1);}
[data-theme="light"] .hdr-controls .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1);}
[data-theme="light"] .hdr-controls .theme-toggle .icon-moon{opacity:0;transform:rotate(90deg) scale(.4);}
.hdr-controls .theme-toggle .ray{transform-origin:10px 10px;animation:sunSpin 12s linear infinite;}
@keyframes sunSpin{to{transform:rotate(360deg);}}

header .mobile-menu-btn{
  display:none;width:var(--hdr-ctrl-h);flex-shrink:0;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--hi);font-size:16px;cursor:pointer;padding:0;line-height:1;
}

.hdr-controls .admin-toggle,
.hdr-controls .ads-manage-btn{
  display:none;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:0 14px;font-size:12px;font-weight:700;letter-spacing:0.3px;cursor:pointer;color:var(--dim);
  font-family:var(--font-main);
}
.hdr-controls .admin-toggle:hover,
.hdr-controls .ads-manage-btn:hover{border-color:var(--violet-dim);color:var(--hi);}
.hdr-controls .admin-toggle.on{display:flex;background:linear-gradient(135deg,var(--violet),#6D3FE0);border-color:transparent;color:#fff;}
.hdr-controls .ads-manage-btn.show{display:flex;}

@media (max-width:900px){
  :root{ --hdr-ctrl-h:38px; }
  .hdr-controls{gap:8px;}
  header .mobile-menu-btn{display:flex;}
}

/* ---------- mobile language dropdown ----------
   Under 900px the three-way pill has no room to sit next to the theme
   toggle and hamburger at a readable size, so it collapses to just the
   active language as a trigger chip; tapping it drops the other two
   down as a small floating menu instead. */
@media (max-width:900px){
  .hdr-controls .lang-switch{padding:0;border:none;background:transparent;gap:0;}
  .hdr-controls .lang-switch .pill{display:none;}
  .hdr-controls .lang-switch button{display:none;}
  .hdr-controls .lang-switch button.active{
    display:flex;align-items:center;justify-content:center;gap:4px;
    height:100%;min-width:52px;padding:0 12px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--hi);
  }
  .hdr-controls .lang-switch button.active::after{
    content:"";width:5px;height:5px;margin-left:1px;
    border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);
  }
  .hdr-controls .lang-switch.open button{
    display:flex;align-items:center;
    position:absolute;top:calc(100% + 8px);right:0;
    width:96px;height:36px;padding:0 14px;
    border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--mid);
    z-index:39;box-shadow:0 12px 24px rgba(0,0,0,0.35);
  }
  .hdr-controls .lang-switch.open button:nth-of-type(1){transform:translateY(0);}
  .hdr-controls .lang-switch.open button:nth-of-type(2){transform:translateY(44px);}
  .hdr-controls .lang-switch.open button:nth-of-type(3){transform:translateY(88px);}
  .hdr-controls .lang-switch.open button.active{background:var(--violet);border-color:transparent;color:#fff;}
  .hdr-controls .lang-switch.open button.active::after{display:none;}
}

/* ============================================================
   shared motion utilities
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);}
  .reveal-stagger.in > *{opacity:1;transform:translateY(0);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.06s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.10s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.14s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.18s;}
  .reveal-stagger.in > *:nth-child(6){transition-delay:.22s;}
  .reveal-stagger.in > *:nth-child(n+7){transition-delay:.26s;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

body.page-ready{animation:pageFadeIn .5s ease both;}
@keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}}

/* button micro-interaction */
.hero-btn,.submit-btn,.back{position:relative;overflow:hidden;}
.hero-btn:active,.submit-btn:not(:disabled):active,.back:active{transform:scale(.97);}