/* FOOTYUP · component styles (in addition to hero.css)
   Sticky header, schedule, game card, modal, cart drawer, auth, FAQ, footer */

/* ════════════════════════════════════════════════════════════
   HEADER (sticky from top after hero scroll)
   ════════════════════════════════════════════════════════════ */
.fu-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  /* iOS: extend top padding into the notch area when viewport-fit=cover */
  padding: max(18px, calc(env(safe-area-inset-top) + 14px)) var(--pad-x) 18px;
  padding-left: max(var(--pad-x), env(safe-area-inset-left));
  padding-right: max(var(--pad-x), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--bone-faint);
}
.fu-header.no-blend {
  background: var(--ink);
  border-bottom-color: var(--bone-faint);
}
.fu-header .links {
  display: flex;
  gap: 0;
  justify-content: center;
}
.fu-header a.link,
.fu-header button.link {
  padding: 10px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
}
.fu-header a.link:hover,
.fu-header button.link:hover { color: var(--bone); }
.fu-header a.link.active,
.fu-header button.link.active { color: var(--bone); }
.fu-header a.link.active::after,
.fu-header button.link.active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  bottom: -19px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Decode nav labels ──────────────────────────────────────────────────────
   On :hover JS scrambles each letter through random glyphs and locks it
   left→right (hacker decrypt). The real label is an invisible ghost that
   reserves the link's final width; the live scramble overlays it absolutely so
   varying glyph widths never shift the layout. Plus an accent hairline that
   wipes in from the left under hovered (non-active) items. */
.fu-header .dc { position: relative; display: inline-block; white-space: nowrap; }
.fu-header .dc-ghost { visibility: hidden; }
.fu-header .dc-live {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
}

/* hover hairline — same orange rule the active item uses, wiped in from left */
.fu-header a.link:not(.active)::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  bottom: -19px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s cubic-bezier(0.76, 0, 0.24, 1);
}
.fu-header a.link:not(.active):hover::after { transform: scaleX(1); }

/* On-brand keyboard focus: no default blue box — show the orange hairline. */
.fu-header a.link:focus { outline: none; }
.fu-header a.link:focus-visible::after { transform: scaleX(1); }
.fu-header a.link:focus-visible { color: var(--bone); }

@media (prefers-reduced-motion: reduce) {
  .fu-header a.link:not(.active)::after { transition: none; }
}
.fu-header .right {
  display: flex; align-items: center; gap: 6px;
}
.fu-iconbtn {
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.fu-iconbtn:hover { border-color: var(--bone); }
.fu-iconbtn .badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 10px;
  border-radius: 0;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 1px solid var(--ink);
}
.fu-header .signin {
  appearance: none; border: 0; cursor: pointer;
  background: var(--bone);
  color: var(--ink);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.fu-header .signin:hover { background: var(--accent); color: var(--accent-text); }
.fu-header .signin .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.fu-header .signin:hover .pip { background: var(--ink); box-shadow: none; }

/* ════════════════════════════════════════════════════════════
   GENERIC SECTION
   ════════════════════════════════════════════════════════════ */
.section { padding: 120px var(--pad-x); border-bottom: 1px solid var(--bone-faint); }
.section.tight { padding: 80px var(--pad-x); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
}
.section-head .eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 24px;
}
.section-head .eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(40px, 5vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.section-head h2 .italic {
  font-style: italic;
  font-weight: 800;
  color: var(--accent);
}
.section-head .right {
  display: flex; align-items: center; gap: 12px;
}

/* ════════════════════════════════════════════════════════════
   GAME CARD
   ════════════════════════════════════════════════════════════ */
.gc {
  position: relative;
  background: transparent;
  border: 1px solid var(--bone-faint);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gc:hover { border-color: var(--bone); }
.gc .gc-img {
  position: relative;
  aspect-ratio: 5 / 3;
  background: var(--card-surface, #11121A);
  overflow: hidden;
  border-bottom: 1px solid var(--bone-faint);
}
/* Photo zoom on card hover — image scales inside the clipped .gc-img. */
.gc .gc-img img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.gc:hover .gc-img img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .gc .gc-img img { transition: none; }
  .gc:hover .gc-img img { transform: none; }
}
[data-theme="light"] .gc .gc-img { background: #E2DCCB; }
.gc .gc-img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 60%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 55%),
    radial-gradient(circle at 75% 35%, rgba(124,108,255,0.18), transparent 55%);
  mix-blend-mode: screen;
}
.gc .gc-img .placeholder {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,241,235,0.35);
}
.gc .gc-status {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: rgba(8,8,10,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244,241,235,0.25);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
}
.gc .gc-status .dot {
  width: 6px; height: 6px;
  background: var(--success, #2DD881);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.gc .gc-status.warn .dot { background: var(--accent); }
.gc .gc-status.full .dot { background: rgba(244,241,235,0.4); animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

.gc .gc-time {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.035em;
  color: var(--bone);
  line-height: 1;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.gc .gc-time .small { font-size: 14px; opacity: 0.6; }
.gc .gc-date {
  position: absolute;
  bottom: 19px; left: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

.gc .gc-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.gc .gc-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 6px;
  min-height: 38px;
}
.gc .gc-area {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--bone-dim);
  margin-bottom: 16px;
}
.gc .gc-meta {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 16px;
}
.fu-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--bone-faint);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
.fu-chip.dot-led {
  padding-left: 14px;
  position: relative;
}
.fu-chip.dot-led::before {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  background: var(--chip-color, var(--accent));
}

.gc .gc-foot {
  margin-top: auto;
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bone-faint);
}
.gc .gc-seats {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.gc .gc-seats b {
  color: var(--bone);
  font-weight: 900;
  font-size: 14px;
}
.gc .gc-seats b .o { color: var(--accent); }

.gc .gc-progress {
  height: 3px;
  background: var(--bone-faint);
  position: relative;
  overflow: hidden;
}
.gc .gc-progress span {
  display: block;
  height: 100%;
  background: var(--bone);
}
.gc.warn .gc-progress span { background: var(--accent); }
.gc.full .gc-progress span { background: var(--bone-faint); }

.gc .gc-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.gc .gc-price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.gc .gc-price small { font-size: 12px; color: var(--bone-dim); font-weight: 700; }

.fu-avatars { display: flex; align-items: center; gap: 8px; }
.fu-avatar-stack { display: flex; }
.fu-avatar-stack .fu-av { margin-left: -6px; border: 2px solid var(--ink); }
.fu-avatar-stack .fu-av:first-child { margin-left: 0; }
.fu-av {
  width: 26px; height: 26px;
  background: var(--av-bg, #2A2030);
  color: var(--bone);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.04em;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}
.fu-av.sq { border-radius: 0; }
.fu-av.lg { width: 40px; height: 40px; font-size: 12px; }
.fu-av.xl { width: 56px; height: 56px; font-size: 16px; }
.fu-avatar-more {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
}

/* card book button */
.gc .gc-book {
  width: 100%;
  height: 42px;
  background: var(--bone);
  color: var(--ink);
  border: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background 0.18s, color 0.18s;
}
.gc .gc-book:hover { background: var(--accent); color: var(--accent-text); }
.gc.booked .gc-book { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.gc.full .gc-book { background: transparent; color: var(--bone-dim); border: 1px solid var(--bone-faint); cursor: not-allowed; }

/* Live / ended status bar — replaces the Book button once a match kicks off.
   Same footprint as .gc-book; accent outline + pulsing dot while in progress. */
.gc .gc-live {
  width: 100%;
  height: 42px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.gc .gc-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
.gc .gc-live.ended { border-color: var(--bone-faint); color: var(--bone-dim); }

/* ════════════════════════════════════════════════════════════
   SCHEDULE
   ════════════════════════════════════════════════════════════ */
.sched-hero {
  padding: 80px var(--pad-x) 40px;
}
.sched-hero h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.sched-hero h1 .italic { font-style: italic; color: var(--accent); font-weight: 800; }
.sched-hero .sub {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--bone-dim);
  max-width: 620px;
}

.sched-controls {
  position: sticky;
  top: 73px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--pad-x);
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--bone-faint);
  flex-wrap: wrap;
}
.sched-controls .group {
  display: inline-flex;
  border: 1px solid var(--bone-faint);
}
.sched-controls .group button {
  padding: 9px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--bone-dim);
  border: 0;
  border-right: 1px solid var(--bone-faint);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.sched-controls .group button:last-child { border-right: 0; }
.sched-controls .group button.active {
  background: var(--bone);
  color: var(--ink);
}
.sched-controls .group button.accent.active { background: var(--accent); color: var(--accent-text); }
.sched-controls .filter-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--bone-faint);
  background: transparent;
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
.sched-controls .filter-btn .ct {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 900;
  font-size: 10px;
  padding: 1px 6px;
  letter-spacing: 0.04em;
}
.sched-controls .week-strip {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.sched-controls .month {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-right: 12px;
  border-right: 1px solid var(--bone-faint);
  margin-right: 4px;
}
.sched-controls .nav-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--bone-faint);
  background: transparent;
  color: var(--bone);
  display: grid; place-items: center;
  cursor: pointer;
}
.sched-controls .nav-btn:hover { border-color: var(--bone); }
.sched-controls .nav-btn.active { border-color: var(--accent); color: var(--accent); }
.sched-controls .fu-btn.roamed { border-color: var(--accent); color: var(--accent); }

/* Calendar date-picker popover (sharp-corner editorial) */
.cal-anchor { position: relative; display: inline-flex; }
.cal-backdrop { position: fixed; inset: 0; z-index: 40; }
.cal-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: 286px; padding: 14px;
  background: var(--ink); border: 1px solid var(--bone);
  animation: nmModalIn 0.16s ease;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.cal-pop .nav-btn.sm { width: 26px; height: 26px; border: 1px solid var(--bone-faint); background: transparent; color: var(--bone); display: grid; place-items: center; cursor: pointer; }
.cal-pop .nav-btn.sm:hover { border-color: var(--bone); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { margin-bottom: 4px; }
.cal-dow span { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: 0.08em; color: var(--bone-dim); padding: 4px 0; }
.cal-cell {
  aspect-ratio: 1; display: grid; place-items: center; position: relative;
  background: transparent; border: 1px solid transparent; color: var(--bone);
  font-family: 'JetBrains Mono'; font-size: 12px; cursor: pointer;
}
.cal-cell:hover { border-color: var(--bone-faint); }
.cal-cell.empty { cursor: default; }
.cal-cell.today { color: var(--accent); font-weight: 700; }
.cal-cell.sel { background: var(--accent); color: var(--accent-text); }
.cal-cell .cal-pip { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--accent); }
.cal-cell.sel .cal-pip { background: var(--accent-text); }

.day-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--bone-faint);
}
.day-cell {
  position: relative;
  padding: 16px 14px;
  border-right: 1px solid var(--bone-faint);
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  color: var(--bone);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.day-cell:last-child { border-right: 0; }
.day-cell:hover { background: rgba(244,241,235,0.04); }
.day-cell.active {
  background: var(--accent);
  color: var(--accent-text);
}
.day-cell.active .day-cell-label,
.day-cell.active .day-cell-count { color: rgba(8,8,10,0.7); }
.day-cell-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.day-cell-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.day-cell-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex; align-items: center; gap: 6px;
}
.day-cell-count .pip {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.day-cell.active .day-cell-count .pip { background: var(--ink); }

/* day section */
.day-section {
  padding: 56px var(--pad-x) 40px;
  border-bottom: 1px solid var(--bone-faint);
}
.day-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 32px;
}
.day-section-head .big {
  display: flex; align-items: baseline; gap: 24px;
}
.day-section-head .big .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 120px;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.day-section-head .big .num.today { color: var(--accent); font-style: italic; }
.day-section-head .big .info { display: flex; flex-direction: column; gap: 6px; }
.day-section-head .big .info b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.day-section-head .big .info span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.today-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.today-pill .pip { width: 6px; height: 6px; background: var(--ink); border-radius: 50%; }

.day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/* Each card is its own bordered box now (was a collapsed table grid). */
.day-grid > .gc { border: 1px solid var(--bone-faint); }
.day-grid.compact .gc .gc-img { aspect-ratio: 5 / 2; }
.day-grid.compact .gc .gc-body { padding: 14px 16px 16px; }
.day-grid.compact .gc .gc-title { font-size: 14px; min-height: 0; margin-bottom: 4px; }
.day-grid.compact .gc .gc-area { margin-bottom: 10px; font-size: 11px; }
.day-grid.compact .gc .gc-meta { margin-bottom: 12px; }

/* filter row */
.filter-row {
  padding: 28px var(--pad-x);
  display: flex; flex-wrap: wrap;
  gap: 32px;
  border-bottom: 1px solid var(--bone-faint);
}
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-group .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.filter-group .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-group .opts button {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.filter-group .opts button:hover { color: var(--bone); border-color: var(--bone); }
.filter-group .opts button.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.filter-row .filter-clear {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s, color 0.2s;
}
.filter-row .filter-clear:hover { background: var(--accent); color: var(--accent-text); }

/* MAP view */
.map-view {
  position: relative;
  margin: 32px var(--pad-x) 80px;
  min-height: 580px;
  border: 1px solid var(--bone-faint);
  background:
    repeating-linear-gradient(0deg, var(--bone-faint) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--bone-faint) 0 1px, transparent 1px 56px);
  overflow: hidden;
}
.map-view::before, .map-view::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.map-view::before {
  width: 60%; height: 60%;
  top: 20%; left: 20%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
.map-view svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.map-pin {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transform: translate(-50%, -100%);
}
.map-pin .card {
  padding: 8px 12px;
  background: var(--ink);
  border: 1px solid var(--accent);
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  margin-bottom: 6px;
}
.map-pin .card .time { color: var(--bone-dim); margin-left: 8px; font-weight: 700; font-size: 11px; }
.map-pin .dot {
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ink), 0 0 12px var(--accent);
}
.map-legend {
  position: absolute;
  bottom: 24px; left: 24px;
  padding: 18px 22px;
  background: var(--ink);
  border: 1px solid var(--bone-faint);
  max-width: 280px;
}
.map-legend .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.map-legend p {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--bone-dim);
  margin-top: 8px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   GAME MODAL
   ════════════════════════════════════════════════════════════ */
.fu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  animation: nmFadeIn 0.2s ease;
}
@keyframes nmFadeIn { from { opacity: 0; } }
.fu-modal {
  position: relative;
  width: 100%;
  max-width: 1320px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  background: var(--ink);
  border: 1px solid var(--bone-faint);
  display: grid;
  /* Give the gallery the lion's share — the photo is the hero of this modal. */
  grid-template-columns: 1.55fr 1fr;
  animation: nmModalIn 0.3s cubic-bezier(.2,.7,.3,1);
}
/* Phone: modal becomes full-height single column so gallery + body stack. */
@media (max-width: 700px) {
  .fu-modal {
    grid-template-columns: 1fr;
    max-height: 100dvh;
    height: 100dvh;
    overflow-y: auto;
  }
}
@keyframes nmModalIn { from { opacity: 0; transform: translateY(20px); } }
.fu-modal-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 5;
  width: 44px; height: 44px;
  background: rgba(8,8,10,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  display: grid; place-items: center;
  cursor: pointer;
}
.fu-modal-close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.fu-modal-gallery {
  position: relative;
  background: linear-gradient(135deg, #15161F 0%, #0E0E14 100%);
  min-height: 660px;
  display: flex; flex-direction: column;
}
.fu-modal-gallery .main {
  flex: 1; position: relative; overflow: hidden;
}
.fu-modal-gallery .main::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(124,108,255,0.18), transparent 55%);
}
.fu-modal-gallery .top-meta {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,241,235,0.6);
  z-index: 2;
}
.fu-modal-gallery .placeholder {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,241,235,0.35);
}
.fu-modal-gallery .thumbs {
  display: flex; gap: 6px;
  padding: 12px;
  background: rgba(8,8,10,0.4);
}
.fu-modal-gallery .thumb {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #1F1F2C, #15161F);
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.5;
}
.fu-modal-gallery .thumb.active { border-color: var(--accent); opacity: 1; }

.fu-modal-body {
  padding: 32px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 24px;
}
.fu-modal-body::-webkit-scrollbar { width: 6px; }
.fu-modal-body::-webkit-scrollbar-thumb { background: var(--bone-faint); }

.fu-modal-h h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.fu-modal-h .meta {
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.fu-modal-h .meta .time {
  color: var(--accent);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.fu-section h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 12px;
}
.fu-section h4::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--accent);
}
.fu-section p { font-size: 14px; color: var(--bone-dim); line-height: 1.55; }
.fu-section .addr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--bone);
}

.infra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--bone-faint);
  border-left: 1px solid var(--bone-faint);
}
.infra-grid .item {
  padding: 14px;
  border-right: 1px solid var(--bone-faint);
  border-bottom: 1px solid var(--bone-faint);
  display: flex; align-items: center; gap: 10px;
}
.infra-grid .item .ico {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--accent);
}
.infra-grid .item .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1.15;
}
.infra-grid .item .lbl small {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-dim);
  margin-top: 2px;
}

.participants {
  display: flex; flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid var(--bone-faint);
}
.participants::-webkit-scrollbar { width: 4px; }
.participants::-webkit-scrollbar-thumb { background: var(--bone-faint); }
.participant {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bone-faint);
}
.participant:last-child { border-bottom: 0; }
.participant .name {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bone);
  text-transform: uppercase;
}
.participant .rating {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  padding: 2px 7px;
  border: 1px solid var(--accent);
}

.modal-price {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--bone-faint);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.modal-price .price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1;
}
.modal-price .price small { font-size: 16px; color: var(--bone-dim); font-weight: 700; }
.modal-price .seats {
  margin-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.modal-price .book-btn {
  height: 56px;
  padding: 0 28px;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 14px;
  transition: background 0.2s, color 0.2s;
}
.modal-price .book-btn:hover { background: var(--bone); color: var(--ink); }
/* Live / ended status in the match modal — replaces the Book CTA after kickoff. */
.modal-price .book-btn.live {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  cursor: default;
}
.modal-price .book-btn.live .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
.modal-price .book-btn.live.ended { border-color: var(--bone-faint); color: var(--bone-dim); }

/* ════════════════════════════════════════════════════════════
   CART DRAWER
   ════════════════════════════════════════════════════════════ */
.fu-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: 90;
  animation: nmFadeIn 0.2s;
}
.fu-cart {
  position: fixed;
  top: 0; right: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  background: var(--ink);
  border-left: 1px solid var(--bone-faint);
  z-index: 91;
  display: flex; flex-direction: column;
  animation: nmSlideIn 0.3s cubic-bezier(.2,.7,.3,1);
}
@keyframes nmSlideIn { from { transform: translateX(100%); } }
.fu-cart-head {
  padding: 24px;
  border-bottom: 1px solid var(--bone-faint);
  display: flex; align-items: center; justify-content: space-between;
}
.fu-cart-head h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.fu-cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.fu-cart-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 24px;
  text-align: center;
}
.fu-cart-empty .frame {
  width: 96px; height: 96px;
  border: 1px solid var(--bone-faint);
  display: grid; place-items: center;
  margin-bottom: 28px;
  position: relative;
}
.fu-cart-empty .frame::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--bone-faint);
  animation: nmSpin 30s linear infinite;
}
@keyframes nmSpin { to { transform: rotate(360deg); } }
.fu-cart-empty h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.fu-cart-empty p { color: var(--bone-dim); margin-top: 10px; font-size: 14px; max-width: 280px; }
.fu-cart-empty .empty-cta {
  margin-top: 22px;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.fu-cart-item {
  padding: 18px 0;
  border-top: 1px solid var(--bone-faint);
}
.fu-cart-item:last-child { border-bottom: 1px solid var(--bone-faint); }
.fu-cart-item .top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.fu-cart-item .title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
}
.fu-cart-item .when {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--bone-dim);
}
.fu-cart-item .price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.fu-cart-item .actions {
  margin-top: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.fu-cart-item .x-btn {
  background: transparent;
  border: 0;
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.fu-cart-item .x-btn:hover { color: var(--accent); }

.fu-cart-foot {
  padding: 24px;
  border-top: 1px solid var(--bone-faint);
}
.fu-cart-totals { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.fu-cart-totals > div {
  display: flex; justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.fu-cart-totals .total {
  padding-top: 12px;
  border-top: 1px solid var(--bone-faint);
  color: var(--bone);
  font-weight: 900;
  font-size: 14px;
}
.fu-cart-totals .total b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.fu-cart-foot .pay-btn {
  width: 100%; height: 56px;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
}
.fu-cart-foot .pay-btn:hover { background: var(--bone); color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   AUTH MODAL
   ════════════════════════════════════════════════════════════ */
.fu-auth {
  width: 100%;
  max-width: 460px;
  background: var(--ink);
  border: 1px solid var(--bone-faint);
  animation: nmModalIn 0.3s cubic-bezier(.2,.7,.3,1);
  position: relative;
}
.fu-auth-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--bone-faint);
  display: flex; align-items: center; justify-content: space-between;
}
.fu-auth-head h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.fu-auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--bone-faint);
}
.fu-auth-tabs button {
  flex: 1;
  padding: 16px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--bone-faint);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  cursor: pointer;
}
.fu-auth-tabs button:last-child { border-right: 0; }
.fu-auth-tabs button.active { background: var(--bone); color: var(--ink); }

.fu-auth-body {
  padding: 28px 24px;
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 420px;
}
/* Pin the submit toward the bottom of the fixed-height body so toggling
   Sign in ↔ Sign up never shifts it. The variable middle content (login: two
   checkboxes; signup: confirm-password field) is absorbed by the flexible gap
   above the button. The footer below it (forgot link + fine print) is kept a
   constant height in the JSX — forgot is always rendered, hidden in signup. */
.fu-auth-body .fu-btn.full { margin-top: auto; }
.fu-auth-fields {
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 252px;
}
.fu-field { display: flex; flex-direction: column; gap: 6px; }
.fu-field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.fu-field input {
  height: 48px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--edit-line);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
}
.fu-field input:focus { border-color: var(--accent); }
/* Invalid field — distinct red (not the accent used for focus) + faint tint so
   it reads as "wrong" even while focused. */
.fu-field input.invalid,
.fu-field input.invalid:focus { border-color: #FF2E63; background: rgba(255, 46, 99, 0.07); }
/* Inline validation message under a field + matching red on the phone combo
   (whose inputs live in FuPhone, not a plain .fu-field input). */
.fu-field-err {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #FF2E63;
}
.fu-field.has-error .fu-phone-cc,
.fu-field.has-error .fu-phone-num { border-color: #FF2E63; background: rgba(255, 46, 99, 0.07); }
/* Read-only / disabled fields aren't editable — keep the faint hairline. */
.fu-field input[readonly],
.fu-field input:disabled { border-color: var(--bone-faint); }

/* ── Custom select / date picker (FuSelect / FuDate) ──────────────
   Mirrors the admin combo so site dropdowns + the date field match the site's
   own inputs instead of OS-native popups. --ink/--bone swap per theme, so the
   popover is correct in both dark and light with no per-theme overrides. */
.fu-combo { position: relative; }
.fu-combo-trigger {
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 0 38px 0 14px;
  background: transparent;
  border: 1px solid var(--edit-line);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  transition: border-color 0.2s;
}
.fu-combo-trigger:hover,
.fu-combo-trigger:focus { border-color: var(--accent); }
.fu-combo-trigger .ph { color: var(--bone-dim); }
.fu-combo-caret {
  position: absolute;
  top: 50%; right: 14px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--bone-dim);
  cursor: pointer;
}
.fu-combo-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--bone);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: fuComboIn 0.14s ease;
}
@keyframes fuComboIn { from { opacity: 0; transform: translateY(-4px); } }
.fu-combo-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bone-faint);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.fu-combo-opt:last-child { border-bottom: 0; }
.fu-combo-opt:hover { background: var(--surface-hover); }
.fu-combo-opt.sel { color: var(--accent); }
.fu-combo-menu::-webkit-scrollbar { width: 8px; }
.fu-combo-menu::-webkit-scrollbar-thumb { background: var(--bone-faint); }

/* calendar (FuDate) */
.fu-date .fu-combo-menu,
.fu-cal { right: auto; min-width: 268px; padding: 12px; max-height: none; overflow: visible; }
.fu-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fu-cal-head span {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone);
}
.fu-cal-head button {
  width: 28px; height: 28px;
  border: 1px solid var(--bone-faint); background: transparent;
  color: var(--bone); cursor: pointer; font-size: 14px;
}
.fu-cal-head button:hover { border-color: var(--accent); color: var(--accent); }
.fu-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.fu-cal-dow span {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: 0.1em; color: var(--bone-dim);
}
.fu-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fu-cal-day {
  height: 32px; border: 1px solid transparent; background: transparent;
  color: var(--bone); font-family: var(--font-sans); font-size: 13px; cursor: pointer;
}
.fu-cal-day:hover { border-color: var(--bone-faint); }
.fu-cal-day.today { color: var(--accent); }
.fu-cal-day.sel { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }

/* typed dd mm yyyy field */
.fu-date-input { font-variant-numeric: tabular-nums; }
.fu-date-input::placeholder { color: var(--bone-dim); }

/* month + year pickers in the calendar header */
.fu-cal-sel { display: flex; align-items: center; gap: 6px; }
.fu-cal-pick { position: relative; }
.fu-cal-pick > button {
  display: inline-flex; align-items: center; gap: 5px;
  width: auto; height: auto; /* override the 28×28 arrow-button sizing in .fu-cal-head button */
  background: transparent; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone);
  padding: 5px 9px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.fu-cal-pick > button:hover { border-color: var(--bone-faint); color: var(--accent); }
.fu-cal-pick > button .cr { font-size: 8px; color: var(--bone-dim); }
.fu-cal-menu {
  position: absolute;
  top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 130px; max-height: 220px; overflow-y: auto;
  background: var(--ink); border: 1px solid var(--bone);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); z-index: 70;
  animation: fuComboIn 0.14s ease;
}
.fu-cal-menu .fu-combo-opt { text-align: center; padding: 9px 14px; }
.fu-cal-menu::-webkit-scrollbar { width: 8px; }
.fu-cal-menu::-webkit-scrollbar-thumb { background: var(--bone-faint); }

/* phone field — country dial-code selector + number */
.fu-phone { position: relative; display: flex; }
.fu-phone-cc {
  display: inline-flex; align-items: center; gap: 7px;
  height: 48px; padding: 0 12px;
  background: transparent;
  border: 1px solid var(--edit-line); border-right: 0;
  color: var(--bone); cursor: pointer;
  font-family: var(--font-sans); font-size: 14px;
  flex-shrink: 0; transition: border-color 0.2s;
}
.fu-phone-cc:hover { border-color: var(--accent); }
.fu-phone-cc .flag { font-size: 17px; line-height: 1; }
.fu-phone-cc .dial { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--bone-dim); }
.fu-phone-cc .cr { font-size: 9px; color: var(--bone-dim); }
.fu-phone-num {
  flex: 1; min-width: 0;
  height: 48px; padding: 0 14px;
  background: transparent;
  border: 1px solid var(--edit-line);
  color: var(--bone);
  font-family: var(--font-sans); font-size: 14px; outline: none;
  transition: border-color 0.2s;
}
.fu-phone-num:focus { border-color: var(--accent); }
.fu-phone-num::placeholder { color: var(--bone-dim); }
.fu-phone-menu {
  position: absolute; z-index: 70;
  top: calc(100% + 4px); left: 0;
  width: 320px; max-width: min(320px, 86vw);
  background: var(--ink); border: 1px solid var(--bone);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  animation: fuComboIn 0.14s ease;
}
.fu-phone-search { padding: 8px; border-bottom: 1px solid var(--bone-faint); }
.fu-phone-search input {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--surface-faint, rgba(244,241,235,0.03));
  border: 1px solid var(--edit-line); color: var(--bone);
  font-family: var(--font-sans); font-size: 13px; outline: none;
}
.fu-phone-search input:focus { border-color: var(--accent); }
.fu-phone-list { max-height: 260px; overflow-y: auto; }
.fu-phone-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 14px;
  background: transparent; border: 0; border-bottom: 1px solid var(--bone-faint);
  color: var(--bone); cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 13px;
  transition: background 0.12s;
}
.fu-phone-opt:hover { background: var(--surface-hover, rgba(244,241,235,0.05)); }
.fu-phone-opt.sel { color: var(--accent); }
.fu-phone-opt .flag { font-size: 17px; line-height: 1; flex-shrink: 0; }
.fu-phone-opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-phone-opt .dial { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--bone-dim); }
.fu-phone-empty { padding: 16px; text-align: center; color: var(--bone-dim); font-size: 13px; }
.fu-phone-list::-webkit-scrollbar { width: 8px; }
.fu-phone-list::-webkit-scrollbar-thumb { background: var(--bone-faint); }

/* ── New-build "refresh" bar (see app.jsx version poller) ───────── */
.fu-update-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: fuBarIn 0.3s cubic-bezier(.2, .7, .3, 1);
}
@keyframes fuBarIn { from { transform: translateY(100%); } }
.fu-update-bar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--bone);
  border: 0;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fu-update-bar button:hover { opacity: 0.88; }

.fu-otp { display: flex; gap: 8px; justify-content: center; }
.fu-otp input {
  width: 48px; height: 60px;
  background: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0;
  outline: none;
}
.fu-otp input:focus { border-color: var(--accent); }

.fu-checkbox {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--bone-dim);
  cursor: pointer;
}
.fu-checkbox input { accent-color: var(--accent); width: 16px; height: 16px; }
.fu-fine {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--bone-dim);
  line-height: 1.55;
}

.fu-btn {
  height: 52px;
  padding: 0 24px;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  transition: background 0.2s, color 0.2s;
}
.fu-btn:hover { background: var(--bone); color: var(--ink); }
.fu-btn.ghost {
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--bone-faint);
}
.fu-btn.ghost:hover { border-color: var(--bone); background: transparent; color: var(--accent); }
.fu-btn.full { width: 100%; }
.fu-btn.lg { height: 60px; font-size: 14px; }

.fu-link {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
}
.fu-link:hover { color: var(--bone); }

.fu-success {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px;
  padding: 16px 0;
}
.fu-success .seal {
  position: relative;
  width: 110px; height: 110px;
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.04em;
}
.fu-success .seal::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--accent);
  animation: nmSpin 18s linear infinite;
}
.fu-success h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.95;
}
.fu-success p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--bone-dim);
  max-width: 320px;
  line-height: 1.55;
}

/* confetti */
.fu-confetti i {
  position: absolute;
  width: 6px; height: 12px;
  left: 50%; top: 30%;
}
@keyframes nmConfetti {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, -200px))) rotate(720deg); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   HOME — supplementary sections
   ════════════════════════════════════════════════════════════ */
.home-games {
  padding: 120px var(--pad-x);
  border-bottom: 1px solid var(--bone-faint);
}
.home-slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 360px;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad-x));
  padding: 0 var(--pad-x);
}
.home-slider::-webkit-scrollbar { display: none; }
.home-slider > .gc {
  scroll-snap-align: start;
  border: 1px solid var(--bone-faint);
}

/* "What's Included" — numbered card grid */
.section-included {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 3.2fr);
  gap: 48px;
  align-items: start;
}
.included-intro {
  position: sticky; top: 96px;
  display: flex; flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.included-intro .eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.included-intro .eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
}
.included-intro h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(32px, 3.4vw, 60px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  word-break: break-word;
}
.included-intro h2 .italic {
  font-style: italic;
  font-weight: 800;
  font-size: 1.08em;
  color: var(--accent);
}
.included-intro .included-lede {
  max-width: 320px;
  font-family: var(--font-sans);
  color: var(--bone-dim);
  font-size: 14px;
  line-height: 1.6;
}
.fu-btn.included-cta {
  align-self: flex-start;
  background: var(--bone);
  color: var(--ink);
}
.fu-btn.included-cta:hover {
  background: var(--accent);
  color: var(--accent-text);
}

/* Editorial "spec sheet": one hairline grid, sharp corners, and a giant
   ghosted Archivo numeral as the hero of each cell — the brand's "numbers as
   iconography" move. Theme-aware (works dark + light). The outer border +
   per-cell right/bottom borders draw clean internal dividers with no double
   lines; the nth-child rules strip the outer edges (fixed 8-item, 4-col grid). */
.included-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--bone-faint);
  border-left: 1px solid var(--bone-faint);
}
.included-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  padding: 26px 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  border-right: 1px solid var(--bone-faint);
  border-bottom: 1px solid var(--bone-faint);
  transition: background 0.35s ease, transform 0.4s cubic-bezier(.2,.7,.3,1);
}
/* Signature top-left hairline tick (the eyebrow motif), one per card. Brightens
   to accent on hover. */
.included-card::before {
  content: '';
  position: absolute;
  top: 0; left: 22px;
  width: 24px; height: 2px;
  background: var(--bone-faint);
  z-index: 2;
  transition: background 0.35s ease, width 0.4s cubic-bezier(.2,.7,.3,1);
}
/* Full accent frame drawn on hover — independent of the shared grid hairlines,
   so the whole active card outlines crisply in accent. */
.included-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.35s ease;
}
.included-card:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  transform: translateY(-3px);
  z-index: 4;
}
.included-card:hover::before { background: var(--accent); width: 36px; }
.included-card:hover::after { opacity: 1; }
/* Giant outline numeral — bleeds off the top-right, fills accent on hover. */
.included-card-num {
  position: absolute;
  top: -14px; right: 10px;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 104px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone-faint);
  pointer-events: none;
  transition: -webkit-text-stroke-color 0.35s ease, transform 0.5s cubic-bezier(.2,.7,.3,1);
}
/* Hover fills the outline numeral solid accent (was just a stroke recolour). */
.included-card:hover .included-card-num {
  color: var(--accent);
  -webkit-text-stroke-width: 0;
  transform: translateY(4px) scale(1.04);
}
.included-card-icon {
  /* Icons read --ink-inv for their non-accent strokes; bind it to the theme
     foreground so they work on both the dark and light page background. On
     hover --ink-inv flips to accent so the whole glyph goes orange. */
  --ink-inv: var(--bone);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid var(--bone-faint);
  margin-bottom: auto;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.included-card-icon svg { width: 100%; height: 100%; display: block; }
.included-card:hover .included-card-icon {
  --ink-inv: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.included-card-body {
  display: flex; flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.included-card-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--bone);
  text-transform: uppercase;
}
.included-card-body p {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--bone-dim);
}

/* Responsive: 4 → 2 → 1 columns, and rebuild the hairline edges per layout. */
@media (max-width: 1100px) {
  .section-included { grid-template-columns: 1fr; }
  .included-intro { position: static; }
}
@media (max-width: 760px) {
  .included-grid { grid-template-columns: repeat(2, 1fr); }
  .included-card { min-height: 200px; padding: 22px 18px; }
  .included-card-num { font-size: 84px; }
}
@media (max-width: 460px) {
  .included-grid { grid-template-columns: 1fr; }
}

/* ── Social section: scroll-scrubbed video BACKGROUND ──────────────────
   The section is a normal-flow feature-split (page scrolls as usual, no pin).
   The video is a full-bleed background behind the two columns; the JS
   (scroll-video.jsx) drives its currentTime from the section's position in the
   viewport — scroll down plays forward, up plays backward. A dark scrim over
   the video keeps the text legible; the phone mockup sits on top on the right. */
.svid-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.svid-section > .svid-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  background: #0E0E14;   /* fill before poster/video paints */
}
.svid-section > .svid-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Darken left→right so the text column reads; lighter on the right where the
     phone + footage show through. Plus a top/bottom vignette for edge contrast. */
  background:
    linear-gradient(90deg, rgba(8,8,10,0.86) 0%, rgba(8,8,10,0.62) 40%, rgba(8,8,10,0.30) 72%, rgba(8,8,10,0.18) 100%),
    linear-gradient(180deg, rgba(8,8,10,0.4) 0%, transparent 24%, transparent 76%, rgba(8,8,10,0.4) 100%);
}
/* Force light ink on the dark scrim regardless of page theme. */
.svid-section .svid-text { position: relative; z-index: 1; color: #F4F1EB; }
.svid-section .svid-text .social-eyebrow { color: rgba(244,241,235,0.72); }
.svid-section .svid-text h2 { color: #F4F1EB; }
.svid-section .svid-text p { color: rgba(244,241,235,0.82); }
.svid-section .svid-text .social-handle { color: rgba(244,241,235,0.55); }
.svid-section .svid-phone { position: relative; z-index: 1; }

/* feature row split */
.feature-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 80px;
  padding: 120px var(--pad-x);
  border-bottom: 1px solid var(--bone-faint);
}
.feature-split h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.feature-split h2 .italic { font-style: italic; color: var(--accent); font-weight: 800; }
.feature-split p {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--bone-dim);
  line-height: 1.55;
  max-width: 440px;
}
.feature-split p + p { margin-top: 16px; }

/* ── iPhone 17 Pro Max mockup (Social section) ──────────────────
   .iphone-rail = brushed-titanium edge   ::before = black bezel ring
   .iphone-screen = the display (holds .ip-shot <img>, clipped)
   .ip-island = Dynamic Island   .ip-btn = side buttons
   .ip-ph* = score placeholder shown until the real screenshot lands
   ─────────────────────────────────────────────────────────────── */
.social-phone-col { display: flex; justify-content: center; }
.iphone {
  perspective: 1600px;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,0.45));
}
.iphone-rail {
  position: relative;
  width: min(300px, 76vw);
  aspect-ratio: 1320 / 2868; /* real 17 Pro Max display ratio */
  border-radius: 58px;
  padding: 10px;
  /* brushed-titanium rail: diagonal light sweep across the metal */
  background: linear-gradient(135deg,
    #5b5b60 0%, #2a2a2c 22%, #79797f 40%, #2f2f31 55%,
    #1a1a1c 75%, #57575b 92%, #2c2c2e 100%);
  box-shadow:
    0 1px 1px rgba(255,255,255,.45) inset,
    0 -1px 1px rgba(0,0,0,.6) inset;
}
.iphone-rail::before { /* black bezel between rail and screen */
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 48px;
  background: #050505;
  z-index: 1;
}
.iphone-screen {
  position: absolute;
  inset: 13px;
  border-radius: 46px;
  overflow: hidden;
  z-index: 2;
  background: linear-gradient(180deg, #16100b, #090909);
}
.ip-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 26px;
  background: #000;
  border-radius: 16px;
  z-index: 5;
}
.ip-island::after { /* front camera dot */
  content: '';
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c2c3a, #050506 70%);
  box-shadow: 0 0 0 1px rgba(70,70,90,.35) inset;
}
.ip-btn {
  position: absolute;
  width: 3px;
  background: linear-gradient(180deg, #55555a, #232325);
  border-radius: 2px;
  z-index: 0;
}
.ip-action { left: -3px; top: 22%; height: 30px; }
.ip-volup  { left: -3px; top: 34%; height: 52px; }
.ip-voldn  { left: -3px; top: 48%; height: 52px; }
.ip-power  { right: -3px; top: 31%; height: 80px; }
.ip-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 36px 26px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,74,0,.5), transparent 60%),
    linear-gradient(180deg, #1c140d, #0b0b0b);
}
.ip-ph-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(255,74,0,.32) 0%, transparent 55%);
  pointer-events: none;
}
.ip-ph-chip {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #FF4A00 0%, #FF8A3D 60%, #FFCB6B 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  color: #08080A;
  position: relative; z-index: 1;
}
.ip-ph-score {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #08080A;
  position: relative; z-index: 1;
}
.ip-ph-tag {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent);
  position: relative; z-index: 1;
}

/* ─────── Social section (Instagram CTA + IG phone mockup) ─────── */
.feature-social .social-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 24px;
}
.feature-social .social-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
}
.social-cta-row {
  display: flex; align-items: center;
  gap: 20px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.fu-btn.social-cta {
  background: var(--accent);
  color: var(--accent-text);
  height: 52px;
  padding: 0 22px;
  gap: 10px;
}
.fu-btn.social-cta:hover {
  background: var(--ink);
  color: var(--bone);
}
.social-handle {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--bone-dim);
}


/* promo split */
.promo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--bone-faint);
  border-left: 1px solid var(--bone-faint);
}
.promo-row a {
  position: relative;
  padding: 40px 36px 32px;
  border-right: 1px solid var(--bone-faint);
  border-bottom: 1px solid var(--bone-faint);
  text-decoration: none;
  color: var(--bone);
  display: flex; flex-direction: column;
  min-height: 280px;
  transition: background 0.2s;
}
.promo-row a:hover { background: rgba(244,241,235,0.04); }
.promo-row a.accent { background: var(--accent); color: var(--accent-text); }
.promo-row a.accent:hover { background: color-mix(in srgb, var(--accent) 88%, white); }
.promo-row .eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.promo-row a.accent .eyebrow { color: rgba(8,8,10,0.6); }
.promo-row h3 {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 0.92;
  text-transform: uppercase;
  max-width: 320px;
}
.promo-row p {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 360px;
}
.promo-row a.accent p { color: rgba(8,8,10,0.75); }
.promo-row .arrow {
  position: absolute;
  right: 32px; bottom: 28px;
  width: 44px; height: 44px;
  border: 1px solid var(--bone-faint);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--bone);
  transition: transform 0.25s;
}
.promo-row a.accent .arrow { border-color: rgba(8,8,10,0.3); color: var(--ink); }
.promo-row a:hover .arrow { transform: rotate(-45deg); }

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 80px;
}
.faq-list { display: flex; flex-direction: column; }
.faq-row {
  border-top: 1px solid var(--bone-faint);
  padding: 20px 0;
  cursor: pointer;
}
.faq-row:last-child { border-bottom: 1px solid var(--bone-faint); }
.faq-row .head {
  display: flex; align-items: center; gap: 20px;
  position: relative;
}
.faq-row .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--bone-dim);
  width: 30px;
}
.faq-row .q {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.faq-row .toggle {
  width: 28px; height: 28px;
  border: 1px solid var(--bone-faint);
  display: grid; place-items: center;
  color: var(--bone);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.3s;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}
.faq-row.open .toggle {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  transform: rotate(45deg);
}
.faq-row .a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding-left: 50px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--bone-dim);
  line-height: 1.6;
}
.faq-row.open .a { max-height: 200px; padding-top: 14px; }

/* CTA banner */
.cta-banner {
  padding: 120px var(--pad-x);
  text-align: center;
  border-bottom: 1px solid var(--bone-faint);
  position: relative;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 80% at 50% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.cta-banner h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(56px, 8vw, 144px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.cta-banner h2 .italic { font-style: italic; color: var(--accent); font-weight: 800; }
.cta-banner p {
  margin: 28px auto 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--bone-dim);
  max-width: 480px;
  position: relative;
}
.cta-banner .ctas {
  margin-top: 36px;
  display: inline-flex;
  gap: 12px;
  position: relative;
}

/* footer */
.fu-footer {
  padding: 80px var(--pad-x) 32px;
}
.fu-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 56px;
}
.fu-footer h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 18px;
}
.fu-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fu-footer a {
  color: var(--bone-dim);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  transition: color 0.2s;
}
.fu-footer a:hover { color: var(--bone); }
.fu-footer .socials { display: flex; gap: 4px; margin-top: 16px; }
.fu-footer .socials a {
  width: 38px; height: 38px;
  border: 1px solid var(--bone-faint);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.fu-footer .socials a:hover { border-color: var(--accent); color: var(--accent); }
.fu-footer .store-badges {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}
.fu-footer .store-badges a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--bone-faint);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
}
.fu-footer .store-badges a:hover { border-color: var(--accent); color: var(--accent); }
.fu-footer-legal {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--bone-faint);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* override the previous footer */
.app > footer { display: none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .home-slider { grid-auto-columns: 320px; }
  .day-grid { grid-template-columns: repeat(2, 1fr); }
  .section-included { grid-template-columns: 1fr; gap: 32px; }
  .included-intro { position: static; }
  .included-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-split { grid-template-columns: 1fr; gap: 40px; }
  .promo-row { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .fu-modal { grid-template-columns: 1fr; max-height: calc(100vh - 48px); overflow-y: auto; }
  .fu-modal-gallery { min-height: 320px; }
  .fu-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .fu-header { grid-template-columns: auto auto; gap: 16px; padding: 14px var(--pad-x); }
  .fu-header .links {
    grid-column: 1 / -1;
    order: 3;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .fu-header .links::-webkit-scrollbar { display: none; }
  .sched-controls { gap: 8px; padding: 12px var(--pad-x); }
  .sched-controls .week-strip { margin-left: 0; width: 100%; justify-content: space-between; }
  .day-strip { grid-template-columns: repeat(4, 1fr); }
  .day-strip .day-cell:nth-child(n+5) { display: none; }
  .day-grid { grid-template-columns: 1fr; }
  .day-section-head .big .num { font-size: 80px; }
  .day-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .included-grid { grid-template-columns: 1fr; }
  .home-games, .section, .feature-split, .cta-banner, .home-faq { padding: 64px var(--pad-x); }
}

/* ── Mid-zone tier: kill illegible multi-col grids before the phone tier ── */
@media (max-width: 600px) {
  .day-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 700px) {
  .fu-modal-gallery { min-height: 280px; }
}

@media (max-width: 480px) {
  .fu-header { gap: 8px; padding: 12px var(--pad-x); }
  .day-strip { grid-template-columns: repeat(3, 1fr); }
  .day-strip .day-cell:nth-child(n+4) { display: none; }
  .day-cell-num { font-size: 40px; }
  .day-cell {
    padding: 14px 10px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .day-section-head .big .num { font-size: 56px; }
  .day-section-head { gap: 8px; }
  .day-section-head .big .info b { font-size: 16px; }

  /* ── Section heads ── */
  .section-head {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
  }
  .section-head .right { width: 100%; margin-top: 12px; gap: 8px; }

  /* ── Home: next-matches slider ── */
  .home-games { padding: 48px var(--pad-x) 32px; }
  .home-slider { grid-auto-columns: min(calc(100vw - 40px), 320px); gap: 12px; }

  /* ── Schedule hero + sticky controls ── */
  .sched-hero { padding: 40px var(--pad-x) 20px; }
  .sched-hero h1 { font-size: clamp(48px, 10vw, 72px); }
  .sched-hero .sub { font-size: 14px; max-width: none; }
  .sched-controls {
    gap: 6px;
    padding: 10px var(--pad-x);
    flex-wrap: wrap;
    top: max(73px, calc(env(safe-area-inset-top) + 50px));
    padding-left: max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
  }
  .sched-controls .group button,
  .sched-controls .filter-btn { padding: 8px 10px; font-size: 10px; }
  .sched-controls .week-strip { width: 100%; margin-left: 0; gap: 4px; }
  .sched-controls .month { font-size: 10px; padding-right: 8px; }
  .sched-controls .nav-btn { width: 32px; height: 32px; }

  /* ── Day grid: shorter card image on phones ── */
  .day-grid .gc .gc-img { aspect-ratio: 5 / 2; }

  /* ── Filter row ── */
  .filter-row { padding: 16px var(--pad-x); gap: 16px; }
  .filter-group { gap: 8px; }
  .filter-group .label { font-size: 9px; }
  .filter-group .opts button { padding: 10px 14px; font-size: 10px; min-height: 40px; }

  /* ── Today pill ── */
  .today-pill {
    padding: 8px 14px;
    font-size: 11px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Overlays / modals fit viewport ── */
  .fu-overlay { padding: 12px; }
  .fu-modal { padding: 0; }
  .fu-modal-body { padding: 16px; gap: 18px; }
  .fu-modal-h h2 { font-size: 24px; line-height: 1; }
  .fu-modal-h .meta { gap: 8px; flex-wrap: wrap; font-size: 11px; }
  .fu-modal-h .meta .time { font-size: 18px; }
  .fu-modal-gallery { min-height: 200px; }
  .fu-modal-gallery .thumb { width: 48px; height: 48px; }
  .fu-modal-gallery .thumbs { gap: 4px; padding: 10px; }

  /* ── Infra grid ── */
  .infra-grid { grid-template-columns: repeat(2, 1fr); }
  .infra-grid .item { padding: 12px; gap: 8px; }
  .infra-grid .item .ico { width: 24px; height: 24px; }
  .infra-grid .item .lbl { font-size: 10px; }

  /* ── Location row stacks ── */
  .fu-section .addr { flex-direction: column; gap: 10px; }
  .fu-section .addr a { width: 100%; text-align: center; }

  /* ── Participant rows ── */
  .participant { flex-wrap: wrap; padding: 8px 0; gap: 8px; }
  .participant .name { flex: 1 0 100%; font-size: 11px; }
  .participant .rating { flex: 0 0 auto; font-size: 10px; padding: 2px 5px; }

  /* ── Modal price / book button stacks ── */
  .modal-price { flex-direction: column; gap: 12px; align-items: stretch; }
  .modal-price .book-btn { width: 100%; padding: 0 16px; }

  /* ── Auth modal ── */
  .fu-auth { max-width: calc(100vw - 24px); width: 100%; }
  .fu-auth-head,
  .fu-auth-body,
  .fu-auth-tabs { padding-left: 18px; padding-right: 18px; }
  .fu-auth-tabs button { padding: 14px 12px; font-size: 11px; letter-spacing: 0.12em; }
  .fu-field input { height: 44px; padding: 0 12px; font-size: 16px; }

  /* ── Global form grid → single column ── */
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .fu-field.full { grid-column: 1; }

  /* ── Cart drawer full-bleed ── */
  .fu-cart { width: 100vw; border-left: 0; }

  /* ── Close buttons in full-width drawers/modals ── */
  .fu-cart-head .fu-iconbtn,
  .notif-head .fu-iconbtn,
  .fu-auth-head .fu-iconbtn { margin-left: auto; margin-right: -4px; }

  /* ── CTA banner buttons stack ── */
  .cta-banner .ctas { flex-direction: column; gap: 16px; }
  .cta-banner .ctas button { width: 100%; }

  /* ── FAQ ── */
  .faq-row .head { gap: 12px; }
  .faq-row .q { font-size: 16px; }

  /* ── Footer phone sizing ── */
  .fu-footer { padding: 48px var(--pad-x) 24px; }
  .fu-footer-grid { gap: 28px; }
  .fu-footer h4 { font-size: 9px; margin-bottom: 12px; }
  .fu-footer a { font-size: 13px; }
  .fu-footer .store-badges a { padding: 8px 12px; font-size: 10px; }
  .fu-footer .socials a { width: 36px; height: 36px; font-size: 9px; }
  .fu-footer-legal { padding-top: 12px; font-size: 8px; letter-spacing: 0.18em; }

  /* ── Game card phone trims ── */
  .gc .gc-body { padding: 14px 16px 16px; }
  .gc .gc-title { font-size: 15px; min-height: 32px; margin-bottom: 4px; }
  .gc .gc-area { font-size: 11px; }
  .gc .gc-meta { gap: 6px; }
  .fu-chip { padding: 4px 8px; font-size: 9px; letter-spacing: 0.08em; }
  .gc .gc-bottom { flex-direction: column; gap: 10px; align-items: stretch; }
  .fu-avatar-stack .fu-av { margin-left: -4px; width: 22px; height: 22px; font-size: 8px; }
  .gc .gc-price { font-size: 18px; }
  .gc .gc-book { height: 44px; font-size: 11px; letter-spacing: 0.12em; }
}

@media (max-width: 360px) {
  /* ── Header very-small ── */
  .fu-header { padding: 10px 12px; gap: 6px; }

  /* ── Primary buttons: prevent label wrap on narrow full-width ── */
  .fu-btn { padding: 0 16px; height: 48px; font-size: 12px; }
  .fu-btn.lg { height: 52px; }

  /* ── Day strip ── */
  .day-cell { padding: 12px 8px; }
  .day-cell-num { font-size: 32px; }
  .day-cell-label { font-size: 9px; }
  .day-cell-count { font-size: 8px; }

  /* ── Day grid ── */
  .day-grid { gap: 10px; }

  /* ── Home slider ── */
  .home-slider { grid-auto-columns: min(90vw, 280px); gap: 12px; }

  /* ── Section heads global ── */
  .section-head h2 { font-size: clamp(32px, 6vw, 56px); letter-spacing: -0.02em; }
  .section-head { gap: 24px; margin-bottom: 20px; }

  /* ── Modal trims ── */
  .fu-modal-body { padding: 12px; }
  .fu-modal-h h2 { font-size: clamp(20px, 7vw, 28px); }

  /* ── Modal price ── */
  .modal-price .price { font-size: 28px; }
  .modal-price .seats { font-size: 9px; }
  .modal-price .book-btn { height: 48px; padding: 0 12px; font-size: 12px; }

  /* ── Infra grid → single column ── */
  .infra-grid { grid-template-columns: 1fr; }

  /* ── Cart drawer paddings ── */
  .fu-cart-head { padding: 16px; }
  .fu-cart-body { padding: 12px 16px; }
  .fu-cart-empty { padding: 40px 16px; }
  .fu-cart-item { padding: 14px 0; }
  .fu-cart-foot { padding: 16px; }
}

/* ── Logo "Kickoff" reveal ───────────────────────────────────────
   A football rolls in spinning across the baseline; each glyph kicks
   up with an overshoot in sync as the ball passes it, and the two
   football "o"s spin as they land. Plays on mount, replays on click
   (the .fu-logo-anim layer is remounted via a React key). Transforms
   use transform-box:fill-box so each glyph pivots on its own bbox. */
.fu-logo { -webkit-tap-highlight-color: transparent; }
.fu-glyph,
.fu-roller {
  transform-box: fill-box;
  will-change: transform, opacity;
}
.fu-glyph {
  transform-origin: 50% 100%;
  opacity: 0;
  animation: fuGlyphPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--fu-d, 0s);
}
.fu-glyph.fu-ball {
  transform-origin: 50% 50%;
  animation-name: fuBallPop;
}
.fu-roller {
  transform-origin: 50% 50%;
  opacity: 0;
  animation: fuRoll 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes fuGlyphPop {
  0%   { opacity: 0; transform: translateY(26px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fuBallPop {
  0%   { opacity: 0; transform: translateY(26px) rotate(-360deg) scale(0.6); }
  60%  { opacity: 1; transform: translateY(-4px) rotate(18deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes fuRoll {
  0%   { opacity: 0; transform: translateX(-280px) rotate(0deg); filter: blur(2.5px); }
  8%   { opacity: 1; }
  82%  { opacity: 1; transform: translateX(720px) rotate(740deg); filter: blur(0); }
  100% { opacity: 0; transform: translateX(860px) rotate(815deg); filter: blur(1.5px); }
}

/* Accessibility: no motion — show the finished logo instantly. */
@media (prefers-reduced-motion: reduce) {
  .fu-glyph { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fu-roller { display: none !important; }
}