/* /Components/Layout/ArmadilloFooter.razor.rz.scp.css */
/* The cabinet's base: same tokens as the navbar (ArmadilloNavbar.razor.css) - Sky Blue chrome,
   Fredoka text, Bungee for the year, soft ambient shadow, springy hover. Fixed to the bottom,
   like the footer it replaces. */

.ark-foot[b-5vqdpw14xu] {
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--ink: #1f1f1f;
	--ink-muted: #444;
	--sky: var(--text-primary, #5ba6da);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Chrome, like the navbar (1025): above pages' own sticky bars (the catalogue's tab strip and
	   sort toggle sit at 110-111), below the navbar so its menu and scrim still cover the footer. */
	z-index: 1020;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--ink);
	background: #fcfcfc;
	border-top: 1px solid #e3e3e3;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}

.ark-foot-bar[b-5vqdpw14xu] {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: 3.5rem;
	padding: .5rem 7rem; /* same inline padding as the navbar, so the brand lines up under it */
}

/* Marquee lights along the bottom edge - the navbar's strip, mirrored. */
.ark-foot-lights[b-5vqdpw14xu] {
	height: 5px;
	background-color: var(--sky);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1.1px, transparent 1.7px);
	background-size: 12px 5px;
	background-position: 3px 0;
}

/* ---------- Brand ---------- */

.ark-foot-brand[b-5vqdpw14xu] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.ark-foot-logo[b-5vqdpw14xu] {
	width: 2.4rem;
	height: 2.4rem;
	object-fit: contain;
}

.ark-foot-name[b-5vqdpw14xu] {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.ark-foot-title[b-5vqdpw14xu] {
	font-weight: 500;
	font-size: 1rem;
}

.ark-foot-year[b-5vqdpw14xu] {
	font-family: 'Bungee', sans-serif;
	font-size: .55rem;
	letter-spacing: .18em;
	color: var(--sky);
	margin-top: .15rem;
}

/* ---------- Tokens ---------- */

.ark-foot-tokens[b-5vqdpw14xu] {
	display: inline-flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.ark-token-link[b-5vqdpw14xu] {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ink-muted);
	text-decoration: none;
	cursor: pointer;
}

	.ark-token-link:focus-visible[b-5vqdpw14xu] {
		outline: 3px solid #1976d2;
		outline-offset: 3px;
		border-radius: 8px;
	}

/* The navbar's coin: blue, white inner ring, blue rim. */
.ark-token[b-5vqdpw14xu] {
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--sky);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--sky), 0 2px 6px rgba(0, 0, 0, .18);
	transition: transform .45s var(--spring), box-shadow .2s;
}

	.ark-token svg[b-5vqdpw14xu] {
		width: 1rem;
		height: 1rem;
		fill: #fff;
	}

.ark-token-link:hover .ark-token[b-5vqdpw14xu] {
	transform: scale(1.1) rotate(-8deg);
	box-shadow: 0 0 0 2px var(--sky), 0 0 14px 2px rgba(91, 166, 218, .6);
}

.ark-token-label[b-5vqdpw14xu] {
	font-size: .55rem;
	font-family: 'Bungee', sans-serif;
	letter-spacing: .06em;
	white-space: nowrap;
}

.ark-credits-toggle[b-5vqdpw14xu] {
	display: none; /* phone only */
}

/* ---------- Credits: two ticket stubs ---------- */

.ark-foot-credits[b-5vqdpw14xu] {
	margin-inline-start: auto;
	display: inline-flex;
	gap: .75rem;
}

.ark-stub[b-5vqdpw14xu] {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	max-width: 19rem;
	padding: .35rem .75rem;
	background: #fff;
	border: 1px dashed var(--sky);
	border-radius: 8px;
	color: var(--ink);
	text-decoration: none;
	transition: transform .35s var(--spring), box-shadow .2s;
}

	/* Perforation notches on the stub's two ends. */
	.ark-stub[b-5vqdpw14xu]::before,
	.ark-stub[b-5vqdpw14xu]::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fcfcfc;
		border: 1px dashed var(--sky);
		transform: translateY(-50%);
	}

	.ark-stub[b-5vqdpw14xu]::before { inset-inline-start: -6px; }
	.ark-stub[b-5vqdpw14xu]::after { inset-inline-end: -6px; }

	.ark-stub svg[b-5vqdpw14xu] {
		flex-shrink: 0;
		width: 1.5rem;
		height: 1.5rem;
		fill: var(--sky);
	}

	.ark-stub:hover[b-5vqdpw14xu] {
		transform: translateY(-2px) rotate(-1deg);
		box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
	}

.ark-stub-text[b-5vqdpw14xu] {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

	.ark-stub-text b[b-5vqdpw14xu] {
		font-weight: 500;
		font-size: 1rem;
	}

	.ark-stub-text small[b-5vqdpw14xu] {
		font-family: 'Lunasima', system-ui, sans-serif;
		font-size: .8rem;
		color: var(--ink-muted);
	}

/* ---------- Phone ---------- */

@media (max-width: 766.98px) {
	.ark-foot-bar[b-5vqdpw14xu] {
		gap: .75rem;
		min-height: 3rem;
		padding: .35rem .75rem;
	}

	.ark-foot-title[b-5vqdpw14xu] {
		font-size: .85rem;
	}

	.ark-foot-logo[b-5vqdpw14xu] {
		width: 1.6rem;
		height: 1.6rem;
	}

	.ark-foot-tokens[b-5vqdpw14xu] {
		margin-inline-start: auto;
		gap: .75rem;
	}

	.ark-token[b-5vqdpw14xu] {
		width: 1.9rem;
		height: 1.9rem;
	}

	.ark-token-label[b-5vqdpw14xu] {
		display: none;
	}

	.ark-credits-toggle[b-5vqdpw14xu] {
		display: inline-flex;
	}

	/* The stubs pop up above the bar instead of taking a row of their own. */
	.ark-foot-credits[b-5vqdpw14xu] {
		position: absolute;
		inset-inline: .75rem;
		bottom: calc(100% + .5rem);
		margin: 0;
		display: none;
		flex-direction: column;
		gap: .5rem;
		padding: .6rem;
		background: #fff;
		border: 1px solid #eee;
		border-radius: 16px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
		transform-origin: bottom left;
	}

	.ark-foot.credits-open .ark-foot-credits[b-5vqdpw14xu] {
		display: flex;
		animation: ark-foot-pop-b-5vqdpw14xu .4s var(--spring) backwards;
	}

	.ark-stub[b-5vqdpw14xu] {
		max-width: none;
	}
}

@keyframes ark-foot-pop-b-5vqdpw14xu {
	from { opacity: 0; transform: translateY(8px) scale(.9); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ark-token[b-5vqdpw14xu],
	.ark-stub[b-5vqdpw14xu],
	.ark-foot.credits-open .ark-foot-credits[b-5vqdpw14xu] {
		transition: none;
		animation: none;
	}
}
/* /Components/Layout/ArmadilloNavbar.razor.rz.scp.css */
/* "The Armadillo Arcade" marquee - alternative top bar. See ArmadilloNavbar.razor for the parts.
   Tokens follow DESIGN.md: Sky Blue chrome, Vivid Blue for the mascot's voice, Fredoka for nav
   text, Bungee for the scoreboard digits, soft ambient shadows, springy overshoot easing. */

.ark-nav[b-0vysx08lmj] {
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--ink: #1f1f1f;
	--ink-muted: #444;
	--voice: #1976d2;
	--sky: var(--text-primary, #5ba6da);
	--bar-h: var(--ark-nav-bar-h, 4rem); /* app.css - sticky page elements offset by the same height */
	--walk: 5s; /* the walk-in length; the bubble pops when it ends */
	position: sticky;
	top: 0;
	z-index: 1025;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--ink);
	background: #fcfcfc;
	border-bottom: 1px solid #e3e3e3;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

	/* Marquee strip: a row of little lights along the cabinet's top edge. */
	.ark-nav[b-0vysx08lmj]::before {
		content: "";
		display: block;
		height: 5px;
		background-color: var(--sky);
		background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1.1px, transparent 1.7px);
		background-size: 12px 5px;
		background-position: 3px 0;
	}

.ark-bar[b-0vysx08lmj] {
	position: relative;
	overflow-x: clip; /* the walk starts off-screen to the right; never let that widen the page */
	display: flex;
	align-items: center;
	gap: 1rem;
	height: var(--bar-h);
	padding-inline: 7rem;
}

/* ---------- Brand ---------- */

.ark-brand[b-0vysx08lmj] {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
	height: 100%;
	padding-bottom: .35rem;
}

.ark-brand-link[b-0vysx08lmj] {
	position: relative; /* the trail is laid under the link only, not under the bubble */
	display: inline-flex;
	align-items: flex-end;
	text-decoration: none;
	color: inherit;
}

.ark-wordmark[b-0vysx08lmj] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	margin-bottom: .45rem;
}

.ark-title[b-0vysx08lmj] {
	font-weight: 600;
	font-size: 1.65rem;
	letter-spacing: .01em;
}

/* A scoreboard-style tag line under the title: the label face, tiny, spaced out, in the brand blue. */
.ark-sub[b-0vysx08lmj] {
	font-family: 'Bungee', sans-serif;
	font-size: .55rem;
	letter-spacing: .18em;
	color: var(--sky);
	margin-top: .2rem;
}

/* The walker (not the img) animates, since site.js swaps the finished gif for a frozen canvas. */
.ark-walker[b-0vysx08lmj] {
	position: relative;
	z-index: 1;
	display: inline-flex;
	margin-inline-start: .35rem;
	animation: ark-walk-in-b-0vysx08lmj var(--walk) linear both;
	animation-play-state: paused; /* site.js's startLogoWalk adds .walking */
}

.site-logo-wrap.walking .ark-walker[b-0vysx08lmj] {
	animation-play-state: running;
}

.ark-walker img[b-0vysx08lmj] {
	height: 3.25rem;
}

/* Dotted trail the armadillo walks along, running under the whole brand. */
.ark-trail[b-0vysx08lmj] {
	position: absolute;
	inset-inline: -.5rem;
	bottom: 0;
	height: 0;
	border-bottom: 2px dotted var(--sky);
	opacity: .55;
}

/* Same choreography as the live header: in from off-screen (right, past the title), across it,
   a short settle at the end. Linear so the gif's leg cycle reads as footsteps. */
@keyframes ark-walk-in-b-0vysx08lmj {
	0% { transform: translateX(270px); }
	70% { transform: translateX(18px); }
	88% { transform: translateX(-4px); }
	96% { transform: translateX(2px); }
	100% { transform: translateX(0); }
}

/* ---------- Speech bubble (desktop) ---------- */

.ark-bubble[b-0vysx08lmj] {
	/* In flow (not absolute) so the centered status portrait can measure around it instead of
	   colliding with it. Sits on the armadillo's left - its mouth side. */
	position: relative;
	align-self: center;
	margin-inline-start: 12px;
	margin-bottom: .2rem;
	z-index: 2;
	width: max-content;
	max-width: min(300px, 26vw);
	min-width: 0;
	flex: 0 1 auto;
	padding: .3rem .8rem;
	background: #fff;
	color: var(--voice);
	border: 1px solid #e9e9e9;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	font-size: 1rem;
	line-height: 1.2;
	transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
	transform-origin: right center;
	visibility: hidden; /* until the armadillo arrives */
}

	/* Timed off the walk itself (site.js adds .walking when it starts) rather than the gif-freeze
	   animationend hook, so a backgrounded tab cannot leave the bubble stuck hidden. */
	.site-logo-wrap.walking .ark-bubble[b-0vysx08lmj] {
		visibility: visible;
		animation: ark-pop-b-0vysx08lmj .45s var(--spring) var(--walk) backwards;
	}

	.ark-bubble-text[b-0vysx08lmj] {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	/* Comic-style tail: a notch plus a trailing dot. */
	.ark-bubble[b-0vysx08lmj]::before {
		content: "";
		position: absolute;
		right: -7px;
		top: 55%;
		width: 12px;
		height: 12px;
		background: #fff;
		border-right: 1px solid #e9e9e9;
		border-top: 1px solid #e9e9e9;
		transform: translateY(-50%) rotate(45deg);
	}

	.ark-bubble[b-0vysx08lmj]::after {
		content: "";
		position: absolute;
		right: -14px;
		top: 78%;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #fff;
		border: 1px solid #e9e9e9;
	}

	.ark-bubble.fade[b-0vysx08lmj],
	.ark-ticker.fade[b-0vysx08lmj] {
		opacity: 0;
	}

@keyframes ark-pop-b-0vysx08lmj {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: scale(1); }
}

/* ---------- Status portrait (center) ---------- */

.ark-status[b-0vysx08lmj] {
	margin-inline: auto; /* centered in whatever the brand and the player card leave free */
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
}

.ark-status-img[b-0vysx08lmj] {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	background: #f7f7f7;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	transition: transform .3s var(--spring), box-shadow .2s;
}

.ark-status:hover .ark-status-img[b-0vysx08lmj] {
	transform: scale(1.08) rotate(-4deg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.ark-status-text[b-0vysx08lmj] {
	font-weight: 500;
	font-size: 1.25rem;
}

/* ---------- Player card + token (inline end) ---------- */

.ark-end[b-0vysx08lmj] {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: flex-end; /* the player pill sits low (room for the armadillo's head); token and sign-in chip share its baseline */
	gap: .75rem;
}

/* With a status portrait in the row, the portrait takes the free space (auto margins both sides). */
.ark-status ~ .ark-end[b-0vysx08lmj] {
	margin-inline-start: 0;
}

.ark-player[b-0vysx08lmj] {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	height: 2.5rem;
	margin-top: .5rem; /* makes room for the armadillo's head above the pill */
	padding-inline: .35rem .7rem;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	text-decoration: none;
	color: inherit;
	transition: transform .35s var(--spring), box-shadow .2s;
}

	.ark-player:hover[b-0vysx08lmj],
	.ark-player:focus-visible[b-0vysx08lmj] {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	}

/* Progress armadillo: taller than the pill, feet on its bottom edge, head poking out above the bar. */
.ark-arm-avatar[b-0vysx08lmj] {
	display: inline-flex;
	align-items: flex-end;
	height: 3.5rem;
	translate: 0 -.5rem;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
	transition: translate .4s var(--spring);
}

	.ark-arm-avatar img[b-0vysx08lmj] {
		height: 100%;
		width: auto;
	}

.ark-player:hover .ark-arm-avatar[b-0vysx08lmj] {
	translate: 0 -.8rem; /* a little hop */
}

.ark-xp[b-0vysx08lmj] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	height: 1.6rem;
	padding-inline: .5rem;
	border-radius: 999px;
	background: var(--sky);
	color: var(--ink);
	font-family: 'Bungee', sans-serif;
	font-size: 1rem;
	letter-spacing: .02em;
}

	.ark-xp svg[b-0vysx08lmj] {
		width: 14px;
		height: 14px;
		fill: var(--ink);
	}

	.ark-xp-num[b-0vysx08lmj] {
		padding-top: 2px;
	}

.ark-identity[b-0vysx08lmj] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.ark-photo[b-0vysx08lmj] {
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--sky);
	background: #f7f7f7;
}

.ark-name[b-0vysx08lmj] {
	font-weight: 500;
	font-size: 1rem;
	max-width: 10rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'Bungee', sans-serif;
}

.ark-login[b-0vysx08lmj] {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	height: 2.3rem;
	padding-inline: .9rem;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	font: inherit;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	transition: transform .35s var(--spring), box-shadow .2s;
}

	.ark-login:hover[b-0vysx08lmj],
	.ark-login:focus-visible[b-0vysx08lmj] {
		transform: translateY(-2px);
		box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	}

/* Arcade token: a blue coin with a white inner ring; the three bars fold into an X when open. */
.ark-token[b-0vysx08lmj] {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 50%;
	background: var(--sky);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--sky), 0 2px 6px rgba(0, 0, 0, .18);
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	transition: transform .45s var(--spring), box-shadow .2s;
}

	.ark-token:hover[b-0vysx08lmj],
	.ark-token:focus-visible[b-0vysx08lmj] {
		transform: scale(1.08);
		box-shadow: 0 0 0 2px var(--sky), 0 4px 12px rgba(0, 0, 0, .25);
	}

	.ark-token:focus-visible[b-0vysx08lmj] {
		outline: 3px solid var(--voice);
		outline-offset: 3px;
	}

	.ark-token.open[b-0vysx08lmj] {
		transform: rotate(90deg);
	}

.ark-token-lines[b-0vysx08lmj] {
	display: grid;
	gap: 3px;
}

	.ark-token-lines i[b-0vysx08lmj] {
		display: block;
		width: 15px;
		height: 2.5px;
		border-radius: 2px;
		background: #fff;
		transition: transform .35s var(--spring), opacity .2s;
		transform-origin: center;
	}

.ark-token.open .ark-token-lines i:nth-child(1)[b-0vysx08lmj] { transform: translateY(5.5px) rotate(45deg); }
.ark-token.open .ark-token-lines i:nth-child(2)[b-0vysx08lmj] { opacity: 0; transform: scaleX(0); }
.ark-token.open .ark-token-lines i:nth-child(3)[b-0vysx08lmj] { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Portrait menu ---------- */

.ark-scrim[b-0vysx08lmj] {
	position: fixed;
	inset: 0;
	z-index: 4;
	background: transparent;
}

.ark-menu[b-0vysx08lmj] {
	position: absolute;
	top: calc(100% + .6rem);
	inset-inline-end: 7rem;
	z-index: 5;
	width: min(320px, calc(100vw - 1.5rem));
	padding: .5rem;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
	transform-origin: top; /* overridden below per side */
	animation: ark-menu-pop-b-0vysx08lmj .4s var(--spring) backwards;
}

	/* Tail pointing up at the token (token sits at the bar's inline-end edge). */
	.ark-menu[b-0vysx08lmj]::before {
		content: "";
		position: absolute;
		top: -7px;
		inset-inline-end: .95rem;
		width: 14px;
		height: 14px;
		background: #fff;
		border-left: 1px solid #eee;
		border-top: 1px solid #eee;
		transform: rotate(45deg);
	}

@keyframes ark-menu-pop-b-0vysx08lmj {
	from { opacity: 0; transform: translateY(-8px) scale(.9); }
	to { opacity: 1; transform: none; }
}

.ark-menu-list[b-0vysx08lmj] {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.ark-menu-section[b-0vysx08lmj] {
	margin-top: .4rem;
	padding-top: .4rem;
	border-top: 1px dashed #ddd;
}

.ark-item[b-0vysx08lmj] {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* buttons pick up a global justify-content:center otherwise */
	gap: .75rem;
	width: 100%;
	padding: .35rem .5rem;
	border: 0;
	border-radius: 12px;
	background: none;
	font: inherit;
	color: var(--ink);
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}

	.ark-item:hover[b-0vysx08lmj],
	.ark-item:focus-visible[b-0vysx08lmj] {
		background: #f7f7f7;
		outline: none;
	}

.ark-portrait[b-0vysx08lmj] {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	object-fit: cover;
	background: #f7f7f7;
	border: 2px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	transition: transform .35s var(--spring), box-shadow .25s;
}

.ark-item:hover .ark-portrait[b-0vysx08lmj],
.ark-item:focus-visible .ark-portrait[b-0vysx08lmj] {
	transform: rotate(-6deg) scale(1.1);
	/* Sky Blue glow on the portrait only - the row itself just tints. */
	box-shadow: 0 0 0 3px rgba(91, 166, 218, .35), 0 0 16px 3px rgba(91, 166, 218, .65);
}

.ark-glyph[b-0vysx08lmj] {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #f0f0f0;
	transition: background .15s, transform .35s var(--spring);
}

	.ark-glyph svg[b-0vysx08lmj] {
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--sky);
	}

.ark-item:hover .ark-glyph[b-0vysx08lmj] {
	background: var(--sky);
	transform: rotate(-6deg);
}

	.ark-item:hover .ark-glyph svg[b-0vysx08lmj] {
		fill: #fff;
	}

.ark-item-text[b-0vysx08lmj] {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

	.ark-item-text b[b-0vysx08lmj] {
		font-weight: 500;
		font-size: 1rem;
	}

	.ark-item-text small[b-0vysx08lmj] {
		font-family: 'Lunasima', system-ui, sans-serif;
		font-size: .8rem;
		color: var(--ink-muted);
		margin-top: .1rem;
	}

/* ---------- Mobile ticker (hidden on desktop) ---------- */

.ark-ticker[b-0vysx08lmj] {
	display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 766.98px) {
	/* The bar shrinks to 3.25rem here - set on --ark-nav-bar-h in app.css. */

	.ark-bar[b-0vysx08lmj] {
		padding-inline: .75rem;
		gap: .5rem;
	}

	.ark-title[b-0vysx08lmj] {
		font-size: 1.15rem;
	}

	.ark-sub[b-0vysx08lmj] {
		font-size: .45rem;
	}

	.ark-walker img[b-0vysx08lmj] {
		height: 2.6rem;
	}

	@keyframes ark-walk-in-b-0vysx08lmj {
		0% { transform: translateX(190px); }
		70% { transform: translateX(14px); }
		88% { transform: translateX(-3px); }
		96% { transform: translateX(2px); }
		100% { transform: translateX(0); }
	}

	.ark-bubble[b-0vysx08lmj] {
		display: none;
	}

	/* The bubble's line, as a strip under the bar, with a tail reaching up toward the armadillo. */
	.ark-ticker[b-0vysx08lmj] {
		position: relative;
		display: flex;
		align-items: center;
		height: 1.75rem; /* app.css adds it to --ark-nav-h while the ticker is rendered */
		padding-inline: .9rem;
		background: #f7f7f7;
		border-top: 1px solid #ececec;
		color: var(--voice);
		font-size: .85rem;
		line-height: 1;
		transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
		visibility: hidden;
	}

		.ark-ticker[b-0vysx08lmj]::before {
			content: "";
			position: absolute;
			top: -6px;
			right: 6.5rem;
			border: 6px solid transparent;
			border-top: 0;
			border-bottom: 6px solid #f7f7f7;
		}

		.ark-ticker-text[b-0vysx08lmj] {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

	.ark-nav:has(.site-logo-wrap.walking) .ark-ticker[b-0vysx08lmj] {
		visibility: visible;
		animation: ark-pop-b-0vysx08lmj .45s var(--spring) var(--walk) backwards;
		transform-origin: top right;
	}

	.ark-status[b-0vysx08lmj] {
		gap: 0;
	}

	.ark-status-img[b-0vysx08lmj] {
		width: 2.1rem;
		height: 2.1rem;
	}

	.ark-status-text[b-0vysx08lmj] {
		display: none;
	}

	.ark-end[b-0vysx08lmj] {
		gap: .5rem;
	}

	.ark-player[b-0vysx08lmj] {
		height: 2.2rem;
		margin-top: .45rem;
		gap: .4rem;
		padding-inline: .3rem .3rem;
	}

	.ark-arm-avatar[b-0vysx08lmj] {
		height: 2.9rem;
		translate: 0 -.3rem;
	}

	.ark-xp[b-0vysx08lmj] {
		height: 1.4rem;
		font-size: .75rem;
		padding-inline: .4rem;
	}

	.ark-photo[b-0vysx08lmj] {
		width: 1.7rem;
		height: 1.7rem;
	}

	.ark-name[b-0vysx08lmj] {
		display: none;
	}

	.ark-login[b-0vysx08lmj] {
		height: 2.1rem;
		padding-inline: .7rem;
		font-size: .9rem;
	}

	.ark-token[b-0vysx08lmj] {
		width: 2.3rem;
		height: 2.3rem;
	}

	.ark-menu[b-0vysx08lmj] {
		inset-inline-end: .6rem;
	}
}

/* ---------- Reduced motion: no walk, no pops; everything simply present. ---------- */

@media (prefers-reduced-motion: reduce) {
	.ark-walker[b-0vysx08lmj] {
		animation: none;
	}

	.ark-bubble[b-0vysx08lmj],
	.site-logo-wrap.walking .ark-bubble[b-0vysx08lmj],
	.ark-ticker[b-0vysx08lmj],
	.ark-nav:has(.site-logo-wrap.walking) .ark-ticker[b-0vysx08lmj] {
		visibility: visible;
		animation: none;
		transition: none;
	}

	.ark-menu[b-0vysx08lmj],
	.ark-player[b-0vysx08lmj],
	.ark-login[b-0vysx08lmj],
	.ark-token[b-0vysx08lmj],
	.ark-token-lines i[b-0vysx08lmj],
	.ark-arm-avatar[b-0vysx08lmj],
	.ark-portrait[b-0vysx08lmj],
	.ark-glyph[b-0vysx08lmj],
	.ark-status-img[b-0vysx08lmj] {
		animation: none;
		transition: none;
	}
}
/* /Components/Layout/DesignPreviewLayout.razor.rz.scp.css */
/* Same side gutters as MainLayout gives its article, so previews sit where real pages do. */
@media (min-width: 767px) {
	article[b-gnw77fcs6e] {
		padding-left: 7rem !important;
		padding-right: 7rem !important;
	}
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The top bar itself lives in ArmadilloNavbar.razor(.css); this file keeps only the page frame,
   footer icon sizing, the navigation loading cover and the Blazor error strip. */

.page[b-zbfdpxjgq4] {
	position: relative;
	display: flex;
	flex-direction: column;
}

main[b-zbfdpxjgq4] {
	flex: 1;
}

svg[b-zbfdpxjgq4] {
	fill: var(--text-primary);
	height: 32px;
	width: 32px;
}

@media (min-width: 767px) {
	.page[b-zbfdpxjgq4] {
		flex-direction: row;
	}

	/* Matches the navbar's inline padding so the content column lines up under the brand. */
	article[b-zbfdpxjgq4] {
		padding-left: 7rem !important;
		padding-right: 7rem !important;
	}
}

/* Full-screen "loading rooms" cover used during navigation to the room list.
   The door itself (Home.razor) shows its own local peek of this same panel as
   it swings open - by the time this fades in, the two look identical, so the
   crossfade to full-screen reads as a seamless continuation rather than a swap.
   It's faded away once the destination page has mounted, revealing it beneath. */
.page-transition-overlay[b-zbfdpxjgq4] {
	position: fixed;
	inset: 0;
	z-index: 3000;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
	transition: opacity .3s ease;
}

	.page-transition-overlay.visible[b-zbfdpxjgq4] {
		opacity: 1;
	}

@media (prefers-reduced-motion: reduce) {
	.page-transition-overlay[b-zbfdpxjgq4] {
		transition: none;
	}
}

#blazor-error-ui[b-zbfdpxjgq4] {
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss[b-zbfdpxjgq4] {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}
/* /Components/Pages/Admin/Admin.razor.rz.scp.css */
.avatar[b-fvn0vdpxcm] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}


.avatar-big[b-fvn0vdpxcm] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}


.roles svg[b-fvn0vdpxcm] {
    width:24px;
    height:24px;

}


@media (orientation: portrait) {

    div[b-fvn0vdpxcm] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/EscapeRoomEditor.razor.rz.scp.css */
.form-section[b-6273irgvru] {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: stretch;        /* allow children to stretch to equal height */
  gap: 1rem;                  /* space between the fields */
  flex-wrap: wrap;            /* stack on small screens */
  padding-block: .75rem;
}



svg[b-6273irgvru] {
    fill: var(--text-primary);
    height: 32px;
    width: 32px;
    padding-inline-end:12px;
}

/* Radzen SelectBar: add spacing between icon and text */
.rz-selectbar .rz-button .rz-button-icon-left[b-6273irgvru] { margin-inline-end: .35rem; }
.rz-selectbar .rz-button .rz-button-icon-right[b-6273irgvru] { margin-inline-start: .35rem; }
.rz-selectbar .rz-button .rz-icon[b-6273irgvru] { vertical-align: middle; }
/* /Components/Pages/CompaniesView.razor.rz.scp.css */


svg[b-jpru2v4m78] {
    fill: var(--text-primary);
    height: 24px;
    width: 24px;
    min-width: 24px;
    min-height: 24px;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-wrapper[b-4uqtfeiecs] {
    direction: rtl; /* Hebrew layout */
}

.contact-wrapper .card-header[b-4uqtfeiecs] {
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.contact-wrapper .form-label[b-4uqtfeiecs] {
    font-weight: 600;
}

.contact-wrapper .form-control[b-4uqtfeiecs] {
    border-radius: .5rem;
}

.contact-wrapper .btn-dark[b-4uqtfeiecs] {
    border-radius: 2rem;
    padding-inline: 1.25rem;
}

/* Validation styles align with Bootstrap */
.validation-message[b-4uqtfeiecs],
.validation-message > *[b-4uqtfeiecs] {
    color: #dc3545 !important;
}
/* /Components/Pages/Design/FiltersPreview.razor.rz.scp.css */
/* Mimics the catalogue's two-column frame so the panel is judged in context. */

.pv-page[b-p33gscln83] {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.25rem 0 6rem;
}

.pv-aside[b-p33gscln83] {
	flex: 0 0 20rem;
	transition: flex-basis .35s cubic-bezier(.22, 1, .36, 1);
}

	/* collapsed: no column at all; the rail moves out into the page gutter, as on the catalogue */
	.pv-aside.narrow[b-p33gscln83] {
		flex-basis: 0;
	}

		.pv-aside.narrow[b-p33gscln83]  .rf-rail {
			margin-inline-start: calc(-3.25rem - 1.875rem);
			/* glides out of the column into the gutter rather than appearing there; replaces the rail's own pop-in */
			animation: rail-slide-out-b-p33gscln83 .45s cubic-bezier(.34, 1.56, .64, 1) both;
		}

.pv-main[b-p33gscln83] {
	flex: 1;
	min-width: 0;
	font-family: 'Lunasima', system-ui, sans-serif;
	color: #1f1f1f;
}

	.pv-main h1[b-p33gscln83] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
		font-size: 1.25rem;
	}

.pv-grid[b-p33gscln83] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.pv-card[b-p33gscln83] {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	background: linear-gradient(135deg, #f7f7f7, #e9eef3);
}

@media (max-width: 991.98px) {
	.pv-page[b-p33gscln83] {
		flex-direction: column;
	}

	.pv-aside[b-p33gscln83] {
		flex: none;
		width: 100%;
	}
}

@keyframes rail-slide-out-b-p33gscln83 {
	from {
		margin-inline-start: 0;
		opacity: .6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters-aside-alt.narrow[b-p33gscln83]  .rf-rail,
	.pv-aside.narrow[b-p33gscln83]  .rf-rail {
		animation: none;
	}
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-x176q9eve7] {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1a1a1a; /* shows briefly before the video paints */
    font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow: hidden;
}

    .hero[b-x176q9eve7]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.4); /* black overlay, adjust alpha for strength */
        z-index: 1;
    }

.hero-video[b-x176q9eve7] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content[b-x176q9eve7] {
    position: relative; /* required for the z-index below to take effect above the video */
    text-align: center;
    padding: 2rem;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

/* Always-visible escape hatch: works whether the video is playing, stalled, blocked by an
   autoplay policy, or has errored outright - none of those states depend on it. Sky Blue on
   hover/focus is the site's signature accent (DESIGN.md), so this is the one brand-colored
   touch inside a hero that's otherwise deliberately video-first and color-neutral. */
.hero-skip-btn[b-x176q9eve7] {
    position: absolute;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 2;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 1rem;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background .2s, border-color .2s, transform .15s;
}

    .hero-skip-btn:hover[b-x176q9eve7],
    .hero-skip-btn:focus-visible[b-x176q9eve7] {
        background: var(--text-primary);
        border-color: var(--text-primary);
    }

    .hero-skip-btn:active[b-x176q9eve7] {
        transform: scale(.97);
    }

h1[b-x176q9eve7] {
    /* DESIGN.md's display token - was hardcoded at the clamp's own max (4rem), which
       overflowed on narrow viewports since it never actually shrank below that. */
    font-size: clamp(2.25rem, 6vw, 4rem);
    line-height: 1.05;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

/* Each word bounces in with a staggered delay (set inline per-word) - solid white
   fill with the h1's own drop-shadow outline for contrast against the video. */
.hero-title-word[b-x176q9eve7] {
    display: inline-block;
    margin-inline-end: 0.4em; /* explicit gap between words - don't rely on a space char inside an inline-block */
    opacity: 0;
    color: #fff;
    animation: hero-word-in-b-x176q9eve7 .65s cubic-bezier(.34,1.56,.64,1) both;
}

    .hero-title-word:last-child[b-x176q9eve7] {
        margin-inline-end: 0;
    }

@keyframes hero-word-in-b-x176q9eve7 {
    0% {
        opacity: 0;
        transform: scale(.4) translateY(14px);
    }

    60% {
        opacity: 1;
        transform: scale(1.12) translateY(-4px);
    }

    80% {
        transform: scale(.96) translateY(1px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title-word[b-x176q9eve7] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

svg[b-x176q9eve7] {
    fill: var(--text-primary);
    height: 24px;
    width: 24px;
    min-width: 24px;
    min-height: 24px;
}


/* Disclaimer CTAs: DESIGN.md's badge-pill/room-ribbon component tokens (Sky Blue, pill
   radius) instead of a generic unstyled Bootstrap btn-outline - the modal every first-time
   visitor sees now carries the same brand accent as the rest of the site. */
.disclaimer-btn[b-x176q9eve7] {
    border-radius: 999px;
    padding: .5rem 1.25rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}

    .disclaimer-btn:active[b-x176q9eve7] {
        transform: scale(.97);
    }

.disclaimer-btn-primary[b-x176q9eve7] {
    background: var(--text-primary);
    color: #fff;
}

    .disclaimer-btn-primary:hover[b-x176q9eve7],
    .disclaimer-btn-primary:focus-visible[b-x176q9eve7] {
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
        background: color-mix(in srgb, var(--text-primary) 85%, white 15%);
    }

.disclaimer-btn-ghost[b-x176q9eve7] {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}

    .disclaimer-btn-ghost:hover[b-x176q9eve7],
    .disclaimer-btn-ghost:focus-visible[b-x176q9eve7] {
        border-color: #fff;
        background: rgba(255, 255, 255, .1);
    }

.disclaimer-backdrop[b-x176q9eve7] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    animation: disclaimer-fade-in-b-x176q9eve7 .22s ease-out forwards;
}

.disclaimer-modal[b-x176q9eve7] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1051;
    direction: rtl;
    font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.disclaimer-content[b-x176q9eve7] {
    position: relative;
    width: min(92vw, 720px);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(8px) scale(.96);
    transform-origin: center;
    will-change: transform, opacity;
    animation: disclaimer-pop-in-b-x176q9eve7 .28s cubic-bezier(.2,.8,.2,1) .05s forwards;
}

.disclaimer-image[b-x176q9eve7] {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.5);
}

.disclaimer-overlay[b-x176q9eve7] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 75%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
}

    /* Fine print: de-emphasized relative to the surrounding white body text. A translucent
       white (not DESIGN.md's neutral-ink-muted, which is a dark-on-light token) so it stays
       legible against this dark scrim while still reading as secondary. */
    .disclaimer-overlay .muted[b-x176q9eve7] {
        color: rgba(255, 255, 255, .72);
    }

    /* The liability sentence: the one paragraph a visitor most needs to actually read, so it
       stays full-strength white (max legibility) and gains weight instead of a hue change -
       recoloring legal text for brand's sake would be the wrong trade here. */
    .disclaimer-overlay .important[b-x176q9eve7] {
        font-weight: 700;
    }

/* Animations */
@keyframes disclaimer-fade-in-b-x176q9eve7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes disclaimer-pop-in-b-x176q9eve7 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .disclaimer-backdrop[b-x176q9eve7],
    .disclaimer-content[b-x176q9eve7] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
body[b-hgk2qbyllx] {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    line-height: 1.6;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    color: #333;
}

.container[b-hgk2qbyllx] {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1[b-hgk2qbyllx] {
    color: #2c3e50;
    text-align: center;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

h2[b-hgk2qbyllx] {
    color: #34495e;
    margin-top: 25px;
    margin-bottom: 15px;
    padding-right: 10px;
    border-right: 4px solid #3498db;
}

.update-date[b-hgk2qbyllx] {
    text-align: center;
    color: #666;
    font-style: italic;
    margin-bottom: 30px;
}

ul[b-hgk2qbyllx] {
    margin: 10px 0;
    padding-right: 20px;
}

li[b-hgk2qbyllx] {
    margin-bottom: 8px;
}

.highlight[b-hgk2qbyllx] {
    background-color: #e8f6ff;
    padding: 15px;
    border-radius: 5px;
    border-right: 4px solid #3498db;
    margin: 15px 0;
}

.contact-info[b-hgk2qbyllx] {
    background-color: #f1f8e9;
    padding: 15px;
    border-radius: 5px;
    border-right: 4px solid #4caf50;
    margin-top: 20px;
    text-align: center;
}

.footer[b-hgk2qbyllx] {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 0.9em;
}


.info-box[b-hgk2qbyllx] {
    background-color: #fff3cd;
    padding: 15px;
    border-radius: 5px;
    border-right: 4px solid #ffc107;
    margin: 15px 0;
}

.important-box[b-hgk2qbyllx] {
    background-color: #f8d7da;
    padding: 15px;
    border-radius: 5px;
    border-right: 4px solid #dc3545;
    margin: 15px 0;
}

.rights-box[b-hgk2qbyllx] {
    background-color: #d1ecf1;
    padding: 15px;
    border-radius: 5px;
    border-right: 4px solid #17a2b8;
    margin: 15px 0;
}

.contact-info[b-hgk2qbyllx] {
    background-color: #f1f8e9;
    padding: 15px;
    border-radius: 5px;
    border-right: 4px solid #4caf50;
    margin-top: 20px;
    text-align: center;
}
/* /Components/Pages/User.razor.rz.scp.css */
/* The profile page as one column: player card, then one tab strip.
   Tokens follow DESIGN.md (Sky Blue chrome, Vivid Blue mascot voice, Bungee scoreboard digits,
   Fredoka headings, soft ambient shadows, springy easing gated behind reduced-motion). */

:host[b-7jzwaabowk], .hero[b-7jzwaabowk], .tabs-wrap[b-7jzwaabowk] {
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--ink: #1f1f1f;
	--ink-muted: #444;
	--voice: #1976d2;
	--sky: var(--text-primary, #5ba6da);
}

/* ---------------- Player card ---------------- */

.hero[b-7jzwaabowk] {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem 2rem;
	margin-top: 1.25rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	font-family: 'Fredoka', system-ui, sans-serif;
	color: var(--ink);
}

	/* The same marquee-lights strip the navbar wears, as the card's top edge. */
	.hero[b-7jzwaabowk]::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 5px;
		border-radius: 18px 18px 0 0;
		background-color: var(--sky);
		background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1.1px, transparent 1.7px);
		background-size: 12px 5px;
		background-position: 3px 0;
	}

.hero-id[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.profile-image-container[b-7jzwaabowk] {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
}

.profile-photo[b-7jzwaabowk] {
	width: 84px;
	height: 84px;
	border-radius: 25%;
	object-fit: cover;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--sky), 0 2px 8px rgba(0, 0, 0, .12);
}

.fab-btn-edit-image[b-7jzwaabowk],
.fab-btn-approve-user[b-7jzwaabowk] {
	position: absolute;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	cursor: pointer;
	z-index: 2;
	transition: background .2s, transform .3s var(--spring);
}

.fab-btn-edit-image[b-7jzwaabowk] {
	bottom: -8px;
	right: -8px;
	background: var(--voice);
	color: #fff;
}

	.fab-btn-edit-image:hover[b-7jzwaabowk] {
		background: #1565c0;
		transform: scale(1.1);
	}

.fab-btn-approve-user[b-7jzwaabowk] {
	top: -8px;
	left: -8px;
	background: #fff;
	color: gold;
}

	.fab-btn-approve-user:not(.approved):hover[b-7jzwaabowk] {
		background: #000;
		transform: scale(1.1);
	}

	/* Earned Gold: reserved for the approved marker. */
	.fab-btn-approve-user.approved[b-7jzwaabowk] {
		background: #FFD700;
		color: #000;
		cursor: default;
	}

.hero-id-text[b-7jzwaabowk] {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

.hero-name[b-7jzwaabowk] {
	font-family: 'Bungee', sans-serif;
	font-size: 1.25rem;
	line-height: 1.1;
	letter-spacing: .02em;
	overflow-wrap: anywhere;
}

.hero-since[b-7jzwaabowk] {
	font-family: 'Lunasima', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--ink-muted);
}

.hero-share[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .35rem;
	font-family: 'Lunasima', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--ink-muted);
	cursor: pointer;
}

/* Scoreboard tiles: 2 columns x 3 rows of equal-width pills, centered in the card's middle
   column rather than stretched across it. */
.hero-stats[b-7jzwaabowk] {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, max-content); /* each column as wide as its longest label - nothing truncates */
	gap: .5rem .75rem;
	justify-self: center;
}

.stat[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .7rem;
	border-radius: 999px;
	color: #fff;
	white-space: nowrap;
	min-width: 0;
	transition: transform .35s var(--spring);
}

	.stat:hover[b-7jzwaabowk] {
		transform: translateY(-2px);
	}

	.stat .rz-icon[b-7jzwaabowk],
	.stat .rzi[b-7jzwaabowk] {
		font-size: 1.25rem;
		flex-shrink: 0;
	}

.stat-label[b-7jzwaabowk] {
	flex: 1;
	font-size: 1rem;
}

.stat-num[b-7jzwaabowk] {
	font-family: 'Bungee', sans-serif;
	font-size: 1rem;
	padding-top: 2px;
}

/* Same color assignments as the badges on /user (DESIGN.md "Badges / Stat Pills"). */
.stat-total[b-7jzwaabowk] { background: var(--sky); color: var(--ink); }
.stat-open[b-7jzwaabowk] { background: #198754; }
.stat-unknown[b-7jzwaabowk] { background: #212529; }
.stat-closed[b-7jzwaabowk] { background: #dc3545; }
.stat-gold[b-7jzwaabowk] { background: var(--medal-gold, #E3B230); color: var(--ink); }
.stat-silver[b-7jzwaabowk] { background: var(--medal-silver, #B9C0C9); color: var(--ink); }

/* Mascot: bubble above the armadillo, tail pointing down at it. */
.hero-mascot[b-7jzwaabowk] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;
	align-self: end;
	margin-bottom: -1.25rem; /* feet on the card's bottom edge */
}

.mascot-img[b-7jzwaabowk] {
	height: 128px;
	width: auto;
	cursor: pointer;
	filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25));
	transition: transform .4s var(--spring);
}

	.mascot-img:hover[b-7jzwaabowk] {
		transform: translateY(-4px) rotate(-2deg);
	}

.speech-bubble[b-7jzwaabowk] {
	position: relative;
	max-width: 190px;
	padding: .4rem .9rem;
	background: #fff;
	color: var(--voice);
	border: 1px solid #eee;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	user-select: none;
	animation: bubble-pop-b-7jzwaabowk .6s var(--spring) backwards;
	transition: opacity .4s cubic-bezier(.4, 0, .2, 1), transform .3s var(--spring), box-shadow .2s;
}

	.speech-bubble[b-7jzwaabowk]::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -7px;
		width: 12px;
		height: 12px;
		background: #fff;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		transform: translateX(-50%) rotate(45deg);
	}

	.speech-bubble:hover[b-7jzwaabowk],
	.speech-bubble:focus-visible[b-7jzwaabowk] {
		transform: scale(1.05) rotate(-2deg);
		box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
	}

	.speech-bubble.fade[b-7jzwaabowk] {
		opacity: 0;
	}

@keyframes bubble-pop-b-7jzwaabowk {
	from { opacity: 0; transform: scale(.7); }
	to { opacity: 1; transform: scale(1); }
}

/* ---------------- Tabs ---------------- */

.tabs-wrap[b-7jzwaabowk] {
	position: relative; /* anchors .tab-actions to the tab strip's corner */
	margin-top: 1.5rem;
	margin-bottom: 2rem;
}

/* Import + export, on the tab strip's own row at its inline-end (left in RTL). */
.tab-actions[b-7jzwaabowk] {
	position: absolute;
	top: .45rem;
	inset-inline-end: 0;
	z-index: 20;
	display: flex;
	gap: .5rem;
}

.tab-toolbar[b-7jzwaabowk] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	padding: .5rem 0 .75rem;
	margin-bottom: .5rem;
	border-bottom: 1px dashed var(--md-stroke, #c7c7c7);
	font-family: 'Fredoka', system-ui, sans-serif;
}

.toolbar-search[b-7jzwaabowk] {
	flex: 1 1 12rem;
	min-width: 0;
}

.toolbar-actions[b-7jzwaabowk] {
	margin-inline-start: auto;
	display: flex;
	gap: .5rem;
}

/* Icon Toggle Button (DESIGN.md): neutral at rest, Sky Blue on hover/active. */
.icon-btn[b-7jzwaabowk] {
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #eee;
	color: #555;
	display: grid;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .2s, color .2s, transform .3s var(--spring);
}

	.icon-btn:hover[b-7jzwaabowk],
	.icon-btn:focus-visible[b-7jzwaabowk],
	.icon-btn.active[b-7jzwaabowk] {
		background: var(--sky);
		color: #fff;
	}

	.icon-btn:hover[b-7jzwaabowk] {
		transform: scale(1.08);
	}

/* Segmented day/week/month/year control. */
.seg[b-7jzwaabowk] {
	display: inline-flex;
	border: 1px solid #c7c7c7;
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.seg-btn[b-7jzwaabowk] {
	padding: .3rem .9rem;
	border: none;
	background: none;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s, color .15s;
}

	.seg-btn + .seg-btn[b-7jzwaabowk] {
		border-inline-start: 1px solid #e3e3e3;
	}

	.seg-btn.active[b-7jzwaabowk] {
		background: var(--sky);
		color: #fff;
	}

.empty-note[b-7jzwaabowk] {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--ink-muted);
	font-family: 'Fredoka', system-ui, sans-serif;
}

/* ---------------- Phone card lists (replace the data grids) ---------------- */

.room-list[b-7jzwaabowk] {
	display: grid;
	gap: .75rem;
}

.room-card[b-7jzwaabowk] {
	display: grid;
	gap: .5rem;
	padding: .75rem .85rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.room-card-head[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.room-card-name[b-7jzwaabowk] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.2;
	min-width: 0;
	overflow-wrap: anywhere;
}

.medal.gold[b-7jzwaabowk] { color: var(--medal-gold, #E3B230); }
.medal.silver[b-7jzwaabowk] { color: var(--medal-silver, #B9C0C9); }
.room-note[b-7jzwaabowk] { color: var(--sky); }

.room-card-meta[b-7jzwaabowk] {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1rem;
	font-family: 'Lunasima', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--ink-muted);
}

	.room-card-meta span[b-7jzwaabowk] {
		display: inline-flex;
		align-items: center;
		gap: .25rem;
	}

.room-card-activity[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	gap: .5rem;
}

/* ---------------- Stats ---------------- */

.stats-grid[b-7jzwaabowk] {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.stat-card[b-7jzwaabowk] {
	padding: .75rem;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	min-width: 0;
}

.stat-card-title[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .5rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--ink);
}

	.stat-card-title .rz-icon[b-7jzwaabowk],
	.stat-card-title .rzi[b-7jzwaabowk] {
		color: var(--sky);
	}

/* ---------------- Suggestions (same cards as /user) ---------------- */

.suggestions-toolbar[b-7jzwaabowk] {
	gap: 1rem;
}

.suggestion-cards-grid[b-7jzwaabowk] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 1.75rem 1.5rem;
	padding: 1.25rem .25rem 1rem;
}

.suggestion-card[b-7jzwaabowk] {
	position: relative;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	background: #fff;
}

.suggestion-card-bg[b-7jzwaabowk] {
	position: relative;
	aspect-ratio: 16 / 9;
}

.suggestion-card-image[b-7jzwaabowk] {
	position: absolute;
	inset: 0;
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

	.suggestion-card-image[b-7jzwaabowk]::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .75) 100%);
		transition: transform .4s ease;
	}

.suggestion-card:hover .suggestion-card-image[b-7jzwaabowk]::after {
	transform: scale(1.05);
}

.suggestion-card .room-ribbon-text[b-7jzwaabowk] {
	font-size: .85rem;
}

.suggestion-card .room-ribbon[b-7jzwaabowk] {
	top: 0;
	transform: translateY(-50%);
}

@keyframes suggestion-ribbon-shake-b-7jzwaabowk {
	0% { transform: translateY(-50%) translate3d(0, 0, 0) rotate(0deg); }
	15% { transform: translateY(-50%) translate3d(-1px, 0, 0) rotate(-1deg); }
	30% { transform: translateY(-50%) translate3d(1px, 0, 0) rotate(1deg); }
	45% { transform: translateY(-50%) translate3d(-1px, 0, 0) rotate(-0.8deg); }
	60% { transform: translateY(-50%) translate3d(1px, 0, 0) rotate(0.8deg); }
	75% { transform: translateY(-50%) translate3d(-0.6px, 0, 0) rotate(-0.6deg); }
	100% { transform: translateY(-50%) translate3d(0, 0, 0) rotate(0deg); }
}

.suggestion-card:hover .room-ribbon[b-7jzwaabowk] {
	animation: suggestion-ribbon-shake-b-7jzwaabowk .6s ease-in-out both;
}

/* Rating badge: left-anchored here because the right-extending ribbon would collide with a centered one. */
.suggestion-card-rating[b-7jzwaabowk] {
	position: absolute;
	top: 0;
	left: .5rem;
	transform: translateY(-50%);
	z-index: 150;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #f7f7f7;
	display: grid;
	place-items: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.suggestion-card-footer[b-7jzwaabowk] {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: .25rem .5rem;
	padding: .6rem .5rem;
	font-size: 1rem;
	color: var(--ink-muted);
}

.suggestion-footer-info[b-7jzwaabowk] {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

	.suggestion-footer-info > div[b-7jzwaabowk] {
		justify-content: flex-start;
	}

/* ---------------- Save button (slides in when there are unsaved edits) ---------------- */

/* Drops into the middle of the navbar's bar - free on this page, the navbar's bubble stays home
   here - centered on the bar under its 5px marquee strip, and above the sticky navbar (1025). */
.save-changes[b-7jzwaabowk] {
	--spring: cubic-bezier(.34, 1.56, .64, 1); /* outside .hero/.tabs-wrap, which set it for the rest */
	position: fixed;
	top: calc(5px + var(--ark-nav-bar-h) / 2);
	left: 50%;
	transform: translate(-50%, -50%) translateY(-40px);
	opacity: 0;
	pointer-events: none;
	transition: transform .5s var(--spring), opacity .4s cubic-bezier(.4, 0, .2, 1);
	z-index: 1030;
}

	.save-changes.slide-in[b-7jzwaabowk] {
		transform: translate(-50%, -50%);
		opacity: 1;
		pointer-events: auto;
	}

.import-title[b-7jzwaabowk] {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.rz-form-field[b-7jzwaabowk], .rz-form-field > .rz-form-field-content[b-7jzwaabowk] {
	width: 100% !important;
}

/* ---------------- Phone ---------------- */

@media (max-width: 991.98px) {
	/* Compact tabs: all but the open one are just icon and count (TabText). The open tab takes the
	   rest of the strip, and if its full name still doesn't fit (the suggestions tab on a 375px
	   phone) it wraps to a second line rather than pushing the page sideways. */
	.tabs-wrap[b-7jzwaabowk]  .rz-tabview-nav {
		--rz-tabs-tab-padding-inline: .45rem;
	}

		.tabs-wrap[b-7jzwaabowk]  .rz-tabview-nav li {
			flex-shrink: 0;
		}

		.tabs-wrap[b-7jzwaabowk]  .rz-tabview-nav li.rz-tabview-selected {
			flex-shrink: 1;
			min-width: 0;
		}

		.tabs-wrap[b-7jzwaabowk]  .rz-tabview-selected [role="tab"] {
			max-width: 100%;
		}

		.tabs-wrap[b-7jzwaabowk]  .rz-tabview-selected .rz-tabview-title {
			min-width: 0;
			line-height: 1.2;
		}

	.hero[b-7jzwaabowk] {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem;
		margin-top: 1rem;
	}

	.hero-stats[b-7jzwaabowk] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-self: stretch;
	}

	.stat[b-7jzwaabowk] {
		padding: .3rem .6rem;
	}

	.hero-mascot[b-7jzwaabowk] {
		flex-direction: row-reverse; /* armadillo on the right, bubble to its left */
		justify-content: center;
		align-items: center;
		gap: .75rem;
		align-self: auto;
		margin-bottom: 0;
	}

	.mascot-img[b-7jzwaabowk] {
		height: 96px;
	}

	.speech-bubble[b-7jzwaabowk]::after {
		left: auto;
		right: -7px;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%) rotate(-45deg);
		border: none;
		border-right: 1px solid #eee;
		border-top: 1px solid #eee;
	}

	.stats-grid[b-7jzwaabowk] {
		grid-template-columns: 1fr;
	}

	/* Below desktop it rises into the fixed footer instead, centered on the footer's bar (3rem,
	   above its 5px strip of lights). */
	.save-changes[b-7jzwaabowk] {
		top: auto;
		bottom: calc(5px + 1.5rem);
		transform: translate(-50%, 50%) translateY(40px);
	}

		.save-changes.slide-in[b-7jzwaabowk] {
			transform: translate(-50%, 50%);
		}
}

/* Narrower than this the footer's brand and buttons leave too little room between them for it,
   so it floats just above the footer instead. */
@media (max-width: 439.98px) {
	.save-changes[b-7jzwaabowk] {
		bottom: calc(5px + 3rem + .5rem);
		transform: translateX(-50%) translateY(40px);
	}

		.save-changes.slide-in[b-7jzwaabowk] {
			transform: translateX(-50%);
		}
}

@media (max-width: 480px) {
	.hero-id[b-7jzwaabowk] {
		flex-direction: column;
		text-align: center;
	}

	.hero-id-text[b-7jzwaabowk] {
		align-items: center;
	}

	.hero-stats[b-7jzwaabowk] {
		grid-template-columns: 1fr;
	}
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
	.speech-bubble[b-7jzwaabowk],
	.mascot-img[b-7jzwaabowk],
	.stat[b-7jzwaabowk],
	.icon-btn[b-7jzwaabowk],
	.fab-btn-edit-image[b-7jzwaabowk],
	.fab-btn-approve-user[b-7jzwaabowk],
	.save-changes[b-7jzwaabowk],
	.suggestion-card-image[b-7jzwaabowk]::after {
		animation: none;
		transition: none;
	}

	.suggestion-card:hover .room-ribbon[b-7jzwaabowk] {
		animation: none;
	}
}

/* ---------------- Desktop: no page-level scroll ----------------
   The page fills the space between the sticky navbar and the fixed footer; the player card
   stays put and the active tab panel is the only thing that scrolls (the played grid has its
   own internal scroll region sized to fit inside that panel). */

@media (min-width: 992px) {
	.page-alt[b-7jzwaabowk] {
		height: calc(100vh - 12.25rem); /* navbar + fixed footer + breathing room; the panel scrollbar must clear the footer */
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.hero[b-7jzwaabowk] {
		flex-shrink: 0;
	}

	.tabs-wrap[b-7jzwaabowk] {
		flex: 1;
		min-height: 0;
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
	}

	.tabs-wrap[b-7jzwaabowk]  .rz-tabview {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.tabs-wrap[b-7jzwaabowk]  .rz-tabview-panels {
		flex: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.tabs-wrap[b-7jzwaabowk]  .rz-tabview-panel {
		flex: 1;
		min-height: 0;
		overflow: auto;
	}

	/* The played tab: the grid is the panel's only child and owns the one scrollbar, so the
	   panel itself must never scroll. */
	.tabs-wrap[b-7jzwaabowk]  .rz-tabview-panel:has(> .played-grid) {
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.tabs-wrap[b-7jzwaabowk]  .played-grid {
		flex: 1;
		min-height: 0;
	}
}
/* /Components/Pages/View.razor.rz.scp.css */


body[b-9dp2gr0h53] {
}




.status-btn:hover[b-9dp2gr0h53] {
	text-decoration: underline;
}

/* Room cards pop in staggered by position (delay set inline per-card) when the
   list first renders or a filter reveals cards that weren't there before. */
.card-enter[b-9dp2gr0h53] {
	animation: card-pop-in-b-9dp2gr0h53 .5s cubic-bezier(.22,.85,.32,1) both;
}

/* The catalogue renders every room at once (~200 cards, ~10k DOM nodes). Letting the browser skip
   layout/paint for cards far off-screen cut a full style+layout pass from ~75ms to ~13ms (measured
   on desktop; phones gain more), which is what every filter click re-renders. content-visibility
   clips paint to the column box, so the clip margin keeps room for what deliberately overhangs the
   card: the rating badge straddling its top edge (~19px) and the ribbon tail past its side. Gated on
   clip-margin support so a browser without it keeps the old behaviour instead of clipping the badge. */
@supports (content-visibility: auto) and (overflow-clip-margin: 1px) {
	.card-enter[b-9dp2gr0h53] {
		content-visibility: auto;
		contain-intrinsic-size: auto 340px;
		overflow-clip-margin: 24px;
	}
}

@keyframes card-pop-in-b-9dp2gr0h53 {
	from {
		opacity: 0;
		transform: translateY(16px) scale(.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-enter[b-9dp2gr0h53] {
		animation: none;
	}
}

/* Filter count badge "ticks" - a quick scale+color pop - every time the
   filtered/total counts change. The @key on the span forces Blazor to mount a
   fresh element whenever the count changes, which is what replays this. */
.count-tick[b-9dp2gr0h53] {
	display: inline-block;
	animation: count-tick-b-9dp2gr0h53 .45s ease-out;
}

@keyframes count-tick-b-9dp2gr0h53 {
	0%, 100% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.3);
		color: var(--text-primary);
	}

	70% {
		transform: scale(.94);
	}
}

@media (prefers-reduced-motion: reduce) {
	.count-tick[b-9dp2gr0h53] {
		animation: none;
	}
}

/* Room card layout: fixed height so background is visible */
.room-card[b-9dp2gr0h53] {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 230px;
	overflow: hidden; /* clip background/overlay to corners below */
	/* Rounded only at the top, square at the bottom */
	border-top-left-radius: var(--bs-border-radius, .375rem);
	border-top-right-radius: var(--bs-border-radius, .375rem);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}



	.room-card .card-body[b-9dp2gr0h53] {
		margin-top: auto;
		position: relative;
		z-index: 1;
	}

	/* Room card background image styling */
	.room-card.has-bg[b-9dp2gr0h53] {
		background-size: contain; /* show the whole image */
		background-position: center;
		background-repeat: no-repeat;
		background-color: #1a1a1a; /* letterbox area color */
		color: #fff;
		aspect-ratio: 16/9;
		background-size: contain;
	}


		/* zoomable image layer (inherits background from parent) */
		.room-card.has-bg[b-9dp2gr0h53]::after {
			content: "";
			position: absolute;
			inset: 0;
			background-image: inherit;
			background-position: inherit;
			background-repeat: inherit;
			background-size: inherit;
			transform-origin: center;
			transition: transform .4s ease, filter .4s ease;
			z-index: 0;
			pointer-events: none;
		}
		/* subtle gradient overlay above the image */
		.room-card.has-bg[b-9dp2gr0h53]::before {
			content: "";
			position: absolute;
			inset: 0;
			/*  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.33));*/
			z-index: 1;
			pointer-events: none;
		}
		/* hover zoom/impact */
		.room-card.has-bg:hover[b-9dp2gr0h53]::after {
			transform: scale(1.08);
			filter: brightness(1.06) contrast(1.05);
		}

/* Top-left ribbon that exceeds the image bounds slightly */
.paper-clip[b-9dp2gr0h53] {
	position: absolute;
	top: 5px;
	right: -13px; /* exceed a bit outside */
	z-index: 100;
}

	.paper-clip.flipped[b-9dp2gr0h53] {
		display: none;
	}

	.paper-clip svg[b-9dp2gr0h53] {
		width: 48px;
		height: 48px;
		transform: rotate(-10deg);
		fill: rgba(0,0,0,0.15);
	}



.room-ribbon.flipped[b-9dp2gr0h53] {
	top: auto;
	bottom: 16px !important;
}

/* Only shown while the list-sort toggle is set to "newest" - a reminder of the field the
   list is actually sorted by, since open date isn't otherwise visible on this card. Tucked
   in the corner .ratings/.room-ribbon leave free (top-center and top-right respectively). */
.room-open-date-badge[b-9dp2gr0h53] {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .25rem .5rem;
	border-radius: 4px; /* DESIGN.md rounded.xs - matches Room Ribbon's own radius */
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: .85rem; /* matches the existing small-caption size used elsewhere for photo-overlay text */
}

	.room-open-date-badge .rz-icon[b-9dp2gr0h53] {
		font-size: 16px;
	}

/* Actions area pinned to bottom inside the room-card */
.room-card-actions[b-9dp2gr0h53] {
	margin-top: auto; /* push to bottom */
	position: relative;
	z-index: 2; /* above overlay */
	padding: .5rem;
	background: rgba(0,0,0,.15);
	display: flex;
	flex-direction: column;
}

/* Tighten spacing in the card body to reduce bottom empty space */
.card .card-body[b-9dp2gr0h53] {
	padding: .5rem .75rem .5rem;
}

.card .card-title[b-9dp2gr0h53] {
	margin-bottom: .25rem;
}

.card .card-body p[b-9dp2gr0h53] {
	margin-bottom: .25rem;
}

.card .card-body > :last-child[b-9dp2gr0h53] {
	margin-bottom: 0;
}



svg[b-9dp2gr0h53] {
	fill: var(--text-primary);
	height: 24px;
	width: 24px;
	min-width: 24px;
	min-height: 24px;
}

a[b-9dp2gr0h53] {
	text-decoration: none;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.radzen-file-input-preview[b-9dp2gr0h53],
.radzen-file-input-remove[b-9dp2gr0h53] {
	display: none !important;
}

.card-title[b-9dp2gr0h53] {
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.address[b-9dp2gr0h53] {
	font-size: 12px;
	margin: 0; /* remove extra paragraph margin to tighten bottom space */
}


.info svg[b-9dp2gr0h53] {
	fill: black;
}

.rz-panel-titlebar[b-9dp2gr0h53] {
	flex-direction: row-reverse;
	justify-content: right;
}


.region-children[disabled][b-9dp2gr0h53] {
	opacity: .4;
	pointer-events: none;
}


.city-room-count[b-9dp2gr0h53] {
	padding-inline-end: 75px;
}

/* Room tags bar sits over the image; no backdrop so domes stand alone */
.room-tags[b-9dp2gr0h53] {
	position: absolute;
	left: .25rem;
	bottom: .25rem;
	display: inline-flex;
	align-items: end;
	gap: .35rem;
	padding: .2rem .25rem;
	background: transparent;
	z-index: 3;
	flex-direction: row;
}

.ratings[b-9dp2gr0h53] {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: .35rem;
	padding: .3rem .3rem;
	background: #f7f7f7;
	border-radius: 8px;
	z-index: 5;
	outline: 2px solid transparent;
	transition: outline-color 0.3s, outline-width 0.3s;
}

	.ratings svg[b-9dp2gr0h53] {
		height: 32px;
		width: 32px;
	}


	.ratings:hover[b-9dp2gr0h53] {
		outline-color: black;
	}

	.ratings.SuperLike svg[b-9dp2gr0h53] {
		animation: bubble-breath-b-9dp2gr0h53 1.2s infinite cubic-bezier(.4,0,.2,1);
		transition: filter 0.3s;
		border-radius: 8px;
		border: solid 2px darkgreen;
	}

@keyframes bubble-breath-b-9dp2gr0h53 {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.14);
	}

	60% {
		transform: scale(1.06);
	}

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


.card-user-overlay[b-9dp2gr0h53] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	border-radius: inherit;
	background-color: rgba(130,130,130,0.25);
}

	.card-user-overlay svg[b-9dp2gr0h53] {
		width: 250px;
		height: 250px;
		fill: var(--bg-min-players);
		opacity: 0.45;
		filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
	}

.done[b-9dp2gr0h53] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(40, 40, 40, 0.15); /* semi-opaque overlay */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	border-radius: inherit;
}

.room-tags-min[b-9dp2gr0h53] {
	position: absolute;
	right: .25rem;
	bottom: .25rem;
	display: inline-flex;
	align-items: end;
	gap: .35rem;
	padding: .2rem .25rem;
	background: transparent;
	z-index: 3;
	flex-direction: column;
}

.room-tags-fear[b-9dp2gr0h53] {
	position: absolute;
	left: .25rem;
	top: .25rem;
	display: inline-flex;
	align-items: end;
	gap: .35rem;
	padding: .2rem .25rem;
	background: transparent;
	z-index: 3;
	flex-direction: column;
}

.fear[b-9dp2gr0h53] {
	color: var(--bg-fear);
}

.min-players[b-9dp2gr0h53] {
	color: var(--bg-min-players);
}


/* “Dome” icon holder: almost full circle with a flat bottom */
.tag-container[b-9dp2gr0h53] {
	/* Tweak these to control size/flatness */
	--tag-diameter: 46px; /* circle diameter */
	--tag-height: 32px; /* visible height (smaller -> flatter bottom) */

	position: relative;
	width: var(--tag-diameter);
	height: var(--tag-height);
	overflow: hidden; /* clip the bottom to a straight line */
	display: grid;
	place-items: center;
	align-items: center;
	justify-content: center;
}






.room-tags .tag-container[b-9dp2gr0h53]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0 auto;
	width: var(--tag-diameter);
	height: var(--tag-diameter);
	background: var(--text-primary);
	border-radius: 50%; /* full circle */
	top: calc(-0.5 * (var(--tag-diameter) - var(--tag-height))); /* raise circle so bottom is cut */
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
	transition: background-color .25s ease;
}

.room-tags .gold[b-9dp2gr0h53]::before {
	background: gold !important;
}

.room-tags-min .tag-container[b-9dp2gr0h53]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: var(--tag-diameter);
	height: var(--tag-diameter);
	background: var(--bg-min-players);
	border-radius: 50%; /* full circle */
	top: calc(-0.5 * (var(--tag-diameter) - var(--tag-height))); /* raise circle so bottom is cut */
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
	transition: background-color .25s ease;
}

.room-tags-fear .tag-container[b-9dp2gr0h53]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: var(--tag-diameter);
	height: var(--tag-diameter);
	background: var(--bg-fear);
	border-radius: 50%; /* full circle */
	top: calc(-0.5 * (var(--tag-diameter) - var(--tag-height))); /* raise circle so bottom is cut */
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
	transition: background-color .25s ease;
}

/* Icon inside the dome */
.tag-container svg[b-9dp2gr0h53] {
	position: relative; /* above the pseudo-circle */
	z-index: 5;
	width: 25px;
	height: 25px;
	fill: white;
}

.room-tags svg[b-9dp2gr0h53] {
	fill: black;
}

.tag-container span[b-9dp2gr0h53] {
	position: relative; /* above the pseudo-circle */
	z-index: 5;
	width: 25px;
	height: 25px;
	color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}



/* Optional: hover pop */
.tag-container:hover[b-9dp2gr0h53]::before {
	background-color: color-mix(in srgb, var(--text-primary) 85%, white 15%);
}



.tag-toggle svg[b-9dp2gr0h53] {
	fill: black;
}

.rz-button-md[b-9dp2gr0h53] {
	padding: 4px !important;
}










.card-flip-container[b-9dp2gr0h53] {
	position: relative;
	height: 230px;
}

	.card-flip-container.close[b-9dp2gr0h53] {
		height: 120px;
	}


.card-flip[b-9dp2gr0h53] {
	transition: transform 0.6s cubic-bezier(.4,0,.2,1);
	transform-style: preserve-3d;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	backface-visibility: hidden;
}

.card-flip-front[b-9dp2gr0h53] {
	z-index: 2;
	background: inherit;
}

.card-flip-back[b-9dp2gr0h53] {
	transform: rotateY(180deg);
	z-index: 1;
	background: #fff;
	/* .room-card is a column flex container with no align-items of its own, so its
	   children stretch to fill the full width by default - that's right for the front
	   face's image, but on the back face it forced the ratings editor to stretch edge
	   to edge too. Center instead, so the editor sizes to its own content. */
	align-items: center;
	justify-content: center;
}

.room-card.card-flip-back[b-9dp2gr0h53]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 1;
	pointer-events: none;
}

.rate-toggle[b-9dp2gr0h53] {
	width: 100px !important;
}

.ratings-group[b-9dp2gr0h53] {
	display: grid;
	grid-template-columns: 1fr 1fr;
}


.ratings-editor[b-9dp2gr0h53] {
	z-index: 100;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	position: relative;
	justify-content: center;
	align-items: center;
}

/* Card back-face rows (played/hide/add-to-list): each row is its own flex line so the
   icon, label and switch always align to a common vertical center - the previous
   3-parallel-column layout relied on matching heights across separate stacks, which
   drifted out of alignment whenever icon/label/switch sizes didn't line up exactly. */
.rating-switch-list[b-9dp2gr0h53] {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.rating-switch-row[b-9dp2gr0h53] {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.rating-switch-icon[b-9dp2gr0h53] {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

	.rating-switch-icon svg[b-9dp2gr0h53] {
		width: 22px;
		height: 22px;
	}

.rating-switch-label[b-9dp2gr0h53] {
	flex: 1;
	font-size: .85rem;
	text-align: right;
}

.rating-editor-na[b-9dp2gr0h53] {
	z-index: 100;
	padding-block: 0.5rem;
	padding-inline: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

.editor-save[b-9dp2gr0h53] {
	padding-top: 1rem;
	align-self: center;
}

.card-flip-container.flipped .card-flip-front[b-9dp2gr0h53] {
	transform: rotateY(180deg);
}

.card-flip-container.flipped .card-flip-back[b-9dp2gr0h53] {
	transform: rotateY(0deg);
}

.card-flip-back.card.room-card.has-bg[b-9dp2gr0h53] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: space-between;
	min-height: 100%; /* Ensure it fills the available space */
}


.personal-switches-grid[b-9dp2gr0h53] {
	display: grid;
	grid-template-columns: 24px max-content max-content 1fr;
	grid-template-rows: repeat(3, auto);
	align-items: center;
	justify-content: center;
}

.switch-svg[b-9dp2gr0h53], .switch-label[b-9dp2gr0h53], .switch-control[b-9dp2gr0h53] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}


	.switch-svg svg[b-9dp2gr0h53] {
		height: 24px;
		width: 24px;
		margin-bottom: 0;
	}

.switch-label[b-9dp2gr0h53] {
	font-size: 0.85rem;
}

	.switch-label span[b-9dp2gr0h53] {
		text-align: right;
		padding-inline-end: 2px;
	}

.switch-control[b-9dp2gr0h53] {
	align-items: flex-end;
}


.user-tag-ribbon[b-9dp2gr0h53] {
	position: absolute;
	top: 56px; /* adjust to place under room name ribbon */
	right: -16px;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	background: #fff;
	border-radius: 28px;
	border: 3px solid #2d5cae;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 0 18px 0 12px;
	z-index: 5;
}

	.user-tag-ribbon.close[b-9dp2gr0h53] {
		padding: 0 18px 0 0px;
	}


.user-tag-img[b-9dp2gr0h53] {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #2d5cae;
	background: #fff;
	margin-right: -18px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.user-tag-svg[b-9dp2gr0h53] {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.user-tag-svg.like[b-9dp2gr0h53] {
		fill: var(--rz-success-darker) !important;
	}

	.user-tag-svg.dislike[b-9dp2gr0h53] {
		fill: var(--rz-danger-darker) !important;
	}

	.user-tag-svg.neutral[b-9dp2gr0h53] {
		fill: var(--rz-secondary-darker) !important;
	}

	.user-tag-svg.none[b-9dp2gr0h53] {
		fill: var(--rz-dark) !important;
	}


/* Sticks just under the navbar (Bootstrap's sticky-top parks it at 0, behind the bar). It starts
   level with the List/Map tab strip, and both park at the same offset, so they stay aligned. */
.filters-panel[b-9dp2gr0h53] {
	top: var(--ark-nav-h);
	padding: 1rem;
}

.filters-head[b-9dp2gr0h53] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .25rem;
	color: var(--md-text); /* Ink */
}

/* From Bootstrap's xl breakpoint the filters sit beside the list (below it they stack on top of it).
   There the panel is capped to the viewport, scrolling inside rather than running on past the
   footer, and collapsing it retracts it into a rail - the stages are FiltersStage in View.razor. */
@media (min-width: 1200px) {
	.filters-aside[b-9dp2gr0h53] {
		/* The capped panel never reaches the footer, so the aside needn't keep clear of it (app.css). */
		padding-bottom: 0;
		transition: width .3s cubic-bezier(.22, 1, .36, 1);
	}

	/* The list takes whatever width the filters leave it. */
	.rooms-main[b-9dp2gr0h53] {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.filters-panel[b-9dp2gr0h53] {
		/* From where it starts (under the navbar and the page's top margin) to clear of the fixed footer. */
		max-height: calc(100dvh - var(--ark-nav-h) - 8rem);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	/* Folded, and while retracting or widening: the header stays one line, cut off at the panel's
	   edge rather than wrapping as the width changes. */
	.filters-folded .filters-panel[b-9dp2gr0h53] {
		overflow: hidden;
	}

	.filters-folded .filters-head[b-9dp2gr0h53] {
		white-space: nowrap;
	}

	.filters-narrow[b-9dp2gr0h53] {
		width: 3.75rem; /* a 2.75rem rail plus the row's gutter */
	}

	/* The rail. Its header lies on its side, a quarter-turn counter-clockwise so it reads top-down,
	   facing the list: writing-mode runs it down the rail (text turned clockwise), and a half-turn
	   flips it around. SVGs stay upright in vertical text, so they take the last quarter-turn
	   themselves. It unrolls down from the top, and anywhere on it opens the panel. */
	.filters-rail .filters-panel[b-9dp2gr0h53] {
		padding: .75rem .25rem;
		cursor: pointer;
		animation: filters-rail-unroll-b-9dp2gr0h53 .3s cubic-bezier(.22, 1, .36, 1) backwards;
	}

		/* A Sky Blue wash over the card's own gray, laid on as an image so it needn't know that gray. */
		.filters-rail .filters-panel:hover[b-9dp2gr0h53] {
			background-image: linear-gradient(color-mix(in srgb, var(--text-primary) 15%, transparent));
		}

	.filters-rail .filters-head[b-9dp2gr0h53] {
		writing-mode: vertical-rl;
		rotate: 180deg;
		justify-content: flex-start;
		gap: 1rem;
		margin: 0;
	}

		.filters-rail .filters-head svg[b-9dp2gr0h53] {
			rotate: 90deg;
		}

		.filters-rail .filters-head h6[b-9dp2gr0h53]::after {
			content: "";
			position: absolute;
			inset: 0;
		}

		/* Hidden, it still takes up room (it's only shifted aside and faded) - dead length on the rail. */
		.filters-rail .clear-filters:not(.slide-in)[b-9dp2gr0h53] {
			display: none;
		}

	.filters-rolling-up .filters-panel[b-9dp2gr0h53] {
		animation: filters-rail-roll-up-b-9dp2gr0h53 .2s cubic-bezier(.4, 0, 1, 1) forwards;
	}
}

@keyframes filters-rail-unroll-b-9dp2gr0h53 {
	from {
		clip-path: inset(0 0 100% 0);
	}
}

@keyframes filters-rail-roll-up-b-9dp2gr0h53 {
	to {
		clip-path: inset(0 0 100% 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters-aside[b-9dp2gr0h53] {
		transition: none;
	}

	.filters-rail .filters-panel[b-9dp2gr0h53],
	.filters-rolling-up .filters-panel[b-9dp2gr0h53] {
		animation: none;
	}
}


@media (max-width: 767px) {

	.filters-panel[b-9dp2gr0h53] {
		z-index: 0;
	}
}


.tag-popup-overlay[b-9dp2gr0h53] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.08);
	z-index: 2999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tag-popup[b-9dp2gr0h53] {
	background: linear-gradient(135deg, #eceff1 0%, #d3d6db 100%);
	color: #222;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1.5px 6px rgba(0,0,0,0.10);
	padding: 1.5rem 2.2rem;
	min-width: 220px;
	max-width: 45vw;
	max-height: 60vh;
	overflow: auto;
	font-size: 1.1rem;
	position: relative;
	border: 1px solid #e0e0e0;
}

.tag-popup-title[b-9dp2gr0h53] {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: #222;
	letter-spacing: 0.01em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tag-popup-tooltip[b-9dp2gr0h53] {
	font-size: 1rem;
	color: #555;
	opacity: 0.92;
	line-height: 1.5;
	font-weight: 400;
	align-items: center;
	justify-content: center;
	text-align: center;
}


.company-branch-filters[b-9dp2gr0h53] {
	position: absolute;
	left: 50%;
	top: 73px;
	transform: translateX(-50%);
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


.ratings-filter[b-9dp2gr0h53] {
	border-radius: 25%;
	border: 1px solid black;
	padding: 2px;
}



	.ratings-filter.SuperLike[b-9dp2gr0h53] {
		animation: bubble-breath-b-9dp2gr0h53 1.2s infinite cubic-bezier(.4,0,.2,1);
		transition: filter 0.3s;
		border-radius: 8px;
		border: solid 2px darkgreen;
	}

/* RadzenTabsItem has no supported hook for custom content in its own tab-strip label, so the
   list-sort toggle is laid over that row instead. Only 2 tabs live here (List/Map), which in RTL
   render starting from the right, leaving the left side of the strip free for this.
   The strip and the toggle both stick under the navbar while the list scrolls. They start on the
   same line and park at the same offset, so they move as one. */
.tabs-with-sort-toggle[b-9dp2gr0h53] {
	--tab-strip-top: var(--ark-nav-h);
}

	/* Opaque so the cards scroll away beneath it, and above the cards' own badges (z-index up to 100). */
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav {
		position: sticky;
		top: var(--tab-strip-top);
		z-index: 110;
		background: var(--md-bg);
	}

.list-sort-toggle[b-9dp2gr0h53] {
	position: sticky;
	top: var(--ark-nav-h);
	z-index: 111;
	/* Zero height: it overlays the strip's row rather than taking one of its own. The select bar
	   hangs out of it at the inline end (left, in RTL), nudged down to sit on the tabs' line. */
	height: 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	translate: 0 .4rem;
	/* Radzen's select bar paints the chosen segment with its theme's secondary (#35a0d7); re-point it
	   at the app's Sky Blue primary. Set on this wrapper so the variables inherit into Radzen's markup. */
	--rz-selectbar-selected-background-color: var(--text-primary);
	--rz-selectbar-selected-color: #fff;
	--rz-selectbar-selected-border: 1px solid var(--text-primary);
	--rz-selectbar-border: 1px solid var(--text-primary);
	--rz-selectbar-color: var(--text-primary);
}

/* Two labelled segments plus the List/Map tabs (~440px together) don't fit one strip row on a
   phone, so below Bootstrap's sm breakpoint the toggle gets its own row above the tabs instead -
   it can no longer collide with them. Both rows still stick: the strip parks below the toggle's
   row while that row is shown (List tab only). */
@media (max-width: 575.98px) {
	.tabs-with-sort-toggle[b-9dp2gr0h53] {
		--list-sort-row-h: 2.75rem; /* the 36px select bar + its .5rem gap */
	}

		.tabs-with-sort-toggle:has(> .list-sort-toggle)[b-9dp2gr0h53] {
			--tab-strip-top: calc(var(--ark-nav-h) + var(--list-sort-row-h));
		}

	.list-sort-toggle[b-9dp2gr0h53] {
		height: var(--list-sort-row-h);
		padding-bottom: .5rem;
		translate: none;
		background: var(--md-bg);
	}

		/* Kept to one line so the row's height holds - the labels would wrap to two on a phone and
		   spill over the tab strip. Tighter padding lets it fit a 360px screen. */
		.list-sort-toggle[b-9dp2gr0h53]  .rz-button {
			white-space: nowrap;
			padding-inline: .4rem;
		}
}

/* ?filters=alt: the RoomFilters proposal. Beside the list from xl, where it takes a fixed column
   that narrows to the coin rail when collapsed; the list (.rooms-main, flex 1) takes the rest. */
@media (min-width: 1200px) {
	.filters-aside-alt[b-9dp2gr0h53] {
		width: 21.5rem;
		transition: width .35s cubic-bezier(.22, 1, .36, 1);
	}

		/* Collapsed: the aside gives up its column entirely and the coin rail moves out into the page's
		   7rem gutter (centered in it), so the card grid gets the whole row and can fit another column. */
		.filters-aside-alt.narrow[b-9dp2gr0h53] {
			width: 0;
			padding-inline: 0;
		}

			.filters-aside-alt.narrow[b-9dp2gr0h53]  .rf-rail {
				margin-inline-start: calc(-3.25rem - 1.875rem); /* rail width + (gutter - rail) / 2 */
				/* glides out of the column into the gutter rather than appearing there; replaces the rail's own pop-in */
				animation: rail-slide-out-b-9dp2gr0h53 .45s cubic-bezier(.34, 1.56, .64, 1) both;
			}
}

@media (prefers-reduced-motion: reduce) {
	.filters-aside-alt[b-9dp2gr0h53] {
		transition: none;
	}
}

@keyframes rail-slide-out-b-9dp2gr0h53 {
	from {
		margin-inline-start: 0;
		opacity: .6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters-aside-alt.narrow[b-9dp2gr0h53]  .rf-rail,
	.pv-aside.narrow[b-9dp2gr0h53]  .rf-rail {
		animation: none;
	}
}

/* ?filters=alt, collapsed: the column count follows the aside's actual state in CSS as well, so
   the extra column appears the moment the rail slides out, whatever the row's class says. */
@media (min-width: 1200px) {
	.filters-aside-alt.narrow ~ .rooms-main .row-cols-xl-4 > *[b-9dp2gr0h53] {
		flex: 0 0 auto;
		width: 20%;
	}

	.filters-aside-alt.narrow ~ .rooms-main .row-cols-xl-3 > *[b-9dp2gr0h53] {
		flex: 0 0 auto;
		width: 25%;
	}
}
/* /Components/Shared/ImportPlayedDialog.razor.rz.scp.css */
/* Played-rooms CSV import dialog. The dialog itself is sized by the caller (DialogOptions); this
   shell fills it: steps on top, a scrolling body, and a footer that always shows what will happen. */
.import-shell[b-k7adhwjupb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 1rem;
    font-family: 'Lunasima', system-ui, sans-serif;
    color: #1f1f1f;
}

/* ---------- Steps ---------- */
.import-steps[b-k7adhwjupb] {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Fredoka', system-ui, sans-serif;
    color: #444;
}

    .import-steps li[b-k7adhwjupb] {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .import-steps .current[b-k7adhwjupb] {
        color: #1f1f1f;
        font-weight: 600;
    }

.import-step-num[b-k7adhwjupb] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #eee;
    color: #444;
    font-family: 'Bungee', sans-serif;
}

.import-steps .current .import-step-num[b-k7adhwjupb] {
    background: #1976d2;
    color: #fff;
}

.import-steps .done .import-step-num[b-k7adhwjupb] {
    background: var(--text-primary);
    color: #fff;
}

/* ---------- Body ---------- */
.import-body[b-k7adhwjupb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.import-loading[b-k7adhwjupb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #444;
}

.import-lead[b-k7adhwjupb],
.import-note[b-k7adhwjupb] {
    margin: 0;
    color: #444;
}

.import-error[b-k7adhwjupb] {
    margin: 0;
    color: var(--md-error);
}

/* Step 1: the whole card is the file input (invisible, stretched over it), so clicking and
   dropping a file both work natively. */
.import-drop[b-k7adhwjupb] {
    position: relative;
    flex: 1;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    border: 2px dashed #c7c7c7;
    border-radius: 16px;
    background: #f7f7f7;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}

    .import-drop:hover[b-k7adhwjupb],
    .import-drop:focus-within[b-k7adhwjupb] {
        border-color: var(--text-primary);
        background: #fff;
    }

    .import-drop[b-k7adhwjupb]  .import-drop-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .import-drop[b-k7adhwjupb]  .import-drop-icon {
        font-size: 3rem;
        color: var(--text-primary);
    }

.import-drop-title[b-k7adhwjupb] {
    font-family: 'Fredoka', system-ui, sans-serif;
    font-size: 1.25rem;
}

.import-drop-hint[b-k7adhwjupb] {
    color: #444;
    max-width: 38ch;
}

/* Step 2: the two column pickers and the header toggle on one line. */
.import-mapping[b-k7adhwjupb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.import-field[b-k7adhwjupb] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .import-field label[b-k7adhwjupb] {
        font-family: 'Fredoka', system-ui, sans-serif;
    }

.import-check[b-k7adhwjupb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .4rem;
    cursor: pointer;
}

/* ---------- Tables ---------- */
.import-table-wrap[b-k7adhwjupb] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid #eee;
    border-radius: 12px;
}

.import-table[b-k7adhwjupb] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

    .import-table th[b-k7adhwjupb] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f7f7f7;
        font-family: 'Fredoka', system-ui, sans-serif;
        font-weight: 500;
        text-align: start;
        padding: .5rem .75rem;
        border-bottom: 1px solid #eee;
    }

    .import-table td[b-k7adhwjupb] {
        padding: .5rem .75rem;
        border-bottom: 1px solid #eee;
        vertical-align: top;
    }

/* The chosen name/date columns are tinted so the mapping is visible at a glance. */
.import-preview .col-picked[b-k7adhwjupb] {
    background: color-mix(in srgb, var(--text-primary) 12%, white);
}

.import-preview th.col-picked-name[b-k7adhwjupb]::after {
    content: " · שם החדר";
    color: #1976d2;
}

.import-preview th.col-picked-city[b-k7adhwjupb]::after {
    content: " · עיר";
    color: #1976d2;
}

.import-preview th.col-picked-country[b-k7adhwjupb]::after {
    content: " · מדינה";
    color: #1976d2;
}

.import-optional[b-k7adhwjupb] {
    color: #444;
}

.import-date-warn[b-k7adhwjupb] {
    color: var(--md-error);
}

/* Date-format text box with its "guess from the file" button inside, at the box's end. */
.import-format-box[b-k7adhwjupb] {
    position: relative;
    width: 220px;
}

    .import-format-box input[b-k7adhwjupb] {
        width: 100%;
        height: 2.25rem;
        padding-inline: .5rem 2.25rem;
        border: 1px solid #c7c7c7;
        border-radius: 8px;
        background: #fff;
        color: #1f1f1f;
        font-variant-numeric: tabular-nums;
    }

        .import-format-box input:focus[b-k7adhwjupb] {
            outline: none;
            border-color: var(--md-focus);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-focus) 20%, transparent);
        }

/* The input is dir="ltr", so its end is the right edge - keep the button there. */
.import-format-reset[b-k7adhwjupb] {
    position: absolute;
    top: 50%;
    right: .25rem;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: #eee;
    color: #444;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

    .import-format-reset:hover[b-k7adhwjupb],
    .import-format-reset:focus-visible[b-k7adhwjupb] {
        background: var(--text-primary);
        color: #fff;
    }

.import-format-help[b-k7adhwjupb] {
    color: #444;
}

.import-date-cell[b-k7adhwjupb] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .import-date-cell[b-k7adhwjupb]  .import-date-ok {
        color: #1976d2;
    }

    .import-date-cell[b-k7adhwjupb]  .import-date-bad {
        color: var(--md-error);
    }

.import-preview th.col-picked-date[b-k7adhwjupb]::after {
    content: " · תאריך";
    color: #1976d2;
}

/* Step 3 */
.import-filters[b-k7adhwjupb] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.import-chip[b-k7adhwjupb] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    border: 1px solid #c7c7c7;
    border-radius: 999px;
    background: #fff;
    color: #1f1f1f;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

    .import-chip:hover[b-k7adhwjupb] {
        border-color: var(--text-primary);
    }

    .import-chip.active[b-k7adhwjupb] {
        background: #1976d2;
        border-color: #1976d2;
        color: #fff;
    }

.import-chip-count[b-k7adhwjupb] {
    font-family: 'Bungee', sans-serif;
}

.import-review .col-include[b-k7adhwjupb] {
    width: 2.5rem;
}

/* A date (and its "במקום ..." note) always stays on one line. */
.import-review .col-date[b-k7adhwjupb] {
    white-space: nowrap;
}

.import-review .col-match[b-k7adhwjupb] {
    min-width: 280px;
    width: 45%;
}

.import-csv-name[b-k7adhwjupb] {
    display: block;
    font-weight: 600;
}

.import-row-num[b-k7adhwjupb],
.import-old-date[b-k7adhwjupb],
.import-muted[b-k7adhwjupb] {
    display: block;
    color: #444;
}

.import-picker[b-k7adhwjupb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

.import-link[b-k7adhwjupb] {
    padding: 0;
    border: none;
    background: none;
    color: #1976d2;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.import-approx[b-k7adhwjupb] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    color: #444;
}

.import-closed[b-k7adhwjupb] {
    display: inline-block;
    margin-top: .25rem;
    margin-inline-start: .5rem;
    color: #444;
}

.import-bad-date[b-k7adhwjupb] {
    color: var(--md-error);
}

/* Rows the user must act on get a quiet start-edge marker, not a loud fill. */
.import-row.status-needschoice td:first-child[b-k7adhwjupb] {
    box-shadow: inset -3px 0 0 #1976d2;
}

.import-row.status-notfound[b-k7adhwjupb],
.import-row.status-duplicate[b-k7adhwjupb] {
    color: #444;
}

/* Status pills: blue = something will happen, neutral = nothing will. */
.import-status[b-k7adhwjupb] {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .import-status.status-new[b-k7adhwjupb] {
        background: #1976d2;
        color: #fff;
    }

    .import-status.status-inlist[b-k7adhwjupb] {
        background: #fff;
        border-color: #1976d2;
        color: #1976d2;
    }

    .import-status.status-needschoice[b-k7adhwjupb] {
        background: #fff;
        border: 1px dashed #1f1f1f;
        color: #1f1f1f;
    }

    .import-status.status-notfound[b-k7adhwjupb],
    .import-status.status-duplicate[b-k7adhwjupb] {
        background: #f7f7f7;
        color: #444;
    }

/* ---------- Footer ---------- */
.import-footer[b-k7adhwjupb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding-top: .75rem;
    border-top: 1px solid #eee;
}

.import-summary[b-k7adhwjupb] {
    flex: 1;
}

.import-actions[b-k7adhwjupb] {
    display: flex;
    gap: .5rem;
    margin-inline-start: auto;
}

@media (prefers-reduced-motion: reduce) {
    .import-drop[b-k7adhwjupb],
    .import-chip[b-k7adhwjupb] {
        transition: none;
    }
}

@media (max-width: 700px) {
    .import-steps[b-k7adhwjupb] {
        gap: .75rem;
    }

    .import-review .col-match[b-k7adhwjupb] {
        min-width: 200px;
    }
}
/* /Components/Shared/ImportPlayedHelp.razor.rz.scp.css */
/* Import tutorial: a numbered walk-through in the body font, headings in Fredoka, with the review
   states shown as the same pills the import window uses. */
.help[b-tio155vi7j] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: 'Lunasima', system-ui, sans-serif;
    color: #1f1f1f;
    line-height: 1.5;
}

    .help p[b-tio155vi7j] {
        margin: 0 0 .5rem;
        max-width: 70ch;
    }

.help-lead[b-tio155vi7j] {
    color: #444;
}

.help-steps[b-tio155vi7j] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .help-steps > li[b-tio155vi7j] {
        counter-increment: step;
        position: relative;
        padding-inline-start: 2.5rem;
    }

        /* The step number, in the same round Bungee chip as the import window's step bar. */
        .help-steps > li[b-tio155vi7j]::before {
            content: counter(step);
            position: absolute;
            inset-inline-start: 0;
            top: 0;
            display: grid;
            place-items: center;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 999px;
            background: #1976d2;
            color: #fff;
            font-family: 'Bungee', sans-serif;
        }

    .help-steps h3[b-tio155vi7j] {
        margin: 0 0 .5rem;
        font-family: 'Fredoka', system-ui, sans-serif;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.75rem;
    }

    .help-steps ul[b-tio155vi7j] {
        margin: 0 0 .5rem;
        padding-inline-start: 1.25rem;
    }

.help-formats[b-tio155vi7j] {
    border-collapse: collapse;
    margin: .25rem 0 .5rem;
    font-variant-numeric: tabular-nums;
}

    .help-formats th[b-tio155vi7j],
    .help-formats td[b-tio155vi7j] {
        padding: .25rem .75rem;
        border-bottom: 1px solid #eee;
        text-align: start;
    }

    .help-formats th[b-tio155vi7j] {
        font-family: 'Fredoka', system-ui, sans-serif;
        font-weight: 500;
        background: #f7f7f7;
    }

    .help-formats td:last-child[b-tio155vi7j] {
        color: #1976d2;
    }

.help-small[b-tio155vi7j] {
    color: #444;
}

.help-ok[b-tio155vi7j] {
    color: #1976d2;
}

.help-key[b-tio155vi7j] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: #eee;
}

.help-states[b-tio155vi7j] {
    list-style: none;
    padding-inline-start: 0 !important;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.help-pill[b-tio155vi7j] {
    display: inline-block;
    margin-inline-end: .5rem;
    padding: .1rem .6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pill-new[b-tio155vi7j] {
    background: #1976d2;
    color: #fff;
}

.pill-inlist[b-tio155vi7j] {
    background: #fff;
    border-color: #1976d2;
    color: #1976d2;
}

.pill-choice[b-tio155vi7j] {
    background: #fff;
    border: 1px dashed #1f1f1f;
}

.pill-muted[b-tio155vi7j] {
    background: #f7f7f7;
    color: #444;
}

.help-footer[b-tio155vi7j] {
    display: flex;
    justify-content: flex-end;
    padding-top: .75rem;
    border-top: 1px solid #eee;
}
/* /Components/Shared/LoadingArmadillo.razor.rz.scp.css */
/* LoadingArmadillo - DESIGN.md's "loading screen" idea in the navbar's language: the mascot, a
   dotted Sky Blue trail, marquee lights on the card's edge, a shimmering Fredoka headline. */

.la-backdrop[b-b5yb0shd09] {
	--sky: var(--text-primary, #5ba6da);
	--ink: #1f1f1f;
	--ink-muted: #444;
	position: absolute;
	inset: 0;
	z-index: 2000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: linear-gradient(120deg, #f5f7fa, #e6eef6, #f5f7fa);
	background-size: 200% 200%;
	animation: la-gradient-b-b5yb0shd09 8s ease infinite;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--ink);
}

	.la-backdrop.fixed[b-b5yb0shd09] {
		position: fixed;
	}

.la-card[b-b5yb0shd09] {
	position: relative;
	box-sizing: border-box;
	width: min(92%, 520px);
	padding: clamp(.75rem, 6%, 1.75rem) clamp(.75rem, 6%, 2rem) clamp(.75rem, 6%, 1.5rem);
	border-radius: 18px;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(12px) saturate(120%);
	border: 1px solid rgba(255, 255, 255, .8);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
	text-align: center;
	overflow: hidden;
	animation: la-card-in-b-b5yb0shd09 .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

	/* the navbar's marquee lights, along the card's top edge */
	.la-card[b-b5yb0shd09]::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 5px;
		background-color: var(--sky);
		background-image: radial-gradient(circle, rgba(255, 255, 255, .8) 1.1px, transparent 1.7px);
		background-size: 12px 5px;
		background-position: 3px 0;
		animation: la-lights-b-b5yb0shd09 1.2s steps(2) infinite;
	}

/* ---------- the stage: trail, walker, door ---------- */

.la-stage[b-b5yb0shd09] {
	position: relative;
	height: 4.5rem; /* a fixed height: the walker gif sizes to it (a % here would resolve to nothing) */
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: .5rem;
}

/* The trail slides under the armadillo's feet, left to right in RTL reading order of the walk
   (the gif walks toward the left), so the dots stream past as if it were covering ground. */
.la-trail[b-b5yb0shd09] {
	position: absolute;
	inset-inline: 8%;
	bottom: .35rem;
	height: 0;
	border-bottom: 3px dotted var(--sky);
	opacity: .6;
	mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
	animation: la-trail-b-b5yb0shd09 1.1s linear infinite;
}

.la-walker[b-b5yb0shd09] {
	position: relative;
	z-index: 1;
	height: 100%;
	width: auto;
	animation: la-bob-b-b5yb0shd09 1.1s ease-in-out infinite;
}

/* The door the armadillo is heading for, at the trail's far end (the left, where it walks to). */
.la-door[b-b5yb0shd09] {
	position: absolute;
	inset-inline-end: 9%;
	bottom: .1rem;
	width: 2rem;
	height: 2rem;
	fill: var(--sky);
	animation: la-door-glow-b-b5yb0shd09 2.2s ease-in-out infinite;
}

/* ---------- text ---------- */

.la-text[b-b5yb0shd09] {
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.la-title[b-b5yb0shd09] {
	font-weight: 500;
	font-size: 1.25rem;
	letter-spacing: .02em;
}

.shimmer-sky[b-b5yb0shd09] {
	background: linear-gradient(90deg, var(--ink) 0%, var(--sky) 50%, var(--ink) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: la-shimmer-b-b5yb0shd09 2.5s linear infinite;
}

.la-hint[b-b5yb0shd09] {
	font-family: 'Lunasima', system-ui, sans-serif;
	font-size: 1rem;
	color: var(--ink-muted);
}

/* ---------- motion ---------- */

@keyframes la-gradient-b-b5yb0shd09 {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes la-card-in-b-b5yb0shd09 {
	from { opacity: 0; transform: scale(.9); }
}

@keyframes la-lights-b-b5yb0shd09 {
	to { background-position: 15px 0; }
}

@keyframes la-trail-b-b5yb0shd09 {
	to { background-position-x: 0; translate: 12px 0; }
}

@keyframes la-bob-b-b5yb0shd09 {
	50% { transform: translateY(-2px); }
}

@keyframes la-door-glow-b-b5yb0shd09 {
	50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sky) 70%, transparent)); transform: scale(1.06); }
}

@keyframes la-shimmer-b-b5yb0shd09 {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.la-backdrop[b-b5yb0shd09], .la-card[b-b5yb0shd09], .la-card[b-b5yb0shd09]::before, .la-trail[b-b5yb0shd09], .la-walker[b-b5yb0shd09], .la-door[b-b5yb0shd09] {
		animation: none;
	}

	.shimmer-sky[b-b5yb0shd09] {
		animation: none;
		background: none;
		-webkit-background-clip: initial;
		background-clip: initial;
		color: var(--ink);
	}
}
/* /Components/Shared/RoomFilters.razor.rz.scp.css */
/* RoomFilters - the catalogue's filters as a card, a coin rail with flyouts, or a phone sheet.
   Tokens follow DESIGN.md: Sky Blue chrome, Ember for fear-level, Forest for minimum players,
   Bungee for counts, Fredoka for headings, soft ambient shadows, springy overshoot easing. */

.rf-card[b-it8x2h3vw4], .rf-rail[b-it8x2h3vw4], .rf-flyout[b-it8x2h3vw4], .rf-sheet[b-it8x2h3vw4], .rf-fab[b-it8x2h3vw4] {
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	--ink: #1f1f1f;
	--ink-muted: #444;
	--sky: var(--text-primary, #5ba6da);
	--ember: var(--bg-fear, #D84315);
	--forest: var(--bg-min-players, #1B5E20);
	--stroke: #e3e3e3;
	--chip: var(--sky); /* chips' tone; tag groups re-point it */
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--ink);
}

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

.rf-head[b-it8x2h3vw4] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-bottom: .5rem;
	border-bottom: 2px dotted var(--sky); /* the armadillo's trail, continued */
}

.rf-title[b-it8x2h3vw4] {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
}

/* "shown / total" scoreboard chip */
.rf-score[b-it8x2h3vw4] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-inline-start: auto;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--sky);
	color: var(--ink);
	font-family: 'Bungee', sans-serif;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
}

	.rf-score svg[b-it8x2h3vw4] {
		width: 1rem;
		height: 1rem;
		fill: var(--ink);
	}

	.rf-score b[b-it8x2h3vw4] {
		font-weight: 400;
		padding-top: 2px;
	}

	.rf-score i[b-it8x2h3vw4] {
		font-style: normal;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-size: .8rem;
		color: var(--ink-muted);
		padding-top: 2px;
	}

/* ticks on every count change (@key remounts the element) */
.count-tick[b-it8x2h3vw4] {
	display: inline-block;
	animation: rf-count-tick-b-it8x2h3vw4 .45s ease-out;
}

@keyframes rf-count-tick-b-it8x2h3vw4 {
	35% { transform: scale(1.35); }
	70% { transform: scale(.94); }
}

/* "clear" slides in from the inline end only while something is set */
.rf-clear[b-it8x2h3vw4] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .6rem;
	border: 1px solid var(--stroke);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: .85rem;
	color: var(--ink-muted);
	cursor: pointer;
	opacity: 0;
	transform: translateX(-12px) scale(.9);
	pointer-events: none;
	transition: opacity .25s, transform .4s var(--spring), background .15s, color .15s;
}

	.rf-clear.show[b-it8x2h3vw4] {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.rf-clear svg[b-it8x2h3vw4] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

	.rf-clear:hover[b-it8x2h3vw4] {
		background: var(--ember);
		border-color: var(--ember);
		color: #fff;
	}

.rf-icon-btn[b-it8x2h3vw4] {
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #eee;
	color: #555;
	display: grid;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s, color .15s, transform .35s var(--spring);
}

	.rf-icon-btn svg[b-it8x2h3vw4] {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	.rf-icon-btn:hover[b-it8x2h3vw4] {
		background: var(--sky);
		color: #fff;
		transform: scale(1.08);
	}

/* ---------------- drawers (sections) ---------------- */

.rf-body[b-it8x2h3vw4] {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding-top: .5rem;
}

.rf-drawer[b-it8x2h3vw4] {
	border: 1px solid var(--stroke);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}

	.rf-drawer.active[b-it8x2h3vw4] {
		border-color: color-mix(in srgb, var(--sky) 55%, var(--stroke));
	}

	.rf-drawer.open[b-it8x2h3vw4] {
		box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	}

.rf-drawer-head[b-it8x2h3vw4] {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	padding: .5rem .65rem;
	border: none;
	background: none;
	font: inherit;
	font-weight: 500;
	color: var(--ink);
	text-align: start;
	cursor: pointer;
}

	.rf-drawer-head:hover[b-it8x2h3vw4] {
		background: #f7f7f7;
	}

.rf-drawer-icon[b-it8x2h3vw4] {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--sky);
	flex-shrink: 0;
	transition: transform .4s var(--spring);
}

.rf-drawer-head:hover .rf-drawer-icon[b-it8x2h3vw4] {
	transform: rotate(-10deg) scale(1.1);
}

.rf-drawer-title[b-it8x2h3vw4] {
	flex: 1;
}

.rf-dot[b-it8x2h3vw4] {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--sky);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 25%, transparent);
	animation: rf-pop-b-it8x2h3vw4 .4s var(--spring);
}

.rf-chevron[b-it8x2h3vw4] {
	width: 1.1rem;
	height: 1.1rem;
	fill: var(--ink-muted);
	transition: transform .35s var(--spring);
}

.rf-drawer.open > .rf-drawer-head .rf-chevron[b-it8x2h3vw4] {
	transform: rotate(180deg);
}

/* Fold with a grid-row transition: no fixed height, no JS. */
.rf-drawer-body[b-it8x2h3vw4] {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s cubic-bezier(.22, 1, .36, 1);
}

.rf-drawer.open > .rf-drawer-body[b-it8x2h3vw4] {
	grid-template-rows: 1fr;
}

.rf-drawer-inner[b-it8x2h3vw4] {
	min-height: 0;
	overflow: hidden;
	padding: 0 .65rem;
	opacity: 0;
	transition: opacity .25s, padding .3s;
}

.rf-drawer.open .rf-drawer-inner[b-it8x2h3vw4] {
	opacity: 1;
	padding: .25rem .65rem .75rem;
}

/* ---------------- search ---------------- */

.rf-search[b-it8x2h3vw4] {
	position: relative;
	display: flex;
	align-items: center;
}

	.rf-search > svg[b-it8x2h3vw4] {
		position: absolute;
		inset-inline-start: .6rem;
		width: 1.1rem;
		height: 1.1rem;
		fill: var(--ink-muted);
		pointer-events: none;
	}

.rf-input[b-it8x2h3vw4] {
	width: 100%;
	padding: .5rem 2.2rem .5rem 2rem;
	border: 1px solid #c7c7c7;
	border-radius: 999px;
	background: #fff;
	font: inherit;
	color: var(--ink);
	transition: border-color .15s, box-shadow .15s;
}

	.rf-input:focus[b-it8x2h3vw4] {
		outline: none;
		border-color: var(--sky);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 25%, transparent);
	}

	.rf-input[b-it8x2h3vw4]::-webkit-search-cancel-button {
		display: none;
	}

.rf-input-clear[b-it8x2h3vw4] {
	position: absolute;
	inset-inline-end: .5rem;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	border-radius: 50%;
	background: #eee;
	color: #555;
	font-size: .75rem;
	cursor: pointer;
}

	.rf-input-clear:hover[b-it8x2h3vw4] {
		background: var(--sky);
		color: #fff;
	}

/* ---------------- personal switches ---------------- */

.rf-switches[b-it8x2h3vw4] {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.rf-switch-row[b-it8x2h3vw4] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .4rem;
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s;
}

	.rf-switch-row:hover[b-it8x2h3vw4] {
		background: #f7f7f7;
	}

	.rf-switch-row > svg[b-it8x2h3vw4] {
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--ink-muted);
		flex-shrink: 0;
	}

.rf-switch-text[b-it8x2h3vw4] {
	flex: 1;
	font-family: 'Lunasima', system-ui, sans-serif;
	font-size: 1rem;
}

.rf-badge[b-it8x2h3vw4] {
	padding: .1rem .5rem;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-family: 'Bungee', sans-serif;
	font-size: .8rem;
	line-height: 1.3;
	animation: rf-pop-b-it8x2h3vw4 .4s var(--spring);
}

/* ---------------- chips (cities, tags, ratings) ---------------- */

.rf-chips[b-it8x2h3vw4] {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.rf-chip[b-it8x2h3vw4] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .65rem;
	border: 1px solid #cfcfcf;
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--ink);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, transform .35s var(--spring), box-shadow .2s;
}

	.rf-chip svg[b-it8x2h3vw4] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
		border-radius: 25%;
	}

	/* count badge: a neutral pill when the chip is off, the group's color when it is on */
	.rf-chip b[b-it8x2h3vw4] {
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		font-size: .8rem;
		line-height: 1.4;
		padding: 1px .4rem 0;
		border-radius: 999px;
		background: #e3e3e3;
		color: var(--ink);
		animation: rf-pop-b-it8x2h3vw4 .4s var(--spring);
	}

	.rf-chip:hover:not(:disabled)[b-it8x2h3vw4] {
		border-color: var(--chip);
		transform: translateY(-2px);
		box-shadow: 0 4px 12px color-mix(in srgb, var(--chip) 30%, transparent);
	}

	/* on: a tint of the group's color with dark text (readable on sky, ember and forest alike),
	   the count badge in the full color */
	.rf-chip.on[b-it8x2h3vw4] {
		background: color-mix(in srgb, var(--chip) 18%, #fff);
		border-color: var(--chip);
		color: var(--ink);
		font-weight: 500;
		animation: rf-chip-pop-b-it8x2h3vw4 .4s var(--spring);
	}

		.rf-chip.on > svg[b-it8x2h3vw4] {
			fill: var(--chip);
		}

		.rf-chip.on b[b-it8x2h3vw4] {
			background: var(--chip);
			color: #fff;
		}

	/* the group switch is off: chips are still legible, just quiet */
	.rf-chip:disabled[b-it8x2h3vw4] {
		opacity: .6;
		cursor: not-allowed;
	}

	/* rating chips: the rating's own color on the icon tile, white glyph, as on the current panel */
	.rf-chip-rating > svg[b-it8x2h3vw4],
	.rf-chip-rating.on > svg[b-it8x2h3vw4] {
		fill: #fff;
		padding: 3px;
		width: 1.35rem;
		height: 1.35rem;
		border: 1px solid var(--ink);
	}

	/* minimum players: one little player per player */
	.rf-players[b-it8x2h3vw4] {
		display: inline-flex;
		gap: 1px;
	}

		.rf-players svg[b-it8x2h3vw4] {
			width: .8rem;
			height: .8rem;
			fill: currentColor;
		}

		.rf-chip.on .rf-players svg[b-it8x2h3vw4] {
			fill: var(--chip);
		}

@keyframes rf-chip-pop-b-it8x2h3vw4 {
	40% { transform: scale(1.08); }
}

@keyframes rf-pop-b-it8x2h3vw4 {
	from { transform: scale(.5); opacity: 0; }
}

/* ---------------- regions ---------------- */

.rf-regions[b-it8x2h3vw4] {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.rf-region[b-it8x2h3vw4] {
	border: 1px solid var(--stroke);
	border-radius: 12px;
	padding: .3rem .5rem;
	transition: opacity .2s;
}

	.rf-region.off[b-it8x2h3vw4] {
		opacity: .6;
	}

.rf-region-head[b-it8x2h3vw4] {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.rf-region-name[b-it8x2h3vw4] {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .2rem 0;
	border: none;
	background: none;
	font: inherit;
	font-weight: 500;
	color: var(--ink);
	text-align: start;
	cursor: pointer;
}

	.rf-region-name > span:first-child[b-it8x2h3vw4] {
		flex: 1;
	}

.rf-region.closed .rf-region-name .rf-chevron[b-it8x2h3vw4] {
	transform: rotate(0);
}

.rf-region:not(.closed) .rf-region-name .rf-chevron[b-it8x2h3vw4] {
	transform: rotate(180deg);
}

.rf-region-cities[b-it8x2h3vw4] {
	padding: .35rem 0 .2rem;
}

.rf-region.closed .rf-region-cities[b-it8x2h3vw4] {
	display: none;
}

/* ---------------- tag groups ---------------- */

.rf-groups[b-it8x2h3vw4] {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.rf-group[b-it8x2h3vw4] {
	--chip: var(--sky);
	border: 1px solid var(--stroke);
	border-radius: 12px;
	padding: .3rem .5rem .4rem;
}

	.rf-group.fear[b-it8x2h3vw4] { --chip: var(--ember); }
	.rf-group.min[b-it8x2h3vw4] { --chip: var(--forest); }

.rf-group-head[b-it8x2h3vw4] {
	display: flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
}

.rf-group-title[b-it8x2h3vw4] {
	font-weight: 500;
	color: var(--chip);
}

.rf-group-chips[b-it8x2h3vw4] {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s cubic-bezier(.22, 1, .36, 1);
	overflow: hidden;
}

	.rf-group-chips > *[b-it8x2h3vw4] {
		min-height: 0;
	}

.rf-group.on .rf-group-chips[b-it8x2h3vw4] {
	grid-template-rows: 1fr;
	padding-top: .4rem;
}

/* the grid-fold trick needs one wrapping row; chips are inline-flex so wrap them visually */
.rf-group-chips[b-it8x2h3vw4] {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	max-height: 0;
	padding-top: 0;
	transition: max-height .35s cubic-bezier(.22, 1, .36, 1), padding-top .2s, opacity .2s;
	opacity: 0;
}

.rf-group.on .rf-group-chips[b-it8x2h3vw4] {
	max-height: 40rem;
	opacity: 1;
}

/* ---------------- desktop: expanded card ---------------- */

.rf-card[b-it8x2h3vw4] {
	position: sticky;
	top: var(--ark-nav-h, 4.5rem);
	max-height: calc(100dvh - var(--ark-nav-h, 4.5rem) - 8rem);
	overflow-y: auto;
	scrollbar-width: thin;
	padding: 0 .85rem 1rem; /* no top padding: the sticky header carries it, so nothing scrolls above it */
	background: #fcfcfc;
	border: 1px solid var(--stroke);
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	animation: rf-card-in-b-it8x2h3vw4 .35s var(--spring);
}

@keyframes rf-card-in-b-it8x2h3vw4 {
	from { opacity: 0; transform: translateX(16px); }
}

/* ---------------- desktop: coin rail + flyout ---------------- */

.rf-rail[b-it8x2h3vw4] {
	position: sticky;
	top: var(--ark-nav-h, 4.5rem);
	z-index: 1022; /* above the click-away scrim (1021), so the rail and its flyout stay live */
	width: 3.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: .6rem 0 .8rem;
	background: #fcfcfc;
	border: 1px solid var(--stroke);
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	animation: rf-rail-in-b-it8x2h3vw4 .35s var(--spring);
}

@keyframes rf-rail-in-b-it8x2h3vw4 {
	from { opacity: 0; transform: scaleY(.6); transform-origin: top; }
}

.rf-rail-score[b-it8x2h3vw4] {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	/* Fredoka, not the blocky Bungee: on a 3rem rail the arcade face reads as a lump */
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: var(--sky);
}

	.rf-rail-score i[b-it8x2h3vw4] {
		font-style: normal;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-size: .7rem;
		color: var(--ink-muted);
		border-top: 1px solid var(--ink-muted);
		padding-top: 2px;
		margin-top: 2px;
	}

.rf-rail-trail[b-it8x2h3vw4] {
	width: 0;
	height: .75rem;
	border-inline-start: 2px dotted var(--sky);
}

/* the navbar's coin */
.rf-coin[b-it8x2h3vw4] {
	position: relative;
	width: 2.3rem;
	height: 2.3rem;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--stroke), 0 2px 6px rgba(0, 0, 0, .12);
	color: var(--ink-muted);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform .45s var(--spring), box-shadow .2s, background .2s, color .2s;
}

	.rf-coin svg[b-it8x2h3vw4] {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	.rf-coin:hover[b-it8x2h3vw4],
	.rf-coin.open[b-it8x2h3vw4] {
		background: var(--sky);
		color: #fff;
		transform: scale(1.1) rotate(-8deg);
		box-shadow: 0 0 0 2px var(--sky), 0 0 14px 2px rgba(91, 166, 218, .55);
	}

	.rf-coin.active[b-it8x2h3vw4] {
		box-shadow: 0 0 0 2px var(--sky), 0 2px 6px rgba(0, 0, 0, .12);
		color: var(--sky);
	}

	.rf-coin-main[b-it8x2h3vw4] {
		background: var(--sky);
		color: #fff;
		box-shadow: 0 0 0 2px var(--sky), 0 2px 6px rgba(0, 0, 0, .18);
	}

	.rf-coin-clear:hover[b-it8x2h3vw4] {
		background: var(--ember);
		box-shadow: 0 0 0 2px var(--ember), 0 0 14px 2px rgba(216, 67, 21, .5);
	}

.rf-coin-dot[b-it8x2h3vw4] {
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--sky);
	border: 2px solid #fff;
	animation: rf-pop-b-it8x2h3vw4 .4s var(--spring);
}

.rf-coin.open .rf-coin-dot[b-it8x2h3vw4],
.rf-coin:hover .rf-coin-dot[b-it8x2h3vw4] {
	background: #fff;
	border-color: var(--sky);
}

/* The flyout hangs off its coin's slot toward the list: in RTL the rail is at the page's right,
   the list to its left, so the flyout's inline-START edge sits one gap past the slot's. */
.rf-coin-slot[b-it8x2h3vw4] {
	position: relative;
}

.rf-flyout[b-it8x2h3vw4] {
	position: absolute;
	z-index: 2;
	top: -.4rem;
	inset-inline-start: calc(100% + 1rem);
	width: min(22rem, calc(100vw - 14rem));
	/* from this coin's top (navbar + the rail's head + this coin's row) down to clear of the footer */
	max-height: calc(100dvh - var(--ark-nav-h, 4.5rem) - 10rem - var(--rf-i, 0) * 2.9rem);
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
	transform-origin: top right;
	animation: rf-flyout-pop-b-it8x2h3vw4 .4s var(--spring) backwards;
}

	/* tail pointing at the coin */
	.rf-flyout[b-it8x2h3vw4]::before {
		content: "";
		position: absolute;
		top: 1.1rem;
		inset-inline-start: -7px;
		width: 14px;
		height: 14px;
		background: #fff;
		border-top: 1px solid #eee;
		border-right: 1px solid #eee;
		transform: rotate(45deg);
	}

@keyframes rf-flyout-pop-b-it8x2h3vw4 {
	from { opacity: 0; transform: translateX(10px) scale(.92); }
}

.rf-flyout-head[b-it8x2h3vw4] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem .85rem;
	border-bottom: 2px dotted var(--sky);
}

	.rf-flyout-head > svg[b-it8x2h3vw4] {
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--sky);
	}

	.rf-flyout-head h3[b-it8x2h3vw4] {
		margin: 0;
		font-size: 1rem;
		font-weight: 500;
	}

.rf-flyout-body[b-it8x2h3vw4] {
	padding: .75rem .85rem;
	overflow-y: auto;
	scrollbar-width: thin;
}

/* click-away layer; transparent for the flyout, dimmed for the sheet */
.rf-scrim[b-it8x2h3vw4] {
	position: fixed;
	inset: 0;
	z-index: 1021; /* over the fixed footer (1020), under the navbar (1025) */
	background: rgba(31, 31, 31, .35);
	animation: rf-fade-b-it8x2h3vw4 .25s;
}

	.rf-scrim-clear[b-it8x2h3vw4] {
		background: transparent;
	}

@keyframes rf-fade-b-it8x2h3vw4 {
	from { opacity: 0; }
}

/* ---------------- phone: pill + bottom sheet ---------------- */

.rf-fab[b-it8x2h3vw4] {
	position: fixed;
	z-index: 1015;
	bottom: 4.25rem; /* above the fixed footer */
	inset-inline-end: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .9rem .5rem .7rem;
	border: 3px solid #fff;
	border-radius: 999px;
	background: var(--sky);
	color: #fff;
	font: inherit;
	font-weight: 500;
	box-shadow: 0 0 0 2px var(--sky), 0 6px 20px rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: transform .4s var(--spring), box-shadow .2s;
}

	.rf-fab svg[b-it8x2h3vw4] {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	.rf-fab:active[b-it8x2h3vw4] {
		transform: scale(.95);
	}

	.rf-fab.active[b-it8x2h3vw4] {
		animation: rf-fab-nudge-b-it8x2h3vw4 .6s var(--spring);
	}

.rf-fab-score[b-it8x2h3vw4] {
	padding: .1rem .45rem;
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-family: 'Bungee', sans-serif;
	font-size: .75rem;
	line-height: 1.3;
}

	.rf-fab-score b[b-it8x2h3vw4] {
		font-weight: 400;
	}

@keyframes rf-fab-nudge-b-it8x2h3vw4 {
	30% { transform: translateY(-4px) rotate(-3deg); }
}

.rf-sheet[b-it8x2h3vw4] {
	position: fixed;
	z-index: 1022;
	inset-inline: 0;
	bottom: 0;
	max-height: 86dvh;
	display: flex;
	flex-direction: column;
	padding: .5rem 1rem 0;
	background: #fcfcfc;
	border-radius: 20px 20px 0 0;
	box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
	animation: rf-sheet-up-b-it8x2h3vw4 .45s var(--spring);
}

@keyframes rf-sheet-up-b-it8x2h3vw4 {
	from { transform: translateY(100%); }
}

.rf-sheet-grip[b-it8x2h3vw4] {
	width: 2.5rem;
	height: 4px;
	margin: 0 auto .5rem;
	border-radius: 999px;
	background: #cfcfcf;
}

.rf-sheet .rf-head[b-it8x2h3vw4] {
	padding-bottom: .4rem;
}

.rf-jump[b-it8x2h3vw4] {
	display: flex;
	gap: .35rem;
	padding: .5rem 0;
	overflow-x: auto;
	scrollbar-width: none;
	flex-shrink: 0;
}

.rf-jump-chip[b-it8x2h3vw4] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .6rem;
	border: 1px solid #cfcfcf;
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: .85rem;
	color: var(--ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .35s var(--spring);
}

	.rf-jump-chip svg[b-it8x2h3vw4] {
		width: .95rem;
		height: .95rem;
		fill: currentColor;
	}

	.rf-jump-chip.on[b-it8x2h3vw4] {
		background: var(--sky);
		border-color: var(--sky);
		color: #fff;
	}

	.rf-jump-chip.active:not(.on)[b-it8x2h3vw4] {
		border-color: var(--sky);
	}

.rf-sheet-body[b-it8x2h3vw4] {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding-bottom: .75rem;
}

.rf-sheet-foot[b-it8x2h3vw4] {
	flex-shrink: 0;
	padding: .5rem 0 calc(.75rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--stroke);
	background: #fcfcfc;
}

.rf-apply[b-it8x2h3vw4] {
	width: 100%;
	padding: .6rem;
	border: none;
	border-radius: 999px;
	background: var(--sky);
	color: #fff;
	font: inherit;
	font-size: 1.1rem;
	font-weight: 500;
	cursor: pointer;
	transition: transform .35s var(--spring);
}

	.rf-apply b[b-it8x2h3vw4] {
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		margin-inline: .35rem; /* Razor drops the spaces around the element */
	}

	.rf-apply:active[b-it8x2h3vw4] {
		transform: scale(.97);
	}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
	.rf-card[b-it8x2h3vw4], .rf-rail[b-it8x2h3vw4], .rf-flyout[b-it8x2h3vw4], .rf-sheet[b-it8x2h3vw4], .rf-scrim[b-it8x2h3vw4], .rf-fab.active[b-it8x2h3vw4],
	.rf-chip.on[b-it8x2h3vw4], .rf-chip b[b-it8x2h3vw4], .rf-badge[b-it8x2h3vw4], .rf-dot[b-it8x2h3vw4], .rf-coin-dot[b-it8x2h3vw4], .count-tick[b-it8x2h3vw4] {
		animation: none;
	}

	.rf-drawer-body[b-it8x2h3vw4], .rf-drawer-inner[b-it8x2h3vw4], .rf-group-chips[b-it8x2h3vw4], .rf-chip[b-it8x2h3vw4], .rf-coin[b-it8x2h3vw4], .rf-clear[b-it8x2h3vw4],
	.rf-chevron[b-it8x2h3vw4], .rf-drawer-icon[b-it8x2h3vw4], .rf-icon-btn[b-it8x2h3vw4], .rf-fab[b-it8x2h3vw4], .rf-apply[b-it8x2h3vw4], .rf-jump-chip[b-it8x2h3vw4] {
		transition: none;
	}
}

/* The expanded card scrolls inside itself; its header (title, count, clear) stays pinned at the
   top of that scroll so the count and the clear button are always in reach. */
.rf-card > .rf-head[b-it8x2h3vw4] {
	position: sticky;
	top: 0;
	z-index: 3;
	padding-top: .75rem;
	background: #fcfcfc;
}