/* Duck Hunt, 42 Luxembourg.
   A dark arcade cabinet around a Game Boy screen: the page is the cabinet
   (scanlines, quest log), every content panel (.card) is the green screen.
   Jersey 10 for titles, Silkscreen for labels and buttons, IBM Plex Mono
   for reading. The rubber duck yellow is the only loud color. */

@font-face {
	font-family: "Jersey 10";
	src: url("/static/fonts/jersey-10.woff2") format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "Silkscreen";
	src: url("/static/fonts/silkscreen-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Plex Mono";
	src: url("/static/fonts/plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Plex Mono";
	src: url("/static/fonts/plex-mono-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	/* cabinet */
	--cab: #121412;
	--cab-line: #2c332c;
	--cab-text: #e6ebe0;
	--cab-muted: #98a394;
	/* screen: the four greens of the handheld */
	--g0: #e0f0c8;
	--g1: #a8c878;
	--g2: #4a7a3a;
	--g3: #16301a;
	--paper: #f4fae8;
	--band: #d2e6b4;
	--duck: #ffc93c;
	--danger: #b3261e;
	/* game tiles, readable on the dark water */
	--tile-red: #e0564c;
	--tile-green: #7cc35a;
	--tile-blue: #6a9be0;

	--title: "Jersey 10", ui-monospace, monospace;
	--label: "Silkscreen", ui-monospace, monospace;
	--body: "Plex Mono", ui-monospace, "DejaVu Sans Mono", monospace;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--cab); }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--cab);
	color: var(--cab-text);
	font: 16px/1.65 var(--body);
	-webkit-tap-highlight-color: transparent;
}
/* faint CRT scanlines over the whole cabinet */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .14) 2px 3px);
}

img { image-rendering: pixelated; }
a { color: var(--duck); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 4px solid var(--duck);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- top bar */

.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 28px;
	border-bottom: 2px solid var(--cab-line);
}
.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--duck);
	font: 34px/1 var(--title);
	text-decoration: none;
	white-space: nowrap;
}
.logo img { width: 36px; height: 36px; }
.player { display: flex; align-items: baseline; gap: 22px; color: var(--cab-muted); white-space: nowrap; }
.player a { color: var(--cab-muted); }
.player a:hover { color: var(--cab-text); }
.player b { color: var(--cab-text); }

/* ---------------------------------------------------------------- page */

.layout {
	flex: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 28px 64px;
}
body.on-quest .layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}
body.home .layout { max-width: 760px; }
/* fair stand: room for the student projects side by side */
body.home.stand .layout { max-width: 1400px; }
.content { min-width: 0; }

/* quest log, on the cabinet */
.quest { position: sticky; top: 24px; }
.quest h2 { margin: 0 0 14px; font: 30px/1 var(--title); color: var(--cab-muted); }
.quest ol { list-style: none; margin: 0; padding: 0; border-left: 4px solid var(--cab-line); }
.quest li { position: relative; padding: 4px 0 20px 26px; color: var(--cab-muted); }
.quest li::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 10px;
	width: 20px;
	height: 20px;
	background: var(--cab);
	border: 4px solid var(--cab-line);
}
.quest li.done { color: var(--cab-text); }
.quest li.done::before { background: var(--g1); border-color: var(--g1); }
.quest li.now { color: var(--duck); }
.quest li.now::before { background: var(--duck); border-color: var(--duck); }
.quest li a { display: block; color: inherit; text-decoration: none; }
.quest li a:hover .name, .quest li a:focus-visible .name { text-decoration: underline; text-underline-offset: 4px; }
.quest .day { display: block; font: 700 11px var(--label); letter-spacing: .04em; }
.quest .name { font: 28px/1 var(--title); }
.quest .side {
	margin: 10px 0 0;
	padding: 14px 16px;
	border: 4px dashed var(--cab-line);
	color: var(--cab-muted);
	font-size: 14px;
	line-height: 1.55;
}

.pond {
	position: relative;
	padding: 16px;
	border-top: 2px solid var(--cab-line);
	color: var(--cab-muted);
	font: 700 11px var(--label);
	letter-spacing: .04em;
	text-align: center;
}
.pond p { margin: 0; }
body.home .pond {
	height: 104px;
	padding: 0;
	border: 0;
	background:
		url("/static/sprites/reeds.svg") repeat-x left top / 128px 48px,
		linear-gradient(var(--g3), var(--g3)) left 48px / 100% 100% no-repeat;
}
body.home .pond p { position: absolute; bottom: 14px; width: 100%; color: var(--g1); }

/* ---------------------------------------------------------------- the screen */

.card {
	position: relative;
	margin-bottom: 40px;
	padding: 34px 40px;
	background: var(--g0);
	color: var(--g3);
	border: 4px solid var(--g3);
	box-shadow: 0 0 0 6px var(--cab-line), 10px 10px 0 6px #000;
}
.card a { color: var(--g3); font-weight: 700; }
.center { text-align: center; }

h1, h2 { margin: 0 0 18px; font-family: var(--title); font-weight: 400; line-height: .95; text-wrap: balance; }
.card h1 { font-size: 60px; }
.card h2 { font-size: 36px; }
p { margin: 0 0 14px; }
.card p { max-width: 66ch; }
.card.center p { margin-inline: auto; }

.step { margin-bottom: 6px; font: 700 12px var(--label); letter-spacing: .04em; color: var(--g2); }
.muted, .hint { color: var(--g2); }
.hint { margin-top: 26px; font-size: 15px; }
.error { color: var(--danger); font-weight: 700; }
.ok { color: var(--g2); font-weight: 700; }

.card code {
	padding: 1px 6px;
	background: var(--g1);
	font-family: var(--body);
	font-size: .94em;
}
.card pre {
	margin: 0 0 16px;
	padding: 16px 18px;
	background: var(--g3);
	color: var(--g0);
	font-size: 17px;
	overflow-x: auto;
}
.card pre code { padding: 0; background: none; color: inherit; }

/* subject text sits in a slightly darker band of the screen */
.riddle {
	margin: 20px 0 24px;
	padding: 20px 24px;
	background: var(--band);
	border-left: 6px solid var(--g3);
}
.riddle p:last-child, .riddle ul:last-child, .riddle ol:last-child { margin-bottom: 0; }
.riddle ul, .riddle ol { margin: 0 0 14px; padding-left: 24px; }
.riddle li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- buttons & forms */

.button {
	display: inline-block;
	padding: 12px 22px;
	border: 4px solid var(--g3);
	background: var(--duck);
	color: var(--g3);
	font: 700 14px/1.2 var(--label);
	letter-spacing: .03em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 4px 4px 0 var(--g3);
	touch-action: manipulation;
	transition: transform .08s, box-shadow .08s, background-color .15s;
}
.card a.button { color: var(--g3); }
.button:hover { background: #ffd666; }
.button:active { transform: translate(4px, 4px); box-shadow: none; }
.button.ghost { background: var(--g1); box-shadow: none; }
.button.ghost:hover { background: #bcd88e; }
.button.small { padding: 7px 12px; font-size: 12px; }
.link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--g2);
	font: inherit;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.answer { display: flex; gap: 14px; margin-top: 18px; }
.answer input {
	flex: 1;
	min-width: 0;
	padding: 12px 16px;
	border: 4px solid var(--g3);
	background: var(--paper);
	color: var(--g3);
	font: 16px var(--body);
	caret-color: var(--g3);
}
.answer input::placeholder { color: var(--g2); }

/* ---------------------------------------------------------------- title screen */

.title-screen { text-align: center; }
.logo-big {
	margin: 10px 0 6px;
	font-size: clamp(76px, 17vw, 168px);
	line-height: .85;
	color: var(--duck);
	text-shadow: 6px 6px 0 #000;
}
.edition { margin-bottom: 40px; font: 700 13px var(--label); letter-spacing: .05em; color: var(--cab-muted); }
.title-screen .card { max-width: 560px; margin-inline: auto; font-size: 17px; }
.press-start { margin: 24px 0 0; }
.press-start .button { animation: blink 1.4s steps(1) infinite; }
.press-start .button:hover, .press-start .button:focus-visible { animation: none; }
.stand-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
/* fair stand: QR code beside the intro on a laptop; a phone is already there */
.stand-intro { display: flex; justify-content: center; align-items: stretch; gap: 24px; }
.stand-intro > .card { flex: 0 1 560px; margin-inline: 0; }
.stand-qr { display: none; flex-direction: column; align-items: center; justify-content: center; width: 260px; text-align: center; }
.stand-qr img { width: 200px; height: 200px; image-rendering: pixelated; background: #fff; }
.stand-qr p { margin: 12px 0 0; font: 700 12px var(--label); letter-spacing: .03em; }
@media (min-width: 900px) { .stand-qr { display: flex; } }
@keyframes blink { 60% { opacity: .55; } }

/* the rubber duck floating on the home pond */
.bobber {
	position: absolute;
	left: 50%;
	top: -6px;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	animation: bob 1.6s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------------------------------------------------------------- oral & done */

.sprite { width: 64px; height: 64px; margin-bottom: 6px; }
.badge {
	display: inline-block;
	margin: 6px 0 18px;
	padding: 8px 18px;
	background: var(--g3);
	color: var(--duck);
	font: 40px/1 var(--title);
}
.phrase {
	margin: 24px auto;
	padding: 20px 24px;
	max-width: 540px;
	background: var(--duck);
	color: var(--g3);
	border: 4px solid var(--g3);
	box-shadow: 6px 6px 0 var(--g3);
	font: 38px/1.05 var(--title);
}
.phrase.typing::after {
	content: "";
	display: inline-block;
	width: .45em;
	height: .8em;
	margin-left: 4px;
	vertical-align: -.05em;
	background: var(--g3);
	animation: caret .8s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.duck-rain { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.duck-rain img { position: absolute; top: 0; left: 0; width: 40px; height: 40px; will-change: transform; }

/* ---------------------------------------------------------------- exam */

.steps { margin: 0 0 22px; padding-left: 24px; }
.steps li { margin-bottom: 12px; }
.steps pre { margin: 8px 0 0; }
.steps pre code { white-space: pre-wrap; word-break: break-word; }
.steps .button.small { margin-left: 6px; vertical-align: middle; }

/* ---------------------------------------------------------------- admin */

body.wide .card { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px; text-align: left; vertical-align: middle; border-bottom: 2px solid var(--g1); }
th { font: 700 11px var(--label); letter-spacing: .04em; color: var(--g2); }
td { font-variant-numeric: tabular-nums; }
tr.claimed td { color: var(--g2); text-decoration: line-through; }
tr.claimed td:last-child { text-decoration: none; }
td form { margin: 0; }
form.inline { display: inline; margin-left: 6px; }
.stage { padding: 2px 8px; font: 700 11px var(--label); background: var(--g1); color: var(--g3); }
.stage.game, .stage.memory { background: var(--duck); }
.stage.exam, .stage.oral { background: var(--g2); color: var(--g0); }
.stage.done { background: var(--g3); color: var(--g0); }

/* oral: the lifeguard to find, and the way out if they're away */
.lifeguard {
	display: inline-block; margin: 4px 0 14px; padding: 8px 18px;
	background: var(--duck); color: var(--g3);
	border: 4px solid var(--g3);
	font: 40px/1 var(--title);
}
.not-here { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.not-here .muted { font-size: 14px; }

/* admin: open / close the hunt */
.hunt-switch { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hunt-switch h1 { margin-bottom: 8px; }
.hunt-switch p.muted { margin: 0; }
.hunt-switch form { margin: 0; }
.hunt-switch.open h1::before { content: "● "; color: #3d7a22; }
.hunt-switch.closed { background: var(--band); }
.hunt-switch.closed h1::before { content: "■ "; color: var(--danger); }

/* solution sheet: one card per section, hints as numbered chips */
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; }
.toc a {
	display: flex; flex-direction: column; gap: 3px;
	padding: 10px 14px;
	background: var(--g1); color: var(--g3);
	border: 3px solid var(--g3);
	font: 22px/1 var(--title); text-decoration: none;
}
.toc a:hover, .toc a:focus-visible { background: var(--duck); }
.toc a span { font: 700 10px var(--label); letter-spacing: .04em; color: var(--g2); }
.sheet { scroll-margin-top: 20px; }
.sheet h1 { font-size: 48px; }
.sheet .sol { padding: 22px 0 6px; border-top: 3px dashed var(--g1); }
.sheet .sol:first-of-type { border-top: 0; padding-top: 4px; }
.sheet .sol h2 { font-size: 32px; }
.sheet .sol h2 code { background: var(--duck); font-size: .62em; vertical-align: middle; }
/* long one-liners wrap instead of scrolling; indentation is kept */
.sheet pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet ul, .sheet ol.plain { margin: 0 0 16px; padding-left: 24px; }
.sheet li { margin-bottom: 6px; }
ol.hints { list-style: none; counter-reset: hint; margin: 0 0 16px; padding: 0; }
ol.hints li {
	counter-increment: hint;
	position: relative;
	margin-bottom: 8px;
	padding: 10px 14px 10px 90px;
	background: var(--band);
	border-left: 6px solid var(--g2);
}
ol.hints li::before {
	content: "hint " counter(hint);
	position: absolute; left: 12px; top: 12px;
	font: 700 10px var(--label); letter-spacing: .04em; color: var(--g2);
}
ol.hints li:last-child { border-left-color: var(--g3); }
@media (max-width: 700px) {
	.sheet h1 { font-size: 38px; }
	.sheet .sol h2 { font-size: 26px; }
	ol.hints li { padding-left: 14px; padding-top: 28px; }
	ol.hints li::before { top: 9px; }
}

/* ---------------------------------------------------------------- shared game bits */

.game-head, .memory-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.progress { display: flex; gap: 6px; padding-top: 6px; }
.progress span, .progress a, .progress button {
	display: block; width: 14px; height: 14px; padding: 0;
	border: 3px solid var(--g3); background: var(--g0);
}
/* clickable dots (levels, practice rounds) grow a bit to be easy to hit */
.progress a, .progress button { width: 20px; height: 20px; cursor: pointer; }
.progress a:hover, .progress a:focus-visible, .progress button:hover, .progress button:focus-visible {
	outline: 3px solid var(--duck); outline-offset: 1px;
}
.progress .done { background: var(--g2); }
.progress .current { background: var(--duck); }
.progress.levels { flex-wrap: wrap; max-width: 340px; justify-content: flex-end; }
.replay {
	margin: 0 0 18px; padding: 10px 14px;
	background: var(--band); border-left: 6px solid var(--duck);
	font-size: 15px;
}
.replay a { white-space: nowrap; }
.solved { font-weight: 700; }
.solved code { background: var(--duck); }
.status { min-height: 1.6em; margin: 16px 0 10px; font-weight: 700; text-align: center; }
.status.won { color: var(--g2); }
.status.lost { color: var(--danger); }

.overlay {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(10, 12, 10, .78);
	overscroll-behavior: contain;
}
.overlay .card { max-width: 460px; width: 100%; margin: 0; text-align: center; }
.big { margin: 0 0 8px; }
.big img { width: 64px; }

/* ---------------------------------------------------------------- logic game */

.game-body {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(250px, 1fr);
	gap: 32px;
	margin-top: 10px;
}
.board-wrap { display: flex; flex-direction: column; align-items: center; }
.board {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	grid-template-rows: repeat(var(--rows), 1fr);
	width: min(100%, calc(var(--cols) * 58px));
	aspect-ratio: var(--cols) / var(--rows);
	background:
		radial-gradient(circle at 2px 2px, rgba(224, 240, 200, .12) 1.5px, transparent 2px) 0 0 / 20px 20px,
		var(--g3);
	border: 4px solid var(--g3);
}
.tile { position: relative; margin: 3px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); transition: background-color .2s; }
.tile.empty { background: transparent; box-shadow: none; }
.tile.red { background: var(--tile-red); }
.tile.green { background: var(--tile-green); }
.tile.blue { background: var(--tile-blue); }
.tile.star::after {
	content: "";
	position: absolute;
	inset: 22%;
	background: url("/static/sprites/star.svg") center / contain no-repeat;
	image-rendering: pixelated;
}
.duck-piece {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: calc(100% / var(--cols));
	height: calc(100% / var(--rows));
	transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
	transition: transform .18s ease-out;
	pointer-events: none;
}
.duck-piece img {
	width: 80%;
	transform: rotate(var(--angle)) scaleY(var(--flip, 1));
	transition: transform .18s ease-out;
	filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
.duck-piece.fallen { opacity: .3; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.speed { display: flex; gap: 8px; align-items: center; color: var(--g2); font: 700 11px var(--label); }
.speed input { width: 90px; accent-color: var(--g3); }

.editor { display: flex; flex-direction: column; gap: 18px; }
.fn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.fn-name { width: 36px; font: 30px/1 var(--title); }
.slot, .op {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 4px solid var(--g3);
	background: var(--paper);
	color: var(--g3);
	font: 26px/1 var(--title);
	cursor: pointer;
	touch-action: manipulation;
}
/* the pixel icons are drawn light: turn them dark green on the screen */
.slot img, .op img { width: 24px; height: 24px; filter: brightness(0) invert(13%) sepia(30%) saturate(800%) hue-rotate(80deg); }
.op { background: var(--g1); }
.op:hover, .slot:hover { background: #fff; }
.slot.red, .cond.red { background: var(--tile-red); }
.slot.green, .cond.green { background: var(--tile-green); }
.slot.blue, .cond.blue { background: var(--tile-blue); }
.slot.selected { outline: 4px solid var(--duck); outline-offset: 2px; }
.slot.running { box-shadow: 0 0 0 4px var(--duck), 0 0 0 8px var(--g3); }
/* still to run once a call returns */
.slot { position: relative; }
.slot.pending { outline: 3px dashed var(--g2); outline-offset: 3px; }
.slot.pending[data-waits]::after {
	content: attr(data-waits);
	position: absolute;
	top: -12px;
	right: -12px;
	padding: 1px 4px;
	background: var(--g3);
	color: var(--g0);
	font: 700 10px var(--label);
}
.stack { align-self: stretch; margin-top: 18px; padding: 12px 14px; background: var(--band); border: 4px solid var(--g3); }
.stack .label { margin: 0 0 8px; font: 700 11px var(--label); letter-spacing: .04em; color: var(--g2); }
.stack p.muted { margin: 0; font-size: 14px; }
.stack ol { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stack li { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.stack-name { min-width: 120px; font: 700 11px var(--label); color: var(--g3); }
.stack-times { font: 700 13px var(--label); color: var(--g2); }
.slot.mini { width: 30px; height: 30px; border-width: 3px; font-size: 18px; pointer-events: none; }
.slot.mini img { width: 16px; height: 16px; }
.paint-red { color: var(--tile-red); }
.paint-green { color: #3d7a22; }
.paint-blue { color: var(--tile-blue); }
.cond.any { color: var(--g2); }
.palette { padding: 16px 18px; background: var(--band); border: 4px solid var(--g3); }
.clear-buttons { display: flex; gap: 18px; flex-wrap: wrap; }
.palette .label { margin: 0 0 10px; font: 700 11px var(--label); letter-spacing: .04em; color: var(--g2); }
.ops { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ops[hidden], .label[hidden] { display: none; }

/* ---------------------------------------------------------------- memory game */

.round { margin: 0; font: 30px/1 var(--title); }
.pads {
	display: grid;
	grid-template-columns: repeat(var(--grid), 1fr);
	gap: 12px;
	width: min(100%, 380px);
	margin: 18px auto 0;
	padding: 16px;
	background:
		radial-gradient(circle at 2px 2px, rgba(224, 240, 200, .12) 1.5px, transparent 2px) 0 0 / 20px 20px,
		var(--g3);
	border: 4px solid var(--g3);
}
.pad {
	position: relative;
	aspect-ratio: 1;
	border: 0;
	border-radius: 50%;
	background: var(--tile-green);
	box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3);
	cursor: pointer;
	touch-action: manipulation;
	transition: transform .1s;
}
/* the notch of a lily pad */
.pad::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 6%;
	width: 26%;
	height: 10%;
	background: var(--g3);
	transform: rotate(-25deg);
}
.pad:disabled { cursor: default; }
.pad:not(:disabled):hover { transform: scale(1.05); }
.pad.lit { box-shadow: 0 0 0 4px var(--duck); }
.pad.lit::after {
	content: "";
	position: absolute;
	inset: 12%;
	background: url("/static/sprites/duck.svg") center / contain no-repeat;
	image-rendering: pixelated;
}
.pad.lit.decoy { background: var(--tile-red); box-shadow: 0 0 0 4px var(--danger); }
/* not only red: a faded duck, for colour-blind players */
.pad.lit.decoy::after { opacity: .45; }
.pad.pressed { background: var(--duck); }
.red-word { color: var(--tile-red); }
#start[hidden] { display: none; }

/* ---------------------------------------------------------------- hidden ducks */

.hints { margin: 18px 0; padding-left: 26px; }
.hints li { margin-bottom: 10px; padding: 10px 14px; background: var(--band); border-left: 6px solid var(--g3); }
.hints li.found { opacity: .65; border-left-color: var(--g1); }
.hints li.found .hint-text { text-decoration: line-through; }
.found-tag { margin-left: 10px; padding: 1px 8px; font: 700 11px var(--label); background: var(--g3); color: var(--g0); }
.tally { font: 30px/1.1 var(--title); }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 860px) {
	.top { padding: 10px 16px; }
	.logo span { display: none; }
	.player { gap: 16px; font-size: 14px; }
	.layout { padding: 22px 16px 48px; }
	body.on-quest .layout { grid-template-columns: 1fr; gap: 26px; }
	/* the quest log becomes a level path */
	.quest { position: static; }
	.quest h2, .quest .side { display: none; }
	.quest ol { display: flex; gap: 6px; border: 0; overflow-x: auto; }
	.quest li { flex: 1 0 auto; padding: 32px 0 0; text-align: center; }
	.quest li::before { left: 50%; top: 0; margin-left: -12px; }
	.quest .name { font-size: 20px; }
	.card { padding: 22px 18px; box-shadow: 0 0 0 4px var(--cab-line), 6px 6px 0 4px #000; }
	.card h1 { font-size: 44px; }
	.answer { flex-direction: column; }
	.game-body { grid-template-columns: 1fr; }
	.game-head { flex-direction: column; }
	.phrase { font-size: 30px; }
}
@media (max-width: 420px) {
	.player span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

.manage { white-space: nowrap; }
.manage select {
	padding: 6px 8px;
	border: 3px solid var(--g3);
	background: var(--paper);
	color: var(--g3);
	font: 14px var(--body);
}

/* ---------------------------------------------------------------- stand projects */

.projects { margin-top: 56px; }
.projects h2 { margin: 0 0 20px; font: 44px/1 var(--title); color: var(--duck); text-align: center; text-shadow: 3px 3px 0 #000; }
/* two big videos per row on a laptop (A-Maze-ing and Pac-Man share the second); one per row on a phone */
.project-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
.project video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 14px; background: var(--g3); border: 4px solid var(--g3); }
.project h3 { margin: 0; font: 32px/1 var(--title); }
.project .step { margin: 4px 0 10px; }
.projects-sub { margin: -8px 0 24px; text-align: center; color: var(--cab-muted); }
.links { margin-top: 56px; }
.links h2 { margin: 0 0 20px; font: 44px/1 var(--title); color: var(--duck); text-align: center; text-shadow: 3px 3px 0 #000; }
.link-card { display: flex; gap: 20px; align-items: center; color: var(--g3); text-decoration: none; }
.link-card:hover .link-url { text-decoration: underline; }
.link-card img { display: none; flex: none; width: 120px; height: 120px; image-rendering: pixelated; background: #fff; }
@media (min-width: 900px) { .link-card img { display: block; } }
.link-title { display: block; font: 34px/1 var(--title); }
.link-url { display: block; margin: 6px 0 10px; font: 700 13px var(--label); color: var(--g2); }
.link-text { display: block; }
.tech { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.tech li { padding: 3px 8px; background: var(--g3); color: var(--g0); font: 700 11px var(--label); letter-spacing: .03em; }
/* fair stand: say "coding school" before anything else */
/* one line at any width: 30 monospace characters are about 19em */
.school { margin: 0 0 26px; white-space: nowrap; font: 700 clamp(12px, calc((100vw - 72px) / 19), 76px)/1.1 var(--body); color: var(--g0); text-shadow: 4px 4px 0 #000; }
/* the school is the headline here, the game comes second */
body.stand .logo-big { font-size: clamp(52px, 8vw, 110px); }
.school .prompt { color: var(--duck); margin-right: 10px; }
.school b { color: var(--duck); }
.school .caret { animation: blink 1.1s steps(1) infinite; color: var(--duck); }

/* ---------------------------------------------------------------- stand leaderboard */

.leaderboards { margin-top: 56px; }
.leaderboards h2 { margin: 0 0 20px; font: 44px/1 var(--title); color: var(--duck); text-align: center; text-shadow: 3px 3px 0 #000; }
.board-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 760px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
.scoreboard h3 { margin: 0 0 12px; font: 32px/1 var(--title); }
.scoreboard ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.scoreboard li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto 3.4em; gap: 10px; align-items: baseline; padding: 6px 8px; counter-increment: rank; }
.scoreboard li::before { content: counter(rank); font: 26px/1 var(--title); }
.scoreboard li:nth-child(-n+3)::before { color: var(--g2); }
.scoreboard li:nth-child(odd) { background: var(--band); }
.scoreboard li.you { outline: 4px solid var(--duck); outline-offset: -2px; }
.scoreboard .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.scoreboard .pts { font: 700 12px var(--label); }
.scoreboard .time { text-align: right; color: var(--g2); }
.score-card { max-width: 560px; margin: 0 auto 28px; }
.score-card .answer { justify-content: center; margin-bottom: 22px; }
.score-card + .scoreboard { max-width: 760px; margin-inline: auto; }
.run-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 10px 14px; background: var(--band); border: 4px solid var(--g3); }
.run-banner p { margin: 0; }
.run-banner form { margin: 0; }

/* ---------------------------------------------------------------- videos */

.videos h1 { margin: 0 0 6px; font: 60px/1 var(--title); color: var(--duck); text-align: center; text-shadow: 3px 3px 0 #000; }
.videos-sub { margin: 0 0 36px; text-align: center; color: var(--cab-muted); }
/* the videos are vertical: three side by side on a laptop, one per row on a phone */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.card.video { margin: 0; padding: 18px; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; margin-bottom: 14px; background: var(--g3); border: 4px solid var(--g3); }
.video h2 { margin: 0; font: 34px/1 var(--title); }
.video .step { margin: 4px 0 8px; }
.video p:last-child { margin: 0; }
@media (max-width: 860px) {
	.video-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }
}