/* ============================================================
   muonline2 — section panels
   Only the four homepage section blocks change:
     #soon      New Servers Opening Soon
     #already   Recently Opened Servers
     #weekago   Opened Week Ago And More
     #ranked    Top 10 MU Servers
   Rows, colours, flags and layout stay exactly as they are.
   Load AFTER style.css. Delete this file to revert.
   ============================================================ */

/* ---- 1. each section becomes a bordered panel ----------- */
.server-list section#soon,
.server-list section#already,
.server-list section#weekago,
.server-list section#ranked {
	background: #141418;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
	margin-bottom: 20px;
	gap: 0;
}

/* ---- 2. header bar with left accent + count ------------- */
.server-list section#soon    > .server-list__title,
.server-list section#already > .server-list__title,
.server-list section#weekago > .server-list__title,
.server-list section#ranked  > .server-list__title,
.server-list section#soon    .server-list__title,
.server-list section#already .server-list__title,
.server-list section#weekago .server-list__title,
.server-list section#ranked  .server-list__title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 9px;
	background: #1a1a20;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	border-left: 3px solid #FFA933;
	padding: 11px 14px;
	margin: 0;
	font-size: 14px;
	letter-spacing: 1px;
	text-align: left;
	color: #e3e3e7;
}

/* accent colour per section */
.server-list section#already .server-list__title { border-left-color: #4EC17E; }
.server-list section#ranked  .server-list__title { border-left-color: #E7C24B; }
.server-list section#weekago .server-list__title { border-left-color: #5b5b66; }

/* ---- 3. breathing room around the rows ------------------ */
.server-list section#soon    > div,
.server-list section#already > div,
.server-list section#weekago > div,
.server-list section#ranked  > div {
	padding: 6px 10px 10px;
}

/* ---- 4. softer row dividers inside a panel -------------- */
.server-list section#soon    .card,
.server-list section#already .card,
.server-list section#weekago .card,
.server-list section#ranked  .card {
	border-bottom-color: rgba(255, 255, 255, .06);
	border-radius: 6px;
}

.server-list section#soon    .card:last-child,
.server-list section#already .card:last-child,
.server-list section#weekago .card:last-child,
.server-list section#ranked  .card:last-child {
	border-bottom: 0;
}

.server-list section#soon    .card:hover,
.server-list section#already .card:hover,
.server-list section#weekago .card:hover,
.server-list section#ranked  .card:hover {
	background-color: rgba(255, 255, 255, .05);
}

@media (max-width: 640px) {
	.server-list section#soon    .server-list__title,
	.server-list section#already .server-list__title,
	.server-list section#weekago .server-list__title,
	.server-list section#ranked  .server-list__title {
		font-size: 13px;
		padding: 10px 13px;
	}
	.server-list section#soon    > div,
	.server-list section#already > div,
	.server-list section#weekago > div,
	.server-list section#ranked  > div {
		padding: 4px 7px 8px;
	}
}

/* ---- 5. use the full width, tighter columns -------------- */
.server-list {
	max-width: none;
	width: 100%;
}

@media (min-width: 768px) {
	.server-list {
		gap: 4px;
		padding-left: 10px;
		padding-right: 10px;
	}
	.server-list .flex.flex-col.gap-6.min-w-0 {
		gap: 4px;
	}
	.server-list section#soon,
	.server-list section#already,
	.server-list section#weekago,
	.server-list section#ranked {
		margin-bottom: 4px;
	}
}

/* ---- 6. tighter meta columns so names stop truncating ---- */
.server-list .card__rate {
	width: auto;
	min-width: 36px;
	margin-left: 2px;
	font-size: 12px;
}

.server-list .card__chronicle {
	width: auto;
	min-width: 32px;
	font-size: 12px;
}

.server-list .card__time {
	width: 84px;
	min-width: 84px;
	font-size: 12px;
	padding: 4px 0;
}


/* ---- 7. beta phase tag on the server cards ---------------------------- */
/* Sits in the flex row immediately before the countdown pill, so it can never
   overlap the green LIVE pill the way an absolutely positioned tag did.
   Only CBT and OBT render; "No Beta" outputs nothing and the row is unchanged.
   Shown in the "opening soon" list only - a server that already opened does
   not need telling you it was in beta. */
.server-list .beta {
	flex: 0 0 auto;
	margin-right: 7px;
	padding: 3px 5px;
	border-radius: 3px;
	border: 1px solid;
	font-size: 8.5px;
	font-weight: 800;
	letter-spacing: .6px;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}

/* closed beta - light red, you need a key to get in */
.server-list .beta--cbt {
	background: rgba(232, 106, 106, .15);
	color: #E58B8B;
	border-color: rgba(232, 106, 106, .32);
}

/* open beta - light green, anyone can join right now */
.server-list .beta--obt {
	background: rgba(106, 200, 132, .15);
	color: #7FCB99;
	border-color: rgba(106, 200, 132, .32);
}

@media (max-width: 767px) {
	.server-list .beta { font-size: 8px; padding: 2px 4px; margin-right: 5px; letter-spacing: .3px; }
}

/* server type - deliberately low contrast so it sits behind the beta tag,
   the rate and the countdown. Hidden on phones where the row has no room. */
.server-list .stype {
	flex: 0 0 auto;
	margin-right: 7px;
	padding: 3px 5px;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, .09);
	background: rgba(255, 255, 255, .05);
	color: #8A8A95;
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.server-list .stype { display: none; }
}


/* ---- 8. wider page: 1232px -> 1400px --------------------------------- */
/* Only the container cap changes. The Top 10 sidebar stays where it is;
   the extra 168px all goes to the two server lists, which were capped at
   888px and are now free to use whatever the sidebar does not. */
@media (min-width: 1233px) {
	.max-w-container { max-width: 1400px; }
	.server-list { max-width: none; }
}


/* ---- 9. invisible columns: every row lines up ------------------------- */
/* Each slot after the server name gets a fixed width and its own alignment,
   so the rate, season badge, type, beta and countdown form straight vertical
   lines down the list regardless of how long the values are. Empty beta and
   type slots keep their width so nothing shifts. */
.server-list .card__rate {
	width: 58px;
	min-width: 58px;
	margin-left: 2px;
	text-align: right;
	font-size: 12px;
	flex: 0 0 58px;
}

.server-list .card__chronicle {
	width: 46px;
	min-width: 46px;
	flex: 0 0 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.server-list .stype {
	width: 52px;
	min-width: 52px;
	flex: 0 0 52px;
	margin-right: 6px;
	padding: 3px 0;
	text-align: center;
}

.server-list .beta {
	width: 34px;
	min-width: 34px;
	flex: 0 0 34px;
	margin-right: 6px;
	padding: 3px 0;
	text-align: center;
}

/* an empty slot holds its column open but draws nothing */
.server-list .stype--empty,
.server-list .beta--empty {
	background: none;
	border-color: transparent;
}

.server-list .card__time {
	width: 92px;
	min-width: 92px;
	flex: 0 0 92px;
}

@media (max-width: 900px) {
	.server-list .stype { display: none; }
}

@media (max-width: 767px) {
	.server-list .card__rate { width: 48px; min-width: 48px; flex: 0 0 48px; }
	.server-list .card__chronicle { width: 38px; min-width: 38px; flex: 0 0 38px; }
	.server-list .beta { width: 30px; min-width: 30px; flex: 0 0 30px; margin-right: 4px; }
}


/* ---- 10. group dividers + website online dot -------------------------- */
/* A hairline above every group heading except the first one in a list. */
.server-list ul > li[style*="text-transform:uppercase"] + li,
.server-list ul > li:not(:first-child)[style*="text-transform:uppercase"] {
	position: relative;
}

.server-list ul > li:not(:first-child)[style*="text-transform:uppercase"]::before {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 0;
	height: 1px;
	background: rgba(255, 255, 255, .07);
}

.server-list ul > li:not(:first-child)[style*="text-transform:uppercase"] {
	margin-top: 6px;
	padding-top: 12px !important;
}

/* website reachability - only drawn once the uptime cron has checked */
.server-list .udot {
	width: 7px;
	height: 7px;
	min-width: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	margin-right: 8px;
	display: inline-block;
}

.server-list .udot--up {
	background: #4EC17E;
	box-shadow: 0 0 0 2px rgba(78, 193, 126, .18);
}

.server-list .udot--down {
	background: #E86A6A;
	box-shadow: 0 0 0 2px rgba(232, 106, 106, .18);
}


/* ---- 11. server type: plain dimmed text (style D) ---------------------- */
/* No chip, no border, no glow - just the word in a muted version of its
   colour. The type is metadata, not a call to action, so it should read
   quietly next to the server name. */
.server-list .stype {
	letter-spacing: .4px;
	font-weight: 800;
	background: none;
	border-color: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

.server-list .stype--pvp {
	color: #C47474;
	border-color: transparent;
	box-shadow: none;
}

.server-list .stype--nonpvp {
	color: #6CA883;
	border-color: transparent;
	box-shadow: none;
}

.server-list .stype--mixed {
	color: #BE9868;
	border-color: transparent;
	box-shadow: none;
}

/* an unset type must not glow */
.server-list .stype--empty {
	background: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}


/* ---- 12. "Today" group - green edge and a slow shimmer ---------------- */
/* A server opening today is the most perishable thing on the page; tomorrow
   the same row is ordinary. So it gets the one treatment a static list cannot
   compete with - movement - in the same green as the LIVE pill, and only for
   the hours it is true.

   The sweep sits behind the row content, so it never dims the text, and it
   idles for three quarters of its cycle: a glint, not a running animation.
   Anyone who has asked their OS to reduce motion gets the edge without it. */
.server-list .card.is-today {
	position: relative;
	overflow: hidden;
	border-left: 3px solid #4EC17E;
	border-radius: 0 6px 6px 0;
	background: linear-gradient(90deg, rgba(78, 193, 126, .14), rgba(78, 193, 126, .02) 62%, transparent);
}

.server-list .card.is-today:hover {
	background: linear-gradient(90deg, rgba(78, 193, 126, .22), rgba(78, 193, 126, .05) 62%, transparent);
}

.server-list .card.is-today .card__name {
	color: #7FD6A2;
}

/* content above the sweep */
.server-list .card.is-today .card__wrapper {
	position: relative;
	z-index: 1;
}

.server-list .card.is-today::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(105deg,
		transparent 38%,
		rgba(170, 255, 205, .18) 50%,
		transparent 62%);
	transform: translateX(-100%);
	animation: mu-today-shine 4.5s ease-in-out infinite;
}

@keyframes mu-today-shine {
	0%, 72% { transform: translateX(-100%); }
	100%    { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.server-list .card.is-today::after { animation: none; }
}

/* ---- 13. sidebar season filter tiles ---------------------------------- */
/* The logo owns the tile, the name sits on a solid strip beneath it, and the
   count lives inside that strip. The count used to be a corner chip over the
   art, which put it straight on top of Season 6's "6" - Season 6 has the
   widest logo in the set (4.42:1) so it fills the tile edge to edge. On the
   strip it cannot collide with artwork whatever shape a future logo takes. */
.vtile {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	text-decoration: none;
	transition: border-color .15s, background .15s, transform .12s;
}

.vtile:hover {
	border-color: rgba(220, 224, 232, .6);
	background: rgba(255, 255, 255, .09);
	transform: translateY(-1px);
}

.vtile__art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 3px 4px;
}

.vtile__art img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: filter .18s;
}

/* hover keeps every logo its own colour, just brighter and a touch more
   saturated - silver stays silver, gold stays gold, red stays red */
.vtile:hover .vtile__art img {
	filter: brightness(1.3) saturate(1.25) contrast(1.05)
	        drop-shadow(0 0 5px rgba(255, 255, 255, .35));
}

.vtile__name {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	padding: 4px 5px 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #c8c8d2;
	background: rgba(0, 0, 0, .45);
	border-top: 1px solid rgba(255, 255, 255, .07);
	white-space: nowrap;
}

.vtile:hover .vtile__name { color: #eef1f6; }

/* the count sits on the same baseline as the name, small and unboxed - a
   filled chip here read as a notification badge and pulled more attention
   than the season itself */
.vtile__count {
	flex: 0 0 auto;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0;
	color: #F0C46B;
}

.vtile__count::before { content: "("; }
.vtile__count::after  { content: ")"; }

.vtile__count--zero { color: #6f6f77; }

/* empty seasons show at full strength - the (0) count already says it */

/* the name may still overflow at 68px - clip it rather than wrap */
.vtile__name { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
	.vtile__art { height: 32px; }
	.vtile__name { font-size: 7px; }
}

/* ---- 14. VIP rows - raised gold plate + slow shimmer (F + G) ---------- */
/* The paid row sits on its own gold-bordered plate, slightly lifted off the
   list, with the same idle shimmer sweep as before. No VIP badge - the plate
   itself is the label. */
.server-list .card.super-vip,
.server-list .card.fixed-vip {
	position: relative;
	overflow: hidden;
	margin: 4px 0;
	border: 1px solid rgba(231, 194, 75, .4);
	border-radius: 9px;
	color: rgb(170 170 170/1);
	background: linear-gradient(150deg, rgba(231, 194, 75, .13), rgba(255, 255, 255, .03));
	box-shadow: 0 0 14px rgba(231, 194, 75, .10), 0 2px 6px rgba(0, 0, 0, .4);
}

.server-list .card.super-vip:hover,
.server-list .card.fixed-vip:hover,
.server-list .card.super-vip.open,
.server-list .card.fixed-vip.open {
	border-color: rgba(231, 194, 75, .75);
	background: linear-gradient(150deg, rgba(231, 194, 75, .18), rgba(255, 255, 255, .05));
	background-image: linear-gradient(150deg, rgba(231, 194, 75, .18), rgba(255, 255, 255, .05));
	box-shadow: 0 0 20px rgba(231, 194, 75, .18), 0 3px 9px rgba(0, 0, 0, .45);
}

.server-list .card.super-vip .card__name,
.server-list .card.fixed-vip .card__name {
	color: #F5D488;
}

.server-list .card.super-vip .card__wrapper,
.server-list .card.fixed-vip .card__wrapper {
	position: relative;
	z-index: 1;
}

.server-list .card.super-vip::after,
.server-list .card.fixed-vip::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 231, 160, .20) 50%, transparent 62%);
	transform: translateX(-100%);
	animation: mu-vip-shine 4.5s ease-in-out infinite;
}

@keyframes mu-vip-shine {
	0%, 72% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.server-list .card.super-vip::after,
	.server-list .card.fixed-vip::after { animation: none; }
}

/* ---- 15. /new-servers - recently added listing ------------------------- */
.newly-added .card { border-bottom: 1px solid rgba(255, 255, 255, .05); border-radius: 0; background: transparent; }
.newly-added .card:hover { background: rgba(255,255,255,.02); }
.newly-added .card.super-vip,
.newly-added .card.fixed-vip,
.newly-added .card.vip {
	border-bottom: 0;
	border-radius: 9px;
	margin: 8px 0;
	background: linear-gradient(150deg, rgba(231, 194, 75, .13), rgba(255, 255, 255, .03)) !important;
	border: 1px solid rgba(231, 194, 75, .4);
}
.newly-added .card.super-vip:hover,
.newly-added .card.vip:hover {
	background: linear-gradient(150deg, rgba(231, 194, 75, .18), rgba(255, 255, 255, .05)) !important;
}
.newly-added .card.super-vip .nsrv__meta,
.newly-added .card.vip .nsrv__meta {
	color: #a8a8b4;
}
.newly-added .card.super-vip .nsrv__meta b,
.newly-added .card.vip .nsrv__meta b { color: #e8e8ef; }
.newly-added .card.super-vip .nsrv__meta a,
.newly-added .card.vip .nsrv__meta a { color: #F0C46B; }
.card__time.is-opened,
.card__time.is-opened .card__time-full,
.card__time.is-opened .card__time-short {
	color: #22c55e !important;
	font-weight: 800;
}
.nsrv__intro {
	color: #86868f;
	font-size: 14px;
	line-height: 1.55;
	max-width: 720px;
	margin: 0 0 22px;
}
.nsrv__intro b { color: #F0C46B; font-weight: 600; }
.nsrv__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	padding: 2px 8px 9px;
	font-size: 12px;
	color: #86868f;
}
.nsrv__meta b { color: #c8c8d2; font-weight: 700; }
.nsrv__meta a { color: #F0C46B; text-decoration: none; }
.nsrv__meta a:hover { text-decoration: underline; }
.newly-added .card__time.is-opened { color: #5ED89A; font-weight: 700; }

/* ---- ranking list polish ---- */
.rank-list { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.rank-card { width: 100%; box-sizing: border-box; }
.rank-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; }
@media (min-width: 900px) {
	.rank-card__actions { width: 148px; }
	.rank-btn { justify-content: center; }
}

/* Full-bleed list columns (new-servers + TOP ranking) — do NOT use 2-col home grid */
.server-list.newly-added,
.server-list:has(> .rank-list),
.server-list:has(> ul) {
	max-width: none !important;
	width: 100% !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0 !important;
}
.server-list.newly-added > ul,
.server-list > .rank-list,
.server-list > ul {
	width: 100%;
	max-width: none;
	grid-column: 1 / -1;
	display: block;
}
.server-list.newly-added .card,
.server-list.newly-added li,
.rank-list .rank-card {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}
.server-list.newly-added .card__wrapper {
	width: 100%;
}


/* mmomu banner placeholders */
.banner-d{display:flex;align-items:center;justify-content:center;background:#1a1a20;border:1px dashed rgba(255,169,51,.35);border-radius:10px;color:#a9a9b2;text-align:center;font-size:12px;padding:12px;min-height:72px;}
.banner-240-96{width:240px;min-height:96px;}
.banner-178-78{width:178px;min-height:96px;}
.banner-468-60{width:468px;max-width:100%;min-height:60px;}
.ad-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin:0 0 20px}
.ad-row--bottom{margin:24px 0 8px}
.ad-slot img{display:block;border-radius:8px;max-width:100%;height:auto}
.ad-slot a{display:block;line-height:0}
.sidebar-ad{display:block;margin:0 0 10px}
.sidebar-ad img{width:100%;max-width:240px;height:auto;border-radius:8px}
.udot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.udot--up{background:#5ED89A;box-shadow:0 0 6px #5ED89A;}
.udot--down{background:#e55;box-shadow:0 0 6px #e55;}
.card__time.is-opened{background:rgba(45,190,110,.15);border-radius:20px;padding:3px 10px;}
.card__time.is-opened span{color:#5ED89A !important;font-weight:600;font-size:11px;letter-spacing:.3px;}

/* ---- nav text always visible (signin CSS must not leak) ---- */
header .button--tab,
header .text-h1,
header a.button {
	color: #d7d7de !important;
}
header .button--tab.is-active,
header .button--tab.active {
	color: #141418 !important;
	background: #ffa933 !important;
}

/* hide leftover "Mu Online servers" title in the menu bar */
header .nav-page-title,
header h1.text-h1{
	display:none!important;
}

/* footer Join Discord */
.footer-discord{
	display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
	margin-top:28px;padding:20px 22px;border-radius:14px;
	background:linear-gradient(135deg,rgba(88,101,242,.18),rgba(88,101,242,.06));
	border:1px solid rgba(88,101,242,.35);
}
.footer-discord strong{display:block;color:#fff;font-size:16px;font-weight:800;margin-bottom:4px}
.footer-discord p{margin:0;color:#b8b8c2;font-size:13px}
.footer-discord__btn{
	display:inline-flex;align-items:center;gap:10px;
	padding:12px 18px;border-radius:10px;background:#5865F2;color:#fff!important;
	font-weight:800;text-decoration:none;letter-spacing:.02em;
	box-shadow:0 8px 24px rgba(88,101,242,.35);
}
.footer-discord__btn:hover{filter:brightness(1.08);color:#fff!important}
.site-footer{background:transparent;color:#9a9aa8}
.site-footer a{color:#c9c9d4;text-decoration:none}
.site-footer a:hover{color:#f0a933}

/* ---- mobile / tablet nav ------------------------------------------- */
.site-tabs .button--tab{border-radius:0}
.site-tabs .button--tab:first-child{border-radius:10px 0 0 10px}
.site-tabs .button--tab:last-child{border-radius:0 10px 10px 0}
.mm-nav-primary{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:6px}
.mm-nav-primary a{
	display:block;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.08);color:#fff!important;font-weight:700;font-size:15px;text-decoration:none
}
.mm-nav-primary a:hover{border-color:rgba(240,169,51,.45);background:rgba(240,169,51,.08)}
.mm-nav-label{
	margin:14px 0 8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9a9aa8
}
@media (min-width:769px) and (max-width:1023px){
	.menu,.button-menu{display:flex!important}
	.menu{position:relative}
}
@media (min-width:1024px){
	.menu{display:none!important}
}
@media (max-width:767px){
	.site-header__bar{padding:8px 0!important;background:transparent!important}
	.navigation{
		position:fixed;left:0;right:0;top:64px;bottom:0;height:auto;
		padding:16px 16px 48px;overflow:auto;-webkit-overflow-scrolling:touch
	}
	.button-menu{width:40px;height:40px;min-height:40px}
}