:root {
	--bg: #0f1417;
	--panel: #171d21;
	--panel-2: #20282d;
	--line: #344149;
	--text: #edf3f1;
	--muted: #9badaa;
	--accent: #43b69d;
	--accent-strong: #68d5bc;
	--danger: #dc7777;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: "Segoe UI", Arial, sans-serif;
}

button,
input {
	font: inherit;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 28px;
	border-bottom: 1px solid var(--line);
	background: #12181b;
}

.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.brand-mark {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
}

h1,
h2,
h3,
p {
	margin: 0;
	letter-spacing: 0;
}

h1 {
	font-size: 24px;
	font-weight: 650;
}

h2 {
	font-size: 21px;
	font-weight: 650;
}

.brand p,
.session-heading p {
	margin-top: 4px;
	color: var(--muted);
}

.icon-button {
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--panel);
	color: var(--text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.icon-button:hover,
.icon-button:focus-visible {
	border-color: var(--accent);
}

.icon-button:disabled {
	opacity: 0.45;
	cursor: default;
}

main {
	width: min(1540px, 100%);
	margin: 0 auto;
	padding: 22px 28px 40px;
}

.status-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--line);
}

.status-strip > div {
	padding: 15px 18px;
	background: var(--panel);
}

.label {
	display: block;
	margin-bottom: 6px;
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
}

.status-strip strong {
	font-size: 22px;
	font-weight: 650;
}

.steam-launch-panel {
	display: grid;
	grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
	gap: 28px;
	margin-top: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
}

.steam-launch-copy {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 9px;
}

.section-kicker {
	color: var(--accent-strong);
	font-size: 12px;
	font-weight: 650;
	text-transform: uppercase;
}

.steam-launch-copy p {
	max-width: 560px;
	color: var(--muted);
	line-height: 1.5;
}

.steam-host-form {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) 120px minmax(150px, auto);
	gap: 12px;
	align-items: end;
}

.steam-host-form label {
	display: grid;
	gap: 6px;
	color: var(--muted);
	font-size: 13px;
}

.steam-host-form input,
.steam-host-form select {
	width: 100%;
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: 6px;
	outline: none;
	background: #11171a;
	color: var(--text);
}

.steam-host-map-field {
	grid-column: 1 / 3;
}

.steam-host-map-preview {
	display: grid;
	grid-column: 3;
	grid-row: 2 / span 2;
	align-self: stretch;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #11171a;
}

.steam-host-map-preview img {
	display: block;
	width: 100%;
	height: 92px;
	object-fit: cover;
}

.steam-host-map-preview figcaption {
	padding: 6px 9px;
	color: var(--muted);
	font-size: 12px;
}

.steam-host-form input:focus {
	border-color: var(--accent);
}

.launch-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #182126;
	color: var(--text);
	font-weight: 650;
	text-decoration: none;
	cursor: pointer;
}

.launch-button.primary {
	border-color: var(--accent);
	background: #17483f;
}

.launch-button:hover,
.launch-button:focus-visible {
	border-color: var(--accent-strong);
}

.steam-launch-copy .launch-button {
	margin-top: 5px;
}

.steam-launch-status {
	grid-column: 1 / -1;
	min-height: 18px;
	color: #bfe8de;
	font-size: 13px;
}

.public-events-panel {
	margin-top: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
}

.public-events-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 18px;
}

.public-events-heading h2 {
	margin-top: 5px;
}

.public-events-heading p {
	margin-top: 6px;
	color: var(--muted);
	line-height: 1.45;
}

.public-event-count {
	flex: 0 0 auto;
	padding: 6px 9px;
	border: 1px solid #357c6d;
	border-radius: 4px;
	color: #9ad9ca;
	font-size: 12px;
	font-weight: 650;
	text-transform: uppercase;
}

.public-event-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 12px;
}

.public-event-card {
	display: flex;
	min-width: 0;
	min-height: 190px;
	flex-direction: column;
	justify-content: space-between;
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--panel-2);
	overflow: hidden;
}

.public-event-media {
	position: relative;
	width: calc(100% + 36px);
	aspect-ratio: 16 / 9;
	margin: -18px -18px 0;
	overflow: hidden;
	border-bottom: 1px solid #285164;
	background:
		radial-gradient(circle at 20% 20%, rgba(44, 193, 224, 0.26), transparent 42%),
		linear-gradient(135deg, #071c2c, #12354a 58%, #09212e);
}

.public-event-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.public-event-media-placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background:
		linear-gradient(120deg, transparent 45%, rgba(78, 204, 230, 0.14) 46%, transparent 47%),
		repeating-linear-gradient(90deg, transparent 0 48px, rgba(111, 198, 220, 0.04) 49px 50px);
	color: rgba(159, 226, 240, 0.72);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.32em;
}

.public-event-copy h3 {
	font-size: 19px;
	font-weight: 650;
	overflow-wrap: anywhere;
}

.public-event-copy time {
	display: block;
	margin-top: 7px;
	color: var(--accent-strong);
	font-size: 13px;
	line-height: 1.45;
}

.public-event-copy p {
	margin-top: 13px;
	color: #c3cfcc;
	line-height: 1.5;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.public-event-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.public-event-join,
.public-event-space,
.public-event-unavailable {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 7px 11px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 13px;
}

.public-event-join {
	border-color: #357c6d;
	background: #17483f;
	color: var(--text);
	font-weight: 650;
	text-decoration: none;
}

.public-event-join:hover,
.public-event-join:focus-visible {
	border-color: var(--accent-strong);
}

.public-event-space {
	color: #b8cee0;
}

.public-event-unavailable {
	color: var(--muted);
}

.public-events-state {
	grid-column: 1 / -1;
	padding: 34px 18px;
	border-block: 1px solid var(--line);
	color: var(--muted);
	text-align: center;
}

.public-events-state.error {
	color: var(--danger);
}

.browser-toolbar {
	display: flex;
	align-items: end;
	flex-wrap: wrap;
	gap: 22px;
	margin: 18px 0;
	padding: 14px 16px;
	border-block: 1px solid var(--line);
}

.search-field {
	display: grid;
	gap: 6px;
	width: min(440px, 100%);
	color: var(--muted);
	font-size: 13px;
}

.search-field input {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	outline: none;
	background: #11171a;
	color: var(--text);
}

.search-field input:focus {
	border-color: var(--accent);
}

.persistent-space-filter {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	padding: 8px 11px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #11171a;
	color: var(--text);
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.persistent-space-filter input {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--accent);
}

.persistent-space-filter input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.toolbar-status {
	margin-left: auto;
	color: var(--muted);
	font-size: 13px;
	text-align: right;
}

.invite-status {
	align-self: center;
	padding: 7px 10px;
	border-left: 3px solid var(--accent);
	background: #132225;
	color: #bfe8de;
	font-size: 13px;
}

.invite-status.error {
	border-left-color: #bc655f;
	background: #261719;
	color: #efaaa5;
}

.session-list {
	display: grid;
	gap: 12px;
}

.session-row {
	display: grid;
	grid-template-columns: minmax(260px, 36%) minmax(340px, 1fr) 160px;
	gap: 18px;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
}

.preview-shell {
	position: relative;
	min-height: 196px;
	overflow: hidden;
	background: #090c0e;
}

.level-preview-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.preview-status {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(5, 8, 10, 0.28);
	color: #d2ddda;
	text-align: center;
	text-shadow: 0 1px 3px #000;
	pointer-events: none;
}

.session-preview {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 196px;
	border: 0;
	background: #090c0e;
}

.session-preview[hidden] {
	display: none;
}

.preview-unavailable {
	position: relative;
	z-index: 2;
	display: grid;
	width: 100%;
	height: 100%;
	min-height: 196px;
	place-items: center;
	padding: 20px;
	background: rgba(5, 8, 10, 0.38);
	color: #d2ddda;
	text-align: center;
	text-shadow: 0 1px 3px #000;
}

.muted-badge {
	position: absolute;
	right: 9px;
	bottom: 9px;
	z-index: 3;
	padding: 4px 7px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 4px;
	background: rgba(7, 10, 12, 0.82);
	color: #dbe4e1;
	font-size: 12px;
	pointer-events: none;
}

.session-summary {
	padding: 18px 0;
	min-width: 0;
}

.session-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.room-title-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
}

.room-access,
.space-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 8px;
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 650;
	text-transform: uppercase;
}

.space-badge {
	border-color: #2d7e8d;
	background: rgba(37, 133, 150, 0.12);
	color: #9cdeea;
}

.room-access.locked {
	border-color: #a98a4d;
	color: #e5c986;
}

.room-access.public {
	border-color: #357c6d;
	color: #9ad9ca;
}

.room-access.unlisted {
	border-color: #668099;
	color: #b8cee0;
}

.room-space-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 8px;
	color: var(--text);
	font-size: 14px;
}

.room-space-meta span {
	display: grid;
	gap: 2px;
	min-width: 120px;
}

.room-space-meta strong {
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.space-presence-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #bdeadd;
	font-size: 13px;
	white-space: nowrap;
}

.space-presence-status i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}

.space-presence-status.private {
	color: #e5c986;
}

.space-presence-status.private i {
	background: #c99f4d;
}

.space-presence-status.offline {
	color: var(--muted);
}

.space-presence-status.offline i {
	background: #65747a;
}

.session-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 22px;
	margin: 24px 0 0;
}

.session-facts div {
	min-width: 0;
}

.session-facts dt {
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
}

.session-facts dd {
	margin: 5px 0 0;
	overflow: hidden;
	color: var(--text);
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.session-actions {
	display: grid;
	align-content: center;
	gap: 9px;
	padding: 18px 18px 18px 0;
}

.session-unavailable {
	padding: 9px 10px;
	border: 1px solid var(--line);
	border-radius: 5px;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}

.action-button,
.details-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #182126;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.action-button.primary,
.dialog-actions .primary {
	border-color: var(--accent);
	background: #17483f;
}

.action-button:hover,
.details-button:hover,
.action-button:focus-visible,
.details-button:focus-visible {
	border-color: var(--accent-strong);
}

.action-button:disabled {
	opacity: 0.42;
	cursor: default;
}

.action-button:disabled:hover {
	border-color: var(--line);
}

.session-details {
	grid-column: 1 / -1;
	padding: 0 18px 18px;
	border-top: 1px solid var(--line);
}

.detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding: 14px 0;
	color: var(--muted);
	font-size: 13px;
}

.player-table-shell {
	overflow-x: auto;
}

table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

th,
td {
	padding: 11px 12px;
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

th {
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.identity-cell {
	max-width: 340px;
	overflow-wrap: anywhere;
	color: var(--muted);
}

.empty-cell {
	color: var(--muted);
	text-align: center;
}

.empty-state {
	padding: 70px 20px;
	border-block: 1px solid var(--line);
	color: var(--muted);
	text-align: center;
}

.empty-state.error {
	color: var(--danger);
}

.access-dialog {
	width: min(440px, calc(100% - 32px));
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	color: var(--text);
}

.access-dialog::backdrop {
	background: rgba(5, 8, 10, 0.74);
}

.access-dialog form {
	display: grid;
	gap: 18px;
	padding: 24px;
}

.access-room-name {
	color: var(--muted);
}

.access-dialog label {
	display: grid;
	gap: 7px;
	color: var(--muted);
	font-size: 13px;
}

.access-dialog input {
	min-height: 42px;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: 6px;
	outline: none;
	background: #11171a;
	color: var(--text);
}

.access-dialog input:focus {
	border-color: var(--accent);
}

.access-error {
	min-height: 20px;
	color: var(--danger);
	font-size: 13px;
}

.dialog-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.dialog-actions button {
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: #182126;
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 980px) {
	.steam-launch-panel {
		grid-template-columns: 1fr;
	}

	.session-row {
		grid-template-columns: minmax(230px, 40%) 1fr;
	}

	.session-actions {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 0 18px 18px;
	}
}

@media (max-width: 720px) {
	.topbar {
		padding: 16px 18px;
	}

	main {
		padding: 16px 18px 30px;
	}

	.status-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.browser-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.toolbar-status {
		margin-left: 0;
		text-align: left;
	}

	.invite-status {
		align-self: stretch;
	}

	.steam-host-form {
		grid-template-columns: 1fr;
	}

	.steam-launch-status {
		grid-column: auto;
	}

	.public-events-panel {
		padding: 18px 16px;
	}

	.public-events-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.session-row {
		grid-template-columns: 1fr;
	}

	.preview-shell {
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.session-preview,
	.preview-unavailable {
		min-height: 0;
	}

	.session-summary {
		padding: 0 16px;
	}

	.session-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.session-actions {
		grid-column: auto;
		grid-template-columns: 1fr;
		padding: 0 16px 16px;
	}

	.session-details {
		grid-column: auto;
		padding: 0 16px 16px;
	}
}
/* Avatar details share the existing accessible room-dialog surface. */
.avatar-button {
	border: 1px solid #567795;
	border-radius: 6px;
	padding: 6px 10px;
	background: #18344e;
	color: #f4f8ff;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.avatar-button:hover, .avatar-button:focus-visible { background: #285577; }
.avatar-dialog { max-height: 90vh; overflow-y: auto; }
.avatar-dialog button:disabled { opacity: 0.5; cursor: default; }
.avatar-details { overflow-wrap: anywhere; }
.avatar-sender-note { color: #b4c8d8; font-size: 0.85rem; }
.avatar-dialog textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	border: 1px solid #567795;
	border-radius: 6px;
	background: #102638;
	color: #f4f8ff;
	font: inherit;
	resize: vertical;
}