/* ===================================================================== PVP B — o hub PvP no acabamento premium (escolha do autor, 28/09) --------------------------------------------------------------------- Mesmo vocabulário da Loja B e do Combate B: dourado sobre fundo quente, títulos em fonte de exibição, arte de verdade (títulos e mapas do jogo). Nenhum modo novo e nenhum número inventado: o que aparece vem do estado (liga, rating, ingressos, Honor, War Medals, facção) e da configuração da economia (COL_ZODIAC_CONFIG.HONOR). ===================================================================== */ #colosseumModal .pvp-b-card{ --p-ouro:#f3cf7a;--p-borda:#3d311a;--p-texto:#f1e2b8;--p-texto-2:#b8a984; width:min(1180px,calc(100vw - 24px))!important;max-width:1180px!important; background:radial-gradient(120% 60% at 50% 0%,#1d170d 0%,#0e0d0b 55%,#0a0a0c 100%)!important; border:1px solid #6b5426!important;border-radius:16px!important;box-shadow:0 0 0 1px #000,0 30px 80px rgba(0,0,0,.7)!important; } /* topo: título + tesouro */ #colosseumModal .pvp-b-topo{display:flex;align-items:center;gap:16px;border-bottom:1px solid #4a3b1c;padding-bottom:12px!important} #colosseumModal .pvp-b-topo .profile-overline{color:#e2c47e!important;letter-spacing:.16em} #colosseumModal .pvp-b-topo h2{color:#fff1c9!important;font-family:var(--font-display),Georgia,serif;letter-spacing:.06em;margin:2px 0 0} #colosseumModal .pvp-b-tesouro{display:flex;gap:8px;margin-left:auto} #colosseumModal .pvp-b-tesouro span{display:grid;gap:1px;min-width:108px;padding:6px 12px;border-radius:9px;background:#0e0b07;border:1px solid #2e2413} #colosseumModal .pvp-b-tesouro small{font-size:10px;font-weight:800;letter-spacing:.12em;color:#9a8b6c} #colosseumModal .pvp-b-tesouro b{font-size:17px;color:var(--p-texto);font-variant-numeric:tabular-nums} /* barra de modos: cartões com a arte do mapa de cada modo */ #colosseumModal .pvp-b-modos{ display:grid!important;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px; padding:12px 16px!important;margin:0 0 12px!important;border-bottom:1px solid #2a2112; } #colosseumModal .pvp-b-modos>.character-tab-button{ position:relative;overflow:hidden;isolation:isolate;min-height:64px;margin:0!important; display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;text-align:left; padding:10px 12px!important;border-radius:10px!important;border:1px solid var(--p-borda)!important; background:linear-gradient(180deg,#17120b,#110e0a)!important;background-size:cover!important;background-position:center!important; color:var(--p-texto)!important;font-family:var(--font-display),Georgia,serif!important;font-size:12px!important;letter-spacing:.06em!important;box-shadow:none!important; } #colosseumModal .pvp-b-modos>.character-tab-button::before{ content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,10,6,.2) 0%,rgba(13,10,6,.92) 75%); } #colosseumModal .pvp-b-modos>#tabColosseum{background-image:url(../assets/backgrounds/tarkan.webp)!important} #colosseumModal .pvp-b-modos>#tabGens{background-image:url(../assets/backgrounds/land_of_trials.webp)!important} #colosseumModal .pvp-b-modos>#tabGvG{background-image:url(../assets/backgrounds/uruk_mountain.webp)!important} #colosseumModal .pvp-b-modos>#tabSiege{background-image:url(../assets/backgrounds/crywolf.webp)!important} #colosseumModal .pvp-b-modos>.character-tab-button>span{all:unset;display:block;font:700 12px var(--font-display),Georgia,serif!important;letter-spacing:inherit;color:inherit;text-shadow:0 1px 3px #000} #colosseumModal .pvp-b-modos>.character-tab-button:hover{border-color:#8a6d33!important} #colosseumModal .pvp-b-modos>.character-tab-button.active{border-color:var(--p-ouro)!important;box-shadow:0 0 0 1px var(--p-ouro),0 0 22px rgba(243,207,122,.25)!important;color:#fff!important} #colosseumModal .pvp-b-estado{font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;color:#8fe3b3} #colosseumModal .pvp-b-estado:empty{display:none} /* tela principal do Coliseu */ #colosseumModal .pvp-b{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px} #colosseumModal .pvp-b-heroi{position:relative;border-radius:14px;overflow:hidden;border:1px solid #6b5426;background:#120e08;box-shadow:0 0 0 1px #000,0 18px 50px rgba(0,0,0,.6)} #colosseumModal .pvp-b-heroi-fundo{position:absolute;inset:0;background:url(../assets/backgrounds/tarkan.webp) center 60%/cover;opacity:.5} #colosseumModal .pvp-b-heroi-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0a06 0%,rgba(13,10,6,.82) 45%,rgba(13,10,6,.45) 100%)} #colosseumModal .pvp-b-heroi-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;padding:18px 20px} #colosseumModal .pvp-b-heroi-titulo{display:block;height:74px;width:auto;max-width:100%;object-fit:contain;margin:0 0 4px;filter:drop-shadow(0 4px 14px #000)} /* "PVP JUSTO" (06/10, opção A): selo ao lado do logo; abre a pergunta pvp-equilibrio da Ajuda. */ #colosseumModal .pvp-b-heroi-topo{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:0 0 4px} #colosseumModal .pvp-b-heroi-topo .pvp-b-heroi-titulo{margin:0;min-width:0} #colosseumModal .pvp-b-justo{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 9px 5px 8px;border-radius:999px;border:1px solid rgba(120,220,160,.55);background:linear-gradient(180deg,rgba(40,90,60,.55),rgba(20,50,35,.7));color:#bff5d2;font:700 11px/1.1 Cinzel,Georgia,serif;letter-spacing:.08em;cursor:var(--cur-mao,pointer);white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.4)} #colosseumModal .pvp-b-justo:hover,#colosseumModal .pvp-b-justo:focus-visible{border-color:#8ff0b8;color:#e4ffee} #colosseumModal .pvp-b-justo svg{flex:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round} #colosseumModal .pvp-b-justo span{overflow:hidden;text-overflow:ellipsis} #colosseumModal .pvp-b-justo i{flex:none;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid currentColor;font:700 10px/1 Georgia,serif;font-style:normal} #colosseumModal .pvp-b-heroi-sub{margin:0 0 12px;color:#cdbf9f;font-size:14px;line-height:1.45} #colosseumModal .pvp-b-liga{display:flex;align-items:center;gap:12px;background:rgba(14,11,7,.8);border:1px solid var(--p-borda);border-radius:10px;padding:10px 12px} #colosseumModal .pvp-b-liga-ic{font-size:32px;line-height:1} #colosseumModal .pvp-b-liga b{display:block;font:700 16px var(--font-display),Georgia,serif;color:#fff1c9;letter-spacing:.06em} #colosseumModal .pvp-b-liga small{display:block;color:var(--p-texto-2);font-size:12px} #colosseumModal .pvp-b-liga-rt{margin-left:auto;text-align:right} #colosseumModal .pvp-b-liga-rt b{font:800 24px system-ui,sans-serif;color:var(--p-ouro)} #colosseumModal .pvp-b-liga-barra{height:6px;border-radius:4px;background:#0a0806;border:1px solid var(--p-borda);margin-top:8px;overflow:hidden} #colosseumModal .pvp-b-liga-barra i{display:block;height:100%;background:linear-gradient(90deg,#9a6b1f,var(--p-ouro))} #colosseumModal .pvp-b-ingressos{display:flex;align-items:center;gap:10px;margin-top:12px;color:#cdbf9f;font-size:13px} #colosseumModal .pvp-b-ingressos strong{font-size:18px} #colosseumModal .pvp-b-pips{display:flex;gap:4px} #colosseumModal .pvp-b-pips i{width:12px;height:20px;border-radius:3px;background:#2b2418;border:1px solid #4a3d24} #colosseumModal .pvp-b-pips i.cheio{background:linear-gradient(180deg,#f5d27f,#b8832a);border-color:#fbe3a3;box-shadow:0 0 6px rgba(243,207,122,.4)} /* 0473: ingressos que voltam 1 a cada 36 min + compra com JoD (src/ui/social-ui.js _htmlIngressos). */ #colosseumModal .pvp-b-extras{font-style:normal;font-size:13px;color:#c9a6ff;margin-left:2px} #colosseumModal .pvp-b-tanque{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;min-width:0} #colosseumModal .pvp-b-tanque-tempo{display:flex;flex-direction:column;font-size:13px;color:#e9dcbd;min-width:0} #colosseumModal .pvp-b-tanque-tempo small{font-size:11px;color:#9d8f70} #colosseumModal .utility-button.pvp-b-comprar{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;min-width:0;flex-wrap:wrap;text-transform:none;letter-spacing:0} #colosseumModal .pvp-b-comprar span{font-size:13px;font-weight:700} #colosseumModal .pvp-b-comprar b{color:#c9a6ff;font-size:13px} #colosseumModal .pvp-b-comprar small{color:#9d8f70;font-size:12px} #colosseumModal .pvp-b-comprar[disabled]{opacity:.55;cursor:var(--cur-seta,default)} #colosseumModal .pvp-b-premios{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13px;color:#cdbf9f} #colosseumModal .pvp-b-premios span{background:rgba(14,11,7,.8);border:1px solid var(--p-borda);border-radius:6px;padding:4px 8px} #colosseumModal .pvp-b-premios b{color:#fff1c9} #colosseumModal .pvp-b-nota{margin:12px 0 0;color:#d8c79a;font-size:12.5px;line-height:1.45} #colosseumModal .pvp-b-erro{margin:8px 0 0;color:#ff9a9a;font-size:12.5px} #colosseumModal .pvp-b-botao-semanal{margin-top:12px;border-color:#b8913f!important;color:var(--p-ouro)!important} #colosseumModal .pvp-b-oponentes-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap} #colosseumModal .pvp-b-oponentes-topo h3{margin:0;font:700 13px var(--font-display),Georgia,serif;letter-spacing:.14em;color:#e2c47e;text-transform:uppercase} #colosseumModal .pvp-b-oponentes-topo div{display:flex;gap:6px} #colosseumModal .pvp-b-oponentes-topo .utility-button{padding:4px 10px;font-size:12px} #colosseumModal .pvp-b-lista{display:grid;gap:8px} #colosseumModal .pvp-b-op{display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(14,11,7,.88);border:1px solid var(--p-borda);border-left:3px solid;border-radius:8px;padding:9px 12px} #colosseumModal .pvp-b-op-nome{font-weight:700;font-size:15px;color:#fff1c9} #colosseumModal .pvp-b-op-info{font-size:12px;color:var(--p-texto-2)} #colosseumModal .pvp-b-op-info strong{color:var(--p-ouro)} #colosseumModal .pvp-b-op .colosseum-fight-btn{font-size:13px;padding:8px 16px;white-space:nowrap} /* coluna da direita */ #colosseumModal .pvp-b-lado{display:grid;gap:12px;align-content:start} #colosseumModal .pvp-b-painel{background:linear-gradient(180deg,#17120b,#110e0a);border:1px solid var(--p-borda);border-radius:12px;padding:12px 14px} #colosseumModal .pvp-b-painel h5{margin:0 0 10px;font:700 12px var(--font-display),Georgia,serif;letter-spacing:.14em;color:#e2c47e;display:flex;align-items:center;gap:8px} #colosseumModal .pvp-b-painel h5::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#6b5426,transparent)} #colosseumModal .pvp-b-eu{display:grid;gap:2px} #colosseumModal .pvp-b-eu b{font:700 17px var(--font-display),Georgia,serif;color:#fff1c9} #colosseumModal .pvp-b-eu small{color:var(--p-texto-2);font-size:12.5px} #colosseumModal .pvp-b-carteira{display:grid;grid-template-columns:1fr 1fr;gap:8px} #colosseumModal .pvp-b-carteira div{background:#0e0b07;border:1px solid #2e2413;border-radius:8px;padding:8px 10px} #colosseumModal .pvp-b-carteira small{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;color:#9a8b6c} #colosseumModal .pvp-b-carteira b{font-size:17px;color:var(--p-texto)} #colosseumModal .pvp-b-loja{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;padding:9px 2px;margin:0;border:0;border-top:1px solid #2e2413;background:none;color:#fff1c9;cursor:var(--cur-mao,pointer);text-align:left} #colosseumModal .pvp-b-loja:first-of-type{border-top:0} #colosseumModal .pvp-b-loja b{font-size:13px;letter-spacing:.04em} #colosseumModal .pvp-b-loja small{font-size:10px;font-weight:800;letter-spacing:.1em;color:#9a8b6c} #colosseumModal .pvp-b-loja:hover b{color:var(--p-ouro)} @media (max-width:900px){ #colosseumModal .pvp-b{grid-template-columns:1fr} #colosseumModal .pvp-b-heroi-in{grid-template-columns:1fr} } @media (max-width:699px){ #colosseumModal .pvp-b-card{width:calc(100vw - 12px)!important;max-height:94vh} #colosseumModal .pvp-b-topo{flex-wrap:wrap} #colosseumModal .pvp-b-tesouro{order:3;width:100%;margin-left:0} #colosseumModal .pvp-b-tesouro span{flex:1;min-width:0} #colosseumModal .pvp-b-modos{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px 10px!important} #colosseumModal .pvp-b-modos>.character-tab-button{min-height:52px;font-size:11px!important;padding:8px 9px!important} #colosseumModal .pvp-b-heroi-in{padding:14px} #colosseumModal .pvp-b-heroi-titulo{height:54px} } /* A GvG diz quanto paga (28/09). */ #colosseumModal .gvg-premio{margin:6px 0 0;color:#e2c47e;font-size:13px} /* ===================================================================== REVISÃO (28/09, tarde) — pedido do autor: "letras fora de caixas, informações se sobrepondo" e "vários itens que o jogo já possui asset não aparecem lá, nem auras e títulos". Arte do jogo no lugar dos emojis e abas que crescem com o rótulo em vez de empilhar texto por cima. ===================================================================== */ #colosseumModal .pvp-b-modos>.character-tab-button{height:auto!important;min-height:64px;padding-right:48px!important;justify-content:center} #colosseumModal .pvp-b-modos>.character-tab-button>span{line-height:1.2!important;overflow-wrap:anywhere;height:auto!important;max-height:none!important;min-height:0!important} #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-estado{line-height:1.1;position:static} #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 2px 4px #000);pointer-events:none} #colosseumModal .pvp-b-modos>[data-zodiac-tab]{background:linear-gradient(180deg,#1a140c,#100d09)!important} #colosseumModal .pvp-b-topo h2 .col-icone{width:28px;height:28px;vertical-align:-5px} #colosseumModal .pvp-b-topo h2 .col-icone img{width:28px;height:28px} #colosseumModal .pvp-b-arte-mini{width:20px;height:20px;object-fit:contain;vertical-align:-4px;margin-right:4px} #colosseumModal .pvp-b-botao-semanal,#colosseumModal .pvp-b-oponentes-topo .utility-button{display:inline-flex;align-items:center;gap:6px} #colosseumModal .pvp-b-oponentes-topo .utility-button .col-icone img{width:16px;height:16px} /* adversário: o rosto da classe dele */ #colosseumModal .pvp-b-op{justify-content:flex-start} #colosseumModal .pvp-b-op-retrato{flex:0 0 42px;width:42px;height:42px;border-radius:8px;border:1px solid #6b5426;background:#0a0806;overflow:hidden} /* 29/10: a moldura do adversário, a mesma conta do "seu perfil" (rosto 22% maior, moldura 134% em volta). */ /* Sem moldura, a caixa tem o MESMO tamanho (autor: "na caixinha pequena sem moldura nao deveria ficar minusculo"). */ #colosseumModal .pvp-b-op-retrato{position:relative;margin:6px;scale:1.22} #colosseumModal .pvp-b-op-retrato.com-moldura{overflow:visible;border-color:transparent} #colosseumModal .pvp-b-op-moldura{position:absolute;left:-17%;top:-17%;width:134%;height:134%;object-fit:contain;pointer-events:none} #colosseumModal .pvp-b-op-txt{flex:1 1 auto;min-width:0} #colosseumModal .pvp-b-op-nome,#colosseumModal .pvp-b-op-info{overflow-wrap:anywhere} /* seu perfil: retrato com a moldura equipada, título e os quatro cosméticos */ #colosseumModal .pvp-b-eu{display:flex;align-items:center;gap:12px} #colosseumModal .pvp-b-eu-txt{display:grid;gap:2px;min-width:0} #colosseumModal .pvp-b-eu-txt b{font:700 17px var(--font-display),Georgia,serif;color:#fff1c9;overflow-wrap:anywhere} #colosseumModal .pvp-b-eu-txt small{color:var(--p-texto-2);font-size:12.5px} #colosseumModal .pvp-b-eu-retrato{position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:8px;border:1px solid #6b5426;background:#0a0806} #colosseumModal .pvp-b-eu-retrato.com-moldura{border-color:transparent;margin:10px} #colosseumModal .pvp-b-eu-moldura{position:absolute;left:-32%;top:-32%;width:164%;height:164%;object-fit:contain;pointer-events:none} /* Molduras novas (07/10, ?v=845): rosto 22% maior, moldura do mesmo tamanho na tela (164/1.22 = 134%). */ #colosseumModal .pvp-b-eu-retrato.com-moldura{scale:1.22} #colosseumModal .pvp-b-eu-retrato.com-moldura .pvp-b-eu-moldura{left:-17%;top:-17%;width:134%;height:134%} #colosseumModal .pvp-b-eu-titulo{display:block;max-width:100%;height:46px;object-fit:contain;margin:10px auto 0;filter:drop-shadow(0 3px 8px #000)} #colosseumModal .pvp-b-eu-cosm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px} #colosseumModal .pvp-b-cosm{display:grid;justify-items:center;align-content:center;gap:3px;min-height:62px;padding:6px 2px;margin:0;border-radius:8px;background:#0e0b07;border:1px solid #2e2413;color:var(--p-texto-2);cursor:var(--cur-mao,pointer);min-width:0} #colosseumModal .pvp-b-cosm:hover{border-color:#8a6d33} #colosseumModal .pvp-b-cosm img{width:36px;height:30px;object-fit:contain} #colosseumModal .pvp-b-cosm img.pvp-b-cosm-titulo{width:100%;max-width:60px} #colosseumModal .pvp-b-cosm .perfil-aura-quadro{width:30px;height:30px;margin:0} #colosseumModal .pvp-b-cosm em{font-style:normal;color:#5d5140;height:30px;line-height:30px} #colosseumModal .pvp-b-cosm small{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase} /* onde gastar: miniatura do que cada loja vende */ #colosseumModal .pvp-b-loja{justify-content:flex-start} #colosseumModal .pvp-b-loja b{flex:1 1 auto;min-width:0} #colosseumModal .pvp-b-loja-arte{flex:0 0 32px;width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 4px #000)} /* Loja de Honra: a arte da peça */ #colosseumModal .pvp-b-honra-arte{display:flex;align-items:center;min-height:64px} #colosseumModal .pvp-b-arte{display:block;height:64px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 8px #000)} #colosseumModal .pvp-b-arte-titulo{height:52px;max-width:200px} #colosseumModal .pvp-b-arte-aura{width:64px;height:64px;margin:0} @media (max-width:699px){ #colosseumModal .pvp-b-modos>.character-tab-button{min-height:56px;padding-right:42px!important} #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{width:30px;height:30px} } /* ÍCONES DAS LOJAS E MOEDAS (28/09): ícone da moeda ao lado do número, no mesmo tamanho do texto. */ #colosseumModal .pvp-b-tesouro .pvp-b-tesouro-v{display:flex;align-items:center;gap:6px;font-style:normal} #colosseumModal .pvp-b-tesouro .pvp-b-tesouro-v .col-icone-img{width:20px;height:20px} #colosseumModal .pvp-b-carteira b .col-icone,#colosseumModal .pvp-b-premios .col-icone,#colosseumModal .pvp-b-ingressos .col-icone{vertical-align:-.2em} /* Aviso de guilda nos cartões GvG e Siege (28/09, noite). */ #colosseumModal .pvp-b-estado.pvp-b-estado-alerta{color:#ffb08a!important} /* ===================================================================== ABAS GENS, GvG E SIEGE — opção A (escolha do autor, 28/09, noite) --------------------------------------------------------------------- Cada aba abre com uma faixa no desenho da do Coliseu (arte do mapa, ícone do modo, estado em etiquetas e o botão principal) e o resto em painéis com uma coluna ao lado. SÓ VISUAL: os mesmos ids, botões e regras de antes. ===================================================================== */ #colosseumModal .pvp-b-modo{display:flex;flex-direction:column;gap:12px} #colosseumModal .pvp-b-modo-heroi{position:relative;border-radius:14px;overflow:hidden;border:1px solid #6b5426;background:#120e08;box-shadow:0 0 0 1px #000,0 18px 50px rgba(0,0,0,.6)} #colosseumModal .pvp-b-modo-fundo{position:absolute;inset:0;background:center 60%/cover no-repeat;opacity:.55} #colosseumModal .pvp-b-modo-heroi[data-modo="gens"] .pvp-b-modo-fundo{background-image:url(../assets/backgrounds/land_of_trials.webp)} #colosseumModal .pvp-b-modo-heroi[data-modo="gvg"] .pvp-b-modo-fundo{background-image:url(../assets/backgrounds/uruk_mountain.webp)} #colosseumModal .pvp-b-modo-heroi[data-modo="siege"] .pvp-b-modo-fundo{background-image:url(../assets/backgrounds/crywolf.webp)} #colosseumModal .pvp-b-modo-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0d0a06 0%,rgba(13,10,6,.8) 45%,rgba(13,10,6,.3) 100%)} #colosseumModal .pvp-b-modo-in{position:relative;display:flex;align-items:center;gap:18px;padding:18px 20px;flex-wrap:wrap} #colosseumModal .pvp-b-modo-arte{flex:0 0 72px;width:72px;height:72px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 12px #000)} #colosseumModal .pvp-b-modo-txt{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:4px} #colosseumModal .pvp-b-modo-overline{font-size:11px;font-weight:800;letter-spacing:.16em;color:#e2c47e} #colosseumModal .pvp-b-modo-txt h3{margin:0;font:800 24px/1.15 var(--font-display),Georgia,serif;letter-spacing:.05em;color:#fff1c9;text-shadow:0 2px 8px #000;overflow-wrap:anywhere} #colosseumModal .pvp-b-modo-sub{margin:0;color:#d9cbb4;font-size:13.5px;line-height:1.45;max-width:62ch} #colosseumModal .pvp-b-modo-sub strong{color:#fff1c9} #colosseumModal .pvp-b-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} #colosseumModal .pvp-b-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--p-borda);background:rgba(14,11,7,.85);color:var(--p-texto-2);font-size:12px;font-weight:700;letter-spacing:.03em} #colosseumModal .pvp-b-chip b{color:#fff1c9;font-variant-numeric:tabular-nums} #colosseumModal .pvp-b-chip.destaque{border-color:var(--p-ouro);color:var(--p-ouro)} #colosseumModal .pvp-b-chip.ok{border-color:#2f6a4a;color:#8fe3b3} #colosseumModal .pvp-b-chip .col-icone,#colosseumModal .pvp-b-chip .col-icone-img{width:18px;height:18px} #colosseumModal .pvp-b-modo-acoes{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;min-width:200px} #colosseumModal .pvp-b-modo-acoes>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;font-size:13px;letter-spacing:.06em} #colosseumModal .pvp-b-modo-acoes .col-icone img,#colosseumModal .pvp-b-modo-acoes .col-icone-img{width:18px;height:18px} #colosseumModal .pvp-b-modo-grade{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;align-items:start} #colosseumModal .pvp-b-modo-col{display:flex;flex-direction:column;gap:12px;min-width:0} #colosseumModal .pvp-b-painel-dica{margin:-4px 0 10px;color:var(--p-texto-2);font-size:12px} #colosseumModal .pvp-b-linhas{display:grid;gap:6px} #colosseumModal .pvp-b-linhas>div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--p-texto-2)} #colosseumModal .pvp-b-linhas>div b{color:#fff1c9;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px} #colosseumModal .pvp-b-como summary{cursor:var(--cur-mao,pointer);color:#e2c47e;font:700 12px var(--font-display),Georgia,serif;letter-spacing:.12em} #colosseumModal .pvp-b-como ol{margin:8px 0 0;padding-left:18px;color:var(--p-texto-2);font-size:12.5px;line-height:1.5} #colosseumModal .pvp-b-como ol b{color:#fff1c9} #colosseumModal .pvp-b-como ol li.atual{color:var(--p-ouro)} /* Gens: facções, rotas e ranking */ #colosseumModal .pvp-b-faccoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} #colosseumModal .pvp-b-faccao{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;margin:0;border-radius:12px;border:1px solid var(--cor);background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 18%,#120e08),#0e0b07);color:var(--p-texto);text-align:left;cursor:var(--cur-mao,pointer);transition:transform .15s,box-shadow .15s} #colosseumModal .pvp-b-faccao:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--cor),0 10px 30px rgba(0,0,0,.5)} #colosseumModal .pvp-b-faccao b{font:800 18px var(--font-display),Georgia,serif;letter-spacing:.06em;color:var(--cor)} #colosseumModal .pvp-b-faccao span{font-size:13px;line-height:1.45;color:var(--p-texto-2)} #colosseumModal .pvp-b-faccao em{font-style:normal;font-size:28px;line-height:1} #colosseumModal .gens-lane-card{display:grid;gap:6px;padding:10px 12px;margin:0 0 8px;border-radius:10px;border:1px solid var(--p-borda);background:#0e0b07;cursor:var(--cur-mao,pointer)} #colosseumModal .gens-lane-card:last-of-type{margin-bottom:0} #colosseumModal .gens-lane-card:hover{border-color:#8a6d33} #colosseumModal .gens-lane-card.ativa{border-color:var(--p-ouro);box-shadow:inset 0 0 0 1px var(--p-ouro)} #colosseumModal .gens-rota-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} #colosseumModal .gens-rota-topo strong{color:#fff1c9;font-size:14px} #colosseumModal .gens-rota-topo small{color:var(--p-texto-2);font-size:12px} #colosseumModal .gens-rota-ativa{margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid var(--p-ouro);color:var(--p-ouro);font-size:10px;font-weight:800;letter-spacing:.08em} #colosseumModal .gens-rota-placar{display:flex;justify-content:space-between;font-size:12px;font-weight:700} #colosseumModal .gens-rota-barra{display:flex;height:9px;border-radius:999px;overflow:hidden;background:#241b10} #colosseumModal .gens-rota-barra i{display:block;height:100%} /* Tela nova do Gens (10/10): três cartões numerados no lugar das rotas. */ #colosseumModal .gens-cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch} #colosseumModal .gens-cartao{display:flex;flex-direction:column;gap:10px;min-width:0} #colosseumModal .gens-cartao h5{margin:0} #colosseumModal .gens-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--p-ouro);color:var(--p-ouro);font:800 11px/1 system-ui,sans-serif;font-style:normal;letter-spacing:0;flex:none} #colosseumModal .gens-dica{margin:0;color:var(--p-texto-2);font-size:12.5px;line-height:1.45} #colosseumModal .gens-dica b{color:#fff1c9;font-variant-numeric:tabular-nums} #colosseumModal .gens-ganhos{display:grid;grid-template-columns:1fr 1fr;gap:8px} #colosseumModal .gens-ganhos>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:10px;border:1px solid var(--p-borda);background:#0e0b07;min-width:0} #colosseumModal .gens-ganhos span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--p-texto-2);text-align:center} #colosseumModal .gens-ganhos b{font-size:18px;color:#fff1c9;font-variant-numeric:tabular-nums} #colosseumModal .gens-ganhos>div{flex-direction:row;flex-wrap:wrap;justify-content:center} #colosseumModal .gens-ganhos span{flex-basis:100%} #colosseumModal .gens-acao{margin-top:auto;display:grid} #colosseumModal .gens-acao>button{width:100%;margin:0} #colosseumModal .gens-btn-espera[disabled]{opacity:1;cursor:var(--cur-seta,default);font-size:14px;color:var(--p-texto-2);min-height:40px} #colosseumModal .gens-btn-espera span{font-size:13px} #colosseumModal .gens-btn-espera b{font-variant-numeric:tabular-nums;color:#fff1c9;font-size:16px} #colosseumModal .gens-btn-luta,#colosseumModal .gens-btn-premio{animation:gensPulsa 2.2s ease-in-out infinite} @keyframes gensPulsa{0%,100%{box-shadow:0 0 0 0 rgba(243,207,122,0)}50%{box-shadow:0 0 0 4px rgba(243,207,122,.18)}} @media (prefers-reduced-motion:reduce){#colosseumModal .gens-btn-luta,#colosseumModal .gens-btn-premio{animation:none}} #colosseumModal .gens-ciclo{height:6px;border-radius:999px;background:#241b10;overflow:hidden} #colosseumModal .gens-ciclo i{display:block;height:100%;background:linear-gradient(90deg,#8a6d33,var(--p-ouro))} #colosseumModal .gens-placar{display:grid;gap:5px} #colosseumModal .gens-placar-nomes{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;flex-wrap:wrap} #colosseumModal .gens-placar-nomes b{font-variant-numeric:tabular-nums} #colosseumModal .gens-placar-barra{display:flex;height:9px;border-radius:999px;overflow:hidden;background:#241b10} #colosseumModal .gens-placar-barra i{display:block;height:100%} #colosseumModal .gens-placar small{color:var(--p-texto-2);font-size:11.5px} #colosseumModal .gens-ontem{font-size:12px} #colosseumModal .gens-ontem .col-ficha-link{padding:0;min-height:0;border:0;background:none;font:inherit;font-weight:700;color:#fff1c9;cursor:var(--cur-mao,pointer)} #colosseumModal .gens-doacao{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--p-borda)} #colosseumModal .gens-doacao-topo{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#e2c47e;font-weight:700} #colosseumModal .gens-doacao-topo small{color:var(--p-texto-2);font-weight:600;font-variant-numeric:tabular-nums} #colosseumModal .gens-doacao-topo small b{color:#fff1c9} #colosseumModal .gens-doacao-botoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} #colosseumModal .gens-doar{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;margin:0;padding:4px 6px;font-size:13px;white-space:nowrap} #colosseumModal .gens-doar img,#colosseumModal .gens-doar .col-icone{width:16px;height:16px} #colosseumModal .gens-doar b{font-variant-numeric:tabular-nums} #colosseumModal .gens-troca{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;font-size:12.5px;min-height:38px} #colosseumModal .gens-troca b{color:#c58bff} /* 1706 (15/10): pontos da luta e o cartão do prêmio da semana. */ #colosseumModal .gens-cartoes.gens-quatro{grid-template-columns:repeat(2,minmax(0,1fr))} #colosseumModal .gens-pts{flex-basis:100%;font-style:normal;text-align:center;color:#9fd38a;font-weight:800;font-size:13px;font-variant-numeric:tabular-nums} #colosseumModal .gens-ganhos .gens-pts span{display:inline;font-size:11px;letter-spacing:.04em;color:#9fd38a} #colosseumModal .gens-semana{display:grid;gap:4px} #colosseumModal .gens-semana-linha{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;border:1px solid var(--p-borda);background:#0e0b07;font-size:12.5px;min-width:0} #colosseumModal .gens-semana-linha>span{color:#e2c47e;font-weight:800;white-space:nowrap} #colosseumModal .gens-semana-linha.eu{border-color:var(--p-ouro);box-shadow:inset 0 0 0 1px var(--p-ouro)} #colosseumModal .gens-semana-linha>i{display:flex;gap:10px;font-style:normal;flex-wrap:wrap;justify-content:flex-end} #colosseumModal .gens-joia{display:inline-flex;align-items:center;gap:3px} #colosseumModal .gens-joia img{width:18px;height:18px;object-fit:contain} #colosseumModal .gens-joia b{color:#fff1c9;font-variant-numeric:tabular-nums} #colosseumModal .gens-troca[disabled]{opacity:.75} @media (max-width:900px){#colosseumModal .gens-cartoes,#colosseumModal .gens-cartoes.gens-quatro{grid-template-columns:1fr}} #colosseumModal .gens-ranking{display:grid;gap:6px;max-height:380px;overflow-y:auto} #colosseumModal .gens-ranking-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;border:1px solid var(--p-borda);background:#0e0b07} #colosseumModal .gens-ranking-linha.eu{border-color:var(--p-ouro);background:rgba(243,207,122,.08)} #colosseumModal .gens-ranking-linha>div{display:flex;align-items:center;gap:10px;min-width:0} #colosseumModal .gens-ranking-pos{min-width:28px;color:#8a7d62;font-weight:800} #colosseumModal .gens-ranking-pos.top{color:var(--p-ouro)} #colosseumModal .gens-ranking-linha small{display:block;font-size:11.5px} #colosseumModal .gens-ranking-pts{color:#8fe3b3;font-weight:800;white-space:nowrap} /* Siege: a ação da fase e as estruturas */ #colosseumModal .siege-aviso{padding:14px;border-radius:10px;border:1px solid var(--cor,#6b5426);background:color-mix(in srgb,var(--cor,#6b5426) 12%,#0e0b07);text-align:center} #colosseumModal .siege-aviso h4{margin:0 0 4px;color:var(--cor,#e2c47e);font:700 14px var(--font-display),Georgia,serif;letter-spacing:.06em} #colosseumModal .siege-aviso p{margin:0;color:var(--p-texto-2);font-size:13px} #colosseumModal .siege-aviso .utility-button{margin-top:10px} #colosseumModal .siege-recursos{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;margin-bottom:8px;border-radius:8px;background:#0e0b07;border:1px solid var(--p-borda);font-size:13px;color:var(--p-texto-2)} #colosseumModal .siege-estrutura{padding:10px 12px;margin-bottom:8px;border-radius:10px;border:1px solid var(--p-borda);background:#0e0b07} #colosseumModal .siege-estrutura-topo{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:6px} #colosseumModal .siege-estrutura-topo strong{color:#fff1c9} #colosseumModal .siege-estrutura-barra{height:7px;border-radius:999px;background:#241b10;overflow:hidden;margin-bottom:8px} #colosseumModal .siege-estrutura-barra i{display:block;height:100%} #colosseumModal .siege-estrutura .btn-assault-struct{width:100%;padding:7px;font-size:12.5px} #colosseumModal .siege-guildas{display:grid;gap:2px;max-height:200px;overflow-y:auto;font-size:13px} #colosseumModal .siege-guildas>div{display:flex;justify-content:space-between;gap:8px;padding:6px 2px;border-bottom:1px solid #2a2112;color:var(--p-texto)} #colosseumModal .siege-guildas>div.eu{color:var(--p-ouro)} #colosseumModal .siege-guildas>div span:last-child{color:var(--p-texto-2);white-space:nowrap} /* GvG: os blocos de sempre no acabamento dos painéis */ #colosseumModal .pvp-b-modo .gvg-semana{margin-top:8px} #colosseumModal .pvp-b-modo .gvg-semana li{background:rgba(14,11,7,.85);border-color:var(--p-borda);color:var(--p-texto-2);border-radius:8px} #colosseumModal .pvp-b-modo .gvg-semana li b{color:#fff1c9} #colosseumModal .pvp-b-modo .gvg-semana li.atual{border-color:var(--p-ouro);background:rgba(243,207,122,.12);color:var(--p-ouro)} #colosseumModal .pvp-b-modo .gvg-premio{margin:4px 0 0} #colosseumModal .pvp-b-modo .gvg-bloco,#colosseumModal .pvp-b-modo .gvg-forca,#colosseumModal .pvp-b-modo .gvg-lado{background:linear-gradient(180deg,#17120b,#110e0a);border:1px solid var(--p-borda);border-radius:12px;padding:12px 14px;margin:0} #colosseumModal .pvp-b-modo .gvg-bloco h4,#colosseumModal .pvp-b-modo .gvg-forca h4{margin:0 0 10px;font:700 12px var(--font-display),Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#e2c47e;display:flex;align-items:center;gap:8px} #colosseumModal .pvp-b-modo .gvg-forca-grade div{background:#0e0b07;border:1px solid #2e2413;border-radius:8px} #colosseumModal .pvp-b-modo .gvg-forca-grade strong{color:#fff1c9} #colosseumModal .pvp-b-modo .gvg-tabela tr.gvg-eu td{background:rgba(243,207,122,.08)} #colosseumModal .pvp-b-modo .gvg-resultado.vitoria{border-color:rgba(112,220,130,.5)} #colosseumModal .pvp-b-modo .gvg-barra{margin:0} #colosseumModal .pvp-b-modo .gvg-guerra,#colosseumModal .pvp-b-modo .gvg-avisos,#colosseumModal .pvp-b-modo .gvg-abas{margin:0} @media (max-width:900px){ #colosseumModal .pvp-b-modo-grade{grid-template-columns:1fr} } @media (max-width:699px){ #colosseumModal .pvp-b-modo-in{padding:14px;gap:12px} #colosseumModal .pvp-b-modo-arte{flex-basis:52px;width:52px;height:52px} #colosseumModal .pvp-b-modo-txt h3{font-size:20px} #colosseumModal .pvp-b-modo-acoes{width:100%;min-width:0} } #colosseumModal .pvp-b-modo-in>.gvg-semana{flex:1 1 100%;margin:0} #colosseumModal .pvp-b-modo .pvp-b-painel h5{text-transform:uppercase} #colosseumModal .pvp-b-modo-col .gvg-forca-grade{grid-template-columns:repeat(2,minmax(0,1fr))} #colosseumModal .pvp-b-modo-acoes>.utility-button{font-size:13px!important} /* ===================================================================== SOBREPOSIÇÕES (03/10) — relato do autor: "textos e menus se sobrepondo na arena coliseu". Com 30 ingressos por dia a fileira de blocos não cabia na coluna e passava por baixo dos adversários (e, no celular, fazia o card rolar de lado). Mesmo desenho B: só o que vazava mudou. ===================================================================== */ /* ingressos: rótulo e contador na primeira linha, os blocos numa linha inteira embaixo, encolhendo para caber (5 ou 30, tanto faz) */ #colosseumModal .pvp-b-ingressos{flex-wrap:wrap;row-gap:6px;min-width:0} #colosseumModal .pvp-b-ingressos>span:first-child{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto} #colosseumModal .pvp-b-ingressos>span:first-child .col-icone,#colosseumModal .pvp-b-ingressos>span:first-child .col-icone-img{flex:0 0 auto;width:18px;height:18px} #colosseumModal .pvp-b-ingressos strong{margin-left:auto;white-space:nowrap;flex:0 0 auto} #colosseumModal .pvp-b-pips{order:3;flex:1 1 100%;min-width:0;gap:3px} #colosseumModal .pvp-b-pips i{flex:0 1 12px;min-width:3px;height:18px} /* liga: o nome encolhe e o rating fica dentro da caixa */ #colosseumModal .pvp-b-liga>div:not(.pvp-b-liga-rt){flex:1 1 auto;min-width:0} #colosseumModal .pvp-b-liga b{overflow-wrap:break-word} #colosseumModal .pvp-b-liga-rt,#colosseumModal .pvp-b-liga-ic{flex:0 0 auto} #colosseumModal .pvp-b-heroi-esq,#colosseumModal .pvp-b-oponentes{min-width:0} /* abas: palavra inteira (nada de "COLOSSEU / M"), letra um pouco mais junta */ #colosseumModal .pvp-b-modos>.character-tab-button{padding-right:44px!important} #colosseumModal .pvp-b-modos>.character-tab-button>span{overflow-wrap:normal;word-break:normal;hyphens:none;letter-spacing:.03em} #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{width:32px;height:32px} /* Zodiac: a linha do conjunto quebra em vez de empurrar "0 / 3 peças" para fora */ #colosseumModal .zodiac-set-row{flex-wrap:wrap} #colosseumModal .zodiac-set-row>div:first-child{flex:1 1 150px;min-width:0} #colosseumModal .zodiac-set-progress{flex-wrap:wrap;margin-left:auto} #colosseumModal .zodiac-set-progress b{white-space:nowrap} @media (max-width:699px){ #colosseumModal .pvp-b-modos>.character-tab-button{padding-left:9px!important;padding-right:36px!important;text-align:left!important;align-items:flex-start!important} #colosseumModal .pvp-b-modos>.character-tab-button>span{font-size:11px!important;letter-spacing:.02em;text-align:left} #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{right:6px;width:26px;height:26px} } /* abas: um pouco mais largas para a palavra mais longa caber ao lado do ícone */ #colosseumModal .pvp-b-modos{grid-template-columns:repeat(auto-fit,minmax(136px,1fr))} #colosseumModal .pvp-b-modos>.character-tab-button>span{max-width:100%} /* entre 700 e 1020px a faixa do Coliseu não tem largura para duas colunas: adversários embaixo, como já era no celular (antes "Ambe/rLord", "BRONZ/E") */ @media (max-width:1020px){ #colosseumModal .pvp-b-heroi-in{grid-template-columns:1fr} } /* seu perfil: os quatro cosméticos viram 2x2 quando "MOLDURA" não cabe */ #colosseumModal .pvp-b-eu-cosm{grid-template-columns:repeat(auto-fit,minmax(58px,1fr))} #colosseumModal .pvp-b-cosm small{letter-spacing:.02em;max-width:100%} /* Loja de Honra: no celular estreito o cartão da peça não passa de 100% */ #colosseumModal .pvp-b-honra-grade{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))!important} /* aba estreita (celular, texto grande): ícone menor no canto, mais espaço para a palavra */ #colosseumModal .pvp-b-modos>.character-tab-button{container-type:inline-size} @container (max-width:84px){ #colosseumModal .pvp-b-modos>.character-tab-button>span{font-size:11px!important;letter-spacing:.01em} } @container (max-width:70px){ #colosseumModal .pvp-b-modos>.character-tab-button>span{font-size:10px!important;letter-spacing:0} } /* celular estreito com texto grande: liga e adversário quebram em linhas em vez de espremer o nome numa coluna de uma letra */ #colosseumModal .pvp-b-liga{flex-wrap:wrap} #colosseumModal .pvp-b-liga>div:not(.pvp-b-liga-rt){flex:1 1 120px} #colosseumModal .pvp-b-op{flex-wrap:wrap} #colosseumModal .pvp-b-op-txt{flex:1 1 120px} #colosseumModal .pvp-b-op .colosseum-fight-btn{margin-left:auto} /* 0341: aviso do evento "Coliseu em dobro" no dia em que está valendo. */ #colosseumModal .pvp-b-evento{color:#8fe3b3;padding:6px 8px;border:1px solid rgba(201,162,74,.6);border-radius:8px;background:rgba(201,162,74,.1)} /* ===================================================================== 0430 (04/10) — Coliseu diário: placar de pontos, abas Hoje/Semana, quanto vale cada vitória e o botão de ajuda (abre a janela de ajuda de sempre, sem painel novo por cima). ===================================================================== */ #colosseumModal .pvp-b-placar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} #colosseumModal .pvp-b-placar>div{min-width:0;background:rgba(14,11,7,.85);border:1px solid var(--p-borda);border-radius:8px;padding:8px 10px} #colosseumModal .pvp-b-placar small{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;color:#9a8b6c;overflow-wrap:anywhere} #colosseumModal .pvp-b-placar b{display:block;font:800 22px system-ui,sans-serif;color:var(--p-ouro);line-height:1.2} #colosseumModal .pvp-b-placar em{display:block;font-style:normal;font-size:12px;color:#cdbf9f;overflow-wrap:anywhere} #colosseumModal .pvp-b-op-txt{min-width:0} #colosseumModal .pvp-b-op-valor{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:#fff1c9;margin-top:2px} #colosseumModal .pvp-b-op-faixa{font-weight:800} #colosseumModal .pvp-b-ajuda b{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;font:800 11px system-ui,sans-serif;margin-right:4px} #colosseumModal .pvp-b-rank-topo{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} #colosseumModal .pvp-b-rank-topo h3{margin:0;color:#ffb84d} #colosseumModal .pvp-b-rank-abas{display:flex;gap:6px} #colosseumModal .pvp-b-rank-abas button{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--p-borda);background:#120e08;color:#cdbf9f;font-weight:700;cursor:var(--cur-mao,pointer)} #colosseumModal .pvp-b-rank-abas button.ativo{border-color:var(--p-ouro);color:#fff1c9;box-shadow:0 0 0 1px var(--p-ouro)} #colosseumModal .pvp-b-rank-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;max-height:380px;overflow-y:auto;margin-top:10px} #colosseumModal .pvp-b-rank-linha{min-width:0;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:8px 12px} #colosseumModal .pvp-b-rank-linha.voce{background:rgba(255,184,77,.15);border-color:#ffb84d} #colosseumModal .pvp-b-rank-pos{min-width:30px;color:#888} #colosseumModal .pvp-b-rank-pos.topo{color:#ffd700} #colosseumModal .pvp-b-rank-txt{flex:1;min-width:0} #colosseumModal .pvp-b-rank-txt b{display:block;color:#fff;text-align:left;overflow-wrap:break-word} #colosseumModal .pvp-b-rank-txt b .col-ficha-link{display:inline;text-align:left;white-space:normal;overflow-wrap:break-word} #colosseumModal .pvp-b-rank-txt small{display:block;font-size:.75em;color:#aaa} #colosseumModal .pvp-b-rank-valor{font-weight:bold;color:#ffb84d;white-space:nowrap} /* Arena por posição (26/10): a setinha de lugares subidos/caídos hoje */ #colosseumModal .col-seta{font-style:normal;font-weight:700;font-size:.9em;white-space:nowrap} #colosseumModal .col-seta.sobe{color:#5fd38a} #colosseumModal .col-seta.desce{color:#ff6b5e} #colosseumModal .pvp-b-vazio{color:#777;text-align:center;padding:30px 10px} @media (max-width:699px){ #colosseumModal .pvp-b-placar b{font-size:19px} #colosseumModal .pvp-b-op{flex-wrap:wrap} #colosseumModal .pvp-b-op .colosseum-fight-btn{margin-left:auto} #colosseumModal .pvp-b-rank-linha{gap:6px;padding:8px} #colosseumModal .pvp-b-rank-pos{min-width:26px} #colosseumModal .pvp-b-rank-valor{white-space:normal;text-align:right;max-width:3.4em;line-height:1.15} } /* Ranking, Histórico e Ajuda: com texto grande quebram linha em vez de sair da caixa. */ #colosseumModal .pvp-b-oponentes-topo>div{flex-wrap:wrap;justify-content:flex-end;max-width:100%} /* DUELO AMISTOSO (05/10, 0510): aba, faixa e lista dos duelos. Lorencia = a cidade (amistoso). */ #colosseumModal .pvp-b-modos>#tabDuelo{background-image:url(../assets/backgrounds/lorencia.webp)!important} #colosseumModal .pvp-b-modo-heroi[data-modo="duelo"] .pvp-b-modo-fundo{background-image:url(../assets/backgrounds/lorencia.webp)} #colosseumModal .pvp-b-duelo-opcao{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9px;border:1px solid var(--p-borda);background:rgba(14,11,7,.88);color:var(--p-texto);font-size:13px;font-weight:700;cursor:var(--cur-mao,pointer)} #colosseumModal .pvp-b-duelo-opcao input{width:18px;height:18px;margin:0;accent-color:#d9a441;cursor:var(--cur-mao,pointer)} #colosseumModal .pvp-b-duelo-arena{background:rgba(0,0,0,.85);border-radius:10px;padding:12px;border:1px solid rgba(255,184,77,.3)} #colosseumModal .pvp-b-duelo-dica{margin:0;color:var(--p-texto-2);font-size:13px;line-height:1.45} #colosseumModal .pvp-b-duelo-dica b{color:#ffb39a;white-space:nowrap} #colosseumModal .pvp-b-duelo-ultimo{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-left:3px solid #8fe3b3} #colosseumModal .pvp-b-duelo-ultimo.perdeu{border-left-color:#ff8a7a} #colosseumModal .pvp-b-duelo-ultimo>div{display:flex;flex-direction:column;gap:2px;min-width:0} #colosseumModal .pvp-b-duelo-ultimo strong{font:800 18px var(--font-display),Georgia,serif;letter-spacing:.06em;color:#8fe3b3} #colosseumModal .pvp-b-duelo-ultimo.perdeu strong{color:#ff8a7a} #colosseumModal .pvp-b-duelo-ultimo span{color:#fff1c9;font-weight:700;overflow-wrap:anywhere} #colosseumModal .pvp-b-duelo-ultimo button{padding:10px 16px} #colosseumModal .pvp-b-duelo-lista{display:grid;gap:6px;max-height:380px;overflow-y:auto} #colosseumModal .pvp-b-duelo-linha{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 12px;border-radius:8px;border:1px solid var(--p-borda);border-left:3px solid #8fe3b3;background:#0e0b07} #colosseumModal .pvp-b-duelo-linha.perdeu{border-left-color:#ff8a7a} #colosseumModal .pvp-b-duelo-linha.novo{background:rgba(243,207,122,.07)} #colosseumModal .pvp-b-duelo-quem,#colosseumModal .pvp-b-duelo-res{display:flex;flex-direction:column;gap:2px;min-width:0} #colosseumModal .pvp-b-duelo-quem{flex:1 1 200px} #colosseumModal .pvp-b-duelo-res{flex:1 1 150px} #colosseumModal .pvp-b-duelo-quem strong{color:#fff1c9;overflow-wrap:anywhere} #colosseumModal .pvp-b-duelo-linha small{color:var(--p-texto-2);font-size:11.5px;overflow-wrap:anywhere} #colosseumModal .pvp-b-duelo-res b{font-size:13px;letter-spacing:.06em;color:#8fe3b3} #colosseumModal .pvp-b-duelo-linha.perdeu .pvp-b-duelo-res b{color:#ff8a7a} #colosseumModal .pvp-b-duelo-res em{font-style:normal;font-weight:800;color:var(--p-ouro)} #colosseumModal .pvp-b-duelo-linha>button{flex:0 0 auto;margin-left:auto;padding:6px 10px;font-size:12px;white-space:nowrap} @media (max-width:560px){ #colosseumModal .pvp-b-duelo-ultimo button{width:100%} } /* ===================================================================== OPÇÃO A (autor, 05/10): "tudo na tela sem rolar, só em tela estreita". - a luta do Coliseu entra NO LUGAR do Coliseu (social-ui.js _lutaNoLugar), logo abaixo das abas, e a arena cresce até a altura que sobra; - em PC as abas ficam numa linha só e a janela usa a altura da tela; - sai o quadro "Tesouro PvP": o Honor e as War Medals já estão no topo. O quadro de resultado se encaixa na arena (pvp-visualizer.js, encaixarResultado). ===================================================================== */ #colosseumModal .pvp-b-tesouro-painel{display:none!important} #colosseumModal.pvp-b-lutando #colosseumContentArea>.pvp-b{display:none!important} #colosseumModal.pvp-b-lutando #pvpCombatArenaArea{margin-top:0!important} /* 06/10 (checagem visual pedida pelo autor): no celular a barra de modos e o saldo ocupavam a tela e a luta ficava lá embaixo (deitado, inteira fora da tela). Durante a luta eles saem; o × continua. */ @media (max-width:640px),(max-height:560px){ #colosseumModal.pvp-b-lutando .pvp-b-modos, #colosseumModal.pvp-b-lutando .pvp-b-tesouro{display:none!important} } /* Em pé sobra tela depois disso: a arena cresce e os números param de se amontoar no herói. */ @media (max-width:640px) and (min-height:600px){ #colosseumModal.pvp-b-lutando #pvpBattleVisualizerContainer .pvp-visualizer-stage{height:clamp(320px,calc(100svh - 330px),520px)!important} #colosseumModal.pvp-b-lutando #pvpBattleVisualizerContainer .pvp-chao{padding-bottom:clamp(25px,10vh,110px)!important} } /* Deitado (pouca altura): sai também o título e a arena usa a altura que sobra, com o × no canto. */ @media (max-height:560px){ #colosseumModal.pvp-b-lutando .pvp-b-topo>div:first-child{display:none!important} #colosseumModal.pvp-b-lutando .pvp-b-topo{justify-content:flex-end!important;padding-top:4px!important;padding-bottom:4px!important;margin-bottom:0!important;min-height:0!important} #colosseumModal.pvp-b-lutando.pvp-b-lutando #pvpBattleVisualizerContainer .pvp-visualizer-stage{height:max(230px,calc(100svh - 150px))!important} } @media (min-width:700px){ #colosseumModal .pvp-b-card{max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important} #colosseumModal.pvp-b-lutando #pvpBattleVisualizerContainer .pvp-visualizer-stage, #colosseumModal #gensVisualizerInner .pvp-visualizer-stage{height:clamp(320px,calc(100vh - 300px),620px)!important} /* 06/10 (autor: "estão muito baixos na arena"): os lutadores pisavam a 25px da borda de baixo, colados nos botões 1x/2x/PULAR, com metade da arena vazia em cima. Agora pisam no meio do chão. */ #colosseumModal :is(#pvpBattleVisualizerContainer,#gensVisualizerInner) .pvp-chao{padding-bottom:clamp(25px,11vh,130px)!important} } /* 29/10 (autor: "nos pvps também os personagens, sentinela e pet ficaram minúsculos no pc"; escolheu a opção A e "águia e pet um pouco também"): no PC a arena do duelo é alta e os lutadores de 150 px pareciam pequenos. Crescem 20% a partir dos pés (como na Ilha, ilha.css); a Sentinela cresce igual em volta dos pés (50% 94% do quadro, sentinela-duelo.js) e a barra de vida dela sobe junto; o pet e a águia/corvo, que já crescem com o herói, ganham mais um pouco. Celular não muda. */ @media (min-width:900px) and (min-height:720px){ #colosseumModal :is(#pvpBattleVisualizerContainer,#gensVisualizerInner) :is(#pvpVisualizerPlayerAnchor,#pvpVisualizerEnemyAnchor){scale:1.2;transform-origin:50% 100%} #colosseumModal :is(#pvpBattleVisualizerContainer,#gensVisualizerInner) .snt-duelo{scale:1.2;transform-origin:50% 94%} #colosseumModal :is(#pvpBattleVisualizerContainer,#gensVisualizerInner) .snt-duelo-vida{margin-top:-20px} #colosseumModal :is(#pvpBattleVisualizerContainer,#gensVisualizerInner) :is(.pvp-pet-companion,.pvp-petpvp,.pvp-raven-layer){scale:1.15;transform-origin:50% 100%} } /* Abas: cabem as 8 numa linha quando há largura (PC); com pouca largura ou texto grande, o auto-fit quebra em duas linhas sozinho e nenhuma palavra estoura (pvp-hub-sobreposicao-browser). */ @media (min-width:1100px){ #colosseumModal .pvp-b-modos{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))!important;gap:6px!important;padding:8px 12px!important;margin-bottom:8px!important} #colosseumModal .pvp-b-modos>.character-tab-button{min-height:48px!important;padding:6px 34px 6px 10px!important;font-size:11px!important} #colosseumModal .pvp-b-modos>.character-tab-button>span{font-size:11px!important} #colosseumModal .pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{width:28px;height:28px;right:6px} } /* Duelo: a luta também entra no lugar da aba (mesma opção A do Coliseu). */ #colosseumModal.pvp-b-lutando .pvp-b-duelo>:not(#dueloArena){display:none!important} /* 0531 (05/10): Coliseu com rodízio e revanche — selo, regra do dia e botão TROCAR */ #colosseumModal .pvp-b-op-revanche{font-weight:900;font-size:11px;letter-spacing:.04em;color:var(--botao-ouro-texto);background:var(--botao-ouro-fundo);border-radius:4px;padding:1px 6px;line-height:16px} #colosseumModal .pvp-b-op-com-revanche{box-shadow:inset 0 0 0 1px rgba(255,200,90,.55)} #colosseumModal .pvp-b-op-regra{font-size:11px;color:#c9b98f;margin-top:2px;line-height:1.25;overflow-wrap:anywhere} #colosseumModal .pvp-b-trocar[disabled]{opacity:.55;cursor:var(--cur-seta,default)} /* Siege of Loren no servidor (05/10, 0532) */ #colosseumModal .siege-guildas>div{flex-wrap:wrap} #colosseumModal .siege-guildas>div span:first-child{overflow-wrap:anywhere;min-width:0} #colosseumModal .siege-guildas>div span:last-child{margin-left:auto} #colosseumModal .siege-estrutura-trava .siege-estrutura-barra i{opacity:.3} #colosseumModal .siege-cerco-golpe{margin:6px 0 10px;font-weight:800;color:var(--p-ouro)} /* A bolinha do Gens (10/10): luta da facção liberada. Um ponto dourado no canto do botão PVP e da aba. */ #navPvpButton.gens-luta-pronta,#colosseumModal #tabGens.gens-luta-pronta{position:relative} #navPvpButton.gens-luta-pronta::before,#colosseumModal #tabGens.gens-luta-pronta::after{content:"";position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:#f3cf7a;box-shadow:0 0 0 2px #120e08,0 0 8px #f3cf7a;animation:gensBolinha 1.8s ease-in-out infinite;pointer-events:none;z-index:2} @keyframes gensBolinha{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.7}} @media (prefers-reduced-motion:reduce){#navPvpButton.gens-luta-pronta::before,#colosseumModal #tabGens.gens-luta-pronta::after{animation:none}} /* MINHA DEFESA (1740, 22/10): o que luta quando alguém te desafia. */ #colosseumModal .pvp-b-defesa-sub{margin:0 0 8px;font-size:calc(11px * var(--text-scale,1));line-height:1.35;color:#bfae86} #colosseumModal .pvp-b-defesa-itens{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px} #colosseumModal .pvp-b-defesa-itens li{display:grid;grid-template-columns:minmax(56px,auto) 1fr;gap:2px 8px;align-items:baseline;padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.035)} #colosseumModal .pvp-b-defesa-itens small{color:#9c8c6a;font-size:calc(10px * var(--text-scale,1));letter-spacing:.06em;text-transform:uppercase} #colosseumModal .pvp-b-defesa-itens b{color:#f1e2bd;font-size:calc(12px * var(--text-scale,1));min-width:0;overflow-wrap:anywhere} #colosseumModal .pvp-b-defesa-itens li.sumiu b{color:#8d8170;text-decoration:line-through} #colosseumModal .pvp-b-defesa-itens em{grid-column:1/-1;color:#e0a35a;font-style:normal;font-size:calc(10px * var(--text-scale,1))} #colosseumModal .pvp-b-defesa-extra{margin:0 0 4px;color:#f1e2bd;font-size:calc(12px * var(--text-scale,1))} #colosseumModal .pvp-b-defesa-extra small{color:#9c8c6a;margin-right:6px;text-transform:uppercase;letter-spacing:.06em;font-size:calc(10px * var(--text-scale,1))} #colosseumModal .pvp-b-defesa-quando{margin:4px 0 6px;color:#9c8c6a;font-size:calc(10.5px * var(--text-scale,1))} #colosseumModal .pvp-b-defesa-aviso{margin:0 0 6px;padding:5px 8px;border-radius:6px;border:1px solid rgba(224,163,90,.45);background:rgba(224,163,90,.08);color:#f0c27a;font-size:calc(11px * var(--text-scale,1));line-height:1.3} #colosseumModal .pvp-b-defesa-salvar{width:100%;min-height:36px;border-radius:8px;border:1px solid #c9a24a;background:linear-gradient(180deg,#4a3514,#22170a);color:#f6dc97;font:800 calc(11.5px * var(--text-scale,1)) var(--font-display),Georgia,serif;letter-spacing:.1em;cursor:var(--cur-mao,pointer)} #colosseumModal .pvp-b-defesa-salvar:hover:not(:disabled),#colosseumModal .pvp-b-defesa-salvar:focus-visible{border-color:#f6dc97;color:#fff4d2;outline:none} #colosseumModal .pvp-b-defesa-salvar:disabled{opacity:.55;cursor:var(--cur-seta,default)} /* 22/10 (plano 12.5): cabeçalho preso no topo ao rolar, e a Loja de Honra sai da barra de cima (ela continua em ONDE GASTAR e nos 4 quadrinhos do perfil; o botão fica no HTML para quem abre a loja por eles). Assim a última aba não cai sozinha para a segunda linha. */ #colosseumModal .pvp-b-cabeca{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#17120b 0%,#120e09 100%);margin:0 -1px} /* 27/10 (pedido do autor): o cabeçalho NÃO fica mais preso. Ao rolar o conteúdo do modo, o topo (título, saldos e os 8 modos) sobe junto, como uma página só. O X continua alcançável: ele flutua no canto (fechar-flutuante), agora também no PC. */ #colosseumModal .pvp-b-cabeca{position:relative} #colosseumModal .modal-card.fechar-flutuante .modal-close-button{position:fixed!important;top:var(--fechar-topo,12px)!important;right:var(--fechar-direita,12px)!important; left:auto!important;bottom:auto!important;z-index:25!important;margin:0!important;box-shadow:0 6px 18px rgba(0,0,0,.55)!important} /* o lugar do X fica guardado quando ele sai para flutuar: senão o topo encolhe uns pixels e a tela dá um tranco */ #colosseumModal .modal-card.fechar-flutuante .pvp-b-topo .profile-head-actions{min-width:38px;min-height:38px} #colosseumModal .pvp-b-modos #tabHonorShop{display:none!important} /* 2190 (25/10, opção B do autor): "Sua chance" (Boa/Média/Baixa) no lugar do Mais fraco/Parecido/Mais forte, numa linha só dela embaixo do que a vitória vale (social-ui.js, _mostrarChance). */ #colosseumModal .pvp-b-op-chance{display:flex;align-items:center;gap:6px;flex-basis:100%;order:3;color:#b9ad93;font-size:11px} #colosseumModal .pvp-b-op-chance i{display:inline-flex;gap:2px} #colosseumModal .pvp-b-op-chance u{display:block;width:14px;height:6px;border-radius:2px;background:rgba(255,255,255,.12)} #colosseumModal .pvp-b-op-chance u.on{background:var(--c)} #colosseumModal .pvp-b-op-chance b{font-weight:800;color:var(--c)} /* 2297 (26/10): a luta automática do Gens (tela B, "diário de batalha") */ #colosseumModal .gens-auto-pilula{display:flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;border:1px solid var(--p-borda);background:#1d1710;color:var(--p-texto-2)} #colosseumModal .gens-auto-pilula.on{background:#12200f;border-color:#3f7a47;color:#7fd38a} #colosseumModal .gens-auto-pilula i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} #colosseumModal .gens-auto-pilula.on i{animation:gensAutoPisca 1.6s ease-in-out infinite} @keyframes gensAutoPisca{50%{opacity:.25}} #colosseumModal .gens-auto-barra{height:6px;border-radius:3px;background:#2a2012;overflow:hidden} #colosseumModal .gens-auto-barra i{display:block;height:100%;background:linear-gradient(90deg,#c9a24f,#f3d58a)} #colosseumModal .gens-auto-diario{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} #colosseumModal .gens-auto-diario li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;background:#0f0c08;border:1px solid var(--p-borda);border-radius:8px;padding:6px 8px;font-size:12px;color:var(--p-texto-2)} #colosseumModal .gens-auto-diario li img{width:28px;height:28px;border-radius:6px} #colosseumModal .gens-auto-v{color:#7fd38a;font-weight:700} #colosseumModal .gens-auto-d{color:#e08a7a;font-weight:700} #colosseumModal .gens-auto-olhar{appearance:none;border:1px solid var(--p-borda);background:transparent;color:var(--p-ouro);border-radius:6px;padding:4px 8px;font:700 12px system-ui,sans-serif;cursor:var(--cur-mao,pointer);white-space:nowrap} #colosseumModal .gens-auto-vip{background:linear-gradient(180deg,#d8b6ff,#9c6ee0);border-color:#6a46a8;color:#1b0f2b;font-weight:800} #colosseumModal .gens-auto-tutorial{border:1px solid #6b5426;border-radius:10px;padding:10px 12px;background:#1a140b;display:flex;flex-direction:column;gap:6px} #colosseumModal .gens-auto-tutorial b{color:#f3d58a} #colosseumModal .gens-auto-tutorial p{margin:0;font-size:12px;color:var(--p-texto-2)} @media (prefers-reduced-motion:reduce){#colosseumModal .gens-auto-pilula.on i{animation:none}} #colosseumModal .gens-auto-diario li span img{width:16px!important;height:16px!important;border-radius:0;vertical-align:-3px} /* 2710 (06/11): castelo do tamanho da guilda e prêmio da guilda no Siege */ #colosseumModal .siege-cerco-sair{display:block;margin:8px auto 0} #colosseumModal .siege-castelo{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid #6b5426;background:#120e08;font-size:13px;color:var(--p-texto-2)} #colosseumModal .siege-castelo h6{margin:6px 0 4px;color:#e2c47e;font:700 12px var(--font-display),Georgia,serif;letter-spacing:.06em;text-transform:uppercase} #colosseumModal .siege-castelo p{margin:0 0 4px} #colosseumModal .siege-castelo ul{list-style:none;margin:0;padding:0;display:grid;gap:3px} #colosseumModal .siege-castelo li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;padding:3px 0;border-bottom:1px solid #2a2114} #colosseumModal .siege-castelo li b{color:#f3e2b5;font-weight:600} #colosseumModal .siege-castelo li span{color:#cbb98f} #colosseumModal .siege-castelo-estandarte{margin-top:6px!important;color:#ffd36b} @media (min-width:901px){ #colosseumModal .siege-castelo ul{grid-template-columns:1fr 1fr;gap:4px 14px} #colosseumModal .siege-castelo li{flex-direction:column;justify-content:flex-start} }