MediaWiki:Common.css: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição Etiqueta: Reversão manual |
Sem resumo de edição Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
/************************************************************ | |||
* UTILITÁRIOS GERAIS | |||
************************************************************/ | |||
/* === RagnaTrue – Bloco de Especificações do Servidor === */ | |||
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700&display=swap'); | |||
:root{ | |||
--rt-bg: #ffffff; | |||
--rt-bd: #e7e8ee; | |||
--rt-soft: #f7f8fb; | |||
--rt-text: #1e1b2e; | |||
--rt-accent: #5b3aa8; | |||
--rt-grad: linear-gradient(90deg,#ffb86c 0%,#ff8d6b 50%,#ffd36a 100%); | |||
} | |||
.rt-specs{ | |||
background: var(--rt-bg); | |||
border: 1px solid var(--rt-bd); | |||
border-radius: 14px; | |||
padding: 16px 18px 6px; | |||
box-shadow: 0 4px 16px rgba(30,27,46,.06); | |||
max-width: 1100px; | |||
margin: 10px auto 18px; | |||
} | |||
/* ====== ÁREA DE DESTAQUES – CHIPS ====== */ | |||
.home-featured-chips { | |||
max-width: 1200px; | |||
margin: 24px auto 32px; | |||
padding: 18px 22px 22px; | |||
border-radius: 24px; | |||
background: #f9f4ff; /* roxo bem clarinho */ | |||
border: 1px solid rgba(139, 111, 255, 0.28); | |||
box-shadow: 0 16px 32px rgba(111, 80, 210, 0.16); | |||
} | |||
/* Cabeçalho da faixa */ | |||
.home-featured-chips-header { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
gap: 8px 14px; | |||
margin-bottom: 14px; | |||
} | |||
.home-featured-chips-badge { | |||
padding: 5px 16px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
letter-spacing: 0.16em; | |||
text-transform: uppercase; | |||
color: #0f172a; | |||
background: linear-gradient(90deg, #bfdbfe, #a5b4fc); /* azul clarinho */ | |||
box-shadow: 0 8px 18px rgba(129, 140, 248, 0.5); | |||
} | |||
.home-featured-chips-sub { | |||
font-size: 12px; | |||
color: #4b5563; | |||
} | |||
/* Grupos (Primeiros passos / Sistemas em destaque) */ | |||
.home-featured-chips-group + .home-featured-chips-group { | |||
margin-top: 10px; | |||
padding-top: 6px; | |||
border-top: 1px dashed rgba(148, 132, 255, 0.35); | |||
} | |||
.home-featured-chips-label { | |||
font-size: 12px; | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.12em; | |||
margin-bottom: 6px; | |||
color: #5b21b6; | |||
} | |||
/* Lista de chips */ | |||
.home-featured-chips-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 8px; | |||
} | |||
.home-featured-chips-list li { | |||
margin: 0; | |||
} | |||
/* Cada chip é o próprio link da wiki */ | |||
.home-featured-chips-list li a { | |||
display: inline-block; | |||
padding: 7px 14px; | |||
border-radius: 999px; | |||
background: #ffffff; | |||
border: 1px solid rgba(148, 132, 255, 0.45); | |||
font-size: 13px; | |||
color: #4338ca; | |||
text-decoration: none; | |||
box-shadow: 0 6px 14px rgba(129, 140, 248, 0.25); | |||
transition: background 0.15s ease, transform 0.15s ease, | |||
box-shadow 0.15s ease, border-color 0.15s ease, | |||
color 0.15s ease; | |||
} | |||
/* Hover / foco: chip ganha destaque */ | |||
.home-featured-chips-list li a:hover, | |||
.home-featured-chips-list li a:focus { | |||
background: #eef2ff; | |||
border-color: #6366f1; | |||
color: #1f2933; | |||
transform: translateY(-1px); | |||
box-shadow: 0 10px 18px rgba(107, 114, 255, 0.45); | |||
} | |||
/* RESPONSIVO */ | |||
@media (max-width: 900px) { | |||
.home-featured-chips { | |||
padding: 14px 14px 18px; | |||
} | |||
.home-featured-chips-header { | |||
align-items: flex-start; | |||
} | |||
.home-featured-chips-sub { | |||
font-size: 11px; | |||
} | |||
} | |||
.rt-specs-title{ | |||
font-family: "Paytone One", system-ui, sans-serif; | |||
text-transform: uppercase; | |||
letter-spacing: .5px; | |||
text-align: center; | |||
margin: 2px 0 12px; | |||
font-size: 22px; | |||
line-height: 1.1; | |||
background: var(--rt-grad); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
color: transparent; | |||
} | |||
.rt-specs-grid{ | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 10px 18px; | |||
list-style: none; | |||
margin: 0; | |||
padding: 0 6px 12px; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
color: var(--rt-text); | |||
font-size: 16px; | |||
} | |||
.rt-specs-grid li{ | |||
background: var(--rt-soft); | |||
border: 1px solid var(--rt-bd); | |||
border-radius: 10px; | |||
padding: 10px 12px; | |||
} | |||
.rt-specs-grid b{ | |||
color: var(--rt-accent); | |||
font-weight: 800; | |||
} | |||
.rt-specs-high{ | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |||
gap: 8px 14px; | |||
list-style: none; | |||
margin: 6px 0 6px; | |||
padding: 0 6px 14px; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
font-size: 16px; | |||
} | |||
.rt-specs-high li{ | |||
position: relative; | |||
padding-left: 26px; | |||
} | |||
.rt-specs-high li::before{ | |||
content: "✔"; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
color: #30b86b; | |||
font-weight: 900; | |||
} | |||
.rt-specs-note{ | |||
margin: 0 auto 4px; | |||
text-align: center; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
font-size: 13px; | |||
color: #6a6a7a; | |||
} | |||
/* === Hover com ampliação nos cards da configuração === */ | |||
.rt-specs-grid li{ | |||
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; | |||
will-change: transform; | |||
transform: translateZ(0); /* suaviza em Safari/Chrome */ | |||
transform-origin: center center; | |||
} | |||
.rt-specs-grid li:hover, | |||
.rt-specs-grid li:focus-within{ /* acessível ao navegar por teclado */ | |||
transform: scale(1.03); | |||
background: #fff; | |||
border-color: rgba(91,58,168,.35); /* var(--rt-accent) suavizado */ | |||
box-shadow: 0 8px 22px rgba(30,27,46,.12); | |||
} | |||
.rt-specs-grid li:active{ | |||
transform: scale(.99); /* leve feedback ao clique */ | |||
} | |||
/* Respeita usuários com “reduzir animações” */ | |||
@media (prefers-reduced-motion: reduce){ | |||
.rt-specs-grid li{ transition: none; } | |||
.rt-specs-grid li:hover, | |||
.rt-specs-grid li:focus-within{ transform: none; } | |||
} | } | ||
. | |||
/* ===== HOME – Mensagem abaixo do banner: ZERA QUALQUER FUNDO ===== */ | |||
/* Fontes */ | |||
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Titan+One&family=Lilita+One&display=swap'); | |||
/* Seletor mais forte para ganhar da skin */ | |||
.mw-parser-output .home-welcome{ | |||
font-family: "Lilita One", system-ui, sans-serif !important; /* padrão */ | |||
font-size: clamp(18px, 2.1vw, 28px); | |||
line-height: 1.45; | |||
text-align: center; | |||
color: #1c1431; | |||
background: transparent !important; | |||
margin: 12px auto 18px; | |||
max-width: 1200px; | |||
} | } | ||
. | /* Trocas rápidas de fonte */ | ||
.mw-parser-output .home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif !important; } | |||
.mw-parser-output .home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif !important; } | |||
.mw-parser-output .home-welcome.rt-font-lilita { font-family: "Lilita One", system-ui, sans-serif !important; } | |||
/* Opcional: frase toda em UPPERCASE */ | |||
.mw-parser-output .home-welcome.rt-allcaps{ | |||
text-transform: uppercase; | |||
letter-spacing: .02em; | |||
} | } | ||
/*. | /* Mantém o gradiente do “RagnaTrue” */ | ||
.mw-parser-output .home-welcome .rt-gradient{ | |||
background: linear-gradient(#ff6c5c,#ff9550,#ffc95e) !important; | |||
-webkit-background-clip: text !important; | |||
background-clip: text !important; | |||
-webkit-text-fill-color: transparent !important; | |||
color: transparent !important; | |||
display: inline-block; | |||
} | |||
.mw-parser-output .home-welcome .rt-brand{ | |||
-webkit-text-stroke: 0.9px rgba(37,19,61,.28); | |||
text-shadow: 0 2px 0 rgba(37,19,61,.12), 0 0 10px rgba(255,190,120,.18); | |||
} | |||
. | .home-welcome, | ||
.mw-parser-output .home-welcome, | |||
#content .home-welcome { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
padding: 0 !important; /* remove “acolchoado” herdado */ | |||
} | } | ||
. | /* zera também QUALQUER coisa dentro do bloco */ | ||
.home-welcome *, | |||
.mw-parser-output .home-welcome * { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | } | ||
. | /* se algum wrapper “box” padrão for injetado, neutraliza */ | ||
.home-welcome .ambox, | |||
.home-welcome .tmbox, | |||
.home-welcome .messagebox, | |||
.home-welcome .notice, | |||
.home-welcome .thumb, | |||
.home-welcome .thumbinner, | |||
.home-welcome .plainlinks { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | } | ||
. | /* mantém apenas a tipografia que já definimos */ | ||
.home-welcome .home-welcome-text { | |||
margin: 0 !important; | |||
} | } | ||
/* | /* bloco do texto abaixo do banner */ | ||
. | .home-welcome{ | ||
max-width: 1100px; | |||
margin: 10px auto 18px; | |||
padding: 0 12px; | |||
background: transparent !important; | |||
border: 0 !important; | |||
text-align: justify; /* se preferir centralizado, troque por: center */ | |||
text-justify: inter-word; | |||
font-size: clamp(18px, 2.15vw, 26px); | |||
line-height: 1.55; | |||
} | |||
/* Fontes desenhadas */ | |||
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Titan+One&family=Lilita+One&display=swap'); | |||
/* Base do bloco (fundo transparente, centralizado) */ | |||
.home-welcome{ | |||
/* escolha padrão aqui se quiser */ | |||
font-family: "Lilita One", system-ui, sans-serif; | |||
font-size: clamp(18px, 2.1vw, 28px); | |||
line-height: 1.45; | |||
text-align: center; | |||
color: #1c1431; | |||
background: transparent !important; | |||
margin: 12px auto 18px; | |||
max-width: 1100px; | |||
} | |||
/* Trocas rápidas de fonte (aplique uma destas classes no <div>) */ | |||
.home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif; } | |||
.home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif; } | |||
.home-welcome.rt-font-lilita { font-family: "Lilita One", system-ui, sans-serif; } /* redondinha “cute” */ | |||
/* (Opcional) Deixar a frase toda em UPPERCASE */ | |||
.home-welcome.rt-allcaps{ | |||
text-transform: uppercase; | |||
letter-spacing: .02em; | |||
} | |||
/* Gradiente do “RagnaTrue” (mantém exatamente como estava) */ | |||
.home-welcome .rt-gradient{ | |||
background: linear-gradient(90deg,#ffb36b 0%,#ffd28a 40%,#fff3c4 55%,#ffb36b 100%) !important; | |||
-webkit-background-clip: text !important; | |||
background-clip: text !important; | |||
-webkit-text-fill-color: transparent !important; | |||
color: transparent !important; | |||
display: inline-block; | |||
} | |||
.home-welcome .rt-brand{ | |||
-webkit-text-stroke: 0.9px rgba(37,19,61,.28); | |||
text-shadow: 0 2px 0 rgba(37,19,61,.12), 0 0 10px rgba(255,190,120,.18); | |||
} | |||
.icon-inline { display:inline-flex; align-items:center; gap:6px; line-height:1; } | |||
.icon-inline img.mw-file-element { image-rendering: pixelated; vertical-align: middle; transform: translateY(-1px); } | |||
.slot-num{ display:inline-block; width:1.1ch; text-align:center; font-variant-numeric: tabular-nums; } | |||
.no-ext a.external { background-image:none !important; padding-right:0 !important; } | |||
.no-ext a.external::after { content:none !important; } | |||
/************************************************************ | |||
* BOXES DE DIFICULDADE / DROPS (COLLAPSIBLE) | |||
************************************************************/ | |||
.dificuldades .mw-collapsible .mw-collapsible-toggle{ | |||
float:none !important; display:inline-block !important; margin:2px auto 4px !important; | |||
text-align:center !important; width:auto !important; | |||
} | |||
.dificuldades .mw-collapsible .mw-collapsible-toggle[style*="position"]{ position:static !important; } | |||
.dificuldades .dif-inline.mw-collapsible{ | |||
display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; | |||
border:1px solid #ddd; border-radius:12px; overflow:hidden; | |||
} | |||
.dificuldades .dif-header{ | |||
display:flex; justify-content:center; align-items:center; gap:8px; | |||
padding:4px 8px; font-weight:700; text-align:center; | |||
} | |||
.dificuldades .dif-header .mw-collapsible-toggle{ | |||
float:none !important; display:inline-block !important; width:auto !important; | |||
margin:0 !important; position:static !important; text-decoration:none; | |||
} | |||
.dificuldades .dif-inline .mw-collapsible-content{ width:100% !important; padding:8px !important; text-align:center; } | |||
.drops-inline.mw-collapsible{ | |||
display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:8px; | |||
border:1px solid #ddd; border-radius:12px; background:#fff; overflow:hidden; | |||
} | |||
.drops-inline .drops-title{ flex:0 0 auto; margin:0; padding:6px; font-weight:700; text-align:center; } | |||
.drops-inline > .mw-collapsible-toggle{ | |||
flex:0 0 auto; float:none !important; display:inline-block !important; width:auto !important; | |||
margin:0 0 0 8px !important; position:static !important; | |||
} | |||
.drops-inline .mw-collapsible-content{ width:100% !important; padding:8px 8px 16px; } | |||
/************************************************************ | |||
* TABELAS / TURN IN | |||
************************************************************/ | |||
.turnin-tabela td > *{ | |||
display:contents !important; | |||
border:0 !important; background:transparent !important; box-shadow:none !important; | |||
padding:0 !important; margin:0 !important; | |||
} | |||
/************************************************************ | |||
* HOME – WRAPPERS | |||
************************************************************/ | |||
.home-fullbleed{ | |||
width:100%; | |||
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); | |||
padding-left:12px; padding-right:12px; | |||
box-sizing:border-box; overflow-x:clip; | |||
} | |||
@supports (width:100svw){ | |||
.home-fullbleed{ margin-left:calc(50% - 50svw); margin-right:calc(50% - 50svw); } | |||
} | |||
.home-contained{ width:100%; max-width:100%; margin:0; padding:0 12px; box-sizing:border-box; } | |||
/************************************************************ | |||
* HOME – GUIAS IMPORTANTES (card + grid) | |||
************************************************************/ | |||
/* Paleta e espaçamentos */ | |||
:root{ | |||
--guide-sep: #e3defa; /* linha separadora */ | |||
--guide-hover-bg: #e1d0ff; /* hover (um pouco mais escuro) */ | |||
--home-col-pad-x: 10px; /* padding lateral da coluna */ | |||
--home-icon-w: 16px; /* largura do ícone */ | |||
--home-icon-h: 16px; /* altura do ícone */ | |||
--home-icon-gap: 12px; /* vão entre ícone e texto */ | |||
--home-guides-bg: #f6f7f9; /* fundo do card */ | |||
--home-guides-bd: #e3e6ee; /* borda do card */ | |||
--home-guides-radius: 12px; | |||
} | |||
/* Card da seção */ | |||
.home-guides-surface{ | |||
background: var(--home-guides-bg); | |||
border: 1px solid var(--home-guides-bd); | |||
border-radius: var(--home-guides-radius); | |||
padding: 12px 0; | |||
margin: 8px 0 16px; | |||
/* Linhas internas ligeiramente mais contrastadas nesse fundo */ | |||
--guide-sep: #dcdfea; | |||
} | |||
/* Grid 4 colunas */ | |||
.home-guides-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(4, minmax(220px,1fr)); | |||
gap:28px; | |||
width:100%; | |||
} | |||
.home-guides-grid .col{ min-width:0; } | |||
.home-guides-grid .col-title{ display:none !important; } | |||
/* Lista básica */ | |||
.home-guides-grid .home-list{ margin:0; padding:0; list-style:none; } | |||
/* Linha: grid [ícone | texto] + hover no LI (inclui ícone) */ | |||
.home-guides-grid .home-list li{ | |||
display:grid !important; | |||
grid-template-columns: var(--home-icon-w) 1fr; | |||
column-gap: var(--home-icon-gap); | |||
align-items:center; | |||
padding:0 var(--home-col-pad-x); | |||
position:relative; | |||
border-radius:6px; /* cantos suaves no highlight */ | |||
overflow:hidden; /* recorta o highlight */ | |||
} | |||
.home-guides-grid .home-list li:hover, | |||
.home-guides-grid .home-list li:focus-within{ | |||
background: var(--guide-hover-bg); | |||
transform: scale(1.02); | |||
box-shadow: 0 10px 22px rgba(24,18,58,.18); | |||
z-index: 3; | |||
} | |||
/* Ícone (link de arquivo) – clicável */ | |||
.home-guides-grid .home-list li > a.image{ | |||
grid-column:1; | |||
justify-self:start; | |||
width:var(--home-icon-w); | |||
height:var(--home-icon-h); | |||
margin:0 !important; | |||
pointer-events:auto !important; | |||
cursor:pointer; | |||
position:relative; | |||
z-index:2; /* acima do fundo do li */ | |||
} | |||
.home-guides-grid .home-list li > a.image .mw-file-element{ | |||
width:100%; height:auto; max-height:var(--home-icon-h); | |||
display:block; image-rendering:pixelated; | |||
} | |||
/* Link do texto – separador e micro-respiro à esquerda */ | |||
.home-guides-grid .home-list li > a:not(.image), | |||
.home-guides-grid .home-list li > a:not(.image):visited{ | |||
grid-column:2; | |||
display:block; width:100%; | |||
padding:8px 0 8px 2px; /* 2px de “respiro” no texto */ | |||
text-decoration:none !important; color:inherit !important; background:transparent; | |||
border-bottom:1px solid var(--guide-sep); | |||
transition: background .12s ease; | |||
position:relative; z-index:1; | |||
} | |||
/* Último item sem linha */ | |||
.home-guides-grid .home-list li:last-child > a:not(.image){ border-bottom:0; } | |||
/* Não pintar o link (quem pinta é o LI) */ | |||
.home-guides-grid .home-list li > a:not(.image):hover, | |||
.home-guides-grid .home-list li > a:not(.image):focus{ | |||
background: transparent !important; | |||
} | |||
/* Responsivo */ | |||
@media (max-width:1100px){ .home-guides-grid{ grid-template-columns:repeat(2, minmax(220px,1fr)); } } | |||
@media (max-width:640px){ .home-guides-grid{ grid-template-columns:1fr; } } | |||
/* Importa fontes 8-bit / pixel-friendly */ | |||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;700&family=VT323&display=swap'); | |||
/* Escolha de fontes (troque a ordem se quiser priorizar outra) */ | |||
:root{ | |||
--font-eden-title: 'Press Start 2P', system-ui, sans-serif; /* bem 8-bit */ | |||
--font-eden-item: 'Pixelify Sans', 'VT323', monospace; /* legível */ | |||
} | |||
/* Aplica só dentro do card de guias */ | |||
.home-guides-surface .home-list > li > a:not(.image){ | |||
font-family: var(--font-eden-item); | |||
font-size: 14px; /* 13–15px funciona bem */ | |||
line-height: 1.35; | |||
letter-spacing: 0.2px; | |||
} | |||
/* Se quiser o título “Guias importantes” nesse vibe 8-bit: */ | |||
.home-guides-surface ~ h2 .mw-headline, | |||
.home-guides-surface .section-title-eden { /* use essa classe se preferir marcar no HTML */ | |||
font-family: var(--font-eden-title); | |||
font-size: 16px; | |||
text-transform: uppercase; | |||
letter-spacing: .5px; | |||
} | |||
/* Área do banner acima do grid: fundo branco, sem borda ou sombra */ | |||
.home-banner-area { | |||
background: #fff !important; | |||
padding: 0 !important; | |||
margin: 6px auto 10px !important; /* “ligeiramente acima” do grid */ | |||
border: 0 !important; | |||
} | |||
/* Banner limpo: só a imagem, responsivo e centralizado */ | |||
.home-banner-solo, | |||
.home-banner-solo img { | |||
display: block; | |||
max-width: 100%; | |||
height: auto !important; /* evita qualquer esticamento */ | |||
margin: 0 auto; /* centraliza */ | |||
background: transparent !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
border-radius: 0 !important; /* se a arte já tem arredondado, deixa 0 aqui */ | |||
} | |||
/* Faixa do banner: fundo branco, sem borda/sombra, com respiro pequeno */ | |||
.home-banner-strip{ | |||
background: #fff !important; | |||
margin: 6px auto 12px !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
/* MediaWiki às vezes envolve a imagem em .thumb/.thumbinner: | |||
zera qualquer decoração/navegador que tente “enquadrar” a imagem */ | |||
.home-banner-strip .thumb, | |||
.home-banner-strip .thumbinner{ | |||
background: transparent !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
} | |||
/* Imagem do banner: bloco, centralizada, responsiva, sem esticar */ | |||
.home-banner-img, | |||
.home-banner-strip .image, | |||
.home-banner-strip .image img{ | |||
display: block !important; | |||
margin: 0 auto !important; | |||
max-width: 100% !important; | |||
height: auto !important; | |||
background: transparent !important; | |||
border: 0 !important; | |||
} | |||
/* Opcional: limite “saudável” para não ficar grande demais em telas enormes */ | |||
@media (min-width: 1280px){ | |||
.home-banner-strip .image img, | |||
.home-banner-img{ max-width: 980px !important; } | |||
} | |||
/* Caixa do banner: centralizada, sem fundo visível, sem borda/sombra */ | |||
.home-banner-box{ | |||
max-width: 697px; /* nunca passa de 697 */ | |||
width: 100%; /* encolhe em telas menores */ | |||
margin: 8px auto 12px; /* centraliza */ | |||
padding: 0; | |||
background: transparent !important; /* “fundo invisível” */ | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
line-height: 0; /* remove qualquer “respiro” vertical do container */ | |||
} | |||
/* Banner – sombra suave sempre + zoom leve no hover */ | |||
.banner-true{ | |||
display:block; | |||
width:min(697px, 100%); | |||
height:auto; | |||
margin:10px auto 14px; | |||
background:transparent !important; | |||
border:0 !important; | |||
box-shadow:none; /* evita sombras herdadas */ | |||
filter: drop-shadow(0 8px 18px rgba(24, 18, 58, .18)); /* respeita transparência da PNG */ | |||
transform-origin:center center; | |||
transition: transform .18s ease, filter .18s ease; | |||
will-change: transform, filter; | |||
} | |||
/* Hover/Focus: leve expansão + sombra mais marcada */ | |||
.banner-true:hover, | |||
.banner-true:focus { | |||
transform: scale(1.02); /* “expande” sem distorcer */ | |||
filter: drop-shadow(0 14px 28px rgba(24, 18, 58, .28)); | |||
} | |||
/* Respeita usuários com redução de movimento */ | |||
@media (prefers-reduced-motion: reduce){ | |||
.banner-true{ transition: filter .18s ease; } | |||
.banner-true:hover, | |||
.banner-true:focus{ transform:none; } | |||
} | |||
/* ========== DROPS – cabeçalho com toggle inline e centralizado ========== */ | |||
.drops-inline.mw-collapsible{ | |||
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; | |||
gap:8px; | |||
border:1px solid #e7e8ee; border-radius:12px; | |||
background:#fff; overflow:hidden; | |||
} | |||
/* título */ | |||
.drops-inline .drops-title{ | |||
order:1; padding:6px 8px; margin:0; | |||
font-weight:700; text-align:center; | |||
} | |||
/* toggle na MESMA linha do título */ | |||
.drops-inline > .mw-collapsible-toggle{ | |||
order:2 !important; | |||
float:none !important; | |||
display:inline-flex !important; | |||
align-items:center; gap:6px; | |||
width:auto !important; margin:0 !important; position:static !important; | |||
} | |||
/* “pill” do toggle */ | |||
.drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-block; padding:4px 10px; | |||
border-radius:8px; background:#f3f4fa; text-decoration:none; font-weight:600; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a:hover{ background:#e9eafb; } | |||
/* conteúdo abre abaixo, largura total */ | |||
.drops-inline .mw-collapsible-content{ | |||
order:3; width:100%; padding:10px 8px 14px; | |||
} | |||
/* (higiene) evita qualquer float/resíduo em alguns skins */ | |||
.drops-inline .mw-collapsible-toggle .mw-collapsible-toggle-default{ float:none !important; } | |||
/* opcional: tabela mais “limpa” dentro do bloco */ | |||
.drops-inline .mw-collapsible-content .wikitable{ | |||
border-collapse:collapse; margin:auto; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable th, | |||
.drops-inline .mw-collapsible-content .wikitable td{ | |||
border:1px solid #e6e8f2; | |||
} | |||
/* ========= DROPS – visual bonito e estilizado ========= */ | |||
:root{ | |||
--drop-bg: #ffffff; | |||
--drop-bd: #e9eaf3; | |||
--drop-shadow: 0 8px 26px rgba(25,22,52,.10); | |||
--drop-head-grad: linear-gradient(90deg,#7b5cff 0%,#a26bff 60%,#c79bff 100%); | |||
--drop-head-text: #fff; | |||
--dif-easy: #2ecc71; | |||
--dif-hard: #f39c12; | |||
--dif-night: #e74c3c; | |||
--toggle-pill-bg: rgba(255,255,255,.15); | |||
--toggle-pill-bg-hover: rgba(255,255,255,.25); | |||
} | |||
.skin-vector-dark :root{ | |||
--drop-bg: #15161b; | |||
--drop-bd: #2a2c35; | |||
--drop-shadow: 0 8px 26px rgba(0,0,0,.35); | |||
--toggle-pill-bg: rgba(255,255,255,.12); | |||
--toggle-pill-bg-hover: rgba(255,255,255,.2); | |||
} | |||
/* Cartão base */ | |||
.drops-inline.mw-collapsible{ | |||
border:1px solid var(--drop-bd); | |||
border-radius:14px; | |||
background: var(--drop-bg); | |||
box-shadow: var(--drop-shadow); | |||
overflow:hidden; | |||
} | |||
/* Cabeçalho: título + toggle lado a lado e CENTRALIZADOS */ | |||
.drops-inline .drops-header{ | |||
display:flex; align-items:center; justify-content:center; gap:10px; | |||
padding:10px 14px; | |||
background: var(--drop-head-grad); | |||
color: var(--drop-head-text); | |||
position: relative; | |||
} | |||
/* Título */ | |||
.drops-inline .drops-title{ | |||
font-weight:800; | |||
font-size:15px; | |||
letter-spacing:.3px; | |||
margin:0; | |||
color: inherit; | |||
} | |||
/* Badge de dificuldade */ | |||
.drops-inline .dif-badge{ | |||
display:inline-flex; align-items:center; gap:6px; | |||
height:22px; padding:0 10px; | |||
border-radius:999px; | |||
font-weight:800; font-size:12px; line-height:22px; | |||
background: rgba(255,255,255,.18); | |||
color:#fff; | |||
text-transform: uppercase; | |||
} | |||
/* Cores por dificuldade */ | |||
.drops-inline.is-easy .dif-badge{ background: var(--dif-easy); } | |||
.drops-inline.is-hard .dif-badge{ background: var(--dif-hard); } | |||
.drops-inline.is-nightmare .dif-badge{ background: var(--dif-night); } | |||
/* Toggle “pill” com chevron giratório */ | |||
.drops-inline > .mw-collapsible-toggle{ | |||
float:none !important; display:inline-block !important; width:auto !important; | |||
margin:0 !important; position:static !important; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-flex; align-items:center; gap:8px; | |||
height:28px; padding:0 12px; | |||
border-radius:999px; | |||
text-decoration:none; font-weight:700; | |||
color:#fff; | |||
background: var(--toggle-pill-bg); | |||
transition: background .15s ease, transform .15s ease; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a:hover{ background: var(--toggle-pill-bg-hover); } | |||
/* Esconde o texto do link e coloca um rótulo compacto + chevron */ | |||
.drops-inline > .mw-collapsible-toggle a{ | |||
font-size:0; /* esconde “Mostrar/Ocultar” original */ | |||
} | |||
.drops-inline > .mw-collapsible-toggle a::before{ | |||
content:"Detalhes"; | |||
font-size:12px; letter-spacing:.2px; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a::after{ | |||
content:"▾"; | |||
font-size:14px; transform: rotate(0deg); | |||
transition: transform .15s ease; | |||
} | |||
/* Rotação quando aberto */ | |||
.drops-inline.is-open > .mw-collapsible-toggle a::after{ transform: rotate(180deg); } | |||
/* Conteúdo */ | |||
.drops-inline .mw-collapsible-content{ | |||
padding:12px 10px 16px; | |||
background: transparent; | |||
} | |||
/* Tabela interna – mais limpa e elegante */ | |||
.drops-inline .mw-collapsible-content .wikitable{ | |||
margin:10px auto; width:min(720px, 95%); | |||
border-collapse:collapse; | |||
background:#fff; | |||
border:1px solid var(--drop-bd); | |||
border-radius:10px; overflow:hidden; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
background:#f7f7fb; font-weight:800; | |||
border-bottom:1px solid var(--drop-bd); | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable td, | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
border:1px solid var(--drop-bd); | |||
padding:.55em .7em; | |||
text-align:center; | |||
} | |||
/* Hover no bloco inteiro (sutil) */ | |||
.drops-inline:hover{ box-shadow: 0 12px 32px rgba(25,22,52,.16); } | |||
/* Acessibilidade (foco visível) */ | |||
.drops-inline .drops-header:focus-within{ | |||
outline: 2px solid rgba(255,255,255,.7); | |||
outline-offset: -2px; | |||
} | |||
/* ========= DROPS – paleta por dificuldade + superfícies ========= */ | |||
/* Fallback (caso não tenha tag) */ | |||
.drops-inline{ | |||
--dif-color: #7b5cff; | |||
--head-grad: linear-gradient(90deg,#7b5cff,#a26bff,#c79bff); | |||
--dif-tint: rgba(123,92,255,.10); /* fundo claro da lista */ | |||
--dif-tint-strong: rgba(123,92,255,.18);/* cabeçalho da tabela */ | |||
} | |||
/* Easy = Verde */ | |||
.drops-inline.is-easy{ | |||
--dif-color:#2ecc71; | |||
--head-grad: linear-gradient(90deg,#2ecc71,#3ddb7f,#6be8a1); | |||
--dif-tint: rgba(46,204,113,.10); | |||
--dif-tint-strong: rgba(46,204,113,.18); | |||
} | |||
/* Hard = Vermelho */ | |||
.drops-inline.is-hard{ | |||
--dif-color:#e74c3c; | |||
--head-grad: linear-gradient(90deg,#e74c3c,#ef6b5e,#f39c91); | |||
--dif-tint: rgba(231,76,60,.10); | |||
--dif-tint-strong: rgba(231,76,60,.18); | |||
} | |||
/* Nightmare = Azul */ | |||
.drops-inline.is-nightmare{ | |||
--dif-color:#3498db; | |||
--head-grad: linear-gradient(90deg,#3498db,#4aa8ea,#7bc2f5); | |||
--dif-tint: rgba(52,152,219,.10); | |||
--dif-tint-strong: rgba(52,152,219,.18); | |||
} | |||
/* Hallucination = Roxo */ | |||
.drops-inline.is-hallucination{ | |||
--dif-color:#9b59b6; | |||
--head-grad: linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9); | |||
--dif-tint: rgba(155,89,182,.12); | |||
--dif-tint-strong: rgba(155,89,182,.20); | |||
} | |||
/* Aplica as variáveis acima nos elementos já existentes */ | |||
.drops-inline .drops-header{ | |||
background: var(--head-grad); | |||
color:#fff; | |||
} | |||
.drops-inline .dif-badge{ | |||
background: var(--dif-color); | |||
} | |||
/* Fundo da LISTA (zona que envolve a tabela) com tom claro */ | |||
.drops-inline .mw-collapsible-content{ | |||
background: var(--dif-tint); | |||
border-top: 1px solid var(--drop-bd); | |||
border-bottom-left-radius: 14px; | |||
border-bottom-right-radius: 14px; | |||
} | |||
/* Tabela harmonizada com a cor (cabeçalho um pouco mais forte) */ | |||
.drops-inline .mw-collapsible-content .wikitable{ | |||
background: rgba(255,255,255,.9); /* mantém legibilidade */ | |||
border:1px solid var(--drop-bd); | |||
border-radius: 10px; | |||
overflow: hidden; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
background: var(--dif-tint-strong); | |||
border-bottom:1px solid var(--drop-bd); | |||
color:#1e2330; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable td, | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
border-color: var(--drop-bd); | |||
} | |||
/* ===== Versão simples: Título + [Mostrar] centralizados ===== */ | |||
.mw-parser-output .drops-inline.mw-collapsible{ | |||
display:flex; | |||
justify-content:center; | |||
align-items:center; | |||
gap:12px; | |||
padding:10px 14px; | |||
border:1px solid #e7e8ee; | |||
border-radius:12px; | |||
background:#fff; | |||
} | |||
/* Título "Tabela de Drops" */ | |||
.mw-parser-output .drops-inline .drops-title{ | |||
margin:0; | |||
font-weight:700; | |||
} | |||
/* Toggle [Mostrar]/[Ocultar] na MESMA linha e centralizado */ | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle{ | |||
order:2 !important; | |||
float:none !important; | |||
position:static !important; | |||
display:inline-flex !important; | |||
align-items:center; | |||
margin:0 !important; | |||
} | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-flex; | |||
align-items:center; | |||
line-height:1; | |||
white-space:nowrap; /* evita quebra do "Mostrar ▸" */ | |||
} | |||
/* Conteúdo aberto ocupa a largura toda do cartão */ | |||
.mw-parser-output .drops-inline .mw-collapsible-content{ | |||
width:100% !important; | |||
padding:10px 12px 14px; | |||
background: #ffffff !important; | |||
} | |||
/* ===== DROPS (badge central + toggle central) ===== */ | |||
.mw-parser-output .drops-inline{ | |||
/* cartao */ | |||
border:1px solid #e7e8ee; | |||
border-radius:12px; | |||
background:#fff; | |||
box-shadow:0 6px 18px rgba(30,27,46,.06); | |||
padding:10px 12px; | |||
/* layout do header */ | |||
display:flex; | |||
flex-wrap:wrap; | |||
align-items:center; | |||
justify-content:center; /* centraliza badge e toggle */ | |||
gap:12px; | |||
} | |||
/* badge gerado por CSS a partir de data-badge */ | |||
.mw-parser-output .drops-inline::before{ | |||
content: attr(data-badge); | |||
text-transform: uppercase; | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
height:28px; | |||
line-height:28px; | |||
padding:0 16px; | |||
min-width:150px; /* cabe “HALLUCINATION” */ | |||
border-radius:999px; | |||
font:800 12px/1 system-ui, sans-serif; | |||
color:#fff; | |||
background: var(--dif-color, #7b5cff); | |||
box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; | |||
} | |||
/* toggle [Mostrar ▸] na mesma linha e central */ | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle{ | |||
order:2 !important; | |||
float:none !important; | |||
display:inline-flex !important; | |||
align-items:center; | |||
margin:0 !important; | |||
position:static !important; | |||
} | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:4px; | |||
height:28px; | |||
line-height:28px; | |||
padding:0 12px; | |||
border-radius:999px; | |||
text-decoration:none; | |||
font-weight:700; | |||
background:#f3f4fa; | |||
color:#223; | |||
} | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle a:hover{ | |||
background:#e9eafb; | |||
} | |||
/* conteúdo abre abaixo (linha inteira), com “tinta” da dificuldade */ | |||
.mw-parser-output .drops-inline .mw-collapsible-content{ | |||
order:10; | |||
flex-basis:100%; | |||
width:100% !important; | |||
margin-top:8px; | |||
background: var(--dif-tint, rgba(123,92,255,.08)); | |||
border-top:1px solid #e9eaf3; | |||
border-bottom-left-radius:12px; | |||
border-bottom-right-radius:12px; | |||
padding:8px 8px 16px; | |||
} | |||
/* cores por dificuldade */ | |||
.mw-parser-output .drops-inline.is-easy{ | |||
--dif-color:#2ecc71; /* verde */ | |||
--dif-tint: rgba(46,204,113,.10); | |||
} | |||
.mw-parser-output .drops-inline.is-hard{ | |||
--dif-color:#e74c3c; /* vermelho */ | |||
--dif-tint: rgba(231,76,60,.10); | |||
} | |||
.mw-parser-output .drops-inline.is-nightmare{ | |||
--dif-color:#3498db; /* azul */ | |||
--dif-tint: rgba(52,152,219,.10); | |||
} | |||
.mw-parser-output .drops-inline.is-hallucination{ | |||
--dif-color:#9b59b6; /* roxo */ | |||
--dif-tint: rgba(155,89,182,.12); | |||
} | |||
/* responsivo */ | |||
@media (max-width:640px){ | |||
.mw-parser-output .drops-inline::before{ min-width:120px; padding:0 12px; } | |||
} | |||
/* ====== Custo de Entrada – grid de 4 colunas por dificuldade ====== */ | |||
.entry-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(4, minmax(240px,1fr)); | |||
gap:14px; | |||
margin:10px 0 16px; | |||
} | |||
@media (max-width:1200px){ .entry-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)); } } | |||
@media (max-width:640px){ .entry-grid{ grid-template-columns:1fr; } } | |||
/* Cartão base */ | |||
.entry-card{ | |||
border:1px solid #e3e6ee; | |||
border-radius:12px; | |||
overflow:hidden; | |||
background: var(--tint, #fff); | |||
box-shadow: 0 2px 12px rgba(24,18,58,.06); | |||
} | |||
/* Cabeçalho e corpo */ | |||
.entry-card .entry-head{ | |||
padding:6px 8px; | |||
text-align:center; | |||
font-weight:800; | |||
color:#fff; | |||
background: var(--accent, #6b6b6b); | |||
letter-spacing:.3px; | |||
} | |||
.entry-card .entry-body{ | |||
padding:12px; | |||
text-align:center; | |||
background: var(--tint, #fff); | |||
line-height:1.6; | |||
} | |||
.entry-card .entry-body b{ font-weight:700; } | |||
.entry-card img.mw-file-element{ image-rendering:pixelated; vertical-align:middle; transform:translateY(-1px); } | |||
/* Paleta = mesma dos badges */ | |||
.entry-card.dif-easy{ --accent:#2ecc71; --tint:#eaf8f0; } | |||
.entry-card.dif-hard{ --accent:#e74c3c; --tint:#fdecea; } | |||
.entry-card.dif-nightmare{ --accent:#3498db; --tint:#eaf3fb; } | |||
.entry-card.dif-hallucination{ --accent:#9b59b6; --tint:#f1e8f6; } | |||
/* ===== Bonificações – Cards ===== */ | |||
.mw-parser-output .bono-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); | |||
gap:18px; | |||
margin:10px 0 24px; | |||
} | |||
.mw-parser-output .bono-card{ | |||
--bg:#fff; --bd:#e7e8ee; --head:#5b3aa8; --headText:#fff; | |||
background:var(--bg); | |||
border:1px solid var(--bd); | |||
border-radius:14px; | |||
box-shadow:0 4px 16px rgba(30,27,46,.06); | |||
display:flex; flex-direction:column; min-height:170px; | |||
} | |||
/* Cabeçalho colorido + chip */ | |||
.mw-parser-output .bono-card .bono-head{ | |||
background:var(--head); | |||
color:var(--headText); | |||
padding:10px 14px; | |||
border-radius:14px 14px 0 0; | |||
display:flex; align-items:center; justify-content:center; gap:10px; | |||
font-weight:800; letter-spacing:.2px; | |||
} | |||
.mw-parser-output .bono-card .rate-chip{ | |||
background:rgba(255,255,255,.22); | |||
border-radius:999px; | |||
padding:2px 10px; | |||
font:800 12px/1 system-ui, sans-serif; | |||
} | |||
/* Corpo do card */ | |||
.mw-parser-output .bono-card .bono-body{ padding:12px 14px 14px; } | |||
.mw-parser-output .bono-card .bono-body ul{ margin:6px 0 0; padding-left:18px; } | |||
.mw-parser-output .bono-card .bono-body li{ margin:4px 0; } | |||
/* Imagens 24px ficam nitidas */ | |||
.mw-parser-output .bono-card img.mw-file-element{ | |||
image-rendering: pixelated; vertical-align: middle; transform: translateY(-1px); | |||
} | |||
/* ===== Paleta por rate (tints combinando) ===== */ | |||
.mw-parser-output .bono-card.rate-100{ | |||
--head:linear-gradient(90deg, #0e8f53 0%, #1fb36b 55%, #7ff0a3 100%); | |||
--bg:#7ff0a3; --bd:#0e8f53; | |||
} | |||
.mw-parser-output .bono-card.rate-50{ | |||
--head:linear-gradient(90deg, #6f2bd6 0%, #9b6bff 55%, #e1d3ff 100%); | |||
--bg:#e1d3ff; --bd:#6f2bd6; | |||
} | |||
.mw-parser-output .bono-card.rate-25{ | |||
--head:linear-gradient(90deg, #0f2f66 0%, #1b56aa 55%, #6fc3ff 100%); | |||
--bg:#6fc3ff; --bd:#0f2f66; | |||
} | |||
.mw-parser-output .bono-card.rate-12{ | |||
--head:linear-gradient(90deg, #2f80ed 0%, #75b7ff 55%, #e6f3ff 100%); | |||
--bg:#e6f3ff; --bd:#2f80ed; | |||
} | |||
.mw-parser-output .bono-card.rate-1{ | |||
--head:linear-gradient(90deg, #8a929b 0%, #b9c2cc 55%, #eef2f6 100%); | |||
--bg:#eef2f6; --bd:#8a929b; --headText:#1f2a34; | |||
} | |||
.mw-parser-output .bono-card.rate-temp{ | |||
--head:linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9); | |||
--bg:#f7f0fb; --bd:#eadcf6; | |||
} | |||
/* --- GRID: manter preenchimento denso e permitir itens que "span" múltiplas colunas --- */ | |||
.mw-parser-output .bono-grid{ grid-auto-flow: dense; } | |||
/* --- TEMPORADA: ocupa 3 colunas, centralizado, com destaque visual --- */ | |||
.mw-parser-output .bono-card.rate-temp{ | |||
grid-column: span 3; /* ocupa o espaço de ~3 cards */ | |||
justify-self: center; /* centraliza o card dentro da grade */ | |||
/* se quiser garantir uma base mínima confortável: */ | |||
min-width: min(720px, 100%); | |||
} | |||
/* responsivo: em telas menores, reduz pra 2 colunas e depois 1 */ | |||
@media (max-width: 1200px){ | |||
.mw-parser-output .bono-card.rate-temp{ grid-column: span 2; } | |||
} | |||
@media (max-width: 700px){ | |||
.mw-parser-output .bono-card.rate-temp{ grid-column: span 1; min-width: 0; } | |||
} | |||
/* “chip” do título (Temporada) maior e robusto */ | |||
.mw-parser-output .rate-temp .rate-chip{ | |||
display:inline-block; | |||
background: rgba(255,255,255,.18); | |||
padding: 6px 14px; | |||
border-radius: 999px; | |||
font-size: 14px; /* um pouquinho maior */ | |||
font-weight: 900; | |||
} | |||
/* corpo com leve destaque e tipografia um tico maior */ | |||
.mw-parser-output .rate-temp .bono-body{ | |||
background: var(--temp-body-bg); | |||
font-size: 15px; | |||
} | |||
/* ===== Temporada — tema preto + dourado ===== */ | |||
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap'); | |||
.mw-parser-output .rate-temp{ | |||
position: relative; | |||
background: #0b0b0e; /* quase preto */ | |||
border-radius: 16px; | |||
color: #ededf0; | |||
/* contorno de fallback (se o gradiente-borda não pegar) */ | |||
box-shadow: | |||
0 18px 36px rgba(0,0,0,.50), | |||
0 0 0 1px rgba(212,175,55,.35) inset; | |||
transition: transform .18s ease, box-shadow .18s ease; | |||
} | |||
.mw-parser-output .rate-temp:hover{ | |||
transform: translateY(-2px); | |||
box-shadow: | |||
0 26px 60px rgba(0,0,0,.55), | |||
0 0 0 1px rgba(246,226,122,.55) inset; | |||
} | |||
/* Borda dourada “premium” com máscara (cai no fallback acima se não suportar) */ | |||
.mw-parser-output .rate-temp::before{ | |||
content:""; | |||
position:absolute; inset:0; | |||
border-radius: inherit; | |||
padding: 1px; /* espessura da borda */ | |||
background: linear-gradient(135deg,#d4af37 0%,#9c7c1b 35%,#f6e27a 60%,#d4af37 100%); | |||
-webkit-mask: | |||
linear-gradient(#000 0 0) content-box, | |||
linear-gradient(#000 0 0); | |||
-webkit-mask-composite: xor; /* Chrome/Safari */ | |||
mask-composite: exclude; /* Firefox */ | |||
pointer-events: none; | |||
} | |||
/* Cabeçalho/chip */ | |||
.mw-parser-output .rate-temp .bono-head{ | |||
background: transparent; | |||
text-align: center; | |||
padding-top: 10px; | |||
} | |||
.mw-parser-output .rate-temp .rate-chip{ | |||
display:inline-block; | |||
padding: 8px 14px; | |||
border-radius: 999px; | |||
font: 900 14px/1 "Lilita One", system-ui, sans-serif; | |||
letter-spacing: .6px; | |||
text-transform: uppercase; | |||
color: #1a1400; | |||
background: linear-gradient(90deg,#f6e27a 0%, #e9c65a 40%, #d4af37 100%); | |||
border: 1px solid rgba(255,255,255,.12); | |||
box-shadow: | |||
0 6px 14px rgba(212,175,55,.35), | |||
inset 0 1px 0 rgba(255,255,255,.45); | |||
} | |||
/* Corpo do card */ | |||
.mw-parser-output .rate-temp .bono-body{ | |||
background: transparent; | |||
padding: 14px 18px 18px; | |||
} | |||
.mw-parser-output .rate-temp .bono-body ul{ | |||
margin: 6px 0 0; | |||
padding-left: 22px; /* recuo do marcador */ | |||
} | |||
.mw-parser-output .rate-temp .bono-body li{ | |||
padding: 6px 0; | |||
} | |||
/* marcador dourado dos bullets */ | |||
.mw-parser-output .rate-temp .bono-body li::marker{ | |||
color: #f0d58a; | |||
} | |||
/* Destaque dos rótulos no texto */ | |||
.mw-parser-output .rate-temp .bono-body b{ | |||
color: #f7e08e; | |||
font-family: "Lilita One", system-ui, sans-serif; | |||
letter-spacing: .2px; | |||
} | |||
/* Links dentro do card (se houver) */ | |||
.mw-parser-output .rate-temp .bono-body a{ | |||
color: #ffd86b; | |||
border-bottom: 1px dashed rgba(255,216,107,.35); | |||
} | |||
.mw-parser-output .rate-temp .bono-body a:hover{ | |||
color: #ffeaa1; | |||
border-bottom-color: rgba(255,234,161,.6); | |||
} | |||
/* Ajustes para Vector Dark (se usar) */ | |||
.skin-vector-dark .mw-parser-output .rate-temp{ | |||
color: #f2f3f5; | |||
background: #08090b; | |||
} | |||
.skin-vector-dark .mw-parser-output .rate-temp .rate-chip{ | |||
color: #120d00; | |||
} | |||
/* === Temporada: tema preto & dourado, mais claro e “brilhante” === */ | |||
.mw-parser-output .bono-card.rate-temp{ | |||
/* Paleta */ | |||
--gold-1:#fff2bf; /* luz */ | |||
--gold-2:#ffd36a; /* ouro vivo */ | |||
--gold-3:#f6b84a; /* ouro médio */ | |||
--gold-4:#b7861a; /* contorno */ | |||
--ink-1:#111216; /* fundo 1 */ | |||
--ink-2:#17181d; /* fundo 2 */ | |||
position: relative; | |||
color:#f6f3e7; | |||
background: | |||
radial-gradient(120% 160% at 50% -20%, rgba(255,211,110,.18), transparent 60%), | |||
radial-gradient(120% 140% at 50% 120%, rgba(255,211,110,.10), transparent 60%), | |||
linear-gradient(180deg, var(--ink-1), var(--ink-2)); | |||
border:1px solid color-mix(in oklab, var(--gold-4) 85%, #000); | |||
border-radius:16px; | |||
box-shadow: | |||
0 22px 40px rgba(0,0,0,.65), | |||
0 0 0 2px rgba(255,214,140,.08) inset, | |||
0 0 26px rgba(255,206,120,.22); | |||
font-family:"Cormorant Garamond","Times New Roman",serif; | |||
} | |||
/* halo/realce de bordas (bem sutil) */ | |||
.mw-parser-output .bono-card.rate-temp::after{ | |||
content:""; | |||
pointer-events:none; | |||
position:absolute; inset:0; border-radius:16px; | |||
box-shadow: 0 0 0 1px rgba(255,214,140,.25) inset, | |||
0 0 32px rgba(255,214,120,.18); | |||
} | |||
/* Faixa “Temporada” – mais dourado e destacado */ | |||
.mw-parser-output .bono-card.rate-temp .bono-head{ | |||
margin:-14px auto 10px !important; | |||
display:inline-flex; align-items:center; justify-content:center; | |||
padding:0; background:transparent; border:0; | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-head .rate-chip{ | |||
display:inline-flex; align-items:center; justify-content:center; | |||
min-height:36px; padding:0 18px; border-radius:999px; | |||
color:#1b1407; font-weight:800; letter-spacing:.6px; text-transform:uppercase; | |||
background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 60%, var(--gold-3) 100%); | |||
border:1px solid var(--gold-4); | |||
box-shadow: | |||
0 10px 24px rgba(255,203,96,.35), | |||
0 1px 0 var(--gold-1) inset, | |||
0 -1px 0 var(--gold-4) inset; | |||
filter: drop-shadow(0 0 12px rgba(255,198,90,.55)); | |||
} | |||
/* Corpo: marcadores, separadores e links claros */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body ul{ | |||
margin: 6px 0 12px; padding-left: 1.25em; | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-body li{ | |||
margin: 8px 0; | |||
/* separador discreto entre linhas */ | |||
border-top:1px dashed rgba(255,214,140,.22); | |||
padding-top:10px; | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-body li:first-child{ | |||
border-top:0; padding-top:0; | |||
} | |||
/* marcadores dourados */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body li::marker{ | |||
color: var(--gold-2); | |||
} | |||
/* destaques das labels (Rate, Drop, Outros...) */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body b{ | |||
color: var(--gold-1); | |||
text-shadow: 0 0 8px rgba(255,211,120,.25); | |||
} | |||
/* links mais visíveis */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body a{ | |||
color: var(--gold-2); | |||
text-decoration-color: rgba(255,214,140,.45); | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-body a:hover{ | |||
color: var(--gold-1); | |||
text-shadow: 0 0 10px rgba(255,211,120,.6); | |||
} | |||
/* (Opcional) deixa a tipografia um pouco maior e espaçada dentro do card */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body{ | |||
font-size: 15.5px; | |||
line-height: 1.55; | |||
} | |||
/* ====== Callouts do Guia do Iniciante ====== */ | |||
.guide-callout{ | |||
margin: 10px 0 16px; | |||
padding: 10px 12px; | |||
border: 1px solid #e6e8f2; | |||
border-radius: 10px; | |||
background: #f9fafc; | |||
box-shadow: 0 4px 14px rgba(24,18,58,.06); | |||
line-height: 1.45; | |||
} | |||
.guide-callout b{ font-weight: 800; } | |||
/* Variações */ | |||
.guide-tip{ | |||
border-color: #cfe6ff; | |||
background: linear-gradient(180deg,#f4f9ff, #f9fbff); | |||
} | |||
.guide-important{ | |||
border-color: #d9e6d9; | |||
background: linear-gradient(180deg,#f4fff6, #fbfffc); | |||
} | |||
.guide-attention{ | |||
border-color: #ffe0a8; | |||
background: linear-gradient(180deg,#fff9eb, #fffdf7); | |||
} | |||
/* ===== Pacote Iniciante — simples (1 coluna) ===== */ | |||
.pack-simple{ | |||
width: min(640px, 96%); | |||
margin: 12px auto 18px; /* centraliza */ | |||
border: 1px solid var(--rt-bd, #e7e8ee); | |||
border-radius: 12px; | |||
background: var(--rt-bg, #fff); | |||
} | |||
.pack-title{ | |||
font-weight: 800; | |||
text-align: center; | |||
padding: 8px 10px; | |||
color: var(--rt-text, #1e1b2e); | |||
} | |||
.pack-list{ | |||
list-style: none; | |||
margin: 0; | |||
padding: 0 12px 10px; | |||
} | |||
.pack-row{ | |||
display: grid; | |||
grid-template-columns: 28px 1fr; /* ícone | nome */ | |||
align-items: center; | |||
gap: 10px; | |||
padding: 8px 0; | |||
border-top: 1px solid var(--rt-bd, #e7e8ee); | |||
} | |||
.pack-row:first-child{ border-top: 0; } | |||
.pack-ico .mw-file-element{ | |||
width: 24px; height: 24px; | |||
image-rendering: pixelated; | |||
display: block; | |||
} | |||
.pack-name{ | |||
color: var(--rt-text, #1e1b2e); | |||
} | |||
/* dark mode opcional (Vector dark) */ | |||
.skin-vector-dark .pack-simple{ | |||
background: #16171c; | |||
border-color: #2a2c35; | |||
} | |||
.skin-vector-dark .pack-row{ border-top-color: #2a2c35; } | |||
.skin-vector-dark .pack-title, .skin-vector-dark .pack-name{ color: #e6e6ea; } | |||
/* Bloco do nível: cartão leve */ | |||
.nivel-box{ | |||
border:1px solid #e6e8f2; border-radius:12px; | |||
background:#fff; padding:8px 12px; margin:10px 0; | |||
box-shadow: 0 6px 18px rgba(24,18,58,.06); | |||
} | |||
/* Título do cabeçalho */ | |||
.nivel-box .nivel-head{ | |||
font-weight:800; text-align:center; margin:2px 0 6px; | |||
} | |||
/* Conteúdo aberto com um espacinho */ | |||
.nivel-box .mw-collapsible-content{ | |||
padding:8px 0 12px; | |||
} | |||
/* Neutro para blocos de nível */ | |||
.drops-inline.is-neutral{ | |||
--dif-color:#6c757d; | |||
--head-grad: linear-gradient(90deg,#6c757d,#8a95a3,#a3adb8); | |||
--dif-tint: rgba(108,117,125,.10); | |||
--dif-tint-strong: rgba(108,117,125,.18); | |||
} | |||
/* ===== DROPS — Paletas por FAIXA DE NÍVEL ===== */ | |||
/* Cada classe só define as variáveis de cor; o layout já vem das tuas regras base. */ | |||
/* Nomeei como .is-lv-<inicio>-<fim> pra ficar intuitivo de usar no wikitexto. */ | |||
.drops-inline.is-lv-1-20{ | |||
--dif-color:#2ecc71; | |||
--head-grad: linear-gradient(90deg,#2ecc71,#43d888,#6be8a1); | |||
--dif-tint: rgba(46,204,113,.10); | |||
--dif-tint-strong: rgba(46,204,113,.18); | |||
} | |||
.drops-inline.is-lv-20-30{ | |||
--dif-color:#1abc9c; | |||
--head-grad: linear-gradient(90deg,#1abc9c,#23c7a9,#52e0c6); | |||
--dif-tint: rgba(26,188,156,.10); | |||
--dif-tint-strong: rgba(26,188,156,.18); | |||
} | |||
.drops-inline.is-lv-30-50{ | |||
--dif-color:#3498db; | |||
--head-grad: linear-gradient(90deg,#3498db,#4aa8ea,#7bc2f5); | |||
--dif-tint: rgba(52,152,219,.10); | |||
--dif-tint-strong: rgba(52,152,219,.18); | |||
} | |||
.drops-inline.is-lv-50-70{ | |||
--dif-color:#5b3aa8; | |||
--head-grad: linear-gradient(90deg,#5b3aa8,#7462d1,#9a8be6); | |||
--dif-tint: rgba(91,58,168,.10); | |||
--dif-tint-strong: rgba(91,58,168,.18); | |||
} | |||
.drops-inline.is-lv-70-100{ | |||
--dif-color:#9b59b6; | |||
--head-grad: linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9); | |||
--dif-tint: rgba(155,89,182,.12); | |||
--dif-tint-strong: rgba(155,89,182,.20); | |||
} | |||
.drops-inline.is-lv-100-125{ | |||
--dif-color:#e91e63; | |||
--head-grad: linear-gradient(90deg,#e91e63,#f26f97,#f8a9c0); | |||
--dif-tint: rgba(233,30,99,.10); | |||
--dif-tint-strong: rgba(233,30,99,.18); | |||
} | |||
.drops-inline.is-lv-126-150{ | |||
--dif-color:#f39c12; | |||
--head-grad: linear-gradient(90deg,#f39c12,#f8b539,#fbd17a); | |||
--dif-tint: rgba(243,156,18,.10); | |||
--dif-tint-strong: rgba(243,156,18,.18); | |||
} | |||
.drops-inline.is-lv-150-180{ | |||
--dif-color:#e74c3c; | |||
--head-grad: linear-gradient(90deg,#e74c3c,#ef6b5e,#f39c91); | |||
--dif-tint: rgba(231,76,60,.10); | |||
--dif-tint-strong: rgba(231,76,60,.18); | |||
} | |||
.drops-inline.is-lv-180-200{ | |||
--dif-color:#6c757d; | |||
--head-grad: linear-gradient(90deg,#6c757d,#8a95a3,#a3adb8); | |||
--dif-tint: rgba(108,117,125,.10); | |||
--dif-tint-strong: rgba(108,117,125,.18); | |||
} | |||
.drops-inline.is-lv-200-230{ | |||
--dif-color:#d4af37; | |||
--head-grad: linear-gradient(90deg,#d4af37,#e2c24d,#f0d874); | |||
--dif-tint: rgba(212,175,55,.10); | |||
--dif-tint-strong: rgba(212,175,55,.18); | |||
} | |||
.drops-inline.is-lv-230-240{ | |||
--dif-color:#00bcd4; | |||
--head-grad: linear-gradient(90deg,#00bcd4,#33cfe0,#7ae6ef); | |||
--dif-tint: rgba(0,188,212,.10); | |||
--dif-tint-strong: rgba(0,188,212,.18); | |||
} | |||
.drops-inline.is-lv-240-250{ | |||
--dif-color:#b784f7; | |||
--head-grad: linear-gradient(90deg,#b784f7,#caa0ff,#e2ccff); | |||
--dif-tint: rgba(183,132,247,.12); | |||
--dif-tint-strong: rgba(183,132,247,.20); | |||
} | |||
.drops-inline.is-lv-250-260{ | |||
--dif-color:#16a085; | |||
--head-grad: linear-gradient(90deg,#16a085,#20b89b,#49d9bd); | |||
--dif-tint: rgba(22,160,133,.10); | |||
--dif-tint-strong: rgba(22,160,133,.18); | |||
} | |||
.drops-inline.is-lv-260-275{ | |||
--dif-color:#2b2d42; | |||
--head-grad: linear-gradient(90deg,#2b2d42,#4b4f6a,#8d99ae); | |||
--dif-tint: rgba(43,45,66,.10); | |||
--dif-tint-strong: rgba(43,45,66,.18); | |||
} | |||
/* Box do mapa (gif + nome) centralizada, fundo branco */ | |||
.mw-parser-output .mapa-spot{ | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
width: 280px; /* ajuste se quiser maior/menor */ | |||
margin: 0 auto; /* centraliza na célula */ | |||
padding: 12px 14px; | |||
background:#fff; | |||
border:1px solid #e7e8ee; | |||
border-radius:12px; | |||
box-shadow: 0 6px 18px rgba(18,18,28,.08); | |||
} | |||
/* Gif com “pixel art” bonito e respiro */ | |||
.mw-parser-output .mapa-spot img.mw-file-element{ | |||
width:64px; /* pode usar 40/48/64px */ | |||
height:auto; | |||
image-rendering: pixelated; | |||
margin-bottom:8px; | |||
} | |||
/* Nome do mapa */ | |||
.mw-parser-output .mapa-spot .mapa-nome{ | |||
font-weight:600; | |||
color:#2b2b36; | |||
line-height:1.25; | |||
text-align:center; | |||
} | |||
/* Remover o fundo quadrado atrás do sprite, mantendo a caixa branca do .up-figure */ | |||
.mw-parser-output .up-figure img.mw-file-element, | |||
.mw-parser-output .up-figure .up-sprite{ | |||
background: transparent !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
outline: 0 !important; | |||
} | |||
/* ========= EVENTOS AUTOMÁTICOS – estilos ========= */ | |||
:root{ | |||
--ev-bg: #ffffff; | |||
--ev-bd: #e7e8ee; | |||
--ev-soft: #f7f8ff; | |||
--ev-text: #1e1b2e; | |||
--ev-accent-1: #6b8cff; /* azul */ | |||
--ev-accent-2: #ffb86b; /* laranja */ | |||
--ev-accent-3: #9b59b6; /* roxo */ | |||
} | |||
.mw-parser-output .ev-wrap{ | |||
max-width: 1100px; margin: 8px auto 22px; padding: 0 10px; | |||
color: var(--ev-text); | |||
} | |||
.mw-parser-output .ev-title{ | |||
text-align: center; margin: 6px 0 10px; | |||
font-size: 22px; font-weight: 800; letter-spacing: .2px; | |||
background: linear-gradient(90deg,#6b8cff,#9b59b6,#ffb86b); | |||
-webkit-background-clip: text; background-clip: text; color: transparent; | |||
} | |||
.mw-parser-output .ev-callout{ | |||
background: var(--ev-soft); | |||
border: 1px solid var(--ev-bd); | |||
border-radius: 12px; | |||
padding: 12px 14px; | |||
box-shadow: 0 6px 18px rgba(24,18,58,.08); | |||
margin: 8px 0 16px; | |||
} | |||
.mw-parser-output .ev-cards{ | |||
display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); | |||
gap: 14px; | |||
} | |||
/* Cartão colapsável */ | |||
.mw-parser-output .ev-card{ | |||
position: relative; | |||
border: 1px solid var(--ev-bd); | |||
border-radius: 14px; | |||
background: var(--ev-bg); | |||
box-shadow: 0 8px 20px rgba(24,18,58,.08); | |||
overflow: hidden; | |||
padding-right: 88px; /* espaço pro toggle à direita */ | |||
} | |||
/* Cabeçalho do cartão */ | |||
.mw-parser-output .ev-head{ | |||
display: flex; align-items: center; gap: 10px; | |||
padding: 10px 14px; | |||
background: linear-gradient(90deg,#f4f6ff,#fff); | |||
border-bottom: 1px solid var(--ev-bd); | |||
} | |||
.mw-parser-output .ev-name{ font-weight: 800; } | |||
.mw-parser-output .ev-badge{ | |||
display:inline-flex; align-items:center; justify-content:center; | |||
height: 22px; padding: 0 10px; border-radius: 999px; | |||
color:#fff; font-weight: 800; font-size: 12px; text-transform: uppercase; | |||
} | |||
.mw-parser-output .ev-badge.ev-1{ background:#6b8cff; } | |||
.mw-parser-output .ev-badge.ev-2{ background:#ff9b51; } | |||
.mw-parser-output .ev-badge.ev-3{ background:#9b59b6; } | |||
/* reposiciona o [Mostrar]/[Ocultar] do MW */ | |||
.mw-parser-output .ev-card > .mw-collapsible-toggle{ | |||
position: absolute !important; right: 12px; top: 12px !important; | |||
float: none !important; margin: 0 !important; | |||
} | |||
.mw-parser-output .ev-card > .mw-collapsible-toggle a{ | |||
display:inline-flex; align-items:center; gap:6px; | |||
height: 28px; padding:0 12px; border-radius:999px; text-decoration:none; | |||
background:#f3f4fa; font-weight:700; color:#324; | |||
} | |||
.mw-parser-output .ev-card > .mw-collapsible-toggle a:hover{ background:#e9eafb; } | |||
/* conteúdo do cartão */ | |||
.mw-parser-output .ev-body{ | |||
padding: 12px 14px 14px; | |||
} | |||
.mw-parser-output .ev-specs{ | |||
width:100%; border-collapse: collapse; margin: 6px 0 0; | |||
} | |||
.mw-parser-output .ev-specs th, | |||
.mw-parser-output .ev-specs td{ | |||
border: 1px solid var(--ev-bd); padding: .55em .7em; text-align: left; | |||
} | |||
.mw-parser-output .ev-specs th{ background:#f7f8fb; font-weight: 800; } | |||
/* Loja de eventos – grid */ | |||
.mw-parser-output .ev-shop-title{ margin: 18px 0 10px; font-weight: 800; } | |||
.mw-parser-output .ev-shop{ | |||
display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); | |||
gap: 12px; | |||
} | |||
.mw-parser-output .ev-item{ | |||
display:flex; gap:10px; align-items:center; | |||
background: var(--ev-bg); | |||
border:1px solid var(--ev-bd); border-radius:12px; | |||
padding:10px 12px; box-shadow: 0 6px 16px rgba(24,18,58,.06); | |||
} | |||
.mw-parser-output .ev-item b{ display:block; } | |||
.mw-parser-output .ev-price{ margin-left:auto; font-weight:800; color:#324; } | |||
/* ===== Eventos em destaque (textual) ===== */ | |||
.mw-parser-output .ev-sections{ | |||
display:grid; | |||
gap:14px; | |||
} | |||
.mw-parser-output .ev-section{ | |||
background:#fff; | |||
border:1px solid var(--ev-bd, #e7e8ee); | |||
border-radius:12px; | |||
box-shadow:0 6px 16px rgba(24,18,58,.06); | |||
padding:14px 16px; | |||
} | |||
.mw-parser-output .ev-h{ | |||
margin:0 0 6px; | |||
font-weight:800; | |||
font-size:18px; | |||
letter-spacing:.2px; | |||
} | |||
.mw-parser-output .ev-sub{ | |||
display:inline-block; | |||
margin-left:8px; | |||
font-size:12px; | |||
color:#58607a; | |||
text-transform:uppercase; | |||
letter-spacing:.3px; | |||
} | |||
.mw-parser-output .ev-kv{ | |||
/* tabela “key–value” em 2 colunas */ | |||
display:grid; | |||
grid-template-columns: 160px 1fr; | |||
column-gap:12px; | |||
row-gap:6px; | |||
align-items:start; | |||
margin:10px 0 4px; | |||
} | |||
.mw-parser-output .ev-kv .k{ | |||
font-weight:800; | |||
color:#2e3350; | |||
} | |||
.mw-parser-output .ev-kv .v{ | |||
color:#1f2233; | |||
} | |||
.mw-parser-output .ev-list{ | |||
margin:0; | |||
} | |||
.mw-parser-output .ev-list li{ | |||
margin:0 0 4px 18px; | |||
} | |||
.mw-parser-output .ev-note{ | |||
margin-top:6px; | |||
font-size:12px; | |||
color:#6b6f85; | |||
} | |||
/* ===== Premiação (colapsável) por evento ===== */ | |||
.mw-parser-output .ev-rewards{ | |||
margin-top: 12px; | |||
padding-top: 6px; | |||
border-top: 1px dashed #e6e8f2; | |||
} | |||
/* Centraliza e estiliza o link padrão do MediaWiki como "botão" */ | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle{ | |||
float: none !important; | |||
position: static !important; | |||
display: flex !important; | |||
justify-content: center; | |||
align-items: center; | |||
margin: 0 !important; | |||
text-align: center !important; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a{ | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 6px; | |||
padding: 8px 14px; | |||
border-radius: 999px; | |||
background: #f3f4fa; | |||
border: 1px solid #e1e3ee; | |||
font-weight: 700; | |||
text-decoration: none !important; | |||
color: #1f2233; | |||
transition: background .15s ease, box-shadow .15s ease, transform .05s ease; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:hover{ | |||
background: #e9ebfb; | |||
box-shadow: 0 4px 12px rgba(24,18,58,.10); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:active{ | |||
transform: translateY(1px); | |||
} | |||
/* Conteúdo centralizado e com largura máxima “saudável” */ | |||
.mw-parser-output .ev-rewards .mw-collapsible-content{ | |||
margin-top: 12px; | |||
display: flex; | |||
justify-content: center; | |||
} | |||
.mw-parser-output .ev-rewards .ev-prize{ | |||
width: min(720px, 100%); | |||
margin: 0 auto; | |||
border-collapse: collapse; | |||
} | |||
.mw-parser-output .ev-rewards .ev-prize th{ | |||
background: #f7f8fc; | |||
font-weight: 800; | |||
border: 1px solid #e7e8ee; | |||
} | |||
.mw-parser-output .ev-rewards .ev-prize td{ | |||
border: 1px solid #e7e8ee; | |||
text-align: center; | |||
} | |||
/* --------------------------------------------------------- | |||
Eventos — visual premium (tipografia, cards, botões, etc.) | |||
--------------------------------------------------------- */ | |||
/* Fontes — mesmas da wiki pra manter identidade */ | |||
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700;800&display=swap'); | |||
:root{ | |||
/* Paleta clara */ | |||
--ev-bg: #ffffff; | |||
--ev-card: #ffffff; | |||
--ev-border: #e7e8ee; | |||
--ev-soft: #f7f8fc; | |||
--ev-text: #1f2233; | |||
/* Acentos (roxinho/azul da wiki) */ | |||
--ev-accent-1: #6b5cff; | |||
--ev-accent-2: #22b8ff; | |||
--ev-grad: linear-gradient(90deg, var(--ev-accent-1), var(--ev-accent-2)); | |||
/* Chips/badges */ | |||
--ev-chip-bg: rgba(107,92,255,.10); | |||
--ev-chip-bd: rgba(107,92,255,.22); | |||
/* Sombras */ | |||
--ev-shadow: 0 10px 28px rgba(24,18,58,.12); | |||
--ev-shadow-strong: 0 18px 44px rgba(24,18,58,.18); | |||
} | |||
/* Tema escuro (Vector Dark) */ | |||
.skin-vector-dark :root{ | |||
--ev-bg: #121318; | |||
--ev-card: #161720; | |||
--ev-border: #2a2c35; | |||
--ev-soft: #1c1e28; | |||
--ev-text: #e8eaf2; | |||
--ev-chip-bg: rgba(107,92,255,.22); | |||
--ev-chip-bd: rgba(107,92,255,.35); | |||
--ev-shadow: 0 10px 28px rgba(0,0,0,.45); | |||
--ev-shadow-strong: 0 18px 44px rgba(0,0,0,.6); | |||
} | |||
/* Área geral dos eventos */ | |||
.mw-parser-output .ev-sections{ | |||
display: grid; | |||
gap: 18px; | |||
margin: 10px 0 22px; | |||
} | |||
/* Cada evento como “card” */ | |||
.mw-parser-output .ev-section{ | |||
background: var(--ev-card); | |||
border: 1px solid var(--ev-border); | |||
border-radius: 16px; | |||
padding: 14px 16px 16px; | |||
box-shadow: var(--ev-shadow); | |||
color: var(--ev-text); | |||
font-family: "Nunito", system-ui, sans-serif; | |||
} | |||
.mw-parser-output .ev-section:hover{ | |||
box-shadow: var(--ev-shadow-strong); | |||
} | |||
/* Título com gradiente + chip de periodicidade */ | |||
.mw-parser-output .ev-h{ | |||
display: flex; align-items: center; gap: 10px; | |||
margin: 2px 0 10px; | |||
font: 700 22px/1 "Paytone One", system-ui, sans-serif; | |||
background: var(--ev-grad); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
color: transparent; | |||
} | |||
.mw-parser-output .ev-h .ev-sub{ | |||
font: 800 12px/1 "Nunito", system-ui, sans-serif; | |||
color: var(--ev-text); | |||
padding: 6px 10px; | |||
border-radius: 999px; | |||
background: var(--ev-chip-bg); | |||
border: 1px solid var(--ev-chip-bd); | |||
color: #453aa0; /* contraste bom no claro */ | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-h .ev-sub{ | |||
color: #d7d8ff; /* contraste no escuro */ | |||
} | |||
/* Key–Value (grid de “Horários / Duração / …”) */ | |||
.mw-parser-output .ev-kv{ | |||
display: grid; | |||
grid-template-columns: 160px 1fr; | |||
gap: 10px 14px; | |||
align-items: start; | |||
margin: 6px 0 0; | |||
} | |||
.mw-parser-output .ev-kv .k{ | |||
font-weight: 800; | |||
padding: 6px 10px; | |||
border-radius: 10px; | |||
background: var(--ev-chip-bg); | |||
border: 1px solid var(--ev-chip-bd); | |||
color: #3b2fb8; | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-kv .k{ color:#d7d8ff; } | |||
.mw-parser-output .ev-kv .v{ | |||
padding: 10px 12px; | |||
border-radius: 12px; | |||
background: var(--ev-soft); | |||
border: 1px solid var(--ev-border); | |||
} | |||
/* Se o bloco de premiação estiver *dentro* do grid, ocupa a linha toda */ | |||
.mw-parser-output .ev-kv > .ev-rewards{ | |||
grid-column: 1 / -1; | |||
} | |||
/* ---- Premiação: botão colapsável + conteúdo centralizado ---- */ | |||
.mw-parser-output .ev-rewards{ | |||
margin-top: 10px; | |||
padding-top: 6px; | |||
border-top: 1px dashed var(--ev-border); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: flex !important; | |||
justify-content: center; align-items: center; | |||
margin: 0 !important; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a{ | |||
display: inline-flex; align-items: center; gap: 8px; | |||
padding: 9px 16px; | |||
border-radius: 999px; | |||
border: 0; | |||
background: var(--ev-grad); | |||
color: #fff !important; | |||
font-weight: 800; | |||
text-decoration: none !important; | |||
box-shadow: 0 8px 18px rgba(36,45,110,.18); | |||
transition: transform .05s ease, box-shadow .15s ease, filter .15s ease; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.05); | |||
box-shadow: 0 12px 26px rgba(36,45,110,.24); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:active{ | |||
transform: translateY(1px); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a::before{ | |||
content: "🎁"; | |||
font-size: 14px; | |||
} | |||
/* Conteúdo centralizado */ | |||
.mw-parser-output .ev-rewards .mw-collapsible-content{ | |||
margin-top: 12px; | |||
display: flex; justify-content: center; | |||
} | |||
/* Tabela de prêmios */ | |||
.mw-parser-output .ev-prize{ | |||
width: min(760px, 100%); | |||
margin: 0 auto; | |||
border-collapse: collapse; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
} | |||
.mw-parser-output .ev-prize th{ | |||
background: linear-gradient(180deg, #f7f8ff, #eef0ff); | |||
border: 1px solid var(--ev-border); | |||
font-weight: 800; | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-prize th{ | |||
background: linear-gradient(180deg, #202236, #1b1d2b); | |||
} | |||
.mw-parser-output .ev-prize td{ | |||
border: 1px solid var(--ev-border); | |||
text-align: center; | |||
padding: .6em .7em; | |||
} | |||
.mw-parser-output .ev-prize tr:nth-child(even) td{ | |||
background: rgba(107,92,255,.035); | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-prize tr:nth-child(even) td{ | |||
background: rgba(107,92,255,.11); | |||
} | |||
/* ---- Rodapé do card de evento (onde fica o botão de premiação) ---- */ | |||
.ev-section .ev-footer{ | |||
margin: 12px 4px 0; | |||
padding-top: 10px; | |||
border-top: 1px dashed #e9e7fb; | |||
display: flex; | |||
justify-content: center; | |||
} | |||
/* ===== Eventos – bloco de premiação dentro do card ===== */ | |||
.ev-kv .ev-rewards{ | |||
grid-column: 1 / -1; /* ocupa as 2 colunas do grid */ | |||
margin: 14px 0 4px; | |||
padding-top: 10px; | |||
border-top: 1px dashed #e7e9fb; /* separador sutil */ | |||
text-align: center; | |||
} | |||
/* botão toggle centralizado e com cara de chip */ | |||
.ev-rewards .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
gap: 8px; | |||
margin: 0 auto !important; | |||
padding: 6px 14px; | |||
border-radius: 999px; | |||
background: #f1efff; | |||
border: 1px solid #d9d6ff; | |||
box-shadow: 0 1px 0 rgba(60,45,140,.06); | |||
} | |||
.ev-rewards .mw-collapsible-toggle a{ | |||
font-weight: 800; | |||
font-size: 13px; | |||
color: #4b3ecf; | |||
text-decoration: none !important; | |||
} | |||
.ev-rewards .mw-collapsible-toggle a::before{ | |||
content: "🎁"; | |||
font-size: 14px; | |||
transform: translateY(-1px); | |||
} | |||
/* conteúdo expandido centralizado */ | |||
.ev-rewards .mw-collapsible-content{ | |||
margin-top: 12px; | |||
} | |||
/* ===== Tabela da premiação (visual de cartão) ===== */ | |||
.wikitable.ev-prize{ | |||
border-collapse: collapse !important; | |||
margin: 0 auto !important; | |||
width: min(720px, 96%) !important; | |||
background: #fff; | |||
border: 1px solid #e6e6f5 !important; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
box-shadow: 0 4px 12px rgba(37,21,96,.08); | |||
} | |||
.wikitable.ev-prize th{ | |||
background: linear-gradient(180deg,#f6f4ff 0%, #eeecff 100%); | |||
color: #362f6d; | |||
font-weight: 800; | |||
padding: 10px 12px; | |||
border-bottom: 1px solid #e6e6f5 !important; | |||
text-align: center; | |||
} | |||
.wikitable.ev-prize td{ | |||
padding: 10px 12px !important; | |||
border-top: 1px solid #f0f1fb !important; | |||
text-align: center; | |||
} | |||
.wikitable.ev-prize tr:nth-child(even) td{ background:#fafafe; } | |||
/* remove qualquer float/resíduo do toggle padrão */ | |||
.ev-rewards .mw-collapsible-toggle-default{ float:none !important; } | |||
.mw-parser-output .gif-120 img.mw-file-element{ | |||
width:120px; | |||
height:auto; | |||
image-rendering:pixelated; | |||
} | |||
/* ===== Card principal do Sistema VIP ===== */ | |||
.mw-parser-output .vip-panel{ | |||
position: relative; | |||
max-width: 1100px; | |||
margin: 26px auto 24px; | |||
padding: 20px 22px 18px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient(140% 200% at 50% -40%, rgba(255,166,90,.20), transparent 60%), | |||
radial-gradient(120% 180% at 50% 140%, rgba(140,110,255,.26), transparent 60%), | |||
linear-gradient(180deg,#140824,#25184a); | |||
border: 1px solid color-mix(in oklab,#8e6bff 70%,#ffb35a 30%); | |||
box-shadow: | |||
0 22px 40px rgba(0,0,0,.75), | |||
0 0 0 1px rgba(35,10,70,.7) inset, | |||
0 0 28px rgba(143,110,255,.32); | |||
color:#fdf7ff; | |||
font-family:"Nunito", system-ui, sans-serif; | |||
} | |||
/* halo suave na borda */ | |||
.mw-parser-output .vip-panel::after{ | |||
content:""; | |||
pointer-events:none; | |||
position:absolute; inset:0; border-radius:18px; | |||
box-shadow: | |||
0 0 0 1px rgba(255,176,100,.3) inset, | |||
0 0 30px rgba(255,176,100,.18); | |||
} | |||
/* “chip” SISTEMA VIP sobre a borda, sem fundo branco */ | |||
.mw-parser-output .vip-panel-chip{ | |||
position:absolute; | |||
top:-20px; | |||
left:50%; | |||
transform:translateX(-50%); | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
min-height:32px; | |||
padding:0 26px; | |||
border-radius:999px; | |||
font-weight:900; | |||
letter-spacing:.16em; | |||
text-transform:uppercase; | |||
color:#26100a; | |||
background:linear-gradient(180deg,#ffe6c0 0%, #ffb347 55%, #ff9334 100%); | |||
border:1px solid #b86322; | |||
box-shadow: | |||
0 10px 24px rgba(255,167,90,.45), | |||
0 1px 0 rgba(255,245,220,.8) inset, | |||
0 -1px 0 rgba(150,70,30,.8) inset, | |||
0 0 18px rgba(255,170,90,.7); | |||
} | |||
/* Lista de informações do VIP */ | |||
.mw-parser-output .vip-panel-list{ | |||
margin: 6px 0 4px; | |||
padding-left: 1.2em; | |||
list-style: disc; | |||
font-size: 14px; | |||
} | |||
.mw-parser-output .vip-panel-list li{ | |||
margin: 6px 0; | |||
padding-top: 8px; | |||
border-top:1px dashed rgba(255,210,150,.40); | |||
} | |||
/* primeiro item sem linha em cima */ | |||
.mw-parser-output .vip-panel-list li:first-child{ | |||
border-top:0; | |||
padding-top:0; | |||
} | |||
/* marcador e labels em destaque */ | |||
.mw-parser-output .vip-panel-list li::marker{ | |||
color:#ffb347; | |||
} | |||
.mw-parser-output .vip-panel-list b{ | |||
color:#ffe9c9; | |||
} | |||
/* responsivo: em telas menores, só ajusta o padding */ | |||
@media (max-width:640px){ | |||
.mw-parser-output .vip-panel{ | |||
margin-top: 30px; | |||
padding: 18px 14px 16px; | |||
} | |||
} | |||
/* ======================================================= | |||
PÁGINA DE MASCOTES (PETS) | |||
Tema roxo profundo + neon violeta/rosa/ciano | |||
(sobrescreve qualquer tema anterior dos .pet-*) | |||
======================================================= */ | |||
/* Paleta base escopada na página de pets */ | |||
.mw-parser-output .pet-page{ | |||
--pet-bg: #0b0612; | |||
--pet-card: #140821; | |||
--pet-card-soft: #1b0d2c; | |||
--pet-border: #3e2469; | |||
--pet-soft-bd: #593993; | |||
--pet-text: #f7f1ff; | |||
--pet-subtext: #ccc1f5; | |||
--pet-accent-1: #b46bff; /* violeta */ | |||
--pet-accent-2: #ff6fb1; /* rosa */ | |||
--pet-accent-3: #46e3ff; /* ciano */ | |||
--pet-shadow: 0 20px 45px rgba(1,0,20,.9); | |||
--pet-shadow-strong: 0 26px 60px rgba(3,0,30,.95); | |||
} | |||
/* texto geral */ | |||
.mw-parser-output .pet-page{ | |||
color: var(--pet-text); | |||
} | |||
/* ------------------------------------------------------- | |||
HERO (título "Mascotes (Pets)") | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-hero{ | |||
background: | |||
radial-gradient(130% 200% at 0% 0%, rgba(180,107,255,.25), transparent 60%), | |||
radial-gradient(130% 200% at 100% 100%, rgba(70,227,255,.20), transparent 60%), | |||
linear-gradient(135deg,#0c0416,#180a27); | |||
border-radius: 16px; | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 70%, #ffffff 10%); | |||
box-shadow: | |||
var(--pet-shadow), | |||
0 0 0 1px rgba(255,255,255,.02) inset; | |||
} | |||
/* título gradiente violeta/rosa/ciano */ | |||
.mw-parser-output .pet-hero-title{ | |||
background: linear-gradient(90deg, | |||
var(--pet-accent-1), | |||
var(--pet-accent-2), | |||
var(--pet-accent-3) | |||
); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
color: transparent; | |||
} | |||
/* subtítulo */ | |||
.mw-parser-output .pet-hero-sub{ | |||
color: var(--pet-subtext); | |||
} | |||
/* chips "4 categorias", etc. */ | |||
.mw-parser-output .pet-hero-tags{ | |||
margin-top: 10px; | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
} | |||
.mw-parser-output .pet-hero-tag{ | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.25), | |||
transparent 55%) | |||
,rgba(15,6,40,.96) !important; | |||
border-radius: 999px; | |||
padding: 4px 11px; | |||
border: 1px solid rgba(180,107,255,.85) !important; | |||
font-size: 11px; | |||
text-transform: uppercase; | |||
letter-spacing: .16em; | |||
color: #eaf6ff !important; | |||
box-shadow: | |||
0 10px 22px rgba(4,0,28,.9), | |||
0 0 14px rgba(180,107,255,.6); | |||
} | |||
/* ------------------------------------------------------- | |||
CATEGORIAS (cards) | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-cats{ | |||
margin: 10px 0 20px; | |||
display:grid; | |||
grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); | |||
gap: 14px; | |||
} | |||
.mw-parser-output .pet-card{ | |||
position:relative; | |||
border-radius: 16px; | |||
padding: 12px 14px 14px; | |||
background: | |||
radial-gradient(120% 200% at 0 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(120% 200% at 100% 100%, rgba(70,227,255,.18), transparent 60%), | |||
linear-gradient(180deg,#110418,#190a27); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 75%, #ffffff 5%); | |||
box-shadow: var(--pet-shadow); | |||
} | |||
/* título da categoria */ | |||
.mw-parser-output .pet-card-title{ | |||
text-align:center; | |||
margin: 0 0 8px; | |||
font-weight: 800; | |||
font-size: 15px; | |||
letter-spacing: .14em; | |||
text-transform: uppercase; | |||
color: #fdf7ff; | |||
} | |||
.mw-parser-output .pet-card-title span{ | |||
display:block; | |||
margin-top: 2px; | |||
font-size: 11px; | |||
letter-spacing:.16em; | |||
text-transform:uppercase; | |||
color: color-mix(in srgb, var(--pet-accent-3) 65%, #ffffff 20%); | |||
} | |||
/* key–value interno */ | |||
.mw-parser-output .pet-card-kv{ | |||
display:grid; | |||
grid-template-columns: 120px 1fr; | |||
column-gap: 10px; | |||
row-gap: 6px; | |||
} | |||
.mw-parser-output .pet-card-k{ | |||
font-weight: 800; | |||
font-size: 12px; | |||
color: color-mix(in srgb, var(--pet-accent-1) 70%, #ffffff 10%); | |||
} | |||
.mw-parser-output .pet-card-v{ | |||
font-size: 13px; | |||
color: var(--pet-text); | |||
} | |||
/* ------------------------------------------------------- | |||
REFINO (bloco + tabela) | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-refine{ | |||
margin: 14px 0 18px; | |||
padding: 12px 14px 14px; | |||
border-radius: 16px; | |||
background: | |||
radial-gradient(130% 220% at 0 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(120% 200% at 100% 140%, rgba(70,227,255,.18), transparent 60%), | |||
linear-gradient(135deg,#100318,#1a0927); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 80%, #ffffff 4%); | |||
box-shadow: var(--pet-shadow-strong); | |||
} | |||
.mw-parser-output .pet-refine-title{ | |||
margin: 0 0 6px; | |||
font-weight: 800; | |||
font-size: 16px; | |||
letter-spacing: .16em; | |||
text-transform: uppercase; | |||
color: #fdf7ff; | |||
} | |||
/* texto */ | |||
.mw-parser-output .pet-refine p{ | |||
font-size: 13px; | |||
color: var(--pet-subtext); | |||
} | |||
/* bullets dos passos de múltiplos de 3 */ | |||
.mw-parser-output .pet-refine-steps{ | |||
margin: 6px 0 4px; | |||
padding-left: 0; | |||
list-style:none; | |||
font-size: 13px; | |||
} | |||
.mw-parser-output .pet-refine-steps li{ | |||
margin: 3px 0; | |||
padding-left: 20px; | |||
position:relative; | |||
} | |||
.mw-parser-output .pet-refine-steps li::before{ | |||
content:"●"; | |||
position:absolute; | |||
left:0; | |||
top:0; | |||
font-size:10px; | |||
color: var(--pet-accent-3); | |||
} | |||
/* tabela de refino */ | |||
.mw-parser-output table.pet-refine-table{ | |||
width:100%; | |||
border-collapse:collapse; | |||
margin: 10px 0 0; | |||
background: #100418; | |||
border: 1px solid color-mix(in srgb, var(--pet-soft-bd) 85%, #ffffff 4%); | |||
box-shadow: var(--pet-shadow); | |||
font-size: 13px; | |||
} | |||
.mw-parser-output .pet-refine-table th, | |||
.mw-parser-output .pet-refine-table td{ | |||
border: 1px solid color-mix(in srgb, var(--pet-soft-bd) 80%, #000000 20%); | |||
padding: .5em .6em; | |||
} | |||
.mw-parser-output .pet-refine-table th{ | |||
background: linear-gradient(180deg,#321c57,#221238); | |||
color: #f5f0ff; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-refine-table td{ | |||
color: var(--pet-text); | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-refine-table tr:nth-child(even) td{ | |||
background: rgba(180,107,255,.16); | |||
} | |||
/* ------------------------------------------------------- | |||
GRADE DE PET – “mini card VIP” roxo | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-grade{ | |||
position:relative; | |||
margin: 18px 0 12px; | |||
padding: 16px 16px 16px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient(140% 220% at 100% 0, rgba(180,107,255,.30), transparent 65%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 85%, #ffffff 5%); | |||
box-shadow: var(--pet-shadow-strong); | |||
} | |||
/* chip flutuando */ | |||
.mw-parser-output .pet-grade-chip{ | |||
position:absolute; | |||
top: -16px; | |||
left:50%; | |||
transform: translateX(-50%); | |||
padding: 6px 20px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 900; | |||
text-transform: uppercase; | |||
letter-spacing: .18em; | |||
color:#10071f; | |||
background: linear-gradient(180deg, | |||
#f7f2ff 0%, | |||
var(--pet-accent-1) 45%, | |||
var(--pet-accent-2) 100%); | |||
border:1px solid color-mix(in srgb, var(--pet-accent-1) 70%, #3a164c 30%); | |||
box-shadow: | |||
0 12px 26px rgba(66,30,140,.65), | |||
0 1px 0 rgba(255,255,255,.75) inset, | |||
0 -1px 0 rgba(45,16,90,.95) inset; | |||
} | |||
/* texto e lista dentro da grade */ | |||
.mw-parser-output .pet-grade p{ | |||
margin: 10px 0 6px; | |||
font-size: 13px; | |||
color: var(--pet-subtext); | |||
} | |||
.mw-parser-output .pet-grade-list{ | |||
margin: 6px 0 0; | |||
padding-left: 1.2em; | |||
font-size: 13px; | |||
} | |||
.mw-parser-output .pet-grade-list li{ | |||
margin: 4px 0; | |||
} | |||
.mw-parser-output .pet-grade-list li::marker{ | |||
color: var(--pet-accent-2); | |||
} | |||
/* ------------------------------------------------------- | |||
LISTA DE MASCOTES (card + tabela) | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-list.mw-collapsible{ | |||
max-width:1100px; | |||
margin: 10px auto 24px; | |||
padding: 12px 14px 14px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient(140% 220% at 100% 0, rgba(180,107,255,.30), transparent 65%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 85%, #ffffff 5%); | |||
box-shadow: var(--pet-shadow-strong); | |||
} | |||
/* toggle Expandir/Ocultar (mesmo tema neon) */ | |||
.mw-parser-output .pet-page .mw-collapsible-toggle{ | |||
float:none !important; | |||
display:flex !important; | |||
justify-content:center; | |||
margin:0 0 8px !important; | |||
} | |||
.mw-parser-output .pet-page .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .mw-collapsible-toggle a:visited{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:6px; | |||
padding:6px 18px; | |||
border-radius:999px; | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.35), | |||
transparent 60%), | |||
linear-gradient(180deg, | |||
var(--pet-accent-3), | |||
var(--pet-accent-2)); | |||
border:1px solid color-mix(in srgb, var(--pet-accent-3) 70%, #0b0612 30%); | |||
color:#050412 !important; | |||
font-weight:800; | |||
font-size:12px; | |||
text-transform:uppercase; | |||
letter-spacing:.16em; | |||
text-decoration:none !important; | |||
box-shadow: | |||
0 10px 24px rgba(3,0,30,.95), | |||
0 1px 0 rgba(255,255,255,.75) inset, | |||
0 -1px 0 rgba(12,30,45,.9) inset; | |||
} | |||
.mw-parser-output .pet-page .mw-collapsible-toggle a:hover{ | |||
filter:brightness(1.08); | |||
} | |||
/* tabela interna */ | |||
.mw-parser-output table.pet-list-table{ | |||
width:100%; | |||
border-collapse:collapse; | |||
background:#0f0317; | |||
border:1px solid color-mix(in srgb, var(--pet-soft-bd) 85%, #000000 10%); | |||
box-shadow:var(--pet-shadow); | |||
font-size:13px; | |||
} | |||
.mw-parser-output .pet-list-table th, | |||
.mw-parser-output .pet-list-table td{ | |||
border:1px solid color-mix(in srgb, var(--pet-soft-bd) 80%, #000000 20%); | |||
padding:.55em .7em; | |||
} | |||
.mw-parser-output .pet-list-table th{ | |||
background:linear-gradient(180deg,#341d58,#241139); | |||
color:#f5f0ff; | |||
font-weight:800; | |||
text-align:center; | |||
} | |||
.mw-parser-output .pet-list-table td{ | |||
color:var(--pet-text); | |||
} | |||
.mw-parser-output .pet-list-table tr:nth-child(even) td{ | |||
background:rgba(180,107,255,.16); | |||
} | |||
.mw-parser-output .pet-list-table td:nth-child(1){ | |||
text-align:center; | |||
} | |||
.mw-parser-output .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-list-table td:nth-child(3){ | |||
text-align:left; | |||
} | |||
/* links dentro da lista de mascotes */ | |||
.mw-parser-output .pet-list-table a, | |||
.mw-parser-output .pet-list-table a:visited{ | |||
color:var(--pet-accent-3); | |||
text-decoration:underline; | |||
} | |||
.mw-parser-output .pet-list-table a:hover{ | |||
color:var(--pet-accent-2); | |||
} | |||
/* sprites dos pets em pixel-art bonitinho */ | |||
.mw-parser-output .pet-list-table img.mw-file-element{ | |||
image-rendering: pixelated; | |||
vertical-align: middle; | |||
} | |||
/* ===== Pets – destaque do título principal ===== */ | |||
/* opcional: se tiver apagado os imports de fonte, pode usar esse de novo */ | |||
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap'); | |||
.mw-parser-output .pet-hero{ | |||
padding: 16px 20px 18px; /* um pouco mais de respiro */ | |||
} | |||
.mw-parser-output .pet-hero-title{ | |||
font-family: "Paytone One", system-ui, sans-serif; | |||
font-size: clamp(20px, 2.4vw, 28px); /* bem maior */ | |||
line-height: 1.1; | |||
margin: 2px 0 8px; | |||
text-transform: uppercase; | |||
letter-spacing: .18em; | |||
} | |||
/* subtítulo um pouco menor pra dar hierarquia */ | |||
.mw-parser-output .pet-hero-sub{ | |||
font-size: 14px; | |||
} | |||
/* ===== Pets – categorias centralizadas e mais compactas ===== */ | |||
/* Container das categorias: coluna única, centralizada */ | |||
.mw-parser-output .pet-cats{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; /* centraliza os cards */ | |||
gap: 18px; | |||
} | |||
/* Todos os blocos principais de Pets com a MESMA largura do pet-card */ | |||
.mw-parser-output .pet-page .pet-hero, | |||
.mw-parser-output .pet-page .pet-refine, | |||
.mw-parser-output .pet-page .pet-grade, | |||
.mw-parser-output .pet-page .pet-cats .pet-card, | |||
.mw-parser-output .pet-page .drops-inline.is-pet120, | |||
.mw-parser-output .pet-page .drops-inline.is-pet60, | |||
.mw-parser-output .pet-page .drops-inline.is-pet30, | |||
.mw-parser-output .pet-page .drops-inline.is-pet10{ | |||
width: min(720px, 100% - 32px); /* mesmo “tijolinho” pra tudo */ | |||
margin: 10px auto 18px; /* centralizado + respiro vertical */ | |||
box-sizing: border-box; | |||
} | |||
/* ======================================================= | |||
LISTA DE MASCOTES (PETS) – colapsáveis por categoria | |||
Usa drops-inline com badge + botão expandir/ocultar | |||
======================================================= */ | |||
.mw-parser-output .pet-page .drops-inline.mw-collapsible{ | |||
/* cartao base */ | |||
border-radius: 18px; | |||
border: 1px solid rgba(90,60,150,.9); | |||
background: | |||
radial-gradient(130% 220% at 100% 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(130% 220% at 0 100%, rgba(70,227,255,.20), transparent 60%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
box-shadow: | |||
0 22px 44px rgba(3,0,30,.95), | |||
0 0 0 1px rgba(15,4,40,.9) inset; | |||
padding: 10px 12px; | |||
margin: 10px auto 18px; | |||
max-width: 1100px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 12px; | |||
} | |||
/* badge "PETS 120%" gerado via data-badge */ | |||
.mw-parser-output .pet-page .drops-inline::before{ | |||
content: attr(data-badge); | |||
text-transform: uppercase; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: 150px; | |||
height: 30px; | |||
padding: 0 20px; | |||
border-radius: 999px; | |||
font: 900 13px/1 system-ui, sans-serif; | |||
letter-spacing: .18em; | |||
color: #0a0515; | |||
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1); | |||
box-shadow: | |||
0 12px 26px rgba(70,30,140,.7), | |||
0 1px 0 rgba(255,255,255,.8) inset, | |||
0 -1px 0 rgba(40,12,90,.95) inset; | |||
} | |||
/* variações de cor suave por categoria (opcional) */ | |||
.mw-parser-output .pet-page .drops-inline.is-pet120::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1); | |||
} | |||
.mw-parser-output .pet-page .drops-inline.is-pet60::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#9b8bff,#46e3ff); | |||
} | |||
.mw-parser-output .pet-page .drops-inline.is-pet30::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#c27bff,#ff9ae0); | |||
} | |||
.mw-parser-output .pet-page .drops-inline.is-pet10::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#8d7bff,#8df3ff); | |||
} | |||
/* Toggle Expandir/Ocultar centralizado e destacado */ | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle{ | |||
order: 2 !important; | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
margin: 0 !important; | |||
position: static !important; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:visited{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
height: 30px; | |||
padding: 0 16px; | |||
border-radius: 999px; | |||
font-weight: 800; | |||
font-size: 11px; | |||
letter-spacing: .18em; | |||
text-transform: uppercase; | |||
text-decoration: none !important; | |||
color: #050413 !important; | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.35), | |||
transparent 60%), | |||
linear-gradient(180deg,#46e3ff,#ff6fb1); | |||
border: 1px solid rgba(70,227,255,.9); | |||
box-shadow: | |||
0 10px 22px rgba(3,0,30,.95), | |||
0 1px 0 rgba(255,255,255,.75) inset, | |||
0 -1px 0 rgba(12,30,45,.9) inset; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.06); | |||
} | |||
/* conteúdo abre abaixo ocupando toda a largura do card */ | |||
.mw-parser-output .pet-page .drops-inline .mw-collapsible-content{ | |||
order: 10; | |||
flex-basis: 100%; | |||
width: 100% !important; | |||
margin-top: 10px; | |||
background: rgba(5,0,20,.65); | |||
border-radius: 14px; | |||
padding: 10px 10px 14px; | |||
} | |||
/* tabela interna reaproveita o tema roxo dos pets */ | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table{ | |||
width: 100%; | |||
border-collapse: collapse; | |||
linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%) | |||
border: 1px solid rgba(120,90,230,.22) | |||
box-shadow: 0 14px 34px rgba(35,12,70,.10) | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table th, | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td{ | |||
border: 1px solid rgba(90,60,150,.9); | |||
padding: .55em .7em; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table th{ | |||
background: linear-gradient(180deg,#341d58,#241139); | |||
color: #f5f0ff; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td{ | |||
color: #f7f1ff; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table tr:nth-child(even) td{ | |||
background: rgba(180,107,255,.16); | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(1){ | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(3){ | |||
text-align: left; | |||
} | |||
/* sprites dentro da lista */ | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table img.mw-file-element{ | |||
image-rendering: pixelated; | |||
vertical-align: middle; | |||
} | |||
/* Pets – centralizar texto das colunas Forma de Obtenção / Bônus */ | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(3){ | |||
text-align: center; /* centraliza horizontalmente */ | |||
} | |||
/* Pets – botão Expandir/Ocultar combinando com a badge */ | |||
.mw-parser-output .pet-page .drops-inline{ | |||
justify-content: center; | |||
gap: 10px; | |||
} | |||
/* botão do toggle */ | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle{ | |||
order: 2 !important; | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
margin: 0 !important; | |||
position: static !important; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:visited{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 4px 14px; | |||
border-radius: 999px; | |||
font-weight: 800; | |||
font-size: 11px; | |||
letter-spacing: .16em; | |||
text-transform: uppercase; | |||
text-decoration: none !important; | |||
color: #0a0515 !important; | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.35), | |||
transparent 60%), | |||
linear-gradient(180deg,#46e3ff,#ff6fb1); | |||
border: 1px solid rgba(70,227,255,.9); | |||
box-shadow: | |||
0 10px 22px rgba(3,0,30,.9), | |||
0 1px 0 rgba(255,255,255,.8) inset, | |||
0 -1px 0 rgba(12,30,45,.9) inset; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.08); | |||
} | |||
/* ======================================================= | |||
LISTA DE MASCOTES – cards colapsáveis próprios | |||
(não usa .drops-inline pra não brigar com o JS antigo) | |||
======================================================= */ | |||
.mw-parser-output .pet-page .pet-list-box{ | |||
max-width: 1100px; | |||
margin: 10px auto 18px; | |||
padding: 10px 12px 12px; | |||
border-radius: 18px; | |||
border: 1px solid rgba(90,60,150,.9); | |||
background: | |||
radial-gradient(130% 220% at 100% 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(130% 220% at 0 100%, rgba(70,227,255,.20), transparent 60%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
box-shadow: | |||
0 22px 44px rgba(3,0,30,.95), | |||
0 0 0 1px rgba(15,4,40,.9) inset; | |||
} | |||
/* Toggle padrão centralizado */ | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: flex !important; | |||
justify-content: center; | |||
margin: 0 0 6px !important; | |||
} | |||
/* Botão PETS 120% ▸ | 60% ▸ etc. */ | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a:visited{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 5px 22px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
font-size: 12px; | |||
letter-spacing: .22em; | |||
text-transform: uppercase; | |||
text-decoration: none !important; | |||
color: #0a0515 !important; | |||
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1); | |||
box-shadow: | |||
0 12px 26px rgba(70,30,140,.7), | |||
0 1px 0 rgba(255,255,255,.8) inset, | |||
0 -1px 0 rgba(40,12,90,.95) inset; | |||
border: 1px solid rgba(255,255,255,.35); | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.06); | |||
} | |||
/* variações suaves por categoria (gradiente diferente) */ | |||
.mw-parser-output .pet-page .pet-list-60 .mw-collapsible-toggle a{ | |||
background: linear-gradient(180deg,#f7f2ff,#9b8bff,#46e3ff); | |||
} | |||
.mw-parser-output .pet-page .pet-list-30 .mw-collapsible-toggle a{ | |||
background: linear-gradient(180deg,#f7f2ff,#c27bff,#ff9ae0); | |||
} | |||
.mw-parser-output .pet-page .pet-list-10 .mw-collapsible-toggle a{ | |||
background: linear-gradient(180deg,#f7f2ff,#8d7bff,#8df3ff); | |||
} | |||
/* Conteúdo aberto: mesma cara roxa dos outros blocos */ | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-content{ | |||
margin-top: 10px; | |||
padding: 10px 10px 14px; | |||
border-radius: 14px; | |||
background: rgba(5,0,20,.65); | |||
} | |||
/* Reaproveita a tabela que você já tem */ | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table{ | |||
width: 100%; | |||
border-collapse: collapse; | |||
background: #0f0317; | |||
border: 1px solid rgba(90,60,150,.9); | |||
box-shadow: 0 12px 28px rgba(3,0,30,.95); | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table th, | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td{ | |||
border: 1px solid rgba(90,60,150,.9); | |||
padding: .55em .7em; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table th{ | |||
background: linear-gradient(180deg,#341d58,#241139); | |||
color: #f5f0ff; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td{ | |||
color: #f7f1ff; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table tr:nth-child(even) td{ | |||
background: rgba(180,107,255,.16); | |||
} | |||
/* alinhamento bonitinho das colunas */ | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(1){ | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(3){ | |||
text-align: center; | |||
} | |||
/* sprites */ | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table img.mw-file-element{ | |||
image-rendering: pixelated; | |||
vertical-align: middle; | |||
} | |||
/* PETS – botão Expandir/Ocultar com mesma cor da badge */ | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 3px 14px !important; | |||
margin: 4px 0 6px !important; | |||
border-radius: 999px !important; | |||
font-weight: 700 !important; | |||
font-size: 11px !important; | |||
letter-spacing: .12em !important; | |||
text-transform: uppercase !important; | |||
background: #c8b0ff !important; /* mesmo roxo da badge */ | |||
color: #160f2a !important; /* texto roxo bem escuro */ | |||
border: 1px solid #a489f0 !important; /* mesma borda da badge */ | |||
box-shadow: 0 2px 6px rgba(0,0,0,.28) !important; | |||
} | |||
/* link herda cor e tira sublinhado */ | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle a, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle a, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle a, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle a{ | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
/* hover só um tiquinho mais claro */ | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle:hover, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle:hover, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle:hover, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle:hover{ | |||
filter: brightness(1.04); | |||
} | |||
/* PETS – badge roxa com um pouco mais de destaque */ | |||
body .mw-parser-output .drops-inline.is-pet120::before, | |||
body .mw-parser-output .drops-inline.is-pet60::before, | |||
body .mw-parser-output .drops-inline.is-pet30::before, | |||
body .mw-parser-output .drops-inline.is-pet10::before{ | |||
/* roxo escuro com gradiente bem suave */ | |||
background: radial-gradient(120% 160% at 50% 0%, | |||
#443074 0%, #2a1846 55%, #1c102f 100%) !important; | |||
color: #ffffff !important; | |||
/* borda um pouco mais clara pra “descolar” do fundo */ | |||
border: 1px solid #8a74d0 !important; | |||
/* halo sutil + sombra */ | |||
box-shadow: | |||
0 0 0 1px rgba(255,255,255,.05) inset, | |||
0 4px 10px rgba(0,0,0,.55) !important; | |||
text-transform: uppercase; | |||
letter-spacing: .12em; | |||
font-weight: 800; | |||
text-shadow: 0 1px 0 rgba(0,0,0,.6); /* leitura melhor */ | |||
} | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-content, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-content, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-content, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-content{ | |||
background: #c8b0ff !important; | |||
border-radius: 14px !important; | |||
padding: 8px 10px 10px !important; /* borda roxa clara aparecendo nos cantos */ | |||
} | |||
/******************************* | |||
* TEMA ROXO-ESCURO – BASE MVP * | |||
*******************************/ | |||
:root{ | |||
--rt-bg-main: #120e22; | |||
--rt-bg-card: #1c122f; | |||
--rt-border: #3a285a; | |||
--rt-text-main: #f5f3ff; | |||
--rt-text-soft: #c9c3e6; | |||
--rt-radius-card:16px; | |||
--rt-shadow-soft:0 10px 26px rgba(0,0,0,.55); | |||
} | |||
/* containers principais da página */ | |||
.mw-parser-output .rt-section, | |||
.mw-parser-output .mvp-hero, | |||
.mw-parser-output .mvp-func, | |||
.mw-parser-output .mvp-ranking, | |||
.mw-parser-output .mvp-shop{ | |||
max-width: 1100px; | |||
margin: 10px auto 24px; | |||
padding: 12px 16px 16px; | |||
border-radius: var(--rt-radius-card); | |||
background: | |||
radial-gradient(160% 200% at 0% 0%, #271247 0%, transparent 55%), | |||
radial-gradient(140% 180% at 100% 100%, #151b3b 0%, transparent 55%), | |||
#120e22; | |||
border: 1px solid #2f204b; | |||
box-shadow: var(--rt-shadow-soft); | |||
color: var(--rt-text-main); | |||
box-sizing: border-box; | |||
} | |||
/* título padrão das seções */ | |||
.mw-parser-output .rt-title{ | |||
margin: 2px 0 10px; | |||
font-family: "Paytone One", system-ui, sans-serif; | |||
font-size: 22px; | |||
letter-spacing: .16em; | |||
text-transform: uppercase; | |||
color: #ffffff; | |||
text-shadow: 0 2px 8px rgba(0,0,0,.6); | |||
} | |||
/* subtítulo/label embaixo do texto introdutório */ | |||
.mw-parser-output .rt-subtag{ | |||
display: inline-block; | |||
margin-top: 8px; | |||
padding: 4px 12px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
letter-spacing: .1em; | |||
text-transform: uppercase; | |||
background: rgba(200,176,255,.12); | |||
border: 1px solid rgba(200,176,255,.5); | |||
color: var(--rt-text-soft); | |||
} | |||
/* texto dentro das seções */ | |||
.mw-parser-output .mvp-hero p, | |||
.mw-parser-output .mvp-func p, | |||
.mw-parser-output .mvp-ranking p, | |||
.mw-parser-output .mvp-shop p{ | |||
margin: 6px 0 8px; | |||
color: var(--rt-text-soft); | |||
} | |||
/************************ | |||
* CARDS – FUNCIONAMENTO * | |||
************************/ | |||
.mw-parser-output .rt-card-grid{ | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); | |||
gap: 14px; | |||
margin-top: 8px; | |||
} | |||
.mw-parser-output .rt-card{ | |||
background: linear-gradient(135deg,#201235,#16162d); | |||
border-radius: 12px; | |||
border: 1px solid var(--rt-border); | |||
box-shadow: 0 6px 18px rgba(0,0,0,.55); | |||
padding: 10px 12px 12px; | |||
color: var(--rt-text-main); | |||
} | |||
.mw-parser-output .rt-card-title{ | |||
font-weight: 800; | |||
letter-spacing: .12em; | |||
text-transform: uppercase; | |||
margin: 2px 0 8px; | |||
} | |||
/* key–value dentro dos cards */ | |||
.mw-parser-output .rt-kv{ | |||
display: grid; | |||
grid-template-columns: 150px 1fr; | |||
gap: 4px 10px; | |||
} | |||
.mw-parser-output .rt-kv .k{ | |||
color: var(--rt-text-soft); | |||
} | |||
.mw-parser-output .rt-kv .v{ | |||
font-weight: 700; | |||
} | |||
/********************* | |||
* TABELAS – RANK/LOJA | |||
*********************/ | |||
.mw-parser-output table.rt-table{ | |||
width: 100%; | |||
border-collapse: collapse; | |||
margin: 10px 0 4px; | |||
background: var(--rt-bg-card); | |||
color: var(--rt-text-main); | |||
box-shadow: var(--rt-shadow-soft); | |||
} | |||
.mw-parser-output table.rt-table th, | |||
.mw-parser-output table.rt-table td{ | |||
border: 1px solid #372454; | |||
padding: .55em .7em; | |||
} | |||
.mw-parser-output table.rt-table th{ | |||
background: linear-gradient(180deg,#26163f,#1c122f); | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output table.rt-table tr:nth-child(even) td{ | |||
background-color: #181028; | |||
} | |||
/* colunas específicas podem ser centralizadas se quiser */ | |||
.mw-parser-output .mvp-ranking-table td:nth-child(1), | |||
.mw-parser-output .mvp-ranking-table td:nth-child(3){ | |||
text-align: center; | |||
} | |||
.mw-parser-output .mvp-shop-table td:nth-child(3){ | |||
text-align: center; | |||
} | |||
/* bullets e listas dentro das seções */ | |||
.mw-parser-output .mvp-func ul, | |||
.mw-parser-output .mvp-ranking ul, | |||
.mw-parser-output .mvp-shop ul{ | |||
margin: 8px 0 4px 18px; | |||
color: var(--rt-text-soft); | |||
} | |||
.ev-wrap .ev-h{ | |||
line-height: 1.25; /* ou só: line-height: normal; */ | |||
margin: 0 0 6px; | |||
} | |||
/* Éden ocupando toda a largura disponível do conteúdo */ | |||
.mw-parser-output .eden-page.ev-wrap{ | |||
max-width: none; /* remove o limite de 980px */ | |||
width: 100%; | width: 100%; | ||
} | } | ||
. | /* ===== LOJAS – CARDS GERAIS (Turn In / Quests) v2 ===== */ | ||
.eden-page .loja-card { | |||
border-radius: 14px; | |||
border: 1px solid #d2c5ff; | |||
background: #ede3ff; | |||
/* roxinho bem suave preenchendo o bloco todo */ | |||
box-shadow: 0 4px 10px rgba(44, 25, 101, 0.08); | |||
overflow: hidden; | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
padding: 10px 12px 12px; | |||
} | |||
/* Título do card */ | |||
.eden-page .loja-card-title { | |||
margin: -6px -8px 8px; /* “encaixa” o título no topo do card */ | |||
padding: 6px 10px; | |||
text-align: center; | |||
font-weight: 700; | |||
font-size: 14px; | |||
color: #4a2cc5; | |||
background: #e7ddff; | |||
border-bottom: 1px solid #d8cdff; | |||
} | |||
/* Colapsível dentro do card */ | |||
.eden-page .loja-card .mw-collapsible { | |||
margin: 0 !important; | |||
text-align: center; | |||
} | |||
/* Botão Mostrar/Ocultar dos cards */ | |||
.eden-page .loja-card .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 4px; | |||
margin: 4px auto 10px !important; | |||
padding: 4px 12px !important; | |||
background: #ffffff !important; | |||
border-radius: 999px !important; | |||
border: 1px solid #e0d8ff !important; | |||
font-size: 12px; | |||
font-weight: 600; | |||
color: #5e3cd9 !important; | |||
cursor: pointer; | |||
} | |||
.eden-page .loja-card .mw-collapsible-content { | |||
padding: 4px 0 4px !important; | |||
} | |||
/* Garantir que a tabela fique bem centralizada dentro do card */ | |||
.eden-page .loja-card .mw-collapsible-content .wikitable { | |||
margin: 0 auto; | |||
background: #ffffff; | |||
} | |||
/* RESET – conteúdo do colapsível volta a ocupar a largura toda */ | |||
.eden-page .loja-card .mw-collapsible-content { | |||
display: block; | |||
padding: 8px 0 !important; | |||
text-align: center; | |||
background: transparent; /* nada de roxo aqui */ | |||
box-shadow: none; | |||
} | |||
/* “cartão” roxo em volta da tabela da loja */ | |||
.eden-page .loja-card .mw-collapsible-content > .wikitable { | |||
width: 70% !important; /* mantém o que você já usava */ | |||
margin: 0 auto !important; | |||
background: #f3ecff; /* roxo bem clarinho interno */ | |||
border-radius: 16px; | |||
border: 1px solid #d8cdff; | |||
box-shadow: 0 4px 12px rgba(44, 25, 101, 0.15); | |||
overflow: hidden; /* arredonda os cantos certinho */ | |||
} | |||
/* cabeçalho da tabela */ | |||
.eden-page .loja-card .wikitable > * > tr:first-child > th { | |||
background: #ece7ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
} | |||
/* linhas normais da tabela */ | |||
.eden-page .loja-card .wikitable td { | |||
background: #ffffff; | |||
} | |||
/* Fundo da caixa da loja (um pouco mais escuro que #f8f3ff) */ | |||
.eden-page .loja-card { | |||
background: #f1e7ff !important; /* lilás um pouco mais forte */ | |||
box-shadow: 0 10px 25px rgba(90, 65, 180, 0.18); | |||
} | |||
/* Tabela dentro da caixa segue o mesmo fundo */ | |||
.eden-page .loja-card .wikitable { | |||
border-color: #decfff !important; | |||
background: #f1e7ff !important; | |||
} | |||
.eden-page .loja-card .wikitable th, | |||
.eden-page .loja-card .wikitable td { | |||
background: #f1e7ff !important; /* tira o branco */ | |||
border-color: #decfff !important; | |||
} | |||
/* Garante que nenhuma zebra antiga fique ativa */ | |||
.eden-page .loja-card .wikitable tr:nth-child(odd) td, | |||
.eden-page .loja-card .wikitable tr:nth-child(even) td { | |||
background: #f8f3ff !important; | |||
} | |||
/* ===== MAPAS TURN IN – BOTÃO COLAPSÁVEL (Tema Claro) ===== */ | |||
.eden-page .turnin-colapso { | |||
margin-top: 8px; | |||
margin-bottom: 16px; | |||
text-align: center; | |||
} | |||
/* Botão "Mostrar ▸ / Ocultar ▾" dos Mapas */ | |||
.eden-page .turnin-colapso .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 4px; | |||
margin: 6px auto 10px !important; | |||
padding: 4px 14px !important; | |||
background: #ffffff !important; | |||
border-radius: 999px !important; | |||
border: 1px solid #e0d8ff !important; | |||
font-size: 12px; | |||
font-weight: 600; | |||
color: #5e3cd9 !important; | |||
box-shadow: 0 4px 10px rgba(90, 65, 180, 0.18); | |||
cursor: pointer; | |||
} | |||
/* texto "Mostrar ▸" / "Ocultar ▾" */ | |||
.eden-page .turnin-colapso .mw-collapsible-text { | |||
color: inherit; | |||
} | |||
/* área interna do colapsável dos Mapas */ | |||
.eden-page .turnin-colapso .mw-collapsible-content { | |||
padding: 8px 0 4px !important; | |||
text-align: center; | |||
} | |||
/* Caixa da tabela dos Mapas no tema claro */ | |||
.eden-page .turnin-tabela { | |||
background: #f1e7ff !important; /* mesmo lilás da loja */ | |||
border-radius: 16px; | |||
border: 1px solid #decfff !important; | |||
box-shadow: 0 10px 25px rgba(90, 65, 180, 0.18); | |||
overflow: hidden; | |||
} | |||
/* cabeçalho */ | |||
.eden-page .turnin-tabela > * > tr:first-child > th { | |||
background: #ece7ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
} | |||
/* células normais */ | |||
.eden-page .turnin-tabela td { | |||
background: #f8f3ff; | |||
border-color: #decfff !important; | |||
} | |||
/* Botão Mostrar/Ocultar dos Mapas – versão mais "natural" */ | |||
.eden-page .turnin-colapso .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
margin: 6px auto 10px !important; | |||
padding: 4px 14px !important; | |||
background: #ffffff !important; | |||
border-radius: 999px !important; | |||
border: 1px solid #e0d8ff !important; | |||
font-size: 12px; | |||
font-weight: 600; | |||
font-style: normal; | |||
color: #5e3cd9 !important; | |||
box-shadow: 0 4px 10px rgba(90, 65, 180, 0.12); | |||
cursor: pointer; | |||
} | |||
/* Remove o “quadradinho” interno e qualquer borda extra */ | |||
.eden-page .turnin-colapso .mw-collapsible-toggle span, | |||
.eden-page .turnin-colapso .mw-collapsible-toggle a { | |||
display: inline; /* nada de bloco grandão */ | |||
background: transparent !important; | |||
border: 0 !important; | |||
padding: 0 !important; | |||
box-shadow: none !important; | |||
color: inherit !important; | |||
} | |||
/* ===== MAPAS TURN IN – COLAPSÍVEL (Tema Claro) ===== */ | |||
/* Contêiner do colapsível */ | |||
.eden-page .turnin-mapas { | |||
margin: 10px auto 18px !important; | |||
text-align: center; | |||
} | |||
/* Botão Mostrar/Ocultar */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle { | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 6px 18px !important; | |||
margin: 6px auto 12px !important; | |||
border-radius: 999px; | |||
border: 1px solid #decfff; | |||
background: #f5f0ff; | |||
box-shadow: 0 6px 18px rgba(90, 65, 180, 0.22); | |||
font-size: 13px; | |||
font-weight: 600; | |||
color: #4a2cc5; | |||
cursor: pointer; | |||
} | |||
/* Remove cara de “botão quadrado” de dentro */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle span, | |||
.eden-page .turnin-mapas .mw-collapsible-toggle a { | |||
display: inline-block; | |||
padding: 0; | |||
border: 0 !important; | |||
background: transparent !important; | |||
} | |||
/* Área interna do colapsível */ | |||
.eden-page .turnin-mapas .mw-collapsible-content { | |||
padding: 4px 0 10px !important; | |||
} | |||
/* Tabela de mapas – centralizada e com cara de card */ | |||
.eden-page .turnin-tabela { | |||
width: 100% !important; | |||
max-width: 1100px; | |||
margin: 0 auto 8px !important; | |||
border-collapse: collapse; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
overflow: hidden; | |||
box-shadow: 0 10px 28px rgba(90, 65, 180, 0.2); | |||
} | |||
/* Cabeçalho */ | |||
.eden-page .turnin-tabela > * > tr:first-child > th { | |||
background: #ece3ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
} | |||
/* Células */ | |||
.eden-page .turnin-tabela th, | |||
.eden-page .turnin-tabela td { | |||
border: 1px solid #e0d5ff; | |||
background: #f8f3ff; | |||
} | |||
/* Tira qualquer zebra antiga */ | |||
.eden-page .turnin-tabela tr:nth-child(odd) td, | |||
.eden-page .turnin-tabela tr:nth-child(even) td { | |||
background: #f8f3ff; | |||
} | |||
/* ----- Botão "Mostrar/Ocultar" dos mapas – limpa o retângulo interno ----- */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle-default, | |||
.eden-page .turnin-mapas .mw-collapsible-text, | |||
.eden-page .turnin-mapas .mw-collapsible-toggle span, | |||
.eden-page .turnin-mapas .mw-collapsible-toggle a { | |||
border: 0 !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
padding: 0 !important; | |||
} | |||
/* Coluna "Nível" sempre centralizada na tabela de mapas */ | |||
.eden-page .turnin-tabela th:nth-child(2), | |||
.eden-page .turnin-tabela td:nth-child(2) { | |||
text-align: center !important; | |||
vertical-align: middle !important; | |||
} | |||
/* Container do colapsível dos mapas */ | |||
.eden-page .turnin-mapas { | |||
text-align: center; | |||
margin: 18px 0 10px; | |||
position: relative; | |||
} | |||
/* Cápsula que junta badge + "Mostrar" */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | align-items: center; | ||
gap: 8px; | |||
padding: 6px 16px; | |||
border-radius: 999px; | |||
background: #f5edff; | |||
border: 1px solid #e1d5ff; | |||
box-shadow: 0 8px 18px rgba(90, 65, 180, 0.22); | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
. | /* Badge à esquerda dentro da cápsula */ | ||
height: 2. | .eden-page .turnin-mapas .mw-collapsible-toggle::before { | ||
padding: 0 | content: "MAPAS TURN IN"; | ||
font-size: | padding: 5px 12px; | ||
background: #fff; | border-radius: 999px; | ||
border-radius: 8px; | background: #ffffff; | ||
justify-content: | border: 1px solid #decfff; | ||
box-shadow: 0 10px | font-size: 11px; | ||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.06em; | |||
color: #5e3cd9; | |||
} | |||
/* Texto [Mostrar ▸] */ | |||
.eden-page .turnin-mapas .mw-collapsible-text { | |||
font-weight: 400; | |||
color: #4c28c9; | |||
text-decoration: none; | |||
} | |||
/* CARD VIP – Pacote Iniciante */ | |||
.pack-simple.pack-vip { | |||
position: relative; | |||
max-width: 480px; | |||
margin: 24px auto 32px; /* centraliza o card */ | |||
padding: 18px 20px 16px; | |||
border-radius: 20px; | |||
background: linear-gradient(145deg, #fdfbff, #f3ecff); | |||
border: 1px solid #e0d6ff; | |||
box-shadow: 0 18px 40px rgba(80, 45, 170, 0.24); | |||
text-align: left; /* pra alinhar o início dos itens */ | |||
} | |||
/* Micro badge VIP – versão roxo-escuro (tema padrão) */ | |||
.pack-simple.pack-vip::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -10px; | |||
left: 20px; | |||
padding: 2px 10px; | |||
font-size: 10px; | |||
font-weight: 700; | |||
letter-spacing: 0.03em; | |||
text-transform: uppercase; | |||
border-radius: 999px; | |||
background: linear-gradient(135deg, #3a237f, #5b3ad1); /* roxo escuro -> roxo médio */ | |||
color: #ffffff; | |||
box-shadow: 0 4px 10px rgba(40, 20, 90, 0.55); | |||
} | |||
/* Título do card */ | |||
.pack-simple .pack-title { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
font-weight: 800; | |||
font-size: 16px; | |||
color: #4423c0; | |||
padding-bottom: 10px; | |||
margin-bottom: 10px; | |||
border-bottom: 1px solid #e3dafd; | |||
} | |||
/* Lista interna */ | |||
.pack-simple .pack-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* Cada linha do item – alinhadas à esquerda */ | |||
.pack-simple .pack-row { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; /* começa tudo no mesmo ponto */ | |||
gap: 10px; | |||
padding: 6px 4px; | |||
border-bottom: 1px solid #ece4ff; | |||
} | |||
/* Última linha sem borda */ | |||
.pack-simple .pack-row:last-child { | |||
border-bottom: none; | |||
} | |||
/* Ícone – largura fixa pra alinhar os textos */ | |||
.pack-simple .pack-ico { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: 28px; | |||
max-width: 28px; | |||
flex: 0 0 28px; /* trava o espaço do ícone */ | |||
} | |||
/* Nome do item */ | |||
.pack-simple .pack-name { | |||
font-size: 13px; | |||
font-weight: 500; | |||
color: #3c2a88; | |||
flex: 1; | |||
} | |||
/* Hover leve */ | |||
.pack-simple .pack-row:hover { | |||
background: #f1e9ff; | |||
} | |||
/* GRID DOS CARDS COM WIKITABLE */ | |||
.eden-page .eden-quests-table-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 16px; | |||
margin: 8px 0 4px; | |||
} | |||
/* CAIXA ROXINHA EM VOLTA DA WIKITABLE */ | |||
.eden-page .eden-quest-box { | |||
position: relative; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
border: 1px solid #decfff; | |||
padding: 18px 18px 14px; | |||
box-shadow: 0 10px 24px rgba(94, 60, 217, 0.14); | |||
} | |||
/* WIKITABLE DENTRO DO CARD */ | |||
.eden-page .eden-quest-table { | |||
width: 100% !important; | |||
margin: 0 !important; | |||
border-collapse: collapse; | |||
background: transparent; | |||
border-color: #decfff; | |||
} | |||
.eden-page .eden-quest-table th, | |||
.eden-page .eden-quest-table td { | |||
padding: 6px 10px; | |||
border: 1px solid #decfff; | |||
vertical-align: middle; | |||
} | |||
/* cabeçalho da tabela */ | |||
.eden-page .eden-quest-table th { | |||
background: #ece4ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
text-align: center; | |||
} | |||
/* células normais */ | |||
.eden-page .eden-quest-table td { | |||
background: #fdfbff; | |||
} | |||
/* Badge roxo escuro reaproveitado */ | |||
.eden-page .entry-tag { | |||
position: relative; | |||
overflow: visible; | |||
} | |||
.eden-page .entry-tag::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -14px; | |||
left: 24px; | |||
padding: 4px 14px; | |||
border-radius: 999px; | |||
background: linear-gradient(90deg, #5a2fd6, #8e4fff); | |||
color: #ffffff; | |||
font-size: 11px; | |||
font-weight: 700; | |||
letter-spacing: 0.05em; | |||
text-transform: uppercase; | |||
box-shadow: 0 6px 16px rgba(82, 47, 176, 0.45); | |||
white-space: nowrap; | |||
} | |||
/* GRID dos cards – deixa cada um com sua altura natural */ | |||
.eden-page .eden-quests-table-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 16px; | |||
margin: 8px 0 4px; | |||
align-items: flex-start; /* não esticar demais os cards vazios */ | |||
} | |||
/* Card das quests */ | |||
.eden-page .eden-quest-box { | |||
position: relative; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
border: 1px solid #decfff; | |||
padding: 18px 18px 14px; | |||
box-shadow: 0 10px 24px rgba(94, 60, 217, 0.14); | |||
} | |||
/* Tabela dentro do card */ | |||
.eden-page .eden-quest-table { | |||
width: 100% !important; | |||
margin: 0 auto !important; | |||
border-collapse: collapse; | |||
background: transparent; | |||
border-color: #decfff; | |||
} | |||
/* Cabeçalho já estava ok, mantemos */ | |||
.eden-page .eden-quest-table th { | |||
background: #ece4ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
text-align: center; | |||
padding: 6px 10px; | |||
} | |||
/* AQUI vem o principal: centralizar conteúdo das células */ | |||
.eden-page .eden-quest-table td { | |||
padding: 8px 10px; | |||
border: 1px solid #decfff; | |||
background: #fdfbff; | |||
text-align: center; /* deixa igual ao primeiro card */ | |||
vertical-align: middle; /* centraliza na altura da linha */ | |||
} | |||
/* Badge genérico do card de quest */ | |||
.eden-page .eden-quest-box::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -14px; | |||
left: 26px; | |||
padding: 4px 14px; | |||
font-size: 11px; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
font-weight: 700; | |||
color: #ffffff; | |||
border-radius: 999px; | |||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20); | |||
white-space: nowrap; | |||
} | |||
/* 70+ – ciano */ | |||
.eden-page .eden-quest-box.is-70::before { | |||
background: #12c5e9; /* ciano */ | |||
} | |||
/* 150+ – azul escuro */ | |||
.eden-page .eden-quest-box.is-150::before { | |||
background: #2834b5; /* azul escuro */ | |||
} | |||
/* 200+ – vermelho */ | |||
.eden-page .eden-quest-box.is-200::before { | |||
background: #e34040; /* vermelho */ | |||
} | |||
/* CARD GENÉRICO DE QUESTS (mesmo “bloco” das quests 70+/150+/200+) */ | |||
.eden-page .eden-quests-card { | |||
position: relative; | |||
margin: 16px auto 32px; | |||
padding: 22px 24px 18px; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
border: 1px solid #e0d4ff; | |||
box-shadow: 0 14px 30px rgba(86, 62, 200, 0.22); | |||
} | |||
/* LABEL / BADGE DO CARD */ | |||
.eden-page .eden-quests-card .eden-quests-label { | |||
position: absolute; | |||
top: -14px; | |||
left: 24px; | |||
display: inline-flex; | |||
align-items: center; | |||
padding: 4px 16px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
letter-spacing: 0.08em; | |||
text-transform: uppercase; | |||
background: #5b3fd9; /* roxo escuro */ | |||
color: #ffffff; | |||
box-shadow: 0 12px 26px rgba(91, 63, 217, 0.45); | |||
} | |||
/* TABELA DENTRO DO CARD – segue o tema claro */ | |||
.eden-page .eden-quests-table { | |||
border-collapse: collapse; | |||
width: 100%; | |||
background: #f8f3ff; | |||
} | |||
.eden-page .eden-quests-table th, | |||
.eden-page .eden-quests-table td { | |||
border: 1px solid #e0d4ff; | |||
padding: 8px 12px; | |||
} | |||
.eden-page .eden-quests-table th { | |||
background: #ebddff; | |||
color: #3f2a94; | |||
font-weight: 700; | |||
} | |||
.eden-page .eden-quests-table td { | |||
background: #f9f4ff; | |||
} | |||
/* tira zebras antigas, se tiver */ | |||
.eden-page .eden-quests-table tr:nth-child(even) td, | |||
.eden-page .eden-quests-table tr:nth-child(odd) td { | |||
background: #f9f4ff; | |||
} | |||
/* Centralizar conteúdo da tabela de Desafios Diários */ | |||
.eden-page .eden-quests-table td { | |||
background: #f9f4ff; | |||
border: 1px solid #e0d4ff; | |||
padding: 10px 12px; | |||
text-align: center; /* centraliza horizontal */ | |||
vertical-align: middle; /* centraliza vertical */ | |||
} | |||
/* Badge do colapsível de Desafios Diários */ | |||
.eden-page .drops-inline.is-daily::before { | |||
background: linear-gradient(90deg, #b85bff, #6b3bff); | |||
} | |||
/* CARD DE DESAFIOS – AJUSTE GERAL */ | |||
.eden-quests-card.is-daily { | |||
background: #f8f1ff; /* roxo bem clarinho */ | |||
border-radius: 20px; | |||
box-shadow: 0 10px 30px rgba(132, 98, 255, 0.18); | |||
padding: 10px 14px 16px; | |||
} | |||
/* TABELA DENTRO DO CARD */ | |||
.eden-quests-card.is-daily .eden-quests-table { | |||
border-collapse: collapse; | |||
width: 100%; | |||
background: transparent; | |||
} | |||
/* CABEÇALHO */ | |||
.eden-quests-card.is-daily .eden-quests-table th { | |||
background: #ebddff; /* faixa lilás do topo */ | |||
color: #4a2b9e; | |||
border-color: #e2d5ff; | |||
padding: 8px 12px; | |||
} | |||
/* CÉLULAS */ | |||
.eden-quests-card.is-daily .eden-quests-table td { | |||
border-color: #f0e6ff; | |||
padding: 10px 14px; | |||
background: #fbf7ff; /* fundo base */ | |||
} | |||
/* ZEBRADO SUAVE NAS LINHAS */ | |||
.eden-quests-card.is-daily .eden-quests-table tr:nth-child(even) td { | |||
background: #f5edff; | |||
} | |||
/* EFEITO LEVE AO PASSAR O MOUSE */ | |||
.eden-quests-card.is-daily .eden-quests-table tr:hover td { | |||
background: #efe4ff; | |||
} | |||
/* Linhas mais marcadas entre as quests */ | |||
.eden-quests-card.is-daily .eden-quests-table td, | |||
.eden-quests-card.is-daily .eden-quests-table th { | |||
border-color: #d5c2ff !important; /* mais escuro que #f0e6ff */ | |||
} | |||
/* Reforça a linha que separa uma quest da outra */ | |||
.eden-quests-card.is-daily .eden-quests-table tr + tr td { | |||
border-top: 1px solid #c9b2ff !important; | |||
} | |||
/* Badge roxo-escuro para colapsíveis de Lista de MVPs */ | |||
.drops-inline.is-mvp::before { | |||
background: linear-gradient(120deg, #b45dff, #6c32ff); | |||
color: #fff; | |||
box-shadow: 0 10px 26px rgba(88, 41, 178, 0.45); | |||
} | |||
/* opcional: deixar o fundo da barra mais clarinho pra combinar */ | |||
.drops-inline.is-mvp { | |||
background: #f7f1ff; | |||
} | |||
/* Container do texto introdutório – agora em formato de card */ | |||
.vip-intro { | |||
max-width: 1100px; /* mesma “largura visual” do card de baixo */ | |||
margin: 8px auto 32px; /* centralizado */ | |||
padding: 18px 32px 22px; | |||
border-radius: 26px; | |||
background: linear-gradient(180deg, #2a0d55 0%, #130322 100%); | |||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); | |||
border: 1px solid rgba(255, 160, 255, 0.18); | |||
position: relative; | |||
color: #fdf7ff; | |||
} | |||
/* linha de brilho em cima pra imitar a borda do painel */ | |||
.vip-intro::before { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
border-radius: inherit; | |||
border-top: 2px solid rgba(255, 210, 255, 0.45); | |||
pointer-events: none; | |||
} | |||
/* “pílula” no topo, combinando com VANTAGENS VIP */ | |||
.vip-intro-chip { | |||
position: absolute; | |||
top: -16px; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
padding: 6px 22px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.09em; | |||
color: #3c163e; | |||
background: linear-gradient(90deg, #ffb949 0%, #ff9331 100%); | |||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6); | |||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); | |||
} | |||
/* Texto interno */ | |||
.vip-intro p { | |||
margin: 4px 0 0; | |||
font-size: 13px; | |||
line-height: 1.7; | |||
} | |||
/* Destaques dentro do texto */ | |||
.vip-intro b { | |||
color: #ffe8ff; | |||
} | |||
/* Card de introdução de Rates / Temporada */ | |||
.rt-intro { | |||
max-width: 1100px; | |||
margin: 16px auto 32px; | |||
padding: 18px 22px 22px; | |||
border-radius: 22px; | |||
background: radial-gradient(circle at 0 0, #8f5bff 0, #2a164f 55%, #140826 100%); | |||
box-shadow: 0 16px 40px rgba(8, 0, 40, 0.55); | |||
color: #f7f4ff; | |||
position: relative; | |||
font-size: 0.9rem; | |||
line-height: 1.6; | |||
} | |||
/* Badge flutuando no topo */ | |||
.rt-intro-badge { | |||
position: absolute; | |||
top: -18px; | |||
left: 28px; | |||
padding: 6px 18px; | |||
border-radius: 999px; | |||
font-size: 0.78rem; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
font-weight: 700; | |||
background: linear-gradient(90deg, #ffb347, #ff7a3c); | |||
color: #351c3f; | |||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); | |||
} | |||
/* Corpo do texto */ | |||
.rt-intro-body p { | |||
margin: 6px 0 10px; | |||
} | |||
.rt-intro-body b { | |||
color: #ffe9ff; | |||
} | |||
/* Parágrafo de aviso */ | |||
.rt-intro-warning { | |||
margin-top: 14px; | |||
padding: 10px 12px; | |||
border-radius: 14px; | |||
background: rgba(10, 2, 30, 0.65); | |||
border: 1px solid rgba(255, 204, 120, 0.4); | |||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); | |||
} | |||
/* Pílula "Importante" dentro do aviso */ | |||
.rt-intro-warning .rt-pill { | |||
display: inline-block; | |||
margin-right: 8px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 0.72rem; | |||
text-transform: uppercase; | |||
letter-spacing: .08em; | |||
background: rgba(255, 204, 120, 0.18); | |||
border: 1px solid rgba(255, 204, 120, 0.8); | |||
color: #ffe1a6; | |||
} | |||
/* ===== GRID DE GUIAS IMPORTANTES – CONTAINER ===== */ | |||
.home-guides-surface { | |||
max-width: 1200px; | |||
margin: 10px auto 40px; | |||
padding: 26px 30px 30px; | |||
border-radius: 24px; | |||
background: | |||
radial-gradient(circle at 0 0, #fff7ff 0, #f7f1ff 40%, #f3ecff 100%); | |||
border: 1px solid rgba(177, 150, 255, 0.35); | |||
box-shadow: 0 18px 38px rgba(120, 90, 255, 0.18); | |||
} | |||
/* Grid de 4 colunas, bem espaçado */ | |||
.home-guides-surface .home-guides-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 18px 40px; | |||
} | |||
/* Título de cada coluna */ | |||
.home-guides-surface .col-title { | |||
font-family: "Lilita One", system-ui, -apple-system, BlinkMacSystemFont; | |||
font-size: 16px; | |||
margin-bottom: 10px; | |||
color: #5a34a5; | |||
} | |||
/* Ajuste fino na lista para casar com o fundo novo */ | |||
.home-guides-surface .home-list { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* Mantém o estilo de linha clicável já existente, só suaviza o espaçamento */ | |||
.home-guides-surface .home-list li { | |||
margin: 3px 0; | |||
} | |||
/* RESPONSIVO: quebra para 2 colunas e depois 1 */ | |||
@media (max-width: 1024px) { | |||
.home-guides-surface { | |||
padding: 22px 20px 26px; | |||
} | |||
.home-guides-surface .home-guides-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 16px 24px; | |||
} | |||
} | |||
@media (max-width: 700px) { | |||
.home-guides-surface .home-guides-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
/* ===== BLOCO DE DESTAQUES (TOPO) ===== */ | |||
.rt-featured { | |||
position: relative; | |||
max-width: 1150px; | |||
margin: 32px auto 24px; | |||
padding: 32px 32px 28px; | |||
border-radius: 26px; | |||
background: linear-gradient(135deg, #f7f1ff 0%, #f9f5ff 40%, #f6f0ff 100%); | |||
box-shadow: 0 18px 35px rgba(98, 63, 194, 0.16); | |||
border: 1px solid rgba(140, 92, 255, 0.22); | |||
} | |||
/* Badge “Destaques & Novidades” no topo, estilo Eden */ | |||
.rt-featured::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -18px; | |||
left: 40px; | |||
padding: 8px 26px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 600; | |||
letter-spacing: 0.10em; | |||
text-transform: uppercase; | |||
background: linear-gradient(120deg, #3b1f91, #6f3bff); | |||
color: #fff; | |||
box-shadow: 0 10px 25px rgba(67, 35, 160, 0.45); | |||
} | |||
/* GRID – duas colunas responsivas */ | |||
.rt-featured-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 24px 64px; | |||
} | |||
/* Cada coluna de destaques */ | |||
.rt-featured-col { | |||
flex: 1 1 260px; | |||
min-width: 260px; | |||
} | |||
/* Título da coluna */ | |||
.rt-featured-col-title { | |||
font-size: 13px; | |||
font-weight: 700; | |||
letter-spacing: 0.14em; | |||
text-transform: uppercase; | |||
color: #6a3dd6; | |||
margin-bottom: 10px; | |||
} | |||
/* Lista básica */ | |||
.rt-featured-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 4px 0 0; | |||
} | |||
/* Cada linha */ | |||
.rt-featured-list li { | |||
margin: 0; | |||
padding: 0; | |||
border-bottom: 1px dashed rgba(125, 94, 210, 0.25); | |||
} | |||
/* Remove a borda do último item da coluna */ | |||
.rt-featured-list li:last-child { | |||
border-bottom: none; | |||
} | |||
/* Link ocupando a linha toda */ | |||
.rt-featured-list li a { | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
padding: 8px 10px; | |||
text-decoration: none; | |||
color: #41228b; | |||
font-size: 14px; | |||
border-radius: 999px; | |||
transition: | |||
background 0.18s ease, | |||
box-shadow 0.18s ease, | |||
transform 0.12s ease, | |||
color 0.18s ease; | |||
} | |||
/* Bolinha decorativa à esquerda (tipo “bullet”) */ | |||
.rt-featured-list li a::before { | |||
content: ""; | |||
width: 6px; | |||
height: 6px; | |||
border-radius: 999px; | |||
margin-right: 10px; | |||
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b6bff 55%, #5a32c8 100%); | |||
box-shadow: 0 0 0 2px rgba(155, 107, 255, 0.2); | |||
} | |||
/* Hover – linha inteira roxo claro */ | |||
.rt-featured-list li a:hover { | |||
background: radial-gradient(circle at 0% 0%, #ffffff 0%, #f1e7ff 55%, #e6d6ff 100%); | |||
box-shadow: 0 8px 20px rgba(94, 55, 189, 0.28); | |||
color: #2b176b; | |||
transform: translateY(-1px); | |||
} | |||
/* Opcional: estado “ativo”/selecionado (se quiser forçar em algum item via classe) */ | |||
.rt-featured-list li.is-active a { | |||
background: linear-gradient(120deg, #6f3bff, #9a5dff); | |||
color: #ffffff; | |||
box-shadow: 0 10px 24px rgba(80, 49, 180, 0.45); | |||
} | |||
/* ===== BLOCO DE DESTAQUES – compacto ===== */ | |||
.rt-featured { | |||
position: relative; | |||
max-width: 900px; /* um pouco menor */ | |||
margin: 24px auto 18px; | |||
padding: 16px 18px 14px; /* menos “alto” e mais compacto */ | |||
border-radius: 18px; | |||
background: linear-gradient(135deg, #f9f5ff 0%, #f3ecff 40%, #efe6ff 100%); | |||
border: 1px solid rgba(140, 92, 255, 0.22); | |||
box-shadow: | |||
0 10px 22px rgba(96, 63, 191, 0.22), | |||
0 0 0 1px rgba(255, 255, 255, 0.4) inset; | |||
} | |||
/* Badge roxo escuro, também um pouco menor */ | |||
.rt-featured::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -16px; | |||
left: 26px; | |||
padding: 6px 18px; | |||
border-radius: 999px; | |||
font-size: 10px; | |||
font-weight: 600; | |||
letter-spacing: 0.14em; | |||
text-transform: uppercase; | |||
background: linear-gradient(120deg, #3b1f8c, #6a38f5); | |||
color: #fff; | |||
box-shadow: 0 10px 22px rgba(63, 35, 150, 0.55); | |||
} | |||
/* Grid um pouco mais fechado */ | |||
.rt-featured-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 12px 40px; | |||
} | |||
/* ===== TÍTULOS DAS COLUNAS ===== */ | |||
.rt-featured-col-title { | |||
font-size: 11px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.15em; | |||
color: #7a60d0; | |||
margin-bottom: 4px; | |||
} | |||
/* ===== LISTA E HOVER ===== */ | |||
.rt-featured-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 2px 0 0; | |||
} | |||
.rt-featured-list li { | |||
margin: 0; | |||
padding: 0; | |||
border-bottom: 1px dashed rgba(125, 94, 210, 0.18); | |||
} | |||
.rt-featured-list li:last-child { | |||
border-bottom: none; | |||
} | |||
.rt-featured-list li a { | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
padding: 4px 8px; /* mais compacto */ | |||
text-decoration: none; | |||
color: #41228b; | |||
font-size: 13px; | |||
border-radius: 10px; | |||
transition: | |||
background 0.15s ease, | |||
box-shadow 0.15s ease, | |||
transform 0.10s ease, | |||
color 0.15s ease; | |||
} | |||
/* bolinha decorativa ao lado do texto */ | |||
.rt-featured-list li a::before { | |||
content: ""; | |||
width: 6px; | |||
height: 6px; | |||
border-radius: 999px; | |||
margin-right: 8px; | |||
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b6bff 55%, #5a32c8 100%); | |||
box-shadow: 0 0 0 2px rgba(155, 107, 255, 0.2); | |||
} | |||
/* HOVER – mesma vibe do exemplo (roxinho chapado claro) */ | |||
.rt-featured-list li a:hover { | |||
background: #ecdafe; /* cor principal do hover */ | |||
box-shadow: 0 6px 14px rgba(122, 80, 209, 0.25); | |||
color: #2b176b; | |||
transform: translateY(-1px); | |||
} | |||
/* opcional: item fixo selecionado */ | |||
.rt-featured-list li.is-active a { | |||
background: linear-gradient(120deg, #6f3bff, #9a5dff); | |||
color: #ffffff; | |||
box-shadow: 0 10px 24px rgba(80, 49, 180, 0.45); | |||
} | |||
/* Dá mais espaço entre a borda superior do card e o conteúdo */ | |||
.rt-featured-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 12px 40px; | |||
margin-top: 10px; /* <-- adiciona esse espaçamento */ | |||
} | |||
/* Linha especial da TRAVA da roleta */ | |||
.rt-roulette-lock-row td { | |||
background: #fff4f8; /* leve rosinha */ | |||
border-bottom: 2px solid #f1c1d8; | |||
} | |||
.rt-roulette-lock-row td:first-child { | |||
border-left: 3px solid #ff82b8; /* faixa lateral chamando atenção */ | |||
} | |||
/* Badge "TRAVA" ao lado do item */ | |||
.rt-roulette-lock-badge { | |||
display: inline-block; | |||
margin-left: 6px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 10px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
font-weight: 600; | |||
background: linear-gradient(90deg, #ff7bbd, #ffb6dd); | |||
color: #ffffff; | |||
vertical-align: middle; | |||
} | |||
/* --- Card da Roleta (colapsível) --- */ | |||
.rt-roulette-box { | |||
background: radial-gradient(circle at top left, #fdf8ff 0, #f3ecff 45%, #efe6ff 100%); | |||
border-radius: 22px; | |||
border: 1px solid rgba(140, 110, 255, 0.25); | |||
padding: 20px 26px; | |||
margin: 18px auto 28px; | |||
box-shadow: 0 14px 35px rgba(80, 40, 190, 0.18); | |||
} | |||
/* tira espaçamento estranho padrão do collapsible */ | |||
.rt-roulette-box .mw-collapsible-content { | |||
padding-top: 10px; | |||
} | |||
/* --- Tabela da Roleta --- */ | |||
.wikitable.rt-roulette-table { | |||
background: transparent; | |||
border-collapse: collapse; | |||
} | |||
.wikitable.rt-roulette-table th, | |||
.wikitable.rt-roulette-table td { | |||
border: none; | |||
border-bottom: 1px dashed rgba(170, 130, 255, 0.35); | |||
padding: 10px 16px; | |||
} | |||
/* cabeçalho padrão (igual aos outros cards roxos claros) */ | |||
.wikitable.rt-roulette-table th { | |||
background: #f5e9ff; | |||
font-weight: 600; | |||
color: #5b2cff; | |||
text-transform: uppercase; | |||
font-size: 11px; | |||
} | |||
.wikitable.rt-roulette-table tr:last-child td { | |||
border-bottom: none; | |||
} | |||
/* --- Linha especial da TRAVA --- */ | |||
.rt-roulette-lock-row td { | |||
background: #f3ecff; /* lilás suave */ | |||
border-bottom: 2px solid rgba(125, 90, 255, 0.35); /* linha um pouco mais forte */ | |||
} | |||
.rt-roulette-lock-row td:first-child { | |||
border-left: 3px solid #5b2cff; /* faixa roxo escuro */ | |||
border-top-left-radius: 12px; | |||
border-bottom-left-radius: 12px; | |||
} | |||
.rt-roulette-lock-row td:last-child { | |||
border-top-right-radius: 12px; | |||
border-bottom-right-radius: 12px; | |||
} | |||
/* --- Badge TRAVA em roxo escuro --- */ | |||
.rt-roulette-lock-badge { | |||
display: inline-block; | |||
margin-left: 8px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 10px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
font-weight: 700; | |||
background: linear-gradient(90deg, #4b1fd9, #8e54ff); /* roxo escuro -> roxo médio */ | |||
color: #ffffff; | |||
box-shadow: | |||
0 0 0 1px rgba(255, 255, 255, 0.75) inset, | |||
0 2px 6px rgba(56, 26, 140, 0.45); | |||
vertical-align: middle; | |||
} | |||
/* ----- CONTAINER DO NÍVEL (card roxo claro) ----- */ | |||
.roleta-sorte .mw-collapsible-content { | |||
background: #fbf5ff; | |||
border-radius: 18px; | |||
padding: 18px 22px; | |||
box-shadow: 0 14px 40px rgba(130, 88, 255, 0.16); | |||
} | |||
/* CARD da Roleta (mesmo esquema de antes) */ | |||
.roleta-sorte .mw-collapsible-content { | |||
background: #fbf5ff; | |||
border-radius: 18px; | |||
padding: 18px 22px; | |||
box-shadow: 0 14px 40px rgba(130, 88, 255, 0.16); | |||
} | |||
/* Roleta da Sorte – área interna do colapsível */ | |||
.roleta-sorte .mw-collapsible { | |||
background: transparent !important; | |||
border: none !important; | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
} | |||
.roleta-sorte .mw-collapsible-content { | |||
background: transparent !important; | |||
border: none !important; | |||
padding: 10px 0 0 !important; /* só um respiro abaixo do cabeçalho */ | |||
} | |||
/* Tabela da Roleta */ | |||
.roleta-sorte .rt-lottery-table { | |||
width: 70%; /* deixa mais estreita */ | |||
margin: 0 auto 24px; /* centralizada */ | |||
background: #f7eeff; /* roxo claro */ | |||
border-collapse: collapse; | |||
} | |||
.roleta-sorte .rt-lottery-table th, | |||
.roleta-sorte .rt-lottery-table td { | |||
background: #f7eeff !important; /* todas as linhas com a MESMA cor */ | |||
border-color: #f0ddff; /* borda suave em roxo bem clarinho */ | |||
} | |||
/* opcional: dar uma leve arredondada na “caixa” da tabela */ | |||
.roleta-sorte .rt-lottery-table tr:first-child th:first-child { | |||
border-top-left-radius: 14px; | |||
} | |||
.roleta-sorte .rt-lottery-table tr:first-child th:last-child { | |||
border-top-right-radius: 14px; | |||
} | |||
.roleta-sorte .rt-lottery-table tr:last-child td:first-child { | |||
border-bottom-left-radius: 14px; | |||
} | |||
.roleta-sorte .rt-lottery-table tr:last-child td:last-child { | |||
border-bottom-right-radius: 14px; | |||
} | |||
/* Badge TRAVA — roxo escuro, como já estava */ | |||
.rt-lottery-trava-tag { | |||
display: inline-block; | |||
margin-left: 6px; | |||
margin-top: 2px; | |||
padding: 2px 10px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.05em; | |||
border-radius: 999px; | |||
background: #5b2aff; | |||
color: #ffffff; | |||
box-shadow: 0 4px 12px rgba(91, 42, 255, 0.55); | |||
} | |||
/* Opção 2 – recomendado */ | |||
.roleta-sorte .drops-inline { | |||
margin: 0 auto 8px !important; /* centralizado e com espaçamento vertical */ | |||
} | |||
/* Banner da Roleta da Sorte – wrapper */ | |||
.roleta-page .banner-true { | |||
display: inline-block; | |||
border-radius: 24px; | |||
overflow: hidden; /* faz a borda arredondada cortar a imagem dentro */ | |||
box-shadow: 0 18px 40px rgba(30, 10, 80, 0.45); | |||
border: 2px solid #f5e7ff; | |||
} | |||
/* Garante que a imagem dentro acompanhe e fique sem margem */ | |||
.roleta-page .banner-true img { | |||
display: block; | |||
border-radius: 0; /* a borda já vem do wrapper */ | |||
box-shadow: none; /* sombra só no wrapper */ | |||
} | |||
/* GRID da progressão de EXP do Passe de Batalha */ | |||
.bp-exp-summary { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); | |||
gap: 12px; | |||
margin: 12px 0 24px; | |||
} | |||
/* Card individual */ | |||
.bp-exp-card { | |||
background: #faf5ff; /* roxo bem clarinho */ | |||
border-radius: 14px; | |||
padding: 10px 16px 12px; | |||
box-shadow: 0 10px 25px rgba(123, 58, 245, 0.08); | |||
border: 1px solid rgba(123, 58, 245, 0.12); | |||
} | |||
/* Label pequena em cima */ | |||
.bp-exp-label { | |||
font-size: 11px; | |||
font-weight: 600; | |||
text-transform: uppercase; | |||
letter-spacing: 0.06em; | |||
color: #7b3af5; | |||
margin-bottom: 4px; | |||
} | |||
/* Valor principal */ | |||
.bp-exp-value { | |||
font-size: 14px; | |||
font-weight: 600; | |||
color: #2c2250; | |||
} | |||
/* Observação opcional (linha de baixo) */ | |||
.bp-exp-note { | |||
font-size: 11px; | |||
color: #6c6a80; | |||
margin-top: 2px; | |||
} | |||
/* ============================= | |||
Recompensa Bônus do Passe | |||
============================= */ | |||
/* Card mais compacto e centrado */ | |||
.bp-bonus-card { | |||
background: #faf5ff; | |||
border-radius: 20px; | |||
padding: 14px 18px 18px; | |||
margin: 8px auto 24px; | |||
border: 1px solid rgba(123, 58, 245, 0.12); | |||
box-shadow: 0 10px 28px rgba(123, 58, 245, 0.15); | |||
max-width: 260px; /* deixa esse formato “cartinha” */ | |||
} | |||
/* Como você está usando praticamente só a coluna, | |||
força o layout vertical em qualquer largura */ | |||
.bp-bonus-main { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 12px; | |||
text-align: center; | |||
} | |||
/* Título "Recompensa Bônus (0,5%)" dentro do card */ | |||
.bp-bonus-title { | |||
font-size: 14px; | |||
font-weight: 600; | |||
color: #5b34c9; | |||
margin-bottom: 2px; | |||
} | |||
/* Bloco da esquerda (ovo + textos) agora é coluna também */ | |||
.bp-bonus-left { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
/* Círculo do ovo – só ajustei tamanho e sombra pra combinar com o card menor */ | |||
.bp-bonus-icon-wrap { | |||
width: 54px; | |||
height: 54px; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: radial-gradient( | |||
circle at 20% 0%, | |||
#ffffff 0%, | |||
#c8a8ff 55%, | |||
#9b6bff 100% | |||
); | |||
box-shadow: 0 6px 16px rgba(99, 55, 214, 0.35); | |||
overflow: hidden; | |||
margin-top: 2px; | |||
} | |||
.bp-bonus-icon { | |||
max-width: 32px !important; | |||
height: auto !important; | |||
} | |||
/* Textos do ovo */ | |||
.bp-bonus-text { | |||
line-height: 1.3; | |||
} | |||
.bp-bonus-label { | |||
font-size: 10px; | |||
letter-spacing: 0.14em; | |||
text-transform: uppercase; | |||
color: #aa7cff; | |||
font-weight: 600; | |||
margin-top: 4px; | |||
margin-bottom: 1px; | |||
} | |||
.bp-bonus-name { | |||
font-size: 15px; | |||
font-weight: 700; | |||
color: #3b2b67; | |||
} | |||
.bp-bonus-desc { | |||
font-size: 11px; | |||
color: #6b5a99; | |||
} | |||
/* Pet */ | |||
.bp-bonus-right { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 4px; | |||
margin-top: 6px; | |||
} | |||
.bp-bonus-pet { | |||
max-height: 120px !important; /* um pouco menor pra não “pesar” o card */ | |||
width: auto !important; | |||
} | |||
.bp-bonus-pet-name { | |||
font-size: 11px; | |||
color: #6b5a99; | |||
font-weight: 600; | |||
margin-bottom: 2px; | |||
} | |||
.roxo-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
background: #160c22; /* roxo bem escuro */ | |||
color: #f5e9ff; | |||
border: 1px solid rgba(220, 180, 255, 0.16); | |||
border-radius: 10px; | |||
overflow: hidden; | |||
} | |||
.roxo-table th { | |||
background: linear-gradient(90deg, #7b3af5, #a855f7); | |||
color: #ffffff; | |||
padding: 8px 10px; | |||
text-align: left; | |||
font-weight: 600; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.12); | |||
font-size: 13px; | |||
} | |||
.roxo-table td { | |||
padding: 6px 10px; | |||
border-top: 1px solid rgba(220, 180, 255, 0.10); | |||
font-size: 13px; | |||
} | |||
.roxo-table tr:nth-child(even) td { | |||
background: rgba(255, 255, 255, 0.02); | |||
} | |||
.roxo-table tr:hover td { | |||
background: rgba(148, 93, 255, 0.18); | |||
} | |||
/* ====== CARD / CAIXA GERAL ====== */ | |||
.rt-rewards-card { | |||
background: #f7ecff; | |||
border-radius: 24px; | |||
padding: 18px 22px 22px; | |||
box-shadow: 0 16px 40px rgba(149, 90, 255, 0.25); | |||
max-width: 960px; | |||
margin: 0 auto 32px; | |||
} | |||
/* Título (ex: "Recompensas") – opcional */ | |||
.rt-rewards-title { | |||
font-size: 24px; | |||
font-weight: 800; | |||
color: #5b2aa8; | |||
margin-bottom: 14px; | |||
} | |||
/* Badge / aba roxa (ex: "RECOMPENSAS – DESAFIOS DIÁRIOS") */ | |||
.rt-rewards-chip { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 26px; | |||
border-radius: 999px; | |||
background: linear-gradient(90deg, #a546ff, #d067ff); | |||
color: #ffffff; | |||
font-size: 12px; | |||
font-weight: 700; | |||
letter-spacing: 0.04em; | |||
text-transform: uppercase; | |||
box-shadow: 0 8px 24px rgba(133, 70, 255, 0.45); | |||
margin-bottom: 18px; | |||
} | |||
/* ====== TABELA ====== */ | |||
.rt-rewards-table { | |||
width: 100%; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 16px; | |||
overflow: hidden; | |||
font-size: 14px; | |||
font-family: inherit; | |||
} | |||
/* Cabeçalho (linha "Prêmio | Chance") */ | |||
.rt-rewards-table .rt-head th { | |||
background: #f0ddff; | |||
color: #5b2aa8; | |||
font-weight: 600; | |||
padding: 10px 18px; | |||
text-align: left; /* base: esquerda */ | |||
} | |||
/* "Prêmio" centralizado */ | |||
.rt-rewards-table .rt-head th:first-child { | |||
text-align: center; | |||
} | |||
/* "Chance" centralizado */ | |||
.rt-rewards-table .rt-head th:last-child { | |||
text-align: center; | |||
} | |||
/* Corpo da tabela */ | |||
.rt-rewards-table tr td { | |||
background: #fdfbff; | |||
color: #3c215f; | |||
padding: 10px 18px; | |||
border-bottom: 1px solid #f0e2ff; /* listrinha horizontal suave */ | |||
} | |||
/* Remove a borda da última linha */ | |||
.rt-rewards-table tr:last-child td { | |||
border-bottom: none; | |||
} | |||
/* Primeira coluna: conteúdo alinhado à esquerda */ | |||
.rt-rewards-table tr td:first-child { | |||
text-align: left; | |||
} | |||
/* Segunda coluna (Chance) centralizada */ | |||
.rt-rewards-table tr td:last-child { | |||
text-align: center; | |||
} | |||
/* Linha vertical separando as colunas */ | |||
.rt-rewards-table .rt-head th:nth-child(2), | |||
.rt-rewards-table tr td:nth-child(2) { | |||
border-left: 1px solid rgba(224, 203, 255, 0.9); | |||
} | |||
/* Canto arredondado — topo */ | |||
.rt-rewards-table .rt-head th:first-child { | |||
border-top-left-radius: 16px; | |||
} | |||
.rt-rewards-table .rt-head th:last-child { | |||
border-top-right-radius: 16px; | |||
} | |||
/* Canto arredondado — base */ | |||
.rt-rewards-table tr:last-child td:first-child { | |||
border-bottom-left-radius: 16px; | |||
} | |||
.rt-rewards-table tr:last-child td:last-child { | |||
border-bottom-right-radius: 16px; | |||
} | |||
/* BOX ROXINHO AO REDOR DA TABELA */ | |||
.rt-rewards-box { | |||
margin: 30px auto 0; | |||
max-width: 980px; /* mais larga */ | |||
padding: 20px 22px 24px; | |||
background: radial-gradient(circle at top left, #ffe9ff 0, #f7e7ff 38%, #f8edff 100%); | |||
border-radius: 26px; | |||
border: 1px solid rgba(171, 119, 255, 0.45); | |||
box-shadow: | |||
0 18px 40px rgba(124, 79, 255, 0.25), | |||
0 0 0 1px rgba(255, 255, 255, 0.65); | |||
} | |||
/* TABELA */ | |||
.rt-rewards-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
font-size: 13px; | |||
line-height: 1.45; | |||
color: #5a2a90; | |||
} | |||
/* Cabeçalho */ | |||
.rt-rewards-table .rt-head th { | |||
background: linear-gradient(90deg, #f2d8ff, #f3d1ff); | |||
padding: 10px 18px; | |||
font-weight: 600; | |||
border-bottom: 1px solid #e3c4ff; | |||
color: #6e33c9; | |||
} | |||
/* "Prêmio" centralizado */ | |||
.rt-rewards-table .rt-head th:first-child { | |||
text-align: center; | |||
} | |||
/* "Nível" à direita + divisória */ | |||
.rt-rewards-table .rt-head th:last-child { | |||
text-align: center; | |||
border-left: 1px solid #e3c4ff; | |||
width: 120px; /* coluna de nível mais estreita */ | |||
white-space: nowrap; | |||
} | |||
/* Células do corpo */ | |||
.rt-rewards-table td { | |||
background: #fff9ff; | |||
padding: 8px 18px; | |||
border-bottom: 1px solid #f0e0ff; /* linha que separa as linhas */ | |||
box-shadow: inset 0 -1px 0 rgba(240, 224, 255, 0.7); | |||
} | |||
/* Primeira coluna alinhada à esquerda */ | |||
.rt-rewards-table td:first-child { | |||
text-align: left; | |||
} | |||
/* Segunda coluna à direita + divisória */ | |||
.rt-rewards-table td:last-child { | |||
text-align: center; | |||
border-left: 1px solid #f0d4ff; | |||
white-space: nowrap; | |||
} | |||
/* Última linha com borda mais suave */ | |||
.rt-rewards-table tr:last-child td { | |||
border-bottom-color: rgba(240, 224, 255, 0.4); | |||
} | } | ||
. | /* Pequeno efeito ao passar o mouse nas linhas */ | ||
.rt-rewards-table tr:hover td { | |||
background: #fff3ff; | |||
} | } | ||
. | /* Passe de Batalha – banner com bordas curvas */ | ||
.banner-passe { | |||
display: block; | |||
margin: 0 auto; /* mantém centralizado */ | |||
border-radius: 24px; /* deixa as bordas curvas */ | |||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* opcional: destaque */ | |||
} | } | ||
. | /* Container do banner do Passe */ | ||
display: | .banner-passe { | ||
display: inline-block; | |||
border-radius: 24px; /* bordas curvas */ | |||
overflow: hidden; /* corta os cantos da imagem */ | |||
box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* destaque (opcional) */ | |||
box-shadow: 0 10px | |||
} | } | ||
. | /* Garante que a imagem ocupe certinho o container */ | ||
.banner-passe img { | |||
display: block; | display: block; | ||
} | |||
/* HERO (topo) */ | |||
.rtp-hero{ | |||
background: rgba(130, 90, 200, 0.08); | |||
border-radius: 18px; | |||
padding: 14px; | |||
margin: 6px 0 14px; | |||
box-shadow: 0 10px 22px rgba(0,0,0,0.10); | |||
} | |||
.rtp-hero-title{ font-weight: 950; font-size: 18px; } | |||
.rtp-hero-sub{ opacity: .92; margin-top: 6px; line-height: 1.35; } | |||
.rtp-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; } | |||
.rtp-pill{ | |||
display:inline-block; | |||
padding:7px 11px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
background: rgba(130, 90, 200, 0.14); | |||
} | |||
/* Grids */ | |||
.rtp-grid-featured{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); | |||
gap:16px; | |||
margin-top: 10px; | |||
} | |||
.rtp-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); | |||
gap:14px; | |||
margin-top: 10px; | |||
} | |||
.rtp-muted{ opacity:.85; margin: 6px 0 8px; } | |||
/* Card do criador */ | |||
.rtp-card{ | |||
background: rgba(255,255,255,0.94); | |||
border-radius: 18px; | |||
overflow:hidden; | |||
box-shadow: 0 12px 26px rgba(0,0,0,0.14); | |||
position: relative; | |||
} | |||
.rtp-card:before{ | |||
content:""; | |||
position:absolute; | |||
left:0; top:0; right:0; | |||
height: 4px; | |||
background: rgba(130, 90, 200, 0.55); | |||
opacity: .75; | |||
} | |||
.rtp-top{ | |||
display:flex; | |||
gap:14px; | |||
padding: 14px; | |||
align-items:flex-start; | |||
} | |||
.rtp-avatar img{ | |||
border-radius: 14px; | |||
box-shadow: 0 10px 18px rgba(0,0,0,0.16); | |||
display:block; | |||
} | |||
.rtp-main{ flex:1; min-width:0; } | |||
.rtp-name{ font-weight: 950; font-size: 18px; line-height: 1.15; } | |||
.rtp-line{ opacity: .92; margin-top: 6px; line-height: 1.35; } | |||
.rtp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 8px; } | |||
.rtp-chip{ | |||
display:inline-block; | |||
padding:4px 10px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 900; | |||
background: rgba(130, 90, 200, 0.12); | |||
} | |||
.rtp-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; } | |||
.rtp-btn{ | |||
display:inline-block; | |||
padding:8px 12px; | |||
border-radius:12px; | |||
font-weight: 950; | |||
text-decoration:none !important; | |||
background: rgba(130, 90, 200, 0.18); | |||
} | |||
.rtp-btn:hover{ filter:brightness(1.06); } | |||
.rtp-btn-soft{ background: rgba(130, 90, 200, 0.10); } | |||
/* Benefícios */ | |||
.rtp-benefits{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); | |||
gap:14px; | |||
margin-top: 10px; | |||
} | |||
.rtp-box{ | |||
background: rgba(255,255,255,0.94); | |||
border-radius: 18px; | |||
box-shadow: 0 12px 26px rgba(0,0,0,0.12); | |||
padding: 14px; | |||
} | |||
.rtp-box-title{ font-weight: 950; font-size: 16px; margin-bottom: 8px; } | |||
.rtp-list{ margin: 0; padding-left: 18px; line-height: 1.45; } | |||
/* Mobile */ | |||
@media (max-width: 560px){ | |||
.rtp-top{ flex-direction:column; } | |||
} | |||
/* Visão Geral */ | |||
.rtp-overview{ | |||
display:grid; | |||
grid-template-columns: 1.35fr .65fr; | |||
gap:14px; | |||
background: rgba(130, 90, 200, 0.06); | |||
border-radius: 18px; | |||
padding: 14px; | |||
box-shadow: 0 10px 22px rgba(0,0,0,0.10); | |||
margin: 8px 0 14px; | |||
} | |||
.rtp-ov-title{ | |||
font-weight: 950; | |||
font-size: 18px; | |||
margin-bottom: 6px; | |||
} | |||
.rtp-ov-text{ | |||
opacity: .92; | |||
line-height: 1.4; | |||
} | |||
.rtp-ov-bullets{ | |||
margin-top: 10px; | |||
display:grid; | |||
gap:6px; | |||
opacity: .92; | |||
} | |||
.rtp-ov-item{ | |||
background: rgba(255,255,255,0.70); | |||
border-radius: 14px; | |||
padding: 8px 10px; | |||
} | |||
.rtp-ov-box{ | |||
background: rgba(255,255,255,0.90); | |||
border-radius: 18px; | |||
padding: 12px; | |||
box-shadow: 0 10px 22px rgba(0,0,0,0.10); | |||
} | |||
.rtp-ov-box-title{ | |||
font-weight: 950; | |||
margin-bottom: 8px; | |||
} | |||
.rtp-ov-links{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
} | |||
.rtp-ov-btn{ | |||
display:inline-block; | |||
padding: 8px 12px; | |||
border-radius: 999px; | |||
font-weight: 950; | |||
background: rgba(130, 90, 200, 0.14); | |||
} | |||
/* Mobile */ | |||
@media (max-width: 650px){ | |||
.rtp-overview{ grid-template-columns: 1fr; } | |||
} | |||
.rtp-intro{ | |||
margin: 6px 0 10px; | |||
opacity: .92; | |||
line-height: 1.4; | |||
} | |||
.rtp-quicklinks{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
margin: 0 0 14px; | |||
} | |||
.rtp-q{ | |||
display:inline-block; | |||
padding: 7px 11px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
background: rgba(130, 90, 200, 0.12); | |||
} | |||
/* ================================ | |||
RagnaTrue - Tooltip ItemInfo (BRANCO) | |||
================================ */ | |||
.rt-item{ | |||
cursor:pointer; | |||
text-decoration:underline dotted; | |||
} | |||
/* Caixa do tooltip */ | |||
#rt-tooltip{ | |||
position:fixed; | |||
z-index:999999; | |||
max-width:560px; | |||
background:#ffffff; /* FUNDO BRANCO */ | |||
color:#1f1f1f; | |||
border:1px solid rgba(0,0,0,0.12); | |||
border-radius:16px; | |||
padding:12px 14px; | |||
box-shadow:0 14px 34px rgba(0,0,0,0.16); | |||
display:none; | |||
font-size:14px; | |||
line-height:1.35; | |||
} | |||
/* Layout: ícone + texto */ | |||
#rt-tooltip .rt-top{ | |||
display:flex; | |||
gap:18px; | |||
align-items:center; /* centraliza verticalmente */ | |||
} | |||
/* Ícone 75x100 */ | |||
#rt-tooltip .rt-icon{ | |||
width:75px; | |||
height:100px; | |||
flex:0 0 75px; | |||
display:block; | |||
background:transparent !important; | |||
border:0 !important; | |||
box-shadow:none !important; | |||
border-radius:0 !important; | |||
object-fit:contain; | |||
object-position:center; | |||
image-rendering:pixelated; | |||
} | |||
/* Texto */ | |||
#rt-tooltip .rt-text{ | |||
min-width:0; | |||
flex:1 1 auto; | |||
} | |||
#rt-tooltip .rt-title{ | |||
font-weight:900; | |||
margin:0 0 6px 0; | |||
color:#111; | |||
} | |||
#rt-tooltip .rt-body{ | |||
color:#222; | |||
} | |||
/* Separador (linhas do RO viram <hr>) */ | |||
#rt-tooltip hr{ | |||
border:0; | |||
border-top:1px solid rgba(0,0,0,0.12); | |||
margin:10px 0; | |||
} | |||
/* Ajuste pra cores muito neon ficarem legíveis no branco */ | |||
#rt-tooltip span[style*="color:#0000CC"], | |||
#rt-tooltip span[style*="color:#0000cc"]{ | |||
color:#2f49ff !important; | |||
} | |||
#rt-tooltip span[style*="color:#FF0000"], | |||
#rt-tooltip span[style*="color:#ff0000"]{ | |||
color:#d11a2a !important; | |||
} | |||
/* ===== Tooltip: modo colunas quando necessário ===== */ | |||
#rt-tooltip.is-cols .rt-top{ | |||
align-items:flex-start; /* só no modo colunas */ | |||
} | |||
#rt-tooltip .rt-body{ | |||
/* default: 1 coluna (normal) */ | |||
column-count:1; | |||
column-gap:22px; | |||
} | |||
#rt-tooltip.is-cols .rt-body{ | |||
/* o JS vai setar column-count dinamicamente (2 ou 3) */ | |||
column-fill:auto; | |||
} | |||
#rt-tooltip.is-compact{ | |||
font-size:13px; | |||
line-height:1.28; | |||
} | |||
#rt-tooltip .rt-body hr{ | |||
break-after:avoid; | |||
} | |||
/* === Tooltip: modo colunas por ALTURA === */ | |||
#rt-tooltip.is-cols .rt-top{ | |||
align-items:flex-start; | |||
} | |||
#rt-tooltip .rt-body{ | |||
column-count: 1; | |||
column-gap: 22px; | |||
} | |||
/* (opcional) evita ficar largo demais no desktop */ | |||
#rt-tooltip.is-cols{ | |||
/* JS vai ajustar maxWidth dinamicamente, isso é só "base" */ | |||
max-width: 980px; | |||
} | |||
/* ===== Criadores Parceiros: Visual do Streamer ===== */ | |||
.criadores-page .rtp-visual-center{ | |||
display:flex; | |||
justify-content:center; | |||
margin: 14px 0 22px; | |||
} | |||
.criadores-page .rtp-visual-card{ | |||
width: min(360px, 92vw); | |||
padding: 18px 18px 16px; | |||
border-radius: 22px; | |||
background: rgba(245, 242, 255, .75); | |||
border: 1px solid rgba(122, 92, 255, .25); | |||
box-shadow: 0 16px 42px rgba(20, 10, 60, .10); | |||
text-align:center; | |||
backdrop-filter: blur(6px); | |||
} | |||
.criadores-page .rtp-visual-top{ | |||
font-weight: 900; | |||
font-size: 15px; | |||
letter-spacing: .2px; | |||
color: rgba(95, 70, 220, .95); | |||
margin-bottom: 8px; | |||
} | |||
.criadores-page .rtp-visual-mini{ | |||
margin: 2px 0 10px; | |||
opacity: .95; | |||
} | |||
.criadores-page .rtp-visual-kicker{ | |||
font-weight: 800; | |||
font-size: 11px; | |||
letter-spacing: .9px; | |||
text-transform: uppercase; | |||
color: rgba(120, 100, 230, .85); | |||
margin-bottom: 6px; | |||
} | |||
.criadores-page .rtp-visual-name{ | |||
font-weight: 900; | |||
font-size: 15px; | |||
color: rgba(35, 25, 80, .92); | |||
margin-bottom: 12px; | |||
text-decoration: underline; | |||
text-decoration-color: rgba(120, 100, 230, .40); | |||
text-underline-offset: 4px; | |||
} | |||
.criadores-page .rtp-visual-sprite{ | |||
display:flex; | |||
justify-content:center; | |||
align-items:center; | |||
padding: 6px 0 10px; | |||
} | |||
.criadores-page .rtp-visual-sprite img{ | |||
image-rendering: pixelated; | |||
filter: drop-shadow(0 10px 22px rgba(70, 40, 200, .18)); | |||
} | |||
.criadores-page .rtp-visual-foot{ | |||
font-weight: 700; | |||
font-size: 12px; | |||
color: rgba(95, 80, 170, .92); | |||
margin-top: 6px; | |||
} | |||
/* ========================================= | |||
Criadores Parceiros - Cards por Plataforma | |||
(YouTube / Twitch / TikTok) | |||
========================================= */ | |||
.rtp-platform{ | |||
position:relative; | |||
margin:18px 0; | |||
border-radius:18px; | |||
border:1px solid rgba(120,90,255,.22); | |||
background:linear-gradient(180deg, rgba(120,90,255,.12), rgba(120,90,255,.06)); | |||
box-shadow:0 14px 30px rgba(0,0,0,.06); | |||
overflow:hidden; | |||
transition:transform .12s ease, box-shadow .12s ease, background .12s ease; | |||
} | |||
/* barrinha lateral suave */ | |||
.rtp-platform::before{ | |||
content:""; | |||
position:absolute; | |||
left:0; top:0; bottom:0; | |||
width:6px; | |||
background:linear-gradient(180deg, rgba(120,90,255,.70), rgba(120,90,255,.18)); | |||
opacity:.55; | |||
} | |||
.rtp-platform:hover{ | |||
transform:translateY(-1px); | |||
box-shadow:0 18px 40px rgba(0,0,0,.08); | |||
} | |||
/* header */ | |||
.rtp-platform > .rtp-platform-head{ | |||
display:flex; | |||
align-items:center; | |||
padding:18px 18px 18px 22px; | |||
padding-right:150px; /* espaço pro botão Mostrar */ | |||
box-sizing:border-box; | |||
} | |||
.rtp-platform-left{ | |||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
min-width:0; | |||
} | |||
/* ícone */ | |||
.rtp-platform-icon{ | |||
width:44px; | |||
height:44px; | |||
border-radius:14px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
background:rgba(120,90,255,.14); | |||
border:1px solid rgba(120,90,255,.22); | |||
font-size:18px; | |||
line-height:1; | |||
} | |||
/* títulos */ | |||
.rtp-platform-titles{ min-width:0; } | |||
.rtp-platform-name{ | |||
font-weight:900; | |||
font-size:20px; | |||
line-height:1.1; | |||
} | |||
.rtp-platform-desc{ | |||
margin-top:3px; | |||
font-size:13px; | |||
opacity:.75; | |||
} | |||
/* conteúdo expandido */ | |||
.rtp-platform > .mw-collapsible-content{ | |||
padding:0 18px 18px 22px; | |||
} | |||
.rtp-platform > .mw-collapsible-content::before{ | |||
content:""; | |||
display:block; | |||
height:1px; | |||
background:rgba(120,90,255,.18); | |||
margin:0 0 14px 0; | |||
} | |||
/* ========================================= | |||
Toggle Mostrar/Ocultar (MediaWiki) | |||
========================================= */ | |||
.rtp-platform > .mw-collapsible-toggle{ | |||
position:absolute !important; | |||
top:50%; | |||
right:14px; | |||
transform:translateY(-50%); | |||
float:none !important; | |||
margin:0 !important; | |||
z-index:5; | |||
} | |||
/* remove os colchetes [ ] */ | |||
.rtp-platform .mw-collapsible-toggle-bracket{ | |||
display:none !important; | |||
} | |||
/* botão */ | |||
.rtp-platform > .mw-collapsible-toggle a{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:8px; | |||
padding:10px 14px; | |||
border-radius:999px; | |||
background:rgba(120,90,255,.14); | |||
border:1px solid rgba(120,90,255,.24); | |||
font-weight:900; | |||
text-decoration:none !important; | |||
white-space:nowrap; | |||
transition:transform .12s ease, background .12s ease; | |||
} | |||
.rtp-platform > .mw-collapsible-toggle a:hover{ | |||
transform:translateY(-1px); | |||
background:rgba(120,90,255,.18); | |||
} | |||
/* opcional: dá um "ar" extra pro grid dentro */ | |||
.rtp-platform .rtp-grid{ | |||
margin-top:6px; | |||
} | |||
/* Lista simples de criadores dentro do collapsible */ | |||
.rtp-list{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:10px; | |||
} | |||
.rtp-row{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
gap:12px; | |||
padding:12px 14px; | |||
border-radius:14px; | |||
background:rgba(255,255,255,.55); | |||
border:1px solid rgba(120,90,255,.18); | |||
box-shadow:0 10px 20px rgba(0,0,0,.04); | |||
} | |||
.rtp-row-name{ | |||
font-weight:900; | |||
font-size:14px; | |||
white-space:nowrap; | |||
overflow:hidden; | |||
text-overflow:ellipsis; | |||
} | |||
.rtp-row-links{ | |||
display:flex; | |||
gap:8px; | |||
flex-wrap:wrap; | |||
justify-content:flex-end; | |||
} | |||
/* deixa os links com cara de botão sem precisar usar rtp-btn */ | |||
.rtp-row-links a{ | |||
display:inline-flex; | |||
align-items:center; | |||
padding:7px 10px; | |||
border-radius:999px; | |||
background:rgba(120,90,255,.12); | |||
border:1px solid rgba(120,90,255,.22); | |||
text-decoration:none !important; | |||
font-weight:800; | |||
font-size:12px; | |||
} | |||
.rtp-row-links a:hover{ | |||
background:rgba(120,90,255,.18); | |||
} | |||
/* =============================== | |||
Criadores Parceiros - Benefícios (clean) | |||
=============================== */ | |||
.criadores-page .rtp-benefits{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); | |||
gap:18px; | |||
margin:14px 0 6px; | |||
} | |||
.criadores-page .rtp-box{ | |||
position:relative; | |||
overflow:hidden; | |||
border-radius:18px; | |||
padding:0; /* título vira barra, então o padding vai no conteúdo */ | |||
border:1px solid rgba(120,90,255,.22); | |||
background:linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.04)); | |||
box-shadow:0 10px 26px rgba(20,10,60,.10); | |||
transition:transform .18s ease, box-shadow .18s ease; | |||
} | |||
.criadores-page .rtp-box.is-creator{ --rtp-acc:120,90,255; } | |||
.criadores-page .rtp-box.is-viewer { --rtp-acc:70,170,255; } | |||
.criadores-page .rtp-box.is-creator{ | |||
border-color:rgba(var(--rtp-acc), .24); | |||
background:linear-gradient(180deg, rgba(var(--rtp-acc), .11), rgba(var(--rtp-acc), .04)); | |||
} | |||
.criadores-page .rtp-box.is-viewer{ | |||
border-color:rgba(var(--rtp-acc), .22); | |||
background:linear-gradient(180deg, rgba(var(--rtp-acc), .10), rgba(var(--rtp-acc), .03)); | |||
} | |||
.criadores-page .rtp-box:hover{ | |||
transform:translateY(-2px); | |||
box-shadow:0 14px 34px rgba(20,10,60,.14); | |||
} | |||
/* Título como “barra” do card */ | |||
.criadores-page .rtp-box-title{ | |||
padding:14px 16px; | |||
font-weight:900; | |||
font-size:1.05rem; | |||
border-bottom:1px solid rgba(var(--rtp-acc), .18); | |||
background:linear-gradient(90deg, rgba(var(--rtp-acc), .16), rgba(var(--rtp-acc), .06)); | |||
} | |||
/* Conteúdo interno */ | |||
.criadores-page .rtp-box .rtp-list{ | |||
list-style:disc; | |||
margin:0; | |||
padding:14px 22px 16px 38px; /* recuo bonito pro bullet padrão */ | |||
} | |||
.criadores-page .rtp-box .rtp-list li{ | |||
margin:10px 0; | |||
line-height:1.35; | |||
} | |||
/* Remove qualquer estilo antigo de “check” caso exista no seu CSS anterior */ | |||
.criadores-page .rtp-list li::before{ | |||
content:none !important; | |||
} | |||
.rtp-platform-head .rtp-platform-left{ | |||
display:flex; | |||
align-items:center; /* centraliza verticalmente */ | |||
gap:14px; | |||
} | |||
.rtp-platform-head .rtp-platform-left{ | |||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
} | |||
/* Head vira flex pra alinhar conteúdo + botão de mostrar */ | |||
.rtp-platform-head{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
} | |||
/* Lado esquerdo vira flex: o ::before entra como 1º item */ | |||
.rtp-platform-left{ | |||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
} | |||
/* Caixa do ícone (NÃO absoluto, então nunca cobre texto) */ | |||
.rtp-platform-left::before{ | |||
content:""; | |||
width:64px; | |||
height:64px; | |||
flex:0 0 64px; | |||
border-radius:16px; | |||
border:1px solid rgba(120,90,255,.25); | |||
background-color:rgba(255,255,255,.55); | |||
background-repeat:no-repeat; | |||
background-position:center; | |||
background-size:52px 52px; | |||
} | |||
/* YouTube (usa icon_ytb1.png) */ | |||
.rtp-platform.is-yt .rtp-platform-left::before{ | |||
background-image: | |||
url("/index.php/Special:Redirect/file/icon_ytb2.png"), | |||
url("/w/index.php/Special:Redirect/file/icon_ytb2.png"), | |||
url("/index.php/Special:FilePath/icon_ytb2.png"), | |||
url("/w/index.php/Special:FilePath/icon_ytb2.png"); | |||
} | |||
/* Twitch (troque o nome do arquivo se necessário) */ | |||
.rtp-platform.is-tw .rtp-platform-left::before{ | |||
background-image: | |||
url("/index.php/Special:Redirect/file/icon_twitch2.png"), | |||
url("/w/index.php/Special:Redirect/file/icon_twitch2.png"), | |||
url("/index.php/Special:FilePath/icon_twitch2.png"), | |||
url("/w/index.php/Special:FilePath/icon_twitch2.png"); | |||
} | |||
/* ========================================= | |||
Criadores Parceiros — Toggle Mostrar/Ocultar | |||
========================================= */ | |||
/* o card vira referência pro botão */ | |||
.rtp-platform{ | |||
position: relative; | |||
} | |||
/* dá espaço à direita pra não encobrir o conteúdo do header */ | |||
.rtp-platform .rtp-platform-head{ | |||
padding-right: 150px; | |||
} | |||
/* botão "Mostrar ▸ / Ocultar ▾" */ | |||
.rtp-platform .mw-collapsible-toggle{ | |||
position: absolute; | position: absolute; | ||
width: | top: 50%; | ||
box- | right: 18px; | ||
transform: translateY(-50%); | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 6px; | |||
padding: 8px 12px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(120,90,255,.35); | |||
background: rgba(120,90,255,.10); | |||
font-weight: 800; | |||
font-size: 13px; | |||
letter-spacing: .2px; | |||
text-decoration: none !important; | |||
box-shadow: 0 10px 22px rgba(90,60,255,.10); | |||
} | |||
/* cor do link dentro do toggle */ | |||
.rtp-platform .mw-collapsible-toggle a{ | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
/* remove os colchetes [ ] padrão do MediaWiki */ | |||
.rtp-platform .mw-collapsible-toggle-bracket{ | |||
display: none; | |||
} | |||
/* hover/active */ | |||
.rtp-platform .mw-collapsible-toggle:hover{ | |||
background: rgba(120,90,255,.16); | |||
transform: translateY(-50%) scale(1.03); | |||
} | |||
.rtp-platform .mw-collapsible-toggle:active{ | |||
transform: translateY(-50%) scale(.99); | |||
} | |||
/* ========================================= | |||
RTP Platform — fix do toggle (Mostrar/Ocultar) | |||
Não sobrepor conteúdo quando expandir | |||
========================================= */ | |||
/* Grid: [header] [toggle] na 1ª linha, conteúdo na 2ª */ | |||
.rtp-platform.mw-collapsible{ | |||
display: grid; | |||
grid-template-columns: 1fr auto; | |||
grid-template-rows: auto auto; | |||
row-gap: 14px; /* espaço entre header e conteúdo */ | |||
} | |||
/* Header fica na coluna 1 */ | |||
.rtp-platform .rtp-platform-head{ | |||
grid-column: 1; | |||
grid-row: 1; | |||
align-self: center; | |||
margin: 0 !important; | |||
} | |||
/* Conteúdo ocupa a linha inteira abaixo */ | |||
.rtp-platform .mw-collapsible-content{ | |||
grid-column: 1 / -1; | |||
grid-row: 2; | |||
} | |||
/* O toggle (MW injeta como filho direto do mw-collapsible) vai pra coluna 2 */ | |||
.rtp-platform.mw-collapsible > .mw-collapsible-toggle{ | |||
grid-column: 2; | |||
grid-row: 1; | |||
align-self: center; | |||
justify-self: end; | |||
/* mata o comportamento padrão do MW */ | |||
float: none !important; | |||
position: relative !important; | |||
margin: 0 18px auto 18px !important; | |||
/* visual mais destacado */ | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 6px; | |||
padding: 8px 12px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(120,90,255,.35); | |||
background: rgba(120,90,255,.10); | |||
font-weight: 800; | |||
font-size: 13px; | |||
letter-spacing: .2px; | |||
box-shadow: 0 10px 22px rgba(90,60,255,.10); | |||
} | |||
.rtp-platform.mw-collapsible > .mw-collapsible-toggle a{ | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
/* remove os colchetes [ ] padrão */ | |||
.rtp-platform.mw-collapsible > .mw-collapsible-toggle .mw-collapsible-toggle-bracket{ | |||
display: none !important; | |||
} | |||
/* ================================ | |||
RagnaTrue - Top 3 Global (Tabela) | |||
================================ */ | |||
.rt-rewards-table.rt-top3 th, | |||
.rt-rewards-table.rt-top3 td{ | |||
vertical-align: middle; | |||
} | |||
/* Centraliza Colocação + Recompensa */ | |||
.rt-rewards-table.rt-top3 th:nth-child(1), | |||
.rt-rewards-table.rt-top3 td:nth-child(1), | |||
.rt-rewards-table.rt-top3 th:nth-child(2), | |||
.rt-rewards-table.rt-top3 td:nth-child(2){ | |||
text-align: center; | |||
} | |||
/* Pill da colocação (simples e limpo) */ | |||
.rt-top3 .rt-place-pill{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 6px 12px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
letter-spacing: .2px; | |||
border: 1px solid rgba(120,90,255,.28); | |||
background: rgba(120,90,255,.08); | |||
} | |||
/* Card da recompensa (tema roxo claro) */ | |||
.rt-top3 .rt-rewardbox{ | |||
background: linear-gradient(180deg, | |||
rgba(120,90,255,.08), | |||
rgba(120,90,255,.03) | |||
); | |||
border: 1px solid rgba(120,90,255,.20); | |||
box-shadow: 0 10px 22px rgba(40,30,90,.07); | |||
} | |||
.rt-top3 .rt-reward-money{ | |||
font-size: 18px; | |||
font-weight: 900; | |||
} | |||
.rt-top3 .rt-reward-extra{ | |||
font-weight: 700; | |||
opacity: .9; | |||
} | |||
/* Coluna do vencedor (empilha e centraliza bonitinho) */ | |||
.rt-top3 .rt-winner{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
text-align: center; | |||
} | |||
.rt-top3 .rt-winner-hint{ | |||
font-size: 12px; | |||
opacity: .75; | |||
} | |||
.rt-top3 .rt-winner-name{ | |||
font-weight: 900; | |||
} | |||
.rt-top3 .rt-winner img, | |||
.rt-top3 .rt-winner .rt-winner-sprite{ | |||
max-width: 90px; | |||
height: auto; | |||
image-rendering: pixelated; | |||
} | |||
/* ================================ | |||
Top 3 - cores (Ouro/Prata/Bronze) | |||
================================ */ | |||
/* Base (caso esqueça de pôr a variação) */ | |||
.rt-top3 .rt-place-pill{ | |||
color: #2b1b00; | |||
} | |||
/* OURO (premium mais escuro) */ | |||
.rt-top3 .rt-place-pill.is-gold{ | |||
color:#1b1407; | |||
border:1px solid rgba(140, 96, 18, .85); | |||
background: linear-gradient( | |||
180deg, | |||
rgba(255, 239, 196, .95) 0%, | |||
rgba(229, 196, 110, .92) 42%, | |||
rgba(167, 118, 30, .90) 78%, | |||
rgba(122, 79, 0, .86) 100% | |||
); | |||
box-shadow: | |||
0 0 0 2px rgba(255,255,255,.65), | |||
0 10px 22px rgba(120, 80, 10, .16), | |||
inset 0 1px 0 rgba(255,255,255,.85), | |||
inset 0 -1px 0 rgba(70, 40, 0, .22); | |||
} | |||
/* PRATA (já no padrão “contorno melhor”) */ | |||
.rt-top3 .rt-place-pill.is-silver{ | |||
color:#101826; | |||
border:1px solid rgba(120,140,175,.80); | |||
background: linear-gradient( | |||
180deg, | |||
rgba(235,242,255,.95) 0%, | |||
rgba(214,226,245,.92) 55%, | |||
rgba(198,213,236,.88) 100% | |||
); | |||
box-shadow: | |||
0 0 0 2px rgba(255,255,255,.70), | |||
0 10px 22px rgba(55, 80, 120, .12), | |||
inset 0 1px 0 rgba(255,255,255,.85), | |||
inset 0 -1px 0 rgba(70, 95, 140, .18); | |||
} | |||
/* BRONZE (cobre/bronze elegante, sem “laranjão”) */ | |||
.rt-top3 .rt-place-pill.is-bronze{ | |||
color:#1f120a; | |||
border:1px solid rgba(144, 84, 52, .78); | |||
background: linear-gradient( | |||
180deg, | |||
rgba(255, 231, 220, .95) 0%, | |||
rgba(227, 171, 139, .92) 45%, | |||
rgba(176, 105, 70, .90) 80%, | |||
rgba(120, 63, 34, .86) 100% | |||
); | |||
box-shadow: | |||
0 0 0 2px rgba(255,255,255,.65), | |||
0 10px 22px rgba(120, 70, 40, .14), | |||
inset 0 1px 0 rgba(255,255,255,.82), | |||
inset 0 -1px 0 rgba(70, 30, 10, .20); | |||
} | |||
/* ================================ | |||
Valor em R$ (pill premium) | |||
================================ */ | |||
.rt-reward-money{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
padding:6px 12px; | |||
border-radius:999px; | |||
font-weight:900; | |||
letter-spacing:.2px; | |||
line-height:1; | |||
font-variant-numeric: tabular-nums; | |||
/* texto ouro/âmbar (legível no lilás) */ | |||
color:#6f4200; | |||
text-shadow: | |||
0 1px 0 rgba(255,255,255,.75), | |||
0 6px 14px rgba(60,35,0,.18); | |||
/* pill champagne */ | |||
background: linear-gradient(180deg, | |||
rgba(255,255,255,.92), | |||
rgba(255,246,224,.78) | |||
); | |||
border: 1px solid rgba(176,118,10,.42); | |||
box-shadow: | |||
inset 0 1px 0 rgba(255,255,255,.95), | |||
inset 0 -1px 0 rgba(110,70,0,.10), | |||
0 10px 22px rgba(40,30,90,.10); | |||
} | |||
/* Visual do Top (gif) com cantos arredondados */ | |||
.rtp-visual-card{ | |||
border-radius: 16px; /* ajuste aqui */ | |||
overflow: hidden; /* ESSENCIAL pra recortar o gif */ | |||
} | |||
/* imagem do arquivo (MediaWiki) */ | |||
.rtp-visual-card .rtp-sprite, | |||
.rtp-visual-card .mw-file-element{ | |||
border-radius: 16px; /* mesmo valor do card */ | |||
display: block; /* evita “bordinha/folga” */ | |||
} | |||
/* centraliza toda a premiação dentro da célula */ | |||
.rt-reward-cell{ | |||
text-align: center; | |||
vertical-align: middle; | |||
} | |||
.rt-reward-center{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
} | |||
/* ========================================= | |||
Pódio / Top3 — Recompensa (Pill + Visual) lado a lado | |||
========================================= */ | |||
.rt-rewards-table.rt-top3 tr > td:nth-child(2){ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 16px; | |||
flex-wrap: nowrap; /* tenta manter na mesma linha */ | |||
padding: 18px 14px; | |||
text-align: center; | |||
font-size: 0; /* mata o "+" e quebras soltas (texto fora de div) */ | |||
line-height: 0; | |||
} | |||
/* some com <br> que sobra em algumas linhas */ | |||
.rt-rewards-table.rt-top3 tr > td:nth-child(2) br{ | |||
display: none; | |||
} | } | ||
. | /* garante que os 2 blocos não ocupem 100% de largura */ | ||
.rt-rewards-table.rt-top3 tr > td:nth-child(2) .rt-reward-money, | |||
.rt-rewards-table.rt-top3 tr > td:nth-child(2) .rtp-visual-center{ | |||
flex: 0 0 auto; | |||
width: auto !important; | width: auto !important; | ||
margin: 0 !important; | |||
} | |||
/* restaura tamanhos de fonte (porque o td está com font-size:0) */ | |||
.rt-rewards-table.rt-top3 .rt-reward-money{ | |||
font-size: 18px; | |||
line-height: 1; | |||
} | |||
.rt-rewards-table.rt-top3 .rtp-visual-foot{ | |||
font-size: 13px; | |||
line-height: 1.25; | |||
} | |||
/* se algum CSS seu estiver forçando a área do visual a quebrar linha */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-center{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
/* ========================================= | |||
Legenda do visual: mais respiro + não cortar a 1ª letra | |||
========================================= */ | |||
/* Se você usa a legenda no seu <div class="rtp-visual-foot"> */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-foot{ | |||
margin-top: 10px !important; /* afasta do gif */ | |||
padding: 0 12px 2px !important; /* evita "comer" a 1ª letra */ | |||
line-height: 1.25 !important; | |||
text-align: center; | |||
display: inline-block; | |||
} | |||
/* Se você usa caption no próprio [[File:...|...|Asas...]] (vira .thumbcaption) */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-card .thumbcaption{ | |||
margin-top: 10px !important; | |||
padding: 0 12px 2px !important; | |||
line-height: 1.25 !important; | |||
text-align: center; | |||
} | |||
/* Evita qualquer recorte por overflow de wrapper do thumb */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-card, | |||
.rt-rewards-table.rt-top3 .rtp-visual-card .thumbinner{ | |||
overflow: visible !important; | |||
} | |||
/* Recompensa inline: pill + "+" + visual */ | |||
.rt-top3 td.rt-reward-cell .rt-reward-inline{ | |||
display: flex; | |||
align-items: center; /* centraliza vertical */ | |||
justify-content: center; /* centraliza no meio da coluna */ | |||
gap: 12px; | |||
flex-wrap: wrap; /* no mobile quebra bonito */ | |||
} | |||
/* "+" premium (combina com o dourado do money) */ | |||
.rt-top3 .rt-reward-plus{ | |||
position: relative; | |||
width: 24px; | |||
height: 24px; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 999px; | |||
line-height: 1; | |||
font-weight: 1000; | |||
font-size: 14px; | |||
color: #6b3f00; | |||
background: linear-gradient(180deg, | |||
rgba(255,255,255,.95), | |||
rgba(255,242,220,.85) | |||
); | |||
border: 1px solid rgba(166,110,0,.48); | |||
box-shadow: | |||
inset 0 1px 0 rgba(255,255,255,.95), | |||
0 8px 16px rgba(40,30,90,.10); | |||
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; | |||
transform: translateZ(0); | |||
} | |||
/* “Conectores” laterais */ | |||
.rt-top3 .rt-reward-plus::before, | |||
.rt-top3 .rt-reward-plus::after{ | |||
content:""; | |||
position:absolute; | |||
top:50%; | |||
width: 12px; | |||
height: 1px; | |||
transform: translateY(-50%); | |||
opacity: .9; | |||
background: linear-gradient(90deg, | |||
rgba(166,110,0,0), | |||
rgba(166,110,0,.55), | |||
rgba(166,110,0,0) | |||
); | |||
} | |||
.rt-top3 .rt-reward-plus::before{ left: -14px; } | |||
.rt-top3 .rt-reward-plus::after { right: -14px; } | |||
.rt-top3 .rt-reward-plus:hover{ | |||
transform: translateY(-1px); | |||
box-shadow: | |||
inset 0 1px 0 rgba(255,255,255,.95), | |||
0 10px 20px rgba(40,30,90,.14); | |||
filter: saturate(1.05); | |||
} | |||
.rt-top3 td.rt-reward-cell .rt-reward-inline{ | |||
gap: 14px; /* um pouco mais “respirado” */ | |||
flex-wrap: nowrap; /* mantém tudo na mesma linha */ | |||
} | |||
@media (max-width: 720px){ | |||
.rt-top3 td.rt-reward-cell .rt-reward-inline{ | |||
flex-wrap: wrap; /* no mobile ele quebra bonitinho */ | |||
justify-content: center; | |||
} | |||
} | |||
/* ========================================= | |||
FIX: legenda do visual “comendo” letras | |||
(Top 1 Classe + Expandidas + Top3) | |||
========================================= */ | |||
/* garante que nada corte a legenda */ | |||
.rtp-visual-card{ | |||
overflow: visible !important; | |||
} | |||
/* legenda (texto abaixo do gif) com respiro e sem clipping */ | |||
.rtp-visual-card .rtp-visual-foot{ | |||
display: block; | |||
margin: 10px auto 0 !important; /* afasta do gif */ | |||
padding: 3px 12px 6px !important; /* evita cortar topo/baixo das letras */ | |||
line-height: 1.25 !important; /* MUITO importante pro “A” não sumir */ | |||
text-indent: 0 !important; | |||
overflow: visible !important; | |||
white-space: normal; | |||
word-break: break-word; | |||
} | |||
/* se algum reset do bloco de recompensa estiver agressivo */ | |||
.rt-reward-center, | |||
.rt-reward-cell{ | |||
line-height: 1.25; | |||
} | |||
/* ================================ | |||
Pets - Tema roxo claro (EV style) | |||
Escopo: .pet-page-light | |||
================================ */ | |||
.pet-page-light{ | |||
--pet-ink: #1d1536; | |||
--pet-muted:#5c527a; | |||
--pet-line: rgba(120,90,255,.22); | |||
--pet-soft: rgba(120,90,255,.10); | |||
--pet-soft2: rgba(120,90,255,.06); | |||
} | |||
/* Intro box */ | |||
.pet-page-light .pet-intro{ | |||
max-width: 980px; | |||
margin: 10px auto 18px; | |||
padding: 14px 16px; | |||
border-radius: 18px; | |||
border: 1px solid var(--pet-line); | |||
background: linear-gradient(180deg, rgba(120,90,255,.12), rgba(120,90,255,.05)); | |||
box-shadow: 0 12px 26px rgba(40,30,90,.08); | |||
color: var(--pet-ink); | |||
} | |||
.pet-page-light .pet-muted{ color: var(--pet-muted); } | |||
.pet-page-light .pet-chips{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:10px; | |||
margin-top:10px; | |||
} | |||
.pet-page-light .pet-chip{ | |||
display:inline-flex; | |||
align-items:center; | |||
padding:6px 10px; | |||
border-radius:999px; | |||
font-weight:900; | |||
font-size:12px; | |||
color: var(--pet-ink); | |||
background: rgba(255,255,255,.70); | |||
border: 1px solid rgba(120,90,255,.18); | |||
} | |||
/* Categorias grid */ | |||
.pet-page-light .pet-cats-grid{ | |||
max-width: 980px; | |||
margin: 0 auto 10px; | |||
display:grid; | |||
gap:14px; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
} | |||
@media (max-width: 980px){ | |||
.pet-page-light .pet-cats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } | |||
} | |||
@media (max-width: 520px){ | |||
.pet-page-light .pet-cats-grid{ grid-template-columns: 1fr; } | |||
} | |||
.pet-page-light .pet-cat-card{ | |||
padding: 14px; | |||
border-radius: 18px; | |||
border: 1px solid var(--pet-line); | |||
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)); | |||
box-shadow: 0 12px 26px rgba(40,30,90,.07); | |||
position: relative; | |||
overflow:hidden; | |||
} | |||
/* filet top premium */ | |||
.pet-page-light .pet-cat-card::before{ | |||
content:""; | |||
position:absolute; | |||
left:0; right:0; top:0; | |||
height:3px; | |||
background: linear-gradient(90deg, rgba(120,90,255,.95), rgba(180,140,255,.95)); | |||
opacity:.9; | |||
} | |||
.pet-page-light .pet-cat-title{ | |||
font-weight:1000; | |||
color: var(--pet-ink); | |||
font-size: 16px; | |||
margin: 2px 0 10px; | |||
} | |||
/* KV estilo “clean” */ | |||
.pet-page-light .pet-kv{ | |||
display:grid; | |||
grid-template-columns: 1fr auto; | |||
gap:8px 10px; | |||
} | |||
.pet-page-light .pet-kv .k{ | |||
color: var(--pet-muted); | |||
font-weight: 700; | |||
padding: 8px 10px; | |||
border-radius: 14px; | |||
background: rgba(120,90,255,.06); | |||
border: 1px solid rgba(120,90,255,.14); | |||
} | |||
.pet-page-light .pet-kv .v{ | |||
color: var(--pet-ink); | |||
font-weight: 1000; | |||
padding: 8px 10px; | |||
border-radius: 14px; | |||
background: rgba(255,255,255,.70); | |||
border: 1px solid rgba(120,90,255,.14); | |||
} | |||
/* Painéis (refino/grade) */ | |||
.pet-page-light .pet-panel{ | |||
max-width: 980px; | |||
margin: 0 auto 12px; | |||
padding: 14px 16px; | |||
border-radius: 18px; | |||
border: 1px solid var(--pet-line); | |||
background: linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.04)); | |||
box-shadow: 0 12px 26px rgba(40,30,90,.08); | |||
} | |||
.pet-page-light .pet-panel-title{ | |||
font-weight:1000; | |||
color: var(--pet-ink); | |||
margin-bottom: 8px; | |||
} | |||
/* Tabelas mais leves */ | |||
.pet-page-light .pet-refine-table{ | |||
width:100%; | |||
margin-top:12px; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 16px; | |||
overflow:hidden; | |||
border: 1px solid rgba(120,90,255,.20); | |||
background: rgba(255,255,255,.58); | |||
} | |||
.pet-page-light .pet-refine-table th{ | |||
padding: 10px 12px; | |||
text-align:center; | |||
font-weight:1000; | |||
color: var(--pet-ink); | |||
background: rgba(120,90,255,.10); | |||
border-bottom: 1px solid rgba(120,90,255,.18); | |||
} | |||
.pet-page-light .pet-refine-table td{ | |||
padding: 10px 12px; | |||
text-align:center; | |||
color: var(--pet-muted); | |||
border-bottom: 1px solid rgba(120,90,255,.14); | |||
} | |||
.pet-page-light .pet-refine-table tr:last-child td{ border-bottom:0; } | |||
/* Lista grade */ | |||
.pet-page-light .pet-grade-list{ | |||
margin: 12px 0 0; | |||
padding-left: 18px; | |||
color: var(--pet-muted); | |||
} | |||
/* Listas (só espaçamento, não mexe no que você já gostou) */ | |||
.pet-page-light .pet-lists{ | |||
max-width: 980px; | |||
margin: 0 auto; | |||
display:grid; | |||
gap:14px; | |||
} | |||
/* ========================================================= | |||
PETS — Tema Roxo Claro (ev-h) | |||
Escopo seguro: .petlite-page | |||
========================================================= */ | |||
.petlite-page{ | |||
--p-accent: rgba(120,90,255,.22); | |||
--p-accent2: rgba(120,90,255,.10); | |||
--p-ink: rgba(35,25,95,.92); | |||
--p-muted: rgba(55,45,115,.78); | |||
--p-card: rgba(255,255,255,.72); | |||
--p-shadow: 0 10px 22px rgba(40,30,90,.08); | |||
} | |||
/* sprite do topo */ | |||
.petlite-page .petlite-sprite{ | |||
margin: 6px auto 10px; | |||
image-rendering: pixelated; | |||
} | |||
/* HERO */ | |||
.petlite-page .petlite-hero{ | |||
max-width: 920px; | |||
margin: 0 auto 18px; | |||
padding: 18px 20px; | |||
border-radius: 18px; | |||
border: 1px solid var(--p-accent); | |||
background: linear-gradient(180deg, var(--p-accent2), rgba(120,90,255,.05)); | |||
box-shadow: var(--p-shadow); | |||
} | |||
.petlite-page .petlite-hero-h{ | |||
font-weight: 900; | |||
font-size: 20px; | |||
letter-spacing: .2px; | |||
margin-bottom: 6px; | |||
color: var(--p-ink); | |||
} | |||
.petlite-page .petlite-muted{ | |||
color: var(--p-muted); | |||
margin: 0; | |||
line-height: 1.55; | |||
} | |||
.petlite-page .petlite-chips{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap: 8px; | |||
margin-top: 12px; | |||
} | |||
.petlite-page .petlite-chip{ | |||
display:inline-flex; | |||
align-items:center; | |||
padding: 6px 10px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 900; | |||
color: var(--p-ink); | |||
background: rgba(120,90,255,.08); | |||
border: 1px solid var(--p-accent); | |||
} | |||
/* GRID CATEGORIAS */ | |||
.petlite-page .petlite-grid{ | |||
max-width: 920px; | |||
margin: 0 auto 16px; | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); | |||
gap: 14px; | |||
} | |||
.petlite-page .petlite-cat{ | |||
padding: 14px 14px 12px; | |||
border-radius: 16px; | |||
border: 1px solid var(--p-accent); | |||
background: var(--p-card); | |||
box-shadow: var(--p-shadow); | |||
} | |||
.petlite-page .petlite-cat-h{ | |||
font-weight: 1000; | |||
color: var(--p-ink); | |||
margin-bottom: 10px; | |||
letter-spacing: .2px; | |||
} | |||
.petlite-page .petlite-kv{ | |||
display:grid; | |||
grid-template-columns: 1fr auto; | |||
gap: 8px 10px; | |||
align-items:center; | |||
} | |||
.petlite-page .petlite-kv .k{ | |||
color: var(--p-muted); | |||
font-weight: 700; | |||
} | |||
.petlite-page .petlite-kv .v{ | |||
color: var(--p-ink); | |||
font-weight: 1000; | |||
} | |||
/* PAINÉIS (Refino / Grade) */ | |||
.petlite-page .petlite-panel{ | |||
max-width: 920px; | |||
margin: 0 auto 16px; | |||
padding: 16px 16px 14px; | |||
border-radius: 18px; | |||
border: 1px solid var(--p-accent); | |||
background: linear-gradient(180deg, rgba(120,90,255,.08), rgba(255,255,255,.62)); | |||
box-shadow: var(--p-shadow); | |||
} | |||
.petlite-page .petlite-panel-h{ | |||
font-weight: 1000; | |||
color: var(--p-ink); | |||
margin: 0 0 8px; | |||
letter-spacing: .2px; | |||
} | |||
/* TABELAS (claras, sem “darkão”) */ | |||
.petlite-page table.petlite-table{ | |||
width: 100%; | |||
margin-top: 12px; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 16px; | |||
overflow: hidden; | |||
border: 1px solid var(--p-accent); | |||
background: rgba(255,255,255,.70); | |||
} | |||
.petlite-page table.petlite-table th{ | |||
padding: 10px; | |||
text-align: center; | |||
font-weight: 1000; | |||
color: #fff; | |||
background: linear-gradient(180deg, rgba(120,90,255,.78), rgba(120,90,255,.58)); | |||
} | |||
.petlite-page table.petlite-table td{ | |||
padding: 10px; | |||
text-align: center; | |||
color: var(--p-ink); | |||
background: rgba(120,90,255,.05); | |||
border-top: 1px solid rgba(120,90,255,.14); | |||
} | |||
.petlite-page table.petlite-table tr:nth-child(even) td{ | |||
background: rgba(120,90,255,.08); | |||
} | |||
.petlite-page .petlite-notes{ | |||
margin: 10px 0 0; | |||
padding-left: 18px; | |||
color: var(--p-muted); | |||
} | |||
.petlite-page .petlite-notes li{ margin: 6px 0; } | |||
/* TABELA LISTA DE PETS (simples e leve) */ | |||
.petlite-page table.petlite-list-table{ | |||
width: 100%; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
} | |||
.petlite-page table.petlite-list-table th{ | |||
padding: 10px; | |||
text-align: left; | |||
color: var(--p-ink); | |||
font-weight: 1000; | |||
border-bottom: 1px solid rgba(120,90,255,.18); | |||
} | |||
.petlite-page table.petlite-list-table td{ | |||
padding: 12px 10px; | |||
vertical-align: middle; | |||
border-bottom: 1px solid rgba(120,90,255,.12); | |||
} | |||
.petlite-page table.petlite-list-table img{ | |||
image-rendering: pixelated; | |||
} | |||
/* ================================ | |||
Mascotes - ajuste premium nos cards do bp-exp-summary | |||
(isolado pra não afetar Passe) | |||
================================ */ | |||
.petcats-sum .bp-exp-card{ | |||
border: 1px solid rgba(124,92,255,.22); | |||
background: linear-gradient(180deg, rgba(124,92,255,.08), rgba(255,255,255,.86)); | |||
box-shadow: 0 14px 34px rgba(40,30,90,.10); | |||
} | } | ||
. | /* título maior + linha divisória */ | ||
.petcats-sum .bp-exp-label{ | |||
font-size: 14px; /* aumenta */ | |||
letter-spacing: .6px; | |||
text-transform: uppercase; | |||
color: #5b2cff; | |||
padding-bottom: 10px; | |||
margin-bottom: 10px; | |||
border-bottom: 1px solid rgba(124,92,255,.18); | |||
} | |||
/* se quiser uma linha mais “premium”, troca o border-bottom acima por isso: | |||
.petcats-sum .bp-exp-label{ | |||
... (mantém tudo) | |||
border-bottom: none; | |||
position: relative; | |||
} | |||
.petcats-sum .bp-exp-label::after{ | |||
content:""; | |||
position:absolute; | |||
left:0; right:0; | |||
bottom:-2px; | |||
height:1px; | |||
background: linear-gradient(90deg, | |||
rgba(124,92,255,0), | |||
rgba(124,92,255,.35), | |||
rgba(124,92,255,0)); | |||
} | |||
*/ | |||
/* espaçamento dos itens */ | |||
.petcats-sum .bp-exp-value{ | |||
margin-top: 6px; | |||
} | |||
/* Clique-para-copiar (usado no /navi etc.) */ | |||
.rt-copycode{ | |||
cursor: pointer; | |||
user-select: none; | |||
display: inline-block; | |||
padding: 2px 8px; | |||
border-radius: 10px; | |||
border: 1px solid rgba(140, 120, 255, .35); | |||
background: rgba(140, 120, 255, .08); | |||
transition: transform .12s ease, box-shadow .12s ease, background .12s ease; | |||
} | |||
.rt-copycode:hover{ | |||
background: rgba(140, 120, 255, .12); | |||
box-shadow: 0 8px 18px rgba(70, 40, 160, .12); | |||
transform: translateY(-1px); | |||
} | |||
.rt-copycode.is-copied{ | |||
box-shadow: 0 10px 24px rgba(70, 40, 160, .18); | |||
} | |||
.rt-copycode.is-copied::after{ | |||
content: "Copiado!"; | |||
margin-left: 8px; | |||
font-weight: 700; | |||
font-size: 12px; | |||
opacity: .9; | |||
} | |||
/* Ícone "copiar" no começo */ | |||
.rt-copycode{ | |||
position: relative; | position: relative; | ||
padding-left: 28px; /* espaço pro ícone */ | |||
} | } | ||
. | .rt-copycode::before{ | ||
content: ""; | |||
position: absolute; | |||
left: 9px; | |||
top: 50%; | top: 50%; | ||
width: 14px; | |||
height: 14px; | |||
transform: translateY(-50%); | transform: translateY(-50%); | ||
opacity: .75; | |||
background-repeat: no-repeat; | |||
background-size: 14px 14px; | |||
/* SVG inline (copy icon) */ | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23785aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); | |||
} | |||
/* Hover deixa o ícone mais evidente */ | |||
.rt-copycode:hover::before{ | |||
opacity: .95; | |||
} | |||
/* Quando copiar, troca pra "check" */ | |||
.rt-copycode.is-copied::before{ | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); | |||
opacity: .95; | |||
} | |||
code.rt-copycode{ | |||
background: transparent; | |||
border: 0; | |||
padding: 0; | |||
} | |||
.rt-copycode{ | |||
position:relative; | |||
display:inline-block; | |||
padding:10px 14px 10px 54px; /* texto mais pra direita (mais “respiro”) */ | |||
line-height:1.1; | |||
} | |||
.rt-copycode::before{ | |||
content:""; | |||
position:absolute; | |||
left:10px; | |||
right:2px; | |||
top:50%; | |||
transform:translateY(-50%); | |||
width:16px; | |||
height:16px; | |||
pointer-events:none; | |||
} | |||
#firstHeading, | |||
.mw-first-heading, | |||
.firstHeading { | |||
display: none !important; | |||
} | |||
/* VIP KV – escopo local */ | |||
.vip-kv{ | |||
margin-top:10px; | |||
border:1px solid rgba(120,90,255,.18); | |||
border-radius:14px; | |||
background:rgba(120,90,255,.06); | |||
overflow:hidden; | |||
} | |||
.vip-kv .vip-k, | |||
.vip-kv .vip-v{ | |||
padding:10px 14px; | |||
border-top:1px solid rgba(120,90,255,.12); | |||
} | |||
.vip-kv .vip-k:nth-child(1), | |||
.vip-kv .vip-v:nth-child(2){ | |||
border-top:none; | |||
} | |||
.vip-kv{ | |||
display:grid; | |||
grid-template-columns: 220px 1fr; | |||
} | |||
.vip-kv .vip-k{ | |||
font-weight:800; | |||
color:#3b2a9b; | |||
background:rgba(120,90,255,.08); | |||
} | |||
.vip-kv .vip-v{ | |||
color:#2b2b2b; | |||
} | |||
/* mobile */ | |||
@media (max-width: 720px){ | |||
.vip-kv{ grid-template-columns: 1fr; } | |||
.vip-kv .vip-k{ border-top:1px solid rgba(120,90,255,.12); } | |||
} | |||
/* ================================ | |||
MVP PAGE (isolado) — roxo claro | |||
================================ */ | |||
.mvp-page .rt-subtag{ | |||
margin: 10px auto 16px; | |||
text-align:center; | |||
font-weight: 800; | |||
letter-spacing:.2px; | |||
color: rgba(55,30,120,.9); | |||
} | |||
/* GRID da Loja (NPC à esquerda + tabela à direita) */ | |||
.mvp-page .mvp-shop-grid{ | |||
display: grid; | |||
grid-template-columns: 240px 1fr; | |||
gap: 16px; | |||
align-items: start; | |||
margin: 10px auto 18px; | |||
} | |||
@media (max-width: 860px){ | |||
.mvp-page .mvp-shop-grid{ grid-template-columns: 1fr; } | |||
} | |||
/* Card “label” estilo voto (novo) */ | |||
.mvp-page .mvp-box{ | |||
border: 1px solid rgba(120,90,255,.22); | |||
background: linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.05)); | |||
border-radius: 16px; | |||
box-shadow: 0 10px 22px rgba(40,30,90,.08); | |||
overflow: hidden; /* segura bordas da tabela */ | |||
} | |||
.mvp-page .mvp-box-label{ | |||
text-align: center; | |||
font-weight: 900; | |||
letter-spacing: .6px; | |||
padding: 10px 12px; | |||
color: rgba(45,20,110,.92); | |||
background: linear-gradient(180deg, rgba(120,90,255,.18), rgba(120,90,255,.10)); | |||
border-bottom: 1px solid rgba(120,90,255,.22); | |||
} | |||
/* TABELAS novas (ranking e loja) */ | |||
.mvp-page table.mvp-table, | |||
.mvp-page table.mvp-shop-table{ | |||
width: 100%; | |||
margin: 0; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
table-layout: fixed; /* evita “explodir” */ | |||
background: rgba(255,255,255,.70); | |||
} | |||
.mvp-page table.mvp-table th, | |||
.mvp-page table.mvp-shop-table th{ | |||
padding: 12px 10px; | |||
text-align: center; | |||
font-weight: 900; | |||
color: rgba(35,18,80,.95); | |||
background: rgba(120,90,255,.10); | |||
border-bottom: 1px solid rgba(120,90,255,.18); | |||
} | |||
.mvp-page table.mvp-table td, | |||
.mvp-page table.mvp-shop-table td{ | |||
padding: 12px 12px; | |||
vertical-align: middle; | |||
border-bottom: 1px solid rgba(120,90,255,.12); | |||
overflow-wrap: anywhere; /* segura textos/links longos */ | |||
} | |||
.mvp-page table.mvp-table tr:last-child td, | |||
.mvp-page table.mvp-shop-table tr:last-child td{ | |||
border-bottom: 0; | |||
} | |||
.mvp-page table.mvp-table td:nth-child(1){ text-align:center; font-weight:900; } | |||
.mvp-page table.mvp-table td:nth-child(2){ text-align:center; } | |||
/* Se tiver imagem em célula, não estoura */ | |||
.mvp-page table.mvp-table img, | |||
.mvp-page table.mvp-shop-table img{ | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Pill do /navi copiável dentro do card do NPC (sem quadrado branco) */ | |||
.mvp-page .mvp-navi-pill{ | |||
display:inline-block; | |||
margin: 8px auto 0; | |||
padding: 8px 4px; | |||
border: 1px solid rgba(120,90,255,.25); | |||
border-radius: 999px; | |||
background: rgba(120,90,255,.08); | |||
font-family: monospace; | |||
font-weight: 800; | |||
letter-spacing: .2px; | |||
} | |||
/* Ajuste fino: se seu ícone ::before do rt-copycode encostar no texto */ | |||
.mvp-page .mvp-navi-pill.rt-copycode{ | |||
padding-left: 22px; /* cria espaço pro ::before */ | |||
} | |||
.mvp-page .mvp-navi-pill.rt-copycode::before{ | |||
left: 6px; /* mantém o ícone mais pra esquerda */ | |||
} | |||
/* Loja de Voto: só posicionamento lado a lado (não muda visual do NPC) */ | |||
.vote-shop-grid{ | |||
display: grid; | |||
grid-template-columns: 260px 1fr; | |||
gap: 22px; | |||
align-items: start; | |||
max-width: 1100px; | |||
margin: 8px auto 24px; | |||
} | |||
@media (max-width: 960px){ | |||
.vote-shop-grid{ | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
/* === PONTOS DE VOTO: NPC + LOJA lado a lado === */ | |||
.vote-shop-grid{ | |||
display: grid; | |||
grid-template-columns: minmax(240px, 260px) minmax(0, 1fr); | |||
gap: 22px; | |||
align-items: start; | |||
margin: 10px 0 24px; | |||
} | |||
/* Responsivo: empilha no mobile */ | |||
@media (max-width: 900px){ | |||
.vote-shop-grid{ grid-template-columns: 1fr; } | |||
.vote-shop-table .eden-quests-card{ max-width: 100% !important; } | |||
} | |||
/* === “Balão” do /navi (mantém o visual premium antigo) === */ | |||
.rt-copycode.rt-navi-pill{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 14px 8px 24px !important; /* espaço pro ícone */ | |||
border: 1px solid rgba(120,90,255,.25) !important; | |||
border-radius: 999px !important; | |||
background: rgba(120,90,255,.08) !important; | |||
font-family: monospace; | |||
font-weight: 700; | |||
letter-spacing: .2px; | |||
cursor: pointer; | |||
user-select: none; | |||
position: relative; | |||
} | |||
/* Se o seu ícone de copiar vem do ::before do .rt-copycode, garante que ele não “cole” no texto */ | |||
.rt-copycode.rt-navi-pill::before{ | |||
left: 6px !important; | |||
top: 50% !important; | |||
transform: translateY(-50%) !important; | |||
} | |||
/* ===== Loja Pontos de Voto: tabela com cantos arredondados ===== */ | |||
.vote-shop-store .eden-quests-table{ | |||
border-collapse: separate !important; /* necessário p/ radius funcionar */ | |||
border-spacing: 0 !important; | |||
border-radius: 14px; | |||
overflow: hidden; /* recorta o header e as bordas */ | |||
} | |||
/* garante que o “recorte” funcione em todos os browsers */ | |||
.vote-shop-store .eden-quests-table{ | |||
background: rgba(120,90,255,.06); | |||
} | |||
/* arredonda os cantos no header (primeira linha de TH) */ | |||
.vote-shop-store .eden-quests-table tr:first-child th:first-child{ | |||
border-top-left-radius: 14px; | |||
} | |||
.vote-shop-store .eden-quests-table tr:first-child th:last-child{ | |||
border-top-right-radius: 14px; | |||
} | |||
/* arredonda os cantos na última linha */ | |||
.vote-shop-store .eden-quests-table tr:last-child td:first-child{ | |||
border-bottom-left-radius: 14px; | |||
} | |||
.vote-shop-store .eden-quests-table tr:last-child td:last-child{ | |||
border-bottom-right-radius: 14px; | |||
} | |||
/* ================================ | |||
RT • Loja Roxo-Claro (padrão) | |||
(NPC + tabela no mesmo card) | |||
================================ */ | |||
.rt-shop-store{ | |||
max-width: 980px; | |||
margin: 10px auto 26px; | |||
} | |||
.rt-shop-card{ | |||
position: relative; | |||
padding: 22px 22px 18px; | |||
border-radius: 22px; | |||
border: 1px solid rgba(120,90,255,.18); | |||
background: rgba(120,90,255,.06); | |||
box-shadow: 0 16px 34px rgba(20,0,60,.12); | |||
} | |||
.rt-shop-label{ | |||
position: absolute; | position: absolute; | ||
top: -14px; | |||
left: 18px; | |||
padding: 7px 14px; | |||
border-radius: 999px; | |||
background: linear-gradient(180deg, rgba(120,90,255,1), rgba(92,66,240,1)); | |||
color: #fff; | |||
font-weight: 900; | |||
letter-spacing: .7px; | |||
text-transform: uppercase; | |||
font-size: 12px; | |||
box-shadow: 0 12px 26px rgba(60,40,200,.25); | |||
} | |||
.rt-shop-npc{ | |||
display: flex; | |||
justify-content: center; | |||
margin: 6px auto 14px; | |||
} | |||
/* mantém o NPC card intacto, só remove “respiros” extras quando estiver dentro da loja */ | |||
.rt-shop-npc .bp-bonus-card{ | |||
margin: 0 auto 10px !important; | |||
} | } | ||
. | /* ===== Tabela arredondada ===== */ | ||
table.wikitable.rt-shop-table{ | |||
width: 100%; | width: 100%; | ||
margin: 0 !important; | |||
border-collapse: separate !important; | |||
border-radius: | border-spacing: 0 !important; | ||
padding: | overflow: hidden; | ||
border: 1px solid | border-radius: 16px; | ||
background: rgba(255,255,255,.55); | |||
border: 1px solid rgba(120,90,255,.22); | |||
} | |||
/* remove heranças do wikitable */ | |||
table.wikitable.rt-shop-table, | |||
table.wikitable.rt-shop-table th, | |||
table.wikitable.rt-shop-table td{ | |||
box-shadow: none !important; | |||
} | |||
table.wikitable.rt-shop-table th{ | |||
padding: 12px 10px; | |||
background: rgba(120,90,255,.12); | |||
color: #2b176b; | |||
font-weight: 900; | |||
text-transform: uppercase; | |||
letter-spacing: .7px; | |||
font-size: 12px; | |||
border-bottom: 1px solid rgba(120,90,255,.22); | |||
} | } | ||
. | table.wikitable.rt-shop-table td{ | ||
padding | padding: 12px 10px; | ||
border: | border-bottom: 1px solid rgba(120,90,255,.16); | ||
} | } | ||
. | /* linhas verticais */ | ||
table.wikitable.rt-shop-table th + th, | |||
table.wikitable.rt-shop-table td + td{ | |||
border-left: 1px solid rgba(120,90,255,.16); | |||
} | } | ||
. | /* última linha sem borda inferior */ | ||
table.wikitable.rt-shop-table tr:last-child td{ | |||
border-bottom: 0; | |||
} | } | ||
/* mobile: dá uma enxugada */ | |||
@media (max-width: 720px){ | |||
padding | .rt-shop-card{ padding: 18px 14px 14px; } | ||
table.wikitable.rt-shop-table th, | |||
table.wikitable.rt-shop-table td{ padding: 10px 8px; } | |||
} | } | ||
. | /* ===== Ajustes finos (MVP) ===== */ | ||
/* 1) Label menor */ | |||
.rt-shop-label{ | |||
top: -12px; | |||
padding: 6px 12px; | |||
font-size: 11px; | |||
letter-spacing: .55px; | |||
box-shadow: 0 10px 22px rgba(60,40,200,.20); | |||
} | } | ||
. | /* 2) Tabela maior (ocupar mais espaço no card) */ | ||
.rt-shop-card{ | |||
max-width: 980px; /* garante que o card não fique estreito */ | |||
margin: 0 auto; | |||
} | } | ||
. | table.wikitable.rt-shop-table{ | ||
max-width: 900px; /* “tamanho visual” da tabela */ | |||
margin: 10px auto 0 !important; | |||
} | } | ||
. | /* se ainda estiver “miúda” por causa do conteúdo, força colunas mais largas */ | ||
table.wikitable.rt-shop-table th, | |||
table.wikitable.rt-shop-table td{ | |||
min-width: 140px; | |||
} | |||
table.wikitable.rt-shop-table th:first-child, | |||
table.wikitable.rt-shop-table td:first-child{ | |||
min-width: 260px; /* ITEM mais largo */ | |||
} | } | ||
. | table.wikitable.rt-shop-table{ max-width: none; width: 100%; } | ||
/* ================================ | |||
RT - Loja (colapsáveis abaixo do NPC) | |||
================================ */ | |||
.eden-page .rt-shop-sections{ | |||
max-width: 920px; | |||
margin: 14px auto 0; | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
gap: 12px; | |||
} | |||
.eden-page .rt-shop-coll{ | |||
position: relative; | |||
width: 100%; | |||
border: 1px solid rgba(120,90,255,.28); | |||
border-radius: 18px; | |||
overflow: hidden; | |||
background: linear-gradient(180deg, rgba(120,90,255,.16), rgba(120,90,255,.06)); | |||
box-shadow: 0 18px 40px rgba(40,10,120,.10); | |||
padding-top: 46px; /* altura da “barra” */ | |||
} | |||
/* “barra” (título do colapsável) */ | |||
.eden-page .rt-shop-coll::before{ | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: 0; left: 0; right: 0; | |||
height: 46px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-weight: 900; | |||
letter-spacing: .8px; | |||
text-transform: uppercase; | |||
color: rgba(40, 10, 120, .95); | |||
background: rgba(120,90,255,.10); | |||
border-bottom: 1px solid rgba(120,90,255,.22); | |||
} | |||
/* botão Mostrar/Ocultar (centralizado verticalmente) */ | |||
.eden-page .rt-shop-coll .mw-collapsible-toggle{ | |||
position: absolute; | |||
top: 0; | |||
right: 10px; | |||
height: 46px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-weight: 800; | |||
font-size: 13px; | |||
line-height: 1; | |||
} | |||
.eden-page .rt-shop-coll .mw-collapsible-toggle a{ | |||
display: inline-flex; | |||
align-items: center; | align-items: center; | ||
padding: . | padding: 8px 12px; | ||
font-size: 1. | border-radius: 999px; | ||
border: 1px solid rgba(120,90,255,.30); | |||
background: rgba(120,90,255,.12); | |||
color: rgba(40, 10, 120, .95); | |||
text-decoration: none !important; | |||
} | |||
/* conteúdo */ | |||
.eden-page .rt-shop-coll .mw-collapsible-content{ | |||
padding: 12px; | |||
} | |||
/* tabela com cantos arredondados dentro do colapsível (sem “explodir”) */ | |||
.eden-page .rt-shop-coll table.eden-quests-table{ | |||
width: 100% !important; | |||
margin: 0 !important; | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
border-radius: 14px; | |||
overflow: hidden; | |||
} | |||
/* garante cantos arredondados nos cantos da tabela */ | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:first-child{ border-top-left-radius: 14px; } | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:last-child{ border-top-right-radius: 14px; } | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:last-child td:first-child{ border-bottom-left-radius: 14px; } | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:last-child td:last-child{ border-bottom-right-radius: 14px; } | |||
/* ================================ | |||
Pacotes de Lançamento (3 cards) | |||
================================ */ | |||
.launch-pack-page .launch-pack-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:16px; | |||
max-width:860px; | |||
margin:12px auto 18px; | |||
} | |||
@media (max-width: 980px){ | |||
.launch-pack-page .launch-pack-grid{ | |||
grid-template-columns:1fr; | |||
} | |||
} | |||
.launch-pack-page .launch-pack-card{ | |||
background:rgba(120,90,255,.06); | |||
border:1px solid rgba(120,90,255,.18); | |||
border-radius:18px; | |||
box-shadow:0 12px 26px rgba(30, 20, 80, .10); | |||
padding:14px 14px 12px; | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.launch-pack-page .launch-pack-chip{ | |||
display:inline-block; | |||
padding:6px 10px; | |||
border-radius:999px; | |||
background:rgba(120,90,255,.12); | |||
border:1px solid rgba(120,90,255,.22); | |||
font-weight:900; | |||
letter-spacing:.3px; | |||
font-size:12px; | |||
color:#2b1b66; | |||
} | |||
.launch-pack-page .launch-pack-title{ | |||
margin:10px 0 2px; | |||
font-weight:900; | |||
font-size:18px; | |||
color:#1b123f; | |||
} | |||
.launch-pack-page .launch-pack-price{ | |||
margin:4px 0 8px; | |||
font-size:16px; | |||
} | |||
.launch-pack-page .launch-pack-sub{ | |||
opacity:.85; | |||
margin:0 0 10px; | |||
} | |||
.launch-pack-page .launch-pack-badge{ | |||
display:inline-block; | |||
margin-left:8px; | |||
padding:4px 9px; | |||
border-radius:999px; | |||
font-size:12px; | |||
font-weight:800; | |||
background:#5b3df5; | |||
color:#fff; | |||
vertical-align:middle; | |||
} | |||
.launch-pack-page .launch-pack-list ul{ | |||
margin:8px 0 10px 18px; | |||
} | |||
.launch-pack-page .launch-pack-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:8px; | |||
margin-top:10px; | |||
} | |||
.launch-pack-page .launch-pack-note{ | |||
font-size:12.5px; | |||
opacity:.85; | |||
} | |||
/* Colapsáveis */ | |||
.launch-pack-page .launch-pack-coll{ | |||
margin-top:10px; | |||
padding-top:6px; | |||
} | |||
/* Tabela comparativa com bordas arredondadas */ | |||
.launch-pack-page .launch-pack-table{ | |||
border-collapse:separate !important; | |||
border-spacing:0 !important; | |||
overflow:hidden; | |||
border-radius:14px; | |||
} | |||
.launch-pack-page .launch-pack-table th, | |||
.launch-pack-page .launch-pack-table td{ | |||
border-color:rgba(120,90,255,.22) !important; | |||
} | |||
/* FAQ */ | |||
.launch-pack-page .launch-pack-faq{ | |||
max-width:860px; | |||
margin:10px auto 0; | |||
background:rgba(120,90,255,.06); | |||
border:1px solid rgba(120,90,255,.18); | |||
border-radius:16px; | |||
padding:10px 12px; | |||
} | |||
/* ========================================= | |||
Pacotes — Cards Premium (tema roxo claro) | |||
========================================= */ | |||
.lp2-wrap{ | |||
max-width: 1050px; | |||
margin: 18px auto 28px; | |||
padding: 18px; | |||
border-radius: 26px; | |||
background: linear-gradient(180deg, | |||
rgba(120,90,255,.10), | |||
rgba(120,90,255,.06) | |||
); | |||
border: 1px solid rgba(120,90,255,.20); | |||
box-shadow: 0 18px 48px rgba(0,0,0,.08); | |||
} | |||
.lp2-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 16px; | |||
align-items: stretch; | |||
} | |||
@media (max-width: 980px){ | |||
.lp2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } | |||
} | |||
@media (max-width: 680px){ | |||
.lp2-grid{ grid-template-columns: 1fr; } | |||
} | |||
/* Card base */ | |||
.lp2-card{ | |||
position:relative; | |||
border-radius: 22px; | |||
overflow:hidden; | |||
background: rgba(255,255,255,.82); | |||
border: 1px solid rgba(120,90,255,.22); | |||
box-shadow: | |||
0 18px 44px rgba(0,0,0,.10), | |||
0 0 0 1px rgba(120,90,255,.06); | |||
backdrop-filter: blur(6px); | |||
-webkit-backdrop-filter: blur(6px); | |||
display:flex; | |||
flex-direction:column; | |||
min-height: 520px; | |||
transition: transform .16s ease, box-shadow .16s ease; | |||
} | |||
.lp2-card:hover{ | |||
transform: translateY(-3px); | |||
box-shadow: | |||
0 26px 64px rgba(0,0,0,.13), | |||
0 0 0 1px rgba(120,90,255,.10); | |||
} | |||
/* Header “faixa” */ | |||
.lp2-head{ | |||
display:flex; | |||
align-items:center; | |||
gap: 12px; | |||
padding: 14px 14px 12px; | |||
border-bottom: 1px solid rgba(0,0,0,.06); | |||
background: linear-gradient(135deg, rgba(120,90,255,.10), rgba(255,255,255,.30)); | |||
} | |||
.lp2-mascot{ | |||
width: 48px; | |||
height: 48px; | |||
flex: 0 0 48px; | |||
object-fit: contain; | |||
image-rendering: pixelated; | |||
filter: drop-shadow(0 10px 16px rgba(0,0,0,.10)); | |||
} | |||
.lp2-hmeta{ min-width:0; flex:1 1 auto; } | |||
.lp2-tier{ | |||
font-weight: 950; | |||
font-size: 18px; | |||
line-height: 1.1; | |||
margin: 0; | |||
color: #141428; | |||
} | |||
.lp2-price{ | |||
font-weight: 900; | |||
font-size: 18px; | |||
margin: 3px 0 0; | |||
color: #1b1b2e; | |||
} | |||
/* Corpo */ | |||
.lp2-body{ | |||
padding: 12px 14px 14px; | |||
display:flex; | |||
flex-direction:column; | |||
gap: 10px; | |||
flex: 1 1 auto; | |||
} | |||
.lp2-sub{ | |||
font-size: 12.5px; | |||
color: rgba(20,20,35,.68); | |||
} | |||
/* Lista com ícones */ | |||
.lp2-list{ | |||
margin: 6px 0 0; | |||
padding: 0; | |||
list-style: none; | |||
display:grid; | |||
gap: 8px; | |||
} | |||
.lp2-list li{ | |||
display:flex; | |||
align-items:flex-start; | |||
gap: 10px; | |||
line-height: 1.25; | |||
color: #1c1c2c; | |||
font-size: 13.5px; | |||
} | |||
.lp2-list .lp2-ico{ | |||
width: 18px; | |||
height: 18px; | |||
flex: 0 0 18px; | |||
margin-top: 1px; | |||
filter: drop-shadow(0 10px 16px rgba(0,0,0,.06)); | |||
} | |||
/* Rodapé com botão */ | |||
.lp2-foot{ | |||
margin-top:auto; | |||
padding: 12px 14px 14px; | |||
border-top: 1px solid rgba(0,0,0,.06); | |||
display:flex; | |||
flex-direction:column; | |||
gap: 10px; | |||
} | |||
.lp2-btn{ | |||
display:block; | |||
text-align:center; | |||
padding: 12px 14px; | |||
border-radius: 14px; | |||
font-weight: 950; | |||
letter-spacing: .2px; | |||
color: #fff !important; | |||
text-decoration: none !important; | |||
background: linear-gradient(90deg, rgba(120,90,255,1), rgba(170,120,255,1)); | |||
box-shadow: 0 16px 32px rgba(120,90,255,.26); | |||
border: 1px solid rgba(120,90,255,.22); | |||
} | |||
.lp2-btn:hover{ | |||
filter: brightness(1.02); | |||
transform: translateY(-1px); | |||
} | |||
.lp2-note{ | |||
text-align:center; | |||
font-size: 11.5px; | |||
color: rgba(20,20,35,.62); | |||
} | |||
/* ========================= | |||
Variações por tier | |||
========================= */ | |||
.lp2-card.is-bronze .lp2-head{ | |||
background: linear-gradient(135deg, rgba(195,130,80,.30), rgba(255,255,255,.38)); | |||
} | |||
.lp2-card.is-bronze .lp2-btn{ | |||
background: linear-gradient(90deg, rgba(160,92,52,1), rgba(195,130,80,1)); | |||
box-shadow: 0 16px 32px rgba(195,130,80,.22); | |||
} | } | ||
.lp2-card.is-silver .lp2-head{ | |||
background: linear-gradient(135deg, rgba(145,160,178,.34), rgba(255,255,255,.40)); | |||
} | |||
background- | .lp2-card.is-silver .lp2-btn{ | ||
background: linear-gradient(90deg, rgba(105,120,140,1), rgba(145,160,178,1)); | |||
box-shadow: 0 16px 32px rgba(145,160,178,.20); | |||
} | } | ||
.lp2-card.is-gold .lp2-head{ | |||
background: linear-gradient(135deg, rgba(215,170,70,.32), rgba(255,255,255,.40)); | |||
} | |||
.lp2-card.is-gold .lp2-btn{ | |||
background: linear-gradient(90deg, rgba(185,130,30,1), rgba(215,170,70,1)); | |||
box-shadow: 0 16px 32px rgba(215,170,70,.22); | |||
} | } | ||
. | /* (Opcional) destaque no card do meio */ | ||
.lp2-card.is-featured{ | |||
box-shadow: | |||
0 28px 72px rgba(0,0,0,.14), | |||
0 0 0 1px rgba(120,90,255,.12), | |||
0 0 44px rgba(120,90,255,.18); | |||
} | } | ||
.lp2-badge{ | |||
position:absolute; | |||
top: 12px; | |||
right: 12px; | |||
padding: 6px 10px; | |||
border-radius: 999px; | |||
background: rgba(120,90,255,.12); | |||
border: 1px solid rgba(120,90,255,.22); | |||
color: #2b2370; | |||
font-weight: 950; | |||
font-size: 12px; | |||
} | |||
/* ================================ | |||
Launch Packs (lp2-*) — Premium Cards (roxo-claro) | |||
================================ */ | |||
.launch-pack-page .lp2-wrap{ | |||
max-width: 1060px; /* <- “engrossa” o conjunto */ | |||
margin: 18px auto 26px; | |||
padding: 18px; | |||
background: linear-gradient(180deg, rgba(120,90,255,.14), rgba(120,90,255,.07)); | |||
border: 1px solid rgba(120,90,255,.26); | |||
border-radius: 30px; | |||
box-shadow: 0 26px 64px rgba(35, 18, 90, .18); | |||
} | } | ||
.launch-pack-page .lp2-grid{ | |||
display: grid; | |||
gap: 18px; | |||
/* <- “engrossa” os cards: cada coluna não fica magrinha */ | |||
grid-template-columns: repeat(3, minmax(290px, 1fr)); | |||
align-items: stretch; | |||
} | } | ||
. | @media (max-width: 980px){ | ||
.launch-pack-page .lp2-grid{ | |||
grid-template-columns: repeat(2, minmax(280px, 1fr)); | |||
} | |||
} | |||
@media (max-width: 640px){ | |||
.launch-pack-page .lp2-wrap{ padding: 14px; } | |||
.launch-pack-page .lp2-grid{ | |||
grid-template-columns: 1fr; | |||
} | |||
} | } | ||
. | /* Card base */ | ||
.launch-pack-page .lp2-card{ | |||
position: relative; | |||
background: rgba(255,255,255,.94); | |||
border: 1px solid rgba(120,90,255,.24); | |||
border-radius: 22px; | |||
overflow: hidden; | |||
box-shadow: 0 18px 44px rgba(25, 10, 60, .12); | |||
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; | |||
} | } | ||
.launch-pack-page .lp2-card:hover{ | |||
transform: translateY(-2px); | |||
box-shadow: 0 22px 58px rgba(25, 10, 60, .16); | |||
border-color: rgba(120,90,255,.34); | |||
} | } | ||
. | |||
/* Head */ | |||
.launch-pack-page .lp2-tier{ | |||
display: inline-flex; | |||
align-items: center; | |||
padding: 6px 12px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
background: rgba(120,90,255,.10); | |||
border: 1px solid rgba(120,90,255,.20); | |||
color: #24124f; | |||
} | } | ||
. | .launch-pack-page .lp2-price{ | ||
font-weight: 900; | |||
letter-spacing: .2px; | |||
color: #24124f; | |||
} | } | ||
/* Body/lista */ | |||
.launch-pack-page .lp2-body{ | |||
padding: 14px 18px 18px; | |||
} | } | ||
.launch-pack-page .lp2-sub{ | |||
font-size: 12.5px; | |||
opacity: .8; | |||
margin-bottom: 10px; | |||
} | } | ||
.launch-pack-page .lp2-list{ | |||
margin: 0; | |||
padding-left: 0; | |||
list-style: none; | |||
display: grid; | |||
gap: 8px; | |||
} | |||
. | .launch-pack-page .lp2-list li{ | ||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
line-height: 1.25; | |||
} | } | ||
.launch-pack-page .lp2-ico{ | |||
width: 18px; | |||
height: 18px; | |||
image-rendering: pixelated; | |||
filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); | |||
} | |||
. | /* Featured (se você usar is-featured no Prata, por ex.) */ | ||
.launch-pack-page .lp2-card.is-featured{ | |||
transform: translateY(-4px); | |||
border-color: rgba(120,90,255,.42); | |||
box-shadow: 0 26px 74px rgba(25, 10, 60, .18); | |||
} | |||
. | /* ====== Tiers (cores do topo + “tint” do chip) ====== */ | ||
.launch-pack-page .lp2-card.is-silver{ | |||
--lp2-accent: linear-gradient(90deg, #AEB8D3, #E9EEFF); | |||
--lp2-glow: rgba(160, 180, 220, .35); | |||
} | |||
.launch-pack-page .lp2-card.is-silver .lp2-tier{ | |||
background: rgba(180,190,220,.22); | |||
border-color: rgba(160,170,210,.38); | |||
} | |||
. | .launch-pack-page .lp2-card.is-gold{ | ||
--lp2-accent: linear-gradient(90deg, #F3C55C, #FFE1A3); | |||
--lp2-glow: rgba(255, 205, 90, .28); | |||
} | |||
.launch-pack-page .lp2-card.is-gold .lp2-tier{ | |||
background: rgba(245, 205, 120, .24); | |||
border-color: rgba(230, 175, 70, .40); | |||
} | |||
. | .launch-pack-page .lp2-card.is-bronze{ | ||
--lp2-accent: linear-gradient(90deg, #C98A63, #F2C0A3); | |||
--lp2-glow: rgba(210, 140, 90, .26); | |||
} | |||
.launch-pack-page .lp2-card.is-bronze .lp2-tier{ | |||
background: rgba(210, 150, 120, .22); | |||
border-color: rgba(190, 120, 85, .38); | |||
} | |||
/* ===== Launch Pack (lp2) — CONTRASTE + FOOTER ===== */ | |||
# | /* Barra do topo mais destacada */ | ||
.launch-pack-page .lp2-card::before{ | |||
height: 16px; /* mais presença */ | |||
background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff)); | |||
box-shadow: | |||
0 12px 32px var(--lp2-glow, rgba(120,90,255,.32)), | |||
inset 0 -1px 0 rgba(255,255,255,.25); | |||
} | |||
/* “Gloss” mais discreto (pra não lavar a cor) */ | |||
.launch-pack-page .lp2-card::after{ | |||
height: 16px; | |||
background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)); | |||
mix-blend-mode: normal; | |||
opacity: .55; | |||
} | |||
. | /* Tier e preço com contraste forte e leve “contorno” */ | ||
.launch-pack-page .lp2-tier, | |||
.launch-pack-page .lp2-price{ | |||
color: var(--lp2-on, #1f1f1f); | |||
text-shadow: 0 1px 0 rgba(255,255,255,.55); | |||
} | } | ||
. | /* Tier vira “badge” mais premium */ | ||
.launch-pack-page .lp2-tier{ | |||
background: rgba(255,255,255,.70); | |||
border: 1px solid rgba(0,0,0,.06); | |||
box-shadow: 0 10px 26px rgba(0,0,0,.06); | |||
} | |||
. | /* Preço mais forte */ | ||
.launch-pack-page .lp2-price{ | |||
font-weight: 950; | |||
letter-spacing: .3px; | |||
} | } | ||
/* | /* FOOTER BAR (faixa no fim do card) */ | ||
.launch-pack-page .lp2-foot{ | |||
margin-top: 14px; | |||
padding: 12px 14px; | |||
border-top: 1px solid rgba(0,0,0,.06); | |||
background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff)); | |||
color: var(--lp2-footOn, #fff); | |||
display: flex; | |||
align-items: baseline; | |||
justify-content: space-between; | |||
gap: 10px; | |||
border-radius: 0 0 22px 22px; /* acompanha o card */ | |||
. | box-shadow: 0 -10px 26px var(--lp2-glow, rgba(120,90,255,.22)); | ||
} | } | ||
. | .launch-pack-page .lp2-foot-price{ | ||
font-weight: 950; | |||
letter-spacing: .2px; | |||
} | } | ||
. | .launch-pack-page .lp2-foot-note{ | ||
font-size: 12px; | |||
opacity: .92; | |||
white-space: nowrap; | |||
} | } | ||
. | /* ====== Tiers (cores MAIS contrastadas) ====== */ | ||
/* PRATA: base mais “grafite frio”, texto branco */ | |||
.launch-pack-page .lp2-card.is-silver{ | |||
--lp2-accent: linear-gradient(90deg, #5E6A86, #9BA9C9); | |||
--lp2-glow: rgba(110, 130, 175, .30); | |||
--lp2-headTint: rgba(130, 150, 190, .12); | |||
--lp2-on: #111827; | |||
--lp2-footOn: #ffffff; | |||
} | } | ||
. | /* OURO: dourado mais “rico” + marrom pra contraste */ | ||
.launch-pack-page .lp2-card.is-gold{ | |||
--lp2-accent: linear-gradient(90deg, #C9961C, #F1C46B); | |||
--lp2-glow: rgba(205, 150, 25, .22); | |||
--lp2-headTint: rgba(245, 205, 120, .16); | |||
--lp2-on: #2a1b06; | |||
--lp2-footOn: #2a1b06; /* fica premium: texto escuro no ouro */ | |||
} | } | ||
/* | /* BRONZE: cobre mais profundo */ | ||
.launch-pack-page .lp2-card.is-bronze{ | |||
--lp2-accent: linear-gradient(90deg, #8E4F33, #D39A75); | |||
--lp2-glow: rgba(150, 85, 55, .22); | |||
--lp2-headTint: rgba(210, 150, 120, .14); | |||
--lp2-on: #24110b; | |||
--lp2-footOn: #ffffff; | |||
} | |||
/* | /* ========================================= | ||
Pets — OVERRIDE Roxo Claro (FORÇADO) | |||
Ativa com: <div class="pet-page is-light"> | |||
Cole DEPOIS do CSS atual de pets | |||
========================================= */ | |||
. | .pet-page.is-light{ | ||
--pet-ink:#1f1633; | |||
--pet-muted:#5a4a7c; | |||
--pet-surface:rgba(255,255,255,.78); | |||
--pet-surface-2:rgba(255,255,255,.92); | |||
--pet-border:rgba(120,90,255,.22); | |||
--pet-line:rgba(120,90,255,.16); | |||
--pet-shadow:0 18px 44px rgba(44,17,88,.14); | |||
} | } | ||
/* Barras (drops-inline) — remove o "pesado" e aplica claro */ | |||
.pet-page.is-light .drops-inline{ | |||
background: | |||
radial-gradient(1200px 220px at 50% 0%, | |||
rgba(120,90,255,.18) 0%, | |||
rgba(120,90,255,.08) 55%, | |||
rgba(255,255,255,0) 100%), | |||
linear-gradient(180deg, | |||
rgba(255,255,255,.70), | |||
rgba(120,90,255,.06)) !important; | |||
border:1px solid var(--pet-border) !important; | |||
border-radius:22px !important; | |||
box-shadow:var(--pet-shadow) !important; | |||
color:var(--pet-ink) !important; | |||
} | } | ||
/* Badge do data-badge (alguns CSS usam :before, outros ::before) */ | |||
.pet-page.is-light .drops-inline:before, | |||
.pet-page.is-light .drops-inline::before{ | |||
background:linear-gradient(180deg, | |||
rgba(255,255,255,.78), | |||
rgba(255,255,255,.45)) !important; | |||
border:1px solid rgba(120,90,255,.22) !important; | |||
color:var(--pet-ink) !important; | |||
box-shadow:0 10px 24px rgba(44,17,88,.10) !important; | |||
} | } | ||
.mw- | /* Toggle expandir/ocultar (botão) */ | ||
.pet-page.is-light .drops-inline .mw-collapsible-toggle, | |||
.pet-page.is-light .drops-inline .mw-collapsible-toggle a{ | |||
color:var(--pet-ink) !important; | |||
} | } | ||
.mw- | .pet-page.is-light .drops-inline .mw-collapsible-toggle{ | ||
background:linear-gradient(180deg, | |||
rgba(255,255,255,.78), | |||
rgba(255,255,255,.45)) !important; | |||
border:1px solid rgba(120,90,255,.22) !important; | |||
border-radius:999px !important; | |||
padding:6px 12px !important; | |||
box-shadow:0 10px 24px rgba(44,17,88,.10) !important; | |||
} | } | ||
/* | /* Área do conteúdo (onde entra a tabela) */ | ||
. | .pet-page.is-light .drops-inline .mw-collapsible-content{ | ||
background:var(--pet-surface) !important; | |||
border:1px solid rgba(120,90,255,.14) !important; | |||
border-radius:18px !important; | |||
padding:14px !important; | |||
margin:12px !important; | |||
} | } | ||
. | /* Tabela clara */ | ||
.pet-page.is-light .pet-list-table{ | |||
width:100% !important; | |||
margin:0 !important; | |||
border-collapse:separate !important; | |||
border-spacing:0 !important; | |||
overflow:hidden !important; | |||
background:var(--pet-surface-2) !important; | |||
border:1px solid rgba(120,90,255,.16) !important; | |||
border-radius:16px !important; | |||
color:var(--pet-ink) !important; | |||
} | } | ||
. | /* Cabeçalho */ | ||
.pet-page.is-light .pet-list-table th{ | |||
background:linear-gradient(180deg, | |||
rgba(120,90,255,.18), | |||
rgba(120,90,255,.10)) !important; | |||
color:var(--pet-ink) !important; | |||
font-weight:900 !important; | |||
text-align:center !important; | |||
padding:12px 10px !important; | |||
border-bottom:1px solid var(--pet-line) !important; | |||
} | } | ||
. | /* Células */ | ||
. | .pet-page.is-light .pet-list-table td{ | ||
background:transparent !important; | |||
color:var(--pet-ink) !important; | |||
padding:12px 10px !important; | |||
border-bottom:1px solid rgba(120,90,255,.12) !important; | |||
border-right:1px solid rgba(120,90,255,.10) !important; | |||
vertical-align:middle !important; | |||
} | } | ||
. | .pet-page.is-light .pet-list-table td:last-child, | ||
.pet-page.is-light .pet-list-table th:last-child{ | |||
border-right:0 !important; | |||
} | } | ||
. | /* Zebra suave */ | ||
.pet-page.is-light .pet-list-table tr:nth-child(even) td{ | |||
background:rgba(120,90,255,.04) !important; | |||
} | } | ||
. | /* Links (se tiver) */ | ||
.pet-page.is-light a{ | |||
color:#3f3bd9 !important; | |||
} | } | ||
. | /* Pixel art nítida */ | ||
.pet-page.is-light .pet-list-table img{ | |||
image-rendering:pixelated; | |||
} | |||
. | /* ========================================= | ||
PETS (tema roxo-claro) — pill + tabela interna | |||
Alvo: <div class="pet-page is-light"> ... drops-inline is-pet* | |||
========================================= */ | |||
. | .pet-page.is-light .drops-inline{ | ||
/* base clara */ | |||
background: linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%) !important; | |||
border: 1px solid rgba(120,90,230,.22) !important; | |||
border-radius: 22px !important; | |||
box-shadow: 0 14px 34px rgba(35,12,70,.10) !important; | |||
} | |||
. | /* se você tiver algum ::after antigo fazendo “glow feio”, desliga */ | ||
.pet-page.is-light .drops-inline::after{ | |||
content: none !important; | |||
} | } | ||
. | /* ====== VARIAÇÃO POR CATEGORIA (só muda a PILL) ====== */ | ||
.pet-page.is-light .drops-inline.is-pet120{ --pet-pill1:#1f0b4d; --pet-pill2:#5a2bd6; } | |||
.pet-page.is-light .drops-inline.is-pet60 { --pet-pill1:#151241; --pet-pill2:#3a43d2; } | |||
.pet-page.is-light .drops-inline.is-pet30 { --pet-pill1:#1b0f3f; --pet-pill2:#7a35d8; } | |||
.pet-page.is-light .drops-inline.is-pet10 { --pet-pill1:#2a1552; --pet-pill2:#9a57ff; } | |||
/* ====== PILL (badge do data-badge) ====== | |||
(assumindo que seu drops-inline usa ::before pra renderizar o badge) | |||
*/ | |||
.pet-page.is-light .drops-inline::before{ | |||
background: linear-gradient(180deg, var(--pet-pill2), var(--pet-pill1)) !important; | |||
color: #fff !important; | |||
. | border: 1px solid rgba(255,255,255,.28) !important; | ||
box-shadow: 0 10px 18px rgba(30,10,60,.22) !important; | |||
. | letter-spacing: .10em !important; | ||
text-transform: uppercase !important; | |||
} | |||
. | /* Toggle [ EXPANDIR / OCULTAR ] */ | ||
.pet-page.is-light .drops-inline .mw-collapsible-toggle{ | |||
background: rgba(255,255,255,.65) !important; | |||
border: 1px solid rgba(120,90,230,.28) !important; | |||
border-radius: 999px !important; | |||
box-shadow: 0 8px 16px rgba(35,12,70,.10) !important; | |||
} | |||
.pet-page.is-light .drops-inline .mw-collapsible-toggle a, | |||
.pet-page.is-light .drops-inline .mw-collapsible-toggle{ | |||
color: #3a1a78 !important; | |||
font-weight: 800 !important; | |||
} | |||
. | /* ====== “CAIXA” INTERNA DA TABELA ====== */ | ||
.pet-page.is-light .drops-inline .mw-collapsible-content{ | |||
background: rgba(255,255,255,.55) !important; | |||
border: 1px solid rgba(120,90,230,.18) !important; | |||
border-radius: 18px !important; | |||
padding: 14px !important; | |||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55) !important; | |||
} | |||
. | /* ====== TABELA (roxo claro, sem zebra) ====== */ | ||
.pet-page.is-light .pet-list-table{ | |||
width: 100% !important; | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
. | background: #f7f3ff !important; | ||
border: 1px solid rgba(120,90,230,.30) !important; | |||
border-radius: 16px !important; | |||
overflow: hidden !important; | |||
} | |||
. | /* header */ | ||
.pet-page.is-light .pet-list-table th{ | |||
background: linear-gradient(180deg, rgba(120,90,230,.18), rgba(120,90,230,.12)) !important; | |||
color: #1e123a !important; | |||
font-weight: 900 !important; | |||
border-bottom: 1px solid rgba(120,90,230,.28) !important; | |||
border-right: 1px solid rgba(120,90,230,.22) !important; | |||
} | } | ||
.pet-page.is-light .pet-list-table th:last-child{ border-right: 0 !important; } | |||
/* cells */ | |||
.pet-page.is-light .pet-list-table td{ | |||
background: #f7f3ff !important; /* tudo igual (sem zebra) */ | |||
color: #1f1f1f !important; | |||
border-bottom: 1px solid rgba(120,90,230,.22) !important; | |||
border-right: 1px solid rgba(120,90,230,.18) !important; | |||
} | } | ||
.pet-page.is-light .pet-list-table td:last-child{ border-right: 0 !important; } | |||
.pet-page.is-light .pet-list-table tr:last-child td{ border-bottom: 0 !important; } | |||
. | /* mata qualquer zebra herdado */ | ||
. | .pet-page.is-light .pet-list-table tr:nth-child(even) td, | ||
.pet-page.is-light .pet-list-table tr:nth-child(odd) td{ | |||
background: #f7f3ff !important; | |||
} | |||
/* ================================ | |||
Launch Packs (lp2) - Premium | |||
================================ */ | |||
. | .lp2-wrap{ | ||
max-width: 980px; | |||
. | margin: 10px auto 0; | ||
padding: 18px; | |||
border-radius: 22px; | |||
background: linear-gradient(180deg, rgba(160,140,255,.20), rgba(160,140,255,.10)); | |||
border: 1px solid rgba(120,95,230,.25); | |||
box-shadow: 0 22px 70px rgba(40, 20, 80, .12); | |||
} | |||
. | .lp2-grid{ | ||
display: grid; | |||
grid-template-columns: repeat(3, minmax(240px, 1fr)); | |||
gap: 16px; | |||
align-items: stretch; | |||
} | |||
/* | .lp2-card{ | ||
. | display: flex; /* <<< isso fixa o footer */ | ||
flex-direction: column; /* <<< */ | |||
overflow: hidden; /* <<< garante borda certinha */ | |||
border-radius: 22px; | |||
background: #fff; | |||
border: 1px solid rgba(120,95,230,.22); | |||
box-shadow: 0 16px 44px rgba(50, 30, 110, .14); | |||
} | |||
/* Topo vira “faixa imagem” */ | |||
.lp2-head{ | |||
padding: 0; | |||
margin: 0; | |||
background: none; | |||
border-bottom: 1px solid rgba(120,95,230,.18); | |||
} | |||
/* MediaWiki costuma colocar wrapper <a> e <img class="mw-file-element"> */ | |||
.lp2-head a{ | |||
display: block; | |||
line-height: 0; | |||
} | |||
.lp2-head .mw-file-element, | |||
.lp2-headimg{ | |||
display: block; | |||
width: 100% !important; | |||
height: auto !important; | |||
} | |||
/* Garantir cantos do banner batendo com o card */ | |||
.lp2-head .mw-file-element{ | |||
border-radius: 22px 22px 0 0; | |||
} | |||
/* Corpo cresce e empurra o footer pra baixo */ | |||
.lp2-body{ | |||
flex: 1 1 auto; | |||
padding: 14px 16px 10px; | |||
} | |||
.lp2-sub{ | |||
font-weight: 800; | |||
margin: 6px 0 10px; | |||
opacity: .95; | |||
} | |||
.lp2-list{ | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
.lp2-list li{ | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
padding: 6px 0; | |||
border-bottom: 1px dashed rgba(120,95,230,.18); | |||
} | } | ||
.lp2-list li:last-child{ | |||
border-bottom: 0; | |||
} | } | ||
. | /* Footer com cor por tier (premium, mas claro) */ | ||
.lp2-card.is-bronze .lp2-foot{ | |||
background: linear-gradient(180deg, rgba(196,120,70,.20), rgba(196,120,70,.38)); | |||
} | } | ||
. | .lp2-card.is-silver .lp2-foot{ | ||
background: linear-gradient(180deg, rgba(120,140,170,.20), rgba(120,140,170,.38)); | |||
} | } | ||
. | .lp2-card.is-gold .lp2-foot{ | ||
background: linear-gradient(180deg, rgba(220,175,80,.22), rgba(220,175,80,.44)); | |||
} | } | ||
. | /* “featured” dá um glow leve */ | ||
.lp2-card.is-featured{ | |||
box-shadow: | |||
0 18px 52px rgba(60, 40, 140, .20), | |||
0 0 0 2px rgba(150,120,255,.18); | |||
transform: translateY(-2px); | |||
} | } | ||
/* Responsivo */ | |||
@media (max-width: 900px){ | |||
.lp2-grid{ grid-template-columns: 1fr; } | |||
.lp2-wrap{ padding: 14px; } | |||
} | } | ||
. | /* Topo (banner) preencher 100% do header */ | ||
.lp2-card{ overflow:hidden; } /* garante que o corte respeita as bordas */ | |||
.lp2-card{ | |||
--lp2-head-h: 140px; /* <-- ajuste aqui (ex: 120 / 140 / 160) */ | |||
} | } | ||
. | .lp2-head{ | ||
padding: 0 !important; | |||
margin: 0 !important; | |||
height: var(--lp2-head-h); | |||
position: relative; | |||
} | } | ||
.lp2-head a{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
line-height:0; | |||
} | } | ||
. | .lp2-head .mw-file-element, | ||
border- | .lp2-headimg{ | ||
display:block; | |||
width:100% !important; | |||
height:100% !important; /* <<< aqui é o pulo do gato */ | |||
object-fit: cover; /* <<< preenche o topo inteiro */ | |||
object-position: center; /* centraliza o corte */ | |||
border-radius: 22px 22px 0 0; | |||
} | } | ||
/* | /* ============================== | ||
LP2 – Banner colado no topo (sem “fundinho”) | |||
============================== */ | |||
/* garante que nada vaza pra fora das bordas arredondadas */ | |||
.lp2-card{ | |||
overflow: hidden; | |||
} | } | ||
. | /* se o seu card tem padding, esse é o “culpado” do espaço acima do banner. | ||
Ajuste o valor até sumir 100% (normalmente 14px / 16px). */ | |||
.lp2-card{ | |||
--lp2-pad: 4px; /* <<< ajuste aqui se necessário */ | |||
} | } | ||
. | /* faz o topo “invadir” o padding do card e encostar na borda */ | ||
.lp2-head{ | |||
margin-top: calc(var(--lp2-pad) * -1) !important; | |||
margin-left: calc(var(--lp2-pad) * -1) !important; | |||
margin-right: calc(var(--lp2-pad) * -1) !important; | |||
padding: 0 !important; | |||
} | } | ||
/* | /* mantém o banner preenchendo tudo */ | ||
. | .lp2-head a{ | ||
display:block; | |||
width:100%; | |||
height:100%; | |||
line-height:0; | |||
} | } | ||
. | .lp2-head .mw-file-element, | ||
.lp2-headimg{ | |||
display:block; | |||
width:100% !important; | |||
height:100% !important; | |||
object-fit: cover; | |||
object-position: center; | |||
} | } | ||
. | .lp2-list li:last-child{ | ||
border-bottom: 0 !important; | |||
} | } | ||
.lp2-foot{ | |||
border-top: 0 !important; | |||
box-shadow: none !important; | |||
outline: 0 !important; | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
/* ========================================= | |||
LP2 – Fade infinito no rodapé (sem linha) | |||
+ Header image full-width | |||
========================================= */ | |||
/* MediaWiki costuma envolver a imagem em <a class="image"> */ | |||
.lp2-card .lp2-head a.image{ | |||
display: block; | |||
} | } | ||
. | .lp2-card .lp2-head .lp2-headimg{ | ||
display: block; | |||
width: 100% !important; | |||
height: auto !important; | |||
max-width: 100% !important; | |||
} | } | ||
. | /* Base do card */ | ||
.lp2-card{ | |||
position: relative; | |||
overflow: hidden; /* necessário pro fade “sumir” nas quinas */ | |||
} | } | ||
. | /* Cores do fade por tier (RGB pra usar com alpha) */ | ||
.lp2-card.is-bronze{ --lp2-fade-rgb: 196,126,86; } | |||
.lp2-card.is-silver{ --lp2-fade-rgb: 140,158,190; } | |||
.lp2-card.is-gold { --lp2-fade-rgb: 231,188,86; } | |||
/* Empurra o conteúdo pra não encostar no fade */ | |||
.lp2-card .lp2-body{ | |||
padding-bottom: 110px; /* ajusta aqui se quiser mais/menos “área de fade” */ | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
. | /* O foot vira só o overlay do fade (SEM linha, SEM corte) */ | ||
.lp2-card .lp2-foot{ | |||
position: absolute; | |||
left: 0; right: 0; bottom: 0; | |||
height: 130px; /* altura total do fade */ | |||
pointer-events: none; | |||
z-index: 1; | |||
border: 0 !important; | |||
outline: 0 !important; | |||
box-shadow: none !important; | |||
background: linear-gradient( | |||
to top, | |||
rgba(var(--lp2-fade-rgb), 0.42) 0%, | |||
rgba(var(--lp2-fade-rgb), 0.22) 35%, | |||
rgba(var(--lp2-fade-rgb), 0.10) 60%, | |||
rgba(255,255,255, 0.00) 100% | |||
) !important; | |||
} | } | ||
/* | /* Se tiver “linha” vinda do último item da lista */ | ||
. | .lp2-card .lp2-list li:last-child{ | ||
border-bottom: 0 !important; | |||
} | } | ||
. | /* ========================================================= | ||
Grupo Éden / Turn In — Loja no estilo "Loja Pontos MVP" | |||
Escopo: .eden-loja-mvp | |||
========================================================= */ | |||
.eden-loja-mvp{ | |||
position: relative; | |||
padding: 22px 18px 18px; | |||
border-radius: 26px; | |||
background: rgba(140,110,240,.10); | |||
border: 1px solid rgba(140,110,240,.25); | |||
box-shadow: 0 10px 24px rgba(0,0,0,.08); | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-chip{ | ||
position: absolute; | |||
top: -14px; | |||
left: 18px; | |||
padding: 6px 14px; | |||
border-radius: 999px; | |||
font-weight: 800; | |||
letter-spacing: .06em; | |||
text-transform: uppercase; | |||
font-size: 12px; | |||
color: #fff; | |||
background: rgba(105,70,230,.95); | |||
box-shadow: 0 10px 18px rgba(105,70,230,.25); | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-grid{ | ||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |||
gap: 16px; | |||
align-items: stretch; | |||
} | } | ||
/* | /* Card/Seção */ | ||
. | .eden-loja-mvp .eden-loja-sec{ | ||
border-radius: 22px; | |||
background: rgba(255,255,255,.35); | |||
border: 1px solid rgba(140,110,240,.22); | |||
overflow: hidden; | |||
} | } | ||
. | /* Cabeçalho igual o "UTILIDADES / EQUIPAMENTOS" */ | ||
.eden-loja-mvp .eden-loja-sec > .loja-card-title{ | |||
padding: 14px 16px; | |||
text-align: center; | |||
font-weight: 900; | |||
letter-spacing: .10em; | |||
text-transform: uppercase; | |||
background: rgba(140,110,240,.18); | |||
border-bottom: 1px solid rgba(140,110,240,.20); | |||
position: relative; | |||
} | } | ||
. | /* Toggle do mw-collapsible no canto direito (estilo “[Ocultar ▾]”) */ | ||
.eden-loja-mvp .eden-loja-sec > .loja-card-title .mw-collapsible-toggle{ | |||
position: absolute; | |||
right: 14px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
font-weight: 800; | |||
letter-spacing: 0; | |||
text-transform: none; | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-sec > .loja-card-title .mw-collapsible-toggle a{ | ||
text-decoration: none; | |||
} | } | ||
. | /* Conteúdo (padding interno) */ | ||
.eden-loja-mvp .eden-loja-sec .mw-collapsible-content{ | |||
padding: 14px; | |||
} | } | ||
. | /* Tabela arredondada estilo MVP */ | ||
.eden-loja-mvp table.eden-loja-table{ | |||
width: 100%; | |||
margin: 0; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border: 1px solid rgba(140,110,240,.28); | |||
border-radius: 16px; | |||
overflow: hidden; | |||
background: rgba(255,255,255,.40); | |||
} | } | ||
. | .eden-loja-mvp table.eden-loja-table th{ | ||
padding: 12px 10px; | |||
text-align: center; | |||
font-weight: 900; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
background: rgba(140,110,240,.16); | |||
border-bottom: 1px solid rgba(140,110,240,.22); | |||
} | } | ||
. | .eden-loja-mvp table.eden-loja-table td{ | ||
padding: 10px 12px; | |||
border-top: 1px solid rgba(140,110,240,.18); | |||
vertical-align: middle; | |||
} | } | ||
. | .eden-loja-mvp table.eden-loja-table tr:first-child td{ | ||
border-top: none; | |||
} | } | ||
/* ================================ | |||
Turn In / Éden — ajustes finais | |||
================================ */ | |||
/* 1) Estreitar a caixa (não ocupar a tela toda) */ | |||
.eden-loja-mvp{ | |||
max-width: 1180px; /* ajuste aqui: 1040 / 1120 / 1180 */ | |||
width: calc(100% - 24px); | |||
margin: 16px auto 24px; | |||
} | } | ||
/* | /* 2) Card do NPC (igual vibe MVP) */ | ||
. | .eden-loja-mvp .eden-npc-wrap{ | ||
display: flex; | |||
justify-content: center; | |||
margin: 8px 0 16px; | |||
} | } | ||
. | .eden-loja-mvp .eden-npc-card{ | ||
width: min(380px, 100%); | |||
text-align: center; | |||
padding: 18px 16px 16px; | |||
border-radius: 22px; | |||
background: rgba(255,255,255,.45); | |||
border: 1px solid rgba(140,110,240,.25); | |||
box-shadow: 0 10px 24px rgba(0,0,0,.07); | |||
} | } | ||
.eden-loja-mvp .eden-npc-title{ | |||
font-weight: 900; | |||
letter-spacing: .06em; | |||
text-transform: uppercase; | |||
margin-bottom: 8px; | |||
} | } | ||
.eden-loja-mvp .eden-npc-loc{ | |||
font-size: 12px; | |||
font-weight: 900; | |||
letter-spacing: .12em; | |||
text-transform: uppercase; | |||
opacity: .85; | |||
margin-bottom: 10px; | |||
} | } | ||
/* | /* pill /navi (no mesmo estilo “copiável”) */ | ||
. | .eden-loja-mvp .eden-navi-pill{ | ||
display: inline-block; | |||
margin-top: 10px; | |||
padding: 8px 14px 8px 30px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(140,110,240,.28); | |||
background: rgba(255,255,255,.55); | |||
font-weight: 800; | |||
position: relative; | |||
} | } | ||
. | .eden-loja-mvp .eden-navi-pill::before{ | ||
content: "⌖"; | |||
position: absolute; | |||
left: 10px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
opacity: .85; | |||
} | } | ||
/* | /* 3) Fix do toggle do mw-collapsible (ficar no header, canto direito) */ | ||
. | .eden-loja-mvp .eden-loja-sec{ | ||
position: relative; | |||
} | } | ||
.eden-loja-mvp .eden-loja-sec > .mw-collapsible-toggle{ | |||
. | position: absolute; | ||
right: 14px; | |||
top: 12px; /* ajusta fino se quiser */ | |||
z-index: 2; | |||
font-weight: 800; | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-sec > .loja-card-title{ | ||
padding-right: 110px; /* espaço pro [Mostrar/Ocultar] */ | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-sec{ | ||
align-self: start; | |||
height: fit-content; | |||
} | } | ||
/* ========================================================= | |||
RagnaTrue — drops-inline: remover a listra (top line) | |||
Use: <div class="drops-inline rt-no-topline ..."> | |||
========================================================= */ | |||
.drops-inline.rt-no-topline > .mw-collapsible-content{ | |||
border-top: 0 !important; | |||
} | } | ||
. | /* ========================================================= | ||
RT — Colapsível com pill + botão "Mostrar" padronizados | |||
Use adicionando a classe: .rt-coll-uniform | |||
========================================================= */ | |||
.drops-inline.rt-coll-uniform{ | |||
/* ajuste fino por variável (pode sobrescrever por inline style) */ | |||
--rt-pill-w: 340px; /* largura da pill */ | |||
--rt-toggle-w: 120px; /* largura do "Mostrar" */ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 12px; | |||
/* mantém o “roxinho claro” e o layout limpo */ | |||
padding: 10px 14px; | |||
} | } | ||
. | /* A pill (badge) é o ::before do drops-inline */ | ||
.drops-inline.rt-coll-uniform::before{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: var(--rt-pill-w); | |||
text-align: center; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
/* | /* Botão Mostrar/Ocultar */ | ||
.drops-inline.rt-coll-uniform .mw-collapsible-toggle{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: var(--rt-toggle-w); | |||
text-align: center; | |||
white-space: nowrap; | |||
} | |||
.drops-inline.rt-coll-uniform .mw-collapsible-toggle a{ | |||
display: inline-flex; | |||
width: 100%; | |||
justify-content: center; | |||
text-decoration: none; | |||
} | |||
/* Conteúdo deve “quebrar linha” e ocupar 100% abaixo do header */ | |||
.drops-inline.rt-coll-uniform .mw-collapsible-content{ | |||
flex: 0 0 100%; | |||
width: 100%; | |||
margin-top: 10px; | |||
} | |||
/* Card de Habilidades: troca o "branco" da faixa dos colapsíveis */ | |||
.rt-skill-wrap .drops-inline { | |||
background: rgba(124, 92, 255, .06) !important; /* lilás bem suave */ | |||
border: 1px solid rgba(124, 92, 255, .18) !important; | |||
box-shadow: none !important; | |||
} | |||
/* opcional: hover levinho */ | |||
.rt-skill-wrap .drops-inline:hover { | |||
background: rgba(124, 92, 255, .09) !important; | |||
} | |||
/* ================================ | |||
Alterações > Habilidades (somente nesta seção) | |||
Wrapper: #rt-skills-coll | |||
================================ */ | |||
/* o “cartão” do colapsível (a listra onde fica pill + Mostrar/Ocultar) */ | |||
#rt-skills-coll .drops-inline.mw-collapsible{ | |||
background: rgba(123, 92, 255, .06) !important; /* roxinho bem leve */ | |||
border: 1px solid rgba(123, 92, 255, .18) !important; | |||
box-shadow: 0 10px 22px rgba(76, 29, 149, .08) !important; /* tira o rosa estourado */ | |||
border-radius: 18px !important; | |||
padding: 10px 12px !important; | |||
} | |||
/* quando abre, não aumenta o “branco/rosa” */ | |||
#rt-skills-coll .drops-inline.mw-collapsible.mw-collapsible-expanded{ | |||
background: rgba(123, 92, 255, .05) !important; | |||
box-shadow: 0 10px 20px rgba(76, 29, 149, .07) !important; | |||
} | |||
/* o painel interno do MediaWiki (era o que estava “lavando” a cor) */ | |||
#rt-skills-coll .drops-inline .mw-collapsible-content{ | |||
background: transparent !important; | |||
padding: 8px 0 0 !important; | |||
margin: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
/* o card interno (onde está a tabela) — remove a sombra forte e “desrosa” */ | |||
#rt-skills-coll .drops-inline .eden-quests-card.is-daily-rewards{ | |||
background: rgba(255,255,255,.55) !important; /* branco translúcido (não rosado) */ | |||
border: 1px solid rgba(123, 92, 255, .14) !important; | |||
box-shadow: none !important; /* aqui estava o “estouro” */ | |||
border-radius: 16px !important; | |||
} | |||
/* Habilidades: linhas sempre lavanda (sem zebra) */ | |||
#rt-skills-coll .eden-quests-table th, | |||
#rt-skills-coll .eden-quests-table td{ | |||
background: rgba(123, 92, 255, .045) !important; /* lavanda fixa */ | |||
} | |||
/* | |||
. | /* remove qualquer alternância */ | ||
#rt-skills-coll .eden-quests-table tr:nth-child(even) td, | |||
#rt-skills-coll .eden-quests-table tr:nth-child(odd) td{ | |||
background: rgba(123, 92, 255, .045) !important; | |||
} | } | ||
. | /* tabela por dentro: lavanda suave consistente */ | ||
#rt-skills-coll .eden-quests-table th{ | |||
background: rgba(123, 92, 255, .12) !important; | |||
} | |||
#rt-skills-coll .eden-quests-table td{ | |||
background: rgba(123, 92, 255, .045) !important; | |||
} | |||
/* ========================= | |||
Habilidades (Alterações por Classe) — camadas/sombra | |||
========================= */ | |||
#rt-skills-wrap{ | |||
background: rgba(123, 92, 255, .06); | |||
border: 1px solid rgba(123, 92, 255, .18); | |||
box-shadow: 0 18px 46px rgba(76, 29, 149, .10); | |||
} | } | ||
/* cada colapsível (a “listra”/faixa) vira um cartão com profundidade */ | |||
#rt-skills-wrap .drops-inline{ | |||
background: rgba(123, 92, 255, .05); | |||
border: 1px solid rgba(123, 92, 255, .18); | |||
border-radius: 16px; | |||
box-shadow: 0 14px 34px rgba(76, 29, 149, .10); | |||
margin: 12px 0; | |||
padding: 8px 10px; | |||
} | } | ||
/* quando abre, dá mais “conversa” com o restante */ | |||
#rt-skills-wrap .mw-collapsible-content{ | |||
margin-top: 10px; | |||
} | } | ||
/* card interno (onde fica a tabela) menos “branco estourado” */ | |||
#rt-skills-wrap .eden-quests-card{ | |||
background: rgba(251, 248, 255, .92); | |||
border: 1px solid rgba(123, 92, 255, .16); | |||
border-radius: 16px; | |||
box-shadow: 0 12px 28px rgba(76, 29, 149, .10); | |||
} | } | ||
/* tabela com acabamento (fica “destacadinha”) */ | |||
#rt-skills-wrap .eden-quests-table{ | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
border-radius: 14px; | |||
overflow: hidden; | |||
box-shadow: 0 10px 22px rgba(76, 29, 149, .08); | |||
} | } | ||
Edição das 15h13min de 1 de fevereiro de 2026
/************************************************************
* UTILITÁRIOS GERAIS
************************************************************/
/* === RagnaTrue – Bloco de Especificações do Servidor === */
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700&display=swap');
:root{
--rt-bg: #ffffff;
--rt-bd: #e7e8ee;
--rt-soft: #f7f8fb;
--rt-text: #1e1b2e;
--rt-accent: #5b3aa8;
--rt-grad: linear-gradient(90deg,#ffb86c 0%,#ff8d6b 50%,#ffd36a 100%);
}
.rt-specs{
background: var(--rt-bg);
border: 1px solid var(--rt-bd);
border-radius: 14px;
padding: 16px 18px 6px;
box-shadow: 0 4px 16px rgba(30,27,46,.06);
max-width: 1100px;
margin: 10px auto 18px;
}
/* ====== ÁREA DE DESTAQUES – CHIPS ====== */
.home-featured-chips {
max-width: 1200px;
margin: 24px auto 32px;
padding: 18px 22px 22px;
border-radius: 24px;
background: #f9f4ff; /* roxo bem clarinho */
border: 1px solid rgba(139, 111, 255, 0.28);
box-shadow: 0 16px 32px rgba(111, 80, 210, 0.16);
}
/* Cabeçalho da faixa */
.home-featured-chips-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-bottom: 14px;
}
.home-featured-chips-badge {
padding: 5px 16px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #0f172a;
background: linear-gradient(90deg, #bfdbfe, #a5b4fc); /* azul clarinho */
box-shadow: 0 8px 18px rgba(129, 140, 248, 0.5);
}
.home-featured-chips-sub {
font-size: 12px;
color: #4b5563;
}
/* Grupos (Primeiros passos / Sistemas em destaque) */
.home-featured-chips-group + .home-featured-chips-group {
margin-top: 10px;
padding-top: 6px;
border-top: 1px dashed rgba(148, 132, 255, 0.35);
}
.home-featured-chips-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 6px;
color: #5b21b6;
}
/* Lista de chips */
.home-featured-chips-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.home-featured-chips-list li {
margin: 0;
}
/* Cada chip é o próprio link da wiki */
.home-featured-chips-list li a {
display: inline-block;
padding: 7px 14px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(148, 132, 255, 0.45);
font-size: 13px;
color: #4338ca;
text-decoration: none;
box-shadow: 0 6px 14px rgba(129, 140, 248, 0.25);
transition: background 0.15s ease, transform 0.15s ease,
box-shadow 0.15s ease, border-color 0.15s ease,
color 0.15s ease;
}
/* Hover / foco: chip ganha destaque */
.home-featured-chips-list li a:hover,
.home-featured-chips-list li a:focus {
background: #eef2ff;
border-color: #6366f1;
color: #1f2933;
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(107, 114, 255, 0.45);
}
/* RESPONSIVO */
@media (max-width: 900px) {
.home-featured-chips {
padding: 14px 14px 18px;
}
.home-featured-chips-header {
align-items: flex-start;
}
.home-featured-chips-sub {
font-size: 11px;
}
}
.rt-specs-title{
font-family: "Paytone One", system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .5px;
text-align: center;
margin: 2px 0 12px;
font-size: 22px;
line-height: 1.1;
background: var(--rt-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rt-specs-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 10px 18px;
list-style: none;
margin: 0;
padding: 0 6px 12px;
font-family: "Nunito", system-ui, sans-serif;
color: var(--rt-text);
font-size: 16px;
}
.rt-specs-grid li{
background: var(--rt-soft);
border: 1px solid var(--rt-bd);
border-radius: 10px;
padding: 10px 12px;
}
.rt-specs-grid b{
color: var(--rt-accent);
font-weight: 800;
}
.rt-specs-high{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 8px 14px;
list-style: none;
margin: 6px 0 6px;
padding: 0 6px 14px;
font-family: "Nunito", system-ui, sans-serif;
font-size: 16px;
}
.rt-specs-high li{
position: relative;
padding-left: 26px;
}
.rt-specs-high li::before{
content: "✔";
position: absolute;
left: 0;
top: 0;
color: #30b86b;
font-weight: 900;
}
.rt-specs-note{
margin: 0 auto 4px;
text-align: center;
font-family: "Nunito", system-ui, sans-serif;
font-size: 13px;
color: #6a6a7a;
}
/* === Hover com ampliação nos cards da configuração === */
.rt-specs-grid li{
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
will-change: transform;
transform: translateZ(0); /* suaviza em Safari/Chrome */
transform-origin: center center;
}
.rt-specs-grid li:hover,
.rt-specs-grid li:focus-within{ /* acessível ao navegar por teclado */
transform: scale(1.03);
background: #fff;
border-color: rgba(91,58,168,.35); /* var(--rt-accent) suavizado */
box-shadow: 0 8px 22px rgba(30,27,46,.12);
}
.rt-specs-grid li:active{
transform: scale(.99); /* leve feedback ao clique */
}
/* Respeita usuários com “reduzir animações” */
@media (prefers-reduced-motion: reduce){
.rt-specs-grid li{ transition: none; }
.rt-specs-grid li:hover,
.rt-specs-grid li:focus-within{ transform: none; }
}
/* ===== HOME – Mensagem abaixo do banner: ZERA QUALQUER FUNDO ===== */
/* Fontes */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Titan+One&family=Lilita+One&display=swap');
/* Seletor mais forte para ganhar da skin */
.mw-parser-output .home-welcome{
font-family: "Lilita One", system-ui, sans-serif !important; /* padrão */
font-size: clamp(18px, 2.1vw, 28px);
line-height: 1.45;
text-align: center;
color: #1c1431;
background: transparent !important;
margin: 12px auto 18px;
max-width: 1200px;
}
/* Trocas rápidas de fonte */
.mw-parser-output .home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif !important; }
.mw-parser-output .home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif !important; }
.mw-parser-output .home-welcome.rt-font-lilita { font-family: "Lilita One", system-ui, sans-serif !important; }
/* Opcional: frase toda em UPPERCASE */
.mw-parser-output .home-welcome.rt-allcaps{
text-transform: uppercase;
letter-spacing: .02em;
}
/* Mantém o gradiente do “RagnaTrue” */
.mw-parser-output .home-welcome .rt-gradient{
background: linear-gradient(#ff6c5c,#ff9550,#ffc95e) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
display: inline-block;
}
.mw-parser-output .home-welcome .rt-brand{
-webkit-text-stroke: 0.9px rgba(37,19,61,.28);
text-shadow: 0 2px 0 rgba(37,19,61,.12), 0 0 10px rgba(255,190,120,.18);
}
.home-welcome,
.mw-parser-output .home-welcome,
#content .home-welcome {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important; /* remove “acolchoado” herdado */
}
/* zera também QUALQUER coisa dentro do bloco */
.home-welcome *,
.mw-parser-output .home-welcome * {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* se algum wrapper “box” padrão for injetado, neutraliza */
.home-welcome .ambox,
.home-welcome .tmbox,
.home-welcome .messagebox,
.home-welcome .notice,
.home-welcome .thumb,
.home-welcome .thumbinner,
.home-welcome .plainlinks {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
/* mantém apenas a tipografia que já definimos */
.home-welcome .home-welcome-text {
margin: 0 !important;
}
/* bloco do texto abaixo do banner */
.home-welcome{
max-width: 1100px;
margin: 10px auto 18px;
padding: 0 12px;
background: transparent !important;
border: 0 !important;
text-align: justify; /* se preferir centralizado, troque por: center */
text-justify: inter-word;
font-size: clamp(18px, 2.15vw, 26px);
line-height: 1.55;
}
/* Fontes desenhadas */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Titan+One&family=Lilita+One&display=swap');
/* Base do bloco (fundo transparente, centralizado) */
.home-welcome{
/* escolha padrão aqui se quiser */
font-family: "Lilita One", system-ui, sans-serif;
font-size: clamp(18px, 2.1vw, 28px);
line-height: 1.45;
text-align: center;
color: #1c1431;
background: transparent !important;
margin: 12px auto 18px;
max-width: 1100px;
}
/* Trocas rápidas de fonte (aplique uma destas classes no <div>) */
.home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif; }
.home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif; }
.home-welcome.rt-font-lilita { font-family: "Lilita One", system-ui, sans-serif; } /* redondinha “cute” */
/* (Opcional) Deixar a frase toda em UPPERCASE */
.home-welcome.rt-allcaps{
text-transform: uppercase;
letter-spacing: .02em;
}
/* Gradiente do “RagnaTrue” (mantém exatamente como estava) */
.home-welcome .rt-gradient{
background: linear-gradient(90deg,#ffb36b 0%,#ffd28a 40%,#fff3c4 55%,#ffb36b 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
display: inline-block;
}
.home-welcome .rt-brand{
-webkit-text-stroke: 0.9px rgba(37,19,61,.28);
text-shadow: 0 2px 0 rgba(37,19,61,.12), 0 0 10px rgba(255,190,120,.18);
}
.icon-inline { display:inline-flex; align-items:center; gap:6px; line-height:1; }
.icon-inline img.mw-file-element { image-rendering: pixelated; vertical-align: middle; transform: translateY(-1px); }
.slot-num{ display:inline-block; width:1.1ch; text-align:center; font-variant-numeric: tabular-nums; }
.no-ext a.external { background-image:none !important; padding-right:0 !important; }
.no-ext a.external::after { content:none !important; }
/************************************************************
* BOXES DE DIFICULDADE / DROPS (COLLAPSIBLE)
************************************************************/
.dificuldades .mw-collapsible .mw-collapsible-toggle{
float:none !important; display:inline-block !important; margin:2px auto 4px !important;
text-align:center !important; width:auto !important;
}
.dificuldades .mw-collapsible .mw-collapsible-toggle[style*="position"]{ position:static !important; }
.dificuldades .dif-inline.mw-collapsible{
display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important;
border:1px solid #ddd; border-radius:12px; overflow:hidden;
}
.dificuldades .dif-header{
display:flex; justify-content:center; align-items:center; gap:8px;
padding:4px 8px; font-weight:700; text-align:center;
}
.dificuldades .dif-header .mw-collapsible-toggle{
float:none !important; display:inline-block !important; width:auto !important;
margin:0 !important; position:static !important; text-decoration:none;
}
.dificuldades .dif-inline .mw-collapsible-content{ width:100% !important; padding:8px !important; text-align:center; }
.drops-inline.mw-collapsible{
display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:8px;
border:1px solid #ddd; border-radius:12px; background:#fff; overflow:hidden;
}
.drops-inline .drops-title{ flex:0 0 auto; margin:0; padding:6px; font-weight:700; text-align:center; }
.drops-inline > .mw-collapsible-toggle{
flex:0 0 auto; float:none !important; display:inline-block !important; width:auto !important;
margin:0 0 0 8px !important; position:static !important;
}
.drops-inline .mw-collapsible-content{ width:100% !important; padding:8px 8px 16px; }
/************************************************************
* TABELAS / TURN IN
************************************************************/
.turnin-tabela td > *{
display:contents !important;
border:0 !important; background:transparent !important; box-shadow:none !important;
padding:0 !important; margin:0 !important;
}
/************************************************************
* HOME – WRAPPERS
************************************************************/
.home-fullbleed{
width:100%;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
padding-left:12px; padding-right:12px;
box-sizing:border-box; overflow-x:clip;
}
@supports (width:100svw){
.home-fullbleed{ margin-left:calc(50% - 50svw); margin-right:calc(50% - 50svw); }
}
.home-contained{ width:100%; max-width:100%; margin:0; padding:0 12px; box-sizing:border-box; }
/************************************************************
* HOME – GUIAS IMPORTANTES (card + grid)
************************************************************/
/* Paleta e espaçamentos */
:root{
--guide-sep: #e3defa; /* linha separadora */
--guide-hover-bg: #e1d0ff; /* hover (um pouco mais escuro) */
--home-col-pad-x: 10px; /* padding lateral da coluna */
--home-icon-w: 16px; /* largura do ícone */
--home-icon-h: 16px; /* altura do ícone */
--home-icon-gap: 12px; /* vão entre ícone e texto */
--home-guides-bg: #f6f7f9; /* fundo do card */
--home-guides-bd: #e3e6ee; /* borda do card */
--home-guides-radius: 12px;
}
/* Card da seção */
.home-guides-surface{
background: var(--home-guides-bg);
border: 1px solid var(--home-guides-bd);
border-radius: var(--home-guides-radius);
padding: 12px 0;
margin: 8px 0 16px;
/* Linhas internas ligeiramente mais contrastadas nesse fundo */
--guide-sep: #dcdfea;
}
/* Grid 4 colunas */
.home-guides-grid{
display:grid;
grid-template-columns: repeat(4, minmax(220px,1fr));
gap:28px;
width:100%;
}
.home-guides-grid .col{ min-width:0; }
.home-guides-grid .col-title{ display:none !important; }
/* Lista básica */
.home-guides-grid .home-list{ margin:0; padding:0; list-style:none; }
/* Linha: grid [ícone | texto] + hover no LI (inclui ícone) */
.home-guides-grid .home-list li{
display:grid !important;
grid-template-columns: var(--home-icon-w) 1fr;
column-gap: var(--home-icon-gap);
align-items:center;
padding:0 var(--home-col-pad-x);
position:relative;
border-radius:6px; /* cantos suaves no highlight */
overflow:hidden; /* recorta o highlight */
}
.home-guides-grid .home-list li:hover,
.home-guides-grid .home-list li:focus-within{
background: var(--guide-hover-bg);
transform: scale(1.02);
box-shadow: 0 10px 22px rgba(24,18,58,.18);
z-index: 3;
}
/* Ícone (link de arquivo) – clicável */
.home-guides-grid .home-list li > a.image{
grid-column:1;
justify-self:start;
width:var(--home-icon-w);
height:var(--home-icon-h);
margin:0 !important;
pointer-events:auto !important;
cursor:pointer;
position:relative;
z-index:2; /* acima do fundo do li */
}
.home-guides-grid .home-list li > a.image .mw-file-element{
width:100%; height:auto; max-height:var(--home-icon-h);
display:block; image-rendering:pixelated;
}
/* Link do texto – separador e micro-respiro à esquerda */
.home-guides-grid .home-list li > a:not(.image),
.home-guides-grid .home-list li > a:not(.image):visited{
grid-column:2;
display:block; width:100%;
padding:8px 0 8px 2px; /* 2px de “respiro” no texto */
text-decoration:none !important; color:inherit !important; background:transparent;
border-bottom:1px solid var(--guide-sep);
transition: background .12s ease;
position:relative; z-index:1;
}
/* Último item sem linha */
.home-guides-grid .home-list li:last-child > a:not(.image){ border-bottom:0; }
/* Não pintar o link (quem pinta é o LI) */
.home-guides-grid .home-list li > a:not(.image):hover,
.home-guides-grid .home-list li > a:not(.image):focus{
background: transparent !important;
}
/* Responsivo */
@media (max-width:1100px){ .home-guides-grid{ grid-template-columns:repeat(2, minmax(220px,1fr)); } }
@media (max-width:640px){ .home-guides-grid{ grid-template-columns:1fr; } }
/* Importa fontes 8-bit / pixel-friendly */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;700&family=VT323&display=swap');
/* Escolha de fontes (troque a ordem se quiser priorizar outra) */
:root{
--font-eden-title: 'Press Start 2P', system-ui, sans-serif; /* bem 8-bit */
--font-eden-item: 'Pixelify Sans', 'VT323', monospace; /* legível */
}
/* Aplica só dentro do card de guias */
.home-guides-surface .home-list > li > a:not(.image){
font-family: var(--font-eden-item);
font-size: 14px; /* 13–15px funciona bem */
line-height: 1.35;
letter-spacing: 0.2px;
}
/* Se quiser o título “Guias importantes” nesse vibe 8-bit: */
.home-guides-surface ~ h2 .mw-headline,
.home-guides-surface .section-title-eden { /* use essa classe se preferir marcar no HTML */
font-family: var(--font-eden-title);
font-size: 16px;
text-transform: uppercase;
letter-spacing: .5px;
}
/* Área do banner acima do grid: fundo branco, sem borda ou sombra */
.home-banner-area {
background: #fff !important;
padding: 0 !important;
margin: 6px auto 10px !important; /* “ligeiramente acima” do grid */
border: 0 !important;
}
/* Banner limpo: só a imagem, responsivo e centralizado */
.home-banner-solo,
.home-banner-solo img {
display: block;
max-width: 100%;
height: auto !important; /* evita qualquer esticamento */
margin: 0 auto; /* centraliza */
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important; /* se a arte já tem arredondado, deixa 0 aqui */
}
/* Faixa do banner: fundo branco, sem borda/sombra, com respiro pequeno */
.home-banner-strip{
background: #fff !important;
margin: 6px auto 12px !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* MediaWiki às vezes envolve a imagem em .thumb/.thumbinner:
zera qualquer decoração/navegador que tente “enquadrar” a imagem */
.home-banner-strip .thumb,
.home-banner-strip .thumbinner{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Imagem do banner: bloco, centralizada, responsiva, sem esticar */
.home-banner-img,
.home-banner-strip .image,
.home-banner-strip .image img{
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
height: auto !important;
background: transparent !important;
border: 0 !important;
}
/* Opcional: limite “saudável” para não ficar grande demais em telas enormes */
@media (min-width: 1280px){
.home-banner-strip .image img,
.home-banner-img{ max-width: 980px !important; }
}
/* Caixa do banner: centralizada, sem fundo visível, sem borda/sombra */
.home-banner-box{
max-width: 697px; /* nunca passa de 697 */
width: 100%; /* encolhe em telas menores */
margin: 8px auto 12px; /* centraliza */
padding: 0;
background: transparent !important; /* “fundo invisível” */
border: 0 !important;
box-shadow: none !important;
line-height: 0; /* remove qualquer “respiro” vertical do container */
}
/* Banner – sombra suave sempre + zoom leve no hover */
.banner-true{
display:block;
width:min(697px, 100%);
height:auto;
margin:10px auto 14px;
background:transparent !important;
border:0 !important;
box-shadow:none; /* evita sombras herdadas */
filter: drop-shadow(0 8px 18px rgba(24, 18, 58, .18)); /* respeita transparência da PNG */
transform-origin:center center;
transition: transform .18s ease, filter .18s ease;
will-change: transform, filter;
}
/* Hover/Focus: leve expansão + sombra mais marcada */
.banner-true:hover,
.banner-true:focus {
transform: scale(1.02); /* “expande” sem distorcer */
filter: drop-shadow(0 14px 28px rgba(24, 18, 58, .28));
}
/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
.banner-true{ transition: filter .18s ease; }
.banner-true:hover,
.banner-true:focus{ transform:none; }
}
/* ========== DROPS – cabeçalho com toggle inline e centralizado ========== */
.drops-inline.mw-collapsible{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:8px;
border:1px solid #e7e8ee; border-radius:12px;
background:#fff; overflow:hidden;
}
/* título */
.drops-inline .drops-title{
order:1; padding:6px 8px; margin:0;
font-weight:700; text-align:center;
}
/* toggle na MESMA linha do título */
.drops-inline > .mw-collapsible-toggle{
order:2 !important;
float:none !important;
display:inline-flex !important;
align-items:center; gap:6px;
width:auto !important; margin:0 !important; position:static !important;
}
/* “pill” do toggle */
.drops-inline > .mw-collapsible-toggle a{
display:inline-block; padding:4px 10px;
border-radius:8px; background:#f3f4fa; text-decoration:none; font-weight:600;
}
.drops-inline > .mw-collapsible-toggle a:hover{ background:#e9eafb; }
/* conteúdo abre abaixo, largura total */
.drops-inline .mw-collapsible-content{
order:3; width:100%; padding:10px 8px 14px;
}
/* (higiene) evita qualquer float/resíduo em alguns skins */
.drops-inline .mw-collapsible-toggle .mw-collapsible-toggle-default{ float:none !important; }
/* opcional: tabela mais “limpa” dentro do bloco */
.drops-inline .mw-collapsible-content .wikitable{
border-collapse:collapse; margin:auto;
}
.drops-inline .mw-collapsible-content .wikitable th,
.drops-inline .mw-collapsible-content .wikitable td{
border:1px solid #e6e8f2;
}
/* ========= DROPS – visual bonito e estilizado ========= */
:root{
--drop-bg: #ffffff;
--drop-bd: #e9eaf3;
--drop-shadow: 0 8px 26px rgba(25,22,52,.10);
--drop-head-grad: linear-gradient(90deg,#7b5cff 0%,#a26bff 60%,#c79bff 100%);
--drop-head-text: #fff;
--dif-easy: #2ecc71;
--dif-hard: #f39c12;
--dif-night: #e74c3c;
--toggle-pill-bg: rgba(255,255,255,.15);
--toggle-pill-bg-hover: rgba(255,255,255,.25);
}
.skin-vector-dark :root{
--drop-bg: #15161b;
--drop-bd: #2a2c35;
--drop-shadow: 0 8px 26px rgba(0,0,0,.35);
--toggle-pill-bg: rgba(255,255,255,.12);
--toggle-pill-bg-hover: rgba(255,255,255,.2);
}
/* Cartão base */
.drops-inline.mw-collapsible{
border:1px solid var(--drop-bd);
border-radius:14px;
background: var(--drop-bg);
box-shadow: var(--drop-shadow);
overflow:hidden;
}
/* Cabeçalho: título + toggle lado a lado e CENTRALIZADOS */
.drops-inline .drops-header{
display:flex; align-items:center; justify-content:center; gap:10px;
padding:10px 14px;
background: var(--drop-head-grad);
color: var(--drop-head-text);
position: relative;
}
/* Título */
.drops-inline .drops-title{
font-weight:800;
font-size:15px;
letter-spacing:.3px;
margin:0;
color: inherit;
}
/* Badge de dificuldade */
.drops-inline .dif-badge{
display:inline-flex; align-items:center; gap:6px;
height:22px; padding:0 10px;
border-radius:999px;
font-weight:800; font-size:12px; line-height:22px;
background: rgba(255,255,255,.18);
color:#fff;
text-transform: uppercase;
}
/* Cores por dificuldade */
.drops-inline.is-easy .dif-badge{ background: var(--dif-easy); }
.drops-inline.is-hard .dif-badge{ background: var(--dif-hard); }
.drops-inline.is-nightmare .dif-badge{ background: var(--dif-night); }
/* Toggle “pill” com chevron giratório */
.drops-inline > .mw-collapsible-toggle{
float:none !important; display:inline-block !important; width:auto !important;
margin:0 !important; position:static !important;
}
.drops-inline > .mw-collapsible-toggle a{
display:inline-flex; align-items:center; gap:8px;
height:28px; padding:0 12px;
border-radius:999px;
text-decoration:none; font-weight:700;
color:#fff;
background: var(--toggle-pill-bg);
transition: background .15s ease, transform .15s ease;
}
.drops-inline > .mw-collapsible-toggle a:hover{ background: var(--toggle-pill-bg-hover); }
/* Esconde o texto do link e coloca um rótulo compacto + chevron */
.drops-inline > .mw-collapsible-toggle a{
font-size:0; /* esconde “Mostrar/Ocultar” original */
}
.drops-inline > .mw-collapsible-toggle a::before{
content:"Detalhes";
font-size:12px; letter-spacing:.2px;
}
.drops-inline > .mw-collapsible-toggle a::after{
content:"▾";
font-size:14px; transform: rotate(0deg);
transition: transform .15s ease;
}
/* Rotação quando aberto */
.drops-inline.is-open > .mw-collapsible-toggle a::after{ transform: rotate(180deg); }
/* Conteúdo */
.drops-inline .mw-collapsible-content{
padding:12px 10px 16px;
background: transparent;
}
/* Tabela interna – mais limpa e elegante */
.drops-inline .mw-collapsible-content .wikitable{
margin:10px auto; width:min(720px, 95%);
border-collapse:collapse;
background:#fff;
border:1px solid var(--drop-bd);
border-radius:10px; overflow:hidden;
}
.drops-inline .mw-collapsible-content .wikitable th{
background:#f7f7fb; font-weight:800;
border-bottom:1px solid var(--drop-bd);
}
.drops-inline .mw-collapsible-content .wikitable td,
.drops-inline .mw-collapsible-content .wikitable th{
border:1px solid var(--drop-bd);
padding:.55em .7em;
text-align:center;
}
/* Hover no bloco inteiro (sutil) */
.drops-inline:hover{ box-shadow: 0 12px 32px rgba(25,22,52,.16); }
/* Acessibilidade (foco visível) */
.drops-inline .drops-header:focus-within{
outline: 2px solid rgba(255,255,255,.7);
outline-offset: -2px;
}
/* ========= DROPS – paleta por dificuldade + superfícies ========= */
/* Fallback (caso não tenha tag) */
.drops-inline{
--dif-color: #7b5cff;
--head-grad: linear-gradient(90deg,#7b5cff,#a26bff,#c79bff);
--dif-tint: rgba(123,92,255,.10); /* fundo claro da lista */
--dif-tint-strong: rgba(123,92,255,.18);/* cabeçalho da tabela */
}
/* Easy = Verde */
.drops-inline.is-easy{
--dif-color:#2ecc71;
--head-grad: linear-gradient(90deg,#2ecc71,#3ddb7f,#6be8a1);
--dif-tint: rgba(46,204,113,.10);
--dif-tint-strong: rgba(46,204,113,.18);
}
/* Hard = Vermelho */
.drops-inline.is-hard{
--dif-color:#e74c3c;
--head-grad: linear-gradient(90deg,#e74c3c,#ef6b5e,#f39c91);
--dif-tint: rgba(231,76,60,.10);
--dif-tint-strong: rgba(231,76,60,.18);
}
/* Nightmare = Azul */
.drops-inline.is-nightmare{
--dif-color:#3498db;
--head-grad: linear-gradient(90deg,#3498db,#4aa8ea,#7bc2f5);
--dif-tint: rgba(52,152,219,.10);
--dif-tint-strong: rgba(52,152,219,.18);
}
/* Hallucination = Roxo */
.drops-inline.is-hallucination{
--dif-color:#9b59b6;
--head-grad: linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9);
--dif-tint: rgba(155,89,182,.12);
--dif-tint-strong: rgba(155,89,182,.20);
}
/* Aplica as variáveis acima nos elementos já existentes */
.drops-inline .drops-header{
background: var(--head-grad);
color:#fff;
}
.drops-inline .dif-badge{
background: var(--dif-color);
}
/* Fundo da LISTA (zona que envolve a tabela) com tom claro */
.drops-inline .mw-collapsible-content{
background: var(--dif-tint);
border-top: 1px solid var(--drop-bd);
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
/* Tabela harmonizada com a cor (cabeçalho um pouco mais forte) */
.drops-inline .mw-collapsible-content .wikitable{
background: rgba(255,255,255,.9); /* mantém legibilidade */
border:1px solid var(--drop-bd);
border-radius: 10px;
overflow: hidden;
}
.drops-inline .mw-collapsible-content .wikitable th{
background: var(--dif-tint-strong);
border-bottom:1px solid var(--drop-bd);
color:#1e2330;
}
.drops-inline .mw-collapsible-content .wikitable td,
.drops-inline .mw-collapsible-content .wikitable th{
border-color: var(--drop-bd);
}
/* ===== Versão simples: Título + [Mostrar] centralizados ===== */
.mw-parser-output .drops-inline.mw-collapsible{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
padding:10px 14px;
border:1px solid #e7e8ee;
border-radius:12px;
background:#fff;
}
/* Título "Tabela de Drops" */
.mw-parser-output .drops-inline .drops-title{
margin:0;
font-weight:700;
}
/* Toggle [Mostrar]/[Ocultar] na MESMA linha e centralizado */
.mw-parser-output .drops-inline > .mw-collapsible-toggle{
order:2 !important;
float:none !important;
position:static !important;
display:inline-flex !important;
align-items:center;
margin:0 !important;
}
.mw-parser-output .drops-inline > .mw-collapsible-toggle a{
display:inline-flex;
align-items:center;
line-height:1;
white-space:nowrap; /* evita quebra do "Mostrar ▸" */
}
/* Conteúdo aberto ocupa a largura toda do cartão */
.mw-parser-output .drops-inline .mw-collapsible-content{
width:100% !important;
padding:10px 12px 14px;
background: #ffffff !important;
}
/* ===== DROPS (badge central + toggle central) ===== */
.mw-parser-output .drops-inline{
/* cartao */
border:1px solid #e7e8ee;
border-radius:12px;
background:#fff;
box-shadow:0 6px 18px rgba(30,27,46,.06);
padding:10px 12px;
/* layout do header */
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center; /* centraliza badge e toggle */
gap:12px;
}
/* badge gerado por CSS a partir de data-badge */
.mw-parser-output .drops-inline::before{
content: attr(data-badge);
text-transform: uppercase;
display:inline-flex;
align-items:center;
justify-content:center;
height:28px;
line-height:28px;
padding:0 16px;
min-width:150px; /* cabe “HALLUCINATION” */
border-radius:999px;
font:800 12px/1 system-ui, sans-serif;
color:#fff;
background: var(--dif-color, #7b5cff);
box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
/* toggle [Mostrar ▸] na mesma linha e central */
.mw-parser-output .drops-inline > .mw-collapsible-toggle{
order:2 !important;
float:none !important;
display:inline-flex !important;
align-items:center;
margin:0 !important;
position:static !important;
}
.mw-parser-output .drops-inline > .mw-collapsible-toggle a{
display:inline-flex;
align-items:center;
gap:4px;
height:28px;
line-height:28px;
padding:0 12px;
border-radius:999px;
text-decoration:none;
font-weight:700;
background:#f3f4fa;
color:#223;
}
.mw-parser-output .drops-inline > .mw-collapsible-toggle a:hover{
background:#e9eafb;
}
/* conteúdo abre abaixo (linha inteira), com “tinta” da dificuldade */
.mw-parser-output .drops-inline .mw-collapsible-content{
order:10;
flex-basis:100%;
width:100% !important;
margin-top:8px;
background: var(--dif-tint, rgba(123,92,255,.08));
border-top:1px solid #e9eaf3;
border-bottom-left-radius:12px;
border-bottom-right-radius:12px;
padding:8px 8px 16px;
}
/* cores por dificuldade */
.mw-parser-output .drops-inline.is-easy{
--dif-color:#2ecc71; /* verde */
--dif-tint: rgba(46,204,113,.10);
}
.mw-parser-output .drops-inline.is-hard{
--dif-color:#e74c3c; /* vermelho */
--dif-tint: rgba(231,76,60,.10);
}
.mw-parser-output .drops-inline.is-nightmare{
--dif-color:#3498db; /* azul */
--dif-tint: rgba(52,152,219,.10);
}
.mw-parser-output .drops-inline.is-hallucination{
--dif-color:#9b59b6; /* roxo */
--dif-tint: rgba(155,89,182,.12);
}
/* responsivo */
@media (max-width:640px){
.mw-parser-output .drops-inline::before{ min-width:120px; padding:0 12px; }
}
/* ====== Custo de Entrada – grid de 4 colunas por dificuldade ====== */
.entry-grid{
display:grid;
grid-template-columns: repeat(4, minmax(240px,1fr));
gap:14px;
margin:10px 0 16px;
}
@media (max-width:1200px){ .entry-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)); } }
@media (max-width:640px){ .entry-grid{ grid-template-columns:1fr; } }
/* Cartão base */
.entry-card{
border:1px solid #e3e6ee;
border-radius:12px;
overflow:hidden;
background: var(--tint, #fff);
box-shadow: 0 2px 12px rgba(24,18,58,.06);
}
/* Cabeçalho e corpo */
.entry-card .entry-head{
padding:6px 8px;
text-align:center;
font-weight:800;
color:#fff;
background: var(--accent, #6b6b6b);
letter-spacing:.3px;
}
.entry-card .entry-body{
padding:12px;
text-align:center;
background: var(--tint, #fff);
line-height:1.6;
}
.entry-card .entry-body b{ font-weight:700; }
.entry-card img.mw-file-element{ image-rendering:pixelated; vertical-align:middle; transform:translateY(-1px); }
/* Paleta = mesma dos badges */
.entry-card.dif-easy{ --accent:#2ecc71; --tint:#eaf8f0; }
.entry-card.dif-hard{ --accent:#e74c3c; --tint:#fdecea; }
.entry-card.dif-nightmare{ --accent:#3498db; --tint:#eaf3fb; }
.entry-card.dif-hallucination{ --accent:#9b59b6; --tint:#f1e8f6; }
/* ===== Bonificações – Cards ===== */
.mw-parser-output .bono-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
gap:18px;
margin:10px 0 24px;
}
.mw-parser-output .bono-card{
--bg:#fff; --bd:#e7e8ee; --head:#5b3aa8; --headText:#fff;
background:var(--bg);
border:1px solid var(--bd);
border-radius:14px;
box-shadow:0 4px 16px rgba(30,27,46,.06);
display:flex; flex-direction:column; min-height:170px;
}
/* Cabeçalho colorido + chip */
.mw-parser-output .bono-card .bono-head{
background:var(--head);
color:var(--headText);
padding:10px 14px;
border-radius:14px 14px 0 0;
display:flex; align-items:center; justify-content:center; gap:10px;
font-weight:800; letter-spacing:.2px;
}
.mw-parser-output .bono-card .rate-chip{
background:rgba(255,255,255,.22);
border-radius:999px;
padding:2px 10px;
font:800 12px/1 system-ui, sans-serif;
}
/* Corpo do card */
.mw-parser-output .bono-card .bono-body{ padding:12px 14px 14px; }
.mw-parser-output .bono-card .bono-body ul{ margin:6px 0 0; padding-left:18px; }
.mw-parser-output .bono-card .bono-body li{ margin:4px 0; }
/* Imagens 24px ficam nitidas */
.mw-parser-output .bono-card img.mw-file-element{
image-rendering: pixelated; vertical-align: middle; transform: translateY(-1px);
}
/* ===== Paleta por rate (tints combinando) ===== */
.mw-parser-output .bono-card.rate-100{
--head:linear-gradient(90deg, #0e8f53 0%, #1fb36b 55%, #7ff0a3 100%);
--bg:#7ff0a3; --bd:#0e8f53;
}
.mw-parser-output .bono-card.rate-50{
--head:linear-gradient(90deg, #6f2bd6 0%, #9b6bff 55%, #e1d3ff 100%);
--bg:#e1d3ff; --bd:#6f2bd6;
}
.mw-parser-output .bono-card.rate-25{
--head:linear-gradient(90deg, #0f2f66 0%, #1b56aa 55%, #6fc3ff 100%);
--bg:#6fc3ff; --bd:#0f2f66;
}
.mw-parser-output .bono-card.rate-12{
--head:linear-gradient(90deg, #2f80ed 0%, #75b7ff 55%, #e6f3ff 100%);
--bg:#e6f3ff; --bd:#2f80ed;
}
.mw-parser-output .bono-card.rate-1{
--head:linear-gradient(90deg, #8a929b 0%, #b9c2cc 55%, #eef2f6 100%);
--bg:#eef2f6; --bd:#8a929b; --headText:#1f2a34;
}
.mw-parser-output .bono-card.rate-temp{
--head:linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9);
--bg:#f7f0fb; --bd:#eadcf6;
}
/* --- GRID: manter preenchimento denso e permitir itens que "span" múltiplas colunas --- */
.mw-parser-output .bono-grid{ grid-auto-flow: dense; }
/* --- TEMPORADA: ocupa 3 colunas, centralizado, com destaque visual --- */
.mw-parser-output .bono-card.rate-temp{
grid-column: span 3; /* ocupa o espaço de ~3 cards */
justify-self: center; /* centraliza o card dentro da grade */
/* se quiser garantir uma base mínima confortável: */
min-width: min(720px, 100%);
}
/* responsivo: em telas menores, reduz pra 2 colunas e depois 1 */
@media (max-width: 1200px){
.mw-parser-output .bono-card.rate-temp{ grid-column: span 2; }
}
@media (max-width: 700px){
.mw-parser-output .bono-card.rate-temp{ grid-column: span 1; min-width: 0; }
}
/* “chip” do título (Temporada) maior e robusto */
.mw-parser-output .rate-temp .rate-chip{
display:inline-block;
background: rgba(255,255,255,.18);
padding: 6px 14px;
border-radius: 999px;
font-size: 14px; /* um pouquinho maior */
font-weight: 900;
}
/* corpo com leve destaque e tipografia um tico maior */
.mw-parser-output .rate-temp .bono-body{
background: var(--temp-body-bg);
font-size: 15px;
}
/* ===== Temporada — tema preto + dourado ===== */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
.mw-parser-output .rate-temp{
position: relative;
background: #0b0b0e; /* quase preto */
border-radius: 16px;
color: #ededf0;
/* contorno de fallback (se o gradiente-borda não pegar) */
box-shadow:
0 18px 36px rgba(0,0,0,.50),
0 0 0 1px rgba(212,175,55,.35) inset;
transition: transform .18s ease, box-shadow .18s ease;
}
.mw-parser-output .rate-temp:hover{
transform: translateY(-2px);
box-shadow:
0 26px 60px rgba(0,0,0,.55),
0 0 0 1px rgba(246,226,122,.55) inset;
}
/* Borda dourada “premium” com máscara (cai no fallback acima se não suportar) */
.mw-parser-output .rate-temp::before{
content:"";
position:absolute; inset:0;
border-radius: inherit;
padding: 1px; /* espessura da borda */
background: linear-gradient(135deg,#d4af37 0%,#9c7c1b 35%,#f6e27a 60%,#d4af37 100%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor; /* Chrome/Safari */
mask-composite: exclude; /* Firefox */
pointer-events: none;
}
/* Cabeçalho/chip */
.mw-parser-output .rate-temp .bono-head{
background: transparent;
text-align: center;
padding-top: 10px;
}
.mw-parser-output .rate-temp .rate-chip{
display:inline-block;
padding: 8px 14px;
border-radius: 999px;
font: 900 14px/1 "Lilita One", system-ui, sans-serif;
letter-spacing: .6px;
text-transform: uppercase;
color: #1a1400;
background: linear-gradient(90deg,#f6e27a 0%, #e9c65a 40%, #d4af37 100%);
border: 1px solid rgba(255,255,255,.12);
box-shadow:
0 6px 14px rgba(212,175,55,.35),
inset 0 1px 0 rgba(255,255,255,.45);
}
/* Corpo do card */
.mw-parser-output .rate-temp .bono-body{
background: transparent;
padding: 14px 18px 18px;
}
.mw-parser-output .rate-temp .bono-body ul{
margin: 6px 0 0;
padding-left: 22px; /* recuo do marcador */
}
.mw-parser-output .rate-temp .bono-body li{
padding: 6px 0;
}
/* marcador dourado dos bullets */
.mw-parser-output .rate-temp .bono-body li::marker{
color: #f0d58a;
}
/* Destaque dos rótulos no texto */
.mw-parser-output .rate-temp .bono-body b{
color: #f7e08e;
font-family: "Lilita One", system-ui, sans-serif;
letter-spacing: .2px;
}
/* Links dentro do card (se houver) */
.mw-parser-output .rate-temp .bono-body a{
color: #ffd86b;
border-bottom: 1px dashed rgba(255,216,107,.35);
}
.mw-parser-output .rate-temp .bono-body a:hover{
color: #ffeaa1;
border-bottom-color: rgba(255,234,161,.6);
}
/* Ajustes para Vector Dark (se usar) */
.skin-vector-dark .mw-parser-output .rate-temp{
color: #f2f3f5;
background: #08090b;
}
.skin-vector-dark .mw-parser-output .rate-temp .rate-chip{
color: #120d00;
}
/* === Temporada: tema preto & dourado, mais claro e “brilhante” === */
.mw-parser-output .bono-card.rate-temp{
/* Paleta */
--gold-1:#fff2bf; /* luz */
--gold-2:#ffd36a; /* ouro vivo */
--gold-3:#f6b84a; /* ouro médio */
--gold-4:#b7861a; /* contorno */
--ink-1:#111216; /* fundo 1 */
--ink-2:#17181d; /* fundo 2 */
position: relative;
color:#f6f3e7;
background:
radial-gradient(120% 160% at 50% -20%, rgba(255,211,110,.18), transparent 60%),
radial-gradient(120% 140% at 50% 120%, rgba(255,211,110,.10), transparent 60%),
linear-gradient(180deg, var(--ink-1), var(--ink-2));
border:1px solid color-mix(in oklab, var(--gold-4) 85%, #000);
border-radius:16px;
box-shadow:
0 22px 40px rgba(0,0,0,.65),
0 0 0 2px rgba(255,214,140,.08) inset,
0 0 26px rgba(255,206,120,.22);
font-family:"Cormorant Garamond","Times New Roman",serif;
}
/* halo/realce de bordas (bem sutil) */
.mw-parser-output .bono-card.rate-temp::after{
content:"";
pointer-events:none;
position:absolute; inset:0; border-radius:16px;
box-shadow: 0 0 0 1px rgba(255,214,140,.25) inset,
0 0 32px rgba(255,214,120,.18);
}
/* Faixa “Temporada” – mais dourado e destacado */
.mw-parser-output .bono-card.rate-temp .bono-head{
margin:-14px auto 10px !important;
display:inline-flex; align-items:center; justify-content:center;
padding:0; background:transparent; border:0;
}
.mw-parser-output .bono-card.rate-temp .bono-head .rate-chip{
display:inline-flex; align-items:center; justify-content:center;
min-height:36px; padding:0 18px; border-radius:999px;
color:#1b1407; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 60%, var(--gold-3) 100%);
border:1px solid var(--gold-4);
box-shadow:
0 10px 24px rgba(255,203,96,.35),
0 1px 0 var(--gold-1) inset,
0 -1px 0 var(--gold-4) inset;
filter: drop-shadow(0 0 12px rgba(255,198,90,.55));
}
/* Corpo: marcadores, separadores e links claros */
.mw-parser-output .bono-card.rate-temp .bono-body ul{
margin: 6px 0 12px; padding-left: 1.25em;
}
.mw-parser-output .bono-card.rate-temp .bono-body li{
margin: 8px 0;
/* separador discreto entre linhas */
border-top:1px dashed rgba(255,214,140,.22);
padding-top:10px;
}
.mw-parser-output .bono-card.rate-temp .bono-body li:first-child{
border-top:0; padding-top:0;
}
/* marcadores dourados */
.mw-parser-output .bono-card.rate-temp .bono-body li::marker{
color: var(--gold-2);
}
/* destaques das labels (Rate, Drop, Outros...) */
.mw-parser-output .bono-card.rate-temp .bono-body b{
color: var(--gold-1);
text-shadow: 0 0 8px rgba(255,211,120,.25);
}
/* links mais visíveis */
.mw-parser-output .bono-card.rate-temp .bono-body a{
color: var(--gold-2);
text-decoration-color: rgba(255,214,140,.45);
}
.mw-parser-output .bono-card.rate-temp .bono-body a:hover{
color: var(--gold-1);
text-shadow: 0 0 10px rgba(255,211,120,.6);
}
/* (Opcional) deixa a tipografia um pouco maior e espaçada dentro do card */
.mw-parser-output .bono-card.rate-temp .bono-body{
font-size: 15.5px;
line-height: 1.55;
}
/* ====== Callouts do Guia do Iniciante ====== */
.guide-callout{
margin: 10px 0 16px;
padding: 10px 12px;
border: 1px solid #e6e8f2;
border-radius: 10px;
background: #f9fafc;
box-shadow: 0 4px 14px rgba(24,18,58,.06);
line-height: 1.45;
}
.guide-callout b{ font-weight: 800; }
/* Variações */
.guide-tip{
border-color: #cfe6ff;
background: linear-gradient(180deg,#f4f9ff, #f9fbff);
}
.guide-important{
border-color: #d9e6d9;
background: linear-gradient(180deg,#f4fff6, #fbfffc);
}
.guide-attention{
border-color: #ffe0a8;
background: linear-gradient(180deg,#fff9eb, #fffdf7);
}
/* ===== Pacote Iniciante — simples (1 coluna) ===== */
.pack-simple{
width: min(640px, 96%);
margin: 12px auto 18px; /* centraliza */
border: 1px solid var(--rt-bd, #e7e8ee);
border-radius: 12px;
background: var(--rt-bg, #fff);
}
.pack-title{
font-weight: 800;
text-align: center;
padding: 8px 10px;
color: var(--rt-text, #1e1b2e);
}
.pack-list{
list-style: none;
margin: 0;
padding: 0 12px 10px;
}
.pack-row{
display: grid;
grid-template-columns: 28px 1fr; /* ícone | nome */
align-items: center;
gap: 10px;
padding: 8px 0;
border-top: 1px solid var(--rt-bd, #e7e8ee);
}
.pack-row:first-child{ border-top: 0; }
.pack-ico .mw-file-element{
width: 24px; height: 24px;
image-rendering: pixelated;
display: block;
}
.pack-name{
color: var(--rt-text, #1e1b2e);
}
/* dark mode opcional (Vector dark) */
.skin-vector-dark .pack-simple{
background: #16171c;
border-color: #2a2c35;
}
.skin-vector-dark .pack-row{ border-top-color: #2a2c35; }
.skin-vector-dark .pack-title, .skin-vector-dark .pack-name{ color: #e6e6ea; }
/* Bloco do nível: cartão leve */
.nivel-box{
border:1px solid #e6e8f2; border-radius:12px;
background:#fff; padding:8px 12px; margin:10px 0;
box-shadow: 0 6px 18px rgba(24,18,58,.06);
}
/* Título do cabeçalho */
.nivel-box .nivel-head{
font-weight:800; text-align:center; margin:2px 0 6px;
}
/* Conteúdo aberto com um espacinho */
.nivel-box .mw-collapsible-content{
padding:8px 0 12px;
}
/* Neutro para blocos de nível */
.drops-inline.is-neutral{
--dif-color:#6c757d;
--head-grad: linear-gradient(90deg,#6c757d,#8a95a3,#a3adb8);
--dif-tint: rgba(108,117,125,.10);
--dif-tint-strong: rgba(108,117,125,.18);
}
/* ===== DROPS — Paletas por FAIXA DE NÍVEL ===== */
/* Cada classe só define as variáveis de cor; o layout já vem das tuas regras base. */
/* Nomeei como .is-lv-<inicio>-<fim> pra ficar intuitivo de usar no wikitexto. */
.drops-inline.is-lv-1-20{
--dif-color:#2ecc71;
--head-grad: linear-gradient(90deg,#2ecc71,#43d888,#6be8a1);
--dif-tint: rgba(46,204,113,.10);
--dif-tint-strong: rgba(46,204,113,.18);
}
.drops-inline.is-lv-20-30{
--dif-color:#1abc9c;
--head-grad: linear-gradient(90deg,#1abc9c,#23c7a9,#52e0c6);
--dif-tint: rgba(26,188,156,.10);
--dif-tint-strong: rgba(26,188,156,.18);
}
.drops-inline.is-lv-30-50{
--dif-color:#3498db;
--head-grad: linear-gradient(90deg,#3498db,#4aa8ea,#7bc2f5);
--dif-tint: rgba(52,152,219,.10);
--dif-tint-strong: rgba(52,152,219,.18);
}
.drops-inline.is-lv-50-70{
--dif-color:#5b3aa8;
--head-grad: linear-gradient(90deg,#5b3aa8,#7462d1,#9a8be6);
--dif-tint: rgba(91,58,168,.10);
--dif-tint-strong: rgba(91,58,168,.18);
}
.drops-inline.is-lv-70-100{
--dif-color:#9b59b6;
--head-grad: linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9);
--dif-tint: rgba(155,89,182,.12);
--dif-tint-strong: rgba(155,89,182,.20);
}
.drops-inline.is-lv-100-125{
--dif-color:#e91e63;
--head-grad: linear-gradient(90deg,#e91e63,#f26f97,#f8a9c0);
--dif-tint: rgba(233,30,99,.10);
--dif-tint-strong: rgba(233,30,99,.18);
}
.drops-inline.is-lv-126-150{
--dif-color:#f39c12;
--head-grad: linear-gradient(90deg,#f39c12,#f8b539,#fbd17a);
--dif-tint: rgba(243,156,18,.10);
--dif-tint-strong: rgba(243,156,18,.18);
}
.drops-inline.is-lv-150-180{
--dif-color:#e74c3c;
--head-grad: linear-gradient(90deg,#e74c3c,#ef6b5e,#f39c91);
--dif-tint: rgba(231,76,60,.10);
--dif-tint-strong: rgba(231,76,60,.18);
}
.drops-inline.is-lv-180-200{
--dif-color:#6c757d;
--head-grad: linear-gradient(90deg,#6c757d,#8a95a3,#a3adb8);
--dif-tint: rgba(108,117,125,.10);
--dif-tint-strong: rgba(108,117,125,.18);
}
.drops-inline.is-lv-200-230{
--dif-color:#d4af37;
--head-grad: linear-gradient(90deg,#d4af37,#e2c24d,#f0d874);
--dif-tint: rgba(212,175,55,.10);
--dif-tint-strong: rgba(212,175,55,.18);
}
.drops-inline.is-lv-230-240{
--dif-color:#00bcd4;
--head-grad: linear-gradient(90deg,#00bcd4,#33cfe0,#7ae6ef);
--dif-tint: rgba(0,188,212,.10);
--dif-tint-strong: rgba(0,188,212,.18);
}
.drops-inline.is-lv-240-250{
--dif-color:#b784f7;
--head-grad: linear-gradient(90deg,#b784f7,#caa0ff,#e2ccff);
--dif-tint: rgba(183,132,247,.12);
--dif-tint-strong: rgba(183,132,247,.20);
}
.drops-inline.is-lv-250-260{
--dif-color:#16a085;
--head-grad: linear-gradient(90deg,#16a085,#20b89b,#49d9bd);
--dif-tint: rgba(22,160,133,.10);
--dif-tint-strong: rgba(22,160,133,.18);
}
.drops-inline.is-lv-260-275{
--dif-color:#2b2d42;
--head-grad: linear-gradient(90deg,#2b2d42,#4b4f6a,#8d99ae);
--dif-tint: rgba(43,45,66,.10);
--dif-tint-strong: rgba(43,45,66,.18);
}
/* Box do mapa (gif + nome) centralizada, fundo branco */
.mw-parser-output .mapa-spot{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width: 280px; /* ajuste se quiser maior/menor */
margin: 0 auto; /* centraliza na célula */
padding: 12px 14px;
background:#fff;
border:1px solid #e7e8ee;
border-radius:12px;
box-shadow: 0 6px 18px rgba(18,18,28,.08);
}
/* Gif com “pixel art” bonito e respiro */
.mw-parser-output .mapa-spot img.mw-file-element{
width:64px; /* pode usar 40/48/64px */
height:auto;
image-rendering: pixelated;
margin-bottom:8px;
}
/* Nome do mapa */
.mw-parser-output .mapa-spot .mapa-nome{
font-weight:600;
color:#2b2b36;
line-height:1.25;
text-align:center;
}
/* Remover o fundo quadrado atrás do sprite, mantendo a caixa branca do .up-figure */
.mw-parser-output .up-figure img.mw-file-element,
.mw-parser-output .up-figure .up-sprite{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* ========= EVENTOS AUTOMÁTICOS – estilos ========= */
:root{
--ev-bg: #ffffff;
--ev-bd: #e7e8ee;
--ev-soft: #f7f8ff;
--ev-text: #1e1b2e;
--ev-accent-1: #6b8cff; /* azul */
--ev-accent-2: #ffb86b; /* laranja */
--ev-accent-3: #9b59b6; /* roxo */
}
.mw-parser-output .ev-wrap{
max-width: 1100px; margin: 8px auto 22px; padding: 0 10px;
color: var(--ev-text);
}
.mw-parser-output .ev-title{
text-align: center; margin: 6px 0 10px;
font-size: 22px; font-weight: 800; letter-spacing: .2px;
background: linear-gradient(90deg,#6b8cff,#9b59b6,#ffb86b);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mw-parser-output .ev-callout{
background: var(--ev-soft);
border: 1px solid var(--ev-bd);
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 6px 18px rgba(24,18,58,.08);
margin: 8px 0 16px;
}
.mw-parser-output .ev-cards{
display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 14px;
}
/* Cartão colapsável */
.mw-parser-output .ev-card{
position: relative;
border: 1px solid var(--ev-bd);
border-radius: 14px;
background: var(--ev-bg);
box-shadow: 0 8px 20px rgba(24,18,58,.08);
overflow: hidden;
padding-right: 88px; /* espaço pro toggle à direita */
}
/* Cabeçalho do cartão */
.mw-parser-output .ev-head{
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: linear-gradient(90deg,#f4f6ff,#fff);
border-bottom: 1px solid var(--ev-bd);
}
.mw-parser-output .ev-name{ font-weight: 800; }
.mw-parser-output .ev-badge{
display:inline-flex; align-items:center; justify-content:center;
height: 22px; padding: 0 10px; border-radius: 999px;
color:#fff; font-weight: 800; font-size: 12px; text-transform: uppercase;
}
.mw-parser-output .ev-badge.ev-1{ background:#6b8cff; }
.mw-parser-output .ev-badge.ev-2{ background:#ff9b51; }
.mw-parser-output .ev-badge.ev-3{ background:#9b59b6; }
/* reposiciona o [Mostrar]/[Ocultar] do MW */
.mw-parser-output .ev-card > .mw-collapsible-toggle{
position: absolute !important; right: 12px; top: 12px !important;
float: none !important; margin: 0 !important;
}
.mw-parser-output .ev-card > .mw-collapsible-toggle a{
display:inline-flex; align-items:center; gap:6px;
height: 28px; padding:0 12px; border-radius:999px; text-decoration:none;
background:#f3f4fa; font-weight:700; color:#324;
}
.mw-parser-output .ev-card > .mw-collapsible-toggle a:hover{ background:#e9eafb; }
/* conteúdo do cartão */
.mw-parser-output .ev-body{
padding: 12px 14px 14px;
}
.mw-parser-output .ev-specs{
width:100%; border-collapse: collapse; margin: 6px 0 0;
}
.mw-parser-output .ev-specs th,
.mw-parser-output .ev-specs td{
border: 1px solid var(--ev-bd); padding: .55em .7em; text-align: left;
}
.mw-parser-output .ev-specs th{ background:#f7f8fb; font-weight: 800; }
/* Loja de eventos – grid */
.mw-parser-output .ev-shop-title{ margin: 18px 0 10px; font-weight: 800; }
.mw-parser-output .ev-shop{
display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
gap: 12px;
}
.mw-parser-output .ev-item{
display:flex; gap:10px; align-items:center;
background: var(--ev-bg);
border:1px solid var(--ev-bd); border-radius:12px;
padding:10px 12px; box-shadow: 0 6px 16px rgba(24,18,58,.06);
}
.mw-parser-output .ev-item b{ display:block; }
.mw-parser-output .ev-price{ margin-left:auto; font-weight:800; color:#324; }
/* ===== Eventos em destaque (textual) ===== */
.mw-parser-output .ev-sections{
display:grid;
gap:14px;
}
.mw-parser-output .ev-section{
background:#fff;
border:1px solid var(--ev-bd, #e7e8ee);
border-radius:12px;
box-shadow:0 6px 16px rgba(24,18,58,.06);
padding:14px 16px;
}
.mw-parser-output .ev-h{
margin:0 0 6px;
font-weight:800;
font-size:18px;
letter-spacing:.2px;
}
.mw-parser-output .ev-sub{
display:inline-block;
margin-left:8px;
font-size:12px;
color:#58607a;
text-transform:uppercase;
letter-spacing:.3px;
}
.mw-parser-output .ev-kv{
/* tabela “key–value” em 2 colunas */
display:grid;
grid-template-columns: 160px 1fr;
column-gap:12px;
row-gap:6px;
align-items:start;
margin:10px 0 4px;
}
.mw-parser-output .ev-kv .k{
font-weight:800;
color:#2e3350;
}
.mw-parser-output .ev-kv .v{
color:#1f2233;
}
.mw-parser-output .ev-list{
margin:0;
}
.mw-parser-output .ev-list li{
margin:0 0 4px 18px;
}
.mw-parser-output .ev-note{
margin-top:6px;
font-size:12px;
color:#6b6f85;
}
/* ===== Premiação (colapsável) por evento ===== */
.mw-parser-output .ev-rewards{
margin-top: 12px;
padding-top: 6px;
border-top: 1px dashed #e6e8f2;
}
/* Centraliza e estiliza o link padrão do MediaWiki como "botão" */
.mw-parser-output .ev-rewards .mw-collapsible-toggle{
float: none !important;
position: static !important;
display: flex !important;
justify-content: center;
align-items: center;
margin: 0 !important;
text-align: center !important;
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: #f3f4fa;
border: 1px solid #e1e3ee;
font-weight: 700;
text-decoration: none !important;
color: #1f2233;
transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:hover{
background: #e9ebfb;
box-shadow: 0 4px 12px rgba(24,18,58,.10);
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:active{
transform: translateY(1px);
}
/* Conteúdo centralizado e com largura máxima “saudável” */
.mw-parser-output .ev-rewards .mw-collapsible-content{
margin-top: 12px;
display: flex;
justify-content: center;
}
.mw-parser-output .ev-rewards .ev-prize{
width: min(720px, 100%);
margin: 0 auto;
border-collapse: collapse;
}
.mw-parser-output .ev-rewards .ev-prize th{
background: #f7f8fc;
font-weight: 800;
border: 1px solid #e7e8ee;
}
.mw-parser-output .ev-rewards .ev-prize td{
border: 1px solid #e7e8ee;
text-align: center;
}
/* ---------------------------------------------------------
Eventos — visual premium (tipografia, cards, botões, etc.)
--------------------------------------------------------- */
/* Fontes — mesmas da wiki pra manter identidade */
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700;800&display=swap');
:root{
/* Paleta clara */
--ev-bg: #ffffff;
--ev-card: #ffffff;
--ev-border: #e7e8ee;
--ev-soft: #f7f8fc;
--ev-text: #1f2233;
/* Acentos (roxinho/azul da wiki) */
--ev-accent-1: #6b5cff;
--ev-accent-2: #22b8ff;
--ev-grad: linear-gradient(90deg, var(--ev-accent-1), var(--ev-accent-2));
/* Chips/badges */
--ev-chip-bg: rgba(107,92,255,.10);
--ev-chip-bd: rgba(107,92,255,.22);
/* Sombras */
--ev-shadow: 0 10px 28px rgba(24,18,58,.12);
--ev-shadow-strong: 0 18px 44px rgba(24,18,58,.18);
}
/* Tema escuro (Vector Dark) */
.skin-vector-dark :root{
--ev-bg: #121318;
--ev-card: #161720;
--ev-border: #2a2c35;
--ev-soft: #1c1e28;
--ev-text: #e8eaf2;
--ev-chip-bg: rgba(107,92,255,.22);
--ev-chip-bd: rgba(107,92,255,.35);
--ev-shadow: 0 10px 28px rgba(0,0,0,.45);
--ev-shadow-strong: 0 18px 44px rgba(0,0,0,.6);
}
/* Área geral dos eventos */
.mw-parser-output .ev-sections{
display: grid;
gap: 18px;
margin: 10px 0 22px;
}
/* Cada evento como “card” */
.mw-parser-output .ev-section{
background: var(--ev-card);
border: 1px solid var(--ev-border);
border-radius: 16px;
padding: 14px 16px 16px;
box-shadow: var(--ev-shadow);
color: var(--ev-text);
font-family: "Nunito", system-ui, sans-serif;
}
.mw-parser-output .ev-section:hover{
box-shadow: var(--ev-shadow-strong);
}
/* Título com gradiente + chip de periodicidade */
.mw-parser-output .ev-h{
display: flex; align-items: center; gap: 10px;
margin: 2px 0 10px;
font: 700 22px/1 "Paytone One", system-ui, sans-serif;
background: var(--ev-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mw-parser-output .ev-h .ev-sub{
font: 800 12px/1 "Nunito", system-ui, sans-serif;
color: var(--ev-text);
padding: 6px 10px;
border-radius: 999px;
background: var(--ev-chip-bg);
border: 1px solid var(--ev-chip-bd);
color: #453aa0; /* contraste bom no claro */
}
.skin-vector-dark .mw-parser-output .ev-h .ev-sub{
color: #d7d8ff; /* contraste no escuro */
}
/* Key–Value (grid de “Horários / Duração / …”) */
.mw-parser-output .ev-kv{
display: grid;
grid-template-columns: 160px 1fr;
gap: 10px 14px;
align-items: start;
margin: 6px 0 0;
}
.mw-parser-output .ev-kv .k{
font-weight: 800;
padding: 6px 10px;
border-radius: 10px;
background: var(--ev-chip-bg);
border: 1px solid var(--ev-chip-bd);
color: #3b2fb8;
}
.skin-vector-dark .mw-parser-output .ev-kv .k{ color:#d7d8ff; }
.mw-parser-output .ev-kv .v{
padding: 10px 12px;
border-radius: 12px;
background: var(--ev-soft);
border: 1px solid var(--ev-border);
}
/* Se o bloco de premiação estiver *dentro* do grid, ocupa a linha toda */
.mw-parser-output .ev-kv > .ev-rewards{
grid-column: 1 / -1;
}
/* ---- Premiação: botão colapsável + conteúdo centralizado ---- */
.mw-parser-output .ev-rewards{
margin-top: 10px;
padding-top: 6px;
border-top: 1px dashed var(--ev-border);
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle{
float: none !important;
display: flex !important;
justify-content: center; align-items: center;
margin: 0 !important;
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a{
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px;
border-radius: 999px;
border: 0;
background: var(--ev-grad);
color: #fff !important;
font-weight: 800;
text-decoration: none !important;
box-shadow: 0 8px 18px rgba(36,45,110,.18);
transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:hover{
filter: brightness(1.05);
box-shadow: 0 12px 26px rgba(36,45,110,.24);
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:active{
transform: translateY(1px);
}
.mw-parser-output .ev-rewards .mw-collapsible-toggle a::before{
content: "🎁";
font-size: 14px;
}
/* Conteúdo centralizado */
.mw-parser-output .ev-rewards .mw-collapsible-content{
margin-top: 12px;
display: flex; justify-content: center;
}
/* Tabela de prêmios */
.mw-parser-output .ev-prize{
width: min(760px, 100%);
margin: 0 auto;
border-collapse: collapse;
font-family: "Nunito", system-ui, sans-serif;
}
.mw-parser-output .ev-prize th{
background: linear-gradient(180deg, #f7f8ff, #eef0ff);
border: 1px solid var(--ev-border);
font-weight: 800;
}
.skin-vector-dark .mw-parser-output .ev-prize th{
background: linear-gradient(180deg, #202236, #1b1d2b);
}
.mw-parser-output .ev-prize td{
border: 1px solid var(--ev-border);
text-align: center;
padding: .6em .7em;
}
.mw-parser-output .ev-prize tr:nth-child(even) td{
background: rgba(107,92,255,.035);
}
.skin-vector-dark .mw-parser-output .ev-prize tr:nth-child(even) td{
background: rgba(107,92,255,.11);
}
/* ---- Rodapé do card de evento (onde fica o botão de premiação) ---- */
.ev-section .ev-footer{
margin: 12px 4px 0;
padding-top: 10px;
border-top: 1px dashed #e9e7fb;
display: flex;
justify-content: center;
}
/* ===== Eventos – bloco de premiação dentro do card ===== */
.ev-kv .ev-rewards{
grid-column: 1 / -1; /* ocupa as 2 colunas do grid */
margin: 14px 0 4px;
padding-top: 10px;
border-top: 1px dashed #e7e9fb; /* separador sutil */
text-align: center;
}
/* botão toggle centralizado e com cara de chip */
.ev-rewards .mw-collapsible-toggle{
float: none !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
margin: 0 auto !important;
padding: 6px 14px;
border-radius: 999px;
background: #f1efff;
border: 1px solid #d9d6ff;
box-shadow: 0 1px 0 rgba(60,45,140,.06);
}
.ev-rewards .mw-collapsible-toggle a{
font-weight: 800;
font-size: 13px;
color: #4b3ecf;
text-decoration: none !important;
}
.ev-rewards .mw-collapsible-toggle a::before{
content: "🎁";
font-size: 14px;
transform: translateY(-1px);
}
/* conteúdo expandido centralizado */
.ev-rewards .mw-collapsible-content{
margin-top: 12px;
}
/* ===== Tabela da premiação (visual de cartão) ===== */
.wikitable.ev-prize{
border-collapse: collapse !important;
margin: 0 auto !important;
width: min(720px, 96%) !important;
background: #fff;
border: 1px solid #e6e6f5 !important;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(37,21,96,.08);
}
.wikitable.ev-prize th{
background: linear-gradient(180deg,#f6f4ff 0%, #eeecff 100%);
color: #362f6d;
font-weight: 800;
padding: 10px 12px;
border-bottom: 1px solid #e6e6f5 !important;
text-align: center;
}
.wikitable.ev-prize td{
padding: 10px 12px !important;
border-top: 1px solid #f0f1fb !important;
text-align: center;
}
.wikitable.ev-prize tr:nth-child(even) td{ background:#fafafe; }
/* remove qualquer float/resíduo do toggle padrão */
.ev-rewards .mw-collapsible-toggle-default{ float:none !important; }
.mw-parser-output .gif-120 img.mw-file-element{
width:120px;
height:auto;
image-rendering:pixelated;
}
/* ===== Card principal do Sistema VIP ===== */
.mw-parser-output .vip-panel{
position: relative;
max-width: 1100px;
margin: 26px auto 24px;
padding: 20px 22px 18px;
border-radius: 18px;
background:
radial-gradient(140% 200% at 50% -40%, rgba(255,166,90,.20), transparent 60%),
radial-gradient(120% 180% at 50% 140%, rgba(140,110,255,.26), transparent 60%),
linear-gradient(180deg,#140824,#25184a);
border: 1px solid color-mix(in oklab,#8e6bff 70%,#ffb35a 30%);
box-shadow:
0 22px 40px rgba(0,0,0,.75),
0 0 0 1px rgba(35,10,70,.7) inset,
0 0 28px rgba(143,110,255,.32);
color:#fdf7ff;
font-family:"Nunito", system-ui, sans-serif;
}
/* halo suave na borda */
.mw-parser-output .vip-panel::after{
content:"";
pointer-events:none;
position:absolute; inset:0; border-radius:18px;
box-shadow:
0 0 0 1px rgba(255,176,100,.3) inset,
0 0 30px rgba(255,176,100,.18);
}
/* “chip” SISTEMA VIP sobre a borda, sem fundo branco */
.mw-parser-output .vip-panel-chip{
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:0 26px;
border-radius:999px;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
color:#26100a;
background:linear-gradient(180deg,#ffe6c0 0%, #ffb347 55%, #ff9334 100%);
border:1px solid #b86322;
box-shadow:
0 10px 24px rgba(255,167,90,.45),
0 1px 0 rgba(255,245,220,.8) inset,
0 -1px 0 rgba(150,70,30,.8) inset,
0 0 18px rgba(255,170,90,.7);
}
/* Lista de informações do VIP */
.mw-parser-output .vip-panel-list{
margin: 6px 0 4px;
padding-left: 1.2em;
list-style: disc;
font-size: 14px;
}
.mw-parser-output .vip-panel-list li{
margin: 6px 0;
padding-top: 8px;
border-top:1px dashed rgba(255,210,150,.40);
}
/* primeiro item sem linha em cima */
.mw-parser-output .vip-panel-list li:first-child{
border-top:0;
padding-top:0;
}
/* marcador e labels em destaque */
.mw-parser-output .vip-panel-list li::marker{
color:#ffb347;
}
.mw-parser-output .vip-panel-list b{
color:#ffe9c9;
}
/* responsivo: em telas menores, só ajusta o padding */
@media (max-width:640px){
.mw-parser-output .vip-panel{
margin-top: 30px;
padding: 18px 14px 16px;
}
}
/* =======================================================
PÁGINA DE MASCOTES (PETS)
Tema roxo profundo + neon violeta/rosa/ciano
(sobrescreve qualquer tema anterior dos .pet-*)
======================================================= */
/* Paleta base escopada na página de pets */
.mw-parser-output .pet-page{
--pet-bg: #0b0612;
--pet-card: #140821;
--pet-card-soft: #1b0d2c;
--pet-border: #3e2469;
--pet-soft-bd: #593993;
--pet-text: #f7f1ff;
--pet-subtext: #ccc1f5;
--pet-accent-1: #b46bff; /* violeta */
--pet-accent-2: #ff6fb1; /* rosa */
--pet-accent-3: #46e3ff; /* ciano */
--pet-shadow: 0 20px 45px rgba(1,0,20,.9);
--pet-shadow-strong: 0 26px 60px rgba(3,0,30,.95);
}
/* texto geral */
.mw-parser-output .pet-page{
color: var(--pet-text);
}
/* -------------------------------------------------------
HERO (título "Mascotes (Pets)")
------------------------------------------------------- */
.mw-parser-output .pet-hero{
background:
radial-gradient(130% 200% at 0% 0%, rgba(180,107,255,.25), transparent 60%),
radial-gradient(130% 200% at 100% 100%, rgba(70,227,255,.20), transparent 60%),
linear-gradient(135deg,#0c0416,#180a27);
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--pet-border) 70%, #ffffff 10%);
box-shadow:
var(--pet-shadow),
0 0 0 1px rgba(255,255,255,.02) inset;
}
/* título gradiente violeta/rosa/ciano */
.mw-parser-output .pet-hero-title{
background: linear-gradient(90deg,
var(--pet-accent-1),
var(--pet-accent-2),
var(--pet-accent-3)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* subtítulo */
.mw-parser-output .pet-hero-sub{
color: var(--pet-subtext);
}
/* chips "4 categorias", etc. */
.mw-parser-output .pet-hero-tags{
margin-top: 10px;
display:flex;
flex-wrap:wrap;
gap:8px;
}
.mw-parser-output .pet-hero-tag{
background: radial-gradient(circle at 0 0,
rgba(70,227,255,.25),
transparent 55%)
,rgba(15,6,40,.96) !important;
border-radius: 999px;
padding: 4px 11px;
border: 1px solid rgba(180,107,255,.85) !important;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .16em;
color: #eaf6ff !important;
box-shadow:
0 10px 22px rgba(4,0,28,.9),
0 0 14px rgba(180,107,255,.6);
}
/* -------------------------------------------------------
CATEGORIAS (cards)
------------------------------------------------------- */
.mw-parser-output .pet-cats{
margin: 10px 0 20px;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
gap: 14px;
}
.mw-parser-output .pet-card{
position:relative;
border-radius: 16px;
padding: 12px 14px 14px;
background:
radial-gradient(120% 200% at 0 0, rgba(180,107,255,.30), transparent 60%),
radial-gradient(120% 200% at 100% 100%, rgba(70,227,255,.18), transparent 60%),
linear-gradient(180deg,#110418,#190a27);
border: 1px solid color-mix(in srgb, var(--pet-border) 75%, #ffffff 5%);
box-shadow: var(--pet-shadow);
}
/* título da categoria */
.mw-parser-output .pet-card-title{
text-align:center;
margin: 0 0 8px;
font-weight: 800;
font-size: 15px;
letter-spacing: .14em;
text-transform: uppercase;
color: #fdf7ff;
}
.mw-parser-output .pet-card-title span{
display:block;
margin-top: 2px;
font-size: 11px;
letter-spacing:.16em;
text-transform:uppercase;
color: color-mix(in srgb, var(--pet-accent-3) 65%, #ffffff 20%);
}
/* key–value interno */
.mw-parser-output .pet-card-kv{
display:grid;
grid-template-columns: 120px 1fr;
column-gap: 10px;
row-gap: 6px;
}
.mw-parser-output .pet-card-k{
font-weight: 800;
font-size: 12px;
color: color-mix(in srgb, var(--pet-accent-1) 70%, #ffffff 10%);
}
.mw-parser-output .pet-card-v{
font-size: 13px;
color: var(--pet-text);
}
/* -------------------------------------------------------
REFINO (bloco + tabela)
------------------------------------------------------- */
.mw-parser-output .pet-refine{
margin: 14px 0 18px;
padding: 12px 14px 14px;
border-radius: 16px;
background:
radial-gradient(130% 220% at 0 0, rgba(180,107,255,.30), transparent 60%),
radial-gradient(120% 200% at 100% 140%, rgba(70,227,255,.18), transparent 60%),
linear-gradient(135deg,#100318,#1a0927);
border: 1px solid color-mix(in srgb, var(--pet-border) 80%, #ffffff 4%);
box-shadow: var(--pet-shadow-strong);
}
.mw-parser-output .pet-refine-title{
margin: 0 0 6px;
font-weight: 800;
font-size: 16px;
letter-spacing: .16em;
text-transform: uppercase;
color: #fdf7ff;
}
/* texto */
.mw-parser-output .pet-refine p{
font-size: 13px;
color: var(--pet-subtext);
}
/* bullets dos passos de múltiplos de 3 */
.mw-parser-output .pet-refine-steps{
margin: 6px 0 4px;
padding-left: 0;
list-style:none;
font-size: 13px;
}
.mw-parser-output .pet-refine-steps li{
margin: 3px 0;
padding-left: 20px;
position:relative;
}
.mw-parser-output .pet-refine-steps li::before{
content:"●";
position:absolute;
left:0;
top:0;
font-size:10px;
color: var(--pet-accent-3);
}
/* tabela de refino */
.mw-parser-output table.pet-refine-table{
width:100%;
border-collapse:collapse;
margin: 10px 0 0;
background: #100418;
border: 1px solid color-mix(in srgb, var(--pet-soft-bd) 85%, #ffffff 4%);
box-shadow: var(--pet-shadow);
font-size: 13px;
}
.mw-parser-output .pet-refine-table th,
.mw-parser-output .pet-refine-table td{
border: 1px solid color-mix(in srgb, var(--pet-soft-bd) 80%, #000000 20%);
padding: .5em .6em;
}
.mw-parser-output .pet-refine-table th{
background: linear-gradient(180deg,#321c57,#221238);
color: #f5f0ff;
font-weight: 800;
text-align: center;
}
.mw-parser-output .pet-refine-table td{
color: var(--pet-text);
text-align: center;
}
.mw-parser-output .pet-refine-table tr:nth-child(even) td{
background: rgba(180,107,255,.16);
}
/* -------------------------------------------------------
GRADE DE PET – “mini card VIP” roxo
------------------------------------------------------- */
.mw-parser-output .pet-grade{
position:relative;
margin: 18px 0 12px;
padding: 16px 16px 16px;
border-radius: 18px;
background:
radial-gradient(140% 220% at 100% 0, rgba(180,107,255,.30), transparent 65%),
linear-gradient(135deg,#0f0216,#1b0928);
border: 1px solid color-mix(in srgb, var(--pet-border) 85%, #ffffff 5%);
box-shadow: var(--pet-shadow-strong);
}
/* chip flutuando */
.mw-parser-output .pet-grade-chip{
position:absolute;
top: -16px;
left:50%;
transform: translateX(-50%);
padding: 6px 20px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .18em;
color:#10071f;
background: linear-gradient(180deg,
#f7f2ff 0%,
var(--pet-accent-1) 45%,
var(--pet-accent-2) 100%);
border:1px solid color-mix(in srgb, var(--pet-accent-1) 70%, #3a164c 30%);
box-shadow:
0 12px 26px rgba(66,30,140,.65),
0 1px 0 rgba(255,255,255,.75) inset,
0 -1px 0 rgba(45,16,90,.95) inset;
}
/* texto e lista dentro da grade */
.mw-parser-output .pet-grade p{
margin: 10px 0 6px;
font-size: 13px;
color: var(--pet-subtext);
}
.mw-parser-output .pet-grade-list{
margin: 6px 0 0;
padding-left: 1.2em;
font-size: 13px;
}
.mw-parser-output .pet-grade-list li{
margin: 4px 0;
}
.mw-parser-output .pet-grade-list li::marker{
color: var(--pet-accent-2);
}
/* -------------------------------------------------------
LISTA DE MASCOTES (card + tabela)
------------------------------------------------------- */
.mw-parser-output .pet-list.mw-collapsible{
max-width:1100px;
margin: 10px auto 24px;
padding: 12px 14px 14px;
border-radius: 18px;
background:
radial-gradient(140% 220% at 100% 0, rgba(180,107,255,.30), transparent 65%),
linear-gradient(135deg,#0f0216,#1b0928);
border: 1px solid color-mix(in srgb, var(--pet-border) 85%, #ffffff 5%);
box-shadow: var(--pet-shadow-strong);
}
/* toggle Expandir/Ocultar (mesmo tema neon) */
.mw-parser-output .pet-page .mw-collapsible-toggle{
float:none !important;
display:flex !important;
justify-content:center;
margin:0 0 8px !important;
}
.mw-parser-output .pet-page .mw-collapsible-toggle a,
.mw-parser-output .pet-page .mw-collapsible-toggle a:visited{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:6px 18px;
border-radius:999px;
background: radial-gradient(circle at 0 0,
rgba(70,227,255,.35),
transparent 60%),
linear-gradient(180deg,
var(--pet-accent-3),
var(--pet-accent-2));
border:1px solid color-mix(in srgb, var(--pet-accent-3) 70%, #0b0612 30%);
color:#050412 !important;
font-weight:800;
font-size:12px;
text-transform:uppercase;
letter-spacing:.16em;
text-decoration:none !important;
box-shadow:
0 10px 24px rgba(3,0,30,.95),
0 1px 0 rgba(255,255,255,.75) inset,
0 -1px 0 rgba(12,30,45,.9) inset;
}
.mw-parser-output .pet-page .mw-collapsible-toggle a:hover{
filter:brightness(1.08);
}
/* tabela interna */
.mw-parser-output table.pet-list-table{
width:100%;
border-collapse:collapse;
background:#0f0317;
border:1px solid color-mix(in srgb, var(--pet-soft-bd) 85%, #000000 10%);
box-shadow:var(--pet-shadow);
font-size:13px;
}
.mw-parser-output .pet-list-table th,
.mw-parser-output .pet-list-table td{
border:1px solid color-mix(in srgb, var(--pet-soft-bd) 80%, #000000 20%);
padding:.55em .7em;
}
.mw-parser-output .pet-list-table th{
background:linear-gradient(180deg,#341d58,#241139);
color:#f5f0ff;
font-weight:800;
text-align:center;
}
.mw-parser-output .pet-list-table td{
color:var(--pet-text);
}
.mw-parser-output .pet-list-table tr:nth-child(even) td{
background:rgba(180,107,255,.16);
}
.mw-parser-output .pet-list-table td:nth-child(1){
text-align:center;
}
.mw-parser-output .pet-list-table td:nth-child(2),
.mw-parser-output .pet-list-table td:nth-child(3){
text-align:left;
}
/* links dentro da lista de mascotes */
.mw-parser-output .pet-list-table a,
.mw-parser-output .pet-list-table a:visited{
color:var(--pet-accent-3);
text-decoration:underline;
}
.mw-parser-output .pet-list-table a:hover{
color:var(--pet-accent-2);
}
/* sprites dos pets em pixel-art bonitinho */
.mw-parser-output .pet-list-table img.mw-file-element{
image-rendering: pixelated;
vertical-align: middle;
}
/* ===== Pets – destaque do título principal ===== */
/* opcional: se tiver apagado os imports de fonte, pode usar esse de novo */
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
.mw-parser-output .pet-hero{
padding: 16px 20px 18px; /* um pouco mais de respiro */
}
.mw-parser-output .pet-hero-title{
font-family: "Paytone One", system-ui, sans-serif;
font-size: clamp(20px, 2.4vw, 28px); /* bem maior */
line-height: 1.1;
margin: 2px 0 8px;
text-transform: uppercase;
letter-spacing: .18em;
}
/* subtítulo um pouco menor pra dar hierarquia */
.mw-parser-output .pet-hero-sub{
font-size: 14px;
}
/* ===== Pets – categorias centralizadas e mais compactas ===== */
/* Container das categorias: coluna única, centralizada */
.mw-parser-output .pet-cats{
display: flex;
flex-direction: column;
align-items: center; /* centraliza os cards */
gap: 18px;
}
/* Todos os blocos principais de Pets com a MESMA largura do pet-card */
.mw-parser-output .pet-page .pet-hero,
.mw-parser-output .pet-page .pet-refine,
.mw-parser-output .pet-page .pet-grade,
.mw-parser-output .pet-page .pet-cats .pet-card,
.mw-parser-output .pet-page .drops-inline.is-pet120,
.mw-parser-output .pet-page .drops-inline.is-pet60,
.mw-parser-output .pet-page .drops-inline.is-pet30,
.mw-parser-output .pet-page .drops-inline.is-pet10{
width: min(720px, 100% - 32px); /* mesmo “tijolinho” pra tudo */
margin: 10px auto 18px; /* centralizado + respiro vertical */
box-sizing: border-box;
}
/* =======================================================
LISTA DE MASCOTES (PETS) – colapsáveis por categoria
Usa drops-inline com badge + botão expandir/ocultar
======================================================= */
.mw-parser-output .pet-page .drops-inline.mw-collapsible{
/* cartao base */
border-radius: 18px;
border: 1px solid rgba(90,60,150,.9);
background:
radial-gradient(130% 220% at 100% 0, rgba(180,107,255,.30), transparent 60%),
radial-gradient(130% 220% at 0 100%, rgba(70,227,255,.20), transparent 60%),
linear-gradient(135deg,#0f0216,#1b0928);
box-shadow:
0 22px 44px rgba(3,0,30,.95),
0 0 0 1px rgba(15,4,40,.9) inset;
padding: 10px 12px;
margin: 10px auto 18px;
max-width: 1100px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
}
/* badge "PETS 120%" gerado via data-badge */
.mw-parser-output .pet-page .drops-inline::before{
content: attr(data-badge);
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 150px;
height: 30px;
padding: 0 20px;
border-radius: 999px;
font: 900 13px/1 system-ui, sans-serif;
letter-spacing: .18em;
color: #0a0515;
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1);
box-shadow:
0 12px 26px rgba(70,30,140,.7),
0 1px 0 rgba(255,255,255,.8) inset,
0 -1px 0 rgba(40,12,90,.95) inset;
}
/* variações de cor suave por categoria (opcional) */
.mw-parser-output .pet-page .drops-inline.is-pet120::before{
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1);
}
.mw-parser-output .pet-page .drops-inline.is-pet60::before{
background: linear-gradient(180deg,#f7f2ff,#9b8bff,#46e3ff);
}
.mw-parser-output .pet-page .drops-inline.is-pet30::before{
background: linear-gradient(180deg,#f7f2ff,#c27bff,#ff9ae0);
}
.mw-parser-output .pet-page .drops-inline.is-pet10::before{
background: linear-gradient(180deg,#f7f2ff,#8d7bff,#8df3ff);
}
/* Toggle Expandir/Ocultar centralizado e destacado */
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle{
order: 2 !important;
float: none !important;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
position: static !important;
}
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a,
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:visited{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 30px;
padding: 0 16px;
border-radius: 999px;
font-weight: 800;
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
text-decoration: none !important;
color: #050413 !important;
background: radial-gradient(circle at 0 0,
rgba(70,227,255,.35),
transparent 60%),
linear-gradient(180deg,#46e3ff,#ff6fb1);
border: 1px solid rgba(70,227,255,.9);
box-shadow:
0 10px 22px rgba(3,0,30,.95),
0 1px 0 rgba(255,255,255,.75) inset,
0 -1px 0 rgba(12,30,45,.9) inset;
}
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:hover{
filter: brightness(1.06);
}
/* conteúdo abre abaixo ocupando toda a largura do card */
.mw-parser-output .pet-page .drops-inline .mw-collapsible-content{
order: 10;
flex-basis: 100%;
width: 100% !important;
margin-top: 10px;
background: rgba(5,0,20,.65);
border-radius: 14px;
padding: 10px 10px 14px;
}
/* tabela interna reaproveita o tema roxo dos pets */
.mw-parser-output .pet-page .drops-inline .pet-list-table{
width: 100%;
border-collapse: collapse;
linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%)
border: 1px solid rgba(120,90,230,.22)
box-shadow: 0 14px 34px rgba(35,12,70,.10)
}
.mw-parser-output .pet-page .drops-inline .pet-list-table th,
.mw-parser-output .pet-page .drops-inline .pet-list-table td{
border: 1px solid rgba(90,60,150,.9);
padding: .55em .7em;
}
.mw-parser-output .pet-page .drops-inline .pet-list-table th{
background: linear-gradient(180deg,#341d58,#241139);
color: #f5f0ff;
font-weight: 800;
text-align: center;
}
.mw-parser-output .pet-page .drops-inline .pet-list-table td{
color: #f7f1ff;
}
.mw-parser-output .pet-page .drops-inline .pet-list-table tr:nth-child(even) td{
background: rgba(180,107,255,.16);
}
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(1){
text-align: center;
}
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(2),
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(3){
text-align: left;
}
/* sprites dentro da lista */
.mw-parser-output .pet-page .drops-inline .pet-list-table img.mw-file-element{
image-rendering: pixelated;
vertical-align: middle;
}
/* Pets – centralizar texto das colunas Forma de Obtenção / Bônus */
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(2),
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(3){
text-align: center; /* centraliza horizontalmente */
}
/* Pets – botão Expandir/Ocultar combinando com a badge */
.mw-parser-output .pet-page .drops-inline{
justify-content: center;
gap: 10px;
}
/* botão do toggle */
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle{
order: 2 !important;
float: none !important;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
position: static !important;
}
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a,
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:visited{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 14px;
border-radius: 999px;
font-weight: 800;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
text-decoration: none !important;
color: #0a0515 !important;
background: radial-gradient(circle at 0 0,
rgba(70,227,255,.35),
transparent 60%),
linear-gradient(180deg,#46e3ff,#ff6fb1);
border: 1px solid rgba(70,227,255,.9);
box-shadow:
0 10px 22px rgba(3,0,30,.9),
0 1px 0 rgba(255,255,255,.8) inset,
0 -1px 0 rgba(12,30,45,.9) inset;
}
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:hover{
filter: brightness(1.08);
}
/* =======================================================
LISTA DE MASCOTES – cards colapsáveis próprios
(não usa .drops-inline pra não brigar com o JS antigo)
======================================================= */
.mw-parser-output .pet-page .pet-list-box{
max-width: 1100px;
margin: 10px auto 18px;
padding: 10px 12px 12px;
border-radius: 18px;
border: 1px solid rgba(90,60,150,.9);
background:
radial-gradient(130% 220% at 100% 0, rgba(180,107,255,.30), transparent 60%),
radial-gradient(130% 220% at 0 100%, rgba(70,227,255,.20), transparent 60%),
linear-gradient(135deg,#0f0216,#1b0928);
box-shadow:
0 22px 44px rgba(3,0,30,.95),
0 0 0 1px rgba(15,4,40,.9) inset;
}
/* Toggle padrão centralizado */
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle{
float: none !important;
display: flex !important;
justify-content: center;
margin: 0 0 6px !important;
}
/* Botão PETS 120% ▸ | 60% ▸ etc. */
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a,
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a:visited{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 22px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
text-decoration: none !important;
color: #0a0515 !important;
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1);
box-shadow:
0 12px 26px rgba(70,30,140,.7),
0 1px 0 rgba(255,255,255,.8) inset,
0 -1px 0 rgba(40,12,90,.95) inset;
border: 1px solid rgba(255,255,255,.35);
}
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a:hover{
filter: brightness(1.06);
}
/* variações suaves por categoria (gradiente diferente) */
.mw-parser-output .pet-page .pet-list-60 .mw-collapsible-toggle a{
background: linear-gradient(180deg,#f7f2ff,#9b8bff,#46e3ff);
}
.mw-parser-output .pet-page .pet-list-30 .mw-collapsible-toggle a{
background: linear-gradient(180deg,#f7f2ff,#c27bff,#ff9ae0);
}
.mw-parser-output .pet-page .pet-list-10 .mw-collapsible-toggle a{
background: linear-gradient(180deg,#f7f2ff,#8d7bff,#8df3ff);
}
/* Conteúdo aberto: mesma cara roxa dos outros blocos */
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-content{
margin-top: 10px;
padding: 10px 10px 14px;
border-radius: 14px;
background: rgba(5,0,20,.65);
}
/* Reaproveita a tabela que você já tem */
.mw-parser-output .pet-page .pet-list-box .pet-list-table{
width: 100%;
border-collapse: collapse;
background: #0f0317;
border: 1px solid rgba(90,60,150,.9);
box-shadow: 0 12px 28px rgba(3,0,30,.95);
}
.mw-parser-output .pet-page .pet-list-box .pet-list-table th,
.mw-parser-output .pet-page .pet-list-box .pet-list-table td{
border: 1px solid rgba(90,60,150,.9);
padding: .55em .7em;
}
.mw-parser-output .pet-page .pet-list-box .pet-list-table th{
background: linear-gradient(180deg,#341d58,#241139);
color: #f5f0ff;
font-weight: 800;
text-align: center;
}
.mw-parser-output .pet-page .pet-list-box .pet-list-table td{
color: #f7f1ff;
}
.mw-parser-output .pet-page .pet-list-box .pet-list-table tr:nth-child(even) td{
background: rgba(180,107,255,.16);
}
/* alinhamento bonitinho das colunas */
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(1){
text-align: center;
}
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(2),
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(3){
text-align: center;
}
/* sprites */
.mw-parser-output .pet-page .pet-list-box .pet-list-table img.mw-file-element{
image-rendering: pixelated;
vertical-align: middle;
}
/* PETS – botão Expandir/Ocultar com mesma cor da badge */
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle,
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle,
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle,
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle{
float: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 3px 14px !important;
margin: 4px 0 6px !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
background: #c8b0ff !important; /* mesmo roxo da badge */
color: #160f2a !important; /* texto roxo bem escuro */
border: 1px solid #a489f0 !important; /* mesma borda da badge */
box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
}
/* link herda cor e tira sublinhado */
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle a,
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle a,
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle a,
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle a{
color: inherit !important;
text-decoration: none !important;
}
/* hover só um tiquinho mais claro */
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle:hover,
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle:hover,
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle:hover,
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle:hover{
filter: brightness(1.04);
}
/* PETS – badge roxa com um pouco mais de destaque */
body .mw-parser-output .drops-inline.is-pet120::before,
body .mw-parser-output .drops-inline.is-pet60::before,
body .mw-parser-output .drops-inline.is-pet30::before,
body .mw-parser-output .drops-inline.is-pet10::before{
/* roxo escuro com gradiente bem suave */
background: radial-gradient(120% 160% at 50% 0%,
#443074 0%, #2a1846 55%, #1c102f 100%) !important;
color: #ffffff !important;
/* borda um pouco mais clara pra “descolar” do fundo */
border: 1px solid #8a74d0 !important;
/* halo sutil + sombra */
box-shadow:
0 0 0 1px rgba(255,255,255,.05) inset,
0 4px 10px rgba(0,0,0,.55) !important;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 800;
text-shadow: 0 1px 0 rgba(0,0,0,.6); /* leitura melhor */
}
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-content,
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-content,
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-content,
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-content{
background: #c8b0ff !important;
border-radius: 14px !important;
padding: 8px 10px 10px !important; /* borda roxa clara aparecendo nos cantos */
}
/*******************************
* TEMA ROXO-ESCURO – BASE MVP *
*******************************/
:root{
--rt-bg-main: #120e22;
--rt-bg-card: #1c122f;
--rt-border: #3a285a;
--rt-text-main: #f5f3ff;
--rt-text-soft: #c9c3e6;
--rt-radius-card:16px;
--rt-shadow-soft:0 10px 26px rgba(0,0,0,.55);
}
/* containers principais da página */
.mw-parser-output .rt-section,
.mw-parser-output .mvp-hero,
.mw-parser-output .mvp-func,
.mw-parser-output .mvp-ranking,
.mw-parser-output .mvp-shop{
max-width: 1100px;
margin: 10px auto 24px;
padding: 12px 16px 16px;
border-radius: var(--rt-radius-card);
background:
radial-gradient(160% 200% at 0% 0%, #271247 0%, transparent 55%),
radial-gradient(140% 180% at 100% 100%, #151b3b 0%, transparent 55%),
#120e22;
border: 1px solid #2f204b;
box-shadow: var(--rt-shadow-soft);
color: var(--rt-text-main);
box-sizing: border-box;
}
/* título padrão das seções */
.mw-parser-output .rt-title{
margin: 2px 0 10px;
font-family: "Paytone One", system-ui, sans-serif;
font-size: 22px;
letter-spacing: .16em;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
/* subtítulo/label embaixo do texto introdutório */
.mw-parser-output .rt-subtag{
display: inline-block;
margin-top: 8px;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
background: rgba(200,176,255,.12);
border: 1px solid rgba(200,176,255,.5);
color: var(--rt-text-soft);
}
/* texto dentro das seções */
.mw-parser-output .mvp-hero p,
.mw-parser-output .mvp-func p,
.mw-parser-output .mvp-ranking p,
.mw-parser-output .mvp-shop p{
margin: 6px 0 8px;
color: var(--rt-text-soft);
}
/************************
* CARDS – FUNCIONAMENTO *
************************/
.mw-parser-output .rt-card-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
gap: 14px;
margin-top: 8px;
}
.mw-parser-output .rt-card{
background: linear-gradient(135deg,#201235,#16162d);
border-radius: 12px;
border: 1px solid var(--rt-border);
box-shadow: 0 6px 18px rgba(0,0,0,.55);
padding: 10px 12px 12px;
color: var(--rt-text-main);
}
.mw-parser-output .rt-card-title{
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
margin: 2px 0 8px;
}
/* key–value dentro dos cards */
.mw-parser-output .rt-kv{
display: grid;
grid-template-columns: 150px 1fr;
gap: 4px 10px;
}
.mw-parser-output .rt-kv .k{
color: var(--rt-text-soft);
}
.mw-parser-output .rt-kv .v{
font-weight: 700;
}
/*********************
* TABELAS – RANK/LOJA
*********************/
.mw-parser-output table.rt-table{
width: 100%;
border-collapse: collapse;
margin: 10px 0 4px;
background: var(--rt-bg-card);
color: var(--rt-text-main);
box-shadow: var(--rt-shadow-soft);
}
.mw-parser-output table.rt-table th,
.mw-parser-output table.rt-table td{
border: 1px solid #372454;
padding: .55em .7em;
}
.mw-parser-output table.rt-table th{
background: linear-gradient(180deg,#26163f,#1c122f);
font-weight: 800;
text-align: center;
}
.mw-parser-output table.rt-table tr:nth-child(even) td{
background-color: #181028;
}
/* colunas específicas podem ser centralizadas se quiser */
.mw-parser-output .mvp-ranking-table td:nth-child(1),
.mw-parser-output .mvp-ranking-table td:nth-child(3){
text-align: center;
}
.mw-parser-output .mvp-shop-table td:nth-child(3){
text-align: center;
}
/* bullets e listas dentro das seções */
.mw-parser-output .mvp-func ul,
.mw-parser-output .mvp-ranking ul,
.mw-parser-output .mvp-shop ul{
margin: 8px 0 4px 18px;
color: var(--rt-text-soft);
}
.ev-wrap .ev-h{
line-height: 1.25; /* ou só: line-height: normal; */
margin: 0 0 6px;
}
/* Éden ocupando toda a largura disponível do conteúdo */
.mw-parser-output .eden-page.ev-wrap{
max-width: none; /* remove o limite de 980px */
width: 100%;
}
/* ===== LOJAS – CARDS GERAIS (Turn In / Quests) v2 ===== */
.eden-page .loja-card {
border-radius: 14px;
border: 1px solid #d2c5ff;
background: #ede3ff;
/* roxinho bem suave preenchendo o bloco todo */
box-shadow: 0 4px 10px rgba(44, 25, 101, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
padding: 10px 12px 12px;
}
/* Título do card */
.eden-page .loja-card-title {
margin: -6px -8px 8px; /* “encaixa” o título no topo do card */
padding: 6px 10px;
text-align: center;
font-weight: 700;
font-size: 14px;
color: #4a2cc5;
background: #e7ddff;
border-bottom: 1px solid #d8cdff;
}
/* Colapsível dentro do card */
.eden-page .loja-card .mw-collapsible {
margin: 0 !important;
text-align: center;
}
/* Botão Mostrar/Ocultar dos cards */
.eden-page .loja-card .mw-collapsible-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 4px;
margin: 4px auto 10px !important;
padding: 4px 12px !important;
background: #ffffff !important;
border-radius: 999px !important;
border: 1px solid #e0d8ff !important;
font-size: 12px;
font-weight: 600;
color: #5e3cd9 !important;
cursor: pointer;
}
.eden-page .loja-card .mw-collapsible-content {
padding: 4px 0 4px !important;
}
/* Garantir que a tabela fique bem centralizada dentro do card */
.eden-page .loja-card .mw-collapsible-content .wikitable {
margin: 0 auto;
background: #ffffff;
}
/* RESET – conteúdo do colapsível volta a ocupar a largura toda */
.eden-page .loja-card .mw-collapsible-content {
display: block;
padding: 8px 0 !important;
text-align: center;
background: transparent; /* nada de roxo aqui */
box-shadow: none;
}
/* “cartão” roxo em volta da tabela da loja */
.eden-page .loja-card .mw-collapsible-content > .wikitable {
width: 70% !important; /* mantém o que você já usava */
margin: 0 auto !important;
background: #f3ecff; /* roxo bem clarinho interno */
border-radius: 16px;
border: 1px solid #d8cdff;
box-shadow: 0 4px 12px rgba(44, 25, 101, 0.15);
overflow: hidden; /* arredonda os cantos certinho */
}
/* cabeçalho da tabela */
.eden-page .loja-card .wikitable > * > tr:first-child > th {
background: #ece7ff;
color: #2b1f6b;
font-weight: 700;
}
/* linhas normais da tabela */
.eden-page .loja-card .wikitable td {
background: #ffffff;
}
/* Fundo da caixa da loja (um pouco mais escuro que #f8f3ff) */
.eden-page .loja-card {
background: #f1e7ff !important; /* lilás um pouco mais forte */
box-shadow: 0 10px 25px rgba(90, 65, 180, 0.18);
}
/* Tabela dentro da caixa segue o mesmo fundo */
.eden-page .loja-card .wikitable {
border-color: #decfff !important;
background: #f1e7ff !important;
}
.eden-page .loja-card .wikitable th,
.eden-page .loja-card .wikitable td {
background: #f1e7ff !important; /* tira o branco */
border-color: #decfff !important;
}
/* Garante que nenhuma zebra antiga fique ativa */
.eden-page .loja-card .wikitable tr:nth-child(odd) td,
.eden-page .loja-card .wikitable tr:nth-child(even) td {
background: #f8f3ff !important;
}
/* ===== MAPAS TURN IN – BOTÃO COLAPSÁVEL (Tema Claro) ===== */
.eden-page .turnin-colapso {
margin-top: 8px;
margin-bottom: 16px;
text-align: center;
}
/* Botão "Mostrar ▸ / Ocultar ▾" dos Mapas */
.eden-page .turnin-colapso .mw-collapsible-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 4px;
margin: 6px auto 10px !important;
padding: 4px 14px !important;
background: #ffffff !important;
border-radius: 999px !important;
border: 1px solid #e0d8ff !important;
font-size: 12px;
font-weight: 600;
color: #5e3cd9 !important;
box-shadow: 0 4px 10px rgba(90, 65, 180, 0.18);
cursor: pointer;
}
/* texto "Mostrar ▸" / "Ocultar ▾" */
.eden-page .turnin-colapso .mw-collapsible-text {
color: inherit;
}
/* área interna do colapsável dos Mapas */
.eden-page .turnin-colapso .mw-collapsible-content {
padding: 8px 0 4px !important;
text-align: center;
}
/* Caixa da tabela dos Mapas no tema claro */
.eden-page .turnin-tabela {
background: #f1e7ff !important; /* mesmo lilás da loja */
border-radius: 16px;
border: 1px solid #decfff !important;
box-shadow: 0 10px 25px rgba(90, 65, 180, 0.18);
overflow: hidden;
}
/* cabeçalho */
.eden-page .turnin-tabela > * > tr:first-child > th {
background: #ece7ff;
color: #2b1f6b;
font-weight: 700;
}
/* células normais */
.eden-page .turnin-tabela td {
background: #f8f3ff;
border-color: #decfff !important;
}
/* Botão Mostrar/Ocultar dos Mapas – versão mais "natural" */
.eden-page .turnin-colapso .mw-collapsible-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 6px auto 10px !important;
padding: 4px 14px !important;
background: #ffffff !important;
border-radius: 999px !important;
border: 1px solid #e0d8ff !important;
font-size: 12px;
font-weight: 600;
font-style: normal;
color: #5e3cd9 !important;
box-shadow: 0 4px 10px rgba(90, 65, 180, 0.12);
cursor: pointer;
}
/* Remove o “quadradinho” interno e qualquer borda extra */
.eden-page .turnin-colapso .mw-collapsible-toggle span,
.eden-page .turnin-colapso .mw-collapsible-toggle a {
display: inline; /* nada de bloco grandão */
background: transparent !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
color: inherit !important;
}
/* ===== MAPAS TURN IN – COLAPSÍVEL (Tema Claro) ===== */
/* Contêiner do colapsível */
.eden-page .turnin-mapas {
margin: 10px auto 18px !important;
text-align: center;
}
/* Botão Mostrar/Ocultar */
.eden-page .turnin-mapas .mw-collapsible-toggle {
float: none !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px 18px !important;
margin: 6px auto 12px !important;
border-radius: 999px;
border: 1px solid #decfff;
background: #f5f0ff;
box-shadow: 0 6px 18px rgba(90, 65, 180, 0.22);
font-size: 13px;
font-weight: 600;
color: #4a2cc5;
cursor: pointer;
}
/* Remove cara de “botão quadrado” de dentro */
.eden-page .turnin-mapas .mw-collapsible-toggle span,
.eden-page .turnin-mapas .mw-collapsible-toggle a {
display: inline-block;
padding: 0;
border: 0 !important;
background: transparent !important;
}
/* Área interna do colapsível */
.eden-page .turnin-mapas .mw-collapsible-content {
padding: 4px 0 10px !important;
}
/* Tabela de mapas – centralizada e com cara de card */
.eden-page .turnin-tabela {
width: 100% !important;
max-width: 1100px;
margin: 0 auto 8px !important;
border-collapse: collapse;
background: #f8f3ff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(90, 65, 180, 0.2);
}
/* Cabeçalho */
.eden-page .turnin-tabela > * > tr:first-child > th {
background: #ece3ff;
color: #2b1f6b;
font-weight: 700;
}
/* Células */
.eden-page .turnin-tabela th,
.eden-page .turnin-tabela td {
border: 1px solid #e0d5ff;
background: #f8f3ff;
}
/* Tira qualquer zebra antiga */
.eden-page .turnin-tabela tr:nth-child(odd) td,
.eden-page .turnin-tabela tr:nth-child(even) td {
background: #f8f3ff;
}
/* ----- Botão "Mostrar/Ocultar" dos mapas – limpa o retângulo interno ----- */
.eden-page .turnin-mapas .mw-collapsible-toggle-default,
.eden-page .turnin-mapas .mw-collapsible-text,
.eden-page .turnin-mapas .mw-collapsible-toggle span,
.eden-page .turnin-mapas .mw-collapsible-toggle a {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Coluna "Nível" sempre centralizada na tabela de mapas */
.eden-page .turnin-tabela th:nth-child(2),
.eden-page .turnin-tabela td:nth-child(2) {
text-align: center !important;
vertical-align: middle !important;
}
/* Container do colapsível dos mapas */
.eden-page .turnin-mapas {
text-align: center;
margin: 18px 0 10px;
position: relative;
}
/* Cápsula que junta badge + "Mostrar" */
.eden-page .turnin-mapas .mw-collapsible-toggle {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 999px;
background: #f5edff;
border: 1px solid #e1d5ff;
box-shadow: 0 8px 18px rgba(90, 65, 180, 0.22);
cursor: pointer;
}
/* Badge à esquerda dentro da cápsula */
.eden-page .turnin-mapas .mw-collapsible-toggle::before {
content: "MAPAS TURN IN";
padding: 5px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #decfff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #5e3cd9;
}
/* Texto [Mostrar ▸] */
.eden-page .turnin-mapas .mw-collapsible-text {
font-weight: 400;
color: #4c28c9;
text-decoration: none;
}
/* CARD VIP – Pacote Iniciante */
.pack-simple.pack-vip {
position: relative;
max-width: 480px;
margin: 24px auto 32px; /* centraliza o card */
padding: 18px 20px 16px;
border-radius: 20px;
background: linear-gradient(145deg, #fdfbff, #f3ecff);
border: 1px solid #e0d6ff;
box-shadow: 0 18px 40px rgba(80, 45, 170, 0.24);
text-align: left; /* pra alinhar o início dos itens */
}
/* Micro badge VIP – versão roxo-escuro (tema padrão) */
.pack-simple.pack-vip::before {
content: attr(data-badge);
position: absolute;
top: -10px;
left: 20px;
padding: 2px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
border-radius: 999px;
background: linear-gradient(135deg, #3a237f, #5b3ad1); /* roxo escuro -> roxo médio */
color: #ffffff;
box-shadow: 0 4px 10px rgba(40, 20, 90, 0.55);
}
/* Título do card */
.pack-simple .pack-title {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 800;
font-size: 16px;
color: #4423c0;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #e3dafd;
}
/* Lista interna */
.pack-simple .pack-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Cada linha do item – alinhadas à esquerda */
.pack-simple .pack-row {
display: flex;
align-items: center;
justify-content: flex-start; /* começa tudo no mesmo ponto */
gap: 10px;
padding: 6px 4px;
border-bottom: 1px solid #ece4ff;
}
/* Última linha sem borda */
.pack-simple .pack-row:last-child {
border-bottom: none;
}
/* Ícone – largura fixa pra alinhar os textos */
.pack-simple .pack-ico {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
max-width: 28px;
flex: 0 0 28px; /* trava o espaço do ícone */
}
/* Nome do item */
.pack-simple .pack-name {
font-size: 13px;
font-weight: 500;
color: #3c2a88;
flex: 1;
}
/* Hover leve */
.pack-simple .pack-row:hover {
background: #f1e9ff;
}
/* GRID DOS CARDS COM WIKITABLE */
.eden-page .eden-quests-table-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 8px 0 4px;
}
/* CAIXA ROXINHA EM VOLTA DA WIKITABLE */
.eden-page .eden-quest-box {
position: relative;
background: #f8f3ff;
border-radius: 18px;
border: 1px solid #decfff;
padding: 18px 18px 14px;
box-shadow: 0 10px 24px rgba(94, 60, 217, 0.14);
}
/* WIKITABLE DENTRO DO CARD */
.eden-page .eden-quest-table {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse;
background: transparent;
border-color: #decfff;
}
.eden-page .eden-quest-table th,
.eden-page .eden-quest-table td {
padding: 6px 10px;
border: 1px solid #decfff;
vertical-align: middle;
}
/* cabeçalho da tabela */
.eden-page .eden-quest-table th {
background: #ece4ff;
color: #2b1f6b;
font-weight: 700;
text-align: center;
}
/* células normais */
.eden-page .eden-quest-table td {
background: #fdfbff;
}
/* Badge roxo escuro reaproveitado */
.eden-page .entry-tag {
position: relative;
overflow: visible;
}
.eden-page .entry-tag::before {
content: attr(data-badge);
position: absolute;
top: -14px;
left: 24px;
padding: 4px 14px;
border-radius: 999px;
background: linear-gradient(90deg, #5a2fd6, #8e4fff);
color: #ffffff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 6px 16px rgba(82, 47, 176, 0.45);
white-space: nowrap;
}
/* GRID dos cards – deixa cada um com sua altura natural */
.eden-page .eden-quests-table-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 8px 0 4px;
align-items: flex-start; /* não esticar demais os cards vazios */
}
/* Card das quests */
.eden-page .eden-quest-box {
position: relative;
background: #f8f3ff;
border-radius: 18px;
border: 1px solid #decfff;
padding: 18px 18px 14px;
box-shadow: 0 10px 24px rgba(94, 60, 217, 0.14);
}
/* Tabela dentro do card */
.eden-page .eden-quest-table {
width: 100% !important;
margin: 0 auto !important;
border-collapse: collapse;
background: transparent;
border-color: #decfff;
}
/* Cabeçalho já estava ok, mantemos */
.eden-page .eden-quest-table th {
background: #ece4ff;
color: #2b1f6b;
font-weight: 700;
text-align: center;
padding: 6px 10px;
}
/* AQUI vem o principal: centralizar conteúdo das células */
.eden-page .eden-quest-table td {
padding: 8px 10px;
border: 1px solid #decfff;
background: #fdfbff;
text-align: center; /* deixa igual ao primeiro card */
vertical-align: middle; /* centraliza na altura da linha */
}
/* Badge genérico do card de quest */
.eden-page .eden-quest-box::before {
content: attr(data-badge);
position: absolute;
top: -14px;
left: 26px;
padding: 4px 14px;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
color: #ffffff;
border-radius: 999px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20);
white-space: nowrap;
}
/* 70+ – ciano */
.eden-page .eden-quest-box.is-70::before {
background: #12c5e9; /* ciano */
}
/* 150+ – azul escuro */
.eden-page .eden-quest-box.is-150::before {
background: #2834b5; /* azul escuro */
}
/* 200+ – vermelho */
.eden-page .eden-quest-box.is-200::before {
background: #e34040; /* vermelho */
}
/* CARD GENÉRICO DE QUESTS (mesmo “bloco” das quests 70+/150+/200+) */
.eden-page .eden-quests-card {
position: relative;
margin: 16px auto 32px;
padding: 22px 24px 18px;
background: #f8f3ff;
border-radius: 18px;
border: 1px solid #e0d4ff;
box-shadow: 0 14px 30px rgba(86, 62, 200, 0.22);
}
/* LABEL / BADGE DO CARD */
.eden-page .eden-quests-card .eden-quests-label {
position: absolute;
top: -14px;
left: 24px;
display: inline-flex;
align-items: center;
padding: 4px 16px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: #5b3fd9; /* roxo escuro */
color: #ffffff;
box-shadow: 0 12px 26px rgba(91, 63, 217, 0.45);
}
/* TABELA DENTRO DO CARD – segue o tema claro */
.eden-page .eden-quests-table {
border-collapse: collapse;
width: 100%;
background: #f8f3ff;
}
.eden-page .eden-quests-table th,
.eden-page .eden-quests-table td {
border: 1px solid #e0d4ff;
padding: 8px 12px;
}
.eden-page .eden-quests-table th {
background: #ebddff;
color: #3f2a94;
font-weight: 700;
}
.eden-page .eden-quests-table td {
background: #f9f4ff;
}
/* tira zebras antigas, se tiver */
.eden-page .eden-quests-table tr:nth-child(even) td,
.eden-page .eden-quests-table tr:nth-child(odd) td {
background: #f9f4ff;
}
/* Centralizar conteúdo da tabela de Desafios Diários */
.eden-page .eden-quests-table td {
background: #f9f4ff;
border: 1px solid #e0d4ff;
padding: 10px 12px;
text-align: center; /* centraliza horizontal */
vertical-align: middle; /* centraliza vertical */
}
/* Badge do colapsível de Desafios Diários */
.eden-page .drops-inline.is-daily::before {
background: linear-gradient(90deg, #b85bff, #6b3bff);
}
/* CARD DE DESAFIOS – AJUSTE GERAL */
.eden-quests-card.is-daily {
background: #f8f1ff; /* roxo bem clarinho */
border-radius: 20px;
box-shadow: 0 10px 30px rgba(132, 98, 255, 0.18);
padding: 10px 14px 16px;
}
/* TABELA DENTRO DO CARD */
.eden-quests-card.is-daily .eden-quests-table {
border-collapse: collapse;
width: 100%;
background: transparent;
}
/* CABEÇALHO */
.eden-quests-card.is-daily .eden-quests-table th {
background: #ebddff; /* faixa lilás do topo */
color: #4a2b9e;
border-color: #e2d5ff;
padding: 8px 12px;
}
/* CÉLULAS */
.eden-quests-card.is-daily .eden-quests-table td {
border-color: #f0e6ff;
padding: 10px 14px;
background: #fbf7ff; /* fundo base */
}
/* ZEBRADO SUAVE NAS LINHAS */
.eden-quests-card.is-daily .eden-quests-table tr:nth-child(even) td {
background: #f5edff;
}
/* EFEITO LEVE AO PASSAR O MOUSE */
.eden-quests-card.is-daily .eden-quests-table tr:hover td {
background: #efe4ff;
}
/* Linhas mais marcadas entre as quests */
.eden-quests-card.is-daily .eden-quests-table td,
.eden-quests-card.is-daily .eden-quests-table th {
border-color: #d5c2ff !important; /* mais escuro que #f0e6ff */
}
/* Reforça a linha que separa uma quest da outra */
.eden-quests-card.is-daily .eden-quests-table tr + tr td {
border-top: 1px solid #c9b2ff !important;
}
/* Badge roxo-escuro para colapsíveis de Lista de MVPs */
.drops-inline.is-mvp::before {
background: linear-gradient(120deg, #b45dff, #6c32ff);
color: #fff;
box-shadow: 0 10px 26px rgba(88, 41, 178, 0.45);
}
/* opcional: deixar o fundo da barra mais clarinho pra combinar */
.drops-inline.is-mvp {
background: #f7f1ff;
}
/* Container do texto introdutório – agora em formato de card */
.vip-intro {
max-width: 1100px; /* mesma “largura visual” do card de baixo */
margin: 8px auto 32px; /* centralizado */
padding: 18px 32px 22px;
border-radius: 26px;
background: linear-gradient(180deg, #2a0d55 0%, #130322 100%);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
border: 1px solid rgba(255, 160, 255, 0.18);
position: relative;
color: #fdf7ff;
}
/* linha de brilho em cima pra imitar a borda do painel */
.vip-intro::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border-top: 2px solid rgba(255, 210, 255, 0.45);
pointer-events: none;
}
/* “pílula” no topo, combinando com VANTAGENS VIP */
.vip-intro-chip {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
padding: 6px 22px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: #3c163e;
background: linear-gradient(90deg, #ffb949 0%, #ff9331 100%);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* Texto interno */
.vip-intro p {
margin: 4px 0 0;
font-size: 13px;
line-height: 1.7;
}
/* Destaques dentro do texto */
.vip-intro b {
color: #ffe8ff;
}
/* Card de introdução de Rates / Temporada */
.rt-intro {
max-width: 1100px;
margin: 16px auto 32px;
padding: 18px 22px 22px;
border-radius: 22px;
background: radial-gradient(circle at 0 0, #8f5bff 0, #2a164f 55%, #140826 100%);
box-shadow: 0 16px 40px rgba(8, 0, 40, 0.55);
color: #f7f4ff;
position: relative;
font-size: 0.9rem;
line-height: 1.6;
}
/* Badge flutuando no topo */
.rt-intro-badge {
position: absolute;
top: -18px;
left: 28px;
padding: 6px 18px;
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700;
background: linear-gradient(90deg, #ffb347, #ff7a3c);
color: #351c3f;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
/* Corpo do texto */
.rt-intro-body p {
margin: 6px 0 10px;
}
.rt-intro-body b {
color: #ffe9ff;
}
/* Parágrafo de aviso */
.rt-intro-warning {
margin-top: 14px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(10, 2, 30, 0.65);
border: 1px solid rgba(255, 204, 120, 0.4);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
/* Pílula "Importante" dentro do aviso */
.rt-intro-warning .rt-pill {
display: inline-block;
margin-right: 8px;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: .08em;
background: rgba(255, 204, 120, 0.18);
border: 1px solid rgba(255, 204, 120, 0.8);
color: #ffe1a6;
}
/* ===== GRID DE GUIAS IMPORTANTES – CONTAINER ===== */
.home-guides-surface {
max-width: 1200px;
margin: 10px auto 40px;
padding: 26px 30px 30px;
border-radius: 24px;
background:
radial-gradient(circle at 0 0, #fff7ff 0, #f7f1ff 40%, #f3ecff 100%);
border: 1px solid rgba(177, 150, 255, 0.35);
box-shadow: 0 18px 38px rgba(120, 90, 255, 0.18);
}
/* Grid de 4 colunas, bem espaçado */
.home-guides-surface .home-guides-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px 40px;
}
/* Título de cada coluna */
.home-guides-surface .col-title {
font-family: "Lilita One", system-ui, -apple-system, BlinkMacSystemFont;
font-size: 16px;
margin-bottom: 10px;
color: #5a34a5;
}
/* Ajuste fino na lista para casar com o fundo novo */
.home-guides-surface .home-list {
margin: 0;
padding: 0;
}
/* Mantém o estilo de linha clicável já existente, só suaviza o espaçamento */
.home-guides-surface .home-list li {
margin: 3px 0;
}
/* RESPONSIVO: quebra para 2 colunas e depois 1 */
@media (max-width: 1024px) {
.home-guides-surface {
padding: 22px 20px 26px;
}
.home-guides-surface .home-guides-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 24px;
}
}
@media (max-width: 700px) {
.home-guides-surface .home-guides-grid {
grid-template-columns: 1fr;
}
}
/* ===== BLOCO DE DESTAQUES (TOPO) ===== */
.rt-featured {
position: relative;
max-width: 1150px;
margin: 32px auto 24px;
padding: 32px 32px 28px;
border-radius: 26px;
background: linear-gradient(135deg, #f7f1ff 0%, #f9f5ff 40%, #f6f0ff 100%);
box-shadow: 0 18px 35px rgba(98, 63, 194, 0.16);
border: 1px solid rgba(140, 92, 255, 0.22);
}
/* Badge “Destaques & Novidades” no topo, estilo Eden */
.rt-featured::before {
content: attr(data-badge);
position: absolute;
top: -18px;
left: 40px;
padding: 8px 26px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
background: linear-gradient(120deg, #3b1f91, #6f3bff);
color: #fff;
box-shadow: 0 10px 25px rgba(67, 35, 160, 0.45);
}
/* GRID – duas colunas responsivas */
.rt-featured-grid {
display: flex;
flex-wrap: wrap;
gap: 24px 64px;
}
/* Cada coluna de destaques */
.rt-featured-col {
flex: 1 1 260px;
min-width: 260px;
}
/* Título da coluna */
.rt-featured-col-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6a3dd6;
margin-bottom: 10px;
}
/* Lista básica */
.rt-featured-list {
list-style: none;
margin: 0;
padding: 4px 0 0;
}
/* Cada linha */
.rt-featured-list li {
margin: 0;
padding: 0;
border-bottom: 1px dashed rgba(125, 94, 210, 0.25);
}
/* Remove a borda do último item da coluna */
.rt-featured-list li:last-child {
border-bottom: none;
}
/* Link ocupando a linha toda */
.rt-featured-list li a {
display: flex;
align-items: center;
width: 100%;
padding: 8px 10px;
text-decoration: none;
color: #41228b;
font-size: 14px;
border-radius: 999px;
transition:
background 0.18s ease,
box-shadow 0.18s ease,
transform 0.12s ease,
color 0.18s ease;
}
/* Bolinha decorativa à esquerda (tipo “bullet”) */
.rt-featured-list li a::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
margin-right: 10px;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b6bff 55%, #5a32c8 100%);
box-shadow: 0 0 0 2px rgba(155, 107, 255, 0.2);
}
/* Hover – linha inteira roxo claro */
.rt-featured-list li a:hover {
background: radial-gradient(circle at 0% 0%, #ffffff 0%, #f1e7ff 55%, #e6d6ff 100%);
box-shadow: 0 8px 20px rgba(94, 55, 189, 0.28);
color: #2b176b;
transform: translateY(-1px);
}
/* Opcional: estado “ativo”/selecionado (se quiser forçar em algum item via classe) */
.rt-featured-list li.is-active a {
background: linear-gradient(120deg, #6f3bff, #9a5dff);
color: #ffffff;
box-shadow: 0 10px 24px rgba(80, 49, 180, 0.45);
}
/* ===== BLOCO DE DESTAQUES – compacto ===== */
.rt-featured {
position: relative;
max-width: 900px; /* um pouco menor */
margin: 24px auto 18px;
padding: 16px 18px 14px; /* menos “alto” e mais compacto */
border-radius: 18px;
background: linear-gradient(135deg, #f9f5ff 0%, #f3ecff 40%, #efe6ff 100%);
border: 1px solid rgba(140, 92, 255, 0.22);
box-shadow:
0 10px 22px rgba(96, 63, 191, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}
/* Badge roxo escuro, também um pouco menor */
.rt-featured::before {
content: attr(data-badge);
position: absolute;
top: -16px;
left: 26px;
padding: 6px 18px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
background: linear-gradient(120deg, #3b1f8c, #6a38f5);
color: #fff;
box-shadow: 0 10px 22px rgba(63, 35, 150, 0.55);
}
/* Grid um pouco mais fechado */
.rt-featured-grid {
display: flex;
flex-wrap: wrap;
gap: 12px 40px;
}
/* ===== TÍTULOS DAS COLUNAS ===== */
.rt-featured-col-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #7a60d0;
margin-bottom: 4px;
}
/* ===== LISTA E HOVER ===== */
.rt-featured-list {
list-style: none;
margin: 0;
padding: 2px 0 0;
}
.rt-featured-list li {
margin: 0;
padding: 0;
border-bottom: 1px dashed rgba(125, 94, 210, 0.18);
}
.rt-featured-list li:last-child {
border-bottom: none;
}
.rt-featured-list li a {
display: flex;
align-items: center;
width: 100%;
padding: 4px 8px; /* mais compacto */
text-decoration: none;
color: #41228b;
font-size: 13px;
border-radius: 10px;
transition:
background 0.15s ease,
box-shadow 0.15s ease,
transform 0.10s ease,
color 0.15s ease;
}
/* bolinha decorativa ao lado do texto */
.rt-featured-list li a::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
margin-right: 8px;
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b6bff 55%, #5a32c8 100%);
box-shadow: 0 0 0 2px rgba(155, 107, 255, 0.2);
}
/* HOVER – mesma vibe do exemplo (roxinho chapado claro) */
.rt-featured-list li a:hover {
background: #ecdafe; /* cor principal do hover */
box-shadow: 0 6px 14px rgba(122, 80, 209, 0.25);
color: #2b176b;
transform: translateY(-1px);
}
/* opcional: item fixo selecionado */
.rt-featured-list li.is-active a {
background: linear-gradient(120deg, #6f3bff, #9a5dff);
color: #ffffff;
box-shadow: 0 10px 24px rgba(80, 49, 180, 0.45);
}
/* Dá mais espaço entre a borda superior do card e o conteúdo */
.rt-featured-grid {
display: flex;
flex-wrap: wrap;
gap: 12px 40px;
margin-top: 10px; /* <-- adiciona esse espaçamento */
}
/* Linha especial da TRAVA da roleta */
.rt-roulette-lock-row td {
background: #fff4f8; /* leve rosinha */
border-bottom: 2px solid #f1c1d8;
}
.rt-roulette-lock-row td:first-child {
border-left: 3px solid #ff82b8; /* faixa lateral chamando atenção */
}
/* Badge "TRAVA" ao lado do item */
.rt-roulette-lock-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 10px;
border-radius: 999px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
background: linear-gradient(90deg, #ff7bbd, #ffb6dd);
color: #ffffff;
vertical-align: middle;
}
/* --- Card da Roleta (colapsível) --- */
.rt-roulette-box {
background: radial-gradient(circle at top left, #fdf8ff 0, #f3ecff 45%, #efe6ff 100%);
border-radius: 22px;
border: 1px solid rgba(140, 110, 255, 0.25);
padding: 20px 26px;
margin: 18px auto 28px;
box-shadow: 0 14px 35px rgba(80, 40, 190, 0.18);
}
/* tira espaçamento estranho padrão do collapsible */
.rt-roulette-box .mw-collapsible-content {
padding-top: 10px;
}
/* --- Tabela da Roleta --- */
.wikitable.rt-roulette-table {
background: transparent;
border-collapse: collapse;
}
.wikitable.rt-roulette-table th,
.wikitable.rt-roulette-table td {
border: none;
border-bottom: 1px dashed rgba(170, 130, 255, 0.35);
padding: 10px 16px;
}
/* cabeçalho padrão (igual aos outros cards roxos claros) */
.wikitable.rt-roulette-table th {
background: #f5e9ff;
font-weight: 600;
color: #5b2cff;
text-transform: uppercase;
font-size: 11px;
}
.wikitable.rt-roulette-table tr:last-child td {
border-bottom: none;
}
/* --- Linha especial da TRAVA --- */
.rt-roulette-lock-row td {
background: #f3ecff; /* lilás suave */
border-bottom: 2px solid rgba(125, 90, 255, 0.35); /* linha um pouco mais forte */
}
.rt-roulette-lock-row td:first-child {
border-left: 3px solid #5b2cff; /* faixa roxo escuro */
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.rt-roulette-lock-row td:last-child {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
/* --- Badge TRAVA em roxo escuro --- */
.rt-roulette-lock-badge {
display: inline-block;
margin-left: 8px;
padding: 2px 10px;
border-radius: 999px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
background: linear-gradient(90deg, #4b1fd9, #8e54ff); /* roxo escuro -> roxo médio */
color: #ffffff;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.75) inset,
0 2px 6px rgba(56, 26, 140, 0.45);
vertical-align: middle;
}
/* ----- CONTAINER DO NÍVEL (card roxo claro) ----- */
.roleta-sorte .mw-collapsible-content {
background: #fbf5ff;
border-radius: 18px;
padding: 18px 22px;
box-shadow: 0 14px 40px rgba(130, 88, 255, 0.16);
}
/* CARD da Roleta (mesmo esquema de antes) */
.roleta-sorte .mw-collapsible-content {
background: #fbf5ff;
border-radius: 18px;
padding: 18px 22px;
box-shadow: 0 14px 40px rgba(130, 88, 255, 0.16);
}
/* Roleta da Sorte – área interna do colapsível */
.roleta-sorte .mw-collapsible {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.roleta-sorte .mw-collapsible-content {
background: transparent !important;
border: none !important;
padding: 10px 0 0 !important; /* só um respiro abaixo do cabeçalho */
}
/* Tabela da Roleta */
.roleta-sorte .rt-lottery-table {
width: 70%; /* deixa mais estreita */
margin: 0 auto 24px; /* centralizada */
background: #f7eeff; /* roxo claro */
border-collapse: collapse;
}
.roleta-sorte .rt-lottery-table th,
.roleta-sorte .rt-lottery-table td {
background: #f7eeff !important; /* todas as linhas com a MESMA cor */
border-color: #f0ddff; /* borda suave em roxo bem clarinho */
}
/* opcional: dar uma leve arredondada na “caixa” da tabela */
.roleta-sorte .rt-lottery-table tr:first-child th:first-child {
border-top-left-radius: 14px;
}
.roleta-sorte .rt-lottery-table tr:first-child th:last-child {
border-top-right-radius: 14px;
}
.roleta-sorte .rt-lottery-table tr:last-child td:first-child {
border-bottom-left-radius: 14px;
}
.roleta-sorte .rt-lottery-table tr:last-child td:last-child {
border-bottom-right-radius: 14px;
}
/* Badge TRAVA — roxo escuro, como já estava */
.rt-lottery-trava-tag {
display: inline-block;
margin-left: 6px;
margin-top: 2px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
background: #5b2aff;
color: #ffffff;
box-shadow: 0 4px 12px rgba(91, 42, 255, 0.55);
}
/* Opção 2 – recomendado */
.roleta-sorte .drops-inline {
margin: 0 auto 8px !important; /* centralizado e com espaçamento vertical */
}
/* Banner da Roleta da Sorte – wrapper */
.roleta-page .banner-true {
display: inline-block;
border-radius: 24px;
overflow: hidden; /* faz a borda arredondada cortar a imagem dentro */
box-shadow: 0 18px 40px rgba(30, 10, 80, 0.45);
border: 2px solid #f5e7ff;
}
/* Garante que a imagem dentro acompanhe e fique sem margem */
.roleta-page .banner-true img {
display: block;
border-radius: 0; /* a borda já vem do wrapper */
box-shadow: none; /* sombra só no wrapper */
}
/* GRID da progressão de EXP do Passe de Batalha */
.bp-exp-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
margin: 12px 0 24px;
}
/* Card individual */
.bp-exp-card {
background: #faf5ff; /* roxo bem clarinho */
border-radius: 14px;
padding: 10px 16px 12px;
box-shadow: 0 10px 25px rgba(123, 58, 245, 0.08);
border: 1px solid rgba(123, 58, 245, 0.12);
}
/* Label pequena em cima */
.bp-exp-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #7b3af5;
margin-bottom: 4px;
}
/* Valor principal */
.bp-exp-value {
font-size: 14px;
font-weight: 600;
color: #2c2250;
}
/* Observação opcional (linha de baixo) */
.bp-exp-note {
font-size: 11px;
color: #6c6a80;
margin-top: 2px;
}
/* =============================
Recompensa Bônus do Passe
============================= */
/* Card mais compacto e centrado */
.bp-bonus-card {
background: #faf5ff;
border-radius: 20px;
padding: 14px 18px 18px;
margin: 8px auto 24px;
border: 1px solid rgba(123, 58, 245, 0.12);
box-shadow: 0 10px 28px rgba(123, 58, 245, 0.15);
max-width: 260px; /* deixa esse formato “cartinha” */
}
/* Como você está usando praticamente só a coluna,
força o layout vertical em qualquer largura */
.bp-bonus-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
/* Título "Recompensa Bônus (0,5%)" dentro do card */
.bp-bonus-title {
font-size: 14px;
font-weight: 600;
color: #5b34c9;
margin-bottom: 2px;
}
/* Bloco da esquerda (ovo + textos) agora é coluna também */
.bp-bonus-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
/* Círculo do ovo – só ajustei tamanho e sombra pra combinar com o card menor */
.bp-bonus-icon-wrap {
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(
circle at 20% 0%,
#ffffff 0%,
#c8a8ff 55%,
#9b6bff 100%
);
box-shadow: 0 6px 16px rgba(99, 55, 214, 0.35);
overflow: hidden;
margin-top: 2px;
}
.bp-bonus-icon {
max-width: 32px !important;
height: auto !important;
}
/* Textos do ovo */
.bp-bonus-text {
line-height: 1.3;
}
.bp-bonus-label {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #aa7cff;
font-weight: 600;
margin-top: 4px;
margin-bottom: 1px;
}
.bp-bonus-name {
font-size: 15px;
font-weight: 700;
color: #3b2b67;
}
.bp-bonus-desc {
font-size: 11px;
color: #6b5a99;
}
/* Pet */
.bp-bonus-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-top: 6px;
}
.bp-bonus-pet {
max-height: 120px !important; /* um pouco menor pra não “pesar” o card */
width: auto !important;
}
.bp-bonus-pet-name {
font-size: 11px;
color: #6b5a99;
font-weight: 600;
margin-bottom: 2px;
}
.roxo-table {
width: 100%;
border-collapse: collapse;
background: #160c22; /* roxo bem escuro */
color: #f5e9ff;
border: 1px solid rgba(220, 180, 255, 0.16);
border-radius: 10px;
overflow: hidden;
}
.roxo-table th {
background: linear-gradient(90deg, #7b3af5, #a855f7);
color: #ffffff;
padding: 8px 10px;
text-align: left;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
}
.roxo-table td {
padding: 6px 10px;
border-top: 1px solid rgba(220, 180, 255, 0.10);
font-size: 13px;
}
.roxo-table tr:nth-child(even) td {
background: rgba(255, 255, 255, 0.02);
}
.roxo-table tr:hover td {
background: rgba(148, 93, 255, 0.18);
}
/* ====== CARD / CAIXA GERAL ====== */
.rt-rewards-card {
background: #f7ecff;
border-radius: 24px;
padding: 18px 22px 22px;
box-shadow: 0 16px 40px rgba(149, 90, 255, 0.25);
max-width: 960px;
margin: 0 auto 32px;
}
/* Título (ex: "Recompensas") – opcional */
.rt-rewards-title {
font-size: 24px;
font-weight: 800;
color: #5b2aa8;
margin-bottom: 14px;
}
/* Badge / aba roxa (ex: "RECOMPENSAS – DESAFIOS DIÁRIOS") */
.rt-rewards-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 26px;
border-radius: 999px;
background: linear-gradient(90deg, #a546ff, #d067ff);
color: #ffffff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 8px 24px rgba(133, 70, 255, 0.45);
margin-bottom: 18px;
}
/* ====== TABELA ====== */
.rt-rewards-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
overflow: hidden;
font-size: 14px;
font-family: inherit;
}
/* Cabeçalho (linha "Prêmio | Chance") */
.rt-rewards-table .rt-head th {
background: #f0ddff;
color: #5b2aa8;
font-weight: 600;
padding: 10px 18px;
text-align: left; /* base: esquerda */
}
/* "Prêmio" centralizado */
.rt-rewards-table .rt-head th:first-child {
text-align: center;
}
/* "Chance" centralizado */
.rt-rewards-table .rt-head th:last-child {
text-align: center;
}
/* Corpo da tabela */
.rt-rewards-table tr td {
background: #fdfbff;
color: #3c215f;
padding: 10px 18px;
border-bottom: 1px solid #f0e2ff; /* listrinha horizontal suave */
}
/* Remove a borda da última linha */
.rt-rewards-table tr:last-child td {
border-bottom: none;
}
/* Primeira coluna: conteúdo alinhado à esquerda */
.rt-rewards-table tr td:first-child {
text-align: left;
}
/* Segunda coluna (Chance) centralizada */
.rt-rewards-table tr td:last-child {
text-align: center;
}
/* Linha vertical separando as colunas */
.rt-rewards-table .rt-head th:nth-child(2),
.rt-rewards-table tr td:nth-child(2) {
border-left: 1px solid rgba(224, 203, 255, 0.9);
}
/* Canto arredondado — topo */
.rt-rewards-table .rt-head th:first-child {
border-top-left-radius: 16px;
}
.rt-rewards-table .rt-head th:last-child {
border-top-right-radius: 16px;
}
/* Canto arredondado — base */
.rt-rewards-table tr:last-child td:first-child {
border-bottom-left-radius: 16px;
}
.rt-rewards-table tr:last-child td:last-child {
border-bottom-right-radius: 16px;
}
/* BOX ROXINHO AO REDOR DA TABELA */
.rt-rewards-box {
margin: 30px auto 0;
max-width: 980px; /* mais larga */
padding: 20px 22px 24px;
background: radial-gradient(circle at top left, #ffe9ff 0, #f7e7ff 38%, #f8edff 100%);
border-radius: 26px;
border: 1px solid rgba(171, 119, 255, 0.45);
box-shadow:
0 18px 40px rgba(124, 79, 255, 0.25),
0 0 0 1px rgba(255, 255, 255, 0.65);
}
/* TABELA */
.rt-rewards-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 1.45;
color: #5a2a90;
}
/* Cabeçalho */
.rt-rewards-table .rt-head th {
background: linear-gradient(90deg, #f2d8ff, #f3d1ff);
padding: 10px 18px;
font-weight: 600;
border-bottom: 1px solid #e3c4ff;
color: #6e33c9;
}
/* "Prêmio" centralizado */
.rt-rewards-table .rt-head th:first-child {
text-align: center;
}
/* "Nível" à direita + divisória */
.rt-rewards-table .rt-head th:last-child {
text-align: center;
border-left: 1px solid #e3c4ff;
width: 120px; /* coluna de nível mais estreita */
white-space: nowrap;
}
/* Células do corpo */
.rt-rewards-table td {
background: #fff9ff;
padding: 8px 18px;
border-bottom: 1px solid #f0e0ff; /* linha que separa as linhas */
box-shadow: inset 0 -1px 0 rgba(240, 224, 255, 0.7);
}
/* Primeira coluna alinhada à esquerda */
.rt-rewards-table td:first-child {
text-align: left;
}
/* Segunda coluna à direita + divisória */
.rt-rewards-table td:last-child {
text-align: center;
border-left: 1px solid #f0d4ff;
white-space: nowrap;
}
/* Última linha com borda mais suave */
.rt-rewards-table tr:last-child td {
border-bottom-color: rgba(240, 224, 255, 0.4);
}
/* Pequeno efeito ao passar o mouse nas linhas */
.rt-rewards-table tr:hover td {
background: #fff3ff;
}
/* Passe de Batalha – banner com bordas curvas */
.banner-passe {
display: block;
margin: 0 auto; /* mantém centralizado */
border-radius: 24px; /* deixa as bordas curvas */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* opcional: destaque */
}
/* Container do banner do Passe */
.banner-passe {
display: inline-block;
border-radius: 24px; /* bordas curvas */
overflow: hidden; /* corta os cantos da imagem */
box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* destaque (opcional) */
}
/* Garante que a imagem ocupe certinho o container */
.banner-passe img {
display: block;
}
/* HERO (topo) */
.rtp-hero{
background: rgba(130, 90, 200, 0.08);
border-radius: 18px;
padding: 14px;
margin: 6px 0 14px;
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.rtp-hero-title{ font-weight: 950; font-size: 18px; }
.rtp-hero-sub{ opacity: .92; margin-top: 6px; line-height: 1.35; }
.rtp-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; }
.rtp-pill{
display:inline-block;
padding:7px 11px;
border-radius: 999px;
font-weight: 900;
background: rgba(130, 90, 200, 0.14);
}
/* Grids */
.rtp-grid-featured{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
gap:16px;
margin-top: 10px;
}
.rtp-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:14px;
margin-top: 10px;
}
.rtp-muted{ opacity:.85; margin: 6px 0 8px; }
/* Card do criador */
.rtp-card{
background: rgba(255,255,255,0.94);
border-radius: 18px;
overflow:hidden;
box-shadow: 0 12px 26px rgba(0,0,0,0.14);
position: relative;
}
.rtp-card:before{
content:"";
position:absolute;
left:0; top:0; right:0;
height: 4px;
background: rgba(130, 90, 200, 0.55);
opacity: .75;
}
.rtp-top{
display:flex;
gap:14px;
padding: 14px;
align-items:flex-start;
}
.rtp-avatar img{
border-radius: 14px;
box-shadow: 0 10px 18px rgba(0,0,0,0.16);
display:block;
}
.rtp-main{ flex:1; min-width:0; }
.rtp-name{ font-weight: 950; font-size: 18px; line-height: 1.15; }
.rtp-line{ opacity: .92; margin-top: 6px; line-height: 1.35; }
.rtp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 8px; }
.rtp-chip{
display:inline-block;
padding:4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
background: rgba(130, 90, 200, 0.12);
}
.rtp-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; }
.rtp-btn{
display:inline-block;
padding:8px 12px;
border-radius:12px;
font-weight: 950;
text-decoration:none !important;
background: rgba(130, 90, 200, 0.18);
}
.rtp-btn:hover{ filter:brightness(1.06); }
.rtp-btn-soft{ background: rgba(130, 90, 200, 0.10); }
/* Benefícios */
.rtp-benefits{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:14px;
margin-top: 10px;
}
.rtp-box{
background: rgba(255,255,255,0.94);
border-radius: 18px;
box-shadow: 0 12px 26px rgba(0,0,0,0.12);
padding: 14px;
}
.rtp-box-title{ font-weight: 950; font-size: 16px; margin-bottom: 8px; }
.rtp-list{ margin: 0; padding-left: 18px; line-height: 1.45; }
/* Mobile */
@media (max-width: 560px){
.rtp-top{ flex-direction:column; }
}
/* Visão Geral */
.rtp-overview{
display:grid;
grid-template-columns: 1.35fr .65fr;
gap:14px;
background: rgba(130, 90, 200, 0.06);
border-radius: 18px;
padding: 14px;
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
margin: 8px 0 14px;
}
.rtp-ov-title{
font-weight: 950;
font-size: 18px;
margin-bottom: 6px;
}
.rtp-ov-text{
opacity: .92;
line-height: 1.4;
}
.rtp-ov-bullets{
margin-top: 10px;
display:grid;
gap:6px;
opacity: .92;
}
.rtp-ov-item{
background: rgba(255,255,255,0.70);
border-radius: 14px;
padding: 8px 10px;
}
.rtp-ov-box{
background: rgba(255,255,255,0.90);
border-radius: 18px;
padding: 12px;
box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.rtp-ov-box-title{
font-weight: 950;
margin-bottom: 8px;
}
.rtp-ov-links{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.rtp-ov-btn{
display:inline-block;
padding: 8px 12px;
border-radius: 999px;
font-weight: 950;
background: rgba(130, 90, 200, 0.14);
}
/* Mobile */
@media (max-width: 650px){
.rtp-overview{ grid-template-columns: 1fr; }
}
.rtp-intro{
margin: 6px 0 10px;
opacity: .92;
line-height: 1.4;
}
.rtp-quicklinks{
display:flex;
flex-wrap:wrap;
gap:8px;
margin: 0 0 14px;
}
.rtp-q{
display:inline-block;
padding: 7px 11px;
border-radius: 999px;
font-weight: 900;
background: rgba(130, 90, 200, 0.12);
}
/* ================================
RagnaTrue - Tooltip ItemInfo (BRANCO)
================================ */
.rt-item{
cursor:pointer;
text-decoration:underline dotted;
}
/* Caixa do tooltip */
#rt-tooltip{
position:fixed;
z-index:999999;
max-width:560px;
background:#ffffff; /* FUNDO BRANCO */
color:#1f1f1f;
border:1px solid rgba(0,0,0,0.12);
border-radius:16px;
padding:12px 14px;
box-shadow:0 14px 34px rgba(0,0,0,0.16);
display:none;
font-size:14px;
line-height:1.35;
}
/* Layout: ícone + texto */
#rt-tooltip .rt-top{
display:flex;
gap:18px;
align-items:center; /* centraliza verticalmente */
}
/* Ícone 75x100 */
#rt-tooltip .rt-icon{
width:75px;
height:100px;
flex:0 0 75px;
display:block;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
border-radius:0 !important;
object-fit:contain;
object-position:center;
image-rendering:pixelated;
}
/* Texto */
#rt-tooltip .rt-text{
min-width:0;
flex:1 1 auto;
}
#rt-tooltip .rt-title{
font-weight:900;
margin:0 0 6px 0;
color:#111;
}
#rt-tooltip .rt-body{
color:#222;
}
/* Separador (linhas do RO viram <hr>) */
#rt-tooltip hr{
border:0;
border-top:1px solid rgba(0,0,0,0.12);
margin:10px 0;
}
/* Ajuste pra cores muito neon ficarem legíveis no branco */
#rt-tooltip span[style*="color:#0000CC"],
#rt-tooltip span[style*="color:#0000cc"]{
color:#2f49ff !important;
}
#rt-tooltip span[style*="color:#FF0000"],
#rt-tooltip span[style*="color:#ff0000"]{
color:#d11a2a !important;
}
/* ===== Tooltip: modo colunas quando necessário ===== */
#rt-tooltip.is-cols .rt-top{
align-items:flex-start; /* só no modo colunas */
}
#rt-tooltip .rt-body{
/* default: 1 coluna (normal) */
column-count:1;
column-gap:22px;
}
#rt-tooltip.is-cols .rt-body{
/* o JS vai setar column-count dinamicamente (2 ou 3) */
column-fill:auto;
}
#rt-tooltip.is-compact{
font-size:13px;
line-height:1.28;
}
#rt-tooltip .rt-body hr{
break-after:avoid;
}
/* === Tooltip: modo colunas por ALTURA === */
#rt-tooltip.is-cols .rt-top{
align-items:flex-start;
}
#rt-tooltip .rt-body{
column-count: 1;
column-gap: 22px;
}
/* (opcional) evita ficar largo demais no desktop */
#rt-tooltip.is-cols{
/* JS vai ajustar maxWidth dinamicamente, isso é só "base" */
max-width: 980px;
}
/* ===== Criadores Parceiros: Visual do Streamer ===== */
.criadores-page .rtp-visual-center{
display:flex;
justify-content:center;
margin: 14px 0 22px;
}
.criadores-page .rtp-visual-card{
width: min(360px, 92vw);
padding: 18px 18px 16px;
border-radius: 22px;
background: rgba(245, 242, 255, .75);
border: 1px solid rgba(122, 92, 255, .25);
box-shadow: 0 16px 42px rgba(20, 10, 60, .10);
text-align:center;
backdrop-filter: blur(6px);
}
.criadores-page .rtp-visual-top{
font-weight: 900;
font-size: 15px;
letter-spacing: .2px;
color: rgba(95, 70, 220, .95);
margin-bottom: 8px;
}
.criadores-page .rtp-visual-mini{
margin: 2px 0 10px;
opacity: .95;
}
.criadores-page .rtp-visual-kicker{
font-weight: 800;
font-size: 11px;
letter-spacing: .9px;
text-transform: uppercase;
color: rgba(120, 100, 230, .85);
margin-bottom: 6px;
}
.criadores-page .rtp-visual-name{
font-weight: 900;
font-size: 15px;
color: rgba(35, 25, 80, .92);
margin-bottom: 12px;
text-decoration: underline;
text-decoration-color: rgba(120, 100, 230, .40);
text-underline-offset: 4px;
}
.criadores-page .rtp-visual-sprite{
display:flex;
justify-content:center;
align-items:center;
padding: 6px 0 10px;
}
.criadores-page .rtp-visual-sprite img{
image-rendering: pixelated;
filter: drop-shadow(0 10px 22px rgba(70, 40, 200, .18));
}
.criadores-page .rtp-visual-foot{
font-weight: 700;
font-size: 12px;
color: rgba(95, 80, 170, .92);
margin-top: 6px;
}
/* =========================================
Criadores Parceiros - Cards por Plataforma
(YouTube / Twitch / TikTok)
========================================= */
.rtp-platform{
position:relative;
margin:18px 0;
border-radius:18px;
border:1px solid rgba(120,90,255,.22);
background:linear-gradient(180deg, rgba(120,90,255,.12), rgba(120,90,255,.06));
box-shadow:0 14px 30px rgba(0,0,0,.06);
overflow:hidden;
transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* barrinha lateral suave */
.rtp-platform::before{
content:"";
position:absolute;
left:0; top:0; bottom:0;
width:6px;
background:linear-gradient(180deg, rgba(120,90,255,.70), rgba(120,90,255,.18));
opacity:.55;
}
.rtp-platform:hover{
transform:translateY(-1px);
box-shadow:0 18px 40px rgba(0,0,0,.08);
}
/* header */
.rtp-platform > .rtp-platform-head{
display:flex;
align-items:center;
padding:18px 18px 18px 22px;
padding-right:150px; /* espaço pro botão Mostrar */
box-sizing:border-box;
}
.rtp-platform-left{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}
/* ícone */
.rtp-platform-icon{
width:44px;
height:44px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(120,90,255,.14);
border:1px solid rgba(120,90,255,.22);
font-size:18px;
line-height:1;
}
/* títulos */
.rtp-platform-titles{ min-width:0; }
.rtp-platform-name{
font-weight:900;
font-size:20px;
line-height:1.1;
}
.rtp-platform-desc{
margin-top:3px;
font-size:13px;
opacity:.75;
}
/* conteúdo expandido */
.rtp-platform > .mw-collapsible-content{
padding:0 18px 18px 22px;
}
.rtp-platform > .mw-collapsible-content::before{
content:"";
display:block;
height:1px;
background:rgba(120,90,255,.18);
margin:0 0 14px 0;
}
/* =========================================
Toggle Mostrar/Ocultar (MediaWiki)
========================================= */
.rtp-platform > .mw-collapsible-toggle{
position:absolute !important;
top:50%;
right:14px;
transform:translateY(-50%);
float:none !important;
margin:0 !important;
z-index:5;
}
/* remove os colchetes [ ] */
.rtp-platform .mw-collapsible-toggle-bracket{
display:none !important;
}
/* botão */
.rtp-platform > .mw-collapsible-toggle a{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
background:rgba(120,90,255,.14);
border:1px solid rgba(120,90,255,.24);
font-weight:900;
text-decoration:none !important;
white-space:nowrap;
transition:transform .12s ease, background .12s ease;
}
.rtp-platform > .mw-collapsible-toggle a:hover{
transform:translateY(-1px);
background:rgba(120,90,255,.18);
}
/* opcional: dá um "ar" extra pro grid dentro */
.rtp-platform .rtp-grid{
margin-top:6px;
}
/* Lista simples de criadores dentro do collapsible */
.rtp-list{
display:flex;
flex-direction:column;
gap:10px;
}
.rtp-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
border-radius:14px;
background:rgba(255,255,255,.55);
border:1px solid rgba(120,90,255,.18);
box-shadow:0 10px 20px rgba(0,0,0,.04);
}
.rtp-row-name{
font-weight:900;
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rtp-row-links{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end;
}
/* deixa os links com cara de botão sem precisar usar rtp-btn */
.rtp-row-links a{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:rgba(120,90,255,.12);
border:1px solid rgba(120,90,255,.22);
text-decoration:none !important;
font-weight:800;
font-size:12px;
}
.rtp-row-links a:hover{
background:rgba(120,90,255,.18);
}
/* ===============================
Criadores Parceiros - Benefícios (clean)
=============================== */
.criadores-page .rtp-benefits{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
gap:18px;
margin:14px 0 6px;
}
.criadores-page .rtp-box{
position:relative;
overflow:hidden;
border-radius:18px;
padding:0; /* título vira barra, então o padding vai no conteúdo */
border:1px solid rgba(120,90,255,.22);
background:linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.04));
box-shadow:0 10px 26px rgba(20,10,60,.10);
transition:transform .18s ease, box-shadow .18s ease;
}
.criadores-page .rtp-box.is-creator{ --rtp-acc:120,90,255; }
.criadores-page .rtp-box.is-viewer { --rtp-acc:70,170,255; }
.criadores-page .rtp-box.is-creator{
border-color:rgba(var(--rtp-acc), .24);
background:linear-gradient(180deg, rgba(var(--rtp-acc), .11), rgba(var(--rtp-acc), .04));
}
.criadores-page .rtp-box.is-viewer{
border-color:rgba(var(--rtp-acc), .22);
background:linear-gradient(180deg, rgba(var(--rtp-acc), .10), rgba(var(--rtp-acc), .03));
}
.criadores-page .rtp-box:hover{
transform:translateY(-2px);
box-shadow:0 14px 34px rgba(20,10,60,.14);
}
/* Título como “barra” do card */
.criadores-page .rtp-box-title{
padding:14px 16px;
font-weight:900;
font-size:1.05rem;
border-bottom:1px solid rgba(var(--rtp-acc), .18);
background:linear-gradient(90deg, rgba(var(--rtp-acc), .16), rgba(var(--rtp-acc), .06));
}
/* Conteúdo interno */
.criadores-page .rtp-box .rtp-list{
list-style:disc;
margin:0;
padding:14px 22px 16px 38px; /* recuo bonito pro bullet padrão */
}
.criadores-page .rtp-box .rtp-list li{
margin:10px 0;
line-height:1.35;
}
/* Remove qualquer estilo antigo de “check” caso exista no seu CSS anterior */
.criadores-page .rtp-list li::before{
content:none !important;
}
.rtp-platform-head .rtp-platform-left{
display:flex;
align-items:center; /* centraliza verticalmente */
gap:14px;
}
.rtp-platform-head .rtp-platform-left{
display:flex;
align-items:center;
gap:14px;
}
/* Head vira flex pra alinhar conteúdo + botão de mostrar */
.rtp-platform-head{
display:flex;
align-items:center;
justify-content:space-between;
}
/* Lado esquerdo vira flex: o ::before entra como 1º item */
.rtp-platform-left{
display:flex;
align-items:center;
gap:14px;
}
/* Caixa do ícone (NÃO absoluto, então nunca cobre texto) */
.rtp-platform-left::before{
content:"";
width:64px;
height:64px;
flex:0 0 64px;
border-radius:16px;
border:1px solid rgba(120,90,255,.25);
background-color:rgba(255,255,255,.55);
background-repeat:no-repeat;
background-position:center;
background-size:52px 52px;
}
/* YouTube (usa icon_ytb1.png) */
.rtp-platform.is-yt .rtp-platform-left::before{
background-image:
url("/index.php/Special:Redirect/file/icon_ytb2.png"),
url("/w/index.php/Special:Redirect/file/icon_ytb2.png"),
url("/index.php/Special:FilePath/icon_ytb2.png"),
url("/w/index.php/Special:FilePath/icon_ytb2.png");
}
/* Twitch (troque o nome do arquivo se necessário) */
.rtp-platform.is-tw .rtp-platform-left::before{
background-image:
url("/index.php/Special:Redirect/file/icon_twitch2.png"),
url("/w/index.php/Special:Redirect/file/icon_twitch2.png"),
url("/index.php/Special:FilePath/icon_twitch2.png"),
url("/w/index.php/Special:FilePath/icon_twitch2.png");
}
/* =========================================
Criadores Parceiros — Toggle Mostrar/Ocultar
========================================= */
/* o card vira referência pro botão */
.rtp-platform{
position: relative;
}
/* dá espaço à direita pra não encobrir o conteúdo do header */
.rtp-platform .rtp-platform-head{
padding-right: 150px;
}
/* botão "Mostrar ▸ / Ocultar ▾" */
.rtp-platform .mw-collapsible-toggle{
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(120,90,255,.35);
background: rgba(120,90,255,.10);
font-weight: 800;
font-size: 13px;
letter-spacing: .2px;
text-decoration: none !important;
box-shadow: 0 10px 22px rgba(90,60,255,.10);
}
/* cor do link dentro do toggle */
.rtp-platform .mw-collapsible-toggle a{
color: inherit !important;
text-decoration: none !important;
}
/* remove os colchetes [ ] padrão do MediaWiki */
.rtp-platform .mw-collapsible-toggle-bracket{
display: none;
}
/* hover/active */
.rtp-platform .mw-collapsible-toggle:hover{
background: rgba(120,90,255,.16);
transform: translateY(-50%) scale(1.03);
}
.rtp-platform .mw-collapsible-toggle:active{
transform: translateY(-50%) scale(.99);
}
/* =========================================
RTP Platform — fix do toggle (Mostrar/Ocultar)
Não sobrepor conteúdo quando expandir
========================================= */
/* Grid: [header] [toggle] na 1ª linha, conteúdo na 2ª */
.rtp-platform.mw-collapsible{
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
row-gap: 14px; /* espaço entre header e conteúdo */
}
/* Header fica na coluna 1 */
.rtp-platform .rtp-platform-head{
grid-column: 1;
grid-row: 1;
align-self: center;
margin: 0 !important;
}
/* Conteúdo ocupa a linha inteira abaixo */
.rtp-platform .mw-collapsible-content{
grid-column: 1 / -1;
grid-row: 2;
}
/* O toggle (MW injeta como filho direto do mw-collapsible) vai pra coluna 2 */
.rtp-platform.mw-collapsible > .mw-collapsible-toggle{
grid-column: 2;
grid-row: 1;
align-self: center;
justify-self: end;
/* mata o comportamento padrão do MW */
float: none !important;
position: relative !important;
margin: 0 18px auto 18px !important;
/* visual mais destacado */
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(120,90,255,.35);
background: rgba(120,90,255,.10);
font-weight: 800;
font-size: 13px;
letter-spacing: .2px;
box-shadow: 0 10px 22px rgba(90,60,255,.10);
}
.rtp-platform.mw-collapsible > .mw-collapsible-toggle a{
color: inherit !important;
text-decoration: none !important;
}
/* remove os colchetes [ ] padrão */
.rtp-platform.mw-collapsible > .mw-collapsible-toggle .mw-collapsible-toggle-bracket{
display: none !important;
}
/* ================================
RagnaTrue - Top 3 Global (Tabela)
================================ */
.rt-rewards-table.rt-top3 th,
.rt-rewards-table.rt-top3 td{
vertical-align: middle;
}
/* Centraliza Colocação + Recompensa */
.rt-rewards-table.rt-top3 th:nth-child(1),
.rt-rewards-table.rt-top3 td:nth-child(1),
.rt-rewards-table.rt-top3 th:nth-child(2),
.rt-rewards-table.rt-top3 td:nth-child(2){
text-align: center;
}
/* Pill da colocação (simples e limpo) */
.rt-top3 .rt-place-pill{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 999px;
font-weight: 900;
letter-spacing: .2px;
border: 1px solid rgba(120,90,255,.28);
background: rgba(120,90,255,.08);
}
/* Card da recompensa (tema roxo claro) */
.rt-top3 .rt-rewardbox{
background: linear-gradient(180deg,
rgba(120,90,255,.08),
rgba(120,90,255,.03)
);
border: 1px solid rgba(120,90,255,.20);
box-shadow: 0 10px 22px rgba(40,30,90,.07);
}
.rt-top3 .rt-reward-money{
font-size: 18px;
font-weight: 900;
}
.rt-top3 .rt-reward-extra{
font-weight: 700;
opacity: .9;
}
/* Coluna do vencedor (empilha e centraliza bonitinho) */
.rt-top3 .rt-winner{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.rt-top3 .rt-winner-hint{
font-size: 12px;
opacity: .75;
}
.rt-top3 .rt-winner-name{
font-weight: 900;
}
.rt-top3 .rt-winner img,
.rt-top3 .rt-winner .rt-winner-sprite{
max-width: 90px;
height: auto;
image-rendering: pixelated;
}
/* ================================
Top 3 - cores (Ouro/Prata/Bronze)
================================ */
/* Base (caso esqueça de pôr a variação) */
.rt-top3 .rt-place-pill{
color: #2b1b00;
}
/* OURO (premium mais escuro) */
.rt-top3 .rt-place-pill.is-gold{
color:#1b1407;
border:1px solid rgba(140, 96, 18, .85);
background: linear-gradient(
180deg,
rgba(255, 239, 196, .95) 0%,
rgba(229, 196, 110, .92) 42%,
rgba(167, 118, 30, .90) 78%,
rgba(122, 79, 0, .86) 100%
);
box-shadow:
0 0 0 2px rgba(255,255,255,.65),
0 10px 22px rgba(120, 80, 10, .16),
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 0 rgba(70, 40, 0, .22);
}
/* PRATA (já no padrão “contorno melhor”) */
.rt-top3 .rt-place-pill.is-silver{
color:#101826;
border:1px solid rgba(120,140,175,.80);
background: linear-gradient(
180deg,
rgba(235,242,255,.95) 0%,
rgba(214,226,245,.92) 55%,
rgba(198,213,236,.88) 100%
);
box-shadow:
0 0 0 2px rgba(255,255,255,.70),
0 10px 22px rgba(55, 80, 120, .12),
inset 0 1px 0 rgba(255,255,255,.85),
inset 0 -1px 0 rgba(70, 95, 140, .18);
}
/* BRONZE (cobre/bronze elegante, sem “laranjão”) */
.rt-top3 .rt-place-pill.is-bronze{
color:#1f120a;
border:1px solid rgba(144, 84, 52, .78);
background: linear-gradient(
180deg,
rgba(255, 231, 220, .95) 0%,
rgba(227, 171, 139, .92) 45%,
rgba(176, 105, 70, .90) 80%,
rgba(120, 63, 34, .86) 100%
);
box-shadow:
0 0 0 2px rgba(255,255,255,.65),
0 10px 22px rgba(120, 70, 40, .14),
inset 0 1px 0 rgba(255,255,255,.82),
inset 0 -1px 0 rgba(70, 30, 10, .20);
}
/* ================================
Valor em R$ (pill premium)
================================ */
.rt-reward-money{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 12px;
border-radius:999px;
font-weight:900;
letter-spacing:.2px;
line-height:1;
font-variant-numeric: tabular-nums;
/* texto ouro/âmbar (legível no lilás) */
color:#6f4200;
text-shadow:
0 1px 0 rgba(255,255,255,.75),
0 6px 14px rgba(60,35,0,.18);
/* pill champagne */
background: linear-gradient(180deg,
rgba(255,255,255,.92),
rgba(255,246,224,.78)
);
border: 1px solid rgba(176,118,10,.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -1px 0 rgba(110,70,0,.10),
0 10px 22px rgba(40,30,90,.10);
}
/* Visual do Top (gif) com cantos arredondados */
.rtp-visual-card{
border-radius: 16px; /* ajuste aqui */
overflow: hidden; /* ESSENCIAL pra recortar o gif */
}
/* imagem do arquivo (MediaWiki) */
.rtp-visual-card .rtp-sprite,
.rtp-visual-card .mw-file-element{
border-radius: 16px; /* mesmo valor do card */
display: block; /* evita “bordinha/folga” */
}
/* centraliza toda a premiação dentro da célula */
.rt-reward-cell{
text-align: center;
vertical-align: middle;
}
.rt-reward-center{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
/* =========================================
Pódio / Top3 — Recompensa (Pill + Visual) lado a lado
========================================= */
.rt-rewards-table.rt-top3 tr > td:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: nowrap; /* tenta manter na mesma linha */
padding: 18px 14px;
text-align: center;
font-size: 0; /* mata o "+" e quebras soltas (texto fora de div) */
line-height: 0;
}
/* some com <br> que sobra em algumas linhas */
.rt-rewards-table.rt-top3 tr > td:nth-child(2) br{
display: none;
}
/* garante que os 2 blocos não ocupem 100% de largura */
.rt-rewards-table.rt-top3 tr > td:nth-child(2) .rt-reward-money,
.rt-rewards-table.rt-top3 tr > td:nth-child(2) .rtp-visual-center{
flex: 0 0 auto;
width: auto !important;
margin: 0 !important;
}
/* restaura tamanhos de fonte (porque o td está com font-size:0) */
.rt-rewards-table.rt-top3 .rt-reward-money{
font-size: 18px;
line-height: 1;
}
.rt-rewards-table.rt-top3 .rtp-visual-foot{
font-size: 13px;
line-height: 1.25;
}
/* se algum CSS seu estiver forçando a área do visual a quebrar linha */
.rt-rewards-table.rt-top3 .rtp-visual-center{
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================
Legenda do visual: mais respiro + não cortar a 1ª letra
========================================= */
/* Se você usa a legenda no seu <div class="rtp-visual-foot"> */
.rt-rewards-table.rt-top3 .rtp-visual-foot{
margin-top: 10px !important; /* afasta do gif */
padding: 0 12px 2px !important; /* evita "comer" a 1ª letra */
line-height: 1.25 !important;
text-align: center;
display: inline-block;
}
/* Se você usa caption no próprio [[File:...|...|Asas...]] (vira .thumbcaption) */
.rt-rewards-table.rt-top3 .rtp-visual-card .thumbcaption{
margin-top: 10px !important;
padding: 0 12px 2px !important;
line-height: 1.25 !important;
text-align: center;
}
/* Evita qualquer recorte por overflow de wrapper do thumb */
.rt-rewards-table.rt-top3 .rtp-visual-card,
.rt-rewards-table.rt-top3 .rtp-visual-card .thumbinner{
overflow: visible !important;
}
/* Recompensa inline: pill + "+" + visual */
.rt-top3 td.rt-reward-cell .rt-reward-inline{
display: flex;
align-items: center; /* centraliza vertical */
justify-content: center; /* centraliza no meio da coluna */
gap: 12px;
flex-wrap: wrap; /* no mobile quebra bonito */
}
/* "+" premium (combina com o dourado do money) */
.rt-top3 .rt-reward-plus{
position: relative;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
line-height: 1;
font-weight: 1000;
font-size: 14px;
color: #6b3f00;
background: linear-gradient(180deg,
rgba(255,255,255,.95),
rgba(255,242,220,.85)
);
border: 1px solid rgba(166,110,0,.48);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 8px 16px rgba(40,30,90,.10);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
transform: translateZ(0);
}
/* “Conectores” laterais */
.rt-top3 .rt-reward-plus::before,
.rt-top3 .rt-reward-plus::after{
content:"";
position:absolute;
top:50%;
width: 12px;
height: 1px;
transform: translateY(-50%);
opacity: .9;
background: linear-gradient(90deg,
rgba(166,110,0,0),
rgba(166,110,0,.55),
rgba(166,110,0,0)
);
}
.rt-top3 .rt-reward-plus::before{ left: -14px; }
.rt-top3 .rt-reward-plus::after { right: -14px; }
.rt-top3 .rt-reward-plus:hover{
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 10px 20px rgba(40,30,90,.14);
filter: saturate(1.05);
}
.rt-top3 td.rt-reward-cell .rt-reward-inline{
gap: 14px; /* um pouco mais “respirado” */
flex-wrap: nowrap; /* mantém tudo na mesma linha */
}
@media (max-width: 720px){
.rt-top3 td.rt-reward-cell .rt-reward-inline{
flex-wrap: wrap; /* no mobile ele quebra bonitinho */
justify-content: center;
}
}
/* =========================================
FIX: legenda do visual “comendo” letras
(Top 1 Classe + Expandidas + Top3)
========================================= */
/* garante que nada corte a legenda */
.rtp-visual-card{
overflow: visible !important;
}
/* legenda (texto abaixo do gif) com respiro e sem clipping */
.rtp-visual-card .rtp-visual-foot{
display: block;
margin: 10px auto 0 !important; /* afasta do gif */
padding: 3px 12px 6px !important; /* evita cortar topo/baixo das letras */
line-height: 1.25 !important; /* MUITO importante pro “A” não sumir */
text-indent: 0 !important;
overflow: visible !important;
white-space: normal;
word-break: break-word;
}
/* se algum reset do bloco de recompensa estiver agressivo */
.rt-reward-center,
.rt-reward-cell{
line-height: 1.25;
}
/* ================================
Pets - Tema roxo claro (EV style)
Escopo: .pet-page-light
================================ */
.pet-page-light{
--pet-ink: #1d1536;
--pet-muted:#5c527a;
--pet-line: rgba(120,90,255,.22);
--pet-soft: rgba(120,90,255,.10);
--pet-soft2: rgba(120,90,255,.06);
}
/* Intro box */
.pet-page-light .pet-intro{
max-width: 980px;
margin: 10px auto 18px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--pet-line);
background: linear-gradient(180deg, rgba(120,90,255,.12), rgba(120,90,255,.05));
box-shadow: 0 12px 26px rgba(40,30,90,.08);
color: var(--pet-ink);
}
.pet-page-light .pet-muted{ color: var(--pet-muted); }
.pet-page-light .pet-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:10px;
}
.pet-page-light .pet-chip{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
font-weight:900;
font-size:12px;
color: var(--pet-ink);
background: rgba(255,255,255,.70);
border: 1px solid rgba(120,90,255,.18);
}
/* Categorias grid */
.pet-page-light .pet-cats-grid{
max-width: 980px;
margin: 0 auto 10px;
display:grid;
gap:14px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px){
.pet-page-light .pet-cats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
.pet-page-light .pet-cats-grid{ grid-template-columns: 1fr; }
}
.pet-page-light .pet-cat-card{
padding: 14px;
border-radius: 18px;
border: 1px solid var(--pet-line);
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
box-shadow: 0 12px 26px rgba(40,30,90,.07);
position: relative;
overflow:hidden;
}
/* filet top premium */
.pet-page-light .pet-cat-card::before{
content:"";
position:absolute;
left:0; right:0; top:0;
height:3px;
background: linear-gradient(90deg, rgba(120,90,255,.95), rgba(180,140,255,.95));
opacity:.9;
}
.pet-page-light .pet-cat-title{
font-weight:1000;
color: var(--pet-ink);
font-size: 16px;
margin: 2px 0 10px;
}
/* KV estilo “clean” */
.pet-page-light .pet-kv{
display:grid;
grid-template-columns: 1fr auto;
gap:8px 10px;
}
.pet-page-light .pet-kv .k{
color: var(--pet-muted);
font-weight: 700;
padding: 8px 10px;
border-radius: 14px;
background: rgba(120,90,255,.06);
border: 1px solid rgba(120,90,255,.14);
}
.pet-page-light .pet-kv .v{
color: var(--pet-ink);
font-weight: 1000;
padding: 8px 10px;
border-radius: 14px;
background: rgba(255,255,255,.70);
border: 1px solid rgba(120,90,255,.14);
}
/* Painéis (refino/grade) */
.pet-page-light .pet-panel{
max-width: 980px;
margin: 0 auto 12px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid var(--pet-line);
background: linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.04));
box-shadow: 0 12px 26px rgba(40,30,90,.08);
}
.pet-page-light .pet-panel-title{
font-weight:1000;
color: var(--pet-ink);
margin-bottom: 8px;
}
/* Tabelas mais leves */
.pet-page-light .pet-refine-table{
width:100%;
margin-top:12px;
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
overflow:hidden;
border: 1px solid rgba(120,90,255,.20);
background: rgba(255,255,255,.58);
}
.pet-page-light .pet-refine-table th{
padding: 10px 12px;
text-align:center;
font-weight:1000;
color: var(--pet-ink);
background: rgba(120,90,255,.10);
border-bottom: 1px solid rgba(120,90,255,.18);
}
.pet-page-light .pet-refine-table td{
padding: 10px 12px;
text-align:center;
color: var(--pet-muted);
border-bottom: 1px solid rgba(120,90,255,.14);
}
.pet-page-light .pet-refine-table tr:last-child td{ border-bottom:0; }
/* Lista grade */
.pet-page-light .pet-grade-list{
margin: 12px 0 0;
padding-left: 18px;
color: var(--pet-muted);
}
/* Listas (só espaçamento, não mexe no que você já gostou) */
.pet-page-light .pet-lists{
max-width: 980px;
margin: 0 auto;
display:grid;
gap:14px;
}
/* =========================================================
PETS — Tema Roxo Claro (ev-h)
Escopo seguro: .petlite-page
========================================================= */
.petlite-page{
--p-accent: rgba(120,90,255,.22);
--p-accent2: rgba(120,90,255,.10);
--p-ink: rgba(35,25,95,.92);
--p-muted: rgba(55,45,115,.78);
--p-card: rgba(255,255,255,.72);
--p-shadow: 0 10px 22px rgba(40,30,90,.08);
}
/* sprite do topo */
.petlite-page .petlite-sprite{
margin: 6px auto 10px;
image-rendering: pixelated;
}
/* HERO */
.petlite-page .petlite-hero{
max-width: 920px;
margin: 0 auto 18px;
padding: 18px 20px;
border-radius: 18px;
border: 1px solid var(--p-accent);
background: linear-gradient(180deg, var(--p-accent2), rgba(120,90,255,.05));
box-shadow: var(--p-shadow);
}
.petlite-page .petlite-hero-h{
font-weight: 900;
font-size: 20px;
letter-spacing: .2px;
margin-bottom: 6px;
color: var(--p-ink);
}
.petlite-page .petlite-muted{
color: var(--p-muted);
margin: 0;
line-height: 1.55;
}
.petlite-page .petlite-chips{
display:flex;
flex-wrap:wrap;
gap: 8px;
margin-top: 12px;
}
.petlite-page .petlite-chip{
display:inline-flex;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
color: var(--p-ink);
background: rgba(120,90,255,.08);
border: 1px solid var(--p-accent);
}
/* GRID CATEGORIAS */
.petlite-page .petlite-grid{
max-width: 920px;
margin: 0 auto 16px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
}
.petlite-page .petlite-cat{
padding: 14px 14px 12px;
border-radius: 16px;
border: 1px solid var(--p-accent);
background: var(--p-card);
box-shadow: var(--p-shadow);
}
.petlite-page .petlite-cat-h{
font-weight: 1000;
color: var(--p-ink);
margin-bottom: 10px;
letter-spacing: .2px;
}
.petlite-page .petlite-kv{
display:grid;
grid-template-columns: 1fr auto;
gap: 8px 10px;
align-items:center;
}
.petlite-page .petlite-kv .k{
color: var(--p-muted);
font-weight: 700;
}
.petlite-page .petlite-kv .v{
color: var(--p-ink);
font-weight: 1000;
}
/* PAINÉIS (Refino / Grade) */
.petlite-page .petlite-panel{
max-width: 920px;
margin: 0 auto 16px;
padding: 16px 16px 14px;
border-radius: 18px;
border: 1px solid var(--p-accent);
background: linear-gradient(180deg, rgba(120,90,255,.08), rgba(255,255,255,.62));
box-shadow: var(--p-shadow);
}
.petlite-page .petlite-panel-h{
font-weight: 1000;
color: var(--p-ink);
margin: 0 0 8px;
letter-spacing: .2px;
}
/* TABELAS (claras, sem “darkão”) */
.petlite-page table.petlite-table{
width: 100%;
margin-top: 12px;
border-collapse: separate;
border-spacing: 0;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--p-accent);
background: rgba(255,255,255,.70);
}
.petlite-page table.petlite-table th{
padding: 10px;
text-align: center;
font-weight: 1000;
color: #fff;
background: linear-gradient(180deg, rgba(120,90,255,.78), rgba(120,90,255,.58));
}
.petlite-page table.petlite-table td{
padding: 10px;
text-align: center;
color: var(--p-ink);
background: rgba(120,90,255,.05);
border-top: 1px solid rgba(120,90,255,.14);
}
.petlite-page table.petlite-table tr:nth-child(even) td{
background: rgba(120,90,255,.08);
}
.petlite-page .petlite-notes{
margin: 10px 0 0;
padding-left: 18px;
color: var(--p-muted);
}
.petlite-page .petlite-notes li{ margin: 6px 0; }
/* TABELA LISTA DE PETS (simples e leve) */
.petlite-page table.petlite-list-table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.petlite-page table.petlite-list-table th{
padding: 10px;
text-align: left;
color: var(--p-ink);
font-weight: 1000;
border-bottom: 1px solid rgba(120,90,255,.18);
}
.petlite-page table.petlite-list-table td{
padding: 12px 10px;
vertical-align: middle;
border-bottom: 1px solid rgba(120,90,255,.12);
}
.petlite-page table.petlite-list-table img{
image-rendering: pixelated;
}
/* ================================
Mascotes - ajuste premium nos cards do bp-exp-summary
(isolado pra não afetar Passe)
================================ */
.petcats-sum .bp-exp-card{
border: 1px solid rgba(124,92,255,.22);
background: linear-gradient(180deg, rgba(124,92,255,.08), rgba(255,255,255,.86));
box-shadow: 0 14px 34px rgba(40,30,90,.10);
}
/* título maior + linha divisória */
.petcats-sum .bp-exp-label{
font-size: 14px; /* aumenta */
letter-spacing: .6px;
text-transform: uppercase;
color: #5b2cff;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(124,92,255,.18);
}
/* se quiser uma linha mais “premium”, troca o border-bottom acima por isso:
.petcats-sum .bp-exp-label{
... (mantém tudo)
border-bottom: none;
position: relative;
}
.petcats-sum .bp-exp-label::after{
content:"";
position:absolute;
left:0; right:0;
bottom:-2px;
height:1px;
background: linear-gradient(90deg,
rgba(124,92,255,0),
rgba(124,92,255,.35),
rgba(124,92,255,0));
}
*/
/* espaçamento dos itens */
.petcats-sum .bp-exp-value{
margin-top: 6px;
}
/* Clique-para-copiar (usado no /navi etc.) */
.rt-copycode{
cursor: pointer;
user-select: none;
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid rgba(140, 120, 255, .35);
background: rgba(140, 120, 255, .08);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.rt-copycode:hover{
background: rgba(140, 120, 255, .12);
box-shadow: 0 8px 18px rgba(70, 40, 160, .12);
transform: translateY(-1px);
}
.rt-copycode.is-copied{
box-shadow: 0 10px 24px rgba(70, 40, 160, .18);
}
.rt-copycode.is-copied::after{
content: "Copiado!";
margin-left: 8px;
font-weight: 700;
font-size: 12px;
opacity: .9;
}
/* Ícone "copiar" no começo */
.rt-copycode{
position: relative;
padding-left: 28px; /* espaço pro ícone */
}
.rt-copycode::before{
content: "";
position: absolute;
left: 9px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
opacity: .75;
background-repeat: no-repeat;
background-size: 14px 14px;
/* SVG inline (copy icon) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23785aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
/* Hover deixa o ícone mais evidente */
.rt-copycode:hover::before{
opacity: .95;
}
/* Quando copiar, troca pra "check" */
.rt-copycode.is-copied::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
opacity: .95;
}
code.rt-copycode{
background: transparent;
border: 0;
padding: 0;
}
.rt-copycode{
position:relative;
display:inline-block;
padding:10px 14px 10px 54px; /* texto mais pra direita (mais “respiro”) */
line-height:1.1;
}
.rt-copycode::before{
content:"";
position:absolute;
left:10px;
right:2px;
top:50%;
transform:translateY(-50%);
width:16px;
height:16px;
pointer-events:none;
}
#firstHeading,
.mw-first-heading,
.firstHeading {
display: none !important;
}
/* VIP KV – escopo local */
.vip-kv{
margin-top:10px;
border:1px solid rgba(120,90,255,.18);
border-radius:14px;
background:rgba(120,90,255,.06);
overflow:hidden;
}
.vip-kv .vip-k,
.vip-kv .vip-v{
padding:10px 14px;
border-top:1px solid rgba(120,90,255,.12);
}
.vip-kv .vip-k:nth-child(1),
.vip-kv .vip-v:nth-child(2){
border-top:none;
}
.vip-kv{
display:grid;
grid-template-columns: 220px 1fr;
}
.vip-kv .vip-k{
font-weight:800;
color:#3b2a9b;
background:rgba(120,90,255,.08);
}
.vip-kv .vip-v{
color:#2b2b2b;
}
/* mobile */
@media (max-width: 720px){
.vip-kv{ grid-template-columns: 1fr; }
.vip-kv .vip-k{ border-top:1px solid rgba(120,90,255,.12); }
}
/* ================================
MVP PAGE (isolado) — roxo claro
================================ */
.mvp-page .rt-subtag{
margin: 10px auto 16px;
text-align:center;
font-weight: 800;
letter-spacing:.2px;
color: rgba(55,30,120,.9);
}
/* GRID da Loja (NPC à esquerda + tabela à direita) */
.mvp-page .mvp-shop-grid{
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
align-items: start;
margin: 10px auto 18px;
}
@media (max-width: 860px){
.mvp-page .mvp-shop-grid{ grid-template-columns: 1fr; }
}
/* Card “label” estilo voto (novo) */
.mvp-page .mvp-box{
border: 1px solid rgba(120,90,255,.22);
background: linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.05));
border-radius: 16px;
box-shadow: 0 10px 22px rgba(40,30,90,.08);
overflow: hidden; /* segura bordas da tabela */
}
.mvp-page .mvp-box-label{
text-align: center;
font-weight: 900;
letter-spacing: .6px;
padding: 10px 12px;
color: rgba(45,20,110,.92);
background: linear-gradient(180deg, rgba(120,90,255,.18), rgba(120,90,255,.10));
border-bottom: 1px solid rgba(120,90,255,.22);
}
/* TABELAS novas (ranking e loja) */
.mvp-page table.mvp-table,
.mvp-page table.mvp-shop-table{
width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed; /* evita “explodir” */
background: rgba(255,255,255,.70);
}
.mvp-page table.mvp-table th,
.mvp-page table.mvp-shop-table th{
padding: 12px 10px;
text-align: center;
font-weight: 900;
color: rgba(35,18,80,.95);
background: rgba(120,90,255,.10);
border-bottom: 1px solid rgba(120,90,255,.18);
}
.mvp-page table.mvp-table td,
.mvp-page table.mvp-shop-table td{
padding: 12px 12px;
vertical-align: middle;
border-bottom: 1px solid rgba(120,90,255,.12);
overflow-wrap: anywhere; /* segura textos/links longos */
}
.mvp-page table.mvp-table tr:last-child td,
.mvp-page table.mvp-shop-table tr:last-child td{
border-bottom: 0;
}
.mvp-page table.mvp-table td:nth-child(1){ text-align:center; font-weight:900; }
.mvp-page table.mvp-table td:nth-child(2){ text-align:center; }
/* Se tiver imagem em célula, não estoura */
.mvp-page table.mvp-table img,
.mvp-page table.mvp-shop-table img{
max-width: 100%;
height: auto;
}
/* Pill do /navi copiável dentro do card do NPC (sem quadrado branco) */
.mvp-page .mvp-navi-pill{
display:inline-block;
margin: 8px auto 0;
padding: 8px 4px;
border: 1px solid rgba(120,90,255,.25);
border-radius: 999px;
background: rgba(120,90,255,.08);
font-family: monospace;
font-weight: 800;
letter-spacing: .2px;
}
/* Ajuste fino: se seu ícone ::before do rt-copycode encostar no texto */
.mvp-page .mvp-navi-pill.rt-copycode{
padding-left: 22px; /* cria espaço pro ::before */
}
.mvp-page .mvp-navi-pill.rt-copycode::before{
left: 6px; /* mantém o ícone mais pra esquerda */
}
/* Loja de Voto: só posicionamento lado a lado (não muda visual do NPC) */
.vote-shop-grid{
display: grid;
grid-template-columns: 260px 1fr;
gap: 22px;
align-items: start;
max-width: 1100px;
margin: 8px auto 24px;
}
@media (max-width: 960px){
.vote-shop-grid{
grid-template-columns: 1fr;
}
}
/* === PONTOS DE VOTO: NPC + LOJA lado a lado === */
.vote-shop-grid{
display: grid;
grid-template-columns: minmax(240px, 260px) minmax(0, 1fr);
gap: 22px;
align-items: start;
margin: 10px 0 24px;
}
/* Responsivo: empilha no mobile */
@media (max-width: 900px){
.vote-shop-grid{ grid-template-columns: 1fr; }
.vote-shop-table .eden-quests-card{ max-width: 100% !important; }
}
/* === “Balão” do /navi (mantém o visual premium antigo) === */
.rt-copycode.rt-navi-pill{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px 8px 24px !important; /* espaço pro ícone */
border: 1px solid rgba(120,90,255,.25) !important;
border-radius: 999px !important;
background: rgba(120,90,255,.08) !important;
font-family: monospace;
font-weight: 700;
letter-spacing: .2px;
cursor: pointer;
user-select: none;
position: relative;
}
/* Se o seu ícone de copiar vem do ::before do .rt-copycode, garante que ele não “cole” no texto */
.rt-copycode.rt-navi-pill::before{
left: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
/* ===== Loja Pontos de Voto: tabela com cantos arredondados ===== */
.vote-shop-store .eden-quests-table{
border-collapse: separate !important; /* necessário p/ radius funcionar */
border-spacing: 0 !important;
border-radius: 14px;
overflow: hidden; /* recorta o header e as bordas */
}
/* garante que o “recorte” funcione em todos os browsers */
.vote-shop-store .eden-quests-table{
background: rgba(120,90,255,.06);
}
/* arredonda os cantos no header (primeira linha de TH) */
.vote-shop-store .eden-quests-table tr:first-child th:first-child{
border-top-left-radius: 14px;
}
.vote-shop-store .eden-quests-table tr:first-child th:last-child{
border-top-right-radius: 14px;
}
/* arredonda os cantos na última linha */
.vote-shop-store .eden-quests-table tr:last-child td:first-child{
border-bottom-left-radius: 14px;
}
.vote-shop-store .eden-quests-table tr:last-child td:last-child{
border-bottom-right-radius: 14px;
}
/* ================================
RT • Loja Roxo-Claro (padrão)
(NPC + tabela no mesmo card)
================================ */
.rt-shop-store{
max-width: 980px;
margin: 10px auto 26px;
}
.rt-shop-card{
position: relative;
padding: 22px 22px 18px;
border-radius: 22px;
border: 1px solid rgba(120,90,255,.18);
background: rgba(120,90,255,.06);
box-shadow: 0 16px 34px rgba(20,0,60,.12);
}
.rt-shop-label{
position: absolute;
top: -14px;
left: 18px;
padding: 7px 14px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(120,90,255,1), rgba(92,66,240,1));
color: #fff;
font-weight: 900;
letter-spacing: .7px;
text-transform: uppercase;
font-size: 12px;
box-shadow: 0 12px 26px rgba(60,40,200,.25);
}
.rt-shop-npc{
display: flex;
justify-content: center;
margin: 6px auto 14px;
}
/* mantém o NPC card intacto, só remove “respiros” extras quando estiver dentro da loja */
.rt-shop-npc .bp-bonus-card{
margin: 0 auto 10px !important;
}
/* ===== Tabela arredondada ===== */
table.wikitable.rt-shop-table{
width: 100%;
margin: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
border-radius: 16px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(120,90,255,.22);
}
/* remove heranças do wikitable */
table.wikitable.rt-shop-table,
table.wikitable.rt-shop-table th,
table.wikitable.rt-shop-table td{
box-shadow: none !important;
}
table.wikitable.rt-shop-table th{
padding: 12px 10px;
background: rgba(120,90,255,.12);
color: #2b176b;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .7px;
font-size: 12px;
border-bottom: 1px solid rgba(120,90,255,.22);
}
table.wikitable.rt-shop-table td{
padding: 12px 10px;
border-bottom: 1px solid rgba(120,90,255,.16);
}
/* linhas verticais */
table.wikitable.rt-shop-table th + th,
table.wikitable.rt-shop-table td + td{
border-left: 1px solid rgba(120,90,255,.16);
}
/* última linha sem borda inferior */
table.wikitable.rt-shop-table tr:last-child td{
border-bottom: 0;
}
/* mobile: dá uma enxugada */
@media (max-width: 720px){
.rt-shop-card{ padding: 18px 14px 14px; }
table.wikitable.rt-shop-table th,
table.wikitable.rt-shop-table td{ padding: 10px 8px; }
}
/* ===== Ajustes finos (MVP) ===== */
/* 1) Label menor */
.rt-shop-label{
top: -12px;
padding: 6px 12px;
font-size: 11px;
letter-spacing: .55px;
box-shadow: 0 10px 22px rgba(60,40,200,.20);
}
/* 2) Tabela maior (ocupar mais espaço no card) */
.rt-shop-card{
max-width: 980px; /* garante que o card não fique estreito */
margin: 0 auto;
}
table.wikitable.rt-shop-table{
max-width: 900px; /* “tamanho visual” da tabela */
margin: 10px auto 0 !important;
}
/* se ainda estiver “miúda” por causa do conteúdo, força colunas mais largas */
table.wikitable.rt-shop-table th,
table.wikitable.rt-shop-table td{
min-width: 140px;
}
table.wikitable.rt-shop-table th:first-child,
table.wikitable.rt-shop-table td:first-child{
min-width: 260px; /* ITEM mais largo */
}
table.wikitable.rt-shop-table{ max-width: none; width: 100%; }
/* ================================
RT - Loja (colapsáveis abaixo do NPC)
================================ */
.eden-page .rt-shop-sections{
max-width: 920px;
margin: 14px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.eden-page .rt-shop-coll{
position: relative;
width: 100%;
border: 1px solid rgba(120,90,255,.28);
border-radius: 18px;
overflow: hidden;
background: linear-gradient(180deg, rgba(120,90,255,.16), rgba(120,90,255,.06));
box-shadow: 0 18px 40px rgba(40,10,120,.10);
padding-top: 46px; /* altura da “barra” */
}
/* “barra” (título do colapsável) */
.eden-page .rt-shop-coll::before{
content: attr(data-badge);
position: absolute;
top: 0; left: 0; right: 0;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
letter-spacing: .8px;
text-transform: uppercase;
color: rgba(40, 10, 120, .95);
background: rgba(120,90,255,.10);
border-bottom: 1px solid rgba(120,90,255,.22);
}
/* botão Mostrar/Ocultar (centralizado verticalmente) */
.eden-page .rt-shop-coll .mw-collapsible-toggle{
position: absolute;
top: 0;
right: 10px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
line-height: 1;
}
.eden-page .rt-shop-coll .mw-collapsible-toggle a{
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(120,90,255,.30);
background: rgba(120,90,255,.12);
color: rgba(40, 10, 120, .95);
text-decoration: none !important;
}
/* conteúdo */
.eden-page .rt-shop-coll .mw-collapsible-content{
padding: 12px;
}
/* tabela com cantos arredondados dentro do colapsível (sem “explodir”) */
.eden-page .rt-shop-coll table.eden-quests-table{
width: 100% !important;
margin: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 14px;
overflow: hidden;
}
/* garante cantos arredondados nos cantos da tabela */
.eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:first-child{ border-top-left-radius: 14px; }
.eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:last-child{ border-top-right-radius: 14px; }
.eden-page .rt-shop-coll table.eden-quests-table tr:last-child td:first-child{ border-bottom-left-radius: 14px; }
.eden-page .rt-shop-coll table.eden-quests-table tr:last-child td:last-child{ border-bottom-right-radius: 14px; }
/* ================================
Pacotes de Lançamento (3 cards)
================================ */
.launch-pack-page .launch-pack-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
max-width:860px;
margin:12px auto 18px;
}
@media (max-width: 980px){
.launch-pack-page .launch-pack-grid{
grid-template-columns:1fr;
}
}
.launch-pack-page .launch-pack-card{
background:rgba(120,90,255,.06);
border:1px solid rgba(120,90,255,.18);
border-radius:18px;
box-shadow:0 12px 26px rgba(30, 20, 80, .10);
padding:14px 14px 12px;
position:relative;
overflow:hidden;
}
.launch-pack-page .launch-pack-chip{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:rgba(120,90,255,.12);
border:1px solid rgba(120,90,255,.22);
font-weight:900;
letter-spacing:.3px;
font-size:12px;
color:#2b1b66;
}
.launch-pack-page .launch-pack-title{
margin:10px 0 2px;
font-weight:900;
font-size:18px;
color:#1b123f;
}
.launch-pack-page .launch-pack-price{
margin:4px 0 8px;
font-size:16px;
}
.launch-pack-page .launch-pack-sub{
opacity:.85;
margin:0 0 10px;
}
.launch-pack-page .launch-pack-badge{
display:inline-block;
margin-left:8px;
padding:4px 9px;
border-radius:999px;
font-size:12px;
font-weight:800;
background:#5b3df5;
color:#fff;
vertical-align:middle;
}
.launch-pack-page .launch-pack-list ul{
margin:8px 0 10px 18px;
}
.launch-pack-page .launch-pack-actions{
display:flex;
flex-direction:column;
gap:8px;
margin-top:10px;
}
.launch-pack-page .launch-pack-note{
font-size:12.5px;
opacity:.85;
}
/* Colapsáveis */
.launch-pack-page .launch-pack-coll{
margin-top:10px;
padding-top:6px;
}
/* Tabela comparativa com bordas arredondadas */
.launch-pack-page .launch-pack-table{
border-collapse:separate !important;
border-spacing:0 !important;
overflow:hidden;
border-radius:14px;
}
.launch-pack-page .launch-pack-table th,
.launch-pack-page .launch-pack-table td{
border-color:rgba(120,90,255,.22) !important;
}
/* FAQ */
.launch-pack-page .launch-pack-faq{
max-width:860px;
margin:10px auto 0;
background:rgba(120,90,255,.06);
border:1px solid rgba(120,90,255,.18);
border-radius:16px;
padding:10px 12px;
}
/* =========================================
Pacotes — Cards Premium (tema roxo claro)
========================================= */
.lp2-wrap{
max-width: 1050px;
margin: 18px auto 28px;
padding: 18px;
border-radius: 26px;
background: linear-gradient(180deg,
rgba(120,90,255,.10),
rgba(120,90,255,.06)
);
border: 1px solid rgba(120,90,255,.20);
box-shadow: 0 18px 48px rgba(0,0,0,.08);
}
.lp2-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
@media (max-width: 980px){
.lp2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
.lp2-grid{ grid-template-columns: 1fr; }
}
/* Card base */
.lp2-card{
position:relative;
border-radius: 22px;
overflow:hidden;
background: rgba(255,255,255,.82);
border: 1px solid rgba(120,90,255,.22);
box-shadow:
0 18px 44px rgba(0,0,0,.10),
0 0 0 1px rgba(120,90,255,.06);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display:flex;
flex-direction:column;
min-height: 520px;
transition: transform .16s ease, box-shadow .16s ease;
}
.lp2-card:hover{
transform: translateY(-3px);
box-shadow:
0 26px 64px rgba(0,0,0,.13),
0 0 0 1px rgba(120,90,255,.10);
}
/* Header “faixa” */
.lp2-head{
display:flex;
align-items:center;
gap: 12px;
padding: 14px 14px 12px;
border-bottom: 1px solid rgba(0,0,0,.06);
background: linear-gradient(135deg, rgba(120,90,255,.10), rgba(255,255,255,.30));
}
.lp2-mascot{
width: 48px;
height: 48px;
flex: 0 0 48px;
object-fit: contain;
image-rendering: pixelated;
filter: drop-shadow(0 10px 16px rgba(0,0,0,.10));
}
.lp2-hmeta{ min-width:0; flex:1 1 auto; }
.lp2-tier{
font-weight: 950;
font-size: 18px;
line-height: 1.1;
margin: 0;
color: #141428;
}
.lp2-price{
font-weight: 900;
font-size: 18px;
margin: 3px 0 0;
color: #1b1b2e;
}
/* Corpo */
.lp2-body{
padding: 12px 14px 14px;
display:flex;
flex-direction:column;
gap: 10px;
flex: 1 1 auto;
}
.lp2-sub{
font-size: 12.5px;
color: rgba(20,20,35,.68);
}
/* Lista com ícones */
.lp2-list{
margin: 6px 0 0;
padding: 0;
list-style: none;
display:grid;
gap: 8px;
}
.lp2-list li{
display:flex;
align-items:flex-start;
gap: 10px;
line-height: 1.25;
color: #1c1c2c;
font-size: 13.5px;
}
.lp2-list .lp2-ico{
width: 18px;
height: 18px;
flex: 0 0 18px;
margin-top: 1px;
filter: drop-shadow(0 10px 16px rgba(0,0,0,.06));
}
/* Rodapé com botão */
.lp2-foot{
margin-top:auto;
padding: 12px 14px 14px;
border-top: 1px solid rgba(0,0,0,.06);
display:flex;
flex-direction:column;
gap: 10px;
}
.lp2-btn{
display:block;
text-align:center;
padding: 12px 14px;
border-radius: 14px;
font-weight: 950;
letter-spacing: .2px;
color: #fff !important;
text-decoration: none !important;
background: linear-gradient(90deg, rgba(120,90,255,1), rgba(170,120,255,1));
box-shadow: 0 16px 32px rgba(120,90,255,.26);
border: 1px solid rgba(120,90,255,.22);
}
.lp2-btn:hover{
filter: brightness(1.02);
transform: translateY(-1px);
}
.lp2-note{
text-align:center;
font-size: 11.5px;
color: rgba(20,20,35,.62);
}
/* =========================
Variações por tier
========================= */
.lp2-card.is-bronze .lp2-head{
background: linear-gradient(135deg, rgba(195,130,80,.30), rgba(255,255,255,.38));
}
.lp2-card.is-bronze .lp2-btn{
background: linear-gradient(90deg, rgba(160,92,52,1), rgba(195,130,80,1));
box-shadow: 0 16px 32px rgba(195,130,80,.22);
}
.lp2-card.is-silver .lp2-head{
background: linear-gradient(135deg, rgba(145,160,178,.34), rgba(255,255,255,.40));
}
.lp2-card.is-silver .lp2-btn{
background: linear-gradient(90deg, rgba(105,120,140,1), rgba(145,160,178,1));
box-shadow: 0 16px 32px rgba(145,160,178,.20);
}
.lp2-card.is-gold .lp2-head{
background: linear-gradient(135deg, rgba(215,170,70,.32), rgba(255,255,255,.40));
}
.lp2-card.is-gold .lp2-btn{
background: linear-gradient(90deg, rgba(185,130,30,1), rgba(215,170,70,1));
box-shadow: 0 16px 32px rgba(215,170,70,.22);
}
/* (Opcional) destaque no card do meio */
.lp2-card.is-featured{
box-shadow:
0 28px 72px rgba(0,0,0,.14),
0 0 0 1px rgba(120,90,255,.12),
0 0 44px rgba(120,90,255,.18);
}
.lp2-badge{
position:absolute;
top: 12px;
right: 12px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(120,90,255,.12);
border: 1px solid rgba(120,90,255,.22);
color: #2b2370;
font-weight: 950;
font-size: 12px;
}
/* ================================
Launch Packs (lp2-*) — Premium Cards (roxo-claro)
================================ */
.launch-pack-page .lp2-wrap{
max-width: 1060px; /* <- “engrossa” o conjunto */
margin: 18px auto 26px;
padding: 18px;
background: linear-gradient(180deg, rgba(120,90,255,.14), rgba(120,90,255,.07));
border: 1px solid rgba(120,90,255,.26);
border-radius: 30px;
box-shadow: 0 26px 64px rgba(35, 18, 90, .18);
}
.launch-pack-page .lp2-grid{
display: grid;
gap: 18px;
/* <- “engrossa” os cards: cada coluna não fica magrinha */
grid-template-columns: repeat(3, minmax(290px, 1fr));
align-items: stretch;
}
@media (max-width: 980px){
.launch-pack-page .lp2-grid{
grid-template-columns: repeat(2, minmax(280px, 1fr));
}
}
@media (max-width: 640px){
.launch-pack-page .lp2-wrap{ padding: 14px; }
.launch-pack-page .lp2-grid{
grid-template-columns: 1fr;
}
}
/* Card base */
.launch-pack-page .lp2-card{
position: relative;
background: rgba(255,255,255,.94);
border: 1px solid rgba(120,90,255,.24);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 44px rgba(25, 10, 60, .12);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.launch-pack-page .lp2-card:hover{
transform: translateY(-2px);
box-shadow: 0 22px 58px rgba(25, 10, 60, .16);
border-color: rgba(120,90,255,.34);
}
/* Head */
.launch-pack-page .lp2-tier{
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
font-weight: 900;
background: rgba(120,90,255,.10);
border: 1px solid rgba(120,90,255,.20);
color: #24124f;
}
.launch-pack-page .lp2-price{
font-weight: 900;
letter-spacing: .2px;
color: #24124f;
}
/* Body/lista */
.launch-pack-page .lp2-body{
padding: 14px 18px 18px;
}
.launch-pack-page .lp2-sub{
font-size: 12.5px;
opacity: .8;
margin-bottom: 10px;
}
.launch-pack-page .lp2-list{
margin: 0;
padding-left: 0;
list-style: none;
display: grid;
gap: 8px;
}
.launch-pack-page .lp2-list li{
display: flex;
align-items: center;
gap: 8px;
line-height: 1.25;
}
.launch-pack-page .lp2-ico{
width: 18px;
height: 18px;
image-rendering: pixelated;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
/* Featured (se você usar is-featured no Prata, por ex.) */
.launch-pack-page .lp2-card.is-featured{
transform: translateY(-4px);
border-color: rgba(120,90,255,.42);
box-shadow: 0 26px 74px rgba(25, 10, 60, .18);
}
/* ====== Tiers (cores do topo + “tint” do chip) ====== */
.launch-pack-page .lp2-card.is-silver{
--lp2-accent: linear-gradient(90deg, #AEB8D3, #E9EEFF);
--lp2-glow: rgba(160, 180, 220, .35);
}
.launch-pack-page .lp2-card.is-silver .lp2-tier{
background: rgba(180,190,220,.22);
border-color: rgba(160,170,210,.38);
}
.launch-pack-page .lp2-card.is-gold{
--lp2-accent: linear-gradient(90deg, #F3C55C, #FFE1A3);
--lp2-glow: rgba(255, 205, 90, .28);
}
.launch-pack-page .lp2-card.is-gold .lp2-tier{
background: rgba(245, 205, 120, .24);
border-color: rgba(230, 175, 70, .40);
}
.launch-pack-page .lp2-card.is-bronze{
--lp2-accent: linear-gradient(90deg, #C98A63, #F2C0A3);
--lp2-glow: rgba(210, 140, 90, .26);
}
.launch-pack-page .lp2-card.is-bronze .lp2-tier{
background: rgba(210, 150, 120, .22);
border-color: rgba(190, 120, 85, .38);
}
/* ===== Launch Pack (lp2) — CONTRASTE + FOOTER ===== */
/* Barra do topo mais destacada */
.launch-pack-page .lp2-card::before{
height: 16px; /* mais presença */
background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff));
box-shadow:
0 12px 32px var(--lp2-glow, rgba(120,90,255,.32)),
inset 0 -1px 0 rgba(255,255,255,.25);
}
/* “Gloss” mais discreto (pra não lavar a cor) */
.launch-pack-page .lp2-card::after{
height: 16px;
background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
mix-blend-mode: normal;
opacity: .55;
}
/* Tier e preço com contraste forte e leve “contorno” */
.launch-pack-page .lp2-tier,
.launch-pack-page .lp2-price{
color: var(--lp2-on, #1f1f1f);
text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
/* Tier vira “badge” mais premium */
.launch-pack-page .lp2-tier{
background: rgba(255,255,255,.70);
border: 1px solid rgba(0,0,0,.06);
box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
/* Preço mais forte */
.launch-pack-page .lp2-price{
font-weight: 950;
letter-spacing: .3px;
}
/* FOOTER BAR (faixa no fim do card) */
.launch-pack-page .lp2-foot{
margin-top: 14px;
padding: 12px 14px;
border-top: 1px solid rgba(0,0,0,.06);
background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff));
color: var(--lp2-footOn, #fff);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
border-radius: 0 0 22px 22px; /* acompanha o card */
box-shadow: 0 -10px 26px var(--lp2-glow, rgba(120,90,255,.22));
}
.launch-pack-page .lp2-foot-price{
font-weight: 950;
letter-spacing: .2px;
}
.launch-pack-page .lp2-foot-note{
font-size: 12px;
opacity: .92;
white-space: nowrap;
}
/* ====== Tiers (cores MAIS contrastadas) ====== */
/* PRATA: base mais “grafite frio”, texto branco */
.launch-pack-page .lp2-card.is-silver{
--lp2-accent: linear-gradient(90deg, #5E6A86, #9BA9C9);
--lp2-glow: rgba(110, 130, 175, .30);
--lp2-headTint: rgba(130, 150, 190, .12);
--lp2-on: #111827;
--lp2-footOn: #ffffff;
}
/* OURO: dourado mais “rico” + marrom pra contraste */
.launch-pack-page .lp2-card.is-gold{
--lp2-accent: linear-gradient(90deg, #C9961C, #F1C46B);
--lp2-glow: rgba(205, 150, 25, .22);
--lp2-headTint: rgba(245, 205, 120, .16);
--lp2-on: #2a1b06;
--lp2-footOn: #2a1b06; /* fica premium: texto escuro no ouro */
}
/* BRONZE: cobre mais profundo */
.launch-pack-page .lp2-card.is-bronze{
--lp2-accent: linear-gradient(90deg, #8E4F33, #D39A75);
--lp2-glow: rgba(150, 85, 55, .22);
--lp2-headTint: rgba(210, 150, 120, .14);
--lp2-on: #24110b;
--lp2-footOn: #ffffff;
}
/* =========================================
Pets — OVERRIDE Roxo Claro (FORÇADO)
Ativa com: <div class="pet-page is-light">
Cole DEPOIS do CSS atual de pets
========================================= */
.pet-page.is-light{
--pet-ink:#1f1633;
--pet-muted:#5a4a7c;
--pet-surface:rgba(255,255,255,.78);
--pet-surface-2:rgba(255,255,255,.92);
--pet-border:rgba(120,90,255,.22);
--pet-line:rgba(120,90,255,.16);
--pet-shadow:0 18px 44px rgba(44,17,88,.14);
}
/* Barras (drops-inline) — remove o "pesado" e aplica claro */
.pet-page.is-light .drops-inline{
background:
radial-gradient(1200px 220px at 50% 0%,
rgba(120,90,255,.18) 0%,
rgba(120,90,255,.08) 55%,
rgba(255,255,255,0) 100%),
linear-gradient(180deg,
rgba(255,255,255,.70),
rgba(120,90,255,.06)) !important;
border:1px solid var(--pet-border) !important;
border-radius:22px !important;
box-shadow:var(--pet-shadow) !important;
color:var(--pet-ink) !important;
}
/* Badge do data-badge (alguns CSS usam :before, outros ::before) */
.pet-page.is-light .drops-inline:before,
.pet-page.is-light .drops-inline::before{
background:linear-gradient(180deg,
rgba(255,255,255,.78),
rgba(255,255,255,.45)) !important;
border:1px solid rgba(120,90,255,.22) !important;
color:var(--pet-ink) !important;
box-shadow:0 10px 24px rgba(44,17,88,.10) !important;
}
/* Toggle expandir/ocultar (botão) */
.pet-page.is-light .drops-inline .mw-collapsible-toggle,
.pet-page.is-light .drops-inline .mw-collapsible-toggle a{
color:var(--pet-ink) !important;
}
.pet-page.is-light .drops-inline .mw-collapsible-toggle{
background:linear-gradient(180deg,
rgba(255,255,255,.78),
rgba(255,255,255,.45)) !important;
border:1px solid rgba(120,90,255,.22) !important;
border-radius:999px !important;
padding:6px 12px !important;
box-shadow:0 10px 24px rgba(44,17,88,.10) !important;
}
/* Área do conteúdo (onde entra a tabela) */
.pet-page.is-light .drops-inline .mw-collapsible-content{
background:var(--pet-surface) !important;
border:1px solid rgba(120,90,255,.14) !important;
border-radius:18px !important;
padding:14px !important;
margin:12px !important;
}
/* Tabela clara */
.pet-page.is-light .pet-list-table{
width:100% !important;
margin:0 !important;
border-collapse:separate !important;
border-spacing:0 !important;
overflow:hidden !important;
background:var(--pet-surface-2) !important;
border:1px solid rgba(120,90,255,.16) !important;
border-radius:16px !important;
color:var(--pet-ink) !important;
}
/* Cabeçalho */
.pet-page.is-light .pet-list-table th{
background:linear-gradient(180deg,
rgba(120,90,255,.18),
rgba(120,90,255,.10)) !important;
color:var(--pet-ink) !important;
font-weight:900 !important;
text-align:center !important;
padding:12px 10px !important;
border-bottom:1px solid var(--pet-line) !important;
}
/* Células */
.pet-page.is-light .pet-list-table td{
background:transparent !important;
color:var(--pet-ink) !important;
padding:12px 10px !important;
border-bottom:1px solid rgba(120,90,255,.12) !important;
border-right:1px solid rgba(120,90,255,.10) !important;
vertical-align:middle !important;
}
.pet-page.is-light .pet-list-table td:last-child,
.pet-page.is-light .pet-list-table th:last-child{
border-right:0 !important;
}
/* Zebra suave */
.pet-page.is-light .pet-list-table tr:nth-child(even) td{
background:rgba(120,90,255,.04) !important;
}
/* Links (se tiver) */
.pet-page.is-light a{
color:#3f3bd9 !important;
}
/* Pixel art nítida */
.pet-page.is-light .pet-list-table img{
image-rendering:pixelated;
}
/* =========================================
PETS (tema roxo-claro) — pill + tabela interna
Alvo: <div class="pet-page is-light"> ... drops-inline is-pet*
========================================= */
.pet-page.is-light .drops-inline{
/* base clara */
background: linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%) !important;
border: 1px solid rgba(120,90,230,.22) !important;
border-radius: 22px !important;
box-shadow: 0 14px 34px rgba(35,12,70,.10) !important;
}
/* se você tiver algum ::after antigo fazendo “glow feio”, desliga */
.pet-page.is-light .drops-inline::after{
content: none !important;
}
/* ====== VARIAÇÃO POR CATEGORIA (só muda a PILL) ====== */
.pet-page.is-light .drops-inline.is-pet120{ --pet-pill1:#1f0b4d; --pet-pill2:#5a2bd6; }
.pet-page.is-light .drops-inline.is-pet60 { --pet-pill1:#151241; --pet-pill2:#3a43d2; }
.pet-page.is-light .drops-inline.is-pet30 { --pet-pill1:#1b0f3f; --pet-pill2:#7a35d8; }
.pet-page.is-light .drops-inline.is-pet10 { --pet-pill1:#2a1552; --pet-pill2:#9a57ff; }
/* ====== PILL (badge do data-badge) ======
(assumindo que seu drops-inline usa ::before pra renderizar o badge)
*/
.pet-page.is-light .drops-inline::before{
background: linear-gradient(180deg, var(--pet-pill2), var(--pet-pill1)) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.28) !important;
box-shadow: 0 10px 18px rgba(30,10,60,.22) !important;
letter-spacing: .10em !important;
text-transform: uppercase !important;
}
/* Toggle [ EXPANDIR / OCULTAR ] */
.pet-page.is-light .drops-inline .mw-collapsible-toggle{
background: rgba(255,255,255,.65) !important;
border: 1px solid rgba(120,90,230,.28) !important;
border-radius: 999px !important;
box-shadow: 0 8px 16px rgba(35,12,70,.10) !important;
}
.pet-page.is-light .drops-inline .mw-collapsible-toggle a,
.pet-page.is-light .drops-inline .mw-collapsible-toggle{
color: #3a1a78 !important;
font-weight: 800 !important;
}
/* ====== “CAIXA” INTERNA DA TABELA ====== */
.pet-page.is-light .drops-inline .mw-collapsible-content{
background: rgba(255,255,255,.55) !important;
border: 1px solid rgba(120,90,230,.18) !important;
border-radius: 18px !important;
padding: 14px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55) !important;
}
/* ====== TABELA (roxo claro, sem zebra) ====== */
.pet-page.is-light .pet-list-table{
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: #f7f3ff !important;
border: 1px solid rgba(120,90,230,.30) !important;
border-radius: 16px !important;
overflow: hidden !important;
}
/* header */
.pet-page.is-light .pet-list-table th{
background: linear-gradient(180deg, rgba(120,90,230,.18), rgba(120,90,230,.12)) !important;
color: #1e123a !important;
font-weight: 900 !important;
border-bottom: 1px solid rgba(120,90,230,.28) !important;
border-right: 1px solid rgba(120,90,230,.22) !important;
}
.pet-page.is-light .pet-list-table th:last-child{ border-right: 0 !important; }
/* cells */
.pet-page.is-light .pet-list-table td{
background: #f7f3ff !important; /* tudo igual (sem zebra) */
color: #1f1f1f !important;
border-bottom: 1px solid rgba(120,90,230,.22) !important;
border-right: 1px solid rgba(120,90,230,.18) !important;
}
.pet-page.is-light .pet-list-table td:last-child{ border-right: 0 !important; }
.pet-page.is-light .pet-list-table tr:last-child td{ border-bottom: 0 !important; }
/* mata qualquer zebra herdado */
.pet-page.is-light .pet-list-table tr:nth-child(even) td,
.pet-page.is-light .pet-list-table tr:nth-child(odd) td{
background: #f7f3ff !important;
}
/* ================================
Launch Packs (lp2) - Premium
================================ */
.lp2-wrap{
max-width: 980px;
margin: 10px auto 0;
padding: 18px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(160,140,255,.20), rgba(160,140,255,.10));
border: 1px solid rgba(120,95,230,.25);
box-shadow: 0 22px 70px rgba(40, 20, 80, .12);
}
.lp2-grid{
display: grid;
grid-template-columns: repeat(3, minmax(240px, 1fr));
gap: 16px;
align-items: stretch;
}
.lp2-card{
display: flex; /* <<< isso fixa o footer */
flex-direction: column; /* <<< */
overflow: hidden; /* <<< garante borda certinha */
border-radius: 22px;
background: #fff;
border: 1px solid rgba(120,95,230,.22);
box-shadow: 0 16px 44px rgba(50, 30, 110, .14);
}
/* Topo vira “faixa imagem” */
.lp2-head{
padding: 0;
margin: 0;
background: none;
border-bottom: 1px solid rgba(120,95,230,.18);
}
/* MediaWiki costuma colocar wrapper <a> e <img class="mw-file-element"> */
.lp2-head a{
display: block;
line-height: 0;
}
.lp2-head .mw-file-element,
.lp2-headimg{
display: block;
width: 100% !important;
height: auto !important;
}
/* Garantir cantos do banner batendo com o card */
.lp2-head .mw-file-element{
border-radius: 22px 22px 0 0;
}
/* Corpo cresce e empurra o footer pra baixo */
.lp2-body{
flex: 1 1 auto;
padding: 14px 16px 10px;
}
.lp2-sub{
font-weight: 800;
margin: 6px 0 10px;
opacity: .95;
}
.lp2-list{
margin: 0;
padding: 0;
list-style: none;
}
.lp2-list li{
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px dashed rgba(120,95,230,.18);
}
.lp2-list li:last-child{
border-bottom: 0;
}
/* Footer com cor por tier (premium, mas claro) */
.lp2-card.is-bronze .lp2-foot{
background: linear-gradient(180deg, rgba(196,120,70,.20), rgba(196,120,70,.38));
}
.lp2-card.is-silver .lp2-foot{
background: linear-gradient(180deg, rgba(120,140,170,.20), rgba(120,140,170,.38));
}
.lp2-card.is-gold .lp2-foot{
background: linear-gradient(180deg, rgba(220,175,80,.22), rgba(220,175,80,.44));
}
/* “featured” dá um glow leve */
.lp2-card.is-featured{
box-shadow:
0 18px 52px rgba(60, 40, 140, .20),
0 0 0 2px rgba(150,120,255,.18);
transform: translateY(-2px);
}
/* Responsivo */
@media (max-width: 900px){
.lp2-grid{ grid-template-columns: 1fr; }
.lp2-wrap{ padding: 14px; }
}
/* Topo (banner) preencher 100% do header */
.lp2-card{ overflow:hidden; } /* garante que o corte respeita as bordas */
.lp2-card{
--lp2-head-h: 140px; /* <-- ajuste aqui (ex: 120 / 140 / 160) */
}
.lp2-head{
padding: 0 !important;
margin: 0 !important;
height: var(--lp2-head-h);
position: relative;
}
.lp2-head a{
display:block;
width:100%;
height:100%;
line-height:0;
}
.lp2-head .mw-file-element,
.lp2-headimg{
display:block;
width:100% !important;
height:100% !important; /* <<< aqui é o pulo do gato */
object-fit: cover; /* <<< preenche o topo inteiro */
object-position: center; /* centraliza o corte */
border-radius: 22px 22px 0 0;
}
/* ==============================
LP2 – Banner colado no topo (sem “fundinho”)
============================== */
/* garante que nada vaza pra fora das bordas arredondadas */
.lp2-card{
overflow: hidden;
}
/* se o seu card tem padding, esse é o “culpado” do espaço acima do banner.
Ajuste o valor até sumir 100% (normalmente 14px / 16px). */
.lp2-card{
--lp2-pad: 4px; /* <<< ajuste aqui se necessário */
}
/* faz o topo “invadir” o padding do card e encostar na borda */
.lp2-head{
margin-top: calc(var(--lp2-pad) * -1) !important;
margin-left: calc(var(--lp2-pad) * -1) !important;
margin-right: calc(var(--lp2-pad) * -1) !important;
padding: 0 !important;
}
/* mantém o banner preenchendo tudo */
.lp2-head a{
display:block;
width:100%;
height:100%;
line-height:0;
}
.lp2-head .mw-file-element,
.lp2-headimg{
display:block;
width:100% !important;
height:100% !important;
object-fit: cover;
object-position: center;
}
.lp2-list li:last-child{
border-bottom: 0 !important;
}
.lp2-foot{
border-top: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative;
z-index: 2;
}
/* =========================================
LP2 – Fade infinito no rodapé (sem linha)
+ Header image full-width
========================================= */
/* MediaWiki costuma envolver a imagem em <a class="image"> */
.lp2-card .lp2-head a.image{
display: block;
}
.lp2-card .lp2-head .lp2-headimg{
display: block;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
/* Base do card */
.lp2-card{
position: relative;
overflow: hidden; /* necessário pro fade “sumir” nas quinas */
}
/* Cores do fade por tier (RGB pra usar com alpha) */
.lp2-card.is-bronze{ --lp2-fade-rgb: 196,126,86; }
.lp2-card.is-silver{ --lp2-fade-rgb: 140,158,190; }
.lp2-card.is-gold { --lp2-fade-rgb: 231,188,86; }
/* Empurra o conteúdo pra não encostar no fade */
.lp2-card .lp2-body{
padding-bottom: 110px; /* ajusta aqui se quiser mais/menos “área de fade” */
position: relative;
z-index: 2;
}
/* O foot vira só o overlay do fade (SEM linha, SEM corte) */
.lp2-card .lp2-foot{
position: absolute;
left: 0; right: 0; bottom: 0;
height: 130px; /* altura total do fade */
pointer-events: none;
z-index: 1;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: linear-gradient(
to top,
rgba(var(--lp2-fade-rgb), 0.42) 0%,
rgba(var(--lp2-fade-rgb), 0.22) 35%,
rgba(var(--lp2-fade-rgb), 0.10) 60%,
rgba(255,255,255, 0.00) 100%
) !important;
}
/* Se tiver “linha” vinda do último item da lista */
.lp2-card .lp2-list li:last-child{
border-bottom: 0 !important;
}
/* =========================================================
Grupo Éden / Turn In — Loja no estilo "Loja Pontos MVP"
Escopo: .eden-loja-mvp
========================================================= */
.eden-loja-mvp{
position: relative;
padding: 22px 18px 18px;
border-radius: 26px;
background: rgba(140,110,240,.10);
border: 1px solid rgba(140,110,240,.25);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.eden-loja-mvp .eden-loja-chip{
position: absolute;
top: -14px;
left: 18px;
padding: 6px 14px;
border-radius: 999px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
font-size: 12px;
color: #fff;
background: rgba(105,70,230,.95);
box-shadow: 0 10px 18px rgba(105,70,230,.25);
}
.eden-loja-mvp .eden-loja-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
align-items: stretch;
}
/* Card/Seção */
.eden-loja-mvp .eden-loja-sec{
border-radius: 22px;
background: rgba(255,255,255,.35);
border: 1px solid rgba(140,110,240,.22);
overflow: hidden;
}
/* Cabeçalho igual o "UTILIDADES / EQUIPAMENTOS" */
.eden-loja-mvp .eden-loja-sec > .loja-card-title{
padding: 14px 16px;
text-align: center;
font-weight: 900;
letter-spacing: .10em;
text-transform: uppercase;
background: rgba(140,110,240,.18);
border-bottom: 1px solid rgba(140,110,240,.20);
position: relative;
}
/* Toggle do mw-collapsible no canto direito (estilo “[Ocultar ▾]”) */
.eden-loja-mvp .eden-loja-sec > .loja-card-title .mw-collapsible-toggle{
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
.eden-loja-mvp .eden-loja-sec > .loja-card-title .mw-collapsible-toggle a{
text-decoration: none;
}
/* Conteúdo (padding interno) */
.eden-loja-mvp .eden-loja-sec .mw-collapsible-content{
padding: 14px;
}
/* Tabela arredondada estilo MVP */
.eden-loja-mvp table.eden-loja-table{
width: 100%;
margin: 0;
border-collapse: separate;
border-spacing: 0;
border: 1px solid rgba(140,110,240,.28);
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,.40);
}
.eden-loja-mvp table.eden-loja-table th{
padding: 12px 10px;
text-align: center;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
background: rgba(140,110,240,.16);
border-bottom: 1px solid rgba(140,110,240,.22);
}
.eden-loja-mvp table.eden-loja-table td{
padding: 10px 12px;
border-top: 1px solid rgba(140,110,240,.18);
vertical-align: middle;
}
.eden-loja-mvp table.eden-loja-table tr:first-child td{
border-top: none;
}
/* ================================
Turn In / Éden — ajustes finais
================================ */
/* 1) Estreitar a caixa (não ocupar a tela toda) */
.eden-loja-mvp{
max-width: 1180px; /* ajuste aqui: 1040 / 1120 / 1180 */
width: calc(100% - 24px);
margin: 16px auto 24px;
}
/* 2) Card do NPC (igual vibe MVP) */
.eden-loja-mvp .eden-npc-wrap{
display: flex;
justify-content: center;
margin: 8px 0 16px;
}
.eden-loja-mvp .eden-npc-card{
width: min(380px, 100%);
text-align: center;
padding: 18px 16px 16px;
border-radius: 22px;
background: rgba(255,255,255,.45);
border: 1px solid rgba(140,110,240,.25);
box-shadow: 0 10px 24px rgba(0,0,0,.07);
}
.eden-loja-mvp .eden-npc-title{
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 8px;
}
.eden-loja-mvp .eden-npc-loc{
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .85;
margin-bottom: 10px;
}
/* pill /navi (no mesmo estilo “copiável”) */
.eden-loja-mvp .eden-navi-pill{
display: inline-block;
margin-top: 10px;
padding: 8px 14px 8px 30px;
border-radius: 999px;
border: 1px solid rgba(140,110,240,.28);
background: rgba(255,255,255,.55);
font-weight: 800;
position: relative;
}
.eden-loja-mvp .eden-navi-pill::before{
content: "⌖";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
opacity: .85;
}
/* 3) Fix do toggle do mw-collapsible (ficar no header, canto direito) */
.eden-loja-mvp .eden-loja-sec{
position: relative;
}
.eden-loja-mvp .eden-loja-sec > .mw-collapsible-toggle{
position: absolute;
right: 14px;
top: 12px; /* ajusta fino se quiser */
z-index: 2;
font-weight: 800;
}
.eden-loja-mvp .eden-loja-sec > .loja-card-title{
padding-right: 110px; /* espaço pro [Mostrar/Ocultar] */
}
.eden-loja-mvp .eden-loja-sec{
align-self: start;
height: fit-content;
}
/* =========================================================
RagnaTrue — drops-inline: remover a listra (top line)
Use: <div class="drops-inline rt-no-topline ...">
========================================================= */
.drops-inline.rt-no-topline > .mw-collapsible-content{
border-top: 0 !important;
}
/* =========================================================
RT — Colapsível com pill + botão "Mostrar" padronizados
Use adicionando a classe: .rt-coll-uniform
========================================================= */
.drops-inline.rt-coll-uniform{
/* ajuste fino por variável (pode sobrescrever por inline style) */
--rt-pill-w: 340px; /* largura da pill */
--rt-toggle-w: 120px; /* largura do "Mostrar" */
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
/* mantém o “roxinho claro” e o layout limpo */
padding: 10px 14px;
}
/* A pill (badge) é o ::before do drops-inline */
.drops-inline.rt-coll-uniform::before{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--rt-pill-w);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Botão Mostrar/Ocultar */
.drops-inline.rt-coll-uniform .mw-collapsible-toggle{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--rt-toggle-w);
text-align: center;
white-space: nowrap;
}
.drops-inline.rt-coll-uniform .mw-collapsible-toggle a{
display: inline-flex;
width: 100%;
justify-content: center;
text-decoration: none;
}
/* Conteúdo deve “quebrar linha” e ocupar 100% abaixo do header */
.drops-inline.rt-coll-uniform .mw-collapsible-content{
flex: 0 0 100%;
width: 100%;
margin-top: 10px;
}
/* Card de Habilidades: troca o "branco" da faixa dos colapsíveis */
.rt-skill-wrap .drops-inline {
background: rgba(124, 92, 255, .06) !important; /* lilás bem suave */
border: 1px solid rgba(124, 92, 255, .18) !important;
box-shadow: none !important;
}
/* opcional: hover levinho */
.rt-skill-wrap .drops-inline:hover {
background: rgba(124, 92, 255, .09) !important;
}
/* ================================
Alterações > Habilidades (somente nesta seção)
Wrapper: #rt-skills-coll
================================ */
/* o “cartão” do colapsível (a listra onde fica pill + Mostrar/Ocultar) */
#rt-skills-coll .drops-inline.mw-collapsible{
background: rgba(123, 92, 255, .06) !important; /* roxinho bem leve */
border: 1px solid rgba(123, 92, 255, .18) !important;
box-shadow: 0 10px 22px rgba(76, 29, 149, .08) !important; /* tira o rosa estourado */
border-radius: 18px !important;
padding: 10px 12px !important;
}
/* quando abre, não aumenta o “branco/rosa” */
#rt-skills-coll .drops-inline.mw-collapsible.mw-collapsible-expanded{
background: rgba(123, 92, 255, .05) !important;
box-shadow: 0 10px 20px rgba(76, 29, 149, .07) !important;
}
/* o painel interno do MediaWiki (era o que estava “lavando” a cor) */
#rt-skills-coll .drops-inline .mw-collapsible-content{
background: transparent !important;
padding: 8px 0 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
/* o card interno (onde está a tabela) — remove a sombra forte e “desrosa” */
#rt-skills-coll .drops-inline .eden-quests-card.is-daily-rewards{
background: rgba(255,255,255,.55) !important; /* branco translúcido (não rosado) */
border: 1px solid rgba(123, 92, 255, .14) !important;
box-shadow: none !important; /* aqui estava o “estouro” */
border-radius: 16px !important;
}
/* Habilidades: linhas sempre lavanda (sem zebra) */
#rt-skills-coll .eden-quests-table th,
#rt-skills-coll .eden-quests-table td{
background: rgba(123, 92, 255, .045) !important; /* lavanda fixa */
}
/* remove qualquer alternância */
#rt-skills-coll .eden-quests-table tr:nth-child(even) td,
#rt-skills-coll .eden-quests-table tr:nth-child(odd) td{
background: rgba(123, 92, 255, .045) !important;
}
/* tabela por dentro: lavanda suave consistente */
#rt-skills-coll .eden-quests-table th{
background: rgba(123, 92, 255, .12) !important;
}
#rt-skills-coll .eden-quests-table td{
background: rgba(123, 92, 255, .045) !important;
}
/* =========================
Habilidades (Alterações por Classe) — camadas/sombra
========================= */
#rt-skills-wrap{
background: rgba(123, 92, 255, .06);
border: 1px solid rgba(123, 92, 255, .18);
box-shadow: 0 18px 46px rgba(76, 29, 149, .10);
}
/* cada colapsível (a “listra”/faixa) vira um cartão com profundidade */
#rt-skills-wrap .drops-inline{
background: rgba(123, 92, 255, .05);
border: 1px solid rgba(123, 92, 255, .18);
border-radius: 16px;
box-shadow: 0 14px 34px rgba(76, 29, 149, .10);
margin: 12px 0;
padding: 8px 10px;
}
/* quando abre, dá mais “conversa” com o restante */
#rt-skills-wrap .mw-collapsible-content{
margin-top: 10px;
}
/* card interno (onde fica a tabela) menos “branco estourado” */
#rt-skills-wrap .eden-quests-card{
background: rgba(251, 248, 255, .92);
border: 1px solid rgba(123, 92, 255, .16);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(76, 29, 149, .10);
}
/* tabela com acabamento (fica “destacadinha”) */
#rt-skills-wrap .eden-quests-table{
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 22px rgba(76, 29, 149, .08);
}