/* /Components/Layout/ArmadilloNavbar.razor.rz.scp.css */
/* "The Armadillo Arcade" marquee - alternative top bar. See ArmadilloNavbar.razor for the parts.
   Tokens follow DESIGN.md: Sky Blue chrome, Vivid Blue for the mascot's voice, Fredoka for nav
   text, Bungee for the scoreboard digits, soft ambient shadows, springy overshoot easing. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.ark-menu[b-0vysx08lmj],
	.ark-player[b-0vysx08lmj],
	.ark-login[b-0vysx08lmj],
	.ark-token[b-0vysx08lmj],
	.ark-token-lines i[b-0vysx08lmj],
	.ark-arm-avatar[b-0vysx08lmj],
	.ark-portrait[b-0vysx08lmj],
	.ark-glyph[b-0vysx08lmj],
	.ark-status-img[b-0vysx08lmj] {
		animation: none;
		transition: none;
	}
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The top bar itself lives in ArmadilloNavbar.razor(.css); this file keeps only the page frame,
   footer icon sizing, the navigation loading cover and the Blazor error strip. */

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

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

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

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

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

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

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

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

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

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


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


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

}


@media (orientation: portrait) {

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



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

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


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

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

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

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

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

/* Validation styles align with Bootstrap */
.validation-message[b-4uqtfeiecs],
.validation-message > *[b-4uqtfeiecs] {
    color: #dc3545 !important;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.hero[b-x176q9eve7] {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #1a1a1a; /* shows briefly before the video paints */
    font-family: 'Playpen Sans Hebrew', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

    to {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.save-changes[b-7jzwaabowk] {
	position: fixed;
	top: 5rem;
	left: 50%;
	transform: translateX(-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: translateX(-50%) translateY(0);
		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) {
	.hero[b-7jzwaabowk] {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1rem;
		margin-top: 1rem;
	}

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

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

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

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

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

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

	.save-changes[b-7jzwaabowk] {
		top: auto;
		bottom: 1.25rem;
		transform: translateX(-50%) translateY(40px);
	}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


body[b-9dp2gr0h53] {
}




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

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

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

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

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

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

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

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

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

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

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

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



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

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


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

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

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

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



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

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

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

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

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

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

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

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



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

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

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

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

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


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

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


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


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

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

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

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


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

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

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

	40% {
		transform: scale(1.14);
	}

	60% {
		transform: scale(1.06);
	}

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


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

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

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

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

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

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

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


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

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






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

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

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

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

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

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

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



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



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

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










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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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


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

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


@media (max-width: 767px) {

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


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

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

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

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


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


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



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

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

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

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

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

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

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

		/* Kept to one line so the row's height holds - the labels would wrap to two on a phone and
		   spill over the tab strip. Tighter padding lets it fit a 360px screen. */
		.list-sort-toggle[b-9dp2gr0h53]  .rz-button {
			white-space: nowrap;
			padding-inline: .4rem;
		}
}
/* /Components/Shared/ImportPlayedDialog.razor.rz.scp.css */
/* Played-rooms CSV import dialog. The dialog itself is sized by the caller (DialogOptions); this
   shell fills it: steps on top, a scrolling body, and a footer that always shows what will happen. */
.import-shell[b-k7adhwjupb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 1rem;
    font-family: 'Lunasima', system-ui, sans-serif;
    color: #1f1f1f;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.help-footer[b-tio155vi7j] {
    display: flex;
    justify-content: flex-end;
    padding-top: .75rem;
    border-top: 1px solid #eee;
}