/* Public marketing site v2 — bold dark + neon-lime design system.
   Scoped to body.v2 so it never touches the admin dashboard or customer
   portal, which keep the original look and functionality untouched.
   Values below (colors, type, spacing) are matched directly from real
   computed styles pulled off the reference design — not guessed. */

body.v2 {
  --bg: #080808;
  --bg-alt: #0e0e0e;
  --surface: #0e0e0e;
  --surface-2: #171717;
  --surface-3: #242424;
  --border: rgba(255, 255, 255, 0.12);
  --text: #f2efe6;
  --text-muted: #908f8b;
  --accent: #b1f21f;
  --accent-ink: #080d02;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body.v2 h1, body.v2 h2, body.v2 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

body.v2 .logo { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.28em; font-size: 0.85rem; }

body.v2 .btn { border-radius: 0; }
body.v2 .btn-primary { background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; }
body.v2 .btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); }
body.v2 .btn-outline { border-color: var(--border); font-family: var(--font-mono); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.2em; }
body.v2 .btn-outline.active { border-color: var(--accent); color: var(--accent); background: rgba(177, 242, 31, 0.08); }
body.v2 .btn-ghost { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.2em; }
body.v2 .btn-lg { height: 56px; padding: 0 32px; }

/* Hamburger icon */
body.v2 .nav-toggle { gap: 6px; padding: 6px; }
body.v2 .nav-toggle span { width: 24px; height: 1.5px; background: var(--text); transition: background 0.15s ease; }
body.v2 .nav-toggle:hover span { background: var(--accent); }

/* Fullscreen nav overlay menu */
body.v2 .nav-overlay {
  position: fixed;
  inset: 0;
  top: 73px;
  background: var(--bg);
  z-index: 90;
  padding: 8px 24px 32px;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  overflow-y: auto;
}
body.v2 .nav-overlay.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
body.v2 .nav-overlay-links { display: flex; flex-direction: column; max-width: 1160px; margin: 0 auto; }
body.v2 .nav-overlay-links a {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  letter-spacing: -0.02em;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  transition: color 0.15s ease;
}
body.v2 .nav-overlay-links a:hover, body.v2 .nav-overlay-links a.current { color: var(--accent); }
body.v2 .nav-overlay-links a:last-child { border-bottom: none; }

/* Text accent — highlighted key words inline within copy */
body.v2 .text-accent { color: var(--accent); }

/* Numbered section header, e.g. "02 — WHO WE ARE" */
body.v2 .section-num {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.v2 .section-num .n { color: var(--text-muted); }

body.v2 .eyebrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.v2 .display-lg { font-size: clamp(2.8rem, 8vw, 5.2rem); line-height: 0.88; }
body.v2 .display-md { font-size: clamp(2.1rem, 5.5vw, 3.6rem); line-height: 0.92; }

body.v2 .subheading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  letter-spacing: -0.02em;
  text-transform: none;
  line-height: 1.15;
}

body.v2 .lede { color: var(--text-muted); font-size: 1rem; line-height: 1.6; }

/* Live open/closed status badge */
body.v2 .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.v2 .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
body.v2 .status-badge.open .status-dot { background: var(--accent); }
body.v2 .status-badge.open { color: var(--accent); }

/* Grain texture overlay — subtle film grain across the whole page */
body.v2 .grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Photo section — full-bleed background image + dark cinematic scrim */
body.v2 .photo-section { position: relative; overflow: hidden; }
body.v2 .photo-section img.bg-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.72) contrast(1.12) saturate(0.82);
}
body.v2 .photo-section .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.35) 0%, rgba(8,8,8,0.6) 55%, rgba(8,8,8,0.94) 100%);
}
body.v2 .photo-section .scrim.scrim-side {
  background: linear-gradient(to right, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.55) 45%, rgba(8,8,8,0.25) 100%);
}
body.v2 .photo-section .content { position: relative; z-index: 2; }

body.v2 .photo-frame { position: relative; overflow: hidden; }
body.v2 .photo-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.8) contrast(1.1) saturate(0.85);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
body.v2 .photo-frame:hover img { transform: scale(1.06); }

/* Filter chips — used on Games and Food pages */
body.v2 .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 28px;
}
body.v2 .filter-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
body.v2 .filter-chip:hover { border-color: var(--accent); color: var(--text); }
body.v2 .filter-chip.active { border-color: var(--accent); color: var(--accent); background: rgba(177, 242, 31, 0.08); }

/* Photo cards — games grid */
body.v2 .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 3px;
}
body.v2 .photo-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
}
body.v2 .photo-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.85) contrast(1.08) saturate(0.9);
  transition: transform 1s cubic-bezier(0.16,1,0.3,1);
}
body.v2 .photo-card:hover img { transform: scale(1.08); }
body.v2 .photo-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.35) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
}
body.v2 .photo-card .tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
body.v2 .photo-card h3 { font-size: 1.15rem; text-transform: none; letter-spacing: -0.01em; }

/* Menu item cards — Food page */
body.v2 .menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
body.v2 .menu-item-card {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
  background: var(--surface-2);
}
body.v2 .menu-item-card .top-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
body.v2 .menu-item-card h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: -0.01em; }
body.v2 .menu-item-card .price { font-family: var(--font-mono); color: var(--accent); font-size: 1.05rem; }
body.v2 .menu-item-card .tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; }

/* Station cards */
body.v2 .station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
body.v2 .station-card {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
  background: var(--surface-2);
}
body.v2 .station-card .top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
body.v2 .station-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: -0.01em; }
body.v2 .station-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
body.v2 .station-badge.available { background: rgba(177, 242, 31, 0.12); color: var(--accent); }
body.v2 .station-badge.occupied { background: rgba(255, 107, 107, 0.12); color: #ff8080; }
body.v2 .station-card ul { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--text-muted); }
body.v2 .station-card ul li::before { content: '— '; color: var(--border); }

/* Pricing badge */
body.v2 .price-badge {
  font-family: var(--font-mono);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 10px;
}

/* Sticky bottom CTA bar */
body.v2 .sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--accent);
  color: var(--accent-ink);
  z-index: 60;
  padding: 16px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  width: 100%;
}
body.v2 .sticky-cta:hover { filter: brightness(1.1); }
body.v2 .page-with-sticky-cta { padding-bottom: 72px; }

/* Booking wizard */
body.v2 .wizard-steps {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 28px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
body.v2 .wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.v2 .wizard-step .num {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem;
}
body.v2 .wizard-step.active { color: var(--accent); }
body.v2 .wizard-step.active .num { border-color: var(--accent); color: var(--accent); }
body.v2 .wizard-step.done { color: var(--text); }
body.v2 .wizard-step.done .num { border-color: var(--text); background: var(--text); color: var(--bg); }

body.v2 .wizard-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 24px 0;
}
body.v2 .wizard-option {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
  cursor: pointer;
  background: var(--surface-2);
  transition: all 0.15s ease;
}
body.v2 .wizard-option:hover { border-color: var(--text-muted); }
body.v2 .wizard-option.selected { border-color: var(--accent); background: rgba(177, 242, 31, 0.08); }
body.v2 .wizard-option h4 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; margin-bottom: 4px; letter-spacing: -0.02em; }
body.v2 .wizard-option .sub { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
body.v2 .wizard-option .price { font-family: var(--font-mono); color: var(--accent); font-size: 0.9rem; }

body.v2 .running-total {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 16px;
}
body.v2 .running-total strong { color: var(--accent); font-size: 1.1rem; }

body.v2 .availability-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-top: 16px;
}

/* Generic bordered panel — stations, pricing, event cards */
body.v2 .panel-v2 {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 24px;
  transition: all 0.4s ease;
}
body.v2 .panel-v2:hover { background: var(--surface-2); transform: translateY(-4px); }

/* Play/Race/Refuel tall photo cards with bottom-anchored content + hover-reveal button */
body.v2 .play-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
body.v2 .play-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 60vh;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--border);
}
body.v2 .play-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55;
  filter: brightness(0.85) saturate(0.85);
  transition: all 1s cubic-bezier(0.16,1,0.3,1);
}
body.v2 .play-card:hover img { transform: scale(1.08); opacity: 0.7; }
body.v2 .play-card .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.5) 55%, rgba(8,8,8,0.15) 100%); }
body.v2 .play-card .content { position: relative; z-index: 2; padding: 28px; }
body.v2 .book-reveal {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: all 0.4s ease;
  margin-top: 20px;
}
body.v2 .play-card:hover .book-reveal, body.v2 .play-card:focus-within .book-reveal { max-height: 60px; opacity: 1; }
body.v2 .station-preview-card:hover .book-reveal, body.v2 .station-preview-card:focus-within .book-reveal { max-height: 60px; opacity: 1; }

/* Netflix-style horizontal scroll game rail */
body.v2 .game-rail { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
body.v2 .game-rail::-webkit-scrollbar { height: 6px; }
body.v2 .game-rail::-webkit-scrollbar-thumb { background: var(--border); }
body.v2 .game-rail-card { flex: 0 0 220px; scroll-snap-align: start; cursor: pointer; }
body.v2 .game-rail-card .frame { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--border); }
body.v2 .game-rail-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.16,1,0.3,1); }
body.v2 .game-rail-card:hover .frame img { transform: scale(1.08); }
body.v2 .game-rail-card h3 { margin-top: 14px; font-size: 0.92rem; text-transform: uppercase; letter-spacing: -0.01em; transition: color 0.2s ease; }
body.v2 .game-rail-card:hover h3 { color: var(--accent); }
body.v2 .game-rail-card .meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Photo collage grid — The Vibe */
body.v2 .vibe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
body.v2 .vibe-grid .vg-item { overflow: hidden; }
body.v2 .vibe-grid .vg-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) contrast(1.08) saturate(0.88); transition: transform 1s ease; }
body.v2 .vibe-grid .vg-item:hover img { transform: scale(1.06); }

/* Footer navigation */
body.v2 .site-footer-v2 {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 64px 24px 32px;
}
body.v2 .footer-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
}
body.v2 .footer-link { color: var(--text-muted); font-size: 0.88rem; transition: color 0.15s ease; }
body.v2 .footer-link:hover { color: var(--text); }
body.v2 .footer-bottom {
  max-width: 1160px;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Event cards */
body.v2 .event-card {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
body.v2 .event-card .event-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
body.v2 .event-card .event-card-media { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-3); }
body.v2 .event-card .event-card-media img { width: 100%; height: 100%; object-fit: contain; }
body.v2 .event-card .tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; }
body.v2 .event-card .datetime { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
body.v2 .event-card h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.02em; }
body.v2 .event-card .meta-row { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
body.v2 .event-card .meta-row .prize { color: var(--accent); }
body.v2 .event-card.past { opacity: 0.5; }