/* Galactic Garbage Classic. All labels are bitmap text drawn by font.js into small canvases (scaled by --px). */
:root {
	--px: 2px; /* one font pixel on screen; game.js sets it to one playfield pixel */
	--lime: #78e628; --cyan: #28dcff; --gray: #606070; --dim: #aaaabe;
	--lp: 2px; /* one playfield pixel on screen, set by game.js (for the CRT lines) */
}

html, body { margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
	font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }

#stage { touch-action: none; position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box; }
#screen { position: relative; flex: none; background: #000; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
#crt { position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--lp) * 0.6), rgba(0, 0, 0, 0.32) calc(var(--lp) * 0.6), rgba(0, 0, 0, 0.32) var(--lp)); }
#crt[hidden] { display: none; }

/* bitmap text */
.px { margin: 0; display: flex; justify-content: center; }
.px canvas, .btn canvas, .ctl canvas { display: block; height: calc(7 * var(--px)); width: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
h2.px canvas { height: calc(14 * var(--px)); }
.px.big canvas { height: calc(14 * var(--px)); }

/* overlays */
.ov { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.78); }
.ov.show { display: flex; }
#title { background: none; justify-content: flex-end; padding-bottom: 5%; }
.menu, .panel { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--px)); padding: 0 12px; max-width: 100%; box-sizing: border-box; }
.panel { background: #000; border: var(--px) solid #fff; padding: calc(8 * var(--px)) calc(8 * var(--px)); }
.modes { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(3 * var(--px)); }
.help { min-height: calc(7 * var(--px)); }
.made { margin: 0; font-size: 11px; color: var(--gray); text-align: center; }
.made a { color: var(--dim); }

/* buttons: black, white pixel border, lime when focused or chosen */
.btn { appearance: none; background: #000; color: #fff; border: var(--px) solid #fff; border-radius: 0; cursor: pointer;
	min-height: 44px; min-width: calc(60 * var(--px)); padding: calc(4 * var(--px)) calc(7 * var(--px));
	display: flex; align-items: center; justify-content: center;
	clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, 0 calc(100% - var(--px)), 0 var(--px)); }
.btn.mode { min-width: 0; padding-inline: calc(4 * var(--px)); border-color: var(--gray); }
.btn.mode[aria-pressed="true"] { border-color: var(--lime); }
.btn.go { border-color: var(--lime); }
.btn:focus-visible, .btn:hover { border-color: var(--cyan); outline: none; }
.btn:active { background: #14501e; }
.btn:disabled { opacity: 0.4; cursor: default; }

/* under the playfield: a hint strip (on phones, somewhere to rest your finger) and the pause button */
#pad { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; box-sizing: border-box; }
#pad.touch { height: 72px; border: var(--px) dashed var(--gray); padding: 0 0 0 12px; }
#hint { flex: 1; justify-content: flex-start; }
.ctl { appearance: none; background: #000; border: var(--px) solid var(--gray); border-radius: 0; color: #fff;
	width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none; }
.ctl canvas { height: calc(7 * var(--px)); }
#pad.touch .ctl { height: 100%; width: 64px; border-width: 0 0 0 var(--px); }
.ctl:focus-visible { border-color: var(--cyan); outline: none; }
#screen.playing { cursor: crosshair; }