/* ═══════════════════════════════════════════════════════════════════════════
   OVERCLOCK v8 — landing page refactor
   Black / White / Red. Cinematic scroll-scrub build (GSAP ScrollTrigger).
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,700;0,900;1,300;1,400&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
  --bg:    #0a0a0a;
  --panel: #101010;
  --line:  rgba(255, 255, 255, 0.1);
  --text:  #f3f3f3;
  --dim:   #a0a0a0;
  --mute:  #5b5b5b;
  --red:   #e10600;
  --red-hi:#ff2a2a;
  --red-dark: #cc0000;
  --purple-neon: #c724ff;
  --purple-dim:  rgba(199, 36, 255, 0.14);
  --disp:  'Archivo', sans-serif;
  --body:  'Space Grotesk', sans-serif;
  --rail:  clamp(20px, 5vw, 76px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, select { font: inherit; }
::selection { background: var(--red); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) var(--bg); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.16); }
.r { color: var(--red-hi); }
.dim { color: var(--dim); }
.dim2 { color: var(--mute); font-size: 13.5px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--rail); }
.section { padding: clamp(80px, 11vw, 160px) 0; position: relative; }

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}
.kicker::before { content: ''; width: 26px; height: 2px; background: var(--red); flex: none; }
.kicker i { text-transform: none; letter-spacing: 0.06em; }

.h-display {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.h-display .thin { font-weight: 300; font-style: italic; text-transform: none; }

.big-num {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Loader curtain ─────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-word span {
  display: inline-block;
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 110px);
  color: #0a0a0a;
  letter-spacing: -0.02em;
  transform: translateY(120%);
  opacity: 0;
}
.loader-word span.r { color: #fff; }

/* ── Progress bar ───────────────────────────────────────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: transparent; }
.progress-bar { height: 100%; width: 0; background: var(--red); }

/* ── Nav ────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-h, 80px);
  padding: 16px var(--rail);
  transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s;
}
.nav.scrolled { background: rgba(10,10,10,0.85); backdrop-filter: blur(14px); padding: 10px var(--rail); border-bottom: 1px solid var(--line); }
.nav-logo img { height: 38px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 13px;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--red-hi, #ff2a2a); }
.nav-links a.active { color: var(--red-hi, #ff2a2a); border: 1px solid var(--red); }
/* .cta: kept as a hook class only - it renders identically to a plain
   .nav-links a now (no red button treatment), per request. */

/* Nav trigger (.topnav/.menu-icon) - visible at every width, same as the
   live site (pages/layout/navbar.php has no rule hiding it on desktop either).
   Padding matches the live site's ".navbar .menu-icon" rule (style.css:3611),
   which .topnav doesn't inherit since it isn't inside a ".navbar". */
.topnav { display: block; }
.topnav .menu-icon { padding: 25px 30px; }
@media (max-width: 860px) {
  .nav-links a { display: none; }
  /* .nav-drop-wrap's own unconditional `display: inline-block` (defined
     later in this file, same specificity) wins by source order and was
     overriding this — floating the always-in-layout, opacity:0 "Worlds ▼"
     dropdown off both edges of the screen and causing horizontal page
     overflow on every mobile viewport. !important forces this rule to win
     regardless of where the unconditional one sits in the file. */
  .nav-drop-wrap { display: none !important; }
}

/* v9's own take on the hamenu's vertical watermark column - the live site's
   ".menu-text .text h2" sits at opacity:.04 (nearly invisible); v9 brings it
   up enough to read "OVER" + a dark-red "CLOCK" as an intentional accent
   instead of a barely-there texture. */
.v9-hamenu .menu-text .text h2 { opacity: 0.18; color: #fff; }
.v9-hamenu .menu-text .text h2 .word-red { color: var(--red-dark, #cc0000); }

/* Sidebar social links (.cont-info .social-text) - text eases to red with an
   underline sweeping in from the left, instead of the rolling-text letter
   swap used elsewhere. */
.v9-hamenu .social-text a.social-link {
  position: relative;
  display: inline-block;
  color: inherit;
  transition: color 0.25s ease;
}
.v9-hamenu .social-text a.social-link:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.3s ease;
}
.v9-hamenu .social-text a.social-link:hover { color: var(--red); }
.v9-hamenu .social-text a.social-link:hover:after { width: 100%; }

/* Worlds sub-menu links (.sub-link) - the live CSS gives these 12px vertical
   padding (style.css:3855) but never sets display, so the default inline "a"
   leaves that padding painting a hoverable/background box that doesn't push
   rows apart in the actual document flow: rows pack tight and neighboring
   hover zones overlap, so the highlighted row doesn't track the cursor. */
.v9-hamenu .sub-menu li a.sub-link { display: block; }

/* ── Hero ───────────────────────────────────────────────── */
section.hero {
  height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.35), rgba(10,10,10,0.25) 50%, var(--bg) 98%); }
.hero-inner { padding: 0 var(--rail) clamp(70px, 10vh, 130px); }
.hero-kicker { font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; }
.hero-title {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(56px, 11.5vw, 176px);
  line-height: 0.86;
  letter-spacing: -0.03em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .w { display: inline-block; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 2px var(--red); }
.hero-sub { max-width: 520px; color: var(--dim); margin-top: 26px; font-size: clamp(14.5px, 1.5vw, 17px); }

/* rotating ring buttons */
.ring-btn {
  position: relative;
  width: 108px; height: 108px;
  display: grid;
  place-items: center;
  flex: none;
}
.ring-btn svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.ring-btn text { fill: var(--dim); font-size: 10.5px; letter-spacing: 0.22em; font-family: var(--body); text-transform: uppercase; }
.ring-btn:hover text { fill: #fff; }
.ring-arrow { font-size: 22px; color: var(--red-hi); }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-ring { position: absolute; right: var(--rail); bottom: clamp(60px, 9vh, 120px); }
@media (max-width: 760px) { .hero-ring { display: none; } }

/* ── Marquee ────────────────────────────────────────────── */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding: 16px 0;
  white-space: nowrap;
  will-change: transform;
  animation: marq 26s linear infinite;
}
.marquee-track.slow { animation-duration: 38s; }
.marquee-track span {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}
.marquee-track em { color: var(--red); font-style: normal; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ── About / scrub words ────────────────────────────────── */
.about h2.scrub-words {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(26px, 3.8vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 1000px;
}
.scrub-words .sw { color: rgba(255,255,255,0.16); transition: none; }
.about-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(36px, 6vw, 100px); align-items: center; margin-top: clamp(48px, 7vw, 90px); }
@media (max-width: 820px) { .about-row { grid-template-columns: 1fr; } }
.about-stat p { color: var(--mute); font-size: 12.5px; letter-spacing: 0.24em; text-transform: uppercase; margin-top: 10px; }
.about-stat .big-num { color: var(--red-hi); }
.about-copy { font-size: clamp(17px, 1.9vw, 22px); line-height: 1.55; max-width: 640px; }

/* ── Why / ranking board ────────────────────────────────── */
.why { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }
.why-media { position: relative; }
.why-media img { border: 1px solid var(--line); }
.why-media .tilt { width: 62%; margin: -18% 0 0 auto; transform: rotate(5deg); box-shadow: 0 24px 60px rgba(0,0,0,0.55); border: 4px solid #161616; }
.why-stats { display: flex; gap: clamp(30px, 4vw, 70px); flex-wrap: wrap; margin-top: 36px; }
.why-stats p { color: var(--mute); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; max-width: 240px; }
.why-stats .big-num i { font-style: normal; }

/* Boardsec (Robot Skills · World Standings) reuses the generic ".section"
   clamp(80px,11vw,160px) top+bottom padding, plus this margin-top on top of
   that - together that's up to ~260px of empty space above the table alone.
   Cut both down; this section is the only user of .board/.boardsec. */
.section.boardsec { padding: clamp(36px, 5vw, 70px) 0; }
.board { margin-top: clamp(20px, 3vw, 40px); }
.board-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.board-head .kicker { margin: 0; }
.board-pages { display: flex; gap: 6px; }
.board-pages button {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--dim);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all 0.15s;
}
.board-pages button:hover { border-color: var(--dim); color: #fff; }
.board-pages button.on { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.board-table-wrap { overflow-x: auto; border: 1px solid var(--line); margin-top: 16px; background: var(--bg); }
.board-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.board-table th {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  white-space: nowrap;
}
.board-table th.c, .board-table td.c { text-align: center; }
.board-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--dim);
  vertical-align: middle;
}
.board-table tr:last-child td { border-bottom: none; }
.board-table tr:hover td { background: rgba(255,255,255,0.025); color: var(--text); }
.board-table td.rank { font-family: var(--disp); font-weight: 900; font-size: 17px; color: var(--text); }
.board-table tr.top10 td.rank { color: var(--red-hi); }
.board-table td.score { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.board-table td .sub { display: block; font-size: 11px; color: var(--mute); }
.board-table td.teamcell a { color: var(--red-hi); font-weight: 700; }
.board-cta {
  display: block;
  text-align: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-top: none;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--dim);
  transition: all 0.2s;
  background: var(--bg);
}
.board-cta:hover { color: #fff; background: var(--red); border-color: var(--red); }

/* ── Worlds ─────────────────────────────────────────────── */
.worlds-copy { max-width: 880px; margin-top: 22px; font-size: clamp(15px, 1.6vw, 17.5px); }
.worlds-copy a { color: var(--red-hi); border-bottom: 1px solid rgba(255,42,42,0.4); }
.worlds-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(44px, 6vw, 70px);
}
.worlds-counters .wc { background: var(--bg); padding: 30px 22px; }
.worlds-counters .wc-num {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1;
  color: var(--red-hi);
  font-variant-numeric: tabular-nums;
}
.worlds-counters .wc p { color: var(--mute); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; margin-top: 8px; }

/* ── Journey (horizontal scrub) ─────────────────────────── */
.journey {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* v9.js measures the section's natural height against the viewport and
     dials this back so the whole section (header + cards) actually fits -
     see the pin setup in v9.js. Defaults to 1 (full size) before JS runs
     or when there's plenty of room. */
  --jc-scale: 1;
}
.journey-head {
  padding-top: clamp(28px, calc(140px * var(--jc-scale)), 140px);
  padding-bottom: clamp(12px, calc(60px * var(--jc-scale)), 60px);
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: clamp(4px, calc(7px * var(--jc-scale)), 7px) 13px;
  background: var(--bg);
}
.chip img { height: 22px; width: 22px; object-fit: contain; }
.chip b { color: var(--red-hi); }
/* World Championship awards — separated & highlighted in neon purple */
.chip-special {
  border-color: rgba(199, 36, 255, 0.65);
  background: linear-gradient(100deg, rgba(199,36,255,0.18), rgba(199,36,255,0.05));
  color: var(--purple-neon);
  box-shadow: 0 0 16px var(--purple-dim);
}
.chip-special b { color: var(--purple-neon); }
@media (max-width: 640px) {
  /* one award per row instead of an uneven 1-or-2-per-row wrap */
  .chip { width: 100%; box-sizing: border-box; }
}

.journey-pin { position: relative; overflow: hidden; padding-bottom: clamp(16px, calc(60px * var(--jc-scale)), 60px); }
.journey-track {
  display: flex;
  gap: clamp(10px, calc(22px * var(--jc-scale)), 22px);
  padding: clamp(4px, calc(10px * var(--jc-scale)), 10px) var(--rail) clamp(10px, calc(30px * var(--jc-scale)), 30px);
  width: max-content;
  will-change: transform;
}
.jcard {
  width: min(380px, 78vw);
  flex: none;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: clamp(12px, calc(24px * var(--jc-scale)), 24px) 24px clamp(10px, calc(22px * var(--jc-scale)), 22px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, calc(12px * var(--jc-scale)), 12px);
  transition: border-color 0.25s;
}
.jcard:hover { border-color: rgba(225,6,0,0.55); }
.jcard.passed { border-color: var(--red-hi); }
.jcard-top { display: flex; justify-content: space-between; align-items: baseline; }
.jcard-idx { font-family: var(--disp); font-weight: 900; font-size: clamp(18px, calc(30px * var(--jc-scale)), 30px); color: rgba(255,255,255,0.12); }
.jcard-date { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-hi); }
.jcard-img { height: clamp(56px, calc(170px * var(--jc-scale)), 170px); width: 100%; object-fit: cover; border: 1px solid var(--line); }
.jcard h3 { font-family: var(--disp); font-weight: 700; font-size: clamp(14px, calc(19px * var(--jc-scale)), 19px); line-height: 1.2; }
.jcard.jcard-worlds h3 { color: var(--purple-neon); }
.jcard.jcard-state h3 { color: var(--red-hi); }
.jcard-loc { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.jcard-desc { font-size: clamp(11.5px, calc(13.5px * var(--jc-scale)), 13.5px); color: var(--dim); flex: 1; }
.jcard-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.jcard-badges span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(225,6,0,0.45);
  color: var(--red-hi);
  padding: 3px 8px;
}
.jcard-end { justify-content: center; background: var(--red); border-color: var(--red); }
.jcard-end h3 { font-size: clamp(22px, calc(36px * var(--jc-scale)), 36px); font-weight: 900; text-transform: uppercase; line-height: 0.95; }
.jcard-end h3 .r { color: #0a0a0a; }
.jcard-end .jcard-desc { color: rgba(255,255,255,0.85); flex: 0; }
.journey-progress { height: 2px; background: var(--line); margin: 0 var(--rail); }
.journey-progress div { height: 100%; width: 0; background: var(--red); }

/* ── Recap gallery ──────────────────────────────────────── */
.recap { overflow: hidden; }
.recap-bg { position: absolute; inset: -12% 0; z-index: -1; opacity: 0.16; }
.recap-bg img { width: 100%; height: 100%; object-fit: cover; }
.recap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: clamp(40px, 6vw, 70px) 0 40px;
}
@media (max-width: 980px) { .recap-grid { grid-template-columns: repeat(2, 1fr); } }
.recap-item { overflow: hidden; border: 1px solid var(--line); will-change: transform; }
.recap-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; transition: transform 0.5s; }
.recap-item:hover img { transform: scale(1.05); }
.recap-item:nth-child(even) { margin-top: 34px; }
.btn-line {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
  transition: color 0.2s;
}
.btn-line:hover { color: var(--red-hi); }

/* ── Recognition ────────────────────────────────────────── */
.recog { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recog-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .recog-grid { grid-template-columns: 1fr; } }
.recog .dim { max-width: 560px; margin-top: 18px; }
.recog-ring { margin-top: 30px; }
.recog-media img { border: 1px solid var(--line); }
.press { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 44px); margin-top: clamp(48px, 7vw, 90px); border-top: 1px solid var(--line); padding-top: 34px; }
.press-label { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); }
.press-item span {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(22px, 3.4vw, 44px);
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.35);
  transition: all 0.25s;
}
.press-item:hover span { color: var(--red-hi); -webkit-text-stroke: 1px transparent; }

/* ── Quote ──────────────────────────────────────────────── */
.quote-mark { font-family: var(--disp); font-weight: 900; font-size: 110px; line-height: 0.4; display: block; margin-bottom: 26px; }
.quote blockquote {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(20px, 2.7vw, 34px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 1000px;
  border: none;
}
.quote-by { margin-top: 28px; color: var(--mute); }
.quote-by b { color: var(--red-hi); }

/* ── Live data ──────────────────────────────────────────── */
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 30px; }
@media (max-width: 760px) { .ld-grid { grid-template-columns: 1fr; } }
.ld-tile { background: var(--panel); padding: clamp(30px, 4vw, 52px); }
.ld-num { font-family: var(--disp); font-weight: 900; font-size: clamp(26px, 3vw, 40px); line-height: 1.25; font-variant-numeric: tabular-nums; }
.ld-num b { color: var(--red-hi); font-size: clamp(34px, 4vw, 54px); }
.ld-tile p { color: var(--mute); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 14px; }
#regionSelector {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 4px 8px;
  max-width: 200px;
}

/* ── Sponsors ───────────────────────────────────────────── */
.sponsors { padding-bottom: 40px; }
.sponsors-marquee { margin-top: 26px; border: none; background: transparent; }
.sponsor { flex: none; display: grid; place-items: center; padding: 0 34px; opacity: 0.55; filter: grayscale(1) brightness(1.6); transition: all 0.25s; }
.sponsor:hover { opacity: 1; filter: none; }
.sponsor img { height: 64px; width: auto; object-fit: contain; }

/* ── Footer (refactor of the live site footer) ──────────── */
.v8-footer { border-top: 1px solid var(--line); background: var(--panel); padding: clamp(48px, 7vw, 88px) 0 36px; }
.foot-grid {
  display: grid;
  grid-template-columns: 6fr 3fr 3fr;
  gap: clamp(30px, 5vw, 70px);
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-label::before { content: ''; width: 18px; height: 2px; background: var(--red); }
.foot-addr {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.foot-tel {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--red-hi);
  border-bottom: 2px solid rgba(225,6,0,0.4);
  transition: border-color 0.2s;
}
.foot-tel:hover { border-color: var(--red-hi); }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 12px; }
.foot-col li a { color: var(--dim); font-size: 14.5px; transition: color 0.2s, padding-left 0.2s; }
.foot-col li a:hover { color: #fff; padding-left: 6px; }
.foot-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 6vw, 70px);
  padding-top: 28px;
}
.foot-social { display: flex; gap: 10px; }
.foot-social a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--dim);
  transition: all 0.2s;
}
.foot-social a:hover { color: #fff; background: var(--red); border-color: var(--red); transform: translateY(-3px); }
.foot-social svg { width: 18px; height: 18px; }
.foot-legal { text-align: right; font-size: 13.5px; color: var(--mute); }
.foot-legal p + p { margin-top: 4px; }
.foot-terms { color: var(--mute); transition: color 0.2s; }
.foot-terms:hover { color: var(--red-hi); }
@media (max-width: 600px) { .foot-legal { text-align: left; } }

/* Discord credit hover card (parity with the live footer's popup) */
.discord-handle { position: relative; color: var(--red-hi); font-weight: 700; cursor: pointer; }
.discord-card {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #17171b;
  border: 1px solid var(--line);
  padding: 12px 16px;
  min-width: 190px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 20;
  text-align: left;
}
.discord-handle:hover .discord-card { opacity: 1; visibility: visible; transform: none; }
.discord-card img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--red); }
.discord-card-info { display: flex; flex-direction: column; line-height: 1.35; }
.discord-card-info b { color: #fff; font-size: 15px; }
.discord-card-info a { color: var(--dim); font-size: 12.5px; }
.discord-card-info a:hover { color: var(--red-hi); }

/* ── Reduced motion: kill scrub/pin gracefully ──────────── */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .marquee-track, .ring-btn svg { animation: none; }
  .scrub-words .sw { color: inherit; }
}

/* ═══════════════════════════════════════════════════════════════
   v9 ADDITIONS — live hero, Reckoner logo type, live-styled blocks
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'reckoner-bold';
  src: url('/assets/fonts/Reckoner Bold 700.ttf');
  font-display: swap;
}

/* ── 1. Live hero (original video intro) ─────────────── */
.live-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #050505;
}
.live-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,0.2), rgba(5,5,5,0.05) 55%, rgba(5,5,5,0.7) 100%);
}
.live-hero-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 16px;
}
.intro-title {
  font-family: 'reckoner-bold', var(--disp);
  font-style: italic;
  font-weight: 400;
  line-height: 0.98;
  font-size: clamp(64px, 13vw, 240px);
  letter-spacing: 0.01em;
  transform: scale(1, 0.7);
  -webkit-text-stroke: 0.045em #fff;
  paint-order: stroke fill;
  user-select: none;
}
.intro-title .k { color: #141414; }
.intro-title .r { color: #e10600; }
.live-hero-ring { position: absolute; right: var(--rail); bottom: 42px; }
.live-replay {
  position: absolute;
  left: var(--rail);
  bottom: 52px;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: #ddd;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.2s;
}
.live-replay:hover { border-color: var(--red); color: #fff; }

/* ── 2. v8 hero in Reckoner ──────────────────────────── */
.hero2 {
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(225,6,0,0.07), transparent),
    var(--bg);
}
.hero2 .hero-title.reck {
  font-family: 'reckoner-bold', var(--disp);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 13.5vw, 210px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  transform: scale(1, 0.7);
  transform-origin: left bottom;
  -webkit-text-stroke: 0.042em #fff;
  paint-order: stroke fill;
}
.hero-title.reck .k { color: #141414; }
.hero-title.reck .r { color: #e10600; }
.hero-title.reck .outline { -webkit-text-stroke: 0.042em #fff; color: #e10600; }

/* ── 4. Live "Why Consider" ──────────────────────────── */
.lkicker {
  font-family: 'Poppins', var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-hi);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lkicker i { text-transform: none; letter-spacing: 0.04em; color: var(--dim); }
.ldim { color: var(--dim); font-family: 'Poppins', var(--body); font-weight: 300; }
.lround img, .lround { border-radius: 26px; overflow: hidden; }

.lwhy-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(36px, 5vw, 90px);
  align-items: center;
}
@media (max-width: 900px) { .lwhy-grid { grid-template-columns: 1fr; } }
.lwhy-media { display: flex; flex-direction: column; gap: 26px; }
.lwhy-media img { border-radius: 28px; }
.lwhy-media .lw2 { transform: rotate(5deg); width: 88%; align-self: flex-end; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.lwhy-copy h2 {
  font-family: 'Poppins', var(--body);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
}
.lwhy-copy .ldim { max-width: 520px; margin-top: 18px; font-size: 16.5px; line-height: 1.75; }
.lrule { border: none; border-top: 1px solid var(--line); margin: 30px 0; }
.lwhy-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.lws { display: flex; flex-direction: column; }
.lws-num {
  font-family: 'Poppins', var(--body);
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lws-lbl { font-family: 'Poppins', var(--body); font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }
.lws-rank { text-align: center; }
.lws-cap { font-family: 'Poppins', var(--body); font-size: 13.5px; font-weight: 500; color: var(--text); line-height: 1.45; }
.lws-num2 { font-family: 'Poppins', var(--body); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; }
.lws-total .lws-cap { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.lws-total b.r { font-weight: 700; }

/* ── 6. Live Worlds — vertical counters ──────────────── */
.lworlds { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.lworlds-grid {
  display: grid;
  /* minmax(0, ...) stops long headline words from starving the copy column */
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: clamp(26px, 3.6vw, 56px);
  align-items: center;
}
@media (max-width: 1020px) { .lworlds-grid { grid-template-columns: 1fr; } }
.lworlds-left h2 {
  font-family: 'Poppins', var(--body);
  font-weight: 500;
  font-size: clamp(26px, 2.9vw, 40px);
  line-height: 1.15;
  text-transform: none;
}
.lworlds-ring { margin-top: 34px; }
.lworlds-copy p { font-family: 'Poppins', var(--body); font-weight: 300; color: var(--dim); font-size: 16px; line-height: 1.85; }
.lworlds-copy a { color: var(--red-hi); font-weight: 500; }
.lworlds-copy a:hover { text-decoration: underline; }
.lworlds-counters {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
}
.lwc { display: flex; flex-direction: column; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); gap: 10px; }
.lwc-num {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(24px, 2.3vw, 36px);
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lwc-lbl { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.lwc-sep { font-family: var(--disp); font-weight: 900; font-size: 24px; color: var(--red); writing-mode: horizontal-tb; transform: none; }
@media (max-width: 1020px) {
  .lworlds-counters { flex-wrap: wrap; justify-content: flex-start; }
  .lwc { writing-mode: horizontal-tb; transform: none; }
}

/* ── Journey special badges (Worlds awards) ──────────── */
.jcard-badges span.special {
  border-color: rgba(199, 36, 255, 0.7);
  color: var(--purple-neon);
  background: var(--purple-dim);
}

/* ── 9+. live-styled shared blocks ───────────────────── */
.live-style .lh2 {
  font-family: 'Poppins', var(--body);
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.12;
  text-transform: none;
  letter-spacing: -0.01em;
}
.live-style .lh2 .thin { font-weight: 300; font-style: italic; }
.live-style .ldim { max-width: 560px; margin-top: 18px; font-size: 16px; line-height: 1.8; }
.live-style .press-item span { font-family: 'Poppins', var(--body); font-weight: 700; }
.lquote {
  font-family: 'Poppins', var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 30px);
  line-height: 1.55;
  max-width: 980px;
}
.live-style .ld-tile { border-radius: 22px; }
.live-style .ld-num, .live-style .ld-tile p { font-family: 'Poppins', var(--body); }
.live-style .foot-addr, .live-style .foot-col li a, .live-style .foot-label { font-family: 'Poppins', var(--body); }

/* screenshot/testing mode — fixed section heights instead of viewport units */
html.noanim .live-hero { height: 860px; min-height: 860px; }
html.noanim .loader-wrap { display: none; }

/* ═══ v9 hybrid glue — live sections keep the live look ═══ */

/* Live-sourced sections inherit the live font stack (v9 body sets Space
   Grotesk for the v8 sections, so re-establish Satoshi/Poppins here) */
.skills-img-crev, .crev-portfolio-header, .inter-fixed-text,
.testimonials, .numbers, .clients-carso, footer.clean-footer, .faqs {
  font-family: 'Poppins', sans-serif;
  font-family: 'Satoshi-Variable', 'Satoshi', 'Poppins', sans-serif;
}

/* Sponsors carousel rendered statically (no Swiper JS in v9) */
.clients-carso .swiper-wrapper.v9-static-swiper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.clients-carso .v9-static-swiper .swiper-slide { width: auto !important; flex: 0 0 auto !important; }

/* The live template reveals .d-slideup/.d-rotate text via its bundle's
   WOW/GSAP hooks — without them, force the text visible */
.d-slideup .up-text, .d-rotate .rotate-text {
  transform: none !important;
  opacity: 1 !important;
}

/* live loader curtain fill */
.loader-wrap { background: #0a0a0a; }

/* ═══ v9 round 2 ═══════════════════════════════════════ */

/* 2. Header section: compact (no more void), live ocbg backdrop */
.hero.hero2 {
  height: auto;
  min-height: 0;
  justify-content: center;
  padding: clamp(110px, 16vh, 170px) 0 clamp(90px, 13vh, 150px);
  background-size: cover;
  background-position: center;
}
.hero2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.82);
  z-index: 0;
}
.hero2 .hero-inner { position: relative; z-index: 1; padding-bottom: 0; }
.hero2 .hero-ring { position: absolute; z-index: 1; right: var(--rail); bottom: 34px; }
@media (max-width: 760px) { .hero2 .hero-ring { display: none; } }

/* 2b. "// Overclock Headquarters" — occasional neon glitch */
.hero-kicker .glitch {
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 600;
  animation: v9-glitch-base 7s infinite steps(1, end);
}
.hero-kicker .glitch::before,
.hero-kicker .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-kicker .glitch::before {
  color: #0ff;
  animation: v9-glitch-a 7s infinite steps(1, end);
}
.hero-kicker .glitch::after {
  color: #f0f;
  animation: v9-glitch-b 7s infinite steps(1, end);
}
@keyframes v9-glitch-base {
  0%, 88%, 96%, 100% { transform: none; color: #fff; }
  89% { transform: translateX(2px) skewX(-8deg); color: #e10600; }
  91% { transform: translateX(-2px); color: #fff; }
  93% { transform: translateX(1px) skewX(6deg); color: #0ff; }
  95% { transform: none; color: #fff; }
}
@keyframes v9-glitch-a {
  0%, 88%, 96%, 100% { opacity: 0; transform: none; clip-path: none; }
  89% { opacity: 0.85; transform: translate(-3px, -1px); clip-path: inset(0 0 55% 0); }
  92% { opacity: 0.7; transform: translate(3px, 1px); clip-path: inset(60% 0 0 0); }
  95% { opacity: 0; }
}
@keyframes v9-glitch-b {
  0%, 88%, 96%, 100% { opacity: 0; transform: none; clip-path: none; }
  90% { opacity: 0.85; transform: translate(3px, 1px); clip-path: inset(45% 0 20% 0); }
  94% { opacity: 0.7; transform: translate(-3px, -1px); clip-path: inset(0 0 70% 0); }
  95% { opacity: 0; }
}

/* 4. "9" in Allerta Stencil + room for the live swirl */
.big-num.stencil { font-family: 'Allerta Stencil', sans-serif; font-weight: 400; }
.about { overflow: visible; }

/* 7. Sponsors marquee */
.v9-sponsor-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.v9-sponsor-marquee {
  overflow: hidden;
  margin-top: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.v9-sponsor-track {
  display: inline-flex;
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  padding: 32px 0 30px;
  white-space: nowrap;
  animation: v9-marq 30s linear infinite;
}
.v9-sponsor-marquee:hover .v9-sponsor-track { animation-play-state: paused; }
@keyframes v9-marq { to { transform: translateX(-50%); } }
html.noanim .v9-sponsor-track { animation: none; }
.v9-sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: none;
  opacity: 0.5;
  filter: grayscale(1) brightness(1.15);
  transition: opacity 0.25s, filter 0.25s, transform 0.25s;
}
.v9-sponsor:hover { opacity: 1; filter: none; transform: translateY(-4px); }
.v9-sponsor img { height: 72px; width: auto; object-fit: contain; }
/* live-style hover tooltip (style.css [tooltip] system) — keep the bubble
   readable above the grayscale/hover filters */
.v9-sponsor[tooltip]::before,
.v9-sponsor[tooltip]::after { filter: none; }

/* ═══ v9 round 3 ═══════════════════════════════════════ */

/* 5. single elegant swirl — soften the stroke, no extra copies */
.about .line-overlay svg path { stroke: #2c2c2c; }

/* 1. footer polish (live markup, tuned details) */
footer.clean-footer .fab {
  font-size: 20px;
  color: #fff;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}
footer.clean-footer ul.rest.d-flex li a:hover .fab {
  color: #ff2a33;
  transform: translateY(-2px);
}
footer.clean-footer ul.rest.d-flex li:first-child { margin-left: 0 !important; }
footer.clean-footer .custom-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  transition: filter 0.2s, transform 0.2s;
  display: inline-block;
  vertical-align: middle;
}
footer.clean-footer li a:hover .custom-icon {
  filter: brightness(0) invert(31%) sepia(94%) saturate(5000%) hue-rotate(345deg);
  transform: translateY(-2px);
}
footer.clean-footer .column ul li a { transition: color 0.2s, padding-left 0.2s; }
footer.clean-footer .column ul li a:hover { color: #ff2a33; padding-left: 5px; }
footer.clean-footer a[href^="tel"] span { transition: opacity 0.2s; }
footer.clean-footer a[href^="tel"]:hover span { opacity: 0.8; }
footer.clean-footer { margin-bottom: 0; }
body { margin-bottom: 0; }

/* "Coded by @Hao" Discord popup: the live site's own top:69%/left:99.5%
   positioning is tuned to ITS footer layout and doesn't generalize - on v9
   it lands off-anchor/overlapping. Re-anchor it cleanly above the handle,
   right-aligned within the footer's right column, with a bit more polish. */
footer.clean-footer .ml-auto { position: relative; }
footer.clean-footer .discord-profile {
  top: auto;
  left: auto;
  right: 0;
  bottom: calc(100% + 14px);
  padding: 18px 20px;
  border: 1px solid var(--line);
  min-width: 220px;
}
footer.clean-footer .discord-popup::before {
  top: auto;
  bottom: -10px;
  left: auto;
  right: 24px;
  border-color: #23272a transparent transparent transparent;
}
footer.clean-footer .discord-profile-picture { width: 44px; height: 44px; margin-right: 12px; }
footer.clean-footer .discord-profile-info h3 { font-family: var(--body); font-size: 16px; }
footer.clean-footer .discord-pf-username { display: inline-block; margin-top: 4px; padding: 2px 8px; background: #414676; color: #bbbeed; border-radius: 4px; font-size: 12px; }

/* === v9 round 5 ======================================= */

/* 2. the // divider: stencil-cut mono slash, no skew */
.hero-kicker .slashes {
  display: inline-block;
  color: #ff2a33;
  font-weight: 700;
  letter-spacing: .1em;
  font-family: 'Allerta Stencil', sans-serif;
}

/* Journey + recap headings use the live header typeface */
.journey .h-display,
.recap .h-display {
  font-family: 'Satoshi-Variable', 'Poppins', sans-serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.12;
  font-size: clamp(30px, 3.8vw, 52px);
}
/* the journey heading also yields to --jc-scale, since it shares the
   screen with the pinned card row (see the round-9 sizing below) */
.journey .h-display { font-size: clamp(22px, calc(52px * var(--jc-scale)), 52px); }

/* 3. skills board: our row highlighted, OC jump button */
.board-table tr.me td {
  background: rgba(225, 6, 0, 0.12);
  color: #f3f3f3;
}
.board-table tr.me td:first-child { box-shadow: inset 3px 0 0 #e10600; }
.board-pages button.oc {
  width: auto;
  padding: 0 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff2a33;
  border-color: rgba(225, 6, 0, 0.5);
}
.board-pages button.oc.on { background: #e10600; color: #fff; border-color: #e10600; }

/* Capitol Recap: visible without the live JS bundle (its .vid class hides
   it), dim-by-default thumbnail, red play on hover, pointer */
.inter-fixed-text a.v9-video.vid { display: flex !important; cursor: pointer; }
.inter-fixed-text .capitolThumbnail { z-index: 0; }
.inter-fixed-text a.v9-video:hover .capitolThumbnail { opacity: 1; }
.inter-fixed-text .capitolBtn .icon,
.inter-fixed-text a.v9-video .icon { transition: color 0.3s; }
.inter-fixed-text a.v9-video:hover .icon { color: #ff1e28; }

/* video lightbox */
.v9-lb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.v9-lb-frame {
  width: min(1080px, 92vw);
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 42, 51, 0.35);
}
.v9-lb-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.v9-lb-close {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: all 0.2s;
}
.v9-lb-close:hover { background: #e10600; border-color: #e10600; }

/* press logos with dead links: no pointer, still hover-reveals the name */
.v9-nolink { cursor: default; }

/* sponsors: name under logo */
.v9-sponsor-name {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a8a8a;
}

/* footer: span the full width (live inset the panel by 40px) */
footer.clean-footer.crev:after { left: 0; right: 0; bottom: 0; }

/* === v9 round 6: scroll-earned award chips ============ */

/* unearned awards sit dim and colorless until their event scrubs past */
#chipsWrap .chip {
  opacity: 0.22;
  filter: grayscale(1);
  transform: scale(0.97);
  transition: opacity 0.35s, filter 0.35s, transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
#chipsWrap .chip.on {
  opacity: 1;
  filter: none;
  transform: none;
  animation: v9-chip-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#chipsWrap .chip.chip-special.on {
  animation: v9-chip-pop-special 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes v9-chip-pop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes v9-chip-pop-special {
  0% { transform: scale(0.85); box-shadow: 0 0 0 rgba(199, 36, 255, 0); }
  45% { transform: scale(1.12); box-shadow: 0 0 34px rgba(199, 36, 255, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 16px rgba(199, 36, 255, 0.18); }
}

/* Chip count went up (another award earned) as the journey cards scrub past -
   a quick, subtle pulse on the chip that already re-fires every time the
   count increases, unlike v9-chip-pop which only plays once on first reveal. */
#chipsWrap .chip.bump { animation: v9-chip-bump 0.5s ease; }
#chipsWrap .chip.chip-special.bump { animation: v9-chip-bump-special 0.5s ease; }
@keyframes v9-chip-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); box-shadow: 0 0 12px rgba(225,6,0,0.35); }
  100% { transform: scale(1); box-shadow: none; }
}
@keyframes v9-chip-bump-special {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); box-shadow: 0 0 16px rgba(199,36,255,0.45); }
  100% { transform: scale(1); box-shadow: 0 0 16px rgba(199,36,255,0.18); }
}

/* season award counter */
.chips-meter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(10px, calc(30px * var(--jc-scale)), 30px);
}
.chips-meter-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, calc(64px * var(--jc-scale)), 64px);
  line-height: 1;
  color: #ff2a33;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}
.chips-meter-lbl {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a8a8a;
  line-height: 1.6;
}
/* Current event name, live-updated as the journey cards scrub past */
.chips-meter-event {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--red-hi);
  padding-left: 16px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
  max-width: 220px;
}
.chips { margin-top: clamp(6px, calc(18px * var(--jc-scale)), 18px); }

/* === EST. 2017 - second glitch pattern (strobe + slice bars, fires on a
   9s cycle offset from the kicker glitch so they never blink together) === */
.hero-sub .glitch2 {
  position: relative;
  display: inline-block;
  color: #ff2a33;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-left: 6px;
  animation: v9-glitch2-base 9s infinite steps(1, end);
}
.hero-sub .glitch2::before,
.hero-sub .glitch2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-sub .glitch2::before {
  color: #0ff;
  animation: v9-glitch2-a 9s infinite steps(1, end);
}
.hero-sub .glitch2::after {
  color: #fff;
  animation: v9-glitch2-b 9s infinite steps(1, end);
}
@keyframes v9-glitch2-base {
  0%, 38%, 50%, 100% { transform: none; color: #ff2a33; opacity: 1; }
  39% { transform: translateY(-2px) skewX(14deg); color: #fff; }
  41% { transform: translateX(2px); color: #ff2a33; opacity: 0.35; }
  43% { transform: translate(-1px, 1px) skewX(-10deg); color: #0ff; opacity: 1; }
  45% { transform: none; color: #fff; }
  47% { transform: translateX(1px); color: #ff2a33; }
}
@keyframes v9-glitch2-a {
  0%, 38%, 50%, 100% { opacity: 0; transform: none; clip-path: none; }
  40% { opacity: 0.9; transform: translate(4px, -2px); clip-path: inset(0 0 62% 0); }
  44% { opacity: 0.75; transform: translate(-3px, 1px); clip-path: inset(68% 0 0 0); }
  48% { opacity: 0; }
}
@keyframes v9-glitch2-b {
  0%, 38%, 50%, 100% { opacity: 0; transform: none; clip-path: none; }
  41% { opacity: 0.85; transform: translate(-4px, 2px); clip-path: inset(32% 0 38% 0); }
  46% { opacity: 0.6; transform: translate(3px, -1px); clip-path: inset(0 55% 55% 0); }
  48% { opacity: 0; }
}

/* === EST. 2018 glitch, v2: fast + subtle neon flash distort ===========
   (overrides the earlier glitch2 block: smaller type, ~200ms burst on a
   5s cycle, neon glow flash with hairline ghost offsets) */
.hero-sub .glitch2 {
  font-size: 0.72em;
  letter-spacing: 0.22em;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: 1px;
  animation: v9-neon-base 5s infinite steps(1, end);
}
.hero-sub .glitch2::before {
  color: #0ff;
  animation: v9-neon-a 5s infinite steps(1, end);
}
.hero-sub .glitch2::after {
  color: #f0f;
  animation: v9-neon-b 5s infinite steps(1, end);
}
@keyframes v9-neon-base {
  0%, 71.9%, 76%, 100% { transform: none; color: #ff2a33; text-shadow: none; opacity: 1; }
  72% { color: #fff; text-shadow: 0 0 10px #0ff, 0 0 22px rgba(0, 255, 255, 0.6); transform: skewX(6deg); }
  73% { color: #ff2a33; text-shadow: 0 0 12px rgba(255, 42, 51, 0.9); transform: translateX(-1px); opacity: 0.65; }
  74% { color: #fff; text-shadow: 0 0 10px #f0f, 0 0 20px rgba(255, 0, 255, 0.55); transform: skewX(-5deg); }
  75% { color: #ff2a33; text-shadow: 0 0 14px rgba(255, 42, 51, 0.8); transform: none; }
}
@keyframes v9-neon-a {
  0%, 71.9%, 76%, 100% { opacity: 0; transform: none; clip-path: none; }
  72.5% { opacity: 0.55; transform: translate(1px, -1px); clip-path: inset(0 0 55% 0); }
  74.5% { opacity: 0.4; transform: translate(-1px, 0); clip-path: inset(60% 0 0 0); }
  75.5% { opacity: 0; }
}
@keyframes v9-neon-b {
  0%, 71.9%, 76%, 100% { opacity: 0; transform: none; clip-path: none; }
  73% { opacity: 0.5; transform: translate(-1px, 1px); clip-path: inset(35% 0 35% 0); }
  75% { opacity: 0; }
}

/* === v9 round 8: live-accurate hero videos + shared glitch ============ */

/* continue ring + replay fade in like the live buttons do */
.live-hero-ring, .live-replay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s;
}
.live-hero-ring.shown, .live-replay.shown {
  opacity: 1;
  pointer-events: auto;
}

/* screenshot mode: show the outro frame so the hero is not a void */
html.noanim #lvOutro { display: block !important; }

/* EST. 2018 uses the SAME glitch pattern as "Overclock Headquarters", just smaller —
   offset by a half-cycle delay so the two never flicker in sync with each other. */
.hero-sub .glitch {
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  animation: v9-glitch-base 7s infinite steps(1, end);
  animation-delay: 3.5s;
}
.hero-sub .glitch::before,
.hero-sub .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-sub .glitch::before {
  color: #0ff;
  animation: v9-glitch-a 7s infinite steps(1, end);
  animation-delay: 3.5s;
}
.hero-sub .glitch::after {
  color: #f0f;
  animation: v9-glitch-b 7s infinite steps(1, end);
  animation-delay: 3.5s;
}
.glitch-small {
  font-size: 0.72em;
  letter-spacing: 0.22em;
  margin-left: 8px;
  vertical-align: 1px;
}

/* region dropdown popup: the select inherits light text from the live
   inline style, but browsers paint the option list on white - force a
   dark, readable list instead */
#regionSelector option {
  background-color: #141414;
  color: #f0f0f0;
  text-transform: uppercase;
  letter-spacing: 1px;
}
#regionSelector { color-scheme: dark; }

/* journey after full completion: plain left/right scroller */
.journey-pin.free {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.journey-pin.free:active { cursor: grabbing; }
.journey-pin.free::-webkit-scrollbar { height: 8px; }
.journey-pin.free::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); }
.journey-pin.free::-webkit-scrollbar-thumb { background: #e10600; border-radius: 4px; }
.journey-pin.free::-webkit-scrollbar-thumb:hover { background: #ff2a33; }

/* CSS smooth-scroll fights pinned sections during hash navigation (the
   browser animates to a pre-pin position while spacers grow the page).
   JS handles smooth in-page scrolling instead. */
html { scroll-behavior: auto !important; }

/* === navbar: live logo dimensions + Worlds gallery dropdown =========== */
.nav-logo img { height: 60px; width: auto; margin: 6px 0; }

.nav-drop-wrap { position: relative; display: inline-block; vertical-align: middle; }
.nav-drop-wrap .nav-drop-toggle {
  display: inline-flex;
  align-items: center;
}
.nav-drop-wrap .nav-drop-toggle .caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform 0.2s;
}
.nav-drop-wrap:hover .nav-drop-toggle .caret,
.nav-drop-wrap:focus-within .nav-drop-toggle .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 285px;
  background: rgba(12, 12, 12, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid #e10600;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  padding: 18px 18px 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 300;
}
.nav-drop-wrap:hover .nav-drop,
.nav-drop-wrap:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop-group { padding: 6px 0 10px; }
.nav-drop-group + .nav-drop-group { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.nav-drop-season {
  display: block;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #7c7c7c;
  padding: 6px 8px;
}
.nav-drop a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #cfcfcf;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-drop a:hover { background: rgba(225, 6, 0, 0.12); color: #fff; }
.nav-drop .tag-wc,
.nav-drop .tag-sig {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
}
.nav-drop .tag-wc { color: #fff; background: #e10600; border-color: #e10600; }

.nav-drop .tag-sig { color: #ff2a33; background: transparent; border-color: rgba(225, 6, 0, 0.5); }

/* === v9 round 10: breathing room under the Worlds stats section ========
   #worlds's rotated "numb-fixed" stat strip is absolutely positioned and
   vertically centered against the section - the theme's default 140px
   bottom padding isn't enough room for it, so the strip's tail runs right
   up against the next section with no buffer, reading as an abrupt cut.
   Desktop-only: numb-fixed drops the rotation/absolute positioning below
   768px, where this doesn't apply. */
@media (min-width: 769px) {
  #worlds.crev-portfolio-header { padding-bottom: 260px; }
}

/* === v9 round 12: recent-registrations live feed (Live Data section) === */
.v9-recent-feed {
  border: 1px solid var(--line);
  background: var(--panel);
}
.v9-recent-feed-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.v9-recent-feed-title {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--dim);
}
.v9-recent-feed-title #recentTeamsRegion { color: var(--text); font-weight: 700; }
.v9-recent-feed-list {
  max-height: 340px;
  overflow: hidden;
  padding: 4px 0 40px;
  transition: opacity 0.25s;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 96%);
}
.v9-recent-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.v9-recent-row:hover { background: rgba(255, 255, 255, 0.03); }
.v9-recent-row:last-child { border-bottom: none; }
.v9-recent-team { font-size: 13.5px; font-weight: 500; color: #fff; }
.v9-recent-team b { color: var(--red-hi); font-weight: 800; margin-right: 4px; }
.v9-recent-meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.v9-recent-tag {
  flex: none;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--red-hi);
}
.v9-recent-tag.is-new { color: #fff; background: #0a0a0a; border-color: #fff; }
.v9-recent-ago {
  margin-left: auto;
  flex: none;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.v9-recent-empty { color: var(--mute); font-size: 13px; padding: 22px 20px; }
@media (max-width: 640px) {
  .v9-recent-ago { margin-left: 0; }
}

/* Roster page — season achievements grid (public_html/v9/roster.php) */
.award-card .award-count {
  font-family: var(--font-tech);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--red-hi);
  margin: 10px 0 14px;
}
.award-card.tier-4 .award-count { color: var(--purple-neon); } /* Worlds accent */

/* Roster page — season achievements teaser: a stacked, clickable header -
   title row, then the Competitions counter right below it, then the
   Awards/Worlds/Triple Crown badges. No boxed container - expands the
   sibling .ach-teaser-body via .open, same collapse mechanic as
   .v9-faq-item/.v9-faq-a. */
.ach-teaser-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
/* Carries the same typography .divider-label uses sitewide, minus its
   trailing ::after line - the row already ends in the expand icon. */
.ach-teaser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  font-family: var(--font-tech);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.ach-teaser-badges { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
/* .badge is white-space:nowrap sitewide (fine for short labels like "Captain") -
   the composite Competitions badge is much longer and needs to actually wrap
   on narrow screens instead of overflowing past body{overflow-x:hidden}. */
.ach-teaser-comps { white-space: normal; }
.ach-teaser-ico {
  flex: none;
  width: 16px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.25s;
}
.ach-teaser-bar.open .ach-teaser-ico { transform: rotate(45deg); }
/* Summary badges are redundant once expanded - the full breakdown is right below. */
.ach-teaser-bar.open .ach-teaser-comps,
.ach-teaser-bar.open .ach-teaser-badges { display: none; }
.ach-teaser-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.ach-teaser-bar.open + .ach-teaser-body {
  max-height: 8000px;
  /* Open panels must not clip: the Signature/State breakdown's popup
     tooltip escapes upward past the panel edge. Closing re-clips. */
  overflow: visible;
}
.ach-teaser-comps .sep { color: var(--text-mute); opacity: 0.5; margin: 0 1px; }
.ach-teaser-comps .sep-major { color: var(--red-hi); opacity: 0.7; margin: 0 3px; font-weight: 700; }
.ach-teaser-comps .worlds { color: var(--purple-neon); }
.ach-teaser-comps .sig { color: var(--red-hi); }

/* Roster page — season achievements split: award tally (left) / event log (right) */
.ach-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.ach-events-lbl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  font-family: var(--font-tech);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 14px;
}
.ach-events-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.ach-events-breakdown .worlds { color: var(--purple-neon); }
.ach-events-breakdown .sig { color: var(--red-hi); }

/* Event-log breakdown chips: structured hover popup (same visual recipe as
   the roster badge tooltips) — events grouped High School / Middle School,
   accent color follows the tier: purple = Worlds, red = Signature/State */
.ach-events-breakdown .evb-tip { position: relative; cursor: help; }
.ach-events-breakdown .evb-pop {
  position: absolute;
  right: 0;
  bottom: 100%;
  transform: translateY(4px);
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 420px;
  max-height: 340px;
  overflow-y: auto;
  padding: 18px 20px 20px;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-align: left;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  /* This is THE original popup .v9-pop/#v9SparkTip were generalized from -
     but sitting inside .ach-events-lbl (font-family: var(--font-tech), a
     monospace stat-display font meant for THAT label row, not this popup)
     meant it was silently inheriting Chakra Petch instead of the site's
     real body font this whole time. Explicit here so all three tooltip
     systems land on the exact same typeface regardless of what ancestor
     they happen to render inside. Padding bumped up from this popup's own
     original 12-14-13 (and made asymmetric, more at the bottom) to match
     .v9-pop/#v9SparkTip - equal top/bottom read as bottom-heavy in
     practice since the header's divider line reads as a visual "floor". */
  font-family: var(--body);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.ach-events-breakdown .evb-pop-worlds { border-top: 2px solid var(--purple-neon); }
.ach-events-breakdown .evb-pop-sig { border-top: 2px solid var(--red-hi); }
.ach-events-breakdown .evb-pop-local { border-top: 2px solid rgba(255, 255, 255, 0.45); }
.evb-pop-local .evb-pop-group { color: #b6bcc6; }
.evb-pop-local .evb-pop-row::before { background: rgba(255, 255, 255, 0.45); }
.ach-events-breakdown .evb-tip:hover .evb-pop,
.ach-events-breakdown .evb-tip:focus .evb-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.evb-pop-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9aa0aa;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 7px;
  white-space: nowrap;
}
.evb-pop-group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 8px 0 3px;
  white-space: nowrap;
}
.evb-pop-worlds .evb-pop-group { color: var(--purple-neon); }
.evb-pop-sig .evb-pop-group { color: var(--red-hi); }
.evb-pop-row {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #d5d8de;
  line-height: 1.5;
  padding: 3px 0 3px 14px;
  position: relative;
  white-space: normal;
}
.evb-pop-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
}
.evb-pop-worlds .evb-pop-row::before { background: var(--purple-neon); }
.evb-pop-sig .evb-pop-row::before { background: var(--red-hi); }
.ach-event-list { display: flex; flex-direction: column; gap: 14px; }

/* ── Site-standard hover popup (generalized from the roster event
      breakdown — THE tooltip style for the whole site): wrap the trigger
      in .v9-tip (add tabindex="0" for keyboard), nest a .v9-pop inside.
      Accent bar: .v9-pop-red / .v9-pop-purple / .v9-pop-neutral /
      .v9-pop-ghost. Left-anchor with .v9-pop.left when the trigger sits
      near the viewport's left edge. ──────────────────────────────────── */
.v9-tip { position: relative; cursor: help; }
.v9-pop {
  position: absolute;
  right: 0;
  bottom: 100%;
  transform: translateY(4px);
  display: flex;
  flex-direction: column;
  width: max-content;
  /* 340px, not 420px like its two siblings below - the ghost badge that
     uses this popup sits inside the Pit's 3-column "Our Teams" grid, close
     enough to the right edge that a 420px-wide box (its actual rendered
     width, once the longer rows stop wrapping at that cap) runs past the
     viewport edge and gets clipped by body's overflow-x:hidden - reads as
     "no padding" since the box's own right border/padding is what's cut
     off. 340px has enough margin at every grid column position tested. */
  max-width: 340px;
  max-height: 340px;
  overflow-y: auto;
  padding: 18px 20px 20px;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-align: left;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
  /* var(--body), NOT a hardcoded font - a stray 'Inter' override here
     (never used anywhere else on the site) used to make this render in a
     visibly different font than its two siblings: the roster's .evb-pop
     (this popup's own original, before being generalized into .v9-tip/
     .v9-pop) and the event page's #v9SparkTip. Padding is deliberately
     MORE generous than .evb-pop's own original 12-14-13 (and asymmetric,
     more at the bottom) - the header's divider line reads as a visual
     "floor" up top, so equal top/bottom padding still looked bottom-heavy/
     cramped in practice. All three popups share this same padding now. */
  font-family: var(--body);
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}
.v9-pop.left { left: 0; right: auto; }
.v9-pop-red { border-top: 2px solid var(--red-hi); }
.v9-pop-purple { border-top: 2px solid var(--purple-neon); }
.v9-pop-neutral { border-top: 2px solid rgba(255, 255, 255, 0.45); }
.v9-pop-ghost { border-top: 2px solid #9fb4c8; }
.v9-tip:hover .v9-pop,
.v9-tip:focus .v9-pop,
.v9-tip:focus-within .v9-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.v9-pop .head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9aa0aa;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 7px;
  white-space: nowrap;
}
.v9-pop .row {
  font-size: 12.5px;
  font-weight: 400;
  color: #d5d8de;
  line-height: 1.5;
  padding: 3px 0 3px 14px;
  position: relative;
  white-space: normal;
}
.v9-pop .row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
}
.v9-pop-red .row::before { background: var(--red-hi); }
.v9-pop-purple .row::before { background: var(--purple-neon); }
.v9-pop-ghost .row::before { background: #9fb4c8; }

/* Ghost Rating tint for event-page rating displays (rank table, picklist,
   team popup badge): spectral gray-blue, G marker */
.ocr-ghost { color: #9fb4c8 !important; }
sup.ghost-p { color: #9fb4c8; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; cursor: help; }
.badge.vrs.ocr-ghost { border-color: rgba(159, 180, 200, 0.5) !important; }
.ach-event-card { padding: 20px 22px; }
.ach-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ach-event-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}
.ach-event-name a { color: inherit; text-decoration: none; }
.ach-event-name a:hover { color: var(--red-hi); }
/* Event tier, from v9_event_tier_class(): Signature/State/Regional Championship (red),
   World Championship (neon purple); plain local/qualifier events keep the default text color. */
.ach-event-name.tier-sig { color: var(--red-hi); }
.ach-event-name.tier-worlds { color: var(--purple-neon); text-shadow: 0 0 8px rgba(199, 36, 255, 0.35); }
.ach-event-name.tier-worlds a:hover { color: var(--purple-neon); }
.ach-event-date { flex: none; font-size: 11px; letter-spacing: 0.08em; color: var(--text-mute); }
.ach-event-awards { display: flex; flex-direction: column; gap: 8px; }

/* Triple Crown: bracket-link the 3 sweep awards instead of a banner - purple
   spine + a vertical red "TRIPLE CROWN" label riding alongside it. */
.ach-crown-group { display: flex; gap: 10px; margin-bottom: 10px; }
.ach-crown-bracket { position: relative; flex: none; width: 26px; }
.ach-crown-bracket .bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--purple-neon);
  box-shadow: 0 0 10px rgba(199, 36, 255, 0.55);
}
.ach-crown-label {
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-hi);
  white-space: nowrap;
}
.ach-crown-items { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 860px) {
  .ach-split { grid-template-columns: 1fr; }
}

/* Nav — The Pit dashboard link, shown only when logged in (header.php).
   Same specificity trick as .v9-discord-login below. */
.nav-links a.v9-pit-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 42, 42, 0.55);
  color: var(--red-hi);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.nav-links a.v9-pit-link:hover,
.nav-links a.v9-pit-link.active { background: var(--red-hi); color: #fff; }

/* Nav — Discord login / verified-member badge (public_html/v9/app/header.php).
   .nav-links a.v9-discord-login (not just .v9-discord-login) so this beats
   the base .nav-links a rule's padding/font-size on specificity. */
.nav-links a.v9-discord-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line-hard, rgba(255, 255, 255, 0.18));
  color: #fff;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  transition: border-color 0.2s, background 0.2s;
}
.nav-links a.v9-discord-login:hover { border-color: #5865f2; background: rgba(88, 101, 242, 0.14); color: #fff; }
.v9-discord-icon { width: 15px; height: 15px; fill: #5865f2; flex: none; }
.v9-discord-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Flame stencil that rises above the Discord glyph while .is-authorizing -
   hidden/collapsed by default so it never affects normal layout. */
.v9-discord-flame {
  position: absolute;
  left: 50%;
  bottom: 68%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  opacity: 0;
  fill: #ff8a00;
  pointer-events: none;
}
/* "Authorizing..." loading state — set by the popup click handler in
   app/header.php while the Discord popup window is open. The Discord glyph
   "catches fire": fill sweeps blurple -> ember colors while a flickering
   drop-shadow glow pulses around it, and the button border/background warm
   up to match instead of staying blurple. */
.nav-links a.v9-discord-login.is-authorizing {
  border-color: #ff6a00;
  background: rgba(255, 106, 0, 0.12);
  cursor: default;
  animation: v9-discord-ember 1s ease-in-out infinite;
}
.nav-links a.v9-discord-login.is-authorizing .v9-discord-icon { animation: v9-discord-fire 0.6s ease-in-out infinite; }
.nav-links a.v9-discord-login.is-authorizing .v9-discord-flame {
  opacity: 1;
  animation: v9-flame-rise 0.7s ease-in-out infinite;
  filter: drop-shadow(0 0 4px #ff6a00);
}
@keyframes v9-discord-ember {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 106, 0, 0.25); }
  50% { box-shadow: 0 0 11px rgba(255, 61, 0, 0.6); }
}
@keyframes v9-discord-fire {
  0%   { fill: #5865f2; filter: drop-shadow(0 0 0 transparent); }
  20%  { fill: #ffcf4d; filter: drop-shadow(0 0 3px #ff8a00); }
  45%  { fill: #ff8a00; filter: drop-shadow(0 0 5px #ff5500) drop-shadow(0 0 8px #ff2a00); }
  70%  { fill: #ff3d00; filter: drop-shadow(0 0 4px #ff2a00) drop-shadow(0 0 9px #ffb300); }
  100% { fill: #ffb300; filter: drop-shadow(0 0 3px #ff6a00); }
}
@keyframes v9-flame-rise {
  0%   { transform: translateX(-50%) scale(0.65) rotate(-5deg); fill: #ff3d00; opacity: 0.8; }
  35%  { transform: translateX(-50%) scale(1) rotate(3deg); fill: #ff8a00; opacity: 1; }
  65%  { transform: translateX(-50%) scale(0.85) rotate(-3deg); fill: #ffcf4d; opacity: 0.95; }
  100% { transform: translateX(-50%) scale(0.65) rotate(5deg); fill: #ff3d00; opacity: 0.8; }
}
.v9-discord-login-label.is-authorizing::after {
  content: "...";
  display: inline-block;
  overflow: hidden;
  width: 1.1em;
  vertical-align: bottom;
  clip-path: inset(0 100% 0 0);
  animation: v9-authorizing-dots 1.2s steps(4, end) infinite;
}
@keyframes v9-authorizing-dots {
  to { clip-path: inset(0 0 0 0); }
}
/* Mobile hamenu link - .fill-text:after is already the hover-wipe overlay
   (pages/assets/css/style.css); just adding text-shadow + opacity via
   animation here doesn't touch its content/position, so it layers on top
   safely, and echoes the same ember-flicker theme as the desktop icon. */
.fill-text.is-authorizing:after { animation: v9-authorizing-pulse 0.6s ease-in-out infinite alternate; }
@keyframes v9-authorizing-pulse {
  0% { opacity: 1; text-shadow: 0 0 4px #ff8a00; }
  100% { opacity: 0.6; text-shadow: 0 0 10px #ff3d00; }
}
.v9-discord-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line-hard, rgba(255, 255, 255, 0.18));
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
/* --role-color is set inline on this element (see v9/app/header.php), so
   the border can match the member's role color too - lightened via
   color-mix() when the raw role color would be too dark/low-contrast as a
   thin border against the dark nav background. */
.v9-discord-badge.is-member {
  border-color: color-mix(in srgb, var(--role-color, var(--gold, #e0aa3e)) 55%, white 30%);
}
.v9-discord-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.v9-discord-name { color: #fff; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v9-discord-sep { color: var(--line-hard, rgba(255, 255, 255, 0.25)); }
.v9-discord-role { color: var(--role-color, var(--gold, #e0aa3e)); font-weight: 700; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Sparkly" = star-shaped glisten particles around the badge. This is the
   effect the user actually wanted all along - an earlier attempt at this
   exact idea was too small (3-5px) and visible for too little of its
   cycle (~12%) to register, so it got replaced with a shine-sweep that
   was ALSO rejected ("I don't like the sweep"). This version brings the
   stars back, bigger and visible for longer, rather than trying yet
   another different effect. No whole-badge intensity pulse either way. */
.v9-discord-badge.sparkly { position: relative; }
.v9-discord-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.v9-discord-sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--role-color) 70%, white 30%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--role-color));
  animation: v9-sparkle-twinkle 2s ease-in-out infinite;
}
.v9-discord-sparkle:nth-child(1) { top: -4px; left: 2px; animation-delay: 0s; }
.v9-discord-sparkle:nth-child(2) { top: -4px; right: 18%; animation-delay: 0.55s; width: 6px; height: 6px; }
.v9-discord-sparkle:nth-child(3) { bottom: -4px; right: 4px; animation-delay: 1s; }
.v9-discord-sparkle:nth-child(4) { bottom: -4px; left: 26%; animation-delay: 1.45s; width: 6px; height: 6px; }
.v9-discord-sparkle:nth-child(5) { top: 30%; right: -4px; animation-delay: 0.3s; width: 6px; height: 6px; }
@keyframes v9-sparkle-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  35% { opacity: 1; transform: scale(1) rotate(20deg); }
  65% { opacity: 1; transform: scale(1) rotate(-10deg); }
}
/* Super-admin-gated content wrapper: any block only super admins can see
   gets the same treatment as the super_admin nav badge - role-purple
   border (same color-mix lightening as .v9-discord-badge.is-member) plus
   the twinkling .v9-discord-sparkles markup inside it. Doubled class
   selector so this border beats page-level single-class borders declared
   in later-loading page stylesheets. --role-color mirrors the super_admin
   entry in DISCORD_CATEGORY_COLORS (conf/discord.local.php). */
.v9-gated.v9-gated {
  --role-color: #c724ff;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--role-color) 55%, white 30%);
}
.v9-discord-notmember { color: var(--dim); font-size: 10px; letter-spacing: 0.06em; }
/* .nav-links a.v9-discord-logout (not just .v9-discord-logout) so this
   beats the base .nav-links a rule's color on specificity - same reason as
   .v9-discord-login above. */
.nav-links a.v9-discord-logout {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.nav-links a.v9-discord-logout:hover { color: var(--red-hi, #ff2a2a); }
@media (max-width: 860px) {
  /* .v9-discord-logout never overrides `display`, so it's genuinely already
     caught by .nav-links a above; .v9-discord-badge is a <span> and needs
     its own rule - but only the top NAV bar's copy, not the one now living
     in the hamenu sidebar (.cont-info), which must stay visible at every
     width. .v9-discord-login and .v9-pit-link (below) DO override display
     (same beat-the-hide-rule specificity trick) and need explicit hiding
     too - the comment here previously assumed all four were covered, which
     was true for -logout/-badge but not the other two. */
  .nav-links .v9-discord-badge { display: none; }
  .nav-links .v9-profile-drop-wrap { display: none; }
  /* .v9-discord-login and .v9-pit-link floated as standalone pills below
     the header on every mobile viewport (sign-in CTA / "THE PIT" link),
     duplicating the equivalent links already in the hamenu sidebar (the
     login/"The Pit"/"Logout" <li>s above). Hide the top-bar copies here. */
  .nav-links a.v9-discord-login { display: none; }
  .nav-links a.v9-pit-link { display: none; }
}

/* Admin -> View As -> role list: cascading flyout off the super_admin nav
   badge, reusing the Worlds nav-drop's dark panel/caret styling (.nav-drop
   base rule above). Right-aligned instead of centered since the badge sits
   at the far right edge of the nav, where a centered 285px panel would
   overflow the viewport - and each nested flyout opens further LEFT (not
   right) for the same reason, cascading back toward the page instead of
   off the edge of the screen. */
.v9-profile-drop-wrap { position: relative; }
.v9-profile-drop-wrap .v9-admin-drop {
  left: auto;
  right: 0;
  transform: translateY(8px);
  min-width: 160px;
  padding: 6px;
}
.v9-profile-drop-wrap:hover .v9-admin-drop,
.v9-profile-drop-wrap:focus-within .v9-admin-drop {
  transform: translateY(0);
}
.nav-drop-flyout-wrap { position: relative; }
.nav-drop-flyout-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #cfcfcf;
  transition: background 0.15s, color 0.15s;
}
.nav-drop-flyout-wrap:hover > .nav-drop-flyout-toggle { background: rgba(225, 6, 0, 0.12); color: #fff; }
.caret-right {
  flex: none;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 4px solid currentColor;
  opacity: 0.7;
}
/* Nested flyout panel - deliberately its OWN class rather than reusing
   .nav-drop: .nav-drop-wrap:hover .nav-drop above is a plain descendant
   selector, so it would show every nested .nav-drop the instant the badge
   itself is hovered, collapsing the whole Admin -> View As -> Roles
   cascade into one flat reveal. Visibility here is gated ONLY by this
   panel's own direct parent (:hover > ...), one level at a time. */
.v9-flyout-panel {
  position: absolute;
  top: -7px;
  left: auto;
  right: 100%;
  margin-right: 6px;
  min-width: 200px;
  background: rgba(12, 12, 12, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid #e10600;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 301;
}
.nav-drop-flyout-wrap:hover > .v9-flyout-panel,
.nav-drop-flyout-wrap:focus-within > .v9-flyout-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.v9-admin-drop-roles { max-height: 320px; overflow-y: auto; min-width: 220px; }
.nav-drop a.active {
  color: #fff;
  background: rgba(225, 6, 0, 0.16);
}
.nav-drop a.active:after { content: '\2713'; margin-left: auto; color: var(--red-hi, #ff2a2a); }
.v9-nav-logout-item.has-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 4px; padding-top: 12px; }

/* Profile card in the hamburger menu's right sidebar (.hamenu .cont-info),
   reusing the same .v9-discord-badge markup/classes as the nav bar's -
   just laid out to match the other sidebar .item blocks (Address, Social,
   Contact) instead of a compact inline pill. */
.cont-info .v9-discord-badge {
  display: flex;
  flex-wrap: wrap;
  border: none;
  padding: 0;
  gap: 8px 7px;
  font-size: 13px;
}
.cont-info .v9-discord-avatar { width: 32px; height: 32px; }
.cont-info .v9-discord-name { color: inherit; max-width: none; font-size: 15px; }
.cont-info .v9-discord-role,
.cont-info .v9-discord-notmember { font-size: 13px; max-width: none; }

.v9-discord-error {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--red-hi);
}
li.v9-discord-error { padding: 10px; }