/* ============================================================
   Play shell
   ============================================================ */
.play {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 300px;
  gap: 1px;
  background: var(--gold-18);
  border: var(--hair);
  margin-block: clamp(1.5rem, 3vw, 2.5rem) 4rem;
}
.play > * { background: var(--ink); min-width: 0; }

/* ---- 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(--gold-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: 46ch;
}

/* ---- practice / fun toggle ---- */
.fun-bar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fun-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .8rem .4rem .5rem;
  background: none;
  border: 1px solid var(--gold-18);
  color: var(--bone-45);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.fun-toggle:hover { color: var(--bone); border-color: var(--gold-40); }
.fun-toggle i {
  position: relative;
  width: 30px; height: 16px;
  border: 1px solid var(--gold-40);
  background: rgba(0, 0, 0, .3);
  transition: background .25s var(--step);
}
.fun-toggle i::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  background: var(--bone-45);
  transition: transform .25s var(--swing), background .25s var(--step);
}
.fun-toggle[aria-checked='true'] { color: var(--gold); border-color: var(--gold-40); }
.fun-toggle[aria-checked='true'] i { background: rgba(232, 184, 75, .18); }
.fun-toggle[aria-checked='true'] i::after { transform: translateX(14px); background: var(--gold); }

.fun-chip { display: flex; align-items: baseline; gap: .4rem; }
.fun-chip b {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.fun-chip span { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.fun-bar[data-warn='1'] .fun-chip b { color: var(--red); }
.fun-bar[data-warn='1'] .fun-chip span { color: var(--red); }

.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:
    radial-gradient(85% 70% at 50% 40%, var(--felt), var(--felt-deep) 72%),
    var(--felt-deep);
  overflow: hidden;
}
.stage::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(232, 184, 75, .16);
  pointer-events: 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: 1.15rem;
  padding: 1.5rem clamp(1.25rem, 2vw, 1.6rem) 2rem;
}
/* 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: stretch;
  min-width: 0;
  border: 1px solid var(--gold-40);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}
.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(--gold-08); }
.stake__steps { display: flex; }
.stake__step {
  padding: 0 .7rem;
  background: none;
  border: 0;
  border-left: 1px solid var(--gold-18);
  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(--gold-40);
  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(--gold-40);
  border-radius: 50%;
}
.chip:hover { transform: translateY(-2px); background: var(--gold-08); }
.chip[aria-pressed='true'] { background: var(--gold); color: var(--ink); }
.chip[aria-pressed='true']::before { border-color: rgba(20, 20, 20, .35); }

.seg {
  border-radius: var(--r-sm); display: flex; border: 1px solid var(--gold-40); }
.seg__opt {
  flex: 1;
  padding: .62rem .4rem;
  background: none;
  border: 0;
  border-left: 1px solid var(--gold-18);
  color: var(--bone-45);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s, background .25s;
}
.seg__opt:first-child { border-left: 0; }
.seg__opt:hover { color: var(--bone); }
.seg__opt[aria-pressed='true'] { background: var(--gold); color: var(--ink); font-weight: 500; }

.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: .35rem 1rem;
  margin: 0;
  padding: .9rem 0;
  border-block: var(--hair);
  font-size: .8rem;
}
.readout dt { color: var(--bone-45); }
.readout dd { margin: 0; text-align: right; color: var(--bone); font-size: .95rem; }
.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(--gold); background: transparent; }
.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); }

/* ---- 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 ---- */
.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; }

.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(--gold-40);
  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(--gold-40);
  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;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
}
.coin__face--tails { transform: rotateY(180deg); }

/* ============================================================
   Dice
   ============================================================ */
.dice { width: 100%; display: grid; gap: 1.4rem; justify-items: center; }
.dice__track {
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, .38);
  border: 1px solid var(--gold-18);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.dice__track.is-dragging { border-color: var(--gold-40); }
.dice__zone {
  position: absolute;
  inset-block: 0;
  background: linear-gradient(180deg, rgba(232, 184, 75, .4), rgba(232, 184, 75, .18));
  transition: left .18s var(--step), width .18s var(--step);
}
.dice__track.is-dragging .dice__zone { transition: none; }
.dice__marker.is-win { border-color: var(--gold); color: var(--gold); }
.dice__marker.is-lose { border-color: var(--red); color: var(--red); }
.dice__ticks {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: .68rem;
  color: var(--bone-45);
}
.dice__hint { text-align: center; margin: 0; }

/* ============================================================
   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
   ============================================================ */
.mines {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  width: min(84vw, 340px);
}
.mines__tile {
  border-radius: var(--r-sm);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: rgba(242, 239, 230, .05);
  border: 1px solid rgba(232, 184, 75, .22);
  cursor: default;
  transition: background .25s, border-color .25s, transform .25s var(--swing);
}
.mines.is-live .mines__tile:not(:disabled) { cursor: pointer; }
.mines.is-live .mines__tile:not(:disabled):hover { background: rgba(232, 184, 75, .16); transform: translateY(-2px); }
.mines__tile.is-gem { background: rgba(232, 184, 75, .14); border-color: var(--gold); }
.mines__tile.is-mine { background: rgba(176, 48, 46, .2); border-color: rgba(176, 48, 46, .6); }
.mines__tile.is-blast { background: var(--red); border-color: var(--red); }
.gem { width: 14px; height: 14px; background: var(--gold); rotate: 45deg; }
.mine { width: 12px; height: 12px; background: var(--bone); border-radius: 50%; opacity: .75; }

/* ============================================================
   Plinko
   ============================================================ */
.plinko { width: 100%; display: grid; gap: .9rem; justify-items: center; }
.plinko__bins {
  display: grid;
  grid-template-columns: repeat(var(--bins, 13), minmax(0, 1fr));
  gap: 2px;
  width: var(--board, 100%);
  margin-inline: auto;
}
.bin {
  min-width: 0;
  padding: .32rem .1rem;
  text-align: center;
  font-size: clamp(.5rem, 1.3vw, .66rem);
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) calc(var(--heat) * 100%), var(--felt-deep));
  border-bottom: 2px solid transparent;
  transition: transform .25s var(--swing), border-color .25s;
}
.bin.is-hit { border-bottom-color: var(--bone); transform: translateY(3px); }

/* ============================================================
   Crash
   ============================================================ */
.crash { width: 100%; display: grid; gap: .8rem; justify-items: center; }
.crash__val { font-size: clamp(2.6rem, 11vw, 4rem); color: var(--bone); line-height: 1; }
.crash__val.is-win { color: var(--gold); }
.crash__val.is-lose { color: var(--red); }
.crash__plot { width: 100%; height: clamp(150px, 30vw, 220px); }
.crash__plot svg { width: 100%; height: 100%; }
.crash__past { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.crash__past li {
  font-size: .68rem;
  padding: .15rem .5rem;
  border: 1px solid var(--gold-18);
  color: var(--bone-45);
  font-variant-numeric: tabular-nums;
}
.crash__past li.is-win { color: var(--gold); border-color: var(--gold-40); }
.crash__past li.is-lose { color: var(--red); border-color: rgba(176, 48, 46, .4); }

/* ============================================================
   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(--gold-40);
  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(--gold-18);
  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(--gold-40) 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(--gold-40); }
.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__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-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
   ============================================================ */
.hand { display: flex; }
.pc {
  position: relative;
  width: clamp(52px, 13vw, 76px);
  aspect-ratio: 5 / 7;
  flex-shrink: 0;
  margin-left: -14px;
  padding: .35rem .45rem;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid rgba(20, 20, 20, .25);
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.pc:first-child { margin-left: 0; }
.pc--fresh { animation: dealt .38s var(--swing) backwards; }
@keyframes dealt {
  from { opacity: 0; transform: translateY(-26px) rotate(-7deg) scale(.94); }
}
.pc--flip { animation: flipOver .5s 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); }
}
.pc--red { color: var(--red); }
.pc__rank {
  font-family: var(--serif);
  font-size: clamp(.95rem, 3vw, 1.2rem);
  font-weight: 600;
  line-height: 1;
}
.pc__suit { position: absolute; top: 1.45rem; left: .5rem; font-size: .62rem; font-style: normal; }
.pc__pip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  text-decoration: none;
  opacity: .9;
}
.pc--back {
  background:
    repeating-linear-gradient(45deg, rgba(232, 184, 75, .3) 0 3px, transparent 3px 7px),
    var(--felt);
  border-color: var(--gold-40);
}

/* ============================================================
   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__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(--gold-18);
  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: 46vh; }
  .console { padding-bottom: 2.5rem; }
  .bac { grid-template-columns: 1fr; }
  .roul__felt { min-width: 470px; }
  .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(--gold-40);
  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 .seg__opt { flex: 1 0 30%; border-left: 1px solid var(--gold-18); border-top: 1px solid var(--gold-18); }

/* ============================================================
   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(--gold-18);
  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); }
.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;
}
.cube {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: .65rem .7rem .55rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--gold-18);
  border-left: 3px solid var(--tone, var(--gold));
  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: rgba(232, 184, 75, .1); border-color: var(--gold-40); }
.cube__mult { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1; }
.cube__odds { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
.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__stack { display: flex; gap: 3px; min-height: 20px; flex-wrap: wrap; }
.pip {
  width: 20px; height: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold-18);
  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; }
.pip.is-me { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pip--more { font-size: .5rem; color: var(--bone-45); }
@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(--gold-18);
  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); }

.crash__val.is-live { color: var(--bone); }
.crash__head { transition: none; }

@media (max-width: 820px) {
  .live__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .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
   ============================================================ */
.crossing {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  border: 1px solid var(--gold-18);
  background: rgba(0, 0, 0, .3);
}
.crossing__kerb {
  display: grid;
  place-items: center;
  padding: 0 .55rem;
  background: rgba(232, 184, 75, .05);
  border-right: 1px solid var(--gold-18);
}
.crossing__kerb--far { border-right: 0; border-left: 1px solid var(--gold-18); }
.crossing__kerb span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-45);
}

.road__track { position: relative; overflow: hidden; }
.road {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(62px, 9vw, 84px);
  height: clamp(200px, 34vw, 280px);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.road::-webkit-scrollbar { display: none; }

.lane {
  border-radius: var(--r-sm);
  position: relative;
  display: grid;
  align-content: space-between;
  justify-items: center;
  padding: .55rem 0 .7rem;
  background:
    linear-gradient(var(--gold-18) 0 0) no-repeat right / 1px 100%,
    repeating-linear-gradient(180deg, var(--gold-18) 0 14px, transparent 14px 34px) no-repeat center / 1px 100%,
    rgba(242, 239, 230, .03);
  border: 0;
  font: inherit;
  color: inherit;
  cursor: default;
  transition: background-color .3s var(--step);
}
.lane__car {
  width: 22px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--red), #7d2220);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .25);
  opacity: .85;
  animation: traffic 3.4s linear infinite;
  animation-delay: calc(var(--drift, 0s) * -1);
}
.lane__pays {
  font-size: .72rem;
  color: var(--bone-45);
  padding: .1rem .4rem;
  border: 1px solid transparent;
  transition: color .25s, border-color .25s, background .25s;
}
@keyframes traffic {
  0% { transform: translateY(-120px); }
  100% { transform: translateY(240px); }
}

.road.is-live .lane.is-next { background-color: rgba(232, 184, 75, .08); cursor: pointer; }
.road.is-live .lane.is-next:hover { background-color: rgba(232, 184, 75, .16); }
.lane.is-next .lane__pays { color: var(--ink); background: var(--gold); border-color: var(--gold); }
.lane.is-done { background-color: rgba(232, 184, 75, .12); }
.lane.is-done .lane__car { display: none; }
.lane.is-done .lane__pays { color: var(--gold); border-color: var(--gold-40); }
.lane.is-hit { background-color: rgba(176, 48, 46, .32); }
.lane.is-hit .lane__car { animation: none; transform: translateY(86px) rotate(8deg); opacity: 1; }

.road__bird {
  position: absolute;
  left: 50%;
  bottom: .55rem;
  translate: -50% 0;
  z-index: 3;
  display: block;
  width: clamp(30px, 4.5vw, 40px);
  color: var(--gold);
  pointer-events: none;
  transition: rotate .3s var(--step);
}
.road__bird svg { width: 100%; height: auto; display: block; }
.road__bird.is-hop { animation: hop .32s var(--swing); }
@keyframes hop { 50% { transform: translateY(-30px) scale(1.06); } }
.road__bird.is-down { rotate: 82deg; color: var(--red); }
.road__track.is-struck { animation: jolt .42s; }
@keyframes jolt {
  20% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  80% { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .lane__car { animation: none; transform: translateY(40px); }
  .road { scroll-behavior: auto; }
}

/* ============================================================
   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(--gold-18);
  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 { 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)); }


/* ============================================================
   Dice — the target rail
   ============================================================ */
.dice__rail { width: 100%; padding-top: 2.6rem; padding-bottom: 2.2rem; position: relative; }
.dice__roll { font-size: clamp(3rem, 12vw, 4.6rem); color: var(--bone); line-height: 1; }

.dice__badge {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 38px;
  padding: .18rem .4rem;
  text-align: center;
  font-size: .84rem;
  color: var(--ink);
  background: var(--gold);
  pointer-events: none;
  transition: left .18s var(--step);
}
.dice__badge::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  translate: -50% 0;
  border: 5px solid transparent;
  border-top-color: var(--gold);
}
.dice__track.is-dragging .dice__badge { transition: none; }

.dice__handle {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: 16px; height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--gold);
  border: 0;
  border-radius: 2px;
  cursor: grab;
  transition: left .18s var(--step), box-shadow .2s, transform .2s var(--swing);
}
.dice__track.is-dragging .dice__handle { transition: none; cursor: grabbing; }
.dice__handle:hover, .dice__handle:focus-visible { box-shadow: 0 0 0 4px rgba(232, 184, 75, .22); }
.dice__grip { width: 5px; height: 14px; border-left: 1px solid rgba(20,20,20,.45); border-right: 1px solid rgba(20,20,20,.45); }

.dice__marker {
  position: absolute;
  top: calc(100% + 10px);
  translate: -50% 0;
  font-size: .78rem;
  padding: .12rem .45rem;
  background: var(--ink);
  border: 1px solid var(--gold-40);
  white-space: nowrap;
  pointer-events: none;
}
.dice__marker.is-win { border-color: var(--gold); color: var(--gold); }
.dice__marker.is-lose { border-color: var(--red); color: var(--red); }
.dice__ticks { margin-top: 2.2rem; }

/* ---- 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: clamp(94px, 17vw, 124px);
  display: grid;
  gap: .35rem;
  padding: .5rem;
  border: 1px solid var(--gold-18);
  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-45);
  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(--gold-18);
  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: 30px;
  margin-left: -9px;
  padding: .18rem .22rem;
  border-radius: 3px;
}
.seat .pc__rank { font-size: .6rem; }
.seat .pc__suit { display: none; }
.seat .pc__pip { font-size: .8rem; }

.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; }
}