/* ============================================================================ PVP HUB: ABAS SEM ROLAR DE LADO + SUA DEFESA (25/10, opção C do autor) ---------------------------------------------------------------------------- 1. À vista só COLISEU, ILHA e DUELO, mais o botão MAIS (Gens, GvG, Siege, Loja de Honra, Zodiac moram no menu dele). Nada rola de lado, nem no celular. 2. O cartão "Sua defesa" no topo do Coliseu, com o MONTAR DEFESA, e a janela que compara a DEFESA SALVA com o que você VESTE AGORA (social-ui.js, _preencherDefesa). Carregado DEPOIS do pvp-hub-enxuto.css (a faixa que deslizava de lado). ========================================================================== */ /* ---------- 1. a barra ---------- */ #colosseumModal .pvp-b-cabeca div.pvp-b-modos{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none; gap:8px;overflow:visible!important;scroll-snap-type:none;position:relative;z-index:6} #colosseumModal .pvp-b-cabeca div.pvp-b-modos>.character-tab-button{width:auto!important;flex:none;min-width:0} #colosseumModal .pvp-b-mais{position:relative;min-width:0;display:flex} #colosseumModal .pvp-b-mais[hidden]{display:none} #colosseumModal .pvp-b-mais-botao{flex:1;min-width:0;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; padding:6px 8px;border-radius:10px;border:1px solid var(--p-borda,#3a2d16);background:linear-gradient(180deg,#17120b,#110e0a);color:var(--p-texto,#efe2c0); font:700 12px var(--font-display),Georgia,serif;letter-spacing:.06em;cursor:var(--cur-mao,pointer);text-align:center} #colosseumModal .pvp-b-mais-botao>span{max-width:100%;overflow-wrap:anywhere;line-height:1.15;text-shadow:0 1px 3px #000} #colosseumModal .pvp-b-mais-botao>small{font-size:11px;font-weight:800;color:#8fe3b3;letter-spacing:.04em} #colosseumModal .pvp-b-mais-botao:hover,#colosseumModal .pvp-b-mais.aberto .pvp-b-mais-botao{border-color:#8a6d33} #colosseumModal .pvp-b-mais-botao.active{border-color:var(--p-ouro,#f3cf7a);box-shadow:0 0 0 1px var(--p-ouro,#f3cf7a),0 0 22px rgba(243,207,122,.25);color:#fff} #colosseumModal .pvp-b-mais-botao.active>small{color:#c9b98f} #colosseumModal .pvp-b-mais-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:min(300px,calc(100vw - 32px));display:grid;gap:6px;padding:8px; border-radius:12px;border:1px solid #5a4520;background:linear-gradient(180deg,#1b150d,#110d08);box-shadow:0 14px 34px rgba(0,0,0,.65)} #colosseumModal .pvp-b-mais-menu[hidden]{display:none} #colosseumModal .pvp-b-mais-menu>.character-tab-button{position:relative;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:10px; width:100%!important;min-height:44px!important;margin:0!important;padding:6px 10px!important;border-radius:9px!important;border:1px solid #3a2d16!important; background:rgba(255,255,255,.035)!important;color:var(--p-texto,#efe2c0)!important;font:700 12px var(--font-display),Georgia,serif!important;letter-spacing:.05em!important; text-align:left!important;box-shadow:none!important;height:auto!important} #colosseumModal .pvp-b-mais-menu>.character-tab-button::before{content:none} #colosseumModal .pvp-b-mais-menu>.character-tab-button>.pvp-b-aba-arte{position:static!important;transform:none!important;order:-1;width:30px!important;height:30px!important;object-fit:contain;flex:none} #colosseumModal .pvp-b-mais-menu>.character-tab-button>span{all:unset;flex:1;min-width:0;font:700 12px var(--font-display),Georgia,serif!important;letter-spacing:.05em;overflow-wrap:anywhere;text-shadow:none} #colosseumModal .pvp-b-mais-menu>.character-tab-button>.pvp-b-estado{margin-left:auto;text-align:right;font-size:10.5px;white-space:nowrap} #colosseumModal .pvp-b-mais-menu>.character-tab-button:hover{border-color:#8a6d33!important} #colosseumModal .pvp-b-mais-menu>.character-tab-button.active{border-color:var(--p-ouro,#f3cf7a)!important;color:#fff!important} @media (max-width:699px){ #colosseumModal .pvp-b-cabeca div.pvp-b-modos{gap:6px} #colosseumModal .pvp-b-cabeca div.pvp-b-modos>.character-tab-button{min-height:56px!important;padding:6px 2px!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:3px} #colosseumModal .pvp-b-cabeca div.pvp-b-modos>.character-tab-button[data-curto]>span{display:none!important} #colosseumModal .pvp-b-cabeca div.pvp-b-modos>.character-tab-button[data-curto]::after{content:attr(data-curto);font:700 10px var(--font-display),Georgia,serif;letter-spacing:0;max-width:100%;overflow-wrap:anywhere;color:inherit;text-shadow:0 1px 3px #000} #colosseumModal .pvp-b-cabeca div.pvp-b-modos>.character-tab-button>.pvp-b-aba-arte{position:static!important;transform:none!important;width:24px!important;height:24px!important;order:-1} #colosseumModal .pvp-b-cabeca div.pvp-b-modos>.character-tab-button>.pvp-b-estado{order:2;font-size:10px} #colosseumModal .pvp-b-mais-botao{min-height:54px;font-size:10.5px;padding:6px 4px} #colosseumModal .pvp-b-mais-menu{right:0;width:min(300px,calc(100vw - 28px))} } /* ---------- 2. Sua defesa ---------- */ #colosseumModal .pvp-b-sua-defesa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border-radius:10px; border:1px solid #4a3a1c;background:linear-gradient(180deg,rgba(26,20,12,.92),rgba(16,13,9,.92))} #colosseumModal .pvp-b-sua-defesa[hidden]{display:none} #colosseumModal .pvp-b-sua-defesa-arte{flex:none;width:44px;height:44px;display:grid;place-items:center} #colosseumModal .pvp-b-sua-defesa-arte>*{max-width:44px;max-height:44px;object-fit:contain} #colosseumModal .pvp-b-sua-defesa-txt{flex:1 1 0;min-width:120px;display:grid;gap:2px;text-align:left} #colosseumModal .pvp-b-sua-defesa-txt b{color:#f3cf7a;font:800 14px var(--font-display),Georgia,serif;letter-spacing:.03em} #colosseumModal .pvp-b-sua-defesa-txt small{color:#bfae86;font-size:12px;line-height:1.3;overflow-wrap:anywhere} #colosseumModal .pvp-b-sua-defesa-txt em{font-style:normal;color:#f0a35a;font-size:11.5px;font-weight:700} #colosseumModal .pvp-b-defesa-abrir{flex:none;margin-left:auto;min-height:38px;padding:8px 14px;border-radius:8px;border:1px solid var(--botao-ouro-borda); background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);font:800 12px var(--font-display),Georgia,serif;letter-spacing:.08em;cursor:var(--cur-mao,pointer);white-space:nowrap} #colosseumModal .pvp-b-defesa-abrir:hover,#colosseumModal .pvp-b-defesa-abrir:focus-visible{filter:brightness(1.08);outline:none} /* ---------- 2b. a janela MONTAR DEFESA ---------- */ #colosseumModal .pvp-b-def-fundo{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:12px;background:rgba(6,8,14,.72);overflow:auto;overscroll-behavior:contain} #colosseumModal .pvp-b-def-janela{width:min(560px,100%);max-height:none;box-sizing:border-box;padding:14px 16px 16px;border-radius:12px;border:1px solid rgba(214,175,94,.55); background:linear-gradient(180deg,#1d1a14,#121018);box-shadow:0 12px 34px rgba(0,0,0,.6);color:#efe6d2;margin:auto} #colosseumModal .pvp-b-def-topo{display:flex;gap:10px;align-items:flex-start} #colosseumModal .pvp-b-def-topo>div{flex:1;min-width:0} #colosseumModal .pvp-b-def-topo h4{margin:0;color:#f3cf7a;font:800 18px var(--font-display),Georgia,serif;letter-spacing:.06em} #colosseumModal .pvp-b-def-topo p{margin:4px 0 0;color:#cdbf9f;font-size:12.5px;line-height:1.4} #colosseumModal .pvp-b-def-x{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid #5a4520;background:#120e08;color:#efe2c0;font-size:15px;cursor:var(--cur-mao,pointer)} #colosseumModal .pvp-b-def-nivel{margin:10px 0 0;padding:8px 10px;border-radius:8px;border:1px solid rgba(214,175,94,.35);background:rgba(255,255,255,.04);color:#efe2c0;font-size:12.5px;line-height:1.35} #colosseumModal .pvp-b-def-tabela{display:grid;gap:6px;margin-top:10px} #colosseumModal .pvp-b-def-linha{display:grid;grid-template-columns:62px minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center} #colosseumModal .pvp-b-def-linha>small{color:#9c8c6a;font-size:10px;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere} #colosseumModal .pvp-b-def-linha.cab>b{color:#e7c27a;font:800 11px var(--font-display),Georgia,serif;letter-spacing:.08em} #colosseumModal .pvp-b-def-peca{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;min-height:44px;padding:5px 8px;border-radius:8px;border:1px solid #3a2d16;background:rgba(255,255,255,.035)} #colosseumModal .pvp-b-def-peca>b{flex:1 1 60px;min-width:0;font-size:12px;line-height:1.25;color:#f1e2bd;overflow-wrap:anywhere} #colosseumModal .pvp-b-def-peca>i{font-style:normal;font-weight:800;font-size:12px;color:#f3cf7a;margin-left:-4px} #colosseumModal .pvp-b-def-peca.agora>i{color:#c9b98f} #colosseumModal .pvp-b-def-peca.agora>b{color:#bfb39a} #colosseumModal .pvp-b-def-peca.mudou{border-color:#e0933a;box-shadow:inset 0 0 0 1px rgba(224,147,58,.45)} #colosseumModal .pvp-b-def-peca.sumiu>b,#colosseumModal .pvp-b-def-peca.sumiu>i{color:#8d8170;text-decoration:line-through} #colosseumModal .pvp-b-def-peca>em{flex-basis:100%;color:#e0a35a;font-style:normal;font-size:10.5px} #colosseumModal .pvp-b-def-arte{flex:none;width:32px;height:32px;object-fit:contain} #colosseumModal .pvp-b-def-arte.vazio{border:1px dashed #5a4520;border-radius:6px;box-sizing:border-box} #colosseumModal .pvp-b-def-rodape{margin:10px 0 6px;color:#9c8c6a;font-size:11.5px;line-height:1.35} /* 26/10: pontos salvos em tabela: seus pontos + itens/Titã/Relíquia = o total da ficha */ #colosseumModal div.pvp-b-def-pontos>p{margin:3px 0 0;color:#c9b98f} #colosseumModal .pvp-b-def-pts-tabela{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(var(--cols,4),minmax(0,1fr));gap:0 8px;align-items:baseline;font-variant-numeric:tabular-nums} #colosseumModal .pvp-b-def-pts-tabela>p{margin:0;color:#c9b98f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #colosseumModal .pvp-b-def-pts-tabela>small{font-size:10px;color:#8a7b5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #colosseumModal .pvp-b-def-pts-tabela>b{color:#e8cf8a;text-align:right} #colosseumModal .pvp-b-def-pts-tabela>span,#colosseumModal .pvp-b-def-pts-tabela>em,#colosseumModal .pvp-b-def-pts-tabela>strong{text-align:right;white-space:nowrap} #colosseumModal .pvp-b-def-pts-tabela>span{color:#efe2c0} #colosseumModal .pvp-b-def-pts-tabela>em{font-style:normal;color:#7fc98f} #colosseumModal .pvp-b-def-pts-tabela>strong{color:#f3cf7a} #colosseumModal .pvp-b-def-pts-tabela>i{font-style:normal;text-align:right;white-space:nowrap;color:#e0933a} #colosseumModal .pvp-b-def-pts-tabela>small.agora{color:#e0933a} #colosseumModal .pvp-b-def-botoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} #colosseumModal .pvp-b-def-botoes>button{min-height:40px;border-radius:8px;font:800 12px var(--font-display),Georgia,serif;letter-spacing:.08em;cursor:var(--cur-mao,pointer)} #colosseumModal .pvp-b-def-botoes .pvp-b-defesa-salvar{border:1px solid var(--botao-ouro-borda);background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto)} #colosseumModal .pvp-b-def-botoes .pvp-b-defesa-salvar:disabled{opacity:.55;cursor:var(--cur-seta,default)} #colosseumModal .pvp-b-def-fechar{border:1px solid #5a4520;background:#120e08;color:#efe2c0} @media (max-width:480px){ #colosseumModal .pvp-b-def-janela{padding:12px 10px 12px} #colosseumModal .pvp-b-def-linha{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr);gap:6px} #colosseumModal .pvp-b-def-linha>small{font-size:9px;letter-spacing:.03em} #colosseumModal .pvp-b-def-peca{padding:4px 6px;gap:6px;min-height:40px;justify-content:center} #colosseumModal .pvp-b-def-peca>b{display:none} #colosseumModal .pvp-b-def-linha.cab>b{display:block;font-size:10px;letter-spacing:.04em;text-align:center} #colosseumModal .pvp-b-def-peca>i{margin-left:0} /* 26/10: a linha dos pontos (salvos x agora) entrou; a janela continua cabendo no 360 a 130% */ #colosseumModal .pvp-b-def-peca{min-height:34px} #colosseumModal .pvp-b-def-rodape{margin:6px 0 4px;font-size:10.5px;line-height:1.3} #colosseumModal .pvp-b-def-tabela{gap:4px} #colosseumModal .pvp-b-def-peca>em{text-align:center;font-size:10px} #colosseumModal .pvp-b-def-arte{width:28px;height:28px} #colosseumModal .pvp-b-def-pts-tabela{gap:0 5px;grid-template-columns:minmax(0,1.25fr) repeat(var(--cols,4),minmax(0,1fr))} #colosseumModal .pvp-b-def-pts-tabela>small{font-size:9px} } /* ---------- 3. todos os modos à vista (27/10, opção A do autor) ---------- O MAIS fica escondido (social-ui.js, _arrumarModos) e a barra vira linhas de 4. */ #colosseumModal .pvp-b-cabeca div.pvp-b-modos.pvp-b-modos-todos{grid-auto-flow:row!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-columns:auto!important} #colosseumModal .pvp-b-cabeca div.pvp-b-modos.pvp-b-modos-todos>.character-tab-button{min-height:50px!important;padding-top:7px!important;padding-bottom:7px!important} #colosseumModal .pvp-b-modos.pvp-b-modos-todos>.character-tab-button>.pvp-b-estado{color:#e8a35a} @media (max-width:699px){ #colosseumModal .pvp-b-cabeca div.pvp-b-modos.pvp-b-modos-todos{gap:5px} #colosseumModal .pvp-b-cabeca div.pvp-b-modos.pvp-b-modos-todos>.character-tab-button{min-height:50px!important;padding:5px 1px!important} #colosseumModal .pvp-b-cabeca div.pvp-b-modos.pvp-b-modos-todos>.character-tab-button[data-curto]::after{font-size:9px;overflow-wrap:normal;white-space:normal;line-height:1.05} #colosseumModal .pvp-b-modos.pvp-b-modos-todos>.character-tab-button>.pvp-b-estado{font-size:8.5px!important;line-height:1;text-align:center} }