/* =====================================================================
   ILHA DO DRAGÃO — a aba do PvP Hub (src/ui/ilha-ui.js, 0380)
   ---------------------------------------------------------------------
   Usa o acabamento das abas Gens/GvG/Siege (styles/pvp-b.css: faixa,
   painéis, etiquetas, "como funciona"). Aqui só o que é da Ilha: o fundo
   do mapa, o trono com o dono e a barra de vida, o ranking e a Espada.
   As artes que ainda não existem somem sem quebrar nada.
   ===================================================================== */
#colosseumModal .pvp-b-modo-heroi[data-modo="ilha"] .pvp-b-modo-fundo{background-image:url(../assets/backgrounds/ilha_do_dragao.webp),linear-gradient(135deg,#2a0f08,#120e08 60%)}
#colosseumModal .ilha-aberta{color:#8fe3b3}
#colosseumModal .pvp-b-modo-overline b{font-variant-numeric:tabular-nums;color:#fff1c9}
#colosseumModal .ilha-alerta{color:#ffb08a}
#colosseumModal .ilha-acoes{max-width:280px}
#colosseumModal .ilha-acoes>button[disabled]{opacity:.55;cursor:not-allowed}
#colosseumModal .ilha-comprar b{color:#c9a7ff}
#colosseumModal .ilha-motivo{display:block;color:var(--p-texto-2,#cbbd9f);font-size:12px;line-height:1.4;text-align:center}
#colosseumModal .ilha-motivo b{color:#fff1c9;font-variant-numeric:tabular-nums}

/* A luta animada aparece entre a faixa e os painéis. */
#colosseumModal .ilha-luta{border-radius:12px;overflow:hidden}
#colosseumModal .ilha-luta[hidden]{display:none}

/* O trono: o palco com a arte do trono no meio e, na frente, quem guarda a Espada
   (o Dragão à esquerda do trono, olhando para fora; o dono de pé diante dele). */
#colosseumModal .ilha-trono-palco{position:relative;height:250px;margin-bottom:10px;border-radius:10px;border:1px solid #4a3a1c;overflow:hidden;
  background:radial-gradient(ellipse 60% 38% at 56% 96%,rgba(80,255,150,.16),transparent 70%),radial-gradient(ellipse at 50% 100%,rgba(255,170,60,.14),transparent 70%),linear-gradient(180deg,rgba(13,10,6,.55),#0d0a06 92%),url(../assets/backgrounds/ilha_do_dragao.webp) center 70%/cover,#0d0a06}
#colosseumModal .ilha-palco-trono{position:absolute;left:50%;bottom:6px;height:92%;width:auto;max-width:72%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 10px 18px #000);pointer-events:none;user-select:none}
#colosseumModal [data-cena="dragao"] .ilha-palco-trono{left:64%}
/* O dono de pé à frente e ao lado do trono (autor, 04/10: "mal posicionado"): centrado,
   do mesmo tamanho do trono, ele cobria o trono inteiro e se misturava com ele. */
#colosseumModal [data-cena="dono"] .ilha-palco-trono{left:60%}
#colosseumModal [data-cena="dono"] .ilha-palco-dono{left:38%;z-index:2}
#colosseumModal [data-cena="dono"]::after{content:"";position:absolute;left:38%;bottom:2px;width:150px;height:22px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);pointer-events:none;z-index:1}
#colosseumModal .ilha-palco-dragao{position:absolute;left:2%;bottom:2px;height:86%;width:auto;max-width:62%;object-fit:contain;filter:drop-shadow(0 8px 14px #000) drop-shadow(0 0 16px rgba(80,255,150,.25));pointer-events:none;user-select:none}
#colosseumModal .ilha-palco-emoji{position:absolute;left:12%;bottom:14px;font-size:64px;line-height:1}
#colosseumModal .ilha-palco-dono{position:absolute;left:50%;bottom:4px;width:150px;height:150px;transform:translateX(-50%) scale(1.25);transform-origin:50% 100%;pointer-events:none}
#colosseumModal .ilha-palco-lutador{position:relative;width:150px;height:150px;display:flex;align-items:flex-end;justify-content:center}
#colosseumModal .ilha-palco-lutador img{max-width:none!important;max-height:none!important}
#colosseumModal .ilha-palco-lutador .pvp-weapon-enh,#colosseumModal .ilha-palco-lutador .pvp-fighter-name{display:none!important}
#colosseumModal .ilha-dono{margin-bottom:10px}
/* O trono atrás de quem defende, no chão da luta. */
#ilhaBattleVisualizer .ilha-trono-luta{position:absolute;left:79%;bottom:10px;height:86%;max-height:220px;width:auto;transform:translateX(-50%);opacity:.9;filter:drop-shadow(0 8px 14px #000) brightness(.85);pointer-events:none;user-select:none}
#colosseumModal .ilha-dono{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:rgba(10,8,5,.78);border:1px solid #6b5426}
#colosseumModal .ilha-dono-eu{border-color:var(--p-ouro,#e8b64c);box-shadow:0 0 0 1px var(--p-ouro,#e8b64c) inset}
#colosseumModal .ilha-dono-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
#colosseumModal .ilha-dono-txt strong{color:#fff1c9;font:800 16px var(--font-display),Georgia,serif;letter-spacing:.04em;overflow-wrap:anywhere}
#colosseumModal .ilha-dono-txt small{color:var(--p-texto-2,#cbbd9f);font-size:12px}
#colosseumModal .ilha-tag{display:inline-block;margin-top:2px;margin-right:4px;padding:1px 8px;border-radius:999px;border:1px solid var(--p-ouro,#e8b64c);color:var(--p-ouro,#e8b64c);font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;width:max-content}
#colosseumModal .ilha-tag-eu{border-color:#2f6a4a;color:#8fe3b3}
#colosseumModal .ilha-vida{height:12px;border-radius:999px;background:#2a1612;border:1px solid #000;overflow:hidden}
#colosseumModal .ilha-vida i{display:block;height:100%;background:linear-gradient(90deg,#b3261e,#e8573c);transition:width .4s}
#colosseumModal .ilha-vazio{margin:auto 0;color:var(--p-texto-2,#cbbd9f);font-size:13px;text-align:center}
#colosseumModal .ilha-vazio b{color:#fff1c9;font-variant-numeric:tabular-nums}

/* Ranking do dia. */
#colosseumModal .ilha-ranking ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#colosseumModal .ilha-ranking li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.03);font-size:13px}
#colosseumModal .ilha-ranking li.eu{background:rgba(232,182,76,.12);border:1px solid rgba(232,182,76,.45)}
#colosseumModal .ilha-ranking li.ilha-vazio{background:none;justify-content:center}
#colosseumModal .ilha-pos{flex:0 0 32px;color:#e2c47e;font-weight:800;font-variant-numeric:tabular-nums}
#colosseumModal .ilha-nome{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;color:#fff1c9;overflow-wrap:anywhere}
#colosseumModal .ilha-nome small{color:var(--p-texto-2,#cbbd9f);font-size:11px}
/* 1293: "SEM COROA" no ranking cabe no celular de 360 com texto a 130% */
#colosseumModal .ilha-nome .ilha-sem-coroa{color:var(--p-ouro,#e8b64c);font-weight:800}
#colosseumModal .ilha-ranking li>b{color:#fff1c9;font-variant-numeric:tabular-nums}

/* Campeão e Espada. */
#colosseumModal .ilha-campeao-linha{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
#colosseumModal .ilha-campeao-linha strong{color:#fff1c9;font:800 16px var(--font-display),Georgia,serif;overflow-wrap:anywhere}
#colosseumModal .ilha-campeao-linha small{color:var(--p-texto-2,#cbbd9f);font-size:12px}
#colosseumModal .ilha-campeao-linha b{margin-left:auto;color:var(--p-ouro,#e8b64c);font-variant-numeric:tabular-nums}
#colosseumModal .ilha-campeao.eu{border-color:var(--p-ouro,#e8b64c)}
#colosseumModal .ilha-sua{margin:8px 0 0;color:#8fe3b3;font-size:13px}
#colosseumModal .ilha-sua b{font-variant-numeric:tabular-nums;color:#fff1c9}
#colosseumModal .ilha-bonus{display:flex;flex-wrap:wrap;gap:6px}
#colosseumModal .ilha-bonus span{padding:4px 10px;border-radius:999px;border:1px solid #6b5426;background:rgba(14,11,7,.85);color:var(--p-texto-2,#cbbd9f);font-size:12px}
#colosseumModal .ilha-bonus b{color:#8fe3b3}
#colosseumModal .ilha-bonus .ilha-bonus-joia{flex-basis:100%;text-align:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;border-radius:12px;min-width:0}
/* As imagens dos prêmios: a Espada à esquerda, os bônus com ícone e as três joias. */
#colosseumModal .ilha-espada-corpo{display:flex;align-items:center;gap:12px}
#colosseumModal .ilha-espada-arte{flex:0 0 96px;height:96px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #6b5426;background:radial-gradient(ellipse at 50% 55%,rgba(80,255,150,.22),transparent 70%),rgba(14,11,7,.85)}
#colosseumModal .ilha-espada-arte img{max-width:90px;max-height:90px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(80,255,150,.45))}
#colosseumModal .ilha-espada-corpo .ilha-bonus{flex:1 1 auto;min-width:0}
#colosseumModal .ilha-bonus span{display:inline-flex;align-items:center;gap:5px}
#colosseumModal .ilha-bonus-ic{width:16px;height:16px;object-fit:contain}
#colosseumModal .ilha-joias{display:inline-flex;gap:2px;padding:0!important;border:0!important;background:none!important}
#colosseumModal .ilha-joias img{width:22px;height:22px;object-fit:contain}
#colosseumModal .ilha-bonus-joia>span:last-child{padding:0!important;border:0!important;background:none!important;display:inline;min-width:0;white-space:normal}

/* Celular: uma coluna, botões na largura toda. */
@media (max-width:699px){
  #colosseumModal .ilha-grade{grid-template-columns:minmax(0,1fr)}
  #colosseumModal .ilha-acoes{max-width:none;width:100%;min-width:0}
  #colosseumModal .ilha .pvp-b-modo-in{padding:14px}
  #colosseumModal .ilha .pvp-b-modo-txt{flex-basis:100%}
  #colosseumModal .ilha-trono-palco{height:210px}
  #colosseumModal .ilha-palco-dono{transform:translateX(-50%) scale(1.05)}
  #colosseumModal .ilha-espada-corpo{gap:8px}
  #colosseumModal .ilha-espada-arte{flex-basis:72px;height:72px}
  #colosseumModal .ilha-espada-arte img{max-width:68px;max-height:68px}
}
@media (max-width:420px){
  #colosseumModal .ilha-espada-corpo{flex-wrap:wrap}
  #colosseumModal .ilha-espada-arte{flex:1 0 100%;height:84px}
  #colosseumModal .ilha-espada-arte img{max-width:80px;max-height:80px}
}

/* Contra o Dragão: o anchor dele cresce para cima (a arte é maior que um lutador), e assim
   os efeitos e os números caem no meio do corpo dele, não nas patas. Contra ele não há
   trono na luta (pedido do autor): o trono só aparece atrás de um dono. */
#ilhaBattleVisualizer[data-ilha-dragao] #pvpVisualizerEnemyAnchor{height:205px!important}
/* O Dragão brilha verde (o brilho vermelho de chefe do duelo não combina com ele), e o
   topo da luta ganha uma faixa escura para os nomes e as barras lerem sobre o cenário. */
#ilhaBattleVisualizer[data-ilha-dragao] .pvp-boss-art{filter:drop-shadow(0 6px 10px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(80,255,150,.35))!important}
#ilhaBattleVisualizer .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)}
#ilhaBattleVisualizer h4>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ilhaBattleVisualizer h4>small{flex:0 0 auto}
#ilhaBattleVisualizer .pvp-visualizer-stage>div:first-of-type>div{min-width:0}
#ilhaBattleVisualizer{container-type:inline-size}

/* CELULAR (palco até 560 px): palco mais baixo (sem o céu vazio em cima), o Dragão do
   tamanho de um chefe e o herói inteiro, cada um na sua metade; botões menores. */
@container (max-width:560px){
  #ilhaBattleVisualizer .pvp-visualizer-stage{height:270px!important;padding:12px 10px!important}
  #ilhaBattleVisualizer .pvp-visualizer-stage>div:first-of-type{margin:-12px -10px 4px!important;padding:10px 12px 8px!important}
  #ilhaBattleVisualizer .pvp-visualizer-stage>div:first-of-type>div[style*="font-size: 1.5em"]{margin:0 8px!important;font-size:1.15em!important}
  #ilhaBattleVisualizer h4{font-size:.9rem!important}
  /* min-height 0: o anchor (150-205 px de caixa, encolhido por scale a partir do chão) sobra
     para CIMA, no céu vazio, em vez de empurrar os pés para fora do palco baixo. */
  #ilhaBattleVisualizer div:has(>#pvpVisualizerPlayerAnchor){padding-bottom:36px!important;justify-content:space-between!important;min-height:0!important}
  #ilhaBattleVisualizer #pvpVisualizerPlayerAnchor,#ilhaBattleVisualizer #pvpVisualizerEnemyAnchor{flex:0 1 150px;min-width:0;transform-origin:50% 100%}
  #ilhaBattleVisualizer #pvpVisualizerPlayerAnchor{scale:.92}
  #ilhaBattleVisualizer[data-ilha-dragao] #pvpVisualizerEnemyAnchor{scale:.9;margin-right:10px}
  #ilhaBattleVisualizer [id^="pvpVisualizerBtn"]{padding:3px 8px!important;font-size:.72rem!important}
}
@container (max-width:360px){
  #ilhaBattleVisualizer .pvp-visualizer-stage{height:255px!important}
  #ilhaBattleVisualizer h4>small{display:none}
  #ilhaBattleVisualizer #pvpVisualizerPlayerAnchor{scale:.8;margin-left:-14px}
  #ilhaBattleVisualizer[data-ilha-dragao] #pvpVisualizerEnemyAnchor{scale:.66;margin-right:-8px}
}
@container (max-width:260px){
  #ilhaBattleVisualizer .pvp-visualizer-stage{height:225px!important}
  #ilhaBattleVisualizer #pvpVisualizerPlayerAnchor{scale:.72;margin-left:-18px}
  #ilhaBattleVisualizer[data-ilha-dragao] #pvpVisualizerEnemyAnchor{scale:.52;margin-right:-10px}
}

/* Os companheiros do Dark Lord nesta luta (pedido do autor, 04/10): o cavalo olha para o
   Dragão (a arte olha para a esquerda) e fica mais baixo, atrás do pet; a águia desce do
   topo para não tampar a barra de vida. Só aqui: as outras telas seguem a calibração delas. */
#ilhaBattleVisualizer #pvpVisualizerPlayerAnchor .pvp-horse-layer{transform:translateX(-50%) scaleX(-1)!important;margin-bottom:-14px;z-index:0!important}
#ilhaBattleVisualizer #pvpVisualizerPlayerAnchor .pvp-pet-companion{z-index:6!important}
#ilhaBattleVisualizer #pvpVisualizerPlayerAnchor .pvp-raven-layer{margin-top:58px}

/* Opção A (autor, 05/10): durante a luta da Ilha, só a arena aparece, no lugar do
   cartão de cima e dos painéis, em vez de abrir lá embaixo e obrigar a rolar. */
/* Por classe (05/10): o ":has(... :not ...)" fazia o navegador recalcular a página inteira a cada mudança
   na arena (android-telas-browser). A classe é posta junto com o caixa.hidden=false e some no redesenho. */
[data-ilha-raiz].ilha-lutando>:not([data-ilha-luta]){display:none!important}
@media (min-width:700px){
  #ilhaBattleVisualizer .pvp-visualizer-stage{height:clamp(320px,calc(100vh - 300px),620px)!important}
  /* 10/10 (autor, print da Ilha no PC: "os bonecos tão baixos demais, boss pequeno"): a arena cresce até 620px
     mas os lutadores pisavam a 25px da borda, pequenos lá embaixo. Pisam no meio do chão, como no Coliseu. */
  #ilhaBattleVisualizer .pvp-chao{padding-bottom:clamp(25px,11vh,130px)!important}
}
/* Tela alta: a arena tem quase o dobro da altura do palco normal (320px), então os dois crescem junto. */
@media (min-width:700px) and (min-height:820px){
  #ilhaBattleVisualizer #pvpVisualizerPlayerAnchor,#ilhaBattleVisualizer #pvpVisualizerEnemyAnchor{scale:1.2;transform-origin:50% 100%}
  #ilhaBattleVisualizer[data-ilha-dragao] #pvpVisualizerEnemyAnchor{scale:1.35}
}
/* O TOP 3 DO DIA (1291, 10/10): o prêmio do 1º, 2º e 3º, embaixo dos bônus da Espada. */
#colosseumModal .ilha-top3{margin-top:12px;padding-top:10px;border-top:1px solid rgba(107,84,38,.6)}
#colosseumModal .ilha-top3 h6{margin:0 0 4px;font-size:12px;letter-spacing:.08em;color:var(--p-ouro,#e2b45a)}
#colosseumModal .ilha-top3 ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
#colosseumModal .ilha-top3 li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 10px;border-radius:10px;border:1px solid #6b5426;background:rgba(14,11,7,.85);font-size:12px;color:var(--p-texto-2,#cbbd9f);min-width:0}
#colosseumModal .ilha-top3-pos{font-weight:700;color:var(--p-ouro,#e2b45a);min-width:22px}
#colosseumModal .ilha-top3-gold{display:inline-flex;align-items:center;gap:5px;font-weight:700;color:#f3d48a;font-variant-numeric:tabular-nums}
#colosseumModal .ilha-top3-titulo{min-width:0;overflow-wrap:anywhere}
#colosseumModal .ilha-top3-gold{flex-wrap:wrap;gap:4px 10px;min-width:0}
#colosseumModal .ilha-premio{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#colosseumModal .ilha-top3 .ilha-premio-hora-dica{margin:12px 0 4px}
/* Botão do campeão: mostrar ou esconder a Espada no herói (10/10). */
#colosseumModal .ilha-mostrar-espada{display:block;width:100%;margin-top:10px;padding:8px 12px;font-size:12px;letter-spacing:.04em;text-align:left;line-height:1.35}
#colosseumModal .ilha-mostrar-espada small{display:block;opacity:.75;font-size:11px;letter-spacing:0}

/* 22/10 (plano 12.5): Espada Sagrada na coluna da esquerda no PC; ranking com rolagem própria. Celular como antes. */
@media (min-width:700px){
  #colosseumModal .ilha-so-cel{display:none}
  #colosseumModal .ilha-ranking ol{max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
}
@media (max-width:699px){#colosseumModal .ilha-so-pc{display:none}}