/* Tema YM: estrutura do Tibia.com (esquerda / meio / direita) com visual atual. */
:root {
	--fundo: #070f19;
	--fundo2: #0c1a29;
	--cartao: rgba(17, 33, 52, .82);
	--cartao-solido: #112134;
	--cartao2: #16293f;
	--borda: rgba(80, 140, 200, .22);
	--borda-forte: #2a4a6c;
	--gelo: #8fd3ff;
	--gelo-forte: #4fb8f5;
	--ouro: #f2c66d;
	--ouro-escuro: #b47c2c;
	--texto: #dde9f5;
	--texto-fraco: #8fa6be;
	--verde: #5be08a;
	--vermelho: #ff6b6b;
	--raio: 14px;
	--titulo: "Cinzel", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
	background:
		radial-gradient(900px 500px at 15% 420px, rgba(79, 184, 245, .08), transparent 70%),
		radial-gradient(900px 500px at 85% 900px, rgba(242, 198, 109, .05), transparent 70%),
		var(--fundo);
	color: var(--texto);
	font: 15px/1.6 "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	min-height: 100vh;
}
a { color: var(--gelo); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; }
code { background: #0a1724; border: 1px solid var(--borda-forte); border-radius: 6px; padding: 1px 6px; color: var(--gelo); font-size: 13px; }
.ym-largura { max-width: 1240px; margin: 0 auto; padding: 0 18px; }

/* ---------- botões ---------- */
.ym-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; transition: transform .12s ease, filter .12s ease, background .12s ease; }
.ym-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ym-btn-ouro { color: #2a1a04; background: linear-gradient(180deg, #ffe39f, #e3a94a); box-shadow: 0 6px 20px rgba(227, 169, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.ym-btn-ouro:hover { color: #2a1a04; filter: brightness(1.07); }
.ym-btn-vidro { color: #eaf6ff; background: rgba(143, 211, 255, .12); border: 1px solid rgba(143, 211, 255, .45); backdrop-filter: blur(6px); }
.ym-btn-vidro:hover { color: #fff; background: rgba(143, 211, 255, .22); }
.ym-btn-bloco { width: 100%; }

/* ---------- topo ---------- */
.ym-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--borda-forte); }
.ym-hero-arte {
	position: absolute; inset: 0;
	background-size: cover; background-position: right center; background-repeat: no-repeat;
	transform: scale(1.02);
}
.ym-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(5, 11, 20, .93) 0%, rgba(5, 11, 20, .6) 40%, rgba(5, 11, 20, 0) 65%), linear-gradient(0deg, rgba(7, 15, 25, .95) 0%, transparent 35%);
}
.ym-hero-conteudo { position: relative; z-index: 2; min-height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-top: 40px; padding-bottom: 30px; }
.ym-logo { display: inline-flex; flex-direction: column; color: #fff; width: max-content; }
.ym-logo:hover { text-decoration: none; color: #fff; }
.ym-logo-sigla {
	font-family: var(--titulo); font-weight: 800; font-size: 104px; line-height: .9; letter-spacing: 6px;
	background: linear-gradient(180deg, #fff6d6 0%, #f2c66d 45%, #a9701f 70%, #ffe7a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
	filter: drop-shadow(0 4px 0 #2b1a05) drop-shadow(0 0 22px rgba(79, 184, 245, .45));
}
.ym-logo-sub { margin-top: 10px; font-family: var(--titulo); font-weight: 600; font-size: 17px; letter-spacing: 2px; color: #d7ecff; text-shadow: 0 2px 10px #000; }
.ym-hero-acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* barra de status */
.ym-barra { position: relative; z-index: 2; background: rgba(5, 12, 21, .78); border-top: 1px solid var(--borda); backdrop-filter: blur(8px); }
.ym-barra-linha { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.ym-pilula { display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px; border-radius: 999px; background: rgba(22, 41, 63, .9); border: 1px solid var(--borda); font-size: 13px; color: var(--texto-fraco); }
.ym-pilula b { color: var(--texto); }
.ym-pilula i { width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; background: var(--vermelho); box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.ym-pilula.on { color: var(--verde); font-weight: 600; }
.ym-pilula.on i { background: var(--verde); box-shadow: 0 0 0 3px rgba(91, 224, 138, .2); animation: ym-pulso 2s infinite; }
.ym-pilula.off { color: var(--vermelho); font-weight: 600; }
.ym-ip { margin-left: auto; }
@keyframes ym-pulso { 0%, 100% { box-shadow: 0 0 0 3px rgba(91, 224, 138, .2); } 50% { box-shadow: 0 0 0 6px rgba(91, 224, 138, .05); } }

/* ---------- grade de 3 colunas ---------- */
.ym-grade { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; gap: 22px; padding-top: 24px; padding-bottom: 36px; align-items: start; }
.ym-esq, .ym-meio, .ym-dir { min-width: 0; }
.ym-esq-conteudo, .ym-dir { display: flex; flex-direction: column; gap: 16px; }
.ym-esq-conteudo { position: sticky; top: 16px; }
.ym-cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.ym-cartao h3 {
	display: flex; justify-content: space-between; align-items: center; margin: 0 0 12px;
	font-family: var(--titulo); font-weight: 600; font-size: 15px; letter-spacing: 1.2px; color: var(--ouro);
}

/* login */
.ym-login { padding: 16px; }
.ym-login form { display: flex; flex-direction: column; gap: 8px; }
.ym-login input { width: 100%; background: #0a1724; color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 9px; padding: 9px 11px; font: inherit; }
.ym-login input:focus { outline: none; border-color: var(--gelo-forte); box-shadow: 0 0 0 3px rgba(79, 184, 245, .2); }
.ym-login-links { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; }
.ym-ola { margin: 0 0 12px; color: var(--texto-fraco); }
.ym-link-pequeno { display: block; margin-top: 10px; text-align: center; font-size: 13px; color: var(--texto-fraco); }

/* menu com categorias (abre/fecha) */
.ym-nav { padding: 8px; }
.ym-cat summary {
	list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; cursor: pointer;
	font-family: var(--titulo); font-weight: 600; font-size: 15px; color: #fff; letter-spacing: .6px;
}
.ym-cat summary::-webkit-details-marker { display: none; }
.ym-cat summary::after { content: "▾"; margin-left: auto; color: var(--texto-fraco); transition: transform .15s; }
.ym-cat:not([open]) summary::after { transform: rotate(-90deg); }
.ym-cat summary:hover { background: rgba(143, 211, 255, .07); }
.ym-cat-icone { width: 22px; text-align: center; }
.ym-cat ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 32px; }
.ym-cat li a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--texto); font-size: 14px; }
.ym-cat li a:hover { background: rgba(143, 211, 255, .1); color: #fff; }
.ym-menu-botao { display: none; }

/* meio */
.ym-titulo-pagina { display: flex; align-items: baseline; gap: 10px; margin: 2px 4px 12px; }
.ym-titulo-pagina h1 { margin: 0; font-family: var(--titulo); font-weight: 800; font-size: 28px; letter-spacing: 1px; color: #fff; }
.ym-trilha { font-size: 13px; color: var(--texto-fraco); }
.ym-conteudo { padding: 22px; overflow-x: auto; }

/* direita */
.ym-quadro { padding: 16px; }
.ym-contador { min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(91, 224, 138, .15); color: var(--verde); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; }
.ym-lista, .ym-rank { list-style: none; margin: 0 0 10px; padding: 0; }
.ym-lista li, .ym-rank li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(80, 140, 200, .12); }
.ym-lista li:last-child, .ym-rank li:last-child { border-bottom: 0; }
.ym-lvl { margin-left: auto; font-size: 13px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ym-voc { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; background: #6b7f93; }
.ym-voc-sorc { background: #ff7a59; }
.ym-voc-druid { background: #5be08a; }
.ym-voc-pala { background: #f2c66d; }
.ym-voc-knight { background: #8fd3ff; }
.ym-medalha { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; font-size: 13px; background: var(--cartao2); color: var(--texto-fraco); border: 1px solid var(--borda-forte); }
.ym-pos-1 .ym-medalha { background: linear-gradient(180deg, #ffe39f, #d79a33); color: #3a2400; border-color: #ffe39f; box-shadow: 0 0 14px rgba(242, 198, 109, .45); }
.ym-pos-2 .ym-medalha { background: linear-gradient(180deg, #f1f5f9, #9aa7b4); color: #1d2630; border-color: #e5ebf1; }
.ym-pos-3 .ym-medalha { background: linear-gradient(180deg, #f3c39a, #a8653a); color: #2b1408; border-color: #f3c39a; }
.ym-rank-nome { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ym-rank-nome a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-rank-nome small { color: var(--texto-fraco); font-size: 12px; }
.ym-mais { display: inline-block; font-size: 13px; font-weight: 600; color: var(--ouro); }
.ym-mais:hover { color: #ffe39f; }
.ym-vazio { margin: 0 0 10px; color: var(--texto-fraco); font-size: 14px; }
.ym-atualizado { animation: ym-brilho 1.2s ease; }
@keyframes ym-brilho { 0% { box-shadow: 0 0 0 0 rgba(143, 211, 255, .35); } 100% { box-shadow: 0 16px 40px rgba(0, 0, 0, .35); } }

/* rodapé */
.ym-rodape { border-top: 1px solid var(--borda-forte); background: rgba(4, 9, 16, .92); padding: 26px 0; text-align: center; color: var(--texto-fraco); font-size: 13px; }
.ym-rodape p { margin: 4px 0; }
.ym-rodape-logo { font-family: var(--titulo); font-weight: 800; font-size: 28px; color: var(--ouro) !important; letter-spacing: 4px; }
.ym-pequeno, .ym-pequeno a { font-size: 12px; color: #5f7a95; }

/* ---------- notícias e avisos (templates do tema) ---------- */
.ym-avisos { background: var(--cartao2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; }
.ym-avisos h3 { margin: 0 0 8px; font-family: var(--titulo); font-size: 13px; letter-spacing: 1.4px; color: var(--ouro); }
.ym-avisos ul { list-style: none; margin: 0; padding: 0; }
.ym-avisos li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(80, 140, 200, .12); }
.ym-avisos li:first-child { border-top: 0; }
.ym-aviso-data { flex: 0 0 auto; color: var(--texto-fraco); font-size: 13px; font-variant-numeric: tabular-nums; }
.ym-noticia { background: var(--cartao2); border: 1px solid var(--borda); border-radius: 12px; margin-bottom: 20px; overflow: hidden; }
.ym-noticia-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: linear-gradient(90deg, rgba(242, 198, 109, .16), rgba(79, 184, 245, .08)); border-bottom: 1px solid var(--borda); }
.ym-noticia-icone { width: 32px; height: 32px; image-rendering: pixelated; }
.ym-noticia-topo h2 { margin: 0; font-family: var(--titulo); font-size: 21px; color: #fff; }
.ym-noticia-meta { margin: 2px 0 0; font-size: 13px; color: var(--gelo); }
.ym-noticia-corpo { padding: 16px 20px; }
.ym-noticia-corpo h3 { margin: 18px 0 8px; font-family: var(--titulo); font-size: 17px; color: var(--ouro); }
.ym-noticia-corpo p:first-child { margin-top: 0; }
.ym-noticia-rodape { padding: 0 20px 14px; text-align: right; font-weight: 600; }

/* página Baixar o client */
.ym-download-intro { font-size: 16px; }
.ym-download-botao { font-size: 17px; padding: 12px 26px !important; margin-right: 12px; display: inline-block; border-radius: 10px; font-weight: 700; color: #2a1a04 !important; background: linear-gradient(180deg, #ffe39f, #e3a94a); }
.ym-download-tamanho { color: var(--texto-fraco); font-size: 14px; }
.ym-download h3 { margin-top: 24px; font-family: var(--titulo); color: var(--ouro); }

/* ---------- páginas reescritas do tema (ranking, online...) ---------- */
.ym-rk-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.ym-rk-topo h2 { margin: 0; font-family: var(--titulo); font-size: 22px; color: #fff; }
.ym-rk-nota { margin: 8px 0 0; color: var(--texto-fraco); font-size: 13px; }
.ym-abas { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 10px; background: rgba(8, 18, 30, .7); border: 1px solid var(--borda); border-radius: 12px; }
.ym-aba { padding: 7px 14px; border-radius: 9px; color: var(--texto-fraco); font-weight: 600; font-size: 14px; transition: background .15s, color .15s; }
.ym-aba:hover { color: #fff; background: rgba(143, 211, 255, .1); }
.ym-aba.ativa { color: #2a1a04; background: linear-gradient(180deg, #ffe39f, #e3a94a); }
.ym-pilulas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.ym-pil { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--borda-forte); color: var(--texto-fraco); font-size: 13px; }
.ym-pil:hover { color: #fff; border-color: var(--gelo-forte); }
.ym-pil.ativa { color: var(--gelo); border-color: var(--gelo-forte); background: rgba(79, 184, 245, .12); }
.ym-tabela-box { border: 1px solid var(--borda-forte); border-radius: 12px; overflow: hidden; overflow-x: auto; }
.ym-tabela { width: 100%; border-collapse: collapse; }
.ym-tabela th { text-align: left; padding: 11px 14px; background: linear-gradient(90deg, #22405e, #172f48); color: var(--ouro); font-family: var(--titulo); font-weight: 600; font-size: 13px; letter-spacing: .6px; border: 0 !important; }
.ym-tabela th a { color: var(--ouro); }
.ym-tabela td { padding: 10px 14px; border-top: 1px solid rgba(80, 140, 200, .12) !important; border-left: 0 !important; border-right: 0 !important; }
.ym-tabela tbody tr { transition: background .15s; }
.ym-tabela tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.ym-tabela tbody tr:hover { background: rgba(143, 211, 255, .07); }
.ym-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ym-forte { font-weight: 700; color: #fff; }
.ym-col-pos { width: 56px; }
.ym-medalha-t { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--cartao2); border: 1px solid var(--borda-forte); color: var(--texto-fraco); }
.ym-top1 .ym-medalha-t { background: linear-gradient(180deg, #ffe39f, #d79a33); color: #3a2400; border-color: #ffe39f; box-shadow: 0 0 16px rgba(242, 198, 109, .5); }
.ym-top2 .ym-medalha-t { background: linear-gradient(180deg, #f1f5f9, #9aa7b4); color: #1d2630; border-color: #e5ebf1; }
.ym-top3 .ym-medalha-t { background: linear-gradient(180deg, #f3c39a, #a8653a); color: #2b1408; border-color: #f3c39a; }
.ym-tabela tbody tr.ym-top1 { background: linear-gradient(90deg, rgba(242, 198, 109, .14), rgba(242, 198, 109, 0) 70%); }
/* a nota em inglês que a página de ranking imprime antes do template (o template já mostra em português) */
#ContentHelper:has(.ym-rk) > small:first-child, #ContentHelper:has(.ym-rk) > small:first-child + br { display: none; }
/* páginas de comandos e regras */
.ym-cmds h3, .ym-regras h3 { margin: 22px 0 10px; font-family: var(--titulo); color: var(--ouro); }
.ym-cmds .ym-tabela td:first-child { width: 38%; white-space: nowrap; }
.ym-cmds .ym-tabela { border: 1px solid var(--borda-forte); border-radius: 12px; overflow: hidden; display: table; }
.ym-regras ol { padding-left: 22px; }
.ym-regras li { margin-bottom: 10px; }
.ym-jog { display: flex; align-items: center; gap: 10px; }
.ym-jog-nome { display: flex; flex-direction: column; line-height: 1.25; }
.ym-jog-nome a { font-weight: 600; }
.ym-jog-nome small { color: var(--texto-fraco); font-size: 12px; }
.ym-status-ponto { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #4a5b6c; vertical-align: middle; }
.ym-status-ponto.on { background: var(--verde); box-shadow: 0 0 8px rgba(91, 224, 138, .7); }
.ym-vazio-tabela { text-align: center; padding: 26px 14px !important; color: var(--texto-fraco); }
.ym-paginas { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.ym-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ym-stat { padding: 14px 16px; border-radius: 12px; background: var(--cartao2); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 2px; }
.ym-stat-num { font-family: var(--titulo); font-weight: 800; font-size: 22px; color: #fff; }
.ym-stat-recorde { font-size: 15px; }
.ym-stat-rotulo { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-fraco); }
.ym-verde { color: var(--verde) !important; }
.ym-vermelho { color: var(--vermelho) !important; }
.ym-vocs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ym-voc-card { padding: 10px; border-radius: 12px; text-align: center; background: var(--cartao2); border: 1px solid var(--borda); border-top: 3px solid; }
.ym-voc-card b { display: block; font-size: 22px; color: #fff; }
.ym-voc-card span { font-size: 12px; color: var(--texto-fraco); }
.ym-voc-card-sorc { border-top-color: #ff7a59; }
.ym-voc-card-druid { border-top-color: #5be08a; }
.ym-voc-card-pala { border-top-color: #f2c66d; }
.ym-voc-card-knight { border-top-color: #8fd3ff; }
@media (max-width: 780px) {
	.ym-esconde-cel { display: none; }
	.ym-vocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ym-form-grade, .ym-info { grid-template-columns: 1fr; }
	/* tabelas de dados viram cartões no celular: cada célula mostra o rótulo (data-rotulo) à esquerda */
	.ym-tabela-cartoes thead { display: none; }
	.ym-tabela-cartoes, .ym-tabela-cartoes tbody, .ym-tabela-cartoes tr, .ym-tabela-cartoes td { display: block; width: 100%; }
	.ym-tabela-box:has(.ym-tabela-cartoes) { border: 0; overflow: visible; }
	.ym-tabela-cartoes tr { margin-bottom: 10px; border: 1px solid var(--borda-forte); border-radius: 12px; background: var(--cartao2) !important; overflow: hidden; }
	.ym-tabela-cartoes td { display: flex; justify-content: space-between; gap: 12px; text-align: right !important; padding: 9px 14px !important; }
	.ym-tabela-cartoes td[data-rotulo]::before { content: attr(data-rotulo); color: var(--texto-fraco); font-size: 13px; text-align: left; font-weight: 500; }
	.ym-tabela-cartoes td:first-child { background: rgba(242, 198, 109, .07); font-weight: 700; }
}

/* ---------- conteúdo das páginas do MyAAC (classes do kathrine) ---------- */
.Content, #ContentHelper { color: var(--texto); background: transparent !important; }
#ContentHelper table { border-collapse: collapse; color: var(--texto); }
#ContentHelper td, #ContentHelper th { border-color: var(--borda-forte) !important; }
#ContentHelper hr { border: 0; border-top: 1px solid var(--borda-forte); }
#ContentHelper h1, #ContentHelper h2, #ContentHelper h3 { color: #fff; }
#ContentHelper img[src*="spacer"] { display: none; }
#ContentHelper td, #ContentHelper label, #ContentHelper span, #ContentHelper small, #ContentHelper font { font-size: max(13px, 1em); }
.TableContainer { margin-bottom: 18px; border: 1px solid var(--borda-forte); border-radius: 10px; overflow: hidden; background: var(--cartao2); }
.TableContainer .CaptionContainer, .TableContainer .CaptionContainer .CaptionInnerContainer { background: linear-gradient(90deg, #2a4a6c, #1a3450) !important; height: auto !important; }
.TableContainer .CaptionContainer .Text { color: var(--ouro) !important; font-family: var(--titulo); font-weight: 600; padding: 9px 14px; position: static !important; font-size: 14px; }
.TableContainer .CaptionEdgeLeftTop, .TableContainer .CaptionEdgeRightTop, .TableContainer .CaptionEdgeLeftBottom, .TableContainer .CaptionEdgeRightBottom,
.TableContainer .CaptionBorderTop, .TableContainer .CaptionBorderBottom, .TableContainer .CaptionVerticalLeft, .TableContainer .CaptionVerticalRight,
.TableShadowContainerRightTop, .TableShadowRightTop, .TableBottomLeftShadow, .TableBottomRightShadow, .TableBottomShadow,
.SmallBox .BoxFrameHorizontal, .SmallBox .BoxFrameVerticalLeft, .SmallBox .BoxFrameVerticalRight,
.SmallBox .BoxFrameEdgeLeftTop, .SmallBox .BoxFrameEdgeRightTop, .SmallBox .BoxFrameEdgeLeftBottom, .SmallBox .BoxFrameEdgeRightBottom { display: none !important; }
.TableContainer .Table1, .TableContainer .Table2, .TableContainer .Table3, .TableContainer .Table4, .TableContainer .Table5,
.TableContentContainer, .TableContentAndRightShadow, .TableShadowContainer, .InnerTableContainer, .TableContent { background: transparent !important; border: 0 !important; }
.TableContent td, .TableContainer td { padding: 8px 12px !important; color: var(--texto); }
.TableContainer .Odd, .Content .BoxContent .Odd { background: #142538 !important; }
.TableContainer .Even, .Content .BoxContent .Even { background: #1a2f45 !important; }
.LabelV, .LabelV120, .LabelV150, .LabelV200, .LabelH, .LabelH td { color: var(--gelo) !important; font-weight: 700; background: #12263b !important; font-size: 13px !important; }
.Content .BoxContent { background: var(--cartao2) !important; border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px !important; color: var(--texto); margin-bottom: 18px; }
.SmallBox .MessageContainer, .SmallBox .Message { background: #13314d !important; border: 1px solid var(--gelo-forte); border-radius: 10px; color: var(--texto) !important; padding: 10px 14px !important; }
.SmallBox .ErrorMessage { background: #3a1820 !important; border: 1px solid var(--vermelho); border-radius: 10px; color: #ffd0d0 !important; padding: 10px 14px !important; }
.FormFieldError { color: var(--vermelho) !important; }
#ContentHelper input:not([type]), #ContentHelper input[type=text], #ContentHelper input[type=password], #ContentHelper input[type=email], #ContentHelper input[type=number], #ContentHelper select, #ContentHelper textarea {
	background: #0a1724; color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 8px; padding: 8px 10px; font: inherit; max-width: 100%;
}
#ContentHelper input:focus, #ContentHelper select:focus, #ContentHelper textarea:focus { outline: none; border-color: var(--gelo-forte); box-shadow: 0 0 0 3px rgba(79, 184, 245, .2); }
#ContentHelper input[type=submit], #ContentHelper button, #ContentHelper input[type=button] {
	cursor: pointer; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 700; color: #2a1a04; background: linear-gradient(180deg, #ffe39f, #e3a94a);
}
#ContentHelper input[type=image] { filter: hue-rotate(170deg) saturate(.8) brightness(1.1); }

/* ---------- sistema de componentes das páginas (ver DESIGN.md) ---------- */
.ym-intro { margin: 0 0 22px; font-size: 16px; color: var(--texto-fraco); max-width: 70ch; }
.ym-secao { margin: 0 0 28px; }
.ym-secao:last-child { margin-bottom: 0; }
.ym-secao-titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); font-family: var(--titulo); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: .5px; }
.ym-secao-icone { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(180deg, rgba(242, 198, 109, .2), rgba(242, 198, 109, .06)); border: 1px solid rgba(242, 198, 109, .3); font-size: 17px; }
.ym-fraco { color: var(--texto-fraco); }
.ym-centro { text-align: center; }

/* formulários */
.ym-form { display: flex; flex-direction: column; gap: 18px; }
.ym-form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.ym-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ym-campo-largo { grid-column: 1 / -1; }
.ym-campo label, .ym-rotulo { font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--gelo); }
#ContentHelper .ym-campo input:not([type=checkbox]):not([type=radio]), #ContentHelper .ym-campo select, #ContentHelper .ym-campo textarea { width: 100%; padding: 11px 13px; border-radius: 10px; font-size: 15px; }
.ym-ajuda { color: var(--texto-fraco); font-size: 12.5px; }
.ym-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ym-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ym-opcao { position: relative; cursor: pointer; }
.ym-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.ym-opcao span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--borda-forte); background: #0d1d2e; color: var(--texto); font-weight: 600; font-size: 14px; transition: border-color .15s, background .15s, color .15s; }
.ym-opcao:hover span { border-color: var(--gelo-forte); }
.ym-opcao input:checked + span { border-color: var(--ouro); background: rgba(242, 198, 109, .14); color: #fff; box-shadow: 0 0 0 3px rgba(242, 198, 109, .12); }
.ym-opcao input:focus-visible + span { outline: 2px solid var(--gelo-forte); outline-offset: 2px; }
.ym-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.ym-check input { margin-top: 3px; accent-color: var(--ouro); width: 17px; height: 17px; }

/* informações chave/valor */
.ym-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; }
.ym-info > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid rgba(80, 140, 200, .14); }
.ym-info dt { color: var(--texto-fraco); font-size: 14px; }
.ym-info dd { margin: 0; text-align: right; font-weight: 600; color: #fff; }

/* cartões em grade */
.ym-grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ym-cartao-item { position: relative; padding: 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(26, 47, 69, .9), rgba(15, 30, 46, .9)); border: 1px solid var(--borda); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.ym-cartao-item:hover { transform: translateY(-3px); border-color: rgba(242, 198, 109, .45); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }

/* etiquetas */
.ym-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(143, 211, 255, .12); color: var(--gelo); border: 1px solid rgba(143, 211, 255, .3); white-space: nowrap; }
.ym-tag-verde { background: rgba(91, 224, 138, .12); color: var(--verde); border-color: rgba(91, 224, 138, .35); }
.ym-tag-vermelho { background: rgba(255, 107, 107, .12); color: var(--vermelho); border-color: rgba(255, 107, 107, .35); }
.ym-tag-ouro { background: rgba(242, 198, 109, .14); color: var(--ouro); border-color: rgba(242, 198, 109, .4); }

/* vazio, avisos, barra de progresso */
.ym-vazio-bloco { padding: 34px 16px; text-align: center; color: var(--texto-fraco); border: 1px dashed var(--borda-forte); border-radius: 14px; background: rgba(8, 18, 30, .4); }
.ym-vazio-icone { display: block; font-size: 34px; margin-bottom: 8px; }
.ym-vazio-bloco p { margin: 0; }
.ym-alerta { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(143, 211, 255, .35); background: rgba(79, 184, 245, .1); color: var(--texto); margin-bottom: 16px; }
.ym-alerta-ok { border-color: rgba(91, 224, 138, .4); background: rgba(91, 224, 138, .1); }
.ym-alerta-erro { border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .1); color: #ffd6d6; }
.ym-barra-prog { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ym-barra-prog span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--gelo-forte), var(--ouro)); }

/* links de ação do MyAAC dentro do conteúdo viram botões discretos */
#ContentHelper .ym-btn { text-decoration: none; }
#ContentHelper button.ym-btn-vidro, #ContentHelper a.ym-btn-vidro { color: #eaf6ff; background: rgba(143, 211, 255, .12); border: 1px solid rgba(143, 211, 255, .45); }

/* ---------- movimento ---------- */
/* arte do topo embutida: ocupa o topo inteiro, guerreiros à direita */
.ym-hero-arte .ym-arte-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ym-neve { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ym-aurora { transform-box: fill-box; transform-origin: center; animation: ym-aurora 14s ease-in-out infinite alternate; }
.ym-aurora-2 { animation-duration: 19s; animation-delay: -6s; }
@keyframes ym-aurora { 0% { transform: translateX(-4%) scaleY(.9); opacity: .65; } 50% { opacity: 1; } 100% { transform: translateX(4%) scaleY(1.15); opacity: .8; } }
.ym-lua { animation: ym-lua 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ym-lua { 50% { transform: scale(1.06); opacity: 1; } }
.ym-william, .ym-yasmim { transform-box: fill-box; transform-origin: 50% 100%; }
.ym-william { animation: ym-respira 4.2s ease-in-out infinite; }
.ym-yasmim { animation: ym-respira 4.8s ease-in-out infinite -1.6s; }
@keyframes ym-respira { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.008); } }
.ym-brilho-lanca { transform-box: fill-box; transform-origin: center; animation: ym-brilho-lanca 2.4s ease-in-out infinite; }
@keyframes ym-brilho-lanca { 0%, 100% { opacity: .65; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }
.ym-espada { animation: ym-espada 3s ease-in-out infinite; }
@keyframes ym-espada { 0%, 100% { filter: drop-shadow(0 0 2px rgba(191, 240, 255, .4)); } 50% { filter: drop-shadow(0 0 10px rgba(191, 240, 255, 1)); } }

/* logo dourado com brilho passando */
.ym-logo-sigla { background-size: 100% 220%; animation: ym-ouro 5s ease-in-out infinite; }
@keyframes ym-ouro { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } }
.ym-logo-sub { animation: ym-entra 1s ease .2s both; }
.ym-hero-acoes { animation: ym-entra 1s ease .45s both; }
.ym-logo-sigla { animation: ym-ouro 5s ease-in-out infinite, ym-entra-logo 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ym-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ym-entra-logo { from { opacity: 0; transform: translateY(-10px) scale(.94); letter-spacing: 18px; } to { opacity: 1; transform: none; } }

/* botões com reflexo passando */
.ym-btn-ouro { position: relative; overflow: hidden; }
.ym-btn-ouro::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: ym-reflexo 4.5s ease-in-out infinite; }
@keyframes ym-reflexo { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* cartões surgem ao rolar (ym.js marca .ym-visivel) e sobem um pouco no hover */
.ym-js .ym-revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.ym-js .ym-revela.ym-visivel { opacity: 1; transform: none; }
.ym-cartao { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ym-dir .ym-cartao:hover, .ym-noticia:hover { transform: translateY(-2px); border-color: rgba(143, 211, 255, .38); box-shadow: 0 20px 46px rgba(0, 0, 0, .45); }
.ym-noticia { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ym-lista li, .ym-rank li { transition: transform .15s ease; }
.ym-lista li:hover, .ym-rank li:hover { transform: translateX(3px); }
.ym-pos-1 .ym-medalha { animation: ym-medalha 2.8s ease-in-out infinite; }
@keyframes ym-medalha { 0%, 100% { box-shadow: 0 0 10px rgba(242, 198, 109, .35); } 50% { box-shadow: 0 0 20px rgba(242, 198, 109, .8); } }
.ym-titulo-pagina h1 { animation: ym-entra .7s ease both; }
.ym-numero-sobe { animation: ym-numero .6s ease; }
@keyframes ym-numero { 0% { transform: translateY(6px); opacity: .3; } 100% { transform: none; opacity: 1; } }

/* quem prefere menos movimento no sistema: tudo parado */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.ym-js .ym-revela { opacity: 1; transform: none; }
	.ym-neve { display: none; }
}

/* ---------- telas menores ---------- */
/* menu: link da página atual e categoria ativa */
.ym-cat li a.ativo { color: #2a1a04; background: linear-gradient(180deg, #ffe39f, #e3a94a); font-weight: 700; }
.ym-cat.ativa > summary { color: var(--ouro); }

/* páginas internas: topo compacto (o conteúdo aparece logo) */
.ym-interna .ym-hero-conteudo { min-height: 170px; padding-top: 26px; padding-bottom: 20px; gap: 12px; }
.ym-interna .ym-logo-sigla { font-size: 68px; }
.ym-interna .ym-logo-sub { font-size: 14px; margin-top: 6px; }
.ym-interna .ym-hero-acoes .ym-btn { padding: 8px 16px; font-size: 14px; }

/* celular: barra fixa, gaveta e véu (escondidos no desktop) */
.ym-topo-cel, .ym-veu, .ym-gaveta-topo { display: none; }

@media (max-width: 1100px) {
	.ym-grade { grid-template-columns: 220px minmax(0, 1fr); }
	.ym-dir { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 780px) {
	body { padding-top: 56px; }
	.ym-topo-cel {
		display: flex; align-items: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 40;
		padding: 0 14px; background: rgba(6, 13, 22, .9); border-bottom: 1px solid var(--borda-forte); backdrop-filter: blur(10px);
	}
	.ym-topo-cel-logo { font-family: var(--titulo); font-weight: 800; font-size: 26px; letter-spacing: 3px; background: linear-gradient(180deg, #fff6d6, #f2c66d 50%, #a9701f); -webkit-background-clip: text; background-clip: text; color: transparent; }
	.ym-topo-cel-logo:hover { text-decoration: none; }
	.ym-topo-cel-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(22, 41, 63, .9); border: 1px solid var(--borda); color: var(--texto-fraco); }
	.ym-topo-cel-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--vermelho); }
	.ym-topo-cel-status.on { color: var(--verde); }
	.ym-topo-cel-status.on i { background: var(--verde); box-shadow: 0 0 8px rgba(91, 224, 138, .8); }
	.ym-menu-botao { margin-left: auto; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--borda-forte); background: var(--cartao-solido); cursor: pointer; }
	.ym-menu-botao span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
	.ym-menu-aberto .ym-menu-botao span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ym-menu-aberto .ym-menu-botao span:nth-child(2) { opacity: 0; }
	.ym-menu-aberto .ym-menu-botao span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	/* gaveta lateral */
	.ym-esq-conteudo {
		position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 330px); z-index: 60; overflow-y: auto;
		padding: 14px; background: var(--fundo2); border-right: 1px solid var(--borda-forte); box-shadow: 20px 0 50px rgba(0, 0, 0, .5);
		transform: translateX(-105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
	}
	.ym-menu-aberto .ym-esq-conteudo { transform: none; }
	.ym-gaveta-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
	.ym-gaveta-fechar { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--cartao-solido); color: #fff; font-size: 18px; cursor: pointer; }
	.ym-veu { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(2, 6, 12, .6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s; }
	.ym-menu-aberto .ym-veu { opacity: 1; pointer-events: auto; }
	.ym-menu-aberto { overflow: hidden; }
	.ym-esq { display: contents; }
	.ym-grade { grid-template-columns: 1fr; gap: 16px; padding-top: 16px; }
	/* coluna da direita vira carrossel horizontal */
	.ym-dir { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
	.ym-dir > .ym-cartao { flex: 0 0 82%; scroll-snap-align: start; }
	.ym-hero-conteudo { min-height: 380px; justify-content: flex-end; }
	/* internas no celular: só a arte (o logo está na barra fixa) */
	.ym-interna .ym-hero-conteudo { min-height: 150px; padding: 0; }
	.ym-interna .ym-logo, .ym-interna .ym-hero-acoes { display: none; }
	.ym-interna .ym-hero-arte .ym-arte-svg { height: 200px; width: 706px; }
	.ym-interna .ym-barra-linha { flex-wrap: nowrap; overflow-x: auto; }
	.ym-interna .ym-pilula { flex: 0 0 auto; }
	/* no celular: arte com 300px de altura e o par de guerreiros (x≈752 de 1200) no meio da tela */
	.ym-hero-arte .ym-arte-svg { inset: auto; top: 0; left: 50%; height: 300px; width: 1059px; transform: translateX(-62.7%); }
	.ym-hero::before { background: linear-gradient(0deg, rgba(7, 15, 25, .98) 0%, rgba(7, 15, 25, .82) 40%, rgba(7, 15, 25, 0) 65%); }
	.ym-logo-sigla { font-size: 76px; }
	.ym-logo-sub { font-size: 14px; }
	.ym-ip { margin-left: 0; }
	.ym-conteudo { padding: 14px; }
	.ym-titulo-pagina h1 { font-size: 23px; }
}

/* regras de celular que precisam vir por último (as bases de componentes vêm antes no arquivo) */
@media (max-width: 780px) {
	.ym-form-grade, .ym-info { grid-template-columns: 1fr; }
	.ym-barra-linha { scrollbar-width: none; }
	.ym-barra-linha::-webkit-scrollbar { display: none; }
	.ym-dir { scrollbar-width: none; }
}

/* avatar redondo com o outfit do personagem (sprite 64x64, boneco no canto inferior direito) */
.ym-avatar { position: relative; display: inline-block; flex: 0 0 auto; width: 44px; height: 44px; margin-right: 10px; border-radius: 50%; overflow: hidden; vertical-align: middle;
	background: radial-gradient(circle at 50% 70%, rgba(143, 211, 255, .22), rgba(8, 18, 30, .7) 70%); border: 1px solid var(--borda-forte); box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .35); }
.ym-avatar img { position: absolute; width: 64px; height: 64px; left: -16px; top: -18px; image-rendering: pixelated; }
.ym-avatar::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; background: #4a5b6c; border: 2px solid #0d1a29; }
.ym-avatar.on::after { background: var(--verde); box-shadow: 0 0 8px rgba(91, 224, 138, .8); }
.ym-avatar-p { width: 34px; height: 34px; margin: 0 2px 0 0; }
.ym-avatar-p img { width: 54px; height: 54px; left: -15px; top: -17px; }
.ym-avatar-p::after { display: none; }
.ym-jog { display: flex; align-items: center; }
.ym-top1 .ym-avatar { border-color: rgba(242, 198, 109, .7); box-shadow: 0 0 14px rgba(242, 198, 109, .35), inset 0 -8px 14px rgba(0, 0, 0, .35); }
/* entrada animada do topo só na página inicial (nas internas fica parado) */
.ym-interna .ym-logo-sub, .ym-interna .ym-hero-acoes, .ym-interna .ym-logo-sigla { animation-name: none, none; }
.ym-interna .ym-logo-sigla { animation: ym-ouro 5s ease-in-out infinite; }