/* =====================================================================
 * Elysian Arcade — hub page styles
 * Relies on /assets/css/features/arcade/arcade-tokens.css for every color,
 * radius, shadow and the .arc-stage-bg / .arc-btn / .arc-card helpers.
 * Sleek modern minimal: Inter, violet accent, dark stage. Responsive.
 * ===================================================================== */

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must ALWAYS win. Without this, any element
   that also has an explicit display (e.g. .arc-stage__score { display:flex })
   silently ignores hidden — which is exactly how the stage's "Score 0" pill
   sat permanently visible on menu screens while the JS dutifully toggled a
   .hidden property that did nothing. Standard guard; protects every current
   and future hidden-toggle in the hub. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
}

.arcade-hub {
  font-family: var(--arc-font);
  color: var(--arc-ink);
  background-color: var(--arc-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ----------------------------- header ----------------------------- */
.hub-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* iOS standalone (Add to Home Screen) uses a translucent status bar, so the
     web view extends up under the notch/time/battery. Reserve the safe-area
     insets so the header (and its buttons) never sit behind the status bar.
     env() is 0 in normal browsers, so this is a no-op outside standalone. */
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    calc(clamp(16px, 4vw, 40px) + env(safe-area-inset-right, 0px))
    14px
    calc(clamp(16px, 4vw, 40px) + env(safe-area-inset-left, 0px));
  background: rgba(7, 6, 15, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--arc-card-border);
}

/* Second sticky bar: lumens / level / streak, revealed on scroll past the
   wallet. Fixed (no layout shift) and parked right under the sticky header. */
.hub-ministats {
  position: fixed;
  top: var(--hub-header-h, 58px);
  left: 0;
  right: 0;
  z-index: 29;
  background: rgba(7, 6, 15, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--arc-card-border);
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.hub-ministats.is-shown {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.hub-ministats__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 6vw, 44px);
  padding: 8px clamp(16px, 4vw, 40px);
}
.hub-ministats__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.hub-ministats__icon { color: var(--arc-gold); font-size: 13px; }
.hub-ministats__value { font-size: 17px; font-weight: 800; line-height: 1; }
.hub-ministats__label {
  color: var(--arc-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* PvP strip — its OWN full-width row UNDER the stats (phones: the stats
   row has no spare horizontal room — owner feedback 2026-08-09). Rides
   the same fixed container, so it reveals/hides with the is-shown slide.
   Click scrolls back up to the lobby panel. */
.hub-ministats__pvprow {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--arc-card-border);
  background: rgba(52, 211, 153, 0.09);
  color: inherit;
  font: 600 12px/1.3 inherit;
  font-family: inherit;
  padding: 7px 12px;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.02em;
}
.hub-ministats__pvprow:hover { background: rgba(52, 211, 153, 0.18); }
.hub-ministats__pvprow[hidden] { display: none; }

.hub-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--arc-ink);
}

.hub-header__logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 15px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ec-accent) 0%, var(--ec-accent-2) 100%);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5);
}
.hub-header__logo img { width: 80%; height: 80%; object-fit: contain; }

.hub-header__wordmark {
  font-weight: 600;
  letter-spacing: 0.2px;
  font-size: 18px;
}
.hub-header__wordmark strong { color: var(--ec-accent-2); }

.hub-header__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hub-header__link {
  color: var(--arc-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  /* element-agnostic: the class is used on <a> (Update) AND <button>
     (Add as App / mute) — reset the UA button chrome so they render identical. */
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.15s var(--arc-ease), background 0.15s var(--arc-ease);
}
.hub-header__link:hover { color: var(--arc-ink); background: var(--arc-card); }

/* On phones, "Add as App" shrinks to just its 📲 icon so the header stays
   compact next to feedback.js's ☰ menu (Admin / My reports / Suggest) and the
   always-visible Update link. (The header's mobile overflow is owned by
   feedback.js — the hub does NOT add its own hamburger.) */
@media (max-width: 640px) {
  .hub-header__addapp-label { display: none; }
}

/* ----------------------- Recent Highlights ----------------------- */
/* Compact, flashy ticker of noteworthy achievements — 3 rows collapsed,
   expands to the rest in a scroll strip. Hidden when there's nothing. */
.hub-highlights {
  margin: 0 0 20px;
  padding: 11px 14px 9px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(217, 70, 239, 0.10)), var(--arc-card, rgba(20, 18, 28, 0.72));
  border: 1px solid rgba(217, 70, 239, 0.30);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.18);
}
.hub-hl__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.hub-hl__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--arc-ink, #fff); }
.hub-hl__spark { display: inline-block; animation: hl-twinkle 2.4s ease-in-out infinite; }
@keyframes hl-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .hub-hl__spark { animation: none; } }
.hub-hl__more {
  background: none; border: 1px solid var(--arc-card-border, rgba(148, 163, 184, 0.3));
  color: var(--arc-muted, #9aa3b2); font: inherit; font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.hub-hl__more:hover { color: var(--arc-ink, #fff); border-color: rgba(217, 70, 239, 0.6); }
.hub-hl__list { list-style: none; margin: 0; padding: 0; }
.hub-hl__list--rest { margin-top: 1px; max-height: 216px; overflow-y: auto; }
.hub-hl__item {
  display: flex; align-items: center; gap: 9px; padding: 5px 2px; font-size: 13.5px; line-height: 1.3;
  border-top: 1px solid rgba(148, 163, 184, 0.09);
}
.hub-hl__item:first-child { border-top: 0; }
.hub-hl__ic {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px;
  border-radius: 8px; background: rgba(255, 255, 255, 0.05); box-shadow: 0 0 0 1px var(--hl-accent, #c4b5fd) inset;
}
.hub-hl__txt { flex: 1 1 auto; min-width: 0; color: var(--arc-ink, #e8e8f2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-hl__txt b { color: #fff; font-weight: 800; }
.hub-hl__ago { flex: 0 0 auto; color: var(--arc-muted, #9aa3b2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .hub-hl__ago { display: none; } }

/* ----------------------------- layout ----------------------------- */
.hub {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) 80px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 38px);
}

.hub-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hub-section__title {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hub-section__hint { margin: 0; color: var(--arc-muted); font-size: 14px; }

/* --------------------------- wallet strip -------------------------- */
.hub-wallet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 3vw, 24px);
  background: var(--arc-card);
  border: 1px solid var(--arc-card-border);
  border-radius: var(--arc-radius-lg);
}

.hub-wallet__id { display: flex; align-items: center; gap: 14px; min-width: 0; }

.hub-wallet__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  flex: none;
  background: linear-gradient(135deg, var(--ec-accent) 0%, var(--ec-accent-2) 100%);
  box-shadow: var(--arc-shadow);
}

.hub-wallet__name { margin: 0; font-size: 18px; font-weight: 700; }
.hub-wallet__sub { margin: 2px 0 0; color: var(--arc-muted); font-size: 13px; }

.hub-wallet__stats { display: flex; gap: 10px; flex-wrap: wrap; }

.hub-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 84px;
  padding: 12px 16px;
  border-radius: var(--arc-radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--arc-card-border);
}
.hub-stat__icon { color: var(--arc-gold); font-size: 14px; }
.hub-stat__value { font-size: 22px; font-weight: 800; line-height: 1; }
.hub-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--arc-muted);
}

.hub-wallet__xp { width: 100%; }
.hub-wallet__xp-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.hub-wallet__xp-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ec-accent) 0%, var(--ec-accent-2) 100%);
  transition: width 0.5s var(--arc-ease);
}
.hub-wallet__xp-label { margin: 6px 0 0; font-size: 12px; color: var(--arc-muted); }

/* --------------------------- daily CTA ----------------------------- */
.hub-daily {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--arc-radius-lg);
  border: 1px solid var(--arc-card-border);
  background:
    radial-gradient(600px 240px at 0% 0%, rgba(168, 85, 247, 0.22), transparent 70%),
    linear-gradient(135deg, var(--arc-surface-2) 0%, var(--arc-surface) 100%);
}
.hub-daily__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-accent-2);
}
.hub-daily__title { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.hub-daily__sub { margin: 8px 0 0; color: var(--arc-muted); font-size: 14px; max-width: 52ch; }
.hub-daily__btn { white-space: nowrap; }

/* ---------------------------- game grid ---------------------------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.hub-card {
  --card-accent: var(--ec-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--arc-radius-lg);
  border: 1px solid var(--arc-card-border);
  background:
    radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--card-accent) 22%, transparent), transparent 70%),
    var(--arc-surface);
  color: var(--arc-ink);
  font-family: inherit;
  overflow: hidden;
  transition: transform 0.15s var(--arc-ease), border-color 0.15s var(--arc-ease), box-shadow 0.15s var(--arc-ease);
}
.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-accent) 60%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--card-accent) 30%, transparent);
  outline: none;
}

/* Animated banner vignette at the top of a card (cardart.js). Drawn at a
   fixed 260x84 logical size; CSS stretches the width to the card. */
.hub-card__art {
  width: 100%;
  height: 84px;
  border-radius: 12px;
  border: 1px solid var(--arc-card-border);
  background: #0a0918;
  display: block;
}

.hub-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--card-accent) 0%, color-mix(in srgb, var(--card-accent) 50%, #c026d3) 100%);
}

.hub-card__name { margin: 0; font-size: 18px; font-weight: 700; }
.hub-card__tag { margin: 0; color: var(--arc-muted); font-size: 13px; line-height: 1.4; }

/* #1 all-time player line on the card (crown · name · score). */
.hub-card__top {
  margin: 8px 0 0; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--arc-muted); min-width: 0;
}
.hub-card__crown { color: var(--arc-gold); font-size: 12px; flex: 0 0 auto; }
.hub-card__top b {
  color: var(--arc-ink); font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-card__topscore { margin-left: auto; color: var(--card-accent); font-weight: 700; flex: 0 0 auto; }

.hub-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* CTA left, everything else (kind label + chips) pushed right. */
.hub-card__cta { font-size: 13px; font-weight: 700; color: var(--card-accent); margin-right: auto; }

.hub-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
}
.hub-badge--live { color: var(--arc-good); background: rgba(52, 211, 153, 0.14); }
.hub-badge--beta { color: var(--arc-info); background: rgba(34, 211, 238, 0.14); }
.hub-badge--hidden { color: var(--arc-faint); background: rgba(255, 255, 255, 0.06); }

/* ---- NEW ribbon (auto for games <2 weeks old) --------------------- */
.hub-new {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  padding: 3px 8px; border-radius: 999px;
  color: #0a0918; background: var(--card-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 60%, transparent);
}
.hub-card__kind {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  color: var(--card-accent); background: color-mix(in srgb, var(--card-accent) 16%, transparent);
}

/* ---- announcement banner (newest game) ---------------------------- */
.hub-announce {
  --card-accent: var(--ec-accent);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding: 14px 16px;
  border-radius: var(--arc-radius-lg);
  border: 1px solid color-mix(in srgb, var(--card-accent) 45%, var(--arc-card-border));
  background:
    radial-gradient(500px 140px at 0% 50%, color-mix(in srgb, var(--card-accent) 24%, transparent), transparent 70%),
    var(--arc-surface);
  cursor: pointer;
  transition: border-color 0.15s var(--arc-ease), box-shadow 0.15s var(--arc-ease);
}
.hub-announce:hover { border-color: color-mix(in srgb, var(--card-accent) 65%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--card-accent) 22%, transparent); }
.hub-announce__spark { font-size: 22px; color: var(--card-accent); }
.hub-announce__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-announce__text strong { font-size: 15px; }
.hub-announce__text span { font-size: 13px; color: var(--arc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-announce__play { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--card-accent); white-space: nowrap; }
.hub-announce__x { background: none; border: none; color: var(--arc-faint); font-size: 15px; cursor: pointer; padding: 4px 6px; line-height: 1; }
.hub-announce__x:hover { color: var(--arc-ink); }

/* ---- hero card (full games like Shardfall) ------------------------ */
.hub-hero-row { display: grid; gap: 16px; margin-bottom: 24px; }
.hub-card--hero {
  display: grid;
  grid-template-columns: minmax(200px, 42%) 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 6px 22px;
  padding: 22px;
  border-color: color-mix(in srgb, var(--card-accent) 45%, var(--arc-card-border));
}
.hub-card--hero .hub-card__art { grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%; min-height: 138px; }
.hub-card--hero .hub-card__name { grid-column: 2; align-self: end; font-size: 24px; }
.hub-card--hero .hub-card__tag { grid-column: 2; font-size: 14px; }
.hub-card--hero .hub-card__foot { grid-column: 2; margin-top: 10px; }
@media (max-width: 560px) {
  /* iOS Safari (real devices — unlike Chrome's device-mode emulator, which is
     still Blink) mis-handles a <button> used as a GRID container: the hero's
     grid collapsed and the art canvas covered the text, so only the art showed.
     Fall back to the SAME flex-column layout the normal cards use on the
     button — WebKit renders that correctly. The art becomes a fixed-height
     banner and the name/tagline/footer stack below it. */
  .hub-card--hero { display: flex; flex-direction: column; gap: 12px; }
  .hub-card--hero .hub-card__art { width: 100%; height: 96px; min-height: 0; }
  .hub-card--hero .hub-card__name { align-self: stretch; font-size: 22px; }
}

/* --------------------- leaderboard (flyout-only) -------------------
   Boards open from the 🏆 Ranks button on each card into a .hub-flyout;
   the old always-on panel (and its .hub-columns two-column row with the
   shop) was removed 2026-07-07. These classes render inside the flyout
   body. The shop rack (#shop) is a normal full-width hub section now. */
.hub-lb__period { display: flex; gap: 6px; margin-bottom: 14px; }

/* Board selector — only rendered for games that declare `modes` (per-mode
   leaderboards, 2026-08-17). Single-board games never see it. */
.hub-lb__modes { margin-bottom: 10px; }
.hub-lb__mode-sel {
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--arc-ink);
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid var(--arc-card-border);
  border-radius: 8px;
  padding: 7px 9px;
}
.hub-lb__mode-sel:focus-visible { outline: 2px solid var(--ec-accent-2); outline-offset: 1px; }
.hub-lb__period-btn {
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--arc-faint);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: 6px;
}
.hub-lb__period-btn.is-active { color: var(--ec-accent-2); text-decoration: underline; }

.hub-lb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-lb__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--arc-radius-sm);
}
.hub-lb__row.is-me { background: rgba(124, 58, 237, 0.16); border: 1px solid rgba(124, 58, 237, 0.4); }
.hub-lb__rank { font-weight: 800; color: var(--arc-muted); text-align: center; }
.hub-lb__row:nth-child(1) .hub-lb__rank { color: var(--arc-gold); }
.hub-lb__player { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-lb__pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.hub-lb__empty { color: var(--arc-muted); font-size: 14px; padding: 18px 4px; list-style: none; }
.hub-lb__me { margin: 12px 0 0; font-size: 13px; color: var(--arc-muted); }

/* ----------------------------- shop ------------------------------- */
/* Padding used to come from the removed .hub-columns .hub-section rule;
   the rack is a standalone arc-card now and needs its own. */
.hub-shop { padding: clamp(18px, 3vw, 24px); }
.hub-shop__grid { display: flex; flex-direction: column; gap: 10px; }

/* Brief highlight when arrived via /arcade/#shop (companion CTA deep-link). */
.hub-shop.is-linked {
  border-color: var(--ec-accent-2);
  box-shadow: 0 0 0 2px var(--ec-accent-2), 0 18px 40px color-mix(in srgb, var(--ec-accent) 35%, transparent);
  animation: hub-shop-pulse 2.4s var(--arc-ease);
}
@keyframes hub-shop-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--ec-accent-2); }
  30% { box-shadow: 0 0 0 4px var(--ec-accent-2); }
}

/* Section headers inside the shop: Cosmetics (looks only) vs Game
   Unlocks (change actual gameplay) — never let the two blur together. */
.hub-shop__group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--arc-card-border);
}
.hub-shop__group:first-child { margin-top: 0; }
.hub-shop__group-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-ink);
}
.hub-shop__group-hint { font-size: 12px; color: var(--arc-muted); }
.hub-shop__empty { margin: 0; color: var(--arc-muted); font-size: 14px; }

.hub-shop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--arc-radius-md);
  border: 1px solid var(--arc-card-border);
  background: rgba(255, 255, 255, 0.03);
}
.hub-shop__swatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
  background: linear-gradient(135deg, var(--ec-accent) 0%, var(--ec-accent-2) 100%);
}
.hub-shop__meta { min-width: 0; flex: 1; }
.hub-shop__name { margin: 0; font-weight: 700; font-size: 14px; }
.hub-shop__type { margin: 1px 0 0; font-size: 12px; color: var(--arc-faint); text-transform: capitalize; }

/* Where the cosmetic applies — loud, unmissable chip + one-line effect. */
.hub-shop__scope {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: 1px;
  color: var(--arc-info);
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.08);
  white-space: nowrap;
}
.hub-shop__desc {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--arc-muted);
}

/* Live effect preview on the card (canvas demo or themed swatch). */
.hub-shop__preview {
  width: 72px;
  height: 44px;
  border-radius: 10px;
  flex: none;
  background: #0a0918;
  border: 1px solid var(--arc-card-border);
}
.hub-shop__preview--badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--arc-gold);
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}
.hub-shop__buy {
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--ec-accent) 0%, #c026d3 100%);
}
.hub-shop__buy:disabled { opacity: 0.5; cursor: not-allowed; }
.hub-shop__buy.is-owned {
  background: transparent;
  color: var(--arc-good);
  border: 1px solid rgba(52, 211, 153, 0.4);
}
.hub-shop__buy.is-equip {
  background: transparent;
  color: var(--arc-info);
  border: 1px solid rgba(34, 211, 238, 0.4);
}
.hub-shop__buy.is-equipped {
  background: transparent;
  color: var(--arc-good);
  border: 1px solid rgba(52, 211, 153, 0.4);
}

/* "Fits every game" label beside the rack's Shop title — the rack only
   holds arcade-wide items now; per-game items sit on the game cards. */
.hub-shop__fits {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 3px;
  color: var(--arc-info);
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.08);
  white-space: nowrap;
}

/* ---- per-game action bar at the card's bottom (grid.js) ------------
   Full-width segmented buttons: 🏆 Ranks always; ✦ Shop · N joins it
   when the game has catalog items. flex-wrap + a 104px basis makes the
   pair self-adaptive: side by side on wide cards, auto-stacked (each
   full width) when the card is too narrow for both — e.g. the 2-column
   phone grid at 421–620px, where side-by-side pushed "Shop · N"
   off-screen. No breakpoint: it keys off the actual card width. */
.hub-card__actions {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* Tier 1 — the boxed primary buttons (Ranks always; Shop · N when stocked).
   flex-wrap + 104px basis keeps them side by side on wide cards and each
   full-width when the card is too narrow for both. */
.hub-card__actions-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Tier 2 — a tidy 3-up row of quiet meta chips (Rate · Favorite · Report),
   set off from the primary buttons by a hairline divider. */
.hub-card__actions-meta {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--arc-card-border);
}
.hub-card__action {
  flex: 1 1 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s var(--arc-ease), box-shadow 0.15s var(--arc-ease), color 0.15s var(--arc-ease);
}
/* Meta chips: equal thirds, quiet by default, subtle lift on hover/focus. */
.hub-card__chip {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  color: var(--arc-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s var(--arc-ease), color 0.15s var(--arc-ease), border-color 0.15s var(--arc-ease);
}
.hub-card__chip:hover,
.hub-card__chip:focus-visible {
  color: var(--arc-ink);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--arc-card-border);
  outline: none;
}
/* Favorited state: warm rose fill + tint (the ♥ glyph is already rose via
   favorites.buildLabel; this carries it to the whole chip). */
.hub-card__chip--fav.is-fav { color: #fb7185; }
.hub-card__chip--fav.is-fav:hover,
.hub-card__chip--fav.is-fav:focus-visible {
  color: #fb7185;
  background: color-mix(in srgb, #fb7185 12%, transparent);
  border-color: color-mix(in srgb, #fb7185 40%, transparent);
}
.hub-card__action--shop {
  color: var(--card-accent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 45%, transparent);
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
}
.hub-card__action--shop:hover,
.hub-card__action--shop:focus-visible {
  background: color-mix(in srgb, var(--card-accent) 26%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 40%, transparent);
  outline: none;
}
/* Ranks stays quieter than the accent-tinted Shop so the pair doesn't
   shout over the Play CTA. */
.hub-card__action--ranks {
  color: var(--arc-muted);
  border: 1px solid var(--arc-card-border);
  background: rgba(255, 255, 255, 0.04);
}
.hub-card__action--ranks:hover,
.hub-card__action--ranks:focus-visible {
  color: var(--arc-ink);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}
/* Hero card is a grid on desktop — keep the bar in the text column
   (mobile's flex fallback makes it full width automatically). */
.hub-card--hero .hub-card__actions { grid-column: 2; margin-top: 2px; }

/* ---- per-game shop flyout (shop.js openFlyout) ---------------------
   Desktop: anchored under the tapped card (JS sets left/top/width).
   Mobile (<=640px): a fixed bottom sheet over a dimmed backdrop. */
.hub-flyout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: transparent;
}
.hub-flyout {
  --card-accent: var(--ec-accent);
  position: absolute;
  z-index: 60;
  padding: 14px;
  border-radius: var(--arc-radius-lg);
  border: 1px solid color-mix(in srgb, var(--card-accent) 45%, var(--arc-card-border));
  background:
    radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 70%),
    var(--arc-surface-2, #1b1438);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 18%, transparent);
  animation: hub-flyout-in 0.18s var(--arc-ease);
}
@keyframes hub-flyout-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.hub-flyout__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.hub-flyout__titles { min-width: 0; flex: 1; }
.hub-flyout__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--arc-ink);
}
.hub-flyout__spark { color: var(--card-accent); }
.hub-flyout__hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--arc-muted);
}
.hub-flyout__x {
  flex: none;
  cursor: pointer;
  border: 1px solid var(--arc-card-border);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-size: 12px;
  color: var(--arc-muted);
  background: rgba(255, 255, 255, 0.04);
}
.hub-flyout__x:hover,
.hub-flyout__x:focus-visible {
  color: var(--arc-ink);
  border-color: color-mix(in srgb, var(--card-accent) 55%, transparent);
  outline: none;
}
.hub-flyout__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(420px, 60vh);
  overflow: auto;
  overscroll-behavior: contain;
}
@media (max-width: 640px), (pointer: coarse) {
  .hub-flyout-backdrop { background: rgba(3, 3, 8, 0.55); }
  .hub-flyout {
    position: fixed;
    left: 10px !important;
    right: 10px;
    bottom: 10px;
    top: auto !important;
    width: auto !important;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    animation-name: hub-flyout-up;
  }
  .hub-flyout__body { max-height: none; flex: 1; }
  @keyframes hub-flyout-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* Equipped founder badge (wallet name + own leaderboard row). */
.hub-wallet__badge,
.hub-lb__badge {
  color: var(--arc-gold);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.55);
}
/* Badges explain themselves on hover (desktop) / tap (touch). */
.hub-lb__badge { cursor: help; }
.hub-lb__tip {
  position: absolute;
  z-index: 200;
  max-width: 240px;
  padding: 8px 11px;
  background: #141925;
  border: 1px solid #2c3752;
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  color: #e6e9ef;
  font: 500 12px/1.4 var(--arc-font, Inter, system-ui, sans-serif);
  pointer-events: none;
}
.hub-lb__tip[hidden] { display: none; }
.hub-lb__tip b { display: block; color: var(--arc-gold, #fbbf24); font-weight: 700; margin-bottom: 2px; }

/* ---------------------------- stage -------------------------------- */
.arc-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
.arc-stage[hidden] { display: none; }

.arc-stage__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Same iOS standalone safe-area handling as .hub-header — keep the in-game
     back/forfeit button clear of the status bar. */
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(clamp(14px, 3vw, 24px) + env(safe-area-inset-right, 0px))
    12px
    calc(clamp(14px, 3vw, 24px) + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--arc-card-border);
  background: rgba(7, 6, 15, 0.6);
  backdrop-filter: blur(10px);
}
.arc-stage__back {
  cursor: pointer;
  border: 1px solid var(--arc-card-border);
  background: var(--arc-card);
  color: var(--arc-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
}
.arc-stage__back:hover { background: rgba(255, 255, 255, 0.1); }
.arc-stage__title { font-weight: 700; font-size: 16px; }
.arc-stage__score {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--arc-card);
  border: 1px solid var(--arc-card-border);
}
.arc-stage__score-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--arc-muted); }
.arc-stage__score-value { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

.arc-stage__mount { position: relative; flex: 1; min-height: 0; }
/* Absolutely pinned to the mount (which is position:relative): iOS/WebKit
   intermittently mis-resolves an iframe's percentage HEIGHT inside a flex
   item, leaving a short frame — the game's fixed-position menu then filled
   only the top ~60% of the screen until the browser was reopened. */
.arcade-game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* results overlay */
.arc-results {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 6, 15, 0.78);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.arc-results[hidden] { display: none; }
.arc-results__card {
  width: min(420px, 100%);
  padding: 32px;
  text-align: center;
  background: var(--arc-surface);
}
.arc-results__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ec-accent-2);
}
.arc-results__game {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.arc-results__top {
  margin: -8px 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--arc-gold, #fbbf24);
}
.arc-results__report {
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--arc-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.arc-results__report:hover { color: var(--arc-ink); }
.arc-results__score {
  margin: 8px 0 16px;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--ec-accent-2), var(--arc-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.arc-results__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin: 0 0 24px;
  text-align: left;
}
.arc-results__stats div { display: flex; justify-content: space-between; gap: 8px; }
.arc-results__stats dt { color: var(--arc-muted); font-size: 13px; }
.arc-results__stats dd { margin: 0; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.arc-results__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.arc-btn--ghost {
  background: transparent;
  border: 1px solid var(--arc-card-border);
  box-shadow: none;
  color: var(--arc-ink);
}
.arc-btn--ghost:hover { background: var(--arc-card); }

/* --------------------------- reward toast -------------------------- */
.arc-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 22px;
  border-radius: var(--arc-radius-lg);
  background: linear-gradient(135deg, var(--arc-surface-2) 0%, var(--arc-surface) 100%);
  border: 1px solid color-mix(in srgb, var(--arc-gold) 50%, transparent);
  box-shadow: 0 20px 60px rgba(251, 191, 36, 0.25);
  opacity: 0;
  transition: opacity 0.3s var(--arc-ease), transform 0.3s var(--arc-ease);
}
.arc-toast[hidden] { display: none; }
.arc-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.arc-toast__title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 15px;
  color: var(--arc-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}
.arc-toast__body { margin: 0; font-size: 13px; color: var(--arc-ink); }
.arc-toast__code {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed var(--arc-card-border);
}

/* ---------------------------- responsive --------------------------- */
@media (max-width: 620px) {
  .hub-wallet { flex-direction: column; align-items: stretch; }
  .hub-wallet__stats { justify-content: space-between; }
  .hub-stat { flex: 1; min-width: 0; }
  .hub-daily { flex-direction: column; align-items: flex-start; }
  .hub-daily__btn { width: 100%; }
  .hub-grid { gap: 12px; }
  .hub-card { padding: 16px; gap: 10px; }   /* tighter with the art banner */
  .hub-card__icon { width: 40px; height: 40px; font-size: 20px; }
}
/* Phones (portrait + most landscape): a single column — the game cards carry
   several action chips now and two columns is too cramped. */
@media (max-width: 600px) {
  .hub-grid { grid-template-columns: 1fr; }
}
/* Tablets / large phones in landscape: two columns. */
@media (min-width: 601px) and (max-width: 900px) {
  .hub-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- Account: wallet sign-in button + modal ---------------------------- */
.hub-auth-btn {
  margin-left: auto; align-self: center; white-space: nowrap;
  background: linear-gradient(135deg, #2dd4bf, #7c3aed);
  color: #fff; border: 0; border-radius: 999px; padding: 9px 16px;
  font-weight: 800; font-size: 13px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.hub-auth-btn[data-signedin="1"] { background: rgba(255,255,255,.08); box-shadow: none; }
.hub-auth-btn:hover { filter: brightness(1.08); }

.auth-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(4,6,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 16px;
}
.auth-overlay[hidden] { display: none; }
.auth-card {
  position: relative; width: 100%; max-width: 380px;
  background: #111624; border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.auth-x {
  position: absolute; top: 10px; right: 12px; background: none; border: 0;
  color: rgba(255,255,255,.6); font-size: 24px; line-height: 1; cursor: pointer;
}
.auth-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-tab {
  flex: 1; background: rgba(255,255,255,.05); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 9px;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.auth-tab.is-active { background: rgba(45,212,191,.16); color: #fff; border-color: rgba(45,212,191,.5); }
.auth-intro { font-size: 12.5px; color: rgba(154,163,184,.95); margin: 0 0 14px; line-height: 1.5; }
.auth-field { display: block; margin-bottom: 12px; }
.auth-field > span { display: block; font-size: 12px; color: rgba(154,163,184,.95); margin-bottom: 5px; }
.auth-field input {
  width: 100%; box-sizing: border-box; background: #0b0f1a;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  color: #fff; padding: 11px 12px; font-size: 16px;   /* 16px avoids iOS focus-zoom */
}
.auth-field input:focus { outline: none; border-color: rgba(45,212,191,.6); }
.auth-error { color: #fb7185; font-size: 12.5px; margin: 0 0 10px; }
.auth-submit { width: 100%; margin-top: 4px; }

/* Fix: the [hidden] attribute must actually hide the handle field in Sign-in
   mode (author .auth-field display:block was overriding the UA [hidden] rule). */
.auth-field[hidden] { display: none; }

/* Auth modal: forgot / back links + success note */
.auth-link { display:block; width:100%; background:none; border:0; color:#8b95a7;
  font-size:13px; cursor:pointer; margin-top:10px; text-decoration:underline; }
.auth-link:hover { color:#cbd3e1; }
.auth-note { color:#34d399; font-size:12.5px; margin:0 0 10px; }

/* =====================================================================
 * Supporter donations ("Support the arcade")
 * ---------------------------------------------------------------------
 * A quiet footer link opens a modal. Nothing here auto-shows. The donor
 * "crystal" badges reuse the leaderboard/wallet badge slots, so they only
 * need a hair of spacing so two badges never touch.
 * ===================================================================== */
/* ---- Supporter chip: bigger crystal + a tier-colored "Supporter" pill ----
   Shown on the wallet name and every leaderboard row (its own slot, so it
   sits beside any normal badge). Tier color comes from .is-<tier>. */
.hub-wallet__badge--donor, .hub-lb__badge--donor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px 1px 5px;
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
  text-shadow: none;                 /* override the gold glow from the base rule */
  border: 1px solid rgba(203,213,225,.4);
  background: rgba(203,213,225,.14);
}
.hub-wallet__badge--donor svg, .hub-lb__badge--donor svg { display: block; }
.hub-wallet__supporter, .hub-lb__supporter {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e7edf5;
  white-space: nowrap;
}
/* Tier colors (crystal + pill in sync) */
.hub-wallet__badge--donor.is-bronze,  .hub-lb__badge--donor.is-bronze  { border-color: rgba(205,127,50,.5);  background: rgba(205,127,50,.17); }
.is-bronze  .hub-wallet__supporter, .is-bronze  .hub-lb__supporter { color: #ecb07e; }
.hub-wallet__badge--donor.is-silver,  .hub-lb__badge--donor.is-silver  { border-color: rgba(203,213,225,.45); background: rgba(203,213,225,.15); }
.is-silver  .hub-wallet__supporter, .is-silver  .hub-lb__supporter { color: #e7edf5; }
.hub-wallet__badge--donor.is-gold,    .hub-lb__badge--donor.is-gold    { border-color: rgba(251,191,36,.5);  background: rgba(251,191,36,.16); }
.is-gold    .hub-wallet__supporter, .is-gold    .hub-lb__supporter { color: #fde68a; }
.hub-wallet__badge--donor.is-diamond, .hub-lb__badge--donor.is-diamond { border-color: rgba(103,232,249,.5);  background: rgba(103,232,249,.15); }
.is-diamond .hub-wallet__supporter, .is-diamond .hub-lb__supporter { color: #c8f5fc; }

/* Supporter row in Recent Highlights: a soft warm wash so it feels special. */
.hub-hl__item--sup .hub-hl__ic svg { display: block; }
.hub-hl__item--sup { background: linear-gradient(90deg, rgba(205,127,50,.08), transparent); border-radius: 10px; }

/* Footer trigger — understated, link-like, not a button. */
/* Header "\2665 Donate" — the prominent entry point (hidden until the server
   reports donations ready). Gold so it reads as special, not alarming. */
.hub-header__donate-wrap { display: contents; }
.hub-header__link--donate { color: var(--arc-gold, #fbbf24); }
.hub-header__link--donate:hover { color: #fde68a; }

.hub-support-link {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--arc-muted, #9aa1ac); font: inherit; letter-spacing: .02em;
  text-decoration: none; transition: color .15s var(--arc-ease, ease);
}
.hub-support-link:hover { color: var(--arc-gold, #fbbf24); }

/* Modal shell */
.hub-support {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.hub-support[hidden] { display: none; }
.hub-support__scrim {
  position: absolute; inset: 0; background: rgba(4,6,12,.72);
  backdrop-filter: blur(3px);
}
.hub-support__card {
  position: relative; width: 100%; max-width: 460px;
  max-height: calc(100vh - 36px); overflow-y: auto;
  padding: 26px 24px 22px; border-radius: var(--arc-radius-lg, 18px);
  background: var(--arc-card, #10141f);
  border: 1px solid var(--arc-card-border, rgba(255,255,255,.1));
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.hub-support__close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: none; border: 0; color: var(--arc-muted, #9aa1ac);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.hub-support__close:hover { color: #fff; }

.hub-support__eyebrow {
  margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--arc-gold, #fbbf24);
}
.hub-support__title { margin: 0 0 8px; font-size: 22px; color: #fff; }
.hub-support__lede {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.55;
  color: rgba(200,206,220,.92);
}

/* Tier ladder */
.hub-support__tiers { list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; gap: 6px; }
.hub-support__tier {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  opacity: .72;
}
.hub-support__tier.is-reached {
  opacity: 1; border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.07);
}
.hub-support__tier-gem { width: 28px; text-align: center; }
.hub-support__tier-name { flex: 1; font-size: 13px; font-weight: 700; color: #eef1f6; }
.hub-support__tier-req { font-size: 12.5px; font-weight: 700; color: var(--arc-muted, #9aa1ac); }

/* Current supporter status */
.hub-support__current {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(45,212,191,.08); border: 1px solid rgba(45,212,191,.28);
}
.hub-support__current-name { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
.hub-support__current-sub { margin: 2px 0 0; font-size: 12px; color: rgba(200,206,220,.85); }
.hub-support__toggle {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: 12.5px; color: rgba(200,206,220,.9); cursor: pointer;
}
.hub-support__toggle input { width: 16px; height: 16px; accent-color: #2dd4bf; }

.hub-support__give-label {
  margin: 6px 0 8px; font-size: 12px; font-weight: 700;
  color: var(--arc-muted, #9aa1ac);
}
.hub-support__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.hub-support__amt {
  flex: 1 1 0; min-width: 64px; padding: 11px 6px;
  background: rgba(255,255,255,.05); color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: 11px;
  font-size: 15px; font-weight: 800; cursor: pointer;
  transition: all .12s var(--arc-ease, ease);
}
.hub-support__amt:hover {
  border-color: var(--arc-gold, #fbbf24); background: rgba(251,191,36,.12);
}
.hub-support__amt:disabled { opacity: .5; cursor: default; }

.hub-support__custom { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hub-support__cur { color: var(--arc-muted, #9aa1ac); font-weight: 700; }
.hub-support__custom-input {
  flex: 1; min-width: 0; box-sizing: border-box; background: #0b0f1a;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  color: #fff; padding: 11px 12px; font-size: 16px;   /* 16px avoids iOS focus-zoom */
}
.hub-support__custom-input:focus { outline: none; border-color: rgba(251,191,36,.6); }
.hub-support__give { white-space: nowrap; }
.hub-support__signin { width: 100%; margin-top: 4px; }

.hub-support__note {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(200,206,220,.85);
}
.hub-support__fineprint {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.45;
  color: rgba(154,163,184,.75); text-align: center;
}

/* Lock background scroll while the modal is open. */
.hub-support-open { overflow: hidden; }

/* ---------------- Daily Full Arsenal Pass prompt (Lumen Guard) ----------
 * Custom confirm so the two choices can read "Save Pass" / "Use Pass"
 * (a native window.confirm can only show OS "OK"/"Cancel"). Sits above the
 * full-screen stage (z-index 100), mirroring the .hub-support modal shell. */
.arc-passprompt {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.arc-passprompt__scrim {
  position: absolute; inset: 0; background: rgba(4,6,12,.72);
  backdrop-filter: blur(3px);
}
.arc-passprompt__card {
  position: relative; width: 100%; max-width: 420px;
  padding: 26px 24px 22px; border-radius: var(--arc-radius-lg, 18px);
  background: var(--arc-card, #10141f);
  border: 1px solid var(--arc-card-border, rgba(255,255,255,.1));
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  text-align: center;
}
.arc-passprompt__eyebrow {
  margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--arc-gold, #fbbf24);
}
.arc-passprompt__title { margin: 0 0 10px; font-size: 22px; color: #fff; }
.arc-passprompt__lede {
  margin: 0 0 20px; font-size: 14px; line-height: 1.55;
  color: rgba(200,206,220,.9);
}
.arc-passprompt__lede strong { color: #fff; }
.arc-passprompt__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.arc-passprompt__actions .arc-btn { padding: 12px 26px; font-size: 15px; }

/* ---------------------- Daily Challenge splash ----------------------
   Shown when tapping "Play today's challenge" (daily.js). Puts TODAY's
   board front-and-centre (the scores to beat) with the all-time record
   kept clearly separate and secondary. Reuses the .hub-lb__* row styles. */
.hub-dc-overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 4, 12, 0.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: hub-dc-fade 0.16s ease;
}
@keyframes hub-dc-fade { from { opacity: 0; } to { opacity: 1; } }
.hub-dc {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  border-radius: 20px; padding: 24px 20px 20px;
  background: linear-gradient(165deg, rgba(124, 58, 237, 0.20), rgba(18, 16, 26, 0.98) 62%), var(--arc-card, #141018);
  border: 1px solid var(--arc-card-border, rgba(148, 163, 184, 0.25));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 44px -10px var(--dc-accent, #7c3aed);
  animation: hub-dc-pop 0.2s var(--arc-ease, ease);
}
@keyframes hub-dc-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.hub-dc__x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--arc-card-border, rgba(148, 163, 184, 0.25));
  color: var(--arc-muted, #9aa3b2); font-size: 15px; cursor: pointer; line-height: 1;
}
.hub-dc__x:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.hub-dc__head { text-align: center; margin: 2px 0 16px; }
.hub-dc__eyebrow {
  margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dc-accent, #c4b5fd);
}
.hub-dc__game { margin: 0; font-size: 24px; font-weight: 800; color: var(--arc-ink, #fff); }
.hub-dc__sub { margin: 6px auto 0; max-width: 34ch; font-size: 13.5px; color: var(--arc-muted, #9aa3b2); }
.hub-dc__label {
  display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px;
  font-size: 14px; font-weight: 800; color: var(--arc-ink, #fff);
}
.hub-dc__label span { font-size: 12.5px; font-weight: 600; color: var(--arc-muted, #9aa3b2); }
.hub-dc__list { max-height: 264px; overflow-y: auto; }
.hub-dc__alltime {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--arc-card-border, rgba(148, 163, 184, 0.18));
  text-align: center; font-size: 12.5px; color: var(--arc-muted, #9aa3b2);
}
.hub-dc__alltime b { color: var(--arc-ink, #e8e8f2); font-weight: 700; }
.hub-dc__actions { margin: 18px 0 0; }
.hub-dc__play {
  width: 100%; padding: 14px; font-size: 15px; font-weight: 800; border: none; color: #fff;
  background: linear-gradient(135deg, var(--dc-accent, #7c3aed), #c026d3);
  box-shadow: 0 12px 30px -8px var(--dc-accent, #7c3aed);
}
.hub-dc__play:hover { transform: translateY(-1px); }

/* ===================================================================
 * FEATURED GAMES (2026-10-07, grid.js FEATURED): the showcase right under
 * the profile strip — big animated art, a pitch, three reasons to play, a
 * pulsing Play button, a slowly turning glow ring round each card. The
 * card is a div role=button (a CSS grid on wide screens; WebKit mis-lays-out
 * a <button> used as a grid container).
 * =================================================================== */
@property --feat-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.hub-featured__title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: clamp(24px, 3.6vw, 32px); font-weight: 900; letter-spacing: -0.015em;
}
.hub-featured__word {
  background: linear-gradient(90deg, #fde68a 0%, #f59e0b 30%, #f472b6 60%, #fde68a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: hubFeatShine 5s linear infinite;
}
.hub-featured__star { color: #fbbf24; text-shadow: 0 0 14px rgba(251, 191, 36, 0.8); }
.hub-featured__hint { color: #fde68a; font-weight: 700; }
.hub-featured__list { display: grid; gap: 20px; }

.hub-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "art body" "actions actions";
  grid-template-rows: auto auto;
  gap: 18px 28px;
  padding: 22px;
  isolation: isolate;
  border: 0;
  background:
    radial-gradient(640px 320px at 100% 0%, color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 70%),
    radial-gradient(520px 260px at 0% 100%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 70%),
    var(--arc-surface-2);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--card-accent) 26%, transparent);
}
.hub-feature--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "body art" "actions actions";
}
/* The glow ring: a conic gradient through the card's color and gold, masked to a 2px border, turning. */
.hub-feature::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  padding: 2px; border-radius: inherit;
  background: conic-gradient(from var(--feat-ang), var(--card-accent), #fbbf24, #f472b6, var(--card-accent) 60%, #fde68a, var(--card-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hubFeatSpin 7s linear infinite;
  pointer-events: none;
}
.hub-feature:hover,
.hub-feature:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--card-accent) 42%, transparent);
}
.hub-feature:focus-visible { outline: 3px solid color-mix(in srgb, var(--card-accent) 80%, #fff); outline-offset: 3px; }

.hub-feature__art {
  grid-area: art;
  position: relative;
  min-height: 200px;
  display: flex; align-items: flex-end; justify-content: center;
  border-radius: 16px; overflow: hidden;
  background: var(--feat-sky, linear-gradient(180deg, #0b1630, #1e2b55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 -40px 60px rgba(0, 0, 0, 0.18);
}
.hub-feature__canvas { display: block; width: 100%; height: auto; aspect-ratio: 260 / 84; }
.hub-feature__icon { align-self: center; font-size: 64px; color: #fff; }
.hub-feature__rank {
  position: absolute; top: 10px; left: 14px; z-index: 1;
  font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 22px color-mix(in srgb, var(--card-accent) 85%, transparent);
}
.hub-feature--flip .hub-feature__rank { left: auto; right: 14px; }

.hub-feature__body { grid-area: body; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hub-feature__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-feature__ribbon {
  font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  color: #2a1600; background: linear-gradient(135deg, #fde68a, #f59e0b);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.45);
}
.hub-feature__flag {
  font-size: 12px; font-weight: 800;
  padding: 5px 10px; border-radius: 999px;
  color: var(--arc-ink);
  background: color-mix(in srgb, var(--card-accent) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 55%, transparent);
}
.hub-feature__name { margin: 0; font-size: clamp(26px, 3.4vw, 36px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.hub-feature__pitch { margin: 0; font-size: 15px; line-height: 1.5; color: #d6dbea; }
.hub-feature__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-feature__chips li {
  font-size: 13px; font-weight: 700;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.hub-feature__foot { margin-top: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.hub-feature__play {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px;
  font-size: 17px; font-weight: 900; letter-spacing: 0.01em;
  color: #170b02;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 80%, #fff), var(--card-accent));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--card-accent) 45%, transparent);
  animation: hubFeatPulse 2.2s ease-out infinite;
}
.hub-feature:hover .hub-feature__play { filter: brightness(1.08); }
.hub-feature__top { font-size: 13px; color: var(--arc-muted); }
.hub-feature__top b { color: var(--arc-ink); }
.hub-feature > .hub-card__actions { grid-area: actions; }

@keyframes hubFeatSpin { to { --feat-ang: 360deg; } }
@keyframes hubFeatShine { to { background-position: -220% center; } }
@keyframes hubFeatPulse {
  0% { box-shadow: 0 10px 26px color-mix(in srgb, var(--card-accent) 45%, transparent), 0 0 0 0 color-mix(in srgb, var(--card-accent) 60%, transparent); }
  70% { box-shadow: 0 10px 26px color-mix(in srgb, var(--card-accent) 45%, transparent), 0 0 0 16px transparent; }
  100% { box-shadow: 0 10px 26px color-mix(in srgb, var(--card-accent) 45%, transparent), 0 0 0 0 transparent; }
}

/* Phones and narrow tablets: one column, the art on top. */
@media (max-width: 760px) {
  .hub-feature, .hub-feature--flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "art" "body" "actions";
    grid-template-rows: auto auto auto;
    gap: 14px; padding: 16px;
  }
  .hub-feature__art { min-height: 150px; }
  .hub-feature__rank { font-size: 34px; }
  .hub-feature__play { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-featured__word, .hub-feature::before, .hub-feature__play { animation: none; }
}