@font-face {
  font-family: "Goliad";
  src: url("/assets/themes/altitude/fonts/th-goliad-worn.otf") format("opentype");
  font-display: block;
}

/* Three brightness steps, switchable bottom-right. The owner's verdict on v1
   was "prea închis" — so the default is now the middle step and he can compare
   all three in place instead of guessing from memory. */
:root[data-lum="1"] {
  --ground: #0C1226; --ground-2: #111834;
  --surface: #171F40; --surface-2: #1E2850;
  --line: #283155; --line-bright: #3A4576;
  --muted: #A3ADD2;
  --wash1: rgba(10, 14, 32, .62); --wash2: rgba(10, 14, 32, .74);
  --vig1: rgba(10, 14, 32, .42); --vig2: rgba(10, 14, 32, .78);
  --hud-bg: rgba(9, 13, 30, .96);
  --panel-a: rgba(19, 26, 54, .95); --panel-b: rgba(13, 19, 42, .97);
  --panel-line: #2c3457;
}
:root[data-lum="2"] {
  --ground: #121B38; --ground-2: #172145;
  --surface: #1D2A54; --surface-2: #253465;
  --line: #2F3C6B; --line-bright: #44548F;
  --muted: #ABB6DC;
  --wash1: rgba(16, 23, 48, .46); --wash2: rgba(16, 23, 48, .60);
  --vig1: rgba(14, 20, 44, .30); --vig2: rgba(14, 20, 44, .68);
  --hud-bg: rgba(14, 20, 44, .96);
  --panel-a: rgba(27, 38, 74, .94); --panel-b: rgba(19, 28, 58, .96);
  --panel-line: #3A4880;
}
/* Light is the DEFAULT (owner's pick 2026-08-14); Dark/Dusk selectable. */
:root, :root[data-lum="3"] {
  --ground: #1B2750; --ground-2: #20305F;
  --surface: #27386D; --surface-2: #30437F;
  --line: #3A4C86; --line-bright: #5063A8;
  --muted: #B9C3E6;
  --wash1: rgba(23, 32, 64, .30); --wash2: rgba(23, 32, 64, .44);
  --vig1: rgba(20, 29, 60, .20); --vig2: rgba(20, 29, 60, .58);
  --hud-bg: rgba(20, 29, 60, .96);
  --panel-a: rgba(36, 50, 94, .93); --panel-b: rgba(27, 39, 78, .95);
  --panel-line: #4A5C9E;
}
:root {
  --gold: #FFB627;
  --gold-hi: #FFC65A;
  --ice: #8FD4EF;
  --ice-deep: #35789B;
  --aurora: #6E5BFF;
  --aurora-dim: #3D3290;
  --text: #F2F4FC;
  --online: #34D399;

  --sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  --pad: clamp(16px, 4vw, 32px);
  --max: 1180px;
}

* { box-sizing: border-box; }

/* clip (not just hidden, and on html too): kills the dead right-hand gutter
   phones pan into when any row overflows the viewport. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
  transition: background-color .25s;
}
/* The game's own vista sits behind the whole page; each brightness step only
   changes how much wash is pulled over it, so "lighter" also means MORE art. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("/assets/themes/altitude/img/bg-bottom.v1.webp") center bottom / cover no-repeat;
  opacity: .9;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 60% at 50% 78%, rgba(53, 120, 155, .14) 0%, transparent 70%),
    linear-gradient(180deg, var(--wash1) 0%, var(--wash2) 50%, var(--wash1) 100%);
  transition: background .25s;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ── Chamfer: the theme's signature cut corner (top-right / bottom-left),
   from the live shop panels' content-bg.svg. clip-path kills real borders,
   so the hairline is a ::before sitting 1px proud behind the fill. */
.panel {
  --chamfer: 20px;
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  border: 0;
  padding: 22px;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--panel-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex; align-items: center; gap: 26px;
  height: 62px;
}
.mark {
  font-family: "Goliad", var(--sans);
  font-size: 21px;
  letter-spacing: .04em;
  color: var(--text);
  white-space: nowrap;
}
.mark span { color: var(--muted); }
.nav-links {
  display: flex; gap: 22px; list-style: none; margin: 0; padding: 0;
  font-size: 13px; letter-spacing: .04em;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 10px 0; border-bottom: 1px solid transparent;
  transition: color .16s, border-color .16s;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--text); border-bottom-color: var(--gold); }
.nav-links a.on { color: var(--text); border-bottom-color: var(--gold); }
.nav-spacer { flex: 1; }
.chip {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-bright);
  padding: 5px 11px;
  font-size: 12px;
  white-space: nowrap;
  /* the chip is an <a>: pin the colour or visited-link purple takes over */
  color: var(--muted);
}
.chip:visited { color: var(--muted); }
.chip:hover { color: var(--text); border-color: var(--gold); }
.chip b { color: var(--text); font-family: var(--mono); }
@media (max-width: 640px) { .chip { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding: 72px 0 64px;
  overflow: hidden;
  background: url("/assets/themes/altitude/img/bg-top.v1.webp") center 26% / cover no-repeat;
}
.hero > .wrap { width: 100%; }
#sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero::after { /* vignette per brightness step — lighter steps let the art breathe */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 80% at 50% 45%, transparent 0%, var(--vig1) 62%, var(--vig2) 100%),
    linear-gradient(180deg, var(--vig1) 0%, transparent 30%, var(--vig2) 88%, var(--ground) 100%);
  pointer-events: none;
  transition: background .25s;
}

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes logoIn { from { opacity: 0; transform: scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero-in > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-logo { animation: logoIn 1.1s cubic-bezier(.2, .7, .2, 1) backwards; }
.hero-in > .tag { animation-delay: .5s; }
.hero-in > .cta-row { animation-delay: .68s; }
.hero-in > .hud { animation-delay: .86s; }

.hero-logo {
  display: block;
  width: min(620px, 86%);
  margin: 0 auto;
  height: auto;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, .65));
}
.hero-in { position: relative; z-index: 2; text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Sits straight on key art: weight + own shadow, or it dies in sunlight. */
.hero .tag {
  font-size: clamp(14px, 2.2vw, 17px);
  color: #E3E0F2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 0 30px rgba(0, 0, 0, .7);
  margin: 20px auto 0;
  max-width: 46ch;
  line-height: 1.6;
  text-wrap: balance;
}

.hero-char {
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: min(80%, 640px);
  width: auto;
  pointer-events: none;
  user-select: none;
  opacity: .8;
  filter: saturate(.92) drop-shadow(0 18px 40px rgba(0, 0, 0, .8));
  animation: charIn 1.4s cubic-bezier(.2, .7, .2, 1) backwards;
}
.hero-char--left { left: max(2vw, calc(50% - 620px)); animation-delay: .25s; }
.hero-char--right { right: max(2vw, calc(50% - 640px)); animation-delay: .4s; }

@keyframes charIn {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to { opacity: .8; transform: none; }
}

@media (max-width: 1180px) {
  .hero-char { height: 58%; opacity: .45; }
}
@media (max-width: 900px) {
  .hero-char { display: none; }
  .hero { min-height: 0; padding: 26px 0 44px; }
  /* the top bar already carries the logo on phones — don't show it twice */
  .hero-logo { display: none; }
  .hero .tag { font-size: 16px; margin-top: 6px; }
}

.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.btn {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  border: 1px solid var(--line-bright);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .16s, color .16s, background .16s;
}
.btn:hover, .btn:focus-visible { border-color: var(--gold); color: var(--gold); }
.btn:not(.btn--go) { background: color-mix(in srgb, var(--ground) 76%, transparent); border-color: var(--line-bright); }
.btn--go {
  background: var(--gold); color: #100C02; border-color: var(--gold); font-weight: 700;
}
.btn--go:hover, .btn--go:focus-visible { background: var(--gold-hi); color: #100C02; }

/* ── HUD strip: near-opaque, hard border — the sunlight rule ─────────── */
.hud {
  --chamfer: 18px;
  position: relative; z-index: 2;
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--hud-bg);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.hud::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--panel-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.hud-cell {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
  text-align: left;
}
.hud-cell:last-child { border-right: 0; }
@media (max-width: 560px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-cell:nth-child(2n) { border-right: 0; }
  .hud-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.hud-val {
  font-family: var(--mono);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--online);
  animation: ping 2.4s ease-out infinite;
  flex: none;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ── Sections ────────────────────────────────────────────────────────── */
/* padding-block ONLY — the shorthand's trailing 0 was wiping out .wrap's
   side padding (same specificity, later in file), gluing every section to
   the screen edges on phones. */
.section { padding-block: clamp(56px, 9vw, 84px); }
.section--tight { padding-top: 0; }
/* Chips and countdowns must be free to wrap under the title on a phone —
   every child is nowrap, so without this the row shoves the page sideways. */
.section-head { display: flex; align-items: baseline; gap: 12px 18px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2 {
  font-size: clamp(17px, 2vw, 22px); letter-spacing: .12em; text-transform: uppercase;
  margin: 0; font-weight: 800; color: var(--text);
  font-family: var(--mono);
  white-space: nowrap;
}
.rule { flex: 1; height: 1px; background: var(--line-bright); }
.section-head a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--muted); text-decoration: none; text-transform: uppercase;
  white-space: nowrap;
}
.section-head a:hover, .section-head a:focus-visible { color: var(--gold); }

/* Scroll entrance: one quiet rise per section, nothing scattered. */
.io { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.io.in { opacity: 1; transform: none; }

/* ── Hall of Fame: champion feature + ranked rows ────────────────────── */
.champ {
  --chamfer: 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 26px 28px;
  min-height: 148px;
  margin-bottom: 10px;
}
.champ::before {
  content: "";
  position: absolute; inset: -1px; z-index: -2;
  background: var(--panel-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.champ::after { /* one gold hairline along the top: the podium, said quietly */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 72%);
  z-index: 1;
}
.champ-art {
  position: absolute; right: -8px; bottom: -14px; z-index: -1;
  height: 132%;
  opacity: .5;
  filter: saturate(.9);
  pointer-events: none;
}
.champ-no {
  font-family: var(--mono);
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 700; line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.champ-name {
  font-size: clamp(24px, 3.6vw, 38px);
  font-weight: 800; letter-spacing: -.01em;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.champ-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 7px; }
.champ-sub b { color: #F472B6; font-weight: 700; letter-spacing: .12em; }
.champ-crown { font-size: 22px; align-self: start; }
@media (max-width: 620px) {
  .champ { grid-template-columns: 64px minmax(0, 1fr); padding: 22px; }
  .champ-crown { display: none; }
  .champ-art { opacity: .3; }
}

.hof5 { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.hof-row {
  --tc: #888;
  background: var(--ground-2);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 78px 96px;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  transition: background .16s;
}
.hof-row:hover { background: var(--surface-2); }
.hof-rank {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--muted); text-align: center;
}
.hof-name {
  font-size: clamp(16px, 2vw, 19px); font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hof-lv {
  font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--muted); text-align: right;
}
.hof-tier {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--tc); text-align: right;
}
@media (max-width: 620px) {
  .hof-row { grid-template-columns: 32px minmax(0, 1fr) 78px; }
  .hof-lv { display: none; }
}

/* ── Rankings ────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; margin-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 16px; border: 1px solid var(--line); border-bottom: 0;
  background: var(--ground-2); color: var(--muted); cursor: pointer;
  transition: color .16s, background .16s;
  white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--text); background: var(--surface); border-color: var(--line-bright); box-shadow: inset 0 -2px 0 var(--gold); }
.tab:hover:not([aria-selected="true"]) { color: var(--text); }

table { width: 100%; border-collapse: collapse; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); text-align: left; font-weight: 500;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 13px 16px; font-size: 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s; }
tbody tr:hover { background: var(--surface-2); }
tbody tr:first-child td { background: color-mix(in srgb, var(--gold) 5%, transparent); }
tbody tr:first-child .lv { color: var(--gold); }
.rk {
  font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--muted);
  width: 44px;
}
.rk--1 { color: var(--gold); }
.rk--2 { color: #C9D1E3; }
.rk--3 { color: #C08A5A; }
.lv { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
.job { color: var(--muted); font-size: 13px; }

/* ── VIP ladder: premium cards, tier colour used once per card ───────── */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.tier {
  --tc: #9CA3AF;
  position: relative;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb, var(--tc) 13%, transparent) 0%, transparent 60%),
    var(--ground-2);
  padding: 22px 12px 18px;
  text-align: center;
  transition: transform .16s, border-color .16s;
}
.tier::before { /* tier colour as a top hairline, not a glow */
  content: "";
  position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
  background: var(--tc);
  opacity: .85;
}
.tier:hover { transform: translateY(-3px); border-color: var(--tc); }
.tier-name {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tc); margin-bottom: 8px;
}
.tier-mult {
  font-family: var(--mono); font-size: clamp(26px, 3vw, 34px); font-weight: 700;
  line-height: 1; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tier--myth { border-color: color-mix(in srgb, #F472B6 45%, var(--line)); }
.tier--myth .tier-mult { color: #F472B6; }

/* ── Events: live countdowns with a depleting bar ────────────────────── */
.timers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tm {
  --chamfer: 14px;
  position: relative; z-index: 0;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  padding: 20px 20px 18px;
}
.tm::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: var(--panel-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.tm-ev {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.tm-ev small { letter-spacing: .08em; color: var(--muted); opacity: .75; text-transform: none; }
.tm-left {
  font-family: var(--mono); font-size: 15px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tm-n {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--text);
}
.tm-bar {
  margin-top: 14px; height: 3px; background: var(--line);
  overflow: hidden;
}
.tm-bar i {
  display: block; height: 100%; background: linear-gradient(90deg, var(--ice-deep), var(--ice));
  width: 40%;
  transition: width 1s linear;
}
.tm--soon .tm-n { color: var(--gold); }
.tm--soon .tm-bar i { background: linear-gradient(90deg, var(--gold-hi), var(--gold)); }

/* ── Monthly Shuffle: mystery prize wall + ticket board ──────────────────
   The pull is suspense: 10 face-down prizes, ONE grand. The draw order is the
   hook (prize revealed first, then the winner), so the wall sells exactly that.
   Tickets are public, spend never is. */
.shuffle { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .shuffle { grid-template-columns: 1fr; } }

.draw-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vip-only {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #F472B6;
  border: 1px solid color-mix(in srgb, #F472B6 45%, var(--line));
  padding: 4px 9px;
  white-space: nowrap;
  align-self: center;
}

/* Wheel of Luck — ten labeled sectors, ONE gold. Spin 1 = the prize,
   spin 2 = its winner (name cycler below). Sectors are built in JS. */
.wheel-wrap { display: grid; justify-items: center; gap: 16px; }

/* Grand Jackpot rollover — the ONE thing that is public all month.
   Contents of the other nine stay sealed until reveal night. */
.jackpot {
  --chamfer: 12px;
  position: relative; z-index: 0;
  width: min(430px, 100%);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--gold) 9%, var(--ground-2));
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.jackpot::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: color-mix(in srgb, var(--gold) 55%, var(--panel-line));
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.jp-l { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.jp-v {
  font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
  animation: jp-pulse 2.6s ease-in-out infinite;
}
@keyframes jp-pulse { 50% { text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); } }
.jp-x { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); margin-left: auto; }

.wheel-box { position: relative; width: min(430px, 100%); }
.wheel-box svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .38)); }
/* All wheel motion is JS-driven (rAF) — CSS transitions on SVG <g> are
   unreliable across browsers and die under prefers-reduced-motion. */
#wheel-g {
  transform-box: view-box;
  transform-origin: 50% 50%;
  will-change: transform;
}
.wheel-ptr {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0;
  border: 12px solid transparent; border-bottom: 0; border-top: 20px solid var(--gold);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
}
.sec { stroke: var(--panel-line); stroke-width: 1.2; transition: fill .3s; }
.sec--a { fill: var(--surface); }
.sec--b { fill: var(--ground-2); }
.sec--grand { fill: var(--gold); stroke: var(--gold-hi); }
.sec.win:not(.sec--grand) { fill: color-mix(in srgb, var(--gold) 26%, var(--surface)); }
.peg { fill: var(--gold); opacity: .75; }
.hub { fill: var(--ground-2); stroke: var(--line-bright); stroke-width: 2; }
.hub-star { font-family: var(--mono); font-size: 26px; fill: var(--gold); text-anchor: middle; dominant-baseline: central; }
.sec-label {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .07em;
  fill: var(--text); text-anchor: middle; dominant-baseline: central;
}
.sec-label--grand { fill: #100C02; }

.wheel-out { width: min(430px, 100%); border: 1px solid var(--line); background: var(--surface); }
.wo-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 16px; font-family: var(--mono); }
.wo-row + .wo-row { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.wo-l { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); align-self: center; white-space: nowrap; }
.wo-v { font-size: 13px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
#wo-prize { color: var(--gold); }
.wo-hit { color: var(--online); }

.prz-note { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.prz-note b { color: var(--text); }

.tickets { border: 1px solid var(--line); background: var(--surface); }
.you-strip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--gold);
}
.you-strip .yl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.you-strip .yv { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.tick-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  transition: background .14s;
}
.tick-pc { font-family: var(--mono); font-size: 11px; color: var(--ice); font-variant-numeric: tabular-nums; }
.tick-foot { font-size: 11.5px; color: var(--muted); line-height: 1.6; padding: 12px 16px; background: color-mix(in srgb, var(--ground) 40%, transparent); }
.tick-foot b { color: var(--text); }

/* Earn entries: the three sources + the in-game quest-code redeem.
   The NPC hands out a one-time personal code; the site claims it. */
.earn { border-top: 1px solid var(--line); padding: 14px 16px 16px; }
.earn-t { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.earn-row { font-size: 12px; color: var(--muted); line-height: 1.5; padding: 3px 0; }
.earn-i { display: inline-block; width: 20px; color: var(--gold); }
.code-redeem { display: flex; gap: 8px; margin-top: 12px; }
.code-redeem input {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--text);
  background: color-mix(in srgb, var(--ground) 76%, transparent);
  border: 1px solid var(--line-bright);
  padding: 9px 12px;
  outline: none;
  text-transform: uppercase;
}
.code-redeem input::placeholder { color: var(--muted); opacity: .6; }
.code-redeem input:focus-visible { border-color: var(--gold); }
.code-redeem .btn { padding: 9px 16px; font-size: 11px; }
.code-msg { font-family: var(--mono); font-size: 11px; color: var(--online); margin-top: 10px; }
.code-msg b { color: var(--online); }
.you-strip .yv small { font-size: 11px; color: var(--ice); font-weight: 500; }
.tick-row:hover { background: var(--surface-2); }
.tick-rk { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tick-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick-n { font-family: var(--mono); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tick-n small { font-size: 10px; color: var(--muted); font-weight: 500; letter-spacing: .1em; }

.t20 {
  --chamfer: 16px;
  position: relative; z-index: 0; overflow: hidden;
  margin-top: 18px;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  padding: 22px 26px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center;
}
.t20::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  background: var(--panel-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.t20::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #F472B6 0%, transparent 70%);
}
.t20-n {
  font-family: var(--mono); font-size: clamp(34px, 5vw, 52px); font-weight: 700;
  line-height: 1; color: #F472B6; font-variant-numeric: tabular-nums;
}
.t20-cap { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 52ch; }
.t20-cap b { color: var(--text); }
@media (max-width: 720px) {
  .t20 { grid-template-columns: auto minmax(0, 1fr); }
  .t20 .btn { grid-column: 1 / -1; text-align: center; }
}

/* ── Classified lock: the Shuffle ships sealed. Locked = the whole block is
   blurred, desaturated and compressed to a short "vault" with a clearance
   terminal on top; unlock decrypts and expands it. Sci-fi, but on the same
   chamfer/mono grammar as the rest of the page. */
:root { --danger: #FF5C5C; --bronze: #C08A5A; }

.vip-only { background: none; cursor: pointer; transition: color .15s, border-color .15s; }
.vip-only:hover, .vip-only:focus-visible { color: #FF9ECF; }

.classified { position: relative; }
.classified-body { max-height: 2600px; transition: filter .9s ease, opacity .9s ease, max-height 1s ease; }
.is-locked .classified-body {
  filter: blur(13px) saturate(.4) brightness(.7);
  opacity: .5;
  pointer-events: none;
  user-select: none;
  max-height: 480px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
}
@media (max-width: 900px) { .is-locked .classified-body { max-height: 420px; } }

.clr {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  padding: clamp(10px, 3vw, 28px);
  transition: opacity .5s ease .25s;
}
.classified:not(.is-locked) .clr { opacity: 0; pointer-events: none; }

.clr-box {
  --chamfer: 16px; --clr-c: var(--danger);
  position: relative; z-index: 0; overflow: hidden;
  width: min(560px, 100%);
  padding: 20px clamp(18px, 4vw, 30px) 24px;
  background: color-mix(in srgb, var(--ground) 88%, black);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  text-align: left;
}
.clr-box::before { /* hairline, follows the state color */
  content: "";
  position: absolute; inset: -1px; z-index: -2;
  background: color-mix(in srgb, var(--clr-c) 55%, var(--panel-line));
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.clr-box::after { /* CRT scanlines */
  content: "";
  position: absolute; inset: 1px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255, 255, 255, .028) 2px 3px);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.clr-box > * { position: relative; z-index: 1; }

.clr-scan { /* one slow red sweep down the terminal */
  position: absolute; left: 0; right: 0; top: -80px; height: 80px; z-index: 2;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--clr-c) 14%, transparent), transparent);
  animation: clr-scan 3.4s linear infinite;
  pointer-events: none;
}
@keyframes clr-scan { to { transform: translateY(min(520px, 60vh)); } }

.clr-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid color-mix(in srgb, var(--clr-c) 30%, var(--line));
  padding-bottom: 11px; margin-bottom: 16px;
}
.clr-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clr-c);
  box-shadow: 0 0 8px var(--clr-c);
  animation: clr-blink 1.1s steps(2, start) infinite;
}
@keyframes clr-blink { 50% { opacity: .25; } }
.clr-id { margin-left: auto; opacity: .6; }

.clr-tag {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(17px, 3.4vw, 22px); letter-spacing: .1em;
  color: var(--clr-c);
  animation: clr-glitch 4s steps(1) infinite;
}
@keyframes clr-glitch {
  0%, 91%, 94.5%, 100% { transform: none; opacity: 1; }
  92% { transform: translateX(2px) skewX(-4deg); opacity: .75; }
  93% { transform: translateX(-2px); opacity: .9; }
  94% { transform: translateX(1px) skewX(3deg); opacity: .8; }
}

.clr-code {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted);
  margin-top: 9px;
  overflow-wrap: anywhere;
}
.clr-code b { color: var(--clr-c); letter-spacing: .14em; }
.clr-caret {
  display: inline-block; width: 7px; height: 12px; margin-left: 5px;
  background: var(--clr-c); vertical-align: -2px;
  animation: clr-blink 1s steps(2, start) infinite;
}

.clr-line { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 14px 0 0; }
.clr-line b { color: var(--bronze); }

.clr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.clr-ovr {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  transition: color .15s;
}
.clr-ovr:hover, .clr-ovr:focus-visible { color: var(--ice); }

/* decrypt-in-progress + granted states drive everything via --clr-c */
.clr-box.is-busy { --clr-c: var(--gold); }
.clr-box.is-busy .clr-scan { animation-duration: .7s; }
.clr-box.is-granted { --clr-c: var(--online); }

/* the wheel rolls in when the vault opens */
.classified:not(.is-locked) .wheel-box svg { animation: wh-in .8s cubic-bezier(.22, .9, .32, 1.15) backwards .15s; }
@keyframes wh-in { from { opacity: 0; transform: scale(.88) rotate(-16deg); } }

@media (prefers-reduced-motion: reduce) {
  .clr-scan, .clr-tag, .classified:not(.is-locked) .wheel-box svg { animation: none; }
}

/* ── Community band: one huge figure + one CTA, art behind ───────────── */
.comm {
  --chamfer: 22px;
  position: relative; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  padding: clamp(28px, 5vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 200px;
}
.comm::before {
  content: "";
  position: absolute; inset: -1px; z-index: -2;
  background: var(--panel-line);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.comm-art {
  position: absolute; z-index: -1; bottom: -20px; right: 6%;
  height: 125%;
  opacity: .42;
  filter: saturate(.9);
  pointer-events: none;
}
.comm-art--far { right: auto; left: 38%; height: 110%; opacity: .22; }
.comm-n {
  font-family: var(--mono);
  font-size: clamp(46px, 8vw, 76px);
  font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.comm-n span { color: var(--online); }
.comm-cap { color: var(--muted); font-size: 14px; margin-top: 10px; max-width: 42ch; line-height: 1.55; }
@media (max-width: 720px) {
  .comm { grid-template-columns: 1fr; min-height: 0; }
  .comm-art { opacity: .2; }
  .comm-art--far { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 90px; /* room for the brightness switch on phones */
  color: var(--muted);
  font-size: 12px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ── Mockup chrome: note bar + brightness switch ─────────────────────── */
.note-bar {
  background: var(--aurora-dim);
  color: #EDEAFF;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-align: center;
  padding: 9px 16px;
  text-transform: uppercase;
}
.lum {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  border: 1px solid var(--line-bright);
  padding: 4px;
  backdrop-filter: blur(8px);
}
.lum b {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 0 8px; font-weight: 500;
}
.lum button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--muted);
  border: 0; padding: 8px 12px; cursor: pointer;
  transition: color .16s, background .16s, box-shadow .16s;
}
.lum button:hover { color: var(--text); }
.lum button[aria-pressed="true"] {
  color: var(--text); background: var(--surface-2);
  box-shadow: inset 0 -2px 0 var(--gold);
}
@media (max-width: 520px) {
  .lum b { padding: 0 6px; }
  .lum button { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .io { opacity: 1; transform: none; }
}

/* ============================================================
   v3 additions (2026-08-14): conversion structure + wow pass
   ============================================================ */

/* --- Why Insanity: feature chips (incl. explicit no-P2W) --- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.why-chip{position:relative;z-index:0;padding:16px 18px;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--panel-line)}
.why-chip,.why-chip::before{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.why-chip::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--panel-line)}
.why-chip .wc-t{font-weight:700;color:var(--text);font-size:14.5px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.why-chip .wc-s{color:var(--muted);font-size:12.5px;margin-top:4px;line-height:1.5}
.why-chip--gold .wc-t{color:var(--gold)}

/* --- Start in 3 steps --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:step}
.step{position:relative;padding:18px 18px 16px 64px;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--panel-line)}
.step::after{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:16px;top:14px;font-family:var(--mono);font-size:26px;font-weight:700;color:var(--gold);opacity:.9}
.step .st-t{font-weight:700;color:var(--text);font-size:14.5px}
.step .st-s{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5}

/* --- News / patch notes (signs of life) --- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.news-card{display:block;padding:16px 18px;background:linear-gradient(180deg,var(--panel-a),var(--panel-b));border:1px solid var(--panel-line);text-decoration:none;transition:transform .18s ease,border-color .18s ease}
.news-card:hover{transform:translateY(-3px);border-color:var(--line-bright)}
.news-card .nw-d{font-family:var(--mono);font-size:11px;color:var(--ice);letter-spacing:.1em;text-transform:uppercase}
.news-card .nw-t{color:var(--text);font-weight:700;font-size:15px;margin:6px 0 4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card .nw-s{color:var(--muted);font-size:12.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- Closing CTA band --- */
.close-cta{text-align:center;padding:clamp(48px,7vw,84px) 20px}
.close-cta h2{font-family:Goliad,serif;font-size:clamp(26px,4vw,44px);color:var(--text);letter-spacing:.02em;margin-bottom:10px}
.close-cta p{color:var(--muted);font-size:14px;margin-bottom:22px}

/* --- Altitude Rail: fixed right-edge altimeter (signature) --- */
.alt-rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:6px;pointer-events:none;font-family:var(--mono)}
.alt-rail .ar-alt{font-size:12px;color:var(--ice);letter-spacing:.08em;background:var(--hud-bg);border:1px solid var(--panel-line);padding:4px 8px}
.alt-rail .ar-ticks{width:10px;height:130px;background:repeating-linear-gradient(to bottom,var(--line-bright) 0 1px,transparent 1px 9px);opacity:.65}
.alt-rail .ar-wp{font-size:9.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;max-width:110px;text-align:right}
@media (max-width:900px){.alt-rail{display:none}}

/* --- Hero: staged reveal + presence --- */
.hero-in{min-height:74vh;display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){.hero-in{min-height:0}}
.hero-logo{opacity:0;transform:translateY(24px);animation:heroUp .7s cubic-bezier(.16,1,.3,1) .12s forwards}
.hero .tag{opacity:0;transform:translateY(16px);animation:heroUp .6s cubic-bezier(.16,1,.3,1) .32s forwards}
.hero .cta-row{opacity:0;transform:translateY(14px);animation:heroUp .6s cubic-bezier(.16,1,.3,1) .48s forwards}
.hero .hud{opacity:0;animation:heroFade .7s ease .62s forwards}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes heroFade{to{opacity:1}}
.hero-horizon{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,182,39,.22);transform:scaleX(0);animation:horizonWipe .6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes horizonWipe{to{transform:scaleX(1)}}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;background:radial-gradient(140% 70% at 50% 100%, rgba(44,58,114,.55) 0%, transparent 62%)}

/* --- HUD secondary links under CTA --- */
.cta-sub{display:flex;gap:18px;justify-content:center;margin-top:14px;opacity:0;animation:heroFade .6s ease .6s forwards}
/* sits directly on bright key art → bright colour + hard shadow (sunlight rule) */
.cta-sub{flex-wrap:wrap;padding-inline:12px}
.cta-sub a{color:#E6E2F4;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;text-shadow:0 1px 6px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.cta-sub a:hover{color:#fff;border-bottom-color:var(--gold)}

/* --- Prestige band: HoF + VIP + Shuffle live under one head --- */
.prestige-sub{color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:26px 0 12px}
.prestige-sub b{color:var(--gold);letter-spacing:.2em}

@media (prefers-reduced-motion: reduce){
  .hero-logo,.hero .tag,.hero .cta-row,.hero .hud,.cta-sub{opacity:1;transform:none;animation:none}
  .hero-horizon{transform:none;animation:none}
}

/* ============================================================
   v3.1 polish pass (2026-08-14): mobile nav, rail v2, contrast
   ============================================================ */

/* --- Mobile top bar: the REAL logo centered, burger right --- */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;background:transparent;border:1px solid var(--line-bright);cursor:pointer}
.nav-burger span{display:block;height:2px;background:var(--text);transition:transform .2s ease,opacity .2s ease}
.mark-logo{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:flex;position:absolute;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}
  .nav-in{height:64px;gap:0;justify-content:center;position:relative}
  .chip{display:none}
  .nav .mark{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center}
  .nav .mark-text{display:none}
  .nav .mark-logo{display:block;height:44px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
}

/* --- Full-screen mobile menu --- */
.mnav{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;gap:8px;padding:max(20px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));background:color-mix(in srgb, var(--ground) 97%, transparent);backdrop-filter:blur(10px);overflow-y:auto}
.mnav[hidden]{display:none}
.mnav-close{position:absolute;top:14px;right:14px;width:44px;height:44px;background:transparent;border:1px solid var(--line-bright);color:var(--text);font-size:18px;cursor:pointer}
.mnav-logo{width:min(240px,64%);height:auto;margin:34px auto 10px;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.mnav-links{list-style:none;margin:8px 0 18px;padding:0;width:100%;max-width:340px;text-align:center}
.mnav-links li{border-bottom:1px solid var(--line)}
.mnav-links a{display:block;padding:15px 0;color:var(--text);text-decoration:none;font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.mnav-links a:active,.mnav-links a:hover{color:var(--gold)}
.mnav-auth{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px;text-align:center;margin-top:auto}
.mnav-auth .btn{width:100%}

/* --- Altitude Rail v2: a labelled instrument, hidden until you scroll --- */
.alt-rail{right:18px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.alt-rail.is-on{opacity:1}
.alt-rail .ar-cap{font-size:8.5px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;padding-right:2px}
.alt-rail .ar-alt{min-width:74px;text-align:right}

/* --- Hero secondary links: full visibility on bright art --- */
.cta-sub a{color:#fff;font-weight:600}

/* ============================================================
   v3.2 (2026-08-14): chamfer border FIX + hero presence pass
   ============================================================ */

/* clip-path creates a stacking context, so a z-index:-1 ::before can never
   sit BEHIND its parent's background — the "border" layer was painting OVER
   the fill (obvious on the Light step: everything turned periwinkle
   #4A5C9E). Robust replacement: two-layer background — fill on padding-box,
   border colour on border-box, 1px transparent border, same clip. */
.panel, .hud, .champ, .tm, .t20, .comm, .why-chip, .step {
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%) padding-box,
              var(--panel-line) border-box;
}
.hud {
  background: linear-gradient(var(--hud-bg), var(--hud-bg)) padding-box,
              var(--panel-line) border-box;
}
.jackpot {
  border: 1px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--gold) 9%, var(--ground-2)), color-mix(in srgb, var(--gold) 9%, var(--ground-2))) padding-box,
              color-mix(in srgb, var(--gold) 55%, var(--panel-line)) border-box;
}
.clr-box {
  border: 1px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--ground) 88%, black), color-mix(in srgb, var(--ground) 88%, black)) padding-box,
              color-mix(in srgb, var(--clr-c) 55%, var(--panel-line)) border-box;
}
.panel::before, .hud::before, .champ::before, .tm::before, .jackpot::before,
.t20::before, .clr-box::before, .comm::before, .why-chip::before { content: none; }

/* --- Hero presence: the logo must DOMINATE (desktop) --- */
@media (min-width: 901px) {
  .hero-logo { width: min(780px, 92%); }
  .hero .tag { font-size: 17px; color: #E3DFF2; margin-top: 18px; }
  .cta-row { margin-top: 26px; }
  .hero .hud { margin-top: 42px; }
}

/* ============================================================
   v3.3 (2026-08-14): premium desktop top bar
   ============================================================ */
@media (min-width: 901px) {
  .nav-in { height: 70px; gap: 0; }
  .mark-logo { display: block; height: 46px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
  .mark-text { display: none; }
  .nav-links {
    flex: 1;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 34px);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .nav-links a { padding: 26px 0 24px; color: var(--muted); }
  .nav-links a:hover, .nav-links a:focus-visible, .nav-links a.on { color: var(--text); }
}
.nav { background: color-mix(in srgb, var(--ground) 90%, black); border-bottom: 1px solid var(--line-bright); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-login {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.nav-login:hover { color: var(--text); }
.btn--nav { padding: 10px 22px; font-size: 11px; }
@media (max-width: 900px) { .nav-cta { display: none; } }

/* v3.4: the sky gap between the nav and the logo was reading as dead space
   (owner). Keep some air, kill the void: shorter hero, no forced column height. */
@media (min-width: 901px) {
  .hero { min-height: min(84vh, 780px); padding: 48px 0 56px; }
  .hero-in { min-height: 0; }
}

/* v3.5: content rises INTO the circled empty sky band (owner's marker) —
   logo right under the nav, text no longer crowding the character art. */
@media (min-width: 901px) {
  .hero { align-items: flex-start; padding: 30px 0 52px; }
}

/* v3.6: desktop bar drops the logo (the hero carries it); the greeting/CTA
   cluster centers vertically BETWEEN the two characters, same in both states. */
@media (min-width: 901px) {
  .nav .mark { display: none; }
  .hero-in { min-height: min(72vh, 640px); display: flex; flex-direction: column; }
  .hero-mid { margin-block: auto; display: flex; flex-direction: column; align-items: center; }
  .hero .hud { margin-top: 0; }
}

/* v3.7: smaller hero logo, tucked right under the bar (owner). */
@media (min-width: 901px) {
  .hero { padding-top: 12px; }
  .hero-logo { width: min(540px, 66%); }
}

/* v3.8: REAL centering, no giant gaps (owner).
   Bar: 3-column grid — links dead-center of the page, account chip right.
   Hero: compact block (fixed gaps, no auto margins), centered vertically. */
@media (min-width: 901px) {
  .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; height: 64px; }
  .nav-links { grid-column: 2; flex: unset; justify-content: center; }
  .chip, .nav-cta { grid-column: 3; justify-self: end; }
  .nav-burger { display: none; }

  .hero { align-items: center; padding: 24px 0 40px; }
  .hero-in { min-height: 0; }
  .hero-logo { margin-bottom: 34px; }
  .hero-mid { margin-block: 0; }
  .hero .tag { margin: 0 0 20px; }
  .cta-row { margin-top: 0; }
  .cta-sub { margin-top: 16px; }
  .hero .hud { margin-top: 44px; }
}

/* v3.9: game-feel button presses (owner: „când dai click să se vadă") +
   tighter logo→tagline gap. */
@media (min-width: 901px) { .hero-logo { margin-bottom: 22px; } }

.btn, .lum button, .tab {
  transition: transform .08s ease, filter .12s ease, border-color .16s, color .16s, background .16s, box-shadow .12s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active {
  transform: translateY(1px) scale(.965);
  filter: brightness(1.18) saturate(1.1);
}
.btn--go:hover { box-shadow: 0 6px 22px rgba(255, 182, 39, .38); }
.btn--go:active { box-shadow: 0 2px 8px rgba(255, 182, 39, .55), inset 0 0 14px rgba(255, 255, 255, .28); }
.btn:not(.btn--go):active { background: color-mix(in srgb, var(--gold) 14%, var(--ground) 86%); border-color: var(--gold); color: var(--gold-hi); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tab:active, .lum button:active { transform: scale(.94); }
.nav-links a:active { color: var(--gold); }
.mnav-links a:active { color: var(--gold-hi); }

/* v3.10: radial click pulse (spawned by JS at the click point) */
.btn { position: relative; }
.btn-pulse {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,182,39,.4) 40%, transparent 70%);
  animation: btnPulse .5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes btnPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(20); opacity: 0; } }

/* v3.11 FINAL hero anchoring: logo PINNED 14px under the bar (no centering
   math can push it down again); only the greeting cluster centers between
   the characters; HUD sits at the bottom. */
@media (min-width: 901px) {
  .hero { align-items: stretch; padding: 14px 0 44px; }
  .hero-in { min-height: calc(min(84vh, 780px) - 58px); }
  .hero-logo { margin-bottom: 0; }
  .hero-mid { margin-block: auto; }
  .hero .hud { margin-top: 0; }
}

/* v3.12: NO vertical centering anywhere — the whole block stacks compactly
   from the top: logo → tagline → buttons → HUD. "Between the characters"
   meant HORIZONTALLY (owner). The art fills whatever hero height remains. */
@media (min-width: 901px) {
  .hero-in { min-height: 0; }
  .hero-mid { margin-block: 0; }
  .hero .tag { margin: 14px 0 18px; }
  .cta-sub { margin-top: 14px; }
  .hero .hud { margin-top: 34px; }
  .hero { min-height: min(78vh, 720px); }
}

/* v3.13: the strip between bar and logo DELETED — trimmed logo asset (the
   old file carried ~34px of transparent padding inside it) + 8px padding. */
@media (min-width: 901px) {
  .hero { padding-top: 8px; }
}

/* v3.14 — THE actual culprit all along: the original .hero-in had
   justify-content:center, never overridden; with the column stretched it
   re-centered everything no matter what padding said. Kill it. */
@media (min-width: 901px) {
  .hero-in { justify-content: flex-start; }
}

/* v3.15: the HERO ITSELF shrinks to its content — no leftover art belly
   below the HUD, no dead bands anywhere; the chars (80% of hero height)
   scale down with it. */
@media (min-width: 901px) {
  .hero { min-height: 0; padding: 10px 0 36px; }
}

/* ============================================================
   Vote page (native Altitude)
   ============================================================ */
.vpage-head { text-align: center; padding: 34px 0 6px; }
.vpage-head h1 { font-family: var(--mono); font-size: clamp(22px, 3vw, 30px); letter-spacing: .18em; text-transform: uppercase; color: var(--text); margin: 0 0 6px; }
.vpage-head p { color: var(--muted); font-size: 13px; margin: 0; }
.vnote { max-width: 640px; margin: 14px auto 0; text-align: center; padding: 10px 16px; font-size: 12.5px; color: var(--ice); background: color-mix(in srgb, var(--ice-deep) 18%, transparent); border: 1px solid color-mix(in srgb, var(--ice) 30%, transparent); }

#status-message .alert { max-width: 640px; margin: 14px auto 0; padding: 12px 18px; font-size: 13px; text-align: center; border: 1px solid var(--line-bright); background: var(--panel-a); color: var(--text); }
#status-message .alert-success { border-color: color-mix(in srgb, var(--online) 60%, transparent); color: var(--online); }
#status-message .alert-danger { border-color: #FF5C5C88; color: #FF9B9B; }
#status-message .alert-info { border-color: color-mix(in srgb, var(--ice) 50%, transparent); color: var(--ice); }
#status-message .alert-warning { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-hi); }

.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 26px; align-items: start; }
.vsite {
  --chamfer: 16px;
  position: relative;
  padding: 20px 20px 22px;
  text-align: center;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%) padding-box, var(--panel-line) border-box;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.vsite .vs-num { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .2em; }
.vsite .vs-name { font-size: 17px; font-weight: 700; color: var(--text); margin: 6px 0 12px; }
.vsite .vs-pts { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--gold); line-height: 1; }
.vsite .vs-pts small { display: block; font-size: 10px; color: var(--muted); letter-spacing: .18em; margin-top: 4px; }
.vsite .btn { margin-top: 16px; width: 100%; }
.vsite .btn.disabled { opacity: .55; cursor: not-allowed; filter: saturate(.4); }
.vs-timer-wrap { margin-top: 12px; display: none; }
.vs-timer-wrap p { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
.vs-timer { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--gold-hi); letter-spacing: .08em; }
.vs-cd { margin-top: 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; line-height: 1.6; }
.vs-cd b { color: var(--ice); }
.vs-counter { margin-top: 14px; padding: 14px; border: 1px solid var(--line-bright); background: color-mix(in srgb, var(--ground) 70%, black); }
.vs-counter .vc-big { font-family: var(--mono); font-size: 34px; font-weight: 800; letter-spacing: .1em; }
.vs-counter .vc-ok { color: var(--online); }
.vs-counter .vc-no { color: #FF7A7A; }
.vs-counter .vc-cap { font-size: 11px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.vs-counter .vc-reset { font-family: var(--mono); font-size: 19px; color: var(--gold-hi); margin-top: 6px; }
#vote-card.voting .vsite { opacity: .6; pointer-events: none; }

.vstats { margin-top: 34px; }
.vstats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vstat { text-align: center; padding: 16px; border: 1px solid transparent; background: linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box, var(--panel-line) border-box; }
.vstat .eyebrow { margin-bottom: 6px; }
.vstat .vv { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--text); }
.vstat .vv--gold { color: var(--gold); }
.vstat .vv--small { font-size: 20px; }
.vstat .vsub { font-size: 11px; color: var(--muted); margin-top: 4px; }
.vchips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.vchips span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; padding: 5px 12px; color: var(--ice); border: 1px solid color-mix(in srgb, var(--ice) 35%, transparent); background: color-mix(in srgb, var(--ice-deep) 14%, transparent); }
.d-none { display: none !important; } /* vote.js toggles steps with this */

/* ============================================================
   Shop offers (native Altitude)
   ============================================================ */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; width: 100%; align-items: stretch; }
.soffer {
  --chamfer: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 22px;
  text-align: center;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%) padding-box, var(--panel-line) border-box;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.so-price { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ice); border: 1px solid color-mix(in srgb, var(--ice) 35%, transparent); padding: 5px 16px; }
.so-name { font-size: 17px; font-weight: 700; color: var(--text); }
.so-pts { font-family: var(--mono); font-size: 32px; font-weight: 700; color: var(--text); line-height: 1; }
.so-pts small { display: block; font-size: 10px; color: var(--muted); letter-spacing: .18em; margin-top: 5px; text-transform: uppercase; }
.so-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; padding: 6px 14px;
  border: 1px solid var(--bc, var(--line-bright));
  background: color-mix(in srgb, var(--bc, var(--line-bright)) 14%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.so-badge--gold { --bc: var(--gold); color: var(--gold-hi); }

/* ============================================================
   Forms (auth pages + generic)
   ============================================================ */
.aform { width: min(560px, 100%); margin: 20px auto 0; padding: 30px clamp(20px, 4vw, 40px) 34px; position: relative;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box, var(--panel-line) border-box;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.aform--wide { width: min(760px, 100%); }
.fld { display: block; margin-bottom: 16px; text-align: left; }
.fld > span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 12px 14px;
  font-size: 14px; color: var(--text);
  background: color-mix(in srgb, var(--ground) 72%, black);
  border: 1px solid var(--line-bright);
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.fld input.is-invalid { border-color: #FF5C5C; }
.fld .ferr { display: block; color: #FF9B9B; font-size: 12px; margin-top: 5px; }
.fcheck { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; text-align: left; font-size: 13px; color: var(--muted); line-height: 1.5; }
.fcheck input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.fcheck a { color: var(--ice); }
.aform .btn { width: 100%; margin-top: 8px; }
.aform-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; }
.aform-links a { color: var(--muted); text-decoration: none; }
.aform-links a:hover { color: var(--gold); }

/* ============================================================
   Downloads + generic DB pages
   ============================================================ */
.page-panel { width: min(880px, 100%); margin: 20px auto 0; padding: 26px clamp(18px, 3vw, 36px); color: var(--text); line-height: 1.7; font-size: 14.5px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box, var(--panel-line) border-box; }
.page-panel a { color: var(--ice); }
.page-panel h1, .page-panel h2, .page-panel h3 { color: var(--text); }
.dl-list { width: min(760px, 100%); margin: 22px auto 0; display: flex; flex-direction: column; gap: 12px; }
.dl-row { display: flex; align-items: center; gap: 16px; padding: 18px 22px; flex-wrap: wrap;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b)) padding-box, var(--panel-line) border-box;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.dl-ico { width: 42px; height: 42px; object-fit: contain; }
.dl-meta { min-width: 0; }
.dl-name { font-weight: 700; color: var(--gold-hi); font-size: 15px; }
.dl-file { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dl-row .btn { margin-left: auto; }
@media (max-width: 540px) { .dl-row .btn { margin-left: 0; width: 100%; } }

/* ============================================================
   Footer v2 — brand / legal / social
   ============================================================ */
footer { display: block; padding: 0 0 90px; }
.foot-in { display: flex; justify-content: space-between; align-items: flex-start; gap: 26px; flex-wrap: wrap; padding-top: 34px; border-top: 1px solid var(--line); }
.foot-brand p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 8px 0 0; }
.foot-brand a { color: var(--muted); text-decoration: none; }
.foot-brand a:hover { color: var(--text); }
.foot-links, .foot-social { display: flex; flex-direction: column; gap: 8px; }
.foot-links a, .foot-social a { color: var(--muted); font-size: 12.5px; text-decoration: none; }
.foot-links a:hover, .foot-social a:hover { color: var(--gold); }
@media (max-width: 640px) { .foot-in { flex-direction: column; } }

/* footer brand mark — its own class, never touched by nav rules */
.foot-mark { font-family: "Goliad", var(--sans); font-size: 19px; letter-spacing: .04em; color: var(--text); }
.foot-mark span { color: var(--muted); }

/* Autofill: browsers force BLACK text + pale background on autofilled inputs —
   invisible on our dark fields (owner hit it on phone). Paint over it. */
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus,
#captcha-form .form-control:-webkit-autofill,
#captcha-form .form-control:-webkit-autofill:hover,
#captcha-form .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #F2F4FC;
  caret-color: #F2F4FC;
  -webkit-box-shadow: 0 0 0 1000px #0E152E inset;
  border: 1px solid var(--line-bright);
  transition: background-color 99999s ease-out;
}
.fld input:autofill, #captcha-form .form-control:autofill {
  -webkit-text-fill-color: #F2F4FC;
  box-shadow: 0 0 0 1000px #0E152E inset;
}

/* Autofill, round 2 (owner on Firefox): FF paints its own yellow highlight and
   ignores the webkit box-shadow trick. Belt & braces: try to cover it, and set
   plain `color` DARK — Chrome overrides it via -webkit-text-fill-color (white
   on dark), Firefox falls back to dark text on its yellow. Readable in both. */
.fld input:autofill,
#captcha-form .form-control:autofill {
  box-shadow: 0 0 0 1000px #0E152E inset !important;
  -webkit-text-fill-color: #F2F4FC !important;
  color: #16213E !important;
  caret-color: #F2F4FC;
}

/* Account dropdown (desktop chip) */
.acct { position: relative; }
.acct .chip { cursor: pointer; background: transparent; }
.chip-caret { color: var(--muted); font-size: 10px; margin-left: 2px; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 130;
  min-width: 210px; padding: 6px;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-bright);
  background: color-mix(in srgb, var(--ground) 96%, black);
  box-shadow: 0 24px 60px -20px rgba(6, 8, 20, .8);
}
.acct-menu[hidden] { display: none; }
.acct-menu a {
  padding: 11px 14px; color: var(--muted); text-decoration: none;
  font-size: 13px; letter-spacing: .02em;
  border-bottom: 1px solid var(--line);
  transition: background .14s, color .14s;
}
.acct-menu a:last-child { border-bottom: 0; }
.acct-menu a:hover { background: var(--surface); color: var(--text); }
.acct-menu .acct-out { color: #FF9B9B; }
.acct-menu .acct-out:hover { background: color-mix(in srgb, #FF5C5C 16%, transparent); color: #FFC9C9; }

/* Narrow-desktop nav (~1200-1560px): the centered links + account chip no
   longer fit — tighten type and compact the chip so nothing overlaps. */
@media (min-width: 901px) and (max-width: 1560px) {
  .nav-links { gap: clamp(10px, 1.4vw, 18px); font-size: 11px; }
  .chip { font-size: 11px; padding: 4px 9px; }
  .chip-ip { display: none; } /* iP hidden at narrow widths — in hero HUD + account menu */
}
@media (min-width: 901px) and (max-width: 1240px) {
  .nav-links { letter-spacing: .08em; }
}

/* Progressive jackpots — slot-machine trio above the wheel */
.jp3 { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; align-items: end; margin-bottom: 14px; }
.jp-card { text-align: center; padding: 12px 8px 10px; border: 1px solid var(--jc, var(--line-bright));
  background: linear-gradient(180deg, color-mix(in srgb, var(--jc, #888) 14%, var(--panel-b)), var(--panel-b));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.jp-card--bronze { --jc: #CD7F32; }
.jp-card--gold { --jc: var(--gold); }
.jp-card--silver { --jc: #C9D1E3; }
.jp-card--big { padding: 18px 8px 14px; box-shadow: 0 0 24px color-mix(in srgb, var(--jc) 25%, transparent); }
.jp3-l { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; color: var(--jc); }
.jp3-v { display: block; font-family: var(--mono); font-weight: 800; font-size: clamp(17px, 1.6vw, 22px); color: var(--text); margin-top: 4px; font-variant-numeric: tabular-nums; }
.jp-card--big .jp3-v { font-size: clamp(22px, 2.2vw, 30px); color: var(--jc); text-shadow: 0 0 14px color-mix(in srgb, var(--jc) 45%, transparent); }
.jp3-roll { display: block; margin-top: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.jp3-roll--quiet { color: var(--muted); }
.jp3-note { font-size: 11.5px; color: var(--muted); text-align: center; margin: 0 0 12px; }
.jp3-note b { color: var(--gold-hi); }

/* Jackpot sectors on the wheel */
.sec--jp-gold { fill: var(--gold); stroke: var(--gold-hi); }
.sec--jp-silver { fill: color-mix(in srgb, #C9D1E3 55%, var(--surface)); stroke: #C9D1E3; }
.sec--jp-bronze { fill: color-mix(in srgb, #CD7F32 55%, var(--ground-2)); stroke: #CD7F32; }
.sec-label--jp-gold { fill: #100C02; font-weight: 800; }
.sec-label--jp-silver { fill: #0E152E; font-weight: 800; }
.sec-label--jp-bronze { fill: #FFF3E4; font-weight: 800; }

/* Podium arrangement for the jackpot trio: silver left (mid), GOLD center
   (tallest), bronze right (lowest) — heights stepped like a podium. */
.jp3 { grid-template-columns: 1fr 1.3fr 1fr; }
.jp-card--silver { order: 1; min-height: 96px; }
.jp-card--gold { order: 2; min-height: 122px; display: flex; flex-direction: column; justify-content: center; }
.jp-card--bronze { order: 3; min-height: 78px; }

/* the chip now lives inside .acct (dropdown wrapper) — pin the WRAPPER to
   grid column 3, not just the chip, so placement never relies on luck */
@media (min-width: 901px) {
  .acct { grid-column: 3; justify-self: end; }
}

/* Vote page: current in-game vote points balance */
.vp-balance { display: inline-block; margin-top: 14px; padding: 9px 22px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent); }
.vp-balance b { color: var(--gold-hi); font-size: 16px; }

/* Live server-time clock in the Next events head (UTC = server time) */
.srv-clock { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   v4.1 (2026-08-16): Server buffs live board
   ============================================================ */
.bf-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; color: #34D399;
}
.bf-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34D399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
  animation: bf-pulse 1.8s ease-out infinite;
}
@keyframes bf-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .bf-live-dot { animation: none; } }

.buffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.bf {
  --chamfer: 12px;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%) padding-box,
              var(--panel-line) border-box;
}
.bf--gold {
  background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%) padding-box,
              color-mix(in srgb, var(--gold) 45%, var(--panel-line)) border-box;
}
.bf-ic { font-size: 22px; line-height: 1; flex: none; filter: saturate(.9); }
.bf-mid { min-width: 0; flex: 1; }
.bf-name {
  font-weight: 700; color: var(--text); font-size: 13.5px; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bf--gold .bf-name { color: var(--gold); }
.bf-eff { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.bf-left {
  flex: none; text-align: right;
  font-family: var(--mono); font-size: 14.5px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bf--soon .bf-left { color: var(--gold); }

/* ── v4.2: "Welcome back" last-login toast (bottom-right, one page view) ── */
.lastlog {
  position: fixed; right: 18px; bottom: 64px; z-index: 91; /* clears the fixed Brightness switch */
  display: flex; align-items: center; gap: 12px;
  max-width: min(480px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--panel-line));
  background: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  color: var(--text); font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.lastlog b { color: var(--gold); }
.lastlog a { color: var(--gold); font-weight: 700; white-space: nowrap; }
.lastlog-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px; }
.lastlog-x:hover { color: var(--text); }