/* Tiny helpers for game pages (uses your existing design system) */
.center { text-align: center; }

.games-filters{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  align-items: end;
  max-width: var(--maxw);
  margin: 0 auto;
}
.games-filters__field{
  display:grid;
  gap: 6px;
}
.games-filters input[type="search"],
.games-filters select{
  background:#0b0b0b;
  border:1px solid #2a2a2a;
  border-radius:10px;
  color:#fff;
  padding:12px;
  width:100%;
}

/* Game cards */
#games-grid .card{
  width:100%;
  max-width: 340px;            /* keeps rows tidy */
  display:flex;
  flex-direction:column;
}
#games-grid .card img{
  margin:0 auto;
  width:100%;
  height:200px;
  object-fit:cover;            /* good variety across art styles */
  border-radius: var(--radius);
}
#games-grid .card .game-meta{
  margin:0;
  padding-left:1rem;
  color:var(--c-text);
}
#games-grid .card .btn{ margin-top:auto; } /* pin button to bottom */

/* === Arena games: make images fit without cropping === */
.game__media{
  width:100%;
  aspect-ratio:16/9;              /* consistent box */
  background:#000;                /* XRVR black behind letterbox */
  border-radius:12px;
  display:grid;
  place-items:center;             /* center any aspect ratio */
  overflow:hidden;
}
.game__img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;             /* no cropping */
  display:block;
}

.card {
  display: flex;
  flex-direction: column;   /* stack image + text vertically */
  justify-content: space-between;
  /* height: 350px;             pick a consistent height for all cards */
  overflow: hidden;
}

.card img {
  width: 100%;
  object-fit: contain;      /* no cropping, full image fits */
  display: block;
  margin: 0 auto;
}

.card-body {
  flex-grow: 1;             /* text stretches to fill space */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ===== Screenshots modal ===== */
.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__close{
  position:absolute; top:10px; right:10px;
}

.shots__figure{
  margin:0; display:grid; gap:8px;
}

.shots__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;             /* show full image (no crop) */
  background:#000;                /* letterbox */
  border-radius:10px;
}

.shots__cap{
  text-align:center; color:#cfcfcf;
}

.shots__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid #2a2a2a; background:#101010; color:#fff;
}
.shots__nav--prev{ left:10px; }
.shots__nav--next{ right:10px; }
.shots__nav:focus{ outline:2px solid var(--c-accent); outline-offset:2px; }

.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);
}

/* Button row inside cards stays aligned at bottom */
.game-card{
  display:flex; flex-direction:column; justify-content:space-between;
  height:420px; /* your chosen uniform height */
}
.game-card .btn-row{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

/* ==== XRVR: Arena games grid fix (targets actual list id) ==== */
/* Make the UL/section with id="games-list" the grid container */
#games-list {
  display: grid !important;                 /* override any .grid defaults */
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(220px, 1fr)); /* mobile/tablet */
  align-items: stretch;
}

/* 2 columns on medium screens */
@media (min-width: 600px){
  #games-list{
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

/* 3 columns on medium screens */
@media (min-width: 900px){
  #games-list{
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}

/* 4 columns on wide screens */
@media (min-width: 1280px){
  #games-list{
    grid-template-columns: repeat(4, minmax(220px, 1fr));
  }
}

/* Let cards fill the grid tracks (override inline max-width:320px) */
#games-list .card { max-width: none !important; }

/* ===== Events page: use the same grid + card look as games ===== */

/* Grid like games */
#events-list{
  display:grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(240px, 1fr));
  align-items: stretch;
}

/* bump columns on wider screens */
@media (min-width: 700px){
  #events-list{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (min-width: 1100px){
  #events-list{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* Event cards match your cards */
.event-card{
  background:#0b0b0b;
  border:1px solid #161616;
  border-radius: var(--radius);
  padding: var(--space-4);
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  justify-self: center;
  text-align-last: center;
}

/* Keep buttons centered and aligned at the bottom */
.event-card .btn-row{
  margin-top:auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

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

/* Game capability badges */
/* Title row with right-aligned badges */
.game__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.game__title{
  margin:0;               /* keep the row tight */
}

/* Capability badges (unchanged visually, now sit on the right) */
.game__flags{
  display:flex;
  gap: var(--space-2);
  align-items:center;
  margin:0;               /* no extra gap above/below */
}

.flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}
.flag__txt{ transform: translateY(1px); }

/* Past events grid (same as upcoming) */
#past-events-list{
  display:grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, minmax(240px, 1fr));
  align-items: stretch;
}
@media (min-width: 700px){
  #past-events-list{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (min-width: 1100px){
  #past-events-list{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* Normalize the State select inside the events filter grid to match Format */
.games-filters #events-filter-state {
  width: 100%;
  margin: 0;           /* no auto-centering */
  display: block;
  text-align-last: initial;
}

/* Keep State + Format equal width (you added this already) */
.games-filters__field--half { grid-column: span 1; min-width: 0; }
@media (max-width: 700px){
  .games-filters__field--half { grid-column: 1 / -1; }
}

/* ---- Arena Games: let covers define their own height, no cropping ---- */
#games-list .game-card {               /* allow variable card heights */
  height: auto;
}

#games-list .card {                    /* don't hide anything inside */
  overflow: visible;
}

/* image wrapper: no forced aspect ratio box */
#games-list .game__media{
  aspect-ratio: auto;
  display: block;
  background: #000;                    /* keep XRVR black behind PNGs */
  border-radius: 12px;
  overflow: hidden;
}

/* cover images: fill width, keep intrinsic aspect */
#games-list .game__img{
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* cancel any generic caps applied to images inside cards */
#games-list .card img{
  max-height: none;
  height: auto;
  object-fit: contain;
}

/* Events page: compact, centered selects (override the 100% width) */
#events-filter-state,
#events-filter-format{
  width: auto;            /* don't stretch */
  min-width: 110px;       /* same base as your old State control */
  justify-self: center;   /* center in the grid cell */
  text-align-last: center;/* center the visible label text */
}

/* If you used the earlier "normalize" block, override it back */
.games-filters #events-filter-state{ margin:0; }

/* EVENTS page: make State + Format compact & centered */
#events-filter-state,
#events-filter-format{
  width: auto;           /* stop stretching to 100% */
  min-width: 150px;      /* tweak if you want wider/narrower */
  justify-self: center;  /* center each select within its grid cell */
  text-align-last: center;
}

/* Center the labels above each select */
label[for="events-filter-state"],
label[for="events-filter-format"]{
  text-align: center;
}

/* If an earlier rule forced State back to 100% width, override it here */
.games-filters #events-filter-state{ width: auto; margin: 0; justify-self: center;
    text-align-last: center;}