/* av-vp.css — Video Poker (video-poker.html). Loaded after av-bj.css, which supplies the shared game layout (#main, #game-area, #stage,
   #bottom-zone, #sidebar, the chip row, the main button, the log) and the playing cards. Shell tokens and Inter only. */
#vp-table{--cw:92px;--ch:128px;width:min(100%,720px);margin:auto 0;display:flex;flex-direction:column;gap:10px;position:relative}

/* pay table: 3 x 3, the row of your hand lights up */
.vp-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.vp-pay .pr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:var(--av-r);background:var(--av-panel);color:var(--av-text);font:500 12px var(--av-font);transition:background .2s,color .2s}
.vp-pay .pr b{font-weight:700;font-size:13px;color:var(--av-white);white-space:nowrap}
.vp-pay .pr.peek{background:var(--av-raised);color:var(--av-white)}
.vp-pay .pr.win{background:var(--av-win-bg);color:var(--av-win)}.vp-pay .pr.win b{color:var(--av-win)}
.vp-pay .pr.max b{color:var(--av-accent-soft)}

/* verdict and the deck */
.vp-mid{position:relative;min-height:48px;display:flex;align-items:center;justify-content:center}
.vp-verdict{font-size:18px;font-weight:700;color:var(--av-muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.vp-verdict .pill{font-size:.78em;font-weight:700;padding:3px 12px;border-radius:999px;background:var(--av-raised);color:var(--av-white)}
.vp-verdict.w{color:var(--av-white)}.vp-verdict.w .pill{background:var(--av-win-bg);color:var(--av-win)}
.vp-verdict.p{color:var(--av-white)}.vp-verdict.p .pill{background:var(--av-raised);color:var(--av-text)}
.vp-verdict.l{color:var(--av-muted)}
.vp-verdict.w,.vp-verdict.p{animation:vpPop .28s var(--av-ease)}
.vp-verdict.big{font-size:24px}
@keyframes vpPop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.vp-deck{position:absolute;right:2px;top:0;width:34px;height:48px;--cw:34px;--ch:48px;pointer-events:none}
.vp-deck .card{position:absolute;inset:0;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.45);width:34px;height:48px}
.vp-deck .card:nth-child(1){transform:translate(-4px,4px)}.vp-deck .card:nth-child(2){transform:translate(-2px,2px)}
.vp-deck.tap{animation:vpTap .26s ease-out}
@keyframes vpTap{40%{transform:translateY(3px) scale(.96)}}

/* the five cards: tap one to hold it */
.vp-cards{display:flex;gap:12px;justify-content:center;align-items:flex-start}
.vp-slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--av-font)}
.vp-slot:disabled{cursor:default}
.vp-box{width:var(--cw);height:var(--ch);position:relative;border-radius:10px;transition:transform .15s var(--av-ease),box-shadow .15s}
.vp-box:empty{border:1.5px dashed var(--av-line);background:rgba(255,255,255,.02)}
.vp-box .card{transition:opacity .15s,transform .15s}
.vp-box .card.out{opacity:0;transform:translateY(14px)}
.vp-box .card.fly{animation:vpDeal .42s cubic-bezier(.2,.8,.25,1) both}
@keyframes vpDeal{0%{transform:translate(var(--fx,150px),var(--fy,-130px)) rotate(10deg) scale(.5);opacity:0}12%{opacity:1}100%{transform:none;opacity:1}}
.vp-slot.held .vp-box{transform:translateY(-6px);box-shadow:0 0 0 2px var(--av-accent),0 8px 18px rgba(139,92,246,.35);border-radius:10px}
.vp-held{height:20px;font:600 11px/20px var(--av-font);color:var(--av-accent-soft);background:var(--av-accent-bg);padding:0 10px;border-radius:999px;visibility:hidden}
.vp-slot.held .vp-held{visibility:visible}
.vp-slot.won .vp-box .card{box-shadow:0 0 0 2px var(--av-win),0 6px 16px rgba(0,0,0,.5)}

/* controls */
#vp-controls{display:flex;flex-direction:column;gap:8px}
.vp-bet-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.vp-bet-row .amt{font-size:24px;font-weight:700;color:var(--av-white)}.vp-bet-row .amt small{font-size:12px;font-weight:500;color:var(--av-muted);margin-left:4px}
.vp-tools{display:flex;gap:6px;flex-wrap:wrap}
.sm:disabled{opacity:.35;cursor:default}
#vp-go{transition:transform .08s}#vp-go:active:not(:disabled){transform:scale(.985)}

@media(max-width:720px){
  #vp-table{--cw:60px;--ch:84px;gap:8px}
  .vp-cards{gap:8px}
  .vp-pay .pr{padding:6px 7px;font-size:11px}.vp-pay .pr b{font-size:12px}
  .vp-bet-row .amt{font-size:20px}
  .vp-verdict.big{font-size:20px}
}
/* small phones (about 667 px tall): tighter so the pay table, cards and controls all fit without scrolling */
@media(max-width:720px) and (max-height:720px){
  #vp-table{gap:6px}
  .vp-mid{min-height:40px}
  .vp-deck{width:28px;height:40px}.vp-deck .card{width:28px;height:40px}
  #stage:has(#vp-table){padding-top:6px;padding-bottom:2px}
}
/* big screens: larger cards */
@media(min-width:1280px) and (min-height:860px){#vp-table{--cw:118px;--ch:165px;gap:14px;width:min(100%,800px)}.vp-cards{gap:16px}.vp-verdict{font-size:22px}.vp-pay .pr{font-size:13px;padding:9px 12px}.vp-pay .pr b{font-size:14px}}
@media(min-width:1700px) and (min-height:1000px){#vp-table{--cw:140px;--ch:196px;gap:18px;width:min(100%,940px)}.vp-cards{gap:20px}.vp-verdict{font-size:26px}}