/* Legacy promo markup remains available to lobby.js; the home shell renders the replacement. */
body.home-v3 #lobby .ls-promo-row{--promo-display:none}   /* the row's own switch (lobby-redesign-v2.css); .v2-more-title is already off on home (lobby-home-v3.css) */
body.game-section-page #lobby .hp-polish,body.s2-panel-active #lobby .hp-polish{display:none}
.hp-polish{margin:24px 0 0;color:var(--muck-text);font-family:Inter,sans-serif}
.hp-features{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hp-feature{display:grid;grid-template-columns:1.15fr 1fr;min-height:244px;background:#171918;border:1px solid #292d2a;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s}
.hp-feature:hover{border-color:#77705a}.hp-copy{padding:22px 12px 22px 30px;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
.hp-label{font-size:10px;letter-spacing:.13em;font-weight:700;color:#a8ada8;margin-bottom:14px}
/* card titles a touch softer than full white (Shaun, 2026-10-28: "the titles just make them a bit softer on the cards below the hero") */
body #lobby .hp-feature h2{font-size:30px;line-height:1.12;letter-spacing:-.04em;margin:0 0 14px;font-weight:750;color:color-mix(in srgb,var(--muck-text) 70%,var(--muck-text-2))}
.hp-copy p{font-size:14px;line-height:1.6;color:#adb1ae;margin:0 0 24px;max-width:240px}
.hp-link{margin-top:auto;font-size:13px;font-weight:650;color:var(--muck-gold);display:flex;gap:14px;align-items:center}
.hp-feature>img{width:100%;height:100%;min-width:0;object-fit:cover;object-position:62% center;mask-image:linear-gradient(to right,transparent,#000 25%);opacity:.85}
.hp-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:24px;padding:22px 0;border-top:1px solid var(--muck-line);border-bottom:1px solid var(--muck-line)}
.hp-secondary>a{display:flex;align-items:center;gap:15px;padding:0 24px;color:inherit;text-decoration:none;min-width:0}
.hp-secondary>a:first-child{padding-left:0}.hp-secondary>a:last-child{padding-right:0}.hp-secondary>a+a{border-left:1px solid var(--muck-line)}
.hp-secondary img{width:64px;height:72px;object-fit:cover;border-radius:7px;filter:saturate(.75);flex:none}
body #lobby .hp-secondary h3{font-size:16px;line-height:1.3;margin:0 0 6px;letter-spacing:-.015em;color:color-mix(in srgb,var(--muck-text) 70%,var(--muck-text-2))}
.hp-secondary p{font-size:13px;line-height:1.5;color:#929993;margin:0}.hp-arrow{margin-left:auto;font-size:19px;color:#929993}.hp-secondary a:hover h3,.hp-secondary a:hover .hp-arrow{color:var(--muck-gold)}
.hp-polish a:focus-visible{outline:2px solid var(--muck-gold);outline-offset:5px}
@media(max-width:850px){.hp-features{gap:16px}.hp-copy{padding:24px 8px 24px 24px}.hp-secondary>a{padding:0 15px;gap:10px}.hp-secondary img{width:48px;height:58px}.hp-arrow{display:none}}
@media(max-width:600px){.hp-polish{margin-top:16px}.hp-features{grid-template-columns:1fr}.hp-feature{min-height:225px;grid-template-columns:1.25fr 1fr}.hp-copy{padding:24px 8px 24px 24px}body #lobby .hp-feature h2{font-size:27px}.hp-secondary{grid-template-columns:1fr;padding:0;margin-top:20px}.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{padding:18px 0;gap:16px}.hp-secondary>a+a{border-left:0;border-top:1px solid var(--muck-line)}.hp-secondary img{width:56px;height:56px}.hp-arrow{display:block}.hp-copy p{margin-bottom:20px}}
/* Give destinations and social proof distinct visual rhythms. */
.hp-secondary{gap:16px;padding:0;border:0;margin-top:20px}
.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{position:relative;min-height:116px;padding:22px 20px;background:#151716;border:1px solid #292d2a;border-radius:10px;gap:18px}
.hp-secondary>a+a{border-left:1px solid #292d2a}
.hp-secondary img{width:76px;height:76px;border-radius:8px}
body #lobby .hp-secondary h3{font-size:18px;margin-bottom:8px}
.hp-secondary p{font-size:13px}   /* no width cap: one line when the card has room (Shaun, 2026-10-17) */
body.redesign-v2.home-v3:not(.game-section-page):not(.s2-panel-active) #lobby .v2-reviews{margin:20px 0 0;padding:26px 0 12px;border-top:1px solid var(--muck-line);gap:36px}   /* a rule above the reviews, like the footer's below them (Shaun, 2026-10-19: "put a line above the testimonials too") */
body.redesign-v2.home-v3 #lobby .v2-review,body.redesign-v2.home-v3 #lobby .v2-review+.v2-review{border:0;padding:0;text-align:left}
body.redesign-v2.home-v3 #lobby .v2-review img{display:none}
body.redesign-v2.home-v3 #lobby .v2-review blockquote{font-size:15px;line-height:1.65;font-weight:400;color:#c2c6c2}
body.redesign-v2.home-v3 #lobby .v2-review figcaption{font-size:12px;color:#858c86}
@media(max-width:850px){.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{padding:18px 14px;gap:12px}.hp-secondary img{width:54px;height:64px}body #lobby .hp-secondary h3{font-size:16px}}
@media(max-width:600px){.hp-secondary{gap:10px}.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{min-height:96px;padding:16px}.hp-secondary img{width:60px;height:60px}}
/* Broader feature artwork and full-height image end caps. */
.hp-feature{grid-template-columns:.95fr 1.05fr}
.hp-feature>img{object-position:58% center}
.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{overflow:hidden;padding:22px 20px 22px 132px;min-height:120px}
.hp-secondary img{position:absolute;left:0;top:0;width:112px;height:100%;border-radius:9px 0 0 9px;object-fit:cover;object-position:center}
@media(max-width:850px){.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{padding:18px 14px 18px 98px;min-height:112px}.hp-secondary img{width:84px}}
@media(max-width:600px){.hp-feature{grid-template-columns:1fr 1fr}.hp-secondary>a,.hp-secondary>a:first-child,.hp-secondary>a:last-child{padding:18px 16px 18px 122px;min-height:104px}.hp-secondary img{width:104px}}
/* Tighten artwork placement and align social proof with the destinations. */
.hp-feature{grid-template-columns:.72fr 1.28fr}
.hp-feature>img{object-position:100% center;mask-image:linear-gradient(to right,transparent,#000 12%)}
.hp-copy p{max-width:215px}
.hp-secondary img{filter:saturate(.7) brightness(.82);image-rendering:auto}
.hp-secondary>a:nth-child(1) img{object-position:61% center}
.hp-secondary>a:nth-child(2) img{object-position:86% center}
body.redesign-v2.home-v3:not(.game-section-page):not(.s2-panel-active) #lobby .v2-reviews{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
body.redesign-v2.home-v3:not(.game-section-page):not(.s2-panel-active) #lobby .v2-reviews .v2-review{padding:0;min-width:0;border:0;display:block}
body.redesign-v2.home-v3 #lobby .v2-review::before,body.redesign-v2.home-v3 #lobby .v2-review::after{display:none}
@media(max-width:600px){.hp-feature{grid-template-columns:1fr 1fr}body.redesign-v2.home-v3:not(.game-section-page):not(.s2-panel-active) #lobby .v2-reviews{grid-template-columns:1fr}}
.hp-secondary>a:nth-child(3) img{object-position:100% center}
/* Square corners across all five promo cards. */
.hp-polish .hp-feature,.hp-polish .hp-secondary>a,.hp-polish .hp-secondary img{border-radius:0}
/* The two big cards 16 px shorter (Shaun, 2026-10-23: "make these cards a bit shorter too like 16 px"): min-height and the
   copy's top and bottom padding, above */
/* Each card's crop by the card, not its place in the row (Good at Bad moved up beside Articles, 2026-10-23) */
.hp-secondary>a.hp-review img{object-position:64% center}
.hp-secondary>a.hp-bots img{object-position:87% center}
.hp-secondary>a.hp-book img{object-position:center}
/* Each title line stays whole: two lines, never three (Shaun, 2026-10-17: "Muck GTO. / Get good at bad.") */
body #lobby .hp-feature h2{white-space:nowrap}
/* Muck GTO's line keeps its two lines (5.6 billion hands played, backwards. / Learn, practice, study.) where there's room */
@media(min-width:601px){.hp-feature[href="/muckgto.php"] .hp-copy p{max-width:none;white-space:nowrap}}
/* Square artwork is composed for these small end caps; keep the subjects centered. */
.hp-secondary>a:is(.hp-bots,.hp-articles,.hp-book,.hp-review) img{object-position:center}
/* Four cards since Review your hands (2026-10-23): four across where each keeps its title on one line, two by two below */
.hp-secondary{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1439px) and (min-width:601px){.hp-secondary{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Muck GTO's art crops around the wizard (about 57% across), not the owl at its right edge, so a narrower card still shows him
   (Shaun, 2026-10-17: "when cropped to smaller sizes this should always favor showing the wizard") */
.hp-feature[href="/muckgto.php"]>img{object-position:62% center}
/* Two learning cards side by side need about 900px; under that, one per row, so the titles keep their lines and the art keeps its subject */
@media(max-width:900px){.hp-features{grid-template-columns:1fr}}
/* Phones: Learn the basics keeps its cards in view (the 7 and the crowned 2 on the easel), not the wizard's sleeve (Shaun,
   2026-10-18: "on mobile this should focus on keeping the cards in view") */
@media(max-width:600px){.hp-feature>img[src*="gto-hero-learn"]{object-position:64% center}}
/* A "New" corner banner (Shaun, 2026-10-23: "add a "new" corner banner to review your hands card"); the card clips it */
.hp-secondary>a .hp-new{position:absolute;top:12px;right:-26px;width:96px;padding:3px 0;transform:rotate(45deg);background:var(--muck-gold);color:var(--muck-gold-ink);font-size:10px;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase;pointer-events:none}
/* Review your hands in the middle of the big row, three across (Shaun, 2026-10-23: "move hand reviews to a middle card in
   the 2nd row"); the row below is three cards now */
@media(min-width:1100px){.hp-features{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1099px){.hp-features{grid-template-columns:1fr}}   /* Match the hero’s tablet breakpoint. */
.hp-feature{position:relative}
.hp-feature .hp-new{position:absolute;top:14px;right:-28px;width:104px;padding:4px 0;transform:rotate(45deg);background:var(--muck-gold);color:var(--muck-gold-ink);font-size:11px;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase;pointer-events:none;z-index:2}
/* Each big card's art centered on its subject, now that the slot is near square (three across) or narrow (phones), where it
   showed the edges (Shaun, 2026-10-23: "these need to have images adjusted to refocus on the main portion on desktop and
   mobile"): the easel with 7-2, the My Hands box with its ??? card, the wizard at his book. The 2.5:1 art in a square slot
   centers a point at f across with object-position (2.5f - 0.5) / 1.5. */
.hp-feature[href="/articles/learn-the-basics.php"]>img{object-position:66% center}
.hp-feature[href="/muckgto.php"]>img{object-position:50% center}
@media(min-width:1100px){.hp-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1099px){.hp-secondary{grid-template-columns:1fr}}   /* three across squeezed them to ~110 px (Shaun, 2026-10-23: "sup w the bottom ones?"): one per row */
/* One gap everywhere: between the cards in each row and between the rows, so the columns line up (Shaun, 2026-10-23:
   "spacing between cards should be consistent"; it was 24 above, 16 below, 20 between) */
.hp-polish{--hp-gap:24px}
@media(max-width:850px){.hp-polish{--hp-gap:16px}}
.hp-features{gap:var(--hp-gap)}
.hp-secondary{gap:var(--hp-gap);margin-top:var(--hp-gap)}

/* The three cards' product shots (Shaun, 2026-10-24: "maybe for the 3 cards under hero use product shots to establish
   credability?"): a framed screen beside the copy where a card is a full row (601-1099px), above it where the cards sit
   three across or on a phone, where beside it would be a sliver. Dimmed a touch so they sit back with the copy, the
   chart a little more ("maybe dim the gto one a bit its a bit too attention grabbing" / "now dim the left and right one,
   but about half as much"). */
.hp-feature.hp-feature--shot{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hp-shot{position:relative;min-width:0;min-height:212px}
/* pinned inside its area, so the card's copy sets the height, not the picture's proportions */
.hp-shot img{position:absolute;inset:18px 18px 18px 0;width:calc(100% - 18px);height:calc(100% - 36px);object-fit:cover;object-position:center top;border:1px solid var(--muck-line-strong);border-radius:10px;background:var(--muck-bg);box-shadow:0 10px 28px #000a;opacity:.9;filter:saturate(.925)}
.hp-shot--loud img{opacity:.8;filter:saturate(.85)}
@media (min-width:1100px), (max-width:600px){
 .hp-feature.hp-feature--shot{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .hp-feature--shot .hp-shot{order:-1;height:212px}
 /* full bleed across the top, the card's top corners rounded with it (Shaun, 2026-10-24: "lets try the cards full bleed at
    the top (border radius on top corners)") */
 .hp-polish .hp-feature.hp-feature--shot{border-radius:12px 12px 0 0}
 .hp-feature--shot .hp-shot img{inset:0;width:100%;height:100%;border:0;border-bottom:1px solid var(--muck-line);border-radius:11px 11px 0 0;box-shadow:none}
 .hp-feature--shot .hp-copy{padding-top:18px}
}
.hp-feature .hp-new{opacity:.8}   /* the New ribbon a step quieter (Shaun, 2026-10-24: "make opacity on new banner on hp .8") */

/* Coordinated homepage artwork, approved in the local comparison. */
.hp-polish .hp-feature .hp-shot img{object-fit:contain;object-position:center;opacity:1;filter:none;box-shadow:none;border:0;background:#111c18}
.hp-polish .hp-feature .hp-shot{background:#111c18}
.hp-polish .hp-feature .hp-shot--loud img{object-fit:cover;object-position:center top;filter:brightness(.65) saturate(.62);opacity:1}
.hp-polish .hp-feature.hp-feature--shot,
.hp-polish .hp-feature.hp-feature--shot .hp-shot,
.hp-polish .hp-feature.hp-feature--shot .hp-shot img{border-radius:0}
.hp-polish .hp-secondary>a:is(.hp-articles,.hp-book,.hp-bots) img{object-fit:contain;object-position:center;background:#111c18;filter:none;opacity:1}

/* The Founding Members countdown on the coming-soon card (assets/lobby-home-v3.js foundersCard) */
.hp-countdown{margin-top:var(--muck-space-3);font-size:15px;font-weight:600;color:var(--muck-text-2);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Poker Bot Wars teaser (Shaun, 2026-10-30): a card that isn't a link yet, "Coming soon" where the link line sits */
.hp-soon{margin-top:auto;display:flex;align-items:center;min-height:44px;font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#a99c79}
div.hp-feature--soon:hover{border-color:#292d2a}   /* the not-a-link version only; the card links to the teaser since 2026-11-01 */
/* its two lines stay two lines (Shaun, 2026-11-01: "race each week, win cash & prizes." left "prizes." alone under the 240px cap) */
.hp-feature--soon .hp-copy p{max-width:280px}
/* the promotions card's two lines stay two lines (Shaun, 2026-11-01: "why the 1 line words?": "race" sat alone under the 240px cap) */
.hp-feature--founders .hp-copy p{max-width:280px}
/* "Play Poker Bot Wars: The Race" (Shaun, 2026-11-03): too long for one line on a narrow card, so "The Race" goes to its own */
@media (max-width:760px){.hp-feature--soon .hp-race{display:block}}