/* ==========================================================================
   House of Winners — game grid

   Used by the Slot Game page. Deliberately not named slot.css: the same tab
   row + card grid is the design for the Live Casino and Sportbook pages too,
   so those views can adopt .hw-games without a second stylesheet.

   The hero slideshow and the announcement bar above this section are shared
   with the home page and stay in css/home.css — nothing here touches them.
   ========================================================================== */

/* Paints the page column, not just the section.

   style.css:410 already gives .main `flex:1` inside the min-height:100%
   .page-wrapper, so it stretches to fill the viewport — it simply has no
   background of its own, and the legacy body{background:#fff} shows through
   whatever it doesn't cover. That is invisible while the grid is long enough
   to reach the fold, but filtering to a short category (Sport is two cards)
   shrinks the content and leaves a white block above the tab bar.

   Scoped to a modifier class rather than applied to .main, because the legacy
   member/deposit/withdraw pages share .main and are still white by design. Add
   hw-main--dark to any view as it gets redesigned. */
.hw-main--dark{background-color:var(--hw-page-bg,#000);}

.hw-games{
  background:var(--hw-page-bg,#000);
  padding:40px 0 60px;
}
.hw-games__inner{
  width:100%;
  max-width:var(--hw-container);
  margin-inline:auto;
  padding:0 20px;
}

/* --------------------------------------------------------------------------
   Category tabs
   Only the active tab draws a pill; the rest are plain text on the black
   background, per the frame.
   -------------------------------------------------------------------------- */
/* 4D embed — the one game that renders inline instead of launching. */
.hw-games__embed{margin-top:30px;line-height:0;}
.hw-games__embed iframe{display:block;width:100%;border:0;}

/* Page heading — the Sport and Live pages are single-category, so they carry a
   title where the slot page carries the tab row. Same gold gradient as the
   account/auth page titles. */
.hw-games__heading{
  margin:0 0 26px;
  font-family:var(--hw-font);
  font-size:3.2rem;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.03em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#FFF8A2 16.58%,#C49616 82.61%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@media (max-width:768px){
  .hw-games__heading{font-size:2.4rem;margin-bottom:14px;}
}

.hw-games__tabs{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 30px;
}
.hw-games__tab{
  flex:0 0 auto;
  appearance:none;
  border:0;
  background:transparent;
  border-radius:var(--hw-radius-pill,20px);
  padding:8px 22px;
  font-family:var(--hw-font);
  font-size:var(--hw-fs-btn,1.4rem);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
  color:var(--hw-on-surface,#fff);
  cursor:pointer;
  transition:color .15s ease, background-color .15s ease;
}
.hw-games__tab:hover{color:var(--hw-gold,#FACF5A);}
.hw-games__tab.is-active{
  background:var(--hw-gold-gradient);
  color:#000;
}
.hw-games__tab:focus-visible{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   Card grid
   Four across at the design width. The aspect ratio is measured off the frame
   (287 x 175); cards keep it at every width so a row never goes ragged, and
   artwork of a different ratio is cropped rather than allowed to resize the
   cell.
   -------------------------------------------------------------------------- */
.hw-games__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px 30px;
  list-style:none;
  margin:0;
  padding:0;
}
.hw-games__cell{margin:0;}
.hw-games__cell[hidden]{display:none;}

.hw-games__card{
  display:block;
  position:relative;
  aspect-ratio:287 / 175;
  overflow:hidden;
  border:1px solid var(--hw-gold-line,#9F853F);
  border-radius:10px;
  background:#0A0A0A;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio:1/1){
  .hw-games__card{height:0;padding-top:60.98%;}
  .hw-games__card img{position:absolute;inset:0;}
}
.hw-games__card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hw-games__card:hover,
.hw-games__card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--hw-gold,#FACF5A);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}
.hw-games__card:focus-visible{
  outline:2px solid var(--hw-focus,#FACF5A);
  outline-offset:2px;
}

/* Legacy style.css sets display on p/li, so the hidden attribute needs help. */
.hw-games__empty[hidden]{display:none;}
.hw-games__empty{
  margin:40px 0 0;
  font-family:var(--hw-font);
  font-size:var(--hw-fs,1.4rem);
  color:var(--hw-muted,#B3B3B3);
  text-align:center;
}

/* --------------------------------------------------------------------------
   Responsive
   Column count only — the card itself is ratio-locked, so nothing else needs
   to change. The tab row scrolls sideways on narrow screens rather than
   wrapping to a second line.
   -------------------------------------------------------------------------- */
@media (max-width:1024px){
  .hw-games__grid{grid-template-columns:repeat(3,1fr);gap:20px 18px;}
}
/* Mobile frame is 393 wide with a 375 content column — 9px either side. Cards
   are 185 x 115 with a 5px gutter on both axes (185 + 5 + 185 = 375 exactly),
   so the grid is edge-to-edge with almost no air between cells. The tab row
   keeps its 14px type here; only its padding tightens. */
@media (max-width:768px){
  .hw-games{padding:10px 0 20px;}
  .hw-games__inner{padding:0 9px;}
  .hw-games__tabs{
    gap:10px;
    margin-bottom:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hw-games__tabs::-webkit-scrollbar{display:none;}
  .hw-games__tab{padding:9px 15px;}
  .hw-games__grid{grid-template-columns:repeat(2,1fr);gap:5px;}
  .hw-games__card{aspect-ratio:185 / 115;border-radius:6px;}
  @supports not (aspect-ratio:1/1){
    .hw-games__card{padding-top:62.16%;}
  }
}