@media(min-width:1100px){body.table-hero-preview.redesign-v2.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero {height:37.5vw;min-height:420px}}
/* A single native game composition: no overlapping room textures or masks over controls. */
body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero {overflow:visible}
body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero .ls-hero-art {
  background:linear-gradient(90deg,#080a0999,transparent 52%),url('promotions/desktop-table-wide-native-v5.webp') center center / cover no-repeat;
  /* a copy near the size it's drawn, so it doesn't go jaggy shrinking 3840px into a 1x screen (Shaun, 2026-10-29: "make it
     so it doesnt get pixelly when we scale"): 1920 wide for 1x screens, 3840 for 2x */
  background-image:linear-gradient(90deg,#080a0999,transparent 52%),image-set(url('promotions/desktop-table-wide-native-v5-1920.webp') 1x,url('promotions/desktop-table-wide-native-v5.webp') 2x);
  opacity:1;left:calc(50% - 50vw);right:auto;width:100vw;
}
body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero::after {content:none}
/* Phones and tablets: the table under the buttons and the "Play money only" line, as wide as the buttons, never behind them
   (Shaun, 2026-10-29: "this is overlapping the ghost button, cant we have it be the same width and below the play money
   tagline?"). The old hero keeps a fixed space under its buttons (lobby-home-v3.css, 330px / 20px + clamp(170px,52vw,240px));
   the table sits in that space at 16:9 of the buttons' width, and the last block's margin adds whatever more it needs
   (a percentage margin is a share of the hero's inner width, the buttons' width). */
@media(max-width:1099px){
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero .ls-hero-art {background:#090c0b}
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero::before {
  content:"";position:absolute;z-index:1;left:32px;right:32px;bottom:16px;aspect-ratio:16/9;pointer-events:none;
  background:url('promotions/desktop-table-native-v5.webp') center / cover no-repeat;border-radius:8px;   /* 2048 wide: about 2x a tablet's box */
 }
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero > :last-child {margin-bottom:max(0px,calc(56.25% - 302px))}
}
@media(max-width:719px){
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero::before {left:calc(50% - 50vw);right:auto;width:100vw;bottom:8px;border-radius:0;background-image:url('promotions/desktop-table-native-v5-1600.webp');background-size:118% auto}   /* 1280 wide: about 3x a phone's box. 18% in, so the table's rail reaches the buttons' edges (Shaun, 2026-10-29: "make the table hero image in mobile bigger so the edges of the table extend as far as the button ... 15-20% bigger") */
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero > :last-child {margin-bottom:max(0px,calc(56.25vw - clamp(170px,52vw,240px)))}   /* the table runs the screen's full width now: its 16:9 height is 56.25vw */
}

/* Lower homepage uses promotions.php's open, champagne-and-ivory treatment. */
/* the gap the cards use above the rule, and the full content width like the footer (Shaun, 2026-10-29: "kill this HR and space" /
   "why do the cards not span the full width of the content area?") */
body.table-hero-preview #lobby #explore-muck {
  margin:24px 0 0; padding:0 40px;   /* 24px under the hero, the gap the cards keep between themselves (Shaun: "leave some space
                                        like the padding for the other cards"), and 40px either side ("make 40px of padding on both
                                        sides of the cards under") */
  color:#eee9dc;
}
body.table-hero-preview #lobby #explore-muck .hp-features {gap:24px;padding-top:24px;border-top:1px solid #c7ab6a33}   /* the rule back, 24px either side of it (Shaun: "put the hr back above the cards just not as much space"), as wide as the cards */
body.table-hero-preview #lobby #explore-muck .hp-feature {
  background:transparent; border:0; border-radius:0; padding:0;
  overflow:visible; box-shadow:none;
}
body.table-hero-preview #lobby #explore-muck .hp-feature:first-child {padding-left:0}
body.table-hero-preview #lobby #explore-muck .hp-feature:last-child {padding-right:0}
body.table-hero-preview #lobby #explore-muck .hp-feature + .hp-feature {border-left:0}
body.table-hero-preview #lobby #explore-muck .hp-copy {padding:24px 0 0}
body.table-hero-preview #lobby #explore-muck .hp-link {color:#dfc98f;font-size:14px;min-height:44px}
body.table-hero-preview #lobby #explore-muck .hp-shot {height:232px;min-height:232px;background:#0b1713;overflow:hidden;border-radius:8px;border:1px solid #c7ab6a33}
/* Uniform artwork shade across all three feature cards. */
body.table-hero-preview #lobby #explore-muck .hp-shot::after {content:"";position:absolute;inset:0;background:rgb(0 0 0 / 16%);pointer-events:none}
body.table-hero-preview #lobby #explore-muck .hp-shot img {inset:0;width:100%;height:100%;background:transparent;filter:none;mask-image:none;border-radius:0;object-fit:cover}
body.table-hero-preview #lobby #explore-muck .hp-new {position:absolute;top:12px;right:12px;transform:none;width:auto;padding:0;margin:0;background:none;color:#a99c79;font-size:10px;text-align:left}
body.table-hero-preview #lobby #explore-muck .hp-secondary {margin-top:40px;padding:32px 0;gap:24px;border-top:1px solid #c7ab6a33;border-bottom:1px solid #c7ab6a33}
body.table-hero-preview #lobby #explore-muck .hp-secondary>a {
  min-height:136px;padding:16px;gap:20px;background:#101512;border:1px solid #c7ab6a33;border-radius:8px;
}
body.table-hero-preview #lobby #explore-muck .hp-secondary>a:first-child {padding-left:16px}
body.table-hero-preview #lobby #explore-muck .hp-secondary>a:last-child {padding-right:16px}
body.table-hero-preview #lobby #explore-muck .hp-secondary>a+a {border-left:1px solid #c7ab6a33}
body.table-hero-preview #lobby #explore-muck .hp-secondary img {position:static;width:104px;height:104px;background:none;filter:none;object-fit:cover;border-radius:4px}
body.table-hero-preview.redesign-v2.home-v3:not(.game-section-page):not(.s2-panel-active) #lobby .v2-reviews {
  margin:40px 40px 32px;padding:0;border:0;gap:24px;   /* the cards' own edges and gap, so each review sits under a card (Shaun, 2026-11-07: "thse testimonails should be aligned w the cards above") */
}
/* (the footer's warm tint is gone: its text all grey, as on every other page; Shaun, 2026-11-01: "kill the yellow text from this
   footer, keep it all the grey") */
@media(max-width:1099px){
 body.table-hero-preview #lobby #explore-muck .hp-feature {padding:24px 0}
 body.table-hero-preview #lobby #explore-muck .hp-new {top:36px}
 body.table-hero-preview #lobby #explore-muck .hp-feature + .hp-feature {border-left:0;border-top:1px solid #c7ab6a33}
 body.table-hero-preview #lobby #explore-muck .hp-copy {padding:0 24px 0 0}
 body.table-hero-preview #lobby #explore-muck .hp-secondary {margin-top:24px;padding:0}
 body.table-hero-preview #lobby #explore-muck .hp-secondary>a {padding:24px 0}
 body.table-hero-preview #lobby #explore-muck .hp-secondary>a+a {border-left:0;border-top:1px solid #c7ab6a33}
}
@media(max-width:600px){
 body.table-hero-preview #lobby #explore-muck {padding:0}   /* phones keep the page's own edges */
 body.table-hero-preview #lobby #explore-muck {padding-top:8px}
 body.table-hero-preview #lobby #explore-muck .hp-feature {text-align:center}
 body.table-hero-preview #lobby #explore-muck .hp-copy {padding:16px 8px 0;align-items:center}
 body.table-hero-preview #lobby #explore-muck .hp-new {text-align:center}
 body.table-hero-preview.redesign-v2.home-v3:not(.game-section-page):not(.s2-panel-active) #lobby .v2-reviews {gap:28px;margin-inline:0}   /* phones: the cards drop their 40px sides too */
}

/* Soften title color only; retain the site's existing typeface and weight. */
body.table-hero-preview #lobby #explore-muck :is(.hp-copy h2,.hp-secondary h3) {color:#cbc8bf}
body.table-hero-preview #lobby #explore-muck .hp-feature:first-child .hp-shot img {object-position:center;transform:scale(1.378);transform-origin:50% 62%}   /* the centered pair (poker-satire-bill-mobile-redraw-v1), Bill and Bob bigger (Shaun, 2026-10-29: 1.3, then "6% bigger") */
body.table-hero-preview #lobby #explore-muck .hp-feature--founders .hp-shot {background:#09150e}   /* the art's own edge green, under the 6% it no longer covers */
body.table-hero-preview #lobby #explore-muck .hp-feature--founders .hp-shot img {object-fit:cover;object-position:center calc(50% + 14px);filter:none;transform:scale(.94)}   /* 6% smaller (Shaun, 2026-10-29) */   /* 14px lower (Shaun: 25 was "too far, half it", then "down 2px"): "WIN UP TO" and Bella's hair clear the top (Shaun, 2026-10-29) */
/* Preserve both faces and Norman’s book across desktop and narrow cards. */
body.table-hero-preview #lobby #explore-muck .hp-feature--invitational .hp-shot {height:auto;min-height:0;aspect-ratio:16 / 9}
/* three across: the other cards' 232px, so the three titles line up (16:9 of the card made it 236) */
@media(min-width:1100px){body.table-hero-preview #lobby #explore-muck .hp-feature--invitational .hp-shot {height:232px;min-height:232px;aspect-ratio:auto}}

/* Ease the scene left on larger desktops; preserve the complete 8:3 canvas. */
@media(min-width:1280px){
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero .ls-hero-art {
  background-color:#040504;
  background-position:center, calc(50% - clamp(0px, (100vw - 1280px) * .0625, 30px)) center;
 }
}

/* Big screens: the hero stops growing at 720px and the table is pinned to the content column (its right edge 120px past
   the column's, which is 1548px wide), instead of the full-width art carrying it off to the right; the screen's edges
   fade into the room's dark (Shaun, 2026-10-29: "on big screens this table goes too far over to the right") */
@media(min-width:1800px){
 body.table-hero-preview.redesign-v2.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero {max-height:720px}
 body.table-hero-preview.home-v3:not(.game-section-page) #lobby .ls-rail > .ls-hero .ls-hero-art {
  background-color:#040504;
  background-image:
   linear-gradient(90deg,#040504 calc(50% - 1026px),#04050400 calc(50% - 806px)),
   linear-gradient(90deg,#04050400 calc(50% + 734px),#040504 calc(50% + 894px)),
   linear-gradient(90deg,#080a0999,transparent 52%),
   image-set(url('promotions/desktop-table-wide-native-v5-1920.webp') 1x,url('promotions/desktop-table-wide-native-v5.webp') 2x);
  background-size:auto,auto,auto,auto 100%;
  background-position:0 0,0 0,center,calc(50vw + 894px - min(100vw,1920px)) center;   /* the art's left edge, so its right edge is at the column's right + 120px; it's 1920 wide once the hero is 720 tall */
  background-repeat:no-repeat;
 }
}

@media(max-width:1099px){
 body.table-hero-preview #lobby #explore-muck .hp-secondary>a {padding:16px}
 body.table-hero-preview #lobby #explore-muck .hp-secondary {gap:16px;padding:24px 0}
}
@media(min-width:601px) and (max-width:1099px){
 body.table-hero-preview #lobby #explore-muck .hp-feature:first-child .hp-shot {height:180px;min-height:180px;align-self:center}
}