/*
 * El mazo que se baraja (public/js/velo-mazo.js). Va sobre fondos de noche (Tarot Gratis,
 * lecturas, Academia, Carta del día); los colores se pueden cambiar con las variables --vm-*.
 */
.vm {
	--vm-oro: #f3cd78;
	--vm-rosa: #ff7ae6;
	--vm-tinta: #fff8e8;
	--vm-tenue: rgba(255, 248, 232, .72);
	display: grid;
	gap: 18px;
	width: 100%;
}
.vm-escena {
	position: relative;
	height: calc(var(--vm-ch, 106px) + 40px);
	padding-top: 26px;
	overflow: visible;
}
.vm-carta {
	position: absolute;
	left: 0;
	top: 26px;
	width: var(--vm-cw, 62px);
	height: var(--vm-ch, 106px);
	padding: 0;
	border: 1px solid rgba(243, 205, 120, .55);
	border-radius: 7px;
	background: #2a1748 center / cover no-repeat;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7);
	cursor: pointer;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, filter .2s ease, opacity .2s ease;
	will-change: transform;
}
.vm-carta:disabled { cursor: default; }
.vm-carta:not(:disabled):hover,
.vm-carta:not(:disabled):focus-visible {
	translate: 0 -14px;
	box-shadow: 0 14px 26px -8px rgba(0, 0, 0, .8), 0 0 0 2px var(--vm-oro);
	outline: none;
}
.vm-carta.vm-elegida {
	translate: 0 -24px;
	box-shadow: 0 0 0 2px var(--vm-rosa), 0 0 22px rgba(255, 122, 230, .65);
}
.vm-escena:has(.vm-elegida) .vm-carta:disabled:not(.vm-elegida) { filter: brightness(.55); }
.vm-num {
	position: absolute;
	left: 50%;
	top: -11px;
	translate: -50% 0;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 11px;
	background: var(--vm-rosa);
	color: #1a0b2e;
	font: 700 12px/22px system-ui, sans-serif;
	text-align: center;
}
.vm-num:empty { display: none; }
.vm-pie { display: grid; justify-items: center; gap: 10px; text-align: center; }
.vm-barajar {
	min-height: 46px;
	padding: 11px 26px;
	border: 1px solid rgba(243, 205, 120, .6);
	border-radius: 999px;
	background: linear-gradient(120deg, #7b2cff, #ff2fd6);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .03em;
	cursor: pointer;
	box-shadow: 0 10px 26px -10px rgba(255, 47, 214, .7);
}
.vm-barajar:disabled { opacity: .7; cursor: progress; }
.vm-barajar:focus-visible { outline: 2px solid var(--vm-oro); outline-offset: 3px; }
.vm-estado { margin: 0; font-size: 14px; font-style: italic; color: var(--vm-oro); }

/* La ventana sobre la página. */
.vm-abierta { overflow: hidden; }
.vm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(8, 4, 18, .82);
	backdrop-filter: blur(4px);
	animation: vmEntra .25s ease both;
}
.vm-caja {
	width: min(980px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	display: grid;
	gap: 14px;
	padding: clamp(18px, 3vw, 30px);
	border: 1px solid rgba(243, 205, 120, .4);
	border-radius: 18px;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(123, 44, 255, .35), transparent 70%), #160b28;
	color: #fff8e8;
	text-align: center;
	box-shadow: 0 30px 80px -20px #000;
}
.vm-titulo { margin: 0; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.2; color: #f3cd78; }
.vm-texto { margin: 0; color: rgba(255, 248, 232, .78); }
.vm-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.vm-btn {
	min-height: 44px;
	padding: 10px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #f3cd78;
	color: #1a0b2e;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
.vm-btn:disabled { opacity: .45; cursor: not-allowed; }
.vm-btn--suave { background: transparent; color: #fff8e8; border-color: rgba(255, 248, 232, .35); }
.vm-btn:focus-visible { outline: 2px solid #ff7ae6; outline-offset: 3px; }
@keyframes vmEntra { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.vm-carta, .vm-modal { transition: none; animation: none; }
}

/* La carta que se da vuelta al elegirla (Carta del día). */
.vm-revelada { animation: vmRevela .7s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 50%; }
.vm-revela-intro { margin: 0 0 6px; text-align: center; color: rgba(255, 248, 232, .82); }
@keyframes vmRevela { from { opacity: 0; transform: perspective(900px) rotateY(80deg) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vm-revelada { animation: none; } }
/* [hidden] pierde contra cualquier display: de autor (la tarjeta de la Carta del día es flex). */
[data-vm-carta][hidden], [data-vm-lugar][hidden] { display: none !important; }