/* Game artwork stays independent of the practice-wallet and interaction UI. */
.live-preview-page .lp-game {
  position: absolute; inset: 0; overflow: hidden; color: #f0ece3;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 50% 36%,#245c4f 0%,#123e34 43%,#09251f 77%,#071b18);
}
.live-preview-page .lp-game svg { fill: none; stroke: none; stroke-width: 0; }
.live-preview-page .lp-playing-card:not(.is-face-down) svg { fill: currentColor; }
.live-preview-page .lp-game::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h120v120H0z'/%3E%3C/svg%3E");
}
.live-preview-page .lp-game::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px #0006; }
.live-preview-page .lp-table-edge {
  position: absolute; inset: -48% -12% 3%; border-radius: 0 0 48% 48%; border: 18px solid #161e1d;
  box-shadow: 0 2px 0 #ae94785c,0 6px 0 #060d0b,inset 0 -1px 0 #d9c1946b,inset 0 -5px 0 #172d25,inset 0 -7px 0 #b79d643b,inset 0 -22px 50px #0004,0 16px 50px #0007;
  pointer-events: none;
}
.live-preview-page .lp-game-field {
  position: absolute; inset: 22px 20px 80px; display: grid; place-items: center;
  container: game-scene / size;
  transition: bottom 360ms cubic-bezier(.22,1,.36,1);
}
.live-preview-page .has-live-moment .lp-game-field {
  bottom: calc(var(--lm-card-height,180px) + var(--lp-controls-gap,0px) + 60px);
}

/* A scene scales inside the available picture, never behind the betting form. */
.live-preview-page .lp-blackjack-table { position: relative; width: min(780px,100cqw); height: min(470px,100cqh); container: blackjack-table / size; }
.live-preview-page .lp-table-print { position: absolute; left: 3%; top: 31%; display: grid; gap: 8px; color: #d8cbb29c; text-align: center; transform: rotate(-8deg); }
.live-preview-page .lp-table-print span { font-size: 8px; font-weight: 700; letter-spacing: .24em; }
.live-preview-page .lp-table-print b { font: 800 clamp(14px,2.6cqw,25px)/1.1 'Plus Jakarta Sans',sans-serif; letter-spacing: -.05em; }
.live-preview-page .lp-table-print small { font-size: 8px; color: #c8d7c284; }
.live-preview-page .lp-game-hand { position: absolute; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
.live-preview-page .lp-dealer { top: 3%; }
.live-preview-page .lp-player { bottom: 9%; }
.live-preview-page .lp-seat-label { display: flex; align-items: center; gap: 8px; font-size: 8px; font-weight: 700; letter-spacing: .14em; color: #bfd0c5; }
.live-preview-page .lp-seat-label b { display: grid; place-items: center; min-width: 28px; min-height: 22px; padding: 3px 7px; border: 1px solid #ffffff18; border-radius: 7px; background: #092a21ab; color: #fff4d5; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.live-preview-page .lp-player .lp-seat-label b { background: #dfc791; color: #1e2e22; border-color: #e5d5b1; }
.live-preview-page .lp-game-cards { display: flex; justify-content: center; gap: 10px; }
.live-preview-page .lp-playing-card {
  display: block; position: relative; width: clamp(48px,min(18cqw,23cqh),88px); aspect-ratio: 5 / 7;
  border-radius: 7px; background: linear-gradient(125deg,#fffdf5,#eee9df); border: 1px solid #fff9e7;
  color: #1e2b36; box-shadow: 0 2px 0 #b7b6a8,0 5px 3px #0002,0 10px 17px #0005;
  animation: lp-card-deal 380ms cubic-bezier(.22,1,.36,1) both;
}
.live-preview-page .lp-playing-card svg { display: block; width: 100%; height: 100%; }
.live-preview-page .lp-playing-card.is-red { color: #ba334c; }
.live-preview-page .lp-playing-card.is-face-down { background: repeating-linear-gradient(45deg,#193e39 0 3px,#214b44 3px 4px); box-shadow: inset 0 0 0 3px #e3d8c1,0 2px 0 #b7b6a8,0 10px 17px #0005; }
.live-preview-page .lp-game-cards .lp-playing-card:nth-child(2) { rotate: 3deg; translate: 0 2px; }
.live-preview-page .lp-game-cards .lp-playing-card:nth-child(3) { rotate: 6deg; translate: 0 5px; }
.live-preview-page .lp-table-mark { position: absolute; top: 47%; left: 50%; transform: translate(-50%,-50%); display: grid; gap: 7px; width: 85%; text-align: center; color: #dfcfa980; }
.live-preview-page .lp-table-mark span { font-size: 9px; letter-spacing: .18em; }
.live-preview-page .lp-table-mark i { font-size: 7px; letter-spacing: .12em; font-style: normal; opacity: .75; }
.live-preview-page .lp-game-status { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; font-size: 10px; color: #c5d2c9; white-space: nowrap; }
.live-preview-page .lp-game-status i { width: 5px; height: 5px; border-radius: 50%; background: #b6c4b8; }
.live-preview-page .is-winner .lp-game-status { color: #c6eabf; }
.live-preview-page .is-winner .lp-game-status i { background: #9bdfa2; }
.live-preview-page .lp-card-shoe { position: absolute; right: 12%; top: 23%; width: 55px; height: 80px; transform: rotate(20deg); }
.live-preview-page .lp-card-shoe i { position: absolute; inset: 0; display: grid; place-items: center; border: 2px solid #cfcbc0; border-radius: 4px; background: repeating-linear-gradient(45deg,#163c36 0 3px,#295349 3px 4px); color: #d3c496; font: 700 28px Georgia; box-shadow: 1px 6px 10px #0004; }
.live-preview-page .lp-card-shoe i:nth-child(2) { translate: 3px -3px; }
.live-preview-page .lp-card-shoe i:nth-child(3) { translate: 6px -6px; }
@keyframes lp-card-deal { from { opacity: 0; transform: translate(32px,-28px) rotate(10deg) scale(.94); } to { opacity: 1; transform: none; } }
@container blackjack-table (max-height: 285px) {
  .live-preview-page .lp-game-hand { top: 50%; bottom: auto; transform: translate(-50%,-50%); }
  .live-preview-page .lp-dealer { left: 29%; }
  .live-preview-page .lp-player { left: 72%; }
  .live-preview-page .lp-playing-card { width: clamp(40px,min(13cqw,43cqh),76px); }
  .live-preview-page :is(.lp-table-mark,.lp-table-print,.lp-card-shoe) { display: none; }
  .live-preview-page .lp-game-status { bottom: 0; }
}
@container blackjack-table (max-height: 120px) {
  .live-preview-page .lp-game-status { display: none; }
  .live-preview-page .lp-playing-card { width: 36px; }
}
@container blackjack-table (max-width: 430px) {
  .live-preview-page :is(.lp-table-print,.lp-card-shoe) { display: none; }
  .live-preview-page .lp-game-cards { gap: 6px; }
  .live-preview-page .lp-seat-label { font-size: 7px; gap: 5px; }
}

/* Roulette: fixed brass housing, rotating numbered bowl and a separate ball. */
.live-preview-page .lp-game[data-game=roulette] { background: radial-gradient(ellipse at 50% 44%,#283747 0%,#16232c 43%,#0b141c 85%); }
.live-preview-page [data-game=roulette] .lp-table-edge { border-color: #171d24; box-shadow: 0 2px 0 #94816b66,inset 0 -2px 0 #b89d6f66,inset 0 -22px 50px #0007,0 20px 40px #0009; }
.live-preview-page .lp-roulette-scene { position: relative; display: grid; justify-items: center; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; height: min(530px,100cqh); width: min(490px,96cqw); }
.live-preview-page .lp-scene-heading { width: 100%; max-width: 330px; text-align: center; }
.live-preview-page .lp-scene-heading > span { font-size: 7px; font-weight: 700; letter-spacing: .25em; color: #c9bda5; }
.live-preview-page .lp-scene-heading h2 { margin: 3px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -.05em; }
.live-preview-page .lp-scene-heading h2 span { margin-left: 8px; font-size: 9px; color: #bea783; vertical-align: top; letter-spacing: 0; }
.live-preview-page .lp-roulette { position: relative; aspect-ratio: 1; height: 100%; max-width: 100%; filter: drop-shadow(0 12px 12px #0008); }
.live-preview-page :is(.lp-wheel-housing,.lp-wheel,.lp-ball-orbit) { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-preview-page .lp-wheel { transition: transform 250ms linear; }
.live-preview-page .lp-ball-orbit { transition: transform 250ms linear; }
.live-preview-page .is-timed-demo :is(.lp-wheel,.lp-ball-orbit,.lp-wheel-ball) { transition: none; }
.live-preview-page .lp-wheel [data-pocket].is-result>path { stroke: #fff1b9; stroke-width: 3; filter: drop-shadow(0 0 3px #f0d18e); }
.live-preview-page .lp-wheel-ball { position: absolute; top: 16.4%; left: 50%; width: 2.2%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 30% 25%,#fff,#e7dfc8 50%,#9b9384); box-shadow: 0 2px 3px #000b; transition: top 250ms linear; }
.live-preview-page .lp-wheel-pointer { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 3%; height: 3%; background: #e8d7ac; clip-path: polygon(0 0,100% 0,50% 100%); }
.live-preview-page .lp-roulette-result { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 12px 5px 5px; border: 1px solid #ffffff1b; border-radius: 10px; background: #0b131ba6; }
.live-preview-page .lp-roulette-result > b { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #ffffff25; border-radius: 7px; background: #29343e; font-size: 17px; font-variant-numeric: tabular-nums; }
.live-preview-page .lp-roulette-result[data-color=red] > b { background: #a63040; }
.live-preview-page .lp-roulette-result[data-color=black] > b { background: #171d25; }
.live-preview-page .lp-roulette-result[data-color=green] > b { background: #17734f; }
.live-preview-page .lp-roulette-result > span { display: grid; gap: 4px; }
.live-preview-page .lp-roulette-result small { font-size: 6px; letter-spacing: .14em; color: #b5ada0; }
.live-preview-page .lp-roulette-result strong { font-size: 10px; font-weight: 500; text-transform: capitalize; }
@container game-scene (max-height: 300px) {
  .live-preview-page .lp-roulette-scene { grid-template-rows: minmax(0,1fr) auto; gap: 6px; }
  .live-preview-page .lp-scene-heading { display: none; }
  .live-preview-page .lp-roulette-result { min-height: 28px; padding: 3px 9px 3px 3px; gap: 7px; }
  .live-preview-page .lp-roulette-result > b { width: 22px; height: 22px; font-size: 12px; }
  .live-preview-page .lp-roulette-result small { display: none; }
}

/* Five-reel original cabinet: authored vector symbols, no emoji substitutes. */
.live-preview-page .lp-game[data-game=slots] { background: radial-gradient(ellipse at 50% 34%,#303650 0%,#1b2333 38%,#101521 72%,#090e17); }
.live-preview-page [data-game=slots] .lp-table-edge { inset: -25% 10% 12%; border: 1px solid #acb6e50c; border-radius: 50%; box-shadow: 0 0 0 42px #b8c3ff03,0 0 0 84px #b8c3ff02; transform: rotate(-15deg); }
.live-preview-page .lp-slot-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.live-preview-page .lp-slot-machine {
  position: relative; width: min(690px,96cqw,calc(100cqh * 1.75)); aspect-ratio: 1.75;
  container: slot-cabinet / inline-size; border: 1px solid #d3b98580; border-radius: 16px;
  background: linear-gradient(130deg,#343a4b,#111724 42%,#222636); color: #f5e6c6;
  box-shadow: inset 0 0 0 4px #151b28,inset 0 0 0 5px #b9a17a45,0 5px 0 #090e18,0 20px 50px #0008;
}
.live-preview-page .lp-slot-title { position: absolute; top: 5%; left: 5%; right: 5%; }
.live-preview-page .lp-slot-title > span { display: flex; justify-content: space-between; font-size: 1.3cqw; letter-spacing: .19em; color: #b2b8c9; font-weight: 600; }
.live-preview-page .lp-slot-title i { font-style: normal; color: #cbb489; letter-spacing: .12em; }
.live-preview-page .lp-slot-title h2 { margin: 1.1cqw 0 0; font-size: 5.7cqw; font-weight: 850; letter-spacing: -.065em; line-height: 1; color: #f8edd6; }
.live-preview-page .lp-slot-title h2 em { font-style: normal; color: #e5be79; }
.live-preview-page .lp-slot-title h2 b { float: right; font-size: 5.1cqw; font-weight: 400; color: #e9cc93; }
.live-preview-page .lp-slot-reels { --slot-reel-h: 33cqw; position: absolute; top: 30%; left: 5%; right: 5%; height: var(--slot-reel-h); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .6cqw; padding: .7cqw; border: 1px solid #bba170a1; border-radius: 8px; background: #080e18; box-shadow: 0 0 0 3px #090d17,inset 0 2px 8px #0008; }
.live-preview-page .lp-reel { position: relative; overflow: hidden; border-radius: 4px; background: linear-gradient(#151c2c,#26354b 40%,#28364d 60%,#111824); }
.live-preview-page .lp-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#090f21ba,transparent 34%,transparent 66%,#090f21bd); box-shadow: inset 0 0 8px #0008; pointer-events: none; }
.live-preview-page .lp-reel-strip { transform: translateY(calc(var(--reel-stop,0) * var(--slot-reel-h) / -3)); transition: transform 500ms cubic-bezier(.16,1.15,.32,1); }
.live-preview-page .lp-reel-symbol { display: grid; place-items: center; height: calc(var(--slot-reel-h) / 3); }
.live-preview-page .lp-reel-symbol svg { width: 70%; height: 95%; overflow: visible; filter: drop-shadow(0 3px 2px #0008); }
.live-preview-page .is-spinning .lp-reel-strip { animation: lp-reel-roll var(--reel-speed,.7s) linear infinite; transition: none; }
.live-preview-page .is-paused .lp-reel-strip { animation-play-state: paused; }
.live-preview-page .lp-slot-payline { position: absolute; inset: 34% -.8cqw; border-top: 1px solid #e9c47b4d; border-bottom: 1px solid #e9c47b4d; pointer-events: none; }
.live-preview-page .lp-slot-payline i { position: absolute; top: 50%; left: -1.7cqw; translate: 0 -50%; width: 1.7cqw; height: 2cqw; clip-path: polygon(0 0,100% 50%,0 100%); background: #eccd8e; }
.live-preview-page .lp-slot-payline i:last-child { left: auto; right: -1.7cqw; rotate: 180deg; }
.live-preview-page .lp-slot-bottom { position: absolute; inset: auto 5% 5%; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1.25cqw; letter-spacing: .06em; color: #aeb9ce; }
.live-preview-page .lp-slot-bottom > span:first-child { display: flex; align-items: center; gap: 5px; color: #ddcba6; }
.live-preview-page .lp-slot-bottom i { width: .6cqw; height: .6cqw; border-radius: 50%; background: #ddcba6; }
.live-preview-page .lp-slot-bottom b { font-size: 1.5cqw; font-weight: 500; color: #ddcba6; }
@keyframes lp-reel-roll { from { transform: translateY(0); } to { transform: translateY(calc(var(--slot-reel-h) * -2)); } }

@media (min-width: 901px) {
  .live-preview-page .lp-slot-machine { width: min(690px,calc(100cqw - 420px),calc(100cqh * 1.75)); }
  .live-preview-page .has-roulette-table .lp-game-field { top: 10px; bottom: calc(var(--lm-card-height,415px) + var(--lp-controls-gap,0px) + 22px); }
}
@media (max-width: 900px) {
  .live-preview-page .lp-game-field { inset: 92px 12px 120px; }
  .live-preview-page .has-live-moment .lp-game-field { bottom: calc(var(--lm-card-height,180px) + var(--lp-controls-gap,0px) + 60px); }
  .live-preview-page .lp-table-edge { inset: -35% -35% 3%; border-width: 12px; }
  .live-preview-page .lp-game-status { font-size: 8px; }
  .live-preview-page .lp-roulette-scene { width: min(370px,85cqw); }
  .live-preview-page .lp-slot-machine { width: min(600px,96cqw,calc(100cqh * 1.75)); border-radius: 12px; }
  .live-preview-page .lp-slot-title > span { font-size: 1.65cqw; }
  .live-preview-page .lp-slot-bottom { font-size: 1.6cqw; }
  .live-preview-page .lp-slot-bottom .lp-slots-status { display: none; }
}
@media (max-width: 600px) {
  .live-preview-page .lp-game-field { left: 25px; right: 12px; }
  .live-preview-page .lp-roulette-result { border-radius: 8px; }
  .live-preview-page .lp-roulette-scene { padding-bottom: 20px; }
  .live-preview-page .lp-playing-card { border-radius: 5px; }
  .live-preview-page .has-blackjack-chips .lp-game-field { bottom: calc(var(--lm-card-height,400px) + var(--lp-controls-gap,0px) + 112px); }
  .live-preview-page .has-blackjack-chips .lp-game-status { bottom: 0; }
  .live-preview-page :is(.has-slot-chips,.has-roulette-table) .lp-game-field { left: 126px; right: 12px; bottom: calc(var(--lm-card-height,400px) + var(--lp-controls-gap,0px) + 22px); }
  .live-preview-page .has-roulette-table .lp-roulette-scene { padding-bottom: 0; width: 100cqw; }
  .live-preview-page .has-roulette-table .lp-roulette-result { padding: 2px 5px; gap: 5px; min-height: 24px; }
  .live-preview-page .has-roulette-table .lp-roulette-result strong { font-size: 8px; }
  .live-preview-page .has-roulette-table .lp-roulette-result > b { width: 20px; height: 20px; }
  .live-preview-page :is(.has-roulette-table,.has-blackjack-chips,.has-slot-chips) [data-lm-clock] { top: 12px; bottom: auto; right: 52px; min-height: 26px; padding: 4px 6px; gap: 4px; }
  .live-preview-page :is(.has-roulette-table,.has-blackjack-chips,.has-slot-chips) [data-lm-clock] span { display: none; }
  .live-preview-page :is(.has-roulette-table,.has-blackjack-chips,.has-slot-chips) [data-lm-clock] strong { font-size: 13px; }
  .live-preview-page :is(.has-roulette-table,.has-blackjack-chips,.has-slot-chips) [data-lm-clock] svg { width: 12px; height: 12px; }
  .live-preview-page :is(.has-roulette-table,.has-blackjack-chips,.has-slot-chips) .lm-heading > div { padding-right: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-preview-page :is(.lp-playing-card,.lp-reel-strip) { animation: none !important; }
  .live-preview-page :is(.lp-wheel,.lp-wheel-ball,.lp-ball-orbit,.lp-reel-strip,.lp-game-field) { transition: none; }
}
