/* ============================================================
   Xpress Arcade — shared stylesheet
   Palette + type pulled from design/mockup-full-site.png
   ============================================================ */

:root {
  --bg: #05070f;
  --bg-raised: #0a101d;
  --bg-card: #0e1626;
  --panel: rgba(37, 99, 235, 0.07);
  --border: rgba(59, 130, 246, 0.32);
  --border-soft: rgba(59, 130, 246, 0.18);
  --purple: #3b82f6;
  --purple-deep: #1d4ed8;
  --purple-light: #93c5fd;
  --orange: #ff9d1f;
  --orange-deep: #ff6a00;
  --gold: #ffc93c;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --green: #34d399;
  --text: #ece8f8;
  --muted: #a79dc4;
  --radius: 16px;
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* the [hidden] attribute must win over any class that sets a display value
   (.btn, .verify-skip, …) — otherwise hiding an element in JS silently
   does nothing */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient neon glow washes behind the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(37, 99, 235, 0.22), transparent 60%),
    radial-gradient(700px 420px at -10% 25%, rgba(236, 72, 153, 0.10), transparent 60%),
    radial-gradient(800px 500px at 50% 110%, rgba(34, 211, 238, 0.07), transparent 60%),
    var(--bg);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
  width: min(1180px, 100% - 40px);
  margin-inline: auto;
}

/* The header is sticky and 72px tall, so jumping to an in-page anchor would
   park the heading you asked for underneath it — every Menu destination
   (#activity, #gameAccounts, #profile…) landed a header-height too far down. */
:target { scroll-margin-top: 92px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 15, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.5px;
  user-select: none;
}

.brand-mark {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  /* no border/box — soft circular fade so it sits on the header like a badge */
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* XPRESS is set large but was tracking at only 0.5px, which read as squeezed
   against its own height. Both lines are widened together so they stay the
   same length as each other. */
.brand .brand-x {
  font-size: 1.35rem;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe259 0%, var(--orange) 55%, var(--orange-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 122, 0, 0.45));
  transform: skewX(-6deg);
}

.brand .brand-sub {
  font-size: 0.78rem;
  letter-spacing: 5.3px;
  color: var(--purple-light);
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.7);
}

.main-nav {
  display: flex;
  gap: 6px;
  margin-inline: auto;
}

/* js/main.js moves HOME/GAMES into the Menu and hides .main-nav at every width.
   That nav's auto margins were the only thing pushing SIGN IN and the Menu
   button to the right, so without this they collapse against the logo on a wide
   screen. Scoped to [hidden] so that if the script never runs, the original
   centred-nav header is still what you get. */
.site-header .main-nav[hidden] ~ .sign-in,
.site-header .main-nav[hidden] ~ .nav-toggle {
  margin-left: auto;
}

/* only the first of them needs the push — the rest ride along beside it */
.site-header .main-nav[hidden] ~ .sign-in ~ .nav-toggle {
  margin-left: 0;
}

.main-nav a {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 8px;
  position: relative;
  transition: color 0.2s;
}

.main-nav a:hover { color: var(--text); }

.main-nav a.active { color: var(--text); }

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-deep));
  box-shadow: 0 0 10px rgba(255, 122, 0, 0.8);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  border-radius: 12px;
  padding: 13px 26px;
  border: 1px solid transparent;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

/* A DISABLED BUTTON HAS TO LOOK DISABLED.
 *
 * Only `.btn-danger` had this, so every other variant kept its full colour and
 * glow while refusing the click — MARK DONE sat there looking pressable until
 * a receipt was attached, and a button that ignores you reads as a broken page,
 * not as a step you haven't done yet. It also covers the transient case: most
 * of the portal disables a button while its request is in flight, which is
 * exactly when the press needs to look like it landed.
 *
 * `!important` because the variant rules set `box-shadow` at the same
 * specificity and the cascade would otherwise decide it by source order. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* and it must not pretend to react */
.btn:disabled:hover,
.btn[disabled]:hover { box-shadow: none !important; }
.btn:disabled:active,
.btn[disabled]:active { transform: none; }

.btn-primary {
  color: #1d0f00;
  background: linear-gradient(180deg, #ffbe3d 0%, var(--orange) 45%, var(--orange-deep) 100%);
  box-shadow: 0 0 22px rgba(255, 122, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 0 32px rgba(255, 140, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-outline {
  color: var(--text);
  border-color: var(--border);
  background: rgba(59, 130, 246, 0.08);
}

.btn-outline:hover {
  border-color: var(--purple);
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}

.btn-ghost-pill {
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 22px;
  background: rgba(59, 130, 246, 0.06);
}

.btn-ghost-pill:hover {
  border-color: var(--purple);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
}

/* ---------- Hero ---------- */

.hero {
  padding: 64px 0 40px;
  position: relative;
  overflow: hidden;
}

/* Full-bleed arcade-floor photo blended into the page background */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/hero-arcade.jpg") right center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 6%, rgba(5, 7, 15, 0.92) 30%, rgba(5, 7, 15, 0.35) 62%, rgba(5, 7, 15, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 7, 15, 0.6) 0%, rgba(5, 7, 15, 0.1) 35%, rgba(5, 7, 15, 0.15) 70%, var(--bg) 100%);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6.5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 5%, #bfdbff 55%, var(--purple) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(59, 130, 246, 0.35));
}

.hero .tagline {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--orange);
  text-shadow: 0 0 18px rgba(255, 122, 0, 0.5);
}

.hero .lede {
  margin-top: 12px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* Dragon emblem floats over the hero photo — screen blend melts its black
   background into the room shot so there are no card edges */
.hero-art {
  position: relative;
}

.hero-art .emblem {
  /* wider than its column with a soft elliptical fade so the art doesn't look pinched */
  width: 118%;
  max-width: none;
  margin-left: -9%;
  mix-blend-mode: screen;
  /* fade completes well inside the image so its rectangular edge never shows */
  mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 48%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 48%, transparent 88%);
}

.hero-perks {
  display: flex;
  gap: 34px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.perk {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 220px;
}

.perk-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.05));
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.25);
}

.perk-icon svg { width: 22px; height: 22px; }

.perk h3 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gold);
  text-transform: uppercase;
}

.perk p {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Section shells ---------- */

.section { padding: 48px 0; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ffffff 5%, #bfdbff 55%, var(--purple) 115%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-intro {
  color: var(--muted);
  max-width: 60ch;
  margin-top: 12px;
}

.panel {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.09), rgba(59, 130, 246, 0.03));
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 28px;
}

/* ---------- Game category cards ---------- */

.category-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.game-card {
  position: relative;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
  display: block;
}

.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--purple);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.35);
}

.game-card.card-fire { border-color: rgba(255, 122, 0, 0.55); }
.game-card.card-fire:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 40px rgba(255, 122, 0, 0.35);
}

.game-card .card-scene {
  aspect-ratio: 1.7 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #081020;
}

.game-card .card-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.game-card:hover .card-scene img { transform: scale(1.05); }

.game-card .card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
}

.card-label .go {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--purple-light);
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s;
}

.game-card:hover .go { background: var(--purple); color: #fff; }

/* ---------- Join banner ---------- */

.join-banner {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 220, 180, 0.45);
  background:
    radial-gradient(75% 170% at 30% -30%, rgba(255, 128, 22, 0.5) 0%, rgba(255, 128, 22, 0.16) 42%, rgba(255, 128, 22, 0) 68%),
    radial-gradient(45% 130% at 88% -10%, rgba(168, 85, 247, 0.22), transparent 70%),
    #0a0612;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.join-banner .lock {
  flex: none;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 0 10px rgba(255, 140, 0, 0.55))
    drop-shadow(0 -2px 12px rgba(147, 51, 234, 0.45));
}

.join-banner .lock svg { width: 100%; height: 100%; }

.join-banner h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 1.2px;
}

.join-banner p { color: var(--muted); margin-top: 6px; max-width: 46ch; font-size: 0.9rem; }

/* neon gradient-border pill, like the reference: pink fading to purple */
.join-banner .btn {
  margin-left: auto;
  color: #fff;
  font-size: 0.8rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 15px 32px;
  background:
    linear-gradient(180deg, rgba(16, 12, 30, 0.96), rgba(16, 12, 30, 0.96)) padding-box,
    linear-gradient(90deg, #ff5ca8, #a855f7 55%, #7c6cff) border-box;
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.28);
}

.join-banner .btn:hover {
  box-shadow: 0 0 34px rgba(168, 85, 247, 0.5);
}

/* ---------- Dashboard ---------- */

.dash-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: start;
  padding: 40px 0 64px;
}

.dash-sidebar {
  position: sticky;
  top: 92px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--bg-raised);
  padding: 22px 14px;
}

.dash-sidebar .brand { margin: 4px 10px 22px; }

.dash-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.dash-sidebar nav a svg,
.dash-sidebar .logout a svg { width: 18px; height: 18px; flex: none; }

.dash-sidebar .logout a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.dash-sidebar .logout a:hover { color: var(--text); background: rgba(59, 130, 246, 0.1); }

.dash-sidebar nav a:hover { color: var(--text); background: rgba(59, 130, 246, 0.1); }

.dash-sidebar nav a.active {
  color: #fff;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
}

.dash-sidebar .logout { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 14px; }

.dash-main { display: grid; gap: 20px; }

.dash-row {
  display: grid;
  gap: 20px;
}

.dash-row.cols-3 { grid-template-columns: 1.2fr 1fr 1.1fr; }
.dash-row.cols-2 { grid-template-columns: 1.5fr 1fr; }

.dash-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 22px;
}

.welcome-card { display: flex; gap: 18px; align-items: center; }

.avatar {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--purple);
  box-shadow: 0 0 22px rgba(59, 130, 246, 0.5);
  background: radial-gradient(circle at 35% 30%, #1e40af, #10203c);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.avatar svg { width: 48px; height: 48px; }

.welcome-card .who .hi { color: var(--muted); font-size: 0.85rem; }

.welcome-card .who h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vip-chip {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gold);
  border: 1px solid rgba(255, 201, 60, 0.55);
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 201, 60, 0.08);
}

.level-meter { margin-top: 10px; }

.level-meter .meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 6px;
}

.level-bar {
  height: 8px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.15);
  overflow: hidden;
}

.level-bar span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.7);
}

.balance-card { text-align: center; }

.balance-card .label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.balance-card .amount {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(255, 201, 60, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.xc-coin {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe9a3, var(--gold) 45%, #b97709 100%);
  color: #6b4300;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.78rem;
  box-shadow: 0 0 18px rgba(255, 201, 60, 0.55), inset 0 -3px 6px rgba(120, 70, 0, 0.5);
}

.xc-coin.small { width: 26px; height: 26px; font-size: 0.55rem; }

.balance-card .btn { width: 100%; margin-top: 18px; }

.btn-purple {
  color: #fff;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-purple:hover { box-shadow: 0 0 30px rgba(59, 130, 246, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

.promo-card { text-align: center; }

.promo-card .gift {
  margin: 12px auto 10px;
  width: 84px;
  height: 84px;
}

.promo-card h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--pink);
  text-transform: uppercase;
}

.promo-card p { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

.promo-card .btn { margin-top: 14px; }

/* Referral */

.refer-card h3, .redeem-card h3, .activity-card h3, .vip-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.refer-card .sub { color: var(--muted); font-size: 0.88rem; margin-top: 6px; max-width: 40ch; }

.refer-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }

.referral-box { margin-top: 18px; }

.referral-box .label { font-size: 0.68rem; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }

.code-row { display: flex; gap: 10px; margin-top: 8px; }

.code-pill {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 2.5px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: rgba(59, 130, 246, 0.07);
  color: var(--purple-light);
  text-align: center;
}

.social-row { display: flex; gap: 12px; margin-top: 18px; align-items: center; }

.social-row .hint { font-size: 0.78rem; color: var(--muted); margin-right: 4px; }

.social-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--purple-light);
  transition: box-shadow 0.2s, color 0.2s;
}

.social-dot:hover { color: #fff; box-shadow: 0 0 14px rgba(59, 130, 246, 0.5); }
.social-dot svg { width: 17px; height: 17px; }

.sms-btn {
  padding: 9px 16px;
  font-size: 0.68rem;
  border-radius: 999px;
  gap: 7px;
  color: var(--cyan);
  border-color: rgba(34, 211, 238, 0.45);
}

.sms-btn:hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(34, 211, 238, 0.4); }

.earn-callout { text-align: center; }

.earn-callout .figures { margin-top: 10px; }

.earn-callout .big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  color: var(--cyan);
  text-shadow: 0 0 22px rgba(34, 211, 238, 0.5);
}

.earn-callout .small { font-size: 0.72rem; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }

/* Redeem tiers */

/* Wraps rather than pushing the page wider than the phone. Eight staff tabs in
   one row forced the whole portal to ~694px, so every fixed overlay centred
   itself off-screen and the owner had to scroll sideways to read a table. */
.tier-tabs { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }

.tier-tab {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.tier-tab.active {
  color: var(--purple-light);
  border-color: var(--purple);
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.tier {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.05);
  padding: 18px 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tier:hover { border-color: var(--purple); box-shadow: 0 0 18px rgba(59, 130, 246, 0.25); }

.tier .price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--gold);
}

/* Stands in for .price, so it takes the same vertical room a badge does —
   otherwise a grid of mixed picture and badge tiles sits at ragged heights. */
.tier-img {
  display: block;
  width: 100%;
  max-width: 128px;
  height: 84px;
  object-fit: contain;
  margin: 0 auto;
}

.tier .what { font-size: 0.68rem; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }

.tier .cost { font-size: 0.8rem; color: var(--purple-light); margin-top: 8px; }

.tier .btn {
  width: 100%;
  margin-top: 12px;
  padding: 9px 0;
  font-size: 0.7rem;
  border-radius: 9px;
}

.redeem-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--muted);
}

.redeem-note .bolt { color: var(--gold); }

/* Activity feed */

.activity-card .head { display: flex; justify-content: space-between; align-items: center; }

.activity-card .view-all { font-size: 0.72rem; letter-spacing: 1.2px; color: var(--purple-light); font-weight: 700; }

/* Install pop-up "don't remind me" link */
#instNever { display: block; margin: 10px auto 0; background: none; border: none; color: var(--muted); font-size: 0.76rem; cursor: pointer; text-decoration: underline; }
#instNever:hover { color: var(--text); }

/* Install-to-home-screen banner (dashboard) */
.install-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px;
  background: linear-gradient(100deg, rgba(139,92,246,0.16), rgba(34,211,238,0.10)); border: 1px solid rgba(139,92,246,0.35);
  border-radius: 14px; }
.install-banner .install-emoji { font-size: 1.6rem; line-height: 1; flex: none; }
.install-banner .install-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-banner .install-copy b { font-size: 0.9rem; }
.install-banner .install-copy span { font-size: 0.76rem; color: var(--muted); }
.install-banner .install-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.install-banner .install-actions .btn { padding: 8px 16px; font-size: 0.66rem; }
.install-banner .install-x { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 6px; line-height: 1; }
.install-banner .install-x:hover { color: var(--text); }
@media (max-width: 520px) { .install-banner { flex-wrap: wrap; } .install-banner .install-actions { margin-left: 0; width: 100%; justify-content: flex-end; } }

/* Redeemed card — window toggle */
#rsTabs .rs-tab { font-size: 0.72rem; letter-spacing: 1.2px; color: var(--purple-light); font-weight: 700; cursor: pointer; opacity: 0.45; transition: opacity 0.15s; }
#rsTabs .rs-tab.active { opacity: 1; }
#rsTabs .rs-tab:hover { opacity: 0.8; }

/* "What this processor needs to work" checklist on the payment settings page */
.proc-needs ul { list-style: none; margin: 10px 0 0; display: grid; gap: 10px; }

.proc-needs li {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
}

.proc-need-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.proc-need-what,
.proc-need-note {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.proc-test-out ul { list-style: none; margin: 10px 0 0; display: grid; gap: 10px; }
.proc-test-out li {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-soft);
}

/* gold reads as "needs your attention"; a thing that's working shouldn't */
.proc-need-note { margin-top: 6px; color: var(--gold); }
.proc-need-note.good { color: var(--green); }

/* the URL has to be selectable and must not push the card wide on a phone */
.proc-need-url {
  display: block;
  margin: 8px 0 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  color: var(--purple-light);
  overflow-wrap: anywhere;
  user-select: all;
}

/* 30-day summary strip above the list. auto-fit rather than a fixed 4 columns
   so it folds to 2×2 on a phone instead of squeezing four numbers into 375px. */
.act-totals {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.act-totals div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
}

.act-totals .k {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
}

.act-totals .v { display: block; margin-top: 3px; font-weight: 700; font-size: 1rem; }
.act-totals .v.up { color: var(--green); }
.act-totals .v.down { color: var(--orange); }

.activity-list { margin-top: 14px; display: grid; gap: 6px; }

.activity-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
}

.activity-list li:hover { background: rgba(59, 130, 246, 0.06); }

.act-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: var(--green);
  display: grid;
  place-items: center;
}

.act-icon svg { width: 16px; height: 16px; }

.activity-list .what { font-size: 0.86rem; }
.activity-list .what b { color: var(--text); }
.activity-list .what span { display: block; color: var(--muted); font-size: 0.75rem; }
.activity-list .when { margin-left: auto; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* VIP card */

.vip-card { background: linear-gradient(160deg, rgba(255, 157, 31, 0.08), rgba(59, 130, 246, 0.1) 60%), var(--bg-raised); }

.vip-card h3 { display: flex; align-items: center; gap: 10px; color: var(--gold); }

.vip-card ul { margin-top: 14px; display: grid; gap: 10px; }

.vip-card li { display: flex; gap: 10px; font-size: 0.88rem; color: var(--text); }

.vip-card li::before { content: "✦"; color: var(--orange); }

.vip-card .btn { margin-top: 18px; }

/* ---------- Game accounts ---------- */

.accounts-card .sub { color: var(--muted); font-size: 0.88rem; margin-top: 6px; max-width: 62ch; }

.accounts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.account-tile {
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(59, 130, 246, 0.05);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.account-tile:hover { border-color: var(--purple); box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25); }

.account-tile .art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #081020;
}

.account-tile .art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* square art fades into the card so the text sits on a gradient, not a hard crop */
.account-tile .art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(13, 20, 36, 0.75) 80%, #0d1424 100%);
  pointer-events: none;
}

.fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(3, 5, 10, 0.6);
  backdrop-filter: blur(4px);
  color: #cfc7e6;
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color 0.15s, box-shadow 0.15s;
}

.fav-btn:hover { color: var(--gold); }

.fav-btn.faved {
  color: var(--gold);
  border-color: rgba(255, 201, 60, 0.6);
  box-shadow: 0 0 12px rgba(255, 201, 60, 0.45);
}

.account-tile .tile-body {
  position: relative;
  z-index: 1;
  margin-top: -58px;
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.account-tile .tile-body h4 { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }

/* Small muted hint under (or above) a field or tile. Every use of this class is
 * a hint, but for a long time only the ones inside .account-tile were styled —
 * everywhere else it rendered at full body size and swamped the form it was
 * explaining. The base rule is the one that matters; the scoped rule below just
 * keeps the tile specificity it always had. */
.tile-note { font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.account-tile .tile-note { font-size: 0.78rem; color: var(--muted); }

/* Platform art grid (games page) */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.platform-tile {
  border-radius: var(--radius);
  border: 1.5px solid var(--border-soft);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.25s;
}

.platform-tile:hover {
  transform: translateY(-4px);
  border-color: var(--purple);
  box-shadow: 0 12px 40px rgba(59, 130, 246, 0.35);
}

.platform-tile .art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #081020;
}

.platform-tile .art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.platform-tile .card-label { padding: 13px 14px; font-size: 0.92rem; font-weight: 900; color: #fff; }

/* fallback tile when a game has no art yet: big initials on a gradient */
.art-initials {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  background: linear-gradient(135deg, #1d4ed8, #ec4899);
}

.art.no-art .art-initials { display: grid; }

/* temporarily disabled games: greyed art + Coming Back Soon badge */
.temp-off .art img { filter: grayscale(1) brightness(0.5); }

.temp-off { border-color: rgba(255, 255, 255, 0.08); }

.soon-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
  background: rgba(10, 7, 20, 0.85);
  border: 1.5px solid rgba(255, 201, 60, 0.6);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

/* One line, always. A wrapped name ("Mr. All In One") used to push everything
   below it down and leave the tile taller than its neighbours; keeping the
   title to a single line is what makes every card the same height. The full
   name is on the title attribute if it ever has to be cut. */
.account-tile h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status-chip {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  width: fit-content;
  white-space: nowrap; /* keep multi-word chips (e.g. LOCKED OUT) on one line */
}

.status-none { color: var(--muted); border: 1px solid var(--border-soft); }
.status-pending { color: var(--gold); border: 1px solid rgba(255, 201, 60, 0.5); background: rgba(255, 201, 60, 0.07); }
.status-active { color: var(--green); border: 1px solid rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.07); }

.account-tile .creds { display: grid; gap: 6px; }

.cred-row {
  display: flex;
  align-items: center;
  /* Wrap on a narrow phone so the tag + copy/hide buttons drop to the next line
     instead of squeezing the username/password out of view — in portrait the
     value used to collapse to an ellipsis and a player saw only the "default"
     tag. The value keeps the first line; the controls flow below when tight. */
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
}

.cred-row .k { color: var(--muted); font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; width: 34px; flex: none; }

.cred-row .v {
  font-family: ui-monospace, Consolas, monospace;
  color: var(--purple-light);
  /* Never truncate a credential the player has to type — wrap it instead, so it
     is always fully readable however narrow the screen. */
  white-space: normal;
  overflow-wrap: anywhere;
  /* Don't GROW to fill the row — that pushed the copy button onto its own line.
     Take the content width (shrinking to a floor if very long) so the copy
     button sits right beside the value on the same line. */
  flex: 0 1 auto;
  min-width: 5ch;
}

/* Marks a password as the one WE issued rather than one the player chose. Sits
   in the row itself so it's read at the same moment as the password, not after
   it — the note below explains, the tag labels. */
.cred-tag {
  flex: none;
  font-size: 0.55rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(245, 179, 66, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
}

.cred-note {
  margin: 2px 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
}

.icon-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
}

.icon-btn:hover { color: var(--text); border-color: var(--purple); }

.account-tile .btn { padding: 9px 0; width: 100%; font-size: 0.68rem; border-radius: 9px; }

/* "I already play this one" — the quieter second option under REQUEST ACCESS.
   Deliberately not a .btn: two solid buttons on a phone-width tile read as a
   choice between equals, and for most people asking for a new account is still
   the right one. It has to be visible enough that an existing player finds it,
   though — a missed one costs them a duplicate account. */
.account-tile .tile-alt {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 2px 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.account-tile .tile-alt:hover { color: var(--text); }

/* minmax(0, 1fr), not the default `auto`: a grid item's min-width is its
   content's intrinsic width, so a text input (which asks for ~20 characters)
   pushes the whole form wider than a phone and takes the page with it. Every
   form on the site uses this class, so it's fixed here rather than per-page. */
.account-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

.account-form input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(5, 7, 15, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.account-form input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 12px rgba(59, 130, 246, 0.35); }

/* Selects were never styled here — they rendered white (UA default) and, worse,
   refused to shrink below their longest option, which pushed the redeem window
   wider than a phone. Same skin as the inputs, allowed to shrink. */
.account-form select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(5, 7, 15, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.account-form select:focus { outline: none; border-color: var(--purple); }

.modal-card { grid-template-columns: minmax(0, 1fr); }

/* Collapsible processor cards: header always visible, body on tap */
.proc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.proc-caret {
  display: inline-block;
  color: var(--muted);
  font-size: 0.8rem;
  transition: transform 0.15s;
}

.proc-caret.open { transform: rotate(90deg); }

.account-form .row { display: flex; gap: 8px; }
.account-form .row .btn { flex: 1; }

.demo-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--muted);
}

.demo-note .i { color: var(--cyan); }

/* One clean notice at the top of My Game Accounts explaining the DEFAULT tag,
   instead of repeating the sentence under every tile. Gold-tinted to match the
   per-password DEFAULT chip it refers to. */
.default-pass-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 4px 0 14px;
  padding: 9px 12px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
  background: rgba(255, 201, 60, 0.07);
  border: 1px solid rgba(255, 201, 60, 0.28);
  border-radius: 10px;
}
.default-pass-note .i { flex: none; }
.default-pass-note .dp-tag {
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(245, 179, 66, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- Games page ---------- */

.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

.game-family {
  display: grid;
  grid-template-columns: 150px 1fr;
  overflow: hidden;
}

.game-family .card-scene { aspect-ratio: auto; height: 100%; }

.game-family .body { padding: 20px 22px; }

.game-family h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 1rem;
}

.game-family p { color: var(--muted); font-size: 0.88rem; margin-top: 8px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--purple-light);
  background: rgba(59, 130, 246, 0.07);
}

/* ---------- Rewards page ---------- */

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }

.step-card { text-align: left; position: relative; }

.step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.4rem;
  background: linear-gradient(180deg, var(--purple-light), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 8px;
}

.step-card p { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }

/* ---------- FAQ ---------- */

.faq-list { margin-top: 30px; display: grid; gap: 14px; max-width: 820px; }

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-raised);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--purple-light);
  transition: transform 0.2s;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item[open] summary { color: var(--purple-light); }

.faq-item .answer { padding: 0 22px 20px; color: var(--muted); font-size: 0.92rem; max-width: 70ch; }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border-soft);
  padding: 36px 0 44px;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.site-footer .fine {
  color: var(--muted);
  font-size: 0.78rem;
  max-width: 62ch;
}

.footer-nav { display: flex; gap: 20px; }

.footer-nav a { color: var(--muted); font-size: 0.82rem; }
.footer-nav a:hover { color: var(--text); }

/* ---------- Staff portal ---------- */

.table-wrap { overflow-x: auto; }

.staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 640px;
}

.staff-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}

.staff-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.09);
}

.staff-table tr:hover td { background: rgba(59, 130, 246, 0.05); }

.staff-table .mono { font-family: ui-monospace, Consolas, monospace; color: var(--purple-light); }

/* ---- Members table: keep it compact so the row actions never get cut off ----
   It has ten columns plus a stack of per-row buttons, which pushed it wider than
   the card — the right-hand action buttons ended up scrolled off / clipped.
   Tighter cells, the free-text columns wrap instead of widening the table, and
   the actions live in a fixed-width block of small buttons that wrap cleanly.
   .table-wrap's overflow-x stays as the fallback on a genuinely small screen. */
#membersTable { min-width: 760px; font-size: 0.8rem; }
#membersTable th, #membersTable td { padding: 9px 9px; }
/* email (6th) + facebook (7th) columns: cap width and wrap, don't stretch */
#membersTable td:nth-child(6),
#membersTable td:nth-child(7) { max-width: 150px; white-space: normal; overflow-wrap: anywhere; }
/* the actions column — bounded, so buttons wrap into a neat block */
#membersTable th:last-child,
#membersTable td:last-child { width: 172px; }
#membersTable td:last-child > div { max-width: 172px; gap: 5px; }
#membersTable td:last-child .btn {
  /* !important overrides the per-button inline padding/font in the row markup */
  padding: 6px 9px !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.3px;
  flex: 0 1 auto;
  white-space: nowrap;
}

/* glowing badge for tabs with pending work */
.tab-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #3a2500;
  font-size: 0.6rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
}

/* A tab with work waiting on staff glows and pulses gold, so an action is
   noticed without hunting through the tabs. Colour + a two-layer text-shadow
   swell, plus a gentle opacity breath, make it read as "look here". */
.tier-tab.tab-alert {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 201, 60, 0.6);
  animation: tabPulse 1.4s ease-in-out infinite;
}

.tier-tab.tab-alert .tab-count {
  animation: tabCountPulse 1.4s ease-in-out infinite;
}

@keyframes tabPulse {
  0%, 100% { text-shadow: 0 0 5px rgba(255, 201, 60, 0.35); opacity: 0.82; }
  50% {
    text-shadow: 0 0 20px rgba(255, 201, 60, 1), 0 0 34px rgba(255, 201, 60, 0.65);
    opacity: 1;
  }
}

@keyframes tabCountPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 201, 60, 0); transform: scale(1); }
  50% { box-shadow: 0 0 12px rgba(255, 201, 60, 0.9); transform: scale(1.12); }
}

/* Some people are sensitive to motion — keep the gold glow, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .tier-tab.tab-alert { animation: none; text-shadow: 0 0 14px rgba(255, 201, 60, 0.85); }
  .tier-tab.tab-alert .tab-count { animation: none; box-shadow: 0 0 10px rgba(255, 201, 60, 0.8); }
}

/* The generated redeem receipt shown in its modal — monospace so the aligned
   columns hold, wraps rather than scrolls sideways on a phone. */
.receipt-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
  background: rgba(5, 7, 15, 0.7);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 8px 0 0;
  max-height: 50vh;
  overflow: auto;
}

/* Featured Pick'em promo card on the member dashboard. */
.pickem-card {
  border: 1px solid rgba(255, 201, 60, 0.45);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.22), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(255, 140, 40, 0.18), transparent 55%),
    rgba(10, 8, 22, 0.85);
  box-shadow: 0 0 22px rgba(255, 201, 60, 0.14);
}
.pk-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 1.6px;
  color: #1a1030; background: var(--gold); padding: 3px 10px; border-radius: 999px;
}
.pk-title { margin: 10px 0 4px; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.25rem; }
.pk-spread { color: var(--muted); font-size: 0.86rem; }
.pk-reward { color: var(--gold); font-size: 0.9rem; margin-top: 4px; }
.pk-flyer { display: block; width: 100%; max-width: 440px; border-radius: 12px; margin: 10px 0 6px; border: 1px solid rgba(139, 92, 246, 0.35); }
.pk-live { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 1rem; background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.4); }
.pk-live b { font-size: 1.15rem; }
.pk-live-st { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; margin-left: 6px; }
.pk-pickrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pk-pick {
  flex: 1; padding: 16px 10px; font-size: 1.05rem; font-weight: 800; border-radius: 12px;
  background: linear-gradient(180deg, var(--purple), var(--purple-dark, #6d28d9)); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pk-pick:hover { filter: brightness(1.1); }
.pk-vs { font-weight: 800; color: var(--muted); font-size: 0.9rem; }
.pk-note { color: var(--muted); font-size: 0.76rem; margin-top: 10px; line-height: 1.4; }
.pk-picked, .pk-locked, .pk-result { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 0.95rem; }
.pk-picked { background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.4); }
.pk-locked { background: rgba(120, 120, 130, 0.14); border: 1px solid var(--border-soft); color: var(--muted); }
.pk-result.pk-won { background: rgba(52, 211, 153, 0.14); border: 1px solid rgba(52, 211, 153, 0.5); }
.pk-result.pk-lost { background: rgba(120, 120, 130, 0.12); border: 1px solid var(--border-soft); color: var(--muted); }
.pk-deadline { color: var(--muted); font-size: 0.76rem; margin-top: 8px; }
.pk-choose { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pk-choose-l { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); }
.pk-select {
  flex: 1; min-width: 160px; padding: 11px 12px; border-radius: 10px;
  background: rgba(5, 7, 15, 0.8); color: var(--text); border: 1px solid var(--border-soft); font-size: 0.9rem;
}
/* owner Pick'em form inputs (staff portal) */
.pk-in {
  padding: 10px 12px; border-radius: 9px; background: rgba(5, 7, 15, 0.75);
  color: var(--text); border: 1px solid var(--border-soft); font-size: 0.9rem; font-family: inherit;
}
.pk-in::placeholder { color: var(--muted); }

.health-log {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: rgba(5, 7, 15, 0.7);
  color: var(--muted);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.site-h {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 22px;
}

.game-row-art {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  position: relative;
}

.staff-table .stat-note { color: var(--muted); font-size: 0.75rem; }

.staff-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(5, 7, 15, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

/* ---------- Redemption modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 5, 10, 0.78);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-overlay[hidden] { display: none; }

.modal-card {
  width: min(420px, 100%);
  background: var(--bg-card);
  border: 1.5px solid var(--purple);
  border-radius: 20px;
  padding: 30px 26px;
  text-align: center;
  box-shadow: 0 0 60px rgba(59, 130, 246, 0.45);
  display: grid;
  gap: 12px;
}

.modal-card h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.modal-card .mod-what { color: var(--muted); font-size: 0.9rem; }

.modal-card .promo-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 201, 60, 0.5);
  padding: 14px 10px;
  border: 1.5px dashed rgba(255, 201, 60, 0.5);
  border-radius: 12px;
  background: rgba(255, 201, 60, 0.06);
}

.modal-card .mod-note { color: var(--muted); font-size: 0.8rem; }

.mod-actions { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }

.amount-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.amount-chip {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  color: var(--text);
  background: rgba(59, 130, 246, 0.07);
  border: 1.5px solid var(--border-soft);
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.amount-chip:hover { border-color: var(--purple); }

.amount-chip.sel {
  color: var(--gold);
  border-color: rgba(255, 201, 60, 0.7);
  background: rgba(255, 201, 60, 0.08);
  box-shadow: 0 0 14px rgba(255, 201, 60, 0.35);
}

.go-custom {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(5, 7, 15, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: center;
}

.go-custom:focus { outline: none; border-color: var(--purple); }

/* ---------- sign-up terms ---------- */

.terms-box {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(5, 7, 15, 0.6);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.terms-headline { color: var(--text); }
.terms-headline span { color: #f87171; font-weight: 800; }

.terms-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  color: var(--text);
}

.terms-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.terms-agree input {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
  flex: none;
}

/* ---------- 24/7 support chat ---------- */

#supportFab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 1px;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 20px;
  background: linear-gradient(135deg, var(--purple), #1d4ed8);
  box-shadow: 0 6px 26px rgba(59, 130, 246, 0.5);
}

#supportFab:hover { box-shadow: 0 6px 34px rgba(59, 130, 246, 0.75); }

#supportPanel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 85;
  width: min(380px, calc(100vw - 28px));
  height: min(540px, calc(100vh - 90px));
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

#supportPanel[hidden] { display: none; }

.sup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.25), rgba(29, 78, 216, 0.12));
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-display);
}

.sup-head b { font-size: 0.9rem; letter-spacing: 0.8px; }
.sup-head span { color: var(--muted); font-size: 0.72rem; font-family: ui-monospace, Consolas, monospace; }

.sup-head button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}

.sup-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sup-empty { color: var(--muted); font-size: 0.85rem; text-align: center; margin: auto 12px; }

.sup-msg {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 0.88rem;
  display: grid;
  gap: 6px;
}

.sup-msg.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.sup-msg.theirs {
  align-self: flex-start;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}

.sup-msg img, .sup-msg video { max-width: 100%; border-radius: 10px; }

.sup-msg time { font-size: 0.62rem; color: rgba(255, 255, 255, 0.55); }
.sup-msg.theirs time { color: var(--muted); }

.sup-msg p { overflow-wrap: anywhere; }

.sup-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border-soft);
}

.sup-input input[type="text"] {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(5, 7, 15, 0.6);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.sup-input input[type="text"]:focus { outline: none; border-color: var(--purple); }

.sup-attach {
  padding: 6px 14px 12px;
  font-size: 0.75rem;
  color: var(--gold);
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--bg-card);
  border: 1px solid var(--purple);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 0.88rem;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .site-header .container { gap: 14px; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 8px 9px; font-size: 0.74rem; letter-spacing: 1px; }
  .btn-ghost-pill { padding: 9px 14px; font-size: 0.74rem; }
}

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  /* Stacked hero: copy + CTAs first, emblem after, photo darkened top-down */
  .hero-art { order: 1; max-width: 420px; margin-inline: auto; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(5, 7, 15, 0.94) 0%, rgba(5, 7, 15, 0.88) 40%, rgba(5, 7, 15, 0.45) 75%, var(--bg) 100%);
  }
  .category-rail { grid-template-columns: repeat(2, 1fr); }
  .dash-layout { grid-template-columns: 1fr; }
  /* On mobile the dashboard sidebar was a stacked nav card at the top — every
     one of its links is in the ☰ menu (which is always available here), so it
     was pure duplication. Hide it and let the menu do the navigating. */
  .dash-sidebar { display: none; }
  .dash-row.cols-3, .dash-row.cols-2 { grid-template-columns: 1fr; }
  .refer-grid { grid-template-columns: 1fr; }
  .games-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .accounts-grid { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    background: #0a0f1c;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    padding: 12px 20px 20px;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: grid; place-items: center; }
  /* keep SIGN IN reachable on phones — compact, icon dropped, sits before the menu */
  .site-header .sign-in {
    display: inline-flex;
    margin-left: auto;
    padding: 9px 14px;
    font-size: 0.68rem;
    letter-spacing: 0.8px;
    gap: 0;
  }
  .site-header .sign-in svg { display: none; }
  .site-header .container { gap: 10px; }
  .join-banner { flex-direction: column; text-align: center; }
  .join-banner .btn { margin: 0; }
  /* Swipeable card rail on phones */
  .category-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: -12px;
    padding: 4px 12px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-rail::-webkit-scrollbar { display: none; }
  .category-rail .game-card {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: center;
  }
  .hero { padding-top: 28px; }
  .hero .container { gap: 28px; }
  .hero-art { max-width: 340px; }
  .hero-perks { gap: 20px; }
  .btn { padding: 14px 24px; }  /* comfortable touch targets */
  .accounts-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .account-tile .tile-body { padding: 0 10px 10px; margin-top: -48px; }
  .account-tile .btn { font-size: 0.6rem; letter-spacing: 0.5px; padding: 9px 2px; }
  .platform-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .game-family { grid-template-columns: 1fr; }
  .game-family .card-scene { aspect-ratio: 2.2 / 1; }
}

/* Phones: the member's OWN game accounts go full-width, one per row, so each
   credential line (label + value + copy button) fits on a single line. In two
   columns the tiles were too narrow and the copy button wrapped under the
   value. Only #accountsGrid — Available Games stays two-up (no credentials,
   many tiles, and a long single column there would be a lot of scrolling). */
@media (max-width: 500px) {
  #accountsGrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Application processing + 18+ ID verification (verify.html)
   ============================================================ */

.verify-card {
  max-width: 520px;
  margin: 36px auto;
  text-align: center;
}

.verify-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin: 18px 0 0;
}

.verify-lede {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 10px auto 0;
  max-width: 40ch;
}

.verify-lede strong { color: var(--text); }

/* the "this is quick" promise — people are here to play, not to queue */
.verify-clock {
  margin: 10px auto 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--cyan);
}

.verify-clock-big {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--gold);
  background: rgba(255, 201, 60, 0.09);
  border: 1px solid rgba(255, 201, 60, 0.4);
}

/* pulsing emblem: three rings breathing out from the dragon mark */
.verify-orb {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
}

.verify-orb img {
  width: 62px;
  filter: drop-shadow(0 0 18px rgba(59, 130, 246, 0.75));
  animation: verifyBreathe 2.6s ease-in-out infinite;
}

.verify-orb span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--purple);
  opacity: 0;
  animation: verifyRing 2.6s ease-out infinite;
}

.verify-orb span:nth-child(2) { animation-delay: 0.85s; }
.verify-orb span:nth-child(3) { animation-delay: 1.7s; }

.verify-orb-fast span { animation-duration: 1.5s; }
.verify-orb-fast span:nth-child(2) { animation-delay: 0.5s; }
.verify-orb-fast span:nth-child(3) { animation-delay: 1s; }
.verify-orb-fast img { animation-duration: 1.5s; }

@keyframes verifyRing {
  0%   { transform: scale(0.45); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes verifyBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* the live checklist */
.verify-steps {
  display: grid;
  gap: 10px;
  margin: 24px auto 0;
  max-width: 320px;
  text-align: left;
}

.verify-steps li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.87rem;
  color: var(--muted);
  opacity: 0.45;
  transition: opacity 0.35s ease, color 0.35s ease;
}

.verify-steps li i {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition: all 0.35s ease;
}

.verify-steps li.active { opacity: 1; color: var(--text); }
.verify-steps li.active i {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
  animation: verifyBreathe 1s ease-in-out infinite;
}

.verify-steps li.done { opacity: 1; color: var(--text); }
.verify-steps li.done i {
  border-color: var(--green);
  background: rgba(52, 211, 153, 0.16);
}

.verify-steps li.done i::after {
  content: "✓";
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--green);
}

.verify-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  margin: 26px auto 0;
  max-width: 320px;
  overflow: hidden;
}

.verify-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple), var(--cyan));
  transition: width 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.verify-badge {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--border);
  box-shadow: 0 0 34px rgba(59, 130, 246, 0.25);
}

/* "carry on from your phone" — the QR hand-off on the ID step */
.verify-handoff { margin-top: 18px; }

.handoff-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.handoff-or::before,
.handoff-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* white plate behind the code — a QR on a dark background does not scan */
.handoff-qr {
  width: 200px;
  margin: 0 auto;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  line-height: 0;
}

.handoff-qr svg { width: 100%; height: auto; display: block; }

.handoff-live {
  margin-top: 12px;
  color: var(--purple-light);
}

.verify-facts {
  display: grid;
  gap: 10px;
  margin: 22px auto 0;
  max-width: 360px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--muted);
}

.verify-facts li {
  position: relative;
  padding-left: 24px;
  line-height: 1.5;
}

.verify-facts li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 800;
}

.verify-facts b { color: var(--text); font-weight: 700; }

.verify-cta { width: 100%; margin-top: 24px; }

.verify-skip {
  display: block;
  margin: 14px auto 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.verify-skip:hover { color: var(--purple-light); }

.verify-skip-btn { background: none; border: 0; font: inherit; font-size: 0.8rem; }

.verify-off { margin-top: 12px; color: var(--gold); }

/* the camera / file drop zone */
.verify-drop {
  display: grid;
  place-items: center;
  gap: 6px;
  margin-top: 22px;
  padding: 30px 18px;
  width: 100%;
  font: inherit;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: rgba(59, 130, 246, 0.04);
  color: var(--purple-light);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.verify-drop:hover,
.verify-drop:focus-within {
  border-color: var(--purple);
  background: rgba(59, 130, 246, 0.09);
}

.verify-drop b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 1.2px;
  color: var(--text);
}

.verify-drop span { font-size: 0.76rem; color: var(--muted); line-height: 1.35; }

.verify-preview { margin-top: 16px; }

.verify-preview img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.verify-preview figcaption {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--muted);
}

.verify-readout {
  margin: 18px auto 0;
  padding: 12px 16px;
  max-width: 360px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(5, 7, 15, 0.6);
}

.verify-readout span {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}

.verify-readout b {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  color: var(--purple-light);
}

.verify-locked {
  margin: 14px auto 0;
  padding: 9px 16px;
  max-width: 26rem;
  border-radius: 12px;
  font-size: 0.82rem;
  color: var(--gold);
  background: rgba(255, 201, 60, 0.08);
  border: 1px solid rgba(255, 201, 60, 0.4);
}

.verify-queued {
  margin: 18px auto 0;
  padding: 11px 16px;
  max-width: 400px;
  border-radius: 12px;
  font-size: 0.82rem;
  color: var(--muted);
  background: rgba(52, 211, 153, 0.07);
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.verify-queued b { color: var(--green); }

.verify-namefix {
  margin: 20px auto 0;
  max-width: 380px;
  text-align: left;
}

.verify-fixlede { font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; }

/* owner-only destructive area: visually separated so it can't be mistaken for
   the rest of the form */
.danger-zone {
  margin-top: 20px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(236, 72, 153, 0.45);
  background: rgba(236, 72, 153, 0.06);
}

/* collapsed state: one quiet button, nothing alarming until it's clicked */
.danger-open {
  border-color: rgba(236, 72, 153, 0.5);
  color: var(--pink);
  padding: 9px 18px;
  font-size: 0.66rem;
}

.danger-open:hover { border-color: var(--pink); background: rgba(236, 72, 153, 0.12); }

.danger-zone h4 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 6px;
}

.danger-list {
  display: grid;
  gap: 3px;
  margin: 10px 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.danger-list li { padding-left: 16px; position: relative; }
.danger-list li::before { content: "•"; position: absolute; left: 4px; }
.danger-list .danger-money { color: var(--gold); font-weight: 600; }

.btn-danger {
  background: linear-gradient(180deg, #f0568f, #be1f5c);
  color: #fff;
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.35);
}

.btn-danger:hover { box-shadow: 0 0 30px rgba(236, 72, 153, 0.6); }
.btn-danger:disabled { opacity: 0.4; box-shadow: none; cursor: not-allowed; }

/* government ID viewer — kept in a modal so the scan never lands in a browser
   tab, history entry or back-button cache */
.idcard-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 5, 12, 0.86);
  backdrop-filter: blur(4px);
}

/* The login editor's actions stay put. The form is long — existing logins, the
   claim banner, the rules hint, the auto-create box — and on a laptop the SAVE
   button fell below the fold of the modal's own scroll box. Somebody who has
   just typed a correction reads that as "there is no way to save", which is
   exactly what happened. */
.ml-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  /* matches .idcard-box's 20px padding, so it spans the full width */
  margin: 12px -20px -20px;
  padding: 14px 20px;
  /* MUST be opaque — --panel is translucent and the form would scroll
     through it */
  background: var(--bg-card);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* One removed game account + the way back. Wraps to a stack on a phone so the
   PUT BACK button never ends up off the edge of the modal. */
.ml-removed-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.idcard-box {
  width: min(760px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.idcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.idcard-box img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(5, 7, 15, 0.6);
  margin: 10px 0;
}

.idcard-box img:not([src]) { display: none; }

/* Reason picker on the decline modal — the whole row is the target, because
   this gets used one-handed at a counter. */
.decline-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(5, 7, 15, 0.5);
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1.45;
}

.decline-opt:hover { border-color: var(--purple); }
.decline-opt input { margin-top: 3px; flex: none; }
.decline-opt:has(input:checked) {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.12);
}

/* grouped dashboard nav: Rewards + Earn XC sit under Promotions, Profile under
   Settings — far easier to scan on a phone than one long flat list */
.nav-group { display: contents; }

.dash-sidebar .nav-sub {
  display: grid;
  gap: 2px;
  margin-left: 16px;
  padding-left: 12px;
  border-left: 1px solid var(--border-soft);
}

.dash-sidebar .nav-sub a { font-size: 0.82rem; opacity: 0.85; }
.dash-sidebar .nav-sub svg { width: 16px; height: 16px; }

/* one row per setting, control on the right */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-row b { font-size: 0.92rem; }
.setting-row .tile-note { margin-top: 4px; max-width: 46ch; }

/* owner-only vault: the arcade's own back-office login per game */
.master-box {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 201, 60, 0.35);
  background: rgba(255, 201, 60, 0.05);
}

.master-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.master-head b {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.6px;
  color: var(--gold);
}

.master-box .btn { padding: 9px 14px; font-size: 0.64rem; }

/* unpaid orders a player can pick back up (payment links expire) */
.open-orders { margin-bottom: 18px; border-color: rgba(255, 157, 31, 0.4); }

.open-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(5, 7, 15, 0.5);
}

.open-order .btn { padding: 10px 20px; font-size: 0.68rem; }

/* staff queue: rows still waiting on a human decision */
.idv-open > td { background: rgba(255, 201, 60, 0.05); }
.idv-open > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* dashboard nudge for members who haven't finished the ID check */
.verify-nudge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 201, 60, 0.45);
  background: rgba(255, 201, 60, 0.07);
}

.verify-nudge p { flex: 1; min-width: 220px; font-size: 0.85rem; }
.verify-nudge b { color: var(--gold); }
.verify-nudge .btn { padding: 10px 18px; font-size: 0.66rem; }

@media (max-width: 720px) {
  .verify-card { margin: 20px auto; }
  .verify-title { font-size: 1.25rem; }
  .verify-orb { width: 112px; height: 112px; }
  .verify-orb img { width: 52px; }
  .verify-drop { padding: 26px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .verify-orb span,
  .verify-orb img,
  .verify-steps li.active i { animation: none; }
}

/* ============================================================
   Site menu — one menu on every page, built by js/main.js
   ============================================================ */

.menu-btn {
  display: grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(59, 130, 246, 0.08);
  color: var(--text);
  font-size: 1.1rem;
  line-height: 1;
}

.menu-btn:hover { border-color: var(--purple); background: rgba(59, 130, 246, 0.16); }

body.menu-open { overflow: hidden; }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(3, 5, 12, 0.72);
  backdrop-filter: blur(3px);
}

.site-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100%;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 16px 14px 28px;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  animation: menuIn 0.18s ease-out;
}

@keyframes menuIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.site-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.site-menu-head b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.4px;
}

.site-menu-head .mono { font-size: 0.72rem; color: var(--muted); }

.site-menu-close {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border-soft);
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-menu-close:hover { color: var(--text); border-color: var(--purple); }

.site-menu-panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 11px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}

.site-menu-panel a svg { width: 19px; height: 19px; flex: none; }
.site-menu-panel a:hover { color: var(--text); background: rgba(59, 130, 246, 0.1); }

.site-menu-panel a.active {
  color: #fff;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple));
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.35);
}

.site-menu-out {
  margin-top: 10px;
  padding-top: 14px !important;
  border-top: 1px solid var(--border-soft);
  border-radius: 0 !important;
  color: var(--pink) !important;
}

.site-menu-out:hover { background: rgba(236, 72, 153, 0.1) !important; }

/* Game names must fit on one line so every card is the same height. On a
   narrow two-column grid the display font is too wide for the longest names
   ("Diamond Dragon"), so tighten the type and claw back the side padding
   rather than letting them wrap or get cut off. */
@media (max-width: 720px) {
  .account-tile .tile-body { padding: 0 10px 12px; }
  .account-tile h4 { font-size: 0.8rem; letter-spacing: 0; }
}

/* Grid and flex children default to min-width:auto, so the credentials row
   (label + value + copy buttons) was forcing each card wider than its column —
   which is what pushed BUY/REDEEM off the edge on a phone. Letting these
   shrink is what keeps the buttons inside the card. */
.accounts-grid > .account-tile { min-width: 0; }
.account-tile .tile-body,
.account-tile .tile-body > * { min-width: 0; }
.cred-row { min-width: 0; }
/* keep the value from collapsing to a sliver; it wraps rather than truncates now */
.cred-row .v { min-width: 5ch; }

@media (max-width: 720px) {
  .cred-row .k { width: 30px; font-size: 0.58rem; }
  .account-tile .icon-btn { width: 26px; height: 26px; font-size: 0.72rem; }
  .account-tile .creds { gap: 4px; }
}


/* Name and date of birth on the member's own profile: shown, never editable.
   A two-column grid rather than disabled inputs — a greyed-out box invites
   clicking at it, a label and a value read as a fact. */
.pf-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
}

/* A figure that happens to be clickable. It has to keep reading as the number
   it replaced — a button chrome here would make the Members table look like a
   row of controls — so only the underline and the cursor say it is one. */
.btn-plain {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.btn-plain:hover { color: var(--purple-light); text-decoration-color: var(--purple-light); }
.btn-plain:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 4px; }

/* Low Game Credits, scrolling across the top of the staff portal. Amber rather
   than red: it is a "buy more soon", not an outage, and a red bar that lives on
   screen for days stops being read. Motion is what makes it noticed on a till
   screen nobody is staring at — and it is switched off for anyone who has asked
   for less of it. */
#creditTicker {
  /* No sticky of its own: it lives inside .site-header, which is already
     sticky at top 0 — so it rides with it and never needs a header height
     hardcoded here to drift out of step at a breakpoint. */
  margin: 0; padding: 8px 0;
  background: rgba(255, 201, 60, 0.10);
  border-top: 1px solid rgba(255, 201, 60, 0.45);
  border-bottom: 1px solid rgba(255, 201, 60, 0.45);
  overflow: hidden; white-space: nowrap;
}
#creditTicker .ticker-track {
  display: inline-block; padding-left: 100%;
  animation: xa-ticker 22s linear infinite;
  color: var(--gold); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
}
#creditTicker:hover .ticker-track { animation-play-state: paused; }
@keyframes xa-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  #creditTicker .ticker-track {
    animation: none; padding-left: 0;
    white-space: normal; display: block; padding: 0 16px;
  }
}