/* The player page (site.css holds the PET's pieces). */

main.wrap { padding-top: 28px; }

.player { padding: 6px; }
#stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	background: #000;
	box-shadow: 0 0 0 var(--u) #21738c;
	overflow: hidden;
}
#stage:fullscreen { min-height: 100vh; }

#screen {
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	outline: none;
}

/* the ROM gate: the PET's navy screen */
#gate {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	color: var(--white);
	background: #10526b;
}
#gate[hidden], [hidden] { display: none !important; }
#gate h1 { margin: 0; font-size: 1.8rem; letter-spacing: 0.12em; }
#gate p { max-width: 560px; margin: 0; font-size: 1.1rem; }
#gate code { color: var(--gold); }
#status { color: var(--gold); min-height: 1.5em; font: 700 1rem/1.5 var(--caps); }
#gate .drop { font-size: 0.95rem; color: #9ce0f4; }

.actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
label.plate { position: relative; }
label.plate input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.plate:focus-within { border-image-source: url(../assets/ui/plate-on.png); }

.bar { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding: 12px 0 0; }
.bar .pill { cursor: pointer; background: none; }

.help { padding: 30px 0 0; }
.help .who { margin-top: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 5px 12px 5px 0; text-align: left; vertical-align: middle; }
th { font: 700 0.8rem/1 var(--caps); color: #6bdeff; text-transform: uppercase; }
td:first-child { font: 700 0.9rem/1 var(--caps); text-shadow: var(--edge); }

.help .note { margin: 10px 0 0; font-size: 0.95rem; color: #d6f4ff; }