/* Mobile-first layout for a quiz used in a room, one thumb, one face.
   The column stays narrow on a laptop so the headshot stays the page,
   rather than stretching across a monitor. The photo slot takes whatever
   height is left under the title, so the buttons stay on screen. */

:root {
	--bg: #161311;
	--ink: #f6f1e8;
	--muted: #b5aa9c;
	--faint: #8c8276;
	--line: rgba(246, 241, 232, 0.12);
	--coral: #ff6a3d;
	--coral-ink: #1a0d08;
	--sea: #0f6e58;
	--sea-ink: #f3fffb;
	--sand: #f3eadf;
	--sand-ink: #1b1714;
	--danger: #9d342c;
	--danger-ink: #fff8f6;
	--frame: #0e0c0a;
	--radius: 28px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	height: 100%;
	overflow: hidden;
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background:
		radial-gradient(900px 420px at 50% -12%, rgba(255, 106, 61, 0.18), transparent 58%),
		radial-gradient(700px 380px at 110% 110%, rgba(15, 110, 88, 0.16), transparent 55%), var(--bg);
	color: var(--ink);
	font-family:
		"Inter",
		system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	touch-action: manipulation;
	overscroll-behavior-y: contain;
}

body.is-modal {
	overflow: hidden;
}

button,
p,
h1,
h2 {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

img {
	display: block;
	max-width: 100%;
}

[hidden] {
	display: none !important;
}

::selection {
	background: rgba(255, 106, 61, 0.35);
}

/* --vvh / --vv-top track the visual viewport, so a phone keyboard shrinks
   the column instead of covering the photo. Set in quiz.js; 100dvh is the
   fallback before that runs and in browsers without visualViewport. */
.app {
	position: fixed;
	top: var(--vv-top, 0px);
	right: 0;
	left: 0;
	width: min(100%, 40rem);
	margin-inline: auto;
	height: var(--vvh, 100dvh);
	display: flex;
	flex-direction: column;
	padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
	gap: 14px;
	overflow: auto;
}

.masthead h1 {
	font-size: clamp(1.28rem, 4.7vw, 1.85rem);
	font-weight: 640;
	letter-spacing: -0.035em;
	line-height: 1.15;
	text-wrap: balance;
}

.answer-modes {
	display: flex;
	gap: 2px;
	margin-top: 10px;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: rgba(246, 241, 232, 0.06);
}

.seg {
	appearance: none;
	flex: 1 1 0;
	min-width: 0;
	min-height: 36px;
	padding: 6px 4px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--muted);
	font-size: 0.78rem;
	font-weight: 650;
	line-height: 1.15;
	cursor: pointer;
}

.seg[aria-checked="true"] {
	background: var(--sand);
	color: var(--sand-ink);
}

.seg:focus-visible {
	outline: 3px solid #ffb089;
	outline-offset: 1px;
}

.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.stat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(246, 241, 232, 0.06);
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.92rem;
}

.stat strong {
	color: var(--ink);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.bar {
	margin-top: 10px;
	height: 4px;
	border-radius: 999px;
	background: rgba(246, 241, 232, 0.1);
	overflow: hidden;
}

.bar > span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--coral);
}

.round {
	margin-top: 8px;
	color: var(--faint);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
}

.warn,
.noscript {
	margin-top: 8px;
	color: #f0c27a;
	font-size: 0.88rem;
}

.noscript {
	margin: 12px 0 0;
}

.stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.panel-loading,
.panel-error,
.panel-card,
.panel-done {
	flex: 1;
	min-height: 0;
}

.panel-loading,
.panel-error {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

/* The slot is whatever height the column has left after the title and the
   buttons. The square is the smaller of that height and the column width,
   so the face stays large and the controls stay on screen. */
.photo-slot {
	container-type: size;
	flex: 1;
	min-height: 0;
	display: grid;
	place-items: center;
}

.skeleton {
	width: min(100%, 70vw);
	aspect-ratio: 1;
	border-radius: var(--radius);
	background: linear-gradient(100deg, #2a241f 30%, #3a322c 48%, #2a241f 70%);
	background-size: 200% 100%;
	animation: sheen 1.3s ease-in-out infinite;
}

.loading-label,
.error-copy {
	text-align: center;
	color: var(--muted);
}

.panel-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mode-note {
	color: var(--muted);
	font-size: 0.88rem;
	text-align: center;
}

.photo-frame {
	position: relative;
	width: min(100%, 70vw);
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--frame);
	box-shadow:
		0 24px 50px rgba(0, 0, 0, 0.38),
		0 0 0 1px rgba(255, 255, 255, 0.06);
	user-select: none;
}

.photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 160ms ease;
	-webkit-user-drag: none;
}

.photo.is-ready {
	opacity: 1;
}

.photo-fallback {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	padding: 24px;
	text-align: center;
	color: var(--muted);
}

.photo-frame.is-broken .photo-fallback {
	display: grid;
}

.photo-frame.is-broken .photo {
	opacity: 0;
}

@container (min-width: 0px) {
	.photo-frame,
	.skeleton {
		width: min(100cqw, 100cqh);
	}
}

.who {
	min-height: 4.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 4px;
}

.prompt {
	color: var(--muted);
	font-size: 1.05rem;
}

.name {
	font-size: clamp(1.5rem, 6vw, 2rem);
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1.15;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.name:focus {
	outline: none;
}

.actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.btn {
	appearance: none;
	width: 100%;
	min-height: 56px;
	padding: 14px 16px;
	border: 0;
	border-radius: 16px;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.btn:focus-visible {
	outline: 3px solid #ffb089;
	outline-offset: 3px;
}

.btn:active {
	transform: scale(0.985);
}

.btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.btn-show {
	background: var(--coral);
	color: var(--coral-ink);
}

.btn-hit {
	background: var(--sea);
	color: var(--sea-ink);
}

.btn-miss {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px rgba(246, 241, 232, 0.32);
}

.btn-practise {
	background: var(--sand);
	color: var(--sand-ink);
}

.btn-danger {
	background: var(--danger);
	color: var(--danger-ink);
}

.grade {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.choices {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.choice {
	min-height: 52px;
	padding: 10px 12px;
	background: rgba(246, 241, 232, 0.06);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px rgba(246, 241, 232, 0.22);
	line-height: 1.25;
	white-space: normal;
}

.choice.is-correct,
.choice.is-correct:disabled {
	opacity: 1;
	background: var(--sea);
	color: var(--sea-ink);
	box-shadow: none;
}

.choice.is-wrong,
.choice.is-wrong:disabled {
	opacity: 1;
	background: var(--danger);
	color: var(--danger-ink);
	box-shadow: none;
}

.type-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.type-row input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 12px 14px;
	border: 1.5px solid rgba(246, 241, 232, 0.28);
	border-radius: 16px;
	background: #221d19;
	color: var(--ink);
	font: inherit;
	/* 16px keeps iOS from zooming the page when the field is focused. */
	font-size: 16px;
}

.type-row input:focus {
	outline: 3px solid #ffb089;
	outline-offset: 2px;
}

.type-row .btn {
	width: auto;
	flex: 0 0 auto;
	padding-inline: 18px;
}

.feedback {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.verdict {
	text-align: center;
	font-weight: 650;
}

.verdict.is-hit {
	color: #8ee0cb;
}

.verdict.is-miss {
	color: #ffb0a8;
}

.feedback-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.panel-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: 12px 0 8px;
}

.done-mark {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(15, 110, 88, 0.2);
	color: #8ee0cb;
}

.panel-done h2 {
	font-size: clamp(1.6rem, 6vw, 2rem);
	font-weight: 650;
	letter-spacing: -0.03em;
}

.done-next {
	color: var(--muted);
	font-size: 1.05rem;
	max-width: 24rem;
}

.done-next strong {
	color: var(--ink);
	font-weight: 650;
}

.done-help {
	color: var(--faint);
	font-size: 0.88rem;
	max-width: 22rem;
}

.panel-done .btn {
	width: min(100%, 22rem);
	margin-top: 6px;
}

.foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 2px;
}

.reset {
	appearance: none;
	background: none;
	border: 0;
	color: var(--faint);
	font-size: 0.82rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	min-height: 44px;
	padding: 10px 12px;
}

.reset:focus-visible {
	outline: 2px solid #ffb089;
	outline-offset: 3px;
	border-radius: 8px;
}

.keys {
	color: var(--faint);
	font-size: 0.75rem;
	text-align: center;
	line-height: 1.45;
}

kbd {
	font-family: inherit;
	font-size: 0.92em;
	padding: 0 0.2em;
	border-radius: 4px;
	border: 1px solid rgba(246, 241, 232, 0.18);
}

.dialog {
	position: fixed;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 16px 16px max(16px, env(safe-area-inset-bottom));
	background: rgba(8, 6, 5, 0.72);
}

.dialog-card {
	width: min(100%, 26rem);
	background: #26211c;
	color: var(--ink);
	border-radius: 20px;
	padding: 22px 18px 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.dialog-card h2 {
	font-size: 1.3rem;
	font-weight: 650;
	letter-spacing: -0.03em;
}

.dialog-card p {
	margin-top: 8px;
	color: var(--muted);
}

.dialog-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 18px;
}

@media (hover: hover) {
	.btn-show:hover {
		background: #ff7d55;
	}
	.btn-hit:hover {
		background: #12866a;
	}
	.btn-miss:hover {
		background: rgba(246, 241, 232, 0.06);
	}
	.btn-practise:hover {
		background: #fff6ec;
	}
	.btn-danger:hover {
		background: #b13e34;
	}
	.reset:hover {
		color: var(--ink);
	}
}

@media (min-width: 800px) {
	.app {
		width: min(100%, 40rem);
		padding-top: 32px;
	}
}

@media (min-width: 560px) {
	.choices {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 600px) {
	.dialog {
		align-items: center;
	}
}

/* A short visual viewport is the phone keyboard. The face stays; the
   title and the secondary lines give up the height. */
body.is-short .app {
	gap: 8px;
	padding-top: max(8px, env(safe-area-inset-top));
}

body.is-short .masthead h1 {
	font-size: 1.05rem;
}

body.is-short .answer-modes {
	margin-top: 6px;
}

body.is-short .who {
	min-height: 0;
}

/* Stats, the round count, and the reset link can return once the keyboard
   closes. While it is open, that space belongs to the face. */
body.is-short .stats,
body.is-short .bar,
body.is-short .round,
body.is-short .keys,
body.is-short .foot {
	display: none;
}

@media (pointer: coarse) {
	.keys {
		display: none;
	}
}

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

@keyframes sheen {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}