/* ============================================================
   NEON80S  ::  the thing behind the Konami code

   An arcade cabinet dropped over the page. The loud register is
   right here: there is nothing for sale on it, and a hidden game
   that arrived quietly would be missing the point.
   ============================================================ */

.neon-konami {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 12px, 3vw, 40px );
	background: rgba( 20, 20, 20, 0.92 );
}

.neon-konami[hidden] { display: none; }

.neon-konami__cabinet {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var( --wp--preset--color--cream, #ffffff );
	border: 3px solid var( --wp--preset--color--ink, #141414 );
	box-shadow: 10px 10px 0 var( --wp--preset--color--pink, #ff2d78 );
	max-width: 100%;
	max-height: 100%;
}

.neon-konami__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px 10px 16px;
	border-bottom: 3px solid var( --wp--preset--color--ink, #141414 );
	background: var( --wp--preset--color--acid, #f5e12b );
	flex: 0 0 auto;
}

.neon-konami__title {
	font-family: Jost, ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink, #141414 );
	margin: 0;
	line-height: 1.2;
}

.neon-konami__by {
	font-family: Jost, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink, #141414 );
	opacity: 0.72;
	margin: 0;
	white-space: nowrap;
}

.neon-konami__close {
	margin-left: auto;
	flex: 0 0 auto;
	border: 2px solid var( --wp--preset--color--ink, #141414 );
	background: var( --wp--preset--color--ink, #141414 );
	color: var( --wp--preset--color--cream, #ffffff );
	font-family: Jost, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 14px;
	cursor: pointer;
	border-radius: 0;
	line-height: 1;
}

.neon-konami__close:hover {
	background: var( --wp--preset--color--pink, #ff2d78 );
	color: var( --wp--preset--color--ink, #141414 );
}

.neon-konami__close:focus-visible {
	outline: 3px solid var( --wp--preset--color--acid, #f5e12b );
	outline-offset: 2px;
}

/* The screen. The game draws a 224 by 256 portrait canvas, so the frame keeps
   that ratio and takes whichever of the two dimensions runs out first. */
.neon-konami__screen {
	flex: 1 1 auto;
	min-height: 0;
	background: #000;
	display: flex;
}

.neon-konami__screen iframe {
	display: block;
	border: 0;
	background: #000;
	width: min( calc( 78vh * 224 / 256 ), calc( 100vw - 40px ) );
	height: min( 78vh, calc( ( 100vw - 40px ) * 256 / 224 ) );
}

.neon-konami__hint {
	flex: 0 0 auto;
	border-top: 3px solid var( --wp--preset--color--ink, #141414 );
	background: var( --wp--preset--color--cream, #ffffff );
	padding: 9px 16px;
	margin: 0;
	font-family: Jost, ui-sans-serif, system-ui, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--slate, #5c554a );
}

@media ( max-width: 520px ) {
	.neon-konami__cabinet { box-shadow: 6px 6px 0 var( --wp--preset--color--pink, #ff2d78 ); }
	.neon-konami__by { display: none; }
}