:root {
	--region-navy: #102a43;
	--region-blue: #1f6577;
	--region-gold: #dbad48;
	--region-paper: #fff8e9;
	--region-ink: #14293c;
}

.entrance-region-page {
	min-height: 100vh;
	margin: 0;
	color: var(--region-paper);
	background:
		radial-gradient(circle at 50% 30%, #236474 0, #12394a 38%, #081a2c 78%),
		var(--region-navy);
}

.entrance-region-challenge {
	display: grid;
	place-items: center;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 28px 16px;
	font-family: system-ui, -apple-system, "Yu Gothic", sans-serif;
}

.entrance-region-challenge__card {
	width: min(700px, 100%);
	box-sizing: border-box;
	padding: clamp(28px, 7vw, 62px);
	text-align: center;
	color: var(--region-ink);
	border: 5px double var(--region-gold);
	border-radius: 28px;
	background:
		radial-gradient(#173b4a12 1px, transparent 1.5px) 0 0 / 14px 14px,
		linear-gradient(145deg, #fffdf4, var(--region-paper));
	box-shadow: 0 28px 70px #020b16a8, inset 0 0 0 5px #fff8;
}

.entrance-region-challenge__card > small,
.entrance-region-passport-status header > small,
.entrance-region-passport-qr > small {
	display: block;
	font-weight: 950;
	letter-spacing: .22em;
	color: var(--region-blue);
}

.entrance-region-challenge h1 { margin: 8px 0 26px; font-size: clamp(34px, 8vw, 66px); }
.entrance-region-challenge__versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; font-size: clamp(16px, 4vw, 25px); }
.entrance-region-challenge__versus b { color: #a42c39; font-size: 1.6em; }
.entrance-region-challenge__timer { margin: 34px auto 4px; font: 950 clamp(58px, 15vw, 112px)/1 ui-monospace, monospace; letter-spacing: -.06em; color: var(--region-navy); font-variant-numeric: tabular-nums; }
.entrance-region-challenge.is-time-up .entrance-region-challenge__timer { color: #b52035; animation: entrance-region-time-up .18s steps(2) 4; }
.entrance-region-challenge__results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0; }
.entrance-region-challenge button,
.entrance-region-challenge a { display: inline-flex; justify-content: center; align-items: center; min-height: 45px; padding: 9px 16px; border: 2px solid var(--region-navy); color: #fff; background: var(--region-navy); font-weight: 900; text-decoration: none; cursor: pointer; }
.entrance-region-challenge button:hover,
.entrance-region-challenge a:hover { color: var(--region-navy); background: var(--region-gold); }
.entrance-region-challenge__finished { display: grid; gap: 8px; margin: 30px 0; padding: 24px; color: #fff; background: var(--region-navy); }
.entrance-region-challenge__finished strong { font-size: clamp(26px, 7vw, 48px); }

.entrance-region-passport-qr {
	display: grid;
	gap: 12px;
	margin: 20px 0 0;
	padding: 16px;
	border: 3px double var(--region-gold);
	background: #fffaf0;
}
.entrance-region-passport-qr figure { display: grid; grid-template-columns: minmax(100px, 160px) 1fr; align-items: center; gap: 14px; margin: 0; }
.entrance-region-passport-qr img { width: 100%; height: auto; background: #fff; }
.entrance-region-passport-qr figcaption { display: grid; gap: 5px; }
.entrance-region-passport-qr figcaption b { font-size: 18px; }
.entrance-region-passport-qr figcaption span { font-size: 11px; }

.entrance-region-passport-status {
	box-sizing: border-box;
	width: min(1100px, calc(100% - 24px));
	margin: 26px auto;
	padding: clamp(18px, 4vw, 34px);
	color: var(--region-ink);
	border: 4px double var(--region-gold);
	border-radius: 18px;
	background: #fffaf0;
	box-shadow: 0 16px 36px #0717262e;
}
.entrance-region-passport-status header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 18px; }
.entrance-region-passport-status h2 { margin: 0; font-size: clamp(22px, 4vw, 34px); }
.entrance-region-passport-status__complete { padding: 6px 12px; color: #fff; background: var(--region-blue); letter-spacing: .08em; }
.entrance-region-passport-status ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.entrance-region-passport-status li { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; min-height: 88px; padding: 10px; border: 1px solid #173a4a42; background: #fff; }
.entrance-region-passport-status li.is-locked { filter: grayscale(1); opacity: .6; }
.entrance-region-passport-status li img { width: 64px; height: 64px; object-fit: contain; }
.entrance-region-passport-status__placeholder { display: grid; place-items: center; width: 60px; height: 60px; color: #fff; background: var(--region-navy); border-radius: 50%; font-size: 26px; }
.entrance-region-passport-status li div { display: grid; gap: 2px; min-width: 0; }
.entrance-region-passport-status li b { overflow-wrap: anywhere; }
.entrance-region-passport-status li span,
.entrance-region-passport-status li time,
.entrance-region-passport-status li small { font-size: 11px; }

@keyframes entrance-region-time-up { 50% { transform: translateX(5px); } }

@media (max-width: 760px) {
	.entrance-region-challenge__results { grid-template-columns: 1fr; }
	.entrance-region-challenge__versus { grid-template-columns: 1fr; gap: 5px; }
	.entrance-region-passport-status ul { grid-template-columns: 1fr 1fr; }
	.entrance-region-passport-status li { grid-template-columns: 46px 1fr; }
	.entrance-region-passport-status li img,
	.entrance-region-passport-status__placeholder { width: 44px; height: 44px; }
	.entrance-region-passport-qr figure { grid-template-columns: 110px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.entrance-region-challenge.is-time-up .entrance-region-challenge__timer { animation: none; }
}