/**
 * Neon Tetris — Fezo Games Core integration overlay styling.
 *
 * Surgical addition pre game-over overlay redesign. Existing `tetris.css` ostáva
 * nedotknutý. Konflikty riešené BEM prefixom `.fezo-tetris__`.
 *
 * Tetris pattern: overlay-based (NIE separátny modal). Tetris už má `.nt-overlay`
 * pre pre-game/pause/game-over screens; Fezo elements sa injectujú do toho istého
 * overlay v gameOver().
 *
 * @since 2.0.0
 */

/* ─── Self-hosted fonts (latin-ext pre Slovak diakritiku) ──────────────────── */

@font-face {
	font-family: 'Bruno Ace';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/BrunoAce-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
}

/* ─── Fezo overlay extension — injected DOM ────────────────────────────────── */

.neon-tetris .fezo-tetris__extension {
	display: contents; /* prepúšťa children priamo do .nt-overlay flex container */
}

/* Game-over state: hide legacy "Pripravený?" tagline, show Fezo extension only. */
.neon-tetris .nt-overlay .fezo-tetris__avatar-area,
.neon-tetris .nt-overlay .fezo-tetris__final-score,
.neon-tetris .nt-overlay .fezo-tetris__secondary-stats,
.neon-tetris .nt-overlay .fezo-tetris__badge,
.neon-tetris .nt-overlay .fezo-tetris__actions {
	display: none; /* hidden by default (pre-game state) */
}

/* Game-over state: Fezo extension visible iba keď overlay má data-fezo-state="gameover".
   JS nastaví attribute v gameOver(), reset v start(). Cleaner ako :empty selectors. */
.neon-tetris .nt-overlay[data-fezo-state="gameover"] .fezo-tetris__avatar-area,
.neon-tetris .nt-overlay[data-fezo-state="gameover"] .fezo-tetris__final-score,
.neon-tetris .nt-overlay[data-fezo-state="gameover"] .fezo-tetris__secondary-stats,
.neon-tetris .nt-overlay[data-fezo-state="gameover"] .fezo-tetris__actions {
	display: flex;
}
.neon-tetris .nt-overlay[data-fezo-state="gameover"] .fezo-tetris__badge[data-variant] {
	display: inline-block;
}

/* Game-over: hide native pre-game tagline. Start button ostáva (= "Hrať znova"). */
.neon-tetris .nt-overlay[data-fezo-state="gameover"] .nt-overlay-text {
	display: none;
}

/* Re-order: avatar/score/stats/badge BEFORE legacy start button v overlay flex column.
   .nt-start-btn ostane natively last, čo dáva CTA-ako-najdôležitejšie pravidlo. */

/* ─── Avatar slot ──────────────────────────────────────────────────────────── */

.neon-tetris .fezo-tetris__avatar-area {
	min-height: 72px;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}
.neon-tetris .fezo-tetris__avatar-img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 229, 255, 0.06);
	border: 2px solid #2a2a44;
	box-shadow: 0 0 22px rgba(0, 229, 255, 0.25);
	display: block;
}

/* ─── Big score number ─────────────────────────────────────────────────────── */

.neon-tetris .fezo-tetris__final-score {
	font-family: 'Bruno Ace', sans-serif;
	font-size: clamp(2.2rem, 7vw, 3.2rem);
	letter-spacing: 0.04em;
	background: linear-gradient(135deg, #ff2d75, #00e5ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: 1;
	margin-bottom: 8px;
}

/* ─── Secondary stats row ──────────────────────────────────────────────────── */

.neon-tetris .fezo-tetris__secondary-stats {
	flex-direction: row;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	color: var(--nt-ink-dim);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.8rem;
	margin-bottom: 14px;
}
.neon-tetris .fezo-tetris__stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ─── Badge variants (PB / rank / champion / offline) ──────────────────────── */

.neon-tetris .fezo-tetris__badge {
	margin: 0 0 14px;
	padding: 8px 16px;
	border-radius: 999px;
	font-family: 'Bruno Ace', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	max-width: 90%;
}
.neon-tetris .fezo-tetris__badge[data-variant=""] { display: none; }

.neon-tetris .fezo-tetris__badge[data-variant="pb"] {
	background: rgba(255, 45, 117, 0.18);
	color: var(--nt-accent);
	border: 1px solid rgba(255, 45, 117, 0.45);
	box-shadow: 0 0 18px rgba(255, 45, 117, 0.35);
}

.neon-tetris .fezo-tetris__badge[data-variant="rank"] {
	background: rgba(0, 229, 255, 0.1);
	color: var(--nt-accent-2);
	border: 1px solid rgba(0, 229, 255, 0.35);
}

.neon-tetris .fezo-tetris__badge[data-variant="champion"] {
	background: linear-gradient(135deg, rgba(255, 209, 102, 0.3), rgba(255, 45, 117, 0.2));
	color: var(--nt-gold);
	border: 1px solid rgba(255, 209, 102, 0.55);
	box-shadow: 0 0 30px rgba(255, 209, 102, 0.45);
	animation: fezoTetrisChampionPulse 2s ease-in-out infinite;
}
@keyframes fezoTetrisChampionPulse {
	50% { box-shadow: 0 0 40px rgba(255, 209, 102, 0.7); }
}

.neon-tetris .fezo-tetris__badge[data-variant="offline"] {
	background: rgba(106, 106, 136, 0.15);
	color: var(--nt-ink-dim);
	border: 1px solid rgba(106, 106, 136, 0.35);
	font-size: 0.62rem;
	letter-spacing: 0.1em;
}

/* ─── Anonymous CTA pill ───────────────────────────────────────────────────── */

.neon-tetris .fezo-tetris__anonymous-cta {
	display: none;
	margin: 0 auto 14px;
	padding: 11px 22px;
	max-width: 320px;
	background: var(--nt-accent);
	color: #0a0a14;
	text-decoration: none;
	border-radius: 999px;
	font-family: 'Bruno Ace', sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 0 24px rgba(255, 45, 117, 0.5);
	transition: transform 0.2s, box-shadow 0.2s;
}
.neon-tetris .fezo-tetris__anonymous-cta:hover,
.neon-tetris .fezo-tetris__anonymous-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 0 32px rgba(255, 45, 117, 0.75);
	color: #0a0a14;
}

/* ─── Actions row (leaderboard link) ───────────────────────────────────────── */

.neon-tetris .fezo-tetris__actions {
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.neon-tetris .fezo-tetris__cta-link {
	color: var(--nt-ink-dim);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s;
}
.neon-tetris .fezo-tetris__cta-link:hover,
.neon-tetris .fezo-tetris__cta-link:focus-visible {
	color: var(--nt-accent-2);
	background: rgba(0, 229, 255, 0.06);
}

/* ─── Mobile breakpoint ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.neon-tetris .fezo-tetris__avatar-img {
		width: 56px;
		height: 56px;
	}
	.neon-tetris .fezo-tetris__final-score {
		font-size: clamp(1.8rem, 9vw, 2.4rem);
		margin-bottom: 6px;
	}
	.neon-tetris .fezo-tetris__secondary-stats {
		gap: 10px;
		font-size: 0.7rem;
		margin-bottom: 10px;
	}
	.neon-tetris .fezo-tetris__badge {
		font-size: 0.62rem;
		padding: 6px 12px;
	}
}