/* PLAY ENGINE · action-card styles (assets/js/play/vignette.js #play-vigcard), on the kit tokens. Fixed over the whole page. */
.play-vigcard { position: fixed; inset: 0; z-index: 115; display: flex; align-items: center; justify-content: center; pointer-events: none; background: transparent; transition: background 0.18s; }
.play-vigcard[hidden] { display: none; }
.play-vigcard.on { background: color-mix(in srgb, var(--k-black) 55%, transparent); }
.vc-box { pointer-events: auto; width: min(76vw, 360px); display: grid; gap: 8px; cursor: pointer; opacity: 0; transform: scale(0.86) rotate(-1.5deg); transition: opacity 0.18s, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), width 0.35s ease; }
.play-vigcard.on .vc-box { opacity: 1; transform: none; }
.vc-frame { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--k-cyan); box-shadow: 0 0 40px color-mix(in srgb, var(--k-cyan) 30%, transparent); background: var(--k-black); }
.play-vigcard.foe .vc-frame { border-color: var(--k-red); box-shadow: 0 0 44px color-mix(in srgb, var(--k-red) 40%, transparent); }
.vc-frame canvas { display: block; width: 100%; height: 100%; }
.vc-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--k-black) 18%, transparent) 0 1px, transparent 1px 3px), radial-gradient(75% 75% at 50% 50%, transparent 60%, color-mix(in srgb, var(--k-black) 65%, transparent)); }
.vc-art { position: absolute; inset: 0; background: center / cover no-repeat; display: none; image-rendering: pixelated; }
.play-vigcard.has-art .vc-art { display: block; } .play-vigcard.has-art canvas { visibility: hidden; }
html[data-motion="full"] .play-vigcard.on.has-art .vc-art { animation: vc-zoom 6s ease-out both; } /* slow: a held card stays up through the roll */
@keyframes vc-zoom { from { transform: scale(1.18) translate(2%, 2%); } to { transform: scale(1.02); } }
.vc-cap { text-align: center; }
.vc-cap b { display: block; font: 900 20px var(--k-mono); letter-spacing: 0.22em; color: var(--k-cyan); text-shadow: 0 0 14px color-mix(in srgb, var(--k-cyan) 60%, transparent); }
.vc-cap small { display: block; margin-top: 2px; font-size: 14px; color: var(--k-text); font-style: italic; }
.play-vigcard.foe .vc-cap b { color: var(--k-red); text-shadow: 0 0 14px color-mix(in srgb, var(--k-red) 60%, transparent); }
.vc-skip { text-align: center; font: 10px var(--k-mono); letter-spacing: 0.2em; color: var(--k-muted); opacity: 0.6; }
html[data-motion="off"] .vc-box, html[data-motion="off"] .play-vigcard { transition: none; }
/* held: the card stays up behind the dice, bigger and dimmer, the caption above it (the dice sit over its lower half) */
.play-vigcard.held { z-index: 7; background: color-mix(in srgb, var(--k-black) 65%, transparent); }
.play-vigcard.held .vc-box { width: min(92vw, 56vh, 520px); cursor: default; transform: translateY(-8vh) scale(0.92); }
.play-vigcard.held .vc-frame { filter: brightness(0.45) saturate(0.9); transition: filter 0.4s; } /* dimmed under the tray (T-140 #1) */
.play-vigcard.held .vc-cap { opacity: 0.7; order: -1; }
.play-vigcard.held .vc-skip { visibility: hidden; }
/* the held card dims behind the dice (uix T-138 #1); the roll's choices keep the dice readable */
body.vig-held .play-vigcard .vc-box { filter: brightness(0.45); transition: filter 0.3s; }
body.vig-held .k-dim { backdrop-filter: none; background: color-mix(in srgb, var(--k-black) 35%, transparent); align-items: end; padding-bottom: 6vh; }