/* Extended Server Status — default theme stone/gray palette */

.ope-shell {
	--ope-text: #d7d0c4;
	--ope-muted: #8a8378;
	--ope-accent: #b3a26e;
	--ope-accent-soft: #d5c698;
	--ope-online: #8fa34a;
	--ope-offline: #a86b5c;
	--ope-ally: #6b7f99;
	--ope-ally-deep: #4a5a6e;
	--ope-horde: #9a5a52;
	--ope-horde-deep: #6e3d38;
	--ope-discord: #5865f2;
	--ope-latency: #a89b72;
	--ope-ram: #c4a574;
	--ope-cpu: #a86b5c;
	--ope-radius: 8px;
	--ope-border: rgba(115, 109, 98, 0.35);
	--ope-border-strong: rgba(179, 162, 110, 0.45);
	--ope-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21), 0 1px 1px 0 rgba(0, 0, 0, 0.25);
	--ope-card: linear-gradient(165deg, rgba(51, 49, 45, 0.92) 0%, rgba(25, 23, 20, 0.96) 100%);
	--ope-chip-bg: rgba(20, 20, 18, 0.82);
	font-family: var(--font-family-primary, Calibri, system-ui, sans-serif);
	color: var(--ope-text);
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.box.type-online_players_extended > .box-body {
	padding: 0.45rem 0.5rem 0.55rem !important;
}

.sidebox.sidebox-online_players_extended > .sidebox-body,
.sidebox[class*="online_players_extended"] > .sidebox-body {
	padding: 0.45rem 0.5rem 0.55rem !important;
}

/* Modern sidebox title (CMS name, e.g. "Server Status Tbc") */
.box.type-online_players_extended > .box-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	height: auto;
	min-height: var(--box-head-height, 48px);
	padding: 0.7rem 1rem;
	line-height: 1.2;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #d5c698;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	background: linear-gradient(180deg, rgba(17, 17, 23, 0.55) 0%, rgba(17, 17, 23, 0.15) 100%);
	border-bottom: 1px solid rgba(179, 162, 110, 0.18);
}

.box.type-online_players_extended > .box-head::before,
.box.type-online_players_extended > .box-head::after {
	content: "";
	flex: 1 1 0;
	max-width: 2.5rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(179, 162, 110, 0.55), transparent);
}

.box.type-online_players_extended > .box-head::before {
	background: linear-gradient(90deg, transparent, rgba(179, 162, 110, 0.55));
}

.box.type-online_players_extended > .box-head::after {
	background: linear-gradient(90deg, rgba(179, 162, 110, 0.55), transparent);
}

.ope-status__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 1.9rem 1rem;
	color: var(--ope-muted);
	font-size: 0.85rem;
}

.ope-spinner {
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid rgba(115, 109, 98, 0.35);
	border-top-color: var(--ope-accent);
	border-radius: 50%;
	animation: ope-spin 0.7s linear infinite;
}

@keyframes ope-spin {
	to { transform: rotate(360deg); }
}

.ope {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	animation: ope-fade 0.4s ease;
}

@keyframes ope-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.ope-realms {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.ope-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	padding: 1.15rem 1.2rem;
	border-radius: var(--ope-radius);
	background: var(--ope-card);
	border: 1px solid var(--ope-border);
	box-shadow: var(--ope-shadow);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ope-card__glow {
	position: absolute;
	inset: -40% auto auto 15%;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(179, 162, 110, 0.12), transparent 68%);
	pointer-events: none;
}

.ope-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--ope-offline);
	z-index: 1;
}

.ope-card.is-online::before {
	background: linear-gradient(180deg, #a4b85c, var(--ope-online));
}

.ope-card:hover {
	border-color: var(--ope-border-strong);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.ope-card__top,
.ope-card__bottom {
	position: relative;
	z-index: 1;
}

.ope-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.ope-card__identity {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
}

.ope-card__icon-wrap {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(115, 109, 98, 0.35);
	flex-shrink: 0;
}

.ope-card__icon {
	width: 22px;
	height: 22px;
	border-radius: 4px;
	object-fit: contain;
	image-rendering: auto;
}

.ope-card__titles {
	min-width: 0;
}

.ope-card__kicker {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ope-muted);
	margin-bottom: 0.15rem;
}

.ope-card__name {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	color: #e8e2d6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ope-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.28rem 0.58rem;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 750;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.ope-badge--on {
	color: #c5d48a;
	background: rgba(126, 141, 9, 0.16);
	border: 1px solid rgba(126, 141, 9, 0.35);
}

.ope-badge--off {
	color: #d4a89f;
	background: rgba(168, 107, 92, 0.14);
	border: 1px solid rgba(168, 107, 92, 0.32);
}

.ope-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ope-badge--on .ope-badge__dot {
	box-shadow: 0 0 0 0 rgba(143, 163, 74, 0.5);
	animation: ope-pulse 1.8s ease infinite;
}

@keyframes ope-pulse {
	70% { box-shadow: 0 0 0 7px rgba(143, 163, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(143, 163, 74, 0); }
}

.ope-card__bottom {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(115, 109, 98, 0.25);
}

.ope-card__live {
	margin-bottom: 0.75rem;
}

.ope-card__live-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.ope-card__stats {
	display: flex;
	align-items: flex-end;
	gap: 1.15rem;
	min-width: 0;
}

.ope-card__stat {
	min-width: 0;
}

.ope-card__total {
	display: block;
	font-family: var(--font-family-secondary, Arial, sans-serif);
	font-size: 2.1rem;
	line-height: 0.95;
	font-weight: 700;
	color: #ebe4d6;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
	min-width: 0;
}

.ope-card__sub {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	color: var(--ope-muted);
}

.ope-card__uptime {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0.35rem 0.45rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(115, 109, 98, 0.3);
	text-align: right;
}

.ope-card__uptime-crest {
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	line-height: 1;
	color: #1f1d18;
	flex-shrink: 0;
	background: linear-gradient(145deg, #d5c698, #b3a26e);
	box-shadow: 0 0 10px rgba(179, 162, 110, 0.25);
	order: 2;
}

.ope-card__uptime-crest i {
	font-size: 0.72rem;
}

.ope-card__uptime-text {
	order: 1;
	min-width: 0;
}

.ope-card__uptime-label {
	display: block;
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ope-muted);
	line-height: 1;
}

.ope-card__uptime-value {
	display: block;
	margin-top: 0.15rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ope-accent-soft);
	white-space: nowrap;
	text-align: right;
}

.ope-card__factions {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 0.35rem;
}

.ope-faction {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 1 auto;
	width: auto;
	max-width: calc(50% - 0.2rem);
	padding: 0.35rem 0.45rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(115, 109, 98, 0.3);
}

.ope-faction--ally {
	margin-right: auto;
}

.ope-faction--horde {
	margin-left: auto;
	flex-direction: row-reverse;
	text-align: right;
}

.ope-faction--horde .ope-faction__label,
.ope-faction--horde .ope-faction__num {
	text-align: right;
}

.ope-faction__crest {
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
}

.ope-faction--ally .ope-faction__crest {
	background: linear-gradient(145deg, var(--ope-ally), var(--ope-ally-deep));
	box-shadow: 0 0 10px rgba(74, 90, 110, 0.35);
}

.ope-faction--horde .ope-faction__crest {
	background: linear-gradient(145deg, var(--ope-horde), var(--ope-horde-deep));
	box-shadow: 0 0 10px rgba(110, 61, 56, 0.35);
}

.ope-faction__label {
	display: block;
	font-size: 0.62rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ope-muted);
	line-height: 1;
}

.ope-faction__num {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1;
}

.ope-faction--ally .ope-faction__num { color: #a8b6c8; }
.ope-faction--horde .ope-faction__num { color: #c9a19a; }

.ope-meter {
	position: relative;
	display: flex;
	width: 100%;
	height: 8px;
	margin-top: 0.75rem;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.ope-meter__ally,
.ope-meter__horde {
	display: block;
	height: 100%;
	transition: width 0.45s ease;
}

.ope-meter__ally {
	background: linear-gradient(90deg, #4a5a6e, #8a9bb0);
}

.ope-meter__horde {
	background: linear-gradient(90deg, #6e3d38, #b07a72);
}

.ope-card__hint {
	font-size: 0.78rem;
	color: var(--ope-muted);
}

.ope-card__actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(115, 109, 98, 0.25);
}

.ope-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ope-chip {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: #111117;
	color: #b3a26e;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.15s ease;
	font: inherit;
	text-align: left;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 2px rgba(0, 0, 0, 0.35);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.65);
}

.ope-chip:hover,
.ope-chip:focus,
.ope-chip:active {
	border-color: rgba(179, 162, 110, 0.4);
	background: #16161e;
	transform: translateY(-1px);
	color: #d5c698;
	text-decoration: none !important;
}

.ope-chip--realmlist {
	flex-wrap: wrap;
	color: #b3a26e;
}

.ope-chip__code {
	flex: 1 1 auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	font-weight: 600;
	color: #b3a26e;
	word-break: break-all;
	background: none;
	padding: 0;
}

.ope-chip--realmlist .ope-chip__code,
.ope-chip--realmlist:hover .ope-chip__code,
.ope-chip--realmlist:focus .ope-chip__code {
	color: #b3a26e;
}

.ope-chip__hint {
	margin-left: auto;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #8a8378;
}

.ope-chip.is-copied .ope-chip__hint {
	color: var(--ope-online);
}

/* Beat theme link colors on <a> (idle was wrong until :hover) */
a.ope-chip--discord,
a.ope-chip--discord:link,
a.ope-chip--discord:visited,
a.ope-chip--discord:hover,
a.ope-chip--discord:focus,
a.ope-chip--discord:active,
.box.type-online_players_extended a.ope-chip--discord,
.box.type-online_players_extended a.ope-chip--discord:link,
.box.type-online_players_extended a.ope-chip--discord:visited {
	justify-content: flex-start;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: #111117;
	font-weight: 600;
	font-size: 0.88rem;
	color: #b3a26e !important;
	text-decoration: none !important;
}

a.ope-chip--discord:hover,
a.ope-chip--discord:focus,
a.ope-chip--discord:active,
.box.type-online_players_extended a.ope-chip--discord:hover {
	border-color: rgba(179, 162, 110, 0.4);
	background: #16161e;
	color: #d5c698 !important;
}

.ope-chip__icon {
	flex-shrink: 0;
	border-radius: 4px;
}

.ope-chip__arrow {
	margin-left: auto;
	opacity: 0.65;
	color: inherit;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

a.ope-chip--discord:hover .ope-chip__arrow {
	transform: translateX(3px);
	opacity: 1;
}

.ope-metrics {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-top: 0.8rem;
}

.ope-metric {
	width: 100%;
	box-sizing: border-box;
	padding: 0.9rem 1rem 0.8rem;
	border-radius: var(--ope-radius);
	background: var(--ope-card);
	border: 1px solid var(--ope-border);
	box-shadow: var(--ope-shadow);
}

.ope-metric__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.55rem;
}

.ope-metric__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ope-muted);
}

.ope-metric__value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	font-weight: 650;
}

.ope-metric__value small {
	margin-left: 0.2rem;
	font-size: 0.68rem;
	font-weight: 500;
	color: var(--ope-muted);
}

.ope-metric__value--latency { color: var(--ope-latency); }
.ope-metric__value--ram { color: var(--ope-ram); }
.ope-metric__value--cpu { color: var(--ope-cpu); }

.ope-metric canvas {
	display: block;
	width: 100%;
	height: 72px;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.35);
}