/* /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 var(--end);
	}

	.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.
   In English (--dir -1) `scale` mirrors it: the gif then faces its bubble, and because `scale` applies
   after `transform`, the walk-in comes from the other side too - the keyframes stay as written. */
.ark-walker[b-0vysx08lmj] {
	position: relative;
	z-index: 1;
	/* the gif (and the canvas site.js swaps in) takes no clicks or hovers: those fall through to the
	   flags where they overlap, and to the brand link elsewhere */
	pointer-events: none;
	display: inline-flex;
	margin-inline-start: .35rem;
	scale: var(--dir) 1;
	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: var(--start) 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;
		inset-inline-start: -7px;
		top: 55%;
		width: 12px;
		height: 12px;
		background: #fff;
		border-inline-start: 1px solid #e9e9e9;
		border-top: 1px solid #e9e9e9;
		transform: translateY(-50%) rotate(calc(45deg * var(--dir)));
	}

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

	.ark-bubble.fade[b-0vysx08lmj],
	.ark-ticker.fade .ark-ticker-text[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);
	}

/* The sign-in chip and the flags are links on the static pages (no circuit for a button there). */
a.ark-login[b-0vysx08lmj],
a.ark-flag[b-0vysx08lmj] {
	text-decoration: none;
}

/* 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 second row (hidden on desktop) ---------- */

.ark-row2[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 strip under the bar: the status portrait (when on a status page) and the bubble's line as
	   a ticker, with a tail reaching up toward the armadillo. */
	.ark-row2[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;
		line-height: 1;
	}

		.ark-ticker[b-0vysx08lmj] {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			color: var(--voice);
			font-size: .85rem;
		}

		/* the tail points up at the armadillo - only when there is a bubble line to point with */
		.ark-row2.has-bubble[b-0vysx08lmj]::before {
			content: "";
			position: absolute;
			top: -6px;
			inset-inline-start: 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;
			transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
			visibility: hidden; /* until the armadillo arrives */
		}

		/* the status portrait, moved down from the bar: small, with its name */
		.ark-ticker-status[b-0vysx08lmj] {
			display: inline-flex;
			align-items: center;
			gap: .35rem;
			flex-shrink: 0;
			max-width: 38%; /* leaves the ticker most of the row; the name wraps to two small lines instead */
			margin-inline-end: .6rem;
			padding-inline-end: .6rem;
			border-inline-end: 1px solid #ddd;
			color: var(--ink);
			font-weight: 500;
			/* static: the bubble's fades and pops are the text's alone */
			animation: none;
			transition: none;
		}

			/* two lines at most, small enough that both fit the row's height */
			.ark-ticker-status > span[b-0vysx08lmj] {
				font-size: .7rem;
				line-height: 1.05;
				white-space: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				overflow: hidden;
			}

			.ark-ticker-status img[b-0vysx08lmj] {
				width: 1.4rem;
				height: 1.4rem;
				border-radius: 50%;
				object-fit: cover;
				border: 1px solid #fff;
				box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
			}

		/* no bubble: the status sits alone and the row needs no divider */
		.ark-row2:not(.has-bubble) .ark-ticker-status[b-0vysx08lmj] {
			margin-inline-end: 0;
			padding-inline-end: 0;
			border-inline-end: 0;
		}

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

	/* The bar's own status portrait does not fit beside the player card on a phone - it moves
	   down to the second row (.ark-ticker-status). */
	.ark-bar .ark-status[b-0vysx08lmj] {
		display: none;
	}

		/* ...so the end group keeps its push to the far side (desktop drops it to make room for the portrait) */
		.ark-status ~ .ark-end[b-0vysx08lmj] {
			margin-inline-start: auto;
		}

	.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-text[b-0vysx08lmj],
	.ark-nav:has(.site-logo-wrap.walking) .ark-ticker-text[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;
	}
}

/* ---------- Language flags the armadillo holds ----------
   Two little flags on sticks over its back, at its final spot; they pop up once the walk ends
   (same timing as the bubble), wave gently, and switch the UI culture on click. The current
   language's flag flies full; the other is quieter until hovered. */

.ark-brand-stage[b-0vysx08lmj] {
	position: relative;
	display: inline-flex;
}

.ark-flags[b-0vysx08lmj] {
	position: absolute;
	/* over the armadillo's back: it stands at the link's inline end, so the flags hug that edge */
	inset-inline-end: .35rem;
	top: .05rem;
	/* no z-index of its own: the poles paint under the walker (z 1), while a flag's tooltip (z 3)
	   can still rise above it */
	display: flex;
	gap: .15rem;
	visibility: hidden; /* until the armadillo arrives */
}

.site-logo-wrap.walking .ark-flags[b-0vysx08lmj] {
	visibility: visible;
	animation: ark-pop-b-0vysx08lmj .45s var(--spring) var(--walk) backwards;
	transform-origin: bottom center;
}

.ark-flag[b-0vysx08lmj] {
	position: relative;
	padding: 0 0 1.1rem; /* the stick below the flag - long enough to run on behind the body */
	border: 0;
	background: none;
	cursor: pointer;
	opacity: .55;
	filter: saturate(.6);
	transition: opacity .2s, filter .2s, transform .35s var(--spring);
}

	/* the stick */
	.ark-flag[b-0vysx08lmj]::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		top: 0;
		bottom: 0;
		width: 1.5px;
		background: var(--ink);
		border-radius: 1px;
	}

	.ark-flag svg[b-0vysx08lmj] {
		display: block;
		width: 1.1rem;
		height: .8rem;
		border: 1px solid rgba(31, 31, 31, .6);
		transform-origin: left center;
		animation: ark-wave-b-0vysx08lmj 1.8s ease-in-out infinite;
	}

	/* the second flag waves half a beat behind the first */
	.ark-flag + .ark-flag svg[b-0vysx08lmj] {
		animation-delay: -.9s;
	}

	.ark-flag.on[b-0vysx08lmj],
	.ark-flag:hover[b-0vysx08lmj],
	.ark-flag:focus-visible[b-0vysx08lmj] {
		opacity: 1;
		filter: none;
	}

	.ark-flag:hover[b-0vysx08lmj],
	.ark-flag:focus-visible[b-0vysx08lmj] {
		transform: translateY(-2px) rotate(-6deg);
		outline: none;
		z-index: 3; /* the hovered flag, and its tooltip, come up over the armadillo (1) and the speech bubble (2) */
	}

	.ark-flag.on[b-0vysx08lmj] {
		transform: scale(1.1);
	}

	.ark-flag:focus-visible svg[b-0vysx08lmj] {
		box-shadow: 0 0 0 2px var(--sky);
	}

/* A flag's free edge ripples in the breeze - the stick side stays put. In English the walker is
   mirrored, so the flags are mirrored back (scale) to keep the flags reading the right way. */
@keyframes ark-wave-b-0vysx08lmj {
	0%, 100% { transform: skewY(0) scaleX(1); }
	25% { transform: skewY(-5deg) scaleX(.96); }
	50% { transform: skewY(0) scaleX(1); }
	75% { transform: skewY(5deg) scaleX(.97); }
}

@media (max-width: 766.98px) {
	.ark-flags[b-0vysx08lmj] {
		top: .05rem;
		inset-inline-end: .25rem;
	}

	.ark-flag svg[b-0vysx08lmj] {
		width: .95rem;
		height: .7rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ark-flags[b-0vysx08lmj],
	.site-logo-wrap.walking .ark-flags[b-0vysx08lmj] {
		visibility: visible;
		animation: none;
	}

	.ark-flag svg[b-0vysx08lmj],
	.ark-flag[b-0vysx08lmj] {
		animation: none;
		transition: none;
	}
}

/* Flag tooltip: a tiny Sky Blue pill under the flag, with a tail, on hover or keyboard focus.
   Replaces the native title so it shows at once and matches the bar. */
.ark-flag-tip[b-0vysx08lmj] {
	position: absolute;
	top: calc(100% - .4rem);
	left: 50%;
	translate: -50% 0;
	padding: .15rem .5rem;
	border-radius: 999px;
	background: var(--sky);
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-size: .75rem;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	scale: .8;
	transition: opacity .15s, scale .3s var(--spring);
	z-index: 3;
}

	.ark-flag-tip[b-0vysx08lmj]::before {
		content: "";
		position: absolute;
		top: -4px;
		left: 50%;
		translate: -50% 0;
		border: 4px solid transparent;
		border-top: 0;
		border-bottom: 4px solid var(--sky);
	}

.ark-flag:hover .ark-flag-tip[b-0vysx08lmj],
.ark-flag:focus-visible .ark-flag-tip[b-0vysx08lmj] {
	opacity: 1;
	scale: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ark-flag-tip[b-0vysx08lmj] {
		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/CardsPreview.razor.rz.scp.css */
.pv-page[b-4kjn395yz0] {
	padding: 1.25rem 0 6rem;
	font-family: 'Lunasima', system-ui, sans-serif;
	color: #1f1f1f;
}

.pv-head[b-4kjn395yz0] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

	.pv-head h1[b-4kjn395yz0] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
		font-size: 1.25rem;
		margin: 0 0 .35rem;
	}

	.pv-head p[b-4kjn395yz0] {
		max-width: 60ch;
		margin: 0;
		color: var(--md-muted, #444444);
	}

.pv-page h2[b-4kjn395yz0] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1.1rem;
	margin: 1.75rem 0 .5rem;
}

.pv-controls[b-4kjn395yz0] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.pv-switch[b-4kjn395yz0] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
	user-select: none;
}

.pv-btn[b-4kjn395yz0] {
	padding: .35rem .9rem;
	border: 1.5px solid var(--text-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--text-primary);
	font: inherit;
	cursor: pointer;
}

	.pv-btn:hover[b-4kjn395yz0] {
		background: var(--text-primary);
		color: #fff;
	}

.pv-grid[b-4kjn395yz0] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
	gap: 2rem 1.25rem; /* the rating badge overhangs the card top by ~22px */
	align-items: start;
}

	.pv-grid.narrow[b-4kjn395yz0] {
		grid-template-columns: repeat(auto-fill, minmax(min(225px, 100%), 1fr));
	}

.pv-grid-mammoth[b-4kjn395yz0] {
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.pv-toast[b-4kjn395yz0] {
	position: fixed;
	bottom: 5rem;
	left: 50%;
	translate: -50%;
	z-index: 50;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: #1f1f1f;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	animation: pv-toast-b-4kjn395yz0 3s ease both;
	pointer-events: none;
}

@keyframes pv-toast-b-4kjn395yz0 {
	0% { opacity: 0; translate: -50% 10px; }
	10%, 80% { opacity: 1; translate: -50% 0; }
	100% { opacity: 0; }
}
/* /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;
    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-inline-start: 10px;
    border-inline-start: 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-inline-start: 20px;
}

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

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

.contact-info[b-hgk2qbyllx] {
    background-color: #f1f8e9;
    padding: 15px;
    border-radius: 5px;
    border-inline-start: 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-inline-start: 4px solid #ffc107;
    margin: 15px 0;
}

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

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

.contact-info[b-hgk2qbyllx] {
    background-color: #f1f8e9;
    padding: 15px;
    border-radius: 5px;
    border-inline-start: 4px solid #4caf50;
    margin-top: 20px;
    text-align: center;
}
/* /Components/Pages/RoomList.razor.rz.scp.css */
/* The public room list (/rooms): a quiet, readable index - regions as sections, each city a card of
   room links. Same type and blue as the rest of the site, none of the catalogue's motion. */

.rl[b-w30xo0qbhe] {
	max-width: 72rem;
	margin-inline: auto;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #1f1f1f;
}

.rl-head[b-w30xo0qbhe] {
	margin-block: .5rem 2rem;
}

.rl-title[b-w30xo0qbhe] {
	font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: clamp(2.25rem, 6vw, 4rem);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 .75rem;
}

.rl-lead[b-w30xo0qbhe] {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
	max-width: 46rem;
}

	.rl-lead a[b-w30xo0qbhe] {
		display: inline-block;
		font-weight: 700;
	}

.rl-jump[b-w30xo0qbhe] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

	.rl-jump a[b-w30xo0qbhe] {
		display: inline-flex;
		align-items: center;
		gap: .45rem;
		font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		font-weight: 500;
		padding-block: .3rem;
		padding-inline: .9rem .3rem; /* the count sits snug against the end of the pill */
		border: 2px solid #5ba6da;
		border-radius: 999px;
		color: #1f1f1f;
		text-decoration: none;
		transition: background-color .15s ease, color .15s ease;
	}

		.rl-jump a:hover[b-w30xo0qbhe],
		.rl-jump a:focus-visible[b-w30xo0qbhe] {
			background: #5ba6da;
			color: #fff;
		}

	.rl-jump .rl-count[b-w30xo0qbhe] {
		transition: background-color .15s ease, color .15s ease;
	}

		/* The pill fills blue on hover: the count turns over so it stays readable. */
		.rl-jump a:hover .rl-count[b-w30xo0qbhe],
		.rl-jump a:focus-visible .rl-count[b-w30xo0qbhe] {
			background: #fff;
			color: #5ba6da;
		}

.rl-region[b-w30xo0qbhe] {
	margin-block-end: 2.5rem;
	/* The navbar is fixed: land a jump below it, not under it. */
	scroll-margin-top: calc(var(--ark-nav-h, 4rem) + 1rem);
}

.rl-region-name[b-w30xo0qbhe] {
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 1rem;
	padding-block-end: .35rem;
	border-block-end: 3px solid #5ba6da;
}

.rl-cities[b-w30xo0qbhe] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
	align-items: start;
}

.rl-city[b-w30xo0qbhe] {
	background: #fff;
	border-radius: 12px;
	padding: 1rem 1.1rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .06);
	scroll-margin-top: calc(var(--ark-nav-h, 4rem) + 1rem);
}

	/* Arrived from a room page's "all rooms in" link: point at the city. */
	.rl-city:target[b-w30xo0qbhe] {
		outline: 3px solid #5ba6da;
		outline-offset: 2px;
	}

.rl-city-name[b-w30xo0qbhe] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 .6rem;
}

.rl-count[b-w30xo0qbhe] {
	font-family: 'Bungee', sans-serif;
	font-size: 1rem;
	line-height: 1;
	font-weight: 400;
	min-width: 1.75rem;
	padding: .2rem .45rem;
	border-radius: 999px;
	background: #5ba6da;
	color: #fff;
	text-align: center;
}

.rl-rooms[b-w30xo0qbhe] {
	list-style: none;
	margin: 0;
	padding: 0;
}

	.rl-rooms li[b-w30xo0qbhe] {
		padding-block: .3rem;
		line-height: 1.35;
	}

		.rl-rooms li + li[b-w30xo0qbhe] {
			border-block-start: 1px solid #eee;
		}

	.rl-rooms a[b-w30xo0qbhe] {
		color: #1f1f1f;
		font-weight: 700;
		text-decoration: none;
	}

		.rl-rooms a:hover[b-w30xo0qbhe],
		.rl-rooms a:focus-visible[b-w30xo0qbhe] {
			color: #1976d2;
			text-decoration: underline;
		}

.rl-company[b-w30xo0qbhe] {
	display: block;
	color: #444;
}

@media (prefers-reduced-motion: reduce) {
	.rl-jump a[b-w30xo0qbhe], .rl-jump .rl-count[b-w30xo0qbhe] {
		transition: none;
	}
}
/* /Components/Pages/RoomPage.razor.rz.scp.css */
/* A room's public page (/rooms/{id}): photo and name up top with the ways to book or get there,
   then the facts and links to neighbouring rooms. Same type and blue as the catalogue, no motion. */

.rp[b-s7sa4blet2] {
	max-width: 60rem;
	margin-inline: auto;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #1f1f1f;
}

/* Breadcrumbs at the start, the back links at the end; stacked when they don't fit side by side. */
.rp-top[b-s7sa4blet2] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	margin: .25rem 0 1.25rem;
}

.rp-crumbs ol[b-s7sa4blet2] {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: #444;
}

	.rp-crumbs li + li[b-s7sa4blet2]::before {
		content: "›";
		margin-inline-end: .5rem;
	}

	.rp-crumbs a[b-s7sa4blet2] {
		color: #444;
	}

.rp-back[b-s7sa4blet2] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

	.rp-back a[b-s7sa4blet2] {
		display: inline-flex;
		align-items: center;
		gap: .35rem;
		padding: .25rem .8rem;
		border: 2px solid #5ba6da;
		border-radius: 999px;
		font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		font-weight: 500;
		color: #1f1f1f;
		text-decoration: none;
		transition: background-color .15s ease, color .15s ease;
	}

		.rp-back a:hover[b-s7sa4blet2],
		.rp-back a:focus-visible[b-s7sa4blet2] {
			background: #5ba6da;
			color: #fff;
		}

		/* Drawn pointing right - "back" in Hebrew; mirrored to point left in English. */
		.rp-back svg[b-s7sa4blet2] {
			width: 18px;
			height: 18px;
			fill: currentColor;
			scale: var(--dir) 1;
		}

/* ---------- Hero: photo beside the name on wide screens, above it on phones ---------- */

.rp-hero[b-s7sa4blet2] {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	margin-block-end: 2rem;
}

@media (min-width: 767px) {
	.rp-hero:has(.rp-photo)[b-s7sa4blet2] {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.rp-photo[b-s7sa4blet2] {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	background: #f7f7f7;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .08);
}

.rp-title[b-s7sa4blet2] {
	font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: clamp(2.25rem, 6vw, 4rem);
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 .5rem;
	overflow-wrap: anywhere;
}

.rp-sub[b-s7sa4blet2] {
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: #444;
}

.rp-rating[b-s7sa4blet2] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.25rem;
}

	.rp-rating svg[b-s7sa4blet2] {
		flex: none;
		width: 32px;
		height: 32px;
		padding: 4px;
		border-radius: 8px;
		background: #f7f7f7;
	}

.rp-actions[b-s7sa4blet2] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.rp-btn[b-s7sa4blet2] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem 1rem;
	border: 2px solid #5ba6da;
	border-radius: 999px;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 500;
	color: #1f1f1f;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

	.rp-btn svg[b-s7sa4blet2] {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	.rp-btn:hover[b-s7sa4blet2],
	.rp-btn:focus-visible[b-s7sa4blet2],
	.rp-btn-main[b-s7sa4blet2] {
		background: #5ba6da;
		color: #fff;
	}

		.rp-btn-main:hover[b-s7sa4blet2],
		.rp-btn-main:focus-visible[b-s7sa4blet2] {
			background: #1976d2;
			border-color: #1976d2;
		}

/* ---------- Sections ---------- */

.rp-section[b-s7sa4blet2] {
	margin-block-end: 2rem;
}

.rp-heading[b-s7sa4blet2] {
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 .75rem;
	padding-block-end: .35rem;
	border-block-end: 3px solid #5ba6da;
}

.rp-about[b-s7sa4blet2] {
	white-space: pre-line;
	line-height: 1.6;
	margin: 0;
}

.rp-facts[b-s7sa4blet2] {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: .5rem 1.5rem;
	margin: 0 0 1rem;
}

	.rp-facts dt[b-s7sa4blet2] {
		font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		font-weight: 600;
		color: #444;
	}

	.rp-facts dd[b-s7sa4blet2] {
		margin: 0;
	}

.rp-features[b-s7sa4blet2] {
	list-style: none;
	margin: 0;
	padding: 0;
}

	.rp-features li + li[b-s7sa4blet2] {
		margin-block-start: .25rem;
	}

.rp-others[b-s7sa4blet2] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: .5rem 1.5rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

	.rp-others a[b-s7sa4blet2] {
		color: #1f1f1f;
		font-weight: 700;
		text-decoration: none;
	}

		.rp-others a:hover[b-s7sa4blet2],
		.rp-others a:focus-visible[b-s7sa4blet2] {
			color: #1976d2;
			text-decoration: underline;
		}

	.rp-others span[b-s7sa4blet2] {
		display: block;
		color: #444;
	}

.rp-catalogue[b-s7sa4blet2] {
	font-weight: 700;
}

@media (max-width: 480px) {
	.rp-facts[b-s7sa4blet2] {
		grid-template-columns: 1fr;
		gap: .15rem;
	}

		.rp-facts dd + dt[b-s7sa4blet2] {
			margin-block-start: .5rem;
		}
}

@media (prefers-reduced-motion: reduce) {
	.rp-btn[b-s7sa4blet2],
	.rp-back a[b-s7sa4blet2] {
		transition: none;
	}
}
/* /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;
	inset-inline-start: -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;
	inset-inline-end: -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: end-anchored here because the start-extending ribbon would collide with a centered one. */
.suggestion-card-rating[b-7jzwaabowk] {
	position: absolute;
	top: 0;
	inset-inline-end: .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;
	}

	/* Tail at the bubble's inline-start side, pointing at the mascot (mirrored in English via --dir). */
	.speech-bubble[b-7jzwaabowk]::after {
		left: auto;
		right: auto;
		inset-inline-start: -7px;
		bottom: auto;
		top: 50%;
		transform: translateY(-50%) rotate(calc(-45deg * var(--dir)));
		border: none;
		border-inline-start: 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.
   Filled backwards only: the first frame hides a card through its delay, and once done it lets go of
   the transform - a held one would make the column the containing block of the card's fixed popups. */
.card-enter[b-9dp2gr0h53] {
	animation: card-pop-in-b-9dp2gr0h53 .5s cubic-bezier(.22,.85,.32,1) backwards;
}

/* 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;
	}
}

/* A card's popups (location, rating, take) are fixed overlays over the whole page, but content-visibility's
   paint containment makes the column their containing block - boxing them into the card, under the sticky
   tab strip. Lifted while one is open, with the column raised over the navbar (1025) and footer. */
.card-enter:has(.rc-pop-scrim)[b-9dp2gr0h53] {
	content-visibility: visible;
	position: relative;
	z-index: 3000;
}

@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;
	inset-inline-start: -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;
	inset-inline-end: .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;
	inset-inline-end: .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;
	}

	/* Its votes tooltip (RatingVotes) hangs down over the card: come up over the tag domes (5), the
	   open-date badge (6) and the name ribbon and paper clip (100) while it shows. */
	.ratings:hover[b-9dp2gr0h53],
	.ratings:focus-visible[b-9dp2gr0h53] {
		z-index: 101;
	}

/* On a phone a tap on the badge pins its votes open instead (RatingVotes, Pinned): laid over the
   badge so they hang from it like the tooltip, letting taps through to the badge to shut them. */
.ratings-votes[b-9dp2gr0h53] {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% -50%;
	width: 2.6rem;
	height: 2.6rem;
	z-index: 101; /* as the hovered badge: over the name ribbon (100) */
	pointer-events: none;
}

/* The card whose votes are open comes up over the click-away layer and the cards after it, and
   stops clipping to its box (content-visibility) so a long list can run past its bottom. */
.card-enter.votes-open[b-9dp2gr0h53] {
	position: relative;
	z-index: 3;
	content-visibility: visible;
}

.votes-scrim[b-9dp2gr0h53] {
	position: fixed;
	inset: 0;
	z-index: 2;
}

	.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;
	inset-inline-start: .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;
	inset-inline-end: .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: start;
}

.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: start;
		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 */
	inset-inline-start: -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-block: 0;
	padding-inline: 18px 12px;
	z-index: 5;
}

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


.user-tag-img[b-9dp2gr0h53] {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #2d5cae;
	background: #fff;
	margin-inline-start: -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;
}


/* The company (and branch) the list is narrowed to, centered above it. In the flow rather than laid
   over the page's top gutter: that gutter is shorter than the badge, and the tab strip below it is
   opaque and sticky, so it covered the badge's lower half. */
.company-branch-filters[b-9dp2gr0h53] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: .5rem;
	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;
	}
}

/* Below 992px RoomFilters is the phone's fixed coin bar (and its popups), leaving the aside nothing
   in the flow - but its padding (app.css) and the row's gutter still left a blank band above the
   list. Drop its box; the fixed bar inside is unaffected. */
@media (max-width: 991.98px) {
	.filters-aside-alt[b-9dp2gr0h53] {
		display: contents;
	}
}

@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: " · " attr(data-role); /* the role, in the page's language - see ColumnRole */
    color: #1976d2;
}

.import-preview th.col-picked-city[b-k7adhwjupb]::after {
    content: " · " attr(data-role);
    color: #1976d2;
}

.import-preview th.col-picked-country[b-k7adhwjupb]::after {
    content: " · " attr(data-role);
    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: " · " attr(data-role);
    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.
   In English everything here mirrors via --dir: the gif faces right and the dots stream leftward. */
.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;
	scale: var(--dir) 1;
	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: calc(12px * var(--dir)) 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/RatingVotes.razor.rz.scp.css */
/* Hover zone: fills the positioned parent (the rating badge, or a box laid over it). Transparent, so
   the badge shows through and its clicks still land on it. */
.rv[b-lqhdd9zfao] {
	position: absolute;
	inset: 0;
}

/* The tooltip: a frosted popover under the badge (DESIGN.md: popovers float on blur, ambient lift). */
.rv-tip[b-lqhdd9zfao] {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	translate: -50% 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	width: max-content;
	padding: .4rem .6rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	color: #1f1f1f;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	text-align: start;
	pointer-events: none;
	opacity: 0;
	scale: .9;
	transform-origin: top center;
	transition: opacity .15s, scale .25s cubic-bezier(.34, 1.56, .64, 1);
}

	.rv-tip[b-lqhdd9zfao]::before {
		content: "";
		position: absolute;
		top: -5px;
		left: 50%;
		translate: -50% 0;
		border: 5px solid transparent;
		border-top: 0;
		border-bottom-color: rgba(255, 255, 255, .88);
	}

.rv-head[b-lqhdd9zfao] {
	font-weight: 600;
	color: #444444;
}

.rv-list[b-lqhdd9zfao] {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding-top: .3rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.rv-row[b-lqhdd9zfao] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.rv-date[b-lqhdd9zfao] {
	font-variant-numeric: tabular-nums;
}

.rv-row svg[b-lqhdd9zfao] {
	width: 16px;
	height: 16px;
	flex: none;
}

/* Hover only where there is a real pointer: on a phone a tap would leave it stuck open. Keyboard focus
   on the badge (when it's a button) shows it too. */
@media (hover: hover) {
	.rv:hover .rv-tip[b-lqhdd9zfao] {
		opacity: 1;
		scale: 1;
	}
}

:focus-visible > .rv .rv-tip[b-lqhdd9zfao] {
	opacity: 1;
	scale: 1;
}

/* Pinned (a phone's tap): open, and taking taps - but the zone over the badge lets them through. */
.rv-pinned[b-lqhdd9zfao] {
	pointer-events: none;
}

	.rv-pinned .rv-tip[b-lqhdd9zfao] {
		opacity: 1;
		scale: 1;
		pointer-events: auto;
		animation: rv-pin-b-lqhdd9zfao .3s cubic-bezier(.34, 1.56, .64, 1);
	}

@keyframes rv-pin-b-lqhdd9zfao {
	from {
		opacity: 0;
		scale: .9;
	}
}

/* The action under the votes (the card's flip), past a separator. A full-width pill, tall enough
   for a thumb. */
.rv-action[b-lqhdd9zfao] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-height: 2.5rem;
	margin-top: .15rem;
	padding: .35rem .8rem;
	border: none;
	border-top: 1px solid rgba(0, 0, 0, .1);
	border-radius: 4px;
	background: none;
	color: #1976d2;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

	.rv-action svg[b-lqhdd9zfao] {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	.rv-action:active[b-lqhdd9zfao] {
		background: rgba(25, 118, 210, .08);
	}

@media (prefers-reduced-motion: reduce) {
	.rv-tip[b-lqhdd9zfao] {
		transition: none;
	}

	.rv-pinned .rv-tip[b-lqhdd9zfao] {
		animation: none;
	}
}
/* /Components/Shared/RoomCard.razor.rz.scp.css */
/* Room card, two-faced. Tokens follow DESIGN.md: Sky Blue accents, Fredoka names, Bungee digits,
   Lunasima body, soft ambient shadows, springy overshoot easing gated on reduced-motion. */

/* The popup lives outside the card (see the markup), so it shares the tokens. */
.rc[b-op0jn0bi7z], .rc-pop-scrim[b-op0jn0bi7z] {
	--rc-radius: 16px;
	--rc-spring: cubic-bezier(.34, 1.56, .64, 1);
	--rc-ease: cubic-bezier(.22, 1, .36, 1);
	--rc-ink: #1f1f1f;
	--rc-muted: var(--md-muted, #444444);
	--rc-sky: var(--text-primary, #5ba6da);
	--rc-vivid: #1976d2;
	--rc-forest: var(--bg-min-players, #1B5E20);
	--rc-ember: var(--bg-fear, #D84315);
	--rc-void: #1a1a1a;
	position: relative;
	perspective: 1400px;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--rc-ink);
	animation: rc-enter-b-op0jn0bi7z .55s var(--rc-ease) both;
	animation-delay: var(--rc-delay, 0ms);
}

@keyframes rc-enter-b-op0jn0bi7z {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.96);
	}
}

/* ---------- the two faces share one grid cell, so the card is as tall as the taller face ---------- */

.rc-inner[b-op0jn0bi7z] {
	display: grid;
	transform-style: preserve-3d;
	transition: transform .75s var(--rc-spring);
}

.rc-flipped .rc-inner[b-op0jn0bi7z] {
	transform: rotateY(180deg);
}

/* The flip lifts the card off the page on its way round: a brief shrink and rise through the
   half-turn, as if picked up, turned over and set back down. */
.rc-flipped .rc-inner[b-op0jn0bi7z] {
	animation: rc-flip-b-op0jn0bi7z .75s var(--rc-ease) both;
}

.rc-unflipping .rc-inner[b-op0jn0bi7z] {
	animation: rc-unflip-b-op0jn0bi7z .65s var(--rc-ease) both;
}

@keyframes rc-flip-b-op0jn0bi7z {
	0% { transform: rotateY(0) scale(1); }
	50% { transform: rotateY(90deg) scale(.9) translateY(-10px); }
	100% { transform: rotateY(180deg) scale(1); }
}

@keyframes rc-unflip-b-op0jn0bi7z {
	0% { transform: rotateY(180deg) scale(1); }
	50% { transform: rotateY(90deg) scale(.9) translateY(-10px); }
	100% { transform: rotateY(0) scale(1); }
}

.rc-face[b-op0jn0bi7z] {
	grid-area: 1 / 1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	border-radius: var(--rc-radius);
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	transition: box-shadow .3s var(--rc-ease), transform .3s var(--rc-ease);
}

.rc-back[b-op0jn0bi7z] {
	transform: rotateY(180deg);
	overflow: hidden;
}

/* Hover lifts the whole card a touch; the photo zooms in its frame. */
.rc:not(.rc-flipped):hover .rc-front[b-op0jn0bi7z] {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
	transform: translateY(-3px);
}

/* ---------- front: photo ---------- */

.rc-photo[b-op0jn0bi7z] {
	position: relative;
	border-radius: var(--rc-radius) var(--rc-radius) 0 0;
	aspect-ratio: 16 / 10;
	background-color: var(--rc-void);
	background-size: 0 0; /* the url lives here; the layer below paints it */
	isolation: isolate;
}

.rc-photo-frame[b-op0jn0bi7z] {
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: 0 0;
	overflow: hidden; /* clips the zoom; the photo box itself stays open so the badge can straddle its top edge */
	border-radius: var(--rc-radius) var(--rc-radius) 0 0;
}

.rc-photo-img[b-op0jn0bi7z] {
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform .6s var(--rc-ease), filter .6s var(--rc-ease);
}

.rc:hover .rc-photo-img[b-op0jn0bi7z] {
	transform: scale(1.07);
	filter: brightness(1.05) contrast(1.04);
}

/* Photo fill: the same photo, cover-sized, blurred and dimmed, under the contained one, so a photo of
   another shape gets its own colours around it rather than Void bars. Scaled past the frame so the
   blur's soft edges are clipped. */
.rc-photo-fill .rc-photo-frame[b-op0jn0bi7z]::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(18px) brightness(.6) saturate(1.2);
	transform: scale(1.2);
}

.rc-scrim[b-op0jn0bi7z] {
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .35));
	pointer-events: none;
}

/* Community rating: the neutral-backed square badge straddling the photo's top edge, centered. */
.rc-rating[b-op0jn0bi7z] {
	position: absolute;
	padding: 0;
	border: 0;
	cursor: pointer;
	top: 0;
	left: 50%;
	translate: -50% -50%;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: #f7f7f7;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	z-index: 4;
	transition: transform .35s var(--rc-spring);
}

	.rc-rating svg[b-op0jn0bi7z] {
		width: 30px;
		height: 30px;
	}

.rc:hover .rc-rating[b-op0jn0bi7z] {
	transform: translateY(-3px) rotate(-6deg);
}

.rc-rating.SuperLike[b-op0jn0bi7z] {
	outline: 2px solid darkgreen;
	animation: rc-breathe-b-op0jn0bi7z 1.2s infinite cubic-bezier(.4, 0, .2, 1);
}

@keyframes rc-breathe-b-op0jn0bi7z {
	40% { scale: 1.12; }
	60% { scale: 1.05; }
}

/* The badge's votes tooltip (RatingVotes): a still box laid exactly over the badge, holding the hover
   zone, and above everything else on the photo so the list isn't covered. */
.rc-open-date[b-op0jn0bi7z] {
	position: absolute;
	top: .5rem;
	left: .5rem;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-family: 'Bungee', sans-serif;
	font-size: .7rem;
	letter-spacing: .02em;
}

	.rc-open-date svg[b-op0jn0bi7z] {
		width: 14px;
		height: 14px;
		fill: #fff;
	}

/* The visitor's sticker: their avatar with their take pinned to it, top-right of the photo. */
.rc-sticker[b-op0jn0bi7z] {
	position: absolute;
	cursor: pointer;
	font: inherit;
	top: .5rem;
	right: .5rem;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding-inline: 2px 10px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--rc-vivid);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	animation: rc-pop-b-op0jn0bi7z .5s var(--rc-spring) both;
}

.rc-sticker-img[b-op0jn0bi7z] {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	background: #eee;
}

.rc-sticker-icon[b-op0jn0bi7z] {
	width: 20px;
	height: 20px;
	margin-inline-start: 6px;
	fill: var(--rc-ink);
}

	.rc-sticker-icon.like[b-op0jn0bi7z], .rc-sticker-icon.superlike[b-op0jn0bi7z] { fill: var(--rc-forest); }
	.rc-sticker-icon.dislike[b-op0jn0bi7z] { fill: var(--rc-ember); }
	.rc-sticker-icon.neutral[b-op0jn0bi7z] { fill: #444444; }
	.rc-sticker-icon.todo[b-op0jn0bi7z] { fill: var(--rc-vivid); }
	.rc-sticker-icon.hide[b-op0jn0bi7z] { fill: #777; }

/* Tag domes: the signature circle-clipped-to-flat-bottom token, by category colour. */
.rc-domes[b-op0jn0bi7z] {
	position: absolute;
	z-index: 3;
	display: flex;
	gap: .35rem;
}

.rc-domes-features[b-op0jn0bi7z] {
	left: .35rem;
	bottom: .35rem;
}

.rc-domes-min[b-op0jn0bi7z] {
	right: .35rem;
	bottom: .35rem;
}

.rc-domes-fear[b-op0jn0bi7z] {
	left: .35rem;
	top: .35rem;
	flex-direction: column;
	align-items: flex-start;
}

.rc-dome[b-op0jn0bi7z] {
	--d: 44px;
	--h: 31px;
	--fill: var(--rc-sky);
	position: relative;
	width: var(--d);
	height: var(--h);
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform .35s var(--rc-spring);
}

	.rc-dome[b-op0jn0bi7z]::before {
		content: "";
		position: absolute;
		left: 0;
		top: calc(-.5 * (var(--d) - var(--h)));
		width: var(--d);
		height: var(--d);
		border-radius: 50%;
		background: var(--fill);
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
		transition: background-color .25s ease;
	}

	.rc-dome:hover[b-op0jn0bi7z]::before {
		background: color-mix(in srgb, var(--fill) 82%, white 18%);
	}

	.rc-dome:hover[b-op0jn0bi7z] {
		transform: translateY(-3px);
	}

	.rc-dome svg[b-op0jn0bi7z] {
		position: relative;
		width: 24px;
		height: 24px;
		fill: #fff;
	}

	.rc-dome span[b-op0jn0bi7z] {
		position: relative;
		color: #fff;
		font-family: 'Bungee', sans-serif;
		font-size: .85rem;
		line-height: 1;
		padding-top: 2px;
	}

.rc-domes-fear .rc-dome[b-op0jn0bi7z] {
	--fill: var(--rc-ember);
	/* the fear dome hangs from the top edge, so it's flipped: flat side up */
	transform: scaleY(-1);
}

	.rc-domes-fear .rc-dome svg[b-op0jn0bi7z] {
		transform: scaleY(-1);
	}

	.rc-domes-fear .rc-dome:hover[b-op0jn0bi7z] {
		transform: scaleY(-1) translateY(-3px);
	}

.rc-domes-min .rc-dome[b-op0jn0bi7z] {
	--fill: var(--rc-forest);
}

.rc-dome.gold[b-op0jn0bi7z] {
	--fill: gold;
}

	.rc-dome.gold svg[b-op0jn0bi7z] {
		fill: var(--rc-ink);
	}

/* Domes nod in turn when the card is hovered - a small "hello" from the tokens. */
.rc:hover .rc-domes-features .rc-dome:nth-child(1)[b-op0jn0bi7z] { animation: rc-nod-b-op0jn0bi7z .5s var(--rc-spring) 0ms; }
.rc:hover .rc-domes-features .rc-dome:nth-child(2)[b-op0jn0bi7z] { animation: rc-nod-b-op0jn0bi7z .5s var(--rc-spring) 70ms; }
.rc:hover .rc-domes-features .rc-dome:nth-child(3)[b-op0jn0bi7z] { animation: rc-nod-b-op0jn0bi7z .5s var(--rc-spring) 140ms; }
.rc:hover .rc-domes-features .rc-dome:nth-child(4)[b-op0jn0bi7z] { animation: rc-nod-b-op0jn0bi7z .5s var(--rc-spring) 210ms; }

@keyframes rc-nod-b-op0jn0bi7z {
	35% { transform: translateY(-5px); }
}

/* Played: a rubber stamp slammed onto the photo. */
.rc-stamp[b-op0jn0bi7z] {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 4;
	padding: .15rem .9rem;
	border: 3px double var(--rc-forest);
	border-radius: 8px;
	background: rgba(255, 255, 255, .78);
	color: var(--rc-forest);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.3;
	letter-spacing: .04em;
	rotate: -12deg;
	translate: -50% -50%;
	pointer-events: none;
	mix-blend-mode: normal;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	animation: rc-stamp-b-op0jn0bi7z .55s cubic-bezier(.2, 1.4, .4, 1) both;
}

@keyframes rc-stamp-b-op0jn0bi7z {
	0% {
		opacity: 0;
		scale: 2.4;
		rotate: -28deg;
	}
	70% {
		opacity: 1;
		scale: .94;
	}
	100% {
		scale: 1;
		rotate: -12deg;
	}
}

/* ---------- front: body ---------- */

.rc-body[b-op0jn0bi7z] {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .6rem .8rem .55rem;
}

.rc-name[b-op0jn0bi7z] {
	margin: 0;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rc-where[b-op0jn0bi7z] {
	display: flex;
	align-items: center;
	gap: .3rem;
	font-size: .9rem;
	color: var(--rc-muted);
	min-width: 0;
}

	.rc-where svg[b-op0jn0bi7z] {
		width: 16px;
		height: 16px;
		flex: none;
		fill: var(--rc-sky);
	}

	/* City never wraps or shrinks; the company takes what is left and truncates. */
	.rc-where > span[b-op0jn0bi7z] {
		flex: none;
		white-space: nowrap;
	}

.rc-dot[b-op0jn0bi7z] {
	opacity: .5;
}

/* A plain block, not MudBlazor's centred inline-flex button: as flex, a long name overflowed both ends and
   never got its ellipsis. dir="auto" on it keeps a Latin name's first letters when it truncates. */
.rc-company[b-op0jn0bi7z] {
	display: block;
	text-align: start;
	min-width: 0;
	flex: 0 1 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rc-ink);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: underline transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color .2s, color .2s;
}

	.rc-company:hover[b-op0jn0bi7z] {
		color: var(--rc-vivid);
		text-decoration-color: currentColor;
	}

.rc-foot[b-op0jn0bi7z] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-top: .25rem;
}

.rc-links[b-op0jn0bi7z] {
	display: flex;
	gap: .25rem;
}

.rc-link[b-op0jn0bi7z] {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 999px;
	background: #eee;
	color: #555;
	cursor: pointer;
	transition: background-color .25s, transform .3s var(--rc-spring);
}

	.rc-link svg[b-op0jn0bi7z] {
		width: 18px;
		height: 18px;
		fill: #555;
		transition: fill .25s;
	}

	.rc-link:hover[b-op0jn0bi7z] {
		background: var(--rc-sky);
		transform: translateY(-2px);
	}

		.rc-link:hover svg[b-op0jn0bi7z] {
			fill: #fff;
		}

/* The coin: the way round to the back. Spins a half-turn on hover, hinting at what it does. */
.rc-coin[b-op0jn0bi7z] {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 2px solid var(--rc-sky);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	transition: transform .5s var(--rc-spring), background-color .25s, box-shadow .25s;
}

	.rc-coin svg[b-op0jn0bi7z] {
		width: 22px;
		height: 22px;
		fill: var(--rc-sky);
		transition: fill .25s;
	}

	.rc-coin:hover[b-op0jn0bi7z] {
		transform: rotateY(180deg) scale(1.08);
		background: var(--rc-sky);
		box-shadow: 0 4px 12px rgba(91, 166, 218, .4);
	}

		.rc-coin:hover svg[b-op0jn0bi7z] {
			fill: #fff;
		}

/* ---------- back ---------- */

.rc-back[b-op0jn0bi7z] {
	background-color: var(--rc-void);
	background-size: cover;
	background-position: center;
	color: #fff;
	justify-content: center;
}

.rc-back-veil[b-op0jn0bi7z] {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	background: linear-gradient(180deg, rgba(20, 20, 24, .78), rgba(20, 20, 24, .9));
}

.rc-back-body[b-op0jn0bi7z] {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: .7rem .8rem .8rem;
	height: 100%;
}

.rc-back-head[b-op0jn0bi7z] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

	.rc-back-head .rc-name[b-op0jn0bi7z] {
		font-size: 1.05rem;
		color: #fff;
	}

.rc-x[b-op0jn0bi7z] {
	flex: none;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	cursor: pointer;
	transition: background-color .25s, transform .4s var(--rc-spring);
}

	.rc-x svg[b-op0jn0bi7z] {
		width: 18px;
		height: 18px;
		fill: #fff;
	}

	.rc-x:hover[b-op0jn0bi7z] {
		background: rgba(255, 255, 255, .25);
		transform: rotate(90deg);
	}

.rc-chips[b-op0jn0bi7z] {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

/* Toggle chip: a pill with icon and label; "on" fills Sky Blue. Each pops in on its own beat. */
.rc-chip[b-op0jn0bi7z] {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .75rem .35rem .6rem;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font: inherit;
	font-size: .88rem;
	cursor: pointer;
	animation: rc-pop-b-op0jn0bi7z .45s var(--rc-spring) both;
	animation-delay: calc(80ms + var(--i, 0) * 60ms);
	transition: background-color .25s, border-color .25s, transform .3s var(--rc-spring), opacity .25s;
}

	.rc-chip svg[b-op0jn0bi7z] {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.rc-chip:hover:not(:disabled)[b-op0jn0bi7z] {
		border-color: #fff;
		transform: translateY(-2px);
	}

	.rc-chip:active:not(:disabled)[b-op0jn0bi7z] {
		transform: scale(.94);
	}

	.rc-chip.on[b-op0jn0bi7z] {
		background: var(--rc-sky);
		border-color: var(--rc-sky);
		box-shadow: 0 4px 12px rgba(91, 166, 218, .45);
	}

	.rc-chip:disabled[b-op0jn0bi7z] {
		opacity: .35;
		cursor: not-allowed;
	}

@keyframes rc-pop-b-op0jn0bi7z {
	from {
		opacity: 0;
		scale: .6;
	}
}

/* My rating: four big round choices, each popping in on its own beat. */
.rc-rate-group[b-op0jn0bi7z] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .35rem;
}

.rc-rate[b-op0jn0bi7z] {
	--c: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: .4rem .1rem .35rem;
	border: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font: inherit;
	font-size: .7rem;
	cursor: pointer;
	animation: rc-pop-b-op0jn0bi7z .45s var(--rc-spring) both;
	animation-delay: calc(120ms + var(--i, 0) * 60ms);
	transition: background-color .25s, transform .3s var(--rc-spring), box-shadow .25s;
}

	.rc-rate svg[b-op0jn0bi7z] {
		width: 26px;
		height: 26px;
		fill: var(--ci, var(--c));
		transition: transform .3s var(--rc-spring);
	}

	.rc-rate:hover[b-op0jn0bi7z] {
		background: rgba(255, 255, 255, .16);
		transform: translateY(-2px);
	}

		.rc-rate:hover svg[b-op0jn0bi7z] {
			transform: scale(1.15) rotate(-8deg);
		}

	.rc-rate.on[b-op0jn0bi7z] {
		background: var(--c);
		color: #fff;
		box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 55%, transparent);
	}

		.rc-rate.on svg[b-op0jn0bi7z] {
			fill: #fff;
			animation: rc-wiggle-b-op0jn0bi7z .5s var(--rc-spring);
		}

	/* --c fills the chosen button; --ci is the icon on the dark back while unchosen, lifted so it reads there. */
	.rc-rate.like[b-op0jn0bi7z] { --c: var(--rc-forest); --ci: #7bd389; }
	.rc-rate.neutral[b-op0jn0bi7z] { --c: #444444; --ci: #cfd5dc; }
	.rc-rate.dislike[b-op0jn0bi7z] { --c: var(--rc-ember); --ci: #ff8a65; }
	.rc-rate.none[b-op0jn0bi7z] { --c: #B9C0C9; --ci: #B9C0C9; }

	.rc-rate.none.on[b-op0jn0bi7z] {
		color: var(--rc-ink);
	}

		.rc-rate.none.on svg[b-op0jn0bi7z] {
			fill: var(--rc-ink);
		}

@keyframes rc-wiggle-b-op0jn0bi7z {
	30% { transform: scale(1.3) rotate(-14deg); }
	60% { transform: scale(1.1) rotate(8deg); }
}

.rc-save[b-op0jn0bi7z] {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .5rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--rc-sky);
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(91, 166, 218, .4);
	transition: transform .3s var(--rc-spring), box-shadow .25s, filter .2s;
}

	.rc-save svg[b-op0jn0bi7z] {
		width: 20px;
		height: 20px;
		fill: #fff;
	}

	.rc-save:hover[b-op0jn0bi7z] {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(91, 166, 218, .5);
		filter: brightness(1.05);
	}

	.rc-save:active[b-op0jn0bi7z] {
		transform: scale(.96);
	}

.rc-login[b-op0jn0bi7z] {
	margin: auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	text-align: center;
}

	.rc-login p[b-op0jn0bi7z] {
		margin: 0;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-size: 1rem;
	}

/* ---------- mammoth: a single-face plaque ---------- */

.rc-mammoth[b-op0jn0bi7z] {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	min-height: 7.5rem;
	border-radius: var(--rc-radius);
	overflow: hidden;
	background: linear-gradient(135deg, #f3efe8, #e6e0d6);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	transition: box-shadow .3s var(--rc-ease), transform .3s var(--rc-ease);
}

	.rc-mammoth:hover[b-op0jn0bi7z] {
		box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
		transform: translateY(-2px);
	}

.rc-m-portrait[b-op0jn0bi7z] {
	position: relative;
	overflow: hidden;
	background: #4a4038;
}

	.rc-m-portrait img[b-op0jn0bi7z] {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* The mammoth stands left of the picture's middle (tusk tip to elbow is ~15%-70% across), and the
		   tall, narrow portrait only shows a slice of it: aim the slice at him, not at the middle. */
		object-position: 35% 30%;
		filter: sepia(.5) contrast(.95);
		transform-origin: 50% 100%;
		transition: transform .6s var(--rc-spring), filter .4s;
	}

	/* A slow, heavy sway on hover - it's a mammoth, it doesn't bounce. */
	.rc-mammoth:hover .rc-m-portrait img[b-op0jn0bi7z] {
		filter: sepia(.2);
		animation: rc-sway-b-op0jn0bi7z 1.6s ease-in-out infinite;
	}

@keyframes rc-sway-b-op0jn0bi7z {
	25% { transform: rotate(-2deg) scale(1.04); }
	75% { transform: rotate(2deg) scale(1.04); }
}

.rc-m-body[b-op0jn0bi7z] {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .55rem .8rem .6rem;
	min-width: 0;
}

.rc-m-top[b-op0jn0bi7z] {
	display: flex;
	align-items: center;
	gap: .4rem;
	min-height: 24px;
}

.rc-m-closed[b-op0jn0bi7z] {
	font-family: 'Bungee', sans-serif;
	font-size: .7rem;
	color: var(--rc-muted);
}

.rc-sticker-static[b-op0jn0bi7z] {
	position: static;
	margin-inline-start: auto;
	height: 26px;
	padding-inline: 1px;
	animation: none;
}

	.rc-sticker-static .rc-sticker-img[b-op0jn0bi7z] {
		width: 20px;
		height: 20px;
	}

/* Room names run long and the plaque is narrow: let the name take a second line before it truncates. */
.rc-mammoth .rc-name[b-op0jn0bi7z] {
	font-size: 1.05rem;
	white-space: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.rc-mammoth .rc-where[b-op0jn0bi7z] {
	font-size: .85rem;
}

	/* Alone on its line, the city may truncate too rather than push out of the plaque. */
	.rc-mammoth .rc-where > span[b-op0jn0bi7z] {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

/* The company's own line, its text lined up under the city's (past the city icon and gap). */
.rc-m-company[b-op0jn0bi7z] {
	padding-inline-start: calc(16px + .3rem);
}

.rc-chip-sm[b-op0jn0bi7z] {
	align-self: flex-start;
	margin-top: .25rem;
	padding: .2rem .6rem .2rem .45rem;
	font-size: .8rem;
	color: var(--rc-ink);
	border-color: rgba(0, 0, 0, .25);
	background: rgba(255, 255, 255, .5);
	animation: none;
}

	.rc-chip-sm.on[b-op0jn0bi7z] {
		color: #fff;
		background: var(--rc-forest);
		border-color: var(--rc-forest);
		box-shadow: 0 3px 10px rgba(27, 94, 32, .35);
	}

/* Stamped on the portrait. Placed in the portrait's grid cell rather than at a left offset, so it lands
   on the portrait whichever side the direction puts it (the right, in Hebrew). Both end lines are spelled
   out: on an absolutely positioned item an `auto` end runs to the grid's edge, not one track on. */
.rc-stamp-sm[b-op0jn0bi7z] {
	grid-area: 1 / 1 / 2 / 2;
	font-size: 1rem;
	padding: .05rem .5rem;
	border-width: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
	.rc[b-op0jn0bi7z], .rc-sticker[b-op0jn0bi7z], .rc-chip[b-op0jn0bi7z], .rc-rate[b-op0jn0bi7z], .rc-stamp[b-op0jn0bi7z], .rc-rating.SuperLike[b-op0jn0bi7z],
	.rc-flipped .rc-inner[b-op0jn0bi7z], .rc-unflipping .rc-inner[b-op0jn0bi7z],
	.rc:hover .rc-domes-features .rc-dome[b-op0jn0bi7z], .rc-mammoth:hover .rc-m-portrait img[b-op0jn0bi7z], .rc-rate.on svg[b-op0jn0bi7z] {
		animation: none;
	}

	.rc-inner[b-op0jn0bi7z], .rc-face[b-op0jn0bi7z], .rc-photo-img[b-op0jn0bi7z], .rc-rating[b-op0jn0bi7z], .rc-dome[b-op0jn0bi7z], .rc-link[b-op0jn0bi7z], .rc-coin[b-op0jn0bi7z], .rc-chip[b-op0jn0bi7z], .rc-rate[b-op0jn0bi7z], .rc-save[b-op0jn0bi7z], .rc-x[b-op0jn0bi7z], .rc-mammoth[b-op0jn0bi7z] {
		transition: none;
	}

	.rc:hover .rc-photo-img[b-op0jn0bi7z], .rc:hover .rc-rating[b-op0jn0bi7z], .rc-coin:hover[b-op0jn0bi7z] {
		transform: none;
	}
}

/* ---------- the name plate: brushed metal, screwed to the card, the name engraved ---------- */

.rc-plaque[b-op0jn0bi7z] {
	position: relative;
	margin: .25rem 0 .1rem;
	padding: .35rem 1.1rem .3rem;
	border-radius: 6px;
	text-align: center;
	color: #2b2f36;
	background:
		linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 4px),
		linear-gradient(180deg, #e8ebef, #c5cad2 55%, #d9dde3);
	border: 1px solid #9aa1ab;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		inset 0 -1px 0 rgba(0, 0, 0, .18),
		0 2px 6px rgba(0, 0, 0, .25);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(0, 0, 0, .25);
	letter-spacing: .02em;
	z-index: 2;
}

	/* four screw heads */
	.rc-plaque[b-op0jn0bi7z]::before,
	.rc-plaque[b-op0jn0bi7z]::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 7px;
		height: 7px;
		translate: 0 -50%;
		border-radius: 50%;
		background: radial-gradient(circle at 35% 35%, #fff, #8b929c 60%, #5d636b);
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 1px rgba(255, 255, 255, .7);
	}

	.rc-plaque[b-op0jn0bi7z]::before {
		left: .4rem;
	}

	.rc-plaque[b-op0jn0bi7z]::after {
		right: .4rem;
	}

	.rc-plaque > span[b-op0jn0bi7z],
	.rc-plaque > a[b-op0jn0bi7z] {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* An open room's name links to its page: engraved like the rest, underlined on hover. */
	.rc-plaque > a[b-op0jn0bi7z] {
		color: inherit;
		text-decoration: none;
	}

		.rc-plaque > a:hover[b-op0jn0bi7z],
		.rc-plaque > a:focus-visible[b-op0jn0bi7z] {
			text-decoration: underline;
		}

/* a glint runs across the plate when the card is hovered */
.rc:hover .rc-plaque[b-op0jn0bi7z] {
	animation: rc-glint-b-op0jn0bi7z 1.1s ease-out;
}

@keyframes rc-glint-b-op0jn0bi7z {
	from {
		background-position: -200px 0, 0 0, 0 0;
	}
	to {
		background-position: 300px 0, 0 0, 0 0;
	}
}

/* ---------- location popup ---------- */

.rc-pop-scrim[b-op0jn0bi7z] {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: grid;
	place-items: center;
	background: rgba(20, 20, 24, .45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: rc-fade-b-op0jn0bi7z .2s ease-out;
}

.rc-pop[b-op0jn0bi7z] {
	position: relative;
	width: min(22rem, calc(100vw - 2rem));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: 1.5rem 1.5rem 1.25rem;
	border-radius: 16px;
	background: #fff;
	color: #1f1f1f;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	text-align: center;
	animation: rc-pop-b-op0jn0bi7z .4s var(--rc-spring, cubic-bezier(.34, 1.56, .64, 1)) both;
}

.rc-pop-x[b-op0jn0bi7z] {
	position: absolute;
	top: .6rem;
	inset-inline-end: .6rem;
	background: #eee;
}

	.rc-pop-x svg[b-op0jn0bi7z] {
		fill: #1f1f1f;
	}

	.rc-pop-x:hover[b-op0jn0bi7z] {
		background: #ddd;
	}

.rc-pop-icon[b-op0jn0bi7z] {
	width: 40px;
	height: 40px;
	fill: var(--rc-ember, #D84315);
}

.rc-pop-title[b-op0jn0bi7z] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.rc-pop-where[b-op0jn0bi7z] {
	margin: 0;
	color: var(--md-muted, #444444);
}

.rc-pop-address[b-op0jn0bi7z] {
	margin: .25rem 0 .75rem;
	font-size: 1rem;
}

/* Google Maps over Waze, the two pills stretched to the wider one's width. */
.rc-pop-nav[b-op0jn0bi7z] {
	display: grid;
	gap: .5rem;
	margin-top: .25rem;
}

.rc-pop .rc-save[b-op0jn0bi7z] {
	text-decoration: none;
}

@keyframes rc-fade-b-op0jn0bi7z {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rc-pop-scrim[b-op0jn0bi7z], .rc-pop[b-op0jn0bi7z], .rc:hover .rc-plaque[b-op0jn0bi7z] {
		animation: none;
	}
}

/* ---------- rating and take popups ---------- */

.rc-pop-line[b-op0jn0bi7z] {
	margin: .15rem 0 0;
	font-size: 1rem;
}

.rc-pop-sub[b-op0jn0bi7z] {
	margin: .35rem 0 0;
	color: var(--md-muted, #444444);
}

.rc-pop-rows[b-op0jn0bi7z] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem;
	margin-top: .35rem;
}

.rc-pop-row[b-op0jn0bi7z] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .55rem .2rem .4rem;
	border-radius: 999px;
	background: #f7f7f7;
	font-family: 'Bungee', sans-serif;
	font-size: .7rem;
	letter-spacing: .02em;
}

	.rc-pop-row svg[b-op0jn0bi7z] {
		width: 18px;
		height: 18px;
	}

.rc-pop-avatar[b-op0jn0bi7z] {
	position: relative;
	display: inline-grid;
	place-items: center;
}

	.rc-pop-avatar img[b-op0jn0bi7z] {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		object-fit: cover;
		border: 3px solid var(--rc-vivid);
		background: #eee;
	}

	.rc-pop-avatar .rc-sticker-icon[b-op0jn0bi7z] {
		position: absolute;
		right: -6px;
		bottom: -2px;
		width: 28px;
		height: 28px;
		margin: 0;
		padding: 3px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	}

.rc-pop-date[b-op0jn0bi7z] {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: 1rem;
	color: var(--rc-ink);
}

	.rc-pop-date svg[b-op0jn0bi7z] {
		width: 18px;
		height: 18px;
		fill: var(--rc-sky);
	}
/* /Components/Shared/RoomFilters.razor.rz.scp.css */
/* RoomFilters - the catalogue's filters as a card, a coin rail with flyouts, or a phone coin bar.
   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-bar[b-it8x2h3vw4], .rf-pop[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 */
	--rf-bar-bottom: 3.75rem; /* the phone bar: just above the fixed footer (3.375rem on a phone) */
	--rf-bar-h: 3.1rem; /* its coins plus padding; the popup clears it by this */
	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(calc(-12px * var(--dir))) 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-block: .5rem;
	padding-inline: 2.2rem 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(calc(16px * var(--dir))); }
}

/* ---------------- 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.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);
	}

	/* Hover only with a real pointer: on a phone, :hover sticks to the last coin tapped, so a coin
	   just tapped shut would still look open. */
	@media (hover: hover) {
		.rf-coin:hover[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);
		}
	}

	/* not while open: a sky icon on the open coin's sky face would vanish */
	.rf-coin.active:not(.open)[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 var(--start);
	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-inline-start: 1px solid #eee;
		transform: rotate(calc(45deg * var(--dir)));
	}

@keyframes rf-flyout-pop-b-it8x2h3vw4 {
	from { opacity: 0; transform: translateX(calc(10px * var(--dir))) 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: coin bar + section popup ---------------- */

/* The rail on its side, floating above the fixed footer. It sits over the scrim, so with one section
   open the other coins still answer. Coins shrink a little on the narrowest phones so the whole row
   (score, five sections, clear) still fits a 320px screen. */
.rf-bar[b-it8x2h3vw4] {
	position: fixed;
	z-index: 1022;
	bottom: var(--rf-bar-bottom);
	left: 50%;
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: clamp(.25rem, 1.2vw, .4rem);
	padding-block: .35rem;
	padding-inline: .75rem .4rem;
	background: #fcfcfc;
	border: 1px solid var(--stroke);
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	animation: rf-bar-in-b-it8x2h3vw4 .4s var(--spring);
}

	.rf-bar .rf-coin[b-it8x2h3vw4] {
		width: clamp(2rem, 9.5vw, 2.3rem);
		height: clamp(2rem, 9.5vw, 2.3rem);
		flex-shrink: 0;
	}

@keyframes rf-bar-in-b-it8x2h3vw4 {
	from { opacity: 0; transform: translateY(1rem) scale(.9); }
}

.rf-bar-score[b-it8x2h3vw4] {
	display: flex;
	align-items: baseline;
	line-height: 1;
	font-weight: 500;
	font-size: 1rem;
	color: var(--sky);
	white-space: nowrap;
}

	.rf-bar-score i[b-it8x2h3vw4] {
		font-style: normal;
		font-size: .75rem;
		color: var(--ink-muted);
	}

.rf-bar-trail[b-it8x2h3vw4] {
	width: .6rem;
	height: 0;
	border-top: 2px dotted var(--sky);
	flex-shrink: 0;
}

/* One section, popped up over the bar (search drops from the top instead - see the markup). Its body
   scrolls inside it, so a long one (location) never runs under the navbar or the bar. */
.rf-pop[b-it8x2h3vw4] {
	position: fixed;
	z-index: 1022;
	left: 50%;
	translate: -50% 0;
	bottom: calc(var(--rf-bar-bottom) + var(--rf-bar-h) + .6rem);
	width: min(26rem, calc(100vw - 1.5rem));
	max-height: calc(100dvh - var(--ark-nav-h, 4.5rem) - var(--rf-bar-bottom) - var(--rf-bar-h) - 1.4rem);
	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: bottom center;
	animation: rf-pop-up-b-it8x2h3vw4 .35s var(--spring);
}

	.rf-pop-top[b-it8x2h3vw4] {
		bottom: auto;
		top: calc(var(--ark-nav-h, 4.5rem) + .75rem);
		transform-origin: top center;
		animation-name: rf-pop-down-b-it8x2h3vw4;
	}

@keyframes rf-pop-up-b-it8x2h3vw4 {
	from { opacity: 0; transform: translateY(12px) scale(.94); }
}

@keyframes rf-pop-down-b-it8x2h3vw4 {
	from { opacity: 0; transform: translateY(-12px) scale(.94); }
}

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

@media (prefers-reduced-motion: reduce) {
	.rf-card[b-it8x2h3vw4], .rf-rail[b-it8x2h3vw4], .rf-flyout[b-it8x2h3vw4], .rf-bar[b-it8x2h3vw4], .rf-pop[b-it8x2h3vw4], .rf-scrim[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] {
		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;
}