/* =====================================================================
   TEMA MODERNO (2026-11) — escuro premium, por cima de style/marmore/grego.
   Fundo de cosmos, painéis de vidro, dourado + violeta, letras sem serifa,
   cartas com brilho por raridade e barra de navegação embaixo no celular.
   ===================================================================== */
:root {
  --ink: #f3f4fb; --ink-2: #c6c9e0; --muted: #8c91b3;
  --paper: #151933; --paper-2: #1c2142; --surface: #212750;
  --rule: rgba(255, 255, 255, .08); --rule-2: rgba(255, 255, 255, .16);
  --gold: #f5c451; --gold-deep: #ffd97a; --gold-soft: rgba(245, 196, 81, .2);
  --bronze: #d9a15a; --sangue: #ff4d6a; --oliva: #3fe0a0;
  --line-gold: rgba(245, 196, 81, .45);
  --surface-ouro: rgba(245, 196, 81, .1); --surface-ouro-2: rgba(245, 196, 81, .18);
  --topo: rgba(9, 11, 24, .72);
  --violeta: #7c5cff; --ciano: #38d6ff;
  --vidro: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025));
  --sombra: 0 18px 40px -18px rgba(0, 0, 0, .7);
  --sombra-alta: 0 26px 60px -20px rgba(0, 0, 0, .8);
  --raio: 14px; --raio-g: 22px;
  --marmore: none; --meandro: none; --caneluras: none; --losango: none;
  --f-title: 'Outfit', 'Segoe UI', sans-serif;
  --f-head: 'Outfit', 'Segoe UI', sans-serif;
  --f-body: 'Outfit', 'Segoe UI', sans-serif;
  --C: #9aa3b5; --I: #4fd17a; --R: #4c8dff; --E: #b07cff; --L: #ff9a2a; --SR: #ff4d6a; --SSR: #ffd23c;
}
html { color-scheme: dark; background: #070914; }
body {
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(124, 92, 255, .28), transparent 65%),
    radial-gradient(800px 600px at 105% 15%, rgba(56, 214, 255, .14), transparent 60%),
    radial-gradient(900px 700px at 60% 115%, rgba(245, 160, 70, .12), transparent 60%),
    #070914;
  background-attachment: fixed;
}
/* estrelas ao fundo */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 32% 68%, #cfd6ff 50%, transparent 51%), radial-gradient(1px 1px at 64% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 78%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 8%, #ffe9b0 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 46%, #fff 50%, transparent 51%);
  background-size: 520px 520px, 610px 610px, 470px 470px, 700px 700px, 560px 560px, 640px 640px, 590px 590px, 430px 430px;
  animation: cintilar 6s ease-in-out infinite alternate;
}
@keyframes cintilar { to { opacity: .95; } }
::selection { background: rgba(124, 92, 255, .5); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* ---------- letras ---------- */
h1, h2, h3, h4, .cinzel, .logo { font-family: var(--f-head); color: var(--ink); letter-spacing: 0; }
.page-head { border: 0; margin: 0 0 20px; padding: 0; align-items: baseline; }
.page-head::after { display: none; }
.page-head h1 {
  font-size: 32px; font-weight: 800; letter-spacing: -.01em; text-transform: none;
  background: linear-gradient(180deg, #fff 30%, #b9c0ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head p { font-style: normal; color: var(--muted); font-size: 14px; }
.warn-text { color: #ffb454; } .good-text { color: var(--oliva); }
a { color: var(--gold-deep); }
b, strong { font-weight: 700; }

/* ---------- topo ---------- */
#topbar {
  background: var(--topo); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--rule); box-shadow: 0 10px 30px -20px #000;
}
#topbar::after { display: none; }
.logo-cdz {
  font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff6d6, #f5c451 60%, #c98a25); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(245, 196, 81, .35));
}
.logo-idle {
  font-family: var(--f-head); font-weight: 800; font-size: 11px; letter-spacing: .18em; color: #0b0d1c;
  background: linear-gradient(135deg, #ffe08a, #f5b83d); padding: 3px 8px 3px 10px; border-radius: 999px; margin-left: 6px; text-shadow: none;
}
.coin {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--rule); color: var(--ink); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); font-weight: 700;
}
.coin.gem { border-color: rgba(245, 196, 81, .4); background: rgba(245, 196, 81, .1); }
.conta-btn { background: rgba(255, 255, 255, .06); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; }
.conta-btn.on { border-color: var(--gold); color: var(--gold-deep); }
.conta-btn.entrar { background: linear-gradient(135deg, #8b6bff, #5a3df0); color: #fff; border: 0; letter-spacing: .06em; box-shadow: 0 6px 18px -6px rgba(124, 92, 255, .8); }
.conta-btn.entrar:hover:not(:disabled) { background: linear-gradient(135deg, #9d82ff, #6a4dff); box-shadow: 0 8px 22px -6px rgba(124, 92, 255, .9); }

/* ---------- menu lateral ---------- */
#tabs { background: rgba(9, 11, 24, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-right: 1px solid var(--rule); padding: 16px 10px; gap: 3px; }
#tabs::after { display: none; }
#tabs button {
  color: var(--ink-2); font-family: var(--f-head); font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 9px 12px; border-radius: 14px; border: 1px solid transparent; background: transparent; box-shadow: none;
  transition: background .18s, color .18s, transform .18s;
}
#tabs button:hover { background: rgba(255, 255, 255, .06); color: #fff; border-color: transparent; transform: translateX(2px); }
#tabs button.active {
  color: #fff; border: 1px solid rgba(124, 92, 255, .45);
  background: linear-gradient(90deg, rgba(124, 92, 255, .38), rgba(124, 92, 255, .08));
  box-shadow: inset 3px 0 0 var(--gold), 0 8px 22px -12px rgba(124, 92, 255, .9);
}
#tabs .ico[data-i] { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
#tabs button:hover .ico[data-i], #tabs button.active .ico[data-i] { filter: drop-shadow(0 0 8px rgba(245, 196, 81, .55)); }
#tabs button em.badge, .correio-btn .badge { background: linear-gradient(135deg, #ff6a7f, #e0284a); box-shadow: 0 0 10px rgba(255, 77, 106, .7); }
button.link { color: var(--muted); background: none; border: 0; box-shadow: none; }
main { padding: 24px 28px 48px; }

/* ---------- superfícies de vidro ---------- */
.panel, .frame {
  background: var(--vidro), rgba(18, 21, 44, .72); border: 1px solid var(--rule); border-radius: var(--raio-g);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.panel h2 { font-weight: 800; }
.panel h3 { font-family: var(--f-head); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #a9afff; }
.panel h3::before { background: none !important; content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: var(--gold) !important; box-shadow: 0 0 8px var(--gold); transform: none; }
.panel h3::after { background: linear-gradient(90deg, var(--rule-2), transparent); }
.stats td, .stats th { border-bottom-color: var(--rule); }
.rank-table tr.me td { background: rgba(124, 92, 255, .2); color: #fff; }
.kv b { color: var(--ink); }

/* ---------- botões ---------- */
button {
  font-family: var(--f-head); font-weight: 700; letter-spacing: 0; color: var(--ink);
  background: rgba(255, 255, 255, .07); border: 1px solid var(--rule-2); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .12s, filter .15s, box-shadow .18s, border-color .18s, background .18s;
}
button:hover:not(:disabled) { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .11); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .8); transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0) scale(.97); }
button.primary {
  background: linear-gradient(135deg, #ffe590, #f5b83d 55%, #ea8f2c); color: #1a1104; border: 0; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px -8px rgba(245, 170, 50, .75);
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(135deg, #ffe590, #f5b83d 55%, #ea8f2c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px -8px rgba(245, 170, 50, .95); }
button.primary small { color: #3a2606; opacity: 1; }
button.gold {
  background: linear-gradient(135deg, #8b6bff, #5a3df0); color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 22px -8px rgba(124, 92, 255, .9);
}
button.gold:hover:not(:disabled) { background: linear-gradient(135deg, #9d82ff, #6a4dff); filter: none; }
button:disabled { opacity: .42; filter: saturate(.5); }
.chip { border-radius: 999px; }
.chip.on { background: linear-gradient(135deg, #8b6bff, #5a3df0); color: #fff; border-color: transparent; }
.chip.on small { color: #ffe9a8; } .chip small { color: var(--gold-deep); }
select, input, textarea, .acc-form input, .pix-copia input, #mj-painel select {
  background: rgba(8, 10, 22, .7); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 12px; font-family: var(--f-body);
}
select option { background: #151933; color: var(--ink); }
.acc-form input:focus, input:focus, select:focus { border-color: var(--violeta); box-shadow: 0 0 0 3px rgba(124, 92, 255, .3); outline: 0; }
details summary { color: var(--gold-deep); }

/* ---------- barras ---------- */
.bar { background: rgba(255, 255, 255, .08); border: 0; border-radius: 999px; overflow: hidden; }
.bar > div, #afk-bar, .bar.gold > div {
  background: linear-gradient(90deg, #f08a2c, #f5c451 60%, #fff0b8); border-radius: 999px;
  box-shadow: 0 0 12px rgba(245, 196, 81, .7); position: relative;
}

/* ---------- destaque do chefe ---------- */
.hero-banner {
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(520px 380px at 82% 50%, rgba(255, 77, 106, .38), transparent 70%),
    radial-gradient(600px 400px at 0% 0%, rgba(124, 92, 255, .45), transparent 70%),
    linear-gradient(135deg, #171a3a, #0d0f24);
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hero-banner h2 { font-weight: 800; letter-spacing: -.01em; text-transform: none; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; }
.hero-banner .sub, .hero-banner .muted { color: #c9cdf0; }
.hero-banner .boss-art { border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 0 0 8px rgba(255, 255, 255, .05), 0 0 60px rgba(255, 77, 106, .55); background: #0d0f20; }
.tag-red { background: linear-gradient(135deg, #ff6a7f, #e0284a); border-radius: 999px; padding: 4px 12px; font-family: var(--f-head); font-weight: 700; letter-spacing: .1em; font-size: 11px; box-shadow: 0 6px 16px -6px rgba(255, 77, 106, .9); }
.stage-dots span { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); color: #c9cdf0; }
.stage-dots span.done { background: rgba(245, 196, 81, .9); border-color: transparent; color: #1a1104; }
.stage-dots span.cur { background: #fff; border-color: #fff; color: #1a1104; box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 0 18px rgba(255, 255, 255, .7); }
.stage-dots span.boss { border-color: #ff6a7f; color: #ff9fae; }
.power-rec b { color: #ff9fae; }

/* ---------- cartas com brilho por raridade ---------- */
.hcard {
  --rar: var(--C);
  background: linear-gradient(180deg, #1f2449, #12152c); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent); border-top-width: 1px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 24px -14px #000, inset 0 0 22px -10px var(--rar);
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s;
}
.hcard.r-C { --rar: var(--C); border-top-color: color-mix(in srgb, var(--rar) 55%, transparent); }
.hcard.r-I { --rar: var(--I); } .hcard.r-R { --rar: var(--R); } .hcard.r-E { --rar: var(--E); }
.hcard.r-L { --rar: var(--L); } .hcard.r-SR { --rar: var(--SR); } .hcard.r-SSR { --rar: var(--SSR); }
.hcard[class*="r-"] { background: linear-gradient(180deg, color-mix(in srgb, var(--rar) 16%, #1b1f42), #101328 85%); border-top-color: color-mix(in srgb, var(--rar) 55%, transparent); }
.hcard:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 30px -14px #000, 0 0 22px -4px var(--rar), inset 0 0 22px -8px var(--rar); }
.hcard img, .hcard img.art { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rar) 42%, #1a1d3a), #0b0d1c 82%); border-radius: 0; }
.hcard.r-SR, .hcard.r-SSR { box-shadow: 0 10px 24px -14px #000, 0 0 16px -4px var(--rar), inset 0 0 26px -8px var(--rar); }
/* brilho que atravessa as cartas SR e SSR */
.hcard.r-SR::after, .hcard.r-SSR::after {
  content: ''; display: block; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  background-size: 300% 100%; animation: reflexo 3.6s ease-in-out infinite;
}
@keyframes reflexo { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } }
.hcard .rar { border-radius: 8px; font-family: var(--f-head); font-weight: 800; color: #0b0d1c; background: var(--rar); box-shadow: 0 0 10px -2px var(--rar); }
.r-SSR .rar, .rtag.r-SSR { background: linear-gradient(135deg, #fff4c8, #ffd23c); color: #1a1104; }
.rtag { border-radius: 6px; font-family: var(--f-head); }
.hname { color: #fff; font-family: var(--f-head); font-weight: 700; letter-spacing: 0; }
.htitle { color: var(--muted); }
.hcard.sel { outline: 2px solid #fff; outline-offset: 2px; }
.hcard.locked { filter: grayscale(1) brightness(.6); }
.stars { color: #ffd23c; text-shadow: 0 0 6px rgba(255, 210, 60, .6); } .stars .off { color: rgba(255, 255, 255, .16); text-shadow: none; }
.pow { color: var(--gold-deep); }
.tag-team { background: var(--oliva); color: #04130c; border-radius: 6px; }
.new { background: linear-gradient(135deg, #3fe0a0, #17b877); color: #04130c; border-radius: 6px; font-weight: 800; }
.dup { border-radius: 6px; }
.team-strip .mini, .slot, .task-art, .rival-faces img, .dhead img.big, .destaque-arte {
  background: radial-gradient(circle at 50% 30%, #2a2f63, #0b0d1c 82%); border-color: var(--rule-2); border-radius: 14px;
}
.team-strip .mini.empty, .slot:has(.empty) { background: rgba(255, 255, 255, .04); border-style: dashed; }
.slot .empty { color: var(--rule-2); } .slot .slvl { color: #c9cdf0; }
.rival-faces img { border-color: #151933; }
.dname { color: #fff; font-weight: 800; } .dtitle { color: var(--gold-deep); }
.skill, .evo { background: rgba(255, 255, 255, .04); border: 1px solid var(--rule); border-radius: 14px; }
.skill { border-left: 3px solid var(--violeta); }
.evo h4, .sub-h, .flabel { color: var(--ink-2); }

/* ---------- listas ---------- */
.mission, .task, .rival, .merc-oferta, .beast, .login-day, .pass-r, .loja-pac, .laco, .peca, .carta-msg, .reward, .encaixe.cheio {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--rule); border-radius: 14px; color: var(--ink);
}
.mission { border-left: 3px solid var(--rule-2); }
.mission.ready { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(245, 196, 81, .16), rgba(255, 255, 255, .04) 60%); box-shadow: 0 0 22px -12px var(--gold); }
.rival { border-left: 3px solid var(--sangue); }
.login-day.today, .pass-r.ready { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 196, 81, .18), 0 0 22px -8px var(--gold); }
.login-day.big, .pass-r.premium { background: rgba(245, 196, 81, .1); border-color: rgba(245, 196, 81, .4); }
.loja-pac:hover { border-color: var(--gold); box-shadow: 0 0 26px -10px var(--gold); transform: translateY(-2px); }
.loja-selo { background: linear-gradient(135deg, #ff6a7f, #e0284a); color: #fff; border-radius: 999px; }
.ordem-emb { background: rgba(255, 255, 255, .06); }
.emb-op:has(input:checked) { background: rgba(124, 92, 255, .35); }
.banner-box { background: radial-gradient(600px 300px at 50% 0%, rgba(124, 92, 255, .3), transparent 70%), rgba(18, 21, 44, .72); }
.event-art { background: radial-gradient(ellipse at 50% 80%, rgba(255, 77, 106, .25), transparent 70%); border-bottom-color: var(--rule); }
.encaixe { background: rgba(255, 255, 255, .03); border-color: var(--rule-2); border-radius: 14px; }
.peca-princ { color: var(--gold-deep); }
.provacao-dias span.ok { color: #1a1104; }
.pc-classe { box-shadow: 0 0 0 3px #151933, 0 0 0 4px var(--gold), 0 0 22px -4px var(--gold); font-family: var(--f-head); }
.chance { border-radius: 10px; }

/* ---------- batalha ---------- */
.battle-wrap { background: #05060e; border: 1px solid rgba(255, 255, 255, .12); padding: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra-alta), 0 0 60px -30px var(--violeta); }
.battle-wrap canvas { display: block; }
.dif { font-family: var(--f-head); border-radius: 999px; }
.dif-rotulo { font-family: var(--f-head); }

/* ---------- janelas e avisos ---------- */
#modal { background: rgba(4, 5, 14, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-box {
  background: radial-gradient(500px 260px at 50% 0%, rgba(124, 92, 255, .28), transparent 70%), #141834; color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; box-shadow: 0 40px 100px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .1);
  animation: janela .28s cubic-bezier(.3, 1.3, .5, 1);
}
@keyframes janela { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.modal-box::before { display: none; }
.modal-box h2 {
  font-weight: 800; letter-spacing: -.01em; text-transform: none;
  background: linear-gradient(180deg, #fff6d6, #f5c451); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reward small { color: var(--muted); }
.toast {
  background: rgba(20, 24, 52, .92); color: var(--ink); border: 1px solid var(--rule-2); border-left: 3px solid var(--gold); border-radius: 14px;
  backdrop-filter: blur(12px); box-shadow: 0 18px 40px -16px #000;
}
.toast.good { border-left-color: var(--oliva); } .toast.warn { border-left-color: #ffb454; }

/* ---------- mapa da campanha ---------- */
.mapa { background: radial-gradient(800px 300px at 50% 0%, rgba(124, 92, 255, .25), transparent 70%), #0d1024; border-color: var(--rule); border-radius: 18px; }
.mapa .rota { stroke: rgba(255, 255, 255, .2); } .mapa .no .aro { fill: #1c2142; stroke: rgba(255, 255, 255, .3); }
.mapa .no .num { fill: #fff; font-family: var(--f-head); } .mapa .no .nome { fill: #fff; font-family: var(--f-head); } .mapa .no .chefe { fill: var(--muted); }

/* ---------- entrada suave das telas ---------- */
.tab.active { animation: entrar .3s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.tab.active .panel { animation: subir .4s ease-out backwards; }
.tab.active .panel:nth-child(2) { animation-delay: .04s; } .tab.active .panel:nth-child(3) { animation-delay: .08s; }
.tab.active .panel:nth-child(4) { animation-delay: .12s; } .tab.active .panel:nth-child(n+5) { animation-delay: .16s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

/* ---------- celular: barra de navegação embaixo ---------- */
#barra { display: none; }
@media (max-width: 820px) {
  main { padding: 16px 14px 96px; }
  #tabs { background: rgba(9, 11, 24, .96); }
  #btn-menu { display: none !important; }
  #barra {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    background: rgba(14, 17, 36, .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; padding: 6px; box-shadow: 0 18px 40px -10px #000;
  }
  #barra button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; min-width: 0;
    background: none; border: 0; box-shadow: none; border-radius: 16px; color: var(--muted); font-size: 10.5px; font-weight: 600; position: relative;
  }
  #barra button .ico { width: 28px; height: 28px; display: block; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
  #barra button .ico img { width: 100%; height: 100%; }
  #barra button.active { color: #fff; background: linear-gradient(180deg, rgba(124, 92, 255, .45), rgba(124, 92, 255, .1)); }
  #barra button.active .ico { transform: translateY(-3px) scale(1.15); filter: drop-shadow(0 0 8px rgba(245, 196, 81, .7)); }
  #barra button em.badge { position: absolute; top: 2px; right: 14%; min-width: 16px; height: 16px; border-radius: 8px; font: 700 10px/16px var(--f-head); font-style: normal; color: #fff; background: linear-gradient(135deg, #ff6a7f, #e0284a); }
  .page-head h1 { font-size: 26px; }
  .tab.active .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tab.active, .tab.active .panel, .modal-box, body::before, .hcard::after { animation: none !important; }
}

/* ---------- por cima do tema antigo (regras mais específicas de lá) ---------- */
#layout::after, main::before { display: none !important; }            /* colunas de mármore */
@media (min-width: 1180px) { main { padding-left: 34px; padding-right: 34px; } }
.panel::before, .hcard::before, #tabs button.active::before { display: none !important; }
#tabs .nav-foot::before { filter: drop-shadow(0 0 24px rgba(124, 92, 255, .55)) brightness(.9); opacity: .85; }
.panel.hero-banner {
  color: #fff; border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(520px 380px at 82% 50%, rgba(255, 77, 106, .5), transparent 70%),
    radial-gradient(640px 420px at 0% 0%, rgba(124, 92, 255, .6), transparent 70%),
    linear-gradient(135deg, #1b1f48, #0c0e22);
  box-shadow: var(--sombra-alta), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.panel.hero-banner h2 { color: #fff; letter-spacing: -.01em; }
.panel.hero-banner .sub, .panel.hero-banner .muted { color: #c9cdf0; }
.panel.hero-banner .boss-art { border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 0 0 8px rgba(255, 255, 255, .05), 0 0 70px rgba(255, 77, 106, .6); }
img.art, .dhead img, .destaque-arte, .rival img, .slot img, .summon-res img {
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rar, #5a62c8) 42%, #1a1d3a), #0b0d1c 82%);
}
.boss-art, .panel.hero-banner .boss-art { background: radial-gradient(circle at 50% 30%, #5a1f38, #0b0d1c 82%) !important; }
.panel.dourada { background: radial-gradient(500px 260px at 50% 0%, rgba(124, 92, 255, .38), transparent 70%), var(--vidro), rgba(18, 21, 44, .72); border-color: rgba(124, 92, 255, .45); }
.chances { border-color: var(--rule); }
.chance { color: var(--ink-2); border-bottom-color: var(--rule); }
.chance i { background: var(--rar-c, #9aa1ab); box-shadow: 0 0 8px var(--rar-c, transparent); opacity: 1; }
.chance.r-C { --rar-c: var(--C); } .chance.r-I { --rar-c: var(--I); } .chance.r-R { --rar-c: var(--R); } .chance.r-E { --rar-c: var(--E); }
.chance.r-L { --rar-c: var(--L); } .chance.r-SR { --rar-c: var(--SR); } .chance.r-SSR { --rar-c: var(--SSR); }
.loja-pac { background: var(--vidro), rgba(18, 21, 44, .72); border-color: var(--rule); }
.correio-btn .badge { box-shadow: 0 0 0 2px #0b0d1c, 0 0 10px rgba(255, 77, 106, .7); }
.season-topo .season-nome { letter-spacing: 0; }
#battle { image-rendering: auto; }

/* ---------- celular: topo em duas linhas (logo + botões / recursos) ---------- */
@media (max-width: 820px) {
  :root { --top: 100px; }
  #topbar { height: var(--top); flex-wrap: wrap; align-content: center; gap: 6px 8px; padding: 6px 12px; }
  .logo { flex: 1 1 auto; flex-wrap: nowrap; align-items: center; min-width: 0; }
  .logo-cdz { font-size: 17px; white-space: nowrap; }
  .res { order: 9; width: 100%; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .coin { min-width: 0; justify-content: flex-start; font-size: 13px; padding: 2px 8px 2px 3px; overflow: hidden; }
  .coin b { overflow: hidden; text-overflow: ellipsis; }
  .conta-btn { padding: 5px 9px; }
  #tabs { padding-bottom: 100px; overflow-y: auto; width: min(280px, 82vw); border-radius: 0 22px 22px 0; }
  #tabs button { font-size: 16px; padding: 11px 14px; }
  .panel.hero-banner .boss-art { background: radial-gradient(circle at 50% 30%, #5a1f38, #0b0d1c 82%) !important; }
  #toasts { bottom: 96px; }
}
@media (max-width: 820px) {
  .logo-idle { display: none; }
  #topbar { gap: 6px 5px; }
  #topbar .conta-btn { padding: 4px 7px; font-size: 12px; min-width: 0; }
  .correio-btn .ico { width: 22px; height: 22px; }
  .coin { font-size: 12.5px; gap: 3px; padding: 2px 6px 2px 2px; }
  .coin i, .coin i img { width: 20px; height: 20px; }
}

/* ---------- revisão das telas (Arena, Loja, botões desligados) ---------- */
button:disabled, button.primary:disabled, button.gold:disabled {
  opacity: 1; filter: none; background: rgba(255, 255, 255, .05); color: var(--muted); border: 1px solid var(--rule); box-shadow: none; cursor: not-allowed;
}
button:disabled small { color: var(--muted); }
button:disabled .ic img { filter: grayscale(.7) opacity(.7); }
.rival { flex-wrap: wrap; gap: 10px 14px; }
.rival-info { flex: 1 1 150px; min-width: 0; }
.rival-faces img { width: 44px; height: 44px; }

/* ---------- ícones vivos: halo por aba, pulo no toque, flutuar na aba aberta ---------- */
#tabs button, #barra button { --halo: 124, 92, 255; }
#tabs button[data-tab="lobby"], #barra button[data-tab="lobby"] { --halo: 245, 196, 81; }
#tabs button[data-tab="battle"], #barra button[data-tab="battle"] { --halo: 255, 96, 96; }
#tabs button[data-tab="team"] { --halo: 80, 160, 255; }
#tabs button[data-tab="heroes"], #barra button[data-tab="heroes"] { --halo: 255, 200, 80; }
#tabs button[data-tab="summon"], #barra button[data-tab="summon"] { --halo: 180, 110, 255; }
#tabs button[data-tab="training"] { --halo: 255, 150, 60; }
#tabs button[data-tab="forge"] { --halo: 255, 120, 50; }
#tabs button[data-tab="missions"] { --halo: 255, 210, 120; }
#tabs button[data-tab="events"] { --halo: 255, 170, 40; }
#tabs button[data-tab="arena"] { --halo: 255, 90, 110; }
#tabs button[data-tab="ordem"] { --halo: 230, 80, 80; }
#tabs button[data-tab="mercado"] { --halo: 80, 220, 170; }
#tabs button[data-tab="ranking"] { --halo: 245, 196, 81; }
#tabs button[data-tab="loja"] { --halo: 255, 210, 60; }
#tabs .ico, #barra .ico { position: relative; display: inline-grid; place-items: center; }
#tabs .ico::before, #barra .ico::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(var(--halo), .55), rgba(var(--halo), 0) 70%);
  opacity: .0; transform: scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
#tabs button:hover .ico::before, #tabs button.active .ico::before, #barra button.active .ico::before { opacity: 1; transform: scale(1.15); }
#tabs button.active { border-color: rgba(var(--halo), .5); background: linear-gradient(90deg, rgba(var(--halo), .28), rgba(var(--halo), .04)); box-shadow: inset 3px 0 0 rgb(var(--halo)), 0 8px 22px -12px rgba(var(--halo), .9); }
/* o tema antigo deixava os ícones parados; aqui eles reagem (só o ícone se move, nunca o texto) */
#tabs .ico { transition: transform .3s cubic-bezier(.3, 1.8, .5, 1) !important; }
#tabs button:hover .ico { transform: scale(1.18) rotate(-6deg) !important; }
#tabs button.active .ico { animation: flutuar 2.6s ease-in-out infinite !important; }
#tabs button.toque .ico, #barra button.toque .ico { animation: toque .45s cubic-bezier(.3, 1.6, .5, 1) !important; }
@keyframes flutuar { 0%, 100% { transform: translateY(0) scale(1.1); } 50% { transform: translateY(-3px) scale(1.16); } }
@keyframes toque { 0% { transform: scale(.7) rotate(-14deg); } 55% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1.1) rotate(0); } }
/* aba com algo para resgatar: o ícone chama atenção de vez em quando */
#tabs button:has(em.badge:not(.hidden)):not(.active) .ico { animation: chamar 3.2s ease-in-out infinite !important; }
@keyframes chamar { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(-12deg) scale(1.15); } 86% { transform: rotate(10deg) scale(1.15); } 90% { transform: rotate(-7deg) scale(1.1); } 94% { transform: rotate(4deg); } }
#tabs button em.badge:not(.hidden), #barra button em.badge:not(.hidden) { animation: pulsarAviso 1.8s ease-in-out infinite; }
@keyframes pulsarAviso { 50% { transform: scale(1.18); box-shadow: 0 0 16px rgba(255, 77, 106, 1); } }
/* recursos do topo: brilho que passa e ícone que gira ao passar o mouse */
.coin { position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }
.coin:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .3); }
.coin i[data-i] { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.coin:hover i[data-i] { transform: rotate(18deg) scale(1.2); }
.coin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); background-size: 300% 100%; background-position: 130% 0; animation: reflexo 5s ease-in-out infinite; pointer-events: none; }
.coin.xp::after { animation-delay: 1.2s; } .coin.selo::after { animation-delay: 2.4s; } .coin.gem::after { animation-delay: 3.6s; }
.correio-btn:has(.badge:not(.hidden)) .ico { animation: chamar 2.6s ease-in-out infinite; }
#topbar .conta-btn { transition: transform .15s, background .2s, border-color .2s; }
#topbar .conta-btn:hover { transform: translateY(-1px) scale(1.06); }
@media (prefers-reduced-motion: reduce) { #tabs .ico, #barra .ico, .coin::after, #tabs em.badge { animation: none !important; } }
#tabs .ico, #barra .ico { isolation: isolate; }
#tabs .ico[data-i] { width: 30px; height: 30px; flex: 0 0 30px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); }
#tabs button { gap: 12px; }

/* cartas não obtidas: silhueta escura (o cinza claro fazia armadura e capa parecerem "fundo branco") */
.hcard.locked { filter: none; opacity: 1; background: linear-gradient(180deg, #171a34, #0d0f20); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.hcard.locked img, .hcard.locked img.art { filter: grayscale(1) brightness(.42) contrast(1.15); background: radial-gradient(circle at 50% 30%, #1d2142, #0a0c1a 82%); }
.hcard.locked .hname { color: #9aa0c4; } .hcard.locked .hlvl { color: var(--muted); }
.hcard.locked:hover img { filter: grayscale(.6) brightness(.7); }