.vp-board { display: grid; align-content: center; gap: 20px; background: #1b1060; box-shadow: inset 0 0 0 4px #3a2a9a; }
.vp-hand { gap: 10px; }
.vp-slot { border: 0; background: none; padding: 0; display: grid; gap: 6px; justify-items: center; cursor: pointer; }
.vp-slot:disabled { cursor: default; opacity: 1; }
.vp-slot .pc { width: 86px; height: 122px; font-size: 22px; transition: transform .12s; }
.vp-slot .pc .big { font-size: 42px; }
.hold-tag { font: 400 13px var(--display); color: var(--muted); min-height: 1.2em; letter-spacing: .05em; }
.vp-slot[aria-pressed="true"] .hold-tag { color: var(--gold); }
.vp-made { text-align: center; font: 400 26px var(--display); color: #fff; min-height: 1.3em; text-shadow: 3px 3px 0 var(--pink); }
.vp-made.on { animation: vp-pop .4s ease-out; }
@media (max-width: 560px) { .vp-hand { gap: 5px; } .vp-slot .pc { width: 58px; height: 84px; font-size: 16px; } .vp-slot .pc .big { font-size: 28px; } }

/* "what you're holding" readout */
.vp-made.holding { display: grid; gap: 4px; justify-items: center; min-height: 5.2em; align-content: center; text-shadow: none; }
.vp-made.holding small { font: 400 13px var(--display); color: var(--muted); letter-spacing: .14em; }
.vp-made.holding b { font: 400 30px/1 var(--display); color: #fff; text-shadow: 3px 3px 0 var(--pink); animation: vp-pop .25s ease-out; }
.vp-made.holding.pays b { color: #7dff9b; text-shadow: 3px 3px 0 #1d6b3d, 0 0 18px rgba(77, 255, 143, .5); }
.vp-made.holding span { font: 500 14px var(--body); color: var(--text); opacity: .85; max-width: 46ch; text-align: center; }
.vp-made:not(.holding) { min-height: 5.2em; display: grid; place-items: center; }

.vp-extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.vp-mini { background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 6px; text-align: center; }
.vp-mini.won { box-shadow: inset 0 0 0 2px var(--gold); }
.vp-mini .row { display: flex; justify-content: center; }
.vp-mini .pc { width: 28px; height: 40px; min-width: 0; font-size: 10px; margin-left: -4px; padding: 1px; }
.vp-mini .pc .big { display: none; }
.vp-mini small { color: var(--muted); font-size: 11px; }
.vp-dbl { display: flex; justify-content: center; gap: 24px; margin-top: 14px; text-align: center; }
.vp-dbl small { display: block; margin-bottom: 4px; color: var(--muted); }
.pc.joker { color: #8b3cff; }
.pc.joker .r { font-size: 9px; letter-spacing: .04em; }
.seg .btn[aria-pressed="true"] { background: var(--gold); color: var(--ink); }