/* brokiecasino.com: the landing page and the legal pages (main/site.py). The landing leads with the games:
 * the hero and the Games tab's cards, then a few sections, each one picture and two lines, then the
 * questions. Space and hairlines group things, never boxes; one gold key per view (Play on Discord). */
/* casino-sans:start */
@font-face {
  font-family: "Casino Sans";
  src: url("../miniapp/fonts/casino-sans.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+20-7E, U+A0-17F, U+2000-2064, U+206A-206F, U+20A0-20B5, U+20B8-20BA, U+20BD, U+2139, U+2190-21FF, U+2212, U+221E, U+2264-2265, U+22EF, U+2304, U+232B, U+25B6, U+25BE, U+25C6, U+25CB, U+2605-2606, U+263A, U+2654-2660, U+2663, U+2665-2666, U+26A0-26A1, U+270F, U+2713, U+2715, U+2726, U+2764, U+2B06, U+FE0E-FE0F, U+1F0CF, U+1F602, U+1F622, U+1F62E;
}
@font-face {
  font-family: "Casino Sans";
  src: url("../miniapp/fonts/casino-sans-more.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+180-2E9, U+2EC-2EE, U+2F3, U+2F7, U+300-34F, U+351-353, U+357-358, U+35A, U+35C-362, U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-525, U+531-556, U+559-55F, U+561-587, U+589-58A, U+5B0-5C3, U+5C6-5C7, U+5D0-5EA, U+5F0-5F4, U+606-607, U+609-60A, U+60C, U+615, U+61B, U+61F, U+621-63A, U+640-655, U+657, U+65A, U+660-670, U+674, U+679-6BF, U+6C6-6C8, U+6CB-6CC, U+6CE, U+6D0, U+6D5, U+6F0-6F9, U+7C0-7E7, U+7EB-7F5, U+7F8-7FA, U+E3F, U+E81-E82, U+E84, U+E87-E88, U+E8A, U+E8D, U+E94-E97, U+E99-E9F, U+EA1-EA3, U+EA5, U+EA7, U+EAA-EAB, U+EAD-EB9, U+EBB-EBD, U+EC0-EC4, U+EC6, U+EC8-ECD, U+ED0-ED9, U+EDC-EDD, U+10A0-10C5, U+10D0-10FC, U+1401-1407, U+1409-141B, U+141D-1435, U+1437-144A, U+144C-1452, U+1454-14BD, U+14C0-14EA, U+14EC-1507, U+1510-153E, U+1540-1550, U+1552-156A, U+1574-1585, U+158A-1596, U+15A0-15AF, U+15DE, U+15E1, U+1646-1647, U+166E-1676, U+1680-169C, U+1D00-1D14, U+1D16-1D23, U+1D26-1D2E, U+1D30-1D5B, U+1D5D-1D6A, U+1D77-1D78, U+1D7B, U+1D7D, U+1D85, U+1D9B-1DBF, U+1DC4-1DC9, U+1E00-1EFB, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20D1, U+20D6-20D7, U+20DB-20DC, U+20E1, U+2100-2109, U+210B-2138, U+213A-2149, U+214B, U+214E, U+2150-2185, U+2189, U+2200-2211, U+2213-221D, U+221F-2263, U+2266-22EE, U+22F0-2303, U+2305-2311, U+2318-2319, U+231C-2321, U+2324-2328, U+232C, U+2373-2375, U+237A, U+237D, U+2387, U+2394, U+239B-23AE, U+23CE-23CF, U+23E3, U+23E5, U+23E8, U+2422-2423, U+2460-2469, U+2500-25B5, U+25B7-25BD, U+25BF-25C5, U+25C7-25CA, U+25CC-2604, U+2607-2639, U+263B-2653, U+2661-2662, U+2664, U+2667-269C, U+269E-269F, U+26A2-26B8, U+26C0-26C3, U+26E2, U+2701-2704, U+2706-2709, U+270C-270E, U+2710-2712, U+2714, U+2716-2725, U+2727, U+2729-274B, U+274D, U+274F-2752, U+2756, U+2758-275E, U+2761-2763, U+2765-2794, U+2798-27AF, U+27B1-27BE, U+27C5-27C6, U+27E0, U+27E6-27EB, U+27F0-28FF, U+2906-2907, U+290A-290B, U+2940-2941, U+2983-2984, U+29CE-29D5, U+29EB, U+29FA-29FB, U+2A00-2A02, U+2A0C-2A1C, U+2A2F, U+2A6A-2A6B, U+2A7D-2AA0, U+2AAE-2ABA, U+2AF9-2AFA, U+2B00-2B05, U+2B07-2B1A, U+2B1F-2B24, U+2B53-2B54, U+2C60-2C77, U+2C79-2C7F, U+2D00-2D25, U+2D30-2D65, U+2D6F, U+2E18, U+2E1F, U+2E22-2E25, U+2E2E, U+4DC0-4DFF, U+A4D0-A4FF, U+A644-A647, U+A64C-A64D, U+A650-A651, U+A654-A657, U+A662-A66E, U+A68A-A68D, U+A694-A695, U+A698-A699, U+A708-A716, U+A71B-A71F, U+A722-A72B, U+A730-A741, U+A746-A74B, U+A74E-A753, U+A756-A757, U+A764-A767, U+A780-A783, U+A789-A78E, U+A790-A791, U+A7A0-A7AA, U+A7F8-A7FF, U+EF00-EF19, U+F400-F426, U+F428-F441, U+F6C5, U+FB00-FB06, U+FB13-FB17, U+FB1D-FB36, U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4F, U+FB52-FBA3, U+FBAA-FBAD, U+FBD3-FBDC, U+FBDE-FBDF, U+FBE4-FBE9, U+FBFC-FBFF, U+FE00-FE0D, U+FE20-FE23, U+FE70-FE74, U+FE76-FEFC, U+FEFF, U+FFF9-FFFD, U+10300-1031E, U+10320-10323, U+1D300-1D356, U+1D538-1D539, U+1D53B-1D53E, U+1D540-1D544, U+1D546, U+1D54A-1D550, U+1D552-1D56B, U+1D5D4-1D607, U+1D756-1D78F, U+1D7D8-1D7E1, U+1D7EC-1D7F5, U+1F030-1F093, U+1F0A0-1F0AE, U+1F0B1-1F0BE, U+1F0C1-1F0CE, U+1F0D1-1F0DF, U+1F311-1F318, U+1F42D-1F42E, U+1F431, U+1F435, U+1F600-1F601, U+1F603-1F621, U+1F623, U+1F625-1F62B, U+1F62D, U+1F62F-1F640, U+1F643;
}
/* casino-sans:end */
:root {
  --felt: #0d211c; --felt-deep: #081411; --felt-edge: #040a08;
  --text: #f4f1e8; --muted: #a9bab2; --faint: #72867f; --line: rgb(255 255 255 / 0.09);
  --hairline-strong: rgb(255 255 255 / 0.14);
  --gold: #f5c95a;
  --gold-ink: #2a1d05;
  /* The app's gold: one metal for gold keys, one gradient for gold type, a lit top edge on raised things. */
  --gold-metal: linear-gradient(180deg, #ffe9ad 0%, #fad67a 38%, var(--gold) 52%, #e2ad45 78%, #b9822c 100%);
  --gold-type: linear-gradient(180deg, #fff1c4, var(--gold) 55%, #d99b32);
  --lit-edge: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --display: "Casino Sans", "DejaVu Sans", Verdana, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ready: #62ce7a; --gold-soft: rgb(245 201 90 / 0.14); --line-strong: rgb(255 255 255 / 0.14); --card: rgb(9 20 17 / 0.82);
  --gutter: 20px; --max: 1180px; --gap: 96px; --nav-h: 64px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* The felt spans the whole page: painted on the root, which covers the full document height. */
html {
  min-height: 100%; scroll-padding-top: calc(var(--nav-h) + 12px);
  background:
    radial-gradient(90% 900px at 70% 0%, rgb(46 104 84 / 0.42) 0%, transparent 70%),
    linear-gradient(180deg, var(--felt) 0px, var(--felt-deep) 900px, var(--felt-edge) 100%),
    var(--felt-edge);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--text); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--gold); }
a:hover { color: #ffe08a; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
/* The hero's glow reaches past the column, never past the page. */
main { overflow-x: clip; }

/* Header: the chip and the wordmark, the sections, one quiet Play free. */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 22px; height: var(--nav-h);
  padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2)); background: rgb(3 9 7 / 0.92); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 16px/1 var(--display); letter-spacing: 0.06em; }
.brand img { width: 36px; height: 36px; display: block; }
.brand:hover { color: var(--text); }
.top nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.top nav a { color: var(--muted); text-decoration: none; font: 700 13px/1 var(--display); letter-spacing: 0.04em; }
.top nav a:hover { color: var(--gold); }

/* One type scale. */
.eyebrow { margin: 0; color: var(--gold); font: 700 12px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; }
h1 { margin: 0; font: 700 58px/1.02 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: 0; max-width: 34em; color: var(--muted); font-size: 17px; line-height: 1.55; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 14px; font: 700 16px/1 var(--display); text-decoration: none; }
.btn.sm { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
/* The app's keys: lacquered gold with a lip that presses a pixel down, and a dark key with a hairline. */
.btn.gold {
  color: var(--gold-ink); background: var(--gold-metal); text-shadow: 0 1px 0 rgb(255 240 200 / 0.55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 -3px 0 rgb(122 80 20 / 0.55), 0 1px 0 rgb(0 0 0 / 0.4), 0 14px 30px -10px rgb(245 201 90 / 0.6);
  transition: box-shadow 200ms ease-out, transform 90ms ease-out;
}
.btn.gold:hover { color: var(--gold-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 -3px 0 rgb(122 80 20 / 0.55), 0 0 0 3px rgb(245 201 90 / 0.16), 0 14px 30px -10px rgb(245 201 90 / 0.7); }
.btn.gold:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -1px 0 rgb(122 80 20 / 0.55), 0 4px 10px -6px rgb(245 201 90 / 0.5); }
.btn.quiet {
  color: var(--text); background: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.04));
  border: 1px solid rgb(255 255 255 / 0.14); box-shadow: var(--lit-edge), 0 1px 0 rgb(0 0 0 / 0.4);
}
.btn.quiet:hover { color: var(--text); border-color: rgb(255 255 255 / 0.24); }
.btn svg { width: 22px; height: 22px; flex: none; }

/* Hero: the words and the two play keys; Cashley beside them on a computer. */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; padding: 56px 0 28px; }
.hero-text { display: grid; gap: 20px; justify-items: start; padding-bottom: 36px; }
.hero h1 { max-width: 11em; }
.hero-text .cta { margin-top: 6px; }
.hero-cashley { display: block; width: auto; height: 400px; margin: 0 24px -28px 0; filter: drop-shadow(0 18px 26px rgb(0 0 0 / 0.5)); pointer-events: none; user-select: none; }
.hero::before {
  content: ""; position: absolute; inset: 0 -10% -10% 40%; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 70% 55%, rgb(64 150 112 / 0.3), transparent 70%);
}

/* The game cards: the Mini App's Games tab cards (games.css .gf-tile, games.js art), four across. */
.site-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.site-games > .gf-tile { grid-column: auto; min-height: 210px; color: var(--text); }
/* The whole card is the link; the "i" and the card's back sit above it. */
/* A long press turns the card over (games.js), so iOS shows no link preview. */
.gf-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; -webkit-touch-callout: none; }
.gf-hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gf-back {
  position: absolute; inset: 0; z-index: 4; display: grid; align-content: start; gap: 7px; padding: 14px 14px 12px;
  border-radius: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #09140f, #040a08);
  opacity: 0; visibility: hidden; transition: opacity 180ms ease-out, visibility 0s linear 180ms;
}
.gf-tile.flipped .gf-back { opacity: 1; visibility: visible; transition: opacity 180ms ease-out; }
.gf-tile.flipped .gf-plate { z-index: 5; }
.gf-tile.flipped .gf-tags { visibility: hidden; }
.gf-back small { font: 700 10px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.gf-back b { font: 700 17px/1.15 var(--display); }
.gf-back dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; }
.gf-back dt { color: var(--muted); }
.gf-back dd { margin: 0; color: #ffe9ad; font: 700 12.5px/1.3 var(--display); }
.gf-back p { margin: 0; color: #cdd8d2; font-size: 12.5px; line-height: 1.4; }
.site-games .gf-label b { font-size: 15px; white-space: nowrap; }
/* The line says how the game plays: it wraps at its dot rather than being cut ("25 lines · / Hold & Respin"). */
.site-games .gf-line { display: block; font-size: 11px; line-height: 1.15; }
.site-games .gf-line > * { display: inline; }
.site-games .gf-status { font-size: 11px; white-space: normal; overflow: visible; }
.site-games .gf-status > span { white-space: nowrap; }
.site-games > .gf-holdem .gf-status > span { white-space: normal; }
.site-games .gf-new { margin-right: 6px; }
/* Texas Hold'em leads the list: a large cabinet, two cards wide and two high. */
.site-games > .gf-holdem { grid-column: span 2; grid-row: span 2; min-height: 0; flex-direction: column; }
.site-games > .gf-holdem .gf-label { display: grid; gap: 6px; flex: none; padding: 6px 24px 22px; }
.site-games > .gf-holdem .gf-art { flex: 1 1 auto; padding: 34px 40px 0; }
.site-games > .gf-holdem .gf-he-kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.site-games > .gf-holdem .gf-label b { font-size: clamp(26px, 2.6vw, 34px); white-space: normal; }
.site-games > .gf-holdem .gf-status { font-size: clamp(12px, 1.2vw, 15px); white-space: normal; }

/* The play sheet (site/play_sheet.html, games.js): the app's sheet, rising on its spring from the bottom on a
 * phone and a centred dialog on a computer, with the gold hairline along its top edge. */
html.sheet-open { overflow: hidden; }
.play-sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--text); background: transparent; overflow: hidden;
}
.play-sheet[open] { display: flex; align-items: flex-end; justify-content: center; }
.play-sheet::backdrop {
  background: radial-gradient(120% 80% at 50% 100%, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.7));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: ps-fade 180ms ease-out both;
}
.ps-panel {
  position: relative; display: grid; justify-items: center; gap: 10px; width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); text-align: center;
  background: radial-gradient(80% 40% at 50% 0%, rgb(245 201 90 / 0.08), transparent 70%), linear-gradient(180deg, #14291f, #09140f 72%);
  border: 1px solid rgb(255 255 255 / 0.1); border-bottom: 0; border-radius: 24px 24px 0 0;
  box-shadow: 0 -1px 0 rgb(245 201 90 / 0.28), 0 -24px 60px rgb(0 0 0 / 0.6);
  animation: ps-in 360ms var(--ease-spring) both;
}
.ps-panel::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 226 150 / 0.75), transparent);
}
.ps-panel:focus { outline: none; }
.play-sheet.leaving .ps-panel { animation: ps-out 180ms ease-in both; }
.play-sheet.leaving::backdrop { animation: ps-fade-out 180ms ease-in both; }
@keyframes ps-in { from { transform: translate3d(0, 56px, 0); opacity: 0; } 60% { opacity: 1; } }
@keyframes ps-out { to { transform: translate3d(0, 40px, 0); opacity: 0; } }
@keyframes ps-fade { from { opacity: 0; } }
@keyframes ps-fade-out { to { opacity: 0; } }
.ps-close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  color: var(--text); background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.03)); border: 1px solid rgb(255 255 255 / 0.14);
  transition: border-color 160ms ease-out, transform 90ms var(--ease-out);
}
.ps-close:hover { border-color: rgb(255 255 255 / 0.28); }
.ps-close:active { transform: translateY(1px); }
.ps-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ps-art { display: block; margin-top: 6px; }
.ps-card { width: 148px; height: 112px; cursor: default; pointer-events: none; box-shadow: 0 12px 26px -10px rgb(0 0 0 / 0.7); }
.ps-card.gf-tile:active { transform: none; }
.ps-card .gf-art { padding: 10px 6px 4px; }
.ps-title { margin: 0; font: 700 30px/1.08 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.ps-line { margin: 0; max-width: 24em; color: var(--muted); font-size: 15px; line-height: 1.45; }
.ps-keys { display: grid; gap: 10px; width: 100%; max-width: 380px; margin-top: 6px; }
.ps-keys .btn { width: 100%; min-height: 54px; }
.ps-keys .btn[hidden], .ps-more[hidden] { display: none; }
.ps-more { padding: 6px 10px; font: 700 14px/1.4 var(--display); text-decoration: none; }
.ps-close:focus-visible, .ps-keys .btn:focus-visible, .ps-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (min-width: 720px) {
  .play-sheet[open] { align-items: center; padding: 24px; }
  .ps-panel { max-width: 440px; padding: 26px 28px 24px; border-bottom: 1px solid rgb(255 255 255 / 0.1); border-radius: 24px; box-shadow: 0 -1px 0 rgb(245 201 90 / 0.28), 0 30px 80px rgb(0 0 0 / 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-panel, .play-sheet::backdrop, .play-sheet.leaving .ps-panel, .play-sheet.leaving::backdrop { animation: none; }
  .ps-close { transition: none; }
}

.games { display: grid; gap: 14px; padding-bottom: var(--gap); }

/* A section: one picture of the real art and two lines, the picture on alternate sides. */
.feature {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  padding: var(--gap) 0; border-top: 1px solid var(--line);
}
.feature.flip .feature-art { order: 2; }
.feature-art { display: block; width: 100%; max-width: 560px; height: auto; justify-self: center; }
.feature-art.bucks { max-width: 400px; }
.feature-text { display: grid; gap: 12px; max-width: 30em; }
.feature-text h2, .faq h2 { margin: 0; font: 700 36px/1.08 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.feature-text p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.more { justify-self: start; font: 700 15px/1.4 var(--display); text-decoration: none; }

/* Questions: a few lines that open in place, beside their heading on a computer. */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 64px; align-items: start; padding: var(--gap) 0; border-top: 1px solid var(--line); }
.faq h2 { grid-row: span 4; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq details { grid-column: 2; border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none;
  font: 700 17px/1.3 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--gold); font-size: 22px; line-height: 1; transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--gold); }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: 0 0 18px; max-width: 40em; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* The phone apps: store badges. A live one is a link; one still to come is plainly not. */
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; }
.store {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 12px; border-radius: 11px; cursor: default; user-select: none;
  color: var(--muted); background: #050807; border: 1px solid rgb(255 255 255 / 0.18);
}
a.store { cursor: pointer; text-decoration: none; color: var(--text); border-color: rgb(255 255 255 / 0.34); }
a.store:hover { color: var(--text); border-color: var(--gold); }
a.store:active { transform: translateY(1px); }
a.store:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.store[aria-disabled] span { color: var(--muted); }
.store svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.store span { display: grid; gap: 2px; font: 700 15px/1 var(--display); color: var(--text); white-space: nowrap; }
.store small { font: 600 10px/1 var(--body); letter-spacing: 0.04em; color: var(--faint); }

/* A card's name opens the game's own page; the rest of the card plays it. */
.gf-name { position: relative; z-index: 3; color: inherit; text-decoration: none; }
.gf-name:hover b, .gf-name:focus-visible b { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.gf-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* A game's page: the words and the card, then how it plays, then the other games. */
.crumbs { padding-top: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--faint); font: 700 12.5px/1.4 var(--display); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.game-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 48px; padding: 28px 0 var(--gap); }
.game-hero .hero-text { padding-bottom: 0; }
.note { margin: 0; color: var(--faint); font: 700 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.site-games.one { grid-template-columns: 1fr; }
.site-games.one > .gf-tile { min-height: 0; aspect-ratio: 1 / 1; }
.site-games.one > .gf-holdem { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
.site-games.one .gf-label b { font-size: 20px; }
.how { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 64px; padding: var(--gap) 0; border-top: 1px solid var(--line); }
.how .feature-text { grid-row: span 2; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.facts div { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--faint); font: 700 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.facts dd { margin: 0; color: var(--gold); font: 700 18px/1.2 var(--display); }
.features { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.features li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text); font: 700 13px/1 var(--display); }
.more { display: grid; gap: 18px; padding: var(--gap) 0; border-top: 1px solid var(--line); }
.more h2 { margin: 0; font: 700 26px/1.1 var(--display); }
.more-games { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.more-games a { font: 700 15px/1.6 var(--display); text-decoration: none; }
.more-games a:hover { text-decoration: underline; }

/* Legal pages */
.doc { width: min(100% - 2 * var(--gutter), 780px); margin: 12px auto 48px; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: 22px; background: rgb(6 14 12 / 0.74); }
.doc h1 { margin: 0 0 4px; font: 700 clamp(28px, 5vw, 38px)/1.15 var(--display); }
.doc .updated { margin: 0 0 22px; color: var(--faint); font-size: 14px; }
.doc h2 { margin: 30px 0 8px; color: var(--gold); font: 700 18px/1.3 var(--display); }
.doc p, .doc li { color: #d9dfd6; }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .box { padding: 14px 16px; border: 1px solid rgb(245 201 90 / 0.35); border-radius: 14px; background: rgb(245 201 90 / 0.06); }
.doc .box p { margin: 0; }

.foot { padding: 26px 0 36px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }
.foot p { margin: 0; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (min-width: 1600px) {
  :root { --max: 1280px; }
  h1 { font-size: 66px; }
  .hero-cashley { height: 460px; }
}
@media (max-width: 959px) {
  :root { --gap: 56px; --nav-h: 56px; }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr) 30%; align-items: end; gap: 0; padding: 22px 0 18px; }
  .hero-text { gap: 14px; padding-bottom: 0; grid-column: 1 / -1; grid-row: 1; }
  .hero h1 { max-width: 7.6em; }
  h1 { font-size: 36px; line-height: 1.04; }
  .lede, .feature-text p { font-size: 15.5px; }
  .hero-text .cta { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  /* Cashley from the knees up beside the heading, fading out before the line under it. */
  .hero-cashley {
    grid-column: 2; grid-row: 1; align-self: start; justify-self: end; width: 100%; max-width: 120px; height: 168px; margin: -4px -4px 0 0; z-index: -1;
    object-fit: cover; object-position: top; filter: none; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
  .hero::before { inset: -10% -20% 40% 30%; }
  .site-games { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .site-games > .gf-tile { min-height: 180px; }
  .gf-back { gap: 5px; padding: 12px 11px 10px; }
  .gf-back b { font-size: 15px; }
  .gf-back dl, .gf-back dd { font-size: 11.5px; }
  .gf-back p { display: none; }
  .site-games .gf-status, .site-games .gf-line { font-size: 10px; letter-spacing: 0; }
  .site-games .gf-label { padding-inline: 9px; }
  .site-games > .gf-holdem { grid-row: auto; min-height: 180px; flex-direction: row; }
  .site-games > .gf-holdem .gf-art { flex: 1.15 1 0; padding: 14px 4px 8px 10px; }
  .site-games > .gf-holdem .gf-label { flex: 1 1 0; align-content: center; padding: 14px 12px 12px 4px; }
  .site-games > .gf-holdem .gf-he-kicker { font-size: 10px; }
  .site-games > .gf-holdem .gf-label b { font-size: 22px; }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature.flip .feature-art { order: 0; }
  .feature-art { max-width: 400px; }
  .feature-art.bucks { max-width: 280px; }
  .feature-text h2, .faq h2 { font-size: 26px; }
  .stores { gap: 8px; }
  .stores li { flex: 1 1 0; display: flex; }
  .store { flex: 1 1 0; justify-content: center; padding: 0 10px; }
  .store span { font-size: 14px; }
  .game-hero { grid-template-columns: 1fr; gap: 24px; padding: 14px 0 var(--gap); }
  .site-games.one { max-width: 360px; }
  .site-games.one > .gf-holdem { aspect-ratio: auto; min-height: 200px; max-width: none; }
  .how { grid-template-columns: 1fr; }
  .how .feature-text { grid-row: auto; }
  .facts dd { font-size: 16px; }
  .faq { grid-template-columns: 1fr; }
  .faq h2 { grid-row: auto; margin-bottom: 14px; }
  .faq details { grid-column: 1; }
  .faq summary { font-size: 16px; padding: 16px 0; }
  .faq details p { font-size: 15px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .brand { font-size: 15px; }
  .brand img { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* Approved raster brand mark; preserve its circular silhouette at header size. */
.brand img { border-radius: 50%; object-fit: contain; }