:root{
  --noite:#0a0d15;
  --carvao:#131928;
  --carvao2:#1a2135;
  --carvao3:#212a42;
  --linha:rgba(216,164,66,.15);
  --linha2:rgba(216,164,66,.32);
  --perg:#ece4cf;
  --perg2:#a89f8a;
  --perg3:#6f6a5d;
  --ouro:#d8a442;
  --ouro2:#f0c76a;
  --fenda:#8f6bff;
  --sangue:#e05555;
  --vida:#53b87f;
  --cC:#98a2ae; --cB:#57a2f2; --cA:#b46bff; --cS:#f0c76a;
  --rC:#98a2ae; --rR:#57a2f2; --rE:#b46bff; --rL:#f0c76a;
  --sombra:0 10px 30px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--noite);
  background-image:
    radial-gradient(1100px 480px at 50% -180px, rgba(143,107,255,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 110%, rgba(216,164,66,.05), transparent 60%),
    radial-gradient(1400px 900px at 50% 50%, transparent 55%, rgba(0,0,0,.5));
  background-attachment:fixed;
  color:var(--perg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.5;
  min-height:100vh;
}
::selection{background:rgba(216,164,66,.35)}
button{font-family:inherit;cursor:pointer}
select{font-family:inherit}
h1,h2,h3,.disp{font-family:'Palatino Linotype',Palatino,Georgia,serif;letter-spacing:.04em}
svg{display:block}

/* ============ topo ============ */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 22px;border-bottom:1px solid var(--linha);
  background:linear-gradient(180deg, rgba(19,25,40,.92), rgba(10,13,21,.6));
  position:sticky;top:0;z-index:40;backdrop-filter:blur(8px);
}
.marca{display:flex;align-items:center;gap:12px}
.selo-guilda{width:44px;height:44px;color:var(--ouro);border:1px solid var(--linha2);
  border-radius:50% 50% 14% 14% / 62% 62% 10% 10%;
  display:flex;align-items:center;justify-content:center;padding:8px;
  background:radial-gradient(circle at 50% 30%, rgba(143,107,255,.25), rgba(19,25,40,.9));
  box-shadow:0 0 18px rgba(143,107,255,.18)}
.marca h1{font-size:21px;font-weight:900;color:var(--ouro2);line-height:1.05}
.marca span{font-size:12px;color:var(--perg2);letter-spacing:.22em;text-transform:uppercase}
.rec{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--linha);
  border-radius:99px;background:rgba(26,33,53,.7);font-size:14px;color:var(--perg2)}
.chip b{color:var(--perg);font-weight:700}
.chip svg{width:16px;height:16px;color:var(--ouro)}
.chip .div-letra{color:var(--ouro2);font-family:'Palatino Linotype',Palatino,Georgia,serif;font-weight:700}

/* ============ abas ============ */
.abas{display:flex;gap:4px;padding:10px 22px 0;border-bottom:1px solid var(--linha);
  overflow-x:auto;scrollbar-width:none;background:rgba(10,13,21,.4)}
.abas::-webkit-scrollbar{display:none}
.aba{display:flex;align-items:center;gap:8px;padding:10px 16px 12px;border:none;background:none;
  color:var(--perg2);font-size:15px;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .15s}
.aba svg{width:17px;height:17px}
.aba:hover{color:var(--perg)}
.aba.ativa{color:var(--ouro2);border-bottom-color:var(--ouro)}
.aba:focus-visible{outline:2px solid var(--ouro);outline-offset:-2px;border-radius:6px}

/* ============ layout ============ */
.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 80px}
.titulo-tela{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.titulo-tela h2{font-size:22px;color:var(--perg)}
.sub{color:var(--perg2);font-size:14.5px;margin-bottom:20px}
.secao{margin-top:34px}
.secao h3{font-size:15px;color:var(--ouro2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;
  display:flex;align-items:center;gap:10px}
.secao h3::after{content:"";flex:1;height:1px;background:var(--linha)}

/* ============ cards ============ */
.card{background:linear-gradient(180deg,var(--carvao2),var(--carvao));border:1px solid var(--linha);
  border-radius:12px;padding:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:8px}
.kpi{background:linear-gradient(180deg,var(--carvao2),var(--carvao));border:1px solid var(--linha);
  border-radius:12px;padding:14px 16px}
.kpi .k-rot{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--perg3);display:flex;align-items:center;gap:7px}
.kpi .k-rot svg{width:14px;height:14px;color:var(--ouro)}
.kpi .k-val{font-size:24px;font-weight:800;margin-top:4px;color:var(--perg)}
.kpi .k-val small{font-size:13px;font-weight:500;color:var(--perg2)}

/* ============ botões ============ */
.btn{border-radius:9px;border:1px solid var(--linha2);padding:10px 18px;font-size:15px;font-weight:700;
  transition:transform .12s, box-shadow .12s, background .12s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ouro2);outline-offset:2px}
.btn-p{background:linear-gradient(180deg,var(--ouro2),var(--ouro));color:#241a06;border-color:var(--ouro)}
.btn-p:hover{box-shadow:0 0 18px rgba(216,164,66,.4)}
.btn-g{background:rgba(26,33,53,.7);color:var(--perg)}
.btn-g:hover{background:var(--carvao3)}
.btn-d{background:linear-gradient(180deg,#5a1f24,#411318);color:#f4c9c9;border-color:rgba(224,85,85,.5)}
.btn-d:hover{box-shadow:0 0 16px rgba(224,85,85,.35)}
.btn-s{padding:6px 12px;font-size:13.5px;border-radius:7px}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ============ selos e tags ============ */
.selo{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:6px;font-family:'Palatino Linotype',Palatino,Georgia,serif;font-weight:700;font-size:13px;border:1px solid}
.s-C{color:var(--cC);border-color:var(--cC);background:rgba(152,162,174,.1)}
.s-B{color:var(--cB);border-color:var(--cB);background:rgba(87,162,242,.1)}
.s-A{color:var(--cA);border-color:var(--cA);background:rgba(180,107,255,.12)}
.s-S{color:#2a1f05;border-color:var(--cS);background:linear-gradient(180deg,var(--ouro2),var(--ouro))}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:3px 9px;border-radius:99px;
  border:1px solid var(--linha);color:var(--perg2)}
.tag svg{width:12px;height:12px}
.tag-pts{color:#1f2a12;background:linear-gradient(180deg,#9fd06a,#7db24a);border-color:#7db24a;font-weight:700}
.tag-ferido{color:#f2b8b8;border-color:rgba(224,85,85,.5);background:rgba(224,85,85,.12)}
.tag-promo{color:var(--ouro2);border-color:var(--linha2);background:rgba(216,164,66,.12);font-weight:700}
.tag-mortal{color:#ffd9d9;border-color:rgba(224,85,85,.6);background:rgba(224,85,85,.16);font-weight:700}
.tag-mortal svg{width:13px;height:13px}

/* ============ heróis ============ */
.grade-h{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hcard{background:linear-gradient(180deg,var(--carvao2),var(--carvao));border:1px solid var(--linha);
  border-radius:13px;padding:15px;cursor:pointer;transition:transform .15s, border-color .15s, box-shadow .15s;
  position:relative;overflow:hidden}
.hcard:hover{transform:translateY(-3px);border-color:var(--linha2);box-shadow:var(--sombra)}
.hcard.off{opacity:.55}
.hcard.elite{border-color:rgba(240,199,106,.55);animation:brilhoS 2.6s ease-in-out infinite}
.hc-cab{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.avatar{width:58px;height:58px;flex:none;display:flex;align-items:center;justify-content:center;padding:13px;
  border-radius:46% 46% 14% 14% / 58% 58% 10% 10%;border:1.5px solid;position:relative}
.avatar svg{width:100%;height:100%}
.av-C{color:#cfd6dd;border-color:var(--cC);background:radial-gradient(circle at 50% 25%, rgba(152,162,174,.3), rgba(19,25,40,.95))}
.av-B{color:#cfe4fb;border-color:var(--cB);background:radial-gradient(circle at 50% 25%, rgba(87,162,242,.32), rgba(19,25,40,.95))}
.av-A{color:#e6d2ff;border-color:var(--cA);background:radial-gradient(circle at 50% 25%, rgba(180,107,255,.35), rgba(19,25,40,.95))}
.av-S{color:#fbe7b3;border-color:var(--cS);background:radial-gradient(circle at 50% 25%, rgba(240,199,106,.4), rgba(19,25,40,.95));
  box-shadow:0 0 14px rgba(240,199,106,.35)}
.av-inimigo{color:#f2b8b8;border-color:rgba(224,85,85,.6);background:radial-gradient(circle at 50% 25%, rgba(224,85,85,.28), rgba(19,25,40,.95))}
.hc-nome{font-weight:800;font-size:16.5px}
.hc-sub{font-size:13.5px;color:var(--perg2);display:flex;align-items:center;gap:7px;margin-top:3px}
.hc-att{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--perg2);margin:10px 0 4px}
.hc-att b{color:var(--perg);font-weight:700}
.hc-rod{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;flex-wrap:wrap}
.hc-poder{font-size:13.5px;color:var(--perg2)}
.hc-poder b{color:var(--ouro2);font-size:15px}
.mini-bar{height:5px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:8px}
.mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--fenda),#b79aff);border-radius:99px;transition:width .3s}
.mini-rot{font-size:11.5px;color:var(--perg3);margin-top:4px;letter-spacing:.06em}

/* atributos no detalhe */
.attr-linha{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.attr-nome{width:96px;flex:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--perg2)}
.attr-bar{flex:1;height:9px;border-radius:99px;background:rgba(0,0,0,.45);overflow:hidden}
.attr-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ouro),var(--ouro2));transition:width .25s}
.attr-val{width:30px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.btn-mais{width:26px;height:26px;border-radius:7px;border:1px solid #7db24a;background:rgba(125,178,74,.16);
  color:#b9e18d;font-weight:800;font-size:15px;line-height:1}
.btn-mais:hover{background:rgba(125,178,74,.3)}
.eq-linha{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.eq-slot{width:86px;flex:none;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--perg3)}
.eq-linha select{flex:1;min-width:170px;background:var(--carvao3);color:var(--perg);border:1px solid var(--linha);
  border-radius:8px;padding:8px 10px;font-size:14px}

/* ============ fendas ============ */
.grade-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.dcard{background:linear-gradient(180deg,var(--carvao2),var(--carvao));border:1px solid var(--linha);
  border-radius:13px;padding:17px;display:flex;flex-direction:column;gap:11px;transition:transform .15s, border-color .15s}
.dcard:hover{transform:translateY(-3px);border-color:var(--linha2)}
.dcard.mortal{border-color:rgba(224,85,85,.45);background:linear-gradient(180deg,#221420,var(--carvao))}
.d-cab{display:flex;align-items:center;gap:11px}
.selo-rank{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:'Palatino Linotype',Palatino,Georgia,serif;font-weight:900;font-size:19px;border-radius:10px;border:1.5px solid}
.r-E{color:#9fb59a;border-color:#6f8a69;background:rgba(111,138,105,.12)}
.r-D{color:#cfd6dd;border-color:var(--cC);background:rgba(152,162,174,.12)}
.r-C{color:#cfe4fb;border-color:var(--cB);background:rgba(87,162,242,.12)}
.r-B{color:#e6d2ff;border-color:var(--cA);background:rgba(180,107,255,.14)}
.r-A{color:#fbe7b3;border-color:var(--cS);background:rgba(240,199,106,.14)}
.d-nome{font-weight:800;font-size:17px}
.d-flavor{font-size:14px;color:var(--perg2);font-style:italic;line-height:1.45}
.d-info{display:flex;gap:8px;flex-wrap:wrap}
.d-rod{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.d-ouro{display:flex;align-items:center;gap:7px;color:var(--ouro2);font-weight:800;font-size:15px}
.d-ouro svg{width:16px;height:16px}
.ris{font-weight:800}
.ris-baixo{color:var(--vida)} .ris-mod{color:var(--ouro2)} .ris-alto{color:#e8934c} .ris-ext{color:var(--sangue)}
.sq-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--linha);border-radius:10px;
  margin-bottom:8px;cursor:pointer;transition:border-color .12s, background .12s}
.sq-item:hover{border-color:var(--linha2)}
.sq-item.sel{border-color:var(--ouro);background:rgba(216,164,66,.09)}
.sq-item .avatar{width:40px;height:40px;padding:9px}
.sq-check{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--linha2);display:flex;
  align-items:center;justify-content:center;color:#241a06;font-weight:900;font-size:13px}
.sq-item.sel .sq-check{background:var(--ouro2);border-color:var(--ouro2)}

/* ============ batalha ============ */
.batalha{animation:surgir .3s ease}
.b-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.b-tit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.b-tit h2{font-size:20px}
.b-ctl{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.b-ctl .rotulo{font-size:13px;color:var(--perg3);letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.b-onda{font-size:13.5px;color:var(--perg2);border:1px solid var(--linha);border-radius:99px;padding:5px 12px}
.btn-vel{padding:6px 11px;font-size:13px;border-radius:7px;border:1px solid var(--linha);background:rgba(26,33,53,.7);color:var(--perg2);font-weight:700}
.btn-vel.ativa{color:#241a06;background:linear-gradient(180deg,var(--ouro2),var(--ouro));border-color:var(--ouro)}
.campo{display:flex;align-items:stretch;gap:6px;border:1px solid var(--linha);border-radius:14px;
  padding:22px 14px 16px;margin-bottom:14px;position:relative;overflow:hidden;
  background:
    radial-gradient(500px 190px at 50% 108%, rgba(143,107,255,.16), transparent 70%),
    linear-gradient(180deg,#101524,#0c101c)}
.campo::after{content:"";position:absolute;left:8%;right:8%;bottom:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,107,255,.55),transparent)}
.campo.tremor{animation:tremor .45s ease}
.lado{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:center;justify-content:center;z-index:1}
.vs{width:46px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--fenda);opacity:.9}
.vs svg{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(143,107,255,.7))}
.token{width:96px;text-align:center;position:relative;transition:opacity .3s}
.token .tk-ic{width:56px;height:56px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:13px;
  border-radius:46% 46% 14% 14% / 58% 58% 10% 10%;border:1.5px solid;transition:transform .2s}
.token.chefao{width:120px}
.token.chefao .tk-ic{width:76px;height:76px;padding:17px;box-shadow:0 0 22px rgba(224,85,85,.35)}
.token .tk-nome{font-size:12px;font-weight:700;margin-top:6px;line-height:1.2;color:var(--perg)}
.token .tk-bar{height:6px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:5px;border:1px solid rgba(0,0,0,.6)}
.token .tk-bar i{display:block;height:100%;background:linear-gradient(90deg,#3f9b6c,var(--vida));transition:width .35s}
.token.perigo .tk-bar i{background:linear-gradient(90deg,#a33,var(--sangue))}
.token.caido{opacity:.32;filter:grayscale(.9)}
.token.caido .tk-ic{transform:rotate(8deg) translateY(4px)}
.lado-h .token.agindo .tk-ic{animation:lungeH .38s ease}
.lado-i .token.agindo .tk-ic{animation:lungeI .38s ease}
.token.atingido .tk-ic{animation:hitflash .4s ease}
.flt{position:absolute;left:50%;top:-4px;transform:translateX(-50%);font-weight:900;font-size:16px;
  pointer-events:none;animation:flutuar 1s ease forwards;text-shadow:0 2px 6px rgba(0,0,0,.8);z-index:5;white-space:nowrap}
.flt.dmg{color:#ff9d9d}
.flt.crit{color:var(--ouro2);font-size:20px}
.flt.heal{color:#9fe8bf}
.flt.esq{color:var(--perg2);font-size:13px;font-weight:700;font-style:italic}

/* crônica */
.log{border:1px solid var(--linha);border-radius:13px;background:rgba(12,15,24,.85);
  height:320px;overflow-y:auto;padding:16px 18px;scroll-behavior:smooth}
.log::-webkit-scrollbar{width:9px}
.log::-webkit-scrollbar-thumb{background:var(--carvao3);border-radius:99px}
.ln{padding:6px 10px;margin-bottom:5px;font-size:14.5px;color:var(--perg2);border-left:2px solid transparent;
  border-radius:5px;animation:entrada .25s ease}
.ln .nm-h{color:var(--ouro2);font-weight:800}
.ln .nm-i{color:#f09090;font-weight:800}
.ln.h{color:var(--perg);border-left-color:rgba(216,164,66,.4)}
.ln.i{color:var(--perg2);border-left-color:rgba(224,85,85,.4)}
.ln.crit{color:var(--ouro2);font-weight:700;background:rgba(216,164,66,.08);border-left-color:var(--ouro)}
.ln.cura{color:#b7e6cc;border-left-color:var(--vida)}
.ln.soro{color:#b7e6cc;background:rgba(83,184,127,.1);border-left-color:var(--vida);font-weight:700}
.ln.morte{color:#f2c0c0;background:rgba(224,85,85,.1);border-left-color:var(--sangue);font-weight:700}
.ln.sist{text-align:center;color:var(--ouro2);letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;
  font-weight:800;border:none;margin:10px 0}
.ln.chefe{text-align:center;font-family:'Palatino Linotype',Palatino,Georgia,serif;font-weight:700;font-size:16px;color:#f0d5ff;
  background:linear-gradient(90deg,transparent,rgba(143,107,255,.16),transparent);border:none;padding:12px;margin:10px 0}
.ln.amb{font-style:italic;color:var(--perg3)}
.b-fim{margin-top:14px;display:flex;justify-content:center;gap:10px}

/* ============ arsenal ============ */
.grade-i{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.icard{border:1px solid var(--linha);border-radius:12px;padding:14px;background:linear-gradient(180deg,var(--carvao2),var(--carvao));
  display:flex;gap:12px;align-items:flex-start}
.icard .i-ic{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;padding:10px;
  border-radius:10px;border:1.5px solid}
.icard .i-ic svg{width:100%;height:100%}
.br-comum{color:#cfd6dd;border-color:var(--rC);background:rgba(152,162,174,.1)}
.br-raro{color:#cfe4fb;border-color:var(--rR);background:rgba(87,162,242,.12)}
.br-epico{color:#e6d2ff;border-color:var(--rE);background:rgba(180,107,255,.14)}
.br-lend{color:#fbe7b3;border-color:var(--rL);background:rgba(240,199,106,.16);box-shadow:0 0 12px rgba(240,199,106,.2)}
.i-nome{font-weight:800;font-size:15px}
.i-ds{font-size:13.5px;color:var(--perg2);margin-top:2px}
.i-uso{font-size:12.5px;margin-top:6px;color:var(--perg3)}
.rar{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.rar.comum{color:var(--rC)} .rar.raro{color:var(--rR)} .rar.epico{color:var(--rE)} .rar.lend{color:var(--rL)}

/* ============ arena e ranking ============ */
.rival{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rival .r-info{flex:1;min-width:180px}
.r-nome{font-weight:800;font-size:16px}
.r-lema{font-size:13px;font-style:italic;color:var(--perg3)}
.tabela{width:100%;border-collapse:collapse;font-size:14.5px}
.tabela th{text-align:left;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--perg3);
  padding:9px 12px;border-bottom:1px solid var(--linha)}
.tabela td{padding:11px 12px;border-bottom:1px solid rgba(216,164,66,.07)}
.tabela tr.eu td{background:rgba(216,164,66,.09);color:var(--ouro2);font-weight:700}
.tabela .pos{font-family:'Palatino Linotype',Palatino,Georgia,serif;font-weight:700;color:var(--perg2)}

/* ============ feed ============ */
.feed-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(216,164,66,.07);
  font-size:14.5px;color:var(--perg2)}
.feed-item:last-child{border-bottom:none}
.feed-item svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--ouro)}
.feed-item.ruim svg{color:var(--sangue)}
.feed-item b{color:var(--perg)}

/* ============ modal ============ */
.modal-bg{position:fixed;inset:0;background:rgba(5,7,12,.78);backdrop-filter:blur(4px);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:5vh 16px;overflow:hidden}
.modal-bg[hidden]{display:none}
.modal{width:100%;max-width:640px;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,var(--carvao2),var(--carvao));
  border:1px solid var(--linha2);border-radius:16px;padding:24px;box-shadow:var(--sombra);animation:surgir .22s ease}
body.modal-aberto{overflow:hidden}
.ctr-footer{position:sticky;bottom:-24px;z-index:3;margin:16px -24px -24px;padding:14px 24px;background:linear-gradient(180deg,rgba(19,25,40,.45),rgba(19,25,40,.98) 24%);border-top:1px solid var(--linha)}
.ctr-footer #ctr-ir{min-width:150px}
.modal.larga{max-width:760px}
.m-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.m-cab h3{font-size:19px}
.m-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--linha);background:none;color:var(--perg2);font-size:17px}
.m-x:hover{color:var(--perg);border-color:var(--linha2)}
.divisor{height:1px;background:var(--linha);margin:16px 0}

/* ============ toast ============ */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--carvao3);
  border:1px solid var(--linha2);color:var(--perg);padding:11px 20px;border-radius:11px;z-index:120;
  box-shadow:var(--sombra);font-weight:600;animation:surgir .2s ease;max-width:88vw;text-align:center}
#toast[hidden]{display:none}

/* ============ memorial ============ */
.memorial{border:1px solid rgba(224,85,85,.35);background:linear-gradient(180deg,#1c1218,#141019);
  border-radius:12px;padding:16px}
.memorial .mem-item{display:flex;gap:11px;align-items:center;padding:8px 0;color:var(--perg2);font-size:14.5px}
.memorial svg{width:16px;height:16px;color:var(--sangue);flex:none}

/* ============ intro ============ */
.intro-passos{display:grid;gap:10px;margin:18px 0}
.intro-passo{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--perg2)}
.intro-passo svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--ouro)}
.intro-passo b{color:var(--perg)}

/* ============ animações ============ */
@keyframes lungeH{50%{transform:translateX(15px) scale(1.06)}}
@keyframes lungeI{50%{transform:translateX(-15px) scale(1.06)}}
@keyframes flutuar{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-36px)}}
@keyframes tremor{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes entrada{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes surgir{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes brilhoS{0%,100%{box-shadow:0 0 12px rgba(240,199,106,.22)}50%{box-shadow:0 0 24px rgba(240,199,106,.5)}}
@keyframes hitflash{0%{filter:brightness(2.3) saturate(1.6)}100%{filter:none}}

@media (max-width:760px){
  .wrap{padding:20px 14px 70px}
  .top{padding:12px 14px}
  .abas{padding:8px 14px 0}
  .campo{flex-direction:column;padding:16px 10px}
  .vs{width:auto;padding:6px 0}
  .vs svg{transform:rotate(90deg)}
  .token{width:78px}
  .token .tk-ic{width:46px;height:46px;padding:11px}
  .token.chefao{width:96px}
  .token.chefao .tk-ic{width:60px;height:60px;padding:14px}
  .log{height:280px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* SpacesMax production polish */
.world-bg{position:fixed;inset:0;z-index:-2;background:#080b14 url('/art/rift-world.svg') center top/cover no-repeat;opacity:.72;pointer-events:none}
.world-vignette{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,8,15,.2),#090c15 66%,#090c15),radial-gradient(circle at 50% 15%,transparent 0,rgba(7,9,16,.72) 68%);pointer-events:none}
.top{min-height:76px;padding-block:12px;background:linear-gradient(180deg,rgba(13,18,31,.97),rgba(9,12,21,.84));box-shadow:0 12px 42px rgba(0,0,0,.2)}
.marca h1{letter-spacing:.12em}.marca span{letter-spacing:.19em}.prototype-badge{font-size:10px;letter-spacing:.16em;color:#b9a9ff;border:1px solid rgba(143,107,255,.34);background:rgba(143,107,255,.1);border-radius:99px;padding:5px 9px;margin-left:4px;white-space:nowrap}
.card,.kpi,.hcard,.dcard,.icard{backdrop-filter:blur(12px);box-shadow:inset 0 1px rgba(255,255,255,.025),0 14px 40px rgba(0,0,0,.12)}
.kpi{position:relative;overflow:hidden}.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,var(--ouro2),transparent)}
.campo{min-height:330px;background-image:linear-gradient(180deg,rgba(8,11,20,.35),rgba(7,9,16,.72)),url('/art/battle-vault.svg');background-position:center;background-size:cover;box-shadow:inset 0 0 80px rgba(0,0,0,.62),0 18px 60px rgba(0,0,0,.22)}
.campo::before{content:"";position:absolute;left:50%;top:5%;width:2px;height:78%;background:linear-gradient(180deg,transparent,rgba(167,137,255,.8),transparent);box-shadow:0 0 25px 8px rgba(143,107,255,.16);opacity:.72}
.modal{box-shadow:0 36px 120px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.04)}
.save-chip{appearance:none}.save-chip:hover{border-color:var(--linha2);color:var(--perg)}
.av-atacante{background:radial-gradient(circle at 50% 20%,rgba(224,85,85,.34),rgba(19,25,40,.95))}.av-tanque{background:radial-gradient(circle at 50% 20%,rgba(87,162,242,.3),rgba(19,25,40,.95))}.av-mago{background:radial-gradient(circle at 50% 20%,rgba(180,107,255,.37),rgba(19,25,40,.95))}.av-curador{background:radial-gradient(circle at 50% 20%,rgba(83,184,127,.3),rgba(19,25,40,.95))}
.hcard .avatar{isolation:isolate}.hcard .avatar::after{content:"";position:absolute;inset:-20%;border:1px solid currentColor;border-radius:50%;opacity:.08;transform:rotate(28deg)}
.modo-local{display:flex;gap:8px;align-items:center;color:var(--perg3);font-size:12px;margin-top:12px}.modo-local i{width:7px;height:7px;border-radius:50%;background:var(--vida);box-shadow:0 0 12px rgba(83,184,127,.7)}
@media(max-width:760px){.top{align-items:flex-start;position:relative}.marca{width:100%}.prototype-badge{margin-left:auto}.rec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.chip{justify-content:center;padding:7px 8px;font-size:12px}.save-chip{grid-column:span 2}.abas{position:fixed;left:0;right:0;bottom:0;z-index:70;justify-content:space-around;padding:7px max(6px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:rgba(10,13,21,.97);backdrop-filter:blur(16px);border-top:1px solid var(--linha2);border-bottom:0}.aba{flex:1;min-width:0;flex-direction:column;gap:2px;padding:6px 2px 7px;font-size:10px;border-bottom:0;border-radius:8px}.aba.ativa{background:rgba(216,164,66,.1);border-bottom:0}.aba svg{width:18px;height:18px}.wrap{padding-bottom:112px}.modo-local{margin-bottom:58px}.campo{min-height:400px}.titulo-tela h2{font-size:19px}.grade-f,.grade-h{grid-template-columns:1fr}.modal-bg{padding:2vh 8px}.modal{padding:18px;max-height:96vh}.ctr-footer{bottom:-18px;margin:16px -18px -18px;padding:12px 18px}.ctr-footer>div:last-child{width:100%;justify-content:space-between}.ctr-footer #ctr-ir{flex:1}.tabela{min-width:520px}.card:has(.tabela){overflow-x:auto}}