/*
 * Scavengeer player UI.
 * A self-contained dark look in Scavengeer blue: light text on near-black surfaces, gold for
 * points, green for finds.
 * Recolour by overriding the custom properties on .scavengeer-app and .scavengeer-layer.
 */
.scavengeer-app,
.scavengeer-layer {
	/* Foreground (text and icons) on the dark surfaces. */
	--scav-ink: #f2f6fb;
	/* Text and icons that sit on a bright accent colour. */
	--scav-on-accent: #04101d;
	--scav-paper: #0a0d13;
	--scav-card: #151b26;
	--scav-deep: #05070b;
	--scav-edge: #2b3546;
	/* Scavengeer blue: the header bar (#025a99) and its brighter link shade. */
	--scav-brand: #0293ed;
	--scav-brand-btn: #0277c8;
	--scav-brand-deep: #014a80;
	--scav-brand-soft: rgba(2, 147, 237, 0.15);
	--scav-sun: #ffc93c;
	--scav-sun-soft: rgba(255, 201, 60, 0.13);
	--scav-coral: #ff6b6b;
	--scav-coral-soft: rgba(255, 107, 107, 0.15);
	--scav-mint: #2ee6a8;
	--scav-mint-deep: #2ee6a8;
	--scav-mint-soft: rgba(46, 230, 168, 0.12);
	--scav-sky: #7cc7ff;
	--scav-muted: #9aa7b8;
	--scav-line: 1.5px solid var(--scav-edge);
	--scav-pop: 0 10px 24px rgba(0, 0, 0, 0.45);
	--scav-ledge: 0 4px 0 #1c2433;
	--scav-radius: 18px;
	--scav-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-family: var(--scav-font);
	color: var(--scav-ink);
	line-height: 1.45;
	-webkit-text-size-adjust: 100%;
}

.scavengeer-app {
	box-sizing: border-box;
	position: relative;
	max-width: 560px;
	margin: 0 auto;
	padding: 14px 16px 4px;
	border: 1px solid var(--scav-edge);
	border-radius: 24px;
	background-color: var(--scav-paper);
	background-image: radial-gradient(rgba(2, 147, 237, 0.13) 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	font-size: 17px;
	font-weight: 500;
}

.scavengeer-app *,
.scavengeer-app *::before,
.scavengeer-app *::after,
.scavengeer-layer *,
.scavengeer-layer *::before,
.scavengeer-layer *::after {
	box-sizing: border-box;
}

.scavengeer-app [hidden],
.scavengeer-layer [hidden] {
	display: none !important;
}

.scavengeer-app h2 {
	margin: 4px 0 12px;
	font-family: var(--scav-font);
	font-size: 1.9em;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--scav-ink);
	text-wrap: balance;
}

.scavengeer-app h2:focus {
	outline: none;
}

.scavengeer-app p {
	margin: 0 0 12px;
}

.scavengeer-app a {
	color: var(--scav-sky);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.scavengeer-app img,
.scavengeer-layer img {
	max-width: 100%;
	height: auto;
}

.scav-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

html.scav-lock,
html.scav-lock body {
	overflow: hidden;
}

/* The site logo chosen under Scavengeer > Settings. */
.scav-logo {
	display: block;
	width: auto;
	max-width: 72%;
	max-height: 40px;
	margin: 8px auto 18px;
	object-fit: contain;
}

.scav-center {
	text-align: center;
}

.scav-small {
	color: var(--scav-muted);
	font-size: 0.84em;
}

.scav-lead {
	font-size: 1.08em;
}

.scav-eyebrow {
	margin: 0 0 2px !important;
	color: var(--scav-muted);
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.scav-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
}

.scav-icon svg {
	width: 100%;
	height: 100%;
}

/* ---------- Screen transition ---------- */

.scav-view {
	min-height: 260px;
	padding-bottom: 12px;
}

@keyframes scav-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@keyframes scav-pop {
	0% {
		transform: scale(0.6);
		opacity: 0;
	}

	70% {
		transform: scale(1.12);
		opacity: 1;
	}

	100% {
		transform: scale(1);
	}
}

@keyframes scav-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	20% {
		transform: translateX(-9px) rotate(-1.5deg);
	}

	40% {
		transform: translateX(8px) rotate(1.5deg);
	}

	60% {
		transform: translateX(-6px) rotate(-1deg);
	}

	80% {
		transform: translateX(4px);
	}
}

.scav-view.scav-enter > * {
	animation: scav-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.scav-view.scav-enter > *:nth-child(2) {
	animation-delay: 0.04s;
}

.scav-view.scav-enter > *:nth-child(3) {
	animation-delay: 0.08s;
}

.scav-view.scav-enter > *:nth-child(4) {
	animation-delay: 0.12s;
}

.scav-view.scav-enter > *:nth-child(n+5) {
	animation-delay: 0.16s;
}

/* The sticky bar must not be transformed, or it loses its stickiness mid-animation. */
.scav-view.scav-enter > .scav-bar,
.scav-view.scav-enter > .scav-hud {
	animation-name: scav-fade;
}

@keyframes scav-fade {
	from {
		opacity: 0;
	}
}

.is-shaking {
	animation: scav-shake 0.45s ease !important;
}

/* ---------- Buttons ---------- */

.scav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 10px 18px;
	border: var(--scav-line);
	border-radius: 16px;
	background: var(--scav-card);
	box-shadow: var(--scav-ledge);
	color: var(--scav-ink) !important;
	font: inherit;
	font-family: var(--scav-font);
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform 0.08s, box-shadow 0.08s, background-color 0.15s;
}

.scav-btn:active:not(:disabled) {
	transform: translateY(4px);
	box-shadow: 0 0 0 var(--scav-deep);
}

.scav-btn--primary {
	border-color: var(--scav-brand);
	background: var(--scav-brand-btn);
	box-shadow: 0 4px 0 var(--scav-brand-deep), 0 8px 26px rgba(2, 147, 237, 0.35);
	color: #fff !important;
}

.scav-btn--big {
	min-height: 58px;
	font-size: 1.12em;
	white-space: nowrap;
}

.scav-btn--danger {
	color: var(--scav-coral) !important;
}

.scav-btn--link {
	min-height: 44px;
	border-color: transparent;
	background: none;
	box-shadow: none;
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.scav-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.scav-iconbtn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--scav-line);
	border-radius: 14px;
	background: var(--scav-card);
	color: var(--scav-ink);
	font-size: 18px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.scav-iconbtn:active {
	transform: scale(0.94);
}

.scav-iconbtn--big {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	box-shadow: var(--scav-ledge);
	font-size: 22px;
}

.scav-iconbtn--light {
	border-color: rgba(255, 255, 255, 0.85);
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	backdrop-filter: blur(6px);
}

.scavengeer-app :focus-visible,
.scavengeer-layer :focus-visible {
	outline: 3px solid var(--scav-sky);
	outline-offset: 3px;
}

.scav-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 16px 0;
}

.scav-actions > .scav-btn {
	flex: 1 1 140px;
}

/* Sticky action bar: the main thing to do next is always under the thumb. */
.scav-bar {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	gap: 10px;
	margin: 18px -16px 0;
	padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
	background: linear-gradient(rgba(10, 13, 19, 0), var(--scav-paper) 34%);
}

.scav-bar > .scav-btn {
	flex: 1 1 0;
	min-width: 0;
}

.scav-bar > .scav-btn:not(.scav-btn--primary) {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------- Heads-up bar ---------- */

.scav-hud {
	margin-bottom: 14px;
}

.scav-hud__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.scav-hud__title {
	display: -webkit-box;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 0.9em;
	font-weight: 800;
	line-height: 1.15;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.scav-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 44px;
	padding: 0 14px 0 11px;
	border: var(--scav-line);
	border-radius: 999px;
	border-color: var(--scav-sun);
	background: var(--scav-sun);
	color: var(--scav-on-accent);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.scav-pill .scav-icon svg {
	fill: var(--scav-on-accent);
}

.scav-pill.is-bumped {
	animation: scav-pop 0.5s ease both;
}

.scav-progress {
	display: flex;
	gap: 5px;
	margin-top: 10px;
}

.scav-progress__seg {
	flex: 1;
	height: 10px;
	border: 2px solid var(--scav-edge);
	border-radius: 999px;
	background: var(--scav-card);
	transition: background-color 0.4s 0.3s;
}

.scav-progress__seg.is-on {
	border-color: var(--scav-mint);
	background: var(--scav-mint);
	box-shadow: 0 0 10px rgba(46, 230, 168, 0.5);
}

/* ---------- Cards ---------- */

.scav-card {
	position: relative;
	margin: 14px 0;
	padding: 16px;
	border: var(--scav-line);
	border-radius: var(--scav-radius);
	background: var(--scav-card);
	box-shadow: var(--scav-pop);
}

.scav-card p:last-child {
	margin-bottom: 0;
}

.scav-card .scav-actions {
	margin-bottom: 0;
}

.scavengeer-app .scav-card__title {
	margin: 0 0 4px;
	font-size: 1.2em;
	font-weight: 800;
	line-height: 1.2;
}

.scav-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: left;
	width: 46px;
	height: 46px;
	margin: 0 12px 4px 0;
	border: var(--scav-line);
	border-radius: 50%;
	background: var(--scav-card);
	font-size: 20px;
}

/* Badge in its own column so text never wraps beneath it. */
.scav-card:has(> .scav-card__badge) {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	align-items: start;
}

.scav-card:has(> .scav-card__badge) > .scav-card__badge {
	grid-row: 1 / span 2;
	float: none;
	margin: 0;
}

.scav-card:has(> .scav-card__badge) > .scav-actions {
	grid-column: 1 / -1;
}

.scav-card--sun {
	border-color: rgba(255, 201, 60, 0.45);
	background: var(--scav-sun-soft);
}

.scav-card--win {
	border-color: rgba(46, 230, 168, 0.45);
	background: var(--scav-mint-soft);
}

.scav-card--win .scav-card__badge {
	border-color: var(--scav-sun);
	background: var(--scav-sun);
	color: var(--scav-on-accent);
}

.scav-card--miss {
	border-color: rgba(255, 107, 107, 0.5);
	background: var(--scav-coral-soft);
	animation: scav-pop 0.4s ease both;
}

.scav-card--miss .scav-card__badge {
	border-color: var(--scav-coral);
	background: var(--scav-coral);
	color: var(--scav-on-accent);
}

.scav-card--oops {
	border-color: rgba(124, 199, 255, 0.4);
	background: rgba(124, 199, 255, 0.12);
}

/* Offer to challenge a failed result. */
.scav-appeal {
	margin: 14px 0 4px;
	padding: 14px 16px 12px;
	border: 1.5px dashed var(--scav-edge);
	border-radius: var(--scav-radius);
	text-align: center;
}

.scavengeer-app .scav-appeal__text {
	margin-bottom: 10px;
	font-weight: 700;
}

.scavengeer-app .scav-appeal .scav-small {
	margin: 10px 0 0;
}

.scav-error {
	padding: 10px 14px;
	border: var(--scav-line);
	border-radius: 14px;
	background: var(--scav-coral-soft);
	font-weight: 700;
}

/* ---------- Welcome ---------- */

.scav-hero {
	position: relative;
	margin-bottom: 14px;
	padding: 8px 2px 0;
}

.scav-hero.has-cover {
	overflow: hidden;
	padding: 0;
	border: var(--scav-line);
	border-radius: 20px;
	box-shadow: var(--scav-pop);
}

.scav-hero__img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.scav-hero.has-cover .scav-hero__text {
	position: absolute;
	inset: auto 0 0;
	padding: 48px 16px 14px;
	background: linear-gradient(transparent, rgba(15, 17, 35, 0.86));
}

.scav-hero.has-cover h2,
.scav-hero.has-cover .scav-eyebrow {
	margin-bottom: 0;
	color: #fff;
}

.scav-hero h2 {
	font-size: 2.3em;
}

.scav-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.scav-chips li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	border: 2px solid var(--scav-edge);
	border-radius: 999px;
	background: var(--scav-card);
	font-size: 0.88em;
	font-weight: 800;
}

.scav-description {
	margin-bottom: 14px;
	font-size: 1.05em;
}

.scav-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: scav-step;
}

.scav-steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 14px 6px 12px;
	border: var(--scav-line);
	border-radius: 16px;
	background: var(--scav-card);
	font-size: 0.86em;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

.scav-steps__icon {
	color: var(--scav-on-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: var(--scav-line);
	border-radius: 50%;
	font-size: 21px;
}

.scav-steps li:nth-child(1) .scav-steps__icon {
	border-color: var(--scav-sun);
	background: var(--scav-sun);
}

.scav-steps li:nth-child(2) .scav-steps__icon {
	border-color: var(--scav-brand);
	background: var(--scav-brand);
	color: #fff;
}

.scav-steps li:nth-child(3) .scav-steps__icon {
	border-color: var(--scav-mint);
	background: var(--scav-mint);
}

.scav-form label {
	display: block;
	margin: 12px 0 6px;
	font-weight: 800;
}

.scav-field {
	display: flex;
	gap: 8px;
}

.scav-field .scav-iconbtn {
	width: 52px;
	height: 52px;
	font-size: 22px;
}

.scav-input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 52px;
	padding: 0 14px;
	border: var(--scav-line);
	border-radius: 14px;
	background: #0f141d;
	color: var(--scav-ink);
	font: inherit;
	font-family: var(--scav-font);
	font-size: 17px; /* 16px+ stops iOS zooming on focus. */
	font-weight: 700;
}

.scav-input:focus {
	border-color: var(--scav-brand);
	outline: none;
	box-shadow: 0 0 0 3px var(--scav-brand-soft);
}

.scav-form .scav-btn--big {
	width: 100%;
	margin: 16px 0 18px;
}

.scav-playing {
	font-weight: 800;
}

.scav-privacy {
	margin-top: 18px !important;
	padding-top: 12px;
	border-top: 2px dashed rgba(255, 255, 255, 0.18);
}

/* ---------- Hunt picker ---------- */

.scav-hunts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.scav-hunts li {
	margin: 0 0 12px;
}

.scav-hunt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px 10px 10px;
	border: var(--scav-line);
	border-radius: var(--scav-radius);
	background: var(--scav-card);
	box-shadow: var(--scav-pop);
	color: var(--scav-ink);
	font: inherit;
	font-family: var(--scav-font);
	text-align: left;
	cursor: pointer;
}

.scav-hunt:active {
	transform: translateY(4px);
	box-shadow: none;
}

.scav-hunt__cover {
	flex: 0 0 64px;
	width: 64px;
	height: 64px !important;
	border: 2px solid var(--scav-edge);
	border-radius: 12px;
	object-fit: cover;
}

.scav-hunt__cover--blank {
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--scav-brand-btn);
	font-size: 24px;
}

.scav-hunt__body {
	flex: 1;
	min-width: 0;
}

.scav-hunt__title {
	display: block;
	font-size: 1.1em;
	font-weight: 800;
	line-height: 1.2;
}

.scav-hunt__meta {
	color: var(--scav-muted);
	font-size: 0.86em;
	font-weight: 700;
}

/* ---------- Trail ---------- */

.scav-trail {
	position: relative;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

/* The dotted path joining the stops. */
.scav-trail::before {
	content: "";
	position: absolute;
	top: 34px;
	bottom: 34px;
	left: 37px;
	border-left: 4px dotted rgba(255, 255, 255, 0.22);
}

.scav-stop {
	position: relative;
	margin: 0 0 12px;
}

.scav-stop__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 76px;
	padding: 8px 12px 8px 8px;
	border: var(--scav-line);
	border-radius: var(--scav-radius);
	background: var(--scav-card);
	box-shadow: var(--scav-pop);
	color: var(--scav-ink);
	font: inherit;
	font-family: var(--scav-font);
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: transform 0.08s, box-shadow 0.08s;
}

.scav-stop__btn:active {
	transform: translateY(4px);
	box-shadow: none;
}

.scav-stop__badge {
	position: relative;
	display: inline-flex;
	flex: 0 0 56px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	width: 56px;
	height: 56px;
	border: var(--scav-line);
	border-radius: 50%;
	background: var(--scav-paper);
	font-size: 1.3em;
	font-weight: 800;
}

.scav-stop__badge img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.scav-stop__badge.has-photo .scav-icon {
	position: absolute;
	right: -2px;
	bottom: -2px;
	z-index: 1;
	width: 24px;
	height: 24px;
	padding: 3px;
	border: 2px solid var(--scav-edge);
	border-radius: 50%;
	border-color: var(--scav-paper);
	background: var(--scav-mint);
	color: var(--scav-on-accent);
}

.scav-stop__badge.has-photo {
	overflow: visible;
}

.scav-stop__badge.has-photo img {
	border-radius: 50%;
}

.scav-stop__body {
	flex: 1;
	min-width: 0;
}

.scav-stop__title {
	display: block;
	font-size: 1.08em;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.scav-stop__meta {
	color: var(--scav-muted);
	font-size: 0.86em;
	font-weight: 700;
}

.scav-stop__flag {
	display: inline-block;
	margin-bottom: 3px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--scav-brand);
	color: #fff;
	font-size: 0.68em;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.scav-stop.is-done .scav-stop__btn {
	border-color: rgba(46, 230, 168, 0.45);
	background: var(--scav-mint-soft);
}

.scav-stop.is-done .scav-stop__badge {
	border-color: var(--scav-mint);
	background: var(--scav-mint);
	color: var(--scav-on-accent);
}

.scav-stop.is-done .scav-stop__meta {
	color: var(--scav-mint-deep);
}

.scav-stop.is-next .scav-stop__btn {
	border-color: var(--scav-brand);
	background: var(--scav-brand-soft);
}

.scav-stop.is-next .scav-stop__badge {
	border-color: var(--scav-brand);
	background: var(--scav-brand-btn);
	color: #fff;
}

@keyframes scav-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(2, 147, 237, 0.85);
	}

	100% {
		box-shadow: 0 0 0 14px rgba(2, 147, 237, 0);
	}
}

.scav-stop.is-next .scav-stop__badge {
	animation: scav-pulse 1.6s ease-out infinite;
}

.scav-stop.is-locked .scav-stop__btn {
	border-style: dashed;
	background: transparent;
	box-shadow: none;
	color: var(--scav-muted);
	cursor: default;
}

.scav-stop.is-locked .scav-stop__badge {
	border-style: dashed;
	border-color: var(--scav-muted);
	font-size: 1.1em;
}

/* ---------- One stop ---------- */

.scav-clue {
	position: relative;
	margin: 22px 0 16px;
	padding: 22px 16px 14px;
	border: var(--scav-line);
	border-radius: var(--scav-radius);
	background: var(--scav-card);
	box-shadow: var(--scav-pop);
	transform: rotate(-0.6deg);
}

.scav-clue p {
	margin: 0;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.35;
}

.scav-clue__label {
	position: absolute;
	top: -14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px 3px 9px;
	border: var(--scav-line);
	border-radius: 999px;
	border-color: var(--scav-sun);
	background: var(--scav-sun);
	color: var(--scav-on-accent);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.scav-ref {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
	border: var(--scav-line);
	border-radius: var(--scav-radius);
	background: var(--scav-deep);
	box-shadow: var(--scav-pop);
	cursor: zoom-in;
}

.scav-ref img {
	display: block;
	width: 100%;
	max-height: 46vh;
	object-fit: cover;
}

.scav-ref__tag {
	position: absolute;
	top: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px 4px 8px;
	border: 2px solid var(--scav-edge);
	border-radius: 999px;
	background: var(--scav-card);
	color: var(--scav-ink);
	font-family: var(--scav-font);
	font-size: 14px;
	font-weight: 800;
}

.scav-mystery {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border: 2.5px dashed var(--scav-edge);
	border-radius: var(--scav-radius);
	font-weight: 800;
}

.scav-mystery .scav-icon {
	font-size: 1.4em;
}

/* ---------- Polaroid, stamp, scanning ---------- */

.scav-polaroid {
	position: relative;
	width: min(100%, 420px);
	margin: 10px auto 18px;
	padding: 10px 10px 0;
	border: 0;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.scav-polaroid--left {
	transform: rotate(-2deg);
}

.scav-polaroid--right {
	transform: rotate(1.6deg);
}

.scav-polaroid__img {
	position: relative;
	overflow: hidden;
	background: #111;
}

.scav-polaroid__img img {
	display: block;
	width: 100%;
	max-height: 48vh;
	object-fit: cover;
}

/* After a miss the photo steps back so the feedback takes the stage. */
.scav-polaroid.is-small {
	width: min(62%, 260px);
}

.scav-polaroid.is-small .scav-polaroid__img img {
	max-height: 24vh;
}

.scav-polaroid figcaption {
	color: #10151f;
	padding: 10px 4px 12px;
	font-size: 1.05em;
	font-weight: 800;
	text-align: center;
}

@keyframes scav-stamp {
	0% {
		transform: rotate(-14deg) scale(3.2);
		opacity: 0;
	}

	60% {
		transform: rotate(-14deg) scale(0.92);
		opacity: 1;
	}

	100% {
		transform: rotate(-14deg) scale(1);
		opacity: 1;
	}
}

.scav-stamp {
	position: absolute;
	right: 8%;
	bottom: 10%;
	padding: 4px 14px;
	border: 4px solid #fff;
	border-radius: 10px;
	background: var(--scav-mint);
	box-shadow: 0 0 0 3px var(--scav-on-accent), 0 6px 18px rgba(0, 0, 0, 0.5);
	color: var(--scav-on-accent);
	font-size: 1.5em;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: rotate(-14deg);
	animation: scav-stamp 0.5s 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes scav-scan {
	0% {
		top: -12%;
	}

	100% {
		top: 100%;
	}
}

.scav-polaroid.is-scanning .scav-polaroid__img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(46, 196, 160, 0.16);
}

.scav-polaroid.is-scanning .scav-polaroid__img::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	z-index: 2;
	height: 12%;
	background: linear-gradient(rgba(46, 196, 160, 0), rgba(46, 196, 160, 0.75));
	border-bottom: 3px solid #eafff8;
	animation: scav-scan 1.3s ease-in-out infinite alternate;
}

.scav-panel {
	min-height: 28px;
}

.scav-checking {
	font-size: 1.15em;
	font-weight: 800;
	text-align: center;
}

/* ---------- Win and finale ---------- */

.scavengeer-app .scav-win__headline {
	margin-bottom: 0;
	font-size: 2.4em;
	text-align: center;
	animation: scav-pop 0.5s ease both !important;
}

.scavengeer-app .scav-win__points {
	margin: 2px 0 6px;
	color: var(--scav-mint);
	text-shadow: 0 0 26px rgba(46, 230, 168, 0.5);
	font-size: 2.6em;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	animation: scav-pop 0.55s 0.15s ease both !important;
}

.scav-finale {
	padding-top: 10px;
	text-align: center;
}

@keyframes scav-wobble {
	0%,
	100% {
		transform: rotate(-6deg);
	}

	50% {
		transform: rotate(6deg);
	}
}

.scav-finale__trophy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	margin-bottom: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--scav-sun);
	box-shadow: 0 0 0 8px rgba(255, 201, 60, 0.15), 0 0 46px rgba(255, 201, 60, 0.45);
	color: var(--scav-on-accent);
	font-size: 50px;
	animation: scav-wobble 2.4s ease-in-out infinite;
}

.scavengeer-app .scav-finale__total {
	margin: 0 0 6px;
	font-size: 1.2em;
	font-weight: 800;
}

.scav-finale__score {
	font-size: 3.4em;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.scav-finale .scav-card {
	text-align: left;
}

.scav-strip {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 20px 0 6px;
	padding: 0 12px;
}

.scav-strip img {
	flex: 0 1 112px;
	width: 112px;
	min-width: 0;
	height: 112px !important;
	margin: 0 -6px;
	border: 5px solid #fff;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
	object-fit: cover;
	transform: rotate(-4deg);
}

.scav-strip img.is-odd {
	transform: rotate(4deg) translateY(6px);
}

/* ---------- Gallery ---------- */

.scav-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 14px;
	margin: 8px 0 20px;
	padding: 6px;
	list-style: none;
}

.scav-gallery li {
	margin: 0;
}

.scav-print {
	display: block;
	width: 100%;
	padding: 7px 7px 0;
	border: 0;
	border-radius: 5px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
	color: #10151f;
	font: inherit;
	font-family: var(--scav-font);
	cursor: zoom-in;
	transform: rotate(-2deg);
	transition: transform 0.15s;
}

.scav-print.is-odd {
	transform: rotate(2deg);
}

.scav-print:active {
	transform: rotate(0) scale(0.97);
}

.scav-print img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.scav-print span {
	display: block;
	overflow: hidden;
	padding: 7px 2px 8px;
	font-size: 0.86em;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scav-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 26px auto 14px;
	border: 2.5px dashed var(--scav-edge);
	border-radius: 50%;
	font-size: 42px;
}

/* ---------- Loading ---------- */

@keyframes scav-bounce {
	0%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-14px);
	}
}

.scav-loading,
.scavengeer-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 220px;
	font-weight: 800;
}

.scav-loading__dot {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--scav-brand);
	animation: scav-bounce 1s ease-in-out infinite !important;
}

.scav-loading__dot:nth-child(2) {
	background: var(--scav-sun);
	animation-delay: 0.12s !important;
}

.scav-loading__dot:nth-child(3) {
	background: var(--scav-mint);
	animation-delay: 0.24s !important;
}

/* ---------- Overlays (on <body>) ---------- */

.scav-toasts {
	position: fixed;
	right: 12px;
	bottom: calc(92px + env(safe-area-inset-bottom));
	left: 12px;
	z-index: 2147482000;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	pointer-events: none;
}

@keyframes scav-toast {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}
}

.scav-toast {
	max-width: 440px;
	padding: 12px 16px;
	border: 0;
	border-radius: 16px;
	background: #f2f6fb;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
	color: #10151f;
	font-weight: 700;
	text-align: center;
	animation: scav-toast 0.25s ease both;
	transition: opacity 0.3s, transform 0.3s;
}

.scav-toast.is-leaving {
	opacity: 0;
	transform: translateY(10px);
}

.scav-cam,
.scav-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147481000;
	background: #07080f;
	color: #fff;
}

.scav-cam__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Corner brackets. */
.scav-cam__frame {
	position: absolute;
	inset: 96px 28px 168px;
	pointer-events: none;
}

.scav-cam__frame i {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 4px solid rgba(255, 255, 255, 0.9);
}

.scav-cam__frame i:nth-child(1) {
	top: 0;
	left: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 12px 0 0;
}

.scav-cam__frame i:nth-child(2) {
	top: 0;
	right: 0;
	border-bottom: 0;
	border-left: 0;
	border-radius: 0 12px 0 0;
}

.scav-cam__frame i:nth-child(3) {
	bottom: 0;
	left: 0;
	border-top: 0;
	border-right: 0;
	border-radius: 0 0 0 12px;
}

.scav-cam__frame i:nth-child(4) {
	right: 0;
	bottom: 0;
	border-top: 0;
	border-left: 0;
	border-radius: 0 0 12px;
}

@keyframes scav-flash {
	from {
		opacity: 0.95;
	}

	to {
		opacity: 0;
	}
}

.scav-cam__flash {
	position: absolute;
	inset: 0;
	background: #fff;
	opacity: 0;
	pointer-events: none;
}

.scav-cam__flash.is-on {
	animation: scav-flash 0.35s ease-out both;
}

.scav-cam__top {
	position: absolute;
	inset: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: calc(14px + env(safe-area-inset-top)) 16px 26px;
	background: linear-gradient(rgba(0, 0, 0, 0.65), transparent);
}

.scav-cam__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-size: 18px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scav-cam__bottom {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 26px calc(26px + env(safe-area-inset-bottom));
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.scav-cam__bottom > .scav-iconbtn,
.scav-cam__spacer {
	width: 56px;
	height: 56px;
	font-size: 22px;
}

.scav-cam__shutter {
	width: 84px;
	height: 84px;
	padding: 0;
	border: 5px solid #fff;
	border-radius: 50%;
	background: var(--scav-brand);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), inset 0 0 0 4px #05070b;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.08s;
}

.scav-cam__shutter:active:not(:disabled) {
	transform: scale(0.9);
}

.scav-cam__shutter:disabled {
	background: #8a8d9c;
}

/* The target, kept in the corner of your eye. Tap to compare. */
.scav-cam__ref {
	overflow: hidden;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 3px solid #fff;
	border-radius: 14px;
	background: #000;
	cursor: pointer;
	transition: width 0.2s, height 0.2s, margin 0.2s;
}

.scav-cam__ref img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.scav-cam__ref.is-big {
	width: 168px;
	height: 168px;
	margin: -112px 0 0 -112px;
}

.scav-lightbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: calc(70px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
	background: rgba(7, 8, 15, 0.94);
}

.scav-lightbox > img {
	min-height: 0;
	max-height: 100%;
	border: 4px solid #fff;
	border-radius: 8px;
	object-fit: contain;
}

.scav-lightbox__close {
	position: absolute;
	top: calc(14px + env(safe-area-inset-top));
	right: 14px;
}

.scav-lightbox__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* ---------- Wider screens ---------- */

@media (min-width: 640px) {
	.scavengeer-app {
		padding: 20px 24px 6px;
	}

	.scav-bar {
		margin-right: -24px;
		margin-left: -24px;
		padding-right: 24px;
		padding-left: 24px;
	}

	.scav-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.scav-cam__video {
		object-fit: contain;
	}
}

/* ---------- Reduced motion: keep the fun, lose the movement ---------- */

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

	.scav-polaroid.is-scanning .scav-polaroid__img::after {
		top: 44%;
	}
}