/* ========= XRVR tiny design system ========= */
:root{
  /* Colors */
  --c-bg:#000000;
  --c-fg:#f5f5f5;
  --c-text:#e9e9e9;
  --c-accent:#00ff66;
  --c-accent-ink:#001b0f;

  /* Spacing scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-8:48px;

  /* Layout and misc */
  --radius:14px;
  --maxw:1100px;
  --focus:2px solid var(--c-accent);
}

/* ========= Base / reset-lite ========= */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--c-bg);
  color:var(--c-fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-accent);text-decoration:none}
a:focus,button:focus,input:focus,textarea:focus,summary:focus{outline:var(--focus);outline-offset:2px}
p{color:var(--c-text)}
.sr-only{position:absolute;left:-9999px}

/* ========= Layout utilities ========= */
.container{width:100%;max-width:var(--maxw);margin:auto;padding:0 var(--space-4);text-align: center;}
.section{padding:var(--space-8) 0}
.grid{display:grid;gap:var(--space-5)}
@media (min-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}

/* ========= Header / Nav ========= */
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(0,0,0,.9);
  backdrop-filter:saturate(140%) blur(6px);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:inline-flex;align-items:center}
.nav__toggle{
  width:40px;
  height:40px;
  border:none;               /* remove border */
  background:transparent;    /* remove grey background */
  color:var(--c-fg);
  border-radius:10px;        /* can keep if you want rounded hit area */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;

  /* needed for the twist */
  transition: transform .2s ease;
  transform-origin: 50% 50%;
}

.nav__toggle:focus,
.nav__toggle:focus-visible{
  outline: none !important;
}

/* rotate the menu button when the menu is open */
.nav__toggle[aria-expanded="true"]{
  transform: rotate(90deg);
}

/* desktop-first: menu is visible and can wrap to two rows */
.nav__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;            /* ← was none */
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;          /* allow second row when tight */
}

/* mobile: menu is hidden until the toggle opens it */
@media (max-width: 899px){
  .nav__menu{
    display:none;          /* JS sets it back to flex when opened */
    justify-content:flex-end;
    gap:8px 12px;
  }
}


.nav__menu a{padding:8px 10px;border-radius:10px}
.nav__menu a:focus,.nav__menu a:hover{background:#0f0f0f}


/* ========= Hero ========= */
.hero{padding:var(--space-8) 0;text-align:center}
.hero h1{font-size:clamp(28px,4.5vw,44px);margin:0 0 var(--space-3)}
.hero__tag{max-width:800px;margin:0 auto var(--space-5)}
.hero__ctas{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}

/* ========= Buttons ========= */
.btn{
  display:inline-block;padding:12px 18px;border-radius:999px;margin-top: auto;
  font-weight:600;border:2px solid transparent;transition:transform .05s ease
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--c-accent);color:var(--c-accent-ink)}
.btn--primary:focus,.btn--primary:hover{border-color:var(--c-accent)}
.btn--secondary{background:#101010;border-color:#1c1c1c;color:#fff}
.btn--secondary:hover{border-color:var(--c-accent)}
.btn--ghost{background:transparent;border-color:#2a2a2a;color:#fff}

/* ========= Cards ========= */
.cards .card{
  background:#0b0b0b;border:1px solid #161616;border-radius:var(--radius);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)
}
.card h3{margin:.25rem 0}

/* ========= Pricing (responsive, centered) ========= */
.pricing{
  display:grid;
  gap:var(--space-5);
  grid-template-columns:repeat(1,minmax(0,1fr));   /* mobile */
  text-align:center;
}
@media (min-width:640px){
  .pricing{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .pricing{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.price{
  background:#0b0b0b;border:1px solid #161616;border-radius:var(--radius);
  padding:var(--space-4);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;                 /* fill the grid track */
  max-width:none;             /* remove previous 320px cap */
}

/* Tight, centered bullets */
.price ul{ list-style-position:inside; padding-left:0; margin:0; }
.price li{ text-align:center; }
.price__num{ font-size:1.5rem;color:var(--c-accent);margin:.25rem 0 .5rem; }


/* ========= Social proof ========= */
.logos{display:flex;gap:var(--space-5);flex-wrap:wrap;align-items:center}
.quote{margin-top:var(--space-4);border-left:4px solid var(--c-accent);padding-left:var(--space-4)}

/* ========= FAQ ========= */
details{
  background:#0b0b0b;border:1px solid #161616;border-radius:var(--radius);
  padding:var(--space-3);margin-bottom:var(--space-3)
}
summary{cursor:pointer;font-weight:600}

/* ========= Form ========= */
/* Center the form without affecting text alignment */
.form {
  display: grid;
  gap: var(--space-3);
  max-width: 700px;
  margin-left: auto;   /* center horizontally */
  margin-right: auto;  /* center horizontally */
  text-align: left;    /* keep text left-aligned */
}

.form__row{display:grid;gap:6px}
input,textarea{
  background:#0b0b0b;border:1px solid #2a2a2a;border-radius:10px;color:#fff;padding:12px;width:100%
}
input[type="radio"] {
  width: auto;         /* Only as wide as the radio toggle itself */
  margin-right: 8px;   /* Space between the toggle and the title text */
}

input:focus,textarea:focus{border-color:var(--c-accent)}
.contact-inline{margin-top:var(--space-3)}


/* ========= Footer ========= */
.site-footer{
  margin-top:var(--space-8);padding:var(--space-5) 0;border-top:1px solid #151515;
  background:#060606;color:#ccc
}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.footer__inner a{color:#ccc}
.footer__inner a:hover{color:#fff}

/* ========= Utilities ========= */
.small{font-size:.9rem;color:#cfcfcf}
.skip-link{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden
}
.skip-link:focus{
  position:static;width:auto;height:auto;display:inline-block;background:#fff;color:#000;
  padding:6px 10px;border-radius:6px
}
/* Center with CSS Grid */
#offerings .grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-items: center;     /* centers each card */
  gap: var(--space-5);
  text-align:center;
}
#offerings .card{
  width:100%;
  max-width:320px;
}
#offerings .card img{ margin:0 auto; }

/* Center Games and VRASEL sections like Offerings */
#games .grid,
#vrasel .grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-items: center;
  gap: var(--space-5);
  text-align: center;
}

#games .card,
#vrasel .card {
  width: 100%;
  max-width: 320px;           /* match the Offerings card width */
}

#games .card img,
#vrasel .card img {
  margin: 0 auto;             /* keep images centered in the card */
}

/* Make section grids use the full row */
.section.container > .grid,
.section.container > .pricing{

  width: 100%;
}

/* === Center the "Games" and "VRASEL" sections (text + button) === */
#games,
#vrasel {
  /* Center inline elements (headings, paragraph, CTA) */
  text-align: center; /* change: center this section's content */
}

#games .btn,
#vrasel .btn {
  /* Make the CTA sit centered even if future styles change text-align */
  margin-inline: auto; /* change: center the button block */
}



/* === Center the partner logos and the quote block === */
#proof-title {
  text-align: center; /* change: center the section heading */
}

.logos {
  /* Already flex; just center the row of logos */
  justify-content: center; /* change: center the logo group */
}

.quote {
  /* Keep the styled left border, but center the block on the page */
  margin-left: auto;  /* change: center the quote container */
  margin-right: auto; /* change: center the quote container */
  text-align: center; /* change: center quote text to match section */
  /* optional: constrain very long lines slightly for readability */
  max-width: 60ch;    /* change: keep lines comfortable (optional) */
}

/* Center Pricing title and paragraph under it */
#pricing-title,
#pricing-title + .small {
  text-align: center;
}

/* FAQ title and container */
#faq {
  max-width: 800px;       /* keep it from running full width */
  margin: 0 auto;         /* center the block */
  text-align: center;     /* center the heading */
  padding: 0 var(--space-4);
}

/* Center the Questions / Contact Us section */
#contact {
  text-align: center;
}

/* Keep the form centered but its label text left-aligned */
#contact form {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}

/* === change: As seen at carousel styles === */
#as-seen-at { text-align: center; }

.carousel {
  position: relative;
  max-width: var(--maxw);
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-4);
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-4) 0;
  margin: 0;
  list-style: none;
  will-change: transform;
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
}

.carousel__slide {
  flex: 0 0 auto;           /* do not shrink */
  width: 160px;             /* visual width per logo */
  display: grid;
  place-items: center;
  opacity: 0.9;
}
.carousel__slide img { max-width: 140px; height: auto; }
.carousel__slide:hover { opacity: 1; filter: grayscale(0%); }

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #2a2a2a;
  background: #0b0b0b;
  color: var(--c-fg);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1;
}
.carousel__btn--prev { left: var(--space-4); }
.carousel__btn--next { right: var(--space-4); }


.carousel__btn:focus { outline: var(--focus); }
.carousel__btn:hover { border-color: var(--c-accent); }

/* === change: make sure the Headsets row stays hidden unless Room‑Scale is chosen === */
/* (JS controls visibility, this keeps layout tight when hidden) */
#indoor-count-row[hidden]{
  display:none !important;
}

/* === Price Calculator: keep option title on left and radio on right === */
/* Scope to the specific "exp" group row */
.form__row[aria-labelledby="exp-label"] > div{
  /* give the inner wrapper a steady width so items don't wrap oddly */
  max-width: 900px;              /* adjust as you like */
  width: 100%;
  margin-inline: auto;
}

/* Each label becomes a two‑item row: text on left, toggle on right */
.form__row[aria-labelledby="exp-label"] label{
  display: flex;                  /* change: horizontal row */
  align-items: center;            /* change: center vertically */
  justify-content: space-between; /* change: spread text and input */
  gap: 12px;                      /* change: breathing room */
  padding: 12px 14px;             /* optional: touch target */
  border: 1px solid #161616;      /* optional: light boundary */
  border-radius: 10px;
  background: #0b0b0b;
}

/* Put the radio on the right even if it appears first in the HTML */
.form__row[aria-labelledby="exp-label"] label > input{
  order: 2;                       /* change: move input to the end */
  margin: 0;
  flex: 0 0 auto;
}

/* Let the text shrink and wrap before the input does */
.form__row[aria-labelledby="exp-label"] label{
  min-height: 44px;               /* accessibility: finger‑friendly */
  line-height: 1.3;
}

/* Keep labels from stacking the radio above the text on small screens */
@media (max-width: 0px){
  .form__row[aria-labelledby="exp-label"] label{
    white-space: normal;          /* text can wrap */
  }
}

/* change: fully collapse Arena add-ons row when hidden */
#arena-addons-row[hidden] { display: none !important; }

/* === change: Arena add-ons row locked to two columns (title | controls) === */
#calc .calc-row--addons{
  display:grid;
  grid-template-columns: clamp(160px, 28%, 240px) 1fr;
  align-items:center;
  column-gap:14px;
  row-gap:8px;
}
#calc .calc-row--addons .calc-row__title{
  margin:0;
  text-align:left;
  white-space:nowrap;
}
#calc .calc-row--addons .calc-row__controls{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* label row: text left, checkbox right (like the radios we fixed) */
#calc .calc-row--addons .check-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid #161616;
  border-radius:10px;
  background:#0b0b0b;
}

/* keep the checkbox only as wide as itself (don’t inherit 100% width) */
#calc .calc-row--addons .check-inline input[type="checkbox"]{
  width:auto;
  margin:0;
  flex:0 0 auto;
}

/* fully collapse the row when JS toggles [hidden] */
#arena-addons-row[hidden]{ display:none !important; }

/* Center the Filter title */
#filters-title {
  text-align: center;
}

/* Center the State label */
label[for="events-filter-state"] {
  text-align: center;
  display: block;
}

/* Shrink and center the dropdown */
#events-filter-state {
  width: 110px;
  margin: 0 auto;
  display: block;
  text-align-last: center; /* Centers selected text */
}

.btn--share {
  background-color: #00ff66;
  color: #000;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.btn--share:hover {
  background-color: #00cc55;
}

/* Keep fallback share links compact and aligned */
.share-fallback .btn {
  padding: 8px 10px;
}

#live-title { text-align: center; }

/* ===== Equipment page alignment fixes ===== */

/* 1) Make every equipment card a flex column so we can pin the CTA to the bottom */
#catalog .card,
#headsets .card,
#haptics .card,
#controllers .card,
#rig .card {
  display: flex;
  flex-direction: column;
}

/* 2) Normalize image presentation (centered, consistent size) */
#catalog .card img,
#headsets .card img,
#haptics .card img,
#controllers .card img,
#rig .card img {
  margin: 0 auto;                /* center image in card */
  width: 100%;
  max-width: 640px;              /* keep crisp on large screens */
  height: 200px;                 /* <- make all card images same display height */
  object-fit: cover;             /* crop gracefully to fill */
  border-radius: var(--radius);
}

/* If the top catalog grid needs a slightly shorter image, use this instead of 200px: */
/* #catalog .card img { height: 180px; } */

/* 3) Push the final element (usually the button) to the bottom so rows align cleanly */
#catalog .card > :last-child,
#headsets .card > :last-child,
#haptics .card > :last-child,
#controllers .card > :last-child,
#rig .card > :last-child {
  margin-top: auto;
}

/* 4) Smooth out spacing so headings/paragraphs don’t create odd gaps */
#catalog .card h3,
#headsets .card h3,
#haptics .card h3,
#controllers .card h3,
#rig .card h3 {
  margin: 0.25rem 0 0.25rem;
}

/* change: neon headings for contrast */
h2, h3 { color: var(--c-accent); }

/* utility: center text */
.center { text-align: center; }

#catalog .card p,
#headsets .card p,
#haptics .card p,
#controllers .card p,
#rig .card p {
  margin: 0 0 0.5rem;
}

/* 5) Details blocks won’t blow up the height—keep them compact */
#headsets .card details,
#haptics .card details,
#controllers .card details,
#rig .card details {
  margin-top: 0.5rem;
}


/* === Equipment: show full images (no cropping) and keep rows aligned === */

/* Common: center images and keep them inside a fixed box */
#catalog .card img,
#headsets .card img,
#haptics .card img,
#controllers .card img,
#rig .card img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 640px;
  object-fit: contain;       /* change: show entire image */
  background: #0b0b0b;       /* looks clean if image has transparency */
  border-radius: var(--radius);
}

/* Set consistent per‑section heights so card text/buttons line up */
#catalog .card img {         /* "What we bring" row */
  height: 180px;             /* even cards, no crop */
}

#headsets .card img,
#haptics .card img,
#rig .card img,
#controllers .card img {     /* detail sections */
  height: 260px;             /* larger canvas so tall/wide images fit */
}

/* Keep CTAs aligned across cards */
#catalog .card,
#headsets .card,
#haptics .card,
#controllers .card,
#rig .card {
  display: flex;
  flex-direction: column;
}

#catalog .card > :last-child,
#headsets .card > :last-child,
#haptics .card > :last-child,
#controllers .card > :last-child,
#rig .card > :last-child {
  margin-top: auto;          /* pins button/details to bottom */
}

/* Tidy heading/paragraph spacing inside equipment cards */
#catalog .card h3,
#headsets .card h3,
#haptics .card h3,
#controllers .card h3,
#rig .card h3 { margin: .25rem 0 .25rem; }

#catalog .card p,
#headsets .card p,
#haptics .card p,
#controllers .card p,
#rig .card p { margin: 0 0 .5rem; }

/* Center the Offerings section title to match "Game Selection" */
#offerings-title { 
  text-align: center;
}

  /* Ensure items don’t stretch; keep CTA compact */
  .nav__menu li { list-style: none; }
  .nav__menu a,
  .nav__menu .btn {
    display: inline-block;
    width: auto;                /* stops the green button from spanning full width */
  }
}

/* === Desktop/wide: show full menu; allow 2-row wrap when space is tight === */
@media (min-width: 900px){
  /* Put brand and menu in a grid so the menu can use the remaining width */
  .nav{
    display: grid;
    grid-template-columns: auto 1fr; /* brand | menu */
    align-items: center;
    min-height: 64px;
  }

  /* Inline menu that can wrap to a second row (no horizontal scroll) */
  .nav__menu{
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;   /* or 'flex-end' if you prefer right-align */
    flex-wrap: wrap; !important;               /* <-- allow wrap */
    column-gap: 16px;
    row-gap: 6px;                  /* spacing between rows when it wraps */
  }

  .nav__menu > li{ flex: 0 0 auto; }  /* keep items compact; no stretching */

  /* Keep the mobile toggle hidden on desktop */
  .nav__toggle{ display: none !important; }
}

/* === Mobile nav toggle (visible under 900px) === */
@media (max-width: 899px) {
  .nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform .2s ease;
  }
  .nav__toggle[aria-expanded="true"] {
    transform: rotate(90deg);
  }
}

/* === Desktop nav (hide toggle, show menu inline) === */
@media (min-width: 900px) {
  .nav__toggle {
    display: none !important; /* <-- hide the button completely */
  }
  .nav__menu {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}


/* Indoor offerings: two images side-by-side inside .game__media */
.media-pair{
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:0 8px;
}
.media-pair img{ flex:0 0 auto; max-width:46%; height:auto; object-fit:contain; }


/* === Indoor page: card grid + centered titles === */
.indoor-offers {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.offer-card.card {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.offer-card .offer-media {
  display: flex;
  justify-content: center;
  gap: 16px;
  height: 220px;
}

.offer-card .offer-media img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
}

/* Safety: ensure cards look right anywhere they're used */
.card {
  background: #0b0b0b;
  border: 1px solid #161616;
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* ===== Shared screenshots modal (used by games + media) ===== */
.shots{ position:fixed; inset:0; display:none; z-index:1000; }
.shots[aria-hidden="false"]{ display:block; }

.shots__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.85); }

.shots__dialog{
  position:relative;
  max-width: min(1100px, 96vw);
  margin: 5vh auto;
  background:#0b0b0b;
  border:1px solid #161616;
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.shots__figure{ margin:0; display:grid; gap:8px; }
.shots__img{ width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; border-radius:10px; }
.shots__cap{ text-align:center; color:#cfcfcf; }

.shots__thumbs{ margin-top:10px; display:flex; gap:8px; overflow:auto; padding-bottom:6px; }
.shots__thumbs img{ width:84px; height:48px; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer; }
.shots__thumbs img[aria-current="true"]{ border-color: var(--c-accent); }