/* «Trova la coppia» (VG-259) — solo pairs.php. HUD, card e overlay vengono da
   puzzle.css; qui la griglia e le carte. */

.pr-hud-spacer { width: 44px; } /* bilancia la freccia: le statistiche restano al centro */

.pr-grid {
	position: absolute;
	top: calc(64px + env(safe-area-inset-top, 0px));
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	left: calc(12px + env(safe-area-inset-left, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), var(--size, 90px));
	grid-auto-rows: var(--size, 90px);
	gap: var(--gap, 8px);
	justify-content: center;
	align-content: center;
}

.pr-card {
	display: block;
	width: 100%;
	height: 100%;
	appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
	perspective: 800px;
	-webkit-tap-highlight-color: transparent;
}

.pr-card:focus-visible { outline: 2px solid #eee; outline-offset: 2px; border-radius: 10px; }

.pr-inner {
	display: block; /* e' uno span dentro un button: senza, larghezza e altezza non valgono */
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform .32s ease;
	transform-style: preserve-3d;
}

.pr-card.is-open .pr-inner,
.pr-card.is-matched .pr-inner { transform: rotateY(180deg); }

.pr-face {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.pr-back {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2a2a2a;
	border: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .35);
	font-size: calc(var(--size, 90px) * .28);
}

.pr-back::before { content: '\2726'; } /* ✦, lo stesso delle mosse */

.pr-front { transform: rotateY(180deg); background: #0d0d0d; }
.pr-front img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Coppia trovata: resta scoperta, con un bordo che la distingue da quella appena girata. */
.pr-card.is-matched .pr-front { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.pr-card.is-matched { cursor: default; }
.pr-card.is-matched .pr-inner { animation: pr-found .4s ease .3s; }

@keyframes pr-found {
	50% { transform: rotateY(180deg) scale(1.06); }
}

/* Il sottotitolo del livello nella card: meno grande dei 16px generici. */
.pr-app #pz-level .pz-card p { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
	.pr-inner { transition: none; }
	.pr-card.is-matched .pr-inner { animation: none; }
}