/* Puzzle jigsaw (VG-039) — solo pagina puzzle.php, mobile-first. */

html, body.pz-body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: #161616;
	color: #eee;
	overscroll-behavior: none;
}

#pz-app { position: fixed; inset: 0; }

#pz-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	display: block;
}

.pz-hud {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	padding-top: calc(10px + env(safe-area-inset-top, 0px));
	background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.pz-hud > * { pointer-events: auto; }

.pz-btn {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(0, 0, 0, .55);
	color: #eee;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.pz-btn[aria-pressed="true"] { background: #eee; color: #111; }
.pz-back { font-size: 18px; padding: 8px 14px; }

.pz-stats {
	display: flex;
	gap: 14px;
	font-variant-numeric: tabular-nums;
	font-size: 16px;
	background: rgba(0, 0, 0, .55);
	border-radius: 999px;
	padding: 9px 16px;
}

#pz-moves::before { content: '\2726\00a0'; opacity: .6; } /* ✦ mosse */

#pz-ghost {
	position: absolute;
	right: 10px;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	z-index: 2;
	max-width: 38vw;
	max-height: 30vh;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 6px;
	opacity: .85;
	pointer-events: none;
}

#pz-status {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	font-size: 16px;
	color: #999;
}

#pz-status[hidden] { display: none; }

#pz-overlay {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .7);
}

#pz-overlay[hidden] { display: none; }

.pz-card {
	background: #222;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 12px;
	padding: 28px 24px;
	max-width: 340px;
	width: calc(100vw - 48px);
	text-align: center;
}

.pz-card h1 { font-size: 22px; margin: 0 0 10px; }
.pz-card p { font-size: 16px; color: #bbb; margin: 0 0 20px; line-height: 1.5; }
.pz-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* ---- Fine partita: form identita' e classifica ---- */
.pz-card h2 { font-size: 17px; margin: 18px 0 10px; }
.pz-small { font-size: 13px !important; }

.pz-card form { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }

.pz-card input[type="text"],
.pz-card input[type="email"] {
	appearance: none;
	background: #161616;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 8px;
	color: #eee;
	padding: 10px 12px;
	font-size: 16px; /* >=16px: evita l'auto-zoom di iOS sul focus */
	font-family: inherit;
}

#pz-otp-input { text-align: center; letter-spacing: 6px; font-variant-numeric: tabular-nums; }

.pz-consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	text-align: left;
	font-size: 12px;
	color: #bbb;
}

.pz-consent input { margin-top: 2px; }
.pz-consent a { color: #eee; }

#pz-board-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	text-align: left;
	counter-reset: pos;
}

#pz-board-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font-size: 14px;
	counter-increment: pos;
}

#pz-board-list li::before { content: counter(pos) '.'; color: #888; margin-right: 6px; }
#pz-board-list li.you { color: #fff; font-weight: bold; }
#pz-board-list .pz-lb-thumb { flex: none; margin-right: -4px; }
#pz-board-list .pz-lb-thumb img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; display: block; }
#pz-board-list .pz-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
#pz-board-list .pz-lb-score { font-variant-numeric: tabular-nums; color: #bbb; flex: none; }

/* L'attributo hidden deve vincere anche sui display espliciti qui sopra. */
#pz-app [hidden] { display: none !important; }

/* ---- Classifica dall'HUD (overlay chiudibile) ---- */
.pz-hud-right { display: flex; gap: 8px; }
.pz-card { position: relative; }

.pz-card-close {
	position: absolute;
	top: 6px;
	right: 10px;
	border: 0;
	background: none;
	color: #bbb;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

@media (max-width: 430px) {
	.pz-hud .pz-btn { padding: 8px 11px; font-size: 13px; }
	.pz-stats { padding: 9px 12px; font-size: 14px; }
}

/* ---- Splash istruzioni (VG-041) ---- */
#pz-help {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .75);
}

.pz-help-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	text-align: left;
}

.pz-help-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.45;
	color: #ddd;
	padding: 8px 0;
}

.pz-help-list li span { font-size: 22px; line-height: 1.2; flex: none; }