/* Layout: one-page site. Header, game stage, billboard ads between content blocks, 300x600 sticky rails on very wide screens, legal pages as hash views. Single dark look by design. */
:root {
  --page: #0d1210;
  --panel: #131b17;
  --line: #243229;
  --text: #dbe8e0;
  --muted: #9fb5a9;
  --white: #ffffff;
  --yellow: #ffe83d;
  --green: #7fd13b;
  --leather: #262626;
  --wood-lo: #7a4419;
  --felt-hi: #218f3d;
  --felt-lo: #14662a;
  --badge-bg: #12502a;
  --badge-line: #7fc23a;
  --paper: #ffffff;
  --card-ink: #14181a;
  --card-red: #e2262b;
  --font-ui: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-card: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--page);
  background-image: radial-gradient(90% 40% at 50% 0%, rgba(33,143,61,.16), rgba(0,0,0,0));
  color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  padding-block: 12px 28px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: #a9ea72; }
a:hover { color: #d2ffa8; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-ui); color: var(--white); line-height: 1.2; text-wrap: balance; margin: 0; }

/* ---------- site chrome ---------- */
.site-head { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-block: 4px 14px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 24px; color: var(--white); text-decoration: none; }
.logo .mk { width: 30px; height: 30px; border-radius: 50%; background: repeating-conic-gradient(#fff 0 9deg, #cf2a2a 9deg 30deg); position: relative; box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.logo .mk::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; background: #fff; }
.site-head nav { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.site-head nav a { color: #cfe0d6; text-decoration: none; padding: 6px 11px; border-radius: 6px; font-size: 15px; font-weight: 600; }
.site-head nav a:hover { background: rgba(255,255,255,.07); color: #fff; }

.shell { max-width: 1200px; margin: 0 auto; display: block; }
.center { min-width: 0; max-width: 970px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.rail { display: none; }
@media (min-width: 1280px) {
  .shell { max-width: none; display: grid; grid-template-columns: 300px minmax(0, 970px) 300px; gap: 10px; justify-content: center; align-items: start; }
  .rail { display: block; align-self: stretch; }
  .rail .sticky { position: sticky; top: 16px; }
}

/* ---------- ad slots (paste AdSense code inside .ad-box) ---------- */
.ad { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5f7468; }
.ad-box { display: grid; place-items: center; text-align: center; border: 1px dashed #34473c; background: rgba(255,255,255,.025); color: #67796e; font-size: 13px; font-style: normal; overflow: hidden; max-width: 100%; }
.ad-box em { font-style: normal; }
.ad-billboard .ad-box { width: 100%; max-width: 970px; min-height: 250px; }
.ad-rail .ad-box { width: 300px; height: 600px; }

/* ---------- hero ---------- */
.hero { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.hero h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 700; }
.hero p { margin: 0; color: var(--muted); max-width: 60ch; }
.tiny { font-size: 11px; line-height: 1.45; color: #7f9488; max-width: 80ch; text-align: center; margin: 0 auto; }

/* ---------- game stage ---------- */
.stage {
  container-type: inline-size;
  position: relative; width: 100%; max-width: 840px; margin: 0 auto; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 14px; background: linear-gradient(#303030, #1d1d1d);
  --cw: 12cqw;
  user-select: none; -webkit-user-select: none;
}
.wood { position: absolute; left: -14cqw; width: 128cqw; top: -60cqw; height: 132.8cqw; border-radius: 50%; background: linear-gradient(#a96629 30%, var(--wood-lo)); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.6), inset 0 .5cqw 0 rgba(255,255,255,.18); }
.felt { position: absolute; inset: 3.4cqw; border-radius: 50%; background-color: var(--felt-lo); background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px), radial-gradient(70% 60% at 50% 40%, var(--felt-hi), var(--felt-lo)); background-size: 4px 4px, 100% 100%; box-shadow: inset 0 0 4cqw rgba(0,0,0,.45), 0 0 0 .4cqw rgba(0,0,0,.35); }
.shoe { position: absolute; left: -2cqw; top: -2cqw; width: 24cqw; height: 20cqw; border-radius: 0 0 100% 0; background: linear-gradient(135deg, #f0b866, #c8802f 55%, #9d5c1f); box-shadow: 0 1cqw 2cqw rgba(0,0,0,.5), inset 0 0 0 .5cqw rgba(255,255,255,.25); }
.shoe i { position: absolute; left: 6cqw; top: 4.5cqw; width: 11cqw; height: 12cqw; border-radius: 50% 50% 0 0 / 38% 38% 0 0; background: repeating-linear-gradient(45deg, #d83a3a 0 .5cqw, #b32424 .5cqw 1cqw); border: .5cqw solid #fff; box-shadow: 0 0 0 1cqw #5e3411, inset 0 -2cqw 2cqw rgba(0,0,0,.3); transform: rotate(-4deg); }

.dealer { position: absolute; left: 50%; top: 2.5cqw; transform: translateX(-50%); }
.hands { position: absolute; left: 0; right: 0; top: 24cqw; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 2cqw 9cqw; padding-left: 7cqw; padding-right: 2cqw; }
.stage[data-n="1"] .hands { padding-left: 0; padding-right: 0; }
.stage[data-n="2"] { --cw: 10cqw; }
.stage[data-n="3"] { --cw: 8cqw; }
.cw { position: relative; }
.badge { position: absolute; right: calc(100% + 1.4cqw); top: 0; min-width: 6cqw; height: 6cqw; padding: 0 .8cqw; display: grid; place-items: center; border-radius: 1.2cqw; background: var(--badge-bg); border: .35cqw solid var(--badge-line); font-family: var(--font-ui); font-weight: 600; font-size: max(11px, 3.1cqw); line-height: 1; white-space: nowrap; color: #fff; }
.badge:empty { display: none; }
.cards { display: flex; position: relative; }
.card { width: var(--cw); aspect-ratio: 5 / 7; flex: none; position: relative; background: var(--paper); color: var(--card-ink); border-radius: calc(var(--cw) * .07); margin-left: calc(var(--cw) * -.64); box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.18); font-family: var(--font-card); font-weight: 700; line-height: 1; }
.card:first-child { margin-left: 0; }
.card.red { color: var(--card-red); }
.card .idx { position: absolute; left: 7%; top: 4%; display: flex; flex-direction: column; align-items: center; line-height: .92; font-size: calc(var(--cw) * .3); }
.card .idx i { font-style: normal; font-size: .66em; }
.card .big { position: absolute; right: 7%; bottom: 4%; font-size: calc(var(--cw) * .55); line-height: 1; }
.card .face { position: absolute; left: 30%; right: 8%; top: 8%; bottom: 8%; border: 1px solid currentColor; border-radius: calc(var(--cw) * .05); display: grid; place-items: center; font-size: calc(var(--cw) * .55); background: linear-gradient(135deg, rgba(255,214,102,.45), rgba(255,255,255,0) 60%); }
.card .face i { position: absolute; right: 8%; bottom: 3%; font-style: normal; font-size: .38em; }
.card.back { background: repeating-linear-gradient(45deg, #d53a3a 0 .45cqw, #b02323 .45cqw .9cqw); border: calc(var(--cw) * .06) solid #fff; }
.card.ghost { background: transparent; box-shadow: none; border: .3cqw dashed rgba(255,255,255,.3); }
.card.deal { animation: deal .34s cubic-bezier(.2,.8,.3,1) both; }
.card.flip { animation: flip .42s ease-out both; }
@keyframes deal { from { opacity: 0; transform: translate(-30cqw, -26cqw) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes flip { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }

.hand { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8cqw; padding: .6cqw; }
.hand.active .cards::after { content: ""; position: absolute; inset: -1cqw; border: .4cqw solid #8fd14f; border-radius: 1.4cqw; background: rgba(143,209,79,.1); pointer-events: none; }
.hmeta { display: flex; align-items: center; gap: 1.4cqw; min-height: 3.6cqw; font-family: var(--font-ui); font-weight: 600; font-size: max(11px, 2.5cqw); line-height: 1.2; color: #fff; }
.hmeta .hb { color: var(--yellow); }
.tag { padding: .2cqw 1.2cqw; border-radius: 1cqw; font-size: max(10px, 2.2cqw); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tag.win, .tag.blackjack { background: #7fd13b; color: #123407; }
.tag.lose, .tag.bust { background: #e5483f; color: #fff; }
.tag.push { background: #d3dbd5; color: #1c2a22; }

.stat { position: absolute; top: 31cqw; display: flex; flex-direction: column; gap: .6cqw; font-family: var(--font-ui); line-height: 1.2; }
.stat span { font-weight: 600; font-size: max(12px, 2.6cqw); color: #fff; }
.stat b { color: var(--yellow); font-weight: 700; font-size: max(15px, 3.5cqw); text-shadow: 0 .2cqw 0 rgba(0,0,0,.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal { left: 5cqw; }
.bid { right: 5cqw; }
.clear { position: absolute; right: 5cqw; top: 40.5cqw; }
.bidstack { position: absolute; right: 3cqw; top: 3cqw; width: 25cqw; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 1cqw .6cqw; }
.stk { position: relative; width: 8.6cqw; height: calc(8.6cqw + var(--n) * .9cqw); }
.stk .chip { position: absolute; left: 0; bottom: calc(var(--i) * .9cqw); }

.prompt { position: absolute; left: 0; right: 0; top: 46.5cqw; text-align: center; padding: 0 12cqw; font-family: var(--font-ui); line-height: 1.25; }
.prompt b { display: block; font-weight: 600; font-size: max(14px, 3.1cqw); color: #fff; text-shadow: 0 .2cqw .4cqw rgba(0,0,0,.5); }
.prompt span { display: block; font-size: max(11px, 2.1cqw); color: #d3ecd8; }
.prompt span.adv { color: var(--yellow); font-weight: 600; }

.controls { position: absolute; left: 0; right: 0; top: 53cqw; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; }
.pane { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; flex-wrap: nowrap; }
.chip { --d: 10.6cqw; --c: #2f66c4; width: var(--d); height: var(--d); border-radius: 50%; border: 0; padding: 0; flex: none; position: relative; display: grid; place-items: center; background: repeating-conic-gradient(#fff 0 9deg, var(--c) 9deg 30deg); box-shadow: 0 .5cqw 0 rgba(0,0,0,.4), 0 1cqw 1.6cqw rgba(0,0,0,.35); transition: transform .12s; }
.chip::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 calc(var(--d) * .03) rgba(255,255,255,.9); }
.chip span { position: relative; width: 60%; height: 60%; border-radius: 50%; background: #fff; color: var(--c); display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--d) * .22); line-height: 1; box-shadow: inset 0 0 0 calc(var(--d) * .02) var(--c); }
button.chip:hover:not(:disabled) { transform: translateY(-.7cqw); }
button.chip:active:not(:disabled) { transform: translateY(.2cqw); }
button.chip:disabled { opacity: .35; cursor: not-allowed; }
button.chip.sel { box-shadow: 0 0 0 .5cqw rgba(255,255,160,.95), 0 0 3.4cqw #fff36a, 0 .5cqw 0 rgba(0,0,0,.4); }
.k100 { --c: #2f66c4; } .k500 { --c: #cf2a2a; } .k1000 { --c: #2da22f; } .k10000 { --c: #8a2fb3; } .k50000 { --c: #1f1f1f; }

.gbtn { --t1: #b9f152; --t2: #7ec41e; --bd: #4a8309; --tx: #1d4004; border: 0; border-radius: 1.4cqw; padding: 1.5cqw 5.4cqw; min-width: 17cqw; font-family: var(--font-ui); font-weight: 600; font-size: max(14px, 3.2cqw); letter-spacing: .02em; line-height: 1.1; color: var(--tx); background: linear-gradient(var(--t1), var(--t2)); box-shadow: 0 .6cqw 0 var(--bd), 0 1cqw 1.6cqw rgba(0,0,0,.4), inset 0 .25cqw 0 rgba(255,255,255,.55); text-shadow: 0 .12cqw 0 rgba(255,255,255,.35); transition: transform .1s, filter .1s; }
.gbtn:hover:not(:disabled) { filter: brightness(1.07); }
.gbtn:active:not(:disabled) { transform: translateY(.5cqw); box-shadow: 0 .1cqw 0 var(--bd), inset 0 .25cqw 0 rgba(255,255,255,.4); }
.gbtn:disabled { filter: grayscale(.75) brightness(.7); cursor: not-allowed; }
.gbtn.red { --t1: #ff6a5c; --t2: #d8261b; --bd: #8f1710; --tx: #fff; text-shadow: 0 .15cqw 0 rgba(0,0,0,.45); }
.gbtn.blue { --t1: #6fb1ff; --t2: #2a6fd6; --bd: #174a96; --tx: #fff; text-shadow: 0 .15cqw 0 rgba(0,0,0,.4); }
.gbtn.violet { --t1: #c58bf0; --t2: #8a3fc0; --bd: #5b2584; --tx: #fff; text-shadow: 0 .15cqw 0 rgba(0,0,0,.4); }
.gbtn.amber { --t1: #ffd05a; --t2: #e8961b; --bd: #9a5d08; --tx: #3d2503; }
.gbtn.suggest { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 .6cqw 0 var(--bd), 0 0 0 .6cqw rgba(255,255,160,.95), 0 0 3cqw #fff36a; } }
.clear.gbtn { min-width: 0; padding: 1cqw 3.4cqw; font-size: max(12px, 2.7cqw); }
.act { min-width: 0; padding: 1.5cqw 0; width: 18.5cqw; }
.pane.ins .gbtn { width: 22cqw; padding-left: 0; padding-right: 0; }

/* ---------- result pop ---------- */
.pop { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.74)); }
.pop[hidden] { display: none; }
.pop.show { animation: fade .22s ease-out both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.pop-rays { position: absolute; left: 50%; top: 50%; width: 160cqw; height: 160cqw; margin: -80cqw 0 0 -80cqw; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,224,102,.26) 0 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 72%); mask-image: radial-gradient(closest-side, #000 20%, transparent 72%); animation: spin 16s linear infinite; pointer-events: none; }
.pop[data-kind="win"] .pop-rays, .pop[data-kind="blackjack"] .pop-rays { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.pop-card { position: relative; width: min(58cqw, 92%); padding: 6.4cqw 4cqw 4cqw; border-radius: 3cqw; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; background: linear-gradient(#1c6b38, #0d3d21); border: .7cqw solid #ffd54a; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.6), inset 0 0 0 .4cqw rgba(0,0,0,.35), inset 0 1cqw 3cqw rgba(255,255,255,.08); }
.pop.show .pop-card { animation: popin .6s cubic-bezier(.2,.9,.3,1.15) both; }
.pop[data-kind="lose"].show .pop-card, .pop[data-kind="bust"].show .pop-card { animation: popin .5s cubic-bezier(.2,.9,.3,1.15) both, shake .45s .5s ease-in-out; }
@keyframes popin { 0% { transform: scale(.25) rotate(-7deg); opacity: 0; } 55% { transform: scale(1.12) rotate(2deg); opacity: 1; } 78% { transform: scale(.96) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes shake { 0%,100% { translate: 0; } 20% { translate: -1.4cqw; } 40% { translate: 1.4cqw; } 60% { translate: -.9cqw; } 80% { translate: .9cqw; } }
.pop-ribbon { position: absolute; top: -3.8cqw; left: 50%; transform: translateX(-50%); padding: 1.1cqw 6cqw; border-radius: 1.6cqw; white-space: nowrap; font-family: var(--font-ui); font-weight: 700; font-size: max(15px, 4.2cqw); letter-spacing: .04em; line-height: 1.1; color: #3b2500; background: linear-gradient(#ffe27a, #f2b21c); box-shadow: 0 .7cqw 0 #a86e07, 0 1.2cqw 2cqw rgba(0,0,0,.45); }
.pop[data-kind="lose"] .pop-ribbon, .pop[data-kind="bust"] .pop-ribbon { color: #fff; background: linear-gradient(#ff7466, #d42a1f); box-shadow: 0 .7cqw 0 #85150e, 0 1.2cqw 2cqw rgba(0,0,0,.45); }
.pop[data-kind="push"] .pop-ribbon { color: #112; background: linear-gradient(#e7eef2, #a9b8c2); box-shadow: 0 .7cqw 0 #6b7b86, 0 1.2cqw 2cqw rgba(0,0,0,.45); }
.pop[data-kind="blackjack"] .pop-card { border-color: #fff3a6; box-shadow: 0 0 6cqw rgba(255,214,70,.6), 0 2cqw 5cqw rgba(0,0,0,.6), inset 0 0 0 .4cqw rgba(0,0,0,.35); }
.pop[data-kind="lose"] .pop-card, .pop[data-kind="bust"] .pop-card { background: linear-gradient(#5a1d1a, #2b0c0b); border-color: #e8786c; }
.pop[data-kind="push"] .pop-card { background: linear-gradient(#2a4254, #15242e); border-color: #b9ccd8; }
.pop-amt { font-family: var(--font-ui); font-weight: 700; font-size: max(26px, 8.2cqw); line-height: 1.05; color: var(--yellow); font-variant-numeric: tabular-nums; text-shadow: 0 .5cqw 0 #8a5d00, 0 1cqw 2cqw rgba(0,0,0,.5); white-space: nowrap; }
.pop[data-kind="lose"] .pop-amt, .pop[data-kind="bust"] .pop-amt { color: #ff9a8f; text-shadow: 0 .5cqw 0 #6b160f, 0 1cqw 2cqw rgba(0,0,0,.5); }
.pop[data-kind="push"] .pop-amt { color: #e3eef5; text-shadow: 0 .5cqw 0 #50626e, 0 1cqw 2cqw rgba(0,0,0,.5); font-size: max(22px, 6.4cqw); }
.pop-sub { font-family: var(--font-ui); font-size: max(12px, 2.5cqw); color: #d7efdc; line-height: 1.3; }
.pop-rows { display: flex; flex-direction: column; gap: .6cqw; width: 100%; }
.pop-rows:empty { display: none; }
.prow { display: flex; justify-content: space-between; gap: 2cqw; font-family: var(--font-ui); font-size: max(11px, 2.2cqw); background: rgba(0,0,0,.25); padding: .5cqw 1.6cqw; border-radius: 1cqw; }
.prow b { font-weight: 600; color: var(--yellow); }
.pop .gbtn { margin-top: 1cqw; min-width: 22cqw; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -6cqw; width: 1.6cqw; height: 2.6cqw; border-radius: .3cqw; animation: fall var(--t) linear var(--dl) forwards; }
@keyframes fall { to { transform: translate(var(--x), 114cqw) rotate(760deg); } }

.under { max-width: 840px; width: 100%; margin: 12px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; color: #9fb3a8; font-size: 13px; }
.under .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { background: transparent; border: 1px solid #38463e; color: #d5e2da; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.pill:hover { border-color: #6c8577; }
.pill[aria-pressed="true"] { border-color: var(--yellow); color: var(--yellow); }
.stats { display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.stats b { color: #fff; font-weight: 600; }
.keys { width: 100%; max-width: 840px; margin: 6px auto 0; color: #7d9086; font-size: 12.5px; text-align: center; }

/* ---------- content ---------- */
.sec { background: rgba(255,255,255,.028); border: 1px solid var(--line); border-radius: 12px; padding: clamp(18px, 3.4vw, 34px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sec h2 { font-size: clamp(22px, 3.4vw, 30px); }
.sec h3 { font-size: 18px; color: #fff; }
.sec p { margin: 0; max-width: 75ch; }
.sec ul, .sec ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; max-width: 75ch; }
.lead { color: var(--muted); }
.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 24px; margin: 0; }
.terms div { min-width: 0; }
.terms dt { font-family: var(--font-ui); font-weight: 600; color: var(--yellow); }
.terms dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.tablewrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { color: #fff; font-weight: 600; white-space: nowrap; }
.rules td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }
.chart { text-align: center; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.chart th, .chart td { text-align: center; padding: 6px 4px; min-width: 38px; border: 1px solid #0d1210; }
.chart thead th { background: #1a2620; color: #cfe0d6; }
.chart tbody th { background: #1a2620; text-align: left; padding-left: 10px; min-width: 84px; }
.chart td { font-weight: 600; color: #fff; }
.c-H { background: #2c6e3e; } .c-S { background: #b03029; } .c-D { background: #2d62ac; } .c-P { background: #7d3ea8; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.charts > div { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
details { border: 1px solid var(--line); border-radius: 8px; padding: 0 16px; background: rgba(0,0,0,.18); }
summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: #fff; list-style-position: outside; }
details[open] summary { color: var(--yellow); }
details p { padding-bottom: 14px; color: var(--muted); }
.faq { display: flex; flex-direction: column; gap: 8px; }

/* ---------- footer ---------- */
.foot { max-width: 1200px; margin: 28px auto 0; border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 14.5px; }
.foot nav a, .foot nav button { color: #c9dbd0; text-decoration: none; background: none; border: 0; padding: 4px 0; font-size: inherit; }
.foot nav a:hover, .foot nav button:hover { color: #fff; text-decoration: underline; }

/* ---------- legal pages ---------- */
.legal { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-block: 10px 6px; }
.legal[hidden] { display: none; }
.legal h1 { font-size: clamp(28px, 5vw, 40px); }
.legal h2 { font-size: 21px; margin-top: 12px; }
.legal p, .legal li { max-width: 72ch; margin: 0; }
.legal ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.legal .meta { color: var(--muted); font-size: 14px; }
.back { align-self: flex-start; font-weight: 700; text-decoration: none; }
.ph { color: var(--yellow); }

/* ---------- cookie banner and settings ---------- */
.cb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #16211b; border-top: 1px solid #34473c; box-shadow: 0 -8px 30px rgba(0,0,0,.45); padding: 14px max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.cb[hidden] { display: none; }
.cb-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.cb p { margin: 0; font-size: 14px; line-height: 1.5; flex: 1 1 420px; min-width: 0; color: #d3e3d9; }
.cb .row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 1px solid #4b6155; background: transparent; color: #fff; border-radius: 8px; padding: 9px 16px; font-weight: 700; font-size: 14px; }
.btn:hover { border-color: #8aa597; }
.btn.go { background: var(--green); border-color: var(--green); color: #12300a; }
.btn.go:hover { background: #95e257; }
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.7); padding: 16px; }
.modal[hidden] { display: none; }
.mbox { width: min(560px, 100%); max-height: 100%; overflow: auto; background: #131b17; border: 1px solid #34473c; border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.mbox h2 { font-size: 24px; }
.mbox p { margin: 0; color: var(--muted); font-size: 15px; }
.opt { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.opt b { color: #fff; display: block; }
.opt span { color: var(--muted); font-size: 14px; line-height: 1.45; display: block; }
.sw { position: relative; flex: none; width: 46px; height: 26px; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 99px; background: #3a4a41; transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sw input:checked + i { background: var(--green); }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:disabled { cursor: not-allowed; }
.sw input:disabled + i { opacity: .55; }
.sw input:focus-visible + i { outline: 3px solid var(--yellow); outline-offset: 2px; }
.mbox .row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 680px) {
  body { font-size: 15.5px; }
  .stage { aspect-ratio: 2 / 3; --cw: 21cqw; max-width: 560px; }
  .stage[data-n="2"] { --cw: 16cqw; }
  .stage[data-n="3"] { --cw: 12.5cqw; }
  .wood { left: -35cqw; width: 170cqw; top: -100cqw; height: 246cqw; }
  .felt { inset: 4cqw; }
  .shoe { width: 30cqw; height: 25cqw; left: -3cqw; top: -3cqw; }
  .shoe i { left: 8cqw; top: 6cqw; width: 14cqw; height: 15cqw; }
  .dealer { top: 4cqw; }
  .badge { right: calc(100% + 2cqw); min-width: 8.6cqw; height: 8.6cqw; border-radius: 1.8cqw; font-size: max(13px, 4.4cqw); }
  .hands { top: 38cqw; gap: 3cqw 12cqw; padding-left: 10cqw; }
  .hmeta { font-size: max(12px, 3.6cqw); min-height: 5cqw; }
  .tag { font-size: max(10px, 3cqw); }
  .stat { top: 79cqw; }
  .stat span { font-size: max(12px, 3.6cqw); } .stat b { font-size: max(16px, 5cqw); }
  .bal { left: 7cqw; } .bid { right: 7cqw; align-items: flex-end; }
  .clear { right: 36cqw; top: 82.5cqw; }
  .bidstack { display: none; }
  .prompt { top: 91cqw; padding: 0 6cqw; }
  .prompt b { font-size: max(15px, 4.6cqw); } .prompt span { font-size: max(11px, 3.1cqw); }
  .controls { top: 102cqw; gap: 4cqw; }
  .chip { --d: 16cqw; } .pane { gap: 2cqw; }
  .gbtn { padding: 2.4cqw 9cqw; font-size: max(15px, 5cqw); border-radius: 2.2cqw; box-shadow: 0 1cqw 0 var(--bd), 0 1.6cqw 2.4cqw rgba(0,0,0,.4), inset 0 .4cqw 0 rgba(255,255,255,.55); }
  .clear.gbtn { padding: 1.6cqw 5cqw; font-size: max(12px, 3.8cqw); }
  .act { width: 21.4cqw; padding: 3cqw 0; font-size: max(14px, 4.4cqw); }
  .pane.ins .gbtn { width: 36cqw; }
  .pop-card { width: 86%; padding: 9cqw 5cqw 6cqw; gap: 2.4cqw; border-radius: 4cqw; }
  .pop-ribbon { top: -5.6cqw; padding: 1.8cqw 8cqw; font-size: max(16px, 6.2cqw); border-radius: 2.4cqw; }
  .pop-amt { font-size: max(28px, 12cqw); } .pop[data-kind="push"] .pop-amt { font-size: max(24px, 9cqw); }
  .pop-sub { font-size: max(12px, 3.6cqw); }
  .prow { font-size: max(11px, 3.4cqw); padding: .8cqw 2.4cqw; }
  .pop .gbtn { min-width: 40cqw; margin-top: 2cqw; }
  .confetti i { width: 2.4cqw; height: 3.8cqw; }
  .stats { gap: 10px; }
  .ad-billboard .ad-box { min-height: 250px; }
}
/* start screen */
.start { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, rgba(8,38,22,.94), rgba(2,10,6,.97)); transition: opacity .25s; }
.start[hidden] { display: none; }
.start.out { opacity: 0; pointer-events: none; }
.start-card { display: flex; flex-direction: column; align-items: center; gap: 3cqw; text-align: center; padding: 0 4cqw; }
.start-logo { font-family: var(--font-ui); font-weight: 700; font-size: max(28px, 8cqw); line-height: 1; color: #fff; text-shadow: 0 .6cqw 0 rgba(0,0,0,.5); }
.start-logo span, .n21 { color: var(--yellow); }
.start-btn { font-size: max(16px, 3.8cqw); padding: 2.2cqw 7cqw; border-radius: 2cqw; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.05); } }
.start-card p { margin: 0; font-family: var(--font-ui); font-size: max(12px, 2.2cqw); color: #cfe8d3; line-height: 1.3; }
.email { color: #fff; font-weight: 600; }
@media (max-width: 680px) {
  .start-card { gap: 5cqw; }
  .start-logo { font-size: max(32px, 12cqw); }
  .start-btn { font-size: max(17px, 5.6cqw); padding: 3.4cqw 8cqw; border-radius: 3cqw; }
  .start-card p { font-size: max(12px, 3.5cqw); }
}
@media (prefers-reduced-motion: reduce) { .start-btn { animation: none; } .start { transition: none; } }
@media (prefers-reduced-motion: reduce) { .card.deal, .card.flip, .gbtn.suggest, .pop.show, .pop.show .pop-card, .pop-rays { animation: none !important; } .chip, .gbtn { transition: none; } .confetti { display: none; } }