/* PC Arcade — table styling.
   The demo is presented as a mahogany CABINET set into the page: brass-framed
   panel, house header, live strip, felt stage with a wooden rail, paytable
   side panels and a chip rack. Matches the riviera theme tokens (marble stone /
   felt green / brass) without depending on the theme's SCSS. */

:root {
  --pc-a-felt: #0a4f2c;
  --pc-a-felt-dark: #06381f;
  --pc-a-brass: #b5935a;
  --pc-a-brass-lt: #e0bd82;
  --pc-a-mahog: #2e1c0e;
  --pc-a-mahog-lt: #4a2d15;
  --pc-a-cream: #f8f2e2;
  --pc-a-ink: #16120c;
  --pc-a-ox: #7a1f2b;
}

/* ============================================================ CABINET */
.pc-cabinet {
  margin: 2.2rem 0 2.6rem;
  border: 1px solid var(--pc-a-brass);
  box-shadow: 0 1.4rem 3rem rgba(20, 14, 8, .3), inset 0 0 0 1px rgba(224, 189, 130, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .3)),
    repeating-linear-gradient(90deg, #33200f 0 7rem, #2b1a0c 7rem 14rem),
    var(--pc-a-mahog);
  color: var(--pc-a-cream);
  font-family: 'Urbanist', system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

.pc-cabinet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem 2rem;
  padding: 1.25rem 1.5rem 1.05rem;
  border-bottom: 1px solid rgba(181, 147, 90, .4);
}
.pc-cabinet__kicker {
  display: block;
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pc-a-brass-lt);
  margin-bottom: .3rem;
}
.pc-cabinet__title {
  margin: 0;
  font-family: 'Josefin Sans', 'Century Gothic', sans-serif;
  font-weight: 300;
  letter-spacing: .06em;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.1;
  color: #fff;
  text-transform: none;
}
.pc-cabinet__lede {
  flex: 1 1 20rem;
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(248, 242, 226, .74);
  max-width: 34rem;
}

.pc-cabinet__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.4rem;
  padding: .55rem 1.5rem;
  background: rgba(0, 0, 0, .26);
  border-bottom: 1px solid rgba(181, 147, 90, .3);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .62);
}
.pc-cabinet__live { color: var(--pc-a-brass-lt); }
.pc-cabinet__live::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #46c97d;
  margin-right: .45rem;
  vertical-align: baseline;
  box-shadow: 0 0 .4rem #46c97d;
}
.pc-cabinet__hint { margin-left: auto; color: var(--pc-a-brass); }

.pc-cabinet__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .8rem;
  padding: .7rem 1.5rem;
  border-bottom: 1px solid rgba(181, 147, 90, .22);
}
.pc-cabinet__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.9rem;
  height: 1.65rem;
  padding: 0 .5rem;
  background: var(--pc-a-ox);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  border-radius: 1rem;
}
.pc-cabinet__game { font-size: .92rem; font-weight: 600; letter-spacing: .03em; }
.pc-cabinet__sub {
  font-size: .7rem;
  color: rgba(248, 242, 226, .5);
  letter-spacing: .04em;
}
.pc-cabinet__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pc-chipcount {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  border: 1px solid rgba(181, 147, 90, .5);
  border-radius: 1rem;
  padding: .25rem .85rem;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .6);
}
.pc-chipcount b {
  font-family: 'Josefin Sans', sans-serif;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--pc-a-brass-lt);
}

/* ------------------------------------------------ body: stage + panels */
.pc-cabinet__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}
@media (max-width: 860px) {
  .pc-cabinet__body { grid-template-columns: 1fr; }
}

/* the felt table itself — wooden rail + lit green cloth */
.pc-stage {
  position: relative;
  min-height: 19rem;
  padding: 1.6rem 1.4rem 1.5rem;
  border-radius: 10rem 10rem .5rem .5rem / 5rem 5rem .5rem .5rem;
  border: .7rem solid transparent;
  background:
    radial-gradient(ellipse 74% 66% at 50% 38%, #146b3e 0%, #0a4f2c 48%, #06371e 100%) padding-box,
    linear-gradient(160deg, #6d4523, #3d2411 42%, #7a4f28 78%, #43290f) border-box;
  box-shadow:
    inset 0 0 3.5rem rgba(0, 0, 0, .45),
    inset 0 .1rem 0 rgba(255, 255, 255, .05),
    0 .5rem 1.4rem rgba(0, 0, 0, .35);
}
.pc-stage::after {
  content: "";
  position: absolute;
  inset: .3rem;
  border: 1px solid rgba(224, 189, 130, .22);
  border-radius: 9rem 9rem .3rem .3rem / 4.6rem 4.6rem .3rem .3rem;
  pointer-events: none;
}

/* the game's own mount now lives inside the stage — strip its old box */
.pc-stage .pc-table {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: var(--pc-a-cream);
  font-family: inherit;
}

/* dashed betting spots + idle placeholders */
.pc-spots {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin: .3rem 0 1rem;
}
.pc-spot {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  border: 1px dashed rgba(224, 189, 130, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .55);
  line-height: 1.2;
}
.pc-spot--live {
  border-style: solid;
  border-color: var(--pc-a-brass-lt);
  color: var(--pc-a-brass-lt);
  box-shadow: 0 0 1.2rem rgba(224, 189, 130, .25), inset 0 0 1rem rgba(224, 189, 130, .12);
}
.pc-stage__legend {
  text-align: center;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .38);
  margin: 0 0 .6rem;
}
.pc-stage__prompt {
  text-align: center;
  font-size: .95rem;
  color: rgba(255, 255, 255, .8);
  margin: 1.4rem 0;
}

/* side panels: paytables + how-it-plays */
.pc-panels { display: flex; flex-direction: column; gap: .8rem; }
.pc-panel {
  border: 1px solid rgba(181, 147, 90, .45);
  background: rgba(0, 0, 0, .22);
  padding: .75rem .85rem .8rem;
}
.pc-panel__title {
  margin: 0 0 .5rem;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pc-a-brass-lt);
}
.pc-paytable { width: 100%; border-collapse: collapse; font-size: .76rem; }
.pc-paytable td { padding: .22rem 0; border-bottom: 1px solid rgba(181, 147, 90, .16); }
.pc-paytable tr:last-child td { border-bottom: 0; }
.pc-paytable td:last-child { text-align: right; color: var(--pc-a-brass-lt); font-weight: 600; white-space: nowrap; }
.pc-panel__note {
  margin: .5rem 0 0;
  font-size: .68rem;
  line-height: 1.45;
  color: rgba(248, 242, 226, .55);
}
.pc-panel__note b { color: rgba(248, 242, 226, .8); font-weight: 600; }

/* chip rack + actions */
.pc-rack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  margin: 0 1rem 1rem;
  padding: .7rem .9rem;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(181, 147, 90, .32);
}
.pc-rack__label {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .45);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.pc-chip {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .65);
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pc-chip:hover { transform: translateY(-.15rem); }
.pc-chip--active { box-shadow: 0 0 0 2px var(--pc-a-brass-lt), 0 .3rem .6rem rgba(0, 0, 0, .45); }
.pc-chip--1 { background: #6b4fa8; }
.pc-chip--5 { background: #b13a3a; }
.pc-chip--25 { background: #1f7a4d; }
.pc-chip--100 { background: #1d1a16; }
.pc-rack__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }

.pc-cabinet__note {
  margin: 0;
  padding: .55rem 1.5rem .75rem;
  text-align: center;
  font-size: .66rem;
  color: rgba(248, 242, 226, .42);
  border-top: 1px solid rgba(181, 147, 90, .18);
}
.pc-cabinet__foot {
  margin: 0;
  padding: .5rem 1rem;
  text-align: center;
  background: rgba(0, 0, 0, .35);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .5);
}

/* ============================================================ GAME PARTS */
.pc-hand { margin-bottom: 1rem; }

.pc-hand__label {
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 242, 226, .6);
  margin-bottom: .45rem;
  text-align: center;
}

.pc-hand__cards {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 3.9rem;
}

.pc-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 3.8rem;
  background: linear-gradient(170deg, #fff, #efe9dc);
  border-radius: 5px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .45);
}

.pc-card--red { color: #a51f26; }
.pc-card--black { color: #201d1a; }

.pc-card--back {
  background:
    repeating-linear-gradient(135deg, #8a2230, #8a2230 4px, #6d1a26 4px, #6d1a26 8px);
  border: 1px solid rgba(224, 189, 130, .55);
  box-shadow: inset 0 0 0 3px rgba(248, 242, 226, .85), 0 .2rem .5rem rgba(0, 0, 0, .45);
}

/* empty seat outline shown before the deal */
.pc-card--slot {
  background: none;
  border: 1px dashed rgba(224, 189, 130, .4);
  box-shadow: none;
}

.pc-hands { display: grid; gap: .9rem; margin: 1rem 0; }

.pc-hand--active {
  outline: 1px solid var(--pc-a-brass-lt);
  outline-offset: 6px;
  border-radius: 4px;
}

.pc-badge {
  display: inline-block;
  margin-top: .4rem;
  padding: .25rem .7rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
}

.pc-badge--win { background: var(--pc-a-brass); color: #201d1a; }
.pc-badge--lose { background: rgba(0, 0, 0, .4); color: #f8f2e2; }
.pc-badge--push { background: rgba(248, 242, 226, .22); color: #f8f2e2; }

.pc-feedback {
  min-height: 1.4rem;
  font-size: .9rem;
  margin: .6rem 0;
  text-align: center;
}

.pc-feedback--good { color: #a9e3bd; }
.pc-feedback--bad { color: #f0c9c2; }

.pc-controls {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: .9rem 0 .2rem;
}

.pc-btn {
  font-family: inherit;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--pc-a-brass);
  color: #f8f2e2;
  padding: .6rem 1.15rem;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}

.pc-btn:hover { background: rgba(181, 147, 90, .3); }

.pc-btn--primary {
  background: var(--pc-a-brass);
  color: #201d1a;
  font-weight: 700;
  border-color: var(--pc-a-brass-lt);
}

.pc-btn--primary:hover { background: var(--pc-a-brass-lt); }

.pc-stats {
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(248, 242, 226, .58);
  border-top: 1px solid rgba(181, 147, 90, .3);
  padding-top: .65rem;
  margin-top: .8rem;
  text-align: center;
}

/* leaderboard widget (shared across games) — sits below the cabinet */
.pc-leaderboard {
  margin: 0 0 2rem;
  padding: 1.1rem 1.3rem;
  background: var(--pc-a-cream);
  border: 1px solid rgba(181, 147, 90, .5);
  color: #2d2a26;
}

.pc-leaderboard h4 {
  margin: 0 0 .6rem;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pc-leaderboard ol { margin: 0; padding-left: 1.4rem; }
.pc-leaderboard li { font-size: .88rem; padding: .15rem 0; }

/* strategy-chart table (shared with the [pc_blackjack_chart] shortcode) */
.pc-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.6rem;
}
.pc-table-scroll table.pc-strategy-table {
  border-collapse: collapse;
  width: auto;
  min-width: 620px;
  margin: 0;
  font-size: .85rem;
}
.pc-strategy-table th, .pc-strategy-table td {
  border: 1px solid rgba(181, 147, 90, .5);
  padding: .35rem .5rem;
  text-align: center;
}
.pc-strategy-table thead th { background: rgba(181, 147, 90, .18); }
.pc-strategy-table th[scope="row"] { background: rgba(181, 147, 90, .1); font-weight: 600; }
.pc-strategy-legend { font-size: .82rem; color: rgba(45, 42, 38, .75); }

/* roulette — real wheel + full betting felt */
.pc-wheel { display: flex; justify-content: center; margin-bottom: .5rem; }
.pc-wheel__svg { width: min(300px, 74vw); height: auto; display: block; }
.pc-wheel__rotor { transform-origin: 150px 150px; transition: transform 3s cubic-bezier(.17, .67, .21, 1); }
.pc-wheel--spinning .pc-wheel__ball { animation: pc-ball 1s linear infinite; transform-origin: 150px 150px; }
@keyframes pc-ball { to { transform: rotate(-360deg); } }

.pc-wheel__call {
  text-align: center; margin-bottom: .9rem;
  font-family: 'Josefin Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  font-size: .82rem; color: rgba(248, 242, 226, .72);
}
.pc-wheel__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; border-radius: 50%; margin-right: .35rem;
  font-size: 1.05rem; color: #f8f2e2; border: 1px solid var(--pc-a-brass);
}
.pc-wheel__num--red { background: #8a1f1f; }
.pc-wheel__num--black { background: #161412; }
.pc-wheel__num--green { background: #0a5c2e; }

.pc-felt {
  display: grid; gap: 2px;
  grid-template-columns: 2.75rem 1fr 2.75rem; /* zero + 2:1 columns >=44px tap width */
  grid-template-areas: "zero grid cols" ". dozens ." ". outside .";
  margin: 0 auto 1rem; max-width: 46rem;
}
.pc-felt__zero { grid-area: zero; display: grid; }
.pc-felt__grid { grid-area: grid; display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.pc-felt__cols { grid-area: cols; display: grid; grid-template-rows: repeat(3, 1fr); gap: 2px; }
.pc-felt__dozens { grid-area: dozens; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 2px; }
.pc-felt__outside { grid-area: outside; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: 2px; }

.pc-felt__num, .pc-felt__out {
  font-family: 'Josefin Sans', sans-serif; font-size: .78rem; line-height: 1;
  color: #f8f2e2; border: 1px solid rgba(181, 147, 90, .55);
  padding: .45rem .1rem; cursor: pointer; text-align: center;
  transition: box-shadow .12s ease, border-color .12s ease;
}
.pc-felt__num { min-height: 2.1rem; }
.pc-felt__num--red { background: #8a1f1f; }
.pc-felt__num--black { background: #161412; }
.pc-felt__num--green { background: #0a5c2e; }
.pc-felt__zero .pc-felt__num { height: 100%; }
.pc-felt__out { background: rgba(7, 69, 38, .85); min-height: 1.9rem; }
.pc-felt__out--red { background: #8a1f1f; }
.pc-felt__out--black { background: #161412; }
.pc-felt__num:hover:not(:disabled), .pc-felt__out:hover:not(:disabled) { border-color: var(--pc-a-brass); }
.pc-felt__num.is-on, .pc-felt__out.is-on {
  border-color: #e0bd82;
  box-shadow: inset 0 0 0 2px #e0bd82, 0 0 .5rem rgba(224, 189, 130, .55);
}
.pc-felt__num:focus-visible, .pc-felt__out:focus-visible { outline: 2px solid #e0bd82; outline-offset: 1px; }
.pc-felt__num:disabled, .pc-felt__out:disabled { cursor: default; opacity: .75; }

.pc-felt__slip {
  text-align: center; font-size: .82rem; color: rgba(248, 242, 226, .72);
  margin-bottom: .9rem; max-width: 46rem; margin-inline: auto;
}

.pc-felt-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-felt-scroll:focus-visible { outline: 2px solid #e0bd82; outline-offset: 2px; }
@media (max-width: 700px) {
  .pc-felt__num, .pc-felt__out { padding-top: .6rem; padding-bottom: .6rem; } /* >=42px rows */

  /* the 12-column felt cannot shrink further and stay tappable, so the rail scrolls */
  .pc-felt { grid-template-columns: 2.75rem 32rem 2.75rem; width: 37.5rem; margin-inline: 0; } /* side columns >=44px */
  .pc-felt__slip { text-align: left; }
  /* dozens and even-money boxes are aimed at with a thumb */
  .pc-felt__dozens .pc-felt__out, .pc-felt__outside .pc-felt__out { min-height: 2.4rem; }
  .pc-felt__cols .pc-felt__out { min-height: 2.6rem; } /* 2:1 boxes >=41px */
  .pc-felt__num { min-height: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-wheel__rotor { transition: none; }
  .pc-wheel--spinning .pc-wheel__ball { animation: none; }
}

/* slots — a cabinet, not a felt table */
.pc-machine-wrap { display: flex; flex-direction: column; align-items: center; }
.pc-machine {
  width: min(23rem, 100%);
  margin: .4rem auto 1rem;
  padding: .6rem .7rem .5rem;
  border-radius: 14px 14px 8px 8px;
  background:
    linear-gradient(180deg, #7a5a2c 0%, #5b3a1e 12%, #4a2f18 100%);
  border: 2px solid var(--pc-a-brass);
  box-shadow: 0 1.2rem 2.2rem rgba(0,0,0,.5), inset 0 1px 0 rgba(224,189,130,.5);
}
.pc-machine__marquee {
  text-align: center; padding: .5rem .4rem .6rem;
  border-radius: 8px 8px 3px 3px;
  background: radial-gradient(120% 140% at 50% 0%, #8a1f1f 0%, #5d1414 70%);
  border: 1px solid rgba(224,189,130,.6);
  box-shadow: inset 0 0 1.4rem rgba(0,0,0,.45);
  margin-bottom: .55rem;
}
.pc-machine__marquee b {
  display: block; font-family: 'Josefin Sans', sans-serif; font-size: 1.05rem;
  letter-spacing: .16em; text-transform: uppercase; color: #f8f2e2;
  text-shadow: 0 0 .7rem rgba(224,189,130,.75);
}
.pc-machine__marquee small {
  display: block; margin-top: .18rem; font-size: .66rem; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(248,242,226,.7);
}

.pc-machine__glass {
  position: relative; padding: .55rem;
  border-radius: 6px;
  background: linear-gradient(180deg, #191512, #241d17);
  border: 2px solid #2f2519;
  box-shadow: inset 0 .35rem .9rem rgba(0,0,0,.75);
}
.pc-slots__reels { display: flex; gap: .45rem; justify-content: center; margin: 0; }
.pc-slots__reel {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 8.2rem; overflow: hidden;
  background: linear-gradient(180deg, #cfc6b0 0%, #fffdf7 46%, #fffdf7 54%, #cfc6b0 100%);
  border: 2px solid var(--pc-a-brass); border-radius: 4px;
  box-shadow: inset 0 .5rem .7rem rgba(0,0,0,.28), inset 0 -.5rem .7rem rgba(0,0,0,.28);
}
.pc-slots__face { display: block; }
.pc-slots__ghost { display: block; opacity: .22; height: 1.5rem; overflow: hidden; }
.pc-slots__ghost .pc-sym { width: 2rem; height: 2rem; }
.pc-sym { width: 3.1rem; height: 3.1rem; display: block; }
.pc-slots__reel--spinning { animation: pc-reel-blur .12s linear infinite; }
@keyframes pc-reel-blur { 50% { opacity: .55; transform: translateY(2px); } }

.pc-machine__payline {
  position: absolute; left: .8rem; right: .8rem; top: 50%;
  height: 2px; background: linear-gradient(90deg, transparent, #e0bd82 12%, #e0bd82 88%, transparent);
  opacity: .5; transform: translateY(-1px);
}
.pc-machine__payline.is-hit { opacity: 1; box-shadow: 0 0 .7rem #e0bd82; }

.pc-machine__meters {
  display: flex; gap: .4rem; margin: .55rem 0 .5rem;
}
.pc-machine__meters span {
  flex: 1 1 0; text-align: center; padding: .3rem .2rem;
  background: #141110; border: 1px solid rgba(224,189,130,.35); border-radius: 3px;
}
.pc-machine__meters small {
  display: block; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248,242,226,.6);
}
.pc-machine__meters b {
  display: block; font-family: 'Josefin Sans', sans-serif; font-size: 1rem; color: #e0bd82;
}

.pc-machine__deck { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 .1rem .1rem; }
.pc-machine__spin {
  flex: 1 1 auto; min-height: 2.6rem; cursor: pointer;
  font-family: 'Josefin Sans', sans-serif; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: #2d2a26;
  background: linear-gradient(180deg, #e0bd82, #b5935a);
  border: 1px solid #7a5a2c; border-radius: 4px;
  box-shadow: 0 .25rem 0 #6b4f23, inset 0 1px 0 rgba(255,255,255,.45);
}
.pc-machine__spin:active:not(:disabled) { transform: translateY(.2rem); box-shadow: 0 .05rem 0 #6b4f23; }
.pc-machine__spin:disabled { opacity: .62; cursor: default; }
.pc-machine__spin:focus-visible { outline: 2px solid #f8f2e2; outline-offset: 2px; }
.pc-machine__lever {
  position: relative; width: 2.75rem; height: 3.4rem; /* >=44px tap width */
  background: none; border: 0; cursor: pointer; padding: 0;
}
.pc-machine__lever-arm {
  position: absolute; left: 50%; bottom: .2rem; width: .34rem; height: 2.5rem;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(90deg, #7a5a2c, #e0bd82 45%, #7a5a2c);
  transition: height .18s ease;
}
.pc-machine__lever-knob {
  position: absolute; left: 50%; top: .1rem; width: 1.15rem; height: 1.15rem;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d24a4a, #7d1616 70%);
  box-shadow: 0 .18rem .35rem rgba(0,0,0,.55);
  transition: top .18s ease;
}
.pc-machine__lever:hover:not(:disabled) .pc-machine__lever-knob,
.pc-machine__lever:focus-visible .pc-machine__lever-knob { top: .5rem; }
.pc-machine__lever:hover:not(:disabled) .pc-machine__lever-arm,
.pc-machine__lever:focus-visible .pc-machine__lever-arm { height: 2.1rem; }
.pc-machine.is-spinning .pc-machine__lever-knob { top: 1.5rem; }
.pc-machine.is-spinning .pc-machine__lever-arm { height: 1.1rem; }
.pc-machine__lever:disabled { cursor: default; }
.pc-machine__lever:focus-visible { outline: 2px solid #e0bd82; outline-offset: 3px; border-radius: 4px; }

.pc-slots__paytable {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; justify-content: center;
  margin: 0 auto 1rem; font-size: .8rem; color: rgba(248, 242, 226, .8);
}
.pc-slots__pay { display: inline-flex; align-items: center; gap: .25rem; }
.pc-slots__pay i { display: inline-block; width: 1.5rem; height: 1.5rem; }
.pc-slots__pay i .pc-sym { width: 1.5rem; height: 1.5rem; }
.pc-slots__pay b { color: var(--pc-a-brass); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pc-slots__reel--spinning { animation: none; }
  .pc-machine__lever-arm, .pc-machine__lever-knob { transition: none; }
}

/* video poker */
.pc-vp__cards { display: flex; gap: .6rem; margin-bottom: .8rem; justify-content: center; }
.pc-vp__card-wrap { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.pc-vp__hold {
  font-family: inherit;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border: 1px solid var(--pc-a-brass);
  background: rgba(0, 0, 0, .25);
  color: #f8f2e2;
  cursor: pointer;
}
.pc-vp__hold--active { background: var(--pc-a-brass); color: #201d1a; font-weight: 700; }

/* baccarat */
.pc-bacc__sides {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.pc-bacc__side { text-align: center; }
.pc-bacc__total {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pc-a-brass-lt);
  margin-top: .3rem;
}
.pc-bacc__road {
  display: flex;
  gap: .28rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .3rem;
}
.pc-bead {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  font-size: .58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.pc-bead--b { background: #a51f26; }
.pc-bead--p { background: #17539e; }
.pc-bead--t { background: #127a45; }

@media (max-width: 600px) {
  .pc-card { width: 2.3rem; height: 3.25rem; font-size: .92rem; }
  .pc-cabinet__head, .pc-cabinet__strip, .pc-cabinet__bar { padding-left: 1rem; padding-right: 1rem; }
  .pc-cabinet__body { padding: .7rem; }
  .pc-stage { padding: 1.2rem .8rem; min-height: 16rem; }
  .pc-rack { margin: 0 .7rem .7rem; }
  .pc-rack__label { display: none; }
  .pc-strategy-table { font-size: .72rem; }
  .pc-cabinet__hint { margin-left: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE: nothing in a demo may exceed the screen
   ─────────────────────────────────────────────────────────────────────────
   .pc-felt is deliberately 36rem at narrow widths so the betting layout stays
   usable, and .pc-felt-scroll exists to scroll it. But `max-width: 100%` on the
   rail resolved against .pc-table, which had no width of its own and simply grew
   to fit its content — 576px on a 390px screen. The whole demo then hung off the
   viewport and was CLIPPED by .hall--marble's overflow:hidden, so the right-hand
   columns of the felt were unreachable rather than scrollable. The page reported
   zero horizontal overflow the entire time, because the clip hid the evidence.
   Pin every wrapper to the container width and the existing rail does its job. */
@media (max-width: 700px) {
  .pc-stage,
  .pc-table,
  .pc-panel,
  .pc-felt-scroll { max-width: 100%; }
  /* The real blowout: .pc-stage is a GRID ITEM inside .pc-cabinet__body, and a
     grid item's default `min-width: auto` resolves to its min-content width —
     624px here, because of the 36rem felt. min-content beats max-width, so
     `max-width: 100%` was being ignored outright. min-width:0 is what actually
     lets a grid item shrink; the same applies to the track itself. */
  .pc-stage,
  .pc-table,
  .pc-panel { min-width: 0; }
  .pc-cabinet__body { grid-template-columns: minmax(0, 1fr); }
  .pc-cabinet__body > * { min-width: 0; }
  .pc-felt-scroll { width: 100%; }

  /* the paytable came out 594px wide: fixed columns plus two nowrap cells */
  .pc-paytable { table-layout: fixed; width: 100%; font-size: .72rem; }
  .pc-paytable td { overflow-wrap: anywhere; }
  .pc-paytable td:last-child { white-space: normal; }

  /* the strategy chart keeps its 620px min-width — it is genuinely a grid and
     .pc-table-scroll already scrolls it — but the rail must not be wider than
     the screen either */
  .pc-table-scroll { max-width: 100%; }
}