/* =========================================================
 * MuOnlineTO - Guia do Jogador
 * Estilos totalmente escopados para não alterar o WebEngine.
 * ========================================================= */
.mu-guide {
	--guide-bg: #101820;
	--guide-panel: #151e24;
	--guide-raised: #1a252c;
	--guide-border: #2a3942;
	--guide-text: #c8d2d8;
	--guide-secondary: #b4c0c7;
	--guide-muted: #8f9ca5;
	--guide-gold: #d6b36a;
	--guide-gold-hover: #e2c27b;
	--guide-blue: #59b9e6;
	--guide-orange: #f5752c;

	width: 100%;
	color: var(--guide-secondary);
	font-family: 'PT Sans', sans-serif;
}

.mu-guide *,
.mu-guide *::before,
.mu-guide *::after {
	box-sizing: border-box;
}

.mu-guide-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

/* Navegação desktop */
.mu-guide-nav {
	position: sticky;
	top: 15px;
	background: var(--guide-panel);
	border: 1px solid var(--guide-border);
}

.mu-guide-nav-title {
	margin: 0;
	padding: 13px 14px;
	border-bottom: 2px solid var(--guide-gold);
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .02em;
}

.mu-guide-tab-list {
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	padding: 8px;
}

.mu-guide-tab-list::-webkit-scrollbar {
	width: 6px;
}

.mu-guide-tab-list::-webkit-scrollbar-thumb {
	background: var(--guide-border);
}

.mu-guide-tab {
	display: block;
	width: 100%;
	margin: 0 0 5px;
	padding: 9px 10px;
	border: 1px solid transparent;
	border-left: 2px solid transparent;
	background: transparent;
	color: var(--guide-secondary);
	font-family: 'PT Sans', sans-serif;
	font-size: 13px;
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.mu-guide-tab:last-child {
	margin-bottom: 0;
}

.mu-guide-tab:hover,
.mu-guide-tab:focus {
	color: var(--guide-text);
	background: var(--guide-raised);
	border-color: var(--guide-border);
	outline: 0;
}

.mu-guide-tab.is-active {
	color: var(--guide-gold);
	background: var(--guide-raised);
	border-color: var(--guide-border);
	border-left-color: var(--guide-gold);
}

.mu-guide-tab:focus-visible {
	outline: 2px solid var(--guide-blue);
	outline-offset: 1px;
}

/* Navegação mobile - mesmo padrão visual do hambúrguer principal */
.mu-guide-mobile-nav {
	display: none;
	width: 100%;
	margin: 0 0 14px;
	text-align: center;
}

.mu-guide-mobile-toggle {
	display: none;
	float: none;
	position: relative;
	margin: 0 auto;
	padding: 15px 10px;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.mu-guide-mobile-toggle:hover,
.mu-guide-mobile-toggle:active {
	background: transparent;
}

.mu-guide-mobile-toggle:focus {
	background: transparent;
	outline: 1px solid #1c919d;
	outline-offset: -3px;
}

.mu-guide-mobile-toggle .icon-bar {
	display: block;
	width: 24px;
	height: 2px;
	margin: 4px 0;
	background: #97b7b7;
	border-radius: 1px;
}

.mu-guide-mobile-menu {
	display: none;
	width: 100%;
	margin: 0 auto;
	padding: 6px 0 0;
	background: transparent;
	text-align: center;
}

.mu-guide-mobile-nav.is-open .mu-guide-mobile-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}

.mu-guide-mobile-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 42px;
	margin: 0;
	padding: 8px 7px;
	background: rgba(0, 0, 0, 0.68);
	border: 1px solid rgba(28, 145, 157, 0.35);
	border-radius: 2px;
	color: var(--guide-secondary);
	font-family: 'PT Sans', sans-serif;
	font-size: 12.5px;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.mu-guide-mobile-link:hover,
.mu-guide-mobile-link:focus,
.mu-guide-mobile-link:active {
	background: rgba(0, 0, 0, 0.78);
	border-color: rgba(28, 145, 157, 0.75);
	color: var(--guide-text);
	text-decoration: none;
	outline: 0;
}

.mu-guide-mobile-link.is-active {
	border-color: rgba(214, 179, 106, 0.72);
	color: var(--guide-gold);
}

.mu-guide-mobile-link:focus-visible {
	outline: 2px solid var(--guide-blue);
	outline-offset: 1px;
}

/* Mantém cards isolados/ímpares com a mesma largura dos demais, mas centralizados. */
.mu-guide-mobile-link.is-home-link,
.mu-guide-mobile-link.is-group-orphan {
	grid-column: 1 / -1;
	width: calc((100% - 5px) / 2);
	justify-self: center;
}

/* Conteúdo: fluxo normal da página.
 * Não existe overflow:hidden nem altura travada. */
.mu-guide-content {
	min-width: 0;
	background: var(--guide-panel);
	border: 1px solid var(--guide-border);
	padding: 24px 26px 30px;
}

.mu-guide-section[hidden] {
	display: none !important;
}

.mu-guide-eyebrow {
	margin: 0 0 5px;
	color: var(--guide-blue);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mu-guide-section h1 {
	margin: 0;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 24px;
	font-weight: normal;
	line-height: 1.25;
}


.mu-guide-rule {
	width: 64px;
	height: 2px;
	margin: 12px 0 20px;
	background: linear-gradient(90deg, var(--guide-gold), transparent);
}

.mu-guide-section p {
	max-width: 72ch;
	margin: 0 0 14px;
	color: var(--guide-secondary);
	font-size: 14.5px;
	line-height: 1.7;
}

.mu-guide-section strong {
	color: var(--guide-text);
	font-weight: bold;
}

/* Promo / cards */
.mu-guide-promo {
	margin-bottom: 18px;
	padding: 25px 22px;
	border: 1px solid rgba(214,179,106,.55);
	background:
		linear-gradient(135deg, rgba(89,185,230,.055), rgba(245,117,44,.045)),
		var(--guide-raised);
	text-align: center;
}

.mu-guide-promo-tag {
	color: var(--guide-orange);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.mu-guide-promo h3 {
	margin: 5px 0 2px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 25px;
	font-weight: normal;
}

.mu-guide-x2 {
	color: var(--guide-text);
	font-family: 'PT Sans', sans-serif;
	font-size: 31px;
	font-weight: bold;
}

.mu-guide-promo-when {
	margin-top: 8px;
	color: var(--guide-secondary);
	font-size: 13px;
}

.mu-guide-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.mu-guide-card {
	position: relative;
	min-width: 0;
	padding: 15px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
	transition: border-color .15s ease, transform .15s ease;
}

.mu-guide-card:hover {
	border-color: rgba(214,179,106,.65);
	transform: translateY(-1px);
}

.mu-guide-badge {
	position: absolute;
	top: -8px;
	right: 10px;
	padding: 3px 7px;
	background: var(--guide-gold);
	color: var(--guide-bg);
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
}

.mu-guide-card-title {
	margin-bottom: 7px;
	color: var(--guide-gold);
	font-size: 14px;
	font-weight: bold;
}

.mu-guide-card ul {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	color: var(--guide-secondary);
	font-size: 12.5px;
	line-height: 1.75;
}

.mu-guide-card li::before {
	content: '• ';
	color: var(--guide-blue);
}

.mu-guide-price {
	display: inline-block;
	padding: 5px 9px;
	border: 1px solid var(--guide-gold);
	color: var(--guide-gold);
	font-size: 13px;
	font-weight: bold;
}

/* CTAs de demonstração. Permanecem neutros enquanto o conteúdo é placeholder. */
.mu-guide-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.mu-guide-btn {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 13px;
	border: 1px solid var(--guide-border);
	background: transparent;
	color: var(--guide-secondary);
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

.mu-guide-btn.is-primary {
	border-color: var(--guide-gold);
	color: var(--guide-gold);
}

.mu-guide-btn.is-placeholder {
	cursor: default;
	opacity: .78;
}

/* Comandos */
.mu-guide-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mu-guide-key-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 13.5px;
}

.mu-guide-key-table tr {
	border-bottom: 1px solid var(--guide-border);
}

.mu-guide-key-table tr:last-child {
	border-bottom: 0;
}

.mu-guide-key-table td {
	padding: 10px 8px;
	vertical-align: top;
}

.mu-guide-key-table td:first-child {
	width: 100px;
	text-align: center;
}

.mu-guide-key {
	display: inline-block;
	min-width: 32px;
	padding: 4px 7px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	border-bottom-color: var(--guide-gold);
	color: var(--guide-gold);
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
}

.mu-guide-key-table td:last-child b {
	color: var(--guide-text);
}

.mu-guide-key-table td:last-child span {
	color: var(--guide-secondary);
}

/* Listas de artigos */
.mu-guide-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mu-guide-list li {
	padding: 12px 0;
	border-bottom: 1px solid var(--guide-border);
}

.mu-guide-list li:first-child {
	padding-top: 0;
}

.mu-guide-list li:last-child {
	border-bottom: 0;
}

.mu-guide-list h4 {
	margin: 0 0 4px;
	color: var(--guide-gold);
	font-size: 14.5px;
	font-weight: bold;
}

.mu-guide-list p {
	margin: 0;
	color: var(--guide-secondary);
	font-size: 14px;
	line-height: 1.65;
}


/* Chaos Machine */
.mu-guide-mix-block {
	margin: 0 0 14px;
	padding: 17px 18px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
}

.mu-guide-mix-block:last-of-type {
	margin-bottom: 20px;
}

.mu-guide-mix-title {
	margin: 0 0 12px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.3;
}

.mu-guide-mix-subtitle {
	margin: 16px 0 8px;
	color: var(--guide-text);
	font-size: 14px;
	font-weight: bold;
}

.mu-guide-requirements,
.mu-guide-results {
	margin: 0 0 12px;
	padding-left: 19px;
	color: var(--guide-secondary);
	font-size: 13.5px;
	line-height: 1.7;
}

.mu-guide-requirements li,
.mu-guide-results li {
	margin-bottom: 2px;
}

.mu-guide-rate-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0;
}

.mu-guide-rate {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	font-size: 12.5px;
	font-weight: bold;
	white-space: nowrap;
}

.mu-guide-rate.is-free {
	color: var(--guide-blue);
}

.mu-guide-rate.is-vip {
	color: var(--guide-gold);
	border-color: rgba(214,179,106,.55);
}

.mu-guide-source-box {
	margin-top: 13px;
	padding: 11px 12px;
	background: #0f171d;
	border-left: 2px solid var(--guide-blue);
}

.mu-guide-source-box p {
	margin: 0 0 6px;
	font-size: 13.5px;
	line-height: 1.6;
}

.mu-guide-source-box p:last-child {
	margin-bottom: 0;
}

.mu-guide-rarity {
	display: inline-block;
	margin-top: 3px;
	padding: 3px 7px;
	border: 1px solid var(--guide-border);
	font-size: 10px;
	font-weight: bold;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.mu-guide-rarity.is-rare {
	color: var(--guide-blue);
}

.mu-guide-rarity.is-very-rare {
	color: var(--guide-gold);
}

.mu-guide-rarity.is-extreme {
	color: var(--guide-orange);
}

.mu-guide-note {
	margin: 10px 0 0 !important;
	padding-top: 10px;
	border-top: 1px solid var(--guide-border);
	font-size: 13.5px !important;
}

.mu-guide-step {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--guide-border);
}

.mu-guide-step:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.mu-guide-step-title {
	margin: 0 0 8px;
	color: var(--guide-text);
	font-size: 14.5px;
	font-weight: bold;
}

.mu-guide-rate-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.mu-guide-rate-table th,
.mu-guide-rate-table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--guide-border);
	text-align: left;
}

.mu-guide-rate-table th {
	color: var(--guide-gold);
	font-weight: bold;
}

.mu-guide-rate-table th:nth-child(2),
.mu-guide-rate-table th:nth-child(3),
.mu-guide-rate-table td:nth-child(2),
.mu-guide-rate-table td:nth-child(3) {
	width: 72px;
	text-align: center;
}

.mu-guide-rate-table tr:last-child td {
	border-bottom: 0;
}


/* Level dos itens */
.mu-guide-jewel-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.mu-guide-jewel-card {
	min-width: 0;
	padding: 15px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
}

.mu-guide-jewel-card h3 {
	margin: 0 0 8px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 17px;
	font-weight: normal;
}

.mu-guide-jewel-card p {
	margin-bottom: 9px;
	font-size: 13.5px;
	line-height: 1.6;
}

.mu-guide-upgrade-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 14px;
}

.mu-guide-upgrade-card {
	min-width: 0;
	padding: 15px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
}

.mu-guide-upgrade-level {
	margin: 0 0 9px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 22px;
	font-weight: normal;
	line-height: 1;
}

.mu-guide-upgrade-materials {
	margin: 0 0 10px;
	color: var(--guide-secondary);
	font-size: 13px;
	line-height: 1.55;
}

.mu-guide-upgrade-materials strong {
	color: var(--guide-text);
}

.mu-guide-feature-box {
	margin: 0 0 14px;
	padding: 15px 16px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	border-left: 2px solid var(--guide-gold);
}

.mu-guide-feature-box.is-warning {
	border-left-color: var(--guide-orange);
}

.mu-guide-feature-box.is-info {
	border-left-color: var(--guide-blue);
}

.mu-guide-feature-title {
	margin: 0 0 8px;
	color: var(--guide-gold);
	font-size: 15px;
	font-weight: bold;
}

.mu-guide-feature-box.is-warning .mu-guide-feature-title {
	color: var(--guide-orange);
}

.mu-guide-feature-box.is-info .mu-guide-feature-title {
	color: var(--guide-blue);
}

.mu-guide-feature-box p {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.65;
}

.mu-guide-feature-box p:last-child {
	margin-bottom: 0;
}

.mu-guide-talisman-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 10px 0;
}

.mu-guide-talisman {
	padding: 9px 8px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
	text-align: center;
}

.mu-guide-talisman b {
	display: block;
	margin-bottom: 3px;
	color: var(--guide-text);
	font-size: 12.5px;
}

.mu-guide-talisman span {
	color: var(--guide-gold);
	font-size: 14px;
	font-weight: bold;
}

.mu-guide-upgrade-summary {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 13px;
}

.mu-guide-upgrade-summary th,
.mu-guide-upgrade-summary td {
	padding: 9px 8px;
	border-bottom: 1px solid var(--guide-border);
	text-align: center;
}

.mu-guide-upgrade-summary th {
	color: var(--guide-gold);
	font-weight: bold;
}

.mu-guide-upgrade-summary th:first-child,
.mu-guide-upgrade-summary td:first-child {
	text-align: left;
}

.mu-guide-upgrade-summary tr:last-child td {
	border-bottom: 0;
}



/* Adicionais Harmony */
.mu-guide-harmony-group {
	margin: 0 0 18px;
}

.mu-guide-harmony-group:last-child {
	margin-bottom: 0;
}

.mu-guide-harmony-heading {
	margin: 0 0 10px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 17px;
	font-weight: normal;
}

.mu-guide-harmony-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.mu-guide-harmony-card {
	min-width: 0;
	padding: 13px 14px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
}

.mu-guide-harmony-card h4 {
	margin: 0 0 7px;
	color: var(--guide-text);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.35;
}

.mu-guide-harmony-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.mu-guide-harmony-tag {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 7px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	color: var(--guide-secondary);
	font-size: 11.5px;
	line-height: 1.2;
}

.mu-guide-harmony-tag strong {
	margin-left: 4px;
	color: var(--guide-gold);
}

.mu-guide-harmony-progress {
	margin: 0;
	color: var(--guide-muted);
	font-size: 12.5px;
	line-height: 1.6;
}

.mu-guide-harmony-progress b {
	color: var(--guide-secondary);
	font-weight: bold;
}

/* Bosses e SemiBosses */
.mu-guide-boss-group {
	margin: 0 0 20px;
}

.mu-guide-boss-group:last-child {
	margin-bottom: 0;
}

.mu-guide-boss-heading {
	margin: 0 0 10px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 17px;
	font-weight: normal;
}

.mu-guide-boss-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.mu-guide-boss-card {
	min-width: 0;
	padding: 14px;
	background: var(--guide-raised);
	border: 1px solid var(--guide-border);
}

.mu-guide-boss-card.is-major {
	background: linear-gradient(180deg, rgba(196, 155, 72, 0.08), var(--guide-raised));
	border-color: rgba(196, 155, 72, 0.42);
}

.mu-guide-boss-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.mu-guide-boss-card h4 {
	margin: 0;
	color: var(--guide-text);
	font-size: 15px;
	font-weight: bold;
	line-height: 1.35;
}

.mu-guide-boss-type {
	flex: 0 0 auto;
	padding: 3px 7px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	color: var(--guide-gold);
	font-size: 10.5px;
	font-weight: bold;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.mu-guide-boss-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 9px;
}

.mu-guide-boss-tag {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 7px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	color: var(--guide-secondary);
	font-size: 11.5px;
	line-height: 1.2;
}

.mu-guide-boss-tag strong {
	margin-left: 4px;
	color: var(--guide-text);
}

.mu-guide-boss-time {
	margin: 0 0 9px !important;
	padding: 7px 8px;
	background: rgba(0, 0, 0, 0.13);
	border-left: 2px solid var(--guide-gold);
	color: var(--guide-secondary) !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

.mu-guide-boss-time strong {
	color: var(--guide-gold);
}

.mu-guide-boss-drops {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 7px;
}

.mu-guide-drop-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 7px;
	background: rgba(196, 155, 72, 0.07);
	border: 1px solid rgba(196, 155, 72, 0.22);
	color: var(--guide-secondary);
	font-size: 11.5px;
	line-height: 1.25;
}

.mu-guide-boss-note {
	margin: 8px 0 0 !important;
	color: var(--guide-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.55 !important;
}

/* Eventos Clássicos */
.mu-guide-event-table {
	width: 100%;
	min-width: 500px;
	border-collapse: collapse;
	font-size: 13px;
}

.mu-guide-event-table th,
.mu-guide-event-table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--guide-border);
	text-align: left;
}

.mu-guide-event-table th {
	color: var(--guide-gold);
	font-weight: bold;
}

.mu-guide-event-table tr:last-child td {
	border-bottom: 0;
}

/* Tablet / mobile */
@media only screen and (max-width: 767px) {
	.mu-guide-layout {
		display: block;
	}

	.mu-guide-nav {
		display: none;
	}

	.mu-guide-mobile-nav {
		display: block;
	}

	.mu-guide-mobile-toggle {
		display: block;
	}

	.mu-guide-content {
		padding: 18px 15px 22px;
	}

	.mu-guide-section h1 {
		font-size: 21px;
	}

	.mu-guide-section p {
		font-size: 14px;
		line-height: 1.65;
	}

	.mu-guide-card-grid {
		grid-template-columns: 1fr;
	}

	.mu-guide-mix-block {
		padding: 15px 13px;
	}

	.mu-guide-mix-title {
		font-size: 17px;
	}

	.mu-guide-rate-row {
		gap: 6px;
	}


	.mu-guide-jewel-grid,
	.mu-guide-upgrade-grid {
		grid-template-columns: 1fr;
	}

	.mu-guide-talisman-grid {
		grid-template-columns: 1fr;
	}

	.mu-guide-harmony-grid,
	.mu-guide-boss-grid {
		grid-template-columns: 1fr;
	}

	.mu-guide-promo {
		padding: 20px 14px;
	}

	.mu-guide-promo h3 {
		font-size: 22px;
	}

	.mu-guide-x2 {
		font-size: 27px;
	}

	.mu-guide-actions {
		flex-direction: column;
	}

	.mu-guide-btn {
		justify-content: center;
		width: 100%;
	}

	.mu-guide-key-table {
		min-width: 480px;
	}
}

@media only screen and (max-width: 420px) {
	.mu-guide-content {
		padding-left: 12px;
		padding-right: 12px;
	}

	.mu-guide-key-table {
		min-width: 440px;
	}
}

/* Breadcrumbs */
.mu-guide-breadcrumb {
    margin: 0 0 14px;
    color: var(--guide-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.mu-guide-breadcrumb a {
    color: var(--guide-secondary);
    text-decoration: none;
}

.mu-guide-breadcrumb a:hover,
.mu-guide-breadcrumb a:focus {
    color: var(--guide-gold);
    text-decoration: underline;
}

.mu-guide-breadcrumb-sep {
    margin: 0 6px;
    color: var(--guide-border);
}

/* Hub inicial */
.mu-guide-home-intro {
    margin-bottom: 18px;
}

.mu-guide-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mu-guide-home-card {
    min-width: 0;
    padding: 17px 18px;
    background: var(--guide-raised);
    border: 1px solid var(--guide-border);
}

.mu-guide-home-card.is-wide {
    grid-column: 1 / -1;
}

.mu-guide-home-card h2 {
    margin: 0 0 10px;
    color: var(--guide-gold);
    font-family: 'Cinzel', 'PT Sans', serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.3;
}

.mu-guide-home-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.mu-guide-home-link {
    display: block;
    padding: 9px 10px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
    color: var(--guide-secondary);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.mu-guide-home-link:hover,
.mu-guide-home-link:focus {
    background: var(--guide-panel);
    border-color: rgba(214,179,106,.60);
    color: var(--guide-gold);
    text-decoration: none;
    outline: 0;
}

.mu-guide-home-link strong {
    display: block;
    margin-bottom: 2px;
    color: inherit;
    font-size: 13.5px;
}

.mu-guide-home-link span {
    display: block;
    color: var(--guide-muted);
    font-size: 12px;
}

/* Nas caixas da página inicial, o último item de uma lista ímpar fica centralizado. */
.mu-guide-home-links > .mu-guide-home-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 7px) / 2);
    justify-self: center;
}

.mu-guide-status-note {
    margin-top: 16px;
    padding: 11px 12px;
    background: #0f171d;
    border-left: 2px solid var(--guide-blue);
    color: var(--guide-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

@media only screen and (max-width: 767px) {
    .mu-guide-home-grid,
    .mu-guide-home-links {
        grid-template-columns: 1fr;
    }

    .mu-guide-home-links > .mu-guide-home-link:last-child:nth-child(odd) {
        grid-column: auto;
        width: 100%;
    }

    .mu-guide-home-card.is-wide {
        grid-column: auto;
    }
}


/* =========================================================
 * Chaos Machine - Fenrir compact layout (V1.3)
 * ========================================================= */
.mu-guide-fenrir-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 14px 0;
}

.mu-guide-fenrir-card {
	min-width: 0;
	padding: 13px 12px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
}

.mu-guide-fenrir-card h4 {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	color: var(--guide-text);
	font-size: 13.5px;
	font-weight: bold;
	line-height: 1.3;
}

.mu-guide-fenrir-card h4 span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border: 1px solid rgba(214,179,106,.55);
	color: var(--guide-gold);
	font-size: 11px;
	line-height: 1;
}

.mu-guide-fenrir-card ul {
	margin: 0;
	padding-left: 18px;
	color: var(--guide-secondary);
	font-size: 12.5px;
	line-height: 1.65;
}

.mu-guide-fenrir-card .mu-guide-rate-row {
	margin: 11px 0 0;
	gap: 5px;
}

.mu-guide-fenrir-card .mu-guide-rate {
	padding: 5px 7px;
	font-size: 11.5px;
}

.mu-guide-fenrir-evolution {
	margin-top: 12px;
	padding: 14px;
	background: #0f171d;
	border: 1px solid var(--guide-border);
	border-left: 2px solid var(--guide-gold);
}

.mu-guide-fenrir-evolution-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.mu-guide-fenrir-evolution-grid p {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

.mu-guide-fenrir-evolution .mu-guide-rate-row {
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.mu-guide-fenrir-grid,
	.mu-guide-fenrir-evolution-grid {
		grid-template-columns: 1fr;
	}

	.mu-guide-fenrir-card {
		padding: 13px;
	}
}

/* =========================================================
 * Upgrade de itens - compact layout (V1.4)
 * ========================================================= */
.mu-guide-jewel-note {
	margin-top: 2px !important;
	margin-bottom: 0 !important;
	color: var(--guide-muted) !important;
	font-size: 12.5px !important;
}

.mu-guide-luck-box {
	padding-top: 12px;
	padding-bottom: 12px;
}

.mu-guide-luck-box .mu-guide-feature-title {
	margin-bottom: 5px;
}

.mu-guide-luck-box p {
	white-space: nowrap;
}

.mu-guide-upgrade-compact {
	padding: 15px 16px 12px;
}

.mu-guide-upgrade-compact .mu-guide-mix-title {
	margin-bottom: 10px;
}

.mu-guide-upgrade-table-wrap {
	overflow: visible;
}

.mu-guide-upgrade-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.mu-guide-upgrade-table th,
.mu-guide-upgrade-table td {
	padding: 9px 8px;
	border-bottom: 1px solid var(--guide-border);
	vertical-align: middle;
}

.mu-guide-upgrade-table th {
	color: var(--guide-gold);
	font-size: 12.5px;
	font-weight: bold;
	text-align: left;
}

.mu-guide-upgrade-table th:nth-child(3),
.mu-guide-upgrade-table th:nth-child(4),
.mu-guide-upgrade-table th:nth-child(5),
.mu-guide-upgrade-table td:nth-child(3),
.mu-guide-upgrade-table td:nth-child(4),
.mu-guide-upgrade-table td:nth-child(5) {
	text-align: center;
}

.mu-guide-upgrade-table tbody tr:last-child td {
	border-bottom: 0;
}

.mu-guide-upgrade-table-level {
	width: 58px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 16px;
	white-space: nowrap;
}

.mu-guide-upgrade-table-materials {
	color: var(--guide-text);
	font-weight: bold;
	white-space: nowrap;
}

.mu-guide-upgrade-table-free {
	width: 58px;
	color: var(--guide-blue);
	font-weight: bold;
	white-space: nowrap;
}

.mu-guide-upgrade-table-vip {
	width: 58px;
	color: var(--guide-gold);
	font-weight: bold;
	white-space: nowrap;
}

.mu-guide-upgrade-table-fail {
	width: 68px;
	color: var(--guide-secondary);
	font-weight: bold;
	white-space: nowrap;
}

.mu-guide-upgrade-fail-note {
	margin: 8px 0 0 !important;
	padding-top: 8px;
	border-top: 1px solid var(--guide-border);
	color: var(--guide-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
}

.mu-guide-upgrade-fail-note strong {
	color: var(--guide-orange);
}

.mu-guide-talisman-box {
	padding-top: 13px;
	padding-bottom: 13px;
}

.mu-guide-talisman-box .mu-guide-feature-title {
	margin-bottom: 5px;
}

.mu-guide-talisman-box .mu-guide-talisman-grid {
	margin: 8px 0;
}

.mu-guide-talisman-box .mu-guide-talisman {
	padding-top: 7px;
	padding-bottom: 7px;
}

.mu-guide-talisman-box p {
	font-size: 13px;
	line-height: 1.55;
}

@media only screen and (max-width: 767px) {
	.mu-guide-luck-box p {
		white-space: normal;
	}

	.mu-guide-upgrade-compact {
		padding-left: 12px;
		padding-right: 12px;
	}

	.mu-guide-upgrade-table-wrap {
		overflow: visible;
	}

	.mu-guide-upgrade-table,
	.mu-guide-upgrade-table tbody {
		display: block;
		width: 100%;
	}

	.mu-guide-upgrade-table thead {
		display: none;
	}

	.mu-guide-upgrade-table tr {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-template-areas:
			"level level materials materials materials materials"
			"free free vip vip fail fail";
		column-gap: 4px;
		row-gap: 8px;
		padding: 10px 0;
		border-bottom: 1px solid var(--guide-border);
	}

	.mu-guide-upgrade-table tbody tr:last-child {
		border-bottom: 0;
	}

	.mu-guide-upgrade-table td {
		display: block;
		width: auto !important;
		padding: 0;
		border: 0 !important;
		text-align: left !important;
	}

	.mu-guide-upgrade-table-level {
		grid-area: level;
		align-self: center;
		font-size: 16px;
	}

	.mu-guide-upgrade-table-materials {
		grid-area: materials;
		align-self: center;
		font-size: 12px;
		white-space: nowrap;
		text-align: right !important;
	}

	.mu-guide-upgrade-table-free {
		grid-area: free;
		text-align: left !important;
	}

	.mu-guide-upgrade-table-vip {
		grid-area: vip;
		text-align: center !important;
	}

	.mu-guide-upgrade-table-fail {
		grid-area: fail;
		text-align: right !important;
	}

	.mu-guide-upgrade-table-free::before,
	.mu-guide-upgrade-table-vip::before,
	.mu-guide-upgrade-table-fail::before {
		content: attr(data-label) ' ';
		font-size: 10px;
		font-weight: bold;
		letter-spacing: .02em;
		text-transform: uppercase;
	}

	.mu-guide-upgrade-table-free::before {
		color: var(--guide-blue);
	}

	.mu-guide-upgrade-table-vip::before {
		color: var(--guide-gold);
	}

	.mu-guide-upgrade-table-fail::before {
		color: var(--guide-muted);
	}

	.mu-guide-talisman-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 420px) {
	.mu-guide-upgrade-table tr {
		column-gap: 2px;
	}

	.mu-guide-upgrade-table-materials {
		font-size: 11.5px;
	}

	.mu-guide-upgrade-table-free,
	.mu-guide-upgrade-table-vip,
	.mu-guide-upgrade-table-fail {
		font-size: 12px;
	}

	.mu-guide-talisman {
		padding-left: 4px;
		padding-right: 4px;
	}

	.mu-guide-talisman b {
		font-size: 11.5px;
	}
}

/* =========================================================
 * Adicionais Harmony - tabela compacta responsiva (V1.6)
 * ========================================================= */
.mu-guide-harmony-info {
	margin: -2px 0 18px;
	padding: 10px 12px;
	background: #0f171d;
	border-left: 2px solid var(--guide-blue);
	color: var(--guide-muted);
	font-size: 12.5px;
	line-height: 1.55;
}

.mu-guide-harmony-info strong {
	color: var(--guide-blue);
}

.mu-guide-harmony-compact-group {
	margin: 0 0 20px;
}

.mu-guide-harmony-compact-group:last-of-type {
	margin-bottom: 14px;
}

.mu-guide-harmony-compact-heading {
	margin: 0 0 8px;
	color: var(--guide-gold);
	font-family: 'Cinzel', 'PT Sans', serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.3;
}

.mu-guide-harmony-table {
	width: 100%;
	border: 1px solid var(--guide-border);
	background: var(--guide-raised);
	font-size: 11.5px;
}

.mu-guide-harmony-header,
.mu-guide-harmony-row {
	display: grid;
	grid-template-columns: minmax(154px, 1.8fr) 54px 60px repeat(7, minmax(34px, .55fr)) minmax(58px, .8fr);
	align-items: stretch;
}

.mu-guide-harmony-header {
	background: #0f171d;
	color: var(--guide-gold);
	font-size: 10.5px;
	font-weight: bold;
}

.mu-guide-harmony-header > div,
.mu-guide-harmony-row > div {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 8px 5px;
	border-right: 1px solid rgba(42,57,66,.72);
}

.mu-guide-harmony-header > div:first-child,
.mu-guide-harmony-row > div:first-child {
	justify-content: flex-start;
	padding-left: 10px;
}

.mu-guide-harmony-header > div:last-child,
.mu-guide-harmony-row > div:last-child {
	border-right: 0;
}

.mu-guide-harmony-row {
	border-top: 1px solid var(--guide-border);
	color: var(--guide-secondary);
}

.mu-guide-harmony-row:hover {
	background: rgba(89,185,230,.025);
}

.mu-guide-harmony-name {
	color: var(--guide-text);
	font-weight: bold;
	line-height: 1.3;
}

.mu-guide-harmony-chance {
	color: var(--guide-gold);
	font-weight: bold;
}

.mu-guide-harmony-min {
	color: var(--guide-blue);
	font-weight: bold;
}

.mu-guide-harmony-value {
	color: var(--guide-secondary);
	font-weight: bold;
}

.mu-guide-harmony-value.is-empty {
	color: #52616a;
	font-weight: normal;
}

.mu-guide-harmony-bottom-note {
	margin-top: 4px;
	margin-bottom: 0;
	padding-top: 11px;
	padding-bottom: 11px;
}

.mu-guide-harmony-bottom-note p {
	margin: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
}

@media only screen and (max-width: 767px) {
	.mu-guide-harmony-info {
		margin-bottom: 16px;
	}

	.mu-guide-harmony-compact-group {
		margin-bottom: 18px;
	}

	.mu-guide-harmony-compact-heading {
		font-size: 15px;
	}

	.mu-guide-harmony-table {
		border: 0;
		background: transparent;
	}

	.mu-guide-harmony-header {
		display: none;
	}

	.mu-guide-harmony-row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		margin: 0 0 9px;
		padding: 10px;
		background: var(--guide-raised);
		border: 1px solid var(--guide-border);
	}

	.mu-guide-harmony-row:last-child {
		margin-bottom: 0;
	}

	.mu-guide-harmony-row > div {
		border: 0;
	}

	.mu-guide-harmony-name {
		grid-column: 1 / -1;
		justify-content: flex-start !important;
		padding: 0 0 8px !important;
		border-bottom: 1px solid var(--guide-border) !important;
		font-size: 13px;
	}

	.mu-guide-harmony-chance,
	.mu-guide-harmony-min {
		grid-column: span 2;
		justify-content: flex-start !important;
		padding: 7px 0 8px !important;
		font-size: 12px;
	}

	.mu-guide-harmony-chance::before {
		content: 'Chance: ';
		margin-right: 4px;
		color: var(--guide-muted);
		font-weight: normal;
	}

	.mu-guide-harmony-min::before {
		content: 'Item mín.: ';
		margin-right: 4px;
		color: var(--guide-muted);
		font-weight: normal;
	}

	.mu-guide-harmony-value {
		position: relative;
		flex-direction: column;
		padding: 7px 2px 4px !important;
		font-size: 12.5px;
		line-height: 1.15;
	}

	.mu-guide-harmony-value::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 3px;
		color: var(--guide-muted);
		font-size: 9.5px;
		font-weight: normal;
		line-height: 1;
	}

	.mu-guide-harmony-value.is-empty {
		display: none;
	}
}

@media only screen and (max-width: 420px) {
	.mu-guide-harmony-row {
		padding: 9px 8px;
	}

	.mu-guide-harmony-name {
		font-size: 12.5px;
	}

	.mu-guide-harmony-chance,
	.mu-guide-harmony-min {
		font-size: 11.5px;
	}

	.mu-guide-harmony-value {
		font-size: 12px;
	}
}

/* =========================================================
 * Adicionais Harmony - accordion mobile (V1.6.1)
 * Desktop permanece com a tabela aprovada da V1.6.
 * ========================================================= */
.mu-guide-harmony-mobile-toggle {
	display: none;
}

@media only screen and (max-width: 767px) {
	.mu-guide-harmony-row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		margin: 0 0 7px;
		padding: 0;
		overflow: hidden;
		background: var(--guide-raised);
		border: 1px solid var(--guide-border);
	}

	.mu-guide-harmony-mobile-toggle {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name arrow"
			"meta arrow";
		align-items: center;
		gap: 5px 10px;
		width: 100%;
		padding: 11px 12px;
		border: 0;
		background: transparent;
		color: var(--guide-text);
		font-family: 'PT Sans', sans-serif;
		text-align: left;
		cursor: pointer;
	}

	.mu-guide-harmony-mobile-toggle:hover,
	.mu-guide-harmony-mobile-toggle:focus {
		background: rgba(89,185,230,.025);
		outline: 0;
	}

	.mu-guide-harmony-mobile-toggle:focus-visible {
		outline: 2px solid var(--guide-blue);
		outline-offset: -2px;
	}

	.mu-guide-harmony-mobile-name {
		grid-area: name;
		min-width: 0;
		color: var(--guide-text);
		font-size: 13px;
		font-weight: bold;
		line-height: 1.25;
	}

	.mu-guide-harmony-mobile-meta {
		grid-area: meta;
		display: flex;
		flex-wrap: wrap;
		gap: 5px 14px;
		color: var(--guide-muted);
		font-size: 11px;
		line-height: 1.2;
	}

	.mu-guide-harmony-mobile-meta strong:first-child {
		color: var(--guide-gold);
	}

	.mu-guide-harmony-mobile-meta strong:last-child {
		color: var(--guide-blue);
	}

	.mu-guide-harmony-mobile-arrow {
		grid-area: arrow;
		position: relative;
		width: 18px;
		height: 18px;
		align-self: center;
	}

	.mu-guide-harmony-mobile-arrow::before,
	.mu-guide-harmony-mobile-arrow::after {
		content: '';
		position: absolute;
		top: 8px;
		width: 8px;
		height: 1px;
		background: var(--guide-muted);
		transition: transform .18s ease;
	}

	.mu-guide-harmony-mobile-arrow::before {
		left: 2px;
		transform: rotate(45deg);
	}

	.mu-guide-harmony-mobile-arrow::after {
		right: 2px;
		transform: rotate(-45deg);
	}

	.mu-guide-harmony-row.is-open .mu-guide-harmony-mobile-arrow::before {
		transform: rotate(-45deg);
	}

	.mu-guide-harmony-row.is-open .mu-guide-harmony-mobile-arrow::after {
		transform: rotate(45deg);
	}

	/* Os três primeiros campos já aparecem no cabeçalho do accordion. */
	.mu-guide-harmony-row > .mu-guide-harmony-name,
	.mu-guide-harmony-row > .mu-guide-harmony-chance,
	.mu-guide-harmony-row > .mu-guide-harmony-min {
		display: none;
	}

	/* Valores ficam recolhidos até o jogador abrir o adicional. */
	.mu-guide-harmony-row > .mu-guide-harmony-value {
		display: none;
	}

	.mu-guide-harmony-row.is-open > .mu-guide-harmony-value:not(.is-empty) {
		display: flex;
		position: relative;
		flex-direction: column;
		justify-content: center;
		min-height: 52px;
		padding: 9px 2px 8px !important;
		border-top: 1px solid var(--guide-border);
		color: var(--guide-secondary);
		font-size: 12.5px;
		font-weight: bold;
		line-height: 1.15;
		text-align: center;
	}

	.mu-guide-harmony-row.is-open > .mu-guide-harmony-value:not(.is-empty)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		color: var(--guide-muted);
		font-size: 9.5px;
		font-weight: normal;
		line-height: 1;
	}

	.mu-guide-harmony-row > .mu-guide-harmony-value.is-empty {
		display: none !important;
	}
}

@media only screen and (max-width: 420px) {
	.mu-guide-harmony-mobile-toggle {
		padding: 10px;
	}

	.mu-guide-harmony-mobile-name {
		font-size: 12.5px;
	}

	.mu-guide-harmony-mobile-meta {
		gap: 4px 11px;
		font-size: 10.5px;
	}

	.mu-guide-harmony-row.is-open > .mu-guide-harmony-value:not(.is-empty) {
		font-size: 12px;
	}
}

/* =========================================================
 * Boxes - lista oficial de drops (V1.7)
 * ========================================================= */
.mu-guide-box-intro {
    margin-bottom: 20px;
}

.mu-guide-section-title {
    margin: 20px 0 10px;
    color: var(--guide-gold);
    font-family: 'Cinzel', serif;
    font-size: 17px;
    font-weight: normal;
    letter-spacing: .2px;
}

.mu-guide-box-secondary-title {
    margin-top: 26px;
}

.mu-guide-box-drop {
    margin: 0 0 8px;
    border: 1px solid var(--guide-border);
    background: var(--guide-raised);
}

.mu-guide-box-summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 12px 15px;
    color: var(--guide-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mu-guide-box-summary::-webkit-details-marker {
    display: none;
}

.mu-guide-box-summary:hover,
.mu-guide-box-summary:focus {
    background: rgba(89,185,230,.025);
    outline: 0;
}

.mu-guide-box-summary:focus-visible {
    outline: 2px solid var(--guide-blue);
    outline-offset: -2px;
}

.mu-guide-box-summary-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mu-guide-box-summary-main strong {
    color: var(--guide-gold);
    font-size: 14px;
    line-height: 1.25;
}

.mu-guide-box-summary-main small {
    color: var(--guide-muted);
    font-size: 11px;
    font-weight: normal;
    line-height: 1.25;
}

.mu-guide-box-chevron {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.mu-guide-box-chevron::before,
.mu-guide-box-chevron::after {
    content: '';
    position: absolute;
    top: 9px;
    width: 9px;
    height: 1px;
    background: var(--guide-muted);
    transition: transform .18s ease;
}

.mu-guide-box-chevron::before {
    left: 2px;
    transform: rotate(45deg);
}

.mu-guide-box-chevron::after {
    right: 2px;
    transform: rotate(-45deg);
}

.mu-guide-box-drop[open] .mu-guide-box-chevron::before {
    transform: rotate(-45deg);
}

.mu-guide-box-drop[open] .mu-guide-box-chevron::after {
    transform: rotate(45deg);
}

.mu-guide-box-drop[open] .mu-guide-box-summary {
    border-bottom: 1px solid var(--guide-border);
}

.mu-guide-box-body {
    padding: 14px 15px 15px;
}

.mu-guide-box-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.mu-guide-box-group {
    min-width: 0;
}

.mu-guide-box-group-title {
    margin: 0 0 6px;
    color: var(--guide-blue);
    font-family: 'PT Sans', sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.mu-guide-box-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.mu-guide-box-items span {
    position: relative;
    color: var(--guide-secondary);
    font-size: 11.5px;
    line-height: 1.35;
}

.mu-guide-box-items span:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    color: var(--guide-muted);
}

.mu-guide-box-note {
    margin: 14px 0 0;
    padding-top: 11px;
    border-top: 1px solid var(--guide-border);
    color: var(--guide-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.mu-guide-box-note strong {
    color: var(--guide-gold);
}

@media only screen and (max-width: 767px) {
    .mu-guide-box-intro {
        margin-bottom: 16px;
    }

    .mu-guide-section-title {
        margin-top: 17px;
        font-size: 15px;
    }

    .mu-guide-box-secondary-title {
        margin-top: 22px;
    }

    .mu-guide-box-summary {
        min-height: 54px;
        padding: 10px 11px;
    }

    .mu-guide-box-summary-main strong {
        font-size: 13px;
    }

    .mu-guide-box-summary-main small {
        font-size: 10.5px;
    }

    .mu-guide-box-body {
        padding: 12px 11px 13px;
    }

    .mu-guide-box-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .mu-guide-box-group-title {
        margin-bottom: 4px;
        font-size: 10.5px;
    }

    .mu-guide-box-items {
        gap: 3px 5px;
    }

    .mu-guide-box-items span {
        font-size: 11px;
    }

    .mu-guide-box-items span:not(:last-child)::after {
        margin-left: 5px;
    }
}


/* =========================================================
 * Guia - grupos de navegação e novas páginas (V1.8)
 * ========================================================= */
.mu-guide-nav-group-title {
    display: block;
    margin: 12px 7px 5px;
    padding: 0 4px 5px;
    border-bottom: 1px solid rgba(42,57,66,.75);
    color: var(--guide-blue);
    font-size: 9.5px;
    font-weight: bold;
    letter-spacing: .10em;
    line-height: 1.25;
    text-transform: uppercase;
}

.mu-guide-mobile-group-title {
    display: none;
}

/* Drops e Materiais */
.mu-guide-drop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.mu-guide-drop-card {
    min-width: 0;
    padding: 16px;
    background: var(--guide-raised);
    border: 1px solid var(--guide-border);
}

.mu-guide-drop-card.is-extreme {
    background: linear-gradient(180deg, rgba(245,117,44,.05), var(--guide-raised));
    border-color: rgba(245,117,44,.38);
}

.mu-guide-drop-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.mu-guide-drop-type,
.mu-guide-economy-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--guide-blue);
    font-size: 9.5px;
    font-weight: bold;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.mu-guide-drop-card h2,
.mu-guide-economy-card h2,
.mu-guide-gold-hero h2 {
    margin: 0;
    color: var(--guide-gold);
    font-family: 'Cinzel', 'PT Sans', serif;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.3;
}

.mu-guide-drop-time {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 6px 8px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
    text-align: center;
}

.mu-guide-drop-time small {
    display: block;
    margin-bottom: 1px;
    color: var(--guide-muted);
    font-size: 9px;
    line-height: 1.2;
}

.mu-guide-drop-time strong {
    display: block;
    color: var(--guide-gold);
    font-size: 14px;
    line-height: 1.2;
}

.mu-guide-drop-time.is-rare strong { color: var(--guide-blue); }
.mu-guide-drop-time.is-extreme { border-color: rgba(245,117,44,.55); }
.mu-guide-drop-time.is-extreme strong { color: var(--guide-orange); }

.mu-guide-drop-items {
    max-width: none !important;
    margin-bottom: 10px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
}

.mu-guide-drop-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    padding: 9px 10px;
    background: #0f171d;
    border-left: 2px solid var(--guide-blue);
    color: var(--guide-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.mu-guide-drop-card.is-extreme .mu-guide-drop-meta { border-left-color: var(--guide-orange); }
.mu-guide-drop-meta b { color: var(--guide-text); margin-right: 5px; }

.mu-guide-drop-note {
    max-width: none !important;
    margin: 0 0 9px !important;
    color: var(--guide-muted) !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
}

.mu-guide-inline-link {
    display: inline-block;
    color: var(--guide-gold);
    font-size: 11.5px;
    font-weight: bold;
    text-decoration: none;
}

.mu-guide-inline-link:hover,
.mu-guide-inline-link:focus {
    color: var(--guide-gold-hover);
    text-decoration: underline;
}

/* Reset e Master Reset */
.mu-guide-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.mu-guide-plan-card {
    min-width: 0;
    padding: 15px;
    background: var(--guide-raised);
    border: 1px solid var(--guide-border);
}

.mu-guide-plan-card.is-free { border-top: 2px solid var(--guide-blue); }
.mu-guide-plan-card.is-vip { border-top: 2px solid var(--guide-gold); }

.mu-guide-plan-label {
    display: block;
    margin-bottom: 10px;
    color: var(--guide-text);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .12em;
}

.mu-guide-plan-card.is-free .mu-guide-plan-label { color: var(--guide-blue); }
.mu-guide-plan-card.is-vip .mu-guide-plan-label { color: var(--guide-gold); }

.mu-guide-plan-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--guide-border);
}

.mu-guide-plan-stat small {
    color: var(--guide-muted);
    font-size: 11.5px;
}

.mu-guide-plan-stat strong {
    color: var(--guide-text);
    font-size: 15px;
    white-space: nowrap;
}

.mu-guide-master-requirements {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 18px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
}

.mu-guide-master-requirements > div {
    padding: 12px 10px;
    border-right: 1px solid var(--guide-border);
    text-align: center;
}

.mu-guide-master-requirements > div:last-child { border-right: 0; }

.mu-guide-master-requirements small {
    display: block;
    margin-bottom: 3px;
    color: var(--guide-muted);
    font-size: 10.5px;
}

.mu-guide-master-requirements strong {
    display: block;
    color: var(--guide-gold);
    font-size: 15px;
}

.mu-guide-subheading {
    margin: 0 0 10px;
    color: var(--guide-text);
    font-size: 14px;
    font-weight: bold;
}

.mu-guide-master-notes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.mu-guide-master-notes .mu-guide-feature-box { margin-bottom: 0; }

/* Gold e Economia */
.mu-guide-gold-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 17px 18px;
    background: linear-gradient(135deg, rgba(214,179,106,.08), rgba(89,185,230,.025)), var(--guide-raised);
    border: 1px solid rgba(214,179,106,.45);
}

.mu-guide-gold-mark {
    flex: 0 0 auto;
    padding: 9px 11px;
    border: 1px solid var(--guide-gold);
    color: var(--guide-gold);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .12em;
}

.mu-guide-gold-hero p {
    max-width: none !important;
    margin: 5px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.mu-guide-economy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mu-guide-economy-card {
    min-width: 0;
    padding: 15px;
    background: var(--guide-raised);
    border: 1px solid var(--guide-border);
}

.mu-guide-economy-card.is-wide { grid-column: 1 / -1; }

.mu-guide-economy-card p {
    max-width: none !important;
    margin: 9px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.mu-guide-economy-card ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.mu-guide-economy-card li {
    padding: 7px 8px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
    color: var(--guide-secondary);
    font-size: 12px;
}

.mu-guide-economy-card li::before {
    content: '• ';
    color: var(--guide-blue);
}

.mu-guide-command {
    padding: 2px 5px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
    color: var(--guide-gold);
    font-family: monospace;
    font-size: .95em;
}

.mu-guide-economy-note { margin-top: 12px; }

@media only screen and (max-width: 767px) {
    .mu-guide-mobile-nav.is-open .mu-guide-mobile-menu {
        align-items: stretch;
    }

    .mu-guide-mobile-group-title {
        display: block;
        grid-column: 1 / -1;
        margin: 7px 0 0;
        padding: 5px 4px 2px;
        color: var(--guide-blue);
        font-size: 9px;
        font-weight: bold;
        letter-spacing: .10em;
        line-height: 1.2;
        text-align: left;
        text-transform: uppercase;
    }

    .mu-guide-drop-grid,
    .mu-guide-plan-grid,
    .mu-guide-economy-grid {
        grid-template-columns: 1fr;
    }

    .mu-guide-economy-card.is-wide { grid-column: auto; }

    .mu-guide-master-requirements {
        grid-template-columns: 1fr;
    }

    .mu-guide-master-requirements > div {
        border-right: 0;
        border-bottom: 1px solid var(--guide-border);
    }

    .mu-guide-master-requirements > div:last-child { border-bottom: 0; }

    .mu-guide-gold-hero {
        align-items: flex-start;
        padding: 14px;
    }

    .mu-guide-economy-card ul { grid-template-columns: 1fr; }
}

@media only screen and (max-width: 420px) {
    .mu-guide-drop-top {
        gap: 8px;
    }

    .mu-guide-drop-card {
        padding: 13px 12px;
    }

    .mu-guide-drop-time {
        min-width: 80px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .mu-guide-drop-card h2,
    .mu-guide-economy-card h2,
    .mu-guide-gold-hero h2 {
        font-size: 15px;
    }

    .mu-guide-gold-hero {
        display: block;
    }

    .mu-guide-gold-mark {
        display: inline-block;
        margin-bottom: 10px;
    }
}

/* =========================================================
 * Tutoriais em vídeo (V2.0)
 * ========================================================= */
.mu-guide-video-intro {
    margin-bottom: 20px;
}

.mu-guide-video-group {
    margin: 0 0 24px;
}

.mu-guide-video-group:last-child {
    margin-bottom: 0;
}

.mu-guide-video-group-title,
.mu-guide-video-more h2 {
    margin: 0 0 11px;
    color: var(--guide-gold);
    font-family: 'Cinzel', 'PT Sans', serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.3;
}

.mu-guide-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mu-guide-video-card {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: var(--guide-raised);
    border: 1px solid var(--guide-border);
    color: var(--guide-secondary);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.mu-guide-video-card:hover,
.mu-guide-video-card:focus {
    background: #19252d;
    border-color: rgba(214,179,106,.68);
    color: var(--guide-secondary);
    text-decoration: none;
    transform: translateY(-1px);
    outline: 0;
}

.mu-guide-video-card:focus-visible {
    outline: 2px solid var(--guide-blue);
    outline-offset: 2px;
}

.mu-guide-video-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1116;
    border-bottom: 1px solid var(--guide-border);
}

.mu-guide-video-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mu-guide-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 1px solid rgba(255,255,255,.48);
    background: rgba(9,14,18,.78);
    border-radius: 50%;
    box-shadow: 0 5px 18px rgba(0,0,0,.35);
}

.mu-guide-video-play::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--guide-gold);
}

.mu-guide-video-card:hover .mu-guide-video-play,
.mu-guide-video-card:focus .mu-guide-video-play {
    border-color: rgba(214,179,106,.75);
}

.mu-guide-video-duration {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 3px 6px;
    background: rgba(0,0,0,.82);
    border: 1px solid rgba(255,255,255,.13);
    color: #fff;
    font-size: 10.5px;
    font-weight: bold;
    line-height: 1.2;
}

.mu-guide-video-card-body {
    display: block;
    padding: 12px 13px 13px;
}

.mu-guide-video-card-body strong {
    display: block;
    margin: 0 0 5px;
    color: var(--guide-text);
    font-size: 14px;
    line-height: 1.35;
}

.mu-guide-video-card-body > span {
    display: block;
    min-height: 58px;
    margin-bottom: 8px;
    color: var(--guide-muted);
    font-size: 12.3px;
    line-height: 1.55;
}

.mu-guide-video-card-body small {
    display: block;
    color: var(--guide-gold);
    font-size: 11.5px;
    font-weight: bold;
}

.mu-guide-video-grid.is-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mu-guide-video-card.is-compact .mu-guide-video-play {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
}

.mu-guide-video-card.is-compact .mu-guide-video-play::after {
    left: 13px;
    top: 9px;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 10px;
}

.mu-guide-video-card.is-compact .mu-guide-video-card-body {
    padding: 10px 11px 11px;
}

.mu-guide-video-card.is-compact .mu-guide-video-card-body strong {
    font-size: 12.8px;
}

.mu-guide-video-card.is-compact .mu-guide-video-card-body small {
    font-size: 10.8px;
}

/* Página individual do vídeo */
.mu-guide-video-page h1 {
    max-width: 780px;
}

.mu-guide-video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 0 16px;
    background: #090e12;
    border: 1px solid var(--guide-border);
}

.mu-guide-video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mu-guide-video-copy {
    margin-bottom: 13px;
}

.mu-guide-video-copy p {
    max-width: 78ch;
    margin-bottom: 9px;
}

.mu-guide-video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 12px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
    color: var(--guide-muted);
    font-size: 12px;
}

.mu-guide-video-meta strong {
    color: var(--guide-text);
}

.mu-guide-video-meta a {
    color: var(--guide-gold);
    font-weight: bold;
    text-decoration: none;
}

.mu-guide-video-meta a:hover,
.mu-guide-video-meta a:focus {
    color: var(--guide-gold-hover);
    text-decoration: underline;
}

.mu-guide-video-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0 0 22px;
}

.mu-guide-video-related-guide,
.mu-guide-video-all {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 10px 13px;
    border: 1px solid var(--guide-border);
    background: var(--guide-raised);
    color: var(--guide-secondary);
    text-decoration: none;
}

.mu-guide-video-related-guide {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mu-guide-video-related-guide span {
    margin-bottom: 2px;
    color: var(--guide-blue);
    font-size: 9.5px;
    font-weight: bold;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.mu-guide-video-related-guide strong {
    color: var(--guide-gold);
    font-size: 13.5px;
}

.mu-guide-video-all {
    justify-content: center;
    color: var(--guide-gold);
    font-size: 12.5px;
    font-weight: bold;
    white-space: nowrap;
}

.mu-guide-video-related-guide:hover,
.mu-guide-video-related-guide:focus,
.mu-guide-video-all:hover,
.mu-guide-video-all:focus {
    background: #19252d;
    border-color: rgba(214,179,106,.62);
    color: var(--guide-gold-hover);
    text-decoration: none;
    outline: 0;
}

.mu-guide-video-more {
    padding-top: 18px;
    border-top: 1px solid var(--guide-border);
}

/* CTA compacto inserido nos guias de texto */
.mu-guide-video-callout {
    margin: 13px 0 17px;
    padding: 12px 13px;
    background: #0f171d;
    border: 1px solid var(--guide-border);
    border-left: 2px solid var(--guide-gold);
}

.mu-guide-video-callout-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--guide-gold);
    font-size: 12px;
}

.mu-guide-video-callout-heading > span {
    color: var(--guide-orange);
    font-size: 10px;
}

.mu-guide-video-callout-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.mu-guide-video-callout-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 8px 9px;
    background: var(--guide-raised);
    border: 1px solid var(--guide-border);
    color: var(--guide-secondary);
    text-decoration: none;
}

.mu-guide-video-callout-links a:hover,
.mu-guide-video-callout-links a:focus {
    border-color: rgba(214,179,106,.60);
    color: var(--guide-gold);
    text-decoration: none;
    outline: 0;
}

.mu-guide-video-callout-links a > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.mu-guide-video-callout-links small {
    flex: 0 0 auto;
    color: var(--guide-muted);
    font-size: 10.5px;
}

@media only screen and (max-width: 767px) {
    .mu-guide-video-grid,
    .mu-guide-video-grid.is-compact,
    .mu-guide-video-callout-links {
        grid-template-columns: 1fr;
    }

    .mu-guide-video-card-body > span {
        min-height: 0;
    }

    .mu-guide-video-actions {
        grid-template-columns: 1fr;
    }

    .mu-guide-video-all {
        min-height: 46px;
    }

    .mu-guide-video-player {
        margin-left: -1px;
        margin-right: -1px;
    }
}

@media only screen and (max-width: 420px) {
    .mu-guide-video-play {
        width: 38px;
        height: 38px;
        margin: -19px 0 0 -19px;
    }

    .mu-guide-video-play::after {
        left: 14px;
        top: 10px;
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 11px;
    }

    .mu-guide-video-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
 * Guia - centralização dos títulos de categoria (V2.1)
 * Mantém links e descrições alinhados como antes; centraliza
 * apenas os títulos dos grupos na home e na navegação.
 * ========================================================= */
.mu-guide-home-card h2,
.mu-guide-nav-group-title,
.mu-guide-mobile-group-title {
    text-align: center;
}