/* ==========================================================================
   Games: the GAMES folder and the games in it (apps/games.js, stack.js, vector.js, run.js)
   ========================================================================== */

/* Shared shell: a canvas that fills the window, an overlay for start / pause / game over,
   and a touch pad that only shows on touch screens. */
.game {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: #000;
	container-type: inline-size;
}
.game__stage { position: relative; flex: 1; min-height: 300px; overflow: hidden; }
.game__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	outline: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.game__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	background: radial-gradient(80% 70% at 50% 45%, rgb(40 3 3 / 0.82), rgb(0 0 0 / 0.9));
}
.game__overlay[hidden] { display: none; }
.game__big {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(30px, 9cqi, 60px);
	line-height: 0.95;
	text-transform: uppercase;
	color: var(--white);
	text-shadow: var(--text-glow-white);
}
.game__sub { margin: 0; font-family: var(--f-num); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); text-shadow: var(--text-glow); }
.game__hint { margin: 0; color: var(--pink); }
.game__keys {
	display: grid;
	grid-template-columns: auto auto;
	gap: 2px 14px;
	margin: 4px 0 6px;
	color: var(--blush);
	font-size: 18px;
	text-align: left;
}
.game__keys dt { color: var(--white); text-align: right; }
.game__keys dd { margin: 0; color: var(--pink); }
.game__overlay .btn { min-width: 150px; }
@media (pointer: coarse) {
	.game__keys--keyboard { display: none; }
}
.game__keys--touch { display: none; }
@media (pointer: coarse) {
	.game__keys--touch { display: grid; }
}

/* Touch pad under the playfield. */
.game__pad {
	display: none;
	flex: none;
	gap: 6px;
	padding: 8px 10px 10px;
	border-top: 1.5px solid var(--red-deep);
	background: #050000;
}
@media (pointer: coarse) {
	.game__pad { display: grid; }
}
.game__pad button {
	display: grid;
	place-items: center;
	min-height: 52px;
	border: 2px solid var(--red);
	border-radius: 2px;
	background: #0a0101;
	color: var(--white);
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.game__pad button.is-down,
.game__pad button:active { background: var(--red); color: var(--black); box-shadow: var(--glow); }
.game__pad .pd-glyph { width: 22px; height: 22px; }

/* STACK.EXE */
.game--stack .game__pad { grid-template-columns: repeat(6, 1fr); }

/* VECTOR.EXE: the crosshair is drawn on the canvas, so hide the system cursor over it. */
.game--vector .game__canvas { cursor: none; }
.game--vector .game__overlay { background: radial-gradient(80% 70% at 50% 45%, rgb(30 0 0 / 0.7), rgb(0 0 0 / 0.86)); }

/* NIGHT RUN.EXE */
.game--run .game__stage { min-height: 220px; }
.game--run .game__pad { grid-template-columns: 1fr 1fr; }
.game--run .game__pad button { min-height: 60px; font-size: 14px; }

/* PODUNK CITY.EXE: the town is drawn on the canvas; drag to steer, two buttons on touch. */
.game--city .game__canvas { cursor: crosshair; }
.game--city .game__pad { grid-template-columns: 1fr 1fr; }
.game--city .game__pad button { min-height: 58px; font-size: 14px; }

@media (max-width: 899px) {
	.game__big { font-size: clamp(30px, 11cqi, 52px); }
	/* A portrait phone would be mostly sky: keep the street square and centred. */
	.game--run { justify-content: center; }
	.game--run .game__stage { flex: 0 1 auto; aspect-ratio: 1; max-height: 68vh; }
}

/* --------------------------------------------------------------------------
   High scores: the board on a game's overlay after a run (core/scores.js), and the
   HIGH SCORES window (apps/scores.js).
   -------------------------------------------------------------------------- */

.game__overlay.has-board,
.snake__overlay.has-board { align-content: center; justify-items: center; gap: 10px; overflow-y: auto; padding: 16px; }
.game__overlay.has-board .game__keys { display: none; }
.hiscore {
	width: min(340px, 100%);
	padding: 10px 12px 12px;
	border: 1.5px solid var(--red-deep);
	background: rgb(0 0 0 / 0.6);
	text-align: left;
}
.hiscore__head {
	margin: 0 0 6px;
	font-family: var(--f-num);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--red);
	text-shadow: var(--text-glow);
}
.hiscore__body { display: grid; gap: 8px; }
.hiscore__list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.hiscore__row {
	display: grid;
	grid-template-columns: 2.2ch 1fr auto;
	gap: 10px;
	align-items: baseline;
	padding: 1px 4px;
	color: var(--blush);
	font-size: 19px;
	line-height: 1.1;
}
.hiscore__rank { color: var(--red); text-align: right; }
.hiscore__name { overflow: hidden; color: var(--white); text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.hiscore__score { font-variant-numeric: tabular-nums; }
.hiscore__row:nth-child(1) .hiscore__name { color: #ffd36b; text-shadow: 0 0 8px rgb(255 190 60 / 0.6); }
.hiscore__row.is-me { background: rgb(255 69 69 / 0.22); outline: 1px solid var(--red); }
.hiscore__row.is-new { animation: hiscore-flash 0.5s steps(2) 6; }
.hiscore__row--empty { display: block; color: var(--pink); }
.hiscore__note, .hiscore__wait { margin: 0; color: var(--pink); font-size: 18px; line-height: 1.15; }
.hiscore__nudge { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--red-deep); }
.hiscore__nudge p { margin: 0; color: var(--white); font-size: 18px; line-height: 1.15; }
.hiscore__nudge .hiscore__small { color: var(--pink); font-size: 15px; }
.hiscore__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.hiscore .btn { min-width: 0; }
.btn--small { min-height: 34px; padding: 4px 12px; font-size: 11px; }
@keyframes hiscore-flash { 50% { background: rgb(255 211 107 / 0.35); } }
@media (prefers-reduced-motion: reduce) { .hiscore__row.is-new { animation: none; } }
:root[data-motion='reduce'] .hiscore__row.is-new { animation: none; }

.scores { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #050000; }
.scores__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 10px;
	border-bottom: 1.5px solid var(--red-deep);
}
.scores__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 6px;
	border: 1.5px solid var(--red-deep);
	background: #0a0101;
	color: var(--pink);
	font-family: var(--f-display);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: var(--cursor-hover);
}
.scores__tab img { width: 22px; height: 22px; image-rendering: pixelated; }
.scores__tab[aria-selected='true'] { border-color: var(--red); background: var(--red); color: var(--black); box-shadow: var(--glow); }
.scores__panel { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 16px; }
.scores__panel .hiscore__row { font-size: 22px; padding: 3px 6px; }
.scores__title { margin: 0; font-family: var(--f-display); font-size: 20px; font-weight: 400; text-transform: uppercase; color: var(--white); text-shadow: var(--text-glow-white); }
.scores__play { justify-self: start; }
.scores__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1.5px solid var(--red-deep); color: var(--pink); font-size: 18px; }
.scores__foot p { margin: 0; }
.scores__foot a:not(.btn) { color: var(--white); }
/* Phones: the top three on the game over screen (the whole board is in HIGH SCORES). */
@media (max-width: 899px) {
	.game__overlay .hiscore__row:nth-child(n + 4),
	.snake__overlay .hiscore__row:nth-child(n + 4) { display: none; }
	.game__overlay.has-board .game__sub, .game__overlay.has-board .game__hint { font-size: 17px; }
}