html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #0b0b0b;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 160%;
}

#mcmap {
	width: 100%;
	height: 100%;
}

/* Help tile seam overlap look clean */
.leaflet-tile-pane img.leaflet-tile,
.mc-tile-layer img.leaflet-tile {
	image-rendering: auto;
	backface-visibility: hidden;
}

/* Hide stock map/rotation pickers — replaced by the 2k2f bar */
#control-wrapper-map-select,
#control-wrapper-rotation-select {
	display: none !important;
}

.control-wrapper-panel {
	background: linear-gradient(180deg, #1e1e1e, #151515);
	border: 1px solid rgba(255,255,255,0.06);
	color: #e9e9e9;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	overflow: hidden;
}

.control-wrapper-panel .panel-heading,
.control-wrapper-panel .panel-body,
.control-wrapper-panel .panel-footer {
	padding: 7px 10px;
	background: transparent;
	border: 0;
	color: #e9e9e9;
}

.control-wrapper-invisible {
	margin: 5px;
	padding: 4px;
}

.dropdown-menu {
	cursor: pointer;
}

#control-wrapper-marker .list-group-item {
	background: transparent;
	color: #e0e0e0;
	border-color: rgba(255,255,255,0.06);
}

#control-wrapper-marker .list-group-item-info {
	background: rgba(139,92,246,0.18);
	color: #fff;
}

#control-wrapper-marker .list-group-item .right-padding {
	padding-right: 30px;
}

#control-wrapper-map-select {
	z-index: initial !important;
}

/* Top-right site brand */
#siteBrand {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 1200;
	background: linear-gradient(180deg, #1e1e1e, #151515);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	padding: 6px 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	text-decoration: none;
	opacity: .75;
	transition: opacity .15s ease, transform .15s ease;
	outline: none;
}
#siteBrand:focus,
#siteBrand:focus-visible,
#siteBrand:active {
	outline: none;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
#siteBrand img {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	object-fit: cover;
}
#siteBrand span {
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 20px;
	color: #ffffff;
}
#siteBrand:hover { opacity: 1; transform: translateY(-2px); }

/* Custom top center bar */
#renderbar {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 1200;
}

.rb-pill {
	background: linear-gradient(180deg, #1e1e1e, #151515);
	border: 1px solid rgba(255,255,255,0.06);
	color: #e9e9e9;
	border-radius: 12px;
	height: 36px;
	line-height: 36px;
	padding: 0 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
	cursor: pointer;
	user-select: none;
	opacity: .75;
	transition: opacity .15s ease, box-shadow .15s ease, border-color .15s ease;
	font-size: 13px;
}
.rb-pill img { width:18px; height:18px; vertical-align: -4px; margin-right: 8px; }
.rb-current img {
	width: 16px;
	height: 16px;
	margin-right: 4px;
	vertical-align: -3px;
}
.rb-pill:hover { color:#fff; }
.rb-pill:hover,
.rb-pill:focus { opacity: 1; }
.rb-pill.active { border-color:#8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.25), inset 0 1px 0 rgba(255,255,255,0.04); opacity: 1; }
.rb-pill:disabled { opacity: .35; cursor: default; }

.rb-worlds { display:flex; gap:6px; }

.rb-current {
	position: relative;
	padding-right: 40px;
}
.rb-current .chev {
	position:absolute; right:12px; top:50%; margin-top:-10px;
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	color: #cfcfcf;
	transition: transform .2s ease;
}
.rb-current.open .chev { transform: rotate(180deg); }

#renderDropdown {
	position: absolute;
	top: 68px;
	left: 50%;
	transform: translateX(-50%) scale(.98);
	background: rgba(18,18,18,0.65);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.5);
	padding: 12px;
	width: min(520px, 92vw);
	z-index: 1200;
	opacity: 0;
	pointer-events: none;
	transform-origin: top center;
	transition: opacity .2s ease, transform .2s ease;
}
#renderDropdown.open {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) scale(1);
}

.rb-timeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	max-height: 60vh;
	overflow-y: auto;
	padding-right: 6px;
}
.rb-dot {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: transparent;
	transition: background-color .15s ease;
	cursor: pointer;
}
.rb-dot:hover { background: rgba(255,255,255,0.04); }
.rb-dot button {
	width:12px; height:12px; display:block; padding:0; line-height:0;
	border-radius:50%; border:2px solid #cfcfcf; background:#fff;
	cursor:pointer; box-sizing:content-box;
}
.rb-dot.active button { border-color:#8b5cf6; background:#8b5cf6; }
.rb-dot span { color:#e0e0e0; font-size:13px; line-height: 1.3; white-space: normal; }

/* Переключение 3D / NoRoof / 2D — один блок с разделителями */
.rb-modes {
	position: fixed;
	right: 12px;
	bottom: 28px;
	display: grid;
	gap: 1px;
	z-index: 1200;
	width: 176px;
	overflow: hidden;
	background: rgba(0,0,0,0.45);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.rb-modes--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 36px;
}
.rb-modes--2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 36px;
}
.rb-modes--3 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 36px 36px;
}
.rb-mode {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0 10px;
	min-width: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #e9e9e9;
	background: linear-gradient(180deg, #1e1e1e, #151515);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	user-select: none;
	opacity: .75;
	transition: opacity .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rb-modes--3 .rb-mode[data-layer="3D"] {
	grid-column: 1;
	grid-row: 1;
	border-top-left-radius: 11px;
}
.rb-modes--3 .rb-mode[data-layer="3D_NoRoof"] {
	grid-column: 2;
	grid-row: 1;
	border-top-right-radius: 11px;
}
.rb-modes--3 .rb-mode[data-layer="2D"] {
	grid-column: 1 / -1;
	grid-row: 2;
	border-bottom-left-radius: 11px;
	border-bottom-right-radius: 11px;
}
.rb-modes--2 .rb-mode:first-child {
	border-radius: 11px 0 0 11px;
}
.rb-modes--2 .rb-mode:last-child {
	border-radius: 0 11px 11px 0;
}
.rb-modes--1 .rb-mode {
	border-radius: 11px;
}
.rb-mode:hover,
.rb-mode:focus {
	color: #fff;
	opacity: 1;
}
.rb-mode.active {
	color: #fff;
	opacity: 1;
	box-shadow: inset 0 0 0 1px #8b5cf6;
}
.rb-mode:focus-visible {
	outline: none;
	opacity: 1;
	box-shadow: inset 0 0 0 1px #8b5cf6;
}

/* Dark Leaflet zoom — must win over leaflet.css / bootstrap */
.leaflet-bar {
	box-shadow: 0 6px 24px rgba(0,0,0,0.35) !important;
	border-radius: 6px !important;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.06) !important;
	background: transparent !important;
}
.leaflet-left .leaflet-control { margin-left: 8px; }
.leaflet-top .leaflet-control { margin-top: 8px; }
.leaflet-bottom .leaflet-control { margin-bottom: 8px; }
.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-bar a:hover {
	background: linear-gradient(180deg, #1e1e1e, #151515) !important;
	background-color: #1a1a1a !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
	color: #e7e7e7 !important;
	text-decoration: none !important;
	text-align: center;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus,
.leaflet-bar a:focus-visible,
.leaflet-bar a:active,
.leaflet-container a.leaflet-active {
	background: linear-gradient(180deg, #232323, #181818) !important;
	color: #ffffff !important;
	outline: none !important;
}
.leaflet-bar a.leaflet-disabled {
	background: linear-gradient(180deg, #141414, #121212) !important;
	color: #8d8d8d !important;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace !important;
	color: #e7e7e7 !important;
}

/* Coordinates — match 2k2f overviewer style */
#control-wrapper-mouse-pos {
	margin: 0 0 8px 8px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
#control-wrapper-mouse-pos.control-wrapper-panel,
#control-wrapper-mouse-pos.panel,
#control-wrapper-mouse-pos.panel-default {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.leaflet-container .coordbox,
#mouse-move-div.coordbox {
	box-shadow: 0 6px 24px rgba(0,0,0,0.35);
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1;
	background: linear-gradient(180deg, #1e1e1e, #151515);
	margin: 0;
	padding: 0;
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 6px;
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
}
.coord-seg {
	padding: 8px 14px;
	display: inline-flex;
	align-items: center;
	color: #ffffff;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.coord-seg:not(:last-child) {
	border-right: 1px solid rgba(255,255,255,0.08);
}

/* Social buttons in attribution */
.leaflet-container .leaflet-control-attribution {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0 8px 8px 0;
	color: transparent;
	font-size: 0;
}
.ov-socials { display:flex; gap:12px; align-items:center; padding: 6px; }
.ov-soc {
	display: inline-flex;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-decoration: none;
	box-shadow: 0 6px 24px rgba(0,0,0,0.35);
	line-height: 0;
	transition: transform .2s ease, filter .2s ease, opacity .2s ease;
	opacity: .30;
	font-size: calc(1.5rem * 42 / 55);
}
.ov-soc:link, .ov-soc:visited, .ov-soc:hover, .ov-soc:active, .ov-soc:focus { text-decoration: none; outline: none; }
.leaflet-control-attribution .ov-socials a { text-decoration: none !important; }
.ov-soc svg {
	fill: #ffffff;
	display: block;
	flex-shrink: 0;
	pointer-events: none;
	transform-origin: 50% 50%;
}
.ov-soc-tg { background: #29a0dc; }
.ov-soc-dc { background: #5865F2; }
.ov-soc-tg svg.telegram-plane-icon {
	width: 1.4em;
	height: 1.4em;
	transform: translate(-0.18em, -0.08em);
}
.ov-soc-dc svg.discord-icon {
	width: 1.2em;
	height: 1.2em;
}
.ov-soc:hover {
	filter: brightness(1.08);
	transform: scale(1.05);
	opacity: 1;
}