/* PointPuck — casino table look, mobile-first, single stylesheet */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #0d0a08;
  color: #f3efe4;
  touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.hidden { display: none !important; }
/* a modal owns the screen: the table behind it holds still */
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.view { min-height: 100dvh; }

/* felt + painted-line helpers */
:root {
  --felt-hi: #0e6b3c;
  --felt: #0a5230;
  --felt-lo: #063a1f;
  --line: #e8dfc0;          /* painted cream table lines */
  --line-dim: #e8dfc099;
  --red: #d03b35;
  --gold: #f3c93b;
  --wood: #4a2f1b;
  --wood-hi: #6b4527;
}

/* ================= landing + auth ================= */
#authView {
  display: flex; flex-direction: column; align-items: stretch; padding: 0 16px 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #0e6b3c 0%, #0a5230 45%, #063a20 100%);
}
.landing-top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1100px; width: 100%; margin: 0 auto; padding: 18px 4px 6px;
}
.landing-logo { font-size: 22px; }
.landing-top .linkish { margin: 0; }
.hero {
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
  max-width: 1100px; width: 100%; margin: 18px auto 0;
}
@media (min-width: 900px) { .hero { grid-template-columns: 1.15fr 1fr; margin-top: 40px; } }
.hero-copy h1 { font-size: clamp(30px, 4.5vw, 46px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.5px; }
.hero-sub { color: #cfe4d2; font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; }
.hero-points { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.hero-points span { color: #e9e2cc; font-size: 14px; }
.hero-cta { max-width: 260px; font-size: 18px; padding: 15px; }
.feat-row {
  display: grid; grid-template-columns: 1fr; gap: 12px;
  max-width: 1100px; width: 100%; margin: 40px auto 0;
}
@media (min-width: 720px) { .feat-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .feat-row { grid-template-columns: repeat(4, 1fr); } }
.feat {
  background: #0b452799; border: 1px solid #1d6b40; border-radius: 14px; padding: 16px;
  font-size: 13px; color: #cfe4d2; line-height: 1.55;
}
.feat b { display: block; color: #f0e8c8; font-size: 14.5px; margin-bottom: 6px; }
/* ============ live tracker tile (top bar, right of the money) ============ */
.live-tile {
  display: flex; align-items: stretch; gap: 0; flex: 0 0 auto;
  background: #16100b; border: 1px solid #3a2a1c; border-radius: 10px;
  overflow: hidden; height: 38px; max-width: 260px;
}
.lt-pin {
  display: flex; align-items: center; gap: 9px; padding: 0 9px; min-width: 0;
  border-right: 1px solid #3a2a1c;
}
/* horizontal, so the whole word fits - the vertical version clipped "TREND" to "REND" */
.lt-label {
  flex: 0 0 46px; font-size: 8.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
  color: #a5906f; line-height: 1.15; text-align: left;
}
/* pinned reads at a glance: gold frame, gold label, and a pin on the arrow */
.live-tile.pinned { border-color: var(--gold); box-shadow: inset 0 0 0 1px #f3c93b44; }
.live-tile.pinned .lt-label { color: var(--gold); }
.live-tile.pinned .lt-label::after { content: " \1F4CC"; }
.lt-body { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lt-spark { width: 78px; height: 22px; flex: 0 0 78px; }
.lt-nums { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.lt-nums b { font-size: 13px; font-weight: 900; color: #f0e8c8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lt-nums b.up { color: #7df39b; } .lt-nums b.down { color: #ff9b9b; }
.lt-nums b i { font-style: normal; font-size: 9.5px; color: #a5906f; margin-left: 1px; }
.lt-nums b em { font-style: normal; color: #55452f; margin: 0 3px; }
.lt-nums > i {
  font-style: normal; font-size: 9.5px; color: #8f7a5c; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 168px;
}
.lt-dim { font-size: 10.5px; color: #8f7a5c; padding: 0 2px; }
.lt-next { width: 22px; font-size: 11px; color: #a5906f; }
.lt-next:hover { color: var(--gold); background: #201710; }

/* live house ledger on the landing page */
.house-strip {
  max-width: 760px; margin: 34px auto 0; text-align: center;
  background: #0b452766; border: 1px solid #1d6b40; border-radius: 14px; padding: 15px 18px;
}
.house-strip > b {
  display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #d8cf9f; margin-bottom: 10px;
}
.house-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.house-nums div { min-width: 110px; }
.house-nums b { display: block; font-size: 20px; font-weight: 900; color: #f3c93b; font-variant-numeric: tabular-nums; }
.house-nums span { font-size: 11px; color: #9fc7ab; letter-spacing: .5px; }
.house-strip > a { display: inline-block; margin-top: 12px; color: #ffd968; text-decoration: none; font-size: 13px; }

.learn-strip {
  max-width: 760px; margin: 36px auto 0; text-align: center;
  background: #0b452766; border: 1px solid #1d6b40; border-radius: 14px; padding: 16px 20px;
}
.learn-strip p { color: #cfe4d2; font-size: 14.5px; line-height: 1.7; margin: 0; }
.learn-strip a { color: #ffd968; }
.landing-foot { text-align: center; color: #9fc7ab; font-size: 12px; margin: 34px auto 8px; max-width: 760px; line-height: 1.5; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.foot-links a { color: #9fc7ab; text-decoration: none; font-size: 12.5px; }
.foot-links a:hover { color: #ffd968; }
.remember a { color: #ffd968; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfe4d2; margin: 8px 2px 2px; cursor: pointer; }
.remember input { width: 16px; height: 16px; accent-color: #f3c93b; }

/* the floor room */
.modal.lobby-modal { width: min(96vw, 1160px); max-width: none; max-height: 90dvh; }
.lobby-body {
  display: grid; grid-template-columns: 1fr; gap: 26px 18px; padding-top: 18px;
}
@media (min-width: 720px) { .lobby-body { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .lobby-body { grid-template-columns: repeat(3, 1fr); } }
.mini-wrap { padding: 8px 4px; }
.mini-table {
  position: relative; width: 100%; aspect-ratio: 16 / 10; cursor: pointer;
  border-radius: 50% / 42%;
  border: 6px solid var(--wood);
  background: radial-gradient(120% 100% at 50% 20%, #0e6b3c 0%, #0a5230 55%, #07422a 100%);
  box-shadow: inset 0 0 0 2px #e8dfc055, inset 0 8px 26px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.5);
}
.mini-wrap.here .mini-table { border-color: #8a6d1d; box-shadow: inset 0 0 0 2px #f3c93b88, 0 0 0 3px #f3c93b44, 0 8px 22px rgba(0,0,0,.5); }
.mini-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; line-height: 1.35;
}
.mini-center b { display: block; font-size: 14.5px; letter-spacing: .5px; text-shadow: 0 2px 3px rgba(0,0,0,.5); }
.mini-center span { font-size: 12px; color: #cfe4d2; font-variant-numeric: tabular-nums; }
.mini-center em { display: block; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
.mini-here { color: var(--gold); }
.mini-open { color: #7df39b; }
.mini-full { color: #ff9b9b; }
.fseat {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.fseat.taken {
  background: radial-gradient(circle at 35% 30%, #ffd968, var(--gold) 75%); color: #4a3403;
  border: 1px solid #00000055; box-shadow: 0 2px 4px rgba(0,0,0,.45);
}
.fseat.taken.me { background: radial-gradient(circle at 35% 30%, #9ff3b1, #1e8f4e 80%); color: #06280f; }
.fseat.open {
  background: #0a4d2b88; border: 1.5px dashed #e8dfc066; cursor: pointer;
}
.fseat.open:hover { border-color: var(--gold); background: #f3c93b33; box-shadow: 0 0 8px #f3c93b55; }
#lobbyMeta { font-size: 11px; color: #7df39b; letter-spacing: 1px; text-transform: uppercase; }

/* (modal widths for desktop live with the modal rules further down) */

/* help + ad modals */
.help-body p { font-size: 13.5px; line-height: 1.6; color: #dfe9d9; margin: 4px 0 10px; }
/* the LAY / number / BUY anatomy diagram */
.anat { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0 4px; }
.anat-col {
  flex: 0 0 78px; display: flex; flex-direction: column; text-align: center;
  border: 2.5px solid var(--line); border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #0e6b3c 0%, #0a5230 100%);
}
.anat-zone { padding: 5px 2px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; color: #cfe4d2; }
.anat-col .anat-zone:first-child { border-bottom: 1.5px solid var(--line-dim); }
.anat-col .anat-zone:last-child { border-top: 1.5px solid var(--line-dim); }
.anat-num { padding: 12px 2px; font-size: 22px; font-weight: 900; font-style: italic; color: var(--gold); }
.anat-notes { flex: 1; min-width: 0; }
.anat-notes p { margin: 0 0 9px; }
.anat-k { color: var(--gold); }
@media (max-width: 520px) { .anat { flex-direction: column; } .anat-col { flex: 0 0 auto; width: 78px; } }
.brk-body { text-align: center; }
.brk-creative {
  border: 1px dashed #4a3a28; border-radius: 12px; background: #16100b; padding: 26px 14px; margin-bottom: 14px;
}
.brk-creative b { font-size: 20px; color: var(--gold); }
.brk-creative p { color: #cbb9a4; margin: 8px 0 0; font-size: 14px; }
.brk-timer {
  font-size: 34px; font-weight: 900; color: #f2edda; font-variant-numeric: tabular-nums; margin: 6px 0 8px;
}
.auth-card {
  width: 100%; max-width: 380px; background: #0b4527ee; border: 1px solid #1d6b40;
  border-radius: 16px; padding: 24px 20px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.logo { font-size: 26px; text-align: center; }
.tagline { text-align: center; color: #a8cbb4; font-size: 12.5px; margin: 6px 0 18px; }
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { flex: 1; padding: 10px; border-radius: 10px; background: #08341e; color: #a8cbb4; font-weight: 600; }
.tab.on { background: var(--gold); color: #4a3403; }
.pane input {
  width: 100%; margin: 6px 0; padding: 13px 14px; border-radius: 10px; border: 1px solid #1d6b40;
  background: #06281676; color: #f3efe4; font-size: 16px;
}
.pane input:focus { outline: 2px solid var(--gold); border-color: transparent; }
.code-input { text-align: center; letter-spacing: 10px; font-size: 24px !important; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px; }
.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 19px; padding: 8px; border-radius: 8px; opacity: .75; line-height: 1;
}
.eye:active, .eye.on { opacity: 1; background: #1d6b40; }
.match-hint { font-size: 12.5px; min-height: 16px; margin: 2px 2px 0; color: #ff9b9b; }
.match-hint.ok { color: #9ff3b1; }
.btn-primary {
  width: 100%; margin-top: 10px; padding: 14px; border-radius: 10px; background: var(--gold);
  color: #4a3403; font-weight: 800; font-size: 16px;
}
.btn-primary:active { transform: scale(.98); }
.linkish { display: block; margin: 12px auto 0; color: #9fd4ae; text-decoration: underline; font-size: 13.5px; }
.msg { margin-top: 10px; font-size: 13.5px; color: #ffd9a0; text-align: center; min-height: 18px; }
.msg.ok { color: #9ff3b1; }

/* ================= top bar ================= */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: linear-gradient(#1c110b, #140c07); backdrop-filter: blur(6px);
  border-bottom: 2px solid #000;
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
/* money first, then the live tracker beside it; the icon cluster keeps the right edge */
.bankroll { font-size: 20px; font-weight: 800; color: var(--gold); flex: 0 0 auto; text-shadow: 0 1px 2px #000; }
.puck {
  min-width: 54px; text-align: center; padding: 7px 10px; border-radius: 999px; font-weight: 900; font-size: 13px;
  letter-spacing: 1px;
  background: radial-gradient(circle at 35% 30%, #333, #0c0c0c 70%); color: #eee; border: 3px solid #2e2e2e;
  box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 1px 2px rgba(255,255,255,.15);
}
.puck.on {
  background: radial-gradient(circle at 35% 30%, #ffffff, #ddd8c8 75%); color: #111; border-color: #fff;
}
.top-actions { display: flex; gap: 4px; margin-left: auto; }
.icon-btn { position: relative; font-size: 20px; padding: 6px 8px; border-radius: 10px; }
.icon-btn:active { background: #3a2517; }
.badge {
  position: absolute; top: 0; right: 0; background: #e5484d; color: #fff; font-size: 10px;
  min-width: 16px; height: 16px; line-height: 16px; border-radius: 999px; text-align: center; font-weight: 700;
}

/* ================= ad pill + session-in-header ================= */
.upsell-pill {
  display: none; align-items: center; gap: 7px; background: #16100b; border: 1px dashed #4a3a28;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; color: #cbb9a4; margin-right: 6px;
}
@media (min-width: 900px) { .upsell-pill { display: flex; } }
.upsell-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: #a08c72; border: 1px solid #4a3a28; border-radius: 4px; padding: 1px 5px; }

.session-inline { display: none; align-items: center; gap: 20px; margin-left: 14px; }
/* session-strip responsive ladder lives at the end of this file (source order matters) */
.ss-item { display: flex; flex-direction: column; line-height: 1.2; }
.ss-item label { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #a08c72; }
.ss-item b { font-size: 15px; color: #f2edda; font-variant-numeric: tabular-nums; }
.ss-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.ss-bars i { display: inline-block; width: 8px; border-radius: 2px 2px 0 0; background: var(--gold); }
.ss-bars i.s7 { background: #d03b35; }
.ss-mini { font-size: 11px; color: #cbb9a4; font-weight: 700; margin-left: 6px; }
@media (min-width: 900px) { .ss-mini { display: none; } }

/* ================= the table ================= */
.table-outer { padding: 10px 8px 216px; }
.table-wrap {
  max-width: 760px; margin: 0 auto; padding: 12px 10px 16px;
  border: 8px solid var(--wood);
  border-radius: 26px;
  background:
    radial-gradient(140% 100% at 50% 0%, var(--felt-hi) 0%, var(--felt) 48%, #07422a 100%);
  box-shadow:
    inset 0 0 0 2px #e8dfc055,          /* pinstripe inside the rail */
    inset 0 10px 40px rgba(0,0,0,.35),  /* felt vignette */
    0 10px 34px rgba(0,0,0,.6);
  position: relative;
}
.table-wrap::before {  /* wood rail sheen */
  content: ""; position: absolute; inset: -8px; border-radius: 26px; pointer-events: none;
  border: 8px solid transparent;
  background: linear-gradient(160deg, #ffffff26, transparent 30%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.mode-row { display: flex; align-items: center; gap: 6px; margin: 2px 2px 10px; }
.mode-label { font-size: 11px; color: #cfe4d2; letter-spacing: .5px; text-transform: uppercase; }
.mode { padding: 6px 13px; border-radius: 999px; background: #084227; border: 1.5px solid var(--line-dim); font-size: 13px; font-weight: 800; color: #efe9d2; }
.mode.on { background: var(--gold); color: #4a3403; border-color: var(--gold); }

/* painted boxes share this look */
.spot { position: relative; }
.spot:active { filter: brightness(1.25); }

.numbers-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.num-col {
  position: relative; display: flex; flex-direction: column;
  border: 2.5px solid var(--line); border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1.5px #0006, inset 0 0 14px #0004;
}
.num-col .zone { position: relative; text-align: center; color: #cfe4d2; }
.zone.lay, .zone.buy {
  padding: 5px 2px 16px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; min-height: 32px;
}
.zone.lay { border-bottom: 1.5px solid var(--line-dim); }
.zone.buy { border-top: 1.5px solid var(--line-dim); }
.zone.numcell { padding: 7px 2px 24px; min-height: 72px; }
.numcell .num {
  display: block; font-size: 24px; font-weight: 900; color: #f7f3e6;
  text-shadow: 0 2px 3px rgba(0,0,0,.55); font-variant-numeric: tabular-nums;
}
.num-col[data-num="6"] .num, .num-col[data-num="9"] .num {
  font-size: 16px; font-style: italic; letter-spacing: 1.5px; color: var(--gold); padding-top: 5px;
}
.numcell .pays { display: block; font-size: 10px; color: #cfe4d2; letter-spacing: .5px; }
.zone.lay .chips, .zone.buy .chips { bottom: -1px; right: 1px; transform: scale(.72); transform-origin: bottom right; }
.num-col.hot { border-color: #fff; box-shadow: inset 0 0 0 1.5px #0006, 0 0 0 3px #f3c93b55, 0 0 18px #f3c93b33; }
.num-col.hot::after {
  content: "ON"; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff, #ddd8c8 75%); color: #111; font-size: 9px; font-weight: 900;
  border-radius: 999px; padding: 2px 8px; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.zone-hint { text-align: center; font-size: 10.5px; color: #9fc7ab; margin: 5px 0 0; letter-spacing: .5px; }

/* Bonus Craps strip (All Small / All or Nothing / All Tall) */
.ats-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 7px; margin-bottom: 9px; }
.ats {
  position: relative; border: 2px solid #e0b6ae; border-radius: 10px;
  background: #571f1cb3; padding: 6px 4px 16px; text-align: center; color: #ffd9d4;
  box-shadow: inset 0 0 0 1.5px #0006, inset 0 0 10px #0004;
}
.ats:active { filter: brightness(1.3); }
.ats b { display: block; font-size: 10px; letter-spacing: 1.5px; font-weight: 900; }
.ats small { display: block; font-size: 9px; color: var(--gold); font-weight: 800; letter-spacing: 1px; margin-top: 2px; }
.ats-nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.ats-nums i {
  font-style: normal; min-width: 18px; line-height: 16px; padding: 0 2px; border: 1px solid #e0b6ae88;
  border-radius: 999px; font-size: 9.5px; font-weight: 800; color: #d8a49e;
}
.ats-nums i.hit { background: var(--gold); border-color: var(--gold); color: #4a3403; }
.ats .chips { bottom: 1px; right: 2px; transform: scale(.72); transform-origin: bottom right; }
@media (max-width: 719px) { .ats b { font-size: 8.5px; letter-spacing: .5px; } .ats-nums i { min-width: 15px; line-height: 13px; font-size: 8.5px; } }

/* don't come: slim full-width bar under the numbers on phones; 7th column on wide screens */
.dc-col {
  position: relative; grid-column: 1 / -1; border: 2px solid #e0b6ae; border-radius: 10px;
  background: #46201db3; color: #ffc9c4; font-weight: 900; letter-spacing: 1.5px; font-size: 13px;
  padding: 9px 4px 18px; text-align: center;
}
.dc-col small { font-weight: 600; font-size: 10px; letter-spacing: 0; color: #e0b6ae; }

/* field band */
.bar.band { padding: 10px 10px 20px; }
.field-line { display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0; }
.fword { font-size: 21px; font-weight: 900; letter-spacing: 4px; }
.fmids { font-size: 12px; letter-spacing: 1px; font-weight: 800; white-space: nowrap; }
.fpay { font-size: 8.5px; font-weight: 700; color: #cfe4d2; line-height: 1.25; letter-spacing: .5px; }
.fx {
  display: inline-block; min-width: 23px; line-height: 21px; border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--gold); font-weight: 800; font-size: 13px;
}

/* pass-line hero with attached odds lane */
.pass-block {
  margin-top: 9px; border: 3px solid var(--line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(#0d5c33aa, #0a4d2baa); box-shadow: 0 0 0 2px #e8dfc033, inset 0 0 14px #0004;
  display: flex; flex-direction: column;
}
.pass-hero {
  position: relative; width: 100%; text-align: center; padding: 15px 10px 22px;
  font-size: 22px; font-weight: 900; letter-spacing: 7px; color: #f2edda;
  text-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.odds-lane {
  position: relative; width: 100%; text-align: center; padding: 7px 10px 16px;
  border-top: 2px dashed var(--line-dim); font-size: 11.5px; font-weight: 800; letter-spacing: 2px; color: #d9f0de;
}
.odds-lane small { font-weight: 700; font-size: 10px; letter-spacing: .5px; color: #cfe4d2; }
.bar.dontpass.band { margin-top: 9px; padding: 8px 10px 18px; font-size: 13px; letter-spacing: 2px; }

/* ================= wide-screen table: center bets left, line bets middle, rolls rail right ================= */
.tw-rail { display: none; }
.rail-head {
  font-size: 12px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase; color: #f0e8c8;
  text-align: center; padding: 8px 0 6px; border-bottom: 1.5px solid var(--line-dim);
}
.rail-list { overflow-y: auto; flex: 1; padding: 6px 8px; }
.rail-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 4px; border-bottom: 1px solid #ffffff14;
  font-size: 14px; font-weight: 800; color: #e9e2cc;
}
.rail-row b { font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }
.rail-row .note { font-size: 11px; font-weight: 700; color: #9fc7ab; margin-left: auto; letter-spacing: .5px; }
.rail-row.seven b, .rail-row.seven .note { color: #ff9b9b; }
.rail-row.pt b, .rail-row.pt .note { color: var(--gold); }

@media (min-width: 1100px) {
  #rollRibbon { display: none !important; }   /* the rail replaces it on wide screens */
  .table-outer { padding-bottom: 118px; }
  .table-wrap {
    max-width: 1460px;
    display: grid; grid-template-columns: 320px minmax(0, 1fr) 258px; gap: 16px;
    align-items: stretch;
  }
  .tw-center { grid-column: 1; grid-row: 1; display: flex; }
  .tw-main   { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
  .tw-rail   {
    grid-column: 3; grid-row: 1; display: flex; flex-direction: column;
    border: 2px solid var(--line-dim); border-radius: 12px; background: #07402666;
    /* height 0 + min-height 100% = fill the row without ever making it taller;
       the roll list scrolls inside itself instead of stretching the page */
    height: 0; min-height: 100%; max-height: none; overflow: hidden;
  }
  .rail-list { min-height: 0; }
  .tw-center .props { margin-top: 0; width: 100%; display: flex; flex-direction: column; }
  .tw-center .props summary { pointer-events: none; }  /* always open on desktop */
  .tw-center .props summary::marker, .tw-center .props summary::-webkit-details-marker { content: ""; display: none; }
  /* the don't-come bar becomes the 7th column, like a real layout */
  .numbers-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dc-col { grid-column: auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; font-size: 13px; line-height: 1.3; padding: 8px 4px 20px; }
  .zone.numcell { min-height: 94px; padding-top: 12px; }
  .numcell .num { font-size: 30px; }
  .num-col[data-num="6"] .num, .num-col[data-num="9"] .num { font-size: 21px; }
  .zone.lay, .zone.buy { min-height: 34px; padding-top: 7px; font-size: 10px; }
  .bar.come { padding: 14px 10px 22px; font-size: 24px; flex: 1; max-height: 130px; display: flex; align-items: center; justify-content: center; }
  .fword { font-size: 24px; }
  .fmids { font-size: 15px; }
  .pass-hero { font-size: 26px; letter-spacing: 8px; padding: 17px 10px 24px; }
}

/* wide but SHORT windows (laptops, browser chrome): compress so it still fits one screen */
@media (min-width: 1100px) and (max-height: 1010px) {
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .table-outer { padding: 8px 18px 108px; }
  .table-wrap { padding: 10px; }
  .zone.numcell { min-height: 72px; padding-top: 8px; }
  .numcell .num { font-size: 26px; }
  .zone.lay, .zone.buy { min-height: 28px; padding-top: 5px; }
  .zone-hint { margin: 2px 0 0; font-size: 9.5px; }
  .bar.come { max-height: 84px; padding: 10px; font-size: 21px; }
  .bar.band { padding: 8px 10px 16px; }
  .fword { font-size: 20px; }
  .bar.dontpass.band { margin-top: 7px; padding: 6px 10px 14px; font-size: 12px; }
  .pass-block { margin-top: 7px; }
  .pass-hero { font-size: 22px; padding: 12px 10px 18px; }
  .odds-lane { padding: 5px 10px 12px; }
  .tw-main { gap: 0; }
  .tw-main > * + * { margin-top: 7px; }
  .prop.prow { min-height: 38px; padding: 5px 9px; }
  .prop.wide { min-height: 36px; padding: 7px 6px; }
  .prop.pill { min-height: 38px; padding: 5px 4px 15px; }
  .props summary { padding: 7px 12px; }
  .chip { width: 46px; height: 46px; }
  .act-btn { width: 42px; height: 42px; }
  .btn-roll { padding: 12px; font-size: 18px; }
  .die { width: 42px; height: 42px; padding: 6px; }
  .controls { padding: 7px 10px calc(env(safe-area-inset-bottom) + 8px); }
  .chip-row { margin-bottom: 6px; }
}

/* dice-pair icons on bets */
.pair { display: flex; gap: 3px; justify-content: center; margin-bottom: 4px; }
.die.tiny {
  width: 17px; height: 17px; border-radius: 4px; padding: 2.5px;
  box-shadow: inset 0 1px 1px #ffffff44, 0 1px 2px rgba(0,0,0,.4);
}
.die.tiny .pip { width: 92%; height: 92%; box-shadow: none; }

.bar {
  width: 100%; margin-top: 9px; padding: 13px 10px 24px; border-radius: 12px;
  border: 2.5px solid var(--line); background: transparent;
  box-shadow: inset 0 0 0 1.5px #0006, inset 0 0 14px #0004;
  font-weight: 900; letter-spacing: 2.5px; font-size: 16px; text-align: center; color: #f2edda;
  text-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.bar small { display: block; font-weight: 700; font-size: 10.5px; color: #cfe4d2; letter-spacing: .5px; margin-top: 3px; }
.bar.come { font-size: 22px; letter-spacing: 8px; padding-top: 16px; }
.bar.field { border-color: var(--line); }
.field-nums { display: flex; justify-content: center; gap: 7px; margin-top: 4px; font-size: 13px; font-weight: 800; letter-spacing: 0; }
.field-nums b { color: #f7f3e6; }
.field-nums .fx {
  display: inline-block; min-width: 22px; line-height: 20px; border: 1.5px solid var(--line); border-radius: 999px; color: var(--gold);
}
.bar.pass {
  border-color: var(--line);
  background: linear-gradient(#0d5c33aa, #0a4d2baa);
  font-size: 20px; letter-spacing: 6px;
  box-shadow: inset 0 0 0 1.5px #0006, inset 0 0 0 5px transparent, inset 0 0 18px #0004, 0 0 0 2px #e8dfc033;
}
.bar.dontpass { background: #46201db3; border-color: #e0b6ae; letter-spacing: 1.5px; }
.bar.odds { border-style: dashed; color: #d9f0de; background: #08442866; }
.split-row { display: flex; gap: 7px; }
.split-row .half { flex: 1; }

/* ================= chips on spots ================= */
.chips { position: absolute; right: 4px; bottom: 3px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; }
.chip-pile {
  --cc: #c0392b; --ci: #f6f2e6;
  position: relative; min-width: 34px; height: 34px; padding: 0 3px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900; line-height: 34px; text-align: center; color: #201408;
  letter-spacing: 0; white-space: nowrap; font-style: normal;   /* never inherit the felt lettering */
  background:
    radial-gradient(closest-side, var(--ci) 0 58%, transparent 59%),
    repeating-conic-gradient(var(--cc) 0deg 24deg, #f6f2e6 24deg 48deg);
  border: 1px solid #0008;
  box-shadow:
    0 2.5px 0 -1px #00000088,
    0 5px 0 -2px #00000066,
    0 7px 8px rgba(0,0,0,.55),
    inset 0 1px 2px #ffffffaa;
}
.chip-pile::before {
  content: ""; position: absolute; inset: 5px; border-radius: 999px;
  border: 1.5px dashed var(--cc); opacity: .8;
}
/* what the REST of the table has on this spot - a flat marker, never mistaken for your chips */
.other-bet {
  display: inline-flex; align-items: center; gap: 2px;
  height: 18px; padding: 0 4px 0 3px; border-radius: 5px;
  background: #04170de6; border: 1px solid #7aa98c88;
  color: #bfe3cb; font-size: 9.5px; font-weight: 800; line-height: 1;
  letter-spacing: 0; white-space: nowrap; font-style: normal;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* one pip per player, in that player's seat colour */
.ob-pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; border-radius: 999px; font-style: normal;
  font-size: 7.5px; font-weight: 900; color: #10240f; letter-spacing: 0;
  box-shadow: 0 0 0 1px #04170d;
}
.ob-pip.more { background: #2c4a38; color: #cfe4d2; }
.other-bet b { font-size: 9.5px; font-weight: 900; margin-left: 2px; }
.other-bet.od { border-style: dashed; }
.other-bet.cp { border-color: #d8cf9f88; color: #e8dfc0; }

.chip-pile.off { opacity: .5; }
.chip-pile.off::after {
  content: "OFF"; position: absolute; top: -8px; right: -4px; font-size: 7px; letter-spacing: .5px;
  background: #0c0c0c; color: #eee; border-radius: 4px; padding: 0 3px; line-height: 10px;
}
/* denominations (flat bets) */
.chip-pile.d1   { --cc: #9aa5b1; --ci: #f2f4f6; }
.chip-pile.d5   { --cc: #c0392b; --ci: #f9e9e2; }
.chip-pile.d10  { --cc: #2266dd; --ci: #e8eefc; }
.chip-pile.d25  { --cc: #1e8f4e; --ci: #e7f6ec; }
.chip-pile.d100 { --cc: #202020; --ci: #efefef; }
.chip-pile.d500 { --cc: #7a4dd8; --ci: #f0eafc; }
/* semantic overrides */
.chip-pile.cp { --cc: #2266dd; --ci: #dbe7fb; }   /* traveled come point */
.chip-pile.od { --cc: #7a4dd8; --ci: #ece4fb; }   /* odds */

/* ================= props ================= */
.props { margin-top: 12px; border: 2px solid var(--line-dim); border-radius: 14px; background: #07402666; }
.props summary {
  padding: 10px 12px; font-weight: 900; color: #f0e8c8; cursor: pointer; letter-spacing: 2px; font-size: 13px;
  text-align: center; text-transform: uppercase;
}
.prop-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 0 8px 10px; }
.prop.prow { grid-column: span 3; }
.prop.wide { grid-column: span 6; }
.prop.pill { grid-column: span 2; }
.prop {
  position: relative; background: transparent; border: 2px solid var(--line); border-radius: 9px;
  box-shadow: inset 0 0 0 1.5px #0006, inset 0 0 10px #0004;
  text-align: center; font-weight: 800; font-size: 13px; color: #f2edda;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* one-line rows: dice pair · name · odds */
.prop.prow { display: flex; align-items: center; gap: 7px; padding: 8px 9px; text-align: left; min-height: 44px; }
.prop.prow .pair { margin-bottom: 0; flex: 0 0 auto; }
.prop.prow b { font-size: 13px; }
.prop.prow small { margin-left: auto; color: #ffd9a0; font-weight: 700; font-size: 11px; }
.prop.prow .chips { right: 2px; bottom: auto; top: 50%; transform: translateY(-50%) scale(.8); transform-origin: center right; }
.prop.prow .chips:not(:empty) + small, .prop.prow .chips ~ small { padding-right: 0; }
.prop.wide { grid-column: 1 / -1; padding: 10px 6px; letter-spacing: 2px; font-size: 13.5px; min-height: 44px; }
.prop.red { border-color: #e0b6ae; color: #ffc9c4; }
.prop.pill { padding: 7px 4px 18px; min-height: 44px; border-color: var(--line-dim); }
.prop.pill small { display: block; color: #ffd9a0; font-weight: 700; font-size: 10px; margin-top: 1px; }

/* ================= who's at the table ================= */
.table-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 776px; margin: 0 auto; padding: 7px 12px 2px;
  font-size: 12.5px;
}
@media (min-width: 1100px) { .table-strip { max-width: 1460px; } }
.ts-name { font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #f0e8c8; font-size: 11px; }
.ts-p {
  display: inline-flex; align-items: center; gap: 5px;
  background: #16100b; border: 1px solid #33261a; border-radius: 999px; padding: 3px 11px;
  color: #cbb9a4; font-weight: 700;
}
.ts-p.me { border-color: #1e8f4e; color: #9ff3b1; }
.ts-p.shooter { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px #f3c93b44; }
.ts-dice { font-style: normal; font-size: 13px; }
.ts-ready { font-style: normal; color: #7df39b; }
.ts-hand { margin-left: auto; color: #9fc7ab; font-size: 11.5px; }

/* ================= last-rolls ribbon ================= */
.roll-ribbon {
  display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 10px 2px; max-width: 776px; margin: 0 auto; background: #0d0a08;
}
.rr {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  background: #16100b; border: 1px solid #33261a; border-radius: 8px; padding: 4px 7px;
  font-size: 12px; font-weight: 800; color: #cbb9a4;
}
.rr b { margin-left: 3px; font-variant-numeric: tabular-nums; }
.rr.seven { border-color: #7a2e2a; color: #ff9b9b; }
.rr.pt { border-color: #8a6d1d; color: var(--gold); }

/* ================= dice rolling on the felt ================= */
.table-outer { position: relative; }
#diceStage {
  position: absolute; inset: 0; pointer-events: none; z-index: 50;
  perspective: 1100px; overflow: hidden;
}
.cube-wrap {
  --hz: 28px;
  position: absolute; left: 0; top: 0; width: calc(var(--hz) * 2); height: calc(var(--hz) * 2);
  will-change: transform; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.45));
}
@media (max-width: 719px) { .cube-wrap { --hz: 21px; } }
.cube3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.cface {
  position: absolute; inset: 0; border-radius: 22%;
  background: linear-gradient(145deg, #ef4b41, #b01f1f 70%);
  box-shadow: inset 0 2px 3px #ffffff55, inset 0 -3px 4px #00000055;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 14%;
}
.cface .pip {
  width: 80%; height: 80%; align-self: center; justify-self: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #e8e8e8 70%);
  box-shadow: inset 0 -1px 1.5px rgba(0, 0, 0, 0.4);
}
.cface.f { transform: translateZ(var(--hz)); }
.cface.k { transform: rotateY(180deg) translateZ(var(--hz)); }
.cface.r { transform: rotateY(90deg) translateZ(var(--hz)); }
.cface.l { transform: rotateY(-90deg) translateZ(var(--hz)); }
.cface.t { transform: rotateX(90deg) translateZ(var(--hz)); }
.cface.b { transform: rotateX(-90deg) translateZ(var(--hz)); }

/* ================= dice ================= */
.dice { display: flex; gap: 8px; }
.die {
  width: 50px; height: 50px; border-radius: 11px; position: relative;
  background: linear-gradient(145deg, #ef4b41, #b01f1f 70%);
  box-shadow:
    inset 0 2px 3px #ffffff55, inset 0 -3px 4px #00000055,
    0 4px 8px rgba(0,0,0,.5);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 7px;
}
.die .pip {
  width: 78%; height: 78%; align-self: center; justify-self: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #e8e8e8 70%);
  box-shadow: inset 0 -1px 1.5px rgba(0,0,0,.4);
}
.pip.tl { grid-area: 1/1; } .pip.tm { grid-area: 1/2; } .pip.tr { grid-area: 1/3; }
.pip.ml { grid-area: 2/1; } .pip.c  { grid-area: 2/2; } .pip.mr { grid-area: 2/3; }
.pip.bl { grid-area: 3/1; } .pip.bm { grid-area: 3/2; } .pip.br { grid-area: 3/3; }
.die.rolling { animation: tumble .45s linear infinite; }
@keyframes tumble {
  0%   { transform: translate(0,0) rotate(0); }
  20%  { transform: translate(3px,-6px) rotate(28deg) scale(1.05); }
  45%  { transform: translate(-4px,3px) rotate(-24deg); }
  70%  { transform: translate(2px,-3px) rotate(14deg) scale(.97); }
  100% { transform: translate(0,0) rotate(0); }
}
.die.mini { width: 26px; height: 26px; border-radius: 6px; padding: 3.5px; box-shadow: inset 0 1px 1px #ffffff44, 0 1px 3px rgba(0,0,0,.4); }

/* ================= result strip ================= */
.result-strip {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  bottom: calc(env(safe-area-inset-bottom) + 128px);
  width: min(96vw, 560px); max-height: 42dvh; overflow-y: auto;
  background: #06180ef5; border: 1.5px solid var(--gold); border-radius: 14px; padding: 8px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: 14px;
}
/* collapsed: a single line hugging the chip rail instead of a slab over the felt */
.rs-peek {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-weight: 800; font-size: 14px; padding: 1px 2px;
}
.rs-head { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-head.win { color: #7df39b; } .rs-head.lose { color: #ff9b9b; } .rs-head.push { color: #f0e8c8; }
.rs-more { font-style: normal; font-size: 11px; font-weight: 700; color: #9fc7ab; }
.result-strip.compact .rs-detail { display: none; }
.result-strip.compact { padding: 6px 10px; }
.rs-detail { margin-top: 6px; border-top: 1px solid #ffffff1f; padding-top: 5px; }
.rs-detail .headline { display: none; }

/* wide screens: the breakdown lives at the top of the rolls rail, over nothing */
.rail-result {
  border-bottom: 1.5px solid var(--gold); background: #0a2c1a;
  padding: 9px 10px 10px; font-size: 13px;
}
.rail-result .headline { font-size: 14px; font-weight: 900; margin-bottom: 4px; }
.rail-result .win { color: #7df39b; } .rail-result .lose { color: #ff9b9b; } .rail-result .push { color: #d8cf9f; }
.result-strip .headline { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.result-strip .win { color: #7df39b; }
.result-strip .lose { color: #ff9b9b; }
.result-strip .push { color: #d8cf9f; }
.result-line { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }

/* ================= controls (chip tray + roll) ================= */
.controls {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 35;
  background: linear-gradient(#241610, #170d08);
  border-top: 3px solid #000; padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px);
  box-shadow: 0 -6px 20px rgba(0,0,0,.55);
}
.chip-row { display: flex; gap: 7px; justify-content: center; margin-bottom: 10px; }
.chip {
  --cc: #c0392b; --ci: #f6f2e6;
  width: 54px; height: 54px; border-radius: 999px; font-weight: 900; font-size: 13px; color: #241608;
  background:
    radial-gradient(closest-side, var(--ci) 0 60%, transparent 61%),
    repeating-conic-gradient(var(--cc) 0deg 24deg, #f6f2e6 24deg 48deg);
  border: 1px solid #0009;
  box-shadow: 0 3px 0 -1px #00000088, 0 6px 10px rgba(0,0,0,.5), inset 0 1px 2px #ffffffaa;
  position: relative;
}
.chip::before { content: ""; position: absolute; inset: 8px; border-radius: 999px; border: 2px dashed var(--cc); opacity: .8; }
.chip.c1   { --cc: #9aa5b1; --ci: #f2f4f6; }
.chip.c5   { --cc: #c0392b; --ci: #f9e9e2; }
.chip.c10  { --cc: #2266dd; --ci: #e8eefc; }
.chip.c25  { --cc: #1e8f4e; --ci: #e7f6ec; }
.chip.c100 { --cc: #202020; --ci: #efefef; }
.chip.c500 { --cc: #7a4dd8; --ci: #f0eafc; }
.chip.on { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-5px); }
.chip { touch-action: none; }   /* lets touch-drag start instead of scrolling */

/* chip being dragged from the tray */
.drag-ghost {
  position: fixed; z-index: 200; pointer-events: none; margin: 0;
  transform: translate(-50%, -60%) scale(1.08); outline: none;
}
.spot.drop { filter: brightness(1.35); box-shadow: 0 0 0 3px var(--gold), 0 0 18px #f3c93b66 !important; }

/* scroll hint */
.scroll-hint {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 34;
  bottom: 176px;
  background: #041f10e6; border: 1.5px solid var(--gold); color: var(--gold);
  border-radius: 999px; padding: 5px 16px; font-size: 12.5px; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5); cursor: pointer;
  animation: hintbob 1.6s ease-in-out infinite;
}
@keyframes hintbob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }
.roll-row { display: flex; gap: 10px; align-items: center; max-width: 640px; margin: 0 auto; min-height: 46px; }
/* the rail never moves: rebet and knock keep their seats even when they are not in play,
   so ROLL sits under the same pixel on every roll */
.roll-row > .hidden { display: inline-flex !important; visibility: hidden; pointer-events: none; }
/* fixed heights so a label change (ROLL -> PLACE YOUR BETS - 8) can't resize the bar */
.roll-row { --rh: 46px; }
.roll-row > *:not(.dice) { height: var(--rh); }
.btn-roll, .btn-knock { padding-top: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; }
.act-btn {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 999px; font-size: 21px; line-height: 1; color: #241608;
  background: radial-gradient(circle at 35% 30%, #ffd968, var(--gold) 70%);
  border: 1px solid #00000066;
  box-shadow: 0 4px 0 #8a6d1d, 0 6px 10px rgba(0,0,0,.5), inset 0 1px 2px #ffffff88;
}
.act-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6d1d; }

.rail-row .rnet { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rail-hand {
  display: flex; justify-content: center; gap: 10px; padding: 7px 4px; font-size: 11px; color: #cfe4d2;
  border-bottom: 1px solid #ffffff14;
}
.rail-hand .hp { color: var(--gold); }
.btn-roll {
  flex: 1; padding: 15px; border-radius: 12px;
  background: linear-gradient(#ef5a52, #cf3730);
  color: #fff; font-size: 20px; font-weight: 900; letter-spacing: 4px;
  box-shadow: 0 5px 0 #8f2622, 0 8px 14px rgba(0,0,0,.5), inset 0 1px 2px #ffffff55;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.btn-roll:active { transform: translateY(4px); box-shadow: 0 1px 0 #8f2622; }
.btn-roll:disabled { opacity: .55; }
.btn-roll.waiting { font-size: 14px; letter-spacing: 1.5px; opacity: .8; white-space: nowrap; }

/* phones: everything in the tray shrinks so ROLL always keeps its seat */
@media (max-width: 719px) {
  .roll-row { gap: 6px; --rh: 42px; min-height: 42px; }
  .act-btn { width: 42px; flex: 0 0 42px; font-size: 18px; }
  .dice { gap: 5px; flex: 0 0 auto; }
  .die { width: 40px; height: 40px; padding: 5.5px; border-radius: 9px; }
  .btn-knock { width: 44px; flex: 0 0 44px; padding: 0; font-size: 19px; }
  .btn-roll { flex: 1 1 90px; min-width: 90px; padding: 12px 4px; font-size: 17px; letter-spacing: 2px; white-space: nowrap; }
  .btn-roll.waiting { font-size: 12.5px; letter-spacing: .5px; }
  .chip { width: 46px; height: 46px; font-size: 12px; }
  .chip-row { gap: 5px; }
}
.btn-roll { min-width: 0; }
.btn-knock {
  width: 56px; padding: 13px 0; border-radius: 12px; font-size: 22px; line-height: 1;
  background: linear-gradient(#6b4527, #4a2f1b); border: 1px solid #00000088;
  box-shadow: 0 5px 0 #2c1c10, 0 8px 14px rgba(0,0,0,.5), inset 0 1px 2px #ffffff33;
  animation: knockpulse 1.4s ease-in-out infinite;
}
.btn-knock:active { transform: translateY(4px); box-shadow: 0 1px 0 #2c1c10; }
@keyframes knockpulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* ================= sheets (bottom drawer on phones, centered modal on desktop) ================= */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 72dvh; overflow: hidden;
  background: #0b3a20; border-radius: 18px 18px 0 0; border-top: 2px solid #2c7a4b;
  box-shadow: 0 -12px 40px rgba(0,0,0,.6); display: flex; flex-direction: column;
}
@media (min-width: 720px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 680px); max-height: 86dvh;
    border: 2px solid #2c7a4b; border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  }
  .sheet-body { padding: 12px 22px calc(env(safe-area-inset-bottom) + 18px); }
}
@media (min-width: 1100px) {
  .sheet { width: min(88vw, 820px); max-height: 88dvh; }
  .sheet-body { padding: 14px 30px 24px; }
  /* the menu has plenty of rows - two columns on a wide screen kills the scroll */
  #menuSheet .sheet-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; align-content: start; }
  #menuSheet .sheet-body > .acct-title { grid-column: 1 / -1; }
  #menuSheet .sheet-body > .fineprint { grid-column: 1 / -1; margin-top: 12px; }
}
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #14502e; }
.sheet-head b { flex: 1; }
.sheet-close { font-size: 26px; line-height: 1; padding: 0 6px; color: #a8cbb4; }
.sheet-body { overflow-y: auto; padding: 10px 14px calc(env(safe-area-inset-bottom) + 16px); }
.bet-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #124228; font-size: 14px; }
.bet-row .desc { flex: 1; }
.bet-row .desc small { display: block; color: #a8cbb4; }
.bet-row .amt { font-weight: 800; color: var(--gold); }
.bet-btn { padding: 7px 10px; border-radius: 8px; background: #14502e; font-size: 12px; font-weight: 700; }
.bet-btn.x { background: #5a2323; }
.menu-item { display: block; width: 100%; text-align: left; padding: 13px 8px; border-bottom: 1px solid #124228; font-size: 15px;
             color: #f3efe4; text-decoration: none; font-weight: 600; }
a.menu-item:hover, button.menu-item:hover { color: var(--gold); background: #0e3a22; }
a.menu-item:visited { color: #f3efe4; }
.acct-title { font-weight: 900; letter-spacing: 1.5px; font-size: 12px; text-transform: uppercase; color: #d8cf9f; margin: 16px 2px 6px; }
.lb-tabs { flex: 0 0 auto; margin-bottom: 0; }
.lb-tabs .tab { padding: 6px 12px; font-size: 12.5px; }
.lb-row .lb-rank { display: inline-block; min-width: 20px; color: var(--gold); }
.lb-you { font-style: normal; font-size: 10px; background: var(--gold); color: #4a3403; border-radius: 4px; padding: 1px 5px; font-weight: 800; margin-left: 4px; }
.prop.qb { border-style: dashed; border-color: #f3c93b99; color: var(--gold); }
.prop.qb small { color: #e6cd7c; }
.fineprint { padding: 12px 8px; color: #90b49d; font-size: 12px; line-height: 1.5; }
.hop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hop-grid button { padding: 12px 4px; background: #0b4527; border: 1px solid #1d6b40; border-radius: 10px; font-weight: 700; }

.hist-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #124228; }
.hist-note { color: #a8cbb4; font-size: 12.5px; }

/* ================= stats ================= */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0 8px; }
.stat-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  background: #07402666; border: 2px solid var(--line-dim); border-radius: 12px; padding: 12px 14px;
  min-height: 86px;
}
.stat-tile:active { filter: brightness(1.25); }
.tile-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #9fc7ab; }
.tile-value { font-size: 24px; font-weight: 900; color: #f2edda; }
.tile-sub { font-size: 11.5px; color: #cfe4d2; }
#statsMeta { font-size: 12px; color: #9fc7ab; }

.modal-wrap {
  position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .62);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.modal {
  width: 100%; max-width: 430px; max-height: 82dvh; overflow: hidden; display: flex; flex-direction: column;
  background: #0b3a20; border: 2px solid #2c7a4b; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.7);
}
.modal-body { overflow-y: auto; padding: 12px 16px 18px; }

/* real screens get real width - phones keep the compact sheet */
@media (min-width: 720px) {
  .modal { max-width: 700px; max-height: 88dvh; }
  .modal-body { padding: 14px 22px 22px; }
  #helpModal .modal { max-width: 820px; }
}
@media (min-width: 1100px) {
  .modal { max-width: 900px; }
  .modal-body { padding: 16px 30px 26px; }
  #helpModal .modal { max-width: 1040px; }
  #statModal .modal { max-width: 980px; }
  #helpModal .modal-body { padding: 18px 38px 30px; }
  .help-body p { font-size: 14.5px; line-height: 1.62; }
}
.dist-chart { width: 100%; height: auto; display: block; }
.chart-key { font-size: 11px; color: #9fc7ab; text-align: center; margin-top: 6px; }
.stat-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid #124228; font-size: 14.5px;
}
.stat-row b { font-variant-numeric: tabular-nums; }
.type-head, .type-row {
  display: grid; grid-template-columns: 1fr 52px 52px 76px; gap: 6px; align-items: center;
  padding: 8px 2px; border-bottom: 1px solid #124228; font-size: 13px;
}
.type-head { color: #9fc7ab; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1.5px solid var(--line-dim); }
.type-row span:nth-child(2), .type-row span:nth-child(3), .type-head span:nth-child(2), .type-head span:nth-child(3) { text-align: right; }
.type-row b, .type-head span:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }

/* ================= toast ================= */
/* messages stay off the felt: bottom rail on phones, top-right gutter on desktop */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 80;
  bottom: calc(env(safe-area-inset-bottom) + 168px);
  background: #041f10f0; border: 1px solid var(--gold); color: #f3efe4; border-radius: 10px; padding: 7px 14px;
  font-size: 13px; line-height: 1.35; max-width: 94vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
/* desktop docks the breakdown in the rail, so the toast can hug the chip rail alone */
@media (min-width: 1100px) { .toast { bottom: calc(env(safe-area-inset-bottom) + 150px); } }

/* ============ no more bets: the shooter has the dice ============
   A FIXED overlay: in the document flow this took strip space, so every
   appearance re-flowed the page and mobile bounced up and down. */
.nmb-pill {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-6px);
  top: calc(env(safe-area-inset-top) + 62px); z-index: 44;
  background: #4a1410ee; border: 1.5px solid #ff9b9b; color: #ffd9d5;
  border-radius: 999px; padding: 5px 15px; font-size: 11.5px; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.nmb-pill.show {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  animation: knockpulse 1.4s ease-in-out infinite .3s;
}
@media (min-width: 1100px) {
  /* desktop: hug the bottom rail instead of the top bar */
  .nmb-pill { top: auto; bottom: calc(env(safe-area-inset-bottom) + 96px); }
}
/* the felt reads as closed, and taps on it do nothing. ONE filter on the
   container, not forty on the spots - per-spot filters made phones flicker
   every time the book opened or closed. */
body.book-closed .spot { pointer-events: none; }
body.book-closed .table-wrap { filter: saturate(.6) brightness(.85); }
body.book-closed .chip-row { opacity: .45; pointer-events: none; }

/* a setting the table controls, not the player */
.menu-item.locked { opacity: .72; }
.menu-item.locked small { color: #9fc7ab; font-size: 11px; font-weight: 600; }

/* site nav on the landing header */
.landing-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.landing-nav a { color: #cfe4d2; text-decoration: none; font-size: 13.5px; }
.landing-nav a:hover { color: var(--gold); }
.landing-nav .linkish { margin: 0; }
@media (max-width: 560px) { .landing-nav { gap: 12px; } .landing-nav a { font-size: 12.5px; } }

/* ================================================================
   DESKTOP TABLE: one screen, no scroll
   The game view becomes a fixed-height column - header, strip, board,
   rail - and the BOARD takes every pixel left over. On a 1080p screen
   that reclaims the ~240px of dead black the fixed-height felt used to
   leave; on a short laptop the felt tightens instead of pushing the
   pass line under the chips. Phones are untouched.
   ================================================================ */
@media (min-width: 1100px) {
  body.at-table { overflow: hidden; }
  body.at-table #gameView {
    height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  }
  body.at-table .topbar { position: static; flex: 0 0 auto; }
  /* the strip lives in the rail on desktop, not above the felt */
  body.at-table .controls > .table-strip {
    flex: 0 1 auto; min-width: 0; max-width: 34%; margin: 0; padding: 0;
    gap: 7px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; height: 84px; align-items: center;
  }
  body.at-table .controls > .table-strip .ts-hand { display: none; }
  /* names live on the seat map now - the rail keeps just the table name and the lock pill */
  body.at-table .controls > .table-strip .ts-p { display: none; }
  body.at-table .controls > .table-strip .ts-name { white-space: nowrap; }
  body.at-table #scrollHint { display: none !important; }

  body.at-table .table-outer {
    flex: 1 1 auto; min-height: 0; display: flex; padding: 6px 10px 4px; overflow: hidden;
  }
  body.at-table .table-wrap {
    flex: 1 1 auto; min-height: 0; height: 100%; margin: auto; padding: 10px 10px 12px;
    grid-template-rows: minmax(0, 1fr);
    /* a felt can only get so tall before the spots look silly - past this the
       board centres itself instead of stretching into a cartoon */
    max-height: 840px;
  }

  /* every column stretches; the middle one shares out the slack */
  body.at-table .tw-main { min-height: 0; height: 100%; gap: 5px; overflow: hidden; }
  /* the left column: center bets on top, your open bets filling the rest */
  body.at-table .tw-center {
    min-height: 0; overflow: hidden; flex-direction: column; gap: 8px; align-items: stretch;
  }
  body.at-table .tw-center .props { flex: 0 0 auto; overflow: visible; }
  body.at-table .tw-main > .ats-row { flex: 0 0 auto; margin-bottom: 2px; }
  body.at-table .tw-main > .zone-hint { flex: 0 0 auto; margin: 2px 0; }
  body.at-table .numbers-row { flex: 1.9 1 0; min-height: 0; max-height: 260px; }
  body.at-table .num-col { min-height: 0; }
  body.at-table .zone.numcell {
    flex: 1 1 auto; min-height: 0; padding: 4px 2px 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  }
  body.at-table .zone.lay, body.at-table .zone.buy { flex: 0 0 auto; }
  body.at-table .numcell .num { font-size: clamp(20px, 3.4vh, 34px); }
  body.at-table .num-col[data-num="6"] .numcell .num,
  body.at-table .num-col[data-num="9"] .numcell .num { font-size: clamp(15px, 2.4vh, 23px); padding-top: 0; }

  body.at-table .bar.come {
    flex: 1.15 1 0; min-height: 0; max-height: none; padding: 6px 10px 14px;
    font-size: clamp(17px, 3vh, 26px);
  }
  body.at-table .bar.field { flex: .95 1 0; min-height: 0; display: flex; align-items: center; padding: 6px 10px 14px; }
  body.at-table .bar.field .field-line { width: 100%; }
  body.at-table .fword { font-size: clamp(17px, 2.7vh, 25px); }
  body.at-table .split-row { flex: .8 1 0; min-height: 0; }
  body.at-table .split-row > .bar { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 10px 14px; }
  body.at-table .pass-block { flex: 1.05 1 0; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
  body.at-table .pass-hero {
    flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
    padding: 6px 10px 16px; font-size: clamp(18px, 3.1vh, 28px);
  }
  body.at-table .odds-lane { flex: 0 0 auto; }

  /* the rail: chips and ROLL dock to the right, the readout fills the left */
  body.at-table .controls {
    position: static; flex: 0 0 84px; height: 84px; overflow: hidden;
    display: flex; align-items: center; gap: 18px;
    padding: 0 18px;
  }
  body.at-table .chip-row { margin: 0 0 0 auto; gap: 8px; flex: 0 1 auto; }
  body.at-table .roll-row { margin: 0; max-width: none; flex: 0 1 auto; }
  /* hard-locked: no label can ever change this button's footprint */
  body.at-table .btn-roll { flex: 0 0 210px; width: 210px; min-width: 210px; max-width: 210px; overflow: hidden; }
  /* the readout only appears when the rail has room for it */
  body.at-table .rail-info { display: none; }

  body.at-table .toast { bottom: calc(env(safe-area-inset-bottom) + 84px); }
  body.at-table .result-strip { display: none !important; }   /* the rail card owns this on desktop */
}

.bd-head {
  flex: 0 0 auto; padding: 8px 12px; font-weight: 900; color: #f0e8c8;
  letter-spacing: 2px; font-size: 12px; text-align: center; text-transform: uppercase;
  border-bottom: 1.5px solid var(--line-dim);
}
/* only when the column actually has room for it - short laptops keep the sheet */
@media (min-width: 1380px) { body.at-table .rail-info { display: flex; } }

/* what you have out, in the space the rail used to waste */
.rail-info { display: flex; align-items: center; gap: 26px; flex: 0 0 auto; }
.ri-item { display: flex; flex-direction: column; line-height: 1.2; }
.ri-item label { font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #a08c72; }
.ri-item b { font-size: 17px; font-weight: 900; color: #f2edda; font-variant-numeric: tabular-nums; }
.ri-item b.on { color: var(--gold); }
.ri-item b.up { color: #7df39b; }
.ri-item b.down { color: #ff9b9b; }
.ri-item b i { font-style: normal; font-size: 10px; font-weight: 700; color: #a08c72; margin-left: 6px; }

/* Short desktop windows (laptops at 720p and below): tighten the center-bets
   column so the whole left side fits without its own scrollbar. Nothing here
   changes on a normal-height screen. */
@media (min-width: 1100px) {
  body.at-table .props summary { padding: 4px 12px; font-size: 11px; letter-spacing: 1.5px; }
  body.at-table .prop-grid { gap: 5px; padding: 0 7px 7px; }
  body.at-table .prop.prow { min-height: 32px; padding: 3px 7px; gap: 5px; }
  body.at-table .prop.prow b { font-size: 11.5px; }
  body.at-table .prop.prow small { font-size: 10px; }
  body.at-table .prop.wide { min-height: 30px; padding: 6px 6px; font-size: 12px; letter-spacing: 1.5px; }
  body.at-table .prop.pill { min-height: 34px; padding: 4px 4px 12px; font-size: 11.5px; }
  body.at-table .prop.pill small { font-size: 9px; }
  body.at-table .prop .die.tiny { width: 13px; height: 13px; }
}


/* ================= seat map: who is at this table ================= */
.seat-panel {
  display: none; flex: 1 1 0; min-height: 0; flex-direction: column;
  border: 2px solid var(--line-dim); border-radius: 14px; background: #07402666; overflow: hidden;
}
.seat-map { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; padding: 6px 10px 8px; }
.seat-map .sm-felt { max-height: 100%; margin: 0 auto; }
.sm-felt {
  position: relative; width: 100%; aspect-ratio: 5 / 2.2;
  border-radius: 50% / 42%; border: 4px solid var(--wood);
  background: radial-gradient(120% 100% at 50% 18%, #0e6b3c 0%, #0a5230 55%, #07422a 100%);
  box-shadow: inset 0 0 0 1.5px #e8dfc044, inset 0 6px 18px rgba(0,0,0,.35);
}
.sm-mid {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; line-height: 1.3;
  font-size: 10px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #f0e8c8;
  width: 74%;
}
.sm-mid i { display: block; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  text-transform: none; color: #9fc7ab; margin-top: 2px; }
.sm-seat {
  position: absolute; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; color: #1d3a28; cursor: default;
  background: #0b3a2088; border: 1.5px dashed #7aa98c88;
}
.sm-seat:not(.on) { color: #7aa98c; }
.sm-seat.on { border-style: solid; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.sm-seat.me { outline: 2px solid #fff; outline-offset: 1px; }
.sm-seat.shooter::after {
  content: "\1F3B2"; position: absolute; top: -9px; right: -7px; font-size: 9px;
}
/* knocked back: this seat has confirmed they're set */
.sm-seat.rdy::after {
  content: "\2713"; position: absolute; top: -7px; right: -6px;
  width: 11px; height: 11px; line-height: 11px; border-radius: 999px;
  background: #1c7c3f; color: #eafff0; font-size: 8px; font-weight: 900; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.sm-seat:hover { transform: translate(-50%, -50%) scale(1.25); z-index: 2; }

@media (min-width: 1100px) and (min-height: 780px) {
  body.at-table .seat-panel { display: flex; }
}


/* ================= narrow phones (Z Fold cover screen and friends) =================
   The top bar was overflowing at ~350px wide: shrink the icon cluster, drop the
   ad pill, keep everything on ONE line whatever the width. */
@media (max-width: 600px) {
  .topbar { gap: 6px; padding-left: 8px; padding-right: 6px; flex-wrap: nowrap; }
  .bankroll { font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .puck { min-width: 42px; padding: 5px 7px; font-size: 11.5px; border-width: 2.5px; }
  .top-actions { gap: 1px; flex: 0 0 auto; }
  .icon-btn { font-size: 17px; padding: 5px 5px; }
  .upsell-pill { display: none; }             /* no room to sell on a phone's top bar */
}
@media (max-width: 400px) {
  .topbar { gap: 4px; }
  /* the FIELD bar was the one thing wider than a Fold cover screen */
  .field-line { gap: 5px; }
  .fpay { display: none; }                /* 2x/3x already shown by the circled 2 and 12 */
  .fmids { font-size: 10.5px; }
  .num-col[data-num="6"] .num, .num-col[data-num="9"] .num { font-size: 13px; letter-spacing: .5px; }
  .bankroll { font-size: 15.5px; }
  .ss-mini { display: none; }             /* the session readout lives in stats */
  .icon-btn { font-size: 16px; padding: 4px 4px; }
  .puck { min-width: 38px; padding: 4px 6px; font-size: 10.5px; }
}


/* the session strip sheds pieces as the window narrows instead of vanishing
   whole: bars go first, then hit rate - the core numbers survive to 1180px */
@media (min-width: 1180px) {
  .session-inline { display: flex; gap: 13px; margin-left: 8px; }
  .session-inline .ss-bars { display: none; }
  .session-inline .ss-item:nth-of-type(5) { display: none; }
}
@media (min-width: 1360px) {
  .session-inline { gap: 16px; }
  .session-inline .ss-item:nth-of-type(5) { display: flex; }
}
@media (min-width: 1560px) {
  .session-inline { gap: 20px; margin-left: 14px; }
  .session-inline .ss-bars { display: flex; }
}


/* ============ the floor: favourite stars + auto-seat switch ============ */
.mini-wrap { position: relative; }
.fav-star {
  position: absolute; top: -2px; right: 6px; z-index: 3;
  font-size: 20px; line-height: 1; padding: 4px 6px; color: #9fc7ab;
  text-shadow: 0 1px 3px rgba(0,0,0,.6); transition: transform .12s ease, color .12s ease;
}
.fav-star:hover { transform: scale(1.25); color: #ffd968; }
.fav-star.on { color: var(--gold); }
.lobby-auto {
  display: flex; align-items: center; gap: 9px; padding: 4px 16px 10px;
  font-size: 13px; color: #cfe4d2; cursor: pointer;
}
.lobby-auto input { width: 16px; height: 16px; accent-color: #f3c93b; }


/* ============ ready check: the shooter called for the dice ============ */
.ready-check {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: calc(env(safe-area-inset-bottom) + 150px); z-index: 46;
  width: min(94vw, 400px); text-align: center;
  background: #0b3a20f5; border: 2px solid var(--gold); border-radius: 16px;
  padding: 14px 16px 12px; box-shadow: 0 14px 40px rgba(0,0,0,.65);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.ready-check.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.rc-head { font-size: 16px; font-weight: 900; color: #f2edda; }
.rc-head b { color: var(--gold); }
.rc-sub { font-size: 12.5px; color: #9fc7ab; margin: 5px 0 11px; }
.rc-actions { display: flex; gap: 8px; }
.rc-knock {
  flex: 1.6; padding: 12px 8px; border-radius: 11px; font-size: 15px; font-weight: 900;
  background: linear-gradient(#6b4527, #4a2f1b); color: #ffd9a0; border: 1px solid #00000088;
  box-shadow: 0 4px 0 #2c1c10, 0 6px 12px rgba(0,0,0,.5), inset 0 1px 2px #ffffff33;
  animation: knockpulse 1.2s ease-in-out infinite;
}
.rc-knock:active { transform: translateY(2px); box-shadow: 0 2px 0 #2c1c10; }
.rc-later {
  flex: 1; padding: 12px 8px; border-radius: 11px; font-size: 13px; font-weight: 700;
  background: #0d2c1a; color: #9fc7ab; border: 1px solid #1d6b40;
}
@media (min-width: 1100px) { .ready-check { bottom: calc(env(safe-area-inset-bottom) + 100px); } }

/* ---- picking chips back up: my piles are grabbable, the rail lights as a drop zone ---- */
.chip-pile { touch-action: none; cursor: grab; pointer-events: auto; }
.chip-pile.drag-ghost { cursor: grabbing; }
footer.controls.rail-drop {
  box-shadow: inset 0 0 0 2px var(--gold, #f3c93b), inset 0 0 18px #f3c93b44;
  transition: box-shadow .12s ease;
}

/* ---- stacked pile chooser: which chips are you moving? ---- */
.pile-split { z-index: 260; }
.pile-split .rc-actions { flex-wrap: wrap; }
.pile-split .rc-actions button {
  border: 0; border-radius: 9px; padding: 9px 14px; font-weight: 800; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
.pile-split .ps-part { background: #133a26; color: #ffd9a0; border: 1px solid #f3c93b66; }
.pile-split .ps-all { background: linear-gradient(180deg, #f3c93b, #cf9d1d); color: #241a02; }
.pile-split .ps-cancel { background: transparent; color: #9fb3a6; border: 1px solid #ffffff22; }