/* ===========================================================================
   ÉTER — tema do site

   Herda paleta e keyframes de resources/css/eter-tokens.css.

   A assinatura visual é a moldura dourada fina sobre painel violeta escuro,
   com um reflexo que atravessa a superfície devagar. Bloco grande usa .frame;
   bloco interno usa .slab.
   =========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--eter-void); }

body {
    margin: 0;
    background: var(--eter-bg);
    color: var(--eter-text);
    font-family: var(--eter-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--eter-violet-300); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--eter-magenta); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--eter-display);
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--eter-silver);
    letter-spacing: .04em;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.page { padding: 0 0 10px; }

.bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ===========================================================================
   1. Fundo vivo — camadas fixas atrás de tudo
   =========================================================================== */

.eter-sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; overflow: hidden; }

.eter-sky span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .45;
    animation: eter-drift 30s ease-in-out infinite;
}

.eter-sky span:nth-child(1) {
    width: 46vw; height: 46vw; top: -14vw; left: -8vw;
    background: radial-gradient(circle, rgba(124, 58, 237, .5), transparent 68%);
}

.eter-sky span:nth-child(2) {
    width: 38vw; height: 38vw; top: 30vh; right: -12vw;
    background: radial-gradient(circle, rgba(217, 70, 239, .3), transparent 70%);
    animation-duration: 38s; animation-direction: reverse;
}

.eter-sky span:nth-child(3) {
    width: 50vw; height: 50vw; top: 68vh; left: 18vw;
    background: radial-gradient(circle, rgba(76, 37, 144, .42), transparent 72%);
    animation-duration: 46s;
}

.eter-stars {
    position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .45;
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(233, 231, 242, .8), transparent),
        radial-gradient(1px 1px at 68% 14%, rgba(192, 132, 252, .9), transparent),
        radial-gradient(1px 1px at 34% 62%, rgba(233, 231, 242, .6), transparent),
        radial-gradient(1px 1px at 82% 48%, rgba(217, 70, 239, .7), transparent),
        radial-gradient(1px 1px at 52% 84%, rgba(233, 231, 242, .5), transparent),
        radial-gradient(1px 1px at 22% 92%, rgba(168, 85, 247, .7), transparent);
}

.eter-grain {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eter-embers { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* As brasas do Éter puxam para o âmbar, como na referência — é o contraponto
   quente que impede a tela de virar um bloco só de roxo. */
.eter-ember {
    position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
    background: #FF8A3D;
    box-shadow: 0 0 8px 2px rgba(255, 138, 61, .7);
    animation: eter-ember linear infinite;
}

/* ===========================================================================
   2. Moldura dourada — a assinatura do Éter
   =========================================================================== */

.frame {
    position: relative;
    border-radius: var(--eter-radius);
    background: linear-gradient(180deg, rgba(24, 15, 44, .92), rgba(15, 10, 28, .96));
    box-shadow: var(--eter-shadow), inset 0 1px 0 rgba(255, 255, 255, .03);
    overflow: hidden;
}

/* A borda em degradê de ouro, desenhada com máscara para não pintar o miolo */
.frame::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(140deg,
        rgba(201, 162, 39, .75) 0%,
        rgba(201, 162, 39, .18) 26%,
        rgba(124, 58, 237, .35) 52%,
        rgba(201, 162, 39, .22) 74%,
        rgba(227, 192, 90, .7) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

/* O reflexo: uma faixa de luz que atravessa a superfície de tempos em tempos,
   como o brilho que passa no vidro. Some sozinha e volta. */
.frame::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 45%;
    height: 220%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .045) 40%,
        rgba(233, 213, 255, .10) 50%,
        rgba(255, 255, 255, .045) 60%,
        transparent);
    transform: rotate(18deg);
    pointer-events: none;
    z-index: 2;
    animation: eter-reflexo 9s ease-in-out infinite;
}

@keyframes eter-reflexo {
    0%, 62%  { left: -60%; opacity: 0; }
    68%      { opacity: 1; }
    92%      { left: 120%; opacity: .9; }
    100%     { left: 120%; opacity: 0; }
}

/* Escalona o reflexo entre blocos vizinhos: passar tudo junto pareceria
   um piscar da tela, e não um brilho correndo. */
.frame.d1::after { animation-delay: 1.4s; }
.frame.d2::after { animation-delay: 2.8s; }
.frame.d3::after { animation-delay: 4.2s; }
.frame.d4::after { animation-delay: 5.6s; }

/* Bloco interno: sem moldura dourada, só o degrau de superfície */
.slab {
    position: relative;
    border: 1px solid var(--eter-line);
    border-radius: var(--eter-radius-sm);
    background: linear-gradient(180deg, rgba(28, 19, 51, .55), rgba(16, 10, 28, .6));
}

/* ===========================================================================
   3. Cabeçalho
   =========================================================================== */

.header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(180deg, rgba(9, 5, 16, .96), rgba(9, 5, 16, .82));
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--eter-line-soft);
}

.header .wrap { display: flex; align-items: center; gap: 26px; min-height: 74px; }

.brand { position: relative; flex-shrink: 0; display: block; line-height: 0; }
.brand img { width: 124px; }

.brand::after {
    content: "";
    position: absolute;
    inset: -22% -12%;
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, .45), transparent 68%);
    animation: eter-breathe 5s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-item { position: relative; }

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: var(--eter-radius-sm);
    color: var(--eter-silver-2);
    white-space: nowrap;
    transition: color .2s ease, background .2s ease;
}

.nav-link:hover { color: var(--eter-silver); background: rgba(124, 58, 237, .1); }
.nav-link svg { width: 16px; height: 16px; opacity: .8; }

.nav-text b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.3;
}

.nav-text span { display: block; font-size: 10.5px; color: var(--eter-dim); line-height: 1.2; }

/* Item ativo: sublinhado luminoso, como na referência */
.nav-link.is-active { color: var(--eter-violet-300); }
.nav-link.is-active svg { opacity: 1; }

.nav-link.is-active::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--eter-violet), var(--eter-magenta));
    box-shadow: 0 0 10px rgba(168, 85, 247, .8);
}

.nav-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 208px;
    background: var(--eter-panel);
    border: 1px solid var(--eter-line);
    border-radius: var(--eter-radius-sm);
    box-shadow: var(--eter-shadow);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .2s ease;
    z-index: 20;
}

.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; transform: none; }
.nav-drop a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--eter-silver-2); font-size: 13px; }
.nav-drop a:hover { background: rgba(124, 58, 237, .14); color: var(--eter-violet-300); }

.header-cta { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

/* ===========================================================================
   4. Botões
   =========================================================================== */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: linear-gradient(135deg, #7C3AED, #A855F7);
    color: #fff;
    font-family: var(--eter-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .25s ease;
}

.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 22px rgba(168, 85, 247, .45); }
.btn:active { transform: translateY(0); }

.btn::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: translateX(-140%) skewX(-18deg);
}

.btn:hover::after { animation: eter-sweep .75s ease; }

.btn.dark { background: rgba(20, 13, 36, .9); border-color: var(--eter-line); color: var(--eter-silver-2); }
.btn.dark:hover { border-color: var(--eter-violet); color: var(--eter-silver); }

.btn.gold {
    background: linear-gradient(180deg, rgba(38, 27, 10, .92), rgba(24, 17, 6, .92));
    border-color: rgba(201, 162, 39, .75);
    color: var(--eter-gold-2);
}

.btn.gold:hover { box-shadow: 0 0 22px rgba(201, 162, 39, .35); border-color: var(--eter-gold-2); color: var(--eter-gold-2); }

.btn.ghost { background: transparent; border-color: var(--eter-line); color: var(--eter-muted); }
.btn.ghost:hover { border-color: var(--eter-violet); color: var(--eter-violet-300); }

.btn.sm { padding: 7px 14px; font-size: 12px; }
.btn.lg { padding: 14px 26px; font-size: 14px; }
.btn.block { width: 100%; }

.btn-stack { flex-direction: column; gap: 2px; line-height: 1.15; }
.btn-stack b { font-family: var(--eter-display); font-size: 13px; letter-spacing: .1em; }
.btn-stack span { font-size: 9.5px; letter-spacing: .14em; opacity: .78; text-transform: uppercase; }

/* ===========================================================================
   5. Herói
   =========================================================================== */

.hero { position: relative; min-height: 540px; display: flex; align-items: center; overflow: hidden; }

.hero-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero-bg,
.hero-figure-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

/* O longe: a mesma arte, desfocada. A diferença de nitidez entre as duas
   camadas é o que cria profundidade de campo de verdade. */
.hero-bg { will-change: transform; animation: eter-hero-zoom 40s ease-in-out infinite alternate; }

@keyframes eter-hero-zoom {
    from { transform: scale(1.04); }
    to   { transform: scale(1.12); }
}

/* O perto: a arte nítida, respirando */
.hero-figure-art {
    z-index: 2;
    transform-origin: 60% 100%;
    will-change: transform;
    animation: eter-respirar 5s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 2%, #000 30%);
}

/* Sobe e incha de leve, e desce mais rápido do que sobe — é o que faz
   parecer fôlego, e não um balão inflando. */
@keyframes eter-respirar {
    0%   { transform: scale(1)     translateY(0); }
    44%  { transform: scale(1.015) translateY(-7px); }
    60%  { transform: scale(1.011) translateY(-4px); }
    100% { transform: scale(1)     translateY(0); }
}

/* O véu fica ENTRE as duas camadas: escurece o cenário para o texto ter
   contraste, sem apagar a armadura que está na frente. */
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, var(--eter-bg) 0%, rgba(11, 7, 20, .92) 18%,
                        rgba(11, 7, 20, .55) 38%, rgba(11, 7, 20, .05) 66%, transparent 100%),
        linear-gradient(0deg, var(--eter-bg) 0%, rgba(11, 7, 20, .28) 18%, transparent 48%);
}

/* Efeitos ancorados em pontos da arte (percentuais da imagem 1672x941) */
.hero-scene > span { position: absolute; z-index: 3; pointer-events: none; }

.fx-eyes {
    left: 63.2%; top: 19.5%;
    width: 3.4%; aspect-ratio: 2.4 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(233, 213, 255, .95), rgba(217, 70, 239, .5) 40%, transparent 74%);
    filter: blur(3px);
    mix-blend-mode: screen;
    animation: eter-olhar 5s ease-in-out infinite;
}

@keyframes eter-olhar {
    0%, 28%  { opacity: .5;  transform: translate(-50%, -50%) scale(.92); }
    46%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
    62%      { opacity: .78; transform: translate(-50%, -50%) scale(1.02); }
    100%     { opacity: .5;  transform: translate(-50%, -50%) scale(.92); }
}

.fx-chest {
    left: 62.5%; top: 36%;
    width: 5%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(217, 70, 239, .7), transparent 66%);
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: eter-breathe 5s ease-in-out infinite;
}

.fx-blade {
    left: 9%; top: 82%;
    width: 34%; height: 5%;
    transform-origin: 100% 50%;
    transform: rotate(-22deg);
    background: linear-gradient(90deg, rgba(192, 132, 252, 0), rgba(192, 132, 252, .45), rgba(233, 213, 255, .7));
    filter: blur(7px);
    mix-blend-mode: screen;
    animation: eter-lamina 3.6s ease-in-out infinite;
    overflow: hidden;
}

@keyframes eter-lamina { 0%, 100% { opacity: .4; } 50% { opacity: .95; } }

.fx-blade i {
    position: absolute; top: 0; left: 0; width: 20%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    animation: eter-lamina-pulso 2.8s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes eter-lamina-pulso {
    0%   { transform: translateX(400%); opacity: 0; }
    20%  { opacity: 1; }
    88%  { opacity: .6; }
    100% { transform: translateX(-40%); opacity: 0; }
}

/* O bufo: vapor saindo do elmo a cada expiração, no mesmo ciclo de 5s */
.fx-breath { left: 63.5%; top: 22%; width: 5%; aspect-ratio: 1; }

.fx-breath i {
    position: absolute; left: 50%; top: 60%;
    width: 46%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 213, 255, .45), rgba(168, 85, 247, .14) 55%, transparent 74%);
    filter: blur(5px);
    opacity: 0;
    animation: eter-bufo 5s ease-out infinite;
}

.fx-breath i:nth-child(2) { animation-delay: .3s; width: 34%; }
.fx-breath i:nth-child(3) { animation-delay: .56s; width: 25%; }

@keyframes eter-bufo {
    0%, 42%  { opacity: 0; transform: translate(-50%, 0) scale(.4); }
    52%      { opacity: .8; }
    100%     { opacity: 0; transform: translate(-66%, -200%) scale(2.7); }
}

.fx-motes { inset: 0; width: 100%; height: 100%; }

.fx-mote {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: #E9D5FF;
    box-shadow: 0 0 8px 2px rgba(192, 132, 252, .85);
    opacity: 0;
    animation: eter-faisca linear infinite;
}

@keyframes eter-faisca {
    0%   { transform: translateY(0) scale(.5); opacity: 0; }
    15%  { opacity: 1; }
    80%  { opacity: .6; }
    100% { transform: translateY(-180px) scale(1.1); opacity: 0; }
}

.hero-inner { position: relative; z-index: 4; padding: 74px 0 64px; max-width: 640px; }

.hero-eyebrow {
    font-size: 11.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--eter-silver-3);
    margin: 0 0 16px;
}

.hero h1 {
    font-size: clamp(38px, 5.6vw, 66px);
    line-height: 1.04;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-shadow: 0 6px 34px rgba(0, 0, 0, .7);
}

.hero h1 em {
    font-style: normal;
    background: linear-gradient(180deg, #E9D5FF 0%, #C084FC 46%, #9333EA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 46px rgba(168, 85, 247, .5);
}

.hero p.lead { font-size: 15.5px; color: var(--eter-silver-3); max-width: 480px; margin: 0 0 26px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }

.hero-online {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    color: var(--eter-silver-3);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-online strong { font-family: var(--eter-display); font-size: 19px; color: var(--eter-silver); letter-spacing: 0; }
.hero-online .pulse { position: relative; display: inline-flex; }

.hero-online .pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--eter-ok);
    animation: eter-ring 2.4s ease-out infinite;
}

/* ===========================================================================
   6. Cards de destaque
   =========================================================================== */

.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 30px 0; }

.pillar {
    position: relative;
    display: block;
    min-height: 196px;
    padding: 22px 20px;
    color: inherit;
    transition: transform .32s cubic-bezier(.16, .84, .44, 1), box-shadow .32s ease;
}

.pillar:hover { transform: translateY(-6px); box-shadow: var(--eter-shadow-lift); color: inherit; }

.pillar-art {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    width: 62%;
    object-fit: cover;
    opacity: .8;
    z-index: 0;
    transition: opacity .35s ease, transform .6s cubic-bezier(.16, .84, .44, 1);
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 46%);
    mask-image: linear-gradient(90deg, transparent 2%, #000 46%);
}

.pillar:hover .pillar-art { opacity: 1; transform: scale(1.08); }

.pillar-text { position: relative; z-index: 2; max-width: 68%; }

.pillar h3 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; margin-bottom: 10px; }
.pillar p { margin: 0; font-size: 12.5px; color: var(--eter-muted); line-height: 1.55; }

.pillar-more {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 2;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--eter-violet-300);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .25s ease;
}

.pillar:hover .pillar-more { gap: 11px; }

/* ===========================================================================
   7. Seções da home
   =========================================================================== */

.section { margin-bottom: 26px; padding: 26px 26px 24px; }

.section-head { margin-bottom: 20px; }
.section-head h2 { font-size: 19px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 4px; }
.section-head p { margin: 0; font-size: 12.5px; color: var(--eter-dim); }

/* --- Rankings em cinco colunas ----------------------------------------- */

.rank-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.rank-col { padding: 0 0 12px; overflow: hidden; }

.rank-col h3 {
    margin: 0;
    padding: 12px 14px;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--eter-silver-2);
    border-bottom: 1px solid var(--eter-line-soft);
    background: linear-gradient(180deg, rgba(124, 58, 237, .14), transparent);
}

.rank-line { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 12.5px;
             transition: background .2s ease; }

.rank-line:hover { background: rgba(124, 58, 237, .09); }

.rank-medal { width: 22px; flex-shrink: 0; font-size: 11px; font-weight: 700;
              color: var(--eter-dim); text-align: center; }

.rank-medal.m1 { color: #F0C862; text-shadow: 0 0 10px rgba(240, 200, 98, .6); }
.rank-medal.m2 { color: #D6D6E4; }
.rank-medal.m3 { color: #D08A52; }

.rank-face { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--eter-line);
             object-fit: cover; flex-shrink: 0; background: var(--eter-panel-2); }

.rank-nick { flex: 1; min-width: 0; color: var(--eter-silver-2);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rank-val { color: var(--eter-silver); font-variant-numeric: tabular-nums; font-size: 12px; }

.rank-foot {
    display: block;
    margin: 8px 12px 0;
    padding-top: 10px;
    border-top: 1px solid var(--eter-line-soft);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--eter-violet-300);
}

/* --- Notícias e fórum --------------------------------------------------- */

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--eter-line-soft); margin-bottom: 12px; }

.tab {
    padding: 0 0 9px;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--eter-dim);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: var(--eter-font);
    transition: color .2s ease, border-color .2s ease;
}

.tab:hover { color: var(--eter-silver-2); }
.tab.is-active { color: var(--eter-violet-300); border-bottom-color: var(--eter-violet); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: eter-rise .4s ease; }

.news-row { display: flex; gap: 12px; padding: 9px 0; }

.news-thumb { width: 58px; height: 44px; flex-shrink: 0; border-radius: 6px; object-fit: cover;
              border: 1px solid var(--eter-line); background: var(--eter-panel-2); }

.news-row h4 { margin: 0 0 2px; font-family: var(--eter-font); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.news-row h4 a { color: var(--eter-violet-300); }
.news-row h4 a:hover { color: var(--eter-magenta); }
.news-row p { margin: 0; font-size: 11.5px; color: var(--eter-muted); line-height: 1.45; }
.news-row time { font-size: 10.5px; color: var(--eter-dim); }

.topic-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; }

.topic-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; display: grid; place-items: center;
              background: rgba(124, 58, 237, .16); border: 1px solid var(--eter-line); color: var(--eter-violet-300); }

.topic-row b { display: block; font-size: 12.5px; font-weight: 500; color: var(--eter-silver-2); }
.topic-row span { font-size: 10.5px; color: var(--eter-dim); }

/* --- Promoções e status ------------------------------------------------- */

.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.status-tile { display: flex; align-items: center; gap: 13px; padding: 15px 16px;
               transition: border-color .25s ease, transform .25s ease; }

.status-tile:hover { border-color: var(--eter-line-strong); transform: translateY(-2px); }

.status-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
               border-radius: 9px; background: rgba(124, 58, 237, .16);
               border: 1px solid rgba(124, 58, 237, .3); color: var(--eter-violet-300); }

.status-icon svg { width: 20px; height: 20px; }

.status-tile .label { display: block; font-size: 9.5px; letter-spacing: .16em;
                      text-transform: uppercase; color: var(--eter-dim); margin-bottom: 2px; }

.status-tile .value { display: block; font-size: 16px; font-weight: 700; color: var(--eter-silver); }
.status-tile .value small { font-size: 10px; font-weight: 400; color: var(--eter-dim); letter-spacing: .1em; }
.status-tile .value.ok { color: var(--eter-ok); }

.banner-vip { display: block; margin-top: 12px; border-radius: var(--eter-radius-sm);
              overflow: hidden; position: relative; }

.banner-vip img { width: 100%; transition: transform .6s cubic-bezier(.16, .84, .44, 1); }
.banner-vip:hover img { transform: scale(1.03); }

/* --- Próximos eventos --------------------------------------------------- */

.event-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; margin-bottom: 8px;
             transition: border-color .25s ease, transform .25s ease; }

.event-row:hover { border-color: var(--eter-line-strong); transform: translateX(3px); }

.event-row.is-next {
    border-color: rgba(201, 162, 39, .6);
    background: linear-gradient(90deg, rgba(201, 162, 39, .1), rgba(16, 10, 28, .6));
}

.event-time { font-family: var(--eter-display); font-size: 16px; color: var(--eter-silver);
              width: 54px; flex-shrink: 0; }

.event-row.is-next .event-time { color: var(--eter-gold-2); }
.event-info { flex: 1; min-width: 0; }
.event-info b { display: block; font-size: 13px; color: var(--eter-violet-300); font-weight: 600; }
.event-info span { display: block; font-size: 11.5px; color: var(--eter-dim); }

.event-count { font-size: 11px; letter-spacing: .1em; color: var(--eter-ok);
               font-variant-numeric: tabular-nums; white-space: nowrap; }

.event-row.is-next .event-count { color: var(--eter-gold-2); }

/* --- Equipe online ------------------------------------------------------ */

.staff-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: stretch; }
.staff-row { display: flex; align-items: center; gap: 11px; padding: 8px 12px; margin-bottom: 6px; }

.staff-face { width: 32px; height: 32px; border-radius: 8px; object-fit: cover;
              border: 1px solid var(--eter-line); flex-shrink: 0; background: var(--eter-panel-2); }

.staff-row .who { flex: 1; min-width: 0; }
.staff-row .who b { display: block; font-size: 12.5px; color: var(--eter-silver-2); font-weight: 600; }
.staff-row .who span { display: block; font-size: 10.5px; color: var(--eter-dim); }

.staff-state { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
               color: var(--eter-dim); display: flex; align-items: center; gap: 6px; }

.staff-state.on { color: var(--eter-ok); }

.staff-art { position: relative; border-radius: var(--eter-radius-sm); overflow: hidden;
             min-height: 220px; background: var(--eter-panel-2); }

.staff-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                 object-position: 52% 22%; animation: eter-hero-zoom 34s ease-in-out infinite alternate; }

.staff-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16, 10, 28, .9), transparent 42%),
                linear-gradient(0deg, rgba(16, 10, 28, .8), transparent 40%);
}

/* ===========================================================================
   8. Painéis, tabelas, formulários e avisos (páginas internas)
   =========================================================================== */

.panel { position: relative; border: 1px solid var(--eter-line); border-radius: var(--eter-radius);
         background: var(--eter-grad-panel); box-shadow: var(--eter-shadow); overflow: hidden; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding: 15px 20px; border-bottom: 1px solid var(--eter-line-soft); }

.panel-head h2, .panel-head h3 { margin: 0; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.panel-body { padding: 20px; }
.panel-body.flush { padding: 0; }
.panel-link { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
              color: var(--eter-violet-300); white-space: nowrap; }

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.sidebar { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }

.stat-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.tile { padding: 18px 14px; text-align: center; border: 1px solid var(--eter-line);
        border-radius: var(--eter-radius-sm); background: var(--eter-grad-panel); }

.tile .value { font-family: var(--eter-display); font-size: 26px; line-height: 1.2;
               background: linear-gradient(180deg, #E9D5FF, #A855F7);
               -webkit-background-clip: text; background-clip: text; color: transparent; }

.tile .label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--eter-dim); }

.table { width: 100%; border-collapse: collapse; }

.table th { text-align: left; padding: 11px 16px; font-size: 10.5px; letter-spacing: .13em;
            text-transform: uppercase; font-weight: 600; color: var(--eter-dim);
            border-bottom: 1px solid var(--eter-line); white-space: nowrap; }

.table td { padding: 11px 16px; border-bottom: 1px solid var(--eter-line-soft); font-size: 13.5px; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: rgba(124, 58, 237, .07); }
.table .right { text-align: right; }
.table .pos { width: 56px; color: var(--eter-dim); font-variant-numeric: tabular-nums; }
.table .pos.top { color: var(--eter-gold-2); font-weight: 700; }
.table-scroll { overflow-x: auto; }

.status-list { display: flex; flex-direction: column; }

.status-row { display: flex; align-items: center; gap: 12px; padding: 11px 0;
              border-bottom: 1px solid var(--eter-line-soft); font-size: 13.5px; }

.status-row:last-child { border-bottom: 0; }
.status-row b { flex: 1; font-weight: 600; color: var(--eter-silver-2); }
.status-tag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--eter-ok); }
.status-tag.off { color: var(--eter-bad); }

.bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { width: 3px; background: var(--eter-line-strong); border-radius: 1px; }
.bars i:nth-child(1) { height: 40%; }
.bars i:nth-child(2) { height: 65%; }
.bars i:nth-child(3) { height: 100%; }
.bars.on i { background: var(--eter-ok); box-shadow: 0 0 6px rgba(63, 209, 104, .6); }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
               color: var(--eter-muted); margin-bottom: 6px; }

.field input, .field select, .field textarea {
    width: 100%; padding: 11px 13px;
    background: var(--eter-bg-soft); border: 1px solid var(--eter-line);
    border-radius: var(--eter-radius-sm); color: var(--eter-text);
    font-family: var(--eter-font); font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.field textarea { min-height: 110px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 0; border-color: var(--eter-violet); box-shadow: 0 0 0 3px var(--eter-violet-dim);
}

.field .help { font-size: 11.5px; color: var(--eter-dim); margin-top: 5px; }
.form-narrow { max-width: 430px; margin: 48px auto; }

.alert { padding: 13px 16px; border-radius: var(--eter-radius-sm); border: 1px solid var(--eter-line);
         margin-bottom: 14px; font-size: 14px; animation: eter-rise .4s ease; }

.alert.success { background: rgba(63, 209, 104, .1);  border-color: rgba(63, 209, 104, .34); color: #97E8AF; }
.alert.error   { background: rgba(240, 78, 78, .1);   border-color: rgba(240, 78, 78, .34);  color: #FFB3B3; }
.alert.warning { background: rgba(224, 169, 59, .1);  border-color: rgba(224, 169, 59, .34); color: #F0CE86; }
.alert.info    { background: rgba(124, 58, 237, .12); border-color: rgba(124, 58, 237, .38); color: #D6BEFF; }

.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px;
       background: rgba(124, 58, 237, .16); color: var(--eter-violet-300);
       border: 1px solid rgba(124, 58, 237, .35); }

.tag.muted { background: rgba(156, 148, 184, .1); color: var(--eter-muted); border-color: var(--eter-line); }
.tag.gold { background: rgba(201, 162, 39, .14); color: var(--eter-gold-2); border-color: rgba(201, 162, 39, .4); }

.paginator { display: flex; gap: 6px; justify-content: center; padding: 20px 0 6px; flex-wrap: wrap; }

.paginator a, .paginator span { min-width: 36px; padding: 8px 11px; text-align: center;
    border: 1px solid var(--eter-line); border-radius: var(--eter-radius-sm);
    color: var(--eter-muted); font-size: 13px; transition: all .2s ease; }

.paginator a:hover { border-color: var(--eter-violet); color: var(--eter-violet-300); }
.paginator .current { background: linear-gradient(135deg, #7C3AED, #A855F7); border-color: transparent; color: #fff; }
.paginator .gap { border-color: transparent; }

.portrait { width: 128px; height: 128px; border-radius: var(--eter-radius);
            border: 1px solid var(--eter-line-strong); object-fit: cover; background: var(--eter-panel-2); }

.portrait-wrap { position: relative; flex-shrink: 0; }

.portrait-wrap::before {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, .32), transparent 66%);
    animation: eter-breathe 5s ease-in-out infinite; z-index: -1;
}

.portrait-sm { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--eter-line);
               object-fit: cover; background: var(--eter-panel-2); flex-shrink: 0; }

.hero-figure { display: flex; gap: 20px; align-items: center; }

/* ===========================================================================
   9. Rodapé
   =========================================================================== */

.footer {
    margin-top: 40px;
    border-top: 1px solid var(--eter-line-soft);
    background: linear-gradient(180deg, rgba(14, 9, 25, .8), var(--eter-void));
    padding: 40px 0 24px;
}

.footer-cols { display: grid; grid-template-columns: 1.5fr repeat(4, .8fr) 1.3fr; gap: 28px; }
.footer-brand img { width: 112px; opacity: .92; }
.footer-brand p { font-size: 12px; color: var(--eter-dim); margin: 14px 0 0; line-height: 1.6; }

.footer h4 { font-family: var(--eter-font); font-size: 10.5px; letter-spacing: .18em;
             text-transform: uppercase; color: var(--eter-violet-300); margin-bottom: 12px; }

.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 3px 0; }
.footer li a { color: var(--eter-muted); font-size: 12.5px; transition: color .2s ease, padding-left .2s ease; }
.footer li a:hover { color: var(--eter-violet-300); padding-left: 4px; }

.footer-status { padding: 16px 18px; }
.footer-status h4 { margin-bottom: 10px; }
.footer-status .state { display: flex; align-items: center; gap: 8px; font-size: 15px;
                        font-weight: 700; color: var(--eter-ok); margin-bottom: 4px; }
.footer-status p { margin: 0 0 12px; font-size: 11.5px; color: var(--eter-dim); }

.footer-bottom {
    margin-top: 30px; padding-top: 18px;
    border-top: 1px solid var(--eter-line-soft);
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: 12px; color: var(--eter-dim);
}

.social { display: flex; gap: 8px; }

.social a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
            color: var(--eter-muted); border: 1px solid var(--eter-line-soft); transition: all .22s ease; }

.social a:hover { color: var(--eter-violet-300); border-color: var(--eter-violet);
                  background: rgba(124, 58, 237, .12); transform: translateY(-2px); }

.social svg { width: 15px; height: 15px; fill: currentColor; }

/* ===========================================================================
   10. Responsivo
   =========================================================================== */

@media (max-width: 1180px) {
    .rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-cols { grid-template-columns: repeat(3, 1fr); }
    .nav-text span { display: none; }
}

@media (max-width: 980px) {
    .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duo { grid-template-columns: minmax(0, 1fr); }
    .grid.sidebar, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
    .staff-wrap { grid-template-columns: minmax(0, 1fr); }
    .staff-art { min-height: 170px; }
    .header .wrap { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
    .nav { order: 3; width: 100%; overflow-x: auto; }
}

@media (max-width: 720px) {
    .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { min-height: 460px; }
    .hero-inner { padding: 48px 0 40px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .pillars, .rank-grid, .grid.cols-2 { grid-template-columns: minmax(0, 1fr); }
    .section { padding: 20px 16px; }
}

/* ===========================================================================
   11. Loja de créditos (plugin Doações)
   =========================================================================== */

.pack {
    position: relative;
    padding: 22px 18px 18px;
    text-align: center;
    transition: transform .3s cubic-bezier(.16, .84, .44, 1), border-color .3s ease, box-shadow .3s ease;
}

.pack:hover { transform: translateY(-5px); border-color: var(--eter-line-strong); box-shadow: var(--eter-shadow-lift); }

/* O pacote em destaque ganha a moldura dourada, igual aos blocos grandes */
.pack.is-top { border-color: rgba(201, 162, 39, .55); }
.pack.is-top:hover { box-shadow: 0 22px 50px -28px rgba(201, 162, 39, .6); }

.pack-flag {
    position: absolute;
    top: 10px; right: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(201, 162, 39, .16);
    color: var(--eter-gold-2);
    border: 1px solid rgba(201, 162, 39, .4);
}

.pack-art {
    width: 84px; height: 84px;
    margin: 0 auto 12px;
    object-fit: contain;
    border-radius: var(--eter-radius-sm);
}

.pack-art-icon {
    display: grid;
    place-items: center;
    color: var(--eter-violet-300);
    background: rgba(124, 58, 237, .12);
    border: 1px solid var(--eter-line);
}

.pack h3 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }

.pack-credits {
    font-family: var(--eter-display);
    font-size: 30px;
    line-height: 1.1;
    background: linear-gradient(180deg, #E9D5FF, #A855F7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pack-credits small {
    display: block;
    font-family: var(--eter-font);
    font-size: 11px;
    letter-spacing: .06em;
    -webkit-text-fill-color: var(--eter-ok);
    color: var(--eter-ok);
}

.pack-coin { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--eter-dim); }
.pack-desc { font-size: 12px; color: var(--eter-muted); margin: 10px 0 0; line-height: 1.5; }

.pack-price {
    margin: 14px 0 12px;
    padding-top: 12px;
    border-top: 1px solid var(--eter-line-soft);
    font-size: 20px;
    font-weight: 700;
    color: var(--eter-gold-2);
}

/* ===========================================================================
   12. Conversa de suporte
   =========================================================================== */

.talk { display: flex; flex-direction: column; gap: 12px; }

.talk-row { display: flex; }

/* A resposta da equipe encosta na direita: o jogador identifica de quem é
   cada fala sem precisar ler o nome. */
.talk-row.is-staff { justify-content: flex-end; }

.talk-bubble { max-width: 78%; padding: 13px 16px; }

.talk-row.is-staff .talk-bubble {
    border-color: rgba(201, 162, 39, .35);
    background: linear-gradient(180deg, rgba(48, 34, 12, .5), rgba(24, 17, 8, .55));
}

.talk-who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--eter-silver-2);
    margin-bottom: 6px;
}

.talk-who span { font-weight: 400; color: var(--eter-dim); }
.talk-text { font-size: 13.5px; color: var(--eter-muted); line-height: 1.6; }

/* ===========================================================================
   13. Cards de guia
   =========================================================================== */

.guia-card {
    display: block;
    overflow: hidden;
    color: inherit;
    transition: transform .28s cubic-bezier(.16, .84, .44, 1), border-color .28s ease, box-shadow .28s ease;
}

.guia-card:hover {
    transform: translateY(-4px);
    border-color: var(--eter-line-strong);
    box-shadow: var(--eter-shadow-lift);
    color: inherit;
}

.guia-cover { width: 100%; height: 130px; object-fit: cover; display: block; }

.guia-cover-icon {
    display: grid;
    place-items: center;
    color: var(--eter-violet-300);
    background: linear-gradient(140deg, rgba(124, 58, 237, .18), rgba(16, 10, 28, .6));
}

.guia-body { padding: 15px 16px 16px; }
.guia-body h3 { font-size: 15px; letter-spacing: .02em; text-transform: none; margin: 8px 0 6px; line-height: 1.35; }
.guia-body p { margin: 0; font-size: 12.5px; color: var(--eter-muted); line-height: 1.5; }

.guia-meta {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--eter-line-soft);
    font-size: 11px;
    color: var(--eter-dim);
}