/* =====================================================================
   Torre dos Chefes (11/10, SQL 1520) + o RANK de dentro do evento.
   Cartão da coluna da batalha, a janela da Torre (torre-ui.js) e a janela
   do RANK (rank-evento.js). Celular: a janela ocupa a tela inteira.
   ===================================================================== */
:root{--tr-ouro:#e2b04a;--tr-ouro2:#ffd98a;--tr-linha:rgba(226,176,74,.28);--tr-fundo:#12141a;--tr-card:#1a1d25;--tr-mut:#97a1b2;--tr-verm:#ff6b5e;--tr-verde:#8ff0a0}

/* ---------- cartão da coluna ---------- */
.torre-rail-card{padding:0!important;overflow:hidden!important;border-color:#7a4a2a!important;background:linear-gradient(135deg,rgba(140,60,24,.45),rgba(12,12,18,.92))!important}
.torre-rail-entry{width:100%}
.torre-rail-entry .rail-toggle-copy strong{color:#ffd9b0}
.torre-rail-entry .rail-toggle-chevron{font-size:1.3em;color:#ffb070}

/* ---------- janela ---------- */
.torre-fundo{z-index:1400}
.torre-janela.modal-card{width:min(980px,100%);max-height:calc(100vh - 40px);padding:0;display:flex;flex-direction:column;border-color:#6a4320;background:var(--tr-fundo);color:#e9edf2}
.torre-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--tr-linha);background:linear-gradient(180deg,#2a1a10,var(--tr-fundo))}
.torre-cab-icone{flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center;font-size:34px;filter:drop-shadow(0 0 8px rgba(214,60,40,.35))}
.torre-cab-icone .col-icone{font-style:normal;display:grid;place-items:center;width:100%;height:100%}
.torre-cab-icone .col-icone-img{width:100%;height:100%;object-fit:contain}
.torre-cab-txt{min-width:0;flex:1 1 auto}
.torre-cab small{display:block;font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.16em;color:var(--tr-ouro)}
.torre-cab h2{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(24px * var(--text-scale,1));color:#fff3d6;overflow-wrap:anywhere}
.torre-cab-acoes{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.torre-fechar{min-width:40px}
.torre-corpo{padding:14px 16px 16px;overflow:auto;display:flex;flex-direction:column;gap:12px;min-height:0}
.torre-vazio{padding:28px 10px;text-align:center;color:var(--tr-mut);font-size:calc(13px * var(--text-scale,1))}

.torre-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;margin:0;min-height:36px;padding:8px 14px;border:1px solid var(--botao-ouro-borda);border-radius:10px;
  background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);font-weight:900;letter-spacing:.06em;font-size:calc(12px * var(--text-scale,1));text-transform:none;cursor:var(--cur-mao,pointer)}
.torre-btn img{width:18px;height:18px;object-fit:contain}
.torre-btn .col-icone{font-style:normal}
.torre-btn.cinza{background:#262b36;border-color:#3d4556;color:#e9edf2}
.torre-btn.grande{min-height:48px;padding:10px 24px;font-size:calc(15px * var(--text-scale,1));width:100%}
.torre-btn.grande{flex-direction:column;gap:2px}
.torre-gratis{font-size:calc(11px * var(--text-scale,1));font-weight:800;letter-spacing:.08em;color:#2a1606;opacity:.85}
.torre-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.torre-btn[data-falta]{color:var(--tr-verm)}

.torre-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px}
.torre-chefe{display:flex;flex-direction:column;border:1px solid var(--tr-linha);border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3a1d14,#14100f 70%);min-width:0}
.torre-chefe.torre-titan{background:radial-gradient(circle at 50% 35%,#3a1430,#120c14 70%)}
.torre-chefe.torre-dragao{background:radial-gradient(circle at 50% 35%,#143a22,#0c120f 70%)}
.torre-chefe.torre-hardcore{background:radial-gradient(circle at 50% 35%,#4a0f12,#120a0b 70%)}
.torre-chefe-arte{position:relative;height:230px;display:flex;align-items:flex-end;justify-content:center;padding:28px 10px 6px}
.torre-chefe-arte img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,90,60,.4))}
.torre-andar{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.65);border:1px solid var(--tr-ouro);color:var(--tr-ouro2);font-weight:900;letter-spacing:.08em;font-size:calc(12px * var(--text-scale,1))}
.torre-chefe-info{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;background:rgba(0,0,0,.35)}
.torre-tipo{font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.14em;color:var(--tr-ouro)}
.torre-chefe-info strong{font-family:var(--font-display,Georgia,serif);font-size:calc(19px * var(--text-scale,1));color:#fff3d6;overflow-wrap:anywhere}
.torre-chefe-info em{font-style:normal;color:var(--tr-mut);font-size:calc(12px * var(--text-scale,1));overflow-wrap:anywhere}
.torre-tracos{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.torre-traco{padding:2px 8px;border-radius:999px;background:#3a1416;border:1px solid #a3262b;color:#ffd7d3;font-size:calc(10.5px * var(--text-scale,1));font-weight:800}

.torre-painel{display:flex;flex-direction:column;gap:10px;min-width:0}
.torre-numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.torre-numeros>div{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px;border:1px solid #2a303c;border-radius:10px;background:var(--tr-card);text-align:center;min-width:0}
.torre-numeros span{font-size:calc(9.5px * var(--text-scale,1));font-weight:900;letter-spacing:.1em;color:var(--tr-mut)}
.torre-numeros strong{font-size:calc(20px * var(--text-scale,1));color:var(--tr-ouro2);line-height:1.2}
.torre-numeros small{font-size:calc(10px * var(--text-scale,1));color:var(--tr-mut);overflow-wrap:anywhere}
.torre-marco{border:1px solid var(--tr-linha);border-radius:10px;padding:8px 10px;background:linear-gradient(180deg,#1f1a12,#16181e)}
.torre-marco>span{display:block;margin-bottom:6px;font-size:calc(10.5px * var(--text-scale,1));font-weight:900;letter-spacing:.1em;color:var(--tr-ouro)}
.torre-premios{display:flex;flex-wrap:wrap;gap:6px}
.torre-premio{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 4px;border-radius:8px;background:#10131a;border:1px solid #2a303c;min-width:0;max-width:100%}
.torre-premio img{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.torre-premio i{font-style:normal;font-size:18px}
.torre-premio b{color:var(--tr-verde);font-size:calc(12.5px * var(--text-scale,1))}
.torre-premio small{color:#c9d1dd;font-size:calc(10.5px * var(--text-scale,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.torre-caixa{border-color:#b9832c;background:#22160c}
.torre-nota{margin:0;color:var(--tr-mut);font-size:calc(11.5px * var(--text-scale,1));line-height:1.45}
.torre-falta{margin:0;color:var(--tr-verm);font-weight:800;font-size:calc(12.5px * var(--text-scale,1))}
.torre-ok{margin:0;color:var(--tr-verde);font-weight:800;font-size:calc(12.5px * var(--text-scale,1))}
.torre-acoes{display:flex}
.torre-extra{display:flex;flex-direction:column;gap:6px}
.torre-extra small{color:var(--tr-mut);font-size:calc(11px * var(--text-scale,1))}
.torre-extra-bts{display:flex;flex-wrap:wrap;gap:8px}
.torre-extra-bts .torre-btn{flex:1 1 140px}
.torre-mais{padding:10px 12px;border-radius:12px;border:1px solid rgba(226,176,74,.55);background:linear-gradient(180deg,rgba(226,176,74,.12),rgba(23,26,34,.6))}
.torre-mais strong{color:var(--tr-ouro);font-size:calc(13px * var(--text-scale,1))}
.torre-mais .torre-btn{white-space:normal}

.torre-resultado{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid #3d4556;background:#171a22}
.torre-resultado.recorde{border-color:var(--tr-ouro);box-shadow:0 0 18px rgba(226,176,74,.25);background:linear-gradient(180deg,#2a2010,#171a22)}
.torre-resultado strong{font-family:var(--font-display,Georgia,serif);font-size:calc(18px * var(--text-scale,1));color:#fff3d6}
.torre-resultado span{color:#c9d1dd;font-size:calc(12.5px * var(--text-scale,1))}
.torre-resultado span.torre-faltou{color:#ffb4a2;font-weight:600}  /* 2474: quanto da vida o chefe guardou */
.torre-como{border-top:1px solid #22262e;padding-top:8px;color:var(--tr-mut);font-size:calc(12px * var(--text-scale,1))}
.torre-como summary{cursor:var(--cur-mao,pointer);font-weight:800;color:#c9d1dd}
.torre-como ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;line-height:1.45}

/* a luta: só a arena aparece enquanto anima (como a Ilha) */
.torre-lutando .torre-corpo>:not([data-torre-luta]){display:none!important}
.torre-luta-faixa{margin-bottom:6px;text-align:center;font-weight:900;letter-spacing:.08em;color:var(--tr-ouro2);font-size:calc(12px * var(--text-scale,1))}
#torreBattleVisualizer{container-type:inline-size}
#torreBattleVisualizer .pvp-visualizer-stage>div:first-of-type{margin:-15px -20px 8px!important;padding:12px 20px 10px!important;background:linear-gradient(rgba(5,6,10,.82),rgba(5,6,10,.45) 70%,transparent)}
#torreBattleVisualizer h4>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#torreBattleVisualizer h4>small{flex:0 0 auto}
#torreBattleVisualizer .pvp-visualizer-stage>div:first-of-type>div{min-width:0}
/* o chefe do andar cabe no palco: no celular a arte de chefe cobria a arena inteira
   (a arte ganha `scale` do Editor; aqui só o tamanho da caixa encolhe, a calibração fica). */
#torreBattleVisualizer .pvp-boss-art{max-width:min(170px,22cqw)!important;max-height:min(170px,22cqw)!important}
/* a calibração do Editor dá `scale` à arte do chefe; crescendo do meio, os pés saíam do chão
   e sumiam embaixo dos botões no celular (11/10). Cresce a partir dos pés. */
#torreBattleVisualizer .pvp-boss-art{transform-origin:50% 100%}
@media (max-height:500px){#torreBattleVisualizer .pvp-boss-art{max-width:min(110px,22cqw)!important;max-height:min(110px,22cqw)!important}}
@container (max-width:560px){
  #torreBattleVisualizer .pvp-visualizer-stage{height:270px!important;padding:12px 10px!important}
  #torreBattleVisualizer .pvp-visualizer-stage>div:first-of-type{margin:-12px -10px 4px!important;padding:10px 12px 8px!important}
  #torreBattleVisualizer .pvp-visualizer-stage>div:first-of-type>div[style*="font-size: 1.5em"]{margin:0 8px!important;font-size:1.15em!important}
  #torreBattleVisualizer h4{font-size:.9rem!important}
  #torreBattleVisualizer div:has(>#pvpVisualizerPlayerAnchor){padding-bottom:36px!important;justify-content:space-between!important;min-height:0!important}
  #torreBattleVisualizer #pvpVisualizerPlayerAnchor,#torreBattleVisualizer #pvpVisualizerEnemyAnchor{flex:0 1 150px;min-width:0;transform-origin:50% 100%}
  #torreBattleVisualizer #pvpVisualizerPlayerAnchor{scale:.92}
  #torreBattleVisualizer #pvpVisualizerEnemyAnchor{scale:.9;margin-right:10px}
  #torreBattleVisualizer [id^="pvpVisualizerBtn"]{padding:3px 8px!important;font-size:.72rem!important}
}
@container (max-width:360px){
  #torreBattleVisualizer .pvp-visualizer-stage{height:255px!important}
  #torreBattleVisualizer h4>small{display:none}
  #torreBattleVisualizer #pvpVisualizerPlayerAnchor{scale:.8;margin-left:-14px}
  #torreBattleVisualizer #pvpVisualizerEnemyAnchor{scale:.7;margin-right:-8px}
}
@media (min-width:700px){
  #torreBattleVisualizer .pvp-visualizer-stage{height:clamp(320px,calc(100vh - 260px),620px)!important}
  #torreBattleVisualizer .pvp-chao{padding-bottom:clamp(25px,11vh,130px)!important}
}

/* ---------- RANK do evento ---------- */
.rkv-fundo{z-index:1600}
.rkv-janela.modal-card{width:min(560px,100%);max-height:calc(100vh - 40px);padding:0;display:flex;flex-direction:column;border-color:#6a4320;background:var(--tr-fundo);color:#e9edf2}
.rkv-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--tr-linha);background:linear-gradient(180deg,#2a1a10,var(--tr-fundo))}
.rkv-cab small{display:block;font-size:calc(10px * var(--text-scale,1));font-weight:900;letter-spacing:.16em;color:var(--tr-ouro)}
.rkv-cab h2{margin:0;font-family:var(--font-display,Georgia,serif);font-size:calc(22px * var(--text-scale,1));color:#fff3d6;overflow-wrap:anywhere}
.rkv-fechar{min-width:40px}
.rkv-corpo{padding:12px 14px 14px;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:8px}
.rkv-vazio{padding:24px 8px;text-align:center;color:var(--tr-mut);font-size:calc(13px * var(--text-scale,1))}
.rkv-voce{padding:8px 10px;border-radius:10px;background:#22180c;border:1px solid var(--tr-ouro);color:var(--tr-ouro2);font-weight:800;font-size:calc(13px * var(--text-scale,1))}
.rkv-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.rkv-linha{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:var(--tr-card);border:1px solid #232834}
.rkv-pos{font-weight:900;color:#c9d1dd;font-size:calc(13px * var(--text-scale,1))}
.rkv-top1 .rkv-pos{color:#ffcf4a}.rkv-top2 .rkv-pos{color:#d8dee9}.rkv-top3 .rkv-pos{color:#e09a5a}
.rkv-nome{display:flex;flex-direction:column;min-width:0}
.rkv-nome b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(13px * var(--text-scale,1))}
.rkv-nome small{color:var(--tr-mut);font-size:calc(10.5px * var(--text-scale,1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rkv-valor{display:flex;flex-direction:column;align-items:flex-end}
.rkv-valor b{color:var(--tr-ouro2);font-size:calc(15px * var(--text-scale,1))}
.rkv-valor small{color:var(--tr-mut);font-size:calc(9px * var(--text-scale,1));letter-spacing:.1em;font-weight:800}
.rkv-eu{border-color:var(--tr-ouro);background:#22180c}
.rkv-sua{margin-top:4px}
.rkv-nota{margin:4px 0 0;color:var(--tr-mut);font-size:calc(11px * var(--text-scale,1));text-align:center}
.dungeon-b-rank{position:relative;justify-self:start;align-self:flex-start;margin-top:4px;width:auto;min-height:32px;padding:6px 14px;border:1px solid var(--tr-ouro);border-radius:999px;background:rgba(10,12,18,.75);
  color:var(--tr-ouro2);font-weight:900;letter-spacing:.1em;font-size:calc(11px * var(--text-scale,1));cursor:var(--cur-mao,pointer);z-index:1}

/* ---------- telas ---------- */
@media (max-width:760px){
  .torre-fundo,.rkv-fundo{padding:0!important;align-items:stretch}
  .torre-janela.modal-card,.rkv-janela.modal-card{max-height:100vh;height:100%;border-radius:0;border-left:0;border-right:0;padding:0}
  @supports (height:100dvh){.torre-janela.modal-card,.rkv-janela.modal-card{max-height:100dvh;height:100dvh}}
  .torre-grade{grid-template-columns:1fr}
  .torre-chefe{flex-direction:row}
  /* o selo do andar fica EM CIMA da arte, não sobre ela (11/10: com texto grande cobria a cabeça do chefe) */
  .torre-chefe-arte{flex:0 0 42%;height:auto;min-height:150px;padding:8px 6px 6px;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px}
  .torre-andar{position:static;order:-1;align-self:flex-start;white-space:nowrap}
  .torre-chefe-arte img{flex:1 1 auto;min-height:0;max-height:150px}
  .torre-chefe-info{flex:1 1 auto;justify-content:center;background:transparent}
  .torre-corpo{padding:12px}
}
/* topo no celular: o título usa a largura toda, embaixo da linha "MODO PVE" + RANK + X
   (11/10: com o texto grande do Android o título quebrava em 3 linhas) */
@media (max-width:560px){
  .torre-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icone tag acoes" "icone titulo titulo";column-gap:10px;row-gap:4px;padding:10px 12px}
  .torre-cab-txt{display:contents}
  .torre-cab-icone{grid-area:icone;align-self:center}
  .torre-cab small{grid-area:tag;align-self:center;min-width:0;line-height:1.35}
  .torre-cab h2{grid-area:titulo;min-width:0}
  .torre-cab-acoes{grid-area:acoes;gap:6px}
  .torre-cab-acoes .torre-btn{padding:6px 10px}
  .torre-cab{container-type:inline-size}
}
/* bem estreito (ou texto bem grande): o RANK fica só com o troféu */
@container (max-width:320px){.torre-rank-txt{display:none}}
@media (max-width:400px){
  .torre-numeros strong{font-size:calc(17px * var(--text-scale,1))}
  .torre-chefe-arte{flex-basis:38%;min-height:130px}
  .torre-cab h2{font-size:calc(20px * var(--text-scale,1))}
  .torre-cab-icone{width:40px;height:40px}
  .rkv-linha{grid-template-columns:36px minmax(0,1fr) auto;padding:6px 8px}
}
@media (orientation:landscape) and (max-height:500px){
  .torre-fundo,.rkv-fundo{padding:0!important;align-items:stretch}
  .torre-janela.modal-card,.rkv-janela.modal-card{max-height:100vh;height:100%;border-radius:0}
  .torre-grade{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .torre-chefe-arte{height:150px}
}