:root {
  --bg: #0b0f24; --bg2: #141a3a; --card: #1a2148; --borda: #2c3670; --txt: #e8ecff; --dim: #8d97c7;
  --ouro: #e8b923; --azul: #4f7cff; --hp: #3ddc84; --cosmo: #9b7bff;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--txt); font-family: 'Nunito', system-ui, sans-serif; min-height: 100vh;
  background: radial-gradient(ellipse at top, #1f2a6b 0%, var(--bg) 60%) fixed, var(--bg);
}
body::before { /* céu estrelado */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .6;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 10%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, #cfd8ff, transparent), radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 90%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 45%, #ffe9a8, transparent);
  background-size: 300px 300px;
}
a { cursor: pointer; }
h2, h3, .logo { font-family: 'Cinzel', serif; letter-spacing: .5px; }
.dim, .dim * { color: var(--dim); }
small { color: var(--dim); }

header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 8px 16px;
  background: linear-gradient(#141a3aee, #0b0f24ee); border-bottom: 2px solid var(--ouro); backdrop-filter: blur(6px); flex-wrap: wrap; }
.logo { cursor: pointer; line-height: 1; }
.logo span { font-size: 22px; font-weight: 800; background: linear-gradient(#fff3b0, var(--ouro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo small { display: block; font-size: 11px; color: var(--ouro); letter-spacing: 3px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { padding: 6px 8px; border-radius: 8px; font-weight: 700; font-size: 13px; position: relative; white-space: nowrap; }
nav a:hover, nav a.on { background: var(--card); color: var(--ouro); }
.dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; }

.layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; max-width: 1180px; margin: 16px auto; padding: 0 16px; }
aside { display: flex; flex-direction: column; gap: 12px; }
main { min-width: 0; }
footer { text-align: center; color: var(--dim); font-size: 12px; padding: 24px 16px; }

.card { background: linear-gradient(160deg, var(--card), var(--bg2)); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.card h3 { margin: 0 0 10px; font-size: 14px; color: var(--ouro); display: flex; justify-content: space-between; align-items: center; }
.mini { font-family: 'Nunito'; font-size: 12px; color: var(--azul); }
.perfil .nome { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.linha { display: flex; justify-content: space-between; font-size: 14px; margin: 6px 0 3px; }
.bar { height: 7px; background: #0006; border-radius: 4px; overflow: hidden; margin: 2px 0; }
.bar div { height: 100%; transition: width .35s; }
.bar.hp div { background: linear-gradient(90deg, #22b866, var(--hp)); }
.bar.xp div { background: linear-gradient(90deg, #4f7cff, #7fd3ff); }
.bar.st div { background: linear-gradient(90deg, #ffb800, #ffe066); }
.bar.cosmo div { background: linear-gradient(90deg, #6b4cff, #d18bff); }
.pmini { display: flex; gap: 8px; align-items: center; cursor: pointer; padding: 4px; border-radius: 8px; }
.pmini:hover { background: #ffffff0d; }
.pmini > div { flex: 1; font-size: 14px; }

.btn { border: 0; border-radius: 8px; padding: 9px 16px; font: 800 14px 'Nunito'; cursor: pointer; color: #fff;
  background: linear-gradient(#5b84ff, #3355d6); box-shadow: 0 3px 0 #1f3599; transition: transform .1s; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1f3599; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: linear-gradient(#ffd55c, #c9950e); color: #2a1d00; box-shadow: 0 3px 0 #7d5b00; }
.btn.alt { background: #2c3670; box-shadow: 0 3px 0 #161c40; }
.btn.alt.on { background: #1f9d5a; }
.btn.big { font-size: 18px; padding: 14px 32px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
input { background: #0b0f24; border: 1px solid var(--borda); color: var(--txt); border-radius: 8px; padding: 10px 12px; font: 16px 'Nunito'; }

.tag { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 20px; border: 1px solid; margin: 2px 2px 2px 0; }
.titulo { margin: 0 0 14px; color: var(--ouro); }
.voltar { display: inline-block; margin-bottom: 8px; color: var(--azul); font-weight: 700; }

.banner { --c: var(--ouro); border-radius: 14px; padding: 22px; margin-bottom: 14px; border: 1px solid var(--c);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), var(--bg2); }
.banner h2 { margin: 0 0 6px; }
.banner p { margin: 0 0 6px; }
.banner.small { padding: 14px; }
.banner.invoc { --c: #9b7bff; text-align: center; }
.banner.invoc .row { justify-content: center; }

.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--borda); border-radius: 12px; padding: 16px 10px; text-align: center; cursor: pointer; transition: .15s; }
.tile:hover { border-color: var(--ouro); transform: translateY(-2px); }
.tile span { font-size: 30px; display: block; }
.tile b { display: block; margin: 4px 0; }
.noticia { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #ffffff10; }
.noticia:hover { background: #ffffff0d; }

.saga { --c: #fff; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px; border-radius: 14px; margin-bottom: 12px; cursor: pointer;
  border: 1px solid var(--c); background: linear-gradient(110deg, color-mix(in srgb, var(--c) 25%, transparent), var(--bg2) 70%); }
.saga h3 { margin: 0 0 6px; color: var(--c); }
.saga p { margin: 0; font-size: 14px; }
.pct { font-size: 28px; font-weight: 800; text-align: center; }
.pct small { display: block; font-size: 11px; }
.lock { opacity: .5; filter: grayscale(.7); }

.mapa { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ep { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--card); border: 1px solid var(--borda); border-radius: 12px; cursor: pointer; }
.ep:hover { border-color: var(--c); }
.ep.ok { border-color: #1f9d5a; }
.ep small { display: block; }
.ep-n { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 22px 'Cinzel'; background: color-mix(in srgb, var(--c) 30%, #000); border: 2px solid var(--c); }
.estagio { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.estagio h3 { margin: 0 0 4px; }
.estagio.boss { border-color: #ff4d6d; background: linear-gradient(120deg, #4a1022, var(--bg2)); }
.dica { color: var(--dim); font-size: 14px; }

.grid-cav { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cav { --c: #fff; background: #0b0f24aa; border: 2px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 12px; padding: 8px; text-align: center; cursor: pointer; transition: .15s; }
.cav:hover { transform: translateY(-2px); border-color: var(--c); }
.cav b, .cav small { display: block; }
.cav.naparty { box-shadow: 0 0 0 2px var(--azul); }
.cav.ko { filter: grayscale(1); opacity: .6; }
.slot { border: 2px dashed var(--borda); border-radius: 12px; display: grid; place-items: center; min-height: 150px; color: var(--dim); }
.estrelas { color: var(--ouro); letter-spacing: 1px; }
.estrelas.sm { font-size: 11px; }
.detalhe { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.detalhe > div { flex: 1; min-width: 240px; }
.detalhe h2 { margin: 0 0 6px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 10px; font-size: 14px; }
.stats div { background: #0b0f24aa; padding: 6px 10px; border-radius: 8px; }
.skill { padding: 8px 0; border-bottom: 1px solid #ffffff10; }
.skill small { display: block; }
.forja { border-color: var(--ouro); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; text-align: center; }
.gal small { display: block; font-size: 11px; }
.gal.nao svg { filter: brightness(0) opacity(.5); }

.loja .item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #ffffff10; }
.loja .item > div { flex: 1; }
.loja small { display: block; }
.ic { font-size: 26px; }
.login7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.dia { background: #0b0f24aa; border: 1px solid var(--borda); border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 13px; }
.dia small { display: block; }
.dia.pego { opacity: .4; }
.dia.hoje { border-color: var(--ouro); box-shadow: 0 0 12px #e8b92355; }
table.rank { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank th, .rank td { padding: 6px; text-align: left; border-bottom: 1px solid #ffffff10; }
.rank tr:not(:first-child) { cursor: pointer; }
.rank tr:not(:first-child):hover { background: #ffffff0d; }

/* Início */
.inicio { max-width: 720px; margin: 40px auto; padding: 0 16px; text-align: center; }
.inicio h1 { font: 800 44px 'Cinzel'; margin: 0; background: linear-gradient(#fff3b0, var(--ouro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inicio h1 span { display: block; font-size: 20px; letter-spacing: 6px; }
.inicio input#nome { width: 100%; max-width: 360px; margin: 16px 0; text-align: center; }
.escolha { cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.escolha input { display: none; }
.escolha:has(input:checked) { border-color: var(--ouro); box-shadow: 0 0 18px #e8b92366; }

/* Batalha */
.bat-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.bat-top .row { margin: 0 0 14px; }
.arena { --c: #4f7cff; border-radius: 16px; padding: 16px; border: 1px solid var(--c);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%), linear-gradient(#0e1330, #070a1a); }
.lado { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.vs { text-align: center; font: 800 13px 'Cinzel'; color: var(--dim); margin: 10px 0; letter-spacing: 2px; }
.unid { position: relative; width: 140px; background: #0b0f24cc; border: 2px solid var(--borda); border-radius: 12px; padding: 8px; text-align: center; transition: .15s; }
.unid b { display: block; font-size: 13px; line-height: 1.2; min-height: 2.4em; }
.unid small { display: block; font-size: 11px; }
.unid .num { margin-top: -2px; }
.unid.boss { width: 170px; border-color: #ff4d6d; }
.unid.ativo { border-color: var(--ouro); box-shadow: 0 0 16px #e8b92399; transform: translateY(-3px); }
.unid.alvo { cursor: crosshair; }
.unid.alvo:hover { border-color: #ff4d6d; box-shadow: 0 0 16px #ff4d6d99; }
.unid.morto { filter: grayscale(1); opacity: .35; }
.unid.hit { animation: hit .35s; }
.unid.atk { animation: atk .35s; }
@keyframes hit { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes atk { 50% { transform: scale(1.08); } }
.fx { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); font: 800 20px 'Nunito'; color: #fff; text-shadow: 0 2px 4px #000; animation: sobe .9s forwards; pointer-events: none; white-space: nowrap; z-index: 2; }
.fx.forte { color: #ffb347; font-size: 24px; }
.fx.fraco { color: #aab; }
.fx.cura { color: var(--hp); }
@keyframes sobe { to { transform: translate(-50%, -30px); opacity: 0; } }
.vez { text-align: center; margin: 12px 0 8px; }
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sk { background: var(--card); border: 2px solid var(--borda); color: var(--txt); border-radius: 10px; padding: 10px; cursor: pointer; font-family: 'Nunito'; }
.sk b { display: block; }
.sk.sel { border-color: var(--ouro); }
.sk.ult:not(:disabled) { background: linear-gradient(#4a2d8a, #2a1a55); border-color: #b48bff; }
.sk:disabled { opacity: .4; cursor: not-allowed; }
.log { font-size: 13px; max-height: 190px; overflow: auto; }
.log div { padding: 3px 0; border-bottom: 1px solid #ffffff08; }
.log .e { color: #ff9aae; }

/* Modal / toast */
.modal-bg { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: linear-gradient(160deg, var(--card), var(--bg2)); border: 2px solid var(--ouro); border-radius: 16px; padding: 22px; max-width: 640px; width: 100%; text-align: center; max-height: 90vh; overflow: auto; }
.modal h2 { margin-top: 0; }
.modal .row { justify-content: center; }
.vit { color: var(--ouro); font-size: 34px; }
.der { color: #ff4d6d; font-size: 34px; }
.premios { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.premios span { background: #0b0f24; padding: 6px 12px; border-radius: 20px; font-weight: 800; }
.invoc-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 14px; }
.invoc-res em { display: block; font-style: normal; font-weight: 800; color: var(--ouro); font-size: 12px; }
.revela { animation: revela .5s both; }
@keyframes revela { from { opacity: 0; transform: scale(.6) rotateY(90deg); } }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1a2148; border: 1px solid var(--ouro); padding: 12px 20px; border-radius: 10px; z-index: 60; animation: toast 2.6s forwards; max-width: calc(100% - 32px); }
@keyframes toast { 0% { opacity: 0; bottom: 0; } 10%, 85% { opacity: 1; bottom: 20px; } 100% { opacity: 0; } }

/* Durabilidade */
.bar.dur div { background: linear-gradient(90deg, #8a9bb8, #d6e0f5); }
.bar.dur.med div { background: linear-gradient(90deg, #d68a00, #ffc04d); }
.bar.dur.low div { background: linear-gradient(90deg, #b3002d, #ff4d6d); }
select { background: #0b0f24; border: 1px solid var(--borda); color: var(--txt); border-radius: 8px; padding: 8px; font: 14px 'Nunito'; max-width: 100%; }

/* Tooltip */
#tip { position: fixed; z-index: 100; display: none; pointer-events: none; max-width: 300px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: #0b0f24f2; border: 1px solid var(--ouro); box-shadow: 0 8px 24px #000a; }
#tip .tt-h { font: 800 15px 'Nunito'; color: var(--ouro); margin-bottom: 2px; }
#tip .tt-s { color: var(--dim); font-size: 12px; }
#tip .tt-atr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin: 6px 0; }
#tip .tt-ef { color: #b48bff; font-weight: 800; margin: 4px 0; }
#tip .tt-desc { font-style: italic; color: #c8cff0; margin: 4px 0; }
#tip .linha { margin: 2px 0; gap: 12px; }
.pos { color: #3ddc84; } .neg { color: #ff6b81; }
[data-tip] { cursor: help; }
.btn[data-tip], .cav[data-tip], .pmini[data-tip], tr[data-tip], .unid.alvo, .sk[data-tip], .marco[data-tip] { cursor: pointer; }
.ajuda { color: var(--azul); font-weight: 800; }

/* Abas */
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.abas a { padding: 8px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--borda); font-weight: 800; font-size: 14px; }
.abas a.on { border-color: var(--ouro); color: var(--ouro); }

/* Inventário */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
.inv-slot { background: #0b0f24aa; border: 1px solid var(--borda); border-radius: 12px; padding: 10px 6px; text-align: center; position: relative; }
.inv-slot:hover { border-color: var(--ouro); }
.inv-slot .ic { font-size: 34px; display: block; }
.inv-slot b { position: absolute; top: 6px; right: 8px; font-size: 13px; background: #000a; padding: 0 6px; border-radius: 10px; }
.inv-slot small { display: block; font-size: 11px; line-height: 1.2; }
.inv-slot.vazio { opacity: .4; }
.inv-armas { display: flex; flex-direction: column; gap: 8px; }
.inv-arma { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #0b0f24aa; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); flex-wrap: wrap; }
.inv-arma > div { flex: 1; min-width: 160px; }
.inv-arma small { display: block; }
.equip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slot-arma { flex: 1; display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: #0b0f24aa; border: 1px dashed var(--borda); min-width: 220px; }
.slot-arma small { display: block; }
.slot-arma.vazio { color: var(--dim); justify-content: center; }
.cav { position: relative; }
.cav-arma { position: absolute; top: 4px; right: 6px; font-size: 18px; }

/* Ferreiro */
.reparo { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #ffffff10; }
.reparo > div { flex: 1; }
.reparo small { display: block; }
.loja-armas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.arma-card { --c: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, transparent), #0b0f24aa); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.arma-card:hover { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.arma-card b { font-size: 13px; line-height: 1.2; min-height: 2.4em; }
.arma-card .btn { margin-top: auto; }
.ic.big { font-size: 40px; }
.tenho { color: #3ddc84; font-weight: 800; }
.balanca { border-color: #ffb020; background: linear-gradient(160deg, #3a2a08, var(--bg2)); }
.forjar { --c: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--c); background: #0b0f24aa; text-align: center; }
.forjar .ic { font-size: 36px; }
.forjar .bar { width: 100%; }

/* Recompensas online */
.online small { display: block; margin-top: 4px; }
.marcos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 8px; }
.marco { border: 1px solid var(--borda); background: #0b0f24; color: var(--dim); border-radius: 8px; padding: 6px 0; font: 800 12px 'Nunito'; }
.marco.pronto { color: #2a1d00; background: linear-gradient(#ffd55c, #c9950e); border-color: var(--ouro); animation: pulsa 1.2s infinite; }
.marco.pego { color: #3ddc84; border-color: #1f9d5a; }
@keyframes pulsa { 50% { box-shadow: 0 0 12px #e8b923; } }
.online.grande .marco { padding: 12px 0; font-size: 14px; }
.online-lista { margin-top: 10px; font-size: 14px; }

/* Caixa Estelar / resultados */
.banner.caixa { --c: #ffb020; text-align: center; }
.banner.caixa .row { justify-content: center; }
.caixa-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.premio-card { background: #0b0f24; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 8px; font-weight: 800; }
.desgaste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--dim); }
.login input { display: block; width: 100%; margin-bottom: 10px; }
.login .row { justify-content: center; }

/* PB e sinergias */
.pb { color: #ffcf5c; font-weight: 800; }
.cav small.pb { font-size: 11px; }
#tip .tt-pb { color: #ffcf5c; font-weight: 800; margin: 2px 0; }
.pb-total { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 12px; margin-bottom: 10px; border-radius: 12px;
  background: linear-gradient(90deg, #3a2a08, #1a2148 60%); border: 1px solid #ffcf5c; }
.pb-total span { font: 800 13px 'Cinzel'; color: var(--dim); letter-spacing: 1px; }
.pb-total b { font: 800 32px 'Cinzel'; color: #ffcf5c; text-shadow: 0 0 12px #ffcf5c66; }
.bonus-eq { text-align: center; margin-bottom: 10px; color: #b48bff; }
.sins { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.sin { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #0b0f24aa; border: 1px solid var(--borda); position: relative; }
.sin.ativa { border-color: #b48bff; box-shadow: 0 0 12px #b48bff44; background: linear-gradient(90deg, #2a1a55, #0b0f24aa); }
.sin small { display: block; color: #b48bff; }
.sin em { position: absolute; top: 4px; right: 8px; font: 800 10px 'Nunito'; color: #b48bff; font-style: normal; }
.sin-av { display: flex; flex: none; }
.sin-av span { margin-right: -8px; border-radius: 50%; }
.sin-av span.on { filter: drop-shadow(0 0 4px #b48bff); }
.sin-av span.falta svg { filter: grayscale(1) brightness(.4); }
.sin-tag { color: #b48bff; border-color: #b48bff; margin-top: 8px; }
.premio-saga { font-size: 13px; margin-top: 8px !important; color: #ffcf5c; }
.premio-saga.pego { color: #3ddc84; }

/* Coliseu */
.banner.coliseu small { display: block; margin-top: 4px; }
.rank-atual { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.rank-ic { font-size: 46px; }
.ranks { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.ranks i { color: var(--dim); font-style: normal; }
.rk { --c: #fff; display: flex; flex-direction: column; align-items: center; padding: 8px 10px; border-radius: 10px; background: #0b0f24aa; border: 1px solid var(--borda); opacity: .5; min-width: 74px; }
.rk span { font-size: 22px; }
.rk b { color: var(--c); font-size: 13px; }
.rk.ok { opacity: 1; }
.rk.atual { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.rivais { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.rival { padding: 12px; border-radius: 12px; background: #0b0f24aa; border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px; }
.rival.dif0 { border-color: #3ddc8466; } .rival.dif1 { border-color: #ffcf5c66; } .rival.dif2 { border-color: #ff4d6d88; }
.rival-top small { display: block; }
.rival-time { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
.rival-time span { text-align: center; }
.rival-time small { display: block; font-size: 11px; }
.rival .btn { margin-top: 6px; }
.col-delta { font: 800 18px 'Nunito'; margin-bottom: 8px; }
.rank-up { margin: 12px 0; padding: 12px; border-radius: 12px; border: 1px solid #ffcf5c; background: linear-gradient(120deg, #3a2a08, transparent); }
.rank-up h3 { margin: 0 0 6px; color: #ffcf5c; }

/* VIP */
.vip-badge { display: inline-block; font: 800 11px 'Nunito'; color: #2a1d00; background: linear-gradient(#ffe27a, #e0a800); padding: 2px 8px; border-radius: 10px; vertical-align: middle; letter-spacing: 0; }
nav a.vip-link { color: #ffcf5c; border: 1px solid #ffcf5c66; }
nav a.vip-link.ativo { background: linear-gradient(#ffe27a, #e0a800); color: #2a1d00; }
.banner.vip-banner { --c: #ffcf5c; background: linear-gradient(120deg, #4a3500, var(--bg2) 70%); }
.banner.vip-banner small { display: block; margin-top: 8px; }
table.vip-tab, table.chances { width: 100%; border-collapse: collapse; font-size: 14px; }
.vip-tab th, .vip-tab td, .chances th, .chances td { padding: 8px; border-bottom: 1px solid #ffffff12; text-align: left; }
.vip-tab td.vipc { color: #ffcf5c; font-weight: 800; }
.vip-tab td.meu, .chances td.meu, .chances tr.meu td:nth-child(2) { background: #ffffff0d; }
.nv { color: #7fe3ff; font-weight: 800; }
.dot.inline { position: static; display: inline-block; vertical-align: middle; }
.cav-arma sup { font-size: 10px; color: #7fe3ff; font-weight: 800; }

/* Mapa temático */
.saga { background-size: cover; }
.saga .regiao { display: block; color: #fff; opacity: .85; margin-bottom: 4px; }
.mapa-tema { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #ffffff33; box-shadow: inset 0 0 60px #0008; margin-bottom: 14px; }
.mapa-tema .deco { position: absolute; opacity: .55; pointer-events: none; filter: drop-shadow(0 2px 2px #0006); }
.mapa-tema .trilha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mapa-tema .no { position: absolute; transform: translate(-50%, -50%); width: 120px; text-align: center; cursor: pointer; z-index: 1; }
.no .no-ic { display: grid; place-items: center; margin: 0 auto 4px; width: 58px; height: 58px; border-radius: 50%; font-size: 28px;
  background: radial-gradient(#ffffff33, #0b0f24ee); border: 3px solid #fff; box-shadow: 0 4px 12px #000a; transition: transform .15s; }
.no:hover .no-ic { transform: scale(1.12); }
.no b { display: block; font-size: 12px; line-height: 1.15; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.no small { color: #ffd84d; text-shadow: 0 1px 2px #000; }
.no.ok .no-ic { border-color: #3ddc84; }
.no.lock { filter: grayscale(1); opacity: .6; }
.no.bau .no-ic { border-color: #ffcf5c; }
.no.bau.pronto .no-ic { animation: pulsa 1.2s infinite; background: radial-gradient(#ffcf5c88, #3a2a08); }
.no.bau.aberto { opacity: .7; }
.recarga { color: #ffb347; font-weight: 800; white-space: nowrap; }
.drop { display: block; color: #7fe3ff; margin-top: 4px; }

/* Enciclopédia */
.banner.encic { --c: #7fe3ff; }
.encic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.encic { --c: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), #0b0f24aa); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.encic b { font-size: 13px; }
.encic.nao svg { filter: grayscale(1) brightness(.45); }
.encic.nao { opacity: .75; }
.encic-st { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; font-size: 12px; }
.encic-lock { color: var(--dim); font-size: 13px; margin-top: auto; }
.encic-ok { color: #3ddc84; font-weight: 800; margin-top: auto; }
.encic .btn { margin-top: auto; }

/* Missões e calendário */
.missao { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: #0b0f24aa; border: 1px solid var(--borda); margin-bottom: 8px; }
.missao > div { flex: 1; }
.missao small { display: block; }
.missao.pronta { border-color: #ffcf5c; }
.missao.feita { opacity: .6; }
.missao.bonus { border-style: dashed; }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.cal { position: relative; background: #0b0f24aa; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 4px; text-align: center; font-size: 11px; min-height: 64px; }
.cal small { display: block; font-weight: 800; }
.cal.grande { border-color: #b48bff; background: linear-gradient(#2a1a55, #0b0f24aa); }
.cal.pego { opacity: .45; }
.cal.hoje { border-color: var(--ouro); box-shadow: 0 0 12px #e8b92366; animation: pulsa 1.5s infinite; }
.cal em { position: absolute; top: 2px; right: 4px; color: #3ddc84; font-style: normal; font-weight: 800; }

/* Fusão e forja */
.fusao-slots { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.fusao-slots i { font-style: normal; font-size: 22px; color: var(--dim); }
.fslot { --c: var(--borda); width: 110px; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; border: 2px dashed var(--borda); color: var(--dim); font-size: 26px; text-align: center; padding: 6px; }
.fslot small { font-size: 11px; color: var(--txt); }
.fslot.ok { border: 2px solid var(--c); cursor: pointer; }
.fslot.res { border-color: #b48bff; }
.arma-card { cursor: pointer; }
.arma-card.marcado { box-shadow: 0 0 0 3px #b48bff; }
.arma-card.lock { opacity: .35; }
.forjas-ativas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.forja-ativa { --c: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--c); background: #0b0f24aa; text-align: center; }
.forja-ativa .bar { width: 100%; }
.forja-ativa.pronta { box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.vazio-forja { width: auto; font-size: 13px; }
.grid-forjar { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* Social */
.amigo { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #ffffff10; flex-wrap: wrap; }
.amigo > div { flex: 1; min-width: 140px; }
.amigo small { display: block; }
.amigo .ic { font-size: 28px; }
.caixa-entrada { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 13px; }
.caixa-entrada span { background: #2a1a55; padding: 4px 10px; border-radius: 12px; }
.banner.amizade { --c: #ff7eb6; text-align: center; }
.banner.amizade .row { justify-content: center; }
.anunciar { margin-bottom: 10px; }
.card h4 { margin: 12px 0 6px; color: var(--dim); font-size: 13px; }

/* Status em batalha */
.sts { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; flex-wrap: wrap; gap: 2px; z-index: 1; }
.st { font-size: 14px; background: #000a; border-radius: 8px; padding: 0 3px; line-height: 18px; }
.st sub { font-size: 9px; font-weight: 800; color: #ffcf5c; }
.st-ic { font-size: 13px; }
.fx.status { color: #d6a8ff; font-size: 15px; }
.fx.dot { color: #ff9a5c; font-size: 16px; }
.encic-ef { min-height: 20px; }
.encic-ef span { margin: 0 2px; }

/* Manual */
table.manual-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.manual-tab th, .manual-tab td { padding: 8px; border-bottom: 1px solid #ffffff12; text-align: left; vertical-align: top; }
.manual-tab td:first-child { white-space: nowrap; }
.manual-av { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.manual-sec h4 { margin: 12px 0 4px; color: var(--ouro); }
.manual-sec p { margin: 0; line-height: 1.5; }
.changelog ul { margin: 0; padding-left: 20px; line-height: 1.6; }

.manual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; font-size: 13px; }
.manual-sec ul { margin: 4px 0; padding-left: 20px; line-height: 1.6; }
.diretriz { border-style: dashed; font-size: 13px; }
code { background: #0b0f24; padding: 1px 5px; border-radius: 4px; }

/* v1.4: inventário, loja de gemas, correio, GM */
.badge { display: inline-block; margin-left: 4px; background: #ff4d6d; color: #fff; border-radius: 10px; padding: 0 6px; font: 800 11px 'Nunito'; font-style: normal; }
nav a.gemas-link { color: #7fe3ff; }
nav a.admin-link { color: #ff3df0; text-decoration: none; }
.gm-badge { display: inline-block; font: 800 11px 'Nunito'; color: #fff; background: linear-gradient(#ff3df0, #8a00a8); padding: 2px 8px; border-radius: 10px; }
.inv-cap .btn { margin-left: 8px; padding: 5px 10px; font-size: 12px; }
.inv-cap.cheio { border-color: #ff4d6d; }
.inv-slot.clicavel { cursor: pointer; }
.btn.perigo { background: linear-gradient(#ff5470, #b3002d); box-shadow: 0 3px 0 #6d001b; }
.btn.alt.perigo { background: #4a1022; box-shadow: 0 3px 0 #2a0612; }
.banner.gemas-banner { --c: #7fe3ff; }
.loja-gemas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 10px; }
.gema-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 10px; border-radius: 12px; background: linear-gradient(180deg, #7fe3ff1f, #0b0f24aa); border: 1px solid #7fe3ff55; }
.gema-card small { color: var(--dim); }
.gema-card .btn { margin-top: auto; }
.gema-card.destaque { border-color: var(--ouro); box-shadow: 0 0 16px #e8b92355; }
.gema-card em { position: absolute; top: 6px; right: 8px; font: 800 10px 'Nunito'; color: var(--ouro); font-style: normal; }
.carta { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; background: #0b0f24aa; border: 1px solid var(--borda); margin-bottom: 8px; }
.carta > div { flex: 1; }
.carta small { display: block; }
.carta p { margin: 6px 0 0; }
.carta-premio { margin-top: 6px; }
.correio-tag { font-size: 11px; }
.manut { text-align: center; padding: 10px; background: #4a3500; border-bottom: 2px solid #ffcf5c; font-weight: 800; }
.encic.resgatavel { cursor: pointer; box-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); animation: pulsa 1.6s infinite; }

@media (max-width: 820px) {
  .manual-tab td:nth-child(4), .manual-tab th:nth-child(4) { display: none; }
  .marcos { grid-template-columns: repeat(6, 1fr); }
  .calendario { grid-template-columns: repeat(4, 1fr); }
  .mapa-tema .no { width: 90px; }
  .no .no-ic { width: 46px; height: 46px; font-size: 22px; }
  .rk { min-width: 60px; padding: 6px; }
  .layout { grid-template-columns: 1fr; }
  aside { order: 2; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .unid { width: 104px; padding: 6px; }
  .unid.boss { width: 124px; }
  .unid svg { width: 56px; height: 56px; }
  .skills { grid-template-columns: 1fr; }
  .login7 { grid-template-columns: repeat(4, 1fr); }
  .grid3 { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* ---------- v1.5: Cidade/Mundo, Times, Tiers, World Boss, Guildas, Selos ---------- */
.abas.hub { background: #0b0f24aa; border: 1px solid var(--borda); border-radius: 10px; padding: 4px; margin-bottom: 10px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.hub-card { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(140deg, var(--card), var(--bg2)); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; cursor: pointer; transition: .15s; }
.hub-card:hover { border-color: var(--ouro); transform: translateY(-2px); }
.hub-card p { margin: 4px 0; font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tier { --c: #8d97c7; display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); font-weight: 800; font-size: 12px; text-align: center; vertical-align: middle; }
.cav > .tier { position: absolute; top: 6px; left: 6px; }
.tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 10px; }
.tiers .tier { opacity: .45; }
.tiers .tier.ok { opacity: 1; }
.tiers .tier.atual { box-shadow: 0 0 10px var(--c); transform: scale(1.15); }
.tiers i { color: var(--dim); font-style: normal; }
.times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.time-slot { background: #0b0f24aa; border: 2px solid var(--borda); border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.time-slot:hover { border-color: #7b8cff; }
.time-slot.ativo { border-color: var(--ouro); box-shadow: 0 0 12px #ffcf5c55; }
.time-slot.lock { opacity: .6; border-style: dashed; }
.time-av { display: flex; gap: 2px; min-height: 30px; align-items: center; }
.banner.wb-banner { --c: #ff3d6e; background: linear-gradient(120deg, #4a0d22, var(--bg2) 70%); }
.banner.wb-banner .bar { height: 14px; }
.banner.guilda-banner { --c: #7bd389; }
.banner.selos-banner { --c: #ffcf5c; }
.banner.selos-banner .tag { margin: 2px; }
.selos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.selo { background: #0b0f24aa; border: 2px solid var(--borda); border-radius: 12px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; filter: grayscale(.7); opacity: .75; }
.selo.pronto { filter: none; opacity: 1; border-color: var(--ouro); cursor: pointer; animation: pulso 1.6s infinite; }
.selo.ativo { filter: none; opacity: 1; border-color: #7bd389; background: linear-gradient(160deg, #123a22, var(--bg2)); }
.selo-ic { font-size: 34px; }
.selo em { font-style: normal; font-size: 12px; }
@keyframes pulso { 50% { box-shadow: 0 0 16px #ffcf5c88; } }
.chat { max-height: 280px; overflow-y: auto; background: #0b0f24; border: 1px solid var(--borda); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; margin-bottom: 8px; }
table.rank tr.meu td { background: #ffcf5c22; }
@media (max-width: 760px) {
  .grid2 { grid-template-columns: 1fr; }
  .times { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- v1.8: Pets mitológicos, painel Party e sprites ---------- */
.party-card { border-radius: 12px; overflow: hidden; margin-bottom: 14px; border: 2px solid #2b6fd6; background: #0a1b4a; box-shadow: 0 0 0 1px #0d2a6e inset; }
.party-titulo { cursor: pointer; padding: 7px 12px; font-family: Cinzel, serif; font-weight: 800; letter-spacing: 1px; color: #fff; text-align: right;
  background: linear-gradient(90deg, #1ca3ff 0%, #1f5fd9 45%, #1a3ea8 100%); border-bottom: 2px solid #8fd6ff; }
.party-corpo { padding: 10px; display: flex; flex-direction: column; gap: 8px;
  background: repeating-linear-gradient(0deg, transparent 0 13px, #2a5cc422 13px 14px), repeating-linear-gradient(90deg, transparent 0 13px, #2a5cc422 13px 14px), radial-gradient(circle at 50% 40%, #1b3f9e, #0a1640 75%); }
.party-topo { display: flex; justify-content: center; gap: 6px; background: #0b1336cc; border: 1px solid #3d6fd8; border-radius: 10px; padding: 4px 8px; align-self: center; }
.party-ret { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #13245c; border: 1px solid #5d8cf0; font-weight: 800; color: #ffcf5c; cursor: pointer; overflow: hidden; font-size: 16px; }
.party-ret.eu { background: linear-gradient(160deg, #ff9f43, #c2410c); color: #fff; }
.party-ret.guilda { font-size: 11px; color: #7bd389; }
.party-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.party-slot { --c: #5d8cf0; position: relative; aspect-ratio: 1 / 1.15; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--c) 70%, #3d6fd8); cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #2c63d6, #0d1f5c 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 12px #000a; }
.party-slot small { font-size: 10px; color: #cfe3ff; }
.party-slot .tier { position: absolute; top: 3px; left: 3px; font-size: 9px; min-width: 0; padding: 0 3px; }
.party-slot.vazio { color: #5d8cf0; font-size: 26px; border-style: dashed; }
.party-slot.ko svg { filter: grayscale(1); opacity: .5; }
.party-grid.barras > div { display: flex; flex-direction: column; gap: 3px; }
.pbar { display: flex; align-items: center; gap: 2px; }
.pbar i { font-style: normal; font-size: 9px; width: 13px; }
.pbar > div { flex: 1; height: 6px; background: #050b24; border-radius: 4px; overflow: hidden; border: 1px solid #000; }
.pbar > div > div { height: 100%; border-radius: 4px; }
.pbar.vida > div > div { background: linear-gradient(90deg, #ff4f7b, #ff8fab); }
.pbar.xpp > div > div { background: linear-gradient(90deg, #4fd66b, #b6f36a); }
.pbar.arm > div > div { background: linear-gradient(90deg, #ffb020, #ffe066); }
.party-pb { align-self: center; display: flex; align-items: center; gap: 8px; padding: 4px 18px 4px 10px; border-radius: 20px; border: 2px solid #ffb020;
  background: linear-gradient(90deg, #2a1c05, #12183f); clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%); }
.party-pb span { font-size: 22px; filter: drop-shadow(0 0 4px #ffb020); }
.party-pb b { font-family: Cinzel, serif; font-size: 20px; color: #ffcf5c; letter-spacing: 1px; }
.banner.pets-banner { --c: #7bd389; }
.pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pet-card { --c: #3fa9f5; background: linear-gradient(160deg, var(--card), var(--bg2)); border: 2px solid color-mix(in srgb, var(--c) 55%, var(--borda)); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pet-card.nao .pet-topo svg { filter: grayscale(.8) brightness(.7); }
.pet-card.ativo { box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); border-color: var(--c); }
.pet-topo { display: flex; gap: 10px; align-items: center; }
.pet-topo > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.pet-passiva { font-size: 12px; color: #7bd389; }
.pet-batalha { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; animation: flutua 2.2s ease-in-out infinite; }
.pet-batalha small { font-size: 11px; color: var(--dim); }
.pet-batalha.usado { opacity: .6; }
@keyframes flutua { 50% { transform: translateY(-8px); } }
.sprite-palco { padding: 16px; border-radius: 12px; }
.sprite-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.sprite-cel { display: flex; flex-direction: column; align-items: center; background: #0b0f24aa; border: 1px solid var(--borda); border-radius: 8px; padding: 6px; }
.sprite-cel small { font-size: 11px; text-align: center; }
.anim-idle svg { animation: flutua 2.4s ease-in-out infinite; }
.anim-atk svg { animation: atk .7s infinite; }
.anim-hit svg { animation: hit .5s infinite; }
.anim-ko { filter: grayscale(1); opacity: .4; }

/* ---------- v1.9: invocação premium, pity, anti-bot, perfil, molduras e chat global ---------- */
body { padding-bottom: 46px; }
.cine { --c: #e8b923; --b: #fff3b0; position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 35%, #000) 0%, #000 70%); animation: cine-in .4s ease-out; }
.cine.sai { animation: cine-out .35s forwards; }
@keyframes cine-in { from { opacity: 0; } }
@keyframes cine-out { to { opacity: 0; transform: scale(1.05); } }
.cine-raios { position: absolute; width: 200vmax; height: 200vmax; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--b) 22%, transparent) 0 6deg, transparent 6deg 18deg); animation: gira 14s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.cine-coluna { position: absolute; bottom: -10%; width: 7%; height: 0; background: linear-gradient(to top, var(--b), color-mix(in srgb, var(--c) 60%, transparent), transparent); filter: blur(4px); opacity: .85; animation: coluna 1.2s ease-out forwards; }
@keyframes coluna { to { height: 130%; } }
.cine-estrelas b { position: absolute; color: var(--b); font-size: 14px; opacity: 0; animation: pisca 1.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: 1; transform: scale(1.6); } }
.cine-centro { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: revela-cine 1.1s cubic-bezier(.2, 1.4, .4, 1) .7s both; }
.cine-centro h2 { font-family: Cinzel, serif; font-size: 34px; color: var(--b); text-shadow: 0 0 18px var(--c), 0 0 4px #000; margin: 6px 0 0; }
.cine-centro small { color: #fff9; margin-top: 10px; }
.cine-aura { position: absolute; top: -10px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, var(--b), color-mix(in srgb, var(--c) 50%, transparent) 45%, transparent 70%); animation: pulsa-aura 1.6s ease-in-out infinite; z-index: -1; }
@keyframes pulsa-aura { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes revela-cine { from { opacity: 0; transform: scale(.2) translateY(60px); filter: brightness(4); } }
.cav.destaque { box-shadow: 0 0 18px var(--c); border-color: var(--c); }
.pity { max-width: 420px; margin: 8px auto; text-align: left; }
.captcha-alvo { font-size: 26px; vertical-align: middle; }
.captcha-grade { display: grid; grid-template-columns: repeat(3, 72px); gap: 8px; justify-content: center; margin: 10px 0; }
.captcha-cel { height: 72px; font-size: 34px; border-radius: 10px; border: 2px solid var(--borda); background: #0b0f24; cursor: pointer; transition: .1s; }
.captcha-cel.sel { border-color: #7bd389; background: #123a22; transform: scale(.94); box-shadow: 0 0 10px #7bd38988; }
#chat-global { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, calc(100vw - 16px)); z-index: 800; background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--borda); border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 18px #0008; }
.chat-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; min-height: 22px; }
.chat-barra .badge { position: static; }
.chat-previa { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); font-size: 13px; }
.chat-seta { color: var(--dim); }
#chat-global.aberto .chat-barra { border-bottom: 1px solid var(--borda); }
.chat-msgs { height: 260px; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.chat-envio { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--borda); }
.chat-envio input { flex: 1; }
.gm-nome { color: #ff3df0; } .vip-nome { color: #ffcf5c; }
.perfil-av { --mc: transparent; --mb: transparent; position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: 3px solid var(--mc);
  box-shadow: 0 0 8px var(--mb); background: radial-gradient(circle, #1f2a6b, #0b0f24); overflow: hidden; vertical-align: middle; }
.perfil-av svg { display: block; }
.perfil-ini { font-family: Cinzel, serif; font-weight: 800; color: #ffcf5c; }
.mold-anim-brilho { animation: mold-brilho 2s ease-in-out infinite; }
@keyframes mold-brilho { 50% { box-shadow: 0 0 18px var(--mb), 0 0 6px var(--mc) inset; } }
.mold-anim-gira { border-style: dashed; animation: mold-brilho 2.4s ease-in-out infinite; }
.mold-anim-arco { border-color: transparent; background: linear-gradient(#0b0f24, #0b0f24) padding-box, conic-gradient(#ff3df0, #ffcf5c, #7bd389, #3fa9f5, #ff3df0) border-box; animation: mold-brilho 1.6s ease-in-out infinite; }
.perfil-nome { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.perfil-link { display: inline-flex; align-items: center; gap: 4px; }
.banner.perfil-banner { --c: #ff9f43; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-op { padding: 4px; border-radius: 10px; border: 2px solid var(--borda); cursor: pointer; display: flex; flex-direction: column; align-items: center; background: #0b0f24aa; }
.avatar-op.sel { border-color: var(--ouro); box-shadow: 0 0 10px #e8b92388; }
.molduras { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.moldura-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 10px; border: 2px solid var(--borda); background: #0b0f24aa; text-align: center; font-size: 13px; }
.moldura-card.nao { opacity: .7; }
.moldura-card.sel { border-color: var(--ouro); }

/* ---------- v2.0: logo isolada, menu lateral em cascata, Centro Comércio, Mercado Player e Trade ---------- */
header.topo { justify-content: center; padding: 14px 16px 12px; border-bottom: 1px solid #e8b92355; background: radial-gradient(ellipse at 50% 0%, #2a3a8a 0%, #0b0f24 70%); }
header.topo .logo { text-align: center; }
header.topo .logo span { font-size: 34px; letter-spacing: 4px; filter: drop-shadow(0 0 10px #e8b92366); }
header.topo .logo small { font-size: 13px; letter-spacing: 8px; }
.layout { grid-template-columns: 250px 1fr; }
nav.menu { display: flex; flex-direction: column; gap: 4px; background: linear-gradient(160deg, var(--card), var(--bg2)); border: 1px solid var(--borda); border-radius: 12px; padding: 8px; }
.menu-cat { border-radius: 8px; }
.menu-tit { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; font-family: Cinzel, serif; font-weight: 800; font-size: 13px; letter-spacing: .5px; color: var(--ouro); cursor: pointer; white-space: nowrap; }
.menu-tit span { margin-left: auto; color: var(--dim); }
.menu-tit:hover { background: #ffffff0d; }
.menu-cat.aberta > .menu-tit { background: #ffffff08; }
.menu-itens { display: flex; flex-direction: column; padding: 2px 0 6px 10px; border-left: 2px solid var(--borda); margin-left: 12px; }
.menu-itens a { padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; position: relative; cursor: pointer; white-space: nowrap; }
.menu-itens a:hover { background: var(--card); }
.menu-itens a.on { background: linear-gradient(90deg, #e8b92333, transparent); color: var(--ouro); box-shadow: inset 3px 0 0 var(--ouro); }
.menu-itens a.vip-ativo { color: #ffcf5c; }
nav.menu .dot { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }
nav.menu .badge { position: static; margin-left: 6px; }
.party-time { text-align: center; font-family: Cinzel, serif; font-weight: 800; font-size: 26px; letter-spacing: 3px; color: #fff; margin: 4px auto 10px; padding: 8px 24px; width: fit-content;
  background: linear-gradient(90deg, #1ca3ff, #1f5fd9, #1a3ea8); border: 2px solid #8fd6ff; border-radius: 10px; box-shadow: 0 0 16px #1ca3ff55; }
.titulo.centro { text-align: center; }
.modal.largo { max-width: 860px; text-align: left; position: relative; }
.modal-fechar { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--dim); font-size: 18px; cursor: pointer; }
.perfil-modal .titulo { margin-top: 0; }
.banner.mercado-banner { --c: #ff9f43; }
.mini-abas a { font-size: 12px; padding: 4px 10px; }
.anuncio { display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid var(--borda); }
.anuncio > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.obj-lista { display: flex; flex-wrap: wrap; gap: 4px; min-width: 48px; }
.obj-mini { position: relative; display: inline-grid; place-items: center; min-width: 40px; height: 40px; border-radius: 8px; background: #0b0f24; border: 1px solid var(--borda); }
.obj-mini.ic { font-size: 22px; padding: 0 4px; }
.obj-mini sup { font-size: 10px; color: var(--ouro); margin-left: 1px; }
.obj-mini .tier { position: absolute; bottom: -4px; right: -4px; font-size: 8px; padding: 0 2px; min-width: 0; }
.trade-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trade-col { background: #0b0f24aa; border: 1px solid var(--borda); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 460px; overflow-y: auto; }
.trade-col h4 { margin: 0 0 4px; }
.trade-chk { display: flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }
.trade-num { display: flex; flex-direction: column; font-size: 12px; gap: 2px; }
.trade-num input { width: 100%; }
.trade-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.trade-prop { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.trade-lados { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.trade-lados > div { display: flex; flex-direction: column; gap: 3px; }
.trade-lados > span { font-size: 22px; color: var(--ouro); }
.tag.neg { color: #ff6b81; border-color: #ff6b81; }
@media (max-width: 760px) {
  header.topo .logo span { font-size: 24px; }
  .layout { grid-template-columns: 1fr; }
  aside { order: 0; }
  .trade-colunas { grid-template-columns: 1fr; }
}
pre.arvore { background: #0b0f24; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #cfe3ff; overflow-x: auto; }

/* imagens de arquivo dos cavaleiros (client/img/cavaleiros) */
.av-img image { image-rendering: auto; }
.av-corpo image { image-rendering: pixelated; }

/* ---------- v2.1: INFO DO CAVALEIRO no topo, PARTY na base, menu à DIREITA ---------- */
.layout { grid-template-columns: minmax(0, 1fr) 250px; max-width: 1280px; }
.layout > .coluna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.layout > aside { order: 2; position: sticky; top: 10px; align-self: start; max-height: calc(100vh - 20px); overflow-y: auto; }
.info-topo { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(260px, 1.3fr); gap: 12px; align-items: stretch;
  background: linear-gradient(160deg, var(--card), var(--bg2)); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.info-topo h3 { margin: 0 0 6px; font-size: 13px; }
.info-jogador, .info-recursos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.info-recursos { border-left: 1px solid var(--borda); padding-left: 12px; }
.recursos-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 13px; margin: 4px 0; }
.info-foco { display: flex; gap: 12px; align-items: center; border-left: 1px solid var(--borda); padding-left: 12px; cursor: pointer; border-radius: 8px; }
.info-foco:hover { background: #ffffff08; }
.foco-sprite { --c: #5d8cf0; position: relative; flex: none; width: 104px; height: 104px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 40%, #1b3f9e), #0a1640 75%); border: 2px solid color-mix(in srgb, var(--c) 70%, #3d6fd8); }
.foco-sprite svg { animation: flutua 2.4s ease-in-out infinite; }
.foco-sprite .tier { position: absolute; top: 4px; left: 4px; }
.foco-dados { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foco-dados b { font-family: Cinzel, serif; }
.foco-dados small { color: var(--dim); font-size: 12px; }
.foco-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; font-size: 12px; }
.foco-pb { color: var(--ouro); font-size: 14px; }
#party-base .party-base { display: flex; gap: 12px; align-items: stretch; }
#party-base .party-card { flex: 1; margin: 0; }
#party-base .party-titulo { text-align: center; }
#party-base .party-corpo { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "topo slots pb" "topo barras pb"; align-items: center; gap: 6px 16px; }
#party-base .party-topo { grid-area: topo; flex-direction: column; align-self: center; }
#party-base .party-grid:not(.barras) { grid-area: slots; }
#party-base .party-grid.barras { grid-area: barras; }
#party-base .party-pb { grid-area: pb; }
#party-base .party-slot { aspect-ratio: auto; height: 104px; }
.party-times { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; padding: 8px; border-radius: 12px; border: 2px solid #2b6fd6; background: #0a1b4a; }
.party-times small { font-family: Cinzel, serif; font-weight: 800; color: #8fd6ff; font-size: 11px; }
.time-mini { width: 36px; height: 30px; border-radius: 8px; border: 1px solid #3d6fd8; background: #13245c; color: #cfe3ff; font-weight: 800; cursor: pointer; }
.time-mini.on { background: linear-gradient(#ffe27a, #e0a800); color: #2a1d00; border-color: #ffcf5c; }
.time-mini.lock { opacity: .5; }
@media (max-width: 1000px) { .info-topo { grid-template-columns: 1fr 1fr; } .info-foco { grid-column: 1 / -1; border-left: 0; padding-left: 0; } }
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .layout > aside { order: -1; position: static; max-height: none; }
  .info-topo { grid-template-columns: 1fr; }
  .info-recursos { border-left: 0; padding-left: 0; }
  #party-base .party-corpo { grid-template-columns: 1fr; grid-template-areas: "topo" "slots" "barras" "pb"; }
  #party-base .party-topo { flex-direction: row; }
  #party-base .party-base { flex-direction: column; }
  .party-times { flex-direction: row; }
}

/* ---------- v2.3: layout MOBILE-FIRST — 3 colunas (Info+Party | Conteúdo | Menu) a partir de 768 px ---------- */
/* base = celular: conteúdo em foco, Info e Party sanfonados, menu em gaveta pela direita */
.layout.v23 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 1440px; margin: 10px auto; padding: 0 10px; }
.layout.v23 > .col-esq { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.layout.v23 > main { min-width: 0; }
.sanfona { background: linear-gradient(160deg, var(--card), var(--bg2)); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.sanfona-tit { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; min-height: 48px; background: none; border: 0;
  color: var(--ouro); font-family: Cinzel, serif; font-weight: 800; font-size: 14px; letter-spacing: .5px; cursor: pointer; text-align: left; }
.sanfona-tit span { transition: transform .2s; color: var(--dim); }
.sanfona.aberta .sanfona-tit span { transform: rotate(180deg); }
.sanfona-corpo { display: none; padding: 0 8px 8px; }
.sanfona.aberta .sanfona-corpo { display: block; }
.sanfona .party-titulo { display: none; }
/* painéis da coluna esquerda sempre empilhados (estreitos) */
.layout.v23 .info-topo { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
.layout.v23 .info-recursos, .layout.v23 .info-foco { border-left: 0; padding-left: 0; border-top: 1px solid var(--borda); padding-top: 10px; }
.layout.v23 .info-foco { grid-column: auto; }
.layout.v23 .foco-sprite { width: 84px; height: 84px; }
.layout.v23 #party-base .party-base { flex-direction: column; gap: 8px; }
.layout.v23 #party-base .party-corpo { display: flex; flex-direction: column; gap: 8px; }
.layout.v23 #party-base .party-topo { flex-direction: row; align-self: center; }
.layout.v23 #party-base .party-slot { height: auto; aspect-ratio: 1 / 1.1; }
.layout.v23 .party-times { flex-direction: row; justify-content: center; }
/* gaveta do menu (direita) */
.hamburguer { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--card); color: var(--ouro); font-size: 24px; cursor: pointer; z-index: 5; }
.hamburguer .dot { position: absolute; top: 8px; right: 8px; }
header.topo { position: relative; }
.layout.v23 > aside.col-dir { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); max-height: none; overflow-y: auto; z-index: 950; padding: 12px;
  background: var(--bg); border-left: 1px solid var(--borda); box-shadow: -8px 0 24px #000a; transform: translateX(105%); transition: transform .25s ease; order: 0; }
body.gaveta-aberta .layout.v23 > aside.col-dir { transform: none; }
.gaveta-fundo { display: none; position: fixed; inset: 0; background: #000a; z-index: 940; }
body.gaveta-aberta .gaveta-fundo { display: block; }
body.gaveta-aberta { overflow: hidden; }
header.topo .logo span { font-size: 24px; letter-spacing: 2px; }
header.topo .logo small { letter-spacing: 5px; font-size: 11px; }
#chat-global { width: 100vw; border-radius: 12px 12px 0 0; }

/* tablet e desktop: 3 colunas fixas */
@media (min-width: 768px) {
  .layout.v23 { grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 14px; padding: 0 14px; margin: 14px auto; }
  .layout.v23 > aside.col-dir { position: sticky; top: 10px; bottom: auto; width: auto; transform: none; box-shadow: none; border-left: 0; background: none; padding: 0; z-index: 1;
    align-self: start; max-height: calc(100vh - 20px); }
  .layout.v23 > .col-esq { position: sticky; top: 10px; align-self: start; max-height: calc(100vh - 20px); overflow-y: auto; }
  .sanfona { background: none; border: 0; overflow: visible; }
  .sanfona-tit { display: none; }
  .sanfona-corpo { display: block !important; padding: 0; }
  .sanfona .party-titulo { display: block; }
  .hamburguer, .gaveta-fundo { display: none !important; }
  body.gaveta-aberta { overflow: auto; }
  header.topo .logo span { font-size: 30px; letter-spacing: 4px; }
  #chat-global { width: min(560px, calc(100vw - 16px)); }
}
@media (min-width: 1200px) {
  .layout.v23 { grid-template-columns: 270px minmax(0, 1fr) 240px; }
  header.topo .logo span { font-size: 34px; }
}
/* toque: áreas clicáveis de pelo menos 44 px e campos sem zoom automático no iPhone */
@media (pointer: coarse) {
  .btn, .menu-itens a, .menu-tit, .abas a, .marco, .time-mini, .captcha-cel { min-height: 44px; }
  .menu-itens a, .menu-tit, .abas a { display: flex; align-items: center; }
  .time-mini { min-width: 44px; }
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .chat-barra { min-height: 44px; }
}
/* foto de perfil enviada */
.perfil-foto { display: block; border-radius: 50%; object-fit: cover; }
.foto-upload { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.foto-upload > div { flex: 1; min-width: 200px; }
label.btn { cursor: pointer; display: inline-flex; align-items: center; }
/* v2.3: cavaleiro em foco cabe na coluna esquerda estreita */
.layout.v23 .info-foco { align-items: flex-start; }
.layout.v23 .foco-dados { overflow: hidden; }
.layout.v23 .foco-dados b { font-size: 13px; }
.layout.v23 .foco-stats { grid-template-columns: 1fr; font-size: 11px; white-space: nowrap; }
@media (min-width: 768px) { .layout.v23 > aside.col-dir { transition: none; right: auto; } }

/* =====================================================================
   v2.4 — TEMA MÍSTICO ÉPICO: vidro escuro (glassmorphism), bordas douradas ornamentadas,
   brilho néon e colunas laterais sem barra de rolagem. Camada visual: não muda o layout.
   ===================================================================== */
:root {
  --ouro-c: #fff3b0; --ouro-m: #e8b923; --ouro-e: #8a6a12;
  --platina-c: #eaf2ff; --platina-m: #9fb4d6; --platina-e: #4a5d85;
  --runa-c: #c9f6ff; --runa-m: #7fe3ff; --runa-e: #7b4fd8;
  --vidro: rgba(14, 18, 44, .58); --vidro-forte: rgba(10, 13, 34, .78);
  --borda-ouro: linear-gradient(135deg, var(--ouro-c), var(--ouro-m) 30%, var(--ouro-e) 55%, var(--ouro-m) 80%, var(--ouro-c));
  --borda-platina: linear-gradient(135deg, var(--platina-c), var(--platina-m) 35%, var(--platina-e) 60%, var(--platina-c));
  --borda-runa: linear-gradient(135deg, var(--runa-c), var(--runa-m) 35%, var(--runa-e) 65%, var(--runa-m));
}
/* plano de fundo: nebulosas, estrelas e constelações */
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='30' cy='40' r='1'/%3E%3Ccircle cx='120' cy='80' r='.7'/%3E%3Ccircle cx='210' cy='30' r='1.2'/%3E%3Ccircle cx='330' cy='60' r='.8'/%3E%3Ccircle cx='390' cy='150' r='1'/%3E%3Ccircle cx='60' cy='200' r='.6'/%3E%3Ccircle cx='170' cy='240' r='1.1'/%3E%3Ccircle cx='280' cy='210' r='.7'/%3E%3Ccircle cx='350' cy='300' r='1'/%3E%3Ccircle cx='90' cy='330' r='.9'/%3E%3Ccircle cx='230' cy='380' r='.6'/%3E%3Ccircle cx='400' cy='400' r='.8'/%3E%3C/g%3E%3Cpath d='M170 240 L280 210 L350 300 M280 210 L330 60 L390 150' stroke='%23e8b923' stroke-opacity='.18' fill='none'/%3E%3Cg fill='%23e8b923' fill-opacity='.5'%3E%3Ccircle cx='170' cy='240' r='1.6'/%3E%3Ccircle cx='280' cy='210' r='1.6'/%3E%3Ccircle cx='350' cy='300' r='1.6'/%3E%3Ccircle cx='330' cy='60' r='1.6'/%3E%3Ccircle cx='390' cy='150' r='1.6'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(ellipse 60% 45% at 15% 10%, rgba(123, 79, 216, .35), transparent 70%),
    radial-gradient(ellipse 55% 40% at 85% 25%, rgba(28, 163, 255, .22), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232, 185, 35, .16), transparent 70%),
    linear-gradient(180deg, #070a1c 0%, #0b1030 45%, #080b20 100%);
  background-attachment: fixed;
}
/* painéis de vidro com borda dourada (técnica padding-box/border-box: borda em gradiente com cantos arredondados) */
/* vidro de verdade: o fundo é só o vidro; a borda dourada é desenhada no ::after com máscara (o ouro não "vaza" pelo vidro) */
.card, nav.menu, .info-topo, .tile, .hub-card, .modal, .sanfona, .moldura-card {
  --borda-tema: var(--borda-ouro);
  position: relative;
  background: var(--vidro) !important;
  border: 1px solid transparent !important;
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 243, 176, .08);
}
.modal { background: var(--vidro-forte) !important; }
/* cantos ornamentados nos cards principais */
.card, .info-topo, .modal { position: relative; }
.card::before, .info-topo::before, .modal::before {
  content: ''; position: absolute; inset: 5px; pointer-events: none; border-radius: inherit; opacity: .9;
  background:
    linear-gradient(var(--ouro-c), var(--ouro-m)) top left / 16px 2px no-repeat, linear-gradient(var(--ouro-c), var(--ouro-m)) top left / 2px 16px no-repeat,
    linear-gradient(var(--ouro-c), var(--ouro-m)) top right / 16px 2px no-repeat, linear-gradient(var(--ouro-c), var(--ouro-m)) top right / 2px 16px no-repeat,
    linear-gradient(var(--ouro-m), var(--ouro-e)) bottom left / 16px 2px no-repeat, linear-gradient(var(--ouro-m), var(--ouro-e)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--ouro-m), var(--ouro-e)) bottom right / 16px 2px no-repeat, linear-gradient(var(--ouro-m), var(--ouro-e)) bottom right / 2px 16px no-repeat;
}
/* variações metálicas: Party = platina; menu = rúnico */
.party-card, .party-times {
  --borda-tema: var(--borda-platina); position: relative;
  background: rgba(10, 27, 74, .62) !important;
  border: 2px solid transparent !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 18px rgba(143, 214, 255, .18), 0 6px 24px rgba(0, 0, 0, .45);
}
nav.menu { --borda-tema: var(--borda-runa); box-shadow: 0 0 18px rgba(127, 227, 255, .14), 0 6px 24px rgba(0, 0, 0, .45); }
.menu-tit { color: var(--runa-c); text-shadow: 0 0 8px rgba(127, 227, 255, .55); }
.menu-itens { border-left-color: rgba(127, 227, 255, .35); }
.menu-itens a:hover { background: rgba(127, 227, 255, .08); box-shadow: inset 2px 0 0 var(--runa-m); }
.menu-itens a.on { background: linear-gradient(90deg, rgba(232, 185, 35, .28), transparent); box-shadow: inset 3px 0 0 var(--ouro-m), 0 0 12px rgba(232, 185, 35, .15); }
/* topo com a logo */
header.topo { background: linear-gradient(180deg, rgba(20, 26, 70, .75), rgba(8, 11, 32, .35)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; border-image: var(--borda-ouro) 1; }
header.topo .logo span { background: linear-gradient(180deg, #fffbe0 0%, var(--ouro-c) 35%, var(--ouro-m) 65%, var(--ouro-e) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(232, 185, 35, .55)) drop-shadow(0 2px 0 rgba(0, 0, 0, .6)); }
header.topo .logo small { color: var(--ouro-c); text-shadow: 0 0 8px rgba(232, 185, 35, .6); }
/* tipografia estilizada com brilho */
h2.titulo, .banner h2, .modal h2 { font-family: Cinzel, serif; background: linear-gradient(180deg, #fffbe0, var(--ouro-m) 70%, var(--ouro-e)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(232, 185, 35, .35)); }
.card h3, .info-topo h3 { color: var(--ouro-c); text-shadow: 0 0 8px rgba(232, 185, 35, .45); letter-spacing: .5px; }
/* botões metálicos com brilho néon */
.btn { background: linear-gradient(180deg, #5f7cff, #3046c9 55%, #1f2e8f); border: 1px solid rgba(201, 208, 255, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 4px 12px rgba(48, 70, 201, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4); transition: transform .12s, box-shadow .2s, filter .2s; }
.btn:hover:not([disabled]) { filter: brightness(1.12); box-shadow: 0 0 14px rgba(95, 124, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .3); transform: translateY(-1px); }
.btn.gold { background: linear-gradient(180deg, #fff3b0, #e8b923 45%, #a77d10); color: #2a1d00; border-color: rgba(255, 243, 176, .7); text-shadow: none; box-shadow: 0 4px 14px rgba(232, 185, 35, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.gold:hover:not([disabled]) { box-shadow: 0 0 18px rgba(232, 185, 35, .8), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn.alt { background: rgba(20, 26, 70, .55); border-color: rgba(232, 185, 35, .35); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn.perigo { background: linear-gradient(180deg, #ff6b81, #c9184a 60%, #7a0d2e); border-color: rgba(255, 179, 196, .5); }
.abas a { background: rgba(20, 26, 70, .5); border: 1px solid rgba(232, 185, 35, .25); backdrop-filter: blur(6px); }
.abas a.on { background: linear-gradient(180deg, rgba(232, 185, 35, .35), rgba(232, 185, 35, .1)); border-color: var(--ouro-m); color: var(--ouro-c); box-shadow: 0 0 12px rgba(232, 185, 35, .3); }
.tile:hover, .hub-card:hover { box-shadow: 0 0 20px rgba(232, 185, 35, .35), 0 6px 24px rgba(0, 0, 0, .45); transform: translateY(-2px); }
input, select, textarea { background: rgba(8, 11, 32, .7); border: 1px solid rgba(232, 185, 35, .3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ouro-m); box-shadow: 0 0 10px rgba(232, 185, 35, .35); }
.bar { background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#chat-global { background: linear-gradient(var(--vidro-forte), var(--vidro-forte)) padding-box, var(--borda-ouro) border-box; border: 1px solid transparent; border-bottom: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
footer { color: rgba(201, 208, 255, .55); }
#tip { background: rgba(10, 13, 34, .92); border-color: var(--ouro-m); backdrop-filter: blur(8px); box-shadow: 0 0 16px rgba(232, 185, 35, .25); }

/* colunas laterais: rolagem suave e invisível (roda do mouse, dedo ou arrastando com o mouse) */
.col-esq, .layout > aside, #aside, .menu-itens, .modal { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; overscroll-behavior: contain; }
.col-esq::-webkit-scrollbar, .layout > aside::-webkit-scrollbar, #aside::-webkit-scrollbar, .menu-itens::-webkit-scrollbar, .modal::-webkit-scrollbar { display: none; width: 0; height: 0; }
.col-esq.arrastando, #aside.arrastando { cursor: grabbing; user-select: none; scroll-behavior: auto; }
/* foto do perfil: clicar na própria foto abre o seletor de arquivo */
.foto-clique { position: relative; cursor: pointer; display: inline-block; }
.foto-clique > span:last-of-type { position: absolute; right: -2px; bottom: -2px; font-size: 18px; filter: drop-shadow(0 0 4px #000); }
.foto-clique:hover .perfil-av { box-shadow: 0 0 16px var(--ouro-m); }
@media (prefers-reduced-transparency: reduce) { .card, nav.menu, .info-topo, .modal { backdrop-filter: none; } }
/* banners e cards com cor própria (classe, raridade, tipo) mantêm a cor; ganham só vidro e brilho */
.banner, .pet-card, .selo, .encic, .gema-card, .arma-card, .rival { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06); }
.banner { border-width: 1px; }
@media (min-width: 768px) { .sanfona { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } }.card::after, nav.menu::after, .info-topo::after, .tile::after, .hub-card::after, .modal::after, .sanfona::after, .moldura-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--borda-tema);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.modal::after { padding: 2px; inset: -2px; }
@media (min-width: 768px) { .sanfona::after { display: none; } }.party-card::after, .party-times::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; background: var(--borda-tema); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ===== v2.5: remover da party, filtros avançados de Cavaleiros, Ferreiro filtrado ===== */
.party-slot { position: relative; }
.party-slot .slot-rem { position: absolute; top: 2px; right: 2px; z-index: 3; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,120,120,.6); background: rgba(40,10,20,.85); color: #ffb3b3; font-size: 11px; line-height: 20px; cursor: pointer; opacity: .75; }
.party-slot .slot-rem:hover, .party-slot .slot-rem:focus-visible { opacity: 1; background: #a3263a; color: #fff; }
@media (hover: none) { .party-slot .slot-rem { opacity: 1; width: 26px; height: 26px; } }
.slot-eq { display: flex; flex-direction: column; gap: 6px; }
.slot-eq .mini-rem { width: 100%; }
.grid3 .slot { cursor: pointer; }
.filtros-cav { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 12px; align-items: end; }
.filtros-cav label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim, #9aa3c7); }
.filtros-cav select, .filtros-cav input { width: 100%; min-height: 38px; }
.filtros-cav .btn { min-height: 38px; }
@media (min-width: 560px) { .filtros-cav { grid-template-columns: repeat(2, 1fr); } .filtros-cav .busca { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .filtros-cav { grid-template-columns: repeat(3, 1fr); } }
.vazio-filtro { grid-column: 1 / -1; padding: 14px; text-align: center; border: 1px dashed rgba(232,185,35,.35); border-radius: 10px; margin: 8px 0; }
.gm-ferramenta { align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.online-travado { color: #ffd76a; }

/* ===== v2.6: Liderança, barras HP/Cosmo/EXP na Party e contenção rígida dos sprites ===== */
/* Fix de enquadramento: a moldura recorta tudo; o sprite cabe inteiro (contain) e o balanço idle é curto */
.party-slot, .foco-sprite, .party-ret, .cav .av, .slot-eq .cav { overflow: hidden; isolation: isolate; }
.party-slot > svg, .party-slot > img, .foco-sprite > svg, .foco-sprite > img { max-width: 92%; max-height: 82%; width: auto; height: auto; object-fit: contain; display: block; flex: none; }
.party-slot img, .foco-sprite img, .cav img { object-fit: contain; }
.foco-sprite svg, .foco-sprite img { animation: flutua-contido 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes flutua-contido { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .foco-sprite svg, .foco-sprite img { animation: none; } }
/* Coroa do Líder */
.coroa { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px #ffcf5c); pointer-events: none; }
.cav { position: relative; }
.cav .coroa { top: 4px; font-size: 18px; }
.party-slot.lider { border-color: #ffcf5c; box-shadow: inset 0 0 12px #000a, 0 0 10px #ffcf5c88; }
.party-slot .slot-lider { position: absolute; bottom: 2px; right: 2px; z-index: 3; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid #ffcf5c88; background: rgba(20,16,40,.85); font-size: 11px; line-height: 20px; cursor: pointer; opacity: 0; filter: grayscale(1); }
.party-slot:hover .slot-lider, .party-slot .slot-lider:focus-visible { opacity: .9; }
.party-slot .slot-lider:hover { filter: none; background: #5a4410; }
@media (hover: none) { .party-slot .slot-lider { opacity: .8; width: 26px; height: 26px; } }
.slot-eq.lider .cav { border-color: #ffcf5c; box-shadow: 0 0 14px #ffcf5c66; }
.lider-on { pointer-events: none; text-align: center; }
.lider-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid #ffcf5c55; background: rgba(255,207,92,.07); }
.lider-eq small { flex-basis: 100%; }
.tt-lider { color: #ffcf5c; margin-top: 3px; }
/* Barras da Party com valor numérico */
.pbar > div { position: relative; height: 11px; }
.pbar > div > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; line-height: 1; }
.pbar.vida > div > div { background: linear-gradient(90deg, #22a447, #5be37d); }
.pbar.cosmo > div > div { background: linear-gradient(90deg, #1f6fe0, #5cc8ff); }
.pbar.xpp > div > div { background: linear-gradient(90deg, #e0a800, #ffe066); }
.pbar.arm > div { height: 6px; }
.pbar.arm > div > span { display: none; }
.slot-pb { display: block; text-align: center; font-size: 10px; color: var(--ouro, #ffcf5c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== v2.7: Portal do Santuário (tela de login) ===== */
.portal { --p-ouro: #e8c26a; --p-ouro2: #c9963a; --p-vidro: rgba(14, 12, 28, .86); min-height: 100vh; color: #e9e6ff; margin-bottom: -46px; }
.portal-faixa { display: flex; justify-content: space-between; gap: 12px; padding: 7px max(16px, 8vw); font-size: 11px; letter-spacing: 2px; color: var(--p-ouro); background: #07060f; border-bottom: 1px solid #ffffff12; }
.portal-faixa-dir { color: #8d8aa8; }
.portal-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px max(16px, 8vw);
  background: rgba(8, 7, 18, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff14; }
.portal-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; cursor: pointer; padding: 6px 14px; border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, #6a3cff55, transparent 70%); text-decoration: none; }
.portal-logo b { font: 800 22px Cinzel, serif; letter-spacing: 2px; background: linear-gradient(#fff6c8, #e8b923 55%, #a86d12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px #8a5cff); }
.portal-logo small { font: 600 10px Cinzel, serif; letter-spacing: 5px; color: #c9b8ff; }
.portal-links { display: flex; gap: 28px; }
.portal-links a { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #d7d3ee; cursor: pointer; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.portal-links a:hover { color: #fff; border-bottom-color: var(--p-ouro); }
.portal-acoes { display: flex; align-items: center; gap: 12px; }
.portal-ver { font-size: 11px; color: #8d8aa8; border: 1px solid #ffffff22; border-radius: 6px; padding: 6px 8px; }
.portal-entrar-top { background: transparent; color: #fff; border: 1px solid #ffffffaa; border-radius: 4px; padding: 10px 16px; font-size: 11px; font-weight: 800; letter-spacing: 2px; cursor: pointer; }
.portal-entrar-top:hover { background: #ffffff14; border-color: var(--p-ouro); color: var(--p-ouro); }
.portal-hero { position: relative; overflow: hidden; min-height: min(78vh, 720px); display: grid; grid-template-columns: 1fr minmax(320px, 400px); align-items: center; gap: 24px; padding: 40px max(16px, 8vw); }
.portal-ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.portal-heroi { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; transform: translateX(-12%); }
.portal-heroi > svg, .portal-heroi > img { width: min(380px, 34vw); height: auto; max-height: 64vh; object-fit: contain; filter: drop-shadow(0 0 22px #7a5cff) drop-shadow(0 12px 18px #000); animation: portal-flutua 5s ease-in-out infinite; }
.portal-aura { position: absolute; inset: 8% 14%; border-radius: 50%; background: radial-gradient(circle, #9b7bff66, #3a6bff22 50%, transparent 70%); filter: blur(10px); animation: pulsa-aura 4s ease-in-out infinite; }
@keyframes portal-flutua { 50% { transform: translateY(-10px); } }
.portal-reliquia { position: absolute; z-index: 1; left: 46%; top: 44%; font-size: 54px; color: #dfe7ff; text-shadow: 0 0 18px #7ab8ff, 0 0 40px #6a3cff; animation: portal-flutua 4s ease-in-out infinite reverse; pointer-events: none; }
.portal-card { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 30px 26px 26px; border-radius: 16px; background: var(--p-vidro);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid #ffffff1c; box-shadow: 0 20px 60px #000c, inset 0 1px 0 #ffffff14; }
.portal-tag { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--p-ouro); }
.portal-card h1 { margin: 2px 0 0; font: 800 28px Cinzel, serif; color: #fff; line-height: 1.15; }
.portal-card h1 span { color: var(--p-ouro); }
.portal-card p { margin: 0 0 8px; color: #b9b5d6; font-size: 14px; line-height: 1.5; }
.portal-card label { font-size: 12px; font-weight: 700; color: #e9e6ff; margin-top: 4px; }
.portal-card input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 8px; border: 1px solid #ffffff1f; background: #0a0914; color: #fff; font-size: 14px; }
.portal-card input:focus { outline: none; border-color: var(--p-ouro); box-shadow: 0 0 0 3px #e8c26a33; }
.portal-btn { margin-top: 14px; min-height: 46px; border: 0; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #2a1a05;
  background: linear-gradient(90deg, #f3d488, #d9a94e 60%, #b9822e); box-shadow: 0 6px 20px #c9963a44; transition: filter .15s, transform .15s; }
.portal-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.portal-btn span { margin-left: 6px; }
.portal-btn.carregando { opacity: .7; cursor: wait; }
.portal-links-card { text-align: center; font-size: 13px; color: #b9b5d6; margin-top: 8px; line-height: 1.6; }
.portal-links-card a { color: var(--p-ouro); cursor: pointer; text-decoration: none; }
.portal-links-card a:hover { text-decoration: underline; }
.portal-aviso { text-align: center; color: #8d8aa8; font-size: 11px; }
.portal-sec { padding: 46px max(16px, 8vw) 10px; background: linear-gradient(#07060f, #0b0a1a); }
.portal-sec h2 { font: 800 20px Cinzel, serif; letter-spacing: 3px; color: var(--p-ouro); margin: 0 0 18px; }
.portal-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.portal-noticia { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; background: #110f22; border: 1px solid #ffffff14; }
.portal-noticia small { color: var(--p-ouro); font-weight: 700; letter-spacing: 1px; }
.portal-noticia b { color: #fff; font-size: 15px; }
.portal-noticia p { margin: 0; color: #a9a5c6; font-size: 13px; line-height: 1.5; }
.portal-ic { font-size: 26px; }
.portal-rodape { padding: 26px 16px 70px; text-align: center; font-size: 12px; color: #6f6c8a; background: #0b0a1a; }
@media (max-width: 900px) {
  .portal-hero { grid-template-columns: 1fr; padding: 24px 16px 32px; min-height: 0; }
  .portal-heroi { transform: none; order: 0; margin-bottom: -40px; }
  .portal-heroi > svg, .portal-heroi > img { width: min(200px, 50vw); max-height: 30vh; }
  .portal-reliquia { display: none; }
  .portal-card { order: 1; }
  .portal-links { display: none; }
  .portal-faixa-dir, .portal-ver { display: none; }
  .portal-nav { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .portal-heroi > svg, .portal-heroi > img, .portal-reliquia, .portal-aura { animation: none; } }

/* v2.7.1: cavaleiro em pixel art do portal (arte própria em client/img/portal/heroi.png) */
.portal-heroi > img.portal-heroi-img { width: auto; height: min(62vh, 560px); max-width: 38vw; image-rendering: pixelated; filter: drop-shadow(0 0 18px #b9a6ff) drop-shadow(0 14px 16px #000); }
@media (max-width: 900px) { .portal-heroi > img.portal-heroi-img { height: 30vh; max-width: 60vw; } }

/* ===== v2.8: Medalhão alado (moldura das fotos/avatares dos jogadores) ===== */
.perfil-av.medalhao-anel { --mc: #8f88c8; --mb: #e4e0ff; border: 3px solid transparent;
  background: radial-gradient(circle, #1f2a6b, #0b0f24) padding-box,
    conic-gradient(from 210deg, var(--mb), var(--mc), #2b2650, var(--mc), var(--mb), #ffffff, var(--mb), var(--mc), #2b2650, var(--mb)) border-box;
  box-shadow: 0 0 0 1.5px #1e1a3c, inset 0 0 0 2px #1e1a3c, 0 0 10px color-mix(in srgb, var(--mb) 45%, transparent); }
.medalhao { --mc: #8f88c8; --mb: #e4e0ff; position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: calc(var(--s) * 1.72); height: calc(var(--s) * 1.1); filter: drop-shadow(0 3px 5px #000a); }
.medalhao .perfil-av.medalhao-anel { --mc: inherit; --mb: inherit; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1;
  border-width: max(3px, calc(var(--s) * .08)); }
.medalhao-asa { position: absolute; top: 0; width: calc(var(--s) * .66); height: calc(var(--s) * 1); z-index: 0; overflow: visible; transform-origin: 90% 62%; }
.medalhao-asa.esq { left: 0; }
.medalhao-asa.dir { right: 0; transform: scaleX(-1); }
/* animações das molduras especiais */
.medalhao.mold-anim-brilho { animation: medalhao-brilho 2s ease-in-out infinite; }
.medalhao.mold-anim-gira { animation: medalhao-brilho 2.4s ease-in-out infinite; }
.medalhao.mold-anim-gira .medalhao-asa.esq { animation: asa-bate 2.4s ease-in-out infinite; }
.medalhao.mold-anim-gira .medalhao-asa.dir { animation: asa-bate-dir 2.4s ease-in-out infinite; }
.medalhao.mold-anim-arco { animation: medalhao-brilho 1.6s ease-in-out infinite; }
.medalhao.mold-anim-arco .medalhao-anel { background: radial-gradient(circle, #1f2a6b, #0b0f24) padding-box, conic-gradient(#ff3df0, #ffcf5c, #7bd389, #3fa9f5, #ff3df0) border-box; }
@keyframes medalhao-brilho { 50% { filter: drop-shadow(0 3px 5px #000a) drop-shadow(0 0 10px var(--mb)); } }
@keyframes asa-bate { 50% { transform: rotate(-6deg); } }
@keyframes asa-bate-dir { 50% { transform: scaleX(-1) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .medalhao, .medalhao-asa { animation: none !important; } }
.moldura-card .medalhao { margin-top: 2px; }
/* v2.8 ajustes: asas maiores, espelho centrado e sem os estilos antigos (borda tracejada / fundo) no invólucro */
.medalhao { width: calc(var(--s) * 1.95); height: calc(var(--s) * 1.12); border: 0 !important; background: none !important; box-shadow: none !important; }
.medalhao-asa { width: calc(var(--s) * .82); height: calc(var(--s) * .98); top: 0; }
.medalhao-asa.dir { transform-origin: 50% 50%; }
.medalhao.mold-anim-gira .medalhao-asa.esq { transform-origin: 90% 62%; }
@keyframes asa-bate-dir { 50% { transform: scaleX(-1) rotate(-5deg); } }
/* v2.8: asa de anjo — mais alta que o anel, como nos medalhões alados */
.medalhao { width: calc(var(--s) * 2.05); height: calc(var(--s) * 1.24); }
.medalhao-asa { width: calc(var(--s) * .92); height: calc(var(--s) * 1.08); top: 0; }

/* ===== v2.8.1: capa no cabeçalho ===== */
header.topo.capa { display: block; padding: 0; overflow: hidden; background: #0b0820; border-bottom: 1px solid #e8b92366; backdrop-filter: none; -webkit-backdrop-filter: none; }
header.topo.capa .capa-link { display: block; cursor: pointer; line-height: 0; }
header.topo.capa img { display: block; width: 100%; height: clamp(150px, 26vw, 340px); object-fit: cover; object-position: 50% 56%; }
header.topo.capa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; pointer-events: none; background: linear-gradient(transparent, #0b0820e6); }
header.topo.capa .hamburguer { z-index: 2; top: 12px; transform: none; background: rgba(11, 8, 32, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
header.topo.capa img { object-position: 50% 46%; }

/* ===== v2.9: Auto-jogar ===== */
.auto-card h3 { display: flex; align-items: center; gap: 8px; }
.auto-form { display: grid; gap: 10px; }
.auto-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.auto-form select { width: 100%; min-height: 40px; }
.auto-form input[type=range] { width: 100%; accent-color: var(--ouro, #e8b923); min-height: 32px; }
.auto-form #auto-valor { color: var(--ouro, #e8b923); font-size: 16px; }
.auto-resumo { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0; font-size: 14px; }
.estagio-acoes { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ===== v2.10: avisos no topo, caixinha de recompensas, badges de alerta e Guia do Jogador ===== */
#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(520px, calc(100% - 24px)); pointer-events: none; }
#toasts .toast { position: static; transform: none; bottom: auto; pointer-events: auto; max-width: 100%; animation: toast-desce .35s ease-out both;
  background: rgba(16, 20, 52, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px #000a, 0 0 0 1px #e8b92355; }
#toasts .toast.saindo { animation: toast-sobe .4s ease-in forwards; }
@keyframes toast-desce { from { opacity: 0; transform: translateY(-18px) scale(.97); } }
@keyframes toast-sobe { to { opacity: 0; transform: translateY(-14px); } }
.toast-premio { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 1px solid var(--ouro, #e8b923) !important;
  background: linear-gradient(180deg, rgba(42, 30, 8, .95), rgba(16, 20, 52, .95)) !important; box-shadow: 0 10px 30px #000a, 0 0 22px #e8b92355 !important; }
.tp-tit { font-family: Cinzel, serif; color: var(--ouro-c, #ffe58a); font-size: 15px; letter-spacing: .5px; }
.tp-itens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tp-item { padding: 4px 10px; border-radius: 20px; background: #ffffff10; border: 1px solid #ffffff22; font-size: 13px; font-weight: 700; animation: tp-pop .4s ease-out both; }
.tp-item:nth-child(2) { animation-delay: .06s; } .tp-item:nth-child(3) { animation-delay: .12s; } .tp-item:nth-child(4) { animation-delay: .18s; } .tp-item:nth-child(n+5) { animation-delay: .24s; }
@keyframes tp-pop { from { opacity: 0; transform: scale(.6); } }
.tp-extra { color: var(--dim, #9aa3c7); }
.badge.alerta { position: relative; min-width: 18px; text-align: center; box-shadow: 0 0 0 2px #ff4d6d44; animation: badge-pulsa 1.6s ease-in-out infinite; }
.badge.alerta::before { content: '!'; margin-right: 2px; font-weight: 900; }
@keyframes badge-pulsa { 50% { box-shadow: 0 0 0 5px #ff4d6d22; transform: scale(1.08); } }
.card.online-alerta { box-shadow: 0 0 16px #ff4d6d55 !important; }
.card h3 .badge.alerta { margin-left: 8px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .badge.alerta, .tp-item, #toasts .toast { animation: none !important; } }
.guia-banner { --c: #7b8cff; }
.guia-passo h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guia-passo h3 small { margin-left: auto; }
.guia-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1f2a6b; border: 1px solid var(--ouro, #e8b923); color: var(--ouro, #e8b923); font-size: 14px; flex: none; }
.guia-passo.feito .guia-n { background: #1f6b3a; border-color: #7bd389; color: #d5ffe0; }
.guia-tarefas { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.guia-tarefas li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-height: 40px; border-radius: 8px; background: #ffffff08; border: 1px solid #ffffff14; cursor: pointer; }
.guia-tarefas li:hover { border-color: var(--ouro, #e8b923); }
.guia-tarefas li.ok { opacity: .75; }
.guia-tarefas li em { margin-left: auto; font-style: normal; color: var(--ouro, #e8b923); font-size: 12px; }

/* ===== v2.11: Auto-jogar só EXP — comparação dos modos ===== */
.auto-modos { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 6px 0 10px; }
@media (min-width: 640px) { .auto-modos { grid-template-columns: 1fr 1fr; } }
.auto-modos > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; background: #ffffff08; border: 1px solid #ffffff18; font-size: 12.5px; }
.auto-modos > div:first-child { border-color: #7b8cff66; }
.auto-modos > div:last-child { border-color: #e8b92366; }
.auto-modos b { font-size: 14px; }
.auto-evento { margin-left: 8px; background: #3a2a05; border: 1px solid var(--ouro, #e8b923); color: var(--ouro, #e8b923); }

/* ===== v2.12: Alerta visual de Ascensão pronta ===== */
.asc-badge { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; padding: 2px 8px; border-radius: 20px;
  font: 800 10px Nunito, sans-serif; letter-spacing: .5px; color: #2a1a05; background: linear-gradient(90deg, #fff3b0, #ffcf5c, #ff9ff3, #ffcf5c);
  background-size: 200% 100%; box-shadow: 0 0 10px #ffcf5c, 0 0 2px #fff; animation: asc-pulso 1.6s ease-in-out infinite, asc-brilho 3s linear infinite; pointer-events: none; }
.asc-badge.inline { position: static; transform: none; display: inline-block; margin-left: 8px; vertical-align: middle; }
@keyframes asc-pulso { 50% { box-shadow: 0 0 18px #ffcf5c, 0 0 6px #fff; filter: brightness(1.15); } }
@keyframes asc-brilho { to { background-position: 200% 0; } }
.cav.asc-pronta { border-color: #ffcf5c !important; box-shadow: 0 0 14px #ffcf5c77; padding-top: 22px; }
.cav.asc-pronta .coroa { top: 22px; }
.party-slot .slot-asc { position: absolute; bottom: 2px; left: 2px; z-index: 3; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #ffcf5c; background: radial-gradient(circle, #5a4410, #2a1a05); font-size: 11px; line-height: 20px; animation: asc-pulso 1.6s ease-in-out infinite; }
@media (hover: none) { .party-slot .slot-asc { width: 26px; height: 26px; } }
.badge.asc { background: linear-gradient(90deg, #ffcf5c, #ff9ff3); color: #2a1a05; animation: asc-pulso 1.6s ease-in-out infinite; }
.asc-card-pronta { border-color: #ffcf5c !important; box-shadow: 0 0 18px #ffcf5c55 !important; }
.asc-foco { animation: asc-pulso 1s ease-in-out 3; }
.asc-fusao { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 10px 0; }
.asc-fusao > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.asc-fusao ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
@media (max-width: 480px) { .asc-fusao { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .asc-badge, .slot-asc, .badge.asc, .asc-foco { animation: none !important; } }
.cav.asc-pronta > .tier, .cav.asc-pronta > .cav-arma { top: 24px !important; }

/* ===== v3.0: Pop-up de alerta integrado (topo) + Configurações ===== */
.toast-alerta { display: flex !important; align-items: center; gap: 10px; text-align: left; border: 1px solid #ff4d6d99 !important; padding: 10px 14px !important; }
.toast-alerta .ta-ic { position: relative; font-size: 24px; flex: none; }
.toast-alerta .ta-ic::after { content: ''; position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 2px #10143a; animation: badge-pulsa 1.6s ease-in-out infinite; }
.toast-alerta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-alerta b { font-size: 14px; }
.toast-alerta small { color: var(--dim, #9aa3c7); font-size: 12px; }
.toast-alerta em { margin-left: auto; font-style: normal; color: var(--ouro, #e8b923); font-size: 12px; white-space: nowrap; }
.alerta-ascensao { border-color: #ffcf5c !important; box-shadow: 0 10px 30px #000a, 0 0 18px #ffcf5c55 !important; }
.alerta-online, .alerta-missao { border-color: #e8b923 !important; }
.alerta-mercado, .alerta-trade { border-color: #7bd389 !important; }
.alerta-wb { border-color: #ff7a45 !important; }
.cfg-linha { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid #ffffff12; }
.cfg-linha label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cfg-linha input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ouro, #e8b923); }
.cfg-linha input[type=range] { width: 100%; accent-color: var(--ouro, #e8b923); }
#toasts .toast-alerta { width: 100%; box-sizing: border-box; }

/* ===== v3.2: Classe Diamante e tabela de taxas do portal ===== */
.tag-diamante { background: linear-gradient(90deg, #7fe3ff22, #c9b8ff33, #7fe3ff22); box-shadow: 0 0 8px #7fe3ff55; }
.taxas-portal { margin: 8px 0; font-size: 13px; }
.taxas-portal .linha-diamante td { background: #7fe3ff10; }

/* v3.5: Gold Boss */
.gold-banner { border-color: #ffc53188; background: linear-gradient(135deg, #3a2a0a, #1a1430 70%); }
.gold-regras { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.gold-regras .tag.pos { color: #5fd38d; border-color: #5fd38d; }
.gold-regras .tag.neg { color: #ff6b6b; border-color: #ff6b6b; }
.gold-nivel { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 6px 0; border: 1px solid #ffc53144; border-radius: 10px; background: rgba(255, 197, 49, .05); }
.gold-nivel.vencido { border-color: #5fd38d66; }
.gold-nivel.bloq { opacity: .5; }
.gold-n { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(#ffe27a, #b8860b); color: #2a1d00; font-weight: 800; }
.gold-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gold-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gold-premio { color: #ffd84d; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .gold-nivel { flex-wrap: wrap; } .gold-premio { margin-left: 42px; } }

/* v3.6: Classe Mítica, Ascensão por Tier igual e Forja Estelar */
.tag-mitica { background: linear-gradient(90deg, #c77dff33, #7df9ff33, #ff9dfc33, #c77dff33); background-size: 300% 100%; box-shadow: 0 0 10px #c77dff88; animation: miticaBrilho 4s linear infinite; }
@keyframes miticaBrilho { to { background-position: 300% 0; } }
.asc-regra { margin: 8px 0; padding: 8px 10px; border: 1px dashed #ffd84d66; border-radius: 8px; background: rgba(255, 216, 77, .05); line-height: 1.6; }
.copias-tier { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.forjar-mitica { box-shadow: 0 0 14px #c77dff66; background: linear-gradient(160deg, #c77dff1a, #7df9ff12); }

/* v3.7: Títulos, Nível 70, requisitos, VIP 3x e nova arte das molduras */
.titulo-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--tc); border: 1px solid var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); white-space: nowrap; vertical-align: middle; }
.info-jogador .titulo-chip { margin: 2px 0 4px; }
.perfil-titulo .titulo-chip { font-size: 13px; padding: 2px 10px; }
.titulos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.titulo-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--tc) 6%, transparent); }
.titulo-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.titulo-card .ic { font-size: 24px; }
.titulo-card b { color: var(--tc); }
.titulo-card.bloq { opacity: .6; }
.titulo-card.sel { box-shadow: 0 0 12px color-mix(in srgb, var(--tc) 60%, transparent); }
.req-uso { margin: 6px 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.req-uso.ok { background: rgba(95, 211, 141, .08); border: 1px solid #5fd38d55; }
.req-uso.bloq { background: rgba(255, 94, 122, .08); border: 1px solid #ff5e7a66; }
.req-lock { color: #ff8fa3; font-weight: 700; font-size: 10px; }
.btn.vel3 { border-color: #ffd84d; color: #ffd84d; box-shadow: 0 0 8px #ffd84d55; }
.pet-cat { font-weight: 700; font-size: 11px; }
.loja-moldura { display: grid; place-items: center; min-height: 64px; }
.medalhao.com-orn { position: relative; }
.mold-orn { position: absolute; left: 50%; top: calc(var(--s) * -0.28); width: calc(var(--s) * 0.95); height: calc(var(--s) * 0.48); transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 0 3px var(--mb)); z-index: 3; }
.mold-orn.orn-louro { top: auto; bottom: calc(var(--s) * -0.06); transform: translateX(-50%) scaleY(-1); width: calc(var(--s) * 1.15); height: calc(var(--s) * 0.58); }
.mold-orn.orn-estrelas { animation: ornGira 6s linear infinite; }
@keyframes ornGira { 50% { transform: translateX(-50%) scale(1.08); opacity: .8; } }
.mold-orn.orn-aureola { animation: ornFlutua 3s ease-in-out infinite; }
@keyframes ornFlutua { 50% { transform: translateX(-50%) translateY(-2px); } }

/* v3.8: EXP com %, boosts ativos e grupos da Loja de Gemas */
.exp-conta { cursor: help; outline: none; }
.exp-num { color: var(--dim, #a9b0d6); font-size: 11px; white-space: nowrap; }
.exp-num b { color: #9fe870; }
.boosts-ativos { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.boost-ativo { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid #9fe87088; background: rgba(159, 232, 112, .1); color: #c9f7a8; white-space: nowrap; }
.loja-grupo { margin: 14px 0 6px; font-size: 15px; letter-spacing: .5px; }

.exp-conta .exp-num { display: block; text-align: right; margin-top: 1px; }
.exp-pct { color: #9fe870; font-size: 12px; white-space: nowrap; }
.exp-conta .linha > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }


/* v3.8: o painel lateral não pode crescer além da coluna (textos longos quebram linha) */
.layout.v23 .info-topo { grid-template-columns: minmax(0, 1fr); }
.info-topo > * { min-width: 0; }
.exp-conta .exp-num { white-space: normal; }


/* v3.9: Labirinto de Gêmeos — ilusões interestelares, colunas gregas, vidro escuro e neon */
.lab-banner { position: relative; overflow: hidden; border-color: #9d7bff88; background: radial-gradient(circle at 20% 10%, #3b2a7a66, transparent 60%), radial-gradient(circle at 85% 80%, #1e5a8a55, transparent 55%), linear-gradient(160deg, #120d2a, #0b1024); }
.lab-banner::before, .lab-banner::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26px; background: repeating-linear-gradient(90deg, #ffffff10 0 4px, #ffffff05 4px 8px); border-left: 2px solid #ffffff18; border-right: 2px solid #ffffff18; opacity: .7; }
.lab-banner::before { left: 10px; } .lab-banner::after { right: 10px; }
.lab-banner h2, .lab-banner p, .lab-banner .row, .lab-banner .gold-regras { position: relative; z-index: 1; padding: 0 30px; }
.lab-estrelas { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 30%, #c9b8ff, transparent), radial-gradient(1px 1px at 40% 70%, #7df9ff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 25% 85%, #ff9dfc, transparent); animation: labBrilho 4s ease-in-out infinite alternate; }
@keyframes labBrilho { to { opacity: .4; } }
.lab-area { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .lab-area { grid-template-columns: minmax(0, 1fr); } }
.lab-mapa-box { padding: 12px; border-radius: 16px; border: 1px solid #9d7bff66; background: linear-gradient(160deg, rgba(30, 20, 70, .55), rgba(8, 12, 30, .75)); backdrop-filter: blur(6px); box-shadow: 0 0 24px #9d7bff33, inset 0 0 30px #00000088; }
.lab-hud { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; margin-bottom: 8px; font-size: 13px; color: #d8ccff; }
.lab-hud b { color: #fff; }
.lab-mapa { --n: 21; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 560px); margin: 0 auto; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid #7df9ff44; box-shadow: 0 0 18px #7df9ff22; touch-action: manipulation; }
.lab-mapa.bate { animation: labBate .18s; }
@keyframes labBate { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.lc { position: relative; display: grid; place-items: center; font-size: clamp(8px, 2.2vw, 15px); line-height: 1; overflow: hidden; }
.lc.nevoa { background: #05060f; }
.lc.parede { background: linear-gradient(180deg, #2a2457, #1a1638); box-shadow: inset 0 0 0 1px #3d357a55; }
.lc.chao { background: radial-gradient(circle, #1b2147, #121633); }
.lc.chao::after { content: ''; position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #7df9ff55; }
.lc.bau, .lc.saida, .lc.eu { z-index: 1; }
.lc.bau { background: radial-gradient(circle, #4a3a12, #121633 75%); }
.lc.bau.raro { background: radial-gradient(circle, #3d1f6b, #121633 75%); }
.lc.saida { background: radial-gradient(circle, #6a2d8a, #121633 80%); animation: labPortal 2s ease-in-out infinite; }
.lc.saida.aberta { background: radial-gradient(circle, #1f8a9a, #121633 80%); }
@keyframes labPortal { 50% { box-shadow: inset 0 0 10px #ff9dfc; } }
.lc.eu { background: radial-gradient(circle, #7df9ff66, #121633 75%); box-shadow: 0 0 10px #7df9ff; }
.lc.eu svg, .lc.eu img { width: 100% !important; height: 100% !important; object-fit: contain; }
.lab-dpad { display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(2, 46px); grid-template-areas: ". n ." "o s l"; gap: 6px; justify-content: center; margin: 12px auto 4px; }
.lab-dpad .dp { font-size: 20px; border-radius: 12px; border: 1px solid #9d7bff88; background: linear-gradient(180deg, #2b2160, #171236); color: #e8deff; box-shadow: 0 0 10px #9d7bff44; cursor: pointer; user-select: none; touch-action: manipulation; }
.lab-dpad .dp:active { transform: scale(.94); background: #3b2d80; }
.lab-dpad .n { grid-area: n; } .lab-dpad .o { grid-area: o; } .lab-dpad .s { grid-area: s; } .lab-dpad .l { grid-area: l; }
.lab-dica { text-align: center; font-size: 12px; }
.lab-concluido { border-color: #7df9ff88; box-shadow: 0 0 18px #7df9ff33; }
.lab-regras { padding-left: 18px; line-height: 1.5; }

.lab-area { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1500px) { .lab-area { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); } }


/* v3.9: contraste parede x chão */
.lc.parede { background: linear-gradient(180deg, #5a4bb0, #3a3080); box-shadow: inset 0 1px 0 #9d8bff88, inset 0 -2px 0 #1c1645; }
.lc.chao { background: radial-gradient(circle, #141a3d, #0c1029); }


/* v3.10: Trabalho (AFK) e Exploração (expedições) */
.trab-banner { border-color: #ffd84d66; background: linear-gradient(160deg, #2a210a, #141026 70%); }
.trab-trava { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: #ff5e7a22; border: 1px solid #ff5e7a; color: #ffb3c1; font-weight: 800; letter-spacing: .5px; animation: trabPisca 2s ease-in-out infinite; }
@keyframes trabPisca { 50% { opacity: .65; } }
.trab-painel { display: grid; gap: 6px; margin: 10px 0; }
.trab-painel > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.trab-painel span { color: var(--dim, #a9b0d6); }
.trab-painel input[type=range] { width: min(220px, 50vw); vertical-align: middle; }
.trab-acum { color: #ffd84d; font-size: 1.15em; }
.trab-ultimo.ok { border-color: #5fd38d88; } .trab-ultimo.parcial { border-color: #ff9f4388; }
.trab-tab tr.meu td { background: rgba(255, 216, 77, .08); }
.exp-banner { border-color: #5fd38d66; background: linear-gradient(160deg, #0f2a1c, #101428 70%); }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.exp-card { border-left: 4px solid var(--c); display: flex; flex-direction: column; gap: 6px; }
.exp-card.coletada { opacity: .55; }
.exp-topo { display: flex; gap: 10px; align-items: center; } .exp-topo > div { display: flex; flex-direction: column; gap: 2px; }
.exp-req .tag { margin: 2px 0; }
.exp-premio { font-size: 13px; }
.exp-grupo { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); font-size: 11px; }
.exp-chip i { cursor: pointer; font-style: normal; color: #ff8fa3; margin-left: 2px; }
.exp-escolha { display: grid; gap: 6px; max-height: 55vh; overflow: auto; text-align: left; }
.exp-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; }
.exp-op.sel { border-color: #5fd38d; background: rgba(95, 211, 141, .08); }
.exp-op span { display: flex; flex-direction: column; } .exp-op small { color: var(--dim, #a9b0d6); }

/* v3.15: arcos da Campanha */
.arcos-lista { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.arco-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); }
.arco-chip.ok { border-color: #5fd38d; color: #c9f7d8; }
.arco-chip small { opacity: .75; }
.arcos-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 8px 0 12px; }
.arco-card { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.arco-card.ok { border-color: #5fd38d88; }
.arco-card small { color: var(--dim, #a9b0d6); }
.arco-card .arco-prog { color: #ffd84d; }

/* v3.16: botão de atalho nos pop-ups */
.toast-alerta .ta-ir { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid #ffd84d; background: rgba(255, 216, 77, .12); color: #ffd84d; font-weight: 800; font-size: 11px; letter-spacing: .4px; cursor: pointer; }
.toast-alerta .ta-ir:hover { background: rgba(255, 216, 77, .25); }


/* v3.16: selos por níveis */
.selo-niveis { display: grid; gap: 4px; margin-top: 6px; width: 100%; }
.selo-nv { display: grid; grid-template-columns: 40px 1fr; gap: 0 6px; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); text-align: left; font-size: 11px; opacity: .65; }
.selo-nv b { grid-row: span 2; align-self: center; }
.selo-nv em { font-style: normal; color: #9fe870; }
.selo-nv.ok { opacity: 1; border-color: #5fd38d66; }
.selo-nv.atual { opacity: 1; border-color: #ffd84d88; }
.selo-nivel { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #ffd84d22; color: #ffd84d; border: 1px solid #ffd84d; }
.selo.max { box-shadow: 0 0 14px #ffd84d55; }


/* v3.16: Rei do Dano */
.rei-dano { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #ffd84d66; background: linear-gradient(90deg, rgba(255,216,77,.12), transparent); }
.rei-dano.eu { border-color: #ffd84d; box-shadow: 0 0 12px #ffd84d55; }
.rank tr.top5 td:first-child { font-size: 15px; }


/* v3.16: cenários dinâmicos da tela de luta (fundo temático por modo, saga e arco) */
.arena.cenario { position: relative; overflow: hidden; isolation: isolate; }
.arena.cenario > * { position: relative; z-index: 2; }
.arena.cenario::before, .arena.cenario::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; }
.arena.cenario::before { top: 0; bottom: 0; opacity: .9; }
.arena.cenario::after { bottom: 0; height: 22%; }
/* Arena das Constelações: arquibancadas e holofotes */
.cenario-arena { background: radial-gradient(ellipse at 50% 120%, #ffd84d33, transparent 60%), linear-gradient(#1a1440, #0a0820) !important; }
.cenario-arena::before { background: repeating-linear-gradient(90deg, transparent 0 22px, #ffffff08 22px 24px), radial-gradient(ellipse 40% 60% at 20% -10%, #fff6c233, transparent 70%), radial-gradient(ellipse 40% 60% at 80% -10%, #fff6c233, transparent 70%); }
.cenario-arena::after { background: linear-gradient(#5a4a2a, #2a2010); border-top: 3px solid #ffd84d55; }
/* Ruas da Cidade: prédios, janelas acesas e asfalto */
.cenario-cidade { background: linear-gradient(#0d1430 0%, #23284d 55%, #3a2f45 100%) !important; }
.cenario-cidade::before { background: linear-gradient(transparent 35%, #0b0e1d 35%) 0 0 / 70px 100%, repeating-linear-gradient(90deg, #11152b 0 50px, #171c38 50px 90px, #0e1226 90px 130px); clip-path: polygon(0 40%, 8% 40%, 8% 25%, 18% 25%, 18% 45%, 30% 45%, 30% 20%, 40% 20%, 40% 50%, 55% 50%, 55% 30%, 66% 30%, 66% 42%, 78% 42%, 78% 18%, 88% 18%, 88% 38%, 100% 38%, 100% 100%, 0 100%); }
.cenario-cidade::after { background: repeating-linear-gradient(90deg, #2a2a33 0 40px, #e8c66a55 40px 60px, #2a2a33 60px 100px), #2a2a33; background-size: 100% 4px, 100% 100%; background-repeat: no-repeat; background-position: 0 50%, 0 0; }
/* Templos de mármore: colunas gregas */
.cenario-santuario { background: radial-gradient(ellipse at 50% 0%, #ffe9a855, transparent 60%), linear-gradient(#3a2f6b, #120d2a) !important; }
.cenario-santuario::before { background: repeating-linear-gradient(90deg, transparent 0 7%, #e8e2d433 7% 8.5%, #f4efe344 8.5% 10.5%, #e8e2d433 10.5% 12%, transparent 12% 16.6%); mask: linear-gradient(transparent 12%, #000 18%, #000 80%, transparent); }
.cenario-santuario::after { background: linear-gradient(#e8e2d455, #8a826f66); border-top: 4px solid #f4efe366; }
/* Ruínas geladas do norte: montanhas, aurora e neve */
.cenario-norte { background: linear-gradient(#0a1830, #1d4a6e 60%, #4f7fa6) !important; }
.cenario-norte::before { background: radial-gradient(ellipse 60% 20% at 40% 15%, #5fd38d44, transparent 70%), radial-gradient(ellipse 50% 15% at 70% 10%, #7df9ff33, transparent 70%), linear-gradient(135deg, transparent 55%, #dfefff55 55% 60%, #8fb6d655 60%) 0 100% / 33% 60% repeat-x, linear-gradient(225deg, transparent 55%, #dfefff55 55% 60%, #8fb6d655 60%) 16% 100% / 33% 60% repeat-x; }
.cenario-norte::after { background: linear-gradient(#e6f2fbaa, #8fb6d6aa); }
/* Templos submersos: raios de luz, bolhas e corais */
.cenario-mares { background: linear-gradient(#0b8fb3, #05587a 45%, #022a3a) !important; }
.cenario-mares::before { background: repeating-linear-gradient(100deg, #ffffff10 0 2%, transparent 2% 8%), radial-gradient(circle at 15% 70%, #ffffff33 0 3px, transparent 4px), radial-gradient(circle at 80% 55%, #ffffff33 0 4px, transparent 5px), radial-gradient(circle at 60% 80%, #ffffff22 0 2px, transparent 3px); }
.cenario-mares::after { background: radial-gradient(ellipse 12% 80% at 10% 100%, #ff7a8a99, transparent), radial-gradient(ellipse 10% 70% at 88% 100%, #ffb34799, transparent), linear-gradient(#c2a36b, #6b5530); }
/* Mundo inferior: chamas, névoa roxa e rio */
.cenario-submundo { background: linear-gradient(#000, #2a0f3d 60%, #160926) !important; }
.cenario-submundo::before { background: radial-gradient(ellipse 30% 50% at 10% 100%, #ff6b3533, transparent 70%), radial-gradient(ellipse 30% 50% at 90% 100%, #ff6b3533, transparent 70%), radial-gradient(ellipse 80% 30% at 50% 0%, #a46bf033, transparent 70%); animation: cenaChama 3s ease-in-out infinite alternate; }
.cenario-submundo::after { background: linear-gradient(#3b1d5c, #0b0414); box-shadow: inset 0 6px 12px #a46bf066; }
@keyframes cenaChama { to { opacity: .55; } }
/* Torre Celeste: céu estrelado e plataforma */
.cenario-torre { background: radial-gradient(ellipse at 50% 100%, #7b8cff33, transparent 60%), linear-gradient(#05061a, #1b1f4d) !important; }
.cenario-torre::before { background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 60%, #c9d0ff, transparent), radial-gradient(1px 1px at 55% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 15%, #fff, transparent), radial-gradient(1px 1px at 90% 50%, #c9d0ff, transparent); }
.cenario-torre::after { background: linear-gradient(#7b8cff44, #1b1f4d); border-top: 2px solid #7b8cff99; }
/* Coliseu: arcos de pedra e areia */
.cenario-coliseu { background: linear-gradient(#ff9f4333, transparent 40%), linear-gradient(#5a3a22, #2a1a10) !important; }
.cenario-coliseu::before { background: radial-gradient(ellipse 4% 9% at 50% 46%, #1a0f08 98%, transparent) 0 0 / 12% 100%, linear-gradient(#8a6a4a66, #5a3a2266); mask: linear-gradient(#000 60%, transparent 80%); }
.cenario-coliseu::after { background: linear-gradient(#d9b27a, #a5824f); }
/* World Boss: covil vulcânico */
.cenario-worldboss { background: radial-gradient(ellipse at 50% 100%, #ff3d6e55, transparent 60%), linear-gradient(#1a0508, #3a0a12) !important; }
.cenario-worldboss::before { background: radial-gradient(circle at 20% 80%, #ff6b3555 0 6%, transparent 12%), radial-gradient(circle at 78% 70%, #ff6b3544 0 5%, transparent 10%), linear-gradient(160deg, transparent 60%, #2a0508 60%) , linear-gradient(200deg, transparent 60%, #2a0508 60%); }
.cenario-worldboss::after { background: linear-gradient(#ff6b3577, #2a0508); }
/* Gold Boss: cofre reluzente e montanhas de moedas */
.cenario-cofre { background: radial-gradient(ellipse at 50% 30%, #ffd84d44, transparent 60%), linear-gradient(#2a1d05, #120c02) !important; }
.cenario-cofre::before { background: radial-gradient(circle at 50% 35%, transparent 18%, #b8860b55 18% 20%, transparent 20% 24%, #b8860b33 24% 25%, transparent 25%), repeating-linear-gradient(90deg, #ffd84d0d 0 2px, transparent 2px 30px); }
.cenario-cofre::after { height: 30%; background: radial-gradient(ellipse 20% 70% at 15% 100%, #ffd23f 0 40%, #b8860b 70%, transparent 71%), radial-gradient(ellipse 25% 80% at 85% 100%, #ffd23f 0 40%, #b8860b 70%, transparent 71%), radial-gradient(ellipse 18% 50% at 50% 100%, #ffe27a 0 40%, #b8860b 70%, transparent 71%); }
/* Labirinto de Gêmeos: dimensões estelares */
.cenario-gemeos { background: radial-gradient(circle at 30% 40%, #9d7bff44, transparent 50%), radial-gradient(circle at 70% 60%, #7df9ff33, transparent 50%), linear-gradient(#05030f, #120a2a) !important; }
.cenario-gemeos::before { background: conic-gradient(from 0deg at 50% 50%, transparent, #9d7bff22, transparent 30%, #7df9ff22, transparent 60%, #ff9dfc22, transparent); animation: cenaGira 30s linear infinite; inset: -50%; top: -50%; bottom: -50%; }
.cenario-gemeos::after { background: linear-gradient(transparent, #9d7bff33); }
@keyframes cenaGira { to { transform: rotate(360deg); } }
.arena.cenario > .cenario-nome { position: absolute; top: 6px; right: 10px; z-index: 3; font-size: 10px; letter-spacing: 1px; opacity: .7; text-transform: uppercase; }

/* v3.17: cabeçalho de status do servidor na tela de login */
.portal-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; padding: 7px max(16px, 4vw); font-size: 12px; letter-spacing: .5px; color: #cfd3ff; background: linear-gradient(90deg, #0a0918, #141236 50%, #0a0918); border-bottom: 1px solid #e8c26a33; font-variant-numeric: tabular-nums; }
.portal-status .ps-item { padding: 0 14px; white-space: nowrap; }
.portal-status .ps-item + .ps-item { border-left: 1px solid #ffffff22; }
.portal-status b { color: #fff; }
.portal-status .ps-on { color: #5fd38d; } .portal-status .ps-man { color: #ffb347; } .portal-status .ps-off { color: #aab; }
.portal-status .ps-bonus { color: #ffd84d; text-shadow: 0 0 8px #ffd84d66; }
@media (max-width: 640px) { .portal-status { font-size: 11px; justify-content: flex-start; } .portal-status .ps-item { padding: 0 8px; } .portal-status .ps-item + .ps-item { border-left: 0; } }

/* v3.18: cabeçalho do servidor fixo no topo (login e jogo) */
#status-global.status-fixo { position: fixed; top: 0; left: 0; right: 0; z-index: 960; box-shadow: 0 2px 10px #0008; min-height: 30px; align-items: center; }
body.com-status { padding-top: 30px; }
body.com-status #toasts { top: 44px; }
body.com-status .layout.v23 > aside.col-dir { top: 30px; }
@media (max-width: 640px) { body.com-status { padding-top: 46px; } body.com-status #toasts { top: 58px; } body.com-status .layout.v23 > aside.col-dir { top: 46px; }
  #status-global.status-fixo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; min-height: 46px; } #status-global.status-fixo::-webkit-scrollbar { display: none; } }
/* v3.18: Display Marquee na base (ou topo) da capa */
header.topo.capa { position: relative; }
.marquee-slot { position: absolute; left: 0; right: 0; z-index: 3; display: flex; align-items: center; height: 30px; background: linear-gradient(90deg, #07061280, #0c0a24e6 12%, #0c0a24e6 88%, #07061280); border-top: 1px solid #e8b92355; border-bottom: 1px solid #e8b92355; font-size: 13px; color: #f1ecff; overflow: hidden; line-height: 1; }
.marquee-slot.mq-base { bottom: 0; } .marquee-slot.mq-topo { top: 0; } .marquee-slot.mq-off, .marquee-slot:empty { display: none; }
.mq-rotulo { flex: none; padding: 0 12px; height: 100%; display: flex; align-items: center; font-weight: 700; font-size: 11px; letter-spacing: 1px; color: #1a1205; background: linear-gradient(#ffe27a, #e8b923); z-index: 1; }
.mq-janela { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center; mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.mq-trilho { display: flex; white-space: nowrap; will-change: transform; }
.mq-bloco { display: inline-flex; align-items: center; }
.mq-item { padding: 0 6px; } .mq-sep { color: #e8b923; padding: 0 10px; opacity: .8; }
.mq-invocacao { color: #ffe9a8; } .mq-titulo { color: #ffd84d; } .mq-ascensao { color: #ff9dfc; } .mq-worldboss { color: #ff8fa3; } .mq-aviso { color: #7df9ff; font-weight: 600; }
@media (max-width: 640px) { .marquee-slot { height: 26px; font-size: 12px; } .mq-rotulo { padding: 0 8px; font-size: 10px; } }
/* v3.18: atalhos pós-batalha */
.pos-atalhos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 4px; padding-top: 10px; border-top: 1px dashed #ffffff22; }
.pos-atalhos .btn { flex: 1 1 200px; }
.pos-atalhos .cura-ok b { color: #5fd38d; }

/* v3.19: botão (+) das gemas, poções de combate, mute de BGM e Loja Monetária */
.gemas-mais { margin-left: 6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ffd84d; background: linear-gradient(#ffe27a, #e8b923); color: #1a1205; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; font-size: 14px; vertical-align: middle; }
.gemas-mais:hover { filter: brightness(1.15); box-shadow: 0 0 8px #ffd84d88; }
.pocoes-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ffffff22; }
.pocoes-bar select { max-width: 260px; }
.btn.mudo { opacity: .75; border-style: dashed; }
.pos-acoes { flex-wrap: wrap; justify-content: center; }
.cartoes-mensais { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.cartao-mensal { border-radius: 14px; padding: 16px; border: 1px solid var(--cmc, #c9d1d9); background: linear-gradient(160deg, color-mix(in srgb, var(--cmc, #c9d1d9) 22%, #0e1330), #0a0d22); display: flex; flex-direction: column; gap: 8px; }
.cartao-mensal.cm-prata { --cmc: #c9d1d9; } .cartao-mensal.cm-ouro { --cmc: #e8b923; } .cartao-mensal.cm-diamante { --cmc: #7df9ff; }
.cartao-mensal.ativo { box-shadow: 0 0 0 2px var(--cmc), 0 0 18px color-mix(in srgb, var(--cmc) 45%, transparent); }
.cartao-mensal ul { margin: 0; padding-left: 18px; flex: 1; line-height: 1.6; font-size: 13px; }
.cm-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cm-topo h3 { margin: 0; font-size: 15px; } .cm-ic { font-size: 26px; }
.pacotes-gemas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pacote-gemas { border: 1px solid #ffffff22; border-radius: 12px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; background: #0e1330; }
.pg-qtd { font-size: 18px; font-weight: 700; color: #7df9ff; }

/* v3.20: barra social fixa no rodapé (largura total): Chat Global · Amigos · conversas privadas */
#chat-global { left: 0 !important; right: 0; transform: none !important; width: auto !important; border-radius: 0 !important; display: flex; flex-direction: column; pointer-events: none; background: none !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
#chat-global > * { pointer-events: auto; }
body.com-social { padding-bottom: 46px; }
.social-barra { display: flex; gap: 6px; align-items: stretch; padding: 5px 8px; background: linear-gradient(#141236f2, #0a0918f7); border-top: 1px solid #e8b92366; box-shadow: 0 -4px 14px #0008; overflow-x: auto; scrollbar-width: none; }
.social-barra::-webkit-scrollbar { display: none; }
.sb-aba { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid #ffffff1f; background: #ffffff0a; color: inherit; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; flex: none; position: relative; }
.sb-aba:hover { background: #ffffff14; } .sb-aba.on { border-color: #e8b923; background: #e8b92322; }
.sb-aba.sb-global { flex: 1 1 auto; min-width: 180px; max-width: 640px; overflow: hidden; }
.sb-aba .badge { position: static; } .sb-aba small { color: #5fd38d; }
.sb-dm { border-color: #7df9ff66; } .sb-x { margin-left: 4px; opacity: .6; padding: 0 2px; } .sb-x:hover { opacity: 1; }
.sb-dm.pisca { animation: sbPisca 1s ease-in-out infinite; }
@keyframes sbPisca { 50% { background: #7df9ff33; box-shadow: 0 0 10px #7df9ff88; } }
.social-painel { align-self: flex-start; margin-left: 8px; width: min(560px, calc(100vw - 16px)); background: linear-gradient(160deg, #161a3c, #0b0d22); border: 1px solid #e8b92355; border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px #000a; }
.sp-amigos { max-height: 320px; overflow-y: auto; padding: 6px; }
.sp-amigo { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; opacity: .65; }
.sp-amigo.on { opacity: 1; } .sp-amigo:hover { background: #ffffff10; } .sp-amigo span:first-of-type { flex: 1; display: flex; flex-direction: column; } .sp-amigo small { font-size: 11px; color: var(--dim); }
.sp-amigo .badge { position: static; } .sp-dm { opacity: .7; }
.dm-janelas { display: flex; gap: 8px; justify-content: flex-end; padding: 0 8px; flex-wrap: wrap-reverse; }
.dm-janela { width: min(300px, calc(100vw - 16px)); background: linear-gradient(160deg, #142235, #0b0d22); border: 1px solid #7df9ff66; border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 20px #000a; }
.dm-topo { display: flex; justify-content: space-between; padding: 8px 12px; cursor: pointer; font-weight: 700; border-bottom: 1px solid #ffffff1a; }
.dm-msgs { height: 220px; }
.dm-msg { align-self: flex-start; background: #ffffff10; padding: 5px 9px; border-radius: 10px 10px 10px 2px; max-width: 85%; word-break: break-word; }
.dm-msg.eu { align-self: flex-end; background: #7df9ff22; border-radius: 10px 10px 2px 10px; }
@media (max-width: 640px) { .social-painel { margin-left: 0; width: 100vw; } .sb-aba.sb-global { min-width: 140px; } .chat-previa { display: none; } .dm-janela { width: 100vw; } }

/* v4.0: qualidade individual, Alojamento, Biografia, Ascensão com materiais, 3 Baús, Peças e Antibot obrigatório */
.q-nome.q-normal { color: #c6ccd8; } .q-nome.q-raro { color: #5fd38d; } .q-nome.q-superior { color: #4fa3ff; }
.q-nome.q-unico { color: #ffe27a; background: linear-gradient(90deg, #ffd84d, #fff6c2, #ffb300, #7df9ff, #ffd84d); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px #ffd84d66; animation: qBrilho 3s linear infinite; font-weight: 800; }
@keyframes qBrilho { to { background-position: 300% 0; } }
.q-chip { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px; border: 1px solid currentColor; margin: 2px 0; white-space: nowrap; }
.q-chip.q-normal { color: #a3abbd; } .q-chip.q-raro { color: #5fd38d; } .q-chip.q-superior { color: #4fa3ff; } .q-chip.q-unico { color: #ffd84d; box-shadow: 0 0 8px #ffd84d55; }
.alojamento { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px 12px; align-items: center; padding: 10px 14px; margin: 10px 0; border: 1px solid #e8b92355; border-radius: 12px; background: #0e1330; }
.alojamento small { grid-column: 1 / -1; } .alojamento.cheio { border-color: #ff5e7a; }
@media (max-width: 640px) { .alojamento { grid-template-columns: 1fr; } }
.asc-mats { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; }
.asc-mat { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #ffffff22; border-radius: 8px; cursor: pointer; font-size: 13px; }
.asc-mat.q-raro { border-color: #5fd38d66; } .asc-mat.q-superior { border-color: #4fa3ff88; } .asc-mat.q-unico { border-color: #ffd84d; box-shadow: 0 0 8px #ffd84d44; }
.bio-topo { display: flex; gap: 14px; align-items: center; } .bio-topo h3 { margin: 0 0 4px; } .bio-texto { line-height: 1.6; font-size: 14px; }
.bau3 { margin: 12px 0; text-align: center; } .bau3 h3 { margin: 0 0 8px; font-size: 15px; }
.bau3-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bau3-bau { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 12px; border: 1px solid #e8b92366; background: linear-gradient(160deg, #2a2010, #120c02); color: inherit; font: inherit; cursor: pointer; transition: transform .15s; }
button.bau3-bau:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 0 14px #ffd84d66; }
.bau3-ic { font-size: 34px; } .bau3-bau small { font-size: 12px; color: var(--dim); }
.bau3-bau.escolhido { border-color: #ffd84d; box-shadow: 0 0 16px #ffd84d88; background: linear-gradient(160deg, #4a3810, #1a1205); } .bau3-bau.escolhido small { color: #fff; }
.bau3-bau.outro { opacity: .55; cursor: default; }
.pecas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.peca-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border: 1px solid var(--c); border-radius: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, #0e1330), #0a0d22); text-align: center; }
.peca-card.pronta { box-shadow: 0 0 0 2px #ffd84d, 0 0 14px #ffd84d55; } .peca-card .row { justify-content: center; flex-wrap: wrap; }
.captcha-obrig { color: #ffb347; font-weight: 700; } .modal-bg.modal-captcha { z-index: 9500; }

/* v4.1: abas do menu Cavaleiros, filtro de qualidade, listas de escolha, painel de ascensão, loja gerenciada */
.cav-abas { justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.filtro-q { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-bottom: 6px; }
.filtro-q .btn { padding: 5px 10px; font-size: 12px; }
.filtro-q .btn.q-normal { color: #c6ccd8; } .filtro-q .btn.q-raro { color: #5fd38d; } .filtro-q .btn.q-superior { color: #4fa3ff; } .filtro-q .btn.q-unico { color: #ffd84d; }
.filtro-q .btn.on { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset, 0 0 10px color-mix(in srgb, currentColor 40%, transparent); }
.lista-esc { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; margin-top: 8px; }
.cav-esc { display: flex; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--c); border-radius: 10px; background: #0e1330; cursor: pointer; font-size: 13px; }
.cav-esc:hover { background: #18204a; transform: translateY(-1px); } .cav-esc.naparty { box-shadow: inset 0 0 0 1px #5fd38d; }
.modal.modal-larga { width: min(920px, calc(100vw - 24px)); max-width: none; }
.slot-clique { cursor: pointer; } .slot { cursor: pointer; }
.asc-painel .asc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.lg-tab tr.lg-off td { opacity: .6; } .lg-tab input[type=datetime-local] { width: 170px; }
.gema-card.oferta { border-color: #ff9f43; box-shadow: 0 0 12px #ff9f4355; } .oferta-tag { background: #ff9f43 !important; color: #1a1205 !important; }

/* v4.2: PB da fase na seleção de estágios */
.pb-fase { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid #ffffff22; background: #0b0f26; font-size: 12px; }
.pb-fase b { font-size: 13px; } .pb-fase.ok { border-color: #5fd38d88; } .pb-fase.ok span:first-child b { color: #5fd38d; }
.pb-fase.baixo { border-color: #ff5e7a88; } .pb-fase.baixo span:first-child b { color: #ff8fa3; }

/* v4.2.1: nova capa (2000×661) — mostra o banner inteiro proporcional, com o logo sempre centralizado */
header.topo.capa img { height: auto; aspect-ratio: 2000 / 661; max-height: 420px; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 640px) { header.topo.capa img { min-height: 140px; object-position: 50% 50%; } }

/* v4.3: 6 slots de equipamento */
.equip-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.equip-slot { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed #ffffff22; border-radius: 10px; background: #0b0f26; }
.equip-slot.cheio { border-style: solid; border-color: #e8b92355; }
.equip-slot .slot-arma { position: relative; } .equip-slot .mini-rem { margin-left: auto; padding: 2px 8px; }
.equip-slot select { width: 100%; }

/* v4.3: Segurança da Conta e Indique e Ganhe */
.tag-on, .tag-off { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 4px; }
.tag-on { background: rgba(70, 200, 120, .18); color: #7be3a3; }
.tag-off { background: rgba(255, 255, 255, .08); color: #b9b2c8; }
.convite-box { margin-top: 10px; padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px dashed rgba(232, 185, 35, .5); }
.convite-box small { display: block; opacity: .7; letter-spacing: 2px; }
.convite-box b { font-size: 24px; letter-spacing: 3px; color: #e8b923; }
.convite-box input { flex: 1; min-width: 0; }
#cfg-seg .row input { flex: 1; min-width: 0; }
/* v4.4: Painel Anatômico de Equipamentos (modelo central + 6 slots) */
.anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) minmax(0, 1fr); grid-template-rows: repeat(5, minmax(58px, auto)); gap: 8px 10px; align-items: center; margin: 6px 0 10px; }
.anat-modelo { grid-column: 2; grid-row: 1 / 6; position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; border-radius: 14px;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); min-height: 300px; }
.anat-modelo svg { width: 100%; height: auto; max-height: 320px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.anat-pb { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 12px; background: rgba(0, 0, 0, .55); padding: 2px 10px; border-radius: 10px; white-space: nowrap; }
.anat-slot { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 10px; cursor: pointer; text-align: left; color: inherit; font: inherit;
  background: rgba(255, 255, 255, .04); border: 1px dashed rgba(255, 255, 255, .22); transition: transform .12s, border-color .12s, background .12s; position: relative; }
.anat-slot.esq { grid-column: 1; }
.anat-slot.dir { grid-column: 3; flex-direction: row-reverse; text-align: right; }
.anat-slot.cheio { border: 1px solid var(--r); background: color-mix(in srgb, var(--r) 12%, rgba(0, 0, 0, .25)); box-shadow: 0 0 10px color-mix(in srgb, var(--r) 30%, transparent); }
.anat-slot:hover, .anat-slot:focus-visible { transform: translateY(-1px); border-color: #e8b923; outline: none; }
.anat-slot.esq::after, .anat-slot.dir::after { content: ''; position: absolute; top: 50%; width: 10px; border-top: 1px dashed rgba(255, 255, 255, .3); }
.anat-slot.esq::after { right: -11px; } .anat-slot.dir::after { left: -11px; }
.anat-ic { font-size: 24px; flex: 0 0 auto; }
.anat-txt { display: flex; flex-direction: column; min-width: 0; }
.anat-txt small { opacity: .7; font-size: 11px; }
.anat-txt b, .anat-txt i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.anat-txt i { opacity: .55; font-style: normal; }
.anat-atual, .anat-op { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); margin: 6px 0; }
.anat-atual { border: 1px solid var(--r); }
.anat-atual .ic, .anat-op .ic { font-size: 26px; }
.anat-atual > div, .anat-op > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anat-lista { max-height: 50vh; overflow-y: auto; }
@media (max-width: 560px) {
  .anat { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); gap: 6px; }
  .anat-modelo { min-height: 240px; }
  .anat-slot { padding: 6px; gap: 5px; }
  .anat-ic { font-size: 20px; }
  .anat-txt b, .anat-txt i { font-size: 11px; }
  .anat-txt small { font-size: 10px; }
}
/* v4.4: Compêndio de Equipamentos e Rankings */
.encic-eq .encic-eq-ic { font-size: 40px; line-height: 1.2; }
.encic-eq small { display: block; }
.rank-abas { flex-wrap: wrap; }
.rank tr.meu td { background: rgba(232, 185, 35, .12); }
/* ===== v4.5: capa compacta, menu sanfona minimalista, Recompensa Online no topo e celular ===== */
html, body { overflow-x: clip; max-width: 100%; }
header.topo.capa img { aspect-ratio: auto !important; height: var(--capa-alt, 190px) !important; max-height: none !important; min-height: 0 !important; object-fit: cover; object-position: 50% 48%; }
header.topo.capa .hamburguer { top: 8px; width: 44px; height: 44px; font-size: 22px; }
/* menu compacto */
nav.menu { gap: 2px; padding: 6px; }
.menu-tit { padding: 6px 8px; font-size: 12px; letter-spacing: .3px; transition: background .15s; }
.menu-itens { padding: 0 0 4px 8px; margin-left: 10px; } /* sem animação: o menu é redesenhado a cada 3 s */
.menu-itens a { padding: 4px 8px; font-size: 12.5px; }
/* Recompensa Online no topo do menu */
.online-topo { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; border-radius: 12px; cursor: pointer; min-height: 44px;
  background: linear-gradient(135deg, rgba(232, 185, 35, .14), rgba(127, 227, 255, .08)); border: 1px solid rgba(232, 185, 35, .45); box-shadow: 0 0 12px rgba(232, 185, 35, .12); }
.online-topo:hover, .online-topo:focus-visible { border-color: var(--ouro); outline: none; }
.online-topo .ot-ic { font-size: 22px; }
.online-topo .ot-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.online-topo .ot-txt small { font-size: 9.5px; letter-spacing: 1px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.online-topo .ot-tempo { font-family: ui-monospace, Consolas, monospace; font-size: 17px; color: var(--ouro); letter-spacing: 1px; }
.online-topo .ot-btn { padding: 6px 10px; font-size: 12px; min-height: 36px; }
.online-topo.pronto { animation: otPulsa 1.6s ease-in-out infinite; border-color: var(--ouro); }
@keyframes otPulsa { 50% { box-shadow: 0 0 20px rgba(232, 185, 35, .45); } }
@media (prefers-reduced-motion: reduce) { .online-topo.pronto { animation: none; } }
/* D-Pad touch do Labirinto: maior, escala do painel (--dp) e fixo perto do polegar no celular */
.lab-dpad { grid-template-columns: repeat(3, calc(54px * var(--dp, 1.25))); grid-template-rows: repeat(2, calc(46px * var(--dp, 1.25))); gap: calc(6px * var(--dp, 1.25)); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lab-dpad .dp { font-size: calc(20px * var(--dp, 1.25)); -webkit-tap-highlight-color: transparent; }
.lab-dpad .dp:active { transform: scale(.92); box-shadow: 0 0 18px #9d7bffaa; }
body.bp-mobile .lab-dpad { position: sticky; bottom: 58px; z-index: 30; padding: 8px; border-radius: 16px; background: rgba(11, 8, 32, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: max-content; box-shadow: 0 6px 20px #000a; }
/* celular: textos fluidos e conteúdo sem rolagem lateral */
body.bp-mobile { font-size: clamp(13px, 3.6vw, 15px); }
body.bp-mobile main { min-width: 0; }
body.bp-mobile main table { display: block; max-width: 100%; overflow-x: auto; }
body.bp-mobile .titulo { font-size: clamp(18px, 5.4vw, 24px); }
body.bp-mobile .online-topo { margin-top: 2px; }
/* ===== v4.6: fundo cósmico animado (Universo em movimento) ===== */
#cosmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
#cosmos .cs-neb { position: absolute; inset: -40%; will-change: transform; animation: csNeb 140s ease-in-out infinite alternate;
  background: radial-gradient(ellipse 28% 22% at 30% 35%, rgba(157, 123, 255, .20), transparent 70%), radial-gradient(ellipse 26% 20% at 70% 60%, rgba(28, 163, 255, .14), transparent 70%),
    radial-gradient(ellipse 22% 16% at 55% 25%, rgba(255, 120, 200, .09), transparent 70%), radial-gradient(ellipse 30% 24% at 40% 80%, rgba(232, 185, 35, .08), transparent 70%); }
#cosmos .cs-tw { position: absolute; inset: 0; opacity: var(--cs-brilho, .8); animation: csTwinkle 4s ease-in-out infinite; will-change: opacity; }
#cosmos .cs-camada { position: absolute; top: 0; left: 0; border-radius: 50%; background: transparent; will-change: transform; animation: csDrift 200s linear infinite; }
@keyframes csDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -2000px, 0); } }
@keyframes csTwinkle { 0%, 100% { opacity: var(--cs-brilho, .8); } 50% { opacity: calc(var(--cs-brilho, .8) * .35); } }
@keyframes csNeb { from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.08); } }
#cosmos.vel-parado .cs-camada, #cosmos.vel-parado .cs-neb, #cosmos.vel-parado .cs-tw { animation: none; }
body.bp-mobile #cosmos .cs-camada { filter: none !important; }
@media (prefers-reduced-motion: reduce) { #cosmos .cs-camada, #cosmos .cs-neb, #cosmos .cs-tw { animation: none !important; } }
/* v4.6: Recompensa Online por etapas */
.online .marco.atual { outline: 1px solid var(--ouro); }
.online-tab td, .online-tab th { padding: 4px 8px; }