/* ============================================================
   pages.css — header, nav, hero, sticky CTA, footer, cookie
   banner, account, and per-page layouts.
   ============================================================ */

/* ============== HEADER / NAV ============== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), backdrop-filter var(--t-base);
  border-bottom: 1px solid transparent;
}
/* glass once the user scrolls (added by site.js) */
.site-header.scrolled {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom-color: var(--line);
}
.header-inner { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand .mark {
  width: 32px; height: 32px; border-radius: 9px; background: var(--grad-violet);
  display: grid; place-items: center; box-shadow: var(--glow);
}
.brand .mark svg { width: 18px; height: 18px; }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Style only the top-level nav links, not the links inside dropdown or
   mega panels (those have their own styles and were inheriting the pill
   radius, padding and nowrap from here). */
.site-nav > a,
.site-nav > .has-menu > a,
.site-nav > .has-mega > a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 14px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px;
  color: var(--ink); position: relative;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.site-nav > a svg,
.site-nav > .has-menu > a svg,
.site-nav > .has-mega > a svg { flex: 0 0 auto; }
.site-nav > a:hover,
.site-nav > .has-menu > a:hover,
.site-nav > .has-mega > a:hover { color: #fff; background: var(--surface-2); }
.site-nav > a.active,
.site-nav > .has-menu > a.active,
.site-nav > .has-mega > a.active { color: #fff; background: var(--accent-tint); }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* dropdown (Games mega-ish) */
.has-menu { position: relative; }
.has-menu > .menu-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; padding: 12px;
  /* Match the Experiences mega panel exactly: near-solid frosted panel so
     the page behind is not visible, same blur and radius. */
  background: linear-gradient(180deg, rgba(20,18,30,0.97), rgba(14,12,20,0.98));
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
}
.has-menu:hover > .menu-panel, .has-menu:focus-within > .menu-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Links match .mega-links: pink 18px headings, 13px subs, pink hover wash. */
.menu-panel a { display: block; padding: 12px 14px; border-radius: var(--r-md); }
.menu-panel a:hover { background: rgba(255,77,255,0.10); }
.menu-panel a .m-label { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--accent-soft); }
.menu-panel a:hover .m-label { color: #fff; }
.menu-panel a .m-sub { display: block; font-size: 13px; color: var(--ink-faint); font-weight: 500; margin-top: 3px; }

/* ---- Experiences mega menu (responsive, frosted glass) ---- */
.has-mega { position: static; }
.has-mega > .mega-panel {
  position: absolute; top: calc(var(--nav-h) - 14px); left: 50%; transform: translateX(-50%);
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; padding: 26px;
  /* Near-solid frosted panel: high opacity so page content behind is
     not visible, with a strong blur for the glass feel. */
  background: linear-gradient(180deg, rgba(20,18,30,0.97), rgba(14,12,20,0.98));
  border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  /* Fade only — no vertical slide, which made the frosted backdrop
     look like the page behind was moving. */
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast) var(--ease-out), visibility var(--t-fast);
}
.has-mega:hover > .mega-panel, .has-mega:focus-within > .mega-panel {
  opacity: 1; visibility: visible;
}
.mega-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; align-content: start; }
.mega-links a { display: block; padding: 12px 14px; border-radius: var(--r-md); }
.mega-links a:hover { background: rgba(255,77,255,0.10); }
.mega-links .m-label {
  display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--accent-soft);
}
.mega-links a:hover .m-label { color: #fff; }
.mega-links .m-sub { display: block; font-size: 13px; color: var(--ink-faint); font-weight: 500; margin-top: 3px; }

/* Featured card: a clean rounded rectangle. The image fills it via a
   background layer, a dark gradient sits on top for text contrast, and
   the tag + text sit in normal flow so nothing gets clipped. */
.mega-feature {
  position: relative; display: block; border-radius: var(--r-lg); overflow: hidden;
  min-height: 260px; isolation: isolate; color: #fff;
  background-size: cover; background-position: center;
}
.mega-feature::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,9,16,0.25) 0%, rgba(10,9,16,0.60) 55%, rgba(10,9,16,0.92) 100%);
}
.mega-feature-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: var(--accent-strong); color: var(--accent-ink);
}
.mega-feature-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px;
}
.mega-feature-title { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.mega-feature-sub { display: block; font-size: 14px; color: rgba(255,255,255,0.88); margin-top: 6px; }
.mega-feature-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 14px; font-weight: 800; color: var(--accent-soft);
}
.mega-feature:hover .mega-feature-link { color: #fff; }
@media (max-width: 1180px) {
  .has-mega > .mega-panel { width: min(760px, calc(100vw - 2 * var(--gutter))); grid-template-columns: 1fr; gap: 20px; }
  .mega-feature { min-height: 190px; }
}

/* account icon button */
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink-soft); border: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.icon-btn:hover { color: #fff; background: var(--surface-2); border-color: var(--line-strong); }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; color: var(--ink); }
.nav-toggle svg { width: 24px; height: 24px; }

/* ---- Mobile drawer ---- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(10,9,16,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-drawer) + 1);
  width: min(86vw, 360px); background: var(--bg-1); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform var(--t-slow) var(--ease-drawer);
  display: flex; flex-direction: column; padding: 18px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer nav { display: flex; flex-direction: column; gap: 2px; }
.drawer nav a {
  padding: 15px 14px; border-radius: var(--r-md); font-size: 17px; font-weight: 600; color: var(--ink-soft);
}
.drawer nav a:hover, .drawer nav a.active { background: var(--surface-2); color: #fff; }
.drawer .drawer-foot { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }

@media (max-width: 1080px) {
  .site-nav, .header-actions .desktop-only { display: none; }
  .nav-toggle { display: grid; }
  /* Push Book now + hamburger to the right edge, brand stays left. */
  .header-actions { margin-left: auto; gap: 8px; }
}

/* Phones: shrink the header so it doesn't dominate the screen. */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .header-inner { gap: 10px; }
  .brand-logo { height: 18px; }
  .header-actions { gap: 6px; }
  /* Slightly more compact Book now on small screens, still consistent height. */
  .btn-book { min-width: 0; padding: 0 18px; font-size: 15px; }
  .nav-toggle { width: 40px; height: 40px; }
  .nav-toggle svg { width: 22px; height: 22px; }
}

/* ============== HERO ============== */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--grad-violet); }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media.placeholder { background: var(--grad-violet); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-scrim-h), var(--grad-scrim);
}
.hero-inner { padding-block: clamp(80px, 16vh, 200px); }
/* Homepage hero is bottom-aligned (hero-full) and the sticky Book bar
   sits over the bottom of the viewport. Trim the top padding so the
   Google review pill is not pushed down, and reserve clearance below
   for the sticky bar so nothing hides behind it. */
.page-index .hero-full .hero-inner { padding-block: clamp(40px, 9vh, 110px) calc(var(--cta-h) + 28px); }
.hero h1 { margin: var(--sp-04) 0 var(--sp-05); width: min(100%, 16ch); }
/* Short mobile-VR headline: allow one line so "you" does not drop awkwardly. */
.page-mobile-vr .hero h1 { width: min(100%, 22ch); }
.hero .lead { margin-bottom: var(--sp-07); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* full-bleed hero variant for game/experience pages */
.hero-full .hero-inner { min-height: clamp(420px, 70vh, 720px); display: flex; flex-direction: column; justify-content: flex-end; }

/* Homepage hero: copy on the left, one featured game on the right.
   Collapses to a single column on tablet and below, where the featured
   card sits under the buttons rather than competing with them. */
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: clamp(28px, 5vw, 72px); align-items: end; width: 100%;
}
.hero-split-main { min-width: 0; }
.hero-feature {
  display: block; text-decoration: none; color: inherit;
  background: var(--glass-bg-2); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.hero-feature-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--grad-violet); line-height: 0; }
.hero-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms var(--ease-out); }
.hero-feature-tag {
  position: absolute; top: var(--sp-03); left: var(--sp-03); z-index: 2;
}
.hero-feature-body { padding: var(--sp-04) var(--sp-05) var(--sp-05); }
.hero-feature-body h3 { color: #fff; font-size: 20px; line-height: 1.15; margin-bottom: 6px; }
.hero-feature-desc { color: var(--ink-soft); line-height: 1.5; margin: 0; }
.hero-feature-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-04);
  font-size: 15px; font-weight: 800; color: var(--accent-soft);
}
@media (hover: hover) and (pointer: fine) {
  .hero-feature:hover { transform: translateY(-4px); border-color: var(--accent-line);
    box-shadow: var(--e-3); }
  .hero-feature:hover .hero-feature-media img { transform: scale(1.05); }
}
@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; gap: 26px; }
  /* Cap the width so the card does not stretch edge to edge on tablet. */
  .hero-feature { max-width: 420px; }
}
/* On phones the hero is already tall and the sticky Book bar sits below.
   Hide the featured card there rather than pushing the CTA off screen. */
@media (max-width: 640px) {
  .hero-feature { display: none; }
}

/* Game/room hero: title + intro on the left, spec cards stacked on the right. */
.hero-game-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(24px, 4vw, 56px); align-items: end; width: 100%;
}
.hero-game-main h1 { width: min(100%, 18ch); }
.hero-specs { display: flex; flex-direction: column; gap: 10px; }
.hero-spec {
  background: var(--glass-bg-2); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-md); padding: 14px 18px;
}
.hero-spec .lbl { font-size: var(--fs-meta); color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.hero-spec .val { font-size: 18px; font-weight: 800; margin-top: 3px; color: #fff; }
@media (max-width: 860px) {
  .hero-game-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-specs { flex-direction: row; flex-wrap: wrap; }
  .hero-spec { flex: 1 1 140px; }
}

/* Mobile: the ATF was sitting low with a big gap up top and crowding the
   sticky Book bar at the bottom. Tighten the top, shrink the hero height,
   and leave clearance below for the sticky CTA. */
@media (max-width: 640px) {
  .hero-inner { padding-block: clamp(28px, 8vh, 56px) calc(var(--cta-h) + 24px); }
  .hero-full .hero-inner { min-height: clamp(360px, 58vh, 560px); }
  /* Less dead space above the eyebrow on every section. */
  .section { padding-block: clamp(2.5rem, 8vw, 4rem); }
  .section-tight { padding-block: clamp(1.75rem, 6vw, 3rem); }
  .section-head { margin-bottom: clamp(1.5rem, 5vw, 2.25rem); }
}

/* ============== CTA BAND ============== */
.cta-band { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(56px, 9vw, 110px); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Layered front-to-back: dark scrim for readable text, then the
     global background image, then the brand glow + colour fallback
     (shown if the image is missing). Swap the image by replacing
     the file at assets/img/odyssey-vr-cta-book-QuantumArenaD.webp. */
  background:
    linear-gradient(rgba(10,9,16,0.62), rgba(10,9,16,0.72)),
    url("../img/odyssey-vr-cta-book-QuantumArenaD.webp") center / cover no-repeat,
    radial-gradient(700px 300px at 50% 0%, rgba(252,0,252,0.26), transparent 70%),
    var(--bg-1);
}
.cta-band h2 { max-width: 18ch; margin-inline: auto; }
.cta-band .lead { margin: var(--sp-04) auto var(--sp-07); }

/* ============== STICKY BOOK NOW BAR (global) ============== */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  height: var(--cta-h);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--line);
  display: flex; align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  transition: transform var(--t-slow) var(--ease-drawer);
}
.book-bar.hidden-down { transform: translateY(110%); }
.book-bar-inner {
  width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Single-line copy: "Ready to play?" in pink, then the rest in white,
   at a bigger size than before. */
.book-bar .bb-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
.book-bar .bb-copy .bb-lead { color: var(--accent); }
.book-bar .bb-copy .bb-sub { color: var(--ink); }
/* Right-hand cluster: the non-clickable reviews proof, then Book now.
   The reviews proof shows on desktop only. */
.book-bar .bb-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.book-bar .bb-reviews { display: none; align-items: baseline; gap: 7px; white-space: nowrap; line-height: 1; }
.book-bar .bb-reviews-count { font-weight: 800; font-size: 16px; color: var(--ink); }
.book-bar .bb-reviews-score { font-weight: 700; font-size: 14px; color: var(--ink-faint); }
.book-bar .bb-reviews-stars { color: #ffc83d; letter-spacing: 1px; font-size: 15px; }
.book-bar .btn { flex: 0 0 auto; }
.book-bar .btn-accent { box-shadow: var(--glow); }
@media (min-width: 900px) {
  .book-bar .bb-reviews { display: inline-flex; }
}
@media (max-width: 520px) {
  .book-bar .bb-copy { font-size: 16px; white-space: normal; }
  .book-bar .btn { padding-inline: 22px; }
}

/* ============== COOKIE / CONSENT BANNER ============== */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--cta-h) + 12px);
  z-index: var(--z-cookie); max-width: 560px; margin-inline: auto;
  padding: 20px; border-radius: var(--r-lg);
  background: var(--glass-bg-2); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--e-3);
  transform: translateY(20px); opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility var(--t-base);
}
.cookie.show { opacity: 1; transform: none; visibility: visible; }
.cookie h2 { font-size: 17px; margin-bottom: 8px; }
.cookie p { color: var(--ink-soft); line-height: 1.55; }
.cookie p a { color: var(--accent-soft); text-decoration: underline; }
.cookie .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.cookie .cookie-actions .btn { flex: 1 1 auto; }

/* cookie preferences expandable */
.cookie-prefs { margin-top: 14px; display: none; border-top: 1px solid var(--line); padding-top: 14px; }
.cookie-prefs.open { display: block; }
.cookie-prefs .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.cookie-prefs .toggle-row .tt { font-size: 14px; font-weight: 700; }
.cookie-prefs .toggle-row .td { font-size: var(--fs-meta); color: var(--ink-faint); }

/* iOS-style switch */
.switch { position: relative; width: 46px; height: 28px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); transition: background var(--t-fast) var(--ease-out);
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform var(--t-fast) var(--ease-spring);
}
.switch input:checked + .track { background: var(--accent-strong); border-color: var(--accent-strong); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:disabled + .track { opacity: 0.5; }

/* ============== CONSOLE CORNER PARTY PERK BAND ============== */
/* ---- Console Corner page ---- */
.console-powered { display: flex; justify-content: center; margin-bottom: clamp(24px, 4vw, 40px); }
.console-xbox { width: min(320px, 70vw); height: auto; }
.console-logos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; align-items: center;
}
.console-logo {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px;
}
.console-logo img { width: 100%; height: auto; max-width: 220px; }
.console-stat {
  font-size: clamp(40px, 6vw, 56px); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--accent-soft);
}

.perk-band { padding-block: clamp(20px, 4vw, 36px); }
.perk-inner {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid var(--accent-line);
  background:
    radial-gradient(600px 300px at 90% -20%, rgba(252,0,252,0.26), transparent 60%),
    radial-gradient(500px 280px at 0% 120%, rgba(157,75,255,0.24), transparent 55%),
    linear-gradient(135deg, #18152e 0%, #120f1f 100%);
  padding: clamp(26px, 4vw, 48px);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 40px);
  box-shadow: var(--e-3);
}
.perk-icon {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--r-lg);
  display: grid; place-items: center; color: #fff;
  background: var(--grad-accent); box-shadow: var(--glow);
}
.perk-copy { min-width: 0; }
.perk-copy h2 { font-size: clamp(22px, 3vw, 34px); margin: 8px 0 10px; }
.perk-copy p { color: var(--ink-soft); width: min(100%, var(--measure-lead)); font-size: var(--fs-body); line-height: 1.55; }
.perk-action { flex: 0 0 auto; }
@media (max-width: 900px) {
  .perk-inner { grid-template-columns: 1fr; text-align: left; gap: 18px; }
  .perk-action .btn { width: 100%; }
}


.site-footer { background: var(--bg-1); border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 80px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.footer-grid h4 { color: var(--ink); margin-bottom: 16px; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.footer-grid ul { display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: var(--ink-soft); font-size: 15px; }
.footer-grid a:hover { color: var(--accent-soft); }
.footer-about p { color: var(--ink-faint); line-height: 1.6; margin-top: 14px; max-width: 34ch; }
.footer-contact { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.footer-contact a { display: inline-flex; gap: 8px; align-items: center; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); }
.footer-social a:hover { color: #fff; border-color: var(--accent-line); background: var(--surface-3); }
.footer-legal {
  margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--line);
  padding: 24px 0 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  font-size: var(--fs-meta); color: var(--ink-faint);
}
.footer-legal .links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-legal a:hover { color: var(--ink-soft); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============== ACCOUNT ============== */
.auth-wrap { min-height: calc(100dvh - var(--nav-h) - var(--cta-h)); display: grid; place-items: center; padding: clamp(32px,6vw,72px) var(--gutter); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .glass { padding: clamp(26px, 4vw, 40px); }
.auth-card h1 { font-size: clamp(26px, 4vw, 34px); }
.auth-card .sub { color: var(--ink-soft); margin: 8px 0 26px; }
.auth-card .alt { text-align: center; margin-top: 22px; font-size: 14px; color: var(--ink-faint); }
.auth-card .alt a { color: var(--accent-soft); font-weight: 700; }
.auth-aside { display: none; }

.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; }
.account-side { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 4px; }
.account-side a {
  padding: 12px 16px; border-radius: var(--r-md); color: var(--ink-soft); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; gap: 11px;
}
.account-side a:hover { background: var(--surface-2); color: #fff; }
.account-side a.active { background: var(--accent-tint); color: #fff; }
.account-side a.danger { color: var(--bad); margin-top: 12px; }
.account-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px,3vw,30px); }
.account-card + .account-card { margin-top: 20px; }
@media (max-width: 760px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-side { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .account-side a { white-space: nowrap; }
}

/* empty state */
.empty-state { text-align: center; padding: clamp(36px,6vw,64px); color: var(--ink-faint); }
.empty-state .es-icon { width: 56px; height: 56px; margin: 0 auto 18px; color: var(--ink-dim); }

/* ============== GAME / EXPERIENCE PAGE SPECIFICS ============== */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.spec { background: var(--surface); padding: 18px 20px; }
.spec .lbl { font-size: var(--fs-meta); color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.spec .val { font-size: 18px; font-weight: 800; margin-top: 4px; }
@media (max-width: 640px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gallery .g-item { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: var(--grad-violet); border: 1px solid var(--line); }
.gallery .g-item img { width: 100%; height: 100%; object-fit: cover; }

/* ============== MAP / CONTACT ============== */
.map-embed { aspect-ratio: 16/10; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.2) invert(0.9) hue-rotate(180deg); }

/* ============== BLOG ============== */
.post-meta { display: flex; gap: 14px; align-items: center; font-size: var(--fs-meta); color: var(--ink-faint); flex-wrap: wrap; }
.post-feature { aspect-ratio: 21/9; border-radius: var(--r-xl); overflow: hidden; background: var(--grad-violet); border: 1px solid var(--line); margin: 24px 0; }
.post-feature img { width: 100%; height: 100%; object-fit: cover; }

/* greybox placeholder helper (Gary swaps real art) */
.ph {
  display: grid; place-items: center; text-align: center;
  color: rgba(255,255,255,0.55); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 12px, transparent 12px 24px),
    var(--surface-2);
  padding: 16px;
}

/* ============================================================
   Account area — bookings, billing, next visit, GDPR
   ============================================================ */
.acct-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.acct-link { font-size: var(--fs-meta); color: var(--accent-soft); }

/* Next visit highlight card */
.acct-next { border-color: var(--accent-line); background:
  linear-gradient(0deg, var(--surface), var(--surface)),
  radial-gradient(600px 200px at 100% 0%, rgba(252,0,252,0.10), transparent 70%); }
.acct-next-tag { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 8px; }
.acct-next h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); margin-bottom: 6px; }
.acct-next-when { color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.acct-next-meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ink-faint); font-size: var(--fs-meta); }

/* Booking list */
.acct-bookings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acct-booking { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.acct-booking:first-child { border-top: none; }
.acct-booking-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-booking-title { color: var(--ink); font-weight: 600; }
.acct-booking-sub { color: var(--ink-faint); font-size: var(--fs-meta); }
.acct-booking-ref { color: var(--ink-dim); font-size: var(--fs-meta); }

/* Status badge */
.acct-status { flex-shrink: 0; font-size: var(--fs-meta); font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.acct-status.upcoming { background: var(--accent-tint); color: var(--accent-soft); }
.acct-status.done { background: rgba(255,255,255,0.06); color: var(--ink-faint); }
.acct-status.cancelled { background: rgba(255,90,90,0.12); color: var(--bad); }

/* Billing stat row */
.acct-stat-row { display: flex; gap: 32px; flex-wrap: wrap; }
.acct-stat .num { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.acct-stat .lbl { color: var(--ink-faint); font-size: var(--fs-meta); margin-top: 2px; }

/* Billing table */
.acct-table-wrap { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.acct-table th { text-align: left; color: var(--ink-faint); font-weight: 600; font-size: var(--fs-meta); padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); }
.acct-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.acct-table .right { text-align: right; }
.acct-td-sub { display: block; color: var(--ink-dim); font-size: var(--fs-meta); margin-top: 2px; }
.tnum { font-variant-numeric: tabular-nums; }

/* Password field with show/hide */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { flex: 1; padding-right: 64px; }
.pw-wrap .toggle-pw { position: absolute; right: 10px; background: none; border: none; color: var(--accent-soft); font-size: 14px; cursor: pointer; padding: 6px; }

/* Danger zone */
.acct-danger-zone { border-color: rgba(255,90,90,0.35); }
.btn-danger { background: transparent; border: 1px solid var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad); color: #fff; }

/* "Why you should book": dimmed gameplay image behind the whole section,
   heading and cards sitting over it. The cards keep their solid surface so
   the text stays readable; only the section backdrop shows the image. */
.why-section {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,16,0.80), rgba(10,9,16,0.88));
  z-index: -1;
}
.why-section .section-head .eyebrow,
.why-section .section-head h2 { color: #fff; }
/* "Why you should book" cards: bigger headings, key word picked out in pink. */
.why-card-head { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.12; color: #fff; margin-bottom: 6px; }
.why-card-head .hl { color: var(--accent); }

/* Smooth in-page jumps (e.g. the hero review pill to the reviews section),
   with an offset so the target clears the fixed header. */
html { scroll-behavior: smooth; }
#reviews { scroll-margin-top: 90px; }

/* Hero review strip: Google logo, gold stars and the review count on one
   line, sitting under the hero buttons. Clickable through to Google. */
.hero-reviews {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(16px, 2.5vw, 22px);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  transition: background var(--t-base) var(--ease-out);
}
.hero-reviews:hover { background: rgba(255,255,255,0.16); }
.hero-reviews .rplat-logo { height: 20px; width: auto; }
.hero-reviews-stars { color: #ffc83d; letter-spacing: 1px; font-size: 15px; }
.hero-reviews-text { font-weight: 700; font-size: 15px; }
@media (max-width: 420px) {
  .hero-reviews { gap: 7px; padding: 8px 12px; }
  .hero-reviews-text { font-size: 13.5px; }
}

/* "Unforgettable parties" gallery: nine photos forced to a square grid.
   object-fit crops mixed-ratio sources cleanly to the square tile.
   A hairline top rule keeps the band distinct from whatever precedes it,
   since it appears between different section backgrounds on home vs parties. */
.party-band { border-top: 1px solid var(--line); }
/* Party size options (Small / Large) stacked in the package section. */
.party-tiers {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}
@media (min-width: 640px) {
  .party-tiers { grid-template-columns: 1fr 1fr; align-items: start; }
}

.party-gallery {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: clamp(6px, 1vw, 12px);
  margin-top: clamp(24px, 4vw, 40px);
}
.party-gallery-item {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.party-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .party-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .party-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Escape-room listing cards: link the media and title to the room page,
   and show Book + Explore actions in the footer. */
.er-media-link { display: block; }
.er-title-link { color: inherit; text-decoration: none; }
.er-title-link:hover { color: var(--accent-2, #e879f9); }
.er-actions { display: flex; align-items: center; gap: 14px; }
.er-explore { font-size: 14px; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.er-explore:hover { color: var(--ink); text-decoration: underline; }

/* Contextual internal links under a game/room intro. */
.game-links { max-width: 560px; margin: 20px auto 0; color: var(--ink-faint); }
.game-links a { color: var(--ink-soft); font-weight: 700; }
.game-links a:hover { color: var(--ink); }

/* Related-links line for internal cross-linking (hub-and-spoke). */
.related-links { text-align: center; color: var(--ink-faint); margin: 0; }
.related-links a { color: var(--ink-soft); font-weight: 700; }
.related-links a:hover { color: var(--ink); }

/* ============== 404 ============== */
.section-404 { min-height: 62vh; display: grid; align-items: center; }
/* Full-height 404 hero: brand background image under a dark scrim, with a
   big gradient "404" and the usual forward links. */
.nf-hero { position: relative; isolation: isolate; min-height: 100vh;
  display: grid; align-items: center;
  background-size: cover; background-position: center;
  padding-block: calc(var(--nav-h) + clamp(24px, 6vw, 64px)) clamp(48px, 8vw, 90px); }
.nf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,9,16,0.72) 0%, rgba(10,9,16,0.86) 60%, rgba(10,9,16,0.96) 100%); }
.nf-code { font-weight: 800; line-height: 0.86; letter-spacing: -0.02em;
  font-size: clamp(96px, 24vw, 260px);
  background: var(--grad-violet); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 12px 44px rgba(252,0,252,0.38)); }
.nf-lead { margin-inline: auto; max-width: var(--measure-narrow); }
.nf-links { margin-bottom: clamp(2rem, 5vw, 3rem); margin-top: clamp(2rem, 5vw, 3rem); }
.nf-card { text-decoration: none; color: inherit; display: block;
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out); }
.nf-card h3 { font-size: 18px; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .nf-card:hover { transform: translateY(-4px); border-color: var(--accent-line);
    box-shadow: var(--e-3); }
}
.nf-help a { color: var(--accent-soft); font-weight: 700; }

/* Games-on-arrival note on the individual arena game pages. */
.game-note {
  max-width: 620px; margin: 26px auto 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-md);
  padding: 16px 20px;
}
.game-note p { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.game-note strong { color: var(--ink); }

/* Arena game "About" section: two-column layout on a subtle gradient
   wash. Escape rooms do not use this — they keep the centred single
   column above. Left column is left-justified copy; right column is
   the games-on-arrival note, so it reads as a sidebar callout rather
   than a stacked afterthought. */
.game-about-arena {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-about), var(--bg-1);
}
.game-about-split { align-items: start; }
.game-intro-left .lead,
.game-about-arena .game-links { text-align: left; margin-inline: 0; }
.game-intro-left .lead + .lead { margin-top: var(--sp-04); }
.game-about-arena .feature-list { width: fit-content; max-width: 100%; margin: 22px 0 0; }
/* Two-column checklist for the arena "why" list, so four short items
   don't run the left column on longer than the copy beside it. */
.feature-list-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 24px; width: 100%;
}
@media (max-width: 480px) {
  .feature-list-cols { grid-template-columns: 1fr; }
}
/* Note card sits in the right column rather than centred under the
   copy, so it keeps its accent rail but drops the auto margins. */
.game-note-col { max-width: none; margin: 0; }
@media (max-width: 760px) {
  .game-about-split { row-gap: 28px; }
}

/* ============== WHAT TO EXPECT ============== */
/* Four numbered steps, then four feature cards. Both are image-led, so the
   picture carries the meaning and the text stays short underneath. */
.wte-steps, .wte-features { gap: clamp(20px, 3vw, 32px); }
.wte-step-media, .wte-feature-media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface-2);
  margin-bottom: var(--sp-04);
}
.wte-step-media img, .wte-feature-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wte-step-num {
  position: absolute; top: var(--sp-03); left: var(--sp-03);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; line-height: 1;
}
.wte-step h3, .wte-feature h3 {
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: var(--sp-02);
}
.wte-step .muted, .wte-feature .muted { line-height: 1.6; }
@media (max-width: 900px) {
  .wte-steps, .wte-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wte-steps, .wte-features { grid-template-columns: 1fr; }
  .wte-step-media, .wte-feature-media { aspect-ratio: 16 / 9; }
}
/* Hero headline sits on two lines at desktop width without needing markup
   in the CMS, which escapes tags by design. */
.page-what-to-expect .hero h1 { width: min(100%, 13ch); }

/* About page hero: dimmed 1920px game screenshot behind "The home of VR
   in Northamptonshire", same dim-and-scrim pattern as .why-section. */
.about-hero-dimmed {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.about-hero-dimmed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,9,16,0.80), rgba(10,9,16,0.88));
  z-index: -1;
}
.about-hero-dimmed .section-head .eyebrow,
.about-hero-dimmed .section-head h1,
.about-hero-dimmed .section-head .lead { color: #fff; }