* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ===== SCROLLBARS ===== */

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #2a2a3a;
	border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
	background: #3a3a52;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

* {
	scrollbar-width: thin;
	scrollbar-color: #2a2a3a transparent;
}

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: #0a0a0f;
	color: #e0e0e0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 2rem 1rem;
}

#app {
	width: 100%;
	max-width: 600px;
}

/* Screens */
.screen {
	display: none;
	text-align: center;
}

.screen.active {
	display: block;
}

/* ===== LOBBY SCREEN — full viewport ===== */

:root {
	--lobby-chat-width: 280px;
}

#lobby {
	position: fixed;
	inset: 0;
	display: none;
	flex-direction: column;
	background: #0a0a0f;
	z-index: 10;
	overflow: hidden;
	text-align: left;
}

#lobby.active {
	display: flex;
}

/* Top bar */
.lobby-top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1.25rem;
	height: 52px;
	background: #0d0d16;
	border-bottom: 1px solid #1a1a28;
	flex-shrink: 0;
}

.lobby-top-left {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	justify-self: start;
}

.lobby-top-center {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.lobby-nav-btn {
	padding: 0.3rem 0.9rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: #666;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		color 0.15s,
		border-color 0.15s;
}

.lobby-nav-btn:hover {
	color: #aaa;
}

.lobby-nav-btn.active {
	color: #e0e0e0;
	border-color: #2a2a3a;
	background: #1a1a28;
}

.lobby-top-right {
	display: flex;
	justify-self: end;
	align-items: center;
	gap: 0.5rem;
}

.lobby-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: #2196f3;
	letter-spacing: -0.5px;
}

.lobby-version-top {
	display: none;
	font-size: 0.65rem;
	color: #363646;
	font-family: monospace;
}

.player-name-wrapper {
	position: relative;
}

.player-name-display {
	padding: 0.4rem 0.9rem;
	background: #1e1e2a;
	border-radius: 8px;
	color: #e0e0e0;
	font-size: 0.9rem;
	border: 1px solid #2a2a3a;
	user-select: none;
}

.player-name-display.is-account {
	cursor: pointer;
	padding-right: 1.6rem;
	position: relative;
}

.player-name-display.is-account::after {
	content: "▾";
	position: absolute;
	right: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.7rem;
	color: #555;
	pointer-events: none;
}

.player-name-display.is-account:hover {
	background: #252535;
	border-color: #3a3a5a;
}

.player-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 130px;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	overflow: hidden;
	z-index: 500;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.player-dropdown.hidden {
	display: none;
}

.player-dropdown-item {
	display: block;
	width: 100%;
	padding: 0.55rem 0.9rem;
	background: transparent;
	border: none;
	color: #ccc;
	font-size: 0.88rem;
	text-align: left;
	cursor: pointer;
	transition:
		background 0.12s,
		color 0.12s;
}

.player-dropdown-item:hover {
	background: #252535;
	color: #e0e0e0;
}

.player-dropdown-logout {
	color: #ef5350;
}

.player-dropdown-logout:hover {
	background: #2a1a1a;
	color: #ef5350;
}

.player-dropdown-divider {
	height: 1px;
	background: #2a2a3a;
	margin: 0;
}

/* Body: left + right panels */
.lobby-body {
	display: flex;
	flex: 1;
	overflow: hidden;
	gap: 0;
}

/* Left panel */
.lobby-left-disclaimer {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.65rem;
	color: #ccc;
	text-align: center;
	line-height: 1.4;
	flex-shrink: 0;
}

.lobby-left {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem;
	overflow: hidden;
	border-right: 1px solid #1a1a28;
}

/* Always-visible leaderboard columns */
.lobby-leaderboards {
	display: flex;
	gap: 0.5rem;
	flex-shrink: 0;
	min-height: 0;
}

.lobby-lb-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	overflow: hidden;
	min-height: 0;
}

.lobby-lb-col-title {
	font-size: 0.68rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	text-align: center;
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid #1a1a28;
	flex-shrink: 0;
}

.lobby-lb-list {
	overflow-y: auto;
	max-height: 18rem;
	padding: 0.3rem;
}

.lb-status-msg {
	color: #555;
	font-size: 0.78rem;
	padding: 0.5rem;
	text-align: center;
}

.lb-status-err {
	color: #ef5350;
}

/* Play mode toggle */
.lobby-play-mode-selector {
	display: flex;
	gap: 0.4rem;
	flex-shrink: 0;
	max-width: 100%;
	transition: width 0.3s ease;
}

.lobby-play-mode-btn {
	flex: 1;
	padding: 0.55rem;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	background: transparent;
	color: #666;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.lobby-play-mode-btn:hover {
	border-color: #444;
	color: #ccc;
}

.lobby-play-mode-btn.active {
	border-color: #2196f3;
	color: #2196f3;
	background: #0a1a2a;
}

#play-mode-ranked.active {
	border-color: #ffa726;
	color: #ffa726;
	background: #1a1408;
}

#play-mode-hangar.active {
	border-color: #9c27b0;
	color: #9c27b0;
	background: #1a0a2a;
}

/* Ranked placeholder */
.ranked-placeholder {
	border: 1px dashed #2a2a3a;
	border-radius: 10px;
	padding: 1.5rem 1rem;
	text-align: center;
	color: #3a3a4a;
	font-size: 0.82rem;
	font-style: italic;
}

/* Quick play row: games panel + leaderboard panel side by side */
.lobby-quickplay-row {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
}

.lobby-quickplay-row #play-quick-section {
	flex: 1;
	min-width: 0;
}

/* Quick play panel */
#play-quick-section {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: #0d0d16;
	border: 1px solid #1a1a28;
	border-radius: 10px;
	padding: 0.9rem;
}

#play-ranked-section {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Games section */
.lobby-games-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lobby-games-section h2 {
	font-size: 1rem;
	color: #2196f3;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.games-list {
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-height: 8rem;
	max-height: 20rem;
	overflow-y: auto;
}

/* Lobby default action buttons */
.lobby-default-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-shrink: 0;
}

.create-page-btn {
	flex: 1;
	padding: 0.75rem;
	border: none;
	border-radius: 8px;
	background: #2196f3;
	color: #fff;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.15s;
}

.create-page-btn:hover {
	background: #1976d2;
}

.ranked-btn {
	flex: 1;
	padding: 0.75rem;
	border: 2px solid #2a2a3a;
	border-radius: 8px;
	background: transparent;
	color: #e0e0e0;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.15s;
}

.ranked-btn:hover:not(:disabled) {
	border-color: #ffa726;
	color: #ffa726;
}

.empty-state {
	display: none;
	padding: 2rem 1rem;
	color: #555;
	font-size: 0.95rem;
	text-align: center;
}

/* Game entry in lobby list */
.game-entry {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.7rem 0.9rem;
	background: #1e1e2a;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
	border: 1px solid transparent;
	gap: 0.5rem;
}

.game-entry:hover {
	background: #252535;
	border-color: #2196f3;
}

.game-entry.game-entry-full-spectatable:hover {
	border-color: #ffa726;
}

.game-entry.game-entry-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.game-entry.cooldown-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.game-name {
	font-size: 0.95rem;
	font-weight: 500;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.game-players {
	font-size: 0.85rem;
	color: #888;
	white-space: nowrap;
	flex-shrink: 0;
}

.game-players.game-players-full {
	color: #ef5350;
	font-weight: 600;
}

/* Toast notification */
.toast {
	position: fixed;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: #1e1e2a;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 0.82rem;
	color: #ccc;
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition:
		opacity 0.18s,
		transform 0.18s;
}

.toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Tooltip */
.game-tooltip {
	position: fixed;
	display: none;
	background: #1e1e2a;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	padding: 5px 11px;
	font-size: 0.82rem;
	color: #ccc;
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.game-tooltip.visible {
	display: block;
}

/* Right panel: Lobby chat */
.lobby-chat-panel {
	width: var(--lobby-chat-width, 280px);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: #0d0d16;
	overflow: hidden;
	transition: width 0.25s ease;
}

.lobby-chat-panel.chat-collapsed {
	width: 0;
}

.lobby-panel-tabs {
	display: flex;
	border-bottom: 1px solid #1a1a28;
	flex-shrink: 0;
}

.lobby-panel-tab {
	flex: 1;
	padding: 0.6rem 0.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #666;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	position: relative;
}

.lobby-panel-tab.has-badge::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ef5350;
}

.lobby-panel-tab:hover {
	color: #aaa;
}

.lobby-panel-tab.active {
	color: #2196f3;
	border-bottom-color: #2196f3;
}

.lobby-tab-pane {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.lobby-online-count {
	display: contents;
} /* kept for JS compat — real styles on .chat-section-toggle */

.chat-section-toggle {
	padding: 0.4rem 0.75rem;
	font-size: 0.78rem;
	color: #555;
	border-bottom: 1px solid #1a1a28;
	border-top: none;
	border-left: none;
	border-right: none;
	flex-shrink: 0;
	background: transparent;
	text-align: left;
	width: 100%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition:
		color 0.15s,
		background 0.15s;
	font-weight: 400;
	letter-spacing: 0;
}
.chat-section-toggle:hover {
	color: #888;
	background: #111118;
}

.chat-section-chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
	color: #3a3a4a;
}
.chat-section-toggle-open .chat-section-chevron {
	transform: rotate(180deg);
}

.chat-section-body {
	border-bottom: 1px solid #1a1a28;
}
.chat-section-body.hidden {
	display: none;
}

.chat-section-list {
	max-height: 120px;
	overflow-y: auto;
}

/* Global lobby chat messages */
.lobby-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 0.4rem 0.5rem;
}

.lobby-chat-entry {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0.15rem 0.4rem;
	word-break: break-word;
}

.lobby-chat-entry.own-message {
	align-items: flex-end;
}

.chat-msg-row {
	display: flex;
	align-items: flex-end;
	gap: 0.35rem;
	max-width: 100%;
}

.own-message .chat-msg-row {
	flex-direction: row-reverse;
}

.lobby-chat-text {
	background: #1e1e2a;
	border-radius: 12px 12px 12px 4px;
	padding: 0.35rem 0.65rem;
	color: #e0e0e0;
	font-size: 0.82rem;
	line-height: 1.4;
	min-width: 0;
	max-width: calc(90%);
}

.own-message .lobby-chat-text {
	background: #1a2640;
	border-radius: 12px 12px 4px 12px;
}

.lobby-chat-text .chat-sender-name {
	display: block;
	color: #2196f3;
	font-weight: 600;
	font-size: 0.78rem;
	margin-bottom: 0.1rem;
	cursor: default;
}

.own-message .lobby-chat-text .chat-sender-name {
	text-align: right;
}

.lobby-player-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lobby-player-box.player-name-self {
	color: #2196f3;
	background: transparent;
	border-color: transparent;
}

.lobby-player-box.player-name-friend {
	color: #6abf69;
	background: transparent;
	border-color: transparent;
}

.player-blocked-tag {
	font-size: 0.65rem;
	color: #c0504a;
	opacity: 0.75;
	margin-left: auto;
	padding-left: 0.5rem;
	flex-shrink: 0;
}

.chat-msg-row > .chat-timestamp {
	color: #555;
	font-size: 0.68rem;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
	padding-bottom: 0.25rem;
}

.lobby-chat-system {
	font-style: italic;
	color: #4a4a5a;
	font-size: 0.78rem;
	padding: 0.2rem 0.4rem;
	line-height: 1.4;
}

.lobby-chat-input-row {
	display: flex;
	gap: 0.35rem;
	padding: 0.5rem;
	border-top: 1px solid #1a1a28;
	flex-shrink: 0;
	justify-content: center;
}

.lobby-chat-input-row input {
	flex: 1;
	padding: 0.4rem 0.6rem;
	border: 1px solid #1e1e2a;
	border-radius: 6px;
	background: #141420;
	color: #e0e0e0;
	font-size: 0.82rem;
}

.lobby-chat-input-row input:focus {
	outline: none;
	border-color: #2196f3;
}

/* Players Connected tab */
.lobby-players-list {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lobby-player-box {
	padding: 0.4rem 0.7rem;
	font-size: 0.85rem;
	color: #ccc;
}

/* ===== LEFT PANEL SUB-STATES ===== */

.lobby-left-default,
.lobby-left-create,
.lobby-left-room {
	display: flex;
	flex-direction: column;
}

#play-hangar-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 0.85rem;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.lobby-left-default {
	width: 50%;
	max-width: 100%;
	margin: 0 auto;
	gap: 0.85rem;
	transition: width 0.3s ease;
	flex: 1;
	min-height: 0;
}

#play-shop-section {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.lobby-left-heading {
	font-size: 1rem;
	color: #2196f3;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.lobby-room-header {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 0.75rem;
}

.lobby-room-header .back-btn {
	margin-bottom: 0;
	flex-shrink: 0;
}

.lobby-room-header #lobby-room-name {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	pointer-events: none;
	margin: 0;
}

.lobby-left-room .lobby-slots {
	width: 20rem;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.lobby-left-subheading {
	font-size: 0.8rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-bottom: 0.5rem;
	margin-top: 0.25rem;
}

/* ===== ROOM ISLAND PANEL ===== */

.room-island-panel {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 0.65rem 0.75rem;
	margin: 0.5rem auto;
	width: 20rem;
	max-width: 100%;
}

.room-island-label {
	font-size: 0.72rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.room-island-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.room-island-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.4rem 0.65rem;
	background: #141420;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
	font-size: 0.83rem;
}

.room-island-card:hover {
	border-color: #2a2a3a;
	background: #1a1a28;
}

.room-island-card.disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.room-island-card.selected {
	border-color: #2196f3;
	background: #0d1a2a;
}

.room-island-card-name {
	color: #e0e0e0;
	font-weight: 500;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.room-island-card-type {
	font-size: 0.72rem;
	color: #555;
	margin-left: 0.5rem;
	flex-shrink: 0;
}

.room-island-card.selected .room-island-card-type {
	color: #2196f3;
}

.room-island-empty {
	font-size: 0.8rem;
	color: #444;
	font-style: italic;
	text-align: center;
	padding: 0.5rem 0;
}

/* ===== HANGAR ===== */

.hangar-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding: 0 0.25rem;
	flex-shrink: 0;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.hangar-island-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.5rem;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
	width: 108px;
	text-align: center;
}

.hangar-island-card:hover {
	border-color: #2a2a3a;
	background: #141420;
}

.hangar-island-card.active {
	border-color: #9c27b0;
	background: #1a0a2a;
}

.hangar-island-card-name {
	font-size: 0.72rem;
	color: #ccc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.hangar-new-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px dashed #2a2a3a;
	border-radius: 10px;
	cursor: pointer;
	color: #444;
	font-size: 1.3rem;
	min-width: 44px;
	transition:
		border-color 0.15s,
		color 0.15s;
}

.hangar-new-card:hover {
	border-color: #9c27b0;
	color: #9c27b0;
}

.hangar-editor {
	flex: 1;
	min-height: 0;
}

.hangar-editor-empty {
	color: #444;
	font-style: italic;
	font-size: 0.85rem;
	text-align: center;
	padding: 2rem 1rem;
}

.hangar-editor-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.hangar-editor-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.hangar-name-input {
	width: 100%;
	max-width: 220px;
	padding: 0.5rem 0.75rem;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 8px;
	color: #e0e0e0;
	font-size: 0.9rem;
	text-align: center;
}

.hangar-name-input:focus {
	outline: none;
	border-color: #9c27b0;
}

.hangar-type-selector {
	display: flex;
	gap: 0.35rem;
	width: 100%;
}

.hangar-type-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.5rem 0.35rem;
	border: 1px solid #1e1e2a;
	border-radius: 8px;
	background: transparent;
	color: #666;
	cursor: pointer;
	transition: all 0.15s;
}

.hangar-type-btn:hover {
	border-color: #2a2a3a;
	color: #aaa;
}

.hangar-type-btn.active {
	border-color: #9c27b0;
	color: #9c27b0;
	background: #1a0a2a;
}

.hangar-type-btn-title {
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
}

.hangar-type-btn-stat {
	font-size: 0.67rem;
	font-weight: 400;
	opacity: 0.7;
	line-height: 1.2;
}

.hangar-island-stats {
	display: flex;
	gap: 0.5rem;
}

.hangar-stat-card {
	flex: 1;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 8px;
	padding: 0.35rem 0.5rem;
	text-align: center;
}

.hangar-stat-label {
	font-size: 0.65rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hangar-stat-value {
	font-size: 0.9rem;
	font-weight: 700;
	color: #e0e0e0;
}

.hangar-preview-canvas {
	display: block;
	width: 160px;
	height: 104px;
	margin: 0 auto;
	background: #0d0d16;
}

.hangar-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.hangar-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	width: 80px;
}

.hangar-slot-label {
	font-size: 0.65rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hangar-slot-box {
	width: 80px;
	height: 72px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px dashed #2a2a3a;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
	position: relative;
}

.hangar-slot-box:hover {
	border-color: #9c27b0;
	background: rgba(156, 39, 176, 0.06);
}

.hangar-slot-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.hangar-slot-name {
	font-size: 0.68rem;
	color: #aaa;
	text-align: center;
	padding: 0 0.2rem;
}

.hangar-tower-picker {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	overflow: hidden;
	z-index: 100;
	min-width: 140px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.hangar-tower-picker-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.45rem 0.75rem;
	background: transparent;
	border: none;
	color: #ccc;
	font-size: 0.82rem;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s;
}

.hangar-tower-picker-item:hover {
	background: #141420;
}

.hangar-tower-picker-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.hangar-editor-actions {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.25rem;
}

.hangar-delete-btn {
	padding: 0.6rem 1.25rem;
	border: none;
	border-radius: 8px;
	background: #c62828;
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.15s;
}

.hangar-delete-btn:hover {
	background: #b71c1c;
}

.hangar-editor-actions .create-btn {
	padding: 0.6rem 2rem;
	background: #9c27b0;
}

.hangar-editor-actions .create-btn:hover {
	background: #7b1fa2;
}

#island-create-confirm,
#hangar-unsaved-save {
	background: #9c27b0;
}

#island-create-confirm:hover,
#hangar-unsaved-save:hover {
	background: #7b1fa2;
}

/* ===== BOTTOM BAR ===== */

.lobby-bottom-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 34px;
	flex-shrink: 0;
	background: #0d0d16;
	border-top: 1px solid #1a1a28;
}

.lobby-bottom-version {
	padding-left: 1.25rem;
	font-size: 0.72rem;
	color: #363646;
	font-family: monospace;
	white-space: nowrap;
}

.lobby-bottom-credit {
	font-size: 0.72rem;
	color: #363646;
	white-space: nowrap;
}

.lobby-bottom-right {
	display: flex;
	align-items: center;
}

.lobby-chat-toggle {
	height: 34px;
	width: 34px;
	background: transparent;
	border: none;
	border-left: 1px solid #1a1a28;
	color: #444;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		color 0.15s,
		background 0.15s;
	flex-shrink: 0;
}

.lobby-chat-toggle:hover {
	color: #888;
	background: #111118;
}

/* ===== CREATE FORM ===== */

.create-form {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 280px;
	max-width: 360px;
	margin-right: auto;
	margin-left: auto;
}

.create-form-title {
	text-align: center;
	margin-bottom: 0;
}

.create-form-actions {
	display: flex;
	gap: 0.5rem;
}

.create-form-actions .create-btn {
	flex: 1;
}

.form-row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.form-row input {
	flex: 1;
	min-width: 0;
	max-width: 14rem;
	padding: 0.6rem 1rem;
	border: 2px solid #1e1e2a;
	border-radius: 8px;
	background: #0d0d15;
	color: #e0e0e0;
	font-size: 1rem;
	text-align: center;
}

.form-row input:focus {
	outline: none;
	border-color: #2196f3;
}

.privacy-btn,
.spectator-btn {
	width: 44px;
	height: 44px;
	border: 2px solid #1e1e2a;
	border-radius: 8px;
	background: #0d0d15;
	font-size: 1.2rem;
	cursor: pointer;
	transition: all 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.privacy-btn:hover,
.spectator-btn:hover {
	border-color: #2196f3;
}

.privacy-btn.private {
	border-color: #2196f3;
	background: #1a2a40;
}

.spectator-btn.no-spectators {
	border-color: #555;
	background: #1a1a1a;
}

/* Player count selector */
.player-count-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.player-count-label {
	font-size: 0.95rem;
	color: #888;
}

.player-count-buttons {
	display: flex;
	gap: 0.5rem;
}

.count-btn {
	width: 48px;
	height: 44px;
	border: 2px solid #1e1e2a;
	border-radius: 8px;
	background: #0d0d15;
	color: #e0e0e0;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.15s;
}

.count-btn:hover {
	border-color: #2196f3;
}

.count-btn.active {
	border-color: #2196f3;
	background: #2196f3;
	color: #fff;
}

.count-btn:disabled {
	cursor: not-allowed;
	border-color: #111118;
	background: #0a0a0f;
	color: #333;
}

.count-btn:disabled:hover {
	border-color: #111118;
}

.power-cap-slider-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
}

#power-cap-slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	border-radius: 3px;
	background: #1e1e2a;
	outline: none;
	cursor: pointer;
}

#power-cap-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2196f3;
	cursor: pointer;
	border: 2px solid #1565c0;
}

#power-cap-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2196f3;
	cursor: pointer;
	border: 2px solid #1565c0;
}

.power-cap-display {
	min-width: 62px;
	text-align: right;
	font-size: 0.95rem;
	font-weight: bold;
	color: #e0e0e0;
}

.create-btn {
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 8px;
	background: #2196f3;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.15s;
}

.create-btn:hover {
	background: #1976d2;
}

.cancel-page-btn {
	max-width: 36%;
	padding: 0.6rem 2rem;
	border: none;
	border-radius: 8px;
	background: #c62828;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.cancel-page-btn:hover {
	background: #b71c1c;
}

/* Error message */
.error {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.7rem 1.5rem;
	background: #1a0a0a;
	border: 1px solid #ef5350;
	border-radius: 8px;
	color: #ef5350;
	font-size: 0.9rem;
	font-family: monospace;
	z-index: 9999;
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100vw - 3rem);
	white-space: normal;
	text-align: center;
}

/* ===== GAME MENU ===== */

#game-menu h2 {
	font-size: 1.5rem;
	color: #2196f3;
	margin-bottom: 1.5rem;
}

.player-list-section {
	margin-bottom: 1.5rem;
}

.player-list-section h3 {
	font-size: 1.1rem;
	color: #888;
	margin-bottom: 0.75rem;
}

.game-players-list {
	background: #141420;
	border-radius: 12px;
	padding: 0.5rem;
}

.game-player-entry {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1rem;
	margin: 0.25rem 0;
	background: #1e1e2a;
	border-radius: 8px;
	font-size: 0.95rem;
	justify-content: flex-start;
}

.game-player-entry .self-name {
	color: #2196f3;
	font-weight: bold;
}

.self-tag {
	font-size: 0.75rem;
	color: #666;
	background: #0d0d15;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
}

.color-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.color-dot.red {
	background: #ef5350;
}
.color-dot.blue {
	background: #2196f3;
}
.color-dot.yellow {
	background: #fdd835;
}
.color-dot.green {
	background: #4caf50;
}

.ready-status {
	font-size: 0.8rem;
	margin-left: auto;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
}

.ready-status.ready {
	color: #4caf50;
	background: #1a2e1a;
}

.ready-status.not-ready {
	color: #666;
	background: #0d0d15;
}

/* Game menu controls */
.game-menu-controls {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
}

.ready-btn {
	padding: 0.6rem 2rem;
	border: 2px solid #2196f3;
	border-radius: 8px;
	background: transparent;
	color: #e0e0e0;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.15s;
}

.ready-btn:hover {
	background: #2196f3;
}

.ready-btn.ready-active {
	background: #2196f3;
	color: #fff;
}

/* ===== GAME LOBBY ===== */

#game-lobby h2 {
	font-size: 1.5rem;
	color: #2196f3;
	margin-bottom: 1.5rem;
}

.game-lobby-layout {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.game-lobby-slots {
	flex: 1;
	min-width: 0;
}

.game-lobby-slots h3 {
	font-size: 1.1rem;
	color: #888;
	margin-bottom: 0.75rem;
	text-align: left;
}

.lobby-slots {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 0.5rem;
	min-height: 200px;
}

.lobby-slots-title {
	font-size: 0.75rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	padding: 0.3rem 0.75rem 0.5rem;
}

.lobby-slot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	margin: 0.25rem 0;
	background: #1e1e2a;
	border-radius: 8px;
	font-size: 0.95rem;
}

.slot-number {
	color: #888;
	font-weight: 500;
	min-width: 1.5rem;
}

.slot-name-group {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}

.slot-name {
	color: #e0e0e0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.slot-name.self-name {
	color: #2196f3;
	font-weight: bold;
}

.slot-ready-tick {
	color: #66bb6a;
	font-size: 1rem;
	font-weight: 700;
	flex-shrink: 0;
}

.slot-empty {
	color: #555;
	font-style: italic;
	flex: 1;
}

.slot-name.bot-name {
	color: #9c27b0;
}

.bot-add-btn {
	background: none;
	border: 1px solid #4a4a5a;
	color: #9c27b0;
	border-radius: 5px;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: bold;
	cursor: pointer;
	letter-spacing: 0.05em;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.bot-add-btn:hover {
	background: rgba(156, 39, 176, 0.15);
	border-color: #9c27b0;
}

.bot-remove-btn {
	color: #ef5350;
	border-color: rgba(239, 83, 80, 0.4);
}
.bot-remove-btn:hover {
	background: rgba(239, 83, 80, 0.12);
	border-color: #ef5350;
}

.bot-game-warning {
	margin-top: 0.6rem;
	padding: 0.45rem 0.7rem;
	border-radius: 6px;
	font-family: monospace;
	font-size: 0.72rem;
	line-height: 1.5;
	text-align: center;
	border: 1px solid rgba(150, 150, 150, 0.3);
	background: rgba(96, 96, 96, 0.12);
	color: #999;
}
.bot-game-warning.hidden {
	display: none;
}

.game-lobby-chat {
	flex: 1.5;
	min-width: 0;
}

.game-lobby-chat h3 {
	font-size: 1.1rem;
	color: #888;
	margin-bottom: 0.75rem;
	text-align: left;
}

/* Room chat (game-lobby screen) */
.lobby-chat-messages-room {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 0.5rem;
	height: 300px;
	overflow-y: auto;
	margin-bottom: 0.5rem;
}

.chat-message {
	display: flex;
	gap: 0.4rem;
	padding: 0.35rem 0.5rem;
	border-radius: 4px;
	font-size: 0.9rem;
	word-break: break-word;
}

.chat-message:hover {
	background: #1e1e2a;
}

.chat-sender {
	color: #2196f3;
	font-weight: 500;
	white-space: nowrap;
}

.chat-text {
	color: #e0e0e0;
}

.chat-timestamp {
	color: #555;
	font-size: 0.75rem;
	margin-left: auto;
	flex-shrink: 0;
	align-self: center;
}

.system-message {
	text-align: center;
	font-style: italic;
	color: #8d8d8d;
	padding: 0.35rem 0.5rem;
	font-size: 0.9rem;
}

.chat-empty {
	color: #555;
	font-style: italic;
	padding: 1rem;
	text-align: center;
}

.lobby-chat-input {
	display: flex;
	gap: 0.5rem;
}

.lobby-chat-input input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 2px solid #1e1e2a;
	border-radius: 8px;
	background: #0d0d15;
	color: #e0e0e0;
	font-size: 0.9rem;
}

.lobby-chat-input input:focus {
	outline: none;
	border-color: #2196f3;
}

.chat-send-btn {
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 8px;
	background: #2196f3;
	color: #fff;
	font-size: 0.9rem;
	font-weight: bold;
	cursor: pointer;
	transition: background 0.15s;
	white-space: nowrap;
}

.chat-send-btn:hover {
	background: #1976d2;
}

/* ===== JOIN STATUS INDICATORS ===== */

.join-status {
	padding: 0.25rem 0.5rem;
	font-size: 0.85rem;
}

.join-status-pending {
	color: #ef5350;
	font-style: italic;
}

.join-status-approved {
	color: #4caf50;
	font-style: italic;
	cursor: pointer;
}

.join-status-approved:hover {
	text-decoration: underline;
}

.join-status-rejected {
	color: #ef5350;
	font-style: italic;
}

/* ===== JOIN REQUEST PANEL ===== */

.join-request-panel {
	margin-top: 1rem;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 0.75rem;
}

.join-request-panel h3 {
	font-size: 1rem;
	color: #888;
	margin-bottom: 0.5rem;
	text-align: left;
}

.join-request-list {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.join-request-entry {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.6rem;
	background: #1e1e2a;
	border-radius: 6px;
	font-size: 0.9rem;
	justify-content: space-between;
}

.join-request-name {
	color: #e0e0e0;
	font-weight: 500;
}

.join-request-actions {
	display: flex;
	gap: 0.35rem;
}

.join-request-approve {
	padding: 0.2rem 0.5rem;
	border: none;
	border-radius: 4px;
	background: #1a2e1a;
	color: #4caf50;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s;
}

.join-request-approve:hover {
	background: #2e4a2e;
}

.join-request-reject {
	padding: 0.2rem 0.5rem;
	border: none;
	border-radius: 4px;
	background: #2e1a1a;
	color: #ef5350;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s;
}

.join-request-reject:hover {
	background: #4a2e2e;
}

/* ===== BACK BUTTON ===== */

.back-btn {
	padding: 0.45rem 1.25rem;
	border: 1px solid #5a2020;
	border-radius: 8px;
	background: #2a1215;
	color: #ef9a9a;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s;
	align-self: flex-start;
	margin-bottom: 0.75rem;
}

.back-btn:hover {
	background: #3d1a1f;
	border-color: #ef5350;
	color: #ffcdd2;
}

/* ===== UTILITY ===== */

.hidden {
	display: none !important;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 600px) {
	:root {
		--lobby-chat-width: 200px;
	}

	.game-menu-controls {
		gap: 0.5rem;
	}
}

/* ===== GAME SCREEN ===== */

.game-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
	cursor: default;
}

#game {
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 100;
}

/* HUD overlay */
.game-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.game-overlay > * {
	pointer-events: auto;
}

.game-top-bar {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 6px 18px;
	font-family: monospace;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	pointer-events: none;
}

.game-top-bar > * {
	pointer-events: auto;
}

.game-timer {
	color: #ffeb3b;
	min-width: 3ch;
}

.game-timer.timer-urgent {
	color: #ef5350;
	animation: pulse 0.6s infinite alternate;
}

@keyframes pulse {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.4;
	}
}

.game-ready-btn {
	font-family: monospace;
	font-size: 13px;
	font-weight: bold;
	padding: 4px 14px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: #ccc;
	cursor: pointer;
	transition:
		background 0.2s,
		color 0.2s,
		border-color 0.2s;
}

.game-ready-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.game-ready-btn.submitted {
	background: #2196f3;
	border-color: #2196f3;
	color: #fff;
	cursor: default;
}

.game-ready-btn.all-ready {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

/* ===== SURRENDER BUTTON ===== */

.surrender-btn {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 38px;
	height: 38px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	transition:
		border-color 0.15s,
		background 0.15s;
}

.surrender-btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: var(--hold-pct, 0%);
	height: 100%;
	background: rgba(239, 154, 154, 0.35);
	pointer-events: none;
}

.surrender-btn span {
	position: relative;
	z-index: 1;
	font-size: 17px;
	line-height: 1;
	pointer-events: none;
	filter: brightness(0) invert(1);
}

.spectator-btn span {
	pointer-events: none;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.spectator-btn.no-spectators span {
	opacity: 0.4;
}

.surrender-btn:hover:not(.hidden) {
	background: rgba(0, 0, 0, 0.7);
	border-color: rgba(255, 255, 255, 0.3);
}

.surrender-btn.holding {
	border-color: rgba(239, 154, 154, 0.7);
	background: rgba(0, 0, 0, 0.65);
}

/* ===== GAME LOG PANEL (combat log + chat) ===== */

.game-log-panel {
	position: absolute;
	bottom: 14px;
	left: 14px;
	width: 300px;
	max-height: 220px;
	display: flex;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.game-log-tabs {
	display: flex;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.game-log-tab {
	flex: 1;
	padding: 4px 8px;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: rgba(255, 255, 255, 0.4);
	font-family: monospace;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: all 0.15s;
}

.game-log-tab:hover {
	color: rgba(255, 255, 255, 0.7);
}

.game-log-tab.active {
	color: #2196f3;
	border-bottom-color: #2196f3;
}

.game-log-pane {
	flex: 1;
	overflow-y: auto;
	padding: 6px 8px;
	min-height: 0;
}

.log-entry {
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: monospace;
	font-size: 11px;
}

.game-chat-line {
	font-family: monospace;
	font-size: 11px;
	color: #bbb;
	line-height: 1.55;
	word-break: break-word;
}

.game-chat-line-name {
	font-weight: 700;
	color: #bbb;
}
.game-chat-line-name.gcl-own {
	color: #2196f3;
}
.game-chat-line-name.gcl-friend {
	color: #66bb6a;
}

.game-chat-system {
	font-family: monospace;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
	font-style: italic;
	line-height: 1.5;
}

/* Chat input row in game */
.game-chat-input-row {
	display: flex;
	gap: 4px;
	padding: 4px 6px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.game-chat-input-row input {
	flex: 1;
	padding: 3px 7px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	color: #e0e0e0;
	font-family: monospace;
	font-size: 11px;
}

.game-chat-input-row input:focus {
	outline: none;
	border-color: rgba(33, 150, 243, 0.6);
}

.game-chat-send-btn {
	padding: 3px 8px;
	border: none;
	border-radius: 4px;
	background: rgba(33, 150, 243, 0.5);
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s;
	flex-shrink: 0;
}

.game-chat-send-btn:hover {
	background: rgba(33, 150, 243, 0.8);
}

@media (max-width: 600px) {
	.game-ready-btn {
		font-size: 15px;
		padding: 6px 16px;
	}
}

.game-btn {
	font-family: monospace;
	font-size: 13px;
	padding: 8px 18px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	transition:
		opacity 0.15s,
		transform 0.1s;
}

.game-btn:active {
	transform: scale(0.97);
}
.game-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.game-btn.primary {
	background: #2196f3;
	color: #fff;
}
.game-btn.secondary {
	background: #555;
	color: #ddd;
}
.game-btn.danger {
	background: #b71c1c;
	color: #fff;
}

.game-btn.submitted {
	background: #2e7d32;
}

/* Victory / Defeat / Spectator screen */
.game-result-screen {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.game-result-card {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	width: 420px;
	max-width: calc(100vw - 2rem);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: monospace;
}

.game-result-header {
	padding: 1.5rem 1.75rem 1rem;
	text-align: center;
	flex-shrink: 0;
}

.game-result-header p {
	color: #888;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
}

.game-result-body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.game-result-footer {
	padding: 1rem 1.75rem 1.25rem;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
}

.result-victory {
	color: #ffeb3b;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.result-defeat {
	color: #ef5350;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
}
.result-spectator {
	color: #90caf9;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.game-result-sc {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffd54f;
}
.game-result-sc.hidden {
	display: none;
}
.result-sc-note {
	font-size: 0.75rem;
	font-weight: 400;
	color: #aaa;
}

.result-log {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #1e1e2a;
	border-radius: 6px;
	padding: 0.6rem 0.75rem;
	font-size: 11px;
	text-align: left;
	max-height: 140px;
	overflow-y: auto;
}

/* ===== MOBILE INFO BAR ===== */

.mobile-info-bar {
	display: none;
}

/* ===== MOBILE TAB BAR (hidden, state-tracking only) ===== */

.mobile-tab-bar {
	display: none !important;
}

/* ===== MOBILE CHAT ARROW ===== */

.mobile-chat-arrow {
	display: none;
}

/* ===== MEDIUM SCREENS (tablet / narrow desktop) ===== */

@media (max-width: 1000px) {
	.lobby-left-default,
	.lobby-play-mode-selector {
		width: 100%;
	}
}

/* ===== MOBILE LAYOUT ===== */

@media (max-width: 675px) {
	/* Use dynamic viewport height so the chat panel shrinks when the virtual keyboard appears */
	#lobby {
		height: 100dvh;
		bottom: auto;
	}

	.game-log-panel {
		bottom: auto;
		top: 85px;
		left: 50%;
		transform: translateX(-50%);
		max-height: 135px;
		width: min(300px, calc(100vw - 24px));
	}

	.lobby-bottom-bar {
		display: none;
	}

	.lobby-version-top {
		display: none;
	}

	.mobile-info-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 22px;
		padding: 0 0.75rem;
		background: #0d0d16;
		border-top: 1px solid #1a1a28;
		flex-shrink: 0;
		font-size: 0.6rem;
		color: #2a2a3a;
		font-family: monospace;
	}

	.mobile-chat-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 26px;
		height: 52px;
		background: #141420;
		border: 1px solid #1e1e2a;
		border-right: none;
		border-radius: 8px 0 0 8px;
		color: #555;
		font-size: 1rem;
		cursor: pointer;
		z-index: 20;
		transition:
			color 0.15s,
			background 0.15s;
	}

	.mobile-chat-arrow:hover {
		color: #aaa;
		background: #1a1a28;
	}

	.mobile-chat-arrow.has-badge::after {
		content: "";
		position: absolute;
		top: 10px;
		right: 6px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #ef5350;
	}

	/* Slide panels side by side */
	.lobby-body {
		position: relative;
		overflow: hidden;
	}

	.lobby-left {
		position: absolute;
		inset: 0;
		width: 100%;
		border-right: none;
		padding: 0.75rem;
		overflow-y: auto;
		transform: translateX(0);
		transition: transform 0.28s ease;
	}

	.lobby-chat-panel {
		position: absolute;
		inset: 0;
		display: flex !important;
		width: 100% !important;
		transform: translateX(100%);
		transition: transform 0.28s ease;
	}

	.lobby-chat-panel.chat-collapsed {
		width: 100% !important;
		transform: translateX(100%);
	}

	#lobby.mobile-show-chat .lobby-left {
		transform: translateX(-100%);
	}

	#lobby.mobile-show-chat .lobby-chat-panel {
		transform: translateX(0);
	}

	/* Relax width constraints for narrow screens */
	.lobby-left-default {
		width: 100%;
	}

	/* Slots fit the screen */
	.lobby-left-room .lobby-slots {
		width: 100%;
	}
}

/* ===== AUTH BUTTON ===== */

.auth-btn {
	padding: 0.35rem 0.85rem;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	background: #1e1e2a;
	color: #aaa;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
	flex-shrink: 0;
}

.auth-btn:hover {
	background: #252535;
	color: #e0e0e0;
	border-color: #3a3a5a;
}

.auth-btn.logged-in {
	color: #ef5350;
	border-color: #3a1a1a;
}

.auth-btn.logged-in:hover {
	background: #2a1a1a;
	border-color: #ef5350;
}

/* ===== AUTH MODAL ===== */

.auth-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.auth-modal-overlay.hidden {
	display: none;
}

.auth-modal-box {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 1.5rem;
	width: 320px;
	max-width: calc(100vw - 2rem);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.auth-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: transparent;
	border: none;
	color: #555;
	font-size: 1rem;
	cursor: pointer;
	line-height: 1;
	padding: 0.25rem;
	transition: color 0.15s;
}

.auth-modal-close:hover {
	color: #e0e0e0;
}

.auth-modal-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid #1e1e2a;
}

.auth-modal-tab {
	flex: 1;
	padding: 0.5rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #666;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	margin-bottom: -1px;
}

.auth-modal-tab:hover {
	color: #aaa;
}

.auth-modal-tab.active {
	color: #2196f3;
	border-bottom-color: #2196f3;
}

.auth-pane {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.auth-pane.hidden {
	display: none;
}

.auth-input {
	width: 100%;
	padding: 0.6rem 0.9rem;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	background: #0d0d15;
	color: #e0e0e0;
	font-size: 0.95rem;
}

.auth-input:focus {
	outline: none;
	border-color: #2196f3;
}

.auth-hint {
	color: #555;
	font-size: 0.78rem;
	line-height: 1.4;
	margin-top: -0.2rem;
}

.auth-error {
	color: #ef5350;
	font-size: 0.82rem;
	line-height: 1.4;
}

.auth-error.hidden {
	display: none;
}

.auth-submit-btn {
	width: 100%;
	padding: 0.65rem;
	border: none;
	border-radius: 8px;
	background: #2196f3;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.auth-submit-btn:hover {
	background: #1976d2;
}

.auth-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ===== SETTINGS MODAL ===== */

.settings-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.settings-modal-overlay.hidden {
	display: none;
}

.settings-modal-box {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	width: 420px;
	max-width: calc(100vw - 2rem);
	max-height: 40vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.settings-modal-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.1rem 1.25rem 0.9rem;
	flex-shrink: 0;
}

.settings-modal-title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #888;
}

.settings-modal-body {
	overflow-y: auto;
	flex: 1;
	padding: 0.25rem 0;
}

.settings-section {
	padding: 0.9rem 1.25rem;
}

.settings-section:not(:last-child)::after {
	content: "";
	display: block;
	height: 1px;
	background: #1a1a26;
	margin-top: 0.9rem;
}

.settings-modal-footer {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	padding: 0.75rem 1.25rem 1rem;
}

.settings-close-btn {
	padding: 0.55rem 2.5rem;
	background: #2196f3;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	letter-spacing: 0.03em;
}

.settings-close-btn:hover {
	background: #1976d2;
}

.settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 36px;
	padding: 0.55rem 0;
}

.settings-row-info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	min-width: 0;
}

.settings-row-label {
	font-size: 0.9rem;
	color: #ccc;
}

.settings-row-desc {
	font-size: 0.76rem;
	color: #555;
	line-height: 1.3;
}

/* Toggle switch */
.settings-toggle-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.settings-toggle-side {
	font-size: 0.78rem;
	color: #666;
}

.settings-toggle {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}

.settings-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}

.settings-toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: #2a2a3a;
	border-radius: 22px;
	transition: background 0.2s;
}

.settings-toggle-slider::before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	left: 3px;
	top: 3px;
	background: #555;
	border-radius: 50%;
	transition:
		transform 0.2s,
		background 0.2s;
}

.settings-toggle input:checked + .settings-toggle-slider {
	background: #2196f3;
}

.settings-toggle input:checked + .settings-toggle-slider::before {
	transform: translateX(18px);
	background: #fff;
}

/* Language select */
.settings-select {
	padding: 0.4rem 0.7rem;
	background: #141420;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	color: #e0e0e0;
	font-size: 0.88rem;
	cursor: pointer;
	flex-shrink: 0;
}

.settings-select:focus {
	outline: none;
	border-color: #2196f3;
}

/* Settings form (change password, delete) */
.settings-form {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.settings-msg {
	font-size: 0.82rem;
	line-height: 1.4;
	padding: 0.1rem 0;
}

.settings-msg.hidden {
	display: none;
}

.settings-msg.error {
	color: #ef5350;
}

.settings-msg.success {
	color: #66bb6a;
}

.settings-btn {
	padding: 0.6rem 1rem;
	border: none;
	border-radius: 8px;
	background: #1e1e2a;
	color: #ccc;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
	text-align: center;
}

.settings-btn:hover {
	background: #252535;
	color: #e0e0e0;
}

.settings-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Danger zone */
.settings-title-danger {
	color: #b71c1c;
}

.settings-danger-warning {
	font-size: 0.82rem;
	color: #888;
	line-height: 1.5;
	margin-bottom: 0.85rem;
}

.settings-danger-warning strong {
	color: #ef5350;
}

.settings-delete-btn-wrap {
	position: relative;
}

.settings-btn-danger {
	width: 100%;
	background: #2a1a1a;
	color: #ef5350;
	border: 1px solid #3a1a1a;
	position: relative;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

.settings-btn-danger:hover {
	background: #2a1a1a;
	color: #ef5350;
	border-color: #ef5350;
}

.settings-delete-progress {
	position: absolute;
	inset: 0;
	background: #b71c1c;
	width: 0%;
	transition: none;
	pointer-events: none;
}

.settings-delete-label {
	position: relative;
	z-index: 1;
}

/* ===== RANKED PANEL ===== */

.ranked-panel {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 0.9rem;
}

.ranked-elo-row {
	display: flex;
	gap: 0.5rem;
}

.ranked-elo-card {
	flex: 1;
	background: #141420;
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
	text-align: center;
}

.ranked-elo-label {
	font-size: 0.68rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ranked-elo-value {
	font-size: 1.3rem;
	font-weight: 700;
	color: #ffa726;
}

.ranked-elo-record {
	font-size: 0.7rem;
	color: #555;
}

.ranked-mode-selector {
	display: flex;
	gap: 0.4rem;
}

.ranked-mode-btn {
	flex: 1;
	padding: 0.45rem;
	border: 1px solid #2a2a3a;
	border-radius: 7px;
	background: transparent;
	color: #777;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.ranked-mode-btn.active {
	border-color: #ffa726;
	color: #ffa726;
	background: #1a1408;
}

.ranked-queue-status {
	text-align: center;
	padding: 0.4rem 0;
}

.ranked-queue-status.hidden {
	display: none;
}

.ranked-queue-label {
	font-size: 0.82rem;
	color: #aaa;
}

.ranked-queue-time {
	font-size: 1.1rem;
	font-weight: 700;
	color: #ffa726;
	font-family: monospace;
}

.ranked-play-row {
	display: flex;
	gap: 0.4rem;
}

.ranked-play-btn {
	flex: 1;
	padding: 0.6rem;
	border: none;
	border-radius: 8px;
	background: #ffa726;
	color: #000;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.ranked-play-btn:hover {
	background: #ffb74d;
}

.ranked-cancel-btn {
	flex: 1;
	padding: 0.6rem;
	border: 1px solid #3a2a1a;
	border-radius: 8px;
	background: transparent;
	color: #ffa726;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.ranked-cancel-btn.hidden {
	display: none;
}
.ranked-cancel-btn:hover {
	border-color: #ffa726;
}

.ranked-leaderboard-toggle {
	width: 100%;
	padding: 0.3rem;
	background: transparent;
	border: none;
	color: #555;
	font-size: 0.78rem;
	cursor: pointer;
	text-align: center;
	transition: color 0.15s;
}

.ranked-leaderboard-toggle:hover {
	color: #aaa;
}

.ranked-leaderboard {
	background: #0a0a12;
	border-radius: 8px;
	overflow: hidden;
}

.ranked-leaderboard.hidden {
	display: none;
}

.ranked-lb-tabs {
	display: flex;
	border-bottom: 1px solid #1a1a28;
}

.ranked-lb-tab {
	flex: 1;
	padding: 0.4rem;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #555;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
}

.ranked-lb-tab.active {
	color: #ffa726;
	border-bottom-color: #ffa726;
}

.ranked-lb-list {
	max-height: 10rem;
	overflow-y: auto;
	padding: 0.4rem;
}

.ranked-lb-entry {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.4rem;
	font-size: 0.8rem;
	border-radius: 4px;
}

.ranked-lb-entry:hover {
	background: #141420;
}

.ranked-lb-rank {
	color: #555;
	font-size: 0.72rem;
	width: 1.4rem;
	flex-shrink: 0;
}

.ranked-lb-name {
	flex: 1;
	color: #ccc;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ranked-lb-elo {
	color: #ffa726;
	font-weight: 700;
	font-size: 0.82rem;
}

/* ELO result on victory screen */
.game-result-elo {
	margin: 0.5rem 0;
	font-size: 1rem;
	font-weight: 600;
}

.game-result-elo.hidden {
	display: none;
}

.game-result-elo .elo-gain {
	color: #66bb6a;
}
.game-result-elo .elo-loss {
	color: #ef5350;
}

/* ===== TEAM PANEL ===== */

.team-members-area {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.5rem;
	border-bottom: 1px solid #1a1a28;
	flex-shrink: 0;
}

.team-member-card {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #141420;
	border-radius: 7px;
	padding: 0.45rem 0.6rem;
	font-size: 0.85rem;
	color: #ccc;
}

.team-member-card .team-kick-btn {
	margin-left: auto;
	background: transparent;
	border: 1px solid #6b2a2a;
	color: #e57373;
	border-radius: 4px;
	padding: 0.15rem 0.5rem;
	font-size: 0.72rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}

.team-member-card .team-kick-btn:hover {
	background: #3a1a1a;
}

.team-member-card .team-leader-badge {
	font-size: 0.65rem;
	background: #ffa726;
	color: #000;
	border-radius: 3px;
	padding: 0 4px;
	font-weight: 700;
}

.team-member-card.team-member-offline {
	opacity: 0.5;
}

.team-member-card.team-member-offline button {
	opacity: 1;
}

.team-member-offline-badge {
	font-size: 0.65rem;
	color: #666;
}

.team-actions-row {
	display: flex;
	justify-content: center;
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid #1a1a28;
	flex-shrink: 0;
}

.team-leave-btn {
	padding: 0.3rem 1rem;
	border: 1px solid #3a1a1a;
	border-radius: 7px;
	background: transparent;
	color: #ef5350;
	font-size: 0.82rem;
	cursor: pointer;
	transition: all 0.15s;
}

.team-leave-btn:hover {
	background: #2a1a1a;
	border-color: #ef5350;
}

/* ===== PLAYER CONTEXT MENU ===== */

.player-ctx-menu {
	position: fixed;
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	overflow: hidden;
	z-index: 2000;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	min-width: 140px;
}

.player-ctx-menu.hidden {
	display: none;
}

.player-ctx-item {
	display: block;
	width: 100%;
	padding: 0.55rem 0.9rem;
	background: transparent;
	border: none;
	color: #ccc;
	font-size: 0.88rem;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s;
}

.player-ctx-item:hover {
	background: #252535;
	color: #e0e0e0;
}

/* ===== TEAM INVITE MODAL ===== */

.team-invite-box {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 1.75rem 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 360px;
	max-width: calc(100vw - 2rem);
}

.team-invite-box p {
	color: #ccc;
	font-size: 0.95rem;
}

.team-invite-actions {
	display: flex;
	gap: 0.5rem;
}

.team-invite-actions button {
	flex: 1;
	max-width: none;
	padding: 0.6rem 0.75rem;
}

#team-invite-decline {
	border: none;
	background: #c62828;
	color: #fff;
	font-weight: 600;
}

#team-invite-decline:hover {
	background: #b71c1c;
	border: none;
	color: #fff;
}

/* ===== Spectator badge ===== */
/* Spectator badge */
.spectator-badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	background: #1a2a40;
	border: 1px solid #2196f3;
	border-radius: 4px;
	font-size: 0.7rem;
	color: #64b5f6;
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* ── SC Chip ─────────────────────────────────────────────────────────────────── */

.sc-chip {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.7rem;
	background: #0d1f0d;
	border: 1px solid #43a047;
	border-radius: 20px;
	color: #81c784;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.sc-chip:hover {
	background: #122b12;
	border-color: #66bb6a;
}

.sc-chip-icon {
	font-size: 0.9rem;
}
.sc-chip-label {
	font-size: 0.7rem;
	opacity: 0.7;
}

/* ── Shop Panel ──────────────────────────────────────────────────────────────── */

.shop-header {
	margin-bottom: 0.5rem;
}

.shop-discount-banner {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.8rem;
	background: #0d1f0d;
	border: 1px solid #43a047;
	border-radius: 8px;
	color: #81c784;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.shop-discount-icon {
	font-size: 1rem;
}

.shop-tab-bar {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

.shop-tab-btn {
	flex: 1;
	padding: 0.45rem;
	border: 1px solid #2a2a3a;
	border-radius: 8px;
	background: transparent;
	color: #666;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.shop-tab-btn:hover {
	border-color: #444;
	color: #ccc;
}
.shop-tab-btn.active {
	border-color: #43a047;
	color: #81c784;
	background: #0d1f0d;
}

.shop-tab-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.shop-items {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.shop-item-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	background: #13131f;
	border: 1px solid #2a2a3a;
	border-radius: 10px;
	transition: border-color 0.15s;
}

.shop-item-card:hover {
	border-color: #444;
}

.shop-item-info {
	flex: 1;
	min-width: 0;
}

.shop-item-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: #ddd;
}

.shop-item-stats {
	font-size: 0.72rem;
	color: #777;
	margin-top: 0.15rem;
}

.shop-item-owned {
	font-size: 0.75rem;
	color: #81c784;
	margin-top: 0.1rem;
}

.shop-item-price {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: #81c784;
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

.shop-item-price.discounted {
	color: #a5d6a7;
}
.shop-item-price-original {
	text-decoration: line-through;
	color: #555;
	font-size: 0.75rem;
}

.shop-buy-btn {
	padding: 0.4rem 0.75rem;
	border: 1px solid #43a047;
	border-radius: 8px;
	background: transparent;
	color: #81c784;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	white-space: nowrap;
}

.shop-buy-btn:hover {
	background: #0d1f0d;
}
.shop-buy-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	border-color: #444;
	color: #666;
}

.shop-login-prompt {
	text-align: center;
	color: #666;
	padding: 2rem;
	font-size: 0.9rem;
}

#play-mode-shop.active {
	border-color: #43a047;
	color: #81c784;
	background: #0d1f0d;
}

/* ── Hangar Module Slots + Power Score ───────────────────────────────────────── */

.hangar-modules-section {
	margin-top: 0.75rem;
}

.hangar-modules-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.4rem;
}

.hangar-modules-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
	font-weight: 600;
}

.hangar-power-score {
	font-size: 0.78rem;
	color: #81c784;
	font-weight: 700;
}

.hangar-modules {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.hangar-module-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	width: 80px;
}

.hangar-module-warn {
	color: #ef5350;
	font-size: 0.75em;
}

/* ── Island Create Modal ─────────────────────────────────────────────────────── */

.island-create-modal-box {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 1.5rem;
	width: 380px;
	max-width: calc(100vw - 2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.island-create-modal-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: #e0e0e0;
}

.island-create-modal-box .hangar-name-input {
	max-width: none;
	text-align: left;
	box-sizing: border-box;
}

.island-create-type-selector {
	display: flex;
	gap: 0.5rem;
}

.island-create-modal-actions {
	display: flex;
	gap: 0.5rem;
}

.island-create-modal-actions button {
	flex: 1;
	max-width: none;
	width: auto;
	padding: 0.6rem 0.75rem;
}

.hangar-confirm-modal-box {
	background: #0d0d16;
	border: 1px solid #1e1e2a;
	border-radius: 10px;
	padding: 1.5rem;
	width: 320px;
	max-width: calc(100vw - 2rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hangar-confirm-modal-box .hangar-name-input {
	max-width: none;
	text-align: left;
	box-sizing: border-box;
}

.hangar-confirm-modal-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: #e0e0e0;
}

.hangar-confirm-modal-body {
	font-size: 0.9rem;
	color: #ccc;
	line-height: 1.4;
}

.hangar-confirm-modal-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.hangar-confirm-modal-actions button {
	flex: 1;
	max-width: none;
	width: auto;
	padding: 0.6rem 0.75rem;
}

/* ── Hangar Inventory Panel ──────────────────────────────────────────────────── */

.hangar-inventory-panel {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #1e1e2e;
}

.hangar-inventory-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.hangar-inventory-capacity {
	font-size: 0.75rem;
	color: #666;
}

.hangar-inventory-list {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.hangar-inventory-empty {
	font-size: 0.78rem;
	color: #555;
	text-align: center;
	padding: 0.5rem;
}

.hangar-inventory-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: #bbb;
}

.hangar-inventory-name {
	flex: 1;
}
.hangar-inventory-qty {
	color: #4caf50;
	font-weight: 600;
}
.hangar-inventory-placed {
	font-size: 0.7rem;
	color: #666;
}

/* ── Profile Modal ─────────────────────────────────────────────────────────── */

.profile-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.profile-modal-overlay.hidden {
	display: none;
}

.profile-modal-box {
	background: #0d0d16;
	border: 1px solid #1e2a4a;
	border-radius: 10px;
	width: 480px;
	max-width: calc(100vw - 2rem);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.profile-modal-header {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.1rem 1.25rem 0.9rem;
	flex-shrink: 0;
	border-bottom: 1px solid #1a2240;
}

.profile-modal-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #5ba3f5;
}

.profile-modal-body {
	overflow-y: auto;
	flex: 1;
	padding: 1rem 1.25rem;
}

.profile-modal-footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	padding: 0.75rem 1.25rem 1rem;
	border-top: 1px solid #1a2240;
}

.profile-close-btn {
	padding: 0.5rem 2rem;
	background: #2196f3;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}
.profile-close-btn:hover {
	background: #1976d2;
}

.profile-friend-btn {
	padding: 0.5rem 1.25rem;
	background: transparent;
	color: #5ba3f5;
	border: 1px solid #2a4a7a;
	border-radius: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s,
		border-color 0.15s;
	margin-right: auto;
}
.profile-friend-btn:hover {
	background: #0d1a30;
	border-color: #5ba3f5;
}
.profile-friend-btn:disabled {
	opacity: 0.5;
	cursor: default;
}
.profile-friend-btn.hidden {
	display: none;
}

.profile-remove-btn {
	background: #3a1a1a;
	color: #e57373;
	border-color: #6b2a2a;
}
.profile-remove-btn:hover {
	background: #4a2020;
}

.profile-loading {
	text-align: center;
	color: #666;
	padding: 2rem 0;
	font-size: 0.85rem;
}

/* Stats grid */
.profile-stats-section {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}

.profile-stat-cell {
	background: #0a0a14;
	border: 1px solid #1a1a2a;
	border-radius: 8px;
	padding: 0.6rem 0.5rem;
	text-align: center;
}
.profile-stat-cell.profile-stat-streak {
	border-color: #2a4a7a;
	background: #0a0f1e;
}

.profile-stat-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: #e0e0e0;
	line-height: 1;
	margin-bottom: 0.25rem;
}
.profile-stat-streak .profile-stat-value {
	color: #5ba3f5;
}

.profile-stat-label {
	font-size: 0.68rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* Islands section */
.profile-section-title {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
	margin-bottom: 0.6rem;
}

.profile-islands-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.profile-island-card {
	background: #0a0a14;
	border: 1px solid #1a1a2a;
	border-radius: 8px;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	width: 108px;
}

.profile-island-canvas {
	display: block;
	border-radius: 4px;
}

.profile-island-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0.25rem;
}

.profile-island-name {
	font-size: 0.72rem;
	color: #ccc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.profile-island-type {
	font-size: 0.65rem;
	background: #1e2a1e;
	color: #6a9;
	border-radius: 3px;
	padding: 0 0.3rem;
	font-weight: 700;
	flex-shrink: 0;
}

.profile-island-slots {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	justify-content: center;
}

.profile-slot-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-island-modules {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	justify-content: center;
}

.profile-module-tag {
	font-size: 0.58rem;
	background: #1a1a2e;
	color: #8888cc;
	border-radius: 3px;
	padding: 1px 4px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ── Friends Panel ─────────────────────────────────────────────────────────── */

.friends-panel.hidden {
	display: none;
}

.friends-list.hidden {
	display: none;
}
.friends-list.hidden {
	display: none;
}

.friends-list-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.75rem;
	font-size: 0.78rem;
	transition: background 0.12s;
}
.friends-list-item:hover {
	background: #0d0d1e;
}

.friend-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.friend-online .friend-status-dot {
	background: #4caf50;
}
.friend-offline .friend-status-dot {
	background: #444;
}

.friend-name {
	color: #ccc;
}
.friend-offline .friend-name {
	color: #666;
}

/* ── Whisper messages ──────────────────────────────────────────────────────── */

.lobby-chat-whisper {
	padding: 0.2rem 0.5rem 0.2rem 0.5rem;
	font-size: 0.82rem;
	color: #e8a0b4;
	background: rgba(200, 80, 120, 0.07);
	border-left: 2px solid rgba(200, 80, 120, 0.35);
	margin: 1px 0;
}

.whisper-label {
	font-weight: 600;
	color: #d08090;
	margin-right: 0.15rem;
}

.whisper-name-link {
	cursor: pointer;
}
.whisper-name-link:hover {
	color: #e8a0b4;
	text-decoration: underline;
}

/* ── @mention suggestion dropdown ─────────────────────────────────────────── */

.lobby-chat-input-wrapper {
	position: relative;
}

.mention-suggestions {
	position: absolute;
	bottom: calc(100% + 2px);
	left: 0;
	right: 0;
	background: #0e0e1e;
	border: 1px solid #2a2a40;
	border-radius: 6px;
	overflow: hidden;
	z-index: 200;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
}
.mention-suggestions.hidden {
	display: none;
}

.mention-item {
	padding: 0.35rem 0.75rem;
	font-size: 0.82rem;
	color: #bbb;
	cursor: pointer;
	transition: background 0.1s;
}
.mention-item:hover,
.mention-item.active {
	background: #1a1a30;
	color: #5ba3f5;
}

/* ── Notification Bell ─────────────────────────────────────────────────────── */

.notif-bell-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}
.notif-bell-wrapper.hidden {
	display: none;
}

.notif-bell-btn {
	position: relative;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #888;
	padding: 0.3rem;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		color 0.15s,
		background 0.15s;
}
.notif-bell-btn:hover {
	color: #ccc;
	background: #1a1a28;
}

.notif-bell-icon {
	display: block;
}

.notif-red-dot {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 8px;
	height: 8px;
	background: #e53935;
	border-radius: 50%;
	border: 2px solid #0a0a1a;
	pointer-events: none;
}
.notif-red-dot.hidden {
	display: none;
}

.notif-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	width: 280px;
	background: #0d0d18;
	border: 1px solid #1e1e30;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
	z-index: 500;
	overflow: hidden;
}
.notif-dropdown.hidden {
	display: none;
}

.notif-dropdown-header {
	padding: 0.5rem 0.9rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
	border-bottom: 1px solid #1a1a28;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.notif-dismiss-all-btn {
	background: none;
	border: none;
	font-family: monospace;
	font-size: 0.68rem;
	color: #444;
	cursor: pointer;
	padding: 0.1rem 0.3rem;
	text-transform: none;
	letter-spacing: 0;
	transition: color 0.15s;
}
.notif-dismiss-all-btn:hover {
	color: #888;
}
.notif-dismiss-all-btn.hidden {
	display: none;
}

.notif-dropdown-list {
	max-height: 320px;
	overflow-y: auto;
}

.notif-empty {
	padding: 1rem 0.9rem;
	font-size: 0.8rem;
	color: #444;
	text-align: center;
}

.notif-item {
	padding: 0.65rem 0.9rem;
	border-bottom: 1px solid #13131f;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.notif-item:last-child {
	border-bottom: none;
}

.notif-item-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.notif-item-text {
	flex: 1;
	font-size: 0.8rem;
	color: #bbb;
	line-height: 1.35;
}

.notif-item-time {
	font-size: 0.7rem;
	color: #555;
	margin-top: 0.25rem;
}

.notif-dismiss-btn {
	flex-shrink: 0;
	background: none;
	border: none;
	color: #444;
	font-size: 0.75rem;
	cursor: pointer;
	padding: 0 0.1rem;
	line-height: 1;
	transition: color 0.15s;
	margin-top: 0.1rem;
}
.notif-dismiss-btn:hover {
	color: #888;
}

.notif-item-actions {
	display: flex;
	gap: 0.4rem;
}

.notif-accept-btn,
.notif-decline-btn {
	flex: 1;
	padding: 0.3rem 0;
	font-size: 0.76rem;
	font-weight: 600;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.15s;
}

.notif-accept-btn {
	background: #1565c0;
	color: #fff;
}
.notif-accept-btn:hover {
	background: #1976d2;
}

.notif-decline-btn {
	background: #c62828;
	color: #fff;
}
.notif-decline-btn:hover {
	background: #b71c1c;
}

/* ── Block button in context menu ──────────────────────────────────────────── */

.player-ctx-divider {
	height: 1px;
	background: #1e1e2a;
	margin: 2px 0;
}

.player-ctx-danger {
	color: #e57373 !important;
}
.player-ctx-danger:hover {
	background: rgba(229, 115, 115, 0.1) !important;
}

/* ===== MOBILE GAME CONTROLS ===== */

.mobile-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 130px;
	display: flex;
	align-items: center;
	background: rgba(5, 5, 18, 0.88);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	z-index: 60;
	padding: 0 10px 0 8px;
	gap: 8px;
	touch-action: none;
}

.mobile-controls.hidden {
	display: none;
}

/* Left: scrollable tower/island button strip */
.mobile-ctrl-left {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mobile-ctrl-left::-webkit-scrollbar {
	display: none;
}

.mobile-ctrl-btns {
	display: flex;
	gap: 8px;
	padding: 4px 2px;
	white-space: nowrap;
	align-items: center;
}

.mobile-ctrl-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 92px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	color: #aaa;
	font-family: monospace;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	transition:
		background 0.12s,
		border-color 0.12s,
		color 0.12s;
	user-select: none;
	-webkit-user-select: none;
}

.mobile-ctrl-btn.active {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.mobile-ctrl-btn.on-cooldown {
	opacity: 0.45;
}

/* Green dot: action is queued */
.mobile-ctrl-btn-dot {
	display: none;
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4caf50;
	box-shadow: 0 0 4px #4caf50;
}

.mobile-ctrl-btn.has-action .mobile-ctrl-btn-dot {
	display: block;
}

/* Cooldown badge */
.mobile-ctrl-btn-cd {
	display: none;
	position: absolute;
	bottom: 5px;
	right: 5px;
	font-size: 9px;
	color: #ef9a9a;
}

.mobile-ctrl-btn.on-cooldown .mobile-ctrl-btn-cd {
	display: block;
}

.mobile-ctrl-btn-label {
	pointer-events: none;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
	max-width: 60px;
}

/* Vertical divider */
.mobile-ctrl-divider {
	flex-shrink: 0;
	width: 1px;
	height: 90px;
	background: rgba(255, 255, 255, 0.1);
}

/* Right: analog stick */
.mobile-ctrl-right {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 114px;
	height: 114px;
}

.mobile-analog-base {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.15);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
	cursor: pointer;
}

.mobile-analog-knob {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	border: 2px solid rgba(255, 255, 255, 0.5);
	position: relative;
	pointer-events: none;
	will-change: transform;
}

/* ── Profile Replays Section ────────────────────────────────────────────────── */

.profile-replays-section {
	margin-top: 1.2rem;
}

.profile-replay-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.6rem;
	border-radius: 6px;
	background: #0a0a14;
	border: 1px solid #1a1a2a;
	margin-bottom: 0.4rem;
}

.profile-replay-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.profile-replay-players {
	font-size: 0.82rem;
	color: #ccc;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-replay-meta {
	font-size: 0.7rem;
	color: #666;
}

.profile-replay-watch-btn {
	flex-shrink: 0;
	padding: 0.3rem 0.75rem;
	background: #1a1a3a;
	color: #8888ff;
	border: 1px solid #2a2a5a;
	border-radius: 5px;
	font-size: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.profile-replay-watch-btn:hover {
	background: #2a2a6a;
	color: #aaaaff;
}

/* ── Replay Screen ───────────────────────────────────────────────────────────── */

#replay {
	position: fixed;
	inset: 0;
	background: #000;
}

#replay-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.replay-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.replay-top-bar {
	pointer-events: all;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.7) 0%,
		transparent 100%
	);
}

.replay-back-btn {
	background: rgba(255, 255, 255, 0.08);
	color: #ccc;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	padding: 0.4rem 0.9rem;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
}

.replay-back-btn:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.replay-game-info {
	font-size: 0.78rem;
	color: #999;
}

.replay-controls {
	pointer-events: all;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		transparent 100%
	);
}

.replay-scrubber-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.replay-scrubber {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
}

.replay-scrubber-track {
	position: relative;
	width: 100%;
	height: 6px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	overflow: visible;
}

.replay-scrubber-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: #00e5ff;
	border-radius: 3px;
	width: 0%;
	pointer-events: none;
}

.replay-scrubber-markers {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.replay-scrubber-marker {
	position: absolute;
	top: -3px;
	width: 2px;
	height: 12px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 1px;
	transform: translateX(-50%);
}

.replay-scrubber-thumb {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	transition: transform 0.1s;
}

.replay-scrubber:hover .replay-scrubber-thumb {
	transform: translate(-50%, -50%) scale(1.25);
}

.replay-turn-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.replay-nav-btn {
	background: rgba(255, 255, 255, 0.1);
	color: #ccc;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background 0.15s,
		color 0.15s;
}

.replay-nav-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.replay-nav-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}