/* Home page boxes in the new style (like Top Authors and the community bar): title row inside the box,
   lime icon tile, #161B1D surface, thin border, 14px corners (2026-10-24). */

.hmBox {
	background: #161B1D !important;
	border: 1px solid #232B33;
	border-radius: 14px !important;
	box-shadow: none !important;
	color: #E6EDF3;
	overflow: hidden;
}

.hmHead {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 16px 12px;
	text-align: left;
}

.hmIcon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(184,216,107,.12);
	color: #B8D86B;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.hmHead h2 {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	color: #E6EDF3;
}

.hmSub {
	font-size: 13px;
	color: #8B97A6;
}

.hmBox a.hmLink {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: #B8D86B;
	text-decoration: none;
}

.hmLink i { font-size: 11px; }

/* Latest News */
.hmBox .newsItems { height: auto; margin: 0; padding: 0 8px 8px; }
.hmBox .recent_post_box { background: transparent; border-top: 1px solid #1F262C; padding: 8px; border-radius: 10px; }
.hmBox .recent_post_box:hover { background: #1C2328; }
.hmBox .recent_post_title a { color: #E6EDF3; }
.hmBox .recent_post_title a:hover { color: #B8D86B; }
.hmBox .recent_thumbnail { border-radius: 8px; }
.hmBox .recent_post_info { color: #8B97A6; font-size: 13px; }

/* Live rooms */
.hmBox #haxmodsRoomList { background: transparent; height: 424px; padding: 0 10px 10px; }
.hmHead #haxmodsRoomListInfo { background: none; padding: 0; text-align: left; font-size: 13px; color: #8B97A6; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hmHead #haxmodsRoomListInfo > span:last-child { float: none !important; padding: 0 !important; }

/* Maps: tabs sit in the title row */
.hmBox .hm-maps-tabs { background: none; height: auto; padding: 0; justify-content: flex-start; flex: 1 1 auto; margin-left: 8px; }
.hmBox .hm-maps-tab { border: 1px solid #2E3740; color: #C9D1D9; background: transparent; font-size: 14px; }
.hmBox .hm-maps-tab:hover { background: rgba(255,255,255,.06); color: #fff; }
.hmBox .hm-maps-tab.is-on { background: #B8D86B; border-color: #B8D86B; color: #1B2410; }
.hmBox .hm-maps-random { margin-left: auto; color: #B8D86B; font-weight: 600; font-size: 14px; }
.hmBox .hm-maps-search { background: transparent; padding: 0 16px; }
.hmBox .hm-maps-search-box { margin: 0; max-width: 420px; }
.hmBox .hm-maps-search input { background: #1F262C; border-color: #2E3740; }
.hmBox .hm-maps-panel { background: transparent !important; }

/* Recent Activity */
.hmBox .ra-filters { padding: 0 16px 10px; }

@media (max-width: 767px) {
	.hmBox .hm-maps-tabs { flex: 1 1 100%; margin-left: 0; order: 5; }
	.hmBox .hm-maps-random { margin-left: auto; }
}

/* room cards match the map cards */
.hmBox .roomRow { background: #1F262C; border: 1px solid #2E3740; border-radius: 10px; margin-bottom: 6px; }

/* Live Rooms fills its column on desktop, so it ends level with Latest News; the list scrolls inside */
@media (min-width: 768px) {
	.hmRoomsCol { display: flex; flex-direction: column; }
	.hmRoomsCol .haxmodsRoomListContainer { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
	.hmRoomsCol #haxmodsRoomList { flex: 1 1 0; height: auto; min-height: 300px; }
}

/* Featured Challenge (home page): the day's time trial map, record and latest run (2026-10-24) */
.ttc { margin-top: 10px; margin-bottom: 20px; font-size: 14px; }
.ttc .hmHead { padding-bottom: 10px; }
.ttc-body { display: flex; gap: 14px; padding: 0 16px 14px; align-items: center; }
.ttc-thumb { flex: 0 0 168px; aspect-ratio: 2 / 1; border-radius: 10px; overflow: hidden; background: #0E1116; border: 1px solid #2E3740; }
.ttc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ttc-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hmBox a.ttc-map { font-size: 18px; font-weight: 700; color: #E6EDF3; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmBox a.ttc-map:hover { color: #B8D86B; }
.ttc-by { font-size: 12.5px; color: #8B97A6; }
.ttc-record { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ttc-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8B97A6; }
.ttc-time { font-size: 20px; font-weight: 700; color: #F5C451; font-variant-numeric: tabular-nums; }
.ttc-who { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #E6EDF3; }
.ttc-flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; }
.ttc-podium { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: #8B97A6; font-variant-numeric: tabular-nums; }
.ttc-podium b { color: #C9D1D9; font-weight: 600; }
.ttc-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #1F262C; flex-wrap: wrap; }
.ttc-latest { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #8B97A6; min-width: 0; }
.ttc-latest b { color: #E6EDF3; font-weight: 600; }
.hmBox a.ttc-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #B8D86B; color: #1B2410; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hmBox a.ttc-btn:hover { background: #C6E27E; color: #1B2410; }
@media (max-width: 520px) {
	.ttc-body { flex-direction: column; align-items: stretch; }
	.ttc-thumb { flex: none; width: 100%; }
	.hmBox a.ttc-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* the logged-in player's own best on the featured map */
.ttc-mine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-top: 6px; border-top: 1px solid #1F262C; font-size: 13px; color: #8B97A6; font-variant-numeric: tabular-nums; }
.ttc-mine b { color: #B8D86B; font-size: 14px; }
.ttc-mine-top { color: #F5C451; font-weight: 600; }