/**
 * Player Deckbuilder / Deck Viewer
 *
 * Kept separate from the shared Core stylesheet so this phone-first player
 * surface can be deployed and evolved without changing unrelated site chrome.
 */

.vs-deck-viewer {
	--vs-player-accent: var(--vs-weathered-brass);
	--vs-player-muted: var(--vs-iron-black);
	--vs-player-strong: var(--vs-old-ivory);
	align-content: start;
	background: var(--vs-void-black);
}

.vs-deck-viewer[data-vs-faction] {
	--vs-player-accent: var(--vs-context-accent);
	--vs-player-muted: var(--vs-context-muted);
	--vs-player-strong: var(--vs-context-strong);
}

.vs-deck-viewer__close {
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 58%, var(--vs-old-ivory));
	background: color-mix(in srgb, var(--vs-player-muted) 70%, #101214);
}

.vs-deck-viewer__header {
	padding: .7rem 1rem;
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 52%, rgba(240, 236, 226, .28));
	background: color-mix(in srgb, var(--vs-player-muted) 68%, #111315);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38), 0 .65rem 1.5rem rgba(0, 0, 0, .28);
}

.vs-deck-viewer__card {
	position: relative;
	padding: 0;
	color: var(--vs-pale-ash);
	cursor: pointer;
	font: inherit;
	perspective: 1100px;
}

.vs-deck-viewer__card:disabled {
	cursor: default;
	opacity: 1;
}

.vs-deck-viewer__faces {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform .56s cubic-bezier(.2, .7, .2, 1);
}

.vs-deck-viewer__card.is-flipped .vs-deck-viewer__faces {
	transform: rotateY(180deg);
}

.vs-deck-viewer__face {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	backface-visibility: hidden;
}

.vs-deck-viewer__face--back {
	transform: rotateY(180deg);
}

.vs-deck-viewer__face img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: min(62vh, 740px);
	object-fit: contain;
}

.vs-deck-viewer__card-hint {
	position: absolute;
	right: .65rem;
	bottom: .65rem;
	z-index: 2;
	padding: .34rem .5rem;
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 45%, rgba(240, 236, 226, .4));
	background: rgba(8, 10, 11, .94);
	color: var(--vs-player-strong);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vs-deck-viewer__profile-link {
	display: inline-block;
	padding: .45rem .65rem;
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 48%, rgba(240, 236, 226, .25));
	background: color-mix(in srgb, var(--vs-player-muted) 64%, #111315);
}

.vs-deck-viewer__rules {
	box-sizing: border-box;
	padding: .75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 52%, rgba(240, 236, 226, .28));
	background: color-mix(in srgb, var(--vs-player-muted) 68%, #111315);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38);
}

.vs-deck-viewer__rail {
	box-sizing: border-box;
	padding: .55rem;
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 52%, rgba(240, 236, 226, .28));
	background: color-mix(in srgb, var(--vs-player-muted) 68%, #111315);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38);
}

.vs-deck-viewer__actions {
	justify-content: center;
	width: min(700px, 100%);
	box-sizing: border-box;
	padding: .65rem;
	border: 1px solid color-mix(in srgb, var(--vs-player-accent) 52%, rgba(240, 236, 226, .28));
	background: color-mix(in srgb, var(--vs-player-muted) 68%, #111315);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .38);
}

@media (max-width: 650px) {
	.vs-deck-viewer__face img {
		max-height: 52vh;
	}
}