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

/* Fixed, equal columns: the coins sit evenly spaced whatever the labels say. A label longer than its
   column overflows evenly into the gaps on both sides, still centered under its coin. English labels
   run longer (from "Contact" to "Recommendations"), so English gets wider columns. */
.ark-foot-tokens[b-5vqdpw14xu] {
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-columns: 4rem;
	align-items: start;
	gap: 1.25rem;
}

	.ark-foot-tokens:lang(en)[b-5vqdpw14xu] {
		grid-auto-columns: 5.5rem;
	}

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

/* ---------- Narrower desktops ---------- */

/* The bar keeps to one line, so it never grows taller than the room main leaves for it (app.css): as
   the width runs out the stubs drop their line, then their titles, then the coins their labels.
   English, with its longer words, a step earlier each time. Whatever is left over still shrinks the
   stubs rather than wrapping them. */
@media (min-width: 767px) {
	.ark-foot-title[b-5vqdpw14xu] {
		white-space: nowrap;
	}

	.ark-foot-credits[b-5vqdpw14xu],
	.ark-stub[b-5vqdpw14xu] {
		min-width: 0;
	}

	.ark-stub-text b[b-5vqdpw14xu] {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ark-stub-text small[b-5vqdpw14xu] {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
}

@media (min-width: 767px) and (max-width: 1439.98px) {
	.ark-foot:lang(en) .ark-stub-text small[b-5vqdpw14xu] {
		display: none;
	}
}

@media (min-width: 767px) and (max-width: 1299.98px) {
	.ark-foot:lang(en) .ark-stub-text[b-5vqdpw14xu] {
		display: none;
	}
}

@media (min-width: 767px) and (max-width: 1279.98px) {
	.ark-stub-text small[b-5vqdpw14xu] {
		display: none;
	}
}

@media (min-width: 767px) and (max-width: 1079.98px) {
	.ark-stub-text[b-5vqdpw14xu] {
		display: none;
	}

	.ark-foot:lang(en) .ark-foot-bar[b-5vqdpw14xu] {
		gap: 1.25rem;
	}

	.ark-foot-tokens:lang(en)[b-5vqdpw14xu] {
		grid-auto-columns: auto;
		gap: .75rem;
	}

	.ark-foot:lang(en) .ark-token-label[b-5vqdpw14xu] {
		display: none;
	}
}

@media (min-width: 767px) and (max-width: 949.98px) {
	.ark-foot-bar[b-5vqdpw14xu] {
		gap: 1.25rem;
	}

	.ark-foot-tokens[b-5vqdpw14xu] {
		grid-auto-columns: auto;
		gap: .75rem;
	}

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

/* ---------- Banner (phone) ---------- */

/* On desktop the navbar has it (hidden here, its lazy image isn't even fetched). */
.ark-foot-ad[b-5vqdpw14xu] {
	display: none;
}

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

@media (max-width: 766.98px) {
	/* Centered at the end of the page: moved up 2.5rem into the room main leaves for the fixed footer
	   (app.css), with 4.5rem under it instead (its margin plus that 2.5rem) - clear of the bar (3.375rem)
	   by about 1rem. Moved with top, not a negative margin: main is a growing flex item, and would
	   just grow back into one. */
	.ark-foot-ad[b-5vqdpw14xu] {
		position: relative;
		top: -2.5rem;
		display: flex;
		justify-content: center;
		margin-bottom: 2rem;
		padding-inline: 1rem;
	}

	/* The catalogue's filter bar floats just above the footer (RoomFilters: 3.75rem up, 3.1rem tall) -
	   clear of that too (8rem under the banner), so the end of the page doesn't leave it under the bar. */
	:root:has(.rf-bar) .ark-foot-ad[b-5vqdpw14xu] {
		margin-bottom: 5.5rem;
	}

	.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;
	}

	/* No labels on a phone: each column is just its coin, in either language. */
	.ark-foot-tokens[b-5vqdpw14xu],
	.ark-foot-tokens:lang(en)[b-5vqdpw14xu] {
		margin-inline-start: auto;
		grid-auto-columns: 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: 4s; /* 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) ---------- */

/* The bubble's room, kept at the bubble's widest (its max-width plus its margin) whatever it says: a
   rotating line of a new length would otherwise move everything centered in the bar beside it. It may
   still give way when the bar is tight. */
.ark-bubble-slot[b-0vysx08lmj] {
	/* A width, not a flex-basis: the brand sizes itself from its content, and an empty slot's
	   flex-basis wouldn't count toward that. */
	width: calc(min(300px, 26vw) + 12px);
	flex: 0 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
}

.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;
}

/* ---------- Banner (desktop) ---------- */

/* Takes all the room between the brand (with its speech bubble) and the player card, and centers the
   banner in it. A size container, so the banner shows only while that room fits it: a long bubble or a
   wide player card hides the banner rather than squeezing the bar. */
.ark-ad[b-0vysx08lmj] {
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	container-type: inline-size;
	--ad-h: calc(var(--bar-h) - .5rem); /* AdBanner's height - a little air above and below: 56px of the 64px bar */
}

/* Banner (262px at that height) plus a margin each side. */
@container (max-width: 18.5rem) {
	.ark-ad[b-0vysx08lmj]  .ark-ad-link {
		display: none;
	}
}

/* ---------- 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] {
	position: relative;
	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 eye-catcher: the chip shows only to visitors who aren't signed in, and now and then a soft Sky halo
	   ripples out from it and fades - once every few seconds, its own layer, so hover's lift and shadow stay
	   as they are. Still with reduced motion. */
	.ark-login[b-0vysx08lmj]::after {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: inherit;
		pointer-events: none;
	}

@media (prefers-reduced-motion: no-preference) {
	.ark-login[b-0vysx08lmj]::after {
		animation: ark-login-halo-b-0vysx08lmj 6s ease-out 2.5s infinite;
	}
}

@keyframes ark-login-halo-b-0vysx08lmj {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--sky) 45%, transparent);
	}

	22%, 100% {
		box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--sky) 0%, transparent);
	}
}

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

/* What's new: a white coin with a Vivid Blue sparkle beside the token. Until this edition of the story has been
   seen it carries a dot and the sparkle twinkles now and then. */
.ark-news[b-0vysx08lmj] {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--sky);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	color: var(--voice);
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	transition: transform .45s var(--spring), box-shadow .2s;
}

	.ark-news svg[b-0vysx08lmj] {
		width: 1.35rem;
		height: 1.35rem;
		fill: currentColor;
	}

	.ark-news:hover[b-0vysx08lmj],
	.ark-news:focus-visible[b-0vysx08lmj] {
		transform: scale(1.08) rotate(-10deg);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	}

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

	.ark-news.unseen[b-0vysx08lmj]::after {
		content: "";
		position: absolute;
		top: -.15rem;
		inset-inline-end: -.15rem;
		width: .75rem;
		height: .75rem;
		border-radius: 50%;
		background: var(--voice);
		border: 2px solid #fff;
		animation: ark-news-dot-b-0vysx08lmj 1.8s ease-in-out infinite;
	}

	.ark-news.unseen svg[b-0vysx08lmj] {
		animation: ark-news-twinkle-b-0vysx08lmj 3.2s var(--spring) 1s infinite;
	}

@keyframes ark-news-dot-b-0vysx08lmj {
	50% {
		scale: 1.25;
	}
}

@keyframes ark-news-twinkle-b-0vysx08lmj {
	0%, 70%, 100% {
		scale: 1;
		rotate: 0deg;
	}

	80% {
		scale: 1.25;
		rotate: 20deg;
	}
}

/* ---------- 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) ---------- */

/* What's new on a phone: a small chip at the end of the second row, where the bar's coin has no room. Its
   tap area reaches a little past its edges (::before), the row being only 1.75rem tall. */
.ark-news-chip[b-0vysx08lmj] {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	height: 1.3rem;
	margin-inline-start: .5rem;
	padding-block: 0;
	padding-inline: .4rem .55rem;
	border: 1px solid var(--sky);
	border-radius: 999px;
	background: #fff;
	color: var(--voice);
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: .75rem;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .3s var(--spring);
}

	.ark-news-chip[b-0vysx08lmj]::before {
		content: "";
		position: absolute;
		inset: -.3rem -.25rem;
	}

	.ark-news-chip svg[b-0vysx08lmj] {
		width: .85rem;
		height: .85rem;
		fill: currentColor;
	}

	.ark-news-chip:active[b-0vysx08lmj] {
		transform: scale(.94);
	}

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

	.ark-news-chip.unseen[b-0vysx08lmj]::after {
		content: "";
		position: absolute;
		top: -.25rem;
		inset-inline-end: -.2rem;
		width: .55rem;
		height: .55rem;
		border-radius: 50%;
		background: var(--voice);
		border: 1.5px solid #fff;
		animation: ark-news-dot-b-0vysx08lmj 1.8s ease-in-out infinite;
	}

	.ark-news-chip.unseen svg[b-0vysx08lmj] {
		animation: ark-news-twinkle-b-0vysx08lmj 3.2s var(--spring) 1s infinite;
	}

.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],
	.ark-bubble-slot[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;
	}

	/* No banner up here (hidden, its lazy image isn't even fetched) - a phone gets it above the footer. */
	.ark-ad[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;
	}

	/* No room for it in the bar: the second row's chip (.ark-news-chip) stands in for it. */
	.ark-end .ark-news[b-0vysx08lmj] {
		display: none;
	}

	.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-news[b-0vysx08lmj],
	.ark-news[b-0vysx08lmj]::after,
	.ark-news svg[b-0vysx08lmj],
	.ark-news-chip[b-0vysx08lmj],
	.ark-news-chip[b-0vysx08lmj]::after,
	.ark-news-chip svg[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;

}


/* Escape Rooms tab: the rooms list as wide as its content, the room's details beside it - below it when
   the screen has no room for both. */
.rooms-layout[b-fvn0vdpxcm] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.rooms-list[b-fvn0vdpxcm] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Radzen lays a grid's columns out at fixed widths; here each column takes its content's width. */
.rooms-list[b-fvn0vdpxcm]  .rz-data-grid {
    width: fit-content;
    max-width: 100%;
}

.rooms-list[b-fvn0vdpxcm]  .rz-grid-table {
    table-layout: auto;
    width: auto;
}

/* The detection report wraps rather than widening the list to its longest line. */
.rooms-list-head details[b-fvn0vdpxcm] {
    max-width: 40rem;
}

.rooms-list[b-fvn0vdpxcm]  tr[data-viewed] > td {
    background-color: color-mix(in srgb, var(--text-primary) 14%, var(--md-bg));
}

.room-actions[b-fvn0vdpxcm] {
    display: flex;
    flex-direction: row;
    gap: .25rem;
}

.room-details[b-fvn0vdpxcm] {
    flex: 1 1 28rem;
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--md-bg);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.room-details-head[b-fvn0vdpxcm] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--md-bg);
    border-block-end: 1px solid var(--md-stroke);
}

.room-details-head[b-fvn0vdpxcm]  .room-details-icon {
    color: var(--text-primary);
}

.room-details-title[b-fvn0vdpxcm] {
    flex: 1;
    min-width: 0;
    color: var(--md-muted);
}

.room-details-title h2[b-fvn0vdpxcm] {
    margin: 0;
    font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--md-text);
    overflow-wrap: anywhere;
}

@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/Admin/SpellingTab.razor.rz.scp.css */
/* Spelling tab: a header with the counts and filters, then a card per room with its words. */
.spelling[b-9yyplweaat] {
    max-width: 64rem;
    padding-block: .5rem 2rem;
    color: var(--md-text);
}

.spelling-head[b-9yyplweaat] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 0;
    margin-block-end: .75rem;
    border-block-end: 1px solid var(--md-stroke);
}

.spelling-summary h2[b-9yyplweaat] {
    margin: 0;
    font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.2;
}

.spelling-summary span[b-9yyplweaat] {
    color: var(--md-muted);
    font-size: .875rem;
}

.spelling-filters[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.spelling-search[b-9yyplweaat] {
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 22rem;
    padding: .375rem .75rem;
    border: 1px solid var(--md-stroke);
    border-radius: var(--md-radius);
    background: var(--md-bg);
    color: var(--md-text);
    font: inherit;
    font-size: .875rem;
}

.spelling-search:focus-visible[b-9yyplweaat],
.spelling-editor textarea:focus-visible[b-9yyplweaat] {
    outline: none;
    border-color: var(--md-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-focus) 20%, transparent);
}

.spelling-error[b-9yyplweaat] {
    margin: 0;
    color: var(--md-error);
}

.spelling-words summary[b-9yyplweaat] {
    cursor: pointer;
    color: var(--md-muted);
    font-size: .875rem;
}

.spelling-words ul[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 9rem;
    overflow: auto;
}

.spelling-words li[b-9yyplweaat] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .25rem .125rem .5rem;
    border: 1px solid var(--md-stroke);
    border-radius: 999px;
    font-size: .875rem;
}

.spelling-words-room[b-9yyplweaat] {
    color: var(--md-muted);
    font-size: .75rem;
}

.spelling-room[b-9yyplweaat] {
    margin-block-end: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--md-stroke);
    border-radius: 12px;
    background: var(--md-bg);
}

.spelling-room h3[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
}

.spelling-company[b-9yyplweaat] {
    color: var(--md-muted);
    font-weight: 400;
    font-size: .875rem;
}

.spelling-issue[b-9yyplweaat] {
    padding-block: .625rem;
}

.spelling-issue + .spelling-issue[b-9yyplweaat] {
    border-block-start: 1px solid color-mix(in srgb, var(--md-stroke) 60%, transparent);
}

.spelling-line[b-9yyplweaat] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.spelling-lang[b-9yyplweaat] {
    flex: none;
    min-width: 2rem;
    padding: 0 .25rem;
    border: 1px solid var(--md-stroke);
    border-radius: 4px;
    color: var(--md-muted);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

.spelling-snippet[b-9yyplweaat] {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* The word, the way spell checkers mark one. */
.spelling-snippet mark[b-9yyplweaat] {
    padding: 0 .1em;
    border-radius: 3px;
    background: color-mix(in srgb, var(--md-error) 10%, transparent);
    color: inherit;
    text-decoration: underline wavy var(--md-error);
    text-decoration-skip-ink: none;
    text-underline-offset: .2em;
}

.spelling-actions[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-block-start: .375rem;
    padding-inline-start: 2.5rem;
}

.spelling-spacer[b-9yyplweaat] {
    flex: 1;
}

.spelling-muted[b-9yyplweaat] {
    color: var(--md-muted);
    font-size: .875rem;
}

.spelling-suggestion[b-9yyplweaat] {
    padding: .125rem .625rem;
    border: 1px solid var(--md-stroke);
    border-radius: 999px;
    background: var(--md-bg);
    color: var(--md-text);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.spelling-suggestion:hover:not(:disabled)[b-9yyplweaat] {
    border-color: var(--md-focus);
    color: var(--md-focus);
}

.spelling-action[b-9yyplweaat],
.spelling-icon[b-9yyplweaat] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .375rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--md-muted);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.spelling-action[b-9yyplweaat]  .rzi,
.spelling-icon[b-9yyplweaat]  .rzi {
    font-size: 1rem;
}

.spelling-action:hover:not(:disabled)[b-9yyplweaat],
.spelling-icon:hover:not(:disabled)[b-9yyplweaat] {
    background: color-mix(in srgb, var(--md-text) 7%, transparent);
    color: var(--md-text);
}

.spelling-icon[b-9yyplweaat] {
    padding: .125rem;
    border-radius: 50%;
}

.spelling-suggestion:disabled[b-9yyplweaat],
.spelling-action:disabled[b-9yyplweaat],
.spelling-icon:disabled[b-9yyplweaat] {
    opacity: .5;
    cursor: default;
}

.spelling-suggestion:focus-visible[b-9yyplweaat],
.spelling-action:focus-visible[b-9yyplweaat],
.spelling-icon:focus-visible[b-9yyplweaat] {
    outline: 2px solid var(--md-focus);
    outline-offset: 1px;
}

.spelling-editor[b-9yyplweaat] {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-block-start: .5rem;
    padding-inline-start: 2.5rem;
}

.spelling-editor textarea[b-9yyplweaat] {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--md-stroke);
    border-radius: var(--md-radius);
    background: var(--md-bg);
    color: var(--md-text);
    font: inherit;
    line-height: 1.6;
    resize: vertical;
}

.spelling-editor-actions[b-9yyplweaat] {
    display: flex;
    gap: .375rem;
}

@media (max-width: 575.98px) {
    .spelling-room[b-9yyplweaat] {
        padding: .625rem .75rem;
    }

    .spelling-actions[b-9yyplweaat],
    .spelling-editor[b-9yyplweaat] {
        padding-inline-start: 0;
    }
}

/* Questionable descriptions: above the spelling words, each with its reasons, its text (players' comments marked)
   and what can be done with it. */
.spelling-doubts[b-9yyplweaat] {
    margin-block-end: 1rem;
    padding: .75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--md-error) 35%, var(--md-stroke));
    border-radius: 12px;
    background: color-mix(in srgb, var(--md-error) 4%, var(--md-bg));
}

.spelling-doubts-head[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}

.spelling-doubts-head h3[b-9yyplweaat] {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
}

.spelling-doubts-head p[b-9yyplweaat] {
    margin: .25rem 0 0;
    max-width: 48rem;
    color: var(--md-muted);
    font-size: .875rem;
}

.spelling-doubt[b-9yyplweaat] {
    padding-block: .75rem;
}

.spelling-doubt + .spelling-doubt[b-9yyplweaat] {
    border-block-start: 1px solid color-mix(in srgb, var(--md-stroke) 60%, transparent);
}

.spelling-doubt-title[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
}

.spelling-reasons[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .375rem 0 0;
    padding: 0;
    list-style: none;
}

.spelling-reasons li[b-9yyplweaat] {
    padding: .0625rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--md-error) 12%, var(--md-bg));
    color: color-mix(in srgb, var(--md-error) 80%, var(--md-text));
    font-size: .875rem;
}

.spelling-doubt-text[b-9yyplweaat] {
    max-height: 11rem;
    overflow: auto;
    margin-block-start: .5rem;
    padding: .375rem .75rem;
    border: 1px solid color-mix(in srgb, var(--md-stroke) 70%, transparent);
    border-radius: var(--md-radius);
    background: var(--md-bg);
    line-height: 1.6;
}

.spelling-doubt-text p[b-9yyplweaat] {
    margin: 0 0 .375rem;
}

.spelling-doubt-text p:last-child[b-9yyplweaat] {
    margin-block-end: 0;
}

/* A paragraph of players' comments: what "remove comments" takes out. */
.spelling-doubt-text p.is-comment[b-9yyplweaat] {
    padding-inline-start: .5rem;
    border-inline-start: 3px solid color-mix(in srgb, var(--md-error) 55%, transparent);
    color: var(--md-muted);
}

.spelling-doubt-text:focus-visible[b-9yyplweaat] {
    outline: 2px solid var(--md-focus);
    outline-offset: 1px;
}

.spelling-doubt-editor[b-9yyplweaat] {
    padding-inline-start: 0;
}

.spelling-doubt-actions[b-9yyplweaat] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-block-start: .375rem;
}
/* /Components/Pages/BlurRoomGame.razor.rz.scp.css */
/* "Blurred room". Tokens follow DESIGN.md and the games page: Sky Blue accents, Vivid Blue for what's about
   the player, Fredoka names, Bungee digits (step pips, tries, stat tiles), Lunasima body, soft shadows, the
   overshoot spring gated on reduced motion. The photo sits in a dark frame like a cabinet's screen, a row of
   pips under it filling as it sharpens; beside it (under it on a phone) the question, today's guess tokens, the
   room search and the guesses so far; below, the player's weeks. */

.br[b-8rz752xq50] {
	--br-sky: var(--text-primary, #5ba6da);
	--br-vivid: #1976d2;
	--br-ink: #1f1f1f;
	--br-muted: var(--md-muted, #5f6368);
	--br-forest: #1B5E20;
	--br-ember: #D84315;
	--br-spring: cubic-bezier(.34, 1.56, .64, 1);
	--br-ease: cubic-bezier(.22, 1, .36, 1);
	max-width: 68rem;
	margin-inline: auto;
	padding-block: 1rem 3rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--br-ink);
}

/* The link back, and the week picker at the row's other end. */
.br-top[b-8rz752xq50] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	min-height: 2.25rem;
}

.br-back[b-8rz752xq50] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--br-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	text-decoration: none;
}

	.br-back svg[b-8rz752xq50] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

	.br-back:hover[b-8rz752xq50] {
		text-decoration: underline;
	}

.br-head[b-8rz752xq50] {
	margin-block: .5rem 1.25rem;
}

.br-title[b-8rz752xq50] {
	margin: 0;
	font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.05;
	color: var(--br-sky);
	/* A little out of focus, like the game's photo - a soft halo and a touch of blur, still easy to read.
	   A pointer over it brings it into focus. */
	filter: blur(.7px);
	text-shadow: 0 0 .12em color-mix(in srgb, var(--br-sky) 55%, transparent), 0 0 .3em color-mix(in srgb, var(--br-sky) 30%, transparent);
	transition: filter .45s var(--br-ease), text-shadow .45s var(--br-ease);
}

	.br-title:hover[b-8rz752xq50] {
		filter: none;
		text-shadow: none;
	}

.br-sub bdi[b-8rz752xq50] {
	white-space: nowrap;
}

.br-sub[b-8rz752xq50] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin: .4rem 0 0;
	color: var(--br-muted);
}

/* Between the week and the guesses a day */
.br-sep[b-8rz752xq50] {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--br-muted) 60%, white);
}

.br-cadence[b-8rz752xq50] {
	padding: .1rem .6rem;
	border: 1.5px solid var(--br-sky);
	border-radius: 999px;
	color: var(--br-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

	/* A past week, played late: the chip filled. */
	.br-cadence.br-past[b-8rz752xq50] {
		border-color: var(--br-vivid);
		background: var(--br-vivid);
		color: #fff;
	}

.br-note[b-8rz752xq50] {
	color: var(--br-muted);
}

.br-loading[b-8rz752xq50] {
	position: relative;
	min-height: 18rem;
}

/* ---------- the photo and the guess, side by side ---------- */

.br-play[b-8rz752xq50] {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 1fr);
	align-items: start;
	gap: 1.5rem;
}

.br-frame[b-8rz752xq50] {
	margin: 0;
}

.br-photo[b-8rz752xq50] {
	display: grid;
	place-items: center;
	min-height: 14rem;
	overflow: hidden;
	border-radius: 18px;
	background: #1a1a1a;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

	/* A tall photo letterboxes on the frame's dark ground rather than running down the page. */
	.br-photo img[b-8rz752xq50] {
		display: block;
		width: 100%;
		height: auto;
		max-height: min(70vh, 34rem);
		object-fit: contain;
		animation: br-clear-b-8rz752xq50 .7s var(--br-ease);
	}

/* Found: the photo comes into focus with a little bounce. */
.br-sharp img[b-8rz752xq50] {
	animation: br-focus-b-8rz752xq50 .9s var(--br-spring);
}

.br-meter[b-8rz752xq50] {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: .6rem;
	color: var(--br-muted);
}

.br-pips[b-8rz752xq50] {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	flex: 1;
	gap: 3px;
}

	.br-pips i[b-8rz752xq50] {
		height: .5rem;
		border-radius: 999px;
		background: #eee;
		transition: background .3s;
	}

		.br-pips i.on[b-8rz752xq50] {
			background: var(--br-sky);
		}

/* Found: the bar as buttons - a step each, then the sharp photo. Lit up to the step shown; the steps this
   player went through in Vivid Blue; the one shown ringed. */
.br-pips-open[b-8rz752xq50] {
	gap: 2px;
}

	.br-pips-open button[b-8rz752xq50] {
		height: .7rem;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: #eee;
		cursor: pointer;
		transition: background .2s, transform .35s var(--br-spring);
	}

		.br-pips-open button.on[b-8rz752xq50] {
			background: var(--br-sky);
		}

			.br-pips-open button.on.mine[b-8rz752xq50] {
				background: var(--br-vivid);
			}

		.br-pips-open button.now[b-8rz752xq50] {
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--br-ink);
		}

		.br-pips-open button:hover[b-8rz752xq50] {
			transform: scaleY(1.5);
		}

		.br-pips-open button:focus-visible[b-8rz752xq50],
		.br-sharp-pick:focus-visible[b-8rz752xq50] {
			outline: 2px solid var(--md-focus);
			outline-offset: 2px;
		}

.br-sharp-pick[b-8rz752xq50] {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eee;
	color: #555;
	cursor: pointer;
	transition: background .15s, color .15s;
}

	.br-sharp-pick svg[b-8rz752xq50] {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	.br-sharp-pick.now[b-8rz752xq50],
	.br-sharp-pick:hover[b-8rz752xq50] {
		background: var(--br-vivid);
		color: #fff;
	}

.br-steps-hint[b-8rz752xq50] {
	margin: .35rem 0 0;
	color: var(--br-muted);
}

.br-panel[b-8rz752xq50] {
	padding: 1.25rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.br-ask[b-8rz752xq50] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.br-today[b-8rz752xq50] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .35rem 0 .9rem;
	color: var(--br-muted);
}

/* Today's guesses as arcade tokens: filled while left, hollow once spent. */
.br-tokens[b-8rz752xq50] {
	display: inline-flex;
	gap: .3rem;
}

	.br-tokens i[b-8rz752xq50] {
		width: 1rem;
		height: 1rem;
		border: 2px solid var(--br-vivid);
		border-radius: 50%;
		transition: background .3s, transform .35s var(--br-spring);
	}

		.br-tokens i.on[b-8rz752xq50] {
			background: var(--br-vivid);
			box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
		}

.br-wait[b-8rz752xq50] {
	margin: 0;
	padding: .75rem 1rem;
	border-radius: 12px;
	background: #f7f7f7;
}

.br-go:focus-visible[b-8rz752xq50] {
	outline: 2px solid var(--md-focus);
	outline-offset: 2px;
}

.br-verdict[b-8rz752xq50] {
	margin: .75rem 0 0;
	color: var(--br-vivid);
	animation: br-pop-b-8rz752xq50 .4s var(--br-spring);
}

.br-error[b-8rz752xq50] {
	margin: .75rem 0 0;
	color: var(--md-error);
}

/* ---------- found ---------- */

.br-won[b-8rz752xq50] {
	text-align: center;
	animation: br-pop-b-8rz752xq50 .5s var(--br-spring);
}

	.br-won p[b-8rz752xq50] {
		margin: 0;
	}

.br-won-title[b-8rz752xq50] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--br-vivid);
}

.br-won-room[b-8rz752xq50] {
	display: grid;
	margin-top: .25rem !important;
}

	.br-won-room a[b-8rz752xq50] {
		color: var(--br-ink);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: 1.25rem;
	}

.br-won-tries[b-8rz752xq50] {
	margin-top: .5rem !important;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

.br-won-room small[b-8rz752xq50] {
	color: var(--br-muted);
}

.br-won-next[b-8rz752xq50] {
	margin-top: .25rem !important;
	color: var(--br-muted);
}

	.br-won-next a[b-8rz752xq50] {
		color: var(--br-vivid);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

/* Out of guesses: the room shown all the same, the title in Ember. */
.br-lost .br-won-title[b-8rz752xq50] {
	color: var(--br-ember);
}

/* ---------- signed out ---------- */

.br-signin[b-8rz752xq50] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.br-signin p[b-8rz752xq50] {
		margin: 0;
	}

.br-go[b-8rz752xq50] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--br-sky) 60%, white), var(--br-sky));
	color: var(--br-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.br-go svg[b-8rz752xq50] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

/* ---------- narrower: the guess under the photo ---------- */

@media (max-width: 859.98px) {
	.br-play[b-8rz752xq50] {
		grid-template-columns: minmax(0, 1fr);
	}
}

@keyframes br-clear-b-8rz752xq50 {
	from {
		opacity: .55;
		filter: blur(6px);
	}
}

@keyframes br-focus-b-8rz752xq50 {
	from {
		transform: scale(1.06);
		filter: blur(8px);
	}
}

@keyframes br-pop-b-8rz752xq50 {
	from {
		transform: scale(.85);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.br-photo img[b-8rz752xq50],
	.br-sharp img[b-8rz752xq50],
	.br-verdict[b-8rz752xq50],
	.br-won[b-8rz752xq50] {
		animation: none;
	}

	.br-title[b-8rz752xq50],
	.br-pips-open button[b-8rz752xq50],
	.br-tokens i[b-8rz752xq50] {
		transition: none;
	}
}
/* /Components/Pages/CipherGame.razor.rz.scp.css */
/* "Coded description". Tokens follow DESIGN.md and the other games: Sky Blue accents, Vivid Blue for what's about
   the player, Fredoka letters and names, Lunasima body, soft shadows, the overshoot spring gated on reduced motion.
   The code sits in a dark cabinet like Blurred room's photo: each letter a box over its code letter, the picked
   code letter lit in Sky Blue in all its places; under it the controls and the Hebrew keyboard, kept in reach at the
   bottom of the screen (above the site's footer) while the board is in view. The board takes the page's width; the
   room question, as in Blurred room, comes under it. */

.cg[b-hijalefabe] {
	--cg-sky: var(--text-primary, #5ba6da);
	--cg-vivid: #1976d2;
	--cg-ink: #1f1f1f;
	--cg-muted: var(--md-muted, #5f6368);
	--cg-ember: #D84315;
	/* The dark cabinet (Void) and what reads on it - white toned down into it - with Ember lightened to read there. */
	--cg-void: #1a1a1a;
	--cg-on-void: color-mix(in srgb, #fff 90%, var(--cg-void));
	--cg-on-void-soft: color-mix(in srgb, #fff 78%, var(--cg-void));
	--cg-dim: color-mix(in srgb, #fff 52%, var(--cg-void));
	--cg-key: color-mix(in srgb, #fff 11%, var(--cg-void));
	--cg-ember-lit: color-mix(in srgb, var(--cg-ember) 55%, white);
	/* A revealed letter's shade: Forest - a letter known to be right - lightened to read on the cabinet. */
	--cg-forest: #1B5E20;
	--cg-forest-lit: color-mix(in srgb, var(--cg-forest) 35%, white);
	--cg-spring: cubic-bezier(.34, 1.56, .64, 1);
	--cg-ease: cubic-bezier(.22, 1, .36, 1);
	/* A letter's box: its width and height. */
	--cg-w: 1.85rem;
	--cg-h: 2.15rem;
	max-width: 68rem;
	margin-inline: auto;
	padding-block: 1rem 3rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--cg-ink);
}

/* The link back, and the week picker at the row's other end. */
.cg-top[b-hijalefabe] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	min-height: 2.25rem;
}

.cg-back[b-hijalefabe] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--cg-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	text-decoration: none;
}

	.cg-back svg[b-hijalefabe] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

	.cg-back:hover[b-hijalefabe] {
		text-decoration: underline;
	}

.cg-head[b-hijalefabe] {
	margin-block: .5rem 1.25rem;
}

/* The name as the board writes it: each letter over a line, like a box waiting for its letter. */
.cg-title[b-hijalefabe] {
	margin: 0;
	font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.15;
	color: var(--cg-sky);
}

	.cg-title > span[b-hijalefabe] {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0 .35em;
	}

.cg-title-word[b-hijalefabe] {
	display: inline-flex;
	gap: .08em;
}

/* Each letter a box of one width, as on the board; in code (data-code, set by site.js) the code letter is drawn over
   it, toned down; the cursor (data-cursor) fills the box being typed, and a letter cracked pops. */
.cg-title-letter[b-hijalefabe] {
	position: relative;
	display: inline-block;
	min-width: .72em;
	padding-inline: .03em;
	border-bottom: .06em solid color-mix(in srgb, var(--cg-sky) 70%, transparent);
	text-align: center;
	transition: background .12s, border-color .12s;
}

	.cg-title-letter[data-code][b-hijalefabe] {
		color: transparent;
	}

		.cg-title-letter[data-code][b-hijalefabe]::after {
			content: attr(data-code);
			position: absolute;
			inset: 0;
			color: color-mix(in srgb, var(--cg-sky) 45%, var(--cg-muted));
			text-align: center;
		}

	.cg-title-letter[data-lit][b-hijalefabe] {
		animation: cg-crack-b-hijalefabe .45s var(--cg-spring);
	}

	/* The cursor, as on the board: the letter being typed in a filled Sky Blue box, in Ink. */
	.cg-title-letter[data-cursor][b-hijalefabe] {
		border-radius: .12em .12em 0 0;
		border-bottom-color: var(--cg-sky);
		background: var(--cg-sky);
	}

		.cg-title-letter[data-cursor]:not([data-code])[b-hijalefabe],
		.cg-title-letter[data-cursor][data-code][b-hijalefabe]::after {
			color: var(--cg-ink);
		}

.cg-sub[b-hijalefabe] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin: .4rem 0 0;
	color: var(--cg-muted);
}

	.cg-sub bdi[b-hijalefabe] {
		white-space: nowrap;
	}

/* Between the week and the guesses a day */
.cg-sep[b-hijalefabe] {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--cg-muted) 60%, white);
}

.cg-cadence[b-hijalefabe] {
	padding: .1rem .6rem;
	border: 1.5px solid var(--cg-sky);
	border-radius: 999px;
	color: var(--cg-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

	/* A past week, played late: the chip filled. */
	.cg-cadence.cg-past[b-hijalefabe] {
		border-color: var(--cg-vivid);
		background: var(--cg-vivid);
		color: #fff;
	}

.cg-note[b-hijalefabe] {
	color: var(--cg-muted);
}

.cg-loading[b-hijalefabe] {
	position: relative;
	min-height: 18rem;
}

/* ---------- the code, then the guess under it ---------- */

.cg-play[b-hijalefabe] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.cg-machine[b-hijalefabe] {
	padding: 1rem 1rem 1.1rem;
	border-radius: 18px;
	background: var(--cg-void);
	color: var(--cg-on-void);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	outline: none;
}

.cg-state[b-hijalefabe] {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .5rem;
	margin: 0 0 1rem;
	color: var(--cg-on-void-soft);
}

	.cg-state b[b-hijalefabe] {
		color: var(--cg-sky);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
	}

.cg-cracked .cg-state b[b-hijalefabe] {
	animation: cg-pop-b-hijalefabe .5s var(--cg-spring);
}

/* The text: words wrap whole, well apart - wider still after a stop or a comma; each letter a box (the player's
   letter) over its code letter. */
.cg-board[b-hijalefabe] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .75rem 1.9rem;
	font-family: 'Fredoka', system-ui, sans-serif;
}

.cg-word[b-hijalefabe] {
	display: inline-flex;
	align-items: flex-start;
	gap: 3px;
}

.cg-pause[b-hijalefabe] {
	margin-inline-end: .9rem;
}

.cg-cell[b-hijalefabe] {
	display: grid;
	/* One column the cell's width, so every box is the same width whatever the letter in it. */
	grid-template-columns: 100%;
	justify-items: center;
	gap: 4px;
	width: var(--cg-w);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.cg-guess[b-hijalefabe] {
	display: grid;
	place-items: center;
	width: 100%;
	height: var(--cg-h);
	border-bottom: 2px solid rgba(255, 255, 255, .35);
	border-radius: 6px 6px 0 0;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
	transition: background .15s, border-color .15s, color .15s;
}

.cg-code[b-hijalefabe] {
	color: var(--cg-dim);
	font-size: .875rem;
	line-height: 1;
	transition: color .15s;
}

.cg-cell:hover .cg-guess[b-hijalefabe] {
	background: rgba(255, 255, 255, .08);
}

/* The picked code letter, in all its places; the cell picked, filled. */
.cg-cell.on .cg-guess[b-hijalefabe] {
	border-color: var(--cg-sky);
	background: color-mix(in srgb, var(--cg-sky) 22%, transparent);
}

.cg-cell.on .cg-code[b-hijalefabe] {
	color: var(--cg-sky);
}

.cg-cell.now .cg-guess[b-hijalefabe] {
	background: var(--cg-sky);
	color: var(--cg-ink);
}

.cg-cell:focus-visible[b-hijalefabe] {
	outline: 2px solid var(--md-focus, #1976d2);
	outline-offset: 2px;
	border-radius: 6px;
}

.cg-cell:disabled[b-hijalefabe] {
	cursor: default;
}

	.cg-cell:disabled:hover .cg-guess[b-hijalefabe] {
		background: none;
	}

/* Marks as written (punctuation, digits, Latin letters - a run of them as one, so the browser orders it): level with
   the letters. */
.cg-glyph .cg-guess[b-hijalefabe] {
	width: auto;
	padding-inline: 1px;
	white-space: pre;
	border: 0;
	color: var(--cg-on-void-soft);
	font-weight: 500;
}

/* A hidden name: a striped box with a question mark, and under it - where code letters sit - whose name it is. */
.cg-hidden[b-hijalefabe] {
	display: grid;
	justify-items: center;
	gap: 4px;
}

.cg-hidden-of[b-hijalefabe] {
	color: color-mix(in srgb, var(--cg-sky) 70%, var(--cg-void));
	font-size: .75rem;
	line-height: 1;
	white-space: nowrap;
}

.cg-hidden .cg-guess[b-hijalefabe] {
	width: calc(var(--cg-w) * 1.6);
	border: 0;
	border-radius: 6px;
	background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .13) 0 5px, transparent 5px 10px);
	color: var(--cg-sky);
}

.cg-hidden-note[b-hijalefabe] {
	margin: .9rem 0 0;
	color: var(--cg-dim);
	font-size: .875rem;
}

/* Cracked (or the week over): each hidden name and its "?" take turns in one box as wide as the name, flipping over
   between them; the names a little apart from each other. */
.cg-named .cg-guess[b-hijalefabe] {
	width: auto;
	min-width: calc(var(--cg-w) * 1.6);
	padding-inline: .45rem;
	perspective: 20rem;
}

	.cg-named .cg-guess > *[b-hijalefabe] {
		grid-area: 1 / 1;
		animation: 5s var(--cg-ease) infinite both;
		animation-delay: calc(var(--i) * .6s);
		backface-visibility: hidden;
	}

.cg-flip-q[b-hijalefabe] {
	animation-name: cg-flip-q-b-hijalefabe;
}

.cg-flip-name[b-hijalefabe] {
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	animation-name: cg-flip-name-b-hijalefabe;
}

/* Cracked: the letters in Sky Blue, a wave running through them. */
.cg-cracked .cg-guess[b-hijalefabe] {
	color: color-mix(in srgb, var(--cg-sky) 55%, white);
	border-color: var(--cg-sky);
}

.cg-cracked .cg-cell .cg-guess[b-hijalefabe] {
	animation: cg-wave-b-hijalefabe .6s var(--cg-spring) both;
	animation-delay: calc(min(var(--i), 80) * 18ms);
}

.cg-cell.fresh .cg-guess[b-hijalefabe] {
	animation: cg-crack-b-hijalefabe .5s var(--cg-spring);
}

/* The week over, the code not cracked: the solution, the player's wrong letters' boxes in Ember. */
.cg-shown .cg-cell .cg-guess[b-hijalefabe] {
	color: var(--cg-on-void-soft);
}

.cg-cell.wrong .cg-guess[b-hijalefabe] {
	border-color: var(--cg-ember-lit);
	background: color-mix(in srgb, var(--cg-ember) 25%, transparent);
}

/* A letter revealed - by a hint, or for finding the room first - pinned, in its own shade: a Forest box, its letter
   light green, while playing, cracked or over (after the rules above, which it outranks); picked, it still lights up. */
.cg-cell.hint .cg-guess[b-hijalefabe] {
	border-bottom-color: var(--cg-forest-lit);
	background: color-mix(in srgb, var(--cg-forest) 55%, var(--cg-void));
	color: var(--cg-forest-lit);
}

.cg-cell.hint .cg-code[b-hijalefabe] {
	color: var(--cg-forest-lit);
}

.cg-cell.hint.now .cg-guess[b-hijalefabe] {
	box-shadow: inset 0 0 0 2px var(--cg-sky);
}

.cg-hint-note[b-hijalefabe] {
	margin: .5rem 0 0;
	color: var(--cg-forest-lit);
	font-size: .875rem;
}

/* ---------- the controls and the keyboard ---------- */

/* The controls and the keyboard, across the cabinet: they stay at the bottom of the screen, above the site's footer
   (its height, --cg-foot, measured by site.js), while the board runs under them. */
.cg-keys[b-hijalefabe] {
	position: sticky;
	bottom: var(--cg-foot, 4.6rem);
	z-index: 5;
	margin: 1.1rem -1rem 0;
	padding: .65rem 1rem .5rem;
	border-top: 1px solid color-mix(in srgb, #fff 8%, var(--cg-void));
	background: var(--cg-void);
}

	.cg-keys > *[b-hijalefabe] {
		max-width: 36rem;
		margin-inline: auto;
	}

.cg-controls[b-hijalefabe] {
	display: flex;
	gap: .5rem;
	margin-bottom: .6rem;
}

.cg-ctl[b-hijalefabe] {
	display: inline-grid;
	place-items: center;
	min-width: 3rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1.5px solid color-mix(in srgb, var(--cg-sky) 60%, transparent);
	border-radius: 10px;
	background: transparent;
	color: var(--cg-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

	.cg-ctl svg[b-hijalefabe] {
		width: 1.35rem;
		height: 1.35rem;
		fill: currentColor;
	}

	.cg-ctl:hover:not(:disabled)[b-hijalefabe] {
		background: color-mix(in srgb, var(--cg-sky) 18%, transparent);
	}

	.cg-ctl:disabled[b-hijalefabe] {
		opacity: .4;
		cursor: default;
	}

/* The hint: a bulb, the word and how many are left. */
.cg-hint[b-hijalefabe] {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

	.cg-hint b[b-hijalefabe] {
		font-weight: 500;
		opacity: .8;
	}

.cg-clear[b-hijalefabe] {
	margin-inline-start: auto;
	border-color: color-mix(in srgb, var(--cg-ember-lit) 60%, transparent);
	color: var(--cg-ember-lit);
}

	.cg-clear:hover:not(:disabled)[b-hijalefabe] {
		background: color-mix(in srgb, var(--cg-ember) 22%, transparent);
	}

	/* Asked once: the next press clears. */
	.cg-clear.sure[b-hijalefabe] {
		border-color: var(--cg-ember);
		background: var(--cg-ember);
		color: #fff;
		animation: cg-pop-b-hijalefabe .3s var(--cg-spring);
	}

.cg-keyboard[b-hijalefabe] {
	display: grid;
	gap: .4rem;
}

.cg-row[b-hijalefabe] {
	display: flex;
	justify-content: center;
	gap: .35rem;
}

.cg-key[b-hijalefabe] {
	position: relative;
	flex: 0 1 2.7rem;
	min-width: 0;
	height: 2.8rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--cg-key);
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .45);
	cursor: pointer;
	transition: background .15s, color .15s, transform .12s;
}

	.cg-key:hover:not(:disabled)[b-hijalefabe] {
		background: color-mix(in srgb, #fff 17%, var(--cg-void));
	}

	.cg-key:active:not(:disabled)[b-hijalefabe] {
		transform: translateY(2px);
		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .45);
	}

	.cg-key:focus-visible[b-hijalefabe],
	.cg-ctl:focus-visible[b-hijalefabe] {
		outline: 2px solid var(--md-focus, #1976d2);
		outline-offset: 2px;
	}

	/* A letter set already: dimmed, with a Sky Blue dot - typing it again moves it here. */
	.cg-key.used[b-hijalefabe] {
		background: color-mix(in srgb, #fff 4%, var(--cg-void));
		color: color-mix(in srgb, #fff 38%, var(--cg-void));
	}

		.cg-key.used[b-hijalefabe]::after {
			content: "";
			position: absolute;
			inset-inline-start: 50%;
			bottom: .3rem;
			width: 4px;
			height: 4px;
			margin-inline-start: -2px;
			border-radius: 50%;
			background: var(--cg-sky);
		}

	/* A letter a hint pinned: it can't move. */
	.cg-key.pinned[b-hijalefabe] {
		opacity: .45;
	}

	/* The picked code letter's own letter. */
	.cg-key.mine[b-hijalefabe] {
		background: var(--cg-sky);
		color: var(--cg-ink);
	}

		.cg-key.mine[b-hijalefabe]::after {
			background: var(--cg-ink);
		}

	.cg-key:disabled[b-hijalefabe] {
		cursor: default;
		opacity: .6;
	}

.cg-erase[b-hijalefabe] {
	display: grid;
	place-items: center;
	flex-basis: 3.6rem;
	background: color-mix(in srgb, var(--cg-ember) 18%, var(--cg-void));
	color: var(--cg-ember-lit);
}

	.cg-erase svg[b-hijalefabe] {
		width: 1.4rem;
		height: 1.4rem;
		fill: currentColor;
	}

	.cg-erase:hover:not(:disabled)[b-hijalefabe] {
		background: color-mix(in srgb, var(--cg-ember) 28%, var(--cg-void));
	}

/* The week over: the description as written. */
.cg-plain[b-hijalefabe] {
	margin: 1.1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

	.cg-plain figcaption[b-hijalefabe] {
		color: var(--cg-sky);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
	}

	.cg-plain blockquote[b-hijalefabe] {
		margin: .3rem 0 0;
		color: var(--cg-on-void);
		line-height: 1.7;
	}

/* ---------- the room question ---------- */

.cg-panel[b-hijalefabe] {
	padding: 1.25rem;
	max-width: 46rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.cg-ask[b-hijalefabe] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.cg-today[b-hijalefabe] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .35rem 0 .9rem;
	color: var(--cg-muted);
}

/* Today's guesses as arcade tokens: filled while left, hollow once spent. */
.cg-tokens[b-hijalefabe] {
	display: inline-flex;
	gap: .3rem;
}

	.cg-tokens i[b-hijalefabe] {
		width: 1rem;
		height: 1rem;
		border: 2px solid var(--cg-vivid);
		border-radius: 50%;
		transition: background .3s, transform .35s var(--cg-spring);
	}

		.cg-tokens i.on[b-hijalefabe] {
			background: var(--cg-vivid);
			box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
		}

.cg-wait[b-hijalefabe] {
	margin: 0;
	padding: .75rem 1rem;
	border-radius: 12px;
	background: #f7f7f7;
}

.cg-verdict[b-hijalefabe] {
	margin: .75rem 0 0;
	color: var(--cg-vivid);
	animation: cg-pop-b-hijalefabe .4s var(--cg-spring);
}

.cg-error[b-hijalefabe] {
	margin: .75rem 0 0;
	color: var(--md-error);
}

.cg-machine .cg-error[b-hijalefabe] {
	color: var(--cg-ember-lit);
}

/* Found (or out of guesses): the room, its photo when it has one. */
.cg-won[b-hijalefabe] {
	text-align: center;
	animation: cg-pop-b-hijalefabe .5s var(--cg-spring);
}

	.cg-won p[b-hijalefabe] {
		margin: 0;
	}

.cg-won-title[b-hijalefabe] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--cg-vivid);
}

.cg-won-photo[b-hijalefabe] {
	display: block;
	width: 100%;
	max-height: 13rem;
	margin: .65rem 0 .4rem;
	border-radius: 12px;
	object-fit: cover;
}

.cg-won-room[b-hijalefabe] {
	display: grid;
	margin-top: .25rem !important;
}

	.cg-won-room a[b-hijalefabe] {
		color: var(--cg-ink);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: 1.25rem;
	}

	.cg-won-room small[b-hijalefabe] {
		color: var(--cg-muted);
	}

.cg-won-tries[b-hijalefabe] {
	margin-top: .5rem !important;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

.cg-won-next[b-hijalefabe] {
	margin-top: .25rem !important;
	color: var(--cg-muted);
}

/* Found first: one letter of the code given away. */
.cg-won-gift[b-hijalefabe] {
	margin-top: .35rem !important;
	color: var(--cg-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

	.cg-won-next a[b-hijalefabe] {
		color: var(--cg-vivid);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

/* Out of guesses: the room shown all the same, the title in Ember. */
.cg-lost .cg-won-title[b-hijalefabe] {
	color: var(--cg-ember);
}

/* ---------- signed out ---------- */

.cg-signin[b-hijalefabe] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.cg-signin p[b-hijalefabe] {
		margin: 0;
	}

.cg-go[b-hijalefabe] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--cg-sky) 60%, white), var(--cg-sky));
	color: var(--cg-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.cg-go svg[b-hijalefabe] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.cg-go:focus-visible[b-hijalefabe] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

@media (max-width: 479.98px) {
	.cg[b-hijalefabe] {
		--cg-w: 1.55rem;
		--cg-h: 1.95rem;
	}

	.cg-machine[b-hijalefabe] {
		padding-inline: .75rem;
	}

	.cg-board[b-hijalefabe] {
		gap: .6rem 1.3rem;
	}

	.cg-pause[b-hijalefabe] {
		margin-inline-end: .6rem;
	}

	.cg-guess[b-hijalefabe] {
		font-size: 1rem;
	}

	.cg-keys[b-hijalefabe] {
		margin-inline: -.75rem;
		padding-inline: .5rem;
	}

	.cg-row[b-hijalefabe] {
		gap: .25rem;
	}

	.cg-key[b-hijalefabe] {
		height: 2.6rem;
		font-size: 1rem;
	}
}

/* The name shows most of the turn; the "?" between. */
@keyframes cg-flip-name-b-hijalefabe {
	0%, 8% {
		opacity: 0;
		transform: rotateX(-90deg);
	}

	16%, 66% {
		opacity: 1;
		transform: none;
	}

	74%, 100% {
		opacity: 0;
		transform: rotateX(90deg);
	}
}

@keyframes cg-flip-q-b-hijalefabe {
	0% {
		opacity: 1;
		transform: none;
	}

	8%, 74% {
		opacity: 0;
		transform: rotateX(90deg);
	}

	82%, 100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes cg-crack-b-hijalefabe {
	45% {
		transform: scale(1.25);
	}
}

@keyframes cg-wave-b-hijalefabe {
	40% {
		transform: translateY(-.35rem);
	}
}

@keyframes cg-pop-b-hijalefabe {
	from {
		transform: scale(.85);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* No turns: the name stays. */
	.cg-named .cg-guess > *[b-hijalefabe] {
		animation: none;
	}

	.cg-flip-q[b-hijalefabe] {
		visibility: hidden;
	}

	.cg-cracked .cg-cell .cg-guess[b-hijalefabe],
	.cg-cell.fresh .cg-guess[b-hijalefabe],
	.cg-title-letter[data-lit][b-hijalefabe],
	.cg-cracked .cg-state b[b-hijalefabe],
	.cg-clear.sure[b-hijalefabe],
	.cg-verdict[b-hijalefabe],
	.cg-won[b-hijalefabe] {
		animation: none;
	}

	.cg-guess[b-hijalefabe],
	.cg-key[b-hijalefabe],
	.cg-tokens i[b-hijalefabe],
	.cg-title-letter[b-hijalefabe] {
		transition: none;
	}
}
/* /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/GamesHub.razor.rz.scp.css */
/* The games page. Tokens follow DESIGN.md: Sky Blue accents, Vivid Blue for what's about the player, the one
   Playpen Sans moment in the page's title, Fredoka names, Bungee digits, Lunasima body, soft shadows, the
   overshoot spring gated on reduced motion. A game is an arcade cabinet card: its art, a token for how often
   it renews, its name, its line, the player's standing, and a play button. */

.gh[b-9sa7y000ka] {
	--gh-sky: var(--text-primary, #5ba6da);
	--gh-vivid: #1976d2;
	--gh-ink: #1f1f1f;
	--gh-muted: var(--md-muted, #5f6368);
	--gh-spring: cubic-bezier(.34, 1.56, .64, 1);
	max-width: 60rem;
	margin-inline: auto;
	padding-block: 1.5rem 3rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--gh-ink);
}

.gh-head[b-9sa7y000ka] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem 1.25rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

/* The mascot beside the sign: it rolls in on its chair, then sways a little now and then, like a player in
   the middle of a game. */
.gh-logo[b-9sa7y000ka] {
	flex: none;
	width: clamp(7rem, 18vw, 10.5rem);
	height: auto;
	transform-origin: 50% 85%;
	animation: gh-roll-in-b-9sa7y000ka .8s var(--gh-spring) both, gh-sway-b-9sa7y000ka 6s ease-in-out 1.6s infinite;
}

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

/* ---------- the page's sign: an arcade marquee ----------
   Sky Blue neon letters on the cabinet's dark ground (Void, a breath of Sky Blue at the top), a row of bulbs
   along the top and the bottom edge, lit in turn so they seem to run round the sign. */

.gh-marquee[b-9sa7y000ka] {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 .3em;
	padding: .55em .8em .6em;
	border-radius: 18px;
	background: radial-gradient(ellipse 80% 120% at 50% 0%, color-mix(in srgb, var(--gh-sky) 22%, #1a1a1a), #1a1a1a 70%);
	color: var(--gh-sky);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18), inset 0 0 0 2px rgba(255, 255, 255, .06);
}

	/* The bulbs: dots along the top and the bottom, shifted half a bulb at a time - the top row one way, the
	   bottom the other - so the lit ones chase round. A pointer over the sign makes them run faster. */
	.gh-marquee[b-9sa7y000ka]::before {
		content: "";
		position: absolute;
		inset: .3rem .9rem;
		background:
			radial-gradient(circle, #fff 0 2px, rgba(255, 255, 255, .25) 2.5px, transparent 3.5px) 0 0 / 16px 10px repeat-x,
			radial-gradient(circle, #fff 0 2px, rgba(255, 255, 255, .25) 2.5px, transparent 3.5px) 0 100% / 16px 10px repeat-x;
		filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gh-sky) 70%, white));
		pointer-events: none;
		animation: gh-chase-b-9sa7y000ka 1.2s steps(2) infinite;
	}

.gh-title:hover .gh-marquee[b-9sa7y000ka]::before {
	animation-duration: .45s;
}

.gh-word[b-9sa7y000ka] {
	display: inline-flex;
}

/* Each letter drops in on the spring, one after another, then hops in a wave that runs through the name every
   few seconds, brightening as it goes. */
.gh-letter[b-9sa7y000ka] {
	display: inline-block;
	text-shadow: 0 0 .06em color-mix(in srgb, var(--gh-sky) 90%, white), 0 0 .3em color-mix(in srgb, var(--gh-sky) 55%, transparent);
	animation:
		gh-drop-b-9sa7y000ka .7s var(--gh-spring) calc(var(--i) * 60ms) backwards,
		gh-hop-b-9sa7y000ka 5s ease-in-out calc(1.4s + var(--i) * 80ms) infinite;
}

@keyframes gh-chase-b-9sa7y000ka {
	to {
		background-position: 16px 0, -16px 100%;
	}
}

@keyframes gh-drop-b-9sa7y000ka {
	from {
		opacity: 0;
		transform: translateY(-.9em) scale(.5) rotate(-12deg);
	}
}

@keyframes gh-hop-b-9sa7y000ka {
	0%, 9%, 100% {
		transform: none;
		filter: none;
	}

	4% {
		transform: translateY(-.16em) rotate(-5deg);
		filter: brightness(1.35);
	}
}

.gh-note[b-9sa7y000ka] {
	text-align: center;
	color: var(--gh-muted);
}

.gh-loading[b-9sa7y000ka] {
	position: relative;
	min-height: 16rem;
}

/* ---------- a game ---------- */

.gh-games[b-9sa7y000ka] {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gh-card[b-9sa7y000ka] {
	display: grid;
	grid-template-columns: 9.5rem 1fr auto;
	align-items: center;
	gap: 1.25rem;
	padding: .85rem;
	padding-inline-end: 1.25rem;
	border-radius: 18px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
	transition: transform .35s var(--gh-spring), box-shadow .2s;
	animation: gh-pop-b-9sa7y000ka .5s var(--gh-spring) backwards;
}

	.gh-card:hover[b-9sa7y000ka] {
		transform: translateY(-2px);
		box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 12px 28px rgba(0, 0, 0, .1);
	}

	.gh-card:focus-visible[b-9sa7y000ka] {
		outline: 2px solid var(--md-focus);
		outline-offset: 3px;
	}

.gh-art[b-9sa7y000ka] {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: #1a1a1a;
}

	.gh-art img[b-9sa7y000ka] {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

/* "Blurred room"'s art: the home page's picture out of focus (a touch larger, so the blur's soft edge stays outside
   the frame), clearing while the card is pointed at - like its name. */
.gh-art-blur[b-9sa7y000ka] {
	filter: blur(4px);
	transform: scale(1.1);
	transition: filter .6s;
}

.gh-card:hover .gh-art-blur[b-9sa7y000ka] {
	filter: blur(1.5px);
}

/* "Room mosaic"'s art: the game's mosaic of the mammoth and the beaver - the whole picture, every patch in its place,
   and over it the patches the game moved (each a tile cut from the picture: --pc/--pr its own spot's column and row)
   on the spots it moved them to (--sc/--sr). Pointed at, they fly home, each block as one (a shared delay step,
   --d), and the two pictures come together. The frame stays 4:3, cropped from the middle on a phone's 16:9. */
.gh-mosaic[b-9sa7y000ka] {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: url(/images/game-mosaic.jpg) 0 0 / 100% 100%;
	transform: translateY(-50%);
}

	.gh-mosaic i[b-9sa7y000ka] {
		position: absolute;
		left: calc(var(--sc) * 100% / 32);
		top: calc(var(--sr) * 100% / 24);
		width: calc(100% / 32);
		height: calc(100% / 24);
		background: url(/images/game-mosaic.jpg) calc(var(--pc) * 100% / 31) calc(var(--pr) * 100% / 23) / 3200% 2400%;
		transition: transform .7s cubic-bezier(.22, 1, .36, 1) calc(var(--d) * 40ms);
	}

.gh-card:hover .gh-mosaic i[b-9sa7y000ka] {
	transform: translate(calc((var(--pc) - var(--sc)) * 100%), calc((var(--pr) - var(--sr)) * 100%));
}

/* "Coded description"'s art: a word in its board's boxes - a code letter under each, one box being guessed. Pointed
   at, it is solved as on the board: the blue box takes its letter (typed in, Ink on Sky Blue), then the blue jumps to
   the next box (each box's --turn), until the word is whole; then its letters turn Sky Blue, as a cracked code's do,
   and the boxes hop in a wave. */
.gh-code[b-9sa7y000ka] {
	--gh-turn: .55s;
	display: flex;
	direction: rtl;
	gap: .25rem;
	font-family: 'Fredoka', system-ui, sans-serif;
}

.gh-code-cell[b-9sa7y000ka] {
	display: grid;
	justify-items: center;
	gap: .3rem;
}

	.gh-code-cell b[b-9sa7y000ka] {
		display: grid;
		place-items: center;
		width: 1.5rem;
		height: 1.8rem;
		border-bottom: 2px solid rgba(255, 255, 255, .4);
		border-radius: 6px 6px 0 0;
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
	}

	.gh-code-cell:nth-child(2) b[b-9sa7y000ka] {
		border-color: var(--gh-sky);
		background: var(--gh-sky);
	}

	.gh-code-cell span[b-9sa7y000ka] {
		opacity: 0;
	}

	.gh-code-cell small[b-9sa7y000ka] {
		color: color-mix(in srgb, #fff 52%, #1a1a1a);
		font-size: 1rem;
		line-height: 1;
	}

.gh-card:hover .gh-code-cell[b-9sa7y000ka] {
	animation: gh-code-wave-b-9sa7y000ka .6s var(--gh-spring) calc(4 * var(--gh-turn) + var(--i) * 70ms) both;
}

	.gh-card:hover .gh-code-cell b[b-9sa7y000ka] {
		animation: gh-code-turn-b-9sa7y000ka var(--gh-turn) linear calc(var(--turn) * var(--gh-turn)) both;
	}

	.gh-card:hover .gh-code-cell span[b-9sa7y000ka] {
		animation:
			gh-code-type-b-9sa7y000ka .35s var(--gh-spring) calc(var(--turn) * var(--gh-turn) + .15s) both,
			gh-code-solved-b-9sa7y000ka .3s calc(4 * var(--gh-turn)) forwards;
	}

/* No first keyframe: before its turn a box stays as it is (the second one blue, the rest clear). */
@keyframes gh-code-turn-b-9sa7y000ka {
	.1%, 99.9% {
		border-color: var(--gh-sky);
		background: var(--gh-sky);
		color: var(--gh-ink);
	}

	100% {
		border-color: rgba(255, 255, 255, .4);
		background: transparent;
		color: #fff;
	}
}

@keyframes gh-code-type-b-9sa7y000ka {
	from {
		opacity: 0;
		transform: scale(.3);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes gh-code-solved-b-9sa7y000ka {
	to {
		color: color-mix(in srgb, var(--gh-sky) 55%, white);
	}
}

@keyframes gh-code-wave-b-9sa7y000ka {
	40% {
		transform: translateY(-.35rem);
	}
}

/* "Where's the room?"'s art: the armadillo on wheels on Sky Blue, facing the way the page reads (mirrored in English).
   Pointed at, it rolls: the wheels turn, it bobs along and the wind streams behind it. */
.gh-art-sky[b-9sa7y000ka] {
	background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gh-sky) 70%, white), var(--gh-sky) 70%);
}

	.gh-art-sky .gh-wheels[b-9sa7y000ka] {
		width: 82%;
		height: auto;
		fill: initial;
		transform: scaleX(var(--dir, 1));
		overflow: visible;
	}

.gh-wheel[b-9sa7y000ka],
.gh-wheels-body[b-9sa7y000ka] {
	transform-box: fill-box;
}

.gh-wheel[b-9sa7y000ka] {
	transform-origin: center;
}

.gh-wheels-wind[b-9sa7y000ka] {
	opacity: 0;
	transition: opacity .3s;
}

.gh-card:hover .gh-wheel[b-9sa7y000ka] {
	animation: gh-wheel-roll-b-9sa7y000ka .5s linear infinite;
}

.gh-card:hover .gh-wheels-body[b-9sa7y000ka] {
	animation: gh-wheel-bob-b-9sa7y000ka .3s ease-in-out infinite alternate;
}

.gh-card:hover .gh-wheels-wind[b-9sa7y000ka] {
	opacity: .85;
}

@keyframes gh-wheel-roll-b-9sa7y000ka {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes gh-wheel-bob-b-9sa7y000ka {
	to {
		transform: translateY(-2px) rotate(-1deg);
	}
}

.gh-body[b-9sa7y000ka] {
	display: grid;
	justify-items: start;
	gap: .2rem;
	min-width: 0;
}

.gh-cadence[b-9sa7y000ka] {
	padding: .15rem .65rem;
	border: 1.5px solid var(--gh-sky);
	border-radius: 999px;
	color: var(--gh-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

.gh-name[b-9sa7y000ka] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
}

/* "Blurred room"'s name, a little out of focus like its game page's title; sharp while the card is hovered. */
.gh-blurry[b-9sa7y000ka] {
	filter: blur(.5px);
	text-shadow: 0 0 .15em color-mix(in srgb, var(--gh-ink) 35%, transparent);
	transition: filter .45s, text-shadow .45s;
}

.gh-card:hover .gh-blurry[b-9sa7y000ka] {
	filter: none;
	text-shadow: none;
}

.gh-line[b-9sa7y000ka] {
	color: var(--gh-muted);
}

.gh-status[b-9sa7y000ka] {
	margin-top: .15rem;
	color: var(--gh-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

	.gh-status.gh-solved[b-9sa7y000ka]::before {
		content: "✓ ";
	}

.gh-play[b-9sa7y000ka] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 2.75rem;
	padding: 0 1.2rem;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gh-sky) 60%, white), var(--gh-sky));
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}

	.gh-play svg[b-9sa7y000ka] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

/* ---------- signed out ---------- */

.gh-signin[b-9sa7y000ka] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.gh-signin p[b-9sa7y000ka] {
		margin: 0;
	}

.gh-go[b-9sa7y000ka] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gh-sky) 60%, white), var(--gh-sky));
	color: var(--gh-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.gh-go svg[b-9sa7y000ka] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.gh-go:focus-visible[b-9sa7y000ka] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

/* ---------- phones: the art across the top, the button under the text ---------- */

@media (max-width: 575.98px) {
	.gh-card[b-9sa7y000ka] {
		grid-template-columns: 1fr;
		gap: .75rem;
		padding-inline-end: .85rem;
	}

	.gh-art[b-9sa7y000ka] {
		aspect-ratio: 16 / 9;
	}

	.gh-play[b-9sa7y000ka] {
		justify-content: center;
	}
}

@keyframes gh-pop-b-9sa7y000ka {
	from {
		transform: translateY(12px) scale(.96);
		opacity: 0;
	}
}

@keyframes gh-roll-in-b-9sa7y000ka {
	from {
		opacity: 0;
		transform: translateX(calc(2.5rem * var(--dir, 1))) rotate(-8deg);
	}
}

@keyframes gh-sway-b-9sa7y000ka {
	0%, 80%, 100% {
		transform: none;
	}

	86% {
		transform: rotate(-4deg);
	}

	92% {
		transform: rotate(3deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-logo[b-9sa7y000ka],
	.gh-card[b-9sa7y000ka],
	.gh-art-blur[b-9sa7y000ka],
	.gh-mosaic i[b-9sa7y000ka],
	.gh-blurry[b-9sa7y000ka],
	.gh-letter[b-9sa7y000ka],
	.gh-marquee[b-9sa7y000ka]::before,
	.gh-card:hover .gh-wheel[b-9sa7y000ka],
	.gh-card:hover .gh-wheels-body[b-9sa7y000ka],
	.gh-card:hover .gh-code-cell[b-9sa7y000ka],
	.gh-card:hover .gh-code-cell b[b-9sa7y000ka],
	.gh-card:hover .gh-code-cell span[b-9sa7y000ka] {
		animation: none;
		transition: none;
	}

		.gh-card:hover[b-9sa7y000ka] {
			transform: none;
		}
}

/* "Rooms Squared"'s art: a little board on paper - bars for its rows' and columns' names and nine squares drawn in
   ink, three of them filled in Sky Blue with a tick. Pointed at, the others fill one after another (each square's --t). */
.gh-art-paper[b-9sa7y000ka] {
	background: #f6f1ea;
}

.gh-grid[b-9sa7y000ka] {
	display: grid;
	grid-template-columns: .6fr repeat(3, 1fr);
	grid-template-rows: .35fr repeat(3, 1fr);
	gap: 5%;
	height: 82%;
	aspect-ratio: 1.08;
}

	.gh-grid b[b-9sa7y000ka] {
		align-self: center;
		justify-self: center;
		width: 80%;
		height: 5px;
		border-radius: 999px;
		background: color-mix(in srgb, #1f2a33 30%, transparent);
	}

		.gh-grid b.gh-grid-corner[b-9sa7y000ka] {
			visibility: hidden;
		}

	.gh-grid i[b-9sa7y000ka] {
		display: grid;
		place-items: center;
		border: 2px solid #1f2a33;
		border-radius: 4px;
		background: #fff;
	}

		.gh-grid i.on[b-9sa7y000ka] {
			background: var(--gh-sky);
		}

		.gh-grid i[b-9sa7y000ka]::after {
			content: "";
			width: 42%;
			height: 22%;
			border: solid #fff;
			border-width: 0 0 2.5px 2.5px;
			opacity: 0;
			transform: translateY(-15%) rotate(-45deg);
		}

		.gh-grid i.on[b-9sa7y000ka]::after {
			opacity: 1;
		}

.gh-card:hover .gh-grid i:not(.on)[b-9sa7y000ka] {
	animation: gh-grid-fill-b-9sa7y000ka .45s var(--gh-spring) calc(var(--t) * 170ms) both;
}

	.gh-card:hover .gh-grid i:not(.on)[b-9sa7y000ka]::after {
		animation: gh-grid-tick-b-9sa7y000ka .25s calc(var(--t) * 170ms + .15s) both;
	}

@keyframes gh-grid-fill-b-9sa7y000ka {
	from {
		transform: scale(.8);
	}

	to {
		background: var(--gh-sky);
	}
}

@keyframes gh-grid-tick-b-9sa7y000ka {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gh-card:hover .gh-grid i:not(.on)[b-9sa7y000ka],
	.gh-card:hover .gh-grid i:not(.on)[b-9sa7y000ka]::after {
		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's poster 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;
    }
}

/* Below the video: what the site is, in words. Same quiet look as the room list (/rooms) - white
   cards, Fredoka headings, the site's blue. */
.home-about[b-x176q9eve7] {
    max-width: 72rem;
    margin: 2.5rem auto 1rem;
    font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: #1f1f1f;
    line-height: 1.6;
}

    .home-about p[b-x176q9eve7] {
        max-width: 46rem;
    }

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

.home-about-lead[b-x176q9eve7] {
    margin-block-end: 1.75rem;
}

.home-features[b-x176q9eve7],
.home-regions[b-x176q9eve7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    align-items: start;
    margin-block-end: 2.5rem;
}

.home-feature[b-x176q9eve7],
.home-region[b-x176q9eve7] {
    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);
}

    .home-feature h3[b-x176q9eve7],
    .home-region h3[b-x176q9eve7] {
        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 .4rem;
    }

    .home-feature p[b-x176q9eve7] {
        margin: 0;
    }

.home-region a[b-x176q9eve7] {
    color: #1f1f1f;
    text-decoration: none;
}

    .home-region a:hover[b-x176q9eve7],
    .home-region a:focus-visible[b-x176q9eve7] {
        color: #1976d2;
        text-decoration: underline;
    }

.home-count[b-x176q9eve7] {
    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;
}

.home-cities[b-x176q9eve7] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-about-links[b-x176q9eve7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-block-start: 1.5rem;
    font-weight: 700;
}

.home-about-cta[b-x176q9eve7] {
    padding: .55rem 1.4rem;
    border-radius: 999px;
    background: var(--text-primary);
    color: #fff;
    text-decoration: none;
    transition: box-shadow .2s, background .2s;
}

    .home-about-cta:hover[b-x176q9eve7],
    .home-about-cta:focus-visible[b-x176q9eve7] {
        box-shadow: 0 8px 20px rgba(0,0,0,.2);
        background: color-mix(in srgb, var(--text-primary) 85%, black 15%);
        color: #fff;
    }

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

    /* Its icon is in its text's white: the page's Sky icon fill (svg, above) is its background. */
    .disclaimer-btn-primary svg[b-x176q9eve7] {
        fill: currentColor;
    }

    .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/MatrixGame.razor.rz.scp.css */
/* "Matrix". Tokens follow DESIGN.md and the other games: Sky Blue accents, Vivid Blue for what's about the player,
   Forest for right, Ember for wrong, Fredoka names, Bungee digits, Lunasima body, soft shadows, the overshoot spring
   gated on reduced motion. The board is a grid drawn in ink like a puzzle page: the row and column headers, the
   rarity in the corner, nine squares - a filled one shows its room's photo. The title is spelled in squares of its
   own that fill in turn. */

.mx[b-tgax4l4s8u] {
	--mx-sky: var(--text-primary, #5ba6da);
	--mx-vivid: #1976d2;
	--mx-ink: #1f1f1f;
	--mx-muted: var(--md-muted, #5f6368);
	--mx-forest: #1B5E20;
	--mx-ember: #D84315;
	--mx-spring: cubic-bezier(.34, 1.56, .64, 1);
	--mx-ease: cubic-bezier(.22, 1, .36, 1);
	max-width: 72rem;
	margin-inline: auto;
	padding-block: 1rem 3rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--mx-ink);
}

/* The link back, and the week picker at the row's other end. */
.mx-top[b-tgax4l4s8u] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	min-height: 2.25rem;
}

.mx-back[b-tgax4l4s8u] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--mx-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	text-decoration: none;
}

	.mx-back svg[b-tgax4l4s8u] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

	.mx-back:hover[b-tgax4l4s8u] {
		text-decoration: underline;
	}

.mx-head[b-tgax4l4s8u] {
	margin-block: .25rem 1rem;
}

/* ---------- the title: a letter a square, dropping in, then filling one after another ---------- */

.mx-title[b-tgax4l4s8u] {
	margin: 0;
	line-height: 1;
}

.mx-tiles[b-tgax4l4s8u] {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35em .6em;
}

.mx-word[b-tgax4l4s8u] {
	display: inline-flex;
	gap: clamp(.25rem, 1vw, .45rem);
}

.mx-tile[b-tgax4l4s8u] {
	display: inline-grid;
	place-items: center;
	width: 1.05em;
	height: 1.05em;
	border: .07em solid var(--mx-ink);
	border-radius: 12px;
	background: #fff;
	color: var(--mx-ink);
	font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	/* Smaller than the other games' display titles: the name is eleven squares, on one line from a laptop up. */
	font-size: clamp(1.6rem, 3.8vw, 2.75rem);
	animation: mx-drop-b-tgax4l4s8u .55s var(--mx-spring) calc(var(--i) * 90ms) backwards, mx-fill-b-tgax4l4s8u 7s var(--mx-ease) calc(1.4s + var(--i) * .4s) infinite;
}

.mx-sub[b-tgax4l4s8u] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin: .5rem 0 0;
	color: var(--mx-muted);
}

	.mx-sub bdi[b-tgax4l4s8u] {
		white-space: nowrap;
	}

.mx-sep[b-tgax4l4s8u] {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mx-muted) 60%, white);
	vertical-align: middle;
}

.mx-cadence[b-tgax4l4s8u] {
	padding: .1rem .6rem;
	border: 1.5px solid var(--mx-sky);
	border-radius: 999px;
	color: var(--mx-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

	/* A past week, played late: the chip filled. */
	.mx-cadence.mx-past[b-tgax4l4s8u] {
		border-color: var(--mx-vivid);
		background: var(--mx-vivid);
		color: #fff;
	}

.mx-note[b-tgax4l4s8u] {
	color: var(--mx-muted);
}

.mx-loading[b-tgax4l4s8u] {
	position: relative;
	min-height: 18rem;
}

/* ---------- the board beside the panel ---------- */

.mx-play[b-tgax4l4s8u] {
	display: grid;
	grid-template-columns: minmax(0, 36rem) minmax(21rem, 1fr);
	align-items: start;
	gap: 1.5rem;
}

.mx-board[b-tgax4l4s8u] {
	display: grid;
	grid-template-columns: minmax(5.5rem, .8fr) repeat(3, minmax(0, 1fr));
	gap: .55rem;
}

/* The corner: how rare the player's answers are. */
.mx-corner[b-tgax4l4s8u] {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .15rem;
	color: var(--mx-muted);
	font-size: .8rem;
	cursor: help;
}

	.mx-corner b[b-tgax4l4s8u] {
		color: var(--mx-ink);
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		font-size: 1.5rem;
		line-height: 1;
	}

.mx-head-cell[b-tgax4l4s8u] {
	display: grid;
	place-items: center;
	padding: .25rem;
	text-align: center;
}

.mx-col[b-tgax4l4s8u] {
	min-height: 3.5rem;
	align-content: end;
}

/* A row or a column: its kind, small, over what it asks. */
.mx-cat[b-tgax4l4s8u] {
	display: grid;
	justify-items: center;
	gap: .15rem;
	min-width: 0;
}

.mx-kind[b-tgax4l4s8u] {
	color: var(--mx-muted);
	font-size: .74rem;
	letter-spacing: .02em;
}

.mx-what[b-tgax4l4s8u] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

/* A letter of the name, in a square of its own. */
.mx-letter[b-tgax4l4s8u] {
	display: inline-grid;
	place-items: center;
	min-width: 1.45em;
	height: 1.45em;
	margin-inline-start: .2em;
	border: 2px solid var(--mx-sky);
	border-radius: 4px;
	background: color-mix(in srgb, var(--mx-sky) 14%, white);
	color: var(--mx-vivid);
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

/* ---------- a square ---------- */

.mx-cell[b-tgax4l4s8u] {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 2.5px solid var(--mx-ink);
	border-radius: 16px;
	background: #fff;
	color: var(--mx-ink);
	font: inherit;
	cursor: pointer;
	transition: background .2s, border-color .2s, box-shadow .2s, transform .2s var(--mx-ease);
}

	/* Empty: a faint plus when pointed at or picked. */
	.mx-cell:not(.filled):not(.missed)[b-tgax4l4s8u]::after {
		content: "+";
		color: var(--mx-sky);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
		font-size: 2rem;
		opacity: 0;
		transition: opacity .2s;
	}

	.mx-cell:not(.filled):hover[b-tgax4l4s8u] {
		background: color-mix(in srgb, var(--mx-sky) 10%, white);
	}

		.mx-cell:not(.filled):hover[b-tgax4l4s8u]::after {
			opacity: .55;
		}

	.mx-cell.picked[b-tgax4l4s8u] {
		border-color: var(--mx-vivid);
		background: color-mix(in srgb, var(--mx-sky) 16%, white);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--mx-sky) 45%, transparent);
		transform: scale(1.03);
	}

		.mx-cell.picked[b-tgax4l4s8u]::after {
			opacity: 1 !important;
		}

	.mx-cell:focus-visible[b-tgax4l4s8u] {
		outline: 2px solid var(--md-focus, var(--mx-vivid));
		outline-offset: 3px;
	}

	/* Filled: the room's photo (Sky Blue without one), its name over a shade at the foot, its share on top. */
	.mx-cell.filled[b-tgax4l4s8u] {
		background: var(--mx-sky);
	}

		.mx-cell.filled.picked[b-tgax4l4s8u] {
			border-color: var(--mx-vivid);
		}

	.mx-cell img[b-tgax4l4s8u] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.mx-cell-name[b-tgax4l4s8u] {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: -webkit-box;
	padding: 1.1rem .35rem .35rem;
	overflow: hidden;
	background: linear-gradient(transparent, rgba(0, 0, 0, .78));
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: .82rem;
	line-height: 1.15;
	text-align: center;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.mx-share[b-tgax4l4s8u] {
	position: absolute;
	top: .3rem;
	inset-inline-start: .3rem;
	padding: .12rem .4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--mx-ink);
	font-family: 'Bungee', sans-serif;
	font-size: .68rem;
	line-height: 1.1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* Wrong guesses in a square: an Ember dot each. */
.mx-misses[b-tgax4l4s8u] {
	position: absolute;
	bottom: .4rem;
	display: flex;
	gap: 4px;
}

	.mx-misses i[b-tgax4l4s8u] {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: var(--mx-ember);
	}

/* The week over, a square left empty: dashed, with how many answers it had. */
.mx-cell.missed[b-tgax4l4s8u] {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--mx-ink) 45%, white);
	background: #f7f7f7;
}

.mx-count[b-tgax4l4s8u] {
	padding: .25rem;
	color: var(--mx-muted);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	font-size: .85rem;
	line-height: 1.15;
	text-align: center;
}

.mx-cell.fresh[b-tgax4l4s8u] {
	animation: mx-pop-b-tgax4l4s8u .55s var(--mx-spring);
}

.mx-cell.shake[b-tgax4l4s8u] {
	animation: mx-shake-b-tgax4l4s8u .45s var(--mx-ease);
	border-color: var(--mx-ember);
}

/* ---------- the panel ---------- */

.mx-panel[b-tgax4l4s8u] {
	position: sticky;
	top: 1rem;
	padding: 1.25rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.mx-ask[b-tgax4l4s8u] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.mx-help[b-tgax4l4s8u] {
	margin: .4rem 0 0;
	color: var(--mx-muted);
	line-height: 1.5;
}

/* The picked square's row and column, side by side. */
.mx-pair[b-tgax4l4s8u] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin: .6rem 0 0;
}

.mx-chip[b-tgax4l4s8u] {
	display: inline-grid;
	padding: .35rem .75rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mx-sky) 13%, white);
}

	.mx-chip .mx-cat[b-tgax4l4s8u] {
		justify-items: start;
	}

.mx-and[b-tgax4l4s8u] {
	color: var(--mx-muted);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

.mx-left[b-tgax4l4s8u] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: .75rem 0 .9rem;
	color: var(--mx-muted);
}

/* Today's mistakes, as arcade tokens: filled while left, hollow once spent. */
.mx-tokens[b-tgax4l4s8u] {
	display: inline-flex;
	gap: .3rem;
}

	.mx-tokens i[b-tgax4l4s8u] {
		width: 1rem;
		height: 1rem;
		border: 2px solid var(--mx-ember);
		border-radius: 50%;
		transition: background .3s;
	}

		.mx-tokens i.on[b-tgax4l4s8u] {
			background: var(--mx-ember);
			box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
		}

.mx-wait[b-tgax4l4s8u] {
	margin: 0;
	padding: .75rem 1rem;
	border-radius: 12px;
	background: #f7f7f7;
	color: var(--mx-muted);
}

.mx-tried[b-tgax4l4s8u] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .9rem 0 0;
	color: var(--mx-muted);
	font-size: .92rem;
}

.mx-tried-room[b-tgax4l4s8u] {
	padding: .1rem .6rem;
	border: 1.5px solid color-mix(in srgb, var(--mx-ember) 45%, white);
	border-radius: 999px;
	color: var(--mx-ember);
}

.mx-mine[b-tgax4l4s8u] {
	display: grid;
	gap: .1rem;
	margin: 0;
	padding: .6rem .8rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--mx-forest) 8%, white);
}

	.mx-mine b[b-tgax4l4s8u] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
	}

	.mx-mine small[b-tgax4l4s8u] {
		color: var(--mx-muted);
	}

.mx-verdict[b-tgax4l4s8u] {
	margin: .75rem 0 0;
	color: var(--mx-ember);
	animation: mx-pop-b-tgax4l4s8u .4s var(--mx-spring);
}

	.mx-verdict.right[b-tgax4l4s8u] {
		color: var(--mx-forest);
		font-weight: 600;
	}

.mx-error[b-tgax4l4s8u] {
	margin: .75rem 0 0;
	color: var(--md-error);
}

.mx-end[b-tgax4l4s8u] {
	text-align: center;
	animation: mx-pop-b-tgax4l4s8u .5s var(--mx-spring);
}

	.mx-end p[b-tgax4l4s8u] {
		margin: 0;
	}

.mx-end-title[b-tgax4l4s8u] {
	color: var(--mx-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.mx-end-line[b-tgax4l4s8u] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem .6rem;
	margin-top: .35rem !important;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

.mx-end-next[b-tgax4l4s8u] {
	margin-top: .25rem !important;
	color: var(--mx-muted);
}

	.mx-end-next a[b-tgax4l4s8u] {
		color: var(--mx-vivid);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

/* Once over: a square's answers, each over a bar as long as its share. */
.mx-answers[b-tgax4l4s8u] {
	margin-top: 1rem;
	padding-top: .75rem;
	border-top: 1px solid #eee;
}

.mx-answers-title[b-tgax4l4s8u] {
	margin: .9rem 0 .4rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
}

.mx-answer-list[b-tgax4l4s8u] {
	display: grid;
	gap: .3rem;
	max-height: 22rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

	.mx-answer-list li[b-tgax4l4s8u] {
		position: relative;
		display: flex;
		align-items: center;
		gap: .5rem;
		padding: .35rem .6rem;
		overflow: hidden;
		border-radius: 8px;
		background: #f7f7f7;
	}

		.mx-answer-list li > :not(.mx-answer-bar)[b-tgax4l4s8u] {
			position: relative;
		}

		.mx-answer-list li.yours[b-tgax4l4s8u] {
			box-shadow: inset 0 0 0 2px var(--mx-vivid);
		}

	.mx-answer-list a[b-tgax4l4s8u] {
		min-width: 0;
		overflow: hidden;
		color: var(--mx-ink);
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

		.mx-answer-list a:hover[b-tgax4l4s8u] {
			text-decoration: underline;
		}

	.mx-answer-list b[b-tgax4l4s8u] {
		margin-inline-start: auto;
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		font-size: .8rem;
	}

.mx-answer-bar[b-tgax4l4s8u] {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: color-mix(in srgb, var(--mx-sky) 22%, white);
}

.mx-yours[b-tgax4l4s8u] {
	padding: 0 .45rem;
	border-radius: 999px;
	background: var(--mx-vivid);
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-size: .75rem;
}

/* ---------- signed out ---------- */

.mx-signin[b-tgax4l4s8u] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.mx-signin p[b-tgax4l4s8u] {
		margin: 0;
	}

.mx-go[b-tgax4l4s8u] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--mx-sky) 60%, white), var(--mx-sky));
	color: var(--mx-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.mx-go svg[b-tgax4l4s8u] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.mx-go:focus-visible[b-tgax4l4s8u] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

/* ---------- narrower: the panel under the board ---------- */

@media (max-width: 899.98px) {
	.mx-play[b-tgax4l4s8u] {
		grid-template-columns: minmax(0, 1fr);
	}

	.mx-board[b-tgax4l4s8u] {
		max-width: 38rem;
		width: 100%;
		margin-inline: auto;
	}

	.mx-panel[b-tgax4l4s8u] {
		position: static;
	}
}

@media (max-width: 559.98px) {
	.mx-board[b-tgax4l4s8u] {
		grid-template-columns: minmax(3.9rem, .72fr) repeat(3, minmax(0, 1fr));
		gap: .35rem;
	}

	.mx-col[b-tgax4l4s8u] {
		min-height: 3.75rem;
	}

	.mx-kind[b-tgax4l4s8u] {
		font-size: .62rem;
	}

	.mx-what[b-tgax4l4s8u] {
		font-size: .8rem;
	}

	.mx-letter[b-tgax4l4s8u] {
		border-width: 1.5px;
	}

	.mx-corner[b-tgax4l4s8u] {
		font-size: .66rem;
	}

		.mx-corner b[b-tgax4l4s8u] {
			font-size: 1.1rem;
		}

	.mx-cell[b-tgax4l4s8u] {
		border-width: 2px;
		border-radius: 12px;
	}

	.mx-cell-name[b-tgax4l4s8u] {
		padding: .8rem .2rem .25rem;
		font-size: .66rem;
	}

	.mx-share[b-tgax4l4s8u] {
		top: .2rem;
		inset-inline-start: .2rem;
		padding: .08rem .3rem;
		font-size: .56rem;
	}

	.mx-count[b-tgax4l4s8u] {
		font-size: .72rem;
	}

	.mx-panel[b-tgax4l4s8u] {
		padding: 1rem;
	}
}

@keyframes mx-drop-b-tgax4l4s8u {
	from {
		opacity: 0;
		transform: translateY(-.6em) scale(.8);
	}
}

/* A title square filling in Sky Blue for a while, then clearing - each a beat after the one before. */
@keyframes mx-fill-b-tgax4l4s8u {
	0%, 6% {
		background: #fff;
		color: var(--mx-ink);
	}

	10%, 34% {
		border-color: var(--mx-vivid);
		background: var(--mx-sky);
		color: #fff;
		transform: scale(1.06);
	}

	40%, 100% {
		background: #fff;
		color: var(--mx-ink);
		transform: none;
	}
}

@keyframes mx-pop-b-tgax4l4s8u {
	from {
		transform: scale(.85);
		opacity: 0;
	}
}

@keyframes mx-shake-b-tgax4l4s8u {
	0%, 100% {
		transform: none;
	}

	20% {
		transform: translateX(-6px) rotate(-2deg);
	}

	40% {
		transform: translateX(6px) rotate(2deg);
	}

	60% {
		transform: translateX(-4px);
	}

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

@media (prefers-reduced-motion: reduce) {
	.mx-tile[b-tgax4l4s8u],
	.mx-cell.fresh[b-tgax4l4s8u],
	.mx-cell.shake[b-tgax4l4s8u],
	.mx-verdict[b-tgax4l4s8u],
	.mx-end[b-tgax4l4s8u] {
		animation: none;
	}

	.mx-cell[b-tgax4l4s8u],
	.mx-tokens i[b-tgax4l4s8u] {
		transition: none;
	}

	.mx-cell.picked[b-tgax4l4s8u] {
		transform: none;
	}
}
/* /Components/Pages/MosaicGame.razor.rz.scp.css */
/* "Room mosaic". Tokens follow DESIGN.md and Blurred room: Sky Blue accents, Vivid Blue for what's about the
   player, Fredoka names, Bungee digits and question marks, Lunasima body, soft shadows, the overshoot spring gated
   on reduced motion. The mosaic sits in a dark frame like a cabinet's screen between the two rooms' cards, each a
   "?" with its clues until it's found; the title wears a two-tone mosaic of its own. */

.mo[b-v08ur94780] {
	--mo-sky: var(--text-primary, #5ba6da);
	--mo-vivid: #1976d2;
	--mo-ink: #1f1f1f;
	--mo-muted: var(--md-muted, #5f6368);
	--mo-forest: #1B5E20;
	--mo-ember: #D84315;
	--mo-spring: cubic-bezier(.34, 1.56, .64, 1);
	--mo-ease: cubic-bezier(.22, 1, .36, 1);
	max-width: 72rem;
	margin-inline: auto;
	padding-block: 1rem 3rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--mo-ink);
}

/* The link back, and the week picker at the row's other end. */
.mo-top[b-v08ur94780] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	min-height: 2.25rem;
}

.mo-back[b-v08ur94780] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--mo-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	text-decoration: none;
}

	.mo-back svg[b-v08ur94780] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

	.mo-back:hover[b-v08ur94780] {
		text-decoration: underline;
	}

.mo-head[b-v08ur94780] {
	margin-block: .5rem 1.25rem;
}

/* The screen's one display moment, filled with a two-tone mosaic like the game's picture. */
.mo-title[b-v08ur94780] {
	margin: 0;
	font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.05;
	color: var(--mo-sky);
	background: conic-gradient(var(--mo-sky) 25%, var(--mo-vivid) 0 50%, var(--mo-sky) 0 75%, var(--mo-vivid) 0) 0 0 / .32em .32em;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mo-sub[b-v08ur94780] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin: .4rem 0 0;
	color: var(--mo-muted);
}

	.mo-sub bdi[b-v08ur94780] {
		white-space: nowrap;
	}

.mo-sep[b-v08ur94780] {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mo-muted) 60%, white);
}

.mo-cadence[b-v08ur94780] {
	padding: .1rem .6rem;
	border: 1.5px solid var(--mo-sky);
	border-radius: 999px;
	color: var(--mo-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

	/* A past week, played late: the chip filled. */
	.mo-cadence.mo-past[b-v08ur94780] {
		border-color: var(--mo-vivid);
		background: var(--mo-vivid);
		color: #fff;
	}

.mo-note[b-v08ur94780] {
	color: var(--mo-muted);
}

.mo-loading[b-v08ur94780] {
	position: relative;
	min-height: 18rem;
}

/* ---------- the board: room 1, the mosaic, room 2 ---------- */

.mo-board[b-v08ur94780] {
	display: grid;
	grid-template-columns: 12rem minmax(0, 1fr) 12rem;
	grid-template-areas: "first mosaic second";
	align-items: start;
	gap: 1.25rem;
}

	.mo-board > :first-child[b-v08ur94780] {
		grid-area: first;
	}

	.mo-board > :last-child[b-v08ur94780] {
		grid-area: second;
	}

.mo-mosaic[b-v08ur94780] {
	grid-area: mosaic;
	margin: 0;
}

.mo-mosaic-frame[b-v08ur94780] {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 18px;
	background: #1a1a1a;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

	.mo-mosaic-frame img[b-v08ur94780] {
		width: 100%;
		height: 100%;
		object-fit: cover;
		animation: mo-in-b-v08ur94780 .6s var(--mo-ease);
	}

/* How much of the mosaic shows: a bar filling as mistakes uncover it. */
.mo-shown[b-v08ur94780] {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-top: .6rem;
	color: var(--mo-muted);
}

.mo-shown-bar[b-v08ur94780] {
	flex: 1;
	height: .5rem;
	overflow: hidden;
	border-radius: 999px;
	background: #eee;
}

	.mo-shown-bar i[b-v08ur94780] {
		display: block;
		height: 100%;
		border-radius: 999px;
		background: var(--mo-sky);
		transition: width .6s var(--mo-ease);
	}

.mo-shown b[b-v08ur94780] {
	color: var(--mo-ink);
	font-family: 'Bungee', sans-serif;
	font-weight: 400;
}

/* A room's card: its label, a "?" (its photo once shown), its name, and its clues. */
.mo-slot[b-v08ur94780] {
	display: grid;
	justify-items: center;
	gap: .4rem;
	padding: .75rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.mo-slot-label[b-v08ur94780] {
	padding: .1rem .7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--mo-sky) 16%, white);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
}

.mo-slot.found .mo-slot-label[b-v08ur94780] {
	background: var(--mo-vivid);
	color: #fff;
}

.mo-slot-pic[b-v08ur94780] {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
	background: #1a1a1a;
}

	.mo-slot-pic img[b-v08ur94780] {
		width: 100%;
		height: 100%;
		object-fit: cover;
		animation: mo-pop-b-v08ur94780 .5s var(--mo-spring);
	}

.mo-q[b-v08ur94780] {
	color: var(--mo-sky);
	font-family: 'Bungee', sans-serif;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1;
	text-shadow: 0 0 .3em color-mix(in srgb, var(--mo-sky) 50%, transparent);
}

/* Found: a tick on the photo's corner. */
.mo-tick[b-v08ur94780] {
	position: absolute;
	top: .35rem;
	inset-inline-end: .35rem;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--mo-forest);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
	animation: mo-pop-b-v08ur94780 .5s var(--mo-spring) .15s backwards;
}

	.mo-tick svg[b-v08ur94780] {
		width: 1.1rem;
		height: 1.1rem;
		fill: #fff;
	}

.mo-slot-name[b-v08ur94780] {
	max-width: 100%;
	overflow: hidden;
	color: var(--mo-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mo-slot-company[b-v08ur94780] {
	margin-top: -.35rem;
	color: var(--mo-muted);
}

.mo-slot-missed[b-v08ur94780] {
	color: var(--mo-ember);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

/* The clues: a "?" on a dashed tile until a mistake reveals it, then its value; a new one pops. */
.mo-clues[b-v08ur94780] {
	display: grid;
	gap: .35rem;
	width: 100%;
	margin: 0;
}

	.mo-clues div[b-v08ur94780] {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: .5rem;
		padding: .3rem .6rem;
		border: 1.5px solid transparent;
		border-radius: 8px;
		background: #f7f7f7;
	}

		.mo-clues div.locked[b-v08ur94780] {
			border-color: color-mix(in srgb, var(--mo-muted) 35%, white);
			border-style: dashed;
			background: #fff;
		}

		.mo-clues div.fresh[b-v08ur94780] {
			border-color: var(--mo-vivid);
			animation: mo-pop-b-v08ur94780 .5s var(--mo-spring);
		}

	.mo-clues dt[b-v08ur94780] {
		color: var(--mo-muted);
		font-weight: 400;
	}

	.mo-clues dd[b-v08ur94780] {
		min-width: 0;
		margin: 0;
		overflow: hidden;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mo-clues .locked dd[b-v08ur94780] {
		color: var(--mo-sky);
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
	}

/* ---------- the guess ---------- */

.mo-panel[b-v08ur94780] {
	max-width: 40rem;
	margin: 1.5rem auto 0;
	padding: 1.25rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.mo-ask[b-v08ur94780] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.mo-left[b-v08ur94780] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .35rem 0 .9rem;
	color: var(--mo-muted);
}

/* The mistakes left, as arcade tokens: filled while left, hollow once spent. */
.mo-tokens[b-v08ur94780] {
	display: inline-flex;
	gap: .3rem;
}

	.mo-tokens i[b-v08ur94780] {
		width: 1rem;
		height: 1rem;
		border: 2px solid var(--mo-vivid);
		border-radius: 50%;
		transition: background .3s;
	}

		.mo-tokens i.on[b-v08ur94780] {
			background: var(--mo-vivid);
			box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
		}

.mo-verdict[b-v08ur94780] {
	margin: .75rem 0 0;
	color: var(--mo-vivid);
	animation: mo-pop-b-v08ur94780 .4s var(--mo-spring);
}

	.mo-verdict.right[b-v08ur94780] {
		color: var(--mo-forest);
		font-weight: 600;
	}

.mo-error[b-v08ur94780] {
	margin: .75rem 0 0;
	color: var(--md-error);
}

.mo-end[b-v08ur94780] {
	text-align: center;
	animation: mo-pop-b-v08ur94780 .5s var(--mo-spring);
}

	.mo-end p[b-v08ur94780] {
		margin: 0;
	}

.mo-end-title[b-v08ur94780] {
	color: var(--mo-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.mo-end-tries[b-v08ur94780] {
	margin-top: .35rem !important;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

.mo-end-next[b-v08ur94780] {
	margin-top: .25rem !important;
	color: var(--mo-muted);
}

	.mo-end-next a[b-v08ur94780] {
		color: var(--mo-vivid);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

/* ---------- signed out ---------- */

.mo-signin[b-v08ur94780] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.mo-signin p[b-v08ur94780] {
		margin: 0;
	}

.mo-go[b-v08ur94780] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--mo-sky) 60%, white), var(--mo-sky));
	color: var(--mo-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.mo-go svg[b-v08ur94780] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.mo-go:focus-visible[b-v08ur94780] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

/* ---------- narrower: the mosaic on top, the rooms side by side under it ---------- */

@media (max-width: 859.98px) {
	.mo-board[b-v08ur94780] {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"mosaic mosaic"
			"first second";
		gap: .75rem;
	}

	.mo-q[b-v08ur94780] {
		font-size: 2.25rem;
	}
}

@keyframes mo-in-b-v08ur94780 {
	from {
		opacity: 0;
		transform: scale(.97);
	}
}

@keyframes mo-pop-b-v08ur94780 {
	from {
		transform: scale(.85);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mo-mosaic-frame img[b-v08ur94780],
	.mo-slot-pic img[b-v08ur94780],
	.mo-tick[b-v08ur94780],
	.mo-clues div.fresh[b-v08ur94780],
	.mo-verdict[b-v08ur94780],
	.mo-end[b-v08ur94780] {
		animation: none;
	}

	.mo-tokens i[b-v08ur94780],
	.mo-shown-bar i[b-v08ur94780] {
		transition: none;
	}
}
/* /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;
}

/* The photo is RoomPhotoTake's (hidden when there's no image after all). */
@media (min-width: 767px) {
	.rp-hero:has(.rpt:not([hidden]))[b-s7sa4blet2] {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

		/* Beside the photo the name has half the page: sized to that column, so even the longest names
		   (~35 letters) take two lines at most. */
		.rp-hero:has(.rpt:not([hidden])) .rp-title[b-s7sa4blet2] {
			font-size: clamp(1.5rem, 7cqi, 2rem);
		}
}

.rp-intro[b-s7sa4blet2] {
	container-type: inline-size;
}

/* The name plate, as on the room's card: brushed metal, screwed on, the name engraved. Sized in em so
   the plate and its screws grow with the name; it hugs the name and wraps a long one rather than
   cutting it. */
.rp-title[b-s7sa4blet2] {
	position: relative;
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 .75rem;
	padding: .3em 1.15em .25em;
	border-radius: 8px;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .02em;
	text-align: center;
	overflow-wrap: anywhere;
	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 3px 10px rgba(0, 0, 0, .22);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(0, 0, 0, .25);
}

	/* two screw heads */
	.rp-title[b-s7sa4blet2]::before,
	.rp-title[b-s7sa4blet2]::after {
		content: "";
		position: absolute;
		top: 50%;
		width: .22em;
		height: .22em;
		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);
	}

	.rp-title[b-s7sa4blet2]::before {
		left: .4em;
	}

	.rp-title[b-s7sa4blet2]::after {
		right: .4em;
	}

.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;
}

/* The practical notes that came with the description: who it suits, ages, access, warnings. */
.rp-notes[b-s7sa4blet2] {
	margin: 0;
	padding-inline-start: 1.25rem;
	line-height: 1.6;
}

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

	.rp-notes li[b-s7sa4blet2]::marker {
		color: #5ba6da;
	}

.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: 1rem; /* DESIGN.md body step */
}

	.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: 1rem;
	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;
}

	.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: 1rem;
	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: 1rem;
}

	.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: 999px;
	border: 3px solid #1976d2; /* Vivid Blue: a personal-account touch (DESIGN.md) */
	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 #1976d2;
	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. The
   width snaps rather than eases: a width transition re-laid out the whole card grid on every frame. */
@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;
	}

	/* 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: the header stays one line, cut off at the panel's edge rather than wrapping. */
	.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-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: 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);
	}

	/* Radzen's panels box scrolls on its own (overflow: auto), which would make it the box the find tab's
	   bar, day and times stick in - and it never scrolls, so they never would. Clipped instead: nothing
	   spills out still, and they park under the strip as the page scrolls. */
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-panels {
		overflow: clip;
	}

.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;
	/* A touch lower than the tabs' own text line, leaving room for the title tab above the bar. */
	translate: 0 .65rem;
	/* 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);
}

.list-sort-box[b-9dp2gr0h53] {
	position: relative;
}

/* The full bar (~370px) beside the List/Map/Find/Partners tabs (~435px) needs a strip about 51rem wide. On
   a narrower strip (a small tablet, or beside the filters column) it stays on the tabs' row but only the
   chosen order keeps its label, the others just their icon (each keeps its aria-label) - otherwise it
   covers the last tab; narrower still, the chosen one gives up its label too. The toggle spans the strip,
   so it is the container measured. */
.list-sort-toggle[b-9dp2gr0h53] {
	container-type: inline-size;
}

@container (max-width: 52rem) {
	.list-sort-box[b-9dp2gr0h53]  .rz-button:not(.rz-state-active) .rz-button-text {
		display: none;
	}
}

@container (max-width: 41rem) {
	.list-sort-box[b-9dp2gr0h53]  .rz-button .rz-button-text {
		display: none;
	}
}

/* The bar's title: a small tab straddling its top edge at the start - half on the bar, half off, the way
   the rating badge straddles a card photo's edge - in the bar's blue on the page's paper, lifted a little. */
.list-sort-label[b-9dp2gr0h53] {
	position: absolute;
	z-index: 1;
	top: 0;
	inset-inline-start: .7rem;
	translate: 0 -55%;
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .15rem .5rem .15rem .45rem;
	border: 1px solid var(--text-primary);
	border-radius: 999px;
	background: var(--md-bg, #fff);
	color: var(--text-primary);
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	pointer-events: none;
}

	/* The page's svg rule holds icons at 24px minimum; this one is the tab's text size. */
	.list-sort-label svg[b-9dp2gr0h53] {
		width: 1em;
		height: 1em;
		min-width: 0;
		min-height: 0;
		fill: currentColor;
	}

/* Even the bare icons (~155px) beside the four tabs (~435px) don't fit one strip row below a 640px screen,
   so there 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: 639.98px) {
	.tabs-with-sort-toggle[b-9dp2gr0h53] {
		--list-sort-row-h: 3.5rem; /* the title tab's overhang, the 36px select bar and 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-top: .75rem;
		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;
		}

		/* Three labels don't fit even that row: only the chosen order keeps its label, the others show
		   just their icon (each button keeps its aria-label). */
		.list-sort-toggle[b-9dp2gr0h53]  .rz-button:not(.rz-state-active) .rz-button-text {
			display: none;
		}
}

/* The four tabs, likewise: on a phone their names (two words for the find tabs) wrapped to two lines in a
   cramped strip. There the tabs you're not on are just their icon - a touch-sized square, the name kept as
   the button's accessible name - and the one you're on spells its name out on one line and takes the rest
   of the row. */
@media (max-width: 639.98px) {
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li {
		flex: 0 0 auto;
		transition: flex-grow .3s cubic-bezier(.22, 1, .36, 1);
	}

		.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li.rz-tabview-selected {
			flex-grow: 1;
		}

	/* Filling its tab, so the one you're on centers its icon and name in the room it took. */
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav [role=tab] {
		position: relative;
		width: 100%;
		min-width: 3.25rem;
		min-height: 2.75rem;
		padding-inline: .75rem;
		white-space: nowrap;
	}

	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li:not(.rz-tabview-selected) .rz-tabview-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	/* ...and its icon gives up the gap Radzen keeps beside the name. */
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li:not(.rz-tabview-selected) .rz-tabview-icon {
		margin: 0;
	}

	/* The name slides out from its icon as the tab is picked. */
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li.rz-tabview-selected .rz-tabview-title {
		animation: tab-name-in-b-9dp2gr0h53 .3s cubic-bezier(.22, 1, .36, 1) both;
	}
}

@keyframes tab-name-in-b-9dp2gr0h53 {
	from {
		opacity: 0;
		translate: calc(var(--dir, 1) * .5rem) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li,
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav .rz-tabview-title {
		transition: none;
		animation: none;
	}
}

/* The Find partners tab's badge: others' calls for games on the visitor's to-do list (PartnerCallsForMe). A
   Vivid Blue counter - it's about you - after the tab's name, on the icon's corner where a phone shows the
   icon alone. It pops in when the calls arrive (or their number changes: it's keyed by it), then pulses
   three times and rests. */
.tab-badge[b-9dp2gr0h53] {
	position: relative;
	min-width: 1.2rem;
	height: 1.2rem;
	margin-inline-start: .45rem;
	padding-inline: .3rem;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: #1976d2;
	color: #fff;
	box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .2);
	font-family: 'Bungee', sans-serif;
	font-size: .7rem;
	line-height: 1;
	animation: tab-badge-pop-b-9dp2gr0h53 .5s cubic-bezier(.34, 1.56, .64, 1) both, tab-badge-pulse-b-9dp2gr0h53 1.8s ease-out .6s 3;
}

@media (max-width: 639.98px) {
	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-nav > li:not(.rz-tabview-selected) .tab-badge {
		position: absolute;
		top: .2rem;
		inset-inline-end: .3rem;
		margin: 0;
	}
}

@keyframes tab-badge-pop-b-9dp2gr0h53 {
	from {
		opacity: 0;
		scale: .3;
	}
}

@keyframes tab-badge-pulse-b-9dp2gr0h53 {
	from {
		box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(25, 118, 210, .55);
	}

	to {
		box-shadow: 0 0 0 2px #fff, 0 0 0 11px rgba(25, 118, 210, 0);
	}
}

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

/* Below MainLayout's breakpoint its article keeps 1.5rem gutters, the page's container and row add theirs,
   and the List/Map panel pads Radzen's 1.25rem inside all that - a phone's one card got ~265px of a 375px
   screen, its city and company cut to a letter or two. The page reaches out into the article's gutter to
   stand .5rem off the screen's edges, and the panel keeps just a .5rem frame around the cards. */
@media (max-width: 766.98px) {
	/* Bootstrap's width: 100% would only shift it aside; auto lets the negative margins widen it. */
	.container-fluid[b-9dp2gr0h53] {
		width: auto;
		margin-inline: -1rem;
		padding-inline: 0;
	}

	.tabs-with-sort-toggle[b-9dp2gr0h53] >  .main-tabs-wrapper > .rz-tabview-panels > .rz-tabview-panel {
		padding-inline: .5rem;
	}
}

/* RoomFilters (the default panel; the class name dates from when it was the ?filters=alt proposal).
   Beside the list from xl, where it takes a fixed column that gives way to the coin rail when
   collapsed; the list (.rooms-main, flex 1) takes the rest. The column snaps rather than eases - a
   width transition re-laid out the whole card grid on every frame - and the motion is the panel's
   own: the card slides in (rf-card-in), the rail glides out to the gutter (below). */
@media (min-width: 1200px) {
	.filters-aside-alt[b-9dp2gr0h53] {
		width: 21.5rem;
	}

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

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

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

/* ---------- map: a door's room cards ----------
   A tap on a door grows its branch's cards out of it: the scrim keeps the door in a spotlight, the row of
   cards starts at the door as a dot and lands centred on the spring, and a tap anywhere else (or Esc) folds
   it back into the door. The overlay is a size container, so 50cqw/50cqh is its centre - where the row lands. */
.map-cards[b-9dp2gr0h53] {
	--door-x: 50cqw;
	--door-y: 50cqh;
	position: fixed;
	inset: 0;
	z-index: 2900;
	container-type: size;
	display: flex;
	overflow-y: auto;
	background: radial-gradient(circle at var(--door-x) var(--door-y), rgba(20, 20, 24, 0) 0 30px, rgba(20, 20, 24, .55) 76px);
	animation: map-cards-fade-b-9dp2gr0h53 .25s ease-out both;
}

/* Several rooms behind one door: side by side, a swipe apart. Auto margins centre the row while it fits
   and keep its start reachable once it doesn't. */
.map-cards-row[b-9dp2gr0h53] {
	display: flex;
	gap: 1rem;
	max-width: 100%;
	margin: auto;
	padding: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	animation: map-cards-burst-b-9dp2gr0h53 .6s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

.map-card[b-9dp2gr0h53] {
	flex: 0 0 min(19rem, calc(100cqw - 3.5rem));
	scroll-snap-align: center;
}

	.map-card:first-child[b-9dp2gr0h53] {
		margin-inline-start: auto;
	}

	.map-card:last-child[b-9dp2gr0h53] {
		margin-inline-end: auto;
	}

	/* The burst is their entrance; the catalogue's own rise would only blur it. */
	.map-card[b-9dp2gr0h53]  .rc {
		animation: none;
	}

@keyframes map-cards-burst-b-9dp2gr0h53 {
	from {
		transform: translate(calc(var(--door-x) - 50cqw), calc(var(--door-y) - 50cqh)) scale(.04);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
}

.map-cards.closing[b-9dp2gr0h53] {
	animation: map-cards-fade-b-9dp2gr0h53 .2s ease-in reverse both;
}

	.map-cards.closing .map-cards-row[b-9dp2gr0h53] {
		animation: map-cards-back-b-9dp2gr0h53 .2s cubic-bezier(.5, 0, .75, 0) both;
	}

@keyframes map-cards-back-b-9dp2gr0h53 {
	to {
		transform: translate(calc(var(--door-x) - 50cqw), calc(var(--door-y) - 50cqh)) scale(.04);
		opacity: 0;
	}
}

@keyframes map-cards-fade-b-9dp2gr0h53 {
	from {
		opacity: 0;
	}
}

/* A thumb-sized close button, pinned to the corner whatever the cards scroll to. */
.map-cards-x[b-9dp2gr0h53] {
	position: fixed;
	top: 1rem;
	inset-inline-end: 1rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	cursor: pointer;
	animation: map-cards-fade-b-9dp2gr0h53 .2s ease-out .3s backwards;
}

	.map-cards-x svg[b-9dp2gr0h53] {
		width: 22px;
		height: 22px;
		min-width: 0;
		min-height: 0;
		fill: #1f1f1f;
	}

	.map-cards-x:hover[b-9dp2gr0h53] {
		background: #f7f7f7;
	}

/* Reduced motion: no burst and no fold - the cards and the scrim simply fade. */
@media (prefers-reduced-motion: reduce) {
	.map-cards-row[b-9dp2gr0h53],
	.map-cards.closing .map-cards-row[b-9dp2gr0h53] {
		animation: none;
	}
}
/* /Components/Pages/WhereGame.razor.rz.scp.css */
/* "Where's the room?". Tokens follow DESIGN.md and the other games: Sky Blue accents, Vivid Blue for what's about the
   player, Fredoka names, Bungee digits (pin numbers, tokens, stat tiles), Lunasima body, soft shadows, the overshoot
   spring gated on reduced motion. The map sits where Blurred room's photo does, in a rounded frame, its legend under
   it; beside it (under it on a phone) the question, the name's tiles once earned, today's guess tokens, the room search
   and the guesses with their distances. The distance colours run from cold to hot: Vivid Blue far off, Sky, amber,
   orange, Ember near; the very same address a deeper red that pulses; the find, and the room's flag, Forest.
   The pins are drawn by site.js inside the map, so their rules reach in with ::deep. */

.wh[b-n1m9m68a8t] {
	--wh-sky: var(--text-primary, #5ba6da);
	--wh-vivid: #1976d2;
	--wh-ink: #1f1f1f;
	--wh-muted: var(--md-muted, #5f6368);
	--wh-forest: #1B5E20;
	--wh-ember: #D84315;
	--wh-spring: cubic-bezier(.34, 1.56, .64, 1);
	--wh-ease: cubic-bezier(.22, 1, .36, 1);
	max-width: 72rem;
	margin-inline: auto;
	padding-block: 1rem 3rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--wh-ink);
}

/* The distance colours, for the pins, the list and the legend: --heat, and the text that reads on it. */
.wh[b-n1m9m68a8t]  .wh-h1 { --heat: #1976d2; --on-heat: #fff; }
.wh[b-n1m9m68a8t]  .wh-h2 { --heat: #5ba6da; --on-heat: #10293b; }
.wh[b-n1m9m68a8t]  .wh-h3 { --heat: #F9A825; --on-heat: #1f1f1f; }
.wh[b-n1m9m68a8t]  .wh-h4 { --heat: #EF6C00; --on-heat: #fff; }
.wh[b-n1m9m68a8t]  .wh-h5 { --heat: #D84315; --on-heat: #fff; }
.wh[b-n1m9m68a8t]  .wh-same { --heat: #B71C1C; --on-heat: #fff; }
.wh[b-n1m9m68a8t]  .wh-right,
.wh[b-n1m9m68a8t]  .wh-flag { --heat: #1B5E20; --on-heat: #fff; }
.wh[b-n1m9m68a8t]  .wh-none { --heat: #9e9e9e; --on-heat: #fff; }

/* The link back, and the week picker at the row's other end. */
.wh-top[b-n1m9m68a8t] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	min-height: 2.25rem;
}

.wh-back[b-n1m9m68a8t] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	color: var(--wh-vivid);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	text-decoration: none;
}

	.wh-back svg[b-n1m9m68a8t] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

	.wh-back:hover[b-n1m9m68a8t] {
		text-decoration: underline;
	}

.wh-head[b-n1m9m68a8t] {
	margin-block: .5rem 1.25rem;
}

/* The title, and the convertible driving along beside it on its road. */
.wh-title-row[b-n1m9m68a8t] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .25rem .75rem;
}

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

.wh-sub[b-n1m9m68a8t] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .75rem;
	margin: .4rem 0 0;
	color: var(--wh-muted);
}

	.wh-sub bdi[b-n1m9m68a8t] {
		white-space: nowrap;
	}

.wh-sep[b-n1m9m68a8t] {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wh-muted) 60%, white);
}

.wh-cadence[b-n1m9m68a8t] {
	padding: .1rem .6rem;
	border: 1.5px solid var(--wh-sky);
	border-radius: 999px;
	color: var(--wh-sky);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
}

	/* A past week, played late: the chip filled. */
	.wh-cadence.wh-past[b-n1m9m68a8t] {
		border-color: var(--wh-vivid);
		background: var(--wh-vivid);
		color: #fff;
	}

.wh-note[b-n1m9m68a8t] {
	color: var(--wh-muted);
}

.wh-loading[b-n1m9m68a8t] {
	position: relative;
	min-height: 18rem;
}

/* ---------- the convertible ----------
   Drawn facing the way Hebrew reads (left); mirrored in English, so it always drives on into the line. It drives
   in once, then keeps driving where it is: wheels turning, the road's dashes running back, the body bobbing on its
   springs, the ear, the scarf and the wind blowing back, a puff from the exhaust, and a hop over a bump now and then. */

.wh-car[b-n1m9m68a8t] {
	flex: none;
	width: clamp(5.5rem, 17vw, 11rem);
	height: auto;
	margin-bottom: -.35rem;
	/* It drives in from behind its own edge, never across the title. */
	overflow: hidden;
	transform: scaleX(var(--dir, 1));
}

	/* The moving parts turn about their own boxes (not the drawing's corner, as the head's scale does). */
	.wh-hop[b-n1m9m68a8t],
	.wh-wheel[b-n1m9m68a8t],
	.wh-ear[b-n1m9m68a8t],
	.wh-scarf[b-n1m9m68a8t],
	.wh-puffs circle[b-n1m9m68a8t] {
		transform-box: fill-box;
	}

.wh-drive[b-n1m9m68a8t] {
	animation: wh-drive-in-b-n1m9m68a8t 1.4s var(--wh-ease) backwards;
}

.wh-hop[b-n1m9m68a8t] {
	transform-origin: 50% 100%;
	animation: wh-hop-b-n1m9m68a8t 6s ease-in-out 1.6s infinite;
}

.wh-bob[b-n1m9m68a8t] {
	animation: wh-bob-b-n1m9m68a8t .36s ease-in-out infinite alternate;
}

.wh-wheel[b-n1m9m68a8t] {
	transform-origin: center;
	animation: wh-roll-b-n1m9m68a8t .5s linear infinite;
}

.wh-dashes[b-n1m9m68a8t] {
	animation: wh-road-b-n1m9m68a8t .32s linear infinite;
}

.wh-ear[b-n1m9m68a8t] {
	transform-origin: 30% 95%;
	animation: wh-flap-b-n1m9m68a8t .28s ease-in-out infinite alternate;
}

.wh-scarf[b-n1m9m68a8t] {
	transform-origin: 0 50%;
	animation: wh-flutter-b-n1m9m68a8t .22s ease-in-out infinite alternate;
}

.wh-wind line[b-n1m9m68a8t] {
	animation: wh-wind-b-n1m9m68a8t .7s linear infinite;
}

	.wh-wind line:nth-child(2)[b-n1m9m68a8t] {
		animation-delay: -.25s;
	}

	.wh-wind line:nth-child(3)[b-n1m9m68a8t] {
		animation-delay: -.5s;
	}

.wh-puffs circle[b-n1m9m68a8t] {
	transform-origin: center;
	animation: wh-puff-b-n1m9m68a8t 1.3s ease-out infinite;
}

	.wh-puffs circle:nth-child(2)[b-n1m9m68a8t] {
		animation-delay: -.65s;
	}

@keyframes wh-drive-in-b-n1m9m68a8t {
	from {
		transform: translateX(260px);
	}
}

@keyframes wh-hop-b-n1m9m68a8t {
	0%, 86%, 100% {
		transform: none;
	}

	89% {
		transform: translateY(-7px) rotate(-3deg);
	}

	92% {
		transform: translateY(0) rotate(1deg);
	}

	95% {
		transform: translateY(-2px);
	}
}

@keyframes wh-bob-b-n1m9m68a8t {
	to {
		transform: translateY(-1.5px);
	}
}

@keyframes wh-roll-b-n1m9m68a8t {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes wh-road-b-n1m9m68a8t {
	to {
		stroke-dashoffset: -26;
	}
}

@keyframes wh-flap-b-n1m9m68a8t {
	to {
		transform: rotate(16deg);
	}
}

@keyframes wh-flutter-b-n1m9m68a8t {
	to {
		transform: skewY(-7deg) scaleX(1.06);
	}
}

@keyframes wh-wind-b-n1m9m68a8t {
	from {
		transform: translateX(-6px);
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	to {
		transform: translateX(22px);
		opacity: 0;
	}
}

@keyframes wh-puff-b-n1m9m68a8t {
	from {
		transform: scale(.4);
		opacity: .9;
	}

	to {
		transform: translate(18px, -8px) scale(1.5);
		opacity: 0;
	}
}

/* ---------- the map and the guess, side by side ---------- */

.wh-play[b-n1m9m68a8t] {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr);
	align-items: start;
	gap: 1.5rem;
}

.wh-mapbox[b-n1m9m68a8t] {
	margin: 0;
}

.wh-map[b-n1m9m68a8t] {
	height: clamp(22rem, 64vh, 40rem);
	overflow: hidden;
	border-radius: 18px;
	background: #e8eef2;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

/* Under the map: far to near, then the very same address. */
.wh-legend[b-n1m9m68a8t] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .6rem;
	margin-top: .6rem;
	color: var(--wh-muted);
	font-size: .9rem;
}

.wh-scale[b-n1m9m68a8t] {
	display: inline-flex;
	gap: 3px;
}

	.wh-scale .wh-chip[b-n1m9m68a8t] {
		border-radius: 4px;
	}

		.wh-scale .wh-chip:first-child[b-n1m9m68a8t] {
			border-start-start-radius: 999px;
			border-end-start-radius: 999px;
		}

		.wh-scale .wh-chip:last-child[b-n1m9m68a8t] {
			border-start-end-radius: 999px;
			border-end-end-radius: 999px;
		}

.wh-chip[b-n1m9m68a8t] {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .05rem .5rem;
	border-radius: 999px;
	background: var(--heat);
	color: var(--on-heat);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: .85rem;
	line-height: 1.4;
	white-space: nowrap;
}

	.wh-chip svg[b-n1m9m68a8t] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

/* ---------- the pins on the map (site.js whereMap) ----------
   A tag with the distance over a round head with the guess's number, on a tip at the spot. */

.wh-map[b-n1m9m68a8t]  .wh-pin {
	display: grid;
	justify-items: center;
	font-family: 'Fredoka', system-ui, sans-serif;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
	transform-origin: 50% 100%;
}

.wh-map[b-n1m9m68a8t]  .wh-pin-tag {
	margin-bottom: 3px;
	padding: 0 8px;
	border: 2px solid var(--heat);
	border-radius: 999px;
	background: #fff;
	color: #1f1f1f;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	white-space: nowrap;
}

	.wh-map[b-n1m9m68a8t]  .wh-pin-tag:empty {
		display: none;
	}

.wh-map[b-n1m9m68a8t]  .wh-pin-head {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border: 2.5px solid #fff;
	border-radius: 50%;
	background: var(--heat);
	color: var(--on-heat);
	font-family: 'Bungee', sans-serif;
	font-size: 12px;
	line-height: 1;
}

	.wh-map[b-n1m9m68a8t]  .wh-pin-head svg {
		width: 17px;
		height: 17px;
		fill: currentColor;
	}

.wh-map[b-n1m9m68a8t]  .wh-pin-tip {
	width: 0;
	height: 0;
	margin-top: -1px;
	border-inline: 6px solid transparent;
	border-top: 9px solid var(--heat);
}

/* The very same address: a bigger head in a pulsing ring. The find and the flag: bigger still, its tag in Forest. */
.wh-map[b-n1m9m68a8t]  .wh-same .wh-pin-head {
	width: 32px;
	height: 32px;
	animation: wh-ring-b-n1m9m68a8t 1.6s ease-out infinite;
}

.wh-map[b-n1m9m68a8t]  .wh-right .wh-pin-head,
.wh-map[b-n1m9m68a8t]  .wh-flag .wh-pin-head {
	width: 36px;
	height: 36px;
}

.wh-map[b-n1m9m68a8t]  .wh-right .wh-pin-tag,
.wh-map[b-n1m9m68a8t]  .wh-flag .wh-pin-tag {
	background: var(--heat);
	color: #fff;
}

.wh-map[b-n1m9m68a8t]  .wh-drop {
	animation: wh-drop-b-n1m9m68a8t .6s var(--wh-spring) backwards;
}

.wh-map[b-n1m9m68a8t]  .wh-bounce {
	animation: wh-bounce-b-n1m9m68a8t .6s var(--wh-spring);
}

@keyframes wh-drop-b-n1m9m68a8t {
	from {
		transform: translateY(-46px) scale(.5);
		opacity: 0;
	}
}

@keyframes wh-bounce-b-n1m9m68a8t {
	35% {
		transform: translateY(-14px) scale(1.12);
	}
}

@keyframes wh-ring-b-n1m9m68a8t {
	from {
		box-shadow: 0 0 0 0 rgba(183, 28, 28, .55);
	}

	to {
		box-shadow: 0 0 0 14px rgba(183, 28, 28, 0);
	}
}

/* ---------- the panel ---------- */

.wh-panel[b-n1m9m68a8t] {
	padding: 1.25rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.wh-ask[b-n1m9m68a8t] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.wh-how[b-n1m9m68a8t] {
	margin: .35rem 0 0;
	color: var(--wh-muted);
}

/* The name, earned at its address, as it's typed: a keyboard on an arcade cabinet's dark ground (the Game center's
   sign, Coded description's board) - numbers and symbols, then the three letter rows - each row's dark keys lit in
   Sky Blue as bright as the share of the name's characters on it (a faint glow for none), the share at its end in Sky
   Blue. */
.wh-spelled[b-n1m9m68a8t] {
	--wh-cab: #1a1a1a;
	--wh-cap: #2e2e2e;
	margin-top: .75rem;
	padding: .75rem .9rem .8rem;
	border-radius: 14px;
	background: var(--wh-cab);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}

	.wh-spelled p[b-n1m9m68a8t] {
		margin: 0 0 .65rem;
		color: color-mix(in srgb, var(--wh-sky) 35%, white);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

.wh-keys[b-n1m9m68a8t] {
	--key: 1.25rem;
	display: grid;
	gap: 4px;
	justify-content: center;
}

.wh-keyrow[b-n1m9m68a8t] {
	display: grid;
	grid-template-columns: 1fr 3rem;
	align-items: center;
	gap: .5rem;
}

	.wh-keyrow b[b-n1m9m68a8t] {
		color: var(--wh-sky);
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		font-size: .95rem;
		line-height: 1;
	}

.wh-caps[b-n1m9m68a8t] {
	display: flex;
	justify-content: center;
	gap: 2px;
}

	.wh-caps i[b-n1m9m68a8t] {
		display: grid;
		place-items: center;
		width: var(--key);
		height: calc(var(--key) * 1.1);
		border-radius: 4px;
		/* A faint glow on every key, so a 0% row is the same keyboard, only dimmest; the share lights it the rest of the way. */
		background: color-mix(in srgb, var(--wh-sky) calc(12% + var(--share) * .88%), var(--wh-cap));
		color: #cfd8de;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-style: normal;
		font-weight: 600;
		font-size: .7rem;
		line-height: 1;
		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45);
	}

	/* The "?!" key: the symbols beside the digits. */
	.wh-caps i:nth-child(11)[b-n1m9m68a8t] {
		width: calc(var(--key) * 1.4);
	}

	/* A brightly lit row: its letters dark, to read on the light. */
	.wh-keyrow.lit .wh-caps i[b-n1m9m68a8t] {
		color: #0d2a3d;
	}

/* Just earned: the rows slide in one after another, top to bottom. */
.wh-spelled.fresh[b-n1m9m68a8t] {
	animation: wh-pop-b-n1m9m68a8t .45s var(--wh-spring);
}

	.wh-spelled.fresh .wh-keyrow[b-n1m9m68a8t] {
		animation: wh-deal-b-n1m9m68a8t .5s var(--wh-spring) backwards;
		animation-delay: calc(var(--r) * 120ms + 150ms);
	}

@keyframes wh-deal-b-n1m9m68a8t {
	from {
		transform: translateX(-.8rem);
		opacity: 0;
	}
}

.wh-today[b-n1m9m68a8t] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .9rem 0 .9rem;
	color: var(--wh-muted);
}

/* Today's guesses as arcade tokens: filled while left, hollow once spent. */
.wh-tokens[b-n1m9m68a8t] {
	display: inline-flex;
	gap: .3rem;
}

	.wh-tokens i[b-n1m9m68a8t] {
		width: 1rem;
		height: 1rem;
		border: 2px solid var(--wh-vivid);
		border-radius: 50%;
		transition: background .3s, transform .35s var(--wh-spring);
	}

		.wh-tokens i.on[b-n1m9m68a8t] {
			background: var(--wh-vivid);
			box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2);
		}

.wh-wait[b-n1m9m68a8t] {
	margin: 0;
	padding: .75rem 1rem;
	border-radius: 12px;
	background: #f7f7f7;
}

.wh-verdict[b-n1m9m68a8t] {
	margin: .75rem 0 0;
	color: var(--wh-vivid);
	animation: wh-pop-b-n1m9m68a8t .4s var(--wh-spring);
}

	.wh-verdict.same[b-n1m9m68a8t] {
		color: #B71C1C;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
	}

.wh-error[b-n1m9m68a8t] {
	margin: .75rem 0 0;
	color: var(--md-error);
}

/* ---------- the guesses, each with its distance ---------- */

.wh-list-title[b-n1m9m68a8t] {
	margin: 1.25rem 0 .5rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
}

.wh-list[b-n1m9m68a8t] {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.wh-list li.fresh[b-n1m9m68a8t] {
		animation: wh-pop-b-n1m9m68a8t .45s var(--wh-spring);
	}

.wh-row[b-n1m9m68a8t] {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: .6rem;
	width: 100%;
	padding: .4rem .6rem;
	border: 0;
	border-radius: 12px;
	background: #f7f7f7;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background .15s;
}

	.wh-row:hover:not(:disabled)[b-n1m9m68a8t] {
		background: #eef4f9;
	}

	.wh-row:focus-visible[b-n1m9m68a8t] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

	.wh-row:disabled[b-n1m9m68a8t] {
		cursor: default;
	}

.wh-list li.right .wh-row[b-n1m9m68a8t] {
	background: color-mix(in srgb, var(--wh-forest) 12%, white);
}

/* The guess's number in its pin's colour, as on the map. */
.wh-n[b-n1m9m68a8t] {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--heat);
	color: var(--on-heat);
	font-family: 'Bungee', sans-serif;
	font-size: .8rem;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.wh-room[b-n1m9m68a8t] {
	display: grid;
	min-width: 0;
	line-height: 1.25;
}

	.wh-room small[b-n1m9m68a8t] {
		color: var(--wh-muted);
	}

.wh-far[b-n1m9m68a8t] {
	display: grid;
	justify-items: end;
	gap: .1rem;
}

.wh-closest[b-n1m9m68a8t] {
	color: var(--wh-ember);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: .75rem;
}

.wh-day[b-n1m9m68a8t] {
	color: var(--wh-muted);
	white-space: nowrap;
}

.wh-list-hint[b-n1m9m68a8t] {
	margin: .5rem 0 0;
	color: var(--wh-muted);
	font-size: .9rem;
}

/* ---------- found, or out of guesses ---------- */

.wh-won[b-n1m9m68a8t] {
	display: grid;
	justify-items: center;
	text-align: center;
	animation: wh-pop-b-n1m9m68a8t .5s var(--wh-spring);
}

	.wh-won p[b-n1m9m68a8t] {
		margin: 0;
	}

.wh-won-photo[b-n1m9m68a8t] {
	width: 100%;
	max-height: 12rem;
	margin-bottom: .75rem;
	border-radius: 12px;
	object-fit: cover;
}

.wh-won-title[b-n1m9m68a8t] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--wh-forest);
}

.wh-won-room[b-n1m9m68a8t] {
	display: grid;
	margin-top: .25rem !important;
}

	.wh-won-room a[b-n1m9m68a8t] {
		color: var(--wh-ink);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: 1.25rem;
	}

	.wh-won-room small[b-n1m9m68a8t] {
		color: var(--wh-muted);
	}

.wh-won-tries[b-n1m9m68a8t] {
	margin-top: .5rem !important;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

.wh-won-next[b-n1m9m68a8t] {
	margin-top: .25rem !important;
	color: var(--wh-muted);
}

	.wh-won-next a[b-n1m9m68a8t] {
		color: var(--wh-vivid);
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

/* Out of guesses: the room shown all the same, the title in Ember. */
.wh-lost .wh-won-title[b-n1m9m68a8t] {
	color: var(--wh-ember);
}

/* ---------- signed out ---------- */

.wh-signin[b-n1m9m68a8t] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.wh-signin p[b-n1m9m68a8t] {
		margin: 0;
	}

.wh-go[b-n1m9m68a8t] {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wh-sky) 60%, white), var(--wh-sky));
	color: var(--wh-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.wh-go svg[b-n1m9m68a8t] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.wh-go:focus-visible[b-n1m9m68a8t] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

@keyframes wh-pop-b-n1m9m68a8t {
	from {
		transform: scale(.85);
		opacity: 0;
	}
}

/* ---------- narrower: the guess under the map ---------- */

@media (max-width: 899.98px) {
	.wh-play[b-n1m9m68a8t] {
		grid-template-columns: minmax(0, 1fr);
	}

	.wh-map[b-n1m9m68a8t] {
		height: clamp(20rem, 58vh, 32rem);
	}
}

@media (max-width: 575.98px) {
	.wh-row[b-n1m9m68a8t] {
		grid-template-columns: auto 1fr auto;
	}

	.wh-day[b-n1m9m68a8t] {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wh-car *[b-n1m9m68a8t],
	.wh-map[b-n1m9m68a8t]  .wh-pin,
	.wh-map[b-n1m9m68a8t]  .wh-pin-head,
	.wh-spelled[b-n1m9m68a8t],
	.wh-spelled .wh-keyrow[b-n1m9m68a8t],
	.wh-verdict[b-n1m9m68a8t],
	.wh-list li[b-n1m9m68a8t],
	.wh-won[b-n1m9m68a8t] {
		animation: none !important;
	}

	.wh-tokens i[b-n1m9m68a8t] {
		transition: none;
	}
}
/* /Components/Shared/AdBanner.razor.rz.scp.css */
/* The sponsored banner (AdBanner.razor): the navbar's on desktop, the footer's on phones. */

.ark-ad-link[b-ewtppwl8gj] {
	position: relative;
	display: block;
	max-width: 100%;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

	/* As tall as --ad-h, unless the space is too narrow for that - then it narrows, keeping its shape. */
	.ark-ad-img[b-ewtppwl8gj] {
		display: block;
		width: calc(var(--ad-h, 64px) * 300 / 64);
		max-width: 100%;
		height: auto;
	}

/* ---------- Pop: the desktop header's ---------- */

.ark-ad-link.pop[b-ewtppwl8gj] {
	transform-origin: top center; /* grows down over the page - up would run off the top of the screen */
	transition: transform .3s ease, box-shadow .3s ease;
}

	/* Hover or keyboard focus: pops out to the banner's full size (126px tall, its double-size image near
	   1:1), with the site's springy overshoot and a little tilt. A short delay first, so the mouse passing
	   over the header on its way to the menu doesn't set it off. */
	.ark-ad-link.pop:hover[b-ewtppwl8gj],
	.ark-ad-link.pop:focus-visible[b-ewtppwl8gj] {
		z-index: 5;
		transform: scale(2.25) rotate(-1.5deg);
		box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
		transition: transform .55s var(--spring, cubic-bezier(.34, 1.56, .64, 1)) .1s, box-shadow .3s ease .1s;
	}

	/* The hacked-screen glitch, in three layers over the image, all showing the banner (--ad-img, set on
	   the link): a red and a cyan copy screened over it, split sideways (chromatic aberration), and torn
	   strips of the plain image jumping further still - while the image itself skews and flickers. A burst
	   rides along with the pop-out, then a short one every 2.6s while it stays open. steps(): each frame
	   holds, then snaps - a glitch doesn't ease. */
	.ark-ad-link.pop[b-ewtppwl8gj]::before,
	.ark-ad-link.pop[b-ewtppwl8gj]::after,
	.ark-ad-tear[b-ewtppwl8gj] {
		content: "";
		position: absolute;
		inset: 0;
		background-image: var(--ad-img);
		background-size: 100% 100%;
		opacity: 0;
		pointer-events: none;
	}

	.ark-ad-link.pop[b-ewtppwl8gj]::before,
	.ark-ad-link.pop[b-ewtppwl8gj]::after {
		background-image: linear-gradient(var(--glitch-tint), var(--glitch-tint)), var(--ad-img);
		background-blend-mode: multiply; /* keeps one color channel of the image */
		mix-blend-mode: screen;
	}

	.ark-ad-link.pop[b-ewtppwl8gj]::before {
		--glitch-tint: #ff1744;
	}

	.ark-ad-link.pop[b-ewtppwl8gj]::after {
		--glitch-tint: #00e5ff;
	}

	.ark-ad-link.pop:hover[b-ewtppwl8gj]::before,
	.ark-ad-link.pop:focus-visible[b-ewtppwl8gj]::before {
		animation: ark-glitch-red-b-ewtppwl8gj 2.6s steps(1, end) .1s infinite;
	}

	.ark-ad-link.pop:hover[b-ewtppwl8gj]::after,
	.ark-ad-link.pop:focus-visible[b-ewtppwl8gj]::after {
		animation: ark-glitch-cyan-b-ewtppwl8gj 2.6s steps(1, end) .1s infinite;
	}

	.ark-ad-link.pop:hover .ark-ad-tear[b-ewtppwl8gj],
	.ark-ad-link.pop:focus-visible .ark-ad-tear[b-ewtppwl8gj] {
		animation: ark-glitch-tear-b-ewtppwl8gj 2.6s steps(1, end) .1s infinite;
	}

	.ark-ad-link.pop:hover .ark-ad-img[b-ewtppwl8gj],
	.ark-ad-link.pop:focus-visible .ark-ad-img[b-ewtppwl8gj] {
		animation: ark-glitch-jitter-b-ewtppwl8gj 2.6s steps(1, end) .1s infinite;
	}

/* Offsets are in the banner's own pixels - the pop-out scales them up 2.25x on screen. */
@keyframes ark-glitch-red-b-ewtppwl8gj {
	0% { opacity: 1; clip-path: inset(6% 0 58% 0); transform: translateX(-5px); }
	3% { clip-path: inset(50% 0 18% 0); transform: translateX(4px); }
	6% { clip-path: inset(22% 0 44% 0); transform: translateX(-3px); }
	9% { clip-path: inset(68% 0 4% 0); transform: translateX(6px); }
	12% { clip-path: inset(0 0 70% 0); transform: translateX(-4px); }
	15% { clip-path: inset(36% 0 30% 0); transform: translateX(3px); }
	18%, 100% { opacity: 0; }
}

@keyframes ark-glitch-cyan-b-ewtppwl8gj {
	0% { opacity: 1; clip-path: inset(56% 0 12% 0); transform: translateX(5px); }
	3% { clip-path: inset(10% 0 60% 0); transform: translateX(-4px); }
	6% { clip-path: inset(74% 0 2% 0); transform: translateX(3px); }
	9% { clip-path: inset(18% 0 50% 0); transform: translateX(-6px); }
	12% { clip-path: inset(44% 0 26% 0); transform: translateX(4px); }
	15% { clip-path: inset(4% 0 72% 0); transform: translateX(-3px); }
	18%, 100% { opacity: 0; }
}

@keyframes ark-glitch-tear-b-ewtppwl8gj {
	0% { opacity: 1; clip-path: inset(44% 0 40% 0); transform: translateX(10px); }
	4% { clip-path: inset(14% 0 74% 0); transform: translateX(-12px); }
	8% { clip-path: inset(66% 0 20% 0); transform: translateX(9px); }
	12% { clip-path: inset(28% 0 60% 0); transform: translateX(-10px); }
	16%, 100% { opacity: 0; }
}

@keyframes ark-glitch-jitter-b-ewtppwl8gj {
	0% { transform: translateX(3px) skewX(-6deg); filter: hue-rotate(40deg) saturate(1.8); }
	3% { transform: translateX(-3px) skewX(4deg); filter: none; }
	6% { transform: translateX(2px); filter: hue-rotate(-30deg) contrast(1.4); }
	9% { transform: translateX(-2px) skewX(-3deg); filter: invert(.15); }
	12% { transform: translateX(1px); filter: brightness(1.5); }
	15% { transform: skewX(5deg); filter: none; }
	18%, 100% { transform: none; filter: none; }
}

/* Reduced motion: the pop still shows the full size, at once and without the tilt or the glitch. */
@media (prefers-reduced-motion: reduce) {
	.ark-ad-link.pop[b-ewtppwl8gj],
	.ark-ad-link.pop:hover[b-ewtppwl8gj],
	.ark-ad-link.pop:focus-visible[b-ewtppwl8gj] {
		transition: none;
	}

		.ark-ad-link.pop:hover[b-ewtppwl8gj]::before,
		.ark-ad-link.pop:hover[b-ewtppwl8gj]::after,
		.ark-ad-link.pop:hover .ark-ad-tear[b-ewtppwl8gj],
		.ark-ad-link.pop:hover .ark-ad-img[b-ewtppwl8gj],
		.ark-ad-link.pop:focus-visible[b-ewtppwl8gj]::before,
		.ark-ad-link.pop:focus-visible[b-ewtppwl8gj]::after,
		.ark-ad-link.pop:focus-visible .ark-ad-tear[b-ewtppwl8gj],
		.ark-ad-link.pop:focus-visible .ark-ad-img[b-ewtppwl8gj] {
			animation: none;
		}

		.ark-ad-link.pop:hover[b-ewtppwl8gj],
		.ark-ad-link.pop:focus-visible[b-ewtppwl8gj] {
			transform: scale(2.25);
		}
}
/* /Components/Shared/FindGames.razor.rz.scp.css */
/* The catalogue's "find a game" tab. Tokens follow the room card's (DESIGN.md): Sky Blue accents,
   Fredoka names, Bungee digits, Lunasima body, soft shadows, the overshoot spring gated on reduced
   motion. The day is picked from tear-off date tiles; a day's open times read as a timetable of time
   tokens, each with the games free then as tickets. Type stays on the ramp: 1rem, headings 1.25rem. */

.fg[b-nrxil8hrls] {
	--fg-sky: var(--text-primary, #5ba6da);
	--fg-ink: #1f1f1f;
	--fg-muted: var(--md-muted, #5f6368);
	--fg-track: color-mix(in srgb, var(--fg-sky) 18%, white);
	--rc-spring: cubic-bezier(.34, 1.56, .64, 1); /* the room card's spring, same token */
	--fg-ease: cubic-bezier(.22, 1, .36, 1);
	--fg-paper: #fff; /* the tab panel's own white, behind whatever is parked */
	/* While the results scroll, the bar parks under the tab strip (site.js keeps --fg-strip-h and --fg-bar-h),
	   the day found under the bar, and each time under the day. */
	--fg-top: calc(var(--tab-strip-top, var(--ark-nav-h)) + var(--fg-strip-h, 2.75rem));
	--fg-head-h: 4.5rem;
	/* Room for the whole strip of day tiles - 15 of 3.4rem, .55rem apart - without scrolling, where the
	   catalogue's column is that wide. */
	max-width: 62rem;
	margin-inline: auto;
	padding-top: .75rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--fg-ink);
}

/* ---------- the question: day, hours, find ---------- */

.fg-bar[b-nrxil8hrls] {
	position: sticky;
	top: var(--fg-top);
	z-index: 4;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	gap: .75rem;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

.fg-field[b-nrxil8hrls] {
	display: grid;
	gap: .3rem;
	margin: 0;
	min-width: 0;
}

	.fg-field > span[b-nrxil8hrls] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		color: var(--fg-muted);
	}

	/* The hours chosen, in arcade digits beside the label. */
	.fg-hours > span > b[b-nrxil8hrls] {
		margin-inline-start: .35rem;
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		color: var(--fg-ink);
	}

/* The day: the next two weeks as tear-off date tiles in a row that scrolls, then a calendar tile for any
   later day. The chosen tile is lifted off the row, tilted and ringed, its month strip Sky Blue. */
.fg-days[b-nrxil8hrls] {
	display: flex;
	gap: .55rem;
	margin-inline: -.5rem;
	padding: .55rem .5rem .7rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--fg-sky) 45%, white) transparent;
}

.fg-day-chip[b-nrxil8hrls] {
	position: relative;
	flex: none;
	display: grid;
	justify-items: center;
	gap: .3rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fg-muted);
	font: inherit;
	cursor: pointer;
	scroll-snap-align: start;
	animation: fg-leaf-b-nrxil8hrls .5s var(--rc-spring) calc(min(var(--i, 0), 10) * 35ms) backwards;
}

	.fg-day-chip .fg-date[b-nrxil8hrls] {
		transition: transform .3s var(--rc-spring), box-shadow .3s var(--fg-ease);
	}

	.fg-day-chip:hover .fg-date[b-nrxil8hrls] {
		transform: translateY(-2px);
	}

	.fg-day-chip.on[b-nrxil8hrls] {
		color: var(--fg-ink);
	}

		.fg-day-chip.on .fg-date[b-nrxil8hrls] {
			transform: translateY(-4px) rotate(-4deg);
			box-shadow: 0 6px 14px rgba(91, 166, 218, .5), 0 0 0 2px #fff, 0 0 0 4px var(--fg-sky);
		}

			.fg-day-chip.on .fg-date b[b-nrxil8hrls] {
				background: linear-gradient(180deg, color-mix(in srgb, var(--fg-sky) 60%, white), var(--fg-sky));
				color: var(--fg-ink);
			}

	.fg-day-chip:focus-visible[b-nrxil8hrls] {
		outline: none;
	}

		.fg-day-chip:focus-visible .fg-date[b-nrxil8hrls],
		.fg-day-other:focus-within .fg-date[b-nrxil8hrls] {
			outline: 2px solid var(--md-focus);
			outline-offset: 3px;
		}

.fg-day-name[b-nrxil8hrls] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	white-space: nowrap;
}

/* Any other day: the native date picker laid over its tile, so a tap anywhere on it opens the calendar. */
.fg-day-other input[b-nrxil8hrls] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

	.fg-day-other input[b-nrxil8hrls]::-webkit-calendar-picker-indicator {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
		cursor: pointer;
	}

.fg-date-pick span[b-nrxil8hrls] {
	display: grid;
	place-items: center;
}

.fg-date-pick svg[b-nrxil8hrls] {
	width: 1.25rem;
	height: 1.25rem;
	fill: var(--fg-ink);
}

@keyframes fg-leaf-b-nrxil8hrls {
	from {
		opacity: 0;
		transform: translateY(-10px) rotateX(-70deg);
	}
}

/* The hours slider: two native range inputs laid over one track, so each handle keeps its keyboard and
   touch handling. Only the handles take the pointer, which keeps both reachable where they overlap. */
.fg-range[b-nrxil8hrls] {
	--fg-range-h: 2.75rem;
	--fg-thumb: 1.75rem;
	position: relative;
	height: var(--fg-range-h);
}

	/* The track runs between the handles' centres, filled Sky Blue between the two handles. */
	.fg-range[b-nrxil8hrls]::before {
		content: "";
		position: absolute;
		inset-inline: calc(var(--fg-thumb) / 2);
		top: 50%;
		height: 6px;
		translate: 0 -50%;
		border-radius: 999px;
		background: linear-gradient(to right,
			var(--fg-track) calc(var(--a) * 100%), var(--fg-sky) calc(var(--a) * 100%),
			var(--fg-sky) calc(var(--b) * 100%), var(--fg-track) calc(var(--b) * 100%));
	}

	.fg-range input[b-nrxil8hrls] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		background: none;
		-webkit-appearance: none;
		appearance: none;
		pointer-events: none;
	}

		.fg-range input:focus-visible[b-nrxil8hrls] {
			outline: none;
		}

		.fg-range input[b-nrxil8hrls]::-webkit-slider-runnable-track {
			height: 100%;
			background: none;
		}

		.fg-range input[b-nrxil8hrls]::-moz-range-track {
			background: none;
		}

		.fg-range input[b-nrxil8hrls]::-webkit-slider-thumb {
			-webkit-appearance: none;
			pointer-events: auto;
			box-sizing: border-box;
			width: var(--fg-thumb);
			height: var(--fg-thumb);
			margin-top: calc((var(--fg-range-h) - var(--fg-thumb)) / 2);
			border: 3px solid var(--fg-sky);
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
			cursor: grab;
		}

		.fg-range input[b-nrxil8hrls]::-moz-range-thumb {
			pointer-events: auto;
			box-sizing: border-box;
			width: var(--fg-thumb);
			height: var(--fg-thumb);
			border: 3px solid var(--fg-sky);
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
			cursor: grab;
		}

		.fg-range input:active[b-nrxil8hrls]::-webkit-slider-thumb {
			cursor: grabbing;
		}

		.fg-range input:active[b-nrxil8hrls]::-moz-range-thumb {
			cursor: grabbing;
		}

		.fg-range input:focus-visible[b-nrxil8hrls]::-webkit-slider-thumb {
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-focus) 25%, transparent), 0 2px 6px rgba(0, 0, 0, .2);
		}

		.fg-range input:focus-visible[b-nrxil8hrls]::-moz-range-thumb {
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-focus) 25%, transparent), 0 2px 6px rgba(0, 0, 0, .2);
		}

.fg-range-ends[b-nrxil8hrls] {
	display: flex;
	justify-content: space-between;
	color: var(--fg-muted);
	font-family: 'Lunasima', system-ui, sans-serif;
	font-weight: 400;
}

/* Signed out: why there's no search, and the way in. */
.fg-bar.fg-signin[b-nrxil8hrls] {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

	.fg-signin p[b-nrxil8hrls] {
		margin: 0;
	}

.fg-go[b-nrxil8hrls] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	height: 2.75rem;
	padding-block: 0;
	padding-inline: 1.4rem .55rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--fg-sky) 60%, white), var(--fg-sky));
	color: var(--fg-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: transform .2s var(--fg-ease), box-shadow .2s var(--fg-ease);
}

	.fg-signin .fg-go[b-nrxil8hrls] {
		padding-inline: 1.4rem;
	}

	.fg-go svg[b-nrxil8hrls] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.fg-go:hover:not(:disabled)[b-nrxil8hrls] {
		transform: translateY(-1px);
		box-shadow: 0 6px 14px rgba(91, 166, 218, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
	}

	.fg-go:active:not(:disabled)[b-nrxil8hrls] {
		transform: translateY(1px);
	}

	.fg-go:focus-visible[b-nrxil8hrls] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

	.fg-go:disabled[b-nrxil8hrls] {
		opacity: .5;
		cursor: default;
	}

/* How many games the search will ask: a scoreboard counter riding in the button, bumped as the filters
   change it (keyed on the number, so a new count replays its pop). */
.fg-count[b-nrxil8hrls] {
	min-width: 2rem;
	padding: .3rem .5rem .25rem;
	border-radius: 999px;
	background: var(--fg-ink);
	color: #fff;
	font-family: 'Bungee', sans-serif;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	animation: fg-pop-b-nrxil8hrls .45s var(--rc-spring) backwards;
}

@media (min-width: 576px) {
	/* The day row across the top; hours and the button on the line below. */
	.fg-bar[b-nrxil8hrls] {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.fg-day[b-nrxil8hrls] {
		grid-column: 1 / -1;
	}

	.fg-go[b-nrxil8hrls] {
		align-self: center;
	}
}

/* Parked under the tab strip while the results scroll (site.js marks it .fg-stuck), the bar folds to the
   essentials: smaller date tiles, the hours beside their slider with no scale under it, a smaller
   button. A band of the panel's paper around it hides what scrolls past its rounded corners. */
.fg-bar.fg-stuck[b-nrxil8hrls] {
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .15rem .75rem;
	margin-bottom: var(--fg-bar-fold, 0px);
	padding: .35rem .75rem .5rem;
	box-shadow: 0 0 0 .6rem var(--fg-paper), 0 4px 14px rgba(0, 0, 0, .12);
}

	.fg-stuck .fg-day[b-nrxil8hrls] {
		grid-column: 1 / -1;
	}

	.fg-stuck .fg-range-ends[b-nrxil8hrls] {
		display: none;
	}

	.fg-stuck .fg-days[b-nrxil8hrls] {
		gap: .4rem;
		padding-block: .35rem .4rem;
	}

	.fg-stuck .fg-day-chip[b-nrxil8hrls] {
		gap: .15rem;
	}

	.fg-stuck .fg-day-chip .fg-date[b-nrxil8hrls] {
		width: 3rem;
		border-radius: 8px;
	}

		.fg-stuck .fg-day-chip .fg-date b[b-nrxil8hrls] {
			min-height: 0;
			padding: .2rem 0 .15rem;
		}

		.fg-stuck .fg-day-chip .fg-date span[b-nrxil8hrls] {
			padding: .2rem 0 .25rem;
			font-size: 1rem;
		}

	.fg-stuck .fg-day-chip.on .fg-date[b-nrxil8hrls] {
		transform: translateY(-2px) rotate(-4deg);
	}

	.fg-stuck .fg-hours[b-nrxil8hrls] {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: .75rem;
	}

	.fg-stuck .fg-range[b-nrxil8hrls] {
		--fg-range-h: 2.25rem;
		--fg-thumb: 1.5rem;
	}

	.fg-stuck .fg-go[b-nrxil8hrls] {
		align-self: center;
		height: 2.25rem;
	}

/* On a phone the hours keep their label above the slider, and the button keeps just its icon and count
   (its aria-label still says it all). */
@media (max-width: 575.98px) {
	.fg-stuck .fg-hours[b-nrxil8hrls] {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.fg-stuck .fg-go[b-nrxil8hrls] {
		padding-inline: .75rem .45rem;
	}

	.fg-stuck .fg-go-text[b-nrxil8hrls] {
		display: none;
	}
}

/* ---------- progress and notes ---------- */

.fg-progress[b-nrxil8hrls] {
	display: grid;
	gap: .4rem;
	margin: 1rem 0 0;
	color: var(--fg-muted);
}

.fg-progress-bar[b-nrxil8hrls] {
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--fg-track);
}

	/* Full width, scaled to the share answered (--p, 0-1) from the reading start: no layout per answer. */
	.fg-progress-bar i[b-nrxil8hrls] {
		display: block;
		height: 100%;
		background: var(--fg-sky);
		transform: scaleX(var(--p, 0));
		transform-origin: right;
		transition: transform .3s var(--fg-ease);
	}

		.fg-progress-bar i:dir(ltr)[b-nrxil8hrls] {
			transform-origin: left;
		}

.fg-note[b-nrxil8hrls] {
	margin: 1rem 0 0;
	color: var(--fg-muted);
}

/* Too many new days this hour: a calm Sky Blue notice, not an error - it says when to come back. */
.fg-limit[b-nrxil8hrls] {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--fg-sky) 14%, white);
	color: var(--fg-ink);
	text-wrap: balance;
}

/* Where the times come from: the open-times popup's note as is (RoomCard's .rc-pop-note) - a small,
   bold amber caution, lines of even length - centred under the results in a narrower measure.
   #b45309 holds 5:1 on white. */
.fg-disclaimer[b-nrxil8hrls] {
	max-width: 34rem;
	margin: 1.25rem auto 0;
	text-align: center;
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.45;
	color: #b45309;
	text-wrap: balance;
}

.fg-more[b-nrxil8hrls] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.fg-again[b-nrxil8hrls] {
	padding: .25rem .9rem;
	border: 1.5px solid var(--fg-sky);
	border-radius: 999px;
	background: #fff;
	color: var(--fg-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- the day found: a tear-off date tile, then its timetable ---------- */

/* It parks under the bar while the times scroll, on the panel's paper, at a set height for the times to park
   under in turn; the times fade in from under its edge rather than being cut off by it. */
.fg-day-head[b-nrxil8hrls] {
	position: sticky;
	top: calc(var(--fg-top) + var(--fg-bar-h, 0px));
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: .75rem;
	height: var(--fg-head-h);
	margin: 1rem 0 .25rem;
	background: var(--fg-paper);
}

	.fg-day-head[b-nrxil8hrls]::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: 100%;
		height: .6rem;
		background: linear-gradient(var(--fg-paper), transparent);
		pointer-events: none;
	}

.fg-date[b-nrxil8hrls] {
	width: 3.4rem;
	display: grid;
	flex: none;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
	color: var(--fg-ink);
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	text-align: center;
}

	.fg-date b[b-nrxil8hrls] {
		min-height: 1.4rem;
		padding: .3rem 0 .25rem;
		background: var(--fg-ink);
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
	}

	.fg-date span[b-nrxil8hrls] {
		padding: .35rem 0 .4rem;
		font-size: 1.25rem;
	}

.fg-day-label[b-nrxil8hrls] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.fg-slots[b-nrxil8hrls] {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-slot[b-nrxil8hrls] {
	display: grid;
	grid-template-columns: 4.6rem 1fr;
	align-items: start;
	gap: .75rem;
	padding: .7rem 0;
}

	.fg-slot + .fg-slot[b-nrxil8hrls] {
		border-top: 1px dashed color-mix(in srgb, var(--md-stroke) 70%, white);
	}

/* The time token: the popup's pill (Sky Blue, ink digits), glossed and lifted, popping in like an
   arcade token when its first game arrives. It parks under the day while its games scroll past, until
   the end of its row carries it off. */
.fg-time[b-nrxil8hrls] {
	position: sticky;
	top: calc(var(--fg-top) + var(--fg-bar-h, 0px) + var(--fg-head-h) + .35rem);
	z-index: 1;
	overflow: hidden;
	justify-self: start;
	margin-top: .55rem;
	padding: .4rem .65rem .35rem;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--fg-sky) 60%, white), var(--fg-sky));
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	letter-spacing: .02em;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
	animation: fg-token-b-nrxil8hrls .5s var(--fg-ease) backwards;
}

/* The soonest time: the popup's ring, and one sweep of light once it has popped. */
.fg-next[b-nrxil8hrls] {
	box-shadow: 0 4px 12px rgba(91, 166, 218, .55), 0 0 0 2px #fff, 0 0 0 4px var(--fg-sky);
}

	.fg-next[b-nrxil8hrls]::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
		transform: translateX(-120%);
		animation: fg-shine-b-nrxil8hrls .7s ease-out .6s both;
	}

@keyframes fg-token-b-nrxil8hrls {
	0% {
		transform: scale(0) rotate(-14deg);
		opacity: 0;
	}
	60% {
		transform: scale(1.18) rotate(4deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0);
	}
}

@keyframes fg-shine-b-nrxil8hrls {
	to {
		transform: translateX(120%);
	}
}

.fg-games[b-nrxil8hrls] {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

	/* The shadow sits on the item, so it follows the ticket's punched edges. */
	.fg-games > li[b-nrxil8hrls] {
		filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .07)) drop-shadow(0 4px 8px rgba(0, 0, 0, .07));
	}

/* A game free at that time, as an admission ticket: name (company) over its city, then a perforated
   tear line with a punched notch at each end, and the stub with the community rating. The whole ticket opens
   the booking page. Each one springs in, tilted, as its room answers, a beat after the one before it. */
.fg-game[b-nrxil8hrls] {
	--stub: 3.25rem;
	--notch: .45rem;
	--cut-x: var(--stub);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--stub);
	align-items: stretch;
	min-height: 3.5rem;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	color: var(--fg-ink);
	text-decoration: none;
	-webkit-mask:
		radial-gradient(circle var(--notch) at var(--cut-x) 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle var(--notch) at var(--cut-x) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	mask:
		radial-gradient(circle var(--notch) at var(--cut-x) 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle var(--notch) at var(--cut-x) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	transition: transform .3s var(--rc-spring), background-color .2s var(--fg-ease);
	animation: fg-ticket-b-nrxil8hrls .55s var(--rc-spring) calc(min(var(--g, 0), 8) * 70ms) backwards;
}

	/* The notches are placed in physical terms: the stub is on the left in Hebrew, the right in English. */
	.fg-game:dir(ltr)[b-nrxil8hrls] {
		--cut-x: calc(100% - var(--stub));
	}

	/* The tear line. */
	.fg-game[b-nrxil8hrls]::before {
		content: "";
		position: absolute;
		inset-block: calc(var(--notch) + 4px);
		inset-inline-end: var(--stub);
		border-inline-start: 2px dashed color-mix(in srgb, var(--md-stroke) 85%, white);
	}

	.fg-game:hover[b-nrxil8hrls] {
		transform: translateY(-2px) rotate(-.6deg);
		color: var(--fg-ink);
	}

	.fg-game:active[b-nrxil8hrls] {
		transform: scale(.98);
	}

	/* An outline would be cut away with the notches: the focus ring is drawn inside the ticket. */
	.fg-game:focus-visible[b-nrxil8hrls] {
		outline: none;
		box-shadow: inset 0 0 0 2px var(--md-focus);
	}

@keyframes fg-ticket-b-nrxil8hrls {
	from {
		opacity: 0;
		transform: translateY(14px) rotate(-4deg) scale(.94);
	}
}

.fg-main[b-nrxil8hrls] {
	display: grid;
	align-content: center;
	gap: .1rem;
	min-width: 0;
	padding: .55rem .9rem;
}

.fg-name[b-nrxil8hrls] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.fg-company[b-nrxil8hrls] {
	font-family: 'Lunasima', system-ui, sans-serif;
	font-weight: 400;
	color: var(--fg-muted);
}

.fg-city[b-nrxil8hrls] {
	color: var(--fg-muted);
}

.fg-stub[b-nrxil8hrls] {
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--fg-sky) 12%, white);
	transition: background-color .2s var(--fg-ease);
}

	.fg-game:hover .fg-stub[b-nrxil8hrls] {
		background: color-mix(in srgb, var(--fg-sky) 22%, white);
	}

.fg-rating[b-nrxil8hrls] {
	width: 1.4rem;
	height: 1.4rem;
}

	.fg-game:hover .fg-rating[b-nrxil8hrls] {
		animation: fg-wiggle-b-nrxil8hrls .5s var(--fg-ease);
	}

@keyframes fg-wiggle-b-nrxil8hrls {
	30% {
		transform: rotate(-14deg) scale(1.12);
	}
	65% {
		transform: rotate(8deg);
	}
}

@keyframes fg-pop-b-nrxil8hrls {
	from {
		transform: scale(.4);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fg-day-chip[b-nrxil8hrls],
	.fg-count[b-nrxil8hrls],
	.fg-time[b-nrxil8hrls],
	.fg-game[b-nrxil8hrls],
	.fg-game:hover .fg-rating[b-nrxil8hrls] {
		animation: none;
	}

	.fg-next[b-nrxil8hrls]::after {
		display: none;
	}

	.fg-go[b-nrxil8hrls],
	.fg-day-chip .fg-date[b-nrxil8hrls],
	.fg-game[b-nrxil8hrls],
	.fg-progress-bar i[b-nrxil8hrls] {
		transition: none;
	}
}
/* /Components/Shared/FindPartners.razor.rz.scp.css */
/* The catalogue's "find partners" tab. Tokens follow the room card's (DESIGN.md): Sky Blue accents, Vivid
   Blue for what's about the visitor, Fredoka names, Bungee digits, Lunasima body, soft shadows, the
   overshoot spring gated on reduced motion. Type stays on the ramp: 1rem, headings 1.25rem.
   The active games are flyers pinned to a board - a pushpin, a slight tilt each, and tear-off tabs along
   the bottom edge for the ways to reach the poster; the visitor's to-do list is a grid of plaques below. */

.fp[b-beiq0g9q31] {
	--fp-sky: var(--text-primary, #5ba6da);
	--fp-vivid: #1976d2;
	--fp-ink: #1f1f1f;
	--fp-muted: var(--md-muted, #5f6368);
	--fp-cut: color-mix(in srgb, var(--md-stroke, #c7c7c7) 85%, white);
	--rc-spring: cubic-bezier(.34, 1.56, .64, 1); /* the room card's spring, same token and name */
	--fp-ease: cubic-bezier(.22, 1, .36, 1);
	max-width: 76rem;
	margin-inline: auto;
	padding-top: .75rem;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--fp-ink);
}

/* ---------- section heads ---------- */

.fp-head[b-beiq0g9q31] {
	display: flex;
	align-items: center;
	gap: .5rem;
}

	.fp-head svg[b-beiq0g9q31] {
		flex: none;
		width: 1.75rem;
		height: 1.75rem;
		fill: var(--fp-sky);
	}

	.fp-head h3[b-beiq0g9q31] {
		margin: 0;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: 1.25rem;
	}

.fp-head-list[b-beiq0g9q31] {
	margin-top: 2.5rem;
}

/* How many: a scoreboard counter beside the heading, popping in when the number changes. */
.fp-count[b-beiq0g9q31] {
	min-width: 2rem;
	padding: .3rem .5rem .25rem;
	border-radius: 999px;
	background: var(--fp-ink);
	color: #fff;
	font-family: 'Bungee', sans-serif;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	animation: fp-pop-b-beiq0g9q31 .45s var(--rc-spring) backwards;
}

.fp-lede[b-beiq0g9q31] {
	margin: .25rem 0 1rem;
	color: var(--fp-muted);
}

.fp-note[b-beiq0g9q31] {
	margin: .5rem 0 0;
	color: var(--fp-muted);
	text-wrap: pretty;
}

/* ---------- the board: flyers ---------- */

.fp-board[b-beiq0g9q31] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	align-items: start;
	gap: 2rem 1.5rem;
	margin: 0;
	padding: .75rem .25rem 0;
	list-style: none;
}

/* A flyer, pinned on at a slight tilt of its own; the shadow sits on the whole of it, so it follows the
   tear-off tabs' edge. Each one is pinned up in turn as the board opens. */
.fp-flyer[b-beiq0g9q31] {
	--tilt: -1deg;
	position: relative;
	display: grid;
	rotate: var(--tilt);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .08)) drop-shadow(0 6px 12px rgba(0, 0, 0, .09));
	transform-origin: 50% 0;
	animation: fp-pin-b-beiq0g9q31 .6s var(--rc-spring) calc(var(--f, 0) * 70ms) backwards;
}

	.fp-flyer:nth-child(3n + 2)[b-beiq0g9q31] {
		--tilt: .8deg;
	}

	.fp-flyer:nth-child(3n)[b-beiq0g9q31] {
		--tilt: -.4deg;
	}

	/* The pushpin: Sky Blue, the visitor's own Vivid Blue. */
	.fp-flyer[b-beiq0g9q31]::before {
		content: "";
		position: absolute;
		z-index: 1;
		top: -.5rem;
		left: 50%;
		width: 1rem;
		height: 1rem;
		translate: -50% 0;
		border-radius: 50%;
		background: radial-gradient(circle at 35% 30%, #fff 0 16%, var(--fp-sky) 22% 100%);
		box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
	}

	.fp-mine[b-beiq0g9q31]::before {
		background: radial-gradient(circle at 35% 30%, #fff 0 16%, var(--fp-vivid) 22% 100%);
	}

@keyframes fp-pin-b-beiq0g9q31 {
	from {
		opacity: 0;
		transform: translateY(-14px) rotate(-6deg) scale(.94);
	}
}

.fp-sheet[b-beiq0g9q31] {
	display: grid;
	gap: .45rem;
	padding: 1.15rem 1rem .9rem;
	border-radius: 8px 8px 0 0;
	background: #fff;
}

	/* The visitor's own: a Vivid Blue band across the top. */
	.fp-mine .fp-sheet[b-beiq0g9q31] {
		box-shadow: inset 0 4px 0 var(--fp-vivid);
	}

.fp-wanted[b-beiq0g9q31] {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	color: var(--fp-muted);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
}

	.fp-wanted svg[b-beiq0g9q31] {
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--fp-sky);
	}

	.fp-mine .fp-wanted[b-beiq0g9q31] {
		color: var(--fp-vivid);
	}

		.fp-mine .fp-wanted svg[b-beiq0g9q31] {
			fill: var(--fp-vivid);
		}

.fp-room[b-beiq0g9q31] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

	.fp-room a[b-beiq0g9q31] {
		color: inherit;
		text-decoration: none;
	}

		.fp-room a:hover[b-beiq0g9q31] {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

.fp-where[b-beiq0g9q31] {
	margin: 0;
	color: var(--fp-muted);
}

/* When: any day, or the days themselves as small tear-off date tiles with their weekday under each. */
.fp-any[b-beiq0g9q31] {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: .25rem 0 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
}

	.fp-any svg[b-beiq0g9q31] {
		width: 1.25rem;
		height: 1.25rem;
		fill: var(--fp-sky);
	}

.fp-days[b-beiq0g9q31] {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .3rem 0 0;
	padding: 0;
	list-style: none;
}

.fp-day[b-beiq0g9q31] {
	display: grid;
	justify-items: center;
	gap: .2rem;
	color: var(--fp-muted);
}

	.fp-day small[b-beiq0g9q31] {
		font-size: 1rem;
		line-height: 1;
	}

.fp-date[b-beiq0g9q31] {
	width: 3rem;
	display: grid;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
	color: var(--fp-ink);
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	text-align: center;
}

	.fp-date b[b-beiq0g9q31] {
		padding: .25rem 0 .2rem;
		background: var(--fp-ink);
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
	}

	.fp-date span[b-beiq0g9q31] {
		padding: .3rem 0 .35rem;
	}

/* Days that have passed, on a call kept up after them: faded, with a note under them. */
.fp-passed .fp-day[b-beiq0g9q31],
.fp-passed .fp-at[b-beiq0g9q31] {
	opacity: .45;
}

.fp-past[b-beiq0g9q31] {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: .2rem 0 0;
	color: var(--fp-muted);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
}

	.fp-past svg[b-beiq0g9q31] {
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

/* A booked game's time: the find-a-game tab's time token (Sky Blue gloss, ink digits), level with the
   middle of its day's tile. */
.fp-at[b-beiq0g9q31] {
	padding-top: .7rem;
}

.fp-time[b-beiq0g9q31] {
	display: inline-block;
	padding: .4rem .65rem .35rem;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--fp-sky) 60%, white), var(--fp-sky));
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	letter-spacing: .02em;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* The poster's own words: a tinted note on the sheet, their line breaks kept. */
.fp-note-text[b-beiq0g9q31] {
	margin: .35rem 0 0;
	padding: .55rem .75rem;
	border-radius: 12px;
	background: color-mix(in srgb, var(--fp-sky) 10%, white);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* The team size and whether it's booked: pills, the booked one inked. */
.fp-facts[b-beiq0g9q31] {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .3rem 0 0;
	padding: 0;
	list-style: none;
}

.fp-fact[b-beiq0g9q31] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .7rem .25rem .6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fp-sky) 16%, white);
}

	.fp-fact svg[b-beiq0g9q31] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	/* The team size in scoreboard digits. */
	.fp-fact b[b-beiq0g9q31] {
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		line-height: 1;
	}

.fp-booked[b-beiq0g9q31],
.fp-full[b-beiq0g9q31] {
	background: var(--fp-ink);
	color: #fff;
}

	/* How many are already in, in scoreboard digits. */
	.fp-joined b[b-beiq0g9q31] {
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		line-height: 1;
	}

/* The poster's own count: a minus and a plus around it, left to right like a number line. */
.fp-stepper[b-beiq0g9q31] {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

	.fp-stepper b[b-beiq0g9q31] {
		min-width: 1.25rem;
		text-align: center;
	}

.fp-step[b-beiq0g9q31] {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1.5px solid var(--fp-sky);
	border-radius: 50%;
	background: #fff;
	color: var(--fp-ink);
	cursor: pointer;
	transition: transform .3s var(--rc-spring), background-color .2s var(--fp-ease);
}

	.fp-step svg[b-beiq0g9q31] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

	.fp-step:hover:not(:disabled)[b-beiq0g9q31] {
		background: color-mix(in srgb, var(--fp-sky) 25%, white);
		transform: scale(1.1);
	}

	.fp-step:active:not(:disabled)[b-beiq0g9q31] {
		transform: scale(.9);
	}

	.fp-step:disabled[b-beiq0g9q31] {
		opacity: .4;
		cursor: default;
	}

	.fp-step:focus-visible[b-beiq0g9q31] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

	/* On the inked pill of a full team. */
	.fp-full .fp-step[b-beiq0g9q31] {
		border-color: #fff;
	}

.fp-from[b-beiq0g9q31] {
	margin: .2rem 0 0;
	color: var(--fp-muted);
}

.fp-takedown[b-beiq0g9q31] {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .2rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fp-muted);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

	.fp-takedown svg[b-beiq0g9q31] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.fp-takedown:hover:not(:disabled)[b-beiq0g9q31] {
		color: var(--fp-ink);
	}

	.fp-takedown:disabled[b-beiq0g9q31] {
		opacity: .55;
		cursor: progress;
	}

	.fp-takedown:focus-visible[b-beiq0g9q31] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

/* The tear-off tabs: cut from the sheet along a dashed line, and from each other; a tab tilts down on
   hover as if it's being torn off. The marks are in ink, as the card's Maps and Waze marks are white. */
.fp-tabs[b-beiq0g9q31] {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px dashed var(--fp-cut);
}

	.fp-tabs li[b-beiq0g9q31] {
		display: grid;
	}

		.fp-tabs li + li .fp-tab[b-beiq0g9q31] {
			border-inline-start: 1.5px dashed var(--fp-cut);
		}

		.fp-tabs li:first-child .fp-tab[b-beiq0g9q31] {
			border-end-start-radius: 8px;
		}

		.fp-tabs li:last-child .fp-tab[b-beiq0g9q31] {
			border-end-end-radius: 8px;
		}

.fp-tab[b-beiq0g9q31] {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: .25rem;
	min-height: 4rem;
	padding: .5rem .25rem;
	background: #fff;
	color: var(--fp-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	text-decoration: none;
	transform-origin: 50% 0;
	transition: transform .4s var(--rc-spring), background-color .2s var(--fp-ease);
}

	.fp-tab svg[b-beiq0g9q31] {
		width: 1.5rem;
		height: 1.5rem;
		fill: currentColor;
		transition: transform .4s var(--rc-spring);
	}

	.fp-tab:hover[b-beiq0g9q31] {
		color: var(--fp-ink);
		background: color-mix(in srgb, var(--fp-sky) 12%, white);
		transform: rotate(-4deg) translateY(2px);
	}

		.fp-tab:hover svg[b-beiq0g9q31] {
			transform: scale(1.12);
		}

	.fp-tab:active[b-beiq0g9q31] {
		transform: rotate(-6deg) translateY(5px);
	}

	.fp-tab:focus-visible[b-beiq0g9q31] {
		outline: 2px solid var(--md-focus);
		outline-offset: -3px;
	}

/* ---------- the list: plaques ---------- */

.fp-cards[b-beiq0g9q31] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	align-items: start;
	gap: 1rem;
}

/* ---------- signed out ---------- */

.fp-signin[b-beiq0g9q31] {
	display: grid;
	justify-items: center;
	gap: .75rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

	.fp-signin p[b-beiq0g9q31] {
		margin: 0;
	}

.fp-go[b-beiq0g9q31] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	height: 2.75rem;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--fp-sky) 60%, white), var(--fp-sky));
	color: var(--fp-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: transform .2s var(--fp-ease), box-shadow .2s var(--fp-ease);
}

	.fp-go svg[b-beiq0g9q31] {
		width: 1.25rem;
		height: 1.25rem;
		fill: currentColor;
	}

	.fp-go:hover[b-beiq0g9q31] {
		transform: translateY(-1px);
		box-shadow: 0 6px 14px rgba(91, 166, 218, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
	}

	.fp-go:focus-visible[b-beiq0g9q31] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

@keyframes fp-pop-b-beiq0g9q31 {
	from {
		transform: scale(.4);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fp-count[b-beiq0g9q31],
	.fp-flyer[b-beiq0g9q31] {
		animation: none;
	}

	.fp-tab[b-beiq0g9q31],
	.fp-tab svg[b-beiq0g9q31],
	.fp-step[b-beiq0g9q31],
	.fp-go[b-beiq0g9q31] {
		transition: none;
	}

	.fp-tab:hover[b-beiq0g9q31],
	.fp-tab:active[b-beiq0g9q31],
	.fp-tab:hover svg[b-beiq0g9q31],
	.fp-step:hover:not(:disabled)[b-beiq0g9q31],
	.fp-step:active:not(:disabled)[b-beiq0g9q31] {
		transform: none;
	}
}
/* /Components/Shared/GameBars.razor.rz.scp.css */
.gb-bars[b-p1udeees5a] {
	--gb-sky: var(--text-primary, #5ba6da);
	--gb-vivid: #1976d2;
	--gb-ink: #1f1f1f;
	--gb-muted: var(--md-muted, #5f6368);
	--gb-ease: cubic-bezier(.22, 1, .36, 1);
}

/* A bar chart (everyone's shares, the player's weeks): the key, then the bar - its length the value, a 4px
   rounded tip, square at the base - with the value at its tip in ink and a note after it. The player's own row
   in Vivid Blue; the rest (not found, still guessing) a neutral grey. */
.gb-bars[b-p1udeees5a] {
	display: grid;
	gap: .35rem;
	max-width: 36rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.gb-bars li[b-p1udeees5a] {
		display: grid;
		grid-template-columns: 1.75rem 1fr;
		align-items: center;
		gap: .5rem;
	}

.gb-key[b-p1udeees5a] {
	font-family: 'Bungee', sans-serif;
	text-align: center;
}

.gb-track[b-p1udeees5a] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .1rem .4rem;
	min-width: 0;
}

.gb-bar[b-p1udeees5a] {
	flex: none;
	width: max(4px, calc((100% - 7rem) * var(--w) / 100));
	height: 14px;
	border-start-end-radius: 4px;
	border-end-end-radius: 4px;
	background: var(--gb-sky);
	transform-origin: var(--start, right);
	animation: gb-grow-b-p1udeees5a .6s var(--gb-ease) backwards;
}

.gb-bars li.rest .gb-bar[b-p1udeees5a] {
	background: color-mix(in srgb, var(--gb-ink) 22%, white);
}

.gb-bars li.mine .gb-bar[b-p1udeees5a] {
	background: var(--gb-vivid);
}

.gb-value[b-p1udeees5a] {
	font-variant-numeric: tabular-nums;
}

.gb-note[b-p1udeees5a] {
	color: var(--gb-muted);
}

.gb-bars li.mine .gb-note[b-p1udeees5a] {
	color: var(--gb-ink);
	font-weight: 600;
}

@keyframes gb-grow-b-p1udeees5a {
	from {
		transform: scaleX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-bar[b-p1udeees5a] {
		animation: none;
	}
}
/* /Components/Shared/GameCommunity.razor.rz.scp.css */
/* The community this week: a heading with the stats icon, a line, everyone's shares (GameBars). */

.gc[b-wa6esfnn5e] {
	margin-top: 2.5rem;
	--gc-sky: var(--text-primary, #5ba6da);
	--gc-muted: var(--md-muted, #5f6368);
}

.gc-title[b-wa6esfnn5e] {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .75rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.gc-icon[b-wa6esfnn5e] {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--gc-sky);
}

.gc-line[b-wa6esfnn5e] {
	margin: 0 0 .75rem;
	color: var(--gc-muted);
}
/* /Components/Shared/GameGuesses.razor.rz.scp.css */
/* A game round's guesses: numbered rows on Cloud Gray, the number in Bungee, a right one on a Forest tint with
   a Forest tick, a wrong one with an Ember cross (DESIGN.md's go and danger signals); the newest miss shakes. */

.gg-list[b-lq44gsc0v1] {
	--gg-muted: var(--md-muted, #5f6368);
	--gg-forest: #1B5E20;
	--gg-ember: #D84315;
	--gg-ease: cubic-bezier(.22, 1, .36, 1);
}

.gg-title[b-lq44gsc0v1] {
	margin: 1.25rem 0 .5rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
}

.gg-list[b-lq44gsc0v1] {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.gg-list li[b-lq44gsc0v1] {
		display: grid;
		grid-template-columns: auto 1fr auto auto;
		align-items: center;
		gap: .6rem;
		padding: .4rem .6rem;
		border-radius: 12px;
		background: #f7f7f7;
	}

		.gg-list li.fresh[b-lq44gsc0v1] {
			animation: gg-shake-b-lq44gsc0v1 .5s var(--gg-ease);
		}

		.gg-list li.right[b-lq44gsc0v1] {
			background: color-mix(in srgb, var(--gg-forest) 12%, white);
		}

.gg-n[b-lq44gsc0v1] {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: #fff;
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.gg-room[b-lq44gsc0v1] {
	display: grid;
	min-width: 0;
	line-height: 1.25;
}

.gg-day[b-lq44gsc0v1] {
	color: var(--gg-muted);
	white-space: nowrap;
}

.gg-mark svg[b-lq44gsc0v1] {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.gg-list li.wrong .gg-mark svg[b-lq44gsc0v1] {
	fill: var(--gg-ember);
}

.gg-list li.right .gg-mark svg[b-lq44gsc0v1] {
	fill: var(--gg-forest);
}

	.gg-list small[b-lq44gsc0v1] {
		color: var(--gg-muted);
	}

@media (max-width: 575.98px) {
	.gg-list li[b-lq44gsc0v1] {
		grid-template-columns: auto 1fr auto;
	}

	.gg-day[b-lq44gsc0v1] {
		display: none;
	}
}

@keyframes gg-shake-b-lq44gsc0v1 {
	20% { transform: translateX(-6px); }
	40% { transform: translateX(5px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
	.gg-list li.fresh[b-lq44gsc0v1] {
		animation: none;
	}
}
/* /Components/Shared/GameMyWeeks.razor.rz.scp.css */
/* The player's weeks: a heading with the stats icon and their name, score tiles (Bungee digits), and how many
   tries each find took (GameBars). */

.gw[b-nfspj65n37] {
	margin-top: 2.5rem;
	--gw-sky: var(--text-primary, #5ba6da);
	--gw-muted: var(--md-muted, #5f6368);
}

.gw-title[b-nfspj65n37] {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .75rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
}

.gw-icon[b-nfspj65n37] {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--gw-sky);
}

.gw-sub[b-nfspj65n37] {
	margin: 1.5rem 0 .6rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
}

.gw-tiles[b-nfspj65n37] {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

	.gw-tiles div[b-nfspj65n37] {
		display: grid;
		justify-items: center;
		gap: .2rem;
		padding: .85rem .5rem;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	}

	.gw-tiles dt[b-nfspj65n37] {
		color: var(--gw-muted);
		font-weight: 400;
		text-align: center;
	}

	.gw-tiles dd[b-nfspj65n37] {
		margin: 0;
		color: var(--gw-sky);
		font-family: 'Bungee', sans-serif;
		font-size: 1.25rem;
		line-height: 1;
	}

.gw-note[b-nfspj65n37] {
	color: var(--gw-muted);
}

@media (max-width: 575.98px) {
	.gw-tiles[b-nfspj65n37] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* /Components/Shared/GameRoomSearch.razor.rz.scp.css */
/* A game's room search (DESIGN.md: an 8px field with a soft focus ring, a floating list, the picked room as a
   dashed ticket with the guess button - the overshoot spring gated on reduced motion). */

.gs-search[b-fful9f8dmj],
.gs-pick[b-fful9f8dmj] {
	--gs-sky: var(--text-primary, #5ba6da);
	--gs-vivid: #1976d2;
	--gs-ink: #1f1f1f;
	--gs-muted: var(--md-muted, #5f6368);
	--gs-spring: cubic-bezier(.34, 1.56, .64, 1);
}

.gs-search[b-fful9f8dmj] {
	position: relative;
}

.gs-input[b-fful9f8dmj] {
	width: 100%;
	height: 2.75rem;
	padding-inline: .9rem;
	border: 1px solid var(--md-stroke, #c7c7c7);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	transition: border-color .15s, box-shadow .15s;
}

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

.gs-options[b-fful9f8dmj] {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + .35rem);
	z-index: 5;
	max-height: 20rem;
	margin: 0;
	padding: .35rem;
	overflow-y: auto;
	border-radius: 12px;
	background: #fff;
	list-style: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

	.gs-options li[b-fful9f8dmj] {
		display: grid;
		padding: .45rem .65rem;
		border-radius: 8px;
		cursor: pointer;
	}

		.gs-options li:hover[b-fful9f8dmj],
		.gs-options li.active[b-fful9f8dmj] {
			background: color-mix(in srgb, var(--gs-sky) 16%, white);
		}

	.gs-options b[b-fful9f8dmj],
	.gs-pick-room b[b-fful9f8dmj] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

	.gs-options small[b-fful9f8dmj],
	.gs-pick-room small[b-fful9f8dmj] {
		color: var(--gs-muted);
	}

.gs-nomatch[b-fful9f8dmj] {
	margin: .5rem 0 0;
	color: var(--gs-muted);
}

/* Free text: the field and a find button beside it (Enter does the same); why nothing was found, under them. */
.gs-free[b-fful9f8dmj] {
	display: flex;
	gap: .5rem;
}

	.gs-free .gs-input[b-fful9f8dmj] {
		flex: 1;
		min-width: 0;
	}

.gs-find[b-fful9f8dmj] {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gs-sky) 60%, white), var(--gs-sky));
	color: var(--gs-ink);
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
}

	.gs-find svg[b-fful9f8dmj] {
		width: 1.35rem;
		height: 1.35rem;
		fill: currentColor;
	}

	.gs-find:focus-visible[b-fful9f8dmj] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

.gs-note[b-fful9f8dmj] {
	color: var(--md-muted, #5f6368);
}

/* Free text: the question over the room it found. */
.gs-ask[b-fful9f8dmj] {
	margin: 0 0 .4rem;
	color: var(--md-muted, #5f6368);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
}

	.gs-ask.gs-ask-choices[b-fful9f8dmj] {
		margin-top: .75rem;
	}

/* Free text: rooms of one name, each a button to choose it. */
.gs-choices[b-fful9f8dmj] {
	display: grid;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

	.gs-choices button[b-fful9f8dmj] {
		display: grid;
		width: 100%;
		padding: .45rem .75rem;
		border: 1.5px dashed var(--text-primary, #5ba6da);
		border-radius: 12px;
		background: #fff;
		color: inherit;
		font: inherit;
		text-align: start;
		line-height: 1.25;
		cursor: pointer;
		transition: background .15s;
	}

		.gs-choices button:hover[b-fful9f8dmj] {
			background: color-mix(in srgb, var(--text-primary, #5ba6da) 12%, white);
		}

		.gs-choices button:focus-visible[b-fful9f8dmj] {
			outline: 2px solid var(--md-focus);
			outline-offset: 2px;
		}

	.gs-choices b[b-fful9f8dmj] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
	}

	.gs-choices small[b-fful9f8dmj] {
		color: var(--md-muted, #5f6368);
	}

/* The picked room, ready to send: a ticket with the guess button and a way back. */
.gs-pick[b-fful9f8dmj] {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem;
	padding-inline-start: .9rem;
	border: 1.5px dashed var(--gs-sky);
	border-radius: 12px;
	animation: gs-pop-b-fful9f8dmj .4s var(--gs-spring);
}

.gs-pick-room[b-fful9f8dmj] {
	display: grid;
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

.gs-guess[b-fful9f8dmj] {
	height: 2.5rem;
	padding: 0 1.2rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--gs-sky) 60%, white), var(--gs-sky));
	color: var(--gs-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: transform .35s var(--gs-spring);
}

	.gs-guess:hover:not(:disabled)[b-fful9f8dmj] {
		transform: translateY(-1px);
	}

	.gs-guess:disabled[b-fful9f8dmj],
	.gs-change:disabled[b-fful9f8dmj] {
		opacity: .6;
		cursor: default;
	}

.gs-change[b-fful9f8dmj] {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border: 0;
	border-radius: 50%;
	background: #eee;
	color: #555;
	cursor: pointer;
	transition: background .15s, color .15s;
}

	.gs-change svg[b-fful9f8dmj] {
		width: 1.1rem;
		height: 1.1rem;
		fill: currentColor;
	}

	.gs-change:hover:not(:disabled)[b-fful9f8dmj] {
		background: var(--gs-sky);
		color: #fff;
	}

.gs-guess:focus-visible[b-fful9f8dmj],
.gs-change:focus-visible[b-fful9f8dmj] {
	outline: 2px solid var(--md-focus);
	outline-offset: 2px;
}

@keyframes gs-pop-b-fful9f8dmj {
	from {
		transform: scale(.85);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-pick[b-fful9f8dmj] {
		animation: none;
	}

	.gs-guess[b-fful9f8dmj] {
		transition: none;
	}
}
/* /Components/Shared/GameWeekPicker.razor.rz.scp.css */
/* The week picker: a pill button (Fredoka, Vivid Blue like the back link) with a count of the past weeks still open
   to play, opening a white panel under it (as the room search's list): this week, then a month of past weeks
   between arrows - a mark for how the player stands in each (Forest check solved, Ember cross missed, half a token
   begun, a hollow token new), its days, and what it offers: Play filled, Continue outlined, Watch quiet - and a
   switch for the unsolved ones only. The week shown is tinted. */

.wp[b-rn5yqxs8bf] {
	--wp-sky: var(--text-primary, #5ba6da);
	--wp-vivid: #1976d2;
	--wp-muted: var(--md-muted, #5f6368);
	--wp-forest: #1B5E20;
	--wp-ember: #D84315;
	position: relative;
	z-index: 6;
}

.wp-toggle[b-rn5yqxs8bf] {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .55rem .3rem .7rem;
	border: 1.5px solid color-mix(in srgb, var(--wp-vivid) 35%, transparent);
	border-radius: 999px;
	background: #fff;
	color: var(--wp-vivid);
	font: 500 .95rem/1.2 'Fredoka', system-ui, sans-serif;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

	.wp-toggle:hover[b-rn5yqxs8bf],
	.wp-toggle.open[b-rn5yqxs8bf] {
		border-color: var(--wp-vivid);
		background: color-mix(in srgb, var(--wp-sky) 12%, white);
	}

	.wp-toggle:focus-visible[b-rn5yqxs8bf] {
		outline: 2px solid var(--md-focus, var(--wp-vivid));
		outline-offset: 2px;
	}

	.wp-toggle svg[b-rn5yqxs8bf] {
		flex: none;
		fill: currentColor;
	}

.wp-icon[b-rn5yqxs8bf] {
	width: 1.15rem;
	height: 1.15rem;
}

.wp-chevron[b-rn5yqxs8bf] {
	width: 1.1rem;
	height: 1.1rem;
	transition: transform .2s;
}

.wp-toggle.open .wp-chevron[b-rn5yqxs8bf] {
	transform: rotate(180deg);
}

.wp-badge[b-rn5yqxs8bf] {
	min-width: 1.25rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: var(--wp-vivid);
	color: #fff;
	font: 400 .7rem/1.25rem 'Bungee', system-ui, sans-serif;
	text-align: center;
}

/* Under the list, the whole window: a tap outside closes it. */
.wp-scrim[b-rn5yqxs8bf] {
	position: fixed;
	inset: 0;
}

.wp-panel[b-rn5yqxs8bf] {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + .35rem);
	width: max-content;
	min-width: 17rem;
	max-width: calc(100vw - 2rem);
	max-height: min(32rem, calc(100vh - 9rem));
	padding: .35rem;
	overflow-y: auto;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
	animation: wp-drop-b-rn5yqxs8bf .18s cubic-bezier(.22, 1, .36, 1);
}

.wp-list[b-rn5yqxs8bf] {
	margin: 0;
	padding: 0;
	list-style: none;
}

@keyframes wp-drop-b-rn5yqxs8bf {
	from {
		opacity: 0;
		transform: translateY(-.35rem);
	}
}

.wp-week[b-rn5yqxs8bf] {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .4rem .6rem;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

	.wp-week:hover[b-rn5yqxs8bf],
	.wp-week:focus-visible[b-rn5yqxs8bf] {
		background: color-mix(in srgb, var(--wp-sky) 16%, white);
		outline: none;
	}

	.wp-week.now[b-rn5yqxs8bf] {
		background: color-mix(in srgb, var(--wp-sky) 24%, white);
	}

/* The month between its arrows, under this week. */
.wp-month[b-rn5yqxs8bf] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin: .3rem 0 .15rem;
	padding: .3rem .1rem 0;
	border-top: 1px solid #eee;
}

	.wp-month b[b-rn5yqxs8bf] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
	}

.wp-page[b-rn5yqxs8bf] {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp-vivid);
	cursor: pointer;
}

	.wp-page:hover:not(:disabled)[b-rn5yqxs8bf] {
		background: color-mix(in srgb, var(--wp-sky) 16%, white);
	}

	.wp-page:focus-visible[b-rn5yqxs8bf] {
		outline: 2px solid var(--md-focus, var(--wp-vivid));
		outline-offset: 1px;
	}

	.wp-page:disabled[b-rn5yqxs8bf] {
		color: #ccc;
		cursor: default;
	}

	.wp-page svg[b-rn5yqxs8bf] {
		width: 1.4rem;
		height: 1.4rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

.wp-none[b-rn5yqxs8bf] {
	margin: .3rem 0 0;
	padding: .75rem .6rem .5rem;
	border-top: 1px solid #eee;
	color: var(--wp-muted);
	text-align: center;
}

/* The unsolved-only switch, at the bottom. */
.wp-filter[b-rn5yqxs8bf] {
	position: relative;
	display: flex;
	align-items: center;
	gap: .55rem;
	margin-top: .3rem;
	padding: .55rem .6rem .3rem;
	border-top: 1px solid #eee;
	color: var(--wp-muted);
	font-size: .9rem;
	cursor: pointer;
	user-select: none;
}

	.wp-filter input[b-rn5yqxs8bf] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

.wp-switch[b-rn5yqxs8bf] {
	position: relative;
	flex: none;
	width: 2.1rem;
	height: 1.2rem;
	border-radius: 999px;
	background: #c9ccd1;
	transition: background .2s;
}

	.wp-switch[b-rn5yqxs8bf]::after {
		content: "";
		position: absolute;
		top: .15rem;
		inset-inline-start: .15rem;
		width: .9rem;
		height: .9rem;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
		transition: inset-inline-start .2s cubic-bezier(.22, 1, .36, 1);
	}

.wp-filter input:checked + .wp-switch[b-rn5yqxs8bf] {
	background: var(--wp-vivid);
}

	.wp-filter input:checked + .wp-switch[b-rn5yqxs8bf]::after {
		inset-inline-start: 1.05rem;
	}

.wp-filter input:focus-visible + .wp-switch[b-rn5yqxs8bf] {
	outline: 2px solid var(--md-focus, var(--wp-vivid));
	outline-offset: 2px;
}

/* How the player stands in the week, as a token. */
.wp-mark[b-rn5yqxs8bf] {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	border: 2px solid var(--wp-muted);
	border-radius: 50%;
}

	.wp-mark svg[b-rn5yqxs8bf] {
		width: .95rem;
		height: .95rem;
		fill: #fff;
	}

.wp-this .wp-mark[b-rn5yqxs8bf] {
	border-color: var(--wp-vivid);
	background: radial-gradient(var(--wp-vivid) 40%, transparent 44%);
}

.wp-solved .wp-mark[b-rn5yqxs8bf] {
	border-color: var(--wp-forest);
	background: var(--wp-forest);
}

.wp-missed .wp-mark[b-rn5yqxs8bf] {
	border-color: var(--wp-ember);
	background: var(--wp-ember);
}

.wp-begun .wp-mark[b-rn5yqxs8bf] {
	border-color: var(--wp-vivid);
	background: linear-gradient(90deg, var(--wp-vivid) 50%, transparent 0);
}

.wp-new .wp-mark[b-rn5yqxs8bf] {
	border-color: color-mix(in srgb, var(--wp-muted) 55%, transparent);
}

.wp-when[b-rn5yqxs8bf] {
	display: grid;
	flex: 1;
	min-width: 0;
	line-height: 1.25;
}

	.wp-when b[b-rn5yqxs8bf] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 500;
		white-space: nowrap;
	}

	.wp-when small[b-rn5yqxs8bf] {
		color: var(--wp-muted);
	}

.wp-act[b-rn5yqxs8bf] {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	flex: none;
	padding: .15rem .6rem .15rem .45rem;
	border: 1.5px solid var(--wp-vivid);
	border-radius: 999px;
	color: var(--wp-vivid);
	font: 500 .85rem/1.2 'Fredoka', system-ui, sans-serif;
}

	.wp-act svg[b-rn5yqxs8bf] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

.wp-new .wp-act[b-rn5yqxs8bf] {
	background: var(--wp-vivid);
	color: #fff;
}

.wp-solved .wp-act[b-rn5yqxs8bf],
.wp-missed .wp-act[b-rn5yqxs8bf] {
	border-color: transparent;
	color: var(--wp-muted);
}

@media (prefers-reduced-motion: reduce) {
	.wp-list[b-rn5yqxs8bf] {
		animation: none;
	}

	.wp-toggle[b-rn5yqxs8bf],
	.wp-chevron[b-rn5yqxs8bf],
	.wp-switch[b-rn5yqxs8bf],
	.wp-switch[b-rn5yqxs8bf]::after {
		transition: none;
	}
}
/* /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/PartnerCard.razor.rz.scp.css */
/* A to-do game on the "find partners" tab: a compact plaque (the closed room's plaque shape: a photo strip
   and the room beside it) that turns over to a call for partners. Tokens follow the room card's
   (DESIGN.md): Sky Blue accents, Vivid Blue for what's about the visitor, Fredoka names, Bungee digits,
   Lunasima body, soft shadows, the overshoot spring gated on reduced motion. Type stays on the ramp: 1rem,
   names 1.25rem. The back is the room card's back - the photo, blurred under a dark veil - with the
   find-a-game tab's date tiles and slider on it. */

.pc[b-k71zqe4yld] {
	--pc-radius: 16px;
	--rc-spring: cubic-bezier(.34, 1.56, .64, 1); /* the room card's spring, same token and name */
	--pc-ease: cubic-bezier(.22, 1, .36, 1);
	--pc-ink: #1f1f1f;
	--pc-muted: var(--md-muted, #5f6368);
	--pc-sky: var(--text-primary, #5ba6da);
	--pc-sky-glow: rgba(91, 166, 218, .45);
	--pc-vivid: #1976d2;
	--pc-void: #1a1a1a;
	--pc-err: #d93025; /* the inputs' error red (DESIGN.md) */
	position: relative;
	perspective: 1400px;
	font-family: 'Lunasima', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--pc-ink);
	animation: pc-enter-b-k71zqe4yld .55s var(--pc-ease) calc(var(--i, 0) * 45ms) backwards;
}

@keyframes pc-enter-b-k71zqe4yld {
	from {
		opacity: 0;
		transform: translateY(14px) scale(.97);
	}
}

/* ---------- the turn ---------- */

/* Both faces in one grid cell, each at its own height: the front sits at the cell's top, and the back
   leaves the flow while the plaque rests on its front. Turned over, the back sets the height. */
.pc-inner[b-k71zqe4yld] {
	position: relative;
	display: grid;
	transform-style: preserve-3d;
}

.pc-flipped .pc-inner[b-k71zqe4yld] {
	transform: rotateY(180deg);
	animation: pc-flip-b-k71zqe4yld .75s var(--pc-ease) both;
}

.pc-unflipping .pc-inner[b-k71zqe4yld] {
	animation: pc-unflip-b-k71zqe4yld .75s var(--pc-ease) both;
}

/* Picked up, turned over and set back down: a brief shrink and rise through the half-turn. */
@keyframes pc-flip-b-k71zqe4yld {
	0% { transform: rotateY(0); }
	50% { transform: rotateY(90deg) scale(.92) translateY(-8px); }
	100% { transform: rotateY(180deg); }
}

@keyframes pc-unflip-b-k71zqe4yld {
	0% { transform: rotateY(180deg); }
	50% { transform: rotateY(90deg) scale(.92) translateY(-8px); }
	100% { transform: rotateY(0); }
}

.pc-face[b-k71zqe4yld] {
	grid-area: 1 / 1;
	min-width: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: var(--pc-radius);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.pc:not(.pc-flipped):not(.pc-unflipping) .pc-back[b-k71zqe4yld] {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

/* ---------- front: the plaque ---------- */

.pc-front[b-k71zqe4yld] {
	align-self: start;
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	min-height: 7.5rem;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .3s var(--pc-ease), transform .3s var(--pc-ease);
}

	.pc:not(.pc-flipped):hover .pc-front[b-k71zqe4yld] {
		box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
		transform: translateY(-2px);
	}

/* Its call is up: a Vivid Blue edge, the colour of things about the visitor. */
.pc-live .pc-front[b-k71zqe4yld] {
	box-shadow: 0 0 0 2px var(--pc-vivid), 0 4px 14px rgba(25, 118, 210, .2);
}

.pc-photo[b-k71zqe4yld] {
	position: relative;
	background-color: var(--pc-void);
	background-size: cover;
	background-position: center;
	transition: transform .6s var(--rc-spring);
}

	.pc:not(.pc-flipped):hover .pc-photo[b-k71zqe4yld] {
		transform: scale(1.06);
	}

.pc-body[b-k71zqe4yld] {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
	padding: .6rem .8rem .7rem;
}

.pc-name[b-k71zqe4yld] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

	.pc-name a[b-k71zqe4yld] {
		color: inherit;
		text-decoration: none;
	}

		.pc-name a:hover[b-k71zqe4yld] {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

	/* On the plaque, one line (a long name ends in "…"), so every plaque is the same height; the back keeps two. */
	.pc-front .pc-name[b-k71zqe4yld] {
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

.pc-where[b-k71zqe4yld] {
	display: flex;
	align-items: center;
	gap: .3rem;
	min-width: 0;
	margin: 0;
	color: var(--pc-muted);
	font-size: 1rem;
	white-space: nowrap;
}

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

.pc-company[b-k71zqe4yld] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-foot[b-k71zqe4yld] {
	margin-top: auto;
	display: flex;
	align-items: center;
	padding-top: .4rem;
}

/* The one button: the find-a-game tab's pill (Sky Blue gloss, ink label). */
.pc-go[b-k71zqe4yld] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 2.25rem;
	padding-block: 0;
	padding-inline: .8rem 1rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
	color: var(--pc-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
	box-shadow: 0 4px 10px var(--pc-sky-glow), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: transform .3s var(--rc-spring), box-shadow .2s var(--pc-ease);
}

	.pc-go svg[b-k71zqe4yld] {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	.pc-go:hover[b-k71zqe4yld] {
		transform: translateY(-1px);
		box-shadow: 0 6px 14px rgba(91, 166, 218, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
	}

		.pc-go:hover svg[b-k71zqe4yld] {
			animation: pc-wiggle-b-k71zqe4yld .5s var(--pc-ease);
		}

	.pc-go:active[b-k71zqe4yld] {
		transform: scale(.96);
	}

	.pc-go:focus-visible[b-k71zqe4yld] {
		outline: 2px solid var(--md-focus);
		outline-offset: 2px;
	}

/* Others calling for the same room: a megaphone and how many, in scoreboard digits - a white badge on
   the photo's outer corner, lifted off it. */
.pc-others[b-k71zqe4yld] {
	position: absolute;
	top: .4rem;
	inset-inline-start: .4rem;
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	padding: .2rem .5rem .2rem .45rem;
	border-radius: 999px;
	background: #fff;
	color: var(--pc-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

	.pc-others svg[b-k71zqe4yld] {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.pc-others b[b-k71zqe4yld] {
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		font-size: 1rem;
		line-height: 1;
	}

/* ---------- back: the call ---------- */

.pc-back[b-k71zqe4yld] {
	position: relative;
	transform: rotateY(180deg);
	overflow: hidden;
	background-color: var(--pc-void);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.pc-veil[b-k71zqe4yld] {
	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, .8), rgba(20, 20, 24, .92));
}

.pc-form[b-k71zqe4yld] {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin: 0;
	padding: .75rem .85rem .9rem;
}

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

	.pc-back-head .pc-name[b-k71zqe4yld] {
		color: #fff;
	}

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

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

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

	.pc-x:focus-visible[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

/* A question on the back: its label over its controls. Bootstrap floats a legend; this one stays put. */
.pc-field[b-k71zqe4yld] {
	display: grid;
	gap: .45rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

	.pc-field legend[b-k71zqe4yld],
	.pc-legend[b-k71zqe4yld] {
		float: none;
		width: auto;
		margin: 0 0 .45rem;
		padding: 0;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.2;
		color: rgba(255, 255, 255, .78);
	}

		.pc-field legend b[b-k71zqe4yld] {
			margin-inline-start: .35rem;
			font-family: 'Bungee', sans-serif;
			font-weight: 400;
			color: #fff;
		}

/* Any day / some days / booked: three segments in one pill, the chosen one Sky Blue. */
.pc-seg[b-k71zqe4yld] {
	justify-self: start;
	display: inline-grid;
	grid-auto-flow: column;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
}

.pc-seg-btn[b-k71zqe4yld] {
	padding: .3rem .9rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .25s var(--pc-ease), color .25s, box-shadow .25s;
}

	.pc-seg-btn:hover:not(.on)[b-k71zqe4yld] {
		background: rgba(255, 255, 255, .12);
	}

	.pc-seg-btn.on[b-k71zqe4yld] {
		background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
		color: var(--pc-ink);
		box-shadow: 0 3px 10px var(--pc-sky-glow);
	}

	.pc-seg-btn:focus-visible[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 1px;
	}

/* The days: tear-off date tiles in a row that scrolls, as on the find-a-game tab, any number of them on.
   A chosen tile is lifted, tilted and ringed, its month strip Sky Blue. */
.pc-days[b-k71zqe4yld] {
	display: flex;
	gap: .45rem;
	margin-inline: -.85rem;
	padding: .45rem .85rem .6rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .3) transparent;
}

.pc-day[b-k71zqe4yld] {
	position: relative;
	flex: none;
	display: grid;
	justify-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .7);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
	scroll-snap-align: start;
	animation: pc-leaf-b-k71zqe4yld .5s var(--rc-spring) calc(var(--i, 0) * 30ms) backwards;
}

.pc-day-name[b-k71zqe4yld] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	white-space: nowrap;
}

.pc-date[b-k71zqe4yld] {
	width: 3.4rem;
	display: grid;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	color: var(--pc-ink);
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	text-align: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
	transition: transform .3s var(--rc-spring), box-shadow .3s var(--pc-ease);
}

	.pc-date b[b-k71zqe4yld] {
		min-height: 1.4rem;
		padding: .3rem 0 .25rem;
		background: var(--pc-ink);
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
	}

	.pc-date span[b-k71zqe4yld] {
		padding: .3rem 0 .35rem;
		font-size: 1.25rem;
	}

.pc-day:hover:not(:disabled) .pc-date[b-k71zqe4yld] {
	transform: translateY(-2px);
}

.pc-day.on[b-k71zqe4yld] {
	color: #fff;
}

	.pc-day.on .pc-date[b-k71zqe4yld] {
		transform: translateY(-3px) rotate(-4deg);
		box-shadow: 0 6px 14px rgba(91, 166, 218, .5), 0 0 0 2px rgba(20, 20, 24, .9), 0 0 0 4px var(--pc-sky);
	}

		.pc-day.on .pc-date b[b-k71zqe4yld] {
			background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
			color: var(--pc-ink);
		}

.pc-day:disabled[b-k71zqe4yld],
.pc-day-full[b-k71zqe4yld] {
	opacity: .35;
	cursor: not-allowed;
}

.pc-day:focus-visible[b-k71zqe4yld] {
	outline: none;
}

	.pc-day:focus-visible .pc-date[b-k71zqe4yld],
	.pc-day-other:focus-within .pc-date[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 3px;
	}

/* Any later day: the native date picker laid over its tile, so a tap anywhere on it opens the calendar. */
.pc-day-other input[b-k71zqe4yld] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

	.pc-day-other input[b-k71zqe4yld]::-webkit-calendar-picker-indicator {
		position: absolute;
		inset: 0;
		width: auto;
		height: auto;
		cursor: pointer;
	}

.pc-date-pick span[b-k71zqe4yld] {
	display: grid;
	place-items: center;
}

.pc-date-pick svg[b-k71zqe4yld] {
	width: 1.1rem;
	height: 1.1rem;
	fill: var(--pc-ink);
}

@keyframes pc-leaf-b-k71zqe4yld {
	from {
		opacity: 0;
		transform: translateY(-8px) rotateX(-70deg);
	}
}

.pc-hint[b-k71zqe4yld] {
	margin: 0;
	color: rgba(255, 255, 255, .62);
	font-size: 1rem;
}

/* What's missing or wrong: a pill of the error red with white text (4.8:1), which reads on the dark veil
   where red text alone wouldn't. */
.pc-error[b-k71zqe4yld] {
	justify-self: start;
	align-self: flex-start;
	margin: 0;
	padding: .2rem .7rem;
	border-radius: 999px;
	background: var(--pc-err);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
}

/* The ways to be reached: the room card's toggle chips; on, they fill Sky Blue. */
.pc-chip[b-k71zqe4yld] {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .8rem .35rem .65rem;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--rc-spring), box-shadow .25s;
}

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

	.pc-chip:hover[b-k71zqe4yld] {
		border-color: #fff;
		transform: translateY(-2px);
	}

	.pc-chip:active[b-k71zqe4yld] {
		transform: scale(.94);
	}

	.pc-chip.on[b-k71zqe4yld] {
		background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
		border-color: var(--pc-sky);
		color: var(--pc-ink);
		box-shadow: 0 4px 12px var(--pc-sky-glow);
	}

	.pc-chip:focus-visible[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

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

.pc-chip[b-k71zqe4yld] {
	animation: pc-pop-b-k71zqe4yld .45s var(--rc-spring) calc(80ms + var(--i, 0) * 60ms) backwards;
}

@keyframes pc-pop-b-k71zqe4yld {
	from {
		opacity: 0;
		scale: .6;
	}
}

/* A contact's field: white on the dark back, the site's focus glow; wrong, the error red. 1rem keeps a
   phone from zooming in on it. */
.pc-input[b-k71zqe4yld] {
	width: 100%;
	box-sizing: border-box;
	padding: .5rem .75rem;
	border: 1.5px solid rgba(255, 255, 255, .3);
	border-radius: 8px;
	background: #fff;
	color: var(--pc-ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
	animation: pc-pop-b-k71zqe4yld .35s var(--rc-spring) backwards;
}

	.pc-input[b-k71zqe4yld]::placeholder {
		color: var(--pc-muted);
	}

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

	.pc-input.bad[b-k71zqe4yld] {
		border-color: var(--pc-err);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc-err) 45%, transparent);
	}

/* With days set, take the call down once they have passed: a toggle chip like the contact chips, with a
   checkbox laid over it, so it keeps its keyboard and its label; on, it fills Sky Blue. */
.pc-auto[b-k71zqe4yld] {
	position: relative;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .8rem .35rem .65rem;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--rc-spring), box-shadow .25s;
}

	.pc-auto input[b-k71zqe4yld] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		opacity: 0;
		cursor: pointer;
	}

	.pc-auto svg[b-k71zqe4yld] {
		flex: none;
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.pc-auto:hover[b-k71zqe4yld] {
		border-color: #fff;
		transform: translateY(-2px);
	}

	.pc-auto:has(input:checked)[b-k71zqe4yld] {
		background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
		border-color: var(--pc-sky);
		color: var(--pc-ink);
		box-shadow: 0 4px 12px var(--pc-sky-glow);
	}

	.pc-auto:has(input:focus-visible)[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

/* A booked game's time, beside its label: the native time picker, as wide as a time needs, its digits in
   the scoreboard face. */
.pc-time[b-k71zqe4yld] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .6rem;
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	color: rgba(255, 255, 255, .78);
}

	.pc-time svg[b-k71zqe4yld] {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.pc-time .pc-input[b-k71zqe4yld] {
		width: auto;
		min-width: 7.5rem;
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
	}

/* Players already in: a minus and a plus around the count, left to right like a number line. */
.pc-stepper[b-k71zqe4yld] {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	padding: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
}

	.pc-stepper b[b-k71zqe4yld] {
		min-width: 1.5rem;
		text-align: center;
		font-family: 'Bungee', sans-serif;
		font-weight: 400;
		font-size: 1.25rem;
		line-height: 1;
		color: #fff;
	}

.pc-step[b-k71zqe4yld] {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
	color: var(--pc-ink);
	box-shadow: 0 3px 10px var(--pc-sky-glow);
	cursor: pointer;
	transition: transform .3s var(--rc-spring), opacity .2s;
}

	.pc-step svg[b-k71zqe4yld] {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	.pc-step:hover:not(:disabled)[b-k71zqe4yld] {
		transform: scale(1.1);
	}

	.pc-step:active:not(:disabled)[b-k71zqe4yld] {
		transform: scale(.9);
	}

	.pc-step:disabled[b-k71zqe4yld] {
		opacity: .35;
		cursor: default;
	}

	.pc-step:focus-visible[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

/* The poster's message: the field grows downward only; under it, how much of the limit it uses. */
.pc-note textarea[b-k71zqe4yld] {
	min-height: 4.5rem;
	line-height: 1.4;
	resize: vertical;
}

.pc-note-count[b-k71zqe4yld] {
	justify-self: end;
	margin-top: -.2rem;
	color: rgba(255, 255, 255, .62);
	font-family: 'Bungee', sans-serif;
	line-height: 1;
}

/* The team size: the find-a-game tab's two-handle slider, on the dark back. */
.pc-range[b-k71zqe4yld] {
	--pc-range-h: 2.5rem;
	--pc-thumb: 1.6rem;
	position: relative;
	height: var(--pc-range-h);
}

	.pc-range[b-k71zqe4yld]::before {
		content: "";
		position: absolute;
		inset-inline: calc(var(--pc-thumb) / 2);
		top: 50%;
		height: 6px;
		translate: 0 -50%;
		border-radius: 999px;
		background: linear-gradient(to right,
			rgba(255, 255, 255, .18) calc(var(--a) * 100%), var(--pc-sky) calc(var(--a) * 100%),
			var(--pc-sky) calc(var(--b) * 100%), rgba(255, 255, 255, .18) calc(var(--b) * 100%));
	}

	.pc-range input[b-k71zqe4yld] {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		background: none;
		-webkit-appearance: none;
		appearance: none;
		pointer-events: none;
	}

		.pc-range input:focus-visible[b-k71zqe4yld] {
			outline: none;
		}

		.pc-range input[b-k71zqe4yld]::-webkit-slider-runnable-track {
			height: 100%;
			background: none;
		}

		.pc-range input[b-k71zqe4yld]::-moz-range-track {
			background: none;
		}

		.pc-range input[b-k71zqe4yld]::-webkit-slider-thumb {
			-webkit-appearance: none;
			pointer-events: auto;
			box-sizing: border-box;
			width: var(--pc-thumb);
			height: var(--pc-thumb);
			margin-top: calc((var(--pc-range-h) - var(--pc-thumb)) / 2);
			border: 3px solid var(--pc-sky);
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
			cursor: grab;
		}

		.pc-range input[b-k71zqe4yld]::-moz-range-thumb {
			pointer-events: auto;
			box-sizing: border-box;
			width: var(--pc-thumb);
			height: var(--pc-thumb);
			border: 3px solid var(--pc-sky);
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
			cursor: grab;
		}

		.pc-range input:active[b-k71zqe4yld]::-webkit-slider-thumb {
			cursor: grabbing;
		}

		.pc-range input:active[b-k71zqe4yld]::-moz-range-thumb {
			cursor: grabbing;
		}

		.pc-range input:focus-visible[b-k71zqe4yld]::-webkit-slider-thumb {
			box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .4);
		}

		.pc-range input:focus-visible[b-k71zqe4yld]::-moz-range-thumb {
			box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .4);
		}

.pc-range-ends[b-k71zqe4yld] {
	display: flex;
	justify-content: space-between;
	margin-top: -.35rem;
	color: rgba(255, 255, 255, .55);
	font-family: 'Lunasima', system-ui, sans-serif;
}

/* Post (the Sky Blue pill, wide), and a quieter way to take the call down. */
.pc-actions[b-k71zqe4yld] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	margin-top: .1rem;
}

.pc-publish[b-k71zqe4yld] {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	height: 2.6rem;
	padding: 0 1.2rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--pc-sky) 60%, white), var(--pc-sky));
	color: var(--pc-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 4px 14px rgba(91, 166, 218, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: transform .3s var(--rc-spring), box-shadow .25s, filter .2s;
}

	.pc-publish svg[b-k71zqe4yld] {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}

	.pc-publish:hover:not(:disabled)[b-k71zqe4yld] {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(91, 166, 218, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
		filter: brightness(1.05);
	}

		.pc-publish:hover:not(:disabled) svg[b-k71zqe4yld] {
			animation: pc-wiggle-b-k71zqe4yld .5s var(--pc-ease);
		}

	.pc-publish:active:not(:disabled)[b-k71zqe4yld] {
		transform: scale(.96);
	}

	.pc-publish:focus-visible[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

.pc-takedown[b-k71zqe4yld] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .78);
	font: inherit;
	font-size: 1rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

	.pc-takedown svg[b-k71zqe4yld] {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.pc-takedown:hover:not(:disabled)[b-k71zqe4yld] {
		color: #fff;
	}

	.pc-takedown:focus-visible[b-k71zqe4yld] {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

.pc-publish:disabled[b-k71zqe4yld],
.pc-takedown:disabled[b-k71zqe4yld] {
	opacity: .55;
	cursor: progress;
}

@keyframes pc-wiggle-b-k71zqe4yld {
	30% { transform: rotate(-14deg) scale(1.12); }
	65% { transform: rotate(8deg); }
}

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

@media (prefers-reduced-motion: reduce) {
	.pc[b-k71zqe4yld],
	.pc-flipped .pc-inner[b-k71zqe4yld],
	.pc-unflipping .pc-inner[b-k71zqe4yld],
	.pc-day[b-k71zqe4yld],
	.pc-chip[b-k71zqe4yld],
	.pc-input[b-k71zqe4yld],
	.pc-go:hover svg[b-k71zqe4yld],
	.pc-publish:hover:not(:disabled) svg[b-k71zqe4yld] {
		animation: none;
	}

	.pc-front[b-k71zqe4yld],
	.pc-photo[b-k71zqe4yld],
	.pc-go[b-k71zqe4yld],
	.pc-x[b-k71zqe4yld],
	.pc-date[b-k71zqe4yld],
	.pc-chip[b-k71zqe4yld],
	.pc-seg-btn[b-k71zqe4yld],
	.pc-step[b-k71zqe4yld],
	.pc-auto[b-k71zqe4yld],
	.pc-publish[b-k71zqe4yld] {
		transition: none;
	}

	.pc:not(.pc-flipped):hover .pc-front[b-k71zqe4yld],
	.pc:not(.pc-flipped):hover .pc-photo[b-k71zqe4yld],
	.pc-x:hover[b-k71zqe4yld],
	.pc-auto:hover[b-k71zqe4yld],
	.pc-step:hover:not(:disabled)[b-k71zqe4yld],
	.pc-step:active:not(:disabled)[b-k71zqe4yld] {
		transform: none;
	}
}
/* /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: rotate .75s var(--rc-ease), scale .3s var(--rc-ease), translate .3s var(--rc-ease);
}

/* A transition rather than keyframes: a click mid-turn (RoomCard's catch) sends it back from wherever it
   has got to, where an animation would jump to the far side and start over. */
.rc-flipped .rc-inner[b-op0jn0bi7z] {
	rotate: y 180deg;
}

/* Lifted off the page while it turns, as if picked up, turned over and set back down. */
.rc-turning .rc-inner[b-op0jn0bi7z] {
	scale: .92;
	translate: 0 -10px;
}

/* Over the turning card, unturned (see the markup). */
.rc-turn-catch[b-op0jn0bi7z] {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* min-width: 0 holds a face to the card's width: as a grid item it would otherwise widen to its widest
   unbreakable row (the city/company row with a sort key on it) instead of letting the company truncate. */
.rc-face[b-op0jn0bi7z] {
	grid-area: 1 / 1;
	min-width: 0;
	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 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);
	}

	/* Nothing wraps; the company takes what is left and truncates. With a sort key on a narrow card the
	   company can run out of room altogether - then the city truncates too, never the key. */
	.rc-where > span[b-op0jn0bi7z] {
		flex: none;
		white-space: nowrap;
	}

	.rc-where > .rc-city[b-op0jn0bi7z] {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

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

/* What the list is sorted by (open date, distance), at the far end of the city/company row - off the
   photo, where it ran into the fear domes. */
.rc-sort-key[b-op0jn0bi7z] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	margin-inline-start: auto;
	padding-inline-start: .3rem;
	font-variant-numeric: tabular-nums;
}

/* 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;
	/* Shrinks long before the city does (flex-shrink is weighted by it). */
	flex: 0 1000 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);
	}

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

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

/* ---------- 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-stamp[b-op0jn0bi7z], .rc-rating.SuperLike[b-op0jn0bi7z],
	.rc:hover .rc-domes-features .rc-dome[b-op0jn0bi7z], .rc-mammoth:hover .rc-m-portrait img[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-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 turn is instant: nothing to catch, no lift. */
	.rc-turning .rc-inner[b-op0jn0bi7z] {
		scale: none;
		translate: none;
	}

	.rc-turn-catch[b-op0jn0bi7z] {
		display: 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);
}

/* The note under the open times (where they come from): a small, bold amber caution, lines of even length.
   Amber rather than Ember, which is the fear/closed signal; #b45309 holds 5:1 on the popup's white. */
.rc-pop-note[b-op0jn0bi7z] {
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.45;
	color: #b45309;
	text-wrap: balance;
}

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

/* ---------- open times popup: a desk calendar flipping open ----------
   The page swings down from its binding (the scrim's perspective gives it depth), the rings clip on,
   each day drops in as its own leaf, and the times pop up like arcade tokens - the soonest one gets a
   shine. One sequence, about a second end to end; the times are readable well before it settles. */

.rc-pop-cal[b-op0jn0bi7z] {
	width: min(24rem, calc(100vw - 2rem));
	padding-top: 0;
	transform-origin: 50% 0;
	animation: rc-cal-open-b-op0jn0bi7z .7s var(--rc-spring) both;
}

@keyframes rc-cal-open-b-op0jn0bi7z {
	0% {
		transform: rotateX(-100deg);
		opacity: 0;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	}
	30% {
		opacity: 1;
	}
	100% {
		transform: rotateX(0);
		box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	}
}

/* The spiral binding: two metal rings straddling the top edge. */
.rc-cal-rings[b-op0jn0bi7z] {
	position: absolute;
	top: -12px;
	inset-inline: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: 9rem;
	pointer-events: none;
}

	.rc-cal-rings span[b-op0jn0bi7z] {
		width: 14px;
		height: 28px;
		border: 3px solid var(--rc-ink);
		border-radius: 999px;
		background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--rc-ink) 20%, white));
		box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
		animation: rc-cal-ring-b-op0jn0bi7z .45s var(--rc-spring) .3s both;
	}

		.rc-cal-rings span:last-child[b-op0jn0bi7z] {
			animation-delay: .36s;
		}

@keyframes rc-cal-ring-b-op0jn0bi7z {
	from {
		transform: translateY(-16px) scale(.4);
		opacity: 0;
	}
}

/* The calendar's top band, bled to the popup's edges. It ends at the name tag's middle, so the tag
   hangs half on the band, half on the page. */
.rc-cal-head[b-op0jn0bi7z] {
	align-self: stretch;
	margin: 0 -1.5rem 1.6rem;
	padding: 1.7rem 3rem 0;
	border-radius: 16px 16px 0 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--rc-sky) 70%, white), var(--rc-sky));
	box-shadow: 0 4px 12px rgba(91, 166, 218, .3);
}

/* Whose calendar it is: a white name tag pinned to the band - the game in the headline face, the
   company in a dark pill like the date tiles' month strip - swinging in from its pin once the page
   has landed, and left hanging a touch askew. */
.rc-cal-tag[b-op0jn0bi7z] {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem .5rem;
	max-width: 100%;
	margin: .55rem auto -1.25rem;
	padding: .4rem .45rem .4rem .45rem;
	padding-inline-start: .9rem;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18), 0 1px 3px rgba(0, 0, 0, .12);
	transform: rotate(-1.5deg);
	transform-origin: 50% -.6rem;
	animation: rc-cal-tag-swing-b-op0jn0bi7z .9s var(--rc-ease) .45s both;
}

	/* The pin. */
	.rc-cal-tag[b-op0jn0bi7z]::before {
		content: "";
		position: absolute;
		top: -5px;
		left: 50%;
		width: 10px;
		height: 10px;
		margin-left: -5px;
		border-radius: 50%;
		background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--rc-ink) 22%);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	}

.rc-cal-tag-room[b-op0jn0bi7z] {
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.2;
	color: var(--rc-ink);
}

.rc-cal-tag-company[b-op0jn0bi7z] {
	padding: .2rem .65rem;
	border-radius: 999px;
	background: var(--rc-ink);
	color: #fff;
	line-height: 1.2;
	white-space: nowrap;
}

@keyframes rc-cal-tag-swing-b-op0jn0bi7z {
	0% {
		transform: translateY(-14px) rotate(-14deg);
		opacity: 0;
	}
	30% {
		transform: translateY(0) rotate(9deg);
		opacity: 1;
	}
	55% {
		transform: rotate(-5deg);
	}
	75% {
		transform: rotate(1deg);
	}
	100% {
		transform: rotate(-1.5deg);
	}
}

/* A long list (three busy days) scrolls inside the page rather than past the screen. */
.rc-cal-days[b-op0jn0bi7z] {
	width: 100%;
	max-height: min(22rem, calc(100vh - 17rem));
	margin: 0;
	padding: .25rem .25rem .5rem;
	list-style: none;
	display: grid;
	gap: .85rem;
	overflow-y: auto;
	perspective: 900px;
	text-align: start;
}

.rc-cal-day[b-op0jn0bi7z] {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: .75rem;
	transform-origin: 50% 0;
	animation: rc-cal-leaf-in-b-op0jn0bi7z .55s var(--rc-spring) calc(.3s + var(--d) * .12s) both;
}

@keyframes rc-cal-leaf-in-b-op0jn0bi7z {
	from {
		transform: rotateX(-85deg);
		opacity: 0;
	}
}

/* The day's tear-off page: month on a dark strip, the date in big arcade digits. */
.rc-cal-date[b-op0jn0bi7z] {
	width: 3.4rem;
	display: grid;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	text-align: center;
}

	.rc-cal-date b[b-op0jn0bi7z] {
		padding: .3rem 0 .25rem;
		background: var(--rc-ink);
		color: #fff;
		font-weight: 400;
		text-transform: uppercase;
	}

	.rc-cal-date span[b-op0jn0bi7z] {
		padding: .35rem 0 .4rem;
		font-size: 1.25rem;
		color: var(--rc-ink);
	}

.rc-cal-label[b-op0jn0bi7z] {
	margin: .1rem 0 .4rem;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	color: var(--rc-ink);
}

.rc-cal-times[b-op0jn0bi7z] {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
}

/* A time token: the badge pill (Sky Blue, ink digits), glossed and lifted so it pops off the page. */
.rc-cal-time[b-op0jn0bi7z] {
	position: relative;
	overflow: hidden;
	padding: .4rem .7rem .35rem;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--rc-sky) 60%, white), var(--rc-sky));
	color: var(--rc-ink);
	font-family: 'Bungee', sans-serif;
	line-height: 1;
	letter-spacing: .02em;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	animation: rc-cal-token-b-op0jn0bi7z .5s var(--rc-ease) calc(.45s + var(--d) * .12s + min(var(--t), 10) * .04s) both;
}

@keyframes rc-cal-token-b-op0jn0bi7z {
	0% {
		transform: scale(0) rotate(-14deg);
		opacity: 0;
	}
	60% {
		transform: scale(1.18) rotate(4deg);
		opacity: 1;
	}
	100% {
		transform: scale(1) rotate(0);
	}
}

/* The soonest time: a ring, and one sweep of light once it has popped. */
.rc-cal-next[b-op0jn0bi7z] {
	box-shadow: 0 4px 12px rgba(91, 166, 218, .55), 0 0 0 2px #fff, 0 0 0 4px var(--rc-sky);
}

	.rc-cal-next[b-op0jn0bi7z]::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
		transform: translateX(-120%);
		animation: rc-cal-shine-b-op0jn0bi7z .7s ease-out 1.1s both;
	}

@keyframes rc-cal-shine-b-op0jn0bi7z {
	to {
		transform: translateX(120%);
	}
}

/* Loading: a little calendar leafing through its pages. */
.rc-cal-loading[b-op0jn0bi7z] {
	display: grid;
	justify-items: center;
	gap: .5rem;
	padding: .5rem 0;
}

.rc-cal-leafing[b-op0jn0bi7z] {
	position: relative;
	width: 2.75rem;
	height: 2.5rem;
	perspective: 220px;
}

	.rc-cal-leafing i[b-op0jn0bi7z] {
		position: absolute;
		inset: 0;
		border-radius: 8px;
		background: linear-gradient(180deg, var(--rc-ink) 0 30%, #fff 30%);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	}

		.rc-cal-leafing i:last-child[b-op0jn0bi7z] {
			transform-origin: 50% 0;
			animation: rc-cal-leafing-b-op0jn0bi7z .9s var(--rc-ease) infinite;
		}

@keyframes rc-cal-leafing-b-op0jn0bi7z {
	70%, 100% {
		transform: rotateX(-180deg);
		opacity: 0;
	}
}

/* Reduced motion: no swinging, flipping or popping - everything simply fades in, the order kept. */
@media (prefers-reduced-motion: reduce) {
	.rc-pop-cal[b-op0jn0bi7z], .rc-cal-rings span[b-op0jn0bi7z], .rc-cal-day[b-op0jn0bi7z], .rc-cal-time[b-op0jn0bi7z], .rc-cal-tag[b-op0jn0bi7z] {
		animation: rc-fade-b-op0jn0bi7z .25s ease-out both;
	}

	.rc-cal-next[b-op0jn0bi7z]::after {
		display: none;
	}

	.rc-cal-leafing i:last-child[b-op0jn0bi7z] {
		animation: rc-fade-b-op0jn0bi7z 1.2s ease-in-out infinite alternate;
	}
}

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

/* ---------- location popup: a folded road map opening out ----------
   A tri-fold map: the Sky Blue cover flap opens first, then the flap under it, and the sheet lies flat
   with its creases still showing; then the pin drops onto the junction (the system's spring) and pings
   once. The room's details sit in the map's legend box on plain white, so the map never costs legibility.
   About a second end to end; the details are readable from about 0.6s. */

.rc-pop-map[b-op0jn0bi7z] {
	--map-w: min(22rem, calc(100vw - 2rem));
	/* The map's one material colour; its grid, creases and back are Ink and paper mixed. */
	--map-paper: #f6f0e3;
	--map-line: color-mix(in srgb, var(--rc-ink) 6%, transparent);
	--map-crease: color-mix(in srgb, var(--rc-ink) 10%, transparent);
	--map-back: color-mix(in srgb, var(--map-paper) 93%, var(--rc-ink));
	width: var(--map-w);
	/* The map art is 360x150, scaled to the popup's width; the legend overlaps its last 1rem. */
	padding: calc(var(--map-w) * 150 / 360 - 1rem) 1rem 1rem;
	background: none;
	box-shadow: none;
	animation: rc-fade-b-op0jn0bi7z .15s ease-out both;
}

.rc-map-sheet[b-op0jn0bi7z] {
	position: absolute;
	inset: 0;
	perspective: 900px;
}

	/* The paper's shadow on the table, each side widening with its own flap. */
	.rc-map-sheet[b-op0jn0bi7z]::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: var(--rc-radius);
		box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
		animation: rc-map-shadow-r-b-op0jn0bi7z .4s var(--rc-ease) .08s both, rc-map-shadow-l-b-op0jn0bi7z .4s var(--rc-ease) .22s both;
	}

@keyframes rc-map-shadow-r-b-op0jn0bi7z {
	from {
		right: calc(100% / 3);
	}
}

@keyframes rc-map-shadow-l-b-op0jn0bi7z {
	from {
		left: calc(100% / 3);
	}
}

/* Three panels of one sheet: the two outer ones folded over the middle, hinged on its edges - the cover
   flap on top, so it's the one that opens first. */
.rc-map-panel[b-op0jn0bi7z] {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(100% / 3);
	transform-style: preserve-3d;
}

	.rc-map-panel[b-op0jn0bi7z]::before,
	.rc-map-panel[b-op0jn0bi7z]::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	/* Front: the crease shading, the horizontal fold, the map art and a faint grid on the paper - each
	   panel showing its own third of the one sheet (--shift). */
	.rc-map-panel[b-op0jn0bi7z]::before {
		background:
			var(--crease),
			linear-gradient(transparent calc(50% - 1px), var(--map-line) calc(50% - 1px) 50%, rgba(255, 255, 255, .7) 50% calc(50% + 1px), transparent calc(50% + 1px)),
			url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='150' viewBox='0 0 360 150'><path d='M-10 128C60 108 96 146 162 132S262 96 370 110' fill='none' stroke='%23cfe4f3' stroke-width='16' stroke-linecap='round'/><g fill='%23ece3d1'><rect x='86' y='4' width='60' height='18' rx='4'/><rect x='212' y='2' width='48' height='20' rx='4'/><rect x='80' y='46' width='70' height='22' rx='4'/><rect x='312' y='46' width='40' height='22' rx='4'/><rect x='82' y='92' width='62' height='12' rx='4'/><rect x='204' y='90' width='56' height='12' rx='4'/></g><rect x='202' y='42' width='64' height='28' rx='8' fill='%23dfebd2'/><g fill='none' stroke-linecap='round'><g stroke='%23e3d7c0' stroke-width='11'><path d='M-10 84Q90 76 180 78T370 64'/><path d='M168-10L192 160'/></g><g stroke='%23fff' stroke-width='7'><path d='M-10 84Q90 76 180 78T370 64'/><path d='M168-10L192 160'/></g><g stroke='%23fff' stroke-width='4'><path d='M-10 36L370 28'/><path d='M20-10L64 160'/><path d='M300-10L276 160'/></g></g><path d='M61 150L44 84Q110 77 178 78' fill='none' stroke='%235ba6da' stroke-width='3' stroke-dasharray='6 5' stroke-linecap='round'/></svg>") var(--shift) 0 / var(--map-w) auto no-repeat,
			repeating-linear-gradient(90deg, var(--map-line) 0 1px, transparent 1px 24px) var(--shift) 0,
			repeating-linear-gradient(var(--map-line) 0 1px, transparent 1px 24px),
			var(--map-paper);
	}

	/* Back: plain paper - except the cover flap, which is the map's Sky Blue cover. */
	.rc-map-panel[b-op0jn0bi7z]::after {
		transform: rotateY(180deg);
		background: var(--map-back);
	}

.rc-map-l[b-op0jn0bi7z] {
	left: 0;
	z-index: 1;
	--shift: 0px;
	--crease: linear-gradient(90deg, transparent 88%, var(--map-crease));
	border-radius: var(--rc-radius) 0 0 var(--rc-radius);
	transform-origin: 100% 50%;
	animation: rc-map-unfold-l-b-op0jn0bi7z .4s var(--rc-ease) .22s both;
}

.rc-map-c[b-op0jn0bi7z] {
	left: calc(100% / 3);
	--shift: calc(var(--map-w) / -3);
	--crease: linear-gradient(90deg, rgba(255, 255, 255, .8) 0 1px, transparent 6% 94%, rgba(255, 255, 255, .8) calc(100% - 1px));
}

.rc-map-r[b-op0jn0bi7z] {
	right: 0;
	z-index: 2;
	--shift: calc(var(--map-w) * -2 / 3);
	--crease: linear-gradient(270deg, transparent 88%, var(--map-crease));
	border-radius: 0 var(--rc-radius) var(--rc-radius) 0;
	transform-origin: 0 50%;
	animation: rc-map-unfold-r-b-op0jn0bi7z .4s var(--rc-ease) .08s both;
}

	.rc-map-r[b-op0jn0bi7z]::after {
		background: linear-gradient(160deg, color-mix(in srgb, var(--rc-sky) 75%, white), var(--rc-sky));
	}

	/* A flap's face is in shadow while it stands up, and catches the light as it lies down. */
	.rc-map-l[b-op0jn0bi7z]::before,
	.rc-map-r[b-op0jn0bi7z]::before {
		animation: rc-map-light-b-op0jn0bi7z .4s var(--rc-ease) both;
		animation-delay: inherit;
	}

@keyframes rc-map-unfold-l-b-op0jn0bi7z {
	from {
		transform: rotateY(178deg);
	}
}

@keyframes rc-map-unfold-r-b-op0jn0bi7z {
	from {
		transform: rotateY(-178deg);
	}
}

@keyframes rc-map-light-b-op0jn0bi7z {
	from {
		filter: brightness(.72);
	}
}

/* The pin lands on the junction of the two main roads (360x150 art: x 180, y 78); its tip is 37px down
   its 40px box. The spot under it is the landing: a shadow that grows as it drops, and one ping. */
.rc-map-pin[b-op0jn0bi7z] {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(var(--map-w) * 78 / 360 - 37px);
	margin-left: -20px;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
	animation: rc-map-pin-b-op0jn0bi7z .5s var(--rc-spring) .56s both;
}

@keyframes rc-map-pin-b-op0jn0bi7z {
	from {
		transform: translateY(-56px);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

.rc-map-spot[b-op0jn0bi7z] {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(var(--map-w) * 78 / 360);
}

	.rc-map-spot[b-op0jn0bi7z]::before,
	.rc-map-spot[b-op0jn0bi7z]::after {
		content: "";
		position: absolute;
		border-radius: 50%;
	}

	.rc-map-spot[b-op0jn0bi7z]::before {
		left: -10px;
		top: -3px;
		width: 20px;
		height: 6px;
		background: rgba(31, 31, 31, .28);
		filter: blur(1px);
		animation: rc-map-spot-b-op0jn0bi7z .5s var(--rc-spring) .56s both;
	}

	.rc-map-spot[b-op0jn0bi7z]::after {
		left: -14px;
		top: -14px;
		width: 28px;
		height: 28px;
		border: 2px solid var(--rc-sky);
		opacity: 0;
		animation: rc-map-ping-b-op0jn0bi7z .7s var(--rc-ease) .9s;
	}

@keyframes rc-map-spot-b-op0jn0bi7z {
	from {
		transform: scale(.2);
		opacity: 0;
	}
}

@keyframes rc-map-ping-b-op0jn0bi7z {
	from {
		transform: scale(.3);
		opacity: .9;
	}
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

/* The map's legend box: plain white with a fine inner rule, holding the room, the address and the two ways
   to get there. */
.rc-map-legend[b-op0jn0bi7z] {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: 1rem 1rem 1.1rem;
	border-radius: 12px;
	background: #fff;
	outline: 1px solid rgba(31, 31, 31, .14);
	outline-offset: -5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	animation: rc-map-legend-b-op0jn0bi7z .4s var(--rc-ease) .45s both;
}

@keyframes rc-map-legend-b-op0jn0bi7z {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* The close button sits on the map: white, and only once the flap under it is open. */
.rc-pop-map .rc-pop-x[b-op0jn0bi7z] {
	z-index: 2;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	animation: rc-fade-b-op0jn0bi7z .2s ease-out .5s both;
}

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

/* Reduced motion: the map is simply there, flat - the popup, its legend and the close button fade in. */
@media (prefers-reduced-motion: reduce) {
	.rc-map-panel[b-op0jn0bi7z], .rc-map-panel[b-op0jn0bi7z]::before, .rc-map-sheet[b-op0jn0bi7z]::before, .rc-map-pin[b-op0jn0bi7z], .rc-map-spot[b-op0jn0bi7z]::before {
		animation: none;
	}

	.rc-map-spot[b-op0jn0bi7z]::after {
		display: none;
	}

	.rc-pop-map[b-op0jn0bi7z], .rc-map-legend[b-op0jn0bi7z], .rc-pop-map .rc-pop-x[b-op0jn0bi7z] {
		animation: rc-fade-b-op0jn0bi7z .25s ease-out both;
	}
}
/* /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;
}
/* /Components/Shared/RoomPhotoTake.razor.rz.scp.css */
/* The room page's photo as a two-faced card, turned as a catalogue card turns (RoomCard.razor.css): the
   photo in front with the coin at its bottom corner, the visitor's take on the back over a blurred copy. */

.rpt[b-i4ch3kvu0l] {
	--rpt-sky: var(--text-primary, #5ba6da);
	--rpt-spring: cubic-bezier(.34, 1.56, .64, 1);
	--rpt-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	perspective: 1400px;
}

/* ---------- the two faces share one grid cell: the photo's ---------- */

.rpt-inner[b-i4ch3kvu0l] {
	display: grid;
	transform-style: preserve-3d;
	transition: rotate .75s var(--rpt-ease), scale .3s var(--rpt-ease), translate .3s var(--rpt-ease);
}

/* A transition rather than keyframes, so a click mid-turn sends it back from wherever it has got to. */
.rpt-flipped .rpt-inner[b-i4ch3kvu0l] {
	rotate: y 180deg;
}

/* Lifted off the page while it turns, as if picked up, turned over and set back down. */
.rpt-turning .rpt-inner[b-i4ch3kvu0l] {
	scale: .95;
	translate: 0 -10px;
}

/* Over the turning photo, unturned: a click there turns it back. */
.rpt-turn-catch[b-i4ch3kvu0l] {
	position: absolute;
	inset: 0;
	z-index: 2;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.rpt-face[b-i4ch3kvu0l] {
	grid-area: 1 / 1;
	position: relative;
	min-width: 0;
	overflow: hidden;
	border-radius: 16px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .08);
}

.rpt-photo[b-i4ch3kvu0l] {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #f7f7f7;
}

/* The coin, as on the card: the way round to the back, spinning a half-turn on hover. At the photo's
   bottom end corner - the left in Hebrew, mirrored in English like the card's. */
.rpt-coin[b-i4ch3kvu0l] {
	position: absolute;
	inset-block-end: .75rem;
	inset-inline-end: .75rem;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 2px solid var(--rpt-sky);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	transition: transform .5s var(--rpt-spring), background-color .25s, box-shadow .25s, opacity .25s;
}

	.rpt-coin svg[b-i4ch3kvu0l] {
		width: 24px;
		height: 24px;
		fill: var(--rpt-sky);
		transition: fill .25s;
	}

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

		.rpt-coin:hover:not(:disabled) svg[b-i4ch3kvu0l] {
			fill: #fff;
		}

	/* Until the page is live and the take is in. */
	.rpt-coin:disabled[b-i4ch3kvu0l] {
		opacity: .6;
		cursor: default;
	}

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

.rpt-back[b-i4ch3kvu0l] {
	transform: rotateY(180deg);
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	color: #fff;
}

.rpt-veil[b-i4ch3kvu0l] {
	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));
}

/* TakeForm's choices and save button are laid out by this column (its save sits at the foot). */
.rpt-back-body[b-i4ch3kvu0l] {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	box-sizing: border-box;
	padding: 1rem 1.1rem 1.1rem;
}

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

.rpt-name[b-i4ch3kvu0l] {
	margin: 0;
	font-family: 'Fredoka', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.rpt-x[b-i4ch3kvu0l] {
	flex: none;
	width: 32px;
	height: 32px;
	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(--rpt-spring);
}

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

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

@media (prefers-reduced-motion: reduce) {
	.rpt-turning .rpt-inner[b-i4ch3kvu0l] {
		scale: none;
		translate: none;
	}

	.rpt-turn-catch[b-i4ch3kvu0l] {
		display: none;
	}

	.rpt-inner[b-i4ch3kvu0l], .rpt-coin[b-i4ch3kvu0l], .rpt-x[b-i4ch3kvu0l] {
		transition: none;
	}

	.rpt-coin:hover:not(:disabled)[b-i4ch3kvu0l], .rpt-x:hover[b-i4ch3kvu0l] {
		transform: none;
	}
}
/* /Components/Shared/SignInPerks.razor.rz.scp.css */
/* Sign-in perks (SignInPerks.razor): what signing in opens up, as cards over the blurred page, in the site's
   popup look (as "What's new") - white, 18px corners, the soft float shadow, a springy pop. The cards come in
   one after another, each with its coin: Sky tints and Vivid Blue marks (the colour of what's about you), the
   like thumb in Forest, and on the player card the profile's armadillo, growing a stage at a time and standing
   up out of its coin as the header's does out of the bar. Three cards a row; on a phone, one under another,
   each on its side. With reduced motion everything is simply there. */

.sp-scrim[b-sgb7ffukb1] {
	--sp-sky: #5ba6da;
	--sp-voice: #1976d2;
	--sp-forest: #1B5E20;
	--sp-ink: #1f1f1f;
	--sp-muted: #444444;
	--sp-tint: color-mix(in srgb, var(--sp-sky) 9%, white);
	--sp-coin: color-mix(in srgb, var(--sp-sky) 24%, white);
	--sp-edge: #c6e2f4;     /* Sky's lightest step: hairlines */
	--sp-ease: cubic-bezier(.22, 1, .36, 1);
	--sp-spring: cubic-bezier(.34, 1.56, .64, 1);
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(20, 20, 24, .45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: sp-fade-b-sgb7ffukb1 .25s ease-out both;
}

.sp[b-sgb7ffukb1] {
	width: min(42rem, 100%);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 1rem 1.25rem 0;
	border-radius: 18px;
	background: #fff;
	color: var(--sp-ink);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	font-family: 'Lunasima', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	animation: sp-pop-b-sgb7ffukb1 .5s var(--sp-spring) both;
	outline: none;
}

/* ---------- Header ---------- */

.sp-head[b-sgb7ffukb1] {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.sp-logo[b-sgb7ffukb1] {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: .15rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--sp-sky), 0 2px 6px rgba(0, 0, 0, .15);
	object-fit: contain;
}

.sp-title[b-sgb7ffukb1] {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
}

.sp-x[b-sgb7ffukb1] {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eee;
	cursor: pointer;
	transition: background-color .25s, transform .4s var(--sp-spring);
}

	.sp-x:hover[b-sgb7ffukb1],
	.sp-x:focus-visible[b-sgb7ffukb1] {
		background: #e2e2e2;
		transform: rotate(90deg);
	}

	.sp-x svg[b-sgb7ffukb1] {
		width: 18px;
		height: 18px;
		fill: #333;
	}

.sp-lead[b-sgb7ffukb1] {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sp-muted);
}

/* ---------- The cards ---------- */

.sp-cards[b-sgb7ffukb1] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-card[b-sgb7ffukb1] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .6rem;
	padding: 1rem .9rem;
	border: 1px solid var(--sp-edge);
	border-radius: 1rem;
	background: var(--sp-tint);
	animation: sp-in-b-sgb7ffukb1 .5s var(--sp-ease) calc(.18s + var(--i) * .07s) both;
}

.sp-coin[b-sgb7ffukb1] {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--sp-coin);
	box-shadow: inset 0 0 0 2px #fff;
	animation: sp-coin-b-sgb7ffukb1 .55s var(--sp-spring) calc(.32s + var(--i) * .07s) both;
}

	.sp-coin svg[b-sgb7ffukb1] {
		width: 1.5rem;
		height: 1.5rem;
		fill: var(--sp-voice);
	}

.sp-rate .sp-coin svg[b-sgb7ffukb1] {
	fill: var(--sp-forest);
}

.sp-words[b-sgb7ffukb1] {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.sp-h[b-sgb7ffukb1] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
}

.sp-p[b-sgb7ffukb1] {
	margin: 0;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--sp-muted);
}

/* The player card's armadillo: the profile's avatar, its feet in the coin and its head over the top, each
   stage popping up from its feet over the last. */
.sp-grow[b-sgb7ffukb1] {
	position: absolute;
	inset-inline: -.5rem;
	bottom: .2rem;
	display: grid;
	justify-items: center;
	align-items: end;
}

	.sp-grow img[b-sgb7ffukb1] {
		grid-area: 1 / 1;
		height: 3.3rem;
		width: auto;
		opacity: 0;
		transform-origin: 50% 100%;
		filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
		animation: sp-stage-b-sgb7ffukb1 3.6s linear infinite;
		/* Stage s shows from 1.2s * s into each round. */
		animation-delay: calc(var(--s) * 1.2s - 3.6s);
	}

/* ---------- Sign in, or not now ---------- */

/* Stuck to the bottom of the dialog, so the sign-in stays in reach while a phone scrolls the cards under it. */
.sp-foot[b-sgb7ffukb1] {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem 1.25rem;
	margin-inline: -1.25rem;
	padding: .6rem 1.25rem 1.25rem;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff .6rem);
}

.sp-google[b-sgb7ffukb1] {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	height: 3rem;
	padding-inline: .35rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--sp-voice);
	color: #fff;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--sp-voice) 35%, transparent);
	cursor: pointer;
	transition: transform .3s var(--sp-spring), box-shadow .2s;
}

	.sp-google:hover[b-sgb7ffukb1],
	.sp-google:focus-visible[b-sgb7ffukb1] {
		transform: translateY(-2px);
		box-shadow: 0 10px 22px color-mix(in srgb, var(--sp-voice) 40%, transparent);
	}

.sp-g[b-sgb7ffukb1] {
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: #fff;
}

	/* The "G" is drawn by ArmadilloNavbar, which shares it. */
	.sp-g[b-sgb7ffukb1]  svg {
		width: 1.25rem;
		height: 1.25rem;
	}

.sp-later[b-sgb7ffukb1] {
	padding: .45rem .8rem;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--sp-muted);
	font: inherit;
	font-size: 1rem;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 3px;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

	.sp-later:hover[b-sgb7ffukb1] {
		background: #f7f7f7;
		color: var(--sp-ink);
	}

.sp-google:focus-visible[b-sgb7ffukb1],
.sp-later:focus-visible[b-sgb7ffukb1],
.sp-x:focus-visible[b-sgb7ffukb1] {
	outline: 3px solid var(--sp-voice);
	outline-offset: 2px;
}

/* ---------- Phones: the cards one under another, each on its side ---------- */

@media (max-width: 575.98px) {
	.sp[b-sgb7ffukb1] {
		gap: .75rem;
		padding: .9rem 1rem 0;
	}

	.sp-cards[b-sgb7ffukb1] {
		grid-template-columns: minmax(0, 1fr);
		gap: .5rem;
	}

	.sp-card[b-sgb7ffukb1] {
		flex-direction: row;
		align-items: center;
		gap: .8rem;
		padding: .7rem .8rem;
	}

	.sp-foot[b-sgb7ffukb1] {
		flex-direction: column;
		gap: .35rem;
		margin-inline: -1rem;
		padding: .5rem 1rem 1rem;
	}
}

/* ---------- Motion ---------- */

@keyframes sp-fade-b-sgb7ffukb1 {
	from {
		opacity: 0;
	}
}

@keyframes sp-pop-b-sgb7ffukb1 {
	from {
		opacity: 0;
		scale: .6;
	}
}

@keyframes sp-in-b-sgb7ffukb1 {
	from {
		opacity: 0;
		translate: 0 .75rem;
	}
}

@keyframes sp-coin-b-sgb7ffukb1 {
	from {
		opacity: 0;
		scale: .4;
	}
}

/* A third of the round each, three stages. */
@keyframes sp-stage-b-sgb7ffukb1 {
	0% {
		opacity: 1;
		scale: .6;
	}

	9% {
		scale: 1.08;
	}

	15%, 33.3% {
		opacity: 1;
		scale: 1;
	}

	33.4%, 100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-scrim[b-sgb7ffukb1],
	.sp[b-sgb7ffukb1],
	.sp-card[b-sgb7ffukb1],
	.sp-coin[b-sgb7ffukb1],
	.sp-grow img[b-sgb7ffukb1] {
		animation: none;
	}

	/* The last stage, standing still. */
	.sp-grow .sp-still[b-sgb7ffukb1] {
		opacity: 1;
	}

	.sp-x[b-sgb7ffukb1],
	.sp-google[b-sgb7ffukb1],
	.sp-later[b-sgb7ffukb1] {
		transition: none;
	}
}
/* /Components/Shared/TakeForm.razor.rz.scp.css */
/* The visitor's take, on the dark blurred back of a card or a photo: Sky Blue toggles, round rating
   choices and the save pill, each popping in on its own beat. Laid out by the host's flex column. */

.tf-chips[b-kpzvizi868], .tf-rates[b-kpzvizi868], .tf-save[b-kpzvizi868], .tf-login[b-kpzvizi868] {
	--tf-spring: cubic-bezier(.34, 1.56, .64, 1);
	--tf-ink: #1f1f1f;
	--tf-sky: var(--text-primary, #5ba6da);
	--tf-forest: var(--bg-min-players, #1B5E20);
	--tf-ember: var(--bg-fear, #D84315);
}

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

/* Toggle chip: a pill with icon and label; "on" fills Sky Blue. */
.tf-chip[b-kpzvizi868] {
	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: tf-pop-b-kpzvizi868 .45s var(--tf-spring) both;
	animation-delay: calc(80ms + var(--i, 0) * 60ms);
	transition: background-color .25s, border-color .25s, transform .3s var(--tf-spring), opacity .25s;
}

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

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

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

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

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

@keyframes tf-pop-b-kpzvizi868 {
	from {
		opacity: 0;
		scale: .6;
	}
}

/* My rating: four big round choices. */
.tf-rates[b-kpzvizi868] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .35rem;
}

.tf-rate[b-kpzvizi868] {
	--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: tf-pop-b-kpzvizi868 .45s var(--tf-spring) both;
	animation-delay: calc(120ms + var(--i, 0) * 60ms);
	transition: background-color .25s, transform .3s var(--tf-spring), box-shadow .25s;
}

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

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

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

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

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

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

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

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

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

/* At the foot of the host's column. */
.tf-save[b-kpzvizi868] {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .5rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--tf-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(--tf-spring), box-shadow .25s, filter .2s;
}

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

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

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

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

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

	/* In the middle with its prompt, not pushed to the foot. */
	.tf-login .tf-save[b-kpzvizi868] {
		margin-top: 0;
	}

@media (prefers-reduced-motion: reduce) {
	.tf-chip[b-kpzvizi868], .tf-rate[b-kpzvizi868], .tf-rate.on svg[b-kpzvizi868] {
		animation: none;
	}

	.tf-chip[b-kpzvizi868], .tf-rate[b-kpzvizi868], .tf-rate svg[b-kpzvizi868], .tf-save[b-kpzvizi868] {
		transition: none;
	}
}
/* /Components/Shared/WhatsNew.razor.rz.scp.css */
/* "What's new" (WhatsNew.razor): a story card over the blurred page, in the site's popup look (RoomCard's
   .rc-pop) - white, round corners, the soft float shadow, a springy pop. Fredoka headings, Bungee for
   digits, Lunasima body. Each card's picture plays once as the card comes in (some keep a gentle loop);
   with reduced motion everything is simply present and nothing moves on by itself. */

.wn-scrim[b-bwimssrhvc] {
	--wn-sky: #5ba6da;
	--wn-voice: #1976d2;
	--wn-deep: #1e567c;     /* Sky's deep step: its text on the pale tints */
	--wn-ink: #1f1f1f;
	--wn-muted: #444444;
	--wn-tint: color-mix(in srgb, var(--wn-sky) 12%, white);
	--wn-chip: color-mix(in srgb, var(--wn-sky) 22%, white);
	--wn-edge: #c6e2f4;     /* Sky's lightest step: hairlines and dashes */
	--wn-skeleton: #d3d8de; /* Silver's light step: text drawn as bars */
	--wn-photo: linear-gradient(160deg, #153f5c, #4589b8);
	--wn-like: #1B5E20;     /* the card's own like / dislike: Forest and Ember */
	--wn-dislike: #D84315;
	--wn-ease: cubic-bezier(.22, 1, .36, 1);
	--wn-card-time: 8s;
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(20, 20, 24, .45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: wn-fade-b-bwimssrhvc .25s ease-out both;
}

.wn[b-bwimssrhvc] {
	position: relative;
	width: min(24rem, 100%);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	padding: .9rem 1.15rem 1.15rem;
	border-radius: 18px;
	background: #fff;
	color: var(--wn-ink);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	font-family: 'Lunasima', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
	outline: none;
}

/* ---------- Progress: one bar per card ---------- */

.wn-bars[b-bwimssrhvc] {
	display: flex;
	gap: .3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wn-bar[b-bwimssrhvc] {
	flex: 1;
	height: .3rem;
	border-radius: 999px;
	background: #eceef1;
	overflow: hidden;
}

	.wn-bar i[b-bwimssrhvc] {
		display: block;
		width: 0;
		height: 100%;
		border-radius: inherit;
		background: var(--wn-sky);
	}

	.wn-bar.done i[b-bwimssrhvc] {
		width: 100%;
	}

/* Its end moves the story on (site.js). Held still while the card is hovered, pressed, or driven by keys. */
.wn-run[b-bwimssrhvc] {
	animation: wn-run-b-bwimssrhvc var(--wn-card-time) linear both;
}

@media (hover: hover) {
	.wn:hover .wn-run[b-bwimssrhvc] {
		animation-play-state: paused;
	}
}

.wn:has(.wn-stage:active) .wn-run[b-bwimssrhvc],
.wn:has(:focus-visible) .wn-run[b-bwimssrhvc] {
	animation-play-state: paused;
}

/* ---------- Header ---------- */

.wn-head[b-bwimssrhvc] {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.wn-logo[b-bwimssrhvc] {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: .15rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--wn-sky), 0 2px 6px rgba(0, 0, 0, .15);
	object-fit: contain;
}

.wn-title[b-bwimssrhvc] {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.15;
}

.wn-count[b-bwimssrhvc] {
	font-family: 'Bungee', sans-serif;
	font-size: .85rem;
	letter-spacing: .02em;
	color: var(--wn-voice);
}

.wn-x[b-bwimssrhvc] {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #eee;
	cursor: pointer;
	transition: background-color .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

	.wn-x:hover[b-bwimssrhvc],
	.wn-x:focus-visible[b-bwimssrhvc] {
		background: #e2e2e2;
		transform: rotate(90deg);
	}

	.wn-x svg[b-bwimssrhvc] {
		width: 18px;
		height: 18px;
		fill: #333;
	}

/* ---------- The picture ---------- */

.wn-stage[b-bwimssrhvc] {
	position: relative;
	height: 11.5rem;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 16px;
	/* The header's dotted trail, as a faint grid */
	background: radial-gradient(circle, rgba(91, 166, 218, .25) 1.1px, transparent 1.5px) 0 0 / 14px 14px, var(--wn-tint);
	user-select: none;
	-webkit-user-select: none;
}

.wn-taps[b-bwimssrhvc] {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
}

	.wn-taps span[b-bwimssrhvc] {
		flex: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

.wn-pic[b-bwimssrhvc] {
	position: relative;
}

/* A text line drawn as a pale bar (cards, tickets, flyers, rows) */
.wn-lines[b-bwimssrhvc] {
	display: grid;
	gap: .3rem;
}

	.wn-lines i[b-bwimssrhvc] {
		display: block;
		height: .35rem;
		border-radius: 999px;
		background: var(--wn-skeleton);
	}

		.wn-lines i:last-child:not(:first-child)[b-bwimssrhvc] {
			width: 60%;
		}

.wn-keyhole[b-bwimssrhvc] {
	width: 1.5rem;
	height: 1.5rem;
	fill: rgba(255, 255, 255, .85);
}

.wn-stroke[b-bwimssrhvc] {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Text and buttons ---------- */

.wn-body[b-bwimssrhvc] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	min-height: 7.4rem;
	animation: wn-rise-b-bwimssrhvc .45s var(--wn-ease) both;
}

.wn-h[b-bwimssrhvc] {
	margin: 0;
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.15;
}

.wn-p[b-bwimssrhvc] {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wn-muted);
}

.wn-note[b-bwimssrhvc] {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .15rem .6rem;
	border-radius: 999px;
	background: var(--wn-chip);
	color: #114285;
	font-size: .8rem;
}

	.wn-note svg[b-bwimssrhvc] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

.wn-foot[b-bwimssrhvc] {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* with no call to action (the community card), the steps keep their side */
	gap: .5rem;
}

/* Find a game's search button, as the one call to action */
.wn-go[b-bwimssrhvc] {
	margin-inline-end: auto;
	height: 2.75rem;
	padding-inline: 1.3rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wn-sky) 60%, white), var(--wn-sky));
	color: var(--wn-ink);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 4px 10px rgba(91, 166, 218, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}

	.wn-go:hover[b-bwimssrhvc],
	.wn-go:focus-visible[b-bwimssrhvc] {
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 6px 14px rgba(91, 166, 218, .55), inset 0 1px 0 rgba(255, 255, 255, .6);
	}

	.wn-go:active[b-bwimssrhvc] {
		transform: scale(.96);
	}

.wn-step[b-bwimssrhvc] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	height: 2.5rem;
	padding-inline: 1rem .55rem;
	border: 1.5px solid var(--wn-edge);
	border-radius: 999px;
	background: #fff;
	color: var(--wn-voice);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

	.wn-step:last-child:not(:has(svg))[b-bwimssrhvc] {
		padding-inline: 1rem;
	}

	.wn-step:hover[b-bwimssrhvc],
	.wn-step:focus-visible[b-bwimssrhvc] {
		background: #f7f7f7;
	}

	.wn-step:active[b-bwimssrhvc] {
		transform: scale(.94);
	}

	.wn-step svg[b-bwimssrhvc] {
		width: 1.35rem;
		height: 1.35rem;
		fill: currentColor;
		transform: scaleX(var(--dir, 1));
	}

.wn-back[b-bwimssrhvc] {
	width: 2.5rem;
	padding: 0;
}

.wn-go:focus-visible[b-bwimssrhvc],
.wn-step:focus-visible[b-bwimssrhvc],
.wn-x:focus-visible[b-bwimssrhvc] {
	outline: 3px solid var(--wn-voice);
	outline-offset: 2px;
}

/* =====================================================================
   The pictures
   ===================================================================== */

/* ---------- Open times: a room card's button opens three days of free slots, from 23 booking systems ---------- */

.wn-times[b-bwimssrhvc] {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.wn-mini[b-bwimssrhvc] {
	position: relative;
	flex: none;
	width: 4.6rem;
	height: 6.8rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	overflow: hidden;
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.wn-mini-photo[b-bwimssrhvc] {
	display: grid;
	place-items: center;
	height: 3.4rem;
	background: var(--wn-photo);
}

/* The metal name plate */
.wn-mini-plate[b-bwimssrhvc] {
	position: absolute;
	top: 3rem;
	inset-inline: .4rem;
	height: .75rem;
	border-radius: 4px;
	background: linear-gradient(180deg, #eceef1, #B9C0C9);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.wn-mini .wn-lines[b-bwimssrhvc] {
	padding: .75rem .45rem 0;
}

.wn-mini-btn[b-bwimssrhvc] {
	position: absolute;
	bottom: .35rem;
	inset-inline-end: .35rem;
	width: 1.5rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wn-voice);
	animation: wn-press-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) .75s both;
}

	.wn-mini-btn svg[b-bwimssrhvc] {
		width: .95rem;
		height: .95rem;
		fill: #fff;
	}

	/* the tap's ripple */
	.wn-mini-btn[b-bwimssrhvc]::after,
	.wn-search-go[b-bwimssrhvc]::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 2px solid var(--wn-voice);
		opacity: 0;
		animation: wn-ring-b-bwimssrhvc .7s ease-out .85s both;
	}

/* Grows out of the card's side */
.wn-cal[b-bwimssrhvc] {
	display: flex;
	gap: .3rem;
	padding: .5rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
	transform-origin: var(--start, right) center;
	animation: wn-grow-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) 1.05s both;
}

.wn-cal-day[b-bwimssrhvc] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	width: 3.15rem;
}

	.wn-cal-day b[b-bwimssrhvc] {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: .72rem;
		color: var(--wn-muted);
	}

.wn-chip[b-bwimssrhvc] {
	padding: .2rem .3rem;
	border-radius: 999px;
	background: var(--wn-chip);
	color: var(--wn-deep);
	font-family: 'Bungee', sans-serif;
	font-size: .62rem;
	line-height: 1.2;
	animation: wn-pop-b-bwimssrhvc .4s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(1.35s + var(--t) * .1s);
}

/* Stamped on last, like the card's take sticker: under the last day, which has room below its times */
.wn-stamp[b-bwimssrhvc] {
	position: absolute;
	bottom: -1.5rem;
	inset-inline-end: -.6rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: .2rem .5rem .25rem;
	border: 2px solid var(--wn-voice);
	border-radius: 8px;
	background: rgba(255, 255, 255, .92);
	color: var(--wn-voice);
	rotate: calc(var(--dir, 1) * 8deg);
	animation: wn-stamp-b-bwimssrhvc .55s cubic-bezier(.2, 1.4, .4, 1) 2.5s both;
}

	.wn-stamp b[b-bwimssrhvc] {
		font-family: 'Bungee', sans-serif;
		font-size: 1.15rem;
		line-height: 1;
	}

	.wn-stamp small[b-bwimssrhvc] {
		font-family: 'Fredoka', system-ui, sans-serif;
		font-weight: 600;
		font-size: .62rem;
		white-space: nowrap;
	}

/* ---------- Find a game: a day and hours, then the tickets ---------- */

.wn-find[b-bwimssrhvc] {
	width: 16rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
}

.wn-search[b-bwimssrhvc] {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .3rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
	animation: wn-pop-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

.wn-pill[b-bwimssrhvc] {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	height: 1.75rem;
	padding-inline: .5rem;
	border-radius: 999px;
	background: var(--wn-chip);
	color: var(--wn-deep);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: .78rem;
	white-space: nowrap;
	animation: wn-pop-b-bwimssrhvc .4s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(.25s + var(--i) * .25s);
}

	.wn-pill svg[b-bwimssrhvc] {
		width: .95rem;
		height: .95rem;
		fill: currentColor;
	}

	.wn-pill .wn-stroke[b-bwimssrhvc] {
		fill: none;
	}

.wn-search-go[b-bwimssrhvc] {
	position: relative;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wn-sky) 60%, white), var(--wn-sky));
	color: var(--wn-ink);
	animation: wn-press-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) .85s both;
}

	.wn-search-go svg[b-bwimssrhvc] {
		width: 1.1rem;
		height: 1.1rem;
	}

.wn-tickets[b-bwimssrhvc] {
	width: 100%;
	display: grid;
	gap: .4rem;
}

.wn-ticket[b-bwimssrhvc] {
	position: relative;
	display: flex;
	height: 1.75rem;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	animation: wn-slide-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(1.3s + var(--i) * .18s);
}

	.wn-ticket .wn-lines[b-bwimssrhvc] {
		flex: 1;
		align-content: center;
		padding-inline: .6rem;
	}

.wn-ticket-stub[b-bwimssrhvc] {
	position: relative;
	display: grid;
	place-items: center;
	padding-inline: .6rem;
	border-inline-start: 2px dashed var(--wn-edge);
	border-start-end-radius: 8px;
	border-end-end-radius: 8px;
	background: color-mix(in srgb, var(--wn-sky) 8%, white);
	color: var(--wn-deep);
	font-family: 'Bungee', sans-serif;
	font-size: .72rem;
}

	/* The perforation's notches */
	.wn-ticket-stub[b-bwimssrhvc]::before,
	.wn-ticket-stub[b-bwimssrhvc]::after {
		content: "";
		position: absolute;
		inset-inline-start: -.3rem;
		width: .5rem;
		height: .5rem;
		border-radius: 50%;
		background: var(--wn-tint);
	}

	.wn-ticket-stub[b-bwimssrhvc]::before {
		top: -.25rem;
	}

	.wn-ticket-stub[b-bwimssrhvc]::after {
		bottom: -.25rem;
	}

/* ---------- Find partners: a flyer pinned up; a tab is torn off and one more is in ---------- */

.wn-partners[b-bwimssrhvc] {
	width: 16rem;
	height: 10rem;
	display: grid;
	place-items: center;
}

.wn-flyer[b-bwimssrhvc] {
	position: relative;
	width: 8.4rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	padding: 1rem .7rem 0;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
	rotate: calc(var(--dir, 1) * -3deg);
	animation: wn-pin-up-b-bwimssrhvc .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* another call on the board, behind */
.wn-flyer-behind[b-bwimssrhvc] {
	position: absolute;
	width: 6.6rem;
	height: 7.6rem;
	padding: 0;
	background: #f7f7f7;
	translate: calc(var(--dir, 1) * 4.6rem) .4rem;
	rotate: calc(var(--dir, 1) * 8deg);
	animation-delay: .1s;
}

.wn-pin[b-bwimssrhvc] {
	position: absolute;
	top: -.35rem;
	left: 50%;
	width: .8rem;
	height: .8rem;
	margin-left: -.4rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #8dc4e8, var(--wn-voice) 70%);
	box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
}

.wn-flyer-head[b-bwimssrhvc] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	color: var(--wn-voice);
}

	.wn-flyer-head svg[b-bwimssrhvc] {
		width: 1.6rem;
		height: 1.6rem;
		fill: currentColor;
	}

/* The count rolls from 2 to 3 */
.wn-odo[b-bwimssrhvc] {
	height: 1.5rem;
	overflow: hidden;
	font-family: 'Bungee', sans-serif;
	font-size: 1.25rem;
	line-height: 1.5rem;
}

.wn-odo-roll[b-bwimssrhvc] {
	display: flex;
	flex-direction: column;
	animation: wn-odo-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) 2.1s both;
}

.wn-flyer .wn-lines[b-bwimssrhvc] {
	justify-items: center;
}

	.wn-flyer .wn-lines i[b-bwimssrhvc] {
		width: 100%;
	}

		.wn-flyer .wn-lines i:nth-child(2)[b-bwimssrhvc] {
			width: 80%;
		}

		.wn-flyer .wn-lines i:last-child[b-bwimssrhvc] {
			width: 55%;
		}

.wn-tabs[b-bwimssrhvc] {
	display: flex;
	height: 1.9rem;
	margin-inline: -.7rem;
	border-top: 2px dashed var(--wn-skeleton);
}

	.wn-tabs i[b-bwimssrhvc] {
		flex: 1;
		border-inline-start: 1.5px dashed var(--wn-skeleton);
		background: #fff;
	}

		.wn-tabs i:first-child[b-bwimssrhvc] {
			border-inline-start: 0;
		}

.wn-torn[b-bwimssrhvc] {
	transform-origin: top center;
	animation: wn-tear-b-bwimssrhvc 1.1s ease-in 1.2s both;
}

.wn-plus[b-bwimssrhvc] {
	position: absolute;
	top: 1.4rem;
	left: 50%;
	margin-left: 2.4rem;
	font-family: 'Bungee', sans-serif;
	font-size: 1.05rem;
	color: var(--wn-voice);
	animation: wn-float-b-bwimssrhvc 1.1s var(--wn-ease) 2.1s both;
}

/* ---------- Near me: a map with you on it, and the rows sorting nearest first ---------- */

.wn-near[b-bwimssrhvc] {
	display: flex;
	align-items: center;
	gap: .8rem;
}

.wn-map[b-bwimssrhvc] {
	position: relative;
	flex: none;
	width: 6.8rem;
	height: 6.8rem;
	overflow: hidden;
	border-radius: 16px;
	background: #eceef1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.wn-road[b-bwimssrhvc] {
	position: absolute;
	background: #fff;
}

.wn-road-a[b-bwimssrhvc] {
	inset-inline: -1rem;
	top: 56%;
	height: .65rem;
	rotate: -12deg;
}

.wn-road-b[b-bwimssrhvc] {
	inset-block: -1rem;
	left: 38%;
	width: .55rem;
	rotate: 9deg;
}

/* A room's pin, dropped onto the map */
.wn-drop[b-bwimssrhvc] {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: .95rem;
	height: .95rem;
	margin: -.95rem 0 0 -.475rem;
	border-radius: 50% 50% 50% 0;
	background: #153f5c;
	rotate: -45deg;
	animation: wn-drop-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(.35s + var(--i) * .12s);
}

/* You: the map's blue dot */
.wn-me[b-bwimssrhvc] {
	position: absolute;
	left: 47%;
	top: 64%;
	width: .95rem;
	height: .95rem;
	margin: -.475rem;
	border-radius: 50%;
	background: var(--wn-voice);
	border: 2px solid #fff;
	animation: wn-pop-b-bwimssrhvc .4s cubic-bezier(.34, 1.56, .64, 1) .2s both, wn-here-b-bwimssrhvc 1.6s ease-out .7s infinite;
}

.wn-sorted[b-bwimssrhvc] {
	width: 7.6rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .45rem;
}

/* The near-me sort, picked */
.wn-sort-pill[b-bwimssrhvc] {
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 1.6rem;
	border-radius: 999px;
	background: #fff;
	color: var(--wn-deep);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	animation: wn-pick-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) .9s both;
}

	.wn-sort-pill svg[b-bwimssrhvc] {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}

.wn-rows[b-bwimssrhvc] {
	position: relative;
	width: 100%;
	height: calc(3 * 1.85rem + 2 * .35rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

	.wn-rows li[b-bwimssrhvc] {
		position: absolute;
		inset-inline: 0;
		top: calc(var(--to) * 2.2rem);
		height: 1.85rem;
		display: flex;
		align-items: center;
		gap: .25rem;
		padding-inline: .5rem;
		border-radius: 8px;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
		animation: wn-sort-b-bwimssrhvc .6s cubic-bezier(.34, 1.56, .64, 1) 1.3s both;
	}

		.wn-rows li i[b-bwimssrhvc] {
			flex: 1;
			height: .35rem;
			margin-inline-end: .2rem;
			border-radius: 999px;
			background: var(--wn-skeleton);
		}

		.wn-rows li b[b-bwimssrhvc] {
			font-family: 'Bungee', sans-serif;
			font-size: .72rem;
			font-weight: 400;
			color: var(--wn-deep);
		}

		.wn-rows li small[b-bwimssrhvc] {
			font-size: .62rem;
			color: var(--wn-muted);
		}

/* ---------- Room cards: the card turns over to its back and its last votes ---------- */

.wn-turn[b-bwimssrhvc] {
	perspective: 700px;
}

.wn-card3d[b-bwimssrhvc] {
	position: relative;
	width: 7.8rem;
	height: 9.4rem;
	transform-style: preserve-3d;
	animation: wn-turn-b-bwimssrhvc 6.4s var(--wn-ease) .5s infinite both;
}

.wn-face[b-bwimssrhvc] {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.wn-face-back[b-bwimssrhvc] {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.3rem .65rem .65rem;
	transform: rotateY(180deg);
}

.wn-photo[b-bwimssrhvc] {
	position: relative;
	display: grid;
	place-items: center;
	height: 5rem;
	border-radius: 12px 12px 0 0;
	background: var(--wn-photo);
}

/* Tag domes on the photo's edge: a feature, minimum players, fear */
.wn-domes[b-bwimssrhvc] {
	position: absolute;
	bottom: 0;
	inset-inline-start: .4rem;
	display: flex;
	gap: .2rem;
}

	.wn-domes i[b-bwimssrhvc] {
		width: 1.3rem;
		height: .85rem;
		border-radius: 999px 999px 0 0;
		background: var(--wn-sky);
	}

		.wn-domes i:nth-child(2)[b-bwimssrhvc] {
			background: #1B5E20;
		}

		.wn-domes i:nth-child(3)[b-bwimssrhvc] {
			background: #D84315;
		}

/* The rating badge, straddling the top edge */
.wn-rate[b-bwimssrhvc] {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: 1.6rem;
	height: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: #f7f7f7;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
	translate: -50% -50%;
}

	.wn-rate i[b-bwimssrhvc] {
		width: .7rem;
		height: .7rem;
		border-radius: 50%;
		background: var(--wn-like);
	}

.wn-plate[b-bwimssrhvc] {
	position: absolute;
	top: 4.45rem;
	inset-inline: .55rem;
	height: .95rem;
	border-radius: 4px;
	background: linear-gradient(180deg, #eceef1, #B9C0C9);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.wn-face > .wn-lines[b-bwimssrhvc] {
	padding: .95rem .65rem 0;
}

.wn-votes[b-bwimssrhvc] {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: .3rem;
	margin-top: auto;
}

	.wn-votes i[b-bwimssrhvc] {
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--wn-like);
		animation: wn-vote-b-bwimssrhvc 6.4s cubic-bezier(.34, 1.56, .64, 1) infinite both;
		animation-delay: calc(.5s + var(--i) * 70ms);
	}

		.wn-votes i.no[b-bwimssrhvc] {
			background: var(--wn-dislike);
		}

/* ---------- English: the armadillo between its two flags, greeting both ways ---------- */

.wn-lang[b-bwimssrhvc] {
	width: 15rem;
	height: 10rem;
}

.wn-arm[b-bwimssrhvc] {
	position: absolute;
	left: 50%;
	bottom: -1.6rem;
	width: 10.5rem;
	translate: -50% 0;
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.wn-pole[b-bwimssrhvc] {
	position: absolute;
	bottom: 1.3rem;
	width: .22rem;
	height: 5.4rem;
	border-radius: 999px;
	background: #939ba6;
	transform-origin: bottom center;
	animation: wn-raise-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

.wn-pole-a[b-bwimssrhvc] {
	left: 3.1rem;
	rotate: -14deg;
	animation-delay: .45s;
}

.wn-pole-b[b-bwimssrhvc] {
	right: 3.1rem;
	rotate: 14deg;
	animation-delay: .6s;
}

/* Each flag flies outward from its pole */
.wn-flag[b-bwimssrhvc] {
	position: absolute;
	top: 0;
	animation: wn-wave-b-bwimssrhvc 1.8s ease-in-out infinite;
}

.wn-pole-a .wn-flag[b-bwimssrhvc] {
	right: .2rem;
	transform-origin: right center;
}

.wn-pole-b .wn-flag[b-bwimssrhvc] {
	left: .2rem;
	transform-origin: left center;
	animation-delay: -.9s;
}

	.wn-flag[b-bwimssrhvc]  svg {
		display: block;
		width: 2.6rem;
		height: 1.9rem;
		border-radius: 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	}

.wn-say[b-bwimssrhvc] {
	position: absolute;
	top: .9rem;
	left: calc(50% - 2rem);
	display: grid;
	padding: .3rem .8rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	color: var(--wn-voice);
	font-family: 'Fredoka', system-ui, sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	translate: -50% 0;
	animation: wn-pop-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) .9s both;
}

	/* the tail, toward the armadillo's head */
	.wn-say[b-bwimssrhvc]::after {
		content: "";
		position: absolute;
		bottom: -.4rem;
		left: 40%;
		border: .45rem solid transparent;
		border-top-color: #fff;
		border-bottom: 0;
	}

	.wn-say b[b-bwimssrhvc] {
		grid-area: 1 / 1;
		text-align: center;
		font-weight: inherit;
		animation: wn-say-a-b-bwimssrhvc 3.2s ease-in-out 1.4s infinite both;
	}

		.wn-say b + b[b-bwimssrhvc] {
			animation-name: wn-say-b-b-bwimssrhvc;
		}

/* ---------- Join the community: its three ways in, players' armadillos around them, all joined up ---------- */

.wn-community[b-bwimssrhvc] {
	z-index: 3; /* above the story's tap halves: its icons are links */
	width: 16rem;
	height: 10rem;
}

/* The joins: a viewBox of tenths of a rem from the middle, the size of the picture */
.wn-web[b-bwimssrhvc] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	animation: wn-fade-b-bwimssrhvc .6s ease .5s both;
}

.wn-ring[b-bwimssrhvc],
.wn-join[b-bwimssrhvc] {
	fill: none;
	stroke: var(--wn-sky);
	stroke-linecap: round;
	animation: wn-flow-b-bwimssrhvc .9s linear infinite;
}

.wn-ring[b-bwimssrhvc] {
	stroke-width: 1.2;
	stroke-dasharray: 2 4;
	opacity: .7;
	animation-duration: 2.4s;
}

.wn-join[b-bwimssrhvc] {
	stroke-width: 1.6;
	stroke-dasharray: 3 3;
}

/* Arrows running out from the icons to the players */
.wn-arrow[b-bwimssrhvc] {
	fill: none;
	stroke: var(--wn-voice);
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Sparks around the ring */
.wn-spark[b-bwimssrhvc] {
	fill: var(--wn-voice);
}

/* The ways in: the Facebook group, the site (share it), the podcast */
.wn-hub[b-bwimssrhvc] {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	width: 2.5rem;
	height: 2.5rem;
	margin: -1.25rem 0 0 -1.25rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--wn-sky), 0 3px 10px rgba(0, 0, 0, .18);
	color: var(--wn-voice);
	cursor: pointer;
	translate: var(--x) 0;
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
	animation-delay: calc(.1s + var(--h) * .12s);
	transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}

	.wn-hub:hover[b-bwimssrhvc],
	.wn-hub:focus-visible[b-bwimssrhvc] {
		scale: 1.12;
		box-shadow: 0 0 0 2px var(--wn-voice), 0 4px 14px rgba(0, 0, 0, .22);
	}

	.wn-hub:focus-visible[b-bwimssrhvc] {
		outline: 3px solid var(--wn-voice);
		outline-offset: 3px;
	}

	.wn-hub svg[b-bwimssrhvc] {
		width: 1.25rem;
		height: 1.25rem;
	}

/* The site in the middle, a size up */
.wn-hub-site[b-bwimssrhvc] {
	width: 3rem;
	height: 3rem;
	margin: -1.5rem 0 0 -1.5rem;
}

	.wn-hub-site img[b-bwimssrhvc] {
		width: 2.2rem;
		height: 2.2rem;
		object-fit: contain;
	}

/* Facebook's own blue on its mark */
.wn-fb[b-bwimssrhvc] {
	fill: #1877F2;
}

.wn-mic[b-bwimssrhvc] {
	stroke-width: 2;
}

/* Its place, --x and --y, comes from the component (CommunityPlaces) */
.wn-friend[b-bwimssrhvc] {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 2.6rem;
	height: 2.6rem;
	margin: -1.3rem;
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0, 0, 0, .2);
	translate: var(--x) var(--y);
	animation: wn-spread-b-bwimssrhvc .6s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(.6s + var(--a) * .2s);
}

	.wn-friend img[b-bwimssrhvc] {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 12%;
		animation: wn-bob-b-bwimssrhvc 2.2s ease-in-out infinite alternate;
		animation-delay: calc(var(--a) * -.37s);
	}

/* ---------- Phones: the pictures a size down to fit ---------- */

@media (max-width: 400px) {
	.wn[b-bwimssrhvc] {
		padding-inline: .9rem;
	}

	.wn-pic[b-bwimssrhvc] {
		scale: .88;
	}
}

/* ---------- Game center: a marquee sign over its four games ----------
   The resting state is the end of the story (the photo sharp with its tick, the mosaic whole, the letter in,
   every pin down), so with reduced motion the picture still says it. */

.wn-games[b-bwimssrhvc] {
	display: grid;
	justify-items: center;
	gap: .55rem;
}

/* The page's sign in small: the cabinet's dark ground, the controller in neon, chasing bulbs above and below */
.wn-sign[b-bwimssrhvc] {
	position: relative;
	display: grid;
	place-items: center;
	width: 10.5rem;
	height: 2.3rem;
	border-radius: 10px;
	background: radial-gradient(ellipse 80% 120% at 50% 0%, color-mix(in srgb, var(--wn-sky) 25%, #1a1a1a), #1a1a1a 70%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) both;
}

	.wn-sign[b-bwimssrhvc]::before {
		content: "";
		position: absolute;
		inset: .15rem .5rem;
		background:
			radial-gradient(circle, #fff 0 1.3px, transparent 2px) 0 0 / 10px 6px repeat-x,
			radial-gradient(circle, #fff 0 1.3px, transparent 2px) 0 100% / 10px 6px repeat-x;
		filter: drop-shadow(0 0 2px var(--wn-sky));
		animation: wn-chase-b-bwimssrhvc 1s steps(2) infinite;
	}

	.wn-sign svg[b-bwimssrhvc] {
		width: 1.6rem;
		height: 1.6rem;
		fill: var(--wn-sky);
		filter: drop-shadow(0 0 3px var(--wn-sky));
	}

/* The four games, two by two under the sign, popping in one after another */
.wn-tiles[b-bwimssrhvc] {
	display: grid;
	grid-template-columns: repeat(2, 4.8rem);
	gap: .4rem;
}

.wn-tile[b-bwimssrhvc] {
	position: relative;
	display: grid;
	place-items: center;
	height: 3.4rem;
	overflow: hidden;
	border-radius: 10px;
	background: #1a1a1a;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) calc(.15s + var(--g) * .12s) both;
}

/* Blurred room: the room's photo - a lamp, the keyhole, a floor line - coming into focus a step at a time, then
   the tick: found */
.wn-snap[b-bwimssrhvc] {
	position: absolute;
	inset: 0;
	background: var(--wn-photo);
	animation: wn-focus-b-bwimssrhvc 3s steps(6) .7s both;
}

	.wn-snap .wn-keyhole[b-bwimssrhvc] {
		position: absolute;
		bottom: .55rem;
		inset-inline-end: .7rem;
		width: 1.3rem;
		height: 1.3rem;
	}

.wn-lamp[b-bwimssrhvc] {
	position: absolute;
	top: .35rem;
	inset-inline-start: .7rem;
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	background: radial-gradient(circle, #fff, color-mix(in srgb, var(--wn-sky) 60%, white) 60%, transparent 70%);
}

.wn-floor[b-bwimssrhvc] {
	position: absolute;
	inset-inline: 0;
	bottom: .6rem;
	height: 2px;
	background: rgba(255, 255, 255, .45);
}

.wn-found[b-bwimssrhvc] {
	position: absolute;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	animation: wn-pop-b-bwimssrhvc .5s cubic-bezier(.34, 1.56, .64, 1) 3.8s both;
}

	.wn-found svg[b-bwimssrhvc] {
		width: 1rem;
		height: 1rem;
		fill: var(--wn-voice);
	}

/* Room mosaic: patches of two photos, scrambled, the hidden ones uncovering one by one */
.wn-mosaic[b-bwimssrhvc] {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 2px;
	padding: 2px;
	place-items: stretch;
}

	.wn-mosaic i[b-bwimssrhvc] {
		border-radius: 2px;
		background: var(--wn-photo);
		animation: wn-patch-b-bwimssrhvc .25s calc(.9s + var(--m) * .22s) backwards;
	}

		.wn-mosaic i.wn-other[b-bwimssrhvc] {
			background: linear-gradient(160deg, #8a4a22, #e3955a);
		}

/* Coded description: boxes over code letters; the one being guessed, in Sky Blue, gets its letter */
.wn-code[b-bwimssrhvc] {
	grid-auto-flow: column;
	gap: .2rem;
	font-family: 'Fredoka', system-ui, sans-serif;
}

	.wn-code > span[b-bwimssrhvc] {
		display: grid;
		justify-items: center;
		gap: .15rem;
	}

	.wn-code b[b-bwimssrhvc] {
		display: grid;
		place-items: center;
		width: 1rem;
		height: 1.2rem;
		border-bottom: 2px solid rgba(255, 255, 255, .4);
		border-radius: 4px 4px 0 0;
		color: var(--wn-ink);
		font-size: .75rem;
		font-weight: 600;
		line-height: 1;
	}

		.wn-code b.wn-guess[b-bwimssrhvc] {
			border-color: var(--wn-sky);
			background: var(--wn-sky);
			animation: wn-letter-b-bwimssrhvc .3s ease-out 3.3s backwards;
		}

	.wn-code small[b-bwimssrhvc] {
		color: color-mix(in srgb, #fff 52%, #1a1a1a);
		font-size: .75rem;
		line-height: 1;
	}

/* Where's the room?: a map - the sea down its west side - and the guesses' pins dropping on it, far to near: cold
   blue, amber, ember, then Forest on the room */
.wn-where[b-bwimssrhvc] {
	background: #eef3e6;
}

.wn-sea[b-bwimssrhvc] {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 34%;
	background: #a9d3f0;
	clip-path: polygon(0 0, 100% 0, 70% 45%, 55% 100%, 0 100%);
}

.wn-spot[b-bwimssrhvc] {
	position: absolute;
	width: .7rem;
	height: .7rem;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	background: var(--pin);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	rotate: -45deg;
	animation: wn-drop-b-bwimssrhvc .45s cubic-bezier(.34, 1.56, .64, 1) calc(1s + var(--p) * .8s) both;
}

	.wn-spot:nth-child(2)[b-bwimssrhvc] { --pin: #1976d2; left: 62%; top: 70%; }
	.wn-spot:nth-child(3)[b-bwimssrhvc] { --pin: #F9A825; left: 70%; top: 14%; }
	.wn-spot:nth-child(4)[b-bwimssrhvc] { --pin: #D84315; left: 46%; top: 40%; }
	.wn-spot:nth-child(5)[b-bwimssrhvc] { --pin: #1B5E20; left: 56%; top: 30%; width: .9rem; height: .9rem; }

/* ---------- Motion ---------- */

@keyframes wn-chase-b-bwimssrhvc {
	to {
		background-position: 10px 0, -10px 100%;
	}
}

@keyframes wn-focus-b-bwimssrhvc {
	from {
		filter: blur(9px);
	}
}

@keyframes wn-patch-b-bwimssrhvc {
	from {
		filter: brightness(.12);
	}
}

@keyframes wn-letter-b-bwimssrhvc {
	from {
		color: transparent;
	}
}

@keyframes wn-fade-b-bwimssrhvc {
	from {
		opacity: 0;
	}
}

@keyframes wn-pop-b-bwimssrhvc {
	from {
		opacity: 0;
		scale: .6;
	}
}

@keyframes wn-rise-b-bwimssrhvc {
	from {
		opacity: 0;
		translate: 0 .5rem;
	}
}

@keyframes wn-slide-b-bwimssrhvc {
	from {
		opacity: 0;
		translate: 0 .9rem;
	}
}

@keyframes wn-grow-b-bwimssrhvc {
	from {
		opacity: 0;
		scale: .3;
	}
}

@keyframes wn-run-b-bwimssrhvc {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

@keyframes wn-press-b-bwimssrhvc {
	40% {
		scale: .8;
	}
}

@keyframes wn-ring-b-bwimssrhvc {
	from {
		opacity: .9;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 2.3;
	}
}

@keyframes wn-stamp-b-bwimssrhvc {
	0% {
		opacity: 0;
		scale: 2.2;
	}

	60% {
		opacity: 1;
		scale: .92;
	}

	100% {
		opacity: 1;
		scale: 1;
	}
}

@keyframes wn-pin-up-b-bwimssrhvc {
	from {
		opacity: 0;
		scale: .7;
		translate: 0 -1rem;
	}
}

@keyframes wn-tear-b-bwimssrhvc {
	0% {
		transform: none;
	}

	20% {
		transform: rotate(-12deg);
	}

	35% {
		transform: rotate(-9deg) translateY(.1rem);
		opacity: 1;
	}

	100% {
		transform: translate(-1.4rem, 5rem) rotate(-60deg);
		opacity: 0;
	}
}

@keyframes wn-odo-b-bwimssrhvc {
	to {
		translate: 0 -1.5rem;
	}
}

@keyframes wn-float-b-bwimssrhvc {
	0% {
		opacity: 0;
		translate: 0 .5rem;
		scale: .6;
	}

	30% {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}

	100% {
		opacity: 0;
		translate: 0 -1.5rem;
	}
}

@keyframes wn-drop-b-bwimssrhvc {
	from {
		opacity: 0;
		translate: 0 -1.2rem;
	}
}

@keyframes wn-here-b-bwimssrhvc {
	from {
		box-shadow: 0 0 0 0 rgba(25, 118, 210, .45);
	}

	to {
		box-shadow: 0 0 0 1.1rem rgba(25, 118, 210, 0);
	}
}

@keyframes wn-pick-b-bwimssrhvc {
	40% {
		scale: .85;
	}

	100% {
		background: var(--wn-voice);
		color: #fff;
	}
}

@keyframes wn-sort-b-bwimssrhvc {
	from {
		translate: 0 calc((var(--from) - var(--to)) * 2.2rem);
	}
}

@keyframes wn-turn-b-bwimssrhvc {
	0%, 16% {
		transform: rotateY(0);
	}

	26%, 70% {
		transform: rotateY(180deg);
	}

	80%, 100% {
		transform: rotateY(360deg);
	}
}

@keyframes wn-vote-b-bwimssrhvc {
	0%, 24% {
		scale: 0;
	}

	30%, 68% {
		scale: 1;
	}

	74%, 100% {
		scale: 0;
	}
}

@keyframes wn-raise-b-bwimssrhvc {
	from {
		scale: 1 0;
	}
}

@keyframes wn-wave-b-bwimssrhvc {
	0%, 100% {
		transform: skewY(0) scaleX(1);
	}

	50% {
		transform: skewY(5deg) scaleX(.92);
	}
}

@keyframes wn-spread-b-bwimssrhvc {
	from {
		opacity: 0;
		scale: .3;
		translate: 0 0;
	}
}

@keyframes wn-bob-b-bwimssrhvc {
	to {
		translate: 0 .18rem;
	}
}

@keyframes wn-flow-b-bwimssrhvc {
	to {
		stroke-dashoffset: -6;
	}
}

@keyframes wn-say-a-b-bwimssrhvc {
	0%, 42% {
		opacity: 1;
		translate: 0 0;
	}

	50%, 92% {
		opacity: 0;
		translate: 0 -.4rem;
	}

	100% {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes wn-say-b-b-bwimssrhvc {
	0%, 42% {
		opacity: 0;
		translate: 0 .4rem;
	}

	50%, 92% {
		opacity: 1;
		translate: 0 0;
	}

	100% {
		opacity: 0;
		translate: 0 .4rem;
	}
}

/* Reduced motion: every picture at rest, in its end state; the story waits for the buttons. */
@media (prefers-reduced-motion: reduce) {
	.wn-scrim[b-bwimssrhvc],
	.wn[b-bwimssrhvc],
	.wn-body[b-bwimssrhvc],
	.wn-run[b-bwimssrhvc],
	.wn-stage *[b-bwimssrhvc],
	.wn-stage *[b-bwimssrhvc]::before,
	.wn-stage *[b-bwimssrhvc]::after {
		animation: none !important;
	}

	.wn-bar.now i[b-bwimssrhvc] {
		width: 100%;
	}

	.wn-odo-roll[b-bwimssrhvc] {
		translate: 0 -1.5rem;
	}

	.wn-torn[b-bwimssrhvc],
	.wn-plus[b-bwimssrhvc] {
		visibility: hidden;
	}

	.wn-sort-pill[b-bwimssrhvc] {
		background: var(--wn-voice);
		color: #fff;
	}

	.wn-say[b-bwimssrhvc] {
		display: flex;
		gap: .5rem;
	}

		.wn-say b[b-bwimssrhvc] {
			grid-area: auto;
		}

	.wn-arrow[b-bwimssrhvc],
	.wn-spark[b-bwimssrhvc] {
		display: none;
	}

	.wn-x[b-bwimssrhvc],
	.wn-go[b-bwimssrhvc],
	.wn-step[b-bwimssrhvc],
	.wn-hub[b-bwimssrhvc] {
		transition: none;
	}
}