/* Ten Tables online: styles for the games added for the online version.
   Older games (roulette, blackjack cards, baccarat, video poker, craps,
   slots, keno, mines, crash, peg drop) use site.css. */

:root {
  --lc-red: #c62f2f;
  --lc-yellow: #e5b42a;
  --lc-green: #23743f;
  --lc-blue: #2f63ad;
  --dragon: #c0392b;
  --tiger: #d58b1d;
}

/* ---------- Shared: bet spots, history strips, card areas ---------- */

.spot-board { display: grid; gap: 8px; }
.spot {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0.15rem; min-height: 64px; min-width: 0;
  padding: 0.5rem 0.4rem; border: 2px solid var(--grid-line); border-radius: 10px; background: rgb(0 0 0 / 0.12);
  color: var(--ivory); cursor: pointer; text-align: center; font: inherit; transition: box-shadow 0.15s, background-color 0.15s;
}
.spot:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 2px var(--brass-hi); }
.spot-board.is-locked .spot { cursor: default; }
.spot-label { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.15; }
.spot-sub { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; color: var(--ivory-2); }
.spot-bet { position: absolute; top: 6px; right: 6px; pointer-events: none; }
.spot.has-bet { background: rgb(0 0 0 / 0.24); }
.spot.is-hit { background: rgb(217 180 90 / 0.3); box-shadow: inset 0 0 0 3px var(--brass-hi), 0 0 18px rgb(217 180 90 / 0.45); }

.hist { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 0.4rem; }
.hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.hist-item { display: flex; }
.hist-empty { color: var(--ivory); opacity: 0.85; }
.hist .bead { width: 28px; height: 28px; position: relative; }

.card-felt { display: grid; gap: 1rem; justify-items: center; --card-w: clamp(64px, 9vw, 96px); }
.cd-side { display: grid; gap: 0.5rem; justify-items: center; }
.cd-head { display: flex; gap: 0.6rem; align-items: center; }
.cd-name { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--brass-hi); }

/* ---------- Baccarat (spot board version) ---------- */

.bac-spots.spot-board { grid-template-columns: 1fr 0.8fr 1fr; }
.bac-spot.spot { min-height: 84px; }
.bac-spot-player .spot-label { color: var(--player); }
.bac-spot-banker .spot-label { color: var(--banker); }
.bac-spot-tie .spot-label { color: var(--win); }
.bac-spot-ppair, .bac-spot-bpair { min-height: 56px; }
.bac-spot-ppair .spot-label, .bac-spot-bpair .spot-label { font-size: var(--step-0); }
@media (max-width: 560px) { .bac-spots.spot-board { grid-template-columns: 1fr 1fr; } .bac-spot-tie { grid-column: 1 / -1; } }

/* ---------- Dragon Tiger ---------- */

.dt-felt { display: grid; gap: 1.1rem; --card-w: clamp(80px, 12vw, 120px); }
.dt-stage { display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 5vw, 3rem); }
.dt-side { display: grid; justify-items: center; gap: 0.6rem; padding: 0.8rem 1.2rem; border-radius: 14px; border: 2px solid transparent; transition: border-color 0.3s, background-color 0.3s; }
.dt-side.is-winner { border-color: var(--brass-hi); background: rgb(217 180 90 / 0.14); }
.dt-name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); }
.dt-side-dragon .dt-name { color: #ffb4a8; }
.dt-side-tiger .dt-name { color: #ffd38a; }
.dt-vs { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); color: var(--brass-hi); }
.dt-spots { grid-template-columns: 1fr 0.7fr 1fr; }
.dt-spot { min-height: 80px; }
.dt-spot-dragon .spot-label { color: #ffb4a8; }
.dt-spot-tiger .spot-label { color: #ffd38a; }
.dt-bead-dragon { background: var(--dragon); color: #fff; }
.dt-bead-tiger { background: var(--tiger); color: var(--ink); }
.dt-bead-tie { background: var(--win); color: var(--ink); }

/* ---------- Andar Bahar ---------- */

.ab-felt { display: grid; gap: 1rem; --card-w: clamp(52px, 6.5vw, 76px); }
.ab-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.ab-mid { display: grid; justify-items: center; gap: 0.4rem; --card-w: clamp(70px, 9vw, 96px); }
.ab-label { font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--brass-hi); }
.ab-count { font-family: var(--font-ui); font-size: 0.85rem; color: var(--ivory); min-height: 1.2em; }
.ab-lanes { display: grid; gap: 0.8rem; min-width: 0; }
.ab-lane { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 10px; border: 2px solid var(--line); min-height: calc(var(--card-w) * 1.4 + 1rem); }
.ab-lane.is-winner { border-color: var(--brass-hi); background: rgb(217 180 90 / 0.12); }
.ab-row { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.ab-row .card + .card { margin-left: calc(var(--card-w) * -0.55); }
.ab-row .card.is-tucked { --card-w: clamp(40px, 5vw, 56px); opacity: 0.8; }
.ab-main { grid-template-columns: 1fr 1fr; }
.ab-spot { min-height: 76px; }
.ab-ranges { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ab-range { min-height: 58px; }
.ab-range .spot-label { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 700; }
.ab-bead-andar { background: var(--player); color: var(--ink); }
.ab-bead-bahar { background: var(--banker); color: var(--ink); }
.ab-bead-n { position: absolute; bottom: -4px; right: -6px; font-size: 0.62rem; background: var(--ink); color: var(--ivory); border-radius: 3px; padding: 0 2px; }
@media (max-width: 760px) { .ab-stage { grid-template-columns: 1fr; } .ab-ranges { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ab-lane { grid-template-columns: 1fr; } }

/* ---------- Sic Bo ---------- */

.sb-felt { display: grid; gap: 1rem; }
.sb-top { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.sb-dome {
  display: flex; gap: 14px; padding: 1.2rem 1.8rem; border-radius: 50% / 46%; min-width: 260px; justify-content: center;
  background: radial-gradient(circle at 40% 30%, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.05) 55%, rgb(0 0 0 / 0.25));
  box-shadow: inset 0 0 0 3px rgb(243 237 223 / 0.35), 0 10px 24px var(--shadow);
}
.sb-dome .die { width: 58px; height: 58px; }
.sb-dome.is-done { box-shadow: inset 0 0 0 3px var(--brass-hi), 0 10px 24px var(--shadow); }
.sb-sum { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); min-width: 6ch; }
.sb-board { display: grid; gap: 6px; }
.sb-row { gap: 6px; }
.sb-row-top { grid-template-columns: 3fr 2fr 3fr 2fr 3fr; }
.sb-row-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sb-row-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sb-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sb-spot { min-height: 54px; padding: 0.35rem 0.2rem; }
.sb-spot .spot-label { font-size: var(--step-0); font-family: var(--font-ui); font-weight: 700; }
.sb-spot .spot-sub { font-size: 0.66rem; letter-spacing: 0.03em; }
.sb-big-bet, .sb-any { min-height: 72px; }
.sb-big-bet .spot-label, .sb-any .spot-label { font-family: var(--font-display); font-size: var(--step-2); }
.sb-single { min-height: 62px; }
.sb-pip {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin: 0 1px; border-radius: 4px;
  background: var(--card); color: var(--red); font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; line-height: 1;
}
.sb-hist { display: inline-flex; gap: 0.35rem; align-items: center; padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--veil); border: 1px solid var(--line-strong); font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.sb-hist-t { font-weight: 700; color: var(--brass-hi); }
@media (max-width: 640px) {
  .sb-row-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-row-top .sb-any { grid-column: 1 / -1; order: 5; }
  .sb-row-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-row-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sb-row-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-dome { min-width: 0; padding: 1rem; }
  .sb-dome .die { width: 46px; height: 46px; }
}

/* ---------- Money Wheel ---------- */

.mw-felt { display: grid; gap: 1rem; }
.mw-layout { display: grid; grid-template-columns: minmax(240px, 420px) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.mw-wheel-wrap { width: 100%; }
.mw-wheel { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 24px var(--shadow)); }
.mw-rim { fill: var(--rail); stroke: var(--brass-lo); stroke-width: 4; }
.mw-seg { stroke: rgb(0 0 0 / 0.35); stroke-width: 1; }
.mw-num { fill: var(--ink); font-family: var(--font-ui); font-weight: 700; font-size: 15px; }
.mw-peg { fill: var(--brass-hi); }
.mw-hub { fill: var(--rail-hi); stroke: var(--brass); stroke-width: 3; }
.mw-hub-ring { fill: none; stroke: var(--brass-lo); stroke-width: 2; stroke-dasharray: 4 4; }
.mw-hub-text { fill: var(--brass-hi); font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.1em; }
.mw-pointer { fill: var(--brass-hi); stroke: var(--ink); stroke-width: 2; }
.mw-v0 { fill: #3d4148; } .mw-v0.mw-num, .mw-v0 + .mw-num { fill: var(--ivory); }
.mw-v2 { fill: #e9e2cf; }
.mw-v4 { fill: #9ec0f0; }
.mw-v8 { fill: #92e3b0; }
.mw-v16 { fill: #f4a39b; }
.mw-v24 { fill: #ecd08a; }
.mw-v48 { fill: #ff7b6b; }
.mw-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mw-spot { min-height: 82px; }
.mw-spot .spot-label { font-family: var(--font-ui); font-weight: 700; font-size: var(--step-3); }
.mw-spot.mw-v2 { background: rgb(233 226 207 / 0.16); }
.mw-spot.mw-v4 { background: rgb(158 192 240 / 0.18); }
.mw-spot.mw-v8 { background: rgb(146 227 176 / 0.18); }
.mw-spot.mw-v16 { background: rgb(244 163 155 / 0.18); }
.mw-spot.mw-v24 { background: rgb(236 208 138 / 0.2); }
.mw-spot.mw-v48 { background: rgb(255 123 107 / 0.22); }
.mw-hist { display: inline-block; min-width: 2.4rem; text-align: center; padding: 0.1rem 0.45rem; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
.mw-hist.mw-v0 { background: #3d4148; color: var(--ivory); }
.mw-hist.mw-v2 { background: #e9e2cf; } .mw-hist.mw-v4 { background: #9ec0f0; } .mw-hist.mw-v8 { background: #92e3b0; }
.mw-hist.mw-v16 { background: #f4a39b; } .mw-hist.mw-v24 { background: #ecd08a; } .mw-hist.mw-v48 { background: #ff7b6b; }
@media (max-width: 760px) { .mw-layout { grid-template-columns: 1fr; } .mw-wheel-wrap { max-width: 360px; margin-inline: auto; } }

/* ---------- Horse Race ---------- */

.hr-felt { display: grid; gap: 0.9rem; }
.hr-course { display: grid; gap: 4px; padding: 0.6rem; border-radius: 12px; background: linear-gradient(180deg, #2b6b3c, #24603a); box-shadow: inset 0 0 0 3px #f3eddf55; }
.hr-lane { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 10rem); align-items: center; gap: 0.5rem; padding: 2px 0; border-bottom: 1px dashed rgb(243 237 223 / 0.35); }
.hr-lane:last-child { border-bottom: 0; }
.hr-lane.is-winner { background: rgb(236 208 138 / 0.18); border-radius: 6px; }
.hr-gate { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; }
.hr-track { position: relative; height: 40px; }
.hr-finish { position: absolute; top: -2px; bottom: -2px; right: 0; width: 6px; background: repeating-linear-gradient(0deg, var(--ivory) 0 6px, var(--ink) 6px 12px); }
.hr-runner { position: absolute; top: 0; left: calc(var(--x, 0) * (100% - 58px)); width: 58px; height: 40px; will-change: left; }
.hr-horse { width: 58px; height: 38px; display: block; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.5)); }
.hr-body { fill: #4a2d18; }
.hr-saddle { stroke: var(--ink); stroke-width: 0.8; }
.hr-num { font-family: var(--font-ui); font-weight: 700; font-size: 7px; }
.hr-lane-name { font-family: var(--font-ui); font-weight: 600; font-size: 0.85rem; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-c0, .hr-c0 .hr-saddle { background: #e9e2cf; fill: #e9e2cf; color: var(--ink); }
.hr-c1, .hr-c1 .hr-saddle { background: #d84a3f; fill: #d84a3f; color: #fff; }
.hr-c2, .hr-c2 .hr-saddle { background: #2f63ad; fill: #2f63ad; color: #fff; }
.hr-c3, .hr-c3 .hr-saddle { background: #e5b42a; fill: #e5b42a; color: var(--ink); }
.hr-c4, .hr-c4 .hr-saddle { background: #18191d; fill: #18191d; color: #fff; }
.hr-c5, .hr-c5 .hr-saddle { background: #6aa84f; fill: #6aa84f; color: var(--ink); }
.hr-c4 .hr-num, .hr-c1 .hr-num, .hr-c2 .hr-num { fill: #fff; }
.hr-c0 .hr-num, .hr-c3 .hr-num, .hr-c5 .hr-num { fill: var(--ink); }
.hr-horse.hr-c0, .hr-horse.hr-c1, .hr-horse.hr-c2, .hr-horse.hr-c3, .hr-horse.hr-c4, .hr-horse.hr-c5 { background: none; }
.hr-board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hr-spot.spot { background: rgb(0 0 0 / 0.2); color: var(--ivory); min-height: 92px; }
.hr-spot .spot-label { display: grid; gap: 0.2rem; justify-items: center; font-size: var(--step-0); }
.hr-spot-num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; }
.hr-spot.hr-c0 .hr-spot-num { background: #e9e2cf; color: var(--ink); } .hr-spot.hr-c1 .hr-spot-num { background: #d84a3f; color: #fff; }
.hr-spot.hr-c2 .hr-spot-num { background: #2f63ad; color: #fff; } .hr-spot.hr-c3 .hr-spot-num { background: #e5b42a; color: var(--ink); }
.hr-spot.hr-c4 .hr-spot-num { background: #18191d; color: #fff; } .hr-spot.hr-c5 .hr-spot-num { background: #6aa84f; color: var(--ink); }
.hr-spot-name { font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; line-height: 1.15; }
.hr-spot .spot-sub { font-size: 0.95rem; color: var(--brass-hi); }
.hr-hist { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 4px; font-family: var(--font-ui); font-weight: 700; }
@media (max-width: 760px) { .hr-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hr-lane { grid-template-columns: 1.8rem minmax(0, 1fr); } .hr-lane-name { display: none; } }

/* ---------- Keno additions ---------- */

.kn-tray { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Craps (spot board version) ---------- */

.cr-main { display: contents; }
.cr-props.spot-board { grid-area: props; display: grid; gap: 8px; }
.cr-spot.spot { padding: 0.6rem 3.5rem; }
.cr-props .cr-spot.spot { padding: 1.2rem 0.6rem; }
.cr-spot .spot-sub { color: var(--ivory); }
.cr-event { text-align: center; font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.04em; min-height: 1.4em; }
@media (max-width: 760px) { .cr-props.spot-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cr-spot.spot { padding-inline: 0.8rem; } }

/* ---------- Crash additions ---------- */

.cx-cashed { position: absolute; right: 10px; bottom: 36px; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; justify-items: end; pointer-events: none; }
.cx-cash { font-family: var(--font-ui); font-size: 0.85rem; background: rgb(0 0 0 / 0.55); color: var(--ivory); padding: 0.1rem 0.45rem; border-radius: 4px; }
.cx-cash strong { color: var(--win); }
#cx-auto { width: 8rem; }

/* ---------- Bingo ---------- */

.bg-felt { display: grid; gap: 1rem; }
.bg-top { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.bg-ball {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; align-content: center; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff, var(--card) 40%, #cfc5ad); box-shadow: 0 8px 18px var(--shadow), inset 0 0 0 10px var(--bg-c, #888);
  color: var(--ink); font-family: var(--font-ui); font-weight: 700;
}
.bg-ball-letter { font-size: 0.95rem; line-height: 1; }
.bg-ball-num { font-size: 2rem; line-height: 1; }
.bg-l-B { --bg-c: #2f63ad; } .bg-l-I { --bg-c: #c62f2f; } .bg-l-N { --bg-c: #e9e2cf; } .bg-l-G { --bg-c: #23743f; } .bg-l-O { --bg-c: #e5b42a; }
.bg-top-text { display: grid; gap: 0.3rem; min-width: 0; }
.bg-pot { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
.bg-winners p { color: var(--brass-hi); font-weight: 600; }
.bg-called-wrap { display: flex; gap: 0.6rem; align-items: flex-start; }
.bg-called { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.bg-called-ball { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 3px var(--bg-c); }
.bg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem; }
.bg-card { background: var(--card); border-radius: 12px; padding: 0.5rem; box-shadow: 0 8px 18px var(--shadow); color: var(--ink); }
.bg-head { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--red-deep); }
.bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bg-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: #ece4cf; font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; transition: background-color 0.2s; }
.bg-cell.is-free { font-size: 0.7rem; letter-spacing: 0.06em; }
.bg-cell.is-marked { background: var(--red); color: #fff; box-shadow: inset 0 0 0 2px var(--red-deep); }
.bg-empty { color: var(--ivory); }
.bg-hist { padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--veil); border: 1px solid var(--line-strong); font-family: var(--font-ui); }

/* ---------- Jackpot ---------- */

.jp-felt { display: grid; gap: 1rem; }
.jp-pot { font-family: var(--font-display); font-weight: 600; font-size: var(--step-4); text-align: center; color: var(--brass-hi); }
.jp-track { position: relative; padding-top: 22px; }
.jp-bar { display: flex; height: 42px; border-radius: 10px; overflow: hidden; background: rgb(0 0 0 / 0.3); box-shadow: inset 0 0 0 2px var(--line-strong); }
.jp-seg { flex: var(--w) 0 0; min-width: 2px; border-right: 2px solid rgb(0 0 0 / 0.35); transition: flex-grow 0.4s; }
.jp-seg.is-winner { box-shadow: inset 0 0 0 3px #fff; }
.jp-marker { position: absolute; top: 0; left: calc(var(--x, 0) * 100%); transform: translateX(-50%); width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 18px solid var(--ivory); filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.6)); }
.jp-h0 { background: #ecd08a; } .jp-h1 { background: #9ec0f0; } .jp-h2 { background: #f4a39b; } .jp-h3 { background: #92e3b0; }
.jp-h4 { background: #c9a7ef; } .jp-h5 { background: #f0c63e; } .jp-h6 { background: #7fd1d9; } .jp-h7 { background: #e9e2cf; }
.jp-entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.4rem; }
.jp-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgb(0 0 0 / 0.22); }
.jp-entry.is-winner { box-shadow: inset 0 0 0 2px var(--brass-hi); background: rgb(217 180 90 / 0.18); }
.jp-dot { width: 14px; height: 14px; border-radius: 50%; }
.jp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-amt { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }
.jp-chance { font-family: var(--font-ui); color: var(--ivory-2); font-variant-numeric: tabular-nums; }
.jp-hist { padding: 0.1rem 0.5rem; border-radius: 4px; background: var(--veil); border: 1px solid var(--line-strong); font-family: var(--font-ui); }

/* ---------- Tower ---------- */

.tw-felt { display: grid; gap: 1rem; }
.tw-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(180px, 1fr); gap: 1.5rem; align-items: start; justify-content: center; }
.tw-floors { display: grid; gap: 6px; }
.tw-floor { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 3px; border-radius: 8px; }
.tw-floor.is-current { background: rgb(217 180 90 / 0.16); box-shadow: inset 0 0 0 2px var(--brass); }
.tw-fnum { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--brass-hi); }
.tw-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.tw-tile { min-height: 42px; border-radius: 8px; border: 1.5px solid var(--grid-line); background: rgb(0 0 0 / 0.2); cursor: pointer; }
.tw-tile:disabled { cursor: default; opacity: 0.75; }
.tw-floor.is-current .tw-tile:not(:disabled):hover { background: rgb(217 180 90 / 0.25); }
.tw-tile.is-safe { background: var(--win); border-color: var(--win); opacity: 1; }
.tw-tile.is-shown-safe { background: rgb(146 227 176 / 0.3); }
.tw-tile.is-boom { background: var(--loss); border-color: var(--loss); opacity: 1; }
.tw-tile.is-shown-trap { background: rgb(255 154 143 / 0.25); }
@media (max-width: 760px) { .tw-layout { grid-template-columns: 1fr; } }

/* ---------- Hi-Lo ---------- */

.hl-felt { display: grid; gap: 1rem; --card-w: clamp(90px, 14vw, 130px); }
.hl-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.hl-guesses { display: grid; gap: 0.6rem; justify-items: stretch; }
.hl-guess { display: grid; gap: 0.15rem; justify-items: center; min-height: 72px; text-transform: none; letter-spacing: 0.02em; }
.hl-guess > span { display: grid; justify-items: center; }
.hl-hi { border-color: var(--win); }
.hl-lo { border-color: var(--loss); }
.hl-arrow { font-size: 1.1rem; }
.hl-odds { font-size: 0.8rem; color: var(--ivory-2); font-weight: 500; }
.hl-current { display: grid; place-items: center; }
.hl-trail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; --card-w: 44px; }
.hl-step { display: grid; justify-items: center; gap: 2px; }
.hl-step.is-miss .card { outline: 3px solid var(--loss); border-radius: 6px; }
.hl-step-guess { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ivory-2); }
@media (max-width: 760px) { .hl-stage { grid-template-columns: 1fr; } .hl-guesses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Dice and Limbo ---------- */

.dc-felt, .lb-felt { display: grid; gap: 1rem; }
.dc-roll, .lb-big { text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.dc-roll.is-win, .lb-big.is-win { color: var(--win); }
.dc-roll.is-loss, .lb-big.is-loss { color: var(--loss); }
.dc-track { position: relative; height: 54px; margin-inline: 12px; }
.dc-track::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 12px; border-radius: 6px; background: var(--loss); }
.dc-fill { position: absolute; left: 0; top: 22px; height: 12px; width: calc(var(--t, 0.5) * 100%); border-radius: 6px 0 0 6px; background: var(--win); }
.dc-track.is-over .dc-fill { left: calc(var(--t, 0.5) * 100%); right: 0; width: auto; border-radius: 0 6px 6px 0; }
.dc-range { position: absolute; left: 0; right: 0; top: 14px; width: 100%; height: 28px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.dc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 6px; background: var(--ivory); border: 3px solid var(--ink); box-shadow: 0 2px 6px var(--shadow); }
.dc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 6px; background: var(--ivory); border: 3px solid var(--ink); }
.dc-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.dc-marker { position: absolute; top: -12px; left: calc(var(--r, 0) * 100%); transform: translateX(-50%); opacity: 0; transition: left 0.15s; }
.dc-track.has-roll .dc-marker { opacity: 1; }
.dc-marker::after { content: ""; display: block; width: 4px; height: 44px; margin: 0 auto; background: var(--brass-hi); border-radius: 2px; }
.dc-scale { display: flex; justify-content: space-between; margin-inline: 12px; font-family: var(--font-ui); font-size: 0.8rem; color: var(--ivory-2); }
.dc-stats { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; }
.lb-stage { display: grid; justify-items: center; gap: 0.4rem; padding: 1.5rem 0; }
.lb-target-text { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ivory); }
#lb-target, #dc-target-num { width: 8rem; }

/* ---------- Scratch Cards ---------- */

.sc-felt { display: grid; gap: 1rem; justify-items: center; }
.sc-card { width: min(100%, 420px); padding: 1rem; border-radius: 16px; background: linear-gradient(160deg, #f6e7b4, #e3c66f); box-shadow: 0 14px 28px var(--shadow); color: var(--ink); }
.sc-title { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); margin-bottom: 0.6rem; color: var(--red-deep); }
.sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-square { position: relative; aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--card); overflow: hidden; cursor: pointer; padding: 0; }
.sc-square:disabled { cursor: default; }
.sc-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--ink); }
.sc-foil { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #b9b9b9 0 6px, #cfcfcf 6px 12px); transition: opacity 0.3s, transform 0.3s; display: grid; place-items: center; }
.sc-foil::after { content: "?"; font-family: var(--font-display); font-size: 1.8rem; color: #8a8a8a; }
.sc-square.is-open .sc-foil { opacity: 0; transform: scale(1.1); }
.sc-square.is-win { box-shadow: inset 0 0 0 4px var(--red), 0 0 14px rgb(184 32 44 / 0.5); }
.sc-square:not(:disabled):hover .sc-foil { filter: brightness(1.08); }

/* ---------- Three Card Poker, War, Red Dog ---------- */

.tc-lines { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; font-family: var(--font-ui); font-weight: 600; }
.wr-felt { --card-w: clamp(76px, 11vw, 110px); }
.wr-row { display: flex; gap: clamp(1rem, 6vw, 4rem); align-items: center; justify-content: center; flex-wrap: wrap; }
.wr-col { display: grid; gap: 0.6rem; justify-items: center; }
.wr-war:empty { display: none; }
.wr-burn { display: flex; --card-w: 40px; min-width: 40px; }
.wr-burn .card + .card { margin-left: -24px; }
.rd-felt { --card-w: clamp(76px, 11vw, 110px); }
.rd-row { display: flex; gap: 1rem; justify-content: center; align-items: center; }
.rd-slot:nth-child(2) .card { transform: translateY(-8px); }
.rd-spread { text-align: center; font-family: var(--font-ui); font-weight: 600; min-height: 1.4em; }

/* ---------- Duels ---------- */

.dl-felt { display: grid; gap: 1.2rem; }
.dl-mine { display: grid; gap: 1rem; }
.dl-mine[hidden] { display: none; }
.dl-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; }
.dl-col { display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.dl-title { font-size: var(--step-2); }
.dl-sub { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--ivory-2); margin-top: 0.4rem; }
.dl-list, .dl-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dl-card { display: grid; gap: 0.3rem; padding: 0.7rem 0.8rem; border-radius: 10px; background: rgb(0 0 0 / 0.24); border: 1px solid var(--line); }
.dl-card.is-mine { border-color: var(--brass); }
.dl-card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.dl-amount { font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; color: var(--brass-hi); }
.dl-who { overflow-wrap: anywhere; }
.dl-side { color: var(--ivory-2); }
.dl-hash { font-size: 0.8rem; display: flex; gap: 0.4rem; align-items: center; }
.dl-hash .hash { display: inline; padding: 0 0.3rem; }
.dl-live-item, .dl-recent-item { padding: 0.35rem 0.6rem; border-radius: 6px; background: rgb(0 0 0 / 0.18); font-size: 0.92rem; }
.dl-recent-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.6rem; }
.dl-recent-res { grid-column: 1; color: var(--brass-hi); font-weight: 600; }
.dl-check { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.85rem; }
.dl-stage { display: grid; justify-items: center; gap: 0.8rem; padding: 1.2rem; border-radius: 14px; background: rgb(0 0 0 / 0.25); border: 2px solid var(--line-strong); text-align: center; }
.dl-stage.is-won { border-color: var(--win); }
.dl-stage.is-lost { border-color: var(--loss); }
.dl-stage-text { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); }
@media (max-width: 760px) { .dl-cols { grid-template-columns: 1fr; } }

.cf-spin { width: 140px; height: 140px; perspective: 600px; }
.cf-coin { width: 100%; height: 100%; display: block; transform-style: preserve-3d; filter: drop-shadow(0 10px 14px var(--shadow)); }
.cf-edge { fill: var(--brass-lo); }
.cf-face { fill: var(--brass); }
.cf-ring { fill: none; stroke: var(--brass-hi); stroke-width: 2; stroke-dasharray: 3 3; }
.cf-text { font-family: var(--font-display); font-weight: 700; font-size: 34px; fill: var(--ink); }
.cf-tails { display: none; }
.cf-spin[data-land="tails"].is-flipping .cf-heads { animation: cf-hide 3s steps(1) forwards; }
.cf-spin[data-land="tails"].is-flipping .cf-tails { animation: cf-show 3s steps(1) forwards; }
.cf-spin.is-flipping .cf-coin { animation: cf-flip 3s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes cf-flip { 0% { transform: rotateX(0) translateY(0); } 40% { transform: rotateX(1080deg) translateY(-30px); } 100% { transform: rotateX(1800deg) translateY(0); } }
@keyframes cf-hide { 0% { display: inline; } 100% { display: none; } }
@keyframes cf-show { 0% { display: none; } 100% { display: inline; } }
.reduce-motion .cf-spin.is-flipping .cf-coin { animation: none; }

.dd-stage { grid-template-columns: 1fr auto 1fr; align-items: center; }
.dd-stage .dl-stage-text, .dd-stage .dd-tries { grid-column: 1 / -1; }
.dd-side { display: grid; justify-items: center; gap: 0.5rem; }
.dd-dice { display: flex; gap: 10px; }
.dd-dice .die { width: 54px; height: 54px; }
.dd-tries { font-family: var(--font-ui); color: var(--ivory-2); min-height: 1.2em; }

.rps-head { display: flex; gap: 1rem; align-items: baseline; justify-content: center; flex-wrap: wrap; }
.rps-clock { font-family: var(--font-ui); font-weight: 700; color: var(--brass-hi); font-variant-numeric: tabular-nums; }
.rps-picks { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.rps-picks[hidden] { display: none; }
.rps-pick { display: grid; justify-items: center; gap: 0.3rem; min-height: 120px; min-width: 110px; text-transform: none; }
.rps-icon { width: 72px; height: 72px; }
.rps-skin { fill: #e8b98f; stroke: #8a5a37; stroke-width: 3; }
.rps-line { fill: none; stroke: #8a5a37; stroke-width: 3; stroke-linecap: round; }
.rps-paper { fill: var(--card); stroke: var(--card-edge); stroke-width: 3; }
.rps-paper + .rps-line, .rps-paper ~ .rps-line { stroke: #b5a98b; stroke-width: 2; }
.rps-ring { fill: none; stroke: var(--red); stroke-width: 5; }
.rps-blade { fill: #c9ced6; stroke: #6d737c; stroke-width: 2; }
.rps-reveal { display: flex; gap: 1.2rem; align-items: center; justify-content: center; }
.rps-side { display: grid; justify-items: center; gap: 0.3rem; font-family: var(--font-ui); font-weight: 600; }

/* ---------- Blackjack table ---------- */

.bjt-felt { gap: 0.8rem; }
.bjt-seats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; width: 100%; --card-w: clamp(46px, 5.6vw, 72px); }
.bjt-seat { display: grid; gap: 0.4rem; justify-items: center; align-content: start; min-height: 170px; padding: 0.5rem 0.3rem; border-radius: 12px; border: 2px dashed rgb(243 237 223 / 0.35); }
.bjt-seat.is-empty { opacity: 0.85; }
.bjt-seat:not(.is-empty) { border-style: solid; border-color: var(--line-strong); background: rgb(0 0 0 / 0.14); }
.bjt-seat.is-me { border-color: var(--player); }
.bjt-seat.is-turn { box-shadow: 0 0 0 3px var(--brass-hi), 0 0 20px rgb(217 180 90 / 0.4); }
.bjt-seat-head { display: grid; justify-items: center; gap: 0.25rem; }
.bjt-name { font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; text-align: center; overflow-wrap: anywhere; }
.bjt-stake { min-height: 26px; }
.bjt-hands { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.bjt-hands .bj-hand { padding: 0.3rem; }
.bjt-hands .bj-label { min-height: 26px; }
.bjt-hands .bj-total { font-size: 0.9rem; }
.bjt-moves { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.bjt-moves[hidden] { display: none; }
.bjt-moves .btn { min-width: 6.5rem; }
@media (max-width: 760px) {
  .bjt-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bjt-seat.is-empty { min-height: 0; }
}

/* ---------- Texas Hold'em ---------- */

.pk-felt { display: grid; gap: 0.8rem; }
.pk-oval {
  position: relative; height: clamp(360px, 46vw, 470px); margin: 5.5rem 3.5rem 7rem; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-hi), var(--felt) 60%, var(--felt-lo)); box-shadow: inset 0 0 0 10px var(--rail), inset 0 0 0 13px var(--brass-lo), 0 16px 30px var(--shadow);
  --card-w: clamp(42px, 5vw, 62px);
}
.pk-center { position: absolute; inset: 28% 18%; display: grid; place-items: center; align-content: center; gap: 0.5rem; text-align: center; }
.pk-pot { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--brass-hi); }
.pk-board { display: flex; gap: 6px; }
.pk-slot { width: var(--card-w); aspect-ratio: 5 / 7; border-radius: 6px; border: 1.5px dashed rgb(243 237 223 / 0.35); }
.pk-win { font-family: var(--font-ui); font-weight: 600; color: var(--win); min-height: 1.3em; max-width: 34ch; }
.pk-seat { position: absolute; width: 150px; display: grid; justify-items: center; gap: 4px; transform: translate(-50%, -50%); }
.pk-pos-0 { left: 50%; top: 100%; }
.pk-pos-1 { left: 6%; top: 76%; }
.pk-pos-2 { left: 6%; top: 24%; }
.pk-pos-3 { left: 50%; top: 0%; }
.pk-pos-4 { left: 94%; top: 24%; }
.pk-pos-5 { left: 94%; top: 76%; }
.pk-cards { display: flex; min-height: calc(var(--card-w) * 1.4); }
.pk-cards .card + .card { margin-left: calc(var(--card-w) * -0.35); }
.pk-seat.is-folded .pk-cards { opacity: 0.35; }
.pk-plate { position: relative; display: grid; justify-items: center; min-width: 130px; padding: 0.3rem 0.6rem 0.45rem; border-radius: 10px; background: var(--room-3); border: 2px solid var(--line-strong); box-shadow: 0 6px 12px var(--shadow); overflow: hidden; }
.pk-seat.is-me .pk-plate { border-color: var(--player); }
.pk-seat.is-turn .pk-plate { border-color: var(--brass-hi); box-shadow: 0 0 0 2px var(--brass-hi), 0 0 18px rgb(217 180 90 / 0.5); }
.pk-seat.is-empty .pk-plate { background: rgb(0 0 0 / 0.25); border-style: dashed; }
.pk-name { font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-stack { font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--brass-hi); font-weight: 700; }
.pk-act { font-size: 0.78rem; color: var(--ivory-2); min-height: 1.1em; }
.pk-timer { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--brass-hi); transform-origin: left; transform: scaleX(var(--p, 0)); }
.pk-bet { font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; padding: 0 0.4rem; border-radius: 10px; background: var(--ink); color: var(--ivory); min-height: 1.2em; }
.pk-bet:empty { visibility: hidden; }
.pk-dealer { position: absolute; top: 18px; right: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; box-shadow: 0 2px 4px var(--shadow); }
.pk-dealer[hidden] { display: none; }
.pk-clock { text-align: center; font-family: var(--font-ui); font-weight: 600; color: var(--brass-hi); min-height: 1.3em; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; justify-content: center; padding: 0.8rem; border-radius: 12px; background: rgb(0 0 0 / 0.25); }
.pk-actions[hidden] { display: none; }
.pk-raise { display: grid; gap: 0.3rem; }
.pk-raise input[type="number"] { width: 8rem; }
.pk-log-box { margin-top: 0.8rem; }
.pk-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.9rem; color: var(--ivory-2); max-height: 12rem; overflow-y: auto; }
@media (max-width: 760px) {
  .pk-oval { margin: 4.5rem 1.6rem 6rem; height: 420px; --card-w: 38px; }
  .pk-seat { width: 100px; }
  .pk-plate { min-width: 92px; padding: 0.2rem 0.3rem 0.4rem; }
  .pk-name { max-width: 10ch; font-size: 0.8rem; }
  .pk-center { inset: 30% 12%; }
}

/* ---------- Last Card ---------- */

.lc-felt { display: grid; gap: 1rem; }
.lc-top { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.lc-pot { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--brass-hi); }
.lc-status { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0.04em; }
.lc-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; }
.lc-player { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0.45rem 0.7rem; border-radius: 10px; background: rgb(0 0 0 / 0.22); border: 2px solid transparent; }
.lc-player.is-turn { border-color: var(--brass-hi); background: rgb(217 180 90 / 0.14); }
.lc-player.is-me .lc-pname { color: var(--player); }
.lc-pname { font-weight: 600; overflow-wrap: anywhere; }
.lc-pcount { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-ui); font-weight: 700; }
.lc-mini { width: 14px; height: 20px; border-radius: 3px; background: var(--ink); box-shadow: inset 0 0 0 2px var(--brass); }
.lc-called { font-family: var(--font-ui); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0.35rem; border-radius: 3px; background: var(--lc-red); color: #fff; }
.lc-middle { display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.lc-deck { position: relative; width: 96px; aspect-ratio: 7 / 10; border: 0; padding: 0; border-radius: 10px; cursor: pointer; background: none; }
.lc-deck:disabled { cursor: default; opacity: 0.8; }
.lc-back { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 6px; line-height: 1.1; border-radius: 10px; background: var(--ink); color: var(--brass-hi); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 7px var(--lc-red), 4px 4px 0 var(--ink), 6px 6px 0 var(--card); }
.lc-deck:not(:disabled):hover .lc-back { transform: translateY(-3px); }
.lc-deck-count { position: absolute; bottom: -1.5rem; left: 0; right: 0; text-align: center; font-family: var(--font-ui); font-size: 0.8rem; color: var(--ivory); }
.lc-pile .lc-card { width: 110px; }
.lc-empty { display: block; width: 110px; aspect-ratio: 7 / 10; border-radius: 10px; border: 2px dashed rgb(243 237 223 / 0.35); }
.lc-now { display: grid; gap: 0.4rem; justify-items: start; }
.lc-colour { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-ui); font-weight: 700; }
.lc-colour::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px var(--ivory); }
.lc-colour.lc-red { color: #ff8a80; } .lc-colour.lc-yellow { color: var(--lc-yellow); } .lc-colour.lc-green { color: #7ee09b; } .lc-colour.lc-blue { color: #9ec0f0; }
.lc-colour.lc-none::before { display: none; }
.lc-dir { font-family: var(--font-ui); color: var(--ivory-2); }
.lc-hand-wrap { display: grid; gap: 0.6rem; }
.lc-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 120px; }
.lc-hcard { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; transition: transform 0.12s; }
.lc-hcard:disabled { cursor: default; filter: saturate(0.55) brightness(0.75); }
.lc-hcard.is-ok:hover { transform: translateY(-8px); }
.lc-hcard.is-ok { box-shadow: 0 0 0 2px var(--brass-hi); }
.lc-hand-actions { display: flex; gap: 0.6rem; justify-content: center; }
.lc-call[aria-pressed="true"] { background: var(--lc-red); border-color: var(--lc-red); color: #fff; }
.lc-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.9rem; color: var(--ivory-2); max-height: 9rem; overflow-y: auto; }
.lc-events li:first-child { color: var(--ivory); }
.lc-card { display: block; width: 76px; }
.lc-card.is-small { width: 40px; }
.lc-face { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.4)); }
.lc-bg { stroke: #fff; stroke-width: 3; }
.lc-red .lc-bg { fill: var(--lc-red); } .lc-yellow .lc-bg { fill: var(--lc-yellow); } .lc-green .lc-bg { fill: var(--lc-green); } .lc-blue .lc-bg { fill: var(--lc-blue); }
.lc-wild .lc-bg { fill: var(--black); }
.lc-oval { fill: #fff; }
.lc-wild .lc-oval { fill: none; }
.lc-q-red { fill: var(--lc-red); } .lc-q-yellow { fill: var(--lc-yellow); } .lc-q-green { fill: var(--lc-green); } .lc-q-blue { fill: var(--lc-blue); }
.lc-big { font-family: var(--font-ui); font-weight: 700; font-size: 30px; }
.lc-red .lc-big { fill: var(--lc-red); } .lc-yellow .lc-big { fill: #8a6600; } .lc-green .lc-big { fill: var(--lc-green); } .lc-blue .lc-big { fill: var(--lc-blue); }
.lc-wild .lc-big { fill: #fff; stroke: var(--black); stroke-width: 1.2px; paint-order: stroke; }
.lc-corner { font-family: var(--font-ui); font-weight: 700; font-size: 13px; fill: #fff; }
.lc-yellow .lc-corner { fill: var(--ink); }
.lc-choose { justify-items: start; }
@media (max-width: 640px) { .lc-card { width: 58px; } .lc-pile .lc-card, .lc-empty { width: 88px; } .lc-deck { width: 76px; } }

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .cf-spin.is-flipping .cf-coin { animation: none; }
}