/* Games: every way to play (games.php). Tokens from assets/tokens.css; the site's dark surfaces with gold accents. */
.gx-page{margin:0;background:var(--muck-bg);color:var(--muck-text);font-family:var(--muck-font)}
.gx{max-width:1224px;margin:0 auto;padding:0 var(--muck-space-6) var(--muck-space-7)}
.gx-hero{padding:var(--muck-space-7) 0 var(--muck-space-5)}
.gx-hero h1{margin:0;font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.gx-hero p{margin:var(--muck-space-4) 0 0;max-width:620px;font-size:17px;line-height:1.6;color:var(--muck-text-2)}
.gx-jump{display:flex;flex-wrap:wrap;gap:var(--muck-space-2);margin-top:var(--muck-space-5)}
.gx-jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--muck-space-4);border:1px solid var(--muck-line-strong);border-radius:999px;color:var(--muck-text-2);font-size:14px;font-weight:600;text-decoration:none;box-sizing:border-box}
.gx-jump a:hover{border-color:var(--muck-gold-muted);color:var(--muck-text)}
.gx-section{padding:var(--muck-space-6) 0;border-top:1px solid var(--muck-line);scroll-margin-top:88px}
.gx-head{margin-bottom:var(--muck-space-5)}
.gx-head h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em}
.gx-head p{margin:var(--muck-space-2) 0 0;font-size:15px;color:var(--muck-text-3)}
.gx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--muck-space-5)}
.gx-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--muck-space-5);align-items:start;padding:var(--muck-space-5);border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:var(--muck-surface-1)}
/* a game picked from the header's Games menu (games-menu.js links to #game-<key>) */
.gx-card{scroll-margin-top:96px;transition:border-color .3s ease}
.gx-card:target{border-color:var(--muck-gold-muted)}
.gx-icon{display:block;width:100px;height:100px;border-radius:var(--muck-radius-card);background:#0b0b0b}
.gx-body{min-width:0}
.gx-body h3{margin:0;font-size:18px;font-weight:800;line-height:1.25}
.gx-joke{margin:var(--muck-space-2) 0 0;font-size:14px;font-weight:700;color:var(--muck-gold-muted)}
.gx-rules{margin:var(--muck-space-2) 0 0;font-size:14px;line-height:1.55;color:var(--muck-text-2)}
/* the ways to play, one ruled row each across the whole card, at its bottom; the seats a joined selector in the header
   nav's colors (site-header.css .gto-main a), so a pick reads as part of the card */
.gx-actions{grid-column:1/-1;align-self:end;display:flex;flex-direction:column}
/* each row centered in its band: the same space above and below, the last one's below running to the card's edge (the
   card gives it that space as its bottom padding) */
.gx-play{display:flex;align-items:center;gap:var(--muck-space-3);padding:var(--muck-space-4) 0;border-top:1px solid var(--muck-line)}
.gx-play:last-child{padding-bottom:0}
.gx-card:has(.gx-play){grid-template-rows:auto 1fr;padding-bottom:var(--muck-space-4)}
.gx-kind{flex:none;width:64px;font-size:13px;font-weight:600;color:var(--muck-text-3)}
.gx-seats{display:flex;flex:1;min-width:0;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-field);overflow:clip}
.gx-seat{display:flex;flex:1 1 0;align-items:center;justify-content:center;min-width:0;min-height:40px;padding:0 var(--muck-space-2);background:var(--muck-surface-2);color:#b9b9b2;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease}
.gx-seat+.gx-seat{border-left:1px solid var(--muck-line-strong)}
.gx-seat:hover{background:#2c281e;color:#d8bd84}
.gx-seat:focus-visible{outline:2px solid var(--muck-gold);outline-offset:-2px}
/* a game that's off for now (Red or Black, 2026-11-10): the seat row's place and height, a quiet label instead of buttons */
.gx-soon{display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:40px;border:1px dashed var(--muck-line-strong);border-radius:var(--muck-radius-field);color:var(--muck-text-3);font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:1239px){.gx-grid{grid-template-columns:1fr 1fr}}   /* three across only with room for each tagline on one line */
@media(max-width:899px){.gx-grid{grid-template-columns:1fr}}
@media(max-width:600px){
 .gx{padding:0 var(--muck-space-4) var(--muck-space-6)}
 .gx-grid{grid-template-columns:1fr}
 .gx-card{grid-template-columns:72px minmax(0,1fr);gap:var(--muck-space-4);padding:var(--muck-space-4)}
 .gx-icon{width:72px;height:72px}
 .gx-play{gap:var(--muck-space-2);padding:var(--muck-space-3) 0}
 .gx-play:last-child{padding-bottom:0}
 .gx-card:has(.gx-play){padding-bottom:var(--muck-space-3)}
 .gx-kind{width:52px}
 .gx-seat{padding:0 var(--muck-space-1)}
 /* a card with one way in is that link, whole (games.php gx-card--one): the button's tap area stretched over the card */
 .gx-card--one{position:relative;cursor:pointer}
 .gx-card--one .gx-seat::after{content:'';position:absolute;inset:0;border-radius:inherit}
 .gx-card--one:active{border-color:var(--muck-gold-muted)}
}