/* ============================================================================
   PVP HUB ENXUTO + ILHA DO DRAGÃO (22/10, plano aprovado "recomendados")
   ----------------------------------------------------------------------------
   Autor: "ilha do dragão, mesma coisa: pra ver o que é importante eu preciso rolar pra
   baixo, o botão de atacar fica em cima enquanto o resto fica abaixo, tá mal montado
   [...] deixar mais premium, minimalista, simples e eficiente, com o que precisa".
   1. Abas do Hub numa faixa só, que desliza para o lado (no celular eram 5 linhas e
      ocupavam a primeira tela inteira, presas no topo); Honra e War Medals em selos.
   2. Ilha (opção 1): o trono à esquerda; à direita, seus pontos com o ATACAR e o
      ranking. No celular, o cartão do ATACAR fica preso no rodapé.
   Carregado DEPOIS do pvp-b.css e do ilha.css (por isso vence sem !important onde dá).
   ========================================================================== */

/* ---------- 1. o Hub ---------- */
/* div.: vence o "#colosseumModal .modal-title-row + div" (display:grid!important) */
#colosseumModal div.pvp-b-modos{display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#5a4520 transparent;padding:8px 12px!important}
#colosseumModal .pvp-b-modos::-webkit-scrollbar{height:4px}
#colosseumModal .pvp-b-modos::-webkit-scrollbar-thumb{background:#5a4520;border-radius:4px}
#colosseumModal .pvp-b-modos>.character-tab-button{flex:0 0 auto;width:150px;min-height:46px!important;scroll-snap-align:start}
#colosseumModal .pvp-b-modos>.character-tab-button>span{white-space:normal!important;overflow-wrap:normal!important}
#colosseumModal .pvp-b-topo{padding-top:10px!important;padding-bottom:8px!important;gap:10px}
#colosseumModal .pvp-b-tesouro{display:flex;gap:6px;flex-wrap:nowrap;margin-left:auto}
#colosseumModal .pvp-b-tesouro>span{display:flex;align-items:center;gap:6px;padding:4px 10px!important;min-height:0!important;border-radius:999px!important}
#colosseumModal .pvp-b-tesouro>span>small{font-size:9px!important;letter-spacing:.08em}
@media (max-width:699px){
  #colosseumModal .pvp-b-topo{flex-wrap:wrap!important;row-gap:6px;padding:8px 10px!important}
  #colosseumModal .pvp-b-topo .profile-overline{display:none}
  #colosseumModal .pvp-b-topo h2{font-size:17px!important;white-space:nowrap}
  #colosseumModal .pvp-b-tesouro{order:0;width:auto!important;margin-left:auto}
  #colosseumModal .pvp-b-tesouro>span{padding:3px 8px!important}
  #colosseumModal .pvp-b-tesouro>span>small{display:none}
  #colosseumModal .pvp-b-modos{padding:6px 10px!important}
  #colosseumModal .pvp-b-modos>.character-tab-button{width:130px;min-height:42px!important;padding-top:6px!important;padding-bottom:6px!important}
}
/* 26/10 (auditoria Android, 360 px): o ✕ caía para uma 2ª linha embaixo do título. Agora fica na mesma linha, à
   direita das duas moedas: a linha não quebra mais e o título encolhe se faltar lugar. */
@media (max-width:699px){
  #colosseumModal .pvp-b-topo{flex-wrap:nowrap!important;gap:6px}
  #colosseumModal .pvp-b-topo>div:first-child{flex:0 1 auto;min-width:0}
  #colosseumModal .pvp-b-topo h2{overflow:hidden;text-overflow:ellipsis}
  #colosseumModal .pvp-b-tesouro{flex:none;gap:4px}
  #colosseumModal .pvp-b-tesouro>span{padding:3px 7px!important;gap:4px}
  #colosseumModal .pvp-b-topo>.profile-head-actions{flex:none;margin-left:0}
  #colosseumModal .pvp-b-topo .modal-close-button{width:34px;height:34px;min-width:34px;min-height:34px}
}

/* ---------- 2. a Ilha ---------- */
#colosseumModal .ilha-enxuta{display:flex;flex-direction:column;gap:10px}
#colosseumModal .ilha-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid #4a3a1c;border-radius:12px;
  background:radial-gradient(120% 160% at 0% 0%,rgba(232,182,76,.16),transparent 60%),linear-gradient(180deg,#1a150d,#110e09)}
#colosseumModal .ilha-status-txt{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
#colosseumModal .ilha-status-txt h3{margin:0;color:#fff1c9;font-family:var(--font-display),Georgia,serif;font-size:20px;letter-spacing:.06em}
#colosseumModal .ilha-status-txt .pvp-b-modo-overline{order:2;margin:0}
#colosseumModal .ilha-status-bts{display:flex;flex-wrap:wrap;gap:6px;flex:0 1 auto;min-width:0}
#colosseumModal .ilha-bt-extra{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #8a6a2c;border-radius:999px;background:#1a1710;color:#e3b65a;
  font-weight:800;font-size:12px;cursor:var(--cur-mao,pointer);min-height:32px}
#colosseumModal .ilha-bt-extra img{width:20px;height:20px;object-fit:contain}
#colosseumModal .ilha-bt-extra:hover,#colosseumModal .ilha-bt-extra.active{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border-color:var(--botao-ouro-borda)}
#colosseumModal .ilha-extra>.pvp-b-painel{margin:0}
#colosseumModal .ilha-extra .ilha-como>summary{display:none}

#colosseumModal .ilha-mesa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:12px;align-items:start}
#colosseumModal .ilha-mesa-trono>.pvp-b-painel,#colosseumModal .ilha-mesa-lado>.pvp-b-painel{margin:0}
#colosseumModal .ilha-mesa-lado{display:flex;flex-direction:column;gap:10px;min-width:0}
#colosseumModal .ilha-acao{display:grid;gap:8px;border-color:#8a6a2c!important;background:radial-gradient(120% 120% at 100% 0%,rgba(232,182,76,.14),transparent 60%),linear-gradient(180deg,#1b160d,#120f0a)!important}
#colosseumModal .ilha-acao-dica{margin:0;color:#c9bfa6;font-size:12.5px;line-height:1.45}
#colosseumModal .ilha-acao-pos{justify-self:start;color:#ffd27a;font-size:12px;font-weight:800;letter-spacing:.04em}
#colosseumModal .ilha-acao-pos b{font-size:18px}
#colosseumModal .ilha-acao .pvp-b-chips{margin:0}
#colosseumModal .ilha-acao .ilha-acoes{display:grid;gap:6px;margin:0;width:100%}
#colosseumModal .ilha-acao .ilha-atacar{width:100%!important;max-width:none!important;min-height:46px;font-size:15px;letter-spacing:.08em}
#colosseumModal .ilha-acao .ilha-comprar{width:100%}
#colosseumModal .ilha-acao .ilha-motivo{text-align:center}
#colosseumModal .ilha-campeao-curto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border:1px solid #3a3020;border-radius:10px;background:#15120c;font-size:12.5px}
#colosseumModal .ilha-campeao-curto>span{color:#c9a15d;text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:900}
#colosseumModal .ilha-campeao-curto strong{color:#fff1c9;min-width:0;overflow-wrap:anywhere}
#colosseumModal .ilha-campeao-curto b{margin-left:auto;color:#ffd27a;font-variant-numeric:tabular-nums}
#colosseumModal .ilha-campeao-curto.eu{border-color:#c9a24a}
/* sem rolagem dupla: o ranking mostra o top 5 e cresce quando pede os 10 */
#colosseumModal .ilha-enxuta .ilha-ranking ol{max-height:none!important;overflow:visible!important;padding-right:0}
#colosseumModal .ilha-ver-todos{margin-top:6px;width:100%;padding:6px;border:1px dashed #5a4a2a;border-radius:8px;background:none;color:#e3b65a;font-weight:800;font-size:12px;cursor:var(--cur-mao,pointer)}
#colosseumModal .ilha-ver-todos:hover{border-style:solid}

@media (max-width:699px){
  #colosseumModal .ilha-status{padding:8px 10px}
  #colosseumModal .ilha-status-txt h3{font-size:16px}
  #colosseumModal .ilha-bt-extra{padding:5px 10px;font-size:11.5px}
  #colosseumModal .ilha-mesa{grid-template-columns:minmax(0,1fr)}
  #colosseumModal .ilha-mesa-lado{display:contents}
  #colosseumModal .ilha-mesa-trono{order:1}
  #colosseumModal .ilha-campeao-curto{order:2}
  #colosseumModal .ilha-ranking{order:3}
  /* o cartão do ATACAR fica preso no rodapé da janela enquanto o resto passa por baixo */
  #colosseumModal .ilha-acao{order:4;position:sticky;bottom:0;z-index:15;gap:6px;padding:10px!important;box-shadow:0 -10px 24px rgba(0,0,0,.6)}
  #colosseumModal .ilha-acao-dica{display:none}
  /* no celular, o chip dos extras só aparece depois da 1ª compra (a compra continua no botão quando os grátis acabam) */
  #colosseumModal .ilha-acao .ilha-chip-extras.zero{display:none}
  #colosseumModal .ilha-acao{grid-template-columns:auto minmax(0,1fr);align-items:center}
  #colosseumModal .ilha-acao .ilha-acoes{grid-column:1/-1}
  #colosseumModal .ilha-acao .pvp-b-chips{gap:4px}
  #colosseumModal .ilha-acao .pvp-b-chip{font-size:11px!important;padding:3px 8px!important}
  #colosseumModal .ilha-trono-palco{height:170px}
  #colosseumModal .ilha-trono .pvp-b-linhas{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
}
/* Celular deitado (pouca altura): topo do Hub mais baixo e a Ilha no jeito do celular, com o ATACAR preso no rodapé. */
@media (max-height:500px) and (max-width:1100px){
  #colosseumModal .pvp-b-topo{padding:4px 10px!important}
  #colosseumModal .pvp-b-topo .profile-overline,#colosseumModal .pvp-b-tesouro>span>small{display:none}
  #colosseumModal .pvp-b-topo h2{font-size:16px!important}
  #colosseumModal div.pvp-b-modos{padding:4px 10px!important;margin-bottom:6px!important}
  #colosseumModal .pvp-b-modos>.character-tab-button{min-height:36px!important;padding-top:4px!important;padding-bottom:4px!important}
  #colosseumModal .ilha-status{padding:6px 10px}
  #colosseumModal .ilha-status-txt h3{font-size:15px}
  #colosseumModal .ilha-mesa{grid-template-columns:minmax(0,1fr)}
  #colosseumModal .ilha-mesa-lado{display:contents}
  #colosseumModal .ilha-mesa-trono{order:1}
  #colosseumModal .ilha-campeao-curto{order:2}
  #colosseumModal .ilha-ranking{order:3}
  #colosseumModal .ilha-acao{order:4;position:sticky;bottom:0;z-index:15;padding:8px 10px!important;box-shadow:0 -10px 24px rgba(0,0,0,.6);
    grid-template-columns:auto minmax(0,1fr) minmax(150px,auto);align-items:center}
  #colosseumModal .ilha-acao-dica{display:none}
  #colosseumModal .ilha-acao .ilha-atacar{min-height:38px}
}

/* 23/10 (autor: "rolar o menu da ilha faz o menu geral com os botões rolar junto"). O cabeçalho já ficava preso
   (pvp-b.css, plano 12.5), mas preso 22 px abaixo da borda: o espaço de cima do cartão mostrava o conteúdo passando
   por cima dele, e parecia que o menu rolava junto. O espaço de cima agora é do próprio cabeçalho, que cobre até a
   borda; só o conteúdo rola por baixo dele. */
#colosseumModal .pvp-b-card{padding-top:0!important}
#colosseumModal .pvp-b-cabeca{padding-top:22px}