:root{
  --gold:#ffd24a; --gold2:#ff9a3c; --cyan:#4cd9ff; --mag:#ff2bd6; --pur:#8b5cff;
  --lime:#aaff3c; --orange:#ff7a3c;
  --ink:#07050a; --panel:#140f1a; --line:rgba(255,210,74,.28);
  --txt:#f3ecd8; --muted:#a99a78; --err:#ff5a6a; --ok:#8fe38f;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* On-brand keyboard-focus ring — sitewide baseline so every clickable
   element gets this cyan glow instead of each browser's own default
   outline. More specific :focus rules elsewhere (e.g. .field inputs)
   still win over this for the properties they set. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(76,217,255,.25);
}
/* ================================================================ */
/* ---- Motion system (sitewide) — scroll reveals, 3D tilt, cursor ---- */
/* ---- glow, hero entrance choreography, button shine sweep.       ---- */
/* ---- Applied automatically via AAD.initMotionSystem() in app.js, ---- */
/* ---- called from AAD.buildHeader on every page. Every effect     ---- */
/* ---- here is either one-shot (entrance/reveal) or driven 1:1 by  ---- */
/* ---- real pointer input (tilt/glow) — nothing loops or pulses on ---- */
/* ---- its own. See references/creation-gotchas.md in the design-  ---- */
/* ---- motion-principles skill for why that distinction matters.   ---- */
/* ================================================================ */

/* ---- Scroll reveal — content arrives once as it enters view ---- */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0s);}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0);}

/* ---- Hero entrance — one-shot staggered arrival on load, distinct ---- */
/* ---- from .reveal (time-triggered, not scroll-triggered).         ---- */
.hero-in{opacity:0;transform:translateY(16px);filter:blur(5px);
  animation:heroIn .75s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--hero-delay,0s);}
@keyframes heroIn{to{opacity:1;transform:translateY(0);filter:blur(0);}}

/* ---- Generic 3D tilt-card — pointer-tracked perspective tilt + a ---- */
/* ---- moving glare, desktop only. Distinct from dj-bios.html's     ---- */
/* ---- bespoke .holocard system (mystery-reveal specific, its own   ---- */
/* ---- ambient shimmer); this is the lighter, reusable version for  ---- */
/* ---- ordinary card grids sitewide.                                ---- */
.tilt-card{position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.tilt-card.tilting{transition:none;}
.tilt-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.14),transparent 55%);
  opacity:0;transition:opacity .3s ease;z-index:2;}
.tilt-card.tilting::after{opacity:1;}

/* ---- Button shine sweep — fast (these are real, frequently ---- */
/* ---- clicked functional buttons, not decoration).            ---- */
.cta,.submitbtn,.votebtn{position:relative;overflow:hidden;}
.cta::after,.submitbtn::after,.votebtn::after{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .45s cubic-bezier(.4,0,.2,1);pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  .cta:hover::after,.submitbtn:hover::after,.votebtn:hover::after{left:130%;}
}

/* ---- Cursor glow trail — a soft, lagging light on desktop only. ---- */
/* ---- Driven 1:1 by real pointer movement (a spring toward the    ---- */
/* ---- cursor, per the motion cookbook's "spring for mouse          ---- */
/* ---- position" pattern) — not a self-running loop.                ---- */
#cursorGlow{position:fixed;top:0;left:0;width:340px;height:340px;border-radius:50%;
  pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(circle,rgba(255,210,74,.12) 0%,rgba(255,43,214,.07) 45%,transparent 72%);
  transition:opacity .4s ease;}
#cursorGlow.active{opacity:1;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none;}
  .hero-in{opacity:1;transform:none;filter:none;animation:none;}
  .tilt-card{transition:none;}
  .tilt-card::after{display:none;}
  .cta::after,.submitbtn::after,.votebtn::after{display:none;}
  #cursorGlow{display:none;}
}
@media (hover:none),(pointer:coarse){
  #cursorGlow{display:none;} /* no pointer to trail on touch devices */
}

html,body{height:100%;}
body{
  background:var(--ink);color:var(--txt);
  font-family:'Rajdhani','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:500;
  min-height:100vh;overflow-x:hidden;
  position:relative;
}
/* CRT scanline overlay — subtle, sits above everything, never blocks clicks */
body::after{content:'';position:fixed;inset:0;z-index:8;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:overlay;opacity:.45;}
/* Strobe beat — a callback to the AAD III Live Loop's flash effect, kept brief and rare */
body::before{content:'';position:fixed;inset:0;z-index:9;pointer-events:none;background:#fff;opacity:0;
  animation:strobeflash 9s ease-in-out infinite;}
@keyframes strobeflash{0%,96.5%,100%{opacity:0;}97%{opacity:.07;}97.6%{opacity:0;}}

#bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
/* Synthwave horizon glow, drawn with a pseudo-element — no extra markup needed */
#bg::before{content:'';position:absolute;left:50%;bottom:20vh;width:78vw;height:78vw;
  transform:translateX(-50%);
  background:radial-gradient(circle at center, rgba(255,210,74,.32) 0%, rgba(255,43,214,.16) 40%, transparent 68%);
  filter:blur(55px);animation:sunpulse 7s ease-in-out infinite;}
/* Perspective neon grid floor, also pseudo-element only */
#bg::after{content:'';position:absolute;left:-25%;right:-25%;bottom:-8%;height:56vh;
  background-image:linear-gradient(rgba(76,217,255,.4) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(76,217,255,.4) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(280px) rotateX(62deg);
  transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, black 0%, transparent 78%);
          mask-image:linear-gradient(to top, black 0%, transparent 78%);
  animation:gridscroll 2.4s linear infinite;
  opacity:.4;}
@keyframes sunpulse{50%{opacity:.7;transform:translateX(-50%) scale(1.07);}}
@keyframes gridscroll{from{background-position:0 0,0 0;}to{background-position:0 64px,0 0;}}

/* Moving-head stage lights — tall soft-edged cones pivoting from a fixed */
/* rig point up top, sweeping back and forth like real DJ booth lighting. */
/* Same class names as before (.blob/.b1-3) so no HTML markup changes */
/* anywhere — this is a pure re-skin of what those hooks render as. */
/* position:absolute, not fixed — #bg (the parent) is already position:fixed */
/* and covers the full viewport, so this is visually identical, but WebKit */
/* has a long-standing bug where position:fixed + mix-blend-mode together */
/* silently drops the blend mode entirely; absolute avoids that combination. */
.blob{position:absolute;top:-8vh;width:16vw;height:135vh;filter:blur(20px);opacity:.24;
  mix-blend-mode:screen;transform-origin:top center;
  clip-path:polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%);}
.b1{left:4vw;background:linear-gradient(180deg,var(--gold) 0%,rgba(255,210,74,.4) 45%,transparent 78%);
    animation:beam1 10s ease-in-out infinite;}
.b2{left:40vw;background:linear-gradient(180deg,var(--cyan) 0%,rgba(76,217,255,.4) 45%,transparent 78%);
    animation:beam2 12.5s ease-in-out infinite;opacity:.18;}
.b3{left:74vw;background:linear-gradient(180deg,var(--mag) 0%,rgba(255,43,214,.4) 45%,transparent 78%);
    animation:beam3 14s ease-in-out infinite;opacity:.2;}
@keyframes beam1{0%,100%{transform:rotate(-16deg);}50%{transform:rotate(11deg);}}
@keyframes beam2{0%,100%{transform:rotate(9deg);}50%{transform:rotate(-18deg);}}
@keyframes beam3{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(19deg);}}

/* Drifting haze — soft, slow-rising fog wisps (fog-machine atmosphere), */
/* not sparkle dots. Same .spark class/buildSparks() call site as before. */
.spark{position:absolute;border-radius:50%;filter:blur(7px);opacity:0;mix-blend-mode:screen;
  animation-name:hazerise;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
@keyframes hazerise{
  0%{opacity:0;transform:translate(0,0) scale(.7);}
  18%{opacity:.32;}
  82%{opacity:.16;}
  100%{opacity:0;transform:translate(var(--dx,24px),-160px) scale(1.8);}
}

/* ==== DJ + crowd silhouette scene — the big background centerpiece. ==== */
/* ==== Lives inside #bg (position:absolute, own z-index) so it sits    ==== */
/* ==== above the grid floor/beam blobs but still behind #vig and every ==== */
/* ==== real page element.                                              ==== */
#stageScene{position:absolute;left:0;right:0;bottom:0;height:56vh;min-height:320px;max-height:620px;z-index:2;overflow:hidden;}
#stageSceneSvg{display:block;width:100%;height:100%;}
#stageSceneSvg .crowdlayer,
#stageSceneSvg .djbooth,
#stageSceneSvg .djfigure,
#stageSceneSvg .djthrone{fill:#241a3d;color:#241a3d;}
/* Warm rim-glow on every silhouette edge — this is what makes the shapes ---- */
/* read clearly even when only a thin sliver peeks between page content, ---- */
/* since flat near-black fill alone barely shows against the near-black ---- */
/* page background. Classic backlit-silhouette treatment. */
#stageSceneSvg .crowdlayer{filter:drop-shadow(0 0 3px rgba(255,178,60,.55));}
#stageSceneSvg .djbooth,
#stageSceneSvg .djfigure{filter:drop-shadow(0 0 7px rgba(255,178,60,.6)) drop-shadow(0 0 16px rgba(255,43,214,.35));}
/* Throne sits a step further back than the booth/figure, so its glow reads ---- */
/* softer — it's the grand seat framing the DJ, not competing with them. ---- */
#stageSceneSvg .djthrone{filter:drop-shadow(0 0 10px rgba(255,178,60,.35));}

/* Crowd — gentle staggered cheering bob, 4 phase groups for a natural wave */
.crowdfig{animation-name:crowdbob;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
.crowdfig.bob1{animation-duration:2.6s;animation-delay:0s;}
.crowdfig.bob2{animation-duration:2.9s;animation-delay:.4s;}
.crowdfig.bob3{animation-duration:2.4s;animation-delay:.8s;}
.crowdfig.bob4{animation-duration:3.1s;animation-delay:1.2s;}
@keyframes crowdbob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* DJ's hyping arm — a slow triumphant pump, pivoting from the shoulder */
.djarm{animation:armpump 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%;}
@keyframes armpump{0%,100%{transform:rotate(0deg);}50%{transform:rotate(-7deg);}}

/* Converging spotlight beams behind the DJ — slow independent opacity pulse */
.convbeam{animation:convbeampulse 5s ease-in-out infinite;}
.convbeam.beamdelay{animation-delay:2.4s;}
@keyframes convbeampulse{0%,100%{opacity:.55;}50%{opacity:1;}}

/* CDJ jog-wheel rings + headphone ear glow — small pulses of "life" */
.deckring{animation:ringpulse 3.4s ease-in-out infinite;}
.earglow{animation:ringpulse 2.2s ease-in-out infinite;}
@keyframes ringpulse{0%,100%{opacity:.5;}50%{opacity:1;}}

/* The Coronation crown motif above the DJ — soft royal pulse */
.djcrown{animation:crownpulse 4s ease-in-out infinite;}
@keyframes crownpulse{0%,100%{opacity:.75;}50%{opacity:1;}}

/* Throne — a slower, grander pulse than the crown, like it's breathing */
.djthrone{animation:thronepulse 6s ease-in-out infinite;}
@keyframes thronepulse{0%,100%{opacity:.78;}50%{opacity:.95;}}

/* Phone-light twinkles scattered through the crowd */
.phonelight{fill:#fff8e0;animation-name:twinkle;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;filter:drop-shadow(0 0 3px rgba(255,248,224,.9));}
@keyframes twinkle{0%,100%{opacity:0;}50%{opacity:1;}}

@media (max-width:640px){
  #stageScene{height:42vh;min-height:260px;}
}

/* Shimmer skeleton placeholders — used instead of plain "Loading…" text ---- */
/* while a list is still fetching. .skeleton-row height varies by context. */
.skeleton{background:linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.1) 37%, rgba(255,255,255,.045) 63%);
  background-size:400% 100%;animation:skeletonshine 1.5s ease infinite;border-radius:12px;
  border:1px solid rgba(255,210,74,.12);}
.skeleton-row{height:64px;margin-bottom:10px;}
@keyframes skeletonshine{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

#vig{position:fixed;inset:0;z-index:1;pointer-events:none;
     background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.74) 100%);}

header{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;
       padding:16px 20px;border-bottom:1px solid var(--line);background:rgba(7,5,10,.78);
       -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-wrap:wrap;gap:10px;
       box-shadow:0 1px 0 rgba(255,210,74,.15),0 10px 30px -12px rgba(255,43,214,.3);}
header .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
header img{height:34px;aspect-ratio:11/4;filter:drop-shadow(0 0 8px rgba(255,210,74,.7));}
header .brand b{font-family:'Orbitron',sans-serif;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);}
nav{display:flex;gap:8px;flex-wrap:wrap;}
nav a{font-family:'Orbitron',sans-serif;color:var(--txt);text-decoration:none;font-size:11px;font-weight:700;
      letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:10px;border:1px solid transparent;
      transition:background .15s,border-color .15s,text-shadow .15s;}
nav a:hover{background:rgba(76,217,255,.1);border-color:rgba(76,217,255,.4);text-shadow:0 0 10px rgba(76,217,255,.8);}
nav a.active{background:rgba(255,210,74,.14);border-color:rgba(255,210,74,.5);color:var(--gold);
  text-shadow:0 0 10px rgba(255,210,74,.7);}
nav a .nav-n{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:rgba(76,217,255,.16);color:var(--cyan);font-size:9px;margin-right:6px;vertical-align:middle;}
nav a.active .nav-n{background:var(--gold);color:#2a1600;}
/* Below ~680px, 12 wrapped pills ate up to a third of the first viewport
   on every page. A single horizontally-scrollable row keeps every
   destination (including Host Tools) reachable without hiding any of
   them behind a collapsed menu. */
@media(max-width:680px){
  nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none;}
  nav::-webkit-scrollbar{display:none;height:0;}
  nav a{flex:0 0 auto;padding:12px 14px;}
}

/* Scrolling hype ticker, injected right after the header by AAD.buildTicker() */
#site-ticker{position:relative;z-index:5;overflow:hidden;white-space:nowrap;
  background:linear-gradient(90deg, rgba(255,43,214,.14), rgba(76,217,255,.14));
  border-bottom:1px solid var(--line);padding:7px 0;}
#site-ticker .tickertrack{display:inline-flex;animation:tickerscroll 28s linear infinite;}
#site-ticker:hover .tickertrack,#site-ticker:focus-within .tickertrack{animation-play-state:paused;}
#site-ticker .tickertrack span{margin:0 10px 0 28px;color:var(--lime);font-size:9px;}
#site-ticker .tickertrack{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
@keyframes tickerscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

main{position:relative;z-index:5;max-width:920px;margin:0 auto;padding:34px 20px 70px;overflow:hidden;}

.kick{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
      text-shadow:0 0 12px rgba(255,210,74,.7);}
h1{font-family:'Orbitron',sans-serif;font-size:clamp(26px,5vw,46px);font-weight:900;text-transform:uppercase;
   line-height:1.05;margin-top:10px;color:#fff;
   text-shadow:0 3px 16px rgba(0,0,0,.9),0 0 34px rgba(255,210,74,.5);
   animation:glitchflicker 6s infinite;}
/* RGB-split glitch, same combo as the AAD III Live Loop's title treatment */
@keyframes glitchflicker{
  0%,89%,100%{text-shadow:0 3px 16px rgba(0,0,0,.9),0 0 34px rgba(255,210,74,.5);}
  90%{text-shadow:-2px 0 rgba(255,0,90,.75),2px 0 rgba(0,220,255,.75),0 0 38px rgba(139,92,255,.55);}
  92%{text-shadow:2px 0 rgba(255,0,90,.75),-2px 0 rgba(0,220,255,.75),0 0 38px rgba(139,92,255,.55);}
  94%{text-shadow:-1px 0 rgba(255,0,90,.6),1px 0 rgba(0,220,255,.6),0 0 30px rgba(139,92,255,.5);}
}
.lede{margin-top:14px;font-size:17.5px;line-height:1.65;color:var(--txt);max-width:64ch;font-weight:500;}
.lede.muted{color:var(--muted);}

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg;}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;
      padding:20px;margin-top:22px;overflow:hidden;isolation:isolate;}
.card::before{content:'';position:absolute;inset:0;border-radius:16px;padding:1.5px;
  background:conic-gradient(from var(--ang,0deg), var(--gold), var(--mag), var(--cyan), var(--pur), var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.5; animation:rotborder 7s linear infinite; z-index:0; pointer-events:none;}
.card > *{position:relative;z-index:1;}
@keyframes rotborder{to{--ang:360deg;}}
.card h2{font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;}

/* Shared DJ/Fan/Judge role-picker — used on the homepage and How It Works */
.rolepicker{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:28px 0 8px;}
.rolebtn{font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;letter-spacing:.02em;
  color:#fff;background:rgba(255,255,255,.05);border:2px solid rgba(255,210,74,.3);border-radius:16px;
  padding:16px 26px;cursor:pointer;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:.15s;min-width:130px;}
.rolebtn .emoji{font-size:34px;}
.rolebtn:hover{background:rgba(255,210,74,.12);border-color:var(--gold);transform:translateY(-2px);}
.landing-ask{background:linear-gradient(90deg,rgba(255,210,74,.1),rgba(76,217,255,.08));
  border:1.5px solid rgba(255,210,74,.3);border-radius:16px;padding:20px;margin:18px 0;text-align:center;}
.landing-ask-label{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;margin:0 0 4px;}

.cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:'Orbitron',sans-serif;font-size:14px;
     font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#2a1600;text-decoration:none;
     background:linear-gradient(90deg,var(--gold),var(--gold2));border:1.5px solid var(--gold);
     border-radius:12px;padding:13px 28px;box-shadow:0 0 22px rgba(255,210,74,.5);
     transition:transform .08s,box-shadow .15s;cursor:pointer;
     animation:ctapulse 2.6s ease-in-out infinite;}
@keyframes ctapulse{0%,100%{box-shadow:0 0 22px rgba(255,210,74,.5);}50%{box-shadow:0 0 30px rgba(255,210,74,.85),0 0 54px rgba(255,43,214,.3);}}
.cta:hover{box-shadow:0 0 36px rgba(255,210,74,.9);}
.cta:active{transform:scale(.98);}
.cta.ghost{background:transparent;color:var(--txt);border-color:var(--line);box-shadow:none;animation:none;}
.cta.ghost:hover{background:rgba(76,217,255,.08);border-color:rgba(76,217,255,.5);}
.ctarow{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}

form{margin-top:8px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],
.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;color:var(--txt);font:inherit;font-size:15px;
  box-shadow:0 0 0 1px rgba(255,210,74,.08) inset;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(76,217,255,.16);}
.field.invalid input,.field.invalid select{border-color:var(--err);box-shadow:0 0 0 3px rgba(255,90,106,.16);}
.field .hint{font-size:13.5px;color:var(--muted);margin-top:5px;line-height:1.5;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){ .row2{grid-template-columns:1fr;} }
/* A hard display:none/block swap made this field snap into existence;
   max-height+opacity gives it a visible settle instead. 160px comfortably
   fits the label+input pair this wraps (register.html's B2B partner field). */
#member2wrap{max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .3s cubic-bezier(.2,.8,.3,1),opacity .25s ease;}
#member2wrap.show{max-height:160px;opacity:1;pointer-events:auto;}

/* Shared "N / max" progress readout — built for register.html's spot
   counter, reused as-is by submit.html's entry-cap status. */
.regbar{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:10px;}
.regbar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--cyan));
  transition:width .4s ease;}
.regcount{display:flex;justify-content:space-between;align-items:baseline;font-family:'Orbitron',sans-serif;}
.regcount b{font-size:22px;color:var(--gold);}
.regcount span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* Segmented "Upload MP3" / "Paste a Link" toggle on submit.html — two
   equal, mutually-exclusive tabs, not a dropdown, since there are only
   ever two options and both should be visible at a glance. */
.mixmode{display:flex;gap:8px;margin:14px 0 16px;}
.mixmode-btn{flex:1;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:10px;padding:11px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.mixmode-btn.active{color:#2a1600;background:linear-gradient(90deg,var(--gold),var(--gold2));border-color:var(--gold);}

.uploadbar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:10px;}
.uploadbar .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--cyan));transition:width .2s ease;}
.uploadstatus{font-size:12px;margin-top:6px;color:var(--muted);}
.uploadstatus.ok{color:var(--ok);}
.uploadstatus.err{color:var(--err);}

/* Whole-row checkbox agreement field — the label wraps the entire row
   (not just its own text) so the row's padding/gap are clickable too. */
.checkfield{display:flex;gap:10px;align-items:flex-start;margin:18px 0;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);cursor:pointer;}
.checkfield input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--gold);}
.checkfield span{font-size:14.5px;line-height:1.55;color:var(--txt);}
.checkfield a{position:relative;z-index:1;}

.submitbtn{width:100%;font-family:'Orbitron',sans-serif;font-size:15px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#2a1600;background:linear-gradient(90deg,var(--gold),var(--gold2));
  border:1.5px solid var(--gold);border-radius:12px;padding:14px;cursor:pointer;
  box-shadow:0 0 22px rgba(255,210,74,.5);margin-top:6px;}
.submitbtn:disabled{opacity:.5;cursor:default;animation:none;}
.formmsg{margin-top:14px;font-size:13px;padding:10px 12px;border-radius:10px;display:none;}
.formmsg.show{display:block;}
.formmsg.err{background:rgba(255,90,106,.12);border:1px solid rgba(255,90,106,.4);color:var(--err);}
.formmsg.ok{background:rgba(143,227,143,.12);border:1px solid rgba(143,227,143,.4);color:var(--ok);}

.crowdlabel{margin-top:14px;padding:8px 14px;border-radius:10px;font-family:'Orbitron',sans-serif;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--cyan);
  background:rgba(76,217,255,.08);border:1px solid rgba(76,217,255,.3);}

.leaderboard{margin-top:20px;display:flex;flex-direction:column;gap:10px;}
.entry{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
       display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;
       box-shadow:0 0 0 1px rgba(255,210,74,.1) inset, 0 0 16px rgba(140,90,255,.1);
       transition:box-shadow .3s ease,border-color .3s ease;}
.entry.resultentry{grid-template-columns:auto 1fr auto;}
.entry .rank{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:900;color:var(--muted);
  min-width:28px;text-align:center;}
.entry.top{box-shadow:0 0 0 1px rgba(255,210,74,.35) inset, 0 0 24px rgba(255,210,74,.25), 0 0 40px rgba(255,43,214,.12);}
.entry.top .rank{color:var(--gold);text-shadow:0 0 10px rgba(255,210,74,.7);}
.entry .info b{display:block;font-size:15px;font-weight:700;color:#fff;}
.entry .info .meta{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.entry .info .meta a{color:var(--cyan);text-decoration:none;}
.entry .votes{text-align:center;}
.entry .votes b{display:block;font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;color:var(--gold);}
.entry .votes span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.votebtn{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--cyan);border:none;border-radius:9px;padding:9px 14px;cursor:pointer;
  white-space:nowrap;box-shadow:0 0 12px rgba(76,217,255,.4);transition:box-shadow .15s ease;}
.votebtn:hover{box-shadow:0 0 20px rgba(76,217,255,.8);}
.votebtn:disabled{opacity:.4;cursor:default;background:var(--muted);box-shadow:none;}
.votebtn.voted{background:var(--gold);color:#2a1600;}
@media(max-width:560px){ .entry{grid-template-columns:auto 1fr;grid-template-areas:"rank info" "votes vote";}
  .entry .votes{grid-area:votes;text-align:left;} .entry .votebtn{grid-area:vote;} }

.listenbtn{background:none;border:none;padding:0;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);cursor:pointer;}
.listenbtn:hover{text-decoration:underline;}
.listenbtn.open{color:var(--gold);}
.entry .player{grid-column:1 / -1;margin-top:4px;padding-top:10px;border-top:1px solid var(--line);}
.entry .player iframe{width:100%;border:none;border-radius:8px;display:block;}
.entry .player .openext{display:inline-block;margin-top:6px;font-size:11px;color:var(--muted);text-decoration:none;}
.entry .player .openext:hover{color:var(--cyan);}

.pill{display:inline-block;font-family:'Orbitron',sans-serif;font-size:9px;letter-spacing:.08em;
      text-transform:uppercase;font-weight:800;padding:2px 8px;border-radius:20px;
      background:rgba(255,210,74,.15);color:var(--gold);border:1px solid rgba(255,210,74,.4);
      margin-left:6px;vertical-align:1px;}
.pill.solo{background:rgba(76,217,255,.15);color:var(--cyan);border-color:rgba(76,217,255,.4);}

/* judge.html — scoring cards */
.judgecard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;
  box-shadow:0 0 0 1px rgba(255,210,74,.1) inset, 0 0 16px rgba(140,90,255,.1);
  display:flex;flex-direction:column;gap:12px;}
.judgecard-info b{display:block;font-size:15px;font-weight:700;color:#fff;}
.judgecard-info .meta{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.judgecard .player{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.judgecard .player iframe{width:100%;border:none;border-radius:8px;display:block;}
.judgecard .player .openext{display:inline-block;margin-top:6px;font-size:11px;color:var(--muted);text-decoration:none;}

/* ---- Custom player for self-hosted (R2) MP3 submissions ---- */
/* Mounted inside .entry .player / .judgecard .player wherever a mix's URL
   is a direct .mp3 rather than a SoundCloud/Mixcloud/YouTube link — see
   AAD.mountMixPlayer in app.js. Shares its play-button gold and gradient
   language with .cta/.submitbtn and the ambient EQ strip's bar gradient,
   so it reads as the same instrument as the rest of the site, not a
   bolted-on widget. */
.mixplayer{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 0 0 1px rgba(255,210,74,.08) inset;}
.mixplayer-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,210,74,.4);
  transition:box-shadow .15s ease,transform .08s ease;padding:0;}
@media (hover:hover) and (pointer:fine){
  .mixplayer-btn:hover{box-shadow:0 0 18px rgba(255,210,74,.7);}
}
.mixplayer-btn:active{transform:scale(.94);}
.mixplayer-icon{width:15px;height:15px;}
.mixplayer-main{flex:1 1 auto;min-width:0;}
.mixplayer-viz{position:relative;height:34px;cursor:pointer;}
.mixplayer-viz canvas{width:100%;height:100%;display:block;}
.mixplayer-seek{position:absolute;inset:0;}
.mixplayer-progress{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.06);
  pointer-events:none;border-right:1.5px solid rgba(255,255,255,.5);}
.mixplayer-meta{display:flex;justify-content:space-between;margin-top:4px;
  font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.06em;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.mixplayer-state.live{color:var(--cyan);}
.mixplayer-state.err{color:var(--err);}

.scorewrap{display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.critscore{display:flex;align-items:center;gap:10px;width:100%;}
.critscore .critlabel{flex:0 0 170px;font-size:12.5px;color:var(--txt);display:flex;align-items:center;gap:6px;}
.critscore .critslider{flex:1 1 auto;accent-color:var(--cyan);}
.critscore .critval{font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;color:var(--gold);min-width:20px;text-align:center;}
.crittotal{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);padding-top:10px;}
.crittotal b{font-family:'Orbitron',sans-serif;color:var(--gold);font-size:17px;text-transform:none;letter-spacing:0;}
.scorecomment{flex:1 1 100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;color:var(--txt);font:inherit;font-size:13px;}
.savedflag{font-size:11px;color:var(--ok);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.savedflag[hidden]{display:none;}
@media(max-width:520px){.critscore .critlabel{flex-basis:120px;font-size:11.5px;}}

.faq dt{font-weight:700;color:var(--gold);margin-top:16px;font-size:16.5px;}
.faq dd{margin-top:5px;color:var(--txt);font-size:15.5px;line-height:1.65;max-width:68ch;}
.faq dd ol,.faq dd ul{list-style:none;margin:8px 0;padding:0;counter-reset:faqnum;}
.faq dd ol li{counter-increment:faqnum;position:relative;padding:6px 0 6px 30px;}
.faq dd ol li::before{content:counter(faqnum);position:absolute;left:0;top:6px;width:20px;height:20px;
  border-radius:50%;background:rgba(255,210,74,.14);color:var(--gold);font-family:'Orbitron',sans-serif;
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.faq dd ul li{padding:6px 0 6px 20px;}
.faq dd ul li::before{content:'—';position:absolute;left:0;color:var(--gold);}
.faq dd ul li{position:relative;}

.status-banner{margin-top:18px;padding:12px 16px;border-radius:12px;font-family:'Orbitron',sans-serif;
  font-size:12px;text-align:center;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
/* Glyph prefixes so open/closed/upcoming don't rely on hue alone —
   readable for colorblind visitors, not just the green/red/cyan tint. */
.status-banner.open::before{content:'● ';}
.status-banner.closed::before{content:'✕ ';}
.status-banner.upcoming::before{content:'◷ ';}
.status-banner.open{background:rgba(143,227,143,.12);border:1px solid rgba(143,227,143,.4);color:var(--ok);
  animation:liveglow 1.7s ease-in-out infinite;}
@keyframes liveglow{0%,100%{box-shadow:0 0 0 rgba(143,227,143,0);}50%{box-shadow:0 0 22px rgba(143,227,143,.55);}}
.status-banner.closed{background:rgba(255,90,106,.12);border:1px solid rgba(255,90,106,.4);color:var(--err);}
.status-banner.upcoming{background:rgba(76,217,255,.12);border:1px solid rgba(76,217,255,.4);color:var(--cyan);}

.empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:14px;}

/* ---- criteria.html — scannable judging rubric ---- */
.critgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px;}
/* Separate wrapper for the scroll-in reveal (opacity/translateY, slow
   cubic-bezier) so it doesn't fight .critcard's own fast hover transition
   on the same `transform`/box-shadow properties. Same easing as dj-bios.html's
   .holowrap "dealt" reveal, so it reads as the same motion language. */
.critreveal{opacity:0;transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.2,.8,.3,1),transform .5s cubic-bezier(.2,.8,.3,1);}
.critreveal.revealed{opacity:1;transform:translateY(0);}
.critcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 0 0 1px rgba(255,210,74,.1) inset, 0 0 14px rgba(140,90,255,.1);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.critcard:hover{transform:translateY(-4px);box-shadow:0 0 24px rgba(255,210,74,.25);border-color:rgba(255,210,74,.5);}
.critcard .icon{font-size:28px;margin-bottom:8px;display:block;}
.critcard h3{font-family:'Orbitron',sans-serif;font-size:14px;color:var(--gold);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:8px;}
.critcard p{font-size:14.5px;color:var(--txt);line-height:1.6;}

/* ---- rules.html — jump-nav pill row under the H1 ---- */
.jumpnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.jumpnav a{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt);background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:20px;padding:7px 14px;text-decoration:none;transition:background .15s,border-color .15s,color .15s;}
.jumpnav a:hover{background:rgba(76,217,255,.1);border-color:rgba(76,217,255,.45);color:var(--cyan);}

/* ---- Small tinted callout for a gating requirement inside body copy ---- */
.gatecallout{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid rgba(76,217,255,.35);
  background:rgba(76,217,255,.06);font-size:14.5px;line-height:1.6;color:var(--txt);}
.gatecallout b{color:var(--cyan);}

/* ---- Live countdown to the next dated milestone only ---- */
.countdown-label{text-align:center;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-top:22px;text-shadow:0 0 10px rgba(76,217,255,.6);}
.countdown{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.countdown .cbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  min-width:62px;text-align:center;box-shadow:0 0 0 1px rgba(255,210,74,.12) inset, 0 0 18px rgba(140,90,255,.15);}
.countdown .cbox b{display:block;font-family:'Orbitron',sans-serif;font-size:24px;font-weight:900;color:var(--gold);
  text-shadow:0 0 12px rgba(255,210,74,.6);}
.countdown .cbox span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* ---- Home page live Top-8 tracker ---- */
.trackerlabel{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;color:var(--cyan);margin-bottom:12px;}
.trackerbody{display:flex;flex-direction:column;gap:6px;}
.trow{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:8px 12px;
  font-size:13px;position:relative;}
.trow.top{border-color:rgba(255,210,74,.4);box-shadow:0 0 0 1px rgba(255,210,74,.15) inset;}
.trow.bubble{border-style:dashed;border-color:rgba(76,217,255,.5);}
.trank{font-family:'Orbitron',sans-serif;font-weight:900;color:var(--muted);text-align:center;}
.trow.top .trank{color:var(--gold);}
.trow.bubble .trank{color:var(--cyan);}
.tname{font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tstat{font-family:'Orbitron',sans-serif;font-weight:800;color:var(--gold);font-size:12px;white-space:nowrap;}
.trow.bubble .tstat{color:var(--cyan);}
.tbubble{position:absolute;right:12px;top:-9px;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:800;
  letter-spacing:.08em;color:var(--ink);background:var(--cyan);padding:2px 6px;border-radius:8px;}

footer{position:relative;z-index:5;text-align:center;padding:26px 20px 54px;font-family:'Orbitron',sans-serif;
       font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.75;}
footer b{color:var(--gold);}
footer .footer-logo{height:22px;aspect-ratio:11/4;display:block;margin:0 auto 10px;opacity:.55;filter:grayscale(.3);}
footer .foot-links{margin-top:8px;letter-spacing:.1em;}
footer .foot-links a{color:var(--muted);text-decoration:none;font-size:9px;}
footer .foot-links a:hover{color:var(--cyan);}

/* ---- Optional background music toggle (sitewide) ---- */
#ytPlayerHost{position:fixed;left:4px;bottom:4px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;z-index:0;}
.music-toggle-wrap{position:fixed;right:14px;bottom:36px;z-index:9;display:flex;align-items:center;gap:8px;}
.music-toggle{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#2a1600;background:linear-gradient(90deg,var(--gold),var(--gold2));
  border:1.5px solid var(--gold);border-radius:20px;padding:9px 16px;cursor:pointer;
  box-shadow:0 0 16px rgba(255,210,74,.5);transition:box-shadow .15s ease;}
.music-toggle:hover{box-shadow:0 0 22px rgba(255,210,74,.8);}
.music-toggle.on{animation:musicpulse 1.6s ease-in-out infinite;}
.music-toggle:disabled{opacity:.5;cursor:default;box-shadow:none;animation:none;background:var(--muted);}
@keyframes musicpulse{0%,100%{box-shadow:0 0 16px rgba(255,210,74,.5);}50%{box-shadow:0 0 26px rgba(76,217,255,.75);}}
.music-next{width:34px;height:34px;min-width:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#2a1600;background:linear-gradient(135deg,var(--gold),var(--gold2));border:1.5px solid var(--gold);
  cursor:pointer;padding:0;box-shadow:0 0 12px rgba(255,210,74,.4);transition:box-shadow .15s ease;}
.music-next:hover{box-shadow:0 0 18px rgba(255,210,74,.75);}
.music-next:disabled{opacity:.35;cursor:default;box-shadow:none;background:var(--muted);}
@media(max-width:560px){.music-toggle-wrap{bottom:34px;right:10px;} .music-toggle{padding:8px 12px;font-size:10px;} .music-next{width:30px;height:30px;min-width:30px;}}

/* ---- Live pulsing-dot badge — shared between vote.html's People's ---- */
/* ---- Choice/Judges' Pick chips and index.html's live stat tiles.    ---- */
.livebadge{display:inline-flex;align-items:center;gap:6px;font-family:'Orbitron',sans-serif;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mag);margin-bottom:10px;}
.livebadge .dot{width:7px;height:7px;border-radius:50%;background:var(--mag);
  box-shadow:0 0 8px var(--mag);animation:livepulse 1.2s ease-in-out infinite;}
@keyframes livepulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ---- Live stat tiles — homepage "Live Event Pulse": registration, ---- */
/* ---- submissions and votes, all at a glance, all genuinely live.   ---- */
.statpulse{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0 22px;}
.statpulse-tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;text-align:center;box-shadow:0 0 0 1px rgba(255,210,74,.08) inset;}
.statpulse-tile .livebadge{margin-bottom:6px;justify-content:center;}
.statpulse-num{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(26px,5vw,34px);
  color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(255,210,74,.35);}
.statpulse-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px;}
.statpulse-sub{font-size:10.5px;color:var(--muted);margin-top:2px;}
.statpulse-num.flash{animation:statflash .6s ease;}
@keyframes statflash{0%{color:var(--cyan);text-shadow:0 0 18px rgba(76,217,255,.8);transform:scale(1.08);}100%{color:var(--gold);text-shadow:0 0 14px rgba(255,210,74,.35);transform:scale(1);}}

/* ---- Persistent "resume your mix" chip (sitewide) — mirrors the music ---- */
/* ---- toggle's corner-pill language, opposite corner so they never collide. */
.mixresume-wrap{position:fixed;left:14px;bottom:36px;z-index:9;display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:6px 10px 6px 6px;
  box-shadow:0 0 0 1px rgba(255,210,74,.1) inset, 0 0 16px rgba(140,90,255,.18);max-width:min(72vw,280px);}
.mixresume-btn{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gold);
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1600;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,210,74,.4);}
.mixresume-icon{width:13px;height:13px;}
.mixresume-label{font-family:'Orbitron',sans-serif;font-size:10.5px;letter-spacing:.03em;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;}
.mixresume-close{flex:none;width:20px;height:20px;border-radius:50%;border:none;background:rgba(255,255,255,.08);
  color:var(--muted);cursor:pointer;padding:0;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;}
.mixresume-close:hover{background:rgba(255,90,106,.18);color:var(--err);}
@media(max-width:560px){.mixresume-wrap{bottom:34px;left:10px;max-width:min(60vw,220px);} .mixresume-label{font-size:9.5px;}}

/* ---- predict.html — pick-7 button grid ---- */
.picklist{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.pickbtn{font:inherit;font-size:13px;font-weight:700;color:var(--txt);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;transition:all .12s ease;}
.pickbtn:hover{border-color:rgba(76,217,255,.5);background:rgba(76,217,255,.08);}
.pickbtn.picked{background:linear-gradient(90deg,var(--gold),var(--gold2));color:#2a1600;border-color:var(--gold);
  box-shadow:0 0 14px rgba(255,210,74,.5);}

/* ---- predict.html — 2.0 scale-contrast round headers: a big stroke-num
   "issue number" paired with the round's eyebrow + heading, gig-poster
   numbering for the three TT$500 rounds. flex-wrap keeps this safe at
   narrow widths — the numeral just drops above the text instead of
   forcing any horizontal scroll. ---- */
.round-head{display:flex;align-items:flex-end;gap:14px;margin-top:26px;flex-wrap:wrap;}
.round-head .stroke-num{line-height:.82;flex:none;}
.round-head .round-headtext{min-width:0;flex:1 1 auto;}

/* ---- Hero logo watermark (Home page) ---- */
.hero-watermark{position:absolute;z-index:-1;top:-4vh;right:-6vw;width:min(56vw,560px);aspect-ratio:11/4;
  opacity:.13;filter:drop-shadow(0 0 40px rgba(76,217,255,.5));pointer-events:none;user-select:none;
  animation:heroglow 6s ease-in-out infinite;}
@keyframes heroglow{0%,100%{opacity:.1;}50%{opacity:.17;}}
@media(max-width:700px){.hero-watermark{width:60vw;top:6vh;right:-10vw;}}

/* ---- Opening intro — curtain-parted neon ignition, index.html entry only ---- */
/* 100svh layered over 100vh (never replacing it) is exactly the fix this
   fixed-height lock needs: iOS Safari's address-bar show/hide jumps
   100vh mid-animation, svh tracks the real visible viewport instead. */
body.intro-lock{overflow:hidden;height:100vh;height:100svh;}
#introOverlay{position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;}
.intro-half{position:absolute;top:0;bottom:0;width:50%;background:var(--ink);
  transition:transform .7s cubic-bezier(.65,0,.35,1);}
.intro-left{left:0;}
.intro-right{right:0;}
#introOverlay.opening .intro-left{transform:translateX(-100%);}
#introOverlay.opening .intro-right{transform:translateX(100%);}

.intro-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:20px;transition:opacity .5s ease,transform .5s ease;}
#introOverlay.opening .intro-center{opacity:0;transform:scale(.92);}

.intro-crown{width:96px;height:96px;color:var(--gold);opacity:0;transform:translateY(-60px) scale(.5) rotate(-8deg);
  filter:drop-shadow(0 0 24px rgba(255,210,74,.85)) drop-shadow(0 0 50px rgba(255,154,60,.5));
  animation:crowndrop .7s cubic-bezier(.34,1.56,.64,1) forwards 1.6s;}
.intro-crown svg{width:100%;height:100%;display:block;}
.intro-crown polygon{fill:var(--gold);stroke:var(--gold2);stroke-width:1;stroke-linejoin:round;}
.intro-crown line{stroke:var(--gold2);stroke-width:1.6;stroke-linecap:round;}
@keyframes crowndrop{
  0%{opacity:0;transform:translateY(-60px) scale(.5) rotate(-8deg);}
  55%{opacity:1;transform:translateY(4px) scale(1.08) rotate(2deg);}
  75%{transform:translateY(-3px) scale(.98) rotate(-1deg);}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg);}
}
.intro-logo{width:min(72vw,480px);aspect-ratio:11/4;opacity:0;
  filter:drop-shadow(0 0 30px rgba(76,217,255,.6)) drop-shadow(0 0 60px rgba(255,210,74,.35));
  animation:introignite 1.1s ease forwards .5s;}
@keyframes introignite{
  0%{opacity:0;transform:scale(.85);}
  8%{opacity:.8;transform:scale(1.01);}
  16%{opacity:.15;}
  26%{opacity:.9;}
  34%{opacity:.25;}
  46%,100%{opacity:1;transform:scale(1);}
}
.intro-kicker{font-family:'Orbitron',sans-serif;font-size:clamp(10px,2.4vw,13px);letter-spacing:.35em;
  text-transform:uppercase;color:var(--gold);opacity:0;text-shadow:0 0 14px rgba(255,210,74,.7);
  animation:introfadein .8s ease forwards 2.4s;}
.intro-tap{font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:0;animation:introfadein .8s ease forwards 3s;}
@keyframes introfadein{to{opacity:.85;}}

.introbeam{position:absolute;top:-15%;left:50%;width:20vw;height:140%;filter:blur(18px);opacity:0;
  mix-blend-mode:screen;pointer-events:none;
  clip-path:polygon(47% 0%, 53% 0%, 100% 100%, 0% 100%);
  animation:introbeamsweep 2.6s ease-in-out infinite, introbeamin .6s ease forwards;}
.ib1{margin-left:-32vw;background:linear-gradient(180deg,var(--gold),transparent 75%);animation-delay:0s,0s;}
.ib2{margin-left:12vw;background:linear-gradient(180deg,var(--cyan),transparent 75%);animation-delay:.3s,.15s;}
.ib3{margin-left:-10vw;background:linear-gradient(180deg,var(--mag),transparent 75%);animation-delay:.6s,.3s;}
@keyframes introbeamin{to{opacity:.45;}}
@keyframes introbeamsweep{0%,100%{transform:rotate(-15deg);}50%{transform:rotate(15deg);}}

.intro-skip{position:absolute;right:16px;bottom:16px;z-index:2;font-family:'Orbitron',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txt);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:20px;padding:8px 16px;cursor:pointer;opacity:0;
  animation:introfadein .6s ease forwards 1s;}
.intro-skip:hover{border-color:var(--cyan);color:var(--cyan);}

@media (prefers-reduced-motion: reduce){
  #introOverlay{display:none !important;}
  body.intro-lock{overflow:visible;height:auto;}
}

/* ---- Ambient EQ strip — a slim, sitewide "visualizer" bar, purely decorative ---- */
#eqstrip{position:fixed;left:0;right:0;bottom:0;height:26px;z-index:7;display:flex;
  align-items:flex-end;gap:2px;padding:0 3px;pointer-events:none;
  background:linear-gradient(to top, rgba(7,5,10,.9), transparent);}
/* Height was the animated property here — 60 bars reflowing the page layout
   every frame, forever, on every page. transform:scaleY paints the exact
   same motion on the compositor thread instead, with zero layout cost; the
   fixed height below is what scaleY scales from. */
#eqstrip .eqbar{flex:1 1 auto;min-width:2px;max-width:6px;border-radius:2px 2px 0 0;
  background:linear-gradient(to top, var(--cyan), var(--mag));opacity:.55;
  height:22px;transform-origin:bottom;
  animation-name:eqbeat;animation-timing-function:ease-in-out;animation-iteration-count:infinite;}
@keyframes eqbeat{0%,100%{transform:scaleY(.136);}50%{transform:scaleY(1);}}

/* ---- "See it in action" demo widgets (Home page) ---- */
.demogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px;}
.democard{text-align:center;}
.democard h3{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;}
.demo-caption{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.5;}

.meter-bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:90px;margin:0 auto;}
.meter-bars .bar{width:7px;border-radius:3px 3px 0 0;background:linear-gradient(to top,var(--lime),var(--gold) 55%,var(--mag) 88%);
  height:8px;transition:height .12s ease-out;opacity:.85;}
.meter-readout{margin-top:12px;font-family:'Orbitron',sans-serif;font-weight:900;font-size:22px;color:var(--gold);
  text-shadow:0 0 14px rgba(255,210,74,.6);min-height:28px;}


@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* =====================================================================
   ==== 2.0 — "Roar Press" system. Underground-electronic gig-poster ====
   ==== language: print-culture devices (misregistration, vinyl ====
   ==== label, ticket stubs, folio tabs) blended with scale-contrast ====
   ==== typography and the crown motif, on the same gold/cyan/magenta ====
   ==== palette. Every rule below is written to run on Safari (desktop ====
   ==== + iOS) and Android Chrome, not just Chromium desktop — vendor ====
   ==== prefixes and safe fallbacks are inline, noted where non-obvious. ====
   ===================================================================== */
:root{
  --gold3:#b8842e;           /* deep antique-gold, for hairlines that shouldn't compete with --gold */
  --void:#030204;             /* darker than --ink, for high-contrast poster zones */
  --panel2:rgba(255,255,255,.035); /* nested-surface tint, for double-bezel interiors */
}

/* ---- Typography scale-contrast system: a huge Orbitron moment paired
   with a tiny, heavily-tracked label is the organizing device of 2.0 —
   used for stat call-outs, countdowns, rank numerals, section heads. ---- */
.eyebrow{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:800;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);}
.display-mega{font-family:'Orbitron',sans-serif;font-weight:900;text-transform:uppercase;
  line-height:.92;letter-spacing:-.01em;color:#fff;
  /* main caps out at 920px wide, so vw-based scaling has to stop growing
     once the viewport passes ~1000px — otherwise the preferred value
     keeps climbing toward a fixed-width container that stopped growing,
     and a long word like "CORONATION" gets sliced by main's overflow:hidden
     instead of fitting. 108px is sized to fit that word inside main's
     ~880px content box with room to spare, confirmed by measurement. */
  font-size:clamp(40px,11vw,108px);
  text-shadow:0 4px 20px rgba(0,0,0,.9),0 0 46px rgba(255,210,74,.4);}

/* ---- Misregistered "print" title — two color ghosts (cyan/magenta)
   offset a few px behind the real text via CSS content duplication, so
   there's no extra DOM/no screen-reader double-read risk beyond the
   pseudo-element text itself (same word, same element). mix-blend-mode
   is supported in Safari without a prefix; kept off position:fixed
   ancestors per this file's own documented WebKit fixed+blend bug. ---- */
/* overflow:hidden is a defensive backstop, not the primary fix: it
   guarantees the ::before/::after ghost copies (which size independently
   of the real text's own line-wrapping) can never visually bleed past
   this element's own box on any page, at any viewport width, regardless
   of how a given page's title happens to wrap. */
.misreg-title{position:relative;display:inline-block;isolation:isolate;overflow:hidden;max-width:100%;}
.misreg-title::before,.misreg-title::after{content:attr(data-text);position:absolute;left:0;top:0;
  z-index:-1;mix-blend-mode:screen;pointer-events:none;}
.misreg-title::before{color:var(--cyan);transform:translate(3px,2px);opacity:.55;}
.misreg-title::after{color:var(--mag);transform:translate(-3px,-2px);opacity:.5;}
@media (max-width:640px){
  .misreg-title::before{transform:translate(1.5px,1px);}
  .misreg-title::after{transform:translate(-1.5px,-1px);}
}

/* ---- Stroke-outline numerals — embossed/ghost look for secondary
   numbering (step numbers, rank markers). -webkit-text-stroke works
   unprefixed nowhere; Safari/Chrome/Android all need the -webkit-
   prefix, so a solid fallback color is declared first for any engine
   that supports neither, then overridden wherever stroke IS supported. ---- */
.stroke-num{font-family:'Orbitron',sans-serif;font-weight:900;color:var(--gold);
  -webkit-text-stroke:1.5px var(--gold);-webkit-text-fill-color:transparent;}
@supports not (-webkit-text-stroke:1px #000){ .stroke-num{-webkit-text-fill-color:initial;color:var(--gold);} }

/* ---- Crown mark — reuses the exact intro-crown polygon so the motif
   stays consistent, sized up as a recurring brand accent (not just the
   header logo/intro sequence). ---- */
.crown-mark{display:inline-block;color:var(--gold);filter:drop-shadow(0 0 10px rgba(255,210,74,.6));}
.crown-mark svg{display:block;width:100%;height:100%;}
.crown-mark polygon{fill:currentColor;}
.crown-mark line{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.crown-watermark{position:absolute;z-index:0;pointer-events:none;user-select:none;
  color:var(--gold);opacity:.05;filter:blur(.5px);}
.crown-watermark svg{display:block;width:100%;height:100%;}
.crown-watermark polygon{fill:currentColor;}
.crown-watermark line{stroke:currentColor;stroke-width:1;}

/* ---- Vinyl label badge — circular SVG textPath running copy around a
   spinning record label. href is set on both `href` and `xlink:href`
   in the markup for older Safari/Android WebKit that only resolves the
   xlink form. Respects prefers-reduced-motion via the file's global
   animation-duration override, so it settles rather than freezes mid-spin. ---- */
.vinyl-badge{position:relative;width:104px;height:104px;flex:none;}
.vinyl-badge svg{width:100%;height:100%;animation:vinylspin 14s linear infinite;}
.vinyl-badge .vb-ring{fill:rgba(7,5,10,.92);stroke:var(--gold);stroke-width:1.4;}
.vinyl-badge .vb-label{fill:rgba(255,210,74,.1);stroke:rgba(255,210,74,.5);stroke-width:1;}
.vinyl-badge .vb-hole{fill:var(--ink);stroke:var(--gold);stroke-width:1;}
.vinyl-badge .vb-text{font-family:'Orbitron',sans-serif;font-size:5.6px;font-weight:800;
  letter-spacing:.14em;fill:var(--gold);text-transform:uppercase;}
@keyframes vinylspin{to{transform:rotate(360deg);}}

/* ---- Ticket-stub strip — a perforated-edge row for date/status data,
   the poster-culture answer to .datebar. clip-path ships unprefixed in
   modern Safari/Chrome, but -webkit-clip-path is included first for
   older WebKit that only reads the prefixed form. ---- */
.ticket-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:22px;border:1px solid rgba(255,210,74,.3);border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.02);
  box-shadow:0 0 0 1px rgba(255,210,74,.1) inset, 0 0 18px rgba(140,90,255,.12);}
.ticket-bar > div{position:relative;padding:14px 16px;text-align:center;
  border-right:1px dashed rgba(255,210,74,.3);}
.ticket-bar > div:last-child{border-right:none;}
/* Single notch-dot per internal divider (on the left-hand cell's ::after
   only) — a matching ::before on the right-hand cell was removed: with no
   left/right of its own it fell back to a stray static position that
   collided with cell text whenever the grid wrapped to 2 rows on narrow
   viewports. One dot per divider is enough for the perforated look. */
.ticket-bar > div:not(:last-child)::after{content:'';position:absolute;top:50%;right:-6px;
  width:12px;height:12px;background:var(--void);border-radius:50%;transform:translateY(-50%);
  -webkit-clip-path:inset(0 -2px 0 0);clip-path:inset(0 -2px 0 0);}
.ticket-bar b{display:block;font-family:'Orbitron',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);}
.ticket-bar span{display:block;margin-top:5px;font-size:14px;font-weight:700;color:#fff;}

/* ---- Folio tab — rotated margin label for section wayfinding, the
   editorial "running head" device. writing-mode needs no prefix in any
   currently-shipping engine, but -webkit-writing-mode is declared first
   for older iOS Safari (pre-. Modern browsers simply override it with
   the unprefixed line that follows. ---- */
/* Turned off site-wide per user feedback — the rotated vertical label
   read as confusing clutter repeated on every card, not helpful
   wayfinding. Left as display:none (rather than deleting the ~15 spans
   across every page) so it's a one-line revert if wanted back later. */
.folio-tab{display:none;}

/* ---- Lane cards — the DJ/Fan/Judge picker re-skinned with a
   color-coded left accent bar so hue does wayfinding, not decoration. ---- */
.lane-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px;}
.lane-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px 16px 22px;
  background:rgba(10,7,14,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid var(--line);border-radius:10px;
  text-decoration:none;color:inherit;overflow:hidden;text-align:left;
  box-shadow:0 0 0 1px rgba(255,210,74,.1) inset, 0 0 16px rgba(140,90,255,.1);
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;}
.lane-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,var(--gold));}
/* A line of punched-hole notches down the accent bar — the exact
   "perforated ticket stub" technique .ticket-bar uses for its own divider
   dots (small var(--void) circles simulating a punch), reused here so this
   card actually shares Roar Press print-culture vocabulary instead of
   being a plain colored bar with nothing tying it to the rest of the system. */
.lane-card::after{content:'';position:absolute;left:0;top:6px;bottom:6px;width:4px;
  background-image:radial-gradient(circle,var(--void) 1.6px,transparent 1.7px);
  background-size:4px 9px;background-repeat:repeat-y;background-position:center;
  pointer-events:none;}
.lane-card .lane-icon{flex:none;width:34px;height:34px;color:var(--accent,var(--gold));}
.lane-card b{display:block;font-family:'Orbitron',sans-serif;font-size:14px;letter-spacing:.02em;color:#fff;}
.lane-card span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);}
.lane-card.accent-cyan{--accent:var(--cyan);}
.lane-card.accent-mag{--accent:var(--mag);}

/* ---- Tickets CTA — nav highlight + hero-adjacent pill + placeholder
   section. Honest "coming soon" state: no dead link pretending to sell
   a ticket, a real on-page destination instead. Cyan, not gold — gold
   is already reserved for nav a.active ("you are here"); a promo pill
   in the same hue read as a second "current page" at a glance. ---- */
nav a.nav-tickets{background:rgba(76,217,255,.12);border-color:rgba(76,217,255,.4);color:var(--cyan);}
nav a.nav-tickets:hover{background:rgba(76,217,255,.2);}
.tickets-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Orbitron',sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  background:rgba(76,217,255,.12);border:1px solid rgba(76,217,255,.4);border-radius:20px;padding:4px 10px;}
.tickets-section{margin-top:26px;padding:26px 24px;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,210,74,.1),rgba(139,92,255,.08));
  border:1.5px solid rgba(255,210,74,.35);text-align:center;}
.tickets-section h2{font-family:'Orbitron',sans-serif;font-size:22px;color:#fff;margin-top:10px;}
.tickets-section p{max-width:52ch;margin:10px auto 0;color:var(--txt);font-size:14.5px;line-height:1.6;}
.tickets-section .ticket-icon{width:40px;height:40px;margin:0 auto;color:var(--gold);}

/* ---- Cross-device safety net ---- */
/* Elaborate hover-only affordances gated to real pointers so tapping on
   Android/iOS never leaves an element stuck mid-hover. The lane-card's
   own hover state (position/background/border shift) used to sit
   outside this guard — a tap would apply and PIN it until the visitor
   tapped elsewhere, exactly the stuck-hover failure this guard exists
   to prevent, and on the homepage's primary CTA. Moved inside; touch
   devices now only ever see the .active tap-scale above. */
@media (hover:hover) and (pointer:fine){
  .lane-card:hover{transform:translateX(3px);background:rgba(255,255,255,.05);border-color:var(--accent,var(--gold));}
  .lane-card:hover .lane-icon{transform:scale(1.08);}
}
/* :active declared after the hover media query (LVHA order) so a press
   always wins over hover's translateX for the shared transform property —
   real tap/click feedback on every pointer type, not just touch. */
.lane-card:active{transform:scale(.98);}