/**
 * Retro / Pixel Theme
 *
 * Nostalgic pixel-art aesthetic. For retro-style games.
 * Dark charcoal background, retro green accents, gold highlights,
 * Press Start 2P headings, JetBrains Mono body, sharp corners,
 * optional CRT scanline overlay, NES-style menu buttons.
 */
@layer pkp-theme {

	/* ── Theme variable overrides ───────────────────────── */
	.pkp-theme-retro-pixel {
		--pkp-color-primary: #4ade80;
		--pkp-color-secondary: #a3a3a3;
		--pkp-color-background: #1a1a2e;
		--pkp-color-surface: #16213e;
		--pkp-color-text: #e2e8f0;
		--pkp-color-text-muted: #94a3b8;
		--pkp-color-accent: #fbbf24;
		--pkp-color-link: #4ade80;
		--pkp-color-link-hover: #86efac;
		--pkp-color-border: #4ade80;
		--pkp-font-heading: 'Press Start 2P', monospace;
		--pkp-font-body: 'JetBrains Mono', monospace;
		--pkp-border-radius: 0px;

		/* Retro-pixel shadow/glow tokens */
		--pkp-shadow-card: 4px 4px 0 rgba(74, 222, 128, 0.15);
		--pkp-shadow-card-hover: 4px 4px 0 rgba(74, 222, 128, 0.3);
		--pkp-shadow-glow: 0 0 12px rgba(74, 222, 128, 0.25);
		--pkp-shadow-pixel-border: inset 0 0 0 2px #4ade80;
	}

	/* ── CRT scanline overlay (pure CSS, toggleable) ───── */
	.pkp-theme-retro-pixel.pkp-body::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 9998;
		pointer-events: none;
		background: repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(0, 0, 0, 0.06) 2px,
			rgba(0, 0, 0, 0.06) 4px
		);
	}

	/* ── Subtle screen glow on content area ────────────── */
	.pkp-theme-retro-pixel .pkp-root {
		box-shadow: inset 0 0 80px rgba(74, 222, 128, 0.03);
	}

	/* ── Body background ───────────────────────────────── */
	.pkp-theme-retro-pixel.pkp-body {
		background: var(--pkp-color-background);
		image-rendering: pixelated;
	}

	/* ── Headings: Press Start 2P ──────────────────────── */
	.pkp-theme-retro-pixel h1,
	.pkp-theme-retro-pixel .pkp-hero__title {
		font-family: var(--pkp-font-heading);
		font-size: 1.8rem;
		font-weight: 400;
		color: var(--pkp-color-primary);
		letter-spacing: 0.02em;
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	}

	.pkp-theme-retro-pixel h2,
	.pkp-theme-retro-pixel .pkp-section__title {
		font-family: var(--pkp-font-heading);
		font-size: 0.85rem;
		font-weight: 400;
		color: var(--pkp-color-primary);
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
	}

	/* ── Section headings with NES-style decorative line ── */
	.pkp-theme-retro-pixel .pkp-section__title {
		border-bottom: 2px solid var(--pkp-color-primary);
		text-align: center;
		text-transform: uppercase;
		letter-spacing: 2px;
		padding-bottom: var(--pkp-spacing-sm);
	}

	/* ── Section dividers ──────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-section {
		padding-bottom: var(--pkp-spacing-xl);
		border-bottom: 2px dashed #2a3a5e;
	}

	.pkp-theme-retro-pixel .pkp-section:last-child {
		border-bottom: none;
	}

	/* ── Hero section ──────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-hero {
		background: #0f0f23;
		border-bottom: 4px solid var(--pkp-color-primary);
	}

	.pkp-theme-retro-pixel .pkp-hero--has-art::before {
		background: rgba(26, 26, 46, 0.7);
	}

	.pkp-theme-retro-pixel .pkp-hero__tagline {
		font-family: var(--pkp-font-body);
		color: var(--pkp-color-accent);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
	}

	/* ── Navigation — NES-style menu ──────────────────── */
	.pkp-theme-retro-pixel .pkp-nav {
		background: #0f0f23;
		border-bottom: 2px solid var(--pkp-color-primary);
	}

	.pkp-theme-retro-pixel .pkp-nav__link {
		font-family: var(--pkp-font-heading);
		font-size: 9px;
		color: var(--pkp-color-text-muted);
		border-bottom: none;
		padding: 14px 16px;
		position: relative;
		letter-spacing: 1px;
	}

	.pkp-theme-retro-pixel .pkp-nav__link::before {
		content: '\00a0\00a0';
		white-space: pre;
	}

	.pkp-theme-retro-pixel .pkp-nav__link:hover,
	.pkp-theme-retro-pixel .pkp-nav__link:focus-visible {
		color: var(--pkp-color-primary);
		border-bottom-color: transparent;
	}

	.pkp-theme-retro-pixel .pkp-nav__link:hover::before,
	.pkp-theme-retro-pixel .pkp-nav__link:focus-visible::before {
		content: '> ';
	}

	.pkp-theme-retro-pixel .pkp-nav__link--active {
		color: var(--pkp-color-primary);
		border-bottom-color: transparent;
	}

	.pkp-theme-retro-pixel .pkp-nav__link--active::before {
		content: '> ';
	}

	/* ── Card surfaces — pixelated borders ─────────────── */
	.pkp-theme-retro-pixel .pkp-factsheet {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-contact-card {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-key-request {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	/* ── Factsheet — game manual stats page ────────────── */
	.pkp-theme-retro-pixel .pkp-factsheet__title {
		font-family: var(--pkp-font-heading);
		font-size: 0.65rem;
		color: var(--pkp-color-accent);
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
		border-bottom: 2px solid var(--pkp-color-primary);
		padding-bottom: var(--pkp-spacing-sm);
		margin-bottom: var(--pkp-spacing-md);
		letter-spacing: 2px;
	}

	.pkp-theme-retro-pixel .pkp-factsheet__label {
		font-family: var(--pkp-font-heading);
		font-size: 8px;
		color: var(--pkp-color-primary);
		letter-spacing: 1px;
	}

	.pkp-theme-retro-pixel .pkp-factsheet__value {
		font-family: var(--pkp-font-body);
		color: #e2e8f0;
	}

	.pkp-theme-retro-pixel .pkp-factsheet__item {
		border-bottom-color: #2a3a5e;
	}

	.pkp-theme-retro-pixel .pkp-factsheet__social {
		border-top-color: #2a3a5e;
	}

	.pkp-theme-retro-pixel .pkp-factsheet__social-link {
		background: transparent;
		border: 2px solid var(--pkp-color-primary);
		color: var(--pkp-color-primary);
		font-family: var(--pkp-font-body);
	}

	.pkp-theme-retro-pixel .pkp-factsheet__social-link:hover,
	.pkp-theme-retro-pixel .pkp-factsheet__social-link:focus-visible {
		background: var(--pkp-color-primary);
		color: #1a1a2e;
	}

	/* ── Screenshot grid with pixel-art border frames ──── */
	.pkp-theme-retro-pixel .pkp-screenshots-grid {
		gap: 8px;
	}

	.pkp-theme-retro-pixel .pkp-screenshot {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-screenshot:hover {
		transform: none;
		box-shadow: var(--pkp-shadow-card-hover);
		border-color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-screenshot__caption {
		background: #16213e;
		color: var(--pkp-color-text-muted);
		font-family: var(--pkp-font-body);
		border-top: 1px solid #2a3a5e;
	}

	/* ── Key Art ────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-keyart {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-keyart:hover {
		box-shadow: var(--pkp-shadow-card-hover);
		border-color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-keyart__info {
		border-top: 1px solid #2a3a5e;
	}

	/* ── Logos ──────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-logo {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-logo:hover {
		box-shadow: var(--pkp-shadow-card-hover);
		border-color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-logo__preview--checkered {
		background-image: repeating-conic-gradient(#16213e 0% 25%, #1a2a4e 0% 50%);
		background-size: 16px 16px;
	}

	.pkp-theme-retro-pixel .pkp-logo__preview--dark {
		background: #0f0f23;
	}

	.pkp-theme-retro-pixel .pkp-logo__info {
		border-top-color: #2a3a5e;
	}

	.pkp-theme-retro-pixel .pkp-logo__format {
		background: rgba(74, 222, 128, 0.12);
		color: var(--pkp-color-primary);
		font-family: var(--pkp-font-body);
	}

	/* ── GIFs ──────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-gif {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-gif:hover {
		transform: none;
		box-shadow: var(--pkp-shadow-card-hover);
		border-color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-gif__caption {
		background: #16213e;
		color: var(--pkp-color-text-muted);
		font-family: var(--pkp-font-body);
		border-top: 1px solid #2a3a5e;
	}

	/* ── B-Roll items ──────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-broll-item {
		background: #16213e;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-broll-item:hover {
		background: #1a2a4e;
		border-color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-broll-item__icon {
		background: var(--pkp-color-primary);
		color: #1a1a2e;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	}

	/* ── Trailer embeds ────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-trailer__embed {
		border: 2px solid var(--pkp-color-primary);
		box-shadow: var(--pkp-shadow-card);
	}

	.pkp-theme-retro-pixel .pkp-trailer__title {
		font-family: var(--pkp-font-heading);
		font-size: 0.65rem;
		color: var(--pkp-color-accent);
	}

	/* ── NES-style buttons ─────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-btn--primary {
		font-family: var(--pkp-font-heading);
		font-size: 9px;
		background: var(--pkp-color-primary);
		border: 2px solid var(--pkp-color-primary);
		color: #1a1a2e;
		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.pkp-theme-retro-pixel .pkp-btn--primary:hover,
	.pkp-theme-retro-pixel .pkp-btn--primary:focus-visible {
		background: #86efac;
		border-color: #86efac;
		color: #1a1a2e;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
		transform: translate(2px, 2px);
	}

	.pkp-theme-retro-pixel .pkp-btn--outline {
		font-family: var(--pkp-font-heading);
		font-size: 9px;
		color: var(--pkp-color-primary);
		background: transparent;
		border: 2px solid var(--pkp-color-primary);
		box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.pkp-theme-retro-pixel .pkp-btn--outline:hover,
	.pkp-theme-retro-pixel .pkp-btn--outline:focus-visible {
		background: var(--pkp-color-primary);
		color: #1a1a2e;
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
		transform: translate(2px, 2px);
	}

	/* ── Copy button ───────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-copy-btn {
		font-family: var(--pkp-font-body);
		border: 2px solid #2a3a5e;
		color: var(--pkp-color-text-muted);
	}

	.pkp-theme-retro-pixel .pkp-copy-btn:hover,
	.pkp-theme-retro-pixel .pkp-copy-btn:focus-visible {
		border-color: var(--pkp-color-primary);
		color: var(--pkp-color-primary);
		background: rgba(74, 222, 128, 0.08);
	}

	/* ── Awards ─────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-award {
		border-bottom-color: #2a3a5e;
	}

	.pkp-theme-retro-pixel .pkp-award__icon {
		background: rgba(251, 191, 36, 0.15);
		color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-award__result {
		font-family: var(--pkp-font-body);
		background: rgba(74, 222, 128, 0.12);
		color: var(--pkp-color-primary);
	}

	/* ── Credits ────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-credit {
		border-bottom-color: #2a3a5e;
		font-family: var(--pkp-font-body);
	}

	/* ── Team ───────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-team-member__photo {
		border-radius: 0;
		box-shadow: 4px 4px 0 rgba(74, 222, 128, 0.15);
		border: 2px solid var(--pkp-color-primary);
	}

	.pkp-theme-retro-pixel .pkp-team-member__photo--placeholder {
		background: #16213e;
		border: 2px dashed var(--pkp-color-primary);
		border-radius: 0;
	}

	.pkp-theme-retro-pixel .pkp-team-member__name {
		font-family: var(--pkp-font-heading);
		font-size: 0.6rem;
		color: #e2e8f0;
	}

	.pkp-theme-retro-pixel .pkp-team-member__role {
		font-family: var(--pkp-font-body);
		color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-team-member__bio {
		font-family: var(--pkp-font-body);
	}

	.pkp-theme-retro-pixel .pkp-team-member__social-link {
		background: transparent;
		border: 2px solid var(--pkp-color-primary);
		color: var(--pkp-color-primary);
		border-radius: 0;
		font-family: var(--pkp-font-body);
	}

	.pkp-theme-retro-pixel .pkp-team-member__social-link:hover,
	.pkp-theme-retro-pixel .pkp-team-member__social-link:focus-visible {
		background: var(--pkp-color-primary);
		color: #1a1a2e;
	}

	/* ── Contact card ──────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-contact-card__social {
		border-top-color: #2a3a5e;
	}

	.pkp-theme-retro-pixel .pkp-contact-card__social-link {
		background: transparent;
		border: 2px solid var(--pkp-color-primary);
		border-radius: 0;
		color: var(--pkp-color-primary);
		font-family: var(--pkp-font-body);
	}

	.pkp-theme-retro-pixel .pkp-contact-card__social-link:hover {
		background: var(--pkp-color-primary);
		color: #1a1a2e;
	}

	/* ── Description section ───────────────────────────── */
	.pkp-theme-retro-pixel .pkp-description__tagline {
		font-family: var(--pkp-font-heading);
		font-size: 0.85rem;
		color: var(--pkp-color-accent);
		text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
	}

	.pkp-theme-retro-pixel .pkp-description__features-title {
		font-family: var(--pkp-font-heading);
		font-size: 0.6rem;
		color: var(--pkp-color-accent);
	}

	.pkp-theme-retro-pixel .pkp-features-list li {
		font-family: var(--pkp-font-body);
		list-style: none;
		padding-left: 1.5em;
		position: relative;
	}

	.pkp-theme-retro-pixel .pkp-features-list li::before {
		content: '\25B6';
		position: absolute;
		left: 0;
		color: var(--pkp-color-primary);
		font-size: 0.7em;
	}

	/* ── Footer ─────────────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-footer {
		border-top: 2px solid var(--pkp-color-primary);
		font-family: var(--pkp-font-body);
	}

	/* ── Section header title (within flex header) ─────── */
	.pkp-theme-retro-pixel .pkp-section-header .pkp-section__title {
		text-align: left;
	}

	/* ── Selection color ───────────────────────────────── */
	.pkp-theme-retro-pixel ::selection {
		background: var(--pkp-color-primary);
		color: #1a1a2e;
	}

	/* ── Empty state ───────────────────────────────────── */
	.pkp-theme-retro-pixel .pkp-empty {
		background: #16213e;
		border: 2px dashed var(--pkp-color-primary);
		color: var(--pkp-color-text-muted);
		font-family: var(--pkp-font-body);
	}

	/* ── Hamburger menu (mobile) ─────────────────────── */
	.pkp-theme-retro-pixel .pkp-nav__toggle {
		color: var(--pkp-color-primary);
	}

	.pkp-theme-retro-pixel .pkp-nav__toggle:hover,
	.pkp-theme-retro-pixel .pkp-nav__toggle:focus-visible {
		color: var(--pkp-color-accent);
	}

	/* ── Key request section ──────────────────────────── */
	.pkp-theme-retro-pixel .pkp-key-request__text {
		font-family: var(--pkp-font-body);
	}

	/* ── Scroll download button overlay ──────────────── */
	.pkp-theme-retro-pixel .pkp-screenshot__download {
		background: rgba(26, 26, 46, 0.8);
		border-radius: 0;
	}

	.pkp-theme-retro-pixel .pkp-gif__download {
		background: rgba(26, 26, 46, 0.8);
		border-radius: 0;
	}

	/* ── Respect prefers-reduced-motion ──────────────── */
	@media (prefers-reduced-motion: reduce) {
		.pkp-theme-retro-pixel .pkp-btn--primary:hover,
		.pkp-theme-retro-pixel .pkp-btn--primary:focus-visible,
		.pkp-theme-retro-pixel .pkp-btn--outline:hover,
		.pkp-theme-retro-pixel .pkp-btn--outline:focus-visible {
			transform: none;
		}
	}

	/* ── Blinking cursor after hero title ───────────────── */
	@keyframes pkp-retro-blink {
		0%, 100% { opacity: 1; }
		50% { opacity: 0; }
	}

	.pkp-theme-retro-pixel .pkp-hero__title::after {
		content: '_';
		animation: pkp-retro-blink 1s step-end infinite;
		margin-left: 4px;
	}

	/* ── Corner bracket effect on factsheet ─────────────── */
	.pkp-theme-retro-pixel .pkp-factsheet::before,
	.pkp-theme-retro-pixel .pkp-factsheet::after {
		content: '';
		position: absolute;
		width: 12px;
		height: 12px;
		border-color: var(--pkp-color-primary);
		border-style: solid;
	}

	.pkp-theme-retro-pixel .pkp-factsheet {
		position: relative;
	}

	.pkp-theme-retro-pixel .pkp-factsheet::before {
		top: -2px;
		left: -2px;
		border-width: 2px 0 0 2px;
	}

	.pkp-theme-retro-pixel .pkp-factsheet::after {
		bottom: -2px;
		right: -2px;
		border-width: 0 2px 2px 0;
	}

	/* ── Screen flicker on card hover ──────────────────── */
	@keyframes pkp-retro-flicker {
		0% { opacity: 1; }
		3% { opacity: 0.85; }
		6% { opacity: 1; }
		100% { opacity: 1; }
	}

	.pkp-theme-retro-pixel .pkp-screenshot:hover {
		animation: pkp-retro-flicker 0.15s ease;
	}

	/* ── Respect prefers-reduced-motion for new effects ── */
	@media (prefers-reduced-motion: reduce) {
		.pkp-theme-retro-pixel .pkp-hero__title::after {
			animation: none;
			content: '';
		}

		.pkp-theme-retro-pixel .pkp-screenshot:hover {
			animation: none;
		}
	}
}