:root {
	--1x1: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
	--images--pattern--png: var(--1x1);
	--images--ban-pattern--png: var(--1x1);
	--images--panel--avif: var(--1x1);
	--images--lock--avif: var(--1x1);
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/Montserrat-Regular.woff2") format("woff2"), url("/fonts/Montserrat-Regular.woff") format("woff");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/Montserrat-Bold.woff2") format("woff2"), url("/fonts/Montserrat-Bold.woff") format("woff");
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/Montserrat-Black.woff2") format("woff2"), url("/fonts/Montserrat-Black.woff") format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/fonts/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto-Regular.woff") format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/fonts/Roboto-Bold.woff2") format("woff2"), url("/fonts/Roboto-Bold.woff") format("woff");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("/fonts/Roboto-Black.woff2") format("woff2"), url("/fonts/Roboto-Black.woff") format("woff");
}

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

html,
body {
	margin: 0;
	padding: 0;
}

img {
	display: block;
	max-width: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.unselectable {
	user-select: none;
}

.undraggable {
	-webkit-user-drag: none;
	user-select: none;
}

.upper {
	text-transform: uppercase;
}

.body {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
	background: #061326;
	color: #edfbff;
	font-family: "Montserrat", sans-serif;
	isolation: isolate;
}

.mb {
  display: none;
}

.main {
	display: flex;
	flex: 1;
}

.spin {
	position: fixed;
	z-index: 100;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(66.375vw 26.5365vw at 50% 50%, #355984 2.4%, #2a486d 26.8%, #1e3655 51.2%, #12243e 75.6%, #061326 100%);
	transition: opacity 0.2s, visibility 0.2s;
}
.body.show .spin,
.spin.hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.spin-loader {
	width: 3.125vw;
	height: 3.125vw;
	filter: drop-shadow(0 0 0.5208vw rgba(70, 255, 246, 0.6));
	animation: spin-rotate 0.5s infinite;
}

.spin-loader::before,
.spin-loader::after {
	content: "";
	display: block;
	width: 1.25vw;
	height: 1.25vw;
	border-radius: 50%;
}

.spin-loader::before {
	margin-bottom: 0.625vw;
	background-color: #edfbff;
	box-shadow: 1.875vw 0 0 #46fff6;
	animation: spin-ball1 0.5s infinite;
}

.spin-loader::after {
	background-color: #46fff6;
	box-shadow: 1.875vw 0 0 #edfbff;
	animation: spin-ball2 0.5s infinite;
}

@keyframes spin-rotate {
	0% {
		transform: rotate(0deg) scale(0.8);
	}

	50% {
		transform: rotate(360deg) scale(1.2);
	}

	100% {
		transform: rotate(720deg) scale(0.8);
	}
}

@keyframes spin-ball1 {
	0% {
		box-shadow: 1.875vw 0 0 #46fff6;
	}

	50% {
		box-shadow: 0 0 0 #46fff6;
		margin-bottom: 0;
		transform: translate(0.9375vw, 0.9375vw);
	}

	100% {
		box-shadow: 1.875vw 0 0 #46fff6;
		margin-bottom: 0.625vw;
	}
}

@keyframes spin-ball2 {
	0% {
		box-shadow: 1.875vw 0 0 #edfbff;
	}

	50% {
		box-shadow: 0 0 0 #edfbff;
		margin-top: -1.25vw;
		transform: translate(0.9375vw, 0.9375vw);
	}

	100% {
		box-shadow: 1.875vw 0 0 #edfbff;
		margin-top: 0;
	}
}

/* header */
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 3.5vw 2vw 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-logo {
  display: inline-grid;
  align-self: center;
}

.header-logo-img {
  width: 16vw;
}
/* /header */

/* Content */

.content {
	position: relative;
	width: 100%;
}

.accent {
	background: linear-gradient(0deg, #46fff6 100.97%, #00b4e5 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Background stage: 1920x1080 design canvas centered on the page */

.bg {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	margin-left: -50vw;
	overflow: hidden;
	background: var(--images--pattern--png) center top / 3.125vw 6.25vw repeat, radial-gradient(66.375vw 26.5365vw at 50% 26.4062vw, #355984 2.4%, #2a486d 26.8%, #1e3655 51.2%, #12243e 75.6%, #061326 100%);
	background-blend-mode: multiply, normal;
	isolation: isolate;
	pointer-events: none;
}

.bg-panel {
	position: absolute;
}

.bg-panel img {
	position: absolute;
}

.bg-l1 {
	bottom: -15.2604vw;
	width: 22.8125vw;
	height: 38.125vw;
}

.bg-l1 img {
	top: -1.0938vw;
	left: -13.8542vw;
	width: 42.0833vw;
	height: 64.4792vw;
}

.bg-l1-left {
	left: 12.2396vw;
	transform: rotate(-90deg) scaleY(-1);
}

.bg-l1-right {
	left: 64.9479vw;
	transform: rotate(-90deg);
}

.bg-l2 {
	bottom: -12.9167vw;
	width: 24.8958vw;
	height: 43.3333vw;
}

.bg-l2 img,
.bg-corner img {
	top: -1.0938vw;
	left: -13.8542vw;
	width: 44.1667vw;
	height: 69.6875vw;
}

.bg-l2-left {
	left: -5.4167vw;
}

.bg-l2-right {
	left: 80.5208vw;
	transform: rotate(180deg) scaleY(-1);
}

/* Chooser screen: side panels sit closer to the edges, plus two panels rotated 90deg in the top corners */
.screen-chooser .bg-l2-left {
	left: -1.7708vw;
}

.screen-chooser .bg-l2-right {
	left: 76.875vw;
}

.bg-corner {
	top: -15.4688vw;
	width: 24.8958vw;
	height: 43.3333vw;
}

.bg-corner-left {
	left: -1.3021vw;
	transform: rotate(90deg);
}

.bg-corner-right {
	left: 76.4063vw;
	transform: rotate(90deg) scaleY(-1);
}

.bg-top {
	top: -0.9375vw;
	left: 12.6042vw;
	width: 74.8117vw;
	height: 16.1458vw;
}

.bg-top img {
	top: -1.0938vw;
	left: -13.8542vw;
	width: 94.0827vw;
	height: 42.5vw;
}

/* Side strips only exist on the mobile start screen */
.bg-l3,
.screen-chooser .bg-l1 {
	display: none;
}

/* Title */

.title {
	margin: 0;
	color: #edfbff;
	font-size: 4.1667vw;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.intro {
	display: flex;
	align-items: center;
	gap: 2.0312vw;
	margin-top: 1.5625vw;
}

.intro-text {
	width: 18.5938vw;
	margin: 0;
	font-size: 1.25vw;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-box: trim-both cap alphabetic;
}

.intro-hl {
	color: #46fff6;
}

.steps {
	display: flex;
	align-items: center;
	gap: 1.0417vw;
}

.step {
	display: flex;
	align-items: center;
	gap: 0.5208vw;
}

.step-icon {
	width: 1.5625vw;
	height: 1.5625vw;
}

.step-text {
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

/* boxs */

.status {
	display: flex;
	gap: 1.0417vw;
	margin-top: 3.6667vw;
}

.status-choose {
	position: relative;
	flex: none;
	width: 21.7708vw;
	height: 2.9688vw;
}

.status-choose-pers,
.status-choose-bot,
.status-ban {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.9688vw;
	border-radius: 0.8333vw;
	box-shadow: 0 0 0.5208vw 0 rgba(139, 185, 228, 0.8) inset;
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* Both buttons share one slot; the inactive one waits one button-height below (Figma: y 330 / 387) */
.status-choose-pers,
.status-choose-bot {
	position: absolute;
	inset: 0;
	gap: 0.2604vw;
	border: 0.0781vw solid #faffb3;
	background: radial-gradient(96.39% 142.31% at 50.86% 136.54%, #1e99fd 0%, #f4ff57 100%);
	color: #000;
	transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out;
}

.status-choose-bot {
	padding-right: 0.4167vw;
	opacity: 0;
	translate: 0 100%;
}

/* Step 1: status-choose-pers flies out first (no delay) */
.status-choose.bot .status-choose-pers {
	opacity: 0;
	translate: 0 100%;
}

/* Step 2: status-choose-bot flies in only once status-choose-pers is gone */
.status-choose.bot .status-choose-bot {
	opacity: 1;
	translate: 0 0;
	transition-delay: 0.3s;
}

/* Step 3: once in place, status-choose-bot winks red before the "thinking" bar starts,
   then holds briefly (0.1s) so the wink reads clearly before the bar begins */
.status-choose.bot .status-choose-bot {
	animation: status-bot-wink 0.5s ease-in-out 0.6s 1;
}

@keyframes status-bot-wink {
	0%,
	100% {
		box-shadow: 0 0 0.5208vw 0 rgba(139, 185, 228, 0.8) inset;
		filter: brightness(1);
	}
	50% {
		box-shadow: 0 0 2.2vw 0.6vw rgba(255, 32, 68, 1) inset, 0 0 2.5vw 0.8vw rgba(255, 32, 68, 0.95);
		filter: brightness(1.6) saturate(1.5);
	}
}

/* Progress fill while the bot "thinks": starts only after the wink (step 3), grows over the bot's pause
   (see ban_item) and resets after it fades out */
.status-choose-bot {
	overflow: hidden;
	isolation: isolate;
}

.status-choose-bot::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 0.8333vw;
	background: radial-gradient(102% 1000% at 100% 44%, #1e99fd 0%, #39a5e8 12.5%, #54b2d3 25%, #89ccaa 50%, #bee580 75%, #f4ff57 100%);
	box-shadow: 0 0 0.5208vw 0 rgba(139, 185, 228, 0.8) inset;
	transition: width 0s linear 0.3s;
}

/* Step 4: background/progress animation, starts 0.1s after the wink ends (ends at 2.35s total,
   matching the JS wait in ban_item) */
.status-choose.bot .status-choose-bot::before {
	width: 100%;
	transition: width 1.15s ease-in-out 1.2s;
}

.status-choose-icon {
	width: 1.9271vw;
	height: 1.9271vw;
}

.status-choose-bot .status-choose-icon {
	height: 1.7188vw;
}

.status-ban {
	position: relative;
	width: 11.3021vw;
	border: 0.0781vw solid #b5dbff;
	background: radial-gradient(84.13% 127.59% at 50% 0%, #6a9ccc 0%, #294670 100%);
	color: #edfbff;
	isolation: isolate;
	overflow: hidden;
}

/* Ban counter: --bans is derived from how many .box-item are .banned (no script needed) */
.screen-start {
	--bans: 0;
}

.screen-start:has(.box-item.banned) {
	--bans: 1;
}

.screen-start:has(.box-item.banned ~ .box-item.banned) {
	--bans: 2;
}

.screen-start:has(.box-item.banned ~ .box-item.banned ~ .box-item.banned) {
	--bans: 3;
}

.screen-start:has(.box-item.banned ~ .box-item.banned ~ .box-item.banned ~ .box-item.banned) {
	--bans: 4;
}

.status-ban {
	counter-reset: bans var(--bans);
}

.status-ban-text::before {
	content: "BAN " counter(bans) " OF 4";
}

/* Progress fill: its width follows the number of bans */
.status-ban::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--bans) * 25%);
	border: 0.0781vw solid #b5dbff;
	border-radius: 0.8333vw;
	background: radial-gradient(100% 740% at 100% 50%, #6a9ccc 0%, #49719e 50%, #395b87 75%, #294670 100%);
	box-shadow: 0 0 0.5208vw 0 rgba(139, 185, 228, 0.8) inset;
	opacity: min(var(--bans), 1);
	transition: width 0.3s ease-in-out, opacity 0.15s ease-in-out;
}

/* pattern is 10% opacity in the design, which a multi-layer background can't express */
.status-ban::after {
	content: "";
	position: absolute;
	z-index: -2;
	inset: 0;
	border-radius: inherit;
	background: var(--images--ban-pattern--png) 0.6771vw -1.8799vw / 88.018% 226.648% no-repeat;
	mix-blend-mode: multiply;
	opacity: 0.1;
}

.status-choose-text,
.status-ban {
	text-box: trim-both cap alphabetic;
}

.box {
	position: relative;
	display: flex;
	gap: 1.0417vw;
	margin-top: 2vw;
}

/* While the bot is choosing (status-choose.bot) or after the last ban, clicks are blocked; the grid is tinted only for the bot */
.screen-start:is(:has(.status-choose.bot), :has(.box-item.banned ~ .box-item.banned ~ .box-item.banned ~ .box-item.banned)) .box {
	pointer-events: none;
}

.screen-start:is(:has(.status-choose.bot), :has(.box-item.banned ~ .box-item.banned ~ .box-item.banned ~ .box-item.banned)) .box .box-item .box-hit {
	pointer-events: none;
}

.box::before,
.box::after {
	content: "";
	position: absolute;
	inset: -1vw;
	border-radius: 1vw;
	opacity: 0;
	pointer-events: none;
}

.box::after {
	z-index: 65;
	background: #befffc;
}

/* Scan line: a horizontal band with a bright leading edge that runs top to bottom over the whole grid */
.box::before {
	z-index: 66;
	background: linear-gradient(180deg, rgba(70, 255, 246, 0) 0, rgba(70, 255, 246, 0.25) 70%, rgba(190, 255, 252, 0.95) 98%, rgba(70, 255, 246, 0) 100%) 0 0 / 100% 7% no-repeat;
}

/* Timeline from the moment .bot is set (the bot picks a box-item at 2.35s, see ban_item in main.js):
   0.9s wait -> tint + scan for 1.15s (2 passes of 0.575s) -> end at 2.05s -> 0.3s pause -> the pick gets .banned.
   Both effects end on their own, so they never overlap the bot's ban. */
.screen-start:has(.status-choose.bot) .box::after {
	animation: box-tint 1.15s steps(1, end) 0.9s 1;
}

.screen-start:has(.status-choose.bot) .box::before {
	animation: box-scan 0.575s linear 0.9s 2;
}

/* Flicker like a bad connection: abrupt (steps(1) above) jumps of opacity plus a tiny horizontal shake;
   starts and ends at the steady 0.3 so the tint enters and leaves without a visible pop */
@keyframes box-tint {
	0%, 100% { opacity: 0.3; translate: 0 0; }
	6% { opacity: 0.12; translate: 0.3vw 0; }
	12% { opacity: 0.4; translate: -0.25vw 0; }
	19% { opacity: 0.18; translate: 0 0; }
	26% { opacity: 0.35; translate: 0.2vw 0; }
	33% { opacity: 0.06; translate: -0.3vw 0; }
	41% { opacity: 0.38; translate: 0 0; }
	48% { opacity: 0.15; translate: 0.25vw 0; }
	55% { opacity: 0.4; translate: -0.2vw 0; }
	63% { opacity: 0.1; translate: 0.3vw 0; }
	71% { opacity: 0.35; translate: 0 0; }
	79% { opacity: 0.2; translate: -0.25vw 0; }
	87% { opacity: 0.08; translate: 0.15vw 0; }
	93% { opacity: 0.38; translate: 0 0; }
}

/* -17% / 117% park the 14%-high band fully outside the box above and below */
@keyframes box-scan {
	from {
		opacity: 1;
		background-position-y: -17%;
	}
	to {
		opacity: 1;
		background-position-y: 117%;
	}
}

.box-item {
	position: relative;
	flex: none;
	width: 14.0625vw;
	height: 14.0625vw;
	background: var(--images--panel--avif) center center no-repeat;
  background-size: contain;
  cursor: pointer;
}

.box img {
	position: absolute;
	pointer-events: none;
}

.box-glow-bottom {
	top: 11.3542vw;
	left: 0.3055vw;
	width: 13.5035vw;
	height: 2.7083vw;
}

.box-img {
	object-fit: cover;
  z-index: 50;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	filter: drop-shadow(0 -0.1042vw 0.2083vw #b4d7ff) drop-shadow(0 -0.2083vw 0.5208vw rgba(180, 215, 255, 0.8)) drop-shadow(0 -0.3125vw 1.0417vw rgba(180, 215, 255, 0.6)) drop-shadow(0 -0.4167vw 1.5625vw rgba(180, 215, 255, 0.4));
}

.box-name {
	position: absolute;
	top: 12.6vw;
	right: 0;
	left: 0;
	color: #000;
	font-size: 0.65vw;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.box .box-glow-top {
	top: -1.1vw;
	left: 2.637vw;
	width: 8.8407vw;
	height: 3.75vw;
}

.box .box-laser {
	top: -0.2083vw;
	left: -1.6667vw;
	width: 17.3958vw;
	height: 5.2604vw;
}

.box-lock {
	position: absolute;
	top: 1.849vw;
	left: 2.8906vw;
  z-index: 51;
	width: 8.2813vw;
	height: 8.2813vw;
	background: var(--images--lock--avif) center / contain no-repeat;
	pointer-events: none;
}

.box-item,
.box-img,
.box-glow-bottom {
	transition: scale 0.175s ease-in-out, filter 0.175s ease-in-out;
}

.box-item:hover {
	scale: 1.0691;
	filter: drop-shadow(0 0 0.1389vw rgba(103, 173, 239, 1)) drop-shadow(0 0 0.2778vw rgba(103, 173, 239, 1)) drop-shadow(0 0 0.5573vw rgba(103, 173, 239, 0.8)) drop-shadow(0 0 1.1136vw rgba(103, 173, 239, 0.99));
}
.box-thanks .box-item:hover {
	scale: 1.0691;
	filter: drop-shadow(0 0 0.2778vw rgba(244, 255, 87, 1)) drop-shadow(0 0 1.1146vw rgba(244, 255, 87, 0.8));
}

.box-item:hover .box-img {
	scale: 1.05;
}

.box-item:hover .box-glow-bottom {
	filter: drop-shadow(0 0 0.2778vw rgba(244, 255, 87, 1)) drop-shadow(0 0 1.1146vw rgba(244, 255, 87, 0.8));
}

/* Banned state (click on a box item): Figma Variant3, 0.3s ease-in-out */

.box .box-laser {
	z-index: 52;
}

.box-panel-banned {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box .box-laser-banned {
	top: 4.6354vw;
	height: 6.6146vw;
	translate: 0 -6.1979vw;
}

.box-ban {
	position: absolute;
	z-index: 52;
	top: 0;
	left: 3.75vw;
	width: 6.6146vw;
	height: 1.7708vw;
	translate: 0 -1.7708vw;
	pointer-events: none;
}

.box .box-ban-plate {
	top: -0.7813vw;
	left: -0.7792vw;
	width: 8.1771vw;
	height: 3.3333vw;
}

.box-ban-text {
	position: absolute;
	top: 0.5208vw;
	right: 0;
	left: 0;
	color: #fff;
	font-size: 0.8333vw;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-box: trim-both cap alphabetic;
}

.box-panel-banned,
.box-ban,
.box-laser-banned {
	opacity: 0;
}

.box-panel-banned,
.box-ban,
.box-laser,
.box-glow-top,
.box-name {
	transition: opacity 0.3s ease-in-out, translate 0.3s ease-in-out, color 0.3s ease-in-out;
}

.box-glow-bottom-banned {
	opacity: 0;
	transition: opacity 0.3s ease-in-out, filter 0.175s ease-in-out;
}

.box-img {
	transition: scale 0.175s ease-in-out, filter 0.175s ease-in-out, opacity 0.3s ease-in-out;
}

.box-item.banned {
	cursor: default;
}

/* Ban clicks are only caught once START adds .box-item-unlocked; before that a click on a card blinks START */
.box-hit {
	position: absolute;
	z-index: 60;
	inset: 0;
	pointer-events: none;
	cursor: pointer;
}

.box-item-unlocked .box-hit,
.box-item.banned .box-hit {
	pointer-events: auto;
}

.box-item.banned .box-panel-banned,
.box-item.banned .box-glow-bottom-banned,
.box-item.banned .box-laser-banned,
.box-item.banned .box-ban {
	opacity: 1;
	translate: 0 0;
}

.box-item.banned .box-laser:not(.box-laser-banned) {
	opacity: 0;
	translate: 0 6.1979vw;
}

.box-item.banned .box-glow-top,
.box-item.banned .box-img-glow {
	opacity: 0;
}

.box-item.banned .box-img:not(.box-img-glow) {
	filter: brightness(0.5);
	transition: scale 0.175s ease-in-out, filter 0.3s ease-in-out;
}

.box-item.banned .box-name {
	color: #3e4b72;
}

.box-item.banned:hover {
	scale: 1;
	filter: none;
}

.box-item.banned:hover .box-img {
	scale: 1;
}

.box-item.banned:hover .box-glow-bottom {
	filter: none;
}

/* Start button */

.btn-start {
	width: 14.6354vw;
	height: 4.5833vw;
	margin-top: 3.3854vw;
	border: 0.0781vw solid #46fff6;
	border-radius: 1.0417vw;
	background: radial-gradient(10.3229vw 4.6042vw at 50% 4.6042vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
	color: #072425;
	font-size: 1.4583vw;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 0 0 rgba(70, 255, 246, 0);
}

.btn-start:hover {
	animation: btn-blink 0.5s ease-in-out infinite;
}

@keyframes btn-blink {
	0%,
	100% {
		filter: brightness(1);
		box-shadow: 0 0 0.5208vw rgba(70, 255, 246, 0.4);
	}

	50% {
		filter: brightness(1.25);
		box-shadow: 0 0 1.5625vw 0.2083vw rgba(70, 255, 246, 0.9);
	}
}

/* Intro: starts when compressor hides the spinner (.spin.hide) */

.bg,
.bg-top,
.bg-top-chooser,
.bg-top-thanks,
.title,
.intro-text,
.steps,
.status,
.box-item,
.box-lock,
.btn-start {
	opacity: 0;
}

.bg-l1-left {
	--intro-x: -25vw;
}

.bg-l1-right {
	--intro-x: 25vw;
}

.bg-l2 {
	--intro-y: 12.4479vw;
}

.bg-l3-left {
	--intro-x: -10vw;
}

.bg-l3-right {
	--intro-x: 10vw;
}

.bg-corner {
	--intro-y: -12.4479vw;
}

.bg-top,
.bg-top-chooser,
.bg-top-thanks,
.title,
.intro-text,
.steps {
	--intro-y: -8.8542vw;
}

.btn-start {
	--intro-y: 2.6042vw;
}

.box-lock {
	--intro-y: var(--lock-y);
}

.box-item:nth-child(1) {
	--intro-y: 1.0417vw;
	--lock-y: -4.6875vw;
}

.box-item:nth-child(2) {
	--intro-y: 2.0833vw;
	--lock-y: -5.7292vw;
}

.box-item:nth-child(3) {
	--intro-y: 3.125vw;
	--lock-y: -6.7708vw;
}

.box-item:nth-child(4) {
	--intro-y: 4.1667vw;
	--lock-y: -7.8125vw;
}

.box-item:nth-child(5) {
	--intro-y: 5.2083vw;
	--lock-y: -8.8542vw;
}

.spin.hide ~ .main :is(.bg, .bg-top, .bg-top-chooser, .bg-top-thanks, .title, .intro-text, .steps, .box-item, .box-lock, .btn-start) {
	opacity: 1;
	animation: intro-in 0.5s ease-in-out backwards;
}

.spin.hide ~ .main :is(.bg-l1, .bg-l2, .bg-l3, .bg-corner) {
	animation: intro-move 0.5s ease-in-out backwards;
}

/* Locks appear after the cards have finished their 0.5s intro */
.spin.hide ~ .main .box-lock {
	animation: intro-in 0.5s ease-in-out 0.5s backwards;
}

.spin.hide ~ .main .btn-start:hover {
	animation: intro-in 0.5s ease-in-out backwards, btn-blink 0.5s ease-in-out infinite;
}

.spin.hide ~ .main .btn-start.blink {
	animation: intro-in 0.5s ease-in-out backwards, btn-blink 0.5s ease-in-out 2;
}

/* Click on a banned item pulses every free item (class set and removed by the ban action) */
.spin.hide ~ .main .box-item.highlight {
	animation: intro-in 0.5s ease-in-out backwards, box-highlight 0.425s ease-in-out 2;
}

@keyframes box-highlight {
	0%,
	100% {
		scale: 1;
		filter: none;
	}

	50% {
		scale: 1.0691;
		filter: drop-shadow(0 0 0.1389vw rgba(103, 173, 239, 1)) drop-shadow(0 0 0.2778vw rgba(103, 173, 239, 1)) drop-shadow(0 0 0.5573vw rgba(103, 173, 239, 0.8)) drop-shadow(0 0 1.1136vw rgba(103, 173, 239, 0.99));
	}
}

/* START VETO click (compressor adds .started to .screen-start): button hides, status shows */
.spin.hide ~ .main .screen-start.started .status {
	opacity: 1;
	animation: intro-in 0.3s ease-in-out backwards;
}

.spin.hide ~ .main .screen-start.started .btn-start {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out, visibility 0.2s;
}

/* Locks fly up and fade, mirroring their intro (class set by compressor on START VETO click) */
.spin.hide ~ .main .box.unlocked .box-lock {
	opacity: 0;
	translate: 0 -3.6458vw;
	transition: opacity 0.5s ease-in-out, translate 0.5s ease-in-out;
}

@keyframes intro-in {
	from {
		opacity: 0;
		translate: var(--intro-x, 0) var(--intro-y, 0);
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes intro-move {
	from {
		translate: var(--intro-x, 0) var(--intro-y, 0);
	}

	to {
		translate: 0 0;
	}
}

/* Footer */

.footer-wrap {
	position: fixed;
	z-index: 10;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2.0833vw;
}

.footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3.9583vw;
	border-radius: 1.0417vw 1.0417vw 0 0;
	background: #061326;
	color: #e9f3f6;
	font-family: "Roboto", sans-serif;
	transform: translateY(100%);
	transition: transform 0.15s;
}

.footer.show {
	transform: none;
}

.footer-container {
	display: flex;
	align-items: center;
	width: 90vw;
	height: 100%;
	margin: 0 auto;
}

@media (min-width: 2561px) {
	.footer-container {
		width: 75vw;
	}
}

.footer-logo {
	display: flex;
	align-items: center;
	flex: none;
	gap: 0.2604vw;
	width: 4vw;
}

.footer-logo-img {
	width: 4vw;
  filter: grayscale(0.2);
}

.footer-logo-text {
	font-size: 1.1458vw;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.footer-info {
	display: flex;
	flex-direction: column;
	gap: 0.4167vw;
	width: 22.3958vw;
	font-size: 0.7292vw;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.footer-info-row {
	display: flex;
	align-items: center;
	gap: 0.5208vw;
}

.footer-st {
	font-weight: 700;
}

.rules {
	display: flex;
	align-items: center;
	gap: 1.0417vw;
	margin-left: auto;
}

.rules-link {
	font-size: 0.8333vw;
	line-height: 1;
	white-space: nowrap;
}

.lang {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.7604vw;
	height: 2.2917vw;
	margin-left: 2.6042vw;
	border: 0.0521vw solid #e9f3f6;
	border-radius: 0.625vw;
}

.lang-flag {
	width: 1.9792vw;
	height: 1.4583vw;
}

/* Popups */

.popup-wrap {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2900;
	background: rgba(0, 0, 0, 0.7);
}

.popup-terms {
	display: none;
	position: fixed;
	z-index: 3000;
	top: 50%;
	left: 50%;
	width: min(75vw, 92vw);
	max-height: 86vh;
	padding: 2.0833vw;
	overflow-y: auto;
	transform: translate(-50%, -50%);
	border-radius: 1.0417vw;
	background: #203352;
}

.popup-wrap.show,
.popup-terms.show {
	display: block;
}

.popup-terms-close {
	position: fixed;
	top: 0.8333vw;
	right: 0.8333vw;
}

/* Legal pages (ToS, Privacy, Cookie, Cardholder Policy) rendered inside .popup-terms-content */

.terms {
	font-family: "Montserrat", sans-serif;
}

.terms h2 {
	margin: 0 0 1.25rem;
	color: #edfbff;
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}

.terms h3 {
	margin: 2rem 0 0.75rem;
	color: #46fff6;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.terms h3:first-of-type {
	margin-top: 0;
}

.terms p {
	margin: 0 0 1rem;
	color: rgba(237, 251, 255, 0.8);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.6;
}

.terms ul,
.terms ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	color: rgba(237, 251, 255, 0.8);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.6;
}

.terms li {
	margin-bottom: 0.5rem;
}

.terms li::marker {
	color: #46fff6;
}

.terms strong {
	color: #edfbff;
	font-weight: 700;
}

.terms a {
	color: #46fff6;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15rem;
}

.terms a:hover {
	text-decoration: none;
}

/* Cookies */

.cookies {
	display: none;
	position: fixed;
	z-index: 900;
	right: 1vw;
	bottom: 1vw;
	width: 30vw;
	min-width: 320px;
	opacity: 0.9;
	pointer-events: none;
}

.cookies.show {
	display: block;
}

.cookies-inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.0417vw;
	width: 100%;
	padding: 1.25vw;
	border: 0.0781vw solid rgba(181, 219, 255, 0.4);
	border-radius: 1.0417vw;
	background: radial-gradient(120% 200% at 50% 0, #2a486d 0, #1e3655 45%, #12243e 100%);
	box-shadow: inset 0 0 0.5208vw rgba(139, 185, 228, 0.5), 0 0.5208vw 2.0833vw rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

.cookies-text {
	display: flex;
	flex-direction: column;
	gap: 0.5208vw;
}

.cookies-title {
	margin: 0;
	color: #edfbff;
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.2;
}

.cookies-description {
	margin: 0;
	color: rgba(237, 251, 255, 0.8);
	font-size: 0.8333vw;
	font-weight: 500;
	line-height: 1.4;
}

.cookie-link {
	color: #46fff6;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.1562vw;
}

.cookie-link:hover {
	text-decoration: none;
}

.cookies-actions {
	flex: none;
}

.btn-accept {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 2.9688vw;
	border: 0.0781vw solid #46fff6;
	border-radius: 0.8333vw;
	background: radial-gradient(7.2917vw 2.9688vw at 50% 2.9688vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
	color: #072425;
	transition: filter 0.1s;
}

.btn-accept:hover {
	filter: brightness(1.1);
}

.btn-text {
	font-size: 1.0417vw;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}


/* screens */

.screen {
	position: relative;
	display: none;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-height: max(56.25vw, 100vh);
	padding-top: 5.7292vw;
}

.before-login,
.after-login,
.screen-start,
.screen-chooser,
.screen-thanks {
	display: none;
	width: 100%;
}

.before-login.show,
.after-login.show,
.screen-start.show,
.screen-chooser.show,
.screen-thanks.show {
	display: flex;
}

/* Chooser screen: elements are placed on the 1920x1080 design canvas */

.box-chooser {
	position: absolute;
	top: 13.4375vw;
	left: 22.1354vw;
	display: block;
	margin: 0;
	scale: 1.8519;
	transform-origin: 0 0;
}

.box-chooser .box-item {
	cursor: default;
}

.chooser-lock {
	position: absolute;
	top: 9.7917vw;
	left: 31.5625vw;
	width: 7.2917vw;
	height: 7.2917vw;
	background: var(--images--lock--avif) center / contain no-repeat;
}

.chooser-ban {
	position: absolute;
	top: 14.0625vw;
	left: 51.0417vw;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17.1875vw;
	height: 2.9688vw;
	border: 0.0781vw solid #b5dbff;
	border-radius: 0.8333vw;
	background: radial-gradient(84.13% 127.59% at 50% 0%, #6a9ccc 0%, #49719e 50%, #395b87 75%, #294670 100%);
	box-shadow: 0 0 0.5208vw 0 rgba(139, 185, 228, 0.8) inset;
	color: #edfbff;
	font-size: 1.25vw;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
	isolation: isolate;
	overflow: hidden;
}

.chooser-ban::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--images--ban-pattern--png) center / cover no-repeat;
	mix-blend-mode: multiply;
	opacity: 0.1;
}

.chooser-title {
	position: absolute;
	top: 19.8958vw;
	left: 51.0417vw;
	margin: 0;
	color: #edfbff;
	font-size: 4.375vw;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.chooser-text {
	position: absolute;
	top: 28.9063vw;
	left: 51.0417vw;
	width: 23.2813vw;
	margin: 0;
	color: #edfbff;
	font-size: 1.25vw;
	font-weight: 500;
	line-height: 1.2;
	text-box: trim-both cap alphabetic;
}

.chooser-text-hl {
	color: #46fff6;
}

.chooser-st {
	position: absolute;
	top: 34.1667vw;
	left: 51.0417vw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5208vw;
	width: 26.1458vw;
	height: 4.5833vw;
	border: 0.0781vw solid #46fff6;
	border-radius: 1.0417vw;
	background: radial-gradient(18.4375vw 4.6055vw at 13.0729vw 4.6055vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
	color: #072425;
	transition: filter 0.3s ease, box-shadow 0.3s ease;
}

.chooser-st:hover {
	filter: brightness(1.25);
	box-shadow: 0 0 1.5625vw 0.2083vw rgba(70, 255, 246, 0.9);
}

.chooser-st.blink {
	animation: btn-blink 0.5s ease-in-out 2;
}

.chooser-st-icon {
	width: 1.9271vw;
	height: 1.9271vw;
}

.chooser-st-text {
	font-size: 1.4583vw;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.box-item-chooser .box-name {
  display: none;
}
.box-chooser[data-item_show="1"] .box-name-1 {
  display: block;
}
.box-chooser[data-item_show="2"] .box-name-2 {
  display: block;
}
.box-chooser[data-item_show="3"] .box-name-3 {
  display: block;
}
.box-chooser[data-item_show="4"] .box-name-4 {
  display: block;
}
.box-chooser[data-item_show="5"] .box-name-5 {
  display: block;
}

/* Thanks screen: same layout as chooser, other panel positions and the yellow "picked" card */

.screen-thanks .bg-l2-left {
	left: -8.0208vw;
	bottom: -15.5208vw;
}

.screen-thanks .bg-l2-right {
	left: 83.125vw;
	bottom: -15.5208vw;
}

.screen-thanks .bg-corner {
	top: -20.1563vw;
}

.screen-thanks .bg-corner-left {
	left: -3.9063vw;
}

.screen-thanks .bg-corner-right {
	left: 79.0104vw;
}

.box-item-thanks {
	background: none;
}

.box-item-thanks .box-img {
	filter: drop-shadow(0 -0.1112vw 0.2224vw #f4ff57) drop-shadow(0 -0.2224vw 0.5561vw rgba(244, 255, 87, 0.8)) drop-shadow(0 -0.3337vw 1.1121vw rgba(244, 255, 87, 0.6)) drop-shadow(0 -0.4448vw 1.6683vw rgba(244, 255, 87, 0.4));
}

.box-item-thanks .box-name {
	z-index: 51;
}

.box .thanks-panel {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.box .thanks-glow-bottom {
	top: 72%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}

.box .thanks-glow-top {
	z-index: 51;
	top: -8.05%;
	left: 18.05%;
	width: 64.27%;
	height: 28.2%;
}

.box .thanks-laser {
	z-index: 52;
	top: -1.48%;
	left: -13.48%;
	width: 126.95%;
	height: 40.65%;
}

.thanks-ban {
	border-color: #faffb3;
	background: radial-gradient(96.39% 142.31% at 50.86% 136.54%, #1e99fd 0%, #39a5e8 12.5%, #54b2d3 25%, #89ccaa 50%, #bee580 75%, #f4ff57 100%);
	color: #072425;
}

.thanks-ban::after {
	display: none;
}

.thanks-go {
	width: 25.2604vw;
	background: radial-gradient(17.8125vw 4.6055vw at 12.6302vw 4.6055vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
}

@media (max-width: 676px) {
  .dk {
    display: none;
  }
  .mb {
    display: block;
  }

  .main {
    padding: 0;
  }

  .screen {
    padding: 19vw 0 12vw;
  }

  .header-logo {
    margin: 0 auto;
  }

  .header-logo-img {
    width: 15vw;
  }

  /* Background: no top glow on mobile, just a soft light behind the cases */
  .bg {
    background: var(--images--pattern--png) center top / 3.125vw 6.25vw repeat, radial-gradient(90% 40% at 50% 55%, #1f3452 0%, #162538 55%, #0e1622 100%);
    background-blend-mode: multiply, normal;
  }

  /* Background: the rotated side/corner panels used on desktop don't read well on a
     narrow canvas, so they're scaled down and tucked into the corners instead. */
  .bg-l1,
  .bg-l2,
  .bg-corner {
    width: 32vw;
    height: 55.7vw;
  }

  .bg-l1 img,
  .bg-l2 img,
  .bg-corner img {
    top: -1.4vw;
    left: -17.8vw;
    width: 54.2vw;
    height: 83.1vw;
  }

  .bg-l1-left,
  .bg-l2-left {
    left: -12vw;
    bottom: -24vw;
  }

  .bg-l1-right,
  .bg-l2-right,
  .screen-chooser .bg-l2-right,
  .screen-thanks .bg-l2-right {
    left: auto;
    right: -12vw;
    bottom: -24vw;
    transform: rotate(-90deg) scaleY(-1);
  }

  .screen-chooser .bg-l2-left,
  .screen-thanks .bg-l2-left {
    left: -12vw;
  }

  .bg-corner {
    top: -22vw;
    bottom: auto;
  }

  .bg-corner-left {
    left: -12vw;
    transform: rotate(90deg);
  }

  .bg-corner-right {
    left: auto;
    right: -12vw;
    transform: rotate(90deg) scaleY(-1);
  }

  .screen-start .bg-top {
    display: none;
  }
  .screen-start .bg-top img {
    display: none;
  }

  .bg-top-chooser {
	width: 100%;
	left: 0;
	top: -7vw;
  }
  .bg-top-chooser img {
	width: 100%;
  }
  .bg-top-thanks {
	width: 100%;
	left: 0;
	top: 0;
  }
  .bg-top-thanks img {
	width: 100%;
  }

  .screen-thanks .bg-corner {
    top: -26vw;
  }

  .screen-thanks .bg-corner-left {
    left: -14vw;
  }

  .screen-thanks .bg-corner-right {
    right: -14vw;
  }

  /* Start and chooser screens: l1 behind the button, l2 at the bottom (the start screen also gets
     thin l3 strips beside the cases). Each panel box is sized to the visible body of its image,
     the image is offset inside it. */
  :is(.screen-start, .screen-chooser) .bg-l1,
  :is(.screen-start, .screen-chooser) .bg-l2,
  .screen-start .bg-l3 {
    top: auto;
  }

  :is(.screen-start, .screen-chooser) .bg-l1 {
    width: 50.6vw;
    height: 84.5vw;
    bottom: -13.4vw;
  }

  :is(.screen-start, .screen-chooser) .bg-l1 img {
    top: -2.3vw;
    left: -30.5vw;
    width: 93.1vw;
    height: 142.6vw;
  }

  :is(.screen-start, .screen-chooser) .bg-l1-left {
    left: -10.1vw;
    transform: none;
  }

  :is(.screen-start, .screen-chooser) .bg-l1-right {
    left: auto;
    right: -10.1vw;
    transform: scaleX(-1);
  }

  :is(.screen-start, .screen-chooser) .bg-l2 {
    width: 39.8vw;
    height: 57.7vw;
    bottom: -26.5vw;
  }

  :is(.screen-start, .screen-chooser) .bg-l2 img {
    top: -1.5vw;
    left: -22vw;
    width: 70.4vw;
    height: 92.9vw;
  }

  :is(.screen-start, .screen-chooser) .bg-l2-left {
    left: -4.3vw;
    transform: scaleY(-1) rotate(90deg);
  }

  :is(.screen-start, .screen-chooser) .bg-l2-right {
    left: auto;
    right: -4.3vw;
    transform: scaleX(-1) scaleY(-1) rotate(90deg);
  }

  .screen-chooser .bg-l1 {
    display: block;
    bottom: -33.3vw;
  }

  .screen-chooser .bg-l1-left {
    left: -13vw;
  }

  .screen-chooser .bg-l1-right {
    right: -13vw;
  }

  /* Chooser top: the l2 panel rotated 90deg forms the block behind the case card */
  .screen-chooser .bg-corner {
    width: 48.1vw;
    height: 70.7vw;
    top: -10.8vw;
    bottom: auto;
  }

  .screen-chooser .bg-corner img {
    top: -1.87vw;
    left: -26.6vw;
    width: 85.1vw;
    height: 113.7vw;
  }

  .screen-chooser .bg-corner-left {
    left: -2.4vw;
    transform: rotate(90deg);
  }

  .screen-chooser .bg-corner-right {
    left: auto;
    right: -2.4vw;
    transform: scaleX(-1) rotate(90deg);
  }

  .screen-start .bg-l3 {
    display: block;
    top: 42.8vw;
    bottom: auto;
    width: 9.16vw;
    height: 69.6vw;
  }

  .screen-start .bg-l3 img {
    top: -5vw;
    left: 0;
    width: 33vw;
    height: 180.2vw;
  }

  .screen-start .bg-l3-left {
    left: 0;
  }

  .screen-start .bg-l3-right {
    right: 0;
    transform: scaleX(-1);
  }

  /* Intro: title + description + steps, all stacked and centered */

  .title {
    font-size: 7.2vw;
  }

  .intro {
    flex-direction: column;
    gap: 3vw;
    margin-top: 3vw;
  }

  .intro-text {
    width: 90vw;
    font-size: 3.7vw;
  }

  .steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.8vw 4vw;
  }

  .step {
    gap: 1.4vw;
  }

  .step-icon {
    width: 4.3vw;
    height: 4.3vw;
  }

  .step-text {
    font-size: 3.4vw;
  }

  /* Status: the two choose-pills and the ban counter sit in one flexible row */

  .status {
    gap: 2.5vw;
    width: 88vw;
    margin-top: 6vw;
  }

  .status-choose {
    flex: 1.7;
    width: auto;
    height: 10vw;
  }

  .status-choose-pers,
  .status-choose-bot,
  .status-ban {
    height: 10vw;
    border-radius: 2.8vw;
    font-size: 2.9vw;
  }

  .status-choose-pers,
  .status-choose-bot {
    gap: 1vw;
    border-width: 0.27vw;
  }

  .status-choose-bot {
    padding-right: 1.4vw;
  }

  .status-choose-icon {
    width: 5.6vw;
    height: 5.6vw;
  }

  .status-choose-bot .status-choose-icon {
    height: 5vw;
  }

  .status-ban {
    flex: 1;
    width: auto;
    border-width: 0.27vw;
  }

  .status-ban::before {
    border-width: 0.27vw;
    border-radius: 2.8vw;
  }

  .status-ban::after {
    background-position: 2.3vw -6.3vw;
  }

  /* Box grid: two columns, the fifth (leftover) box centered on its own row */

  .box {
    display: grid;
    grid-template-columns: repeat(2, 33vw);
    justify-content: center;
    width: fit-content;
    gap: 3vw;
    margin: 8vw auto 0;
  }

  .box-item {
    width: 33vw;
    height: 33vw;
  }

  .box-item:nth-child(5) {
    grid-column: 1 / span 2;
    justify-self: center;
  }

  .box-glow-bottom {
    top: 26.6vw;
    left: 0.7vw;
    width: 31.7vw;
    height: 6.4vw;
  }

  .box-name {
    top: 29vw;
    font-size: 2.2vw;
  }

  .box .box-glow-top {
    top: -2.6vw;
    left: 6.2vw;
    width: 20.7vw;
    height: 8.8vw;
  }

  .box .box-laser {
    top: -0.5vw;
    left: -3.9vw;
    width: 40.8vw;
    height: 12.3vw;
  }

  .box-lock {
    top: 4.3vw;
    left: 6.8vw;
    width: 19.4vw;
    height: 19.4vw;
  }

  .box .box-laser-banned {
    top: 10.9vw;
    height: 15.5vw;
    translate: 0 -14.5vw;
  }

  .box-ban {
    left: 8.8vw;
    width: 15.5vw;
    height: 4.2vw;
    translate: 0 -4.2vw;
  }

  .box .box-ban-plate {
    top: -1.8vw;
    left: -1.8vw;
    width: 19.2vw;
    height: 7.8vw;
  }

  .box-ban-text {
    top: 1.2vw;
    font-size: 2vw;
  }

  .box-item.banned .box-laser:not(.box-laser-banned) {
    translate: 0 14.5vw;
  }

  .spin.hide ~ .main .box.unlocked .box-lock {
    translate: 0 -8.6vw;
  }

  /* Start button */

  .btn-start {
    width: 86vw;
    height: 13.5vw;
    margin-top: 7vw;
    border-width: 0.25vw;
    border-radius: 3vw;
    background: radial-gradient(60.7vw 13.5vw at 50% 13.5vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
    font-size: 4.6vw;
  }

  /* Chooser & thanks screens: the desktop layout is absolutely positioned on a
     1920x1080 canvas; on mobile everything flows in DOM order inside the
     already-centered flex column (.screen), so the positioning is dropped. */

  .box-chooser {
    position: static;
    scale: 1;
    margin: 12vw 0 0;
	display: flex;
  }

  .box-chooser .box-item,
  .screen-thanks .box-item {
    width: 61vw;
    height: 61vw;
  }

  .screen-chooser .box-glow-bottom,
  .screen-thanks .box-glow-bottom {
    top: 49.2vw;
    left: 1.3vw;
    width: 58.6vw;
    height: 11.7vw;
  }

  .screen-chooser .box-img,
  .screen-thanks .box-img {
    width: 90%;
  }

  .screen-chooser .box-name,
  .screen-thanks .box-name {
	top: 55vw;
	font-size: 3vw;
  }

  .screen-chooser .box .box-glow-top {
    top: -4.8vw;
    left: 11.4vw;
    width: 38.3vw;
    height: 16.3vw;
  }

  .screen-chooser .box .box-laser {
    top: -0.9vw;
    left: -7.2vw;
    width: 75.4vw;
    height: 22.8vw;
  }

  .chooser-lock {
    position: static;
    width: 18vw;
    height: 18vw;
    margin: -70vw auto 58vw;
    z-index: 51;
  }

  /* relative (not static) so the ::after pattern is sized to the pill instead of the whole screen */
  .chooser-ban {
    position: relative;
    inset: auto;
    width: auto;
    height: 10vw;
    margin-top: 6vw;
    padding: 0 6vw;
    border-radius: 2.8vw;
    font-size: 3.6vw;
  }

  .chooser-title {
    position: static;
    margin-top: 5vw;
    font-size: 8vw;
    text-align: center;
  }

  .chooser-text {
    position: static;
    width: 86vw;
    margin-top: 3vw;
    font-size: 3.7vw;
    text-align: center;
  }

  .chooser-st {
    position: static;
    gap: 2vw;
    width: 86vw;
    height: 13.5vw;
    margin-top: 6vw;
    border-width: 0.25vw;
    border-radius: 3vw;
    background: radial-gradient(60.7vw 13.5vw at 43vw 13.5vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
  }

  .chooser-st-icon {
    width: 5vw;
    height: 5vw;
  }

  .chooser-st-text {
    font-size: 4vw;
  }

  /* Thanks screen reuses the chooser layout, just with the "picked" visuals */

  .box-item-thanks .box-glow-bottom,
  .box .thanks-glow-bottom {
    top: 72%;
  }

  .thanks-go {
    width: 86vw;
    background: radial-gradient(60.7vw 13.5vw at 43vw 13.5vw, #46fff6 0, #23daee 50%, #12c7e9 75%, #00b4e5 100%);
  }

  /* Footer: stacked and centered instead of the desktop single row */

  .footer-wrap {
    position: static;
    height: auto;
  }

  .footer {
    position: static;
    height: auto;
    border-radius: 0;
    transform: none;
  }

  .footer.show {
    transform: none;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 5vw 6vw;
    gap: 3vw;
  }

  .footer-logo {
    width: 10vw;
  }

  .footer-logo-img {
    width: 10vw;
  }

  .footer-info {
    align-items: center;
    width: auto;
    gap: 1.5vw;
    font-size: 2.6vw;
    text-align: center;
    white-space: normal;
  }

  .footer-info-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5vw;
  }

  .rules {
    flex-wrap: wrap;
    justify-content: center;
    gap: 3vw 5vw;
    margin-left: 0;
  }

  .rules-link {
    font-size: 3vw;
    white-space: normal;
  }

  /* Popups & cookies */

  .popup-terms {
    width: 92vw;
    padding: 5vw;
  }

  .popup-terms-close {
    top: 3vw;
    right: 3vw;
  }

  .popup-terms-close svg {
    width: 4.5vw;
    height: 4.5vw;
  }

  .terms h2 {
    font-size: 5.6vw;
  }

  .terms h3 {
    font-size: 4.2vw;
  }

  .terms p,
  .terms ul,
  .terms ol {
    font-size: 3.5vw;
  }

  .cookies {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: auto;
    min-width: 0;
  }

  .cookies-inner {
    padding: 20px;
    gap: 3vw;
  }

  .cookies-title {
    font-size: 4.5vw;
  }

  .cookies-description {
    font-size: 3.3vw;
  }

  .cookie-link {
    text-underline-offset: 0.5vw;
  }

  .btn-accept {
    height: 11vw;
    border-radius: 2.5vw;
  }

  .btn-text {
    font-size: 3.6vw;
  }
  .box::before,
  .box::after {
	inset: -4vw;
	border-radius: 2vw;
  }
}