/* Mississippi Stud. Classes use the ms- prefix. Felt, chips and cards come from /demos/_tables/ (tb-, pc-). */
.ms-screen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.ms-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ms-table { --rail: 20px; height: 560px; }
.ms-felt { --cw: 78px; display: flex; flex-direction: column; align-items: center; padding: 0 18px 16px; }
.ms-discard { position: absolute; right: 150px; top: 12px; z-index: 2; }
.ms-shoe { position: absolute; right: 16px; top: 8px; z-index: 2; }
.ms-shoe .tb-shoe-body { transform: scale(.9); transform-origin: 50% 0; }
.ms-shoe.refill .tb-shoe-body { animation: msrefill .8s cubic-bezier(.2,.8,.3,1.2); }
@keyframes msrefill { 0% { transform: scale(.9) translateY(-26px); opacity: 0; } 100% { transform: scale(.9); opacity: 1; } }

/* paytable printed on the felt */
.ms-pay { position: absolute; z-index: 2; left: 26px; top: 26px; width: 214px; padding: 12px 14px 12px; border: 2px solid var(--tb-ink-dim); border-radius: 14px; }
.ms-pay h5 { font: 800 12px Inter, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: var(--tb-ink); text-align: center; margin-bottom: 8px; }
.ms-pay-r { display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; margin: 0 -6px; border-radius: 5px; font: 700 10.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-ink); transition: background .3s, color .3s; }
.ms-pay-r b { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: 0; color: var(--tb-chalk); }
.ms-pay-r.push, .ms-pay-r.push b { color: var(--tb-ink-dim); }
.ms-pay-r.now { background: rgba(255,178,30,.14); box-shadow: inset 2px 0 0 var(--you); }
.ms-pay-r.hit { background: var(--you); color: var(--you-ink); animation: mshit .9s ease-out; }
.ms-pay-r.hit b { color: var(--you-ink); }
@keyframes mshit { 0% { transform: scale(1.06); } 100% { transform: none; } }
.ms-pay p { margin-top: 8px; font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; color: var(--tb-ink-dim); text-align: center; line-height: 1.4; }

.ms-center { position: relative; z-index: 3; margin-top: 34px; margin-left: 150px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ms-lbl { display: flex; align-items: center; gap: 10px; font: 800 10.5px Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,245,220,.66); min-height: 24px; }
.ms-board { display: flex; gap: 14px; }
.ms-bslot { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ms-bslot small { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; color: rgba(255,255,255,.4); white-space: nowrap; }
.ms-bslot.on small { color: var(--you); }
.ms-cb { height: calc(var(--cw) * 1.4); display: flex; }
.ms-hole-w { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.ms-hole { display: flex; gap: 10px; }
.ms-hand { padding: 3px 10px; border-radius: 999px; background: rgba(4,12,8,.7); border: 1px solid rgba(255,255,255,.16); font: 700 11px Inter, sans-serif; letter-spacing: .02em; text-transform: none; color: #fff; }
.ms-hand.pay { background: var(--tb-win); border-color: var(--tb-win); color: #06281a; }
.ms-hand.push { background: #e6e9ef; border-color: #e6e9ef; color: #1a1d24; }
.ms-hand[hidden] { display: none; }

.ms-step { position: relative; z-index: 3; margin: 10px 0 0 150px; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.ms-step-idle { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .06em; color: rgba(255,255,255,.45); }
.ms-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(4,12,8,.66); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; color: rgba(255,255,255,.88); animation: msin .35s cubic-bezier(.2,.9,.3,1.2); }
.ms-chip i { font-style: normal; font: 800 9.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--you); color: var(--you-ink); }
@keyframes msin { from { opacity: 0; transform: translateY(5px); } }

.ms-bets { position: relative; z-index: 3; margin: auto 0 0 150px; display: flex; gap: 22px; align-items: flex-start; }
.ms-bw { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ms-bw small { font: 600 9.5px 'IBM Plex Mono', monospace; color: rgba(255,255,255,.4); }
.ms-spot { --spot: 80px; }
.ms-spot.st { border-style: dashed; cursor: default; }
.ms-spot.st.has-bet .tb-spot-l { opacity: 0; }
.ms-spot.st.fold { opacity: .4; }

/* controls */
.ms-ctrl { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--s-panel); border: 1px solid var(--s-line); }
.ms-bal .tb-balance { padding: 0; border: 0; background: none; gap: 9px; }
.ms-bal .tb-balance-v { font-size: 19px; }
.ms-rack .tb-rchip { --chip: 44px; }
.ms-rack .tb-rack { gap: 8px; }
.ms-acts { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.ms-a { min-width: 74px; height: 46px; padding: 0 12px; }
.ms-a small { display: block; font: 600 10px 'IBM Plex Mono', monospace; opacity: .75; }
.ms-deal { min-width: 120px; }
#msHintBtn.on { border-color: var(--you); color: var(--you); }

/* side */
.ms-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ms-h small { font-size: 10.5px; color: var(--s-faint); }
.ms-muted { font-size: 12px; line-height: 1.45; color: var(--s-dim); }
.ms-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.ms-ev div { display: contents; }
.ms-ev span, .ms-ev b { padding: 4px 8px; font-size: 12.5px; border-top: 1px solid var(--s-line); }
.ms-ev span { color: var(--s-dim); }
.ms-ev b { font: 600 12.5px 'IBM Plex Mono', monospace; text-align: right; }
.ms-ev .best span, .ms-ev .best b { background: rgba(127,214,255,.12); color: #9fe0ff; }
.ms-ev .best span { box-shadow: inset 3px 0 0 #7fd6ff; }
.ms-hint-n { margin-top: 8px; font-size: 11px; line-height: 1.4; color: var(--s-faint); }
.ms-hint-say { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.ms-hint-say em { font-style: normal; color: #9fe0ff; }
.ms-sum { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; }
.ms-sum-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.ms-sum-row span { color: var(--s-dim); }
.ms-sum-row b { font: 600 12.5px 'IBM Plex Mono', monospace; }
.ms-recent { padding: 9px 13px; }
.ms-recent .tb-hist-row { padding: 5px 0; }

@media (max-width: 1100px) {
  .ms-screen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ms-table { height: auto; }
  .ms-felt { --cw: 54px; padding: 0 8px 14px; }
  .ms-pay { position: relative; left: auto; top: auto; order: 5; width: 100%; margin-top: 14px; }
  .ms-discard { display: none; }
  .ms-shoe .tb-shoe-body { transform: scale(.6); }
  .ms-shoe .tb-shoe-n { position: absolute; right: 52px; top: 10px; }
  .ms-center, .ms-step, .ms-bets { margin-left: 0; }
  .ms-center { margin-top: 48px; }
  .ms-board { gap: 8px; }
  .ms-bslot small { display: none; }
  .ms-bets { margin-top: 14px; gap: 10px; }
  .ms-spot { --spot: 60px; }
  .ms-chip { font-size: 11px; border-radius: 12px; }
  .ms-ctrl { flex-wrap: wrap; }
  .ms-rack { order: 3; width: 100%; display: flex; justify-content: center; }
  .ms-acts { order: 4; width: 100%; justify-content: center; }
  .ms-a { min-width: 0; flex: 1; }
  .ms-deal { order: 2; margin-left: auto; }
}