/* Jacks or Better 9/6 — free play, virtual coins only */
.vp { font-family: var(--sans); margin-top: .4rem; }
.vp-cabinet { border-radius: 20px; padding: 1.1rem 1.2rem 1rem; color: #fff;
  background: radial-gradient(ellipse at 50% -10%, #2a3f9a 0%, #16205c 45%, #0b1036 100%);
  border: 2px solid #c99a3a; box-shadow: 0 0 0 4px #2a1d08, 0 0 0 5px #e7c06a, 0 22px 50px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.4); }
.vp-paywrap { margin: 0 0 1rem; overflow-x: auto; border: 0; }
.vp-paytable { width: 100%; border-collapse: collapse; font-size: .82rem; background: rgba(0,0,30,.55); border: 2px solid #e7c06a; }
.vp-paytable th, .vp-paytable td { padding: .28rem .55rem; text-align: right; border: 0; color: #ffe066; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: transparent; }
.vp-paytable thead th { color: #9fb2ff; font-size: .7rem; border-bottom: 1px solid rgba(231,192,106,.5); }
.vp-paytable tbody th { text-align: left; color: #ffe066; }
.vp-paytable td.cur { background: rgba(220,40,40,.6); color: #fff; }
.vp-paytable tr.made th, .vp-paytable tr.made td { background: rgba(255,224,102,.16); }
.vp-paytable tr.win th, .vp-paytable tr.win td { background: #ffe066; color: #1a1406; animation: vp-flash .5s steps(2) 6; }
@keyframes vp-flash { 50% { background: #fff6c4; } }
.vp-hand { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.35rem, 1.4vw, 1rem); padding: .4rem clamp(0rem, 2vw, 1.5rem) .2rem; perspective: 1100px; }
.vp-slot { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.vp-card { position: relative; width: 100%; max-width: 150px; aspect-ratio: 300 / 407; cursor: pointer; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3,.7,.3,1.15), translate .25s; }
.vp-face { position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: center/100% 100% no-repeat; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.vp-back { background-image: url(/play/assets/cards/back.webp); }
.vp-front { transform: rotateY(180deg); background-color: #fff; }
.vp-card.up { transform: rotateY(180deg); }
.vp-card.dealing { translate: 0 -18px; opacity: .0; transition: none; }
.vp-card.held { translate: 0 -10px; }
.vp-card.held .vp-front { box-shadow: 0 0 0 3px #ffe066, 0 10px 18px rgba(0,0,0,.55); }
.vp-held { position: absolute; left: 50%; top: -0.9rem; transform: translateX(-50%) rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; font-weight: 900; font-size: .78rem; letter-spacing: .12em; color: #1a1406; background: #ffe066; padding: .15rem .5rem; border-radius: 4px; opacity: 0; transition: opacity .15s; }
.vp-card.held .vp-held { opacity: 1; }
.vp-card.win .vp-front { box-shadow: 0 0 0 3px #7CFFB2, 0 0 22px rgba(124,255,178,.65); }
.vp-card.dim .vp-front { filter: brightness(.55); }
.vp-hold { width: 100%; max-width: 150px; font: 800 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .6rem 0; border-radius: 8px; cursor: pointer;
  color: #1a1406; background: linear-gradient(180deg, #fff3b8, #e0b04a); border: 0; box-shadow: 0 4px 0 #8a6516; }
.vp-hold.on { background: linear-gradient(180deg, #ff7a7a, #c41f1f); color: #fff; box-shadow: 0 4px 0 #6d0f0f; }
.vp-hold:disabled { opacity: .35; cursor: not-allowed; }
.vp-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; text-align: center; padding: .6rem 1.6rem; border-radius: 12px;
  background: rgba(10,10,40,.88); border: 2px solid #ffe066; box-shadow: 0 0 30px rgba(255,224,102,.45); animation: vp-pop .35s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; }
.vp-banner b { display: block; color: #ffe066; font-size: clamp(1rem, 2.6vw, 1.6rem); letter-spacing: .06em; text-transform: uppercase; }
.vp-banner span { color: #fff; font-weight: 800; letter-spacing: .1em; }
@keyframes vp-pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.vp-meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0 .7rem; }
.vp-meters div { display: flex; flex-direction: column; align-items: center; padding: .45rem; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(231,192,106,.35); }
.vp-meters span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #9fb2ff; font-weight: 800; }
.vp-meters b { font-size: 1.35rem; color: #ffe066; font-variant-numeric: tabular-nums; }
.vp-meters small { font-size: .65rem; color: rgba(255,255,255,.6); }
.vp-controls { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; justify-content: flex-end; }
.vp-coins { display: flex; gap: .3rem; margin-right: auto; align-items: center; }
.vp-coins button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px dashed rgba(255,255,255,.55); background: #1d3a8a; color: #fff; font: 800 .8rem/1 var(--sans); cursor: pointer; }
.vp-coins button[aria-pressed="true"] { background: #c41f1f; border-color: #ffe066; box-shadow: 0 0 10px rgba(255,224,102,.6); }
.vp-coins button:disabled { opacity: .5; cursor: not-allowed; }
.vp-btn { font: 800 .85rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .85rem 1.1rem; border-radius: 10px; border: 0; cursor: pointer; color: #fff; background: linear-gradient(180deg, #3d58c9, #1f307f); box-shadow: 0 4px 0 #0d1647; }
.vp-btn:disabled { opacity: .4; cursor: not-allowed; }
.vp-deal { min-width: 9rem; color: #1a1406; background: linear-gradient(180deg, #fff3b8, #e0b04a); box-shadow: 0 4px 0 #8a6516; font-size: 1rem; }
.vp-msg { min-height: 1.4em; margin: .8rem 0 0; text-align: center; font-size: .9rem; color: #fff; }
.vp-foot { margin: .3rem 0 0; text-align: center; font-size: .72rem; color: rgba(255,255,255,.6); }
.vp-foot .rl-link { background: none; border: 0; padding: 0; color: #ffe066; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .vp-cabinet { padding: .7rem .5rem .8rem; border-radius: 14px; margin-inline: -0.3rem; }
  .vp-paytable { font-size: .62rem; } .vp-paytable th, .vp-paytable td { padding: .2rem .25rem; }
  .vp-hold { font-size: .66rem; letter-spacing: .04em; padding: .55rem 0; }
  .vp-held { font-size: .6rem; }
  .vp-controls { justify-content: stretch; } .vp-coins { width: 100%; justify-content: center; margin: 0 0 .2rem; }
  .vp-btn { flex: 1; padding: .85rem .3rem; font-size: .75rem; } .vp-deal { flex: 1.4; min-width: 0; }
}