MediaWiki:Common.css
Nota: Após publicar, você pode ter que limpar o "cache" do seu navegador para ver as alterações.
- Firefox / Safari: Pressione Shift enquanto clica Recarregar, ou pressione Ctrl-F5 ou Ctrl-R (⌘-R no Mac)
- Google Chrome: Pressione Ctrl-Shift-R (⌘-Shift-R no Mac)
- Internet Explorer/Edge: PressioneCtrl enquanto clica Recarregar, ou Pressione Ctrl-F5
- Opera: Pressione Ctrl-F5.
/************************************************************
* 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);
}