/* ============================================================
   Play shell
   ============================================================ */
.play {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
  gap: 1px;
  background: var(--line);
  border: var(--hair);
  margin-block: clamp(1.5rem, 3vw, 2.5rem) 4rem;
}
.play > * { background: var(--ink-raise); min-width: 0; }
/* The game window is the page: flush against the top bar, the chat rail and the right
   edge, so none of the site background shows around it. */
main.play-page { display: flex; flex-direction: column; min-height: calc(100vh - var(--bar) - 34px); background: var(--ink-raise); padding: 0; }
body.app:has(main.play-page) { background: var(--ink-raise); }
main.play-page > .play {
  flex: 1 0 auto;
  margin: 0;
  border: 0;
  border-bottom: var(--hair);
}
main.play-page > .recent-games { border: 0; margin: 0; padding-bottom: 2rem; }

/* ---- game menu ---- */
.menu { padding: 1.25rem 0; }
.menu > .label { padding: 0 1.25rem .85rem; display: block; }
.picks { display: flex; flex-direction: column; }
.pick {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .72rem 1.25rem;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--bone-45);
  border-left: 2px solid transparent;
  transition: color .25s var(--step), background .25s var(--step), border-color .25s var(--step);
}
.pick__ico { width: 20px; height: 20px; flex-shrink: 0; opacity: .55; transition: opacity .25s; }
.pick__ico svg { width: 100%; height: 100%; }
.pick:hover { color: var(--bone); background: var(--accent-08); }
.pick:hover .pick__ico { opacity: .9; }
.pick[aria-current='page'] {
  color: var(--gold);
  border-left-color: var(--gold);
  background: var(--gold-08);
}
.pick[aria-current='page'] .pick__ico { opacity: 1; }

/* ---- stage ---- */
.board { display: flex; flex-direction: column; }
.board__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.1rem;
  border-bottom: var(--hair);
}
.board__head h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
.board__head p {
  margin: 0;
  font-size: .84rem;
  color: var(--bone-45);
  max-width: 64ch;
  text-wrap: pretty;
}

/* ---- practice / fun toggle ---- */


.stage {
  border-radius: var(--r);
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  min-height: min(56vh, 460px);
  background: var(--ink-raise);
  overflow: hidden;
}
.stage::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(232, 184, 75, .16);
  pointer-events: none;
}
.stage[data-game='craps']::before, .stage[data-game='slot']::before { display: none; }
.stage__mid { width: min(100%, 420px); display: grid; place-items: center; gap: 1.25rem; }
.stage__mid--wide { width: 100%; max-width: 720px; }
.stage[data-game='roulette'] .stage__mid--wide { max-width: none; }

/* ---- console ---- */
.console {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--ink-raise);
  border-left: 3px solid var(--ink-sink);
}
.console > * { padding: 14px 16px; border-bottom: 1px solid var(--ink-lift); margin: 0; }
.console > *:last-child { border-bottom: 0; }
/* Flex and grid children default to min-width:auto, which lets a text input's
   intrinsic width push the whole rail wider than its column. */
.console > * { min-width: 0; }
.field { display: grid; gap: .55rem; }
.field__head { display: flex; justify-content: space-between; align-items: baseline; }
.field__head .num { font-size: 1.05rem; color: var(--gold); }
.hint { font-size: .74rem; color: var(--bone-45); margin: -.4rem 0 0; }

.stake { display: grid; gap: .55rem; min-width: 0; }
.stake__box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 5px 5px 13px;
  background: var(--ink);
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
}
.stake__val {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: .7rem .85rem;
  background: none;
  border: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.stake__val:focus { outline: none; background: var(--accent-08); }
.stake__steps { display: flex; }
.stake__step {
  padding: 0 .7rem;
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--bone-45);
  font-size: .72rem;
  letter-spacing: .1em;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.stake__step:hover { color: var(--ink); background: var(--gold); }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: .8rem;
  font-family: var(--serif);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color .25s, background .25s, transform .25s var(--swing);
}
.chip::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--line);
  border-radius: 50%;
}
.chip:hover { transform: translateY(-2px); background: var(--accent-08); }
.chip[aria-pressed='true'] { background: var(--gold); color: var(--ink); }
.chip[aria-pressed='true']::before { border-color: rgba(20, 20, 20, .35); }

.seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
}
.seg__opt {
  height: 46px;
  padding: 0 .4rem;
  background: var(--ink);
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone-70);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s, background .25s;
}

.seg__opt:hover { color: var(--bone); }
.seg__opt[aria-pressed='true'] {
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--ink-sink);
  color: var(--on-accent);
  font-weight: 900;
}

.slide {
  border-radius: var(--r-pill);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: var(--gold-40);
  cursor: pointer;
}
.slide::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--gold);
  border: 0;
  rotate: 45deg;
}
.slide::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--gold);
  border: 0;
  border-radius: 0;
  rotate: 45deg;
}

.readout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem 1rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
}
.readout dt { color: var(--bone-45); letter-spacing: .12em; text-transform: uppercase; }
.readout dd { margin: 0; text-align: right; color: var(--bone); font-size: 13px; }
.readout dd.is-win { color: var(--gold); }
.readout dd.is-lose { color: var(--red); }

.act { width: 100%; }
.act--cash { border-color: var(--gold); color: var(--on-accent); background: var(--gold); box-shadow: 4px 4px 0 var(--ink-sink); }
.act--cash:hover:not(:disabled) { background: #FFD37A; }
.act--quiet { background: transparent; color: var(--bone); border-color: var(--line); box-shadow: none; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.acts .act:last-child { grid-column: 1 / -1; }

.banner {
  min-height: 2.6em;
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--bone-45);
}
.banner--win { color: var(--gold); }
.banner--lose { color: var(--red); }
/* Some of the stake came back. Neither a win nor a blank — say which. */
.banner--part { color: var(--bone-70); }

/* ---- purse bar ---- */
.purse {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 0;
}
.purse__amt {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}
.purse__meta { margin-right: auto; }

/* ---- fairness drawer (kept for /fair.html) ---- */
.drawer { border: var(--hair); margin-bottom: 4rem; }
.drawer > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  list-style: none;
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::after { content: '+'; margin-left: auto; font-size: 1.1rem; }
.drawer[open] > summary::after { content: '−'; }
.drawer__in {
  display: grid;
  gap: 1.25rem;
  padding: 0 1.25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.fair__row { display: grid; gap: .15rem; padding: .5rem 0; border-bottom: var(--hair); }
.fair__row dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.fair__row dd { margin: 0; font-size: .78rem; }

/* ---- recent games ---- */
.recent-games {
  border: var(--hair);
  background: var(--ink-raise);
  margin-bottom: 4rem;
}
.recent-games__title {
  padding: 1rem 1.25rem .5rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: var(--hair);
}
.recent-games__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0;
}
.recent-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: .75rem;
  align-items: baseline;
  padding: .6rem 1.1rem;
  white-space: nowrap;
  border-right: var(--hair);
  border-bottom: var(--hair);
  color: var(--bone);
  transition: background .2s;
}
.recent-card:hover { background: var(--accent-08); }
.recent-games__grid > .hint { grid-column: 1 / -1; margin: 0; padding: 1rem 1.25rem; }
.recent-card__game {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-card__mult { font-family: var(--mono); font-size: 1rem; font-weight: 600; text-align: right; }
.recent-card__stake { font-family: var(--mono); font-size: .74rem; color: var(--bone-45); }
.recent-card__payout { min-width: 4.5rem; font-family: var(--mono); font-size: .74rem; color: var(--bone-70); text-align: right; }
.recent-card--win .recent-card__mult, .recent-card--win .recent-card__payout { color: var(--gold); }
.recent-card--lose .recent-card__mult { color: var(--red); }
.recent-card--part .recent-card__mult { color: var(--bone-70); }

.seed-form { display: flex; gap: .5rem; }
.seed-form input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  padding: .6rem .75rem;
  background: none;
  border: 1px solid var(--line);
  font-size: .8rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 140%;
  z-index: 60;
  max-width: min(90vw, 420px);
  padding: .85rem 1.4rem;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  font-size: .82rem;
  text-align: center;
  transition: translate .45s var(--swing);
}
.toast.in { translate: -50% 0; }

/* ============================================================
   Coin flip
   ============================================================ */
.coin {
  position: relative;
  perspective: 900px;
  width: min(60vw, 210px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.coin__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.coin__face--tails { transform: rotateY(180deg); }
.cf__coin { position: relative; padding-bottom: 18px; }
.cf__coin .coin { width: clamp(120px, 24vw, 180px); }
.coin.is-flying { animation: cfLift 2.1s cubic-bezier(.3,.6,.4,1); }
@keyframes cfLift { 40% { translate: 0 -38px; } }
.coin__shadow { display: none; }
.coin__shadow.is-flying { animation: cfShadow 2.1s cubic-bezier(.3,.6,.4,1); }
@keyframes cfShadow { 40% { transform: scale(.6); opacity: .5; } }
.cf__mini { display: block; width: 34px; line-height: 0; }
.cf__mini .coin__face, .cf__past .coin__face { position: static; transform: none; filter: none; width: 100%; height: auto; }
.cf__past { justify-content: center; }
.cf__past i { display: block; width: 26px; line-height: 0; border-radius: 50%; }
.cf__past i.is-win { box-shadow: 0 0 0 2px var(--gold); }
.cf__past i.is-lose { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .coin.is-flying, .coin__shadow.is-flying { animation: none; } }

/* ============================================================
   Dice
   ============================================================ */
.dx__plate {
  width: clamp(120px, 26vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #1C060C;
  background: var(--bone);
  border: 3px solid #1C060C;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #1C060C;
  transition: box-shadow .25s, color .25s;
}
.dx__plate b { font-family: var(--serif); font-size: clamp(1.8rem, 5.6vw, 2.6rem); font-weight: 800; }
.dx__plate.is-idle { color: #8F6F75; }
.dx__plate.is-rolling { color: #7A5A60; }
.dx__plate.is-win { border-color: var(--gold-deep); color: #7A4E08; }
.dx__plate.is-lose { border-color: #B0302E; color: #B0302E; }
.dx__rail { width: 100%; padding: 2.4rem 0 .4rem; }
.dx__track {
  position: relative;
  height: 18px;
  background: rgba(176, 48, 46, .35);
  border: 2px solid var(--ink-sink);
  border-radius: var(--r-pill);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.dx__zone {
  position: absolute;
  inset-block: 0;
  border-radius: var(--r-pill);
  background: var(--gold);
  transition: left .18s var(--step), width .18s var(--step);
}
.dx__track.is-dragging .dx__zone, .dx__track.is-dragging .dx__handle { transition: none; }
.dx__handle {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  z-index: 3;
  min-width: 44px;
  height: 36px;
  padding: 0 .5rem;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  box-shadow: 3px 3px 0 var(--ink-sink);
  cursor: grab;
  transition: left .18s var(--step), transform .15s var(--swing);
}
.dx__handle b { font-size: .95rem; }
.dx__handle:hover { transform: translateY(-2px); }
.dx__handle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.dx__marker {
  position: absolute;
  bottom: calc(100% + 24px);
  translate: -50% 0;
  z-index: 4;
  padding: .25rem .55rem;
  font-size: .85rem;
  color: var(--bone);
  background: var(--ink-sink);
  border: 2px solid var(--bone-35);
  border-radius: var(--r);
  white-space: nowrap;
  pointer-events: none;
}
.dx__marker::after { content: ''; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 6px solid transparent; border-top-color: inherit; }
.dx__marker.is-win { color: var(--gold); border-color: var(--gold); }
.dx__marker.is-lose { color: #E07A72; border-color: #B0302E; }
.dx__ticks { display: flex; justify-content: space-between; margin-top: .6rem; font-size: .68rem; color: var(--bone-45); font-family: var(--mono); }
.dx__past { justify-content: center; }
.dx__past span { padding: .2rem .55rem; font-family: var(--mono); font-size: .72rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--ink-sink); }
.dx__past span.is-win { color: var(--gold); border-color: var(--gold-40); }
.dx__past span.is-lose { color: #E07A72; border-color: rgba(176, 48, 46, .6); }

/* ============================================================
   Wheel
   ============================================================ */
.wheel { position: relative; width: min(78vw, 340px); aspect-ratio: 1; }
.wheel__disc { width: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.wheel__pin {
  position: absolute;
  top: -4px; left: 50%;
  translate: -50% 0;
  z-index: 3;
  width: 0; height: 0;
  border-inline: 9px solid transparent;
  border-top: 18px solid var(--gold);
}
.wheel__hub {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.wheel__hub b { font-size: clamp(1.5rem, 7vw, 2.1rem); color: var(--bone); }
.wheel__hub b.is-win { color: var(--gold); }
.wheel__hub b.is-lose { color: var(--red); }

/* ============================================================
   Mines
   ============================================================ */
.hilo__table.mn__table { max-width: 860px; grid-template-columns: minmax(110px, 1fr) minmax(220px, 400px) minmax(110px, 1fr); }
.hilo__table.ck__table { max-width: 620px; }
.ck__now { font-family: var(--serif); font-size: clamp(1.8rem, 5.6vw, 2.6rem); font-weight: 800; color: var(--bone-70); padding: 0 .4rem; }
.ck__now.is-up { color: var(--gold); }
.mn__well { width: 100%; }
.stage[data-game='mines'] .stage__mid--wide { max-width: 900px; }
@media (max-width: 640px) {
  .hilo__table.mn__table { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mn__table .mn__well { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .mn__table .hilo__call { min-height: 110px; }
}
.hr {
  position: relative; width: 100%; max-width: 620px; height: clamp(300px, 50vh, 420px); overflow: hidden;
  border: 3px solid var(--ink-sink); border-radius: var(--r); container-type: inline-size;
  background: linear-gradient(180deg, #2A0B13 0%, #571825 70%, #68202D 100%);
}
.hr__world { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.hr__ground { position: absolute; left: 0; right: 0; bottom: -400px; height: 434px; background: #1C060C; border-top: 3px solid #FFC24D; }
.hr__tower { position: absolute; left: 50%; bottom: 34px; width: 0; height: 0; transform-origin: 50% 100%; }
.hr__block {
  position: absolute; height: 26px; box-sizing: border-box;
  background: var(--c, #FCF3F2); border: 2px solid #1C060C; border-radius: 3px;
}
.hr__block::after { content: ''; position: absolute; inset: 6px 9px; background: repeating-linear-gradient(90deg, rgba(28, 6, 12, .55) 0 9px, transparent 9px 15px); }
.hr__block.is-landed { animation: hr-land .22s ease-out; }
@keyframes hr-land { 40% { transform: scale(1.06, .86) translateY(2px); } }
.hr__block.is-crack { animation: hr-shake .12s linear infinite; background: #F28B82; }
@keyframes hr-shake { 50% { transform: translateX(2px); } }
.hr__crack { position: absolute; inset: 0; z-index: 1; }
.hr__crack svg { width: 100%; height: 100%; display: block; }
.hr__tower.is-banked .hr__block { box-shadow: 0 0 0 2px #FFC24D, 0 0 18px rgba(255, 194, 77, .45); transition: box-shadow .3s; }
.hr__jib { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(135deg, #FFC24D 0 8px, #1C060C 8px 16px); }
.hr__crane { position: absolute; top: 10px; left: 50%; height: 70px; transform-origin: 50% 0; animation: hr-swing 1.9s ease-in-out infinite alternate; z-index: 2; }
.hr__rope { position: absolute; top: 0; width: 2px; height: 44px; background: #FCF3F2; opacity: .7; }
.hr__load { left: 0; top: 44px; transition: opacity .2s; }
.hr__load.is-gone { opacity: 0; transition: none; }
@keyframes hr-swing { from { transform: translateX(calc(min(130px, 50cqw - 56px) * -1)) rotate(5deg); } to { transform: translateX(min(130px, 50cqw - 56px)) rotate(-5deg); } }
.hr__ruler { position: absolute; left: min(calc(50% + 116px), calc(100% - 64px)); bottom: 34px; height: 0; }
.hr__mark { position: absolute; left: 0; height: 26px; line-height: 26px; font-size: .72rem; color: var(--bone-70); opacity: .55; white-space: nowrap; }
.hr__mark::before { content: ''; display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; background: currentColor; }
.hr__mark.is-done { color: #B9E4A8; opacity: .8; }
.hr__mark.is-next { color: #FFC24D; opacity: 1; font-weight: 700; font-size: .85rem; }
.hr__mark.is-roof::after { content: ' ⚑'; color: #FFC24D; }
.stage[data-game='highrise'] .stage__mid--wide { max-width: 680px; }
@media (prefers-reduced-motion: reduce) {
  .hr__crane { animation: none; }
  .hr__world { transition: none; }
}
.mines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 9px); width: 100%; }
.mines__tile {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop);
  cursor: default;
  transition: transform .12s var(--step), box-shadow .12s;
}
.mines__tile > svg { width: 100%; height: 100%; display: block; }
.mines.is-live .mines__tile:not(:disabled) { cursor: pointer; }
.mines.is-live .mines__tile:not(:disabled):hover { border-color: var(--gold); }
.mines.is-live .mines__tile:not(:disabled):active { transform: translate(2px, 2px); box-shadow: none; }
.mines__tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mines__tile.is-gem, .mines__tile.is-mine { background: var(--bone); animation: mnTurn .28s var(--step); }
.mines__tile.is-mine { opacity: .75; }
.mines__tile.is-blast { background: #B0302E; opacity: 1; }
.mines__tile.is-safe { opacity: .4; }
.mn__art { width: 58%; height: 58%; display: block; }
.mn__art svg { width: 100%; height: 100%; display: block; }
@keyframes mnTurn { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mines__tile.is-gem, .mines__tile.is-mine { animation: none; } }

/* ============================================================
   Plinko
   ============================================================ */
.pk { width: 100%; display: grid; gap: 1rem; justify-items: center; }
.plinko { width: 100%; display: grid; gap: .6rem; justify-items: center; }
.pk__well { padding: clamp(.6rem, 2vw, 1rem) clamp(.4rem, 1.5vw, .8rem); }
.plinko__bins { display: grid; grid-template-columns: repeat(var(--bins, 13), minmax(0, 1fr)); gap: 3px; width: var(--board, 100%); margin-inline: auto; }
.bin {
  min-width: 0;
  padding: .4rem 0;
  overflow: hidden;
  text-align: center;
  font-size: clamp(.56rem, 1.3vw, .7rem);
  font-weight: 600;
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--gold) calc(var(--heat) * 100%), var(--bone-45));
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.pk__past { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; list-style: none; margin: 0; padding: 0; min-height: 1.8rem; }
.pk__past li { min-width: 52px; }
.pk__past li { padding: .3rem 0; text-align: center; font-size: .72rem; font-weight: 600; color: color-mix(in srgb, var(--gold) calc(var(--heat, .5) * 100%), var(--bone-45)); border: 1px solid var(--line); border-radius: 4px; }
.pk__past li:not(:first-child) { opacity: .7; }
@keyframes pkIn { from { transform: translateY(-8px); opacity: 0; } }

/* ============================================================
   Crash
   ============================================================ */
.cx { gap: 1rem; }
.cx__plot {
  position: relative;
  width: 100%;
  height: clamp(240px, 38vw, 360px);
  background: var(--ink-sink);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop);
  overflow: hidden;
}
.cx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cx__centre { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .35rem; pointer-events: none; text-align: center; }
.cx__big { font-family: var(--serif); font-size: clamp(2.8rem, 9vw, 4.6rem); font-weight: 700; line-height: 1; color: var(--bone); letter-spacing: -.01em; }
.cx__big.is-out { color: var(--gold); }
.cx__big.is-bust { color: var(--live); }
.cx__big.is-wait { color: var(--bone-70); font-size: clamp(2.2rem, 7vw, 3.4rem); }
.cx__sub { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); min-height: 1em; }
.cx__plot.is-shake { animation: cxShake .45s var(--step); }
@keyframes cxShake { 20%, 60% { transform: translate(-5px, 2px); } 40%, 80% { transform: translate(5px, -2px); } }
.cx__players .roster { max-height: 220px; }
.roster li.is-bust { opacity: .55; }
.roster li.is-bust b:last-child { color: var(--live); }
.cx__x { display: inline-flex; align-items: center; gap: .25rem; color: var(--gold); font-family: var(--mono); }
.cx__target {
  width: 5.5rem;
  padding: .3rem .5rem;
  font: inherit;
  font-size: 1rem;
  text-align: right;
  color: var(--gold);
  background: var(--ink-sink);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cx__target:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
/* instant crash: your own rocket, no room, no countdown */
.cx__mode { display: inline-grid; grid-template-columns: 1fr 1fr; flex: none; }
.cx__mode .seg__opt { height: 30px; padding: 0 .8rem; font-size: .66rem; letter-spacing: .12em; }
.cx.is-instant .clock, .cx.is-instant .cx__players { display: none; }
.cx.is-instant .live__history { margin-left: auto; }
.cx__quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx__quick .seg__opt { height: 36px; letter-spacing: .04em; }
.cx__action { min-height: 3.2rem; font-variant-numeric: tabular-nums; }
.cx__action[data-mode='queued'] { background: transparent; color: var(--gold); border-color: var(--gold-40); }

/* ============================================================
   Roulette
   ============================================================ */
.roul { width: 100%; display: grid; gap: 1rem; }
.roul__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.roul__bead {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
}
.roul__bead b { font-size: 1.5rem; }
.roul__bead[data-tone='red'] { background: var(--red); border-color: var(--red); }
.roul__bead[data-tone='black'] { background: #101010; }
.roul__bead[data-tone='green'] { background: var(--felt); border-color: var(--gold); }
.roul__bead.is-spinning { animation: turn 1s linear infinite; }
.roul__past { display: flex; gap: .3rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.roul__past li {
  min-width: 24px;
  padding: .1rem .3rem;
  text-align: center;
  font-size: .7rem;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.roul__past li[data-tone='red'] { color: #ff8a88; border-color: rgba(176, 48, 46, .5); }
.roul__past li[data-tone='green'] { color: var(--gold); border-color: var(--gold-40); }

.roul__scroll {
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bone-35) transparent;
}
.roul__scroll::-webkit-scrollbar { height: 6px; }
.roul__scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
.roul__scroll::-webkit-scrollbar-thumb { background: var(--bone-35); }
.roul__felt {
  display: grid;
  grid-template-columns: 38px 1fr 42px;
  grid-template-areas: 'zero nums cols' '. dozens .' '. outside .';
  gap: 3px;
  min-width: 470px;
}
.roul__numbers {
  grid-area: nums;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}
.roul__numbers .spot { grid-column: var(--col); grid-row: var(--top); }
.roul__cols { grid-area: cols; display: grid; grid-template-rows: repeat(3, 1fr); gap: 3px; }
.roul__dozens { grid-area: dozens; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.roul__outside { grid-area: outside; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }

.spot {
  position: relative;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: .3rem .2rem;
  background: rgba(242, 239, 230, .06);
  border: 1px solid rgba(232, 184, 75, .25);
  color: var(--bone);
  font-family: var(--serif);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--swing);
}
.spot--zero { grid-area: zero; }
.roul__dozens .spot, .roul__outside .spot { font-size: .72rem; font-family: var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.spot[data-tone='red'] { background: rgba(176, 48, 46, .55); }
.spot[data-tone='black'] { background: rgba(10, 10, 10, .6); }
.spot[data-tone='green'] { background: rgba(20, 64, 47, .8); }
.spot:hover { border-color: var(--gold); transform: translateY(-1px); }
.spot.is-backed { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-40); }
.spot.is-again .spot__chip { opacity: .6; }
.spot.is-hit { background: var(--gold); color: var(--ink); border-color: var(--bone); }
.spot__chip:empty { display: none; }
.spot__chip {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 22px;
  padding: .05rem .25rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 11px;
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  text-align: center;
}

/* ============================================================
   Cards — SVG-based from Discord bot renderer
   ============================================================ */
.hand { display: flex; }
.pc {
  position: relative;
  width: clamp(52px, 13vw, 76px);
  aspect-ratio: 5 / 7;
  flex-shrink: 0;
  margin-left: -14px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  contain: layout paint;
}
.pc:first-child { margin-left: 0; }
.pc--face { background: var(--bone); }
.pc--back { background: #3A0D18; }
.pc__svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.pc__svg svg { width: 100%; height: 100%; display: block; }
.pc--fresh { animation: dealt .62s var(--swing) backwards; }
@keyframes dealt {
  from { opacity: 0; transform: translate(38px, -64px) rotate(-16deg) scale(.88); }
  70% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.pc--flip { animation: flipOver .78s var(--swing) backwards; }
@keyframes flipOver {
  from { transform: rotateY(90deg) scale(.96); }
  60% { transform: rotateY(0) scale(1.03); }
}
.bj.is-won .pc { animation: wonGlow .9s var(--step); }
@keyframes wonGlow {
  40% { box-shadow: 0 0 22px rgba(232, 184, 75, .75), 0 6px 16px rgba(0, 0, 0, .4); }
}

/* ============================================================
   Blackjack / Baccarat felts
   ============================================================ */
.bj, .bac { width: 100%; display: grid; gap: clamp(1rem, 3vw, 1.6rem); justify-items: center; }
.bj__side, .bac__box { display: grid; gap: .7rem; justify-items: center; }
.bj__cards, .bac__cards { min-height: clamp(74px, 18vw, 106px); display: grid; place-items: center; }
.bj__tag, .bac__tag { display: flex; align-items: baseline; gap: .7rem; }
.bj__cards .hand:empty, .bac__cards:empty { display: flex; gap: 8px; }
.bj__cards .hand:empty::before, .bj__cards .hand:empty::after,
.bac__cards:empty::before, .bac__cards:empty::after {
  content: '';
  width: clamp(52px, 13vw, 76px);
  aspect-ratio: 5 / 7;
  border: 1.5px dashed rgba(255, 255, 255, .22);
  border-radius: 6px;
}
.bj__tot, .bac__tot { font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--gold); line-height: 1; }
.bj__arc {
  width: 100%;
  text-align: center;
  padding: .5rem 0;
  border-top: 1px solid rgba(232, 184, 75, .25);
  border-bottom: 1px solid rgba(232, 184, 75, .25);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 239, 230, .45);
}
.bac { grid-template-columns: 1fr 1fr; align-items: start; }
.bac__past { grid-column: 1 / -1; display: flex; gap: .25rem; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.bac__past li {
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  font-size: .6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.bac__past li[data-tone='player'] { color: #8ec5ff; border-color: rgba(142, 197, 255, .4); }
.bac__past li[data-tone='banker'] { color: #ff8a88; border-color: rgba(176, 48, 46, .5); }
.bac__past li[data-tone='tie'] { color: var(--gold); border-color: var(--gold-40); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .play { grid-template-columns: minmax(0, 1fr) 300px; }
  .menu { grid-column: 1 / -1; padding: 0; }
  .menu > .label { display: none; }
  .picks {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: var(--hair);
  }
  .picks::-webkit-scrollbar { display: none; }
  .pick {
    flex-direction: column;
    gap: .35rem;
    padding: .8rem 1rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    font-size: .68rem;
    white-space: nowrap;
  }
  .pick[aria-current='page'] { border-left: 0; border-bottom-color: var(--gold); }
}

@media (max-width: 780px) {
  .play { grid-template-columns: minmax(0, 1fr); }
  .stage { min-height: 40vh; scroll-margin-top: calc(var(--bar-h) + 6px); }
  /* Stacked, the controls land under a tall board and the button you need is
     off the bottom of the screen. On a phone the console rides the bottom of
     the viewport instead, so the stake and the action are always in reach. */
  .console { border-left: 0; border-top: 3px solid var(--ink-sink); }
  .bac { grid-template-columns: 1fr; }
  .stake__step { padding: 0 .55rem; font-size: .68rem; }
  .acts { grid-template-columns: 1fr 1fr; }
}

.seed-in {
  border-radius: var(--r-sm);
  width: 100%;
  padding: .6rem .75rem;
  background: none;
  border: 1px solid var(--line);
  font-size: .8rem;
  font-family: ui-monospace, Menlo, monospace;
}
.seed-in:focus { outline: none; border-color: var(--gold); background: var(--gold-08); }

.seg--wrap { flex-wrap: wrap; }
.seg--wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ============================================================
   Live tables
   ============================================================ */
.live { width: 100%; display: grid; gap: 1.1rem; }

.live__top {
  display: flex;
  align-items: center;
  gap: .85rem;
  flex-wrap: wrap;
}
.live__top > .label { white-space: nowrap; }

.clock {
  position: relative;
  flex: 1 1 120px;
  min-width: 90px;
  height: 3px;
  background: rgba(0, 0, 0, .35);
  overflow: visible;
}
.clock__fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .12s linear;
}
.clock__left {
  position: absolute;
  top: -1.35rem;
  right: 0;
  font-size: .8rem;
  color: var(--gold);
}

.live__history { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.live__history li {
  min-width: 34px;
  padding: .12rem .4rem;
  text-align: center;
  font-size: .64rem;
  border: 1px solid var(--line);
  color: var(--bone-45);
  font-variant-numeric: lining-nums tabular-nums;
  animation: histIn .35s var(--step) backwards;
}
@keyframes histIn { from { opacity: 0; transform: translateX(-6px); } }
.live__history li.is-win { color: var(--gold); border-color: var(--gold-40); }
.stage[data-game='bjlive'] .live__history { align-items: center; }
.stage[data-game='bjlive'] .live__history:not(:empty)::before { content: 'Dealer'; margin-right: .2rem; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.live__history li.is-lose { color: var(--red); border-color: rgba(176, 48, 46, .4); }

.live__body {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
}

/* ---- the cubes you bet on ---- */
.cubes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.stage[data-game='wheel'] .live__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.stage[data-game='wheel'] .wheel { width: min(80vw, 380px); }
.stage[data-game='wheel'] .cubes { width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cubes__hint { margin: 0; font-size: .78rem; color: var(--bone-65); text-align: center; }
.cube {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: .65rem .7rem .55rem;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-top: 4px solid var(--tone, var(--gold));
  border-radius: var(--r);
  box-shadow: var(--drop);
  color: var(--bone);
  text-align: left;
  cursor: not-allowed;
  transition: transform .25s var(--swing), border-color .25s, background .25s;
}
.cubes.is-open .cube { cursor: pointer; }
.cubes.is-open .cube:hover { transform: translateY(-2px); background: var(--accent-08); border-color: var(--accent-40); }
.cube__mult { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1; }
.cube__odds { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-65); }
.cube__total { font-size: .78rem; color: var(--gold); }
.cube.is-backed { border-color: var(--gold-40); }
.cube.is-mine { box-shadow: inset 0 0 0 1px var(--gold-40); }
.cube.is-hit {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--bone);
  animation: cubeHit .6s var(--swing);
}
.cube.is-hit .cube__odds, .cube.is-hit .cube__total { color: rgba(20, 20, 20, .7); }
@keyframes cubeHit {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.cube__who { display: grid; gap: 3px; min-height: 18px; margin: 0; padding: 0; list-style: none; }
.cube__who li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 4px; font-size: .66rem; line-height: 1.2; }
.cube__who .pip { width: 16px; height: 16px; font-size: .5rem; }
.cube__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone-70); }
.cube__bet { font-size: .62rem; color: var(--gold); }
.cube__who .is-me .cube__name { color: var(--bone); font-weight: 600; }
.cube__who li.cube__more { display: block; font-size: .6rem; color: var(--bone-45); }
.cube.is-hit .cube__name, .cube.is-hit .cube__bet { color: rgba(20, 20, 20, .75); }
.pip {
  width: 20px; height: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: .55rem;
  font-style: normal;
  color: var(--gold);
  background: var(--ink-raise);
  animation: pipIn .32s var(--swing) backwards;
}
.pip img { width: 100%; height: 100%; object-fit: cover; }
.cube__who .is-me .pip { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
@keyframes pipIn { from { opacity: 0; transform: scale(.4); } }

/* ---- who is in the round ---- */
.roster__wrap { display: grid; gap: .5rem; }
.roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 168px; overflow-y: auto; }
.roster li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: center;
  padding: .35rem .5rem;
  background: rgba(0, 0, 0, .22);
  font-size: .76rem;
  animation: pipIn .3s var(--step) backwards;
}
.roster li.is-me { box-shadow: inset 2px 0 0 var(--gold); }
.roster li.is-out { opacity: .85; }
.roster__who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.roster__who img, .roster__who i {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: .55rem;
  font-style: normal;
  color: var(--gold);
  flex-shrink: 0;
}
.roster__empty { color: var(--bone-45); font-style: italic; }
.roster .is-win { color: var(--gold); }


@media (max-width: 820px) {
  .live__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cubes, .stage[data-game='wheel'] .cubes { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
}

.pick__group {
  display: block;
  padding: 1rem 1.25rem .35rem;
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.pick__group:first-child { padding-top: 0; }
.pick--live span { margin-right: auto; }
.pick__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}

@media (max-width: 1080px) {
  .pick__group {
    align-self: center;
    padding: 0 .5rem 0 1rem;
    writing-mode: horizontal-tb;
  }
}

/* ============================================================
   Plinko — canvas board
   ============================================================ */
.plinko__canvas { display: block; margin-inline: auto; }
.bin { transition: transform .3s var(--swing), border-color .3s, filter .3s; }
.bin.is-hit {
  border-bottom-color: var(--bone);
  transform: translateY(4px);
  filter: brightness(1.35);
  animation: binHit .5s var(--swing);
}
@keyframes binHit {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(6px) scale(1.12); }
  100% { transform: translateY(4px) scale(1); }
}

/* ============================================================
   Chicken — the crossing
   ============================================================ */
/* the road scrolls inside itself; nothing may escape the board */
.chick { width: 100%; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.chick__road {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  height: clamp(200px, 32vw, 260px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    var(--ink-sink);
  box-shadow: var(--drop);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.chick__road::-webkit-scrollbar { display: none; }

.chick__kerb {
  position: relative;
  flex: 0 0 clamp(56px, 8vw, 78px);
  display: grid;
  place-items: center;
  background: var(--ink-raise);
  border-right: 1px solid var(--line);
}

.chick__lanes { display: flex; align-items: stretch; }
.clane {
  position: relative;
  flex: 0 0 92px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .7rem;
  /* dashed lane divider down the middle, like road paint */
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .22) 0 12px, transparent 12px 30px)
    no-repeat right / 2px 100%;
  transition: background-color .3s var(--step);
}
.clane:last-child { background-image: none; }

.clane__tile {
  /* the bird is appended inside the tile, so the tile has to be what it
     positions against — against the lane it sat below the tile it is on */
  position: relative;
  width: clamp(44px, 6vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: default;
  transition: border-color .25s, background .25s, transform .25s var(--swing);
}
.chick__lanes.is-live .clane.is-next .clane__tile { border-color: var(--gold); background: var(--gold-08); cursor: pointer; }
.chick__lanes.is-live .clane.is-next .clane__tile:hover { background: rgba(232, 184, 75, .16); transform: translateY(-2px); }
.clane__coin { width: 16px; height: 16px; border-radius: 50%; background: rgba(232,184,75,.14); transition: background .25s; }
.clane.is-done .clane__tile { border-color: var(--gold-40); background: rgba(232, 184, 75, .12); }
.clane.is-done .clane__coin { background: var(--gold); box-shadow: 0 0 8px rgba(232,184,75,.5); }
.clane.is-hit .clane__tile { border-color: var(--red); background: rgba(176, 48, 46, .28); }

.clane__mult {
  font-size: .72rem;
  padding: .12rem .5rem;
  border-radius: var(--r-pill);
  color: var(--bone-45);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line);
  transition: color .25s, background .25s, border-color .25s;
}
.clane.is-next .clane__mult { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.clane.is-done .clane__mult { color: var(--gold); border-color: var(--gold-40); }

/* the car only appears on a step: it races down its lane */
.clane__car {
  position: absolute;
  top: -20%; left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: 30px;
  color: var(--red);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5));
}
.clane__car svg { width: 100%; height: auto; display: block; }
.clane.is-parked .clane__car { opacity: 1; top: calc(50% - 104px); }
.clane.is-hit .clane__car, .clane.is-fate .clane__car { z-index: 4; }
.clane.is-fate .clane__tile { border: 2px dashed #B0302E; background: rgba(176, 48, 46, .25); }
.clane.is-fate .clane__mult { color: #E07A72; border-color: #B0302E; }
.clane__block {
  position: absolute;
  top: calc(50% - 56px);
  left: 18%;
  right: 18%;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0;
  transform: scaleX(.2);
  transition: opacity .2s, transform .25s var(--swing);
  pointer-events: none;
}
.clane.is-done .clane__block { opacity: 1; transform: none; }

.chick__bird {
  z-index: 3;
  display: block;
  width: clamp(34px, 4.8vw, 44px);
  color: var(--gold);
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45));
  transition: transform .3s var(--swing), rotate .3s var(--step);
}
.chick__bird svg { width: 100%; height: auto; display: block; }
.clane__tile .chick__bird, .clane .chick__bird { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.chick__bird.is-hop { animation: hop .32s var(--swing); }
@keyframes hop { 50% { transform: translateY(-26px) scale(1.08); } }
.chick__bird.is-flat { transform: translateY(30%) scale(1.12, .32); color: var(--red); transition: transform .08s linear, color .08s; }

@media (prefers-reduced-motion: reduce) {
  .chick__road { scroll-behavior: auto; }
}

.hilo { width: 100%; min-width: 0; display: grid; gap: clamp(1rem, 3vw, 1.6rem); justify-items: center; }
.hilo__table { width: 100%; max-width: 620px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.6rem, 3vw, 1.6rem); }
.hilo__centre { display: grid; justify-items: center; gap: .8rem; }
.hilo__card .pc { width: clamp(96px, 22vw, 140px); margin: 0; }
.hilo__card .pc.is-bust { box-shadow: 0 0 0 3px var(--live), 0 6px 16px rgba(0, 0, 0, .4) !important; }
.hilo__call {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .3rem;
  padding: 1rem .6rem;
  min-height: 150px;
  color: var(--bone);
  font: inherit;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop);
  cursor: pointer;
  transition: transform .15s var(--swing), border-color .2s, background .2s;
}
.hilo__call:not(:disabled):hover { border-color: var(--gold); transform: translateY(-2px); }
.hilo__call:disabled { opacity: .45; cursor: default; box-shadow: none; }
.hilo__call i { color: var(--gold); line-height: 0; }
.hilo__name { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-70); text-align: center; }
.hilo__pays { font-size: 1.35rem; color: var(--gold); }
.hilo__odds { font-size: .78rem; color: var(--bone-45); }
.hilo__skip {
  padding: .35rem .8rem;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-70);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.hilo__skip:disabled { opacity: .6; cursor: default; }
.hilo__call:focus-visible, .hilo__skip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bj__table { max-width: 760px; }
.bac__calls { width: 100%; max-width: 620px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1rem); }
.bac__calls .hilo__call { min-height: 118px; }
.hilo__call[aria-pressed='true'] { border-color: var(--gold); }
.bj__table .hilo__centre { min-width: clamp(170px, 36vw, 320px); }
.bj__rule { margin: 0; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-70); text-align: center; }
.hilo__trail { width: 100%; max-width: 620px; min-height: 64px; display: flex; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.hilo__past { position: relative; flex: 0 0 auto; }
.hilo__past .pc { width: 40px; margin: 0; box-shadow: none; }
.hilo__past i { position: absolute; right: -4px; top: -6px; font-style: normal; font-size: .7rem; line-height: 1; padding: .15rem .25rem; border-radius: var(--r-pill); background: var(--ink-sink); color: var(--gold); }
@media (max-width: 520px) {
  .hilo__call { min-height: 120px; padding: .7rem .3rem; }
  .hilo__pays { font-size: 1.05rem; }
}

/* ============================================================
   Auto bet
   ============================================================ */
.auto { border: var(--hair); }
.auto > summary {
  padding: .6rem .8rem;
  cursor: pointer;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-45);
  list-style: none;
}
.auto > summary::-webkit-details-marker { display: none; }
.auto > summary::after { content: '+'; float: right; }
.auto[open] > summary::after { content: '−'; }
.auto[open] > summary { color: var(--gold); border-bottom: var(--hair); }
.auto.is-running > summary { color: var(--gold); }
.auto.is-running > summary::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 1.4s ease-in-out infinite;
}

.auto__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  padding: .8rem;
}
.auto__field { display: grid; gap: .25rem; min-width: 0; }
.auto__field span {
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.auto__in {
  width: 100%;
  padding: .45rem .5rem;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  color: var(--bone);
  font-size: .82rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.auto__in:focus { outline: none; border-color: var(--gold-40); }
.auto__go { width: calc(100% - 1.6rem); margin: 0 .8rem .8rem; }
.auto__tally {
  margin: 0;
  padding: 0 .8rem .7rem;
  font-size: .76rem;
  color: var(--bone-45);
  font-variant-numeric: lining-nums tabular-nums;
}
.auto__tally.is-win { color: var(--gold); }
.auto__tally.is-lose { color: var(--red); }

/* ============================================================
   Motion — the small stuff
   ============================================================ */
.stage { animation: stageIn .45s var(--step); }
@keyframes stageIn { from { opacity: 0; transform: translateY(8px); } }

.console > * { animation: railIn .4s var(--step) backwards; }
.console > *:nth-child(1) { animation-delay: .02s; }
.console > *:nth-child(2) { animation-delay: .06s; }
.console > *:nth-child(3) { animation-delay: .1s; }
.console > *:nth-child(4) { animation-delay: .14s; }
.console > *:nth-child(5) { animation-delay: .18s; }
@keyframes railIn { from { opacity: 0; transform: translateX(10px); } }

.banner { transition: color .3s var(--step); }
.banner--win, .banner--lose, .banner--part { animation: bannerIn .4s var(--swing); }
@keyframes bannerIn { from { opacity: 0; transform: translateY(4px); } }

.readout dd { transition: color .3s var(--step); }

.btn:active:not(:disabled) { transform: translateY(1px); }
.chip:active { transform: scale(.94); }

.purse-chip b { transition: color .25s; }
.purse-chip.is-up b { animation: purseUp .7s var(--swing); }
.purse-chip.is-down b { animation: purseDown .7s var(--swing); }
@keyframes purseUp {
  0% { color: var(--gold); transform: none; }
  30% { color: #fff0c2; transform: translateY(-3px) scale(1.06); }
  100% { color: var(--gold); transform: none; }
}
@keyframes purseDown {
  0% { color: var(--gold); }
  30% { color: var(--red); }
  100% { color: var(--gold); }
}

@media (prefers-reduced-motion: reduce) {
  /* Idle traffic is scenery; the car that actually hits you is drawn, not animated. */
  .lane__car { animation: none; opacity: 0; }
  .lane, .live__history li, .pip, .roster li { animation: none; }
}

@media (max-width: 640px) {
  .auto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The pin gets nudged by each slot passing under it while the wheel is turning. */
.wheel__disc.is-spinning + .wheel__hub b { opacity: .35; }
.wheel__disc.is-spinning { filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55)); }



/* ---- live blackjack seats ---- */
.seats {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 5 / 2;
}
.seat {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  translate: -50% -50%;
  width: min(130px, 17%);
  display: grid;
  gap: .35rem;
  padding: .5rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .3);
  align-content: start;
}
.seat[aria-current='true'] { border-color: var(--gold); background: var(--gold-08); }
.seat.is-me { box-shadow: inset 2px 0 0 var(--gold); }
.seat--open {
  align-content: center;
  justify-items: center;
  min-height: 74px;
  border-style: dashed;
  color: var(--bone-70);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.seat__who { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: .7rem; }
.seat__who img, .seat__who i {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: .5rem;
  font-style: normal;
  color: var(--gold);
  flex-shrink: 0;
}
.seat__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seat .hand { min-height: 46px; }
.seat .pc {
  width: 44px;
  margin-left: -14px;
  border-radius: 3px;
}
.seat .pc:first-child { margin-left: 0; }

.seat__foot { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; font-size: .64rem; }
.seat__foot span { color: var(--bone-45); }
.seat.is-win .seat__foot span, .seat.is-blackjack .seat__foot span { color: var(--gold); }
.seat.is-lose { opacity: .75; }

@media (max-width: 560px) {
  .seats {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  .seat { position: static; translate: none; width: auto; }
}

/* ---- poker ---- */
.poker {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  padding: 1rem 0;
}
/* Five columns of the stage, not of the viewport — the board is narrower than the page. */
.poker__hand {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.3rem, 1.4vw, .6rem);
  width: min(100%, 620px);
  margin-inline: auto;
  padding: 22px clamp(.5rem, 2vw, 1rem) clamp(.6rem, 2vw, 1rem);
  background: var(--ink-sink);
  border-radius: var(--r);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35);
}
.poker__card {
  width: 100%;
  margin-left: 0;
  cursor: default;
  transition: transform .18s var(--swing), outline-color .18s;
}
.poker__hand .pc:first-child { margin-left: 0; }
.poker__card[role='button'] { cursor: pointer; }
.poker__card[role='button']:hover,
.poker__card[role='button']:focus-visible {
  transform: translateY(-6px);
  outline: none;
}
.poker__card--held {
  transform: translateY(-14px);
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.poker__card--held::after {
  content: 'Held';
  position: absolute;
  inset: auto 0 0 0;
  padding: .18rem 0;
  text-align: center;
  font-size: .55rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #141414;
  background: var(--gold);
}
.poker__label {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  min-height: 1.3em;
}
.poker { display: grid; gap: 1rem; justify-items: center; width: 100%; }

/* ---- live poker ---- */
.plive {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
}
.plive .poker__hand { padding-top: 0; }
.plive__rank {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  letter-spacing: .04em;
  min-height: 1.2em;
}

/* ---- slot ---- */
.sl { width: 100%; display: grid; justify-items: center; gap: .9rem; }
.sl__cabinet {
  width: min(100%, 640px);
  padding: .8rem clamp(.5rem, 2vw, 1rem) 1rem;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop);
}
.sl__marquee { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .2rem .4rem .7rem; }
.sl__marquee b { font-family: var(--serif); font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sl__marquee span { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); }
.sl__glass { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; gap: .35rem; }
.sl__rail { display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; justify-items: center; padding: 6px 0; }
.sl__rail span { min-width: 20px; padding: .1rem .3rem; text-align: center; font-family: var(--mono); font-size: .58rem; font-weight: 600; color: var(--ink-sink); background: var(--gold); border-radius: var(--r-pill); }
.sl__window {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px;
  background: var(--ink-sink);
  border: 2px solid #1C060C;
  border-radius: var(--r);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .4);
}
.sl__reel {
  position: relative;
  aspect-ratio: 1 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bone);
}
/* Rows size themselves off the square symbol, so the strip is exactly
   (number of faces x reel width) tall however many faces are loaded. */
.sl__strip { position: absolute; inset: 0 0 auto 0; display: grid; will-change: transform; }
.sl__reel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(48, 10, 19, .45), transparent 18%, transparent 82%, rgba(48, 10, 19, .45));
}
.sl__reel.is-spinning .sl__strip { filter: blur(1.6px); }
.sl__sym { display: grid; place-items: center; aspect-ratio: 1; padding: 13%; transition: background .25s, box-shadow .25s; }
.sl__sym svg { width: 100%; height: 100%; display: block; }
/* The sprite only carries the symbol definitions — it is referenced by <use>, never drawn where it sits. */
.sl__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sl__sym.is-hit { background: rgba(255, 194, 77, .45); box-shadow: inset 0 0 0 3px var(--gold-deep); }
@keyframes slHit { 50% { background: rgba(255, 194, 77, .7); } }
.sl__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding: .55rem .9rem; background: var(--ink-sink); border-radius: var(--r); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35); }
.sl__label { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-70); }
.sl__meter { font-family: var(--mono); font-size: 1.25rem; color: var(--bone-45); }
.sl__meter.is-win { color: var(--gold); }
.sl__lines { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; min-height: 1.6rem; }
.sl__line { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #1C060C; background: var(--gold); border-radius: var(--r-pill); padding: .22rem .65rem; font-weight: 600; }
.sl__pays dt { display: flex; align-items: center; }
.sl__pays .sl__sym { width: 26px; padding: 2px; background: var(--bone); border-radius: 4px; }
@media (max-width: 520px) { .sl__rail { display: none; } .sl__glass { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .sl__reel.is-spinning .sl__strip { filter: none; }
  .sl__sym.is-hit { animation: none; }
}

/* ---- board head chip ---- */
.edge-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  background: var(--ink-raise);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-70);
  white-space: nowrap;
}
.edge-chip::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
}

/* ---- your last rounds ---- */
.last {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem clamp(1rem, 3vw, 2rem);
  border-top: var(--hair);
  flex-wrap: wrap;
}
.last .label { white-space: nowrap; }
.last__runs { display: flex; gap: .3rem; flex-wrap: wrap; margin-right: auto; }
.run {
  padding: .2rem .45rem;
  border-radius: var(--r);
  font-size: .62rem;
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--bone-45);
}
.run--win { color: var(--accent); border-color: var(--accent-40); background: var(--accent-08); }
.run--part { color: var(--bone-70); }
.run--lose { color: var(--red); border-color: rgba(255, 94, 94, .3); background: rgba(255, 94, 94, .08); }
.last__all {
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-45);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.last__all:hover { color: var(--accent); }

/* ---- the standing promise under every console ---- */
.console__note {
  margin: .4rem 0 0;
  padding-top: .8rem;
  border-top: var(--hair);
  font-size: .68rem;
  line-height: 1.5;
  color: var(--bone-45);
}

.odds-note {
  margin: -.4rem 0 .2rem;
  font-size: .64rem;
  letter-spacing: .04em;
  color: var(--bone-45);
}

@media (max-width: 560px) {
  .roul__wheel { max-width: 250px; }
  .roul__felt {
    min-width: 0;
    grid-template-columns: 40px 40px minmax(0, 1fr);
    grid-template-areas: '. . zero' 'outside dozens nums' '. . cols';
  }
  .roul__numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(12, 34px); }
  .roul__numbers .spot { grid-column: var(--row); grid-row: var(--col); }
  .roul__cols { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roul__cols .spot:nth-child(1) { grid-column: 3; grid-row: 1; }
  .roul__cols .spot:nth-child(2) { grid-column: 2; grid-row: 1; }
  .roul__cols .spot:nth-child(3) { grid-column: 1; grid-row: 1; }
  .roul__dozens { grid-template-columns: none; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .roul__outside { grid-template-columns: none; grid-template-rows: repeat(6, minmax(0, 1fr)); }
  .roul__dozens .spot span, .roul__outside .spot span { writing-mode: vertical-rl; rotate: 180deg; }
}

/* ---- roulette: the wheel sits beside the felt, not above it ---- */
.roul__body {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: start;
}
.roul__body { justify-items: center; }
.roul__side { display: grid; gap: .8rem; min-width: 0; width: 100%; }
.roul__side .roul__past { justify-content: center; }

.roul__wheel {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  justify-self: center;
}
.roul__disc { width: 100%; height: 100%; will-change: transform; }
.roul__disc svg { width: 100%; height: 100%; display: block; }
/* The ball rides a track centred on the wheel: the orbit spins, the ball is
   pinned to the top of it, so it can never leave the rim. */
.roul__orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.roul__ball {
  position: absolute;
  top: 4%; left: 50%;
  width: 11px; height: 11px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.roul__hub {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 4;
  display: grid;
  place-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .roul__orbit, .roul__disc, .roul__ball { transition-duration: 1ms !important; }
}

/* ---- live poker: a seated showdown table ---- */

/* ---- live poker: a table you sit around, not a list of hands ---- */
.ptable { padding: clamp(3.4rem, 8vw, 5rem) clamp(2.5rem, 7vw, 5rem); }
.ptable__rail {
  position: relative;
  padding: clamp(.7rem, 1.6vw, 1.1rem);
  border-radius: 50% / 34%;
  background: var(--ink-lift);
  border: 2px solid var(--ink-sink);
  box-shadow: var(--drop);
}
.ptable__felt {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 50% / 34%;
  background: var(--felt-deep);
  border: 2px solid var(--ink-sink);
  display: grid;
  place-items: center;
}
.ptable__middle { display: grid; justify-items: center; gap: .5rem; }
.ptable__board { display: flex; gap: .3rem; }
.ptable__board .pc { width: clamp(28px, 5vw, 44px); margin-left: 0; }
.ptable__board .pc--empty { box-shadow: none !important; border: 1.5px dashed rgba(255, 255, 255, .28) !important; }
.ptable__board .pc--empty .pc__svg { display: none; }
.ptable__potrow { display: flex; align-items: baseline; gap: .45rem; }
.ptable__middle .label { color: var(--bone-45); }
.plive__pot { font-size: clamp(1.4rem, 3.4vw, 2rem); color: var(--gold); }
.ptable__chips { display: flex; gap: .3rem; margin-top: .2rem; }
.ptable__chips i {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ink-sink);
  background: var(--gold);
}
.ptable__chips i:nth-child(2) { background: var(--bone); }
.ptable__chips i:nth-child(3) { background: var(--live); }

.ptable__seats { position: absolute; inset: 0; }
.pseat {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  width: clamp(112px, 15vw, 150px);
  display: grid;
  justify-items: center;
  gap: .35rem;
}
.pseat__plate {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: .3rem .45rem;
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  background: var(--ink-raise);
  box-shadow: var(--drop);
}
.pseat__plate b { font-size: .74rem; color: var(--bone); overflow-wrap: anywhere; line-height: 1.2; }
.pseat__plate span { font-size: .66rem; color: var(--bone-65); }
.pseat--me .pseat__plate { border-color: var(--accent); background: var(--ink-lift); }
.pseat--won .pseat__plate { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), var(--drop); }
.pseat--folded { opacity: .42; }
.pseat--acting .pseat__plate { border-color: var(--live); box-shadow: 0 0 0 2px var(--live), var(--drop); }
.pseat__bet {
  margin-top: .15rem;
  font-size: .62rem;
  color: var(--gold);
}

/* what you can do when it is on you */
.pact__row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.pact { flex: 1 1 auto; }
.pact--fold { flex: 0 0 auto; }
.pact__amount {
  flex: 1 1 5rem;
  min-width: 4.5rem;
  padding: 0 .6rem;
  color: var(--bone);
  background: var(--ink-sink);
  border: 2px solid var(--line);
  border-radius: var(--r);
}
.phole__box { display: grid; justify-items: center; gap: .35rem; }
.phole { display: flex; gap: .3rem; justify-content: center; }
.phole .pc { width: clamp(40px, 8vw, 56px); }
.pseat--open {
  width: clamp(92px, 11vw, 120px);
  place-items: center;
  min-height: 46px;
  padding: .3rem .5rem;
  border: 2px dashed var(--line);
  border-radius: var(--r);
  color: var(--bone-45);
  font-size: .7rem;
  text-align: center;
}
.plive__hand { display: flex; justify-content: center; }
.plive__hand .pc {
  width: clamp(24px, 4.4vw, 34px);
  margin-left: -12px;
  transition: rotate .25s var(--swing);
}
.plive__hand .pc:first-child { margin-left: 0; }
.pseat__rank {
  min-height: 1em;
  text-align: center;
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.pseat--won .pseat__rank { color: var(--gold); }

@media (max-width: 720px) {
  /* no room to sit round it — the seats stack under the felt instead */
  .ptable { padding: 0; }
  .ptable__felt { aspect-ratio: 2 / 1; }
  .ptable__seats { position: static; display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
  .pseat { position: static; translate: none; width: auto; }
  .pseat--open { width: auto; }
}


/* ---- double or nothing ---- */
.dn { width: 100%; max-width: 640px; display: grid; gap: 1.4rem; justify-items: center; }
.dn__table { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(.6rem, 3vw, 1.6rem); }
.dn__side {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1rem .5rem;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop);
  text-align: center;
}
.dn__side b { font-size: clamp(1.1rem, 3.4vw, 1.5rem); color: var(--gold); }
.dn__label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); }
.dn__note { font-size: .72rem; color: var(--bone-45); }
.dn__stage { perspective: 900px; }
.dn__card { position: relative; width: clamp(110px, 24vw, 150px); aspect-ratio: 5 / 7; transform-style: preserve-3d; }
.dn__face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
.dn__face--back svg { width: 100%; height: 100%; display: block; }
.dn__face--front {
  transform: rotateY(180deg);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .3rem;
  background: var(--gold);
  border: 3px solid #1C060C;
  color: #1C060C;
}
.dn__face--front b { font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800; line-height: 1; }
.dn__face--front span { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.dn__face--front.is-lost { background: #8E1B2E; color: var(--bone); border-color: #1C060C; }
.dn__face--front.is-lost b { font-size: clamp(1.1rem, 3.6vw, 1.5rem); letter-spacing: .06em; text-transform: uppercase; }
.dn__card.is-lost { animation: dnThud .4s var(--step); }
@keyframes dnThud { 30% { translate: 0 6px; } 60% { translate: -4px 0; } }
.dn__ladder { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.dn__ladder li { padding: .1rem .3rem; font-family: var(--mono); font-size: .76rem; color: var(--bone-65); text-align: center; }
@media (max-width: 560px) { .dn__ladder { display: grid; grid-template-columns: repeat(6, auto); justify-content: center; } }
.dn__ladder li.is-done { color: var(--gold); }
.dn__ladder li.is-next { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) { .dn__side { padding: .7rem .3rem; } }
@media (prefers-reduced-motion: reduce) { .dn__card.is-lost { animation: none; } }

/* ---- craps ---- */
.cp { width: 100%; display: grid; gap: clamp(.9rem, 2.6vw, 1.5rem); justify-items: center; }
.cp__board {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.6rem);
  padding: clamp(.8rem, 2.4vw, 1.1rem);
  background: var(--felt-deep);
  border: 2px solid var(--ink-sink);
  box-shadow: inset 0 0 0 1px var(--gold-18);
}
.cp__disc {
  width: clamp(84px, 15vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  gap: .2rem;
  text-align: center;
  background: var(--ink-sink);
  border: 3px solid var(--bone-45);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
  color: var(--bone);
}
.cp__disc.is-on { border-color: var(--gold); color: var(--gold); }
.cp__disc b { font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 900; line-height: 1; }
.cp__disc span { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.cp__dice { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, .9rem); }
.cp__die { width: clamp(58px, 13vw, 88px); aspect-ratio: 1; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .3)); }
.cp__die svg { display: block; width: 100%; height: 100%; }
.cp__sum { min-width: 2.4rem; font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 900; color: var(--gold); text-align: center; }
.cp__dice.is-rolling .cp__die { animation: cpTumble .5s var(--swing); }
@keyframes cpTumble {
  0% { transform: translateY(-12px) rotate(-9deg) scale(1.05); }
  45% { transform: translateY(5px) rotate(7deg); }
  75% { transform: translateY(-3px) rotate(-3deg); }
  100% { transform: none; }
}
.cp__marks {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .5rem;
}
.cp__mark {
  display: grid;
  gap: .12rem;
  justify-items: center;
  padding: .5rem .5rem .45rem;
  background: var(--ink);
  border: 2px solid var(--ink-sink);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .28);
}
.cp__mark__name { font-family: var(--mono); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
.cp__mark__amt { font-family: var(--serif); font-size: 1rem; font-weight: 800; color: var(--bone); }
.cp__mark__note { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-45); }
.cp__mark.is-live { border-color: var(--gold-40); }
.cp__mark.is-live .cp__mark__amt { color: var(--gold); }
.cp__mark.is-win { border-color: var(--gold); }
.cp__mark.is-win .cp__mark__amt, .cp__mark.is-win .cp__mark__note { color: var(--gold); }
.cp__mark.is-lose { border-color: var(--bone-35); }
.cp__mark.is-lose .cp__mark__amt { color: var(--red); text-decoration: line-through; text-decoration-thickness: 2px; }
.cp__mark.is-lose .cp__mark__note { color: var(--red); }
.cp__mark.is-push .cp__mark__amt { color: var(--bone-70); }
.cp__trail { width: 100%; display: flex; gap: .35rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.cp__trail li {
  flex: 0 0 auto;
  min-width: 2.1rem;
  padding: .3rem .35rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--bone-45);
  background: var(--ink);
  border: 1px solid var(--ink-sink);
}
.cp__trail li.is-point { color: var(--gold); border-color: var(--gold-40); }
.cp__trail li.is-seven { color: var(--red); border-color: var(--bone-35); }
.cp__trail li:last-child { color: var(--bone); box-shadow: 2px 2px 0 var(--ink-sink); }
.cp__bets { display: grid; gap: .9rem; transition: opacity .25s var(--step); }
.cp__bets.is-locked { opacity: .8; }
.cp__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.field--inline { grid-template-columns: minmax(62px, auto) minmax(0, 1fr); align-items: center; gap: .55rem; }
.field--inline .seg { gap: 6px; }
.field--inline .seg__opt { height: 38px; padding: 0 .3rem; font-size: .68rem; letter-spacing: .06em; }
.cp__layout {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  gap: .35rem;
  padding-top: .5rem;
  border-top: 1px solid var(--gold-18);
}
.cp__group { display: grid; grid-template-columns: minmax(54px, auto) minmax(0, 1fr); gap: .55rem; align-items: center; }
.cp__group__label { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-65); }
.cp__spots { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: .4rem; }
.cp__spot {
  display: grid;
  place-content: center;
  gap: .1rem;
  min-height: 40px;
  padding: .25rem .2rem;
  background: var(--ink);
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  color: var(--bone-70);
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, box-shadow .15s;
}
.cp__spot:hover { color: var(--bone); border-color: var(--bone-35); }
.cp__spot__name { font-family: var(--serif); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cp__spot__note { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-65); font-style: normal; }
.cp__spot__note:empty { display: none; }
.cp__spot[aria-pressed='true'] { background: var(--ink-sink); border-color: var(--gold-40); color: var(--gold); }
.cp__spot.is-live { border-color: var(--gold-40); box-shadow: inset 0 0 0 1px var(--gold-18); }
.cp__spot.is-live .cp__spot__name { color: var(--gold); }
.cp__spot.is-win { border-color: var(--gold); color: var(--gold); }
.cp__spot.is-win .cp__spot__note { color: var(--gold); }
.cp__spot.is-lose { border-color: var(--bone-35); color: var(--red); }
.cp__spot.is-lose .cp__spot__name { text-decoration: line-through; text-decoration-thickness: 2px; }
.cp__spot.is-lose .cp__spot__note { color: var(--red); }
.cp__spot.is-push { color: var(--bone-70); border-color: var(--bone-45); }
.cp__spot[aria-pressed='true']:hover { border-color: var(--gold); }
.cp__layhint { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .74rem; color: var(--bone-65); }
@media (max-width: 560px) {
  .cp__group { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .cp__spot { min-height: 40px; }
  .cp__spot__name { font-size: .7rem; }
}
@media (max-width: 560px) {
  .cp__board { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cp__marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .cp__dice.is-rolling .cp__die { animation: none; } }

/* ---- castle climb ---- */
.cc { width: 100%; max-width: 640px; display: grid; gap: 1.3rem; justify-items: center; }
.cc__head { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.cc__stat { display: grid; gap: .15rem; }
.cc__stat--right { justify-items: end; text-align: right; }
.cc__label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); }
.cc__big { font-family: var(--serif); font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 700; line-height: 1.05; color: var(--bone); text-shadow: 0 3px 0 var(--ink-sink); }
.cc__big small { font-size: .5em; color: var(--bone-45); }
.cc__big--gold { color: var(--gold); }
.cc__note { font-size: .74rem; color: var(--bone-70); }
.cc__doors { width: 100%; display: grid; grid-template-columns: repeat(var(--doors, 3), minmax(0, 150px)); justify-content: center; gap: clamp(.6rem, 2.4vw, 1.2rem); }
.cc__door {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .4rem;
  aspect-ratio: 4 / 5;
  padding: .6rem .4rem;
  font: inherit;
  color: var(--bone-45);
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--drop);
  cursor: pointer;
  transition: transform .12s var(--step), box-shadow .12s, border-color .12s;
}
.cc__door i { width: 56%; line-height: 0; }
.cc__door svg { width: 100%; height: auto; display: block; }
.cc__door span { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cc__door:not(:disabled):hover { border-color: var(--gold); color: var(--bone-70); }
.cc__door:not(:disabled):active { transform: translate(2px, 2px); box-shadow: none; }
.cc__door:disabled { cursor: default; }
.cc__door:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc__door.is-opening { border-color: var(--gold); color: var(--gold); animation: ccKnock .42s var(--step) infinite alternate; }
@keyframes ccKnock { to { transform: scale(.96); } }
.cc__door.is-gold, .cc__door.is-trap { color: var(--ink); background: var(--bone); border-color: var(--bone); animation: ccTurn .28s var(--step); }
.cc__door.is-trap.is-picked { color: var(--bone); background: #B0302E; border-color: #B0302E; }
.cc__door.is-trap.is-picked path { fill: var(--bone); stroke: var(--bone); }
.cc__door.is-gold:not(.is-picked), .cc__door.is-trap:not(.is-picked) { opacity: .4; box-shadow: none; }
@keyframes ccTurn { from { transform: scaleX(0); } }
.cc__doors.is-shake { animation: ccShake .45s var(--step); }
@keyframes ccShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.cc__trail { width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .35rem; list-style: none; margin: 0; padding: 0; }
.cc__trail li { display: grid; justify-items: center; gap: .3rem; padding: .45rem .15rem; background: var(--ink-sink); border: 1px solid var(--line); border-radius: var(--r); }
.cc__trail b { font-size: .7rem; color: var(--bone-65); }
@media (max-width: 560px) { .cc__trail { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cc__trail li.is-done { border-color: var(--gold-40); }
.cc__trail li.is-done b { color: var(--gold); }
.cc__trail li.is-now { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 194, 77, .2); }
.cc__trail li.is-now b { color: var(--bone); }
.cc__trail li.is-lost { border-color: var(--live); }
.cc__trail li.is-locked { opacity: .35; }
.cc__dots { display: flex; gap: 3px; }
.cc__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bone-35); opacity: .5; }
.cc__dots i.is-safe { background: var(--gold); opacity: .45; }
.cc__dots i.is-trap { background: var(--live); opacity: .85; }
.cc__dots i.is-picked { opacity: 1; box-shadow: 0 0 0 2px var(--bone); }
@media (max-width: 560px) {
  .cc__trail { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .2rem; }
  .cc__trail b { font-size: .56rem; }
  .cc__dots i { width: 5px; height: 5px; }
  .cc__door { padding: .4rem .25rem; }
}
@media (prefers-reduced-motion: reduce) { .cc__door.is-opening, .cc__door.is-gold, .cc__door.is-trap, .cc__doors.is-shake { animation: none; } }

/* ---- suspense and wins ---- */
.is-tense { animation: tense .12s linear infinite; }
@keyframes tense { 0%, 100% { translate: 0 0; } 25% { translate: -1.5px 0; } 75% { translate: 1.5px 0; } }
.winpop { position: absolute; left: 50%; top: .9rem; z-index: 20; display: grid; justify-items: center; gap: .1rem; pointer-events: none; translate: -50% 0; animation: winpop 1.6s cubic-bezier(.2,.8,.3,1) forwards; }
.winpop b { font-family: var(--serif); font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; color: var(--gold); -webkit-text-stroke: 1.5px #1C060C; }
.winpop span { font-size: .9rem; font-weight: 700; color: #1C060C; background: var(--gold); padding: .1rem .5rem; border-radius: var(--r-pill); }
@keyframes winpop { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.stage.is-winflash { animation: winflash .9s var(--step); }
@keyframes winflash { 0% { box-shadow: inset 0 0 0 0 var(--gold); } 20% { box-shadow: inset 0 0 0 4px var(--gold); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .is-tense, .stage.is-winflash { animation: none; } .winpop { animation-duration: .8s; } }

.play-dock { display: none; }
@media (max-width: 780px) {
  body.has-dock { padding-bottom: calc(var(--dock-h, 132px) + env(safe-area-inset-bottom, 0px)); }
  body.has-dock .play-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; gap: .5rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink-raise); border-top: 1px solid var(--line); box-shadow: 0 -6px 0 rgba(0, 0, 0, .25);
  }
  .play-dock .stake { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem; padding: 0; margin: 0; }
  .play-dock .stake > .label { margin: 0; }
  .play-dock .stake .chips { display: none; }
  .play-dock .stake__box { margin: 0; }
  .play-dock > button.act { width: 100%; min-height: 48px; margin: 0; }
  .play-dock > button.act[hidden] { display: none; }
  body.has-dock .sb-dock { bottom: calc(var(--dock-h, 132px) + 12px); }
  body.has-dock .toasts { bottom: calc(var(--dock-h, 132px) + 12px); }
}

.stake__fun { margin: .4rem 0 0; font-size: .74rem; color: var(--gold); }
.stake__fun[hidden] { display: none; }
.chip--fun span { font-size: .7rem; }
.play-dock .stake__fun { grid-column: 1 / -1; margin: 0; }

/* ============================================================
   Game page: stage on the left, the bet console as a column on the right
   ============================================================ */
.play-page .play { display: flex; flex-direction: column; gap: 0; background: var(--ink-raise); }
.play-page .play > * { background: transparent; }
.play-page .menu { display: none !important; }

.play-page .board { flex: 1; display: flex; flex-direction: column; }
.play-page .board__head { padding: 1rem clamp(1rem, 3vw, 2rem) .8rem; }
.play-page .table {
  --side: clamp(280px, 24vw, 330px);
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  background: linear-gradient(90deg, transparent calc(100% - var(--side) - 3px), var(--ink-sink) 0 calc(100% - var(--side)), var(--ink) 0);
}
.play-page .stage {
  border-radius: 0;
  min-height: 420px;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 2rem);
}
.play-page .last, .play-page .console__note { display: none; }

.play-page .console {
  position: sticky;
  top: var(--bar);
  align-self: start;
  max-height: calc(100vh - var(--bar));
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1.1rem 1.1rem 1.4rem;
  background: none;
  border: 0;
}
.play-page .console > * { padding: 0; border: 0; margin: 0; min-width: 0; animation: none; }
.play-page .console > .stake { order: 1; }
.play-page .console > .field, .play-page .console > div:not(.stake):not(.readout) { order: 2; }
.play-page .console > button.act { order: 3; width: 100%; min-height: 52px; }
.play-page .console > .banner { order: 4; min-height: 2.9em; font-size: .84rem; }
.play-page .console > .readout { order: 5; padding-top: .85rem; border-top: var(--hair); }
.play-page .console > .auto { order: 6; border: var(--hair); border-radius: var(--r); }
.play-page .console > p:not(.banner) { order: 8; margin: 0; font-size: .74rem; line-height: 1.5; color: var(--bone-45); }
.play-page .console > .stake__fun { order: 1; color: var(--gold); }

.play-page .console .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
.play-page .console .seg__opt { height: 40px; padding: 0 .25rem; font-size: .68rem; letter-spacing: .06em; }
.play-page .console .field .label { font-size: .62rem; }
.play-page .console .field__head { align-items: center; }

.play-page .stake { gap: .45rem; }
.play-page .stake .chips { display: none; }
.play-page .stake__box { min-height: 50px; padding: 4px 4px 4px 12px; background: rgba(0, 0, 0, .3); border-radius: var(--r); }
.play-page .stake__cur { color: var(--bone-45); font-family: var(--mono); }
.play-page .stake__steps { align-self: stretch; }
.play-page .stake__step { min-width: 42px; font-size: .74rem; }
.play-page .stake__val { flex: 1 1 auto; width: 7ch; min-width: 5ch; font-family: var(--mono); font-size: 1.1rem; }

@media (max-width: 780px) {
  .play-page .table { grid-template-columns: minmax(0, 1fr); background: none; }
  .play-page .stage { min-height: 0; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
  .play-page .stage::before { display: none; }
  .play-page .board__head p { display: none; }
  .play-page .board { scroll-margin-top: var(--bar); }
  .play-page .console {
    position: static;
    max-height: none;
    overflow: visible;
    background: var(--ink);
    border-top: 3px solid var(--ink-sink);
  }
}

/* ---- live blackjack: moves on the felt, everyone at once ---- */
.bj { position: relative; }
.bjl__calls {
  display: flex; justify-content: center; gap: .8rem;
  margin-top: 1rem;
}
.bjl__calls[hidden] { display: none; }
.bjl__call {
  min-height: 0; min-width: 104px; padding: .8rem 1rem;
  background: color-mix(in srgb, var(--ink-raise) 55%, transparent);
  backdrop-filter: blur(10px);
}
.bjl__call--double { border-color: var(--gold-40); }
.seat.is-acted { border-color: var(--gold); background: var(--gold-18); }
.seat.is-acted .seat__foot b { color: var(--gold); }
.seat.is-forfeit { opacity: .55; }

/* ---- translucent buttons on the felt, in the Hi-Lo style ---- */
.play-page .stage .hilo__call,
.play-page .stage .btn:not(.btn--solid):not(.act--cash) {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--bone);
  box-shadow: none;
}
.play-page .stage .hilo__call:not(:disabled):hover,
.play-page .stage .btn:not(.btn--solid):not(.act--cash):not(:disabled):hover { background: rgba(255, 255, 255, .13); border-color: var(--gold); }
.play-page .stage .hilo__call:disabled { opacity: .75; }
.hilo__pays:empty, .bj__tot:empty, .bac__tot:empty, .cp__sum:empty { display: none; }
.play-page .stage .hilo__call[aria-pressed='true'] { background: var(--gold-18); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.play-page .console .act--cash:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.play-page .console .act--cash:disabled { background: var(--gold-08); border-color: var(--gold-40); color: var(--gold); opacity: .7; box-shadow: none; }
.play-page .console > .btn:not(.act) { order: 3; width: 100%; }
.play-page .console .btn:not(.btn--solid):not(.act--cash):not(:disabled) { border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.chick { position: relative; }
.chick::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; background: linear-gradient(90deg, transparent, var(--ink-raise)); pointer-events: none; }
.play-page .console > .banner:empty { min-height: 0; }

/* ---- craps: the line bets on the felt ---- */
.cp__lines { display: grid; gap: .55rem; padding-bottom: .9rem; margin-bottom: .2rem; border-bottom: 1px solid var(--line); }
.cp__lines__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.cp__lines__side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.cp__spot--line { min-height: 64px; display: grid; align-content: center; justify-items: center; gap: .15rem; }
.cp__lines__main .cp__spot--line { min-height: 76px; }
.cp__lines__main .cp__spot--line .cp__spot__name { font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; }
.cp__spot--line .cp__spot__note { font-style: normal; font-size: .66rem; color: var(--bone-65); }
.cp__spot--line[aria-pressed='true'] { background: var(--gold-18); border-color: var(--gold); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-40); }
.cp__odds { display: flex; align-items: center; gap: .6rem; }
.cp__odds b { min-width: 3ch; text-align: center; color: var(--gold); font-size: 1.05rem; }
.cp__odds__btn {
  width: 34px; height: 34px; border-radius: 50%; font: 600 1.1rem var(--mono); color: var(--bone);
  background: color-mix(in srgb, var(--ink-raise) 45%, transparent); border: 1px solid var(--line); cursor: pointer;
}
.cp__odds__btn:hover { border-color: var(--gold); }
.cp__odds__hint { font-style: normal; font-size: .72rem; color: var(--bone-65); }
.cp__lines[inert] { opacity: .85; }
@media (max-width: 560px) {
  .cp__lines__side { grid-template-columns: 1fr; }
}
/* craps header: point puck, dice and the running legs on one row */
.play-page .cp__board { grid-template-columns: auto auto minmax(0, 1fr); gap: clamp(.8rem, 3vw, 1.8rem); }
.play-page .cp__board > .cp__layout { grid-column: 1 / -1; }
.play-page .cp__disc { width: clamp(72px, 10vw, 92px); }
.play-page .cp__die { width: clamp(50px, 8vw, 70px); }
.play-page .cp__marks { grid-column: auto; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); align-self: center; }
.play-page .cp__mark { padding: .35rem .45rem; }
@media (max-width: 640px) {
  .play-page .cp__board { grid-template-columns: auto minmax(0, 1fr); }
  .play-page .cp__marks { grid-column: 1 / -1; }
}

/* ---- a game under maintenance ---- */
.play-page .table { position: relative; }
.play-page .stage.is-locked { filter: grayscale(1); opacity: .35; pointer-events: none; }
.play-page .console.is-locked { filter: grayscale(1); opacity: .45; }
.lockveil {
  position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; padding: 2rem;
}
.lockveil[hidden] { display: none; }
.lockveil { padding: clamp(1rem, 4vw, 2rem); background: rgba(48, 10, 19, .78); backdrop-filter: blur(4px); border-radius: var(--r); }
.play-page .table:has(> .lockveil:not([hidden])) { min-height: 34rem; }
body.is-game-locked .play-dock { display: none; }
.lockveil b { font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1.15; color: var(--bone); }
.lockveil span { color: var(--bone-70); max-width: 42ch; }
.lockveil__card {
  display: grid; justify-items: center; gap: .6rem; width: min(34rem, 100%); padding: 1.8rem clamp(1rem, 4vw, 2.2rem) 1.5rem;
  background: var(--ink-raise);
  border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--r); box-shadow: var(--drop);
}
.lockveil__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--gold); background: var(--gold-18); border: 1px solid var(--gold-40); animation: lockveil-turn 2.6s ease-in-out infinite; }
.lockveil__icon svg { width: 1.7rem; height: 1.7rem; }
.lockveil.is-early .lockveil__icon { animation: none; }
.lockveil__tag { font-style: normal; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.lockveil__alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; margin: .6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.lockveil__alt small { grid-column: 1 / -1; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
.lockveil__alt a { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .55rem .7rem; color: var(--bone); text-decoration: none; background: var(--ink-sink); border: 1px solid var(--line); border-radius: var(--r); }
.lockveil__alt a:hover { border-color: var(--gold); }
.lockveil__alt a i { flex: none; width: 1.4rem; height: 1.4rem; color: var(--gold); }
.lockveil__alt a i svg { width: 100%; height: 100%; }
.lockveil__alt a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); font-size: .9rem; }
.lockveil__alt a em { font-style: normal; font-size: .72rem; color: var(--gold); }
@keyframes lockveil-turn { 0%, 100% { rotate: 0deg; } 50% { rotate: -18deg; } }
@media (prefers-reduced-motion: reduce) { .lockveil__icon { animation: none; } }

/* ---- turbo: no waiting ---- */
.play-page .console > .turbo-btn {
  order: 7; height: 40px; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .8rem;
  font: inherit; color: var(--bone-45); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
}
.play-page .console > .turbo-btn span { line-height: 0; }
.play-page .console > .turbo-btn b { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.play-page .console > .turbo-btn[aria-pressed='true'] { color: var(--gold); border-color: var(--gold); }
.play-page .console > .share-btn { order: 8; color: var(--gold); }
.is-replay { pointer-events: none; }
.replay-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; padding: .7rem 1rem;
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r); box-shadow: var(--drop);
}
.replay-bar > span { flex: 1 1 16rem; }
body.turbo .stage *, body.turbo .stage *::before, body.turbo .stage *::after {
  animation-duration: .12s !important;
  animation-delay: 0s !important;
}