/*
 * Diskmags section of the Demoscene page: the demo cards (demos.css) with a 4:3 DOS screen that
 * holds js-dos once Run is pressed (assets/js/diskmags.js).
 */

.pm-diskmag .pm-demo__screen.wp-block-image {
	aspect-ratio: 4 / 3;
}

/* VGA showed 320x200 on a 4:3 tube, so the frames stretch to fill it,
   smoothed like the running emulator; hard pixels at that non-integer
   scale come out in uneven widths. */
.pm-diskmag .pm-demo__screen img {
	object-fit: fill;
	image-rendering: auto;
}

.pm-diskmag__dos {
	width: 100%;
	height: 100%;
}

/* The emulator takes the keyboard only while it has focus, so the ring
   shows where keys go. */
.pm-diskmag__dos:focus-within {
	outline: 3px solid var(--pm-magenta);
	outline-offset: -3px;
}

.pm-diskmag__controls {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.pm-diskmag__control {
	padding: 0.6rem 1rem;
	border: 1px solid var(--pm-violet);
	background: transparent;
	color: var(--pm-violet);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.pm-diskmag__control:hover,
.pm-diskmag__control:focus-visible {
	border-color: var(--pm-magenta);
	color: var(--pm-magenta);
}

/* Kept rendered while empty: a hidden live region may not be announced. */
.pm-diskmag__status {
	margin: 0;
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
}

.pm-diskmag__status:not(:empty) {
	margin-top: var(--wp--preset--spacing--20);
}

/* A running mag takes the whole row, and its screen grows as far as the
   window height allows with room left for the heading and controls. */
.pm-diskmags > .pm-diskmag.is-running {
	grid-column: 1 / -1;
}

.pm-diskmag.is-running .pm-demo__screen.wp-block-image {
	width: min(100%, calc((100vh - 12rem) * 4 / 3));
	margin-inline: auto;
}

.pm-diskmag.is-running .pm-diskmag__controls {
	justify-content: center;
}

/* Listed after the running size so full screen wins; js-dos letterboxes
   the 4:3 picture inside it. */
.pm-diskmag .pm-demo__screen.wp-block-image:fullscreen {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	aspect-ratio: auto;
	background: #000;
	box-shadow: none;
	display: flex;
	flex-direction: column;
}

/* Over the letterbox bar above the 4:3 picture, clear of a phone's notch. */
.pm-diskmag__exit {
	position: absolute;
	top: max(var(--wp--preset--spacing--20), env(safe-area-inset-top));
	right: max(var(--wp--preset--spacing--20), env(safe-area-inset-right));
	z-index: 10;
	background: var(--pm-night);
}

.pm-demo__screen:fullscreen .pm-diskmag__dos {
	flex: 1;
	min-height: 0;
}

/* On-screen keys for touch screens (assets/js/diskmag-keys.js). */
.pm-diskmag__keys {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.pm-diskmag__keys[hidden] {
	display: none;
}

.pm-demo__screen:fullscreen .pm-diskmag__keys {
	margin: 0;
	padding: var(--wp--preset--spacing--20);
}

/* 44px targets; no double-tap zoom, text selection or callout, which a
   held key would otherwise trigger. */
.pm-diskmag__key {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--pm-violet);
	background: transparent;
	color: var(--pm-violet);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.pm-diskmag__key:active,
.pm-diskmag__key:focus-visible {
	border-color: var(--pm-magenta);
	color: var(--pm-magenta);
}

.pm-diskmag__type {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--pm-text);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
}

.pm-diskmag__type[hidden] {
	display: none;
}

/* Above the screen while the mag runs in the page (diskmag-keys.js); the
   margin clears the sticky header when the field scrolls to the top. */
.pm-diskmag > .pm-diskmag__type {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--30);
	scroll-margin-top: calc(var(--pm-header-height, 4.25rem) + 0.75rem);
}

/* 16px keeps iOS from zooming the page when the field takes focus. */
.pm-diskmag__type input {
	width: 7rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--pm-violet);
	background: transparent;
	color: var(--pm-text);
	font-family: var(--pm-mono);
	font-size: 1rem;
}

.pm-diskmag__type input:focus-visible {
	outline: 3px solid var(--pm-magenta);
	outline-offset: 1px;
}