/* ============================================================
   L2 Gludin — Design System "Cinematic Dark Fantasy"
   ------------------------------------------------------------
   1. Tokens          5. Hero / Scene     9.  Tables & ranking
   2. Base            6. Countdown        10. Forms & alerts
   3. Ornate panels   7. Navigation       11. Legacy page blocks
   4. Buttons         8. Home sections    12. Footer, utilities
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
    /* Palette */
    --bg-0: #0D0805;
    --bg-1: #1A0F08;
    --bg-2: #24160C;
    --gold: #D9A85B;
    --gold-hi: #F6D48E;
    --gold-lo: #7A5222;
    --arcane: #D9772E;
    --arcane-hi: #F2A35E;
    --crimson: #9E2B19;
    --crimson-hi: #D9542C;
    --ember: #FF9A3C;
    --text: #EFE4D2;
    --text-2: #AE9B82;
    --ok: #4ADE80;
    --bad: #F87171;

    /* Surfaces & lines */
    --panel: rgba(28, 17, 10, 0.74);
    --panel-solid: #170E08;
    --line: rgba(217, 168, 91, 0.26);
    --line-strong: rgba(217, 168, 91, 0.55);
    --line-soft: rgba(217, 168, 91, 0.12);

    /* Metallic gold */
    --gold-metal: linear-gradient(180deg, #FFF0C4 0%, #F6D48E 24%, #D9A85B 52%, #8E5F25 78%, #E8BD72 100%);
    --gold-btn: linear-gradient(180deg, #F4D493 0%, #D9A85B 45%, #9C6C2C 100%);
    --fire-btn: linear-gradient(180deg, #FFB25A 0%, #E8762A 38%, #B8401B 72%, #7E2210 100%);

    /* Type */
    --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --font-head: 'Cinzel', Georgia, 'Times New Roman', serif;
    --font-ui: 'Rajdhani', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Scale */
    --fs-xs: 0.78rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: clamp(1.6rem, 2.6vw, 2.25rem);
    --fs-2xl: clamp(2rem, 4vw, 3rem);

    /* Space */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;

    /* Shape & depth */
    --radius: 2px;
    --chamfer: 9px;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    --glow-gold: 0 0 24px rgba(255, 215, 120, 0.28);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --nav-h: 76px;
    --wrap: 1200px;

    /* Legacy aliases — páginas antigas usam estas variáveis inline */
    --gold-light: var(--gold-hi);
    --gold-dark: var(--gold-lo);
    --purple: var(--arcane);
    --purple-light: var(--arcane-hi);
    --purple-dark: #6A3414;
    --bg-dark: var(--bg-0);
    --bg-card: var(--panel);
    --bg-card2: var(--bg-2);
    --text-muted: var(--text-2);
    --border: var(--line);
    --border-hover: var(--line-strong);

    color-scheme: dark;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.65;
    color: var(--text);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(232,118,42,.10), transparent 60%),
        radial-gradient(900px 500px at 100% 30%, rgba(158,43,25,.10), transparent 60%),
        var(--bg-0);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; line-height: 1.2; color: var(--text); letter-spacing: .01em; }
a { color: var(--gold); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-hi); }
img, svg { max-width: 100%; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
::selection { background: rgba(212,175,85,.35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--gold); color: var(--bg-0); padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--bg-0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5); }

/* ---------- 3. ORNATE PANELS ----------
   Painel escuro translúcido, filete dourado fino e cantoneiras. */
.ornate,
.card, .connect-box, .form-wrapper, .req-card, .donate-card, .table-wrapper,
.custom-card, .highlight-box, .step {
    position: relative;
    background: linear-gradient(180deg, rgba(38,23,13,.80), rgba(18,11,6,.86));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255,215,120,.06), var(--shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ornate::before,
.card::before, .connect-box::before, .form-wrapper::before, .req-card::before, .donate-card::before,
.table-wrapper::before, .custom-card::before, .highlight-box::before {
    --c: var(--gold);
    --l: 14px;
    content: "";
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
        linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
        linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
        linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
    background-repeat: no-repeat;
    opacity: .85;
    transition: opacity .3s var(--ease);
}

/* Divisor ornamental: linha — losango — linha */
.ornament, .section-divider {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: min(280px, 70%); margin: var(--s-4) auto 0; height: 10px;
    background: none;
}
.ornament::before, .ornament::after, .section-divider::before, .section-divider::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament::after, .section-divider::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament > i, .section-divider > i { display: none; }
.ornament, .section-divider { position: relative; }
.ornament span, .section-divider span {
    width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); background: var(--bg-0); flex: none;
}
.section-divider:empty { background:
    linear-gradient(90deg, transparent, var(--gold) 45%, transparent 45%, transparent 55%, var(--gold) 55%, transparent) center / 100% 1px no-repeat; }
.section-divider:empty::before, .section-divider:empty::after { display: none; }

/* ---------- 4. BUTTONS ----------
   Botões com cantos chanfrados (inspirados em UI de RPG). */
.btn {
    --cut: var(--chamfer);
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 13px 30px;
    font-family: var(--font-head); font-weight: 700; font-size: .92rem; letter-spacing: .08em;
    text-decoration: none; text-align: center; line-height: 1.2;
    border: 0; cursor: pointer; color: var(--bg-0);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    transition: filter .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn small { display: block; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; font-size: .74rem; opacity: .75; margin-top: 2px; }
.btn-primary {
    background: var(--gold-btn);
    color: #1A1206;
    text-shadow: 0 1px 0 rgba(255,240,200,.35);
}
.btn-primary::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn-primary:hover { color: #1A1206; filter: brightness(1.08) drop-shadow(0 0 14px rgba(255,215,120,.35)); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-secondary, .btn-purple, .btn-ghost {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
    color: var(--gold-hi);
}
.btn-secondary::before, .btn-purple::before, .btn-ghost::before {
    --cut2: calc(var(--cut) - .5px);
    content: ""; position: absolute; inset: 1px; z-index: -1;
    background: linear-gradient(180deg, #24160C, #120A05);
    clip-path: polygon(var(--cut2) 0, calc(100% - var(--cut2)) 0, 100% var(--cut2), 100% calc(100% - var(--cut2)), calc(100% - var(--cut2)) 100%, var(--cut2) 100%, 0 calc(100% - var(--cut2)), 0 var(--cut2));
    transition: background .25s var(--ease);
}
.btn-secondary:hover, .btn-purple:hover, .btn-ghost:hover { color: #fff; filter: drop-shadow(0 0 12px rgba(255,215,120,.25)); }
.btn-secondary:hover::before, .btn-purple:hover::before, .btn-ghost:hover::before { background: linear-gradient(180deg, #33200F, #1A0F07); }
.btn-arcane { background: linear-gradient(180deg, #7C8CF0, #4652B8); color: #fff; }
.btn-arcane:hover { color: #fff; filter: brightness(1.1) drop-shadow(0 0 14px rgba(88,101,242,.45)); }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: 16px 38px; font-size: 1rem; }

/* Estado bloqueado (antes da inauguração) */
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(.85) brightness(.62);
    pointer-events: auto;
}
.btn[aria-disabled="true"]:hover { filter: grayscale(.85) brightness(.62); transform: none; }
.btn[aria-disabled="true"]::after { display: none; }
.btn .lock { display: none; }
.btn[aria-disabled="true"] .lock { display: inline-block; }
.btn.is-unlocked { animation: unlockPulse 1.6s var(--ease) 1; }
@keyframes unlockPulse {
    0% { filter: brightness(2) drop-shadow(0 0 30px rgba(255,215,120,.9)); }
    100% { filter: none; }
}

/* ---------- 5. HERO / SCENE ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--bg-0); }
.scene-sky {
    position: absolute; inset: 0;
    background:
        radial-gradient(55% 60% at 80% 55%, rgba(255,120,40,.45), transparent 70%),
        radial-gradient(45% 40% at 70% 20%, rgba(214,120,60,.25), transparent 70%),
        radial-gradient(60% 50% at 15% 10%, rgba(120,70,40,.30), transparent 70%),
        linear-gradient(180deg, #24140B 0%, #3A1E0E 40%, #1C0F07 75%, #0D0805 100%);
}
.scene-art {
    position: absolute; inset: 0; background-size: cover; background-position: center 30%;
    opacity: 0; transition: opacity 1.2s var(--ease);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.scene.has-art .scene-art { opacity: 1; }
.scene.has-art .scene-far, .scene.has-art .scene-mid, .scene.has-art .scene-near { display: none; }
.scene.has-art .scene-fire { opacity: .45; }
.scene-layer { position: absolute; left: -3%; width: 106%; max-width: none; bottom: 0; height: 100%; will-change: transform; }
.scene-far { transform: translate3d(0, 0, 0); }
.scene-windows rect { animation: flicker 6s ease-in-out infinite; }
.scene-windows rect:nth-child(3n) { animation-delay: -2s; animation-duration: 7.5s; }
.scene-windows rect:nth-child(4n) { animation-delay: -4s; animation-duration: 5s; }
@keyframes flicker { 0%,100% { opacity: .95; } 45% { opacity: .7; } 52% { opacity: .9; } 70% { opacity: .78; } }
.scene-fire {
    position: absolute; inset: auto 0 0 0; height: 45%;
    background:
        radial-gradient(40% 70% at 50% 100%, rgba(255,128,40,.28), transparent 70%),
        radial-gradient(25% 50% at 12% 100%, rgba(255,110,30,.22), transparent 70%),
        radial-gradient(25% 50% at 90% 100%, rgba(139,26,26,.35), transparent 70%);
    mix-blend-mode: screen;
    animation: fireBreath 7s ease-in-out infinite alternate;
}
@keyframes fireBreath { from { opacity: .75; } to { opacity: 1; } }
.scene-fog {
    position: absolute; left: -50%; width: 200%; pointer-events: none;
    background:
        radial-gradient(30% 50% at 20% 50%, rgba(190,150,110,.14), transparent 70%),
        radial-gradient(25% 45% at 55% 60%, rgba(190,150,110,.12), transparent 70%),
        radial-gradient(30% 50% at 85% 45%, rgba(190,150,110,.14), transparent 70%);
    filter: blur(8px);
}
.scene-fog-back { bottom: 18%; height: 34%; animation: drift 90s linear infinite; opacity: .9; }
.scene-fog-front { bottom: -4%; height: 30%; animation: drift 60s linear infinite reverse; opacity: .8; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(25%); } }
.scene-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(13,8,5,.85) 100%),
        linear-gradient(180deg, rgba(13,8,5,.55) 0%, transparent 22%, transparent 60%, var(--bg-0) 100%);
}

.hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: calc(var(--nav-h) + var(--s-6)) var(--s-5) var(--s-8);
    text-align: center; overflow: hidden; isolation: isolate;
}
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 980px; }
.hero-content::before { /* sombra atrás do conteúdo para legibilidade sobre a cena */
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 120%; height: 115%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(13,8,5,.72), rgba(13,8,5,.35) 60%, transparent);
    pointer-events: none;
}
.hero-crest { display: block; width: 84px; height: 84px; margin: 0 auto var(--s-4); filter: drop-shadow(0 0 22px rgba(255,215,120,.35)); }
.hero-edition {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--font-head); font-weight: 600; font-size: clamp(.8rem, 1.6vw, .98rem);
    letter-spacing: .32em; color: var(--gold); margin-bottom: var(--s-3);
}
.hero-edition::before, .hero-edition::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-edition::after { transform: scaleX(-1); }
.hero-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(3rem, 10.5vw, 7.4rem); line-height: .95; letter-spacing: .02em;
    background: var(--gold-metal);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(60,40,10,.6)) drop-shadow(0 0 28px rgba(255,200,100,.22));
    margin-bottom: var(--s-3);
}
.hero-subtitle { font-family: var(--font-head); color: var(--text); font-size: var(--fs-lg); letter-spacing: .06em; }
.hero-desc {
    color: #C4CAD6; font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 58ch;
    margin: var(--s-4) auto var(--s-6); line-height: 1.75;
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.hero-btns { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: var(--s-5); color: var(--text-2); font-size: var(--fs-sm); max-width: 52ch; margin-inline: auto; }
.hero-scroll {
    position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%);
    width: 22px; height: 36px; border: 1px solid var(--line-strong); border-radius: 12px;
}
.hero-scroll::after {
    content: ""; position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px;
    background: var(--gold); animation: scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* Status ao vivo no hero da home (pós-inauguração) */
.hero-live {
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0;
    margin-top: var(--s-6);
    border: 1px solid var(--line); background: rgba(13,8,5,.6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-live > div { padding: 12px 24px; display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.hero-live > div + div { border-left: 1px solid var(--line-soft); }
.hero-live b { font-family: var(--font-ui); font-weight: 700; font-size: 1.45rem; color: var(--gold-hi); line-height: 1.1; }
.hero-live span { font-size: var(--fs-xs); color: var(--text-2); }

/* Indicadores de estado */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2.4s infinite; }
.dot.off { background: var(--bad); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.55); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* ---------- 6. COUNTDOWN ---------- */
.launch { position: relative; }
.launch-lead { font-family: var(--font-head); color: var(--text); font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: .04em; margin: var(--s-5) 0 var(--s-4); }
.countdown {
    display: flex; align-items: stretch; justify-content: center; gap: clamp(6px, 1.6vw, 18px);
    margin: 0 auto;
}
.cd-unit {
    position: relative; width: clamp(70px, 17vw, 150px); padding: clamp(12px, 2vw, 22px) 6px clamp(10px, 1.6vw, 16px);
    display: flex; flex-direction: column; align-items: center;
    background:
        linear-gradient(180deg, rgba(255,215,120,.06), transparent 40%),
        linear-gradient(180deg, rgba(36,22,12,.9), rgba(14,8,5,.94));
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 4px rgba(13,8,5,.6), inset 0 0 0 5px rgba(212,175,85,.18), 0 20px 40px rgba(0,0,0,.6);
}
.cd-unit::before { /* cantoneiras */
    --c: var(--gold-hi); --l: 12px;
    content: ""; position: absolute; inset: -1px; pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) left top / var(--l) 2px, linear-gradient(var(--c), var(--c)) left top / 2px var(--l),
        linear-gradient(var(--c), var(--c)) right top / var(--l) 2px, linear-gradient(var(--c), var(--c)) right top / 2px var(--l),
        linear-gradient(var(--c), var(--c)) left bottom / var(--l) 2px, linear-gradient(var(--c), var(--c)) left bottom / 2px var(--l),
        linear-gradient(var(--c), var(--c)) right bottom / var(--l) 2px, linear-gradient(var(--c), var(--c)) right bottom / 2px var(--l);
    background-repeat: no-repeat;
}
.cd-num {
    font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums lining-nums;
    font-size: clamp(2rem, 7vw, 4.4rem); line-height: 1;
    background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 16px rgba(255,200,100,.25));
}
.cd-num.tick { animation: tick .45s var(--ease); }
@keyframes tick { 0% { transform: translateY(-6px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.cd-label { margin-top: 8px; font-family: var(--font-ui); font-weight: 600; font-size: clamp(.68rem, 1.4vw, .85rem); letter-spacing: .16em; color: var(--text-2); text-transform: uppercase; }
.cd-sep { align-self: center; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); opacity: .7; flex: none; }
.launch-when { margin-top: var(--s-5); font-family: var(--font-head); color: var(--gold-hi); font-size: clamp(.92rem, 1.7vw, 1.05rem); letter-spacing: .05em; }
.launch-local { margin-top: 4px; color: var(--text-2); font-size: var(--fs-sm); min-height: 1.4em; }
.launch-actions { margin-top: var(--s-6); }
.launch-open-msg { display: none; margin-top: var(--s-4); color: var(--gold-hi); font-family: var(--font-head); }
.launch.is-open .launch-open-msg { display: block; }

/* Página de entrada (splash) */
.splash { min-height: 100vh; min-height: 100svh; }
.splash .hero { padding-top: var(--s-8); padding-bottom: var(--s-7); }
.splash-top {
    position: fixed; top: 0; right: 0; z-index: 20; display: flex; gap: 6px; padding: 14px 16px;
}
.splash-foot { position: relative; z-index: 2; text-align: center; padding: 0 var(--s-5) var(--s-5); color: var(--text-2); font-size: var(--fs-xs); margin-top: -40px; }

/* ---------- 7. NAVIGATION ---------- */
.navbar {
    position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--nav-h);
    background: linear-gradient(180deg, rgba(13,8,5,.85), rgba(13,8,5,0));
    transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
    opacity: 0; transition: opacity .35s var(--ease);
}
.navbar.scrolled { background: rgba(13,8,5,.94); box-shadow: 0 10px 30px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.navbar.scrolled::after { opacity: 1; }
.nav-container { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 var(--s-5); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.nav-logo svg { width: 42px; height: 42px; filter: drop-shadow(0 0 10px rgba(255,215,120,.25)); }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-sub { font-family: var(--font-head); font-size: .62rem; letter-spacing: .26em; color: var(--text-2); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
    position: relative; padding: 10px 13px;
    font-family: var(--font-head); font-weight: 600; font-size: .8rem; letter-spacing: .08em;
    color: #C9CED8; text-decoration: none;
}
.nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
    transform: translateX(-50%); transition: width .3s var(--ease);
}
.nav-link:hover { color: var(--gold-hi); }
.nav-link:hover::after, .nav-link.active::after { width: 70%; }
.nav-link.active { color: var(--gold-hi); }
.nav-cta { margin-left: var(--s-3); min-height: 40px; padding: 9px 20px; font-size: .78rem; --cut: 7px; }
.nav-right { display: flex; align-items: center; gap: var(--s-3); }
.lang-switcher { display: flex; gap: 2px; border: 1px solid var(--line-soft); padding: 2px; }
.lang-btn {
    font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .06em;
    color: var(--text-2); padding: 4px 8px; text-decoration: none; line-height: 1.4;
}
.lang-btn:hover { color: var(--gold-hi); }
.lang-btn.active { color: var(--bg-0); background: var(--gold); }
.hamburger { display: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); cursor: pointer; position: relative; }
.hamburger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--gold); transition: transform .3s var(--ease), opacity .2s; }
.hamburger span:nth-child(1) { top: 15px; } .hamburger span:nth-child(2) { top: 21px; } .hamburger span:nth-child(3) { top: 27px; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 8. HOME SECTIONS ---------- */
.section { position: relative; max-width: var(--wrap); margin: 0 auto; padding: var(--s-9) var(--s-5); }
.section-tight { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.section-header { text-align: center; margin-bottom: var(--s-7); }
.section-tag {
    display: inline-block; font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .14em; color: var(--gold); margin-bottom: var(--s-3);
}
.section-title { font-size: var(--fs-2xl); color: var(--text); letter-spacing: .03em; }
.section-title.gold, .section-header .section-title { background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-desc { color: var(--text-2); max-width: 60ch; margin: var(--s-3) auto 0; line-height: 1.7; }
.band { position: relative; border-block: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(16,24,39,.65), rgba(13,8,5,.4)); }

/* Rates — ledger horizontal */
.rates { display: grid; grid-template-columns: repeat(6, 1fr); }
.rate { padding: var(--s-5) var(--s-3); text-align: center; position: relative; }
.rate + .rate::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, var(--line-strong), transparent); }
.rate b { display: block; font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; color: var(--gold-hi); }
.rate span { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--text-2); }

/* Features — códice dividido por filetes */
.codex { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; }
.codex-item { padding: var(--s-6) var(--s-6) var(--s-6); border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); transition: background .3s var(--ease); }
.codex-item:nth-child(3n) { border-right: 0; }
.codex-item:nth-last-child(-n+3) { border-bottom: 0; }
.codex-item:hover { background: rgba(212,175,85,.04); }
.codex-icon { width: 40px; height: 40px; color: var(--gold); margin-bottom: var(--s-4); }
.codex-item h3 { font-size: 1.08rem; color: var(--gold-hi); margin-bottom: var(--s-2); }
.codex-item p { color: var(--text-2); font-size: .94rem; }
.section-cta { text-align: center; margin-top: var(--s-6); }

/* Raças — estandartes */
.races { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
.race {
    --tint: var(--gold);
    position: relative; padding: var(--s-6) var(--s-4) calc(var(--s-7) + 8px); text-align: center;
    background:
        radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--tint) 28%, transparent), transparent 70%),
        linear-gradient(180deg, #26170C, #110A05);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px));
    transition: transform .4s var(--ease);
}
.race::before { content: ""; position: absolute; inset: 0; border-top: 2px solid var(--tint); pointer-events: none; }
.race::after {
    content: ""; position: absolute; inset: 1px; pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 35%, transparent);
}
.race:hover { transform: translateY(-6px); }
.race-sigil { width: 54px; height: 54px; margin: 0 auto var(--s-4); color: var(--tint); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--tint) 50%, transparent)); }
.race h3 { font-size: 1.15rem; margin-bottom: var(--s-2); color: var(--text); }
.race p { font-size: .88rem; color: var(--text-2); line-height: 1.6; }
.race-human { --tint: #D4AF55; }
.race-elf { --tint: #6FB4EA; }
.race-delf { --tint: #8F7BDB; }
.race-orc { --tint: #C2402F; }
.race-dwarf { --tint: #C98A3E; }

/* Guerra — split com luz carmesim */
.war { position: relative; overflow: hidden; }
.war::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(50% 70% at 0% 50%, rgba(139,26,26,.35), transparent 70%),
        radial-gradient(40% 60% at 100% 100%, rgba(255,120,40,.10), transparent 70%);
}
.war-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-8); align-items: center; }
.war-intro .section-title { text-align: left; background: none; color: var(--text); }
.war-intro .ornament { margin-left: 0; justify-content: flex-start; }
.war-intro p { color: var(--text-2); margin-top: var(--s-4); max-width: 44ch; }
.war-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(194,64,47,.4); }
.war-item { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: 1px solid var(--line-soft); }
.war-item:nth-child(odd) { padding-right: var(--s-6); border-right: 1px solid var(--line-soft); }
.war-item:nth-child(even) { padding-left: var(--s-6); }
.war-item h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.war-item h3 svg { width: 22px; height: 22px; color: var(--crimson-hi); flex: none; }
.war-item p { color: var(--text-2); font-size: .92rem; }

/* Passos para começar */
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); counter-reset: step; }
.start-step { position: relative; padding: var(--s-6) var(--s-5) var(--s-5); }
.start-step .num {
    position: absolute; top: -18px; left: var(--s-5); width: 36px; height: 36px;
    display: grid; place-items: center; transform: rotate(45deg);
    background: var(--bg-0); border: 1px solid var(--gold);
}
.start-step .num b { transform: rotate(-45deg); font-family: var(--font-head); color: var(--gold-hi); font-size: 1rem; }
.start-step h3 { font-size: 1.05rem; margin: var(--s-2) 0 6px; color: var(--gold-hi); }
.start-step p { color: var(--text-2); font-size: .93rem; margin-bottom: var(--s-4); }
.start-step .btn { min-height: 42px; padding: 10px 20px; font-size: .8rem; }
.copy-host {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 10px 14px; background: rgba(0,0,0,.35); border: 1px dashed var(--line-strong);
    color: var(--gold-hi); font-family: ui-monospace, Consolas, monospace; font-size: .9rem; cursor: pointer; text-align: left;
}
.copy-host:hover { border-style: solid; }
.copy-host small { font-family: var(--font-body); color: var(--text-2); font-size: .72rem; }

/* Linha "ao vivo": ranking + status + avisos */
.live-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-5); align-items: start; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-size: 1.05rem; color: var(--gold-hi); }
.panel-head a { font-size: var(--fs-sm); }
.panel-body { padding: var(--s-5); }
.side-stack { display: grid; gap: var(--s-5); }
.status-rows { display: grid; gap: 10px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .95rem; }
.status-row .val { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; }
.status-row .val.on { color: var(--ok); } .status-row .val.off { color: var(--bad); }
.status-row .val.num { color: var(--gold-hi); font-size: 1.3rem; }
.news-item + .news-item { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.news-item time { font-family: var(--font-ui); font-weight: 600; color: var(--arcane-hi); font-size: .85rem; letter-spacing: .04em; }
.news-item h4 { font-size: 1rem; margin: 2px 0 4px; }
.news-item p { color: var(--text-2); font-size: .92rem; }
.empty { padding: var(--s-6) var(--s-5); text-align: center; color: var(--text-2); }

/* Comunidade */
.community {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6);
    padding: var(--s-6) var(--s-7);
    background:
        radial-gradient(60% 120% at 0% 50%, rgba(88,101,242,.22), transparent 70%),
        linear-gradient(180deg, rgba(22,32,51,.85), rgba(12,18,30,.9));
}
.community svg.discord { width: 56px; height: 56px; color: #8C9CFF; }
.community h2 { font-size: var(--fs-xl); }
.community p { color: var(--text-2); }

/* ---------- 9. TABLES & RANKING ---------- */
.table-wrapper { overflow-x: auto; padding: 0; }
.table-wrapper::before { z-index: 1; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
thead th {
    text-align: left; padding: 14px 18px; white-space: nowrap;
    font-family: var(--font-head); font-weight: 600; font-size: .76rem; letter-spacing: .1em; color: var(--gold);
    background: rgba(13,8,5,.55); border-bottom: 1px solid var(--line);
}
tbody td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); color: #CDD2DC; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(212,175,85,.05); }
td.num, th.num { text-align: right; font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }
td.num { color: var(--gold-hi); font-size: 1.02rem; }
.rank-tabs { display: flex; border-bottom: 1px solid var(--line); background: rgba(13,8,5,.4); overflow-x: auto; }
.rank-tab {
    position: relative; flex: none; padding: 14px 22px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: var(--text-2);
}
.rank-tab:hover { color: var(--gold-hi); }
.rank-tab.active { color: var(--gold-hi); }
.rank-tab.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--gold-btn); }
.rank-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; font-family: var(--font-head); font-weight: 700; color: var(--text-2); }
.rank-1, .rank-2, .rank-3 { position: relative; isolation: isolate; }
.rank-1::before, .rank-2::before, .rank-3::before {
    content: ""; position: absolute; inset: 4px; z-index: -1; transform: rotate(45deg);
    border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent);
}
.rank-1 { color: #FFD778; }
.rank-2 { color: #D6DCE6; }
.rank-3 { color: #D08A4E; }
.badge { display: inline-block; padding: 3px 10px; font-size: .74rem; font-weight: 600; letter-spacing: .03em; border: 1px solid; white-space: nowrap; }
.badge-purple { color: var(--arcane-hi); border-color: rgba(242,163,94,.35); background: rgba(217,119,46,.1); }
.badge-gold { color: var(--gold-hi); border-color: var(--line-strong); background: rgba(212,175,85,.08); }
.badge-red { color: #F2A196; border-color: rgba(194,64,47,.45); background: rgba(139,26,26,.18); }
.player-name { font-weight: 600; color: var(--text); }

/* ---------- 10. FORMS & ALERTS ---------- */
.form-wrapper { max-width: 500px; margin: 0 auto; padding: var(--s-7) var(--s-6); }
.form-group { margin-bottom: var(--s-4); }
.form-label { display: block; margin-bottom: 6px; font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: var(--gold); }
.form-input {
    width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--text);
    background: rgba(5,8,14,.7); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,85,.15); }
.form-input::placeholder { color: #5E6677; }
.form-btn {
    --cut: var(--chamfer); width: 100%; min-height: 52px; margin-top: var(--s-2);
    font-family: var(--font-head); font-weight: 700; font-size: .95rem; letter-spacing: .08em;
    border: 0; cursor: pointer; color: #1A1206; background: var(--gold-btn);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    transition: filter .25s;
}
.form-btn:hover { filter: brightness(1.1) drop-shadow(0 0 12px rgba(255,215,120,.35)); }
.form-link { margin-top: var(--s-4); text-align: center; font-size: var(--fs-sm); }
.alert { padding: 12px 16px; margin-bottom: var(--s-4); border-left: 3px solid; font-size: .94rem; }
.alert-success { background: rgba(74,222,128,.08); border-color: var(--ok); color: #BBF7D0; }
.alert-error { background: rgba(139,26,26,.22); border-color: var(--crimson-hi); color: #FECACA; }

/* ---------- 11. LEGACY PAGE BLOCKS ---------- */
.page-hero {
    position: relative; min-height: 340px; display: flex; align-items: flex-end; justify-content: center; text-align: center;
    padding: calc(var(--nav-h) + var(--s-7)) var(--s-5) var(--s-7); overflow: hidden; isolation: isolate;
    background:
        radial-gradient(60% 90% at 75% 0%, rgba(232,118,42,.30), transparent 70%),
        radial-gradient(40% 80% at 10% 100%, rgba(255,128,40,.14), transparent 70%),
        linear-gradient(180deg, #1A0E07, var(--bg-0));
    border-bottom: 1px solid var(--line-soft);
}
.page-hero::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
    background: var(--bg-0); border: 1px solid var(--gold);
}
.page-hero-title {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.8rem);
    background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 20px rgba(255,200,100,.18));
}
.page-hero-sub { margin-top: var(--s-2); color: var(--text-2); font-size: 1.05rem; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { padding: var(--s-6) var(--s-5); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card-icon { font-size: 1.9rem; line-height: 1; margin-bottom: var(--s-4); filter: saturate(.7); }
.card-title { font-size: 1.08rem; color: var(--gold-hi); margin-bottom: var(--s-2); }
.card-desc { color: var(--text-2); font-size: .93rem; }
.card-list { list-style: none; margin-top: var(--s-3); }
.card-list li { position: relative; padding: 5px 0 5px 18px; color: #C7CCD6; font-size: .9rem; border-bottom: 1px solid var(--line-soft); }
.card-list li:last-child { border-bottom: 0; }
.card-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid var(--gold); }
.highlight-box { padding: var(--s-6); }

.info-strip { position: relative; border-block: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(16,24,39,.7), rgba(13,8,5,.5)); padding: var(--s-5) var(--s-5); }
.info-strip-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.info-strip-item { flex: 1 1 140px; padding: var(--s-3); text-align: center; }
.info-strip-value { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 1.6rem; color: var(--gold-hi); }
.info-strip-label { font-size: var(--fs-sm); color: var(--text-2); }

.steps { display: grid; gap: var(--s-4); }
.step { display: flex; gap: var(--s-5); padding: var(--s-5); align-items: flex-start; }
.step-num {
    position: relative; isolation: isolate; flex: none; width: 40px; height: 40px; margin: 4px;
    display: grid; place-items: center;
    color: var(--gold-hi); font-family: var(--font-head); font-weight: 700; font-size: 1rem;
}
.step-num::before {
    content: ""; position: absolute; inset: 6px; z-index: -1; transform: rotate(45deg);
    border: 1px solid var(--gold); background: var(--bg-0);
}
.step-content h3 { font-size: 1.05rem; color: var(--gold-hi); margin-bottom: 4px; }
.step-content p { color: var(--text-2); font-size: .94rem; }

.connect-box { padding: var(--s-6); text-align: center; }
.connect-host { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; color: var(--gold-hi); padding: 12px; border: 1px dashed var(--line-strong); background: rgba(0,0,0,.3); }

.req-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.req-card { padding: var(--s-5) var(--s-6); }
.req-card h3 { font-size: 1.05rem; color: var(--gold-hi); margin-bottom: var(--s-3); }
.req-row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
.req-row:last-child { border-bottom: 0; }
.req-label { color: var(--text-2); }
.req-value { color: var(--text); text-align: right; }

.donate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.donate-card { padding: var(--s-6) var(--s-5); text-align: center; display: flex; flex-direction: column; }
.donate-card.featured { border-color: var(--line-strong); box-shadow: var(--glow-gold), var(--shadow); }
.featured-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 3px 14px; background: var(--gold-btn); color: #1A1206; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .1em; white-space: nowrap; }
.donate-icon { font-size: 2.2rem; margin-bottom: var(--s-3); }
.donate-name { font-size: 1.2rem; color: var(--gold-hi); }
.donate-price { font-family: var(--font-ui); font-weight: 700; font-size: 2.3rem; color: var(--text); margin: var(--s-3) 0 2px; }
.donate-price span { font-size: 1rem; color: var(--text-2); }
.donate-coins { color: var(--arcane-hi); font-size: .9rem; margin-bottom: var(--s-4); }
.donate-perks { list-style: none; text-align: left; margin-bottom: var(--s-5); flex: 1; }
.donate-perks li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; color: #C7CCD6; display: flex; gap: 8px; }
.donate-perks li:last-child { border-bottom: 0; }
.perk-check { color: var(--gold); }

.custom-card { overflow: hidden; transition: border-color .3s, transform .3s var(--ease); }
.custom-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.custom-card-img { position: relative; height: 170px; display: grid; place-items: center; font-size: 3rem; background: radial-gradient(70% 90% at 50% 100%, rgba(232,118,42,.28), transparent 70%), #1A0F08; border-bottom: 1px solid var(--line-soft); }
.custom-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13,8,5,.6)); }
.custom-card-body { padding: var(--s-5); }
.custom-card-title { font-size: 1.05rem; color: var(--gold-hi); margin-bottom: 6px; }
.custom-card-desc { color: var(--text-2); font-size: .92rem; }
.custom-tag { display: inline-block; margin: 8px 6px 0 0; padding: 2px 9px; font-size: .72rem; color: var(--gold); border: 1px solid var(--line); }

/* compat: classes de status antigas */
.status-online { color: var(--ok) !important; display: inline-flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* ---------- 12. FOOTER & UTILITIES ---------- */
.footer { position: relative; margin-top: var(--s-8); border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, #140C07, #080503); }
.footer::before { content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); border: 1px solid var(--gold); background: var(--bg-0); }
.footer-container { max-width: var(--wrap); margin: 0 auto; padding: var(--s-8) var(--s-5) var(--s-5); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-7); }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); }
.footer-logo span { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-desc { color: var(--text-2); font-size: .92rem; max-width: 36ch; }
.footer-social { display: flex; gap: 8px; margin-top: var(--s-4); }
.social-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--text-2); transition: color .2s, border-color .2s; }
.social-btn:hover { color: var(--gold-hi); border-color: var(--line-strong); }
.footer-title { font-size: .85rem; letter-spacing: .1em; color: var(--gold); margin-bottom: var(--s-4); }
.footer-links { list-style: none; display: grid; gap: 8px; }
.footer-links a { color: #B5BBC7; font-size: .92rem; }
.footer-links a:hover { color: var(--gold-hi); }
.footer-info { display: grid; gap: 6px; }
.info-row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.info-row:last-child { border-bottom: 0; }
.info-label { color: var(--text-2); }
.info-val { color: var(--text); font-family: var(--font-ui); font-weight: 600; }
.info-val.gold { color: var(--gold-hi); }
.footer-bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: #6B7385; font-size: .82rem; }

/* Toast */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 3000; padding: 12px 20px; background: var(--gold-btn); color: #1A1206; font-family: var(--font-head); font-weight: 700; font-size: .88rem; box-shadow: var(--shadow); animation: toastIn .3s var(--ease); }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Uma única sequência de entrada (hero) */
.fade-in { opacity: 0; animation: riseIn .9s var(--ease) forwards; }
.fade-in-1 { animation-delay: .05s; } .fade-in-2 { animation-delay: .18s; } .fade-in-3 { animation-delay: .3s; }
.fade-in-4 { animation-delay: .42s; } .fade-in-5 { animation-delay: .54s; } .fade-in-6 { animation-delay: .66s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* cards fora do hero não precisam "piscar" ao carregar */
.section .fade-in { opacity: 1; animation: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
    .nav-link { padding: 10px 9px; font-size: .74rem; }
    .races { grid-template-columns: repeat(5, minmax(200px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); }
    .race { scroll-snap-align: start; }
}
@media (max-width: 1024px) {
    :root { --nav-h: 66px; }
    .hamburger { display: block; }
    .nav-links {
        position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-4) var(--s-5) var(--s-7);
        background: rgba(13,8,5,.98); overflow-y: auto;
        transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s;
    }
    .nav-links.open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
    .nav-link { padding: 16px 4px; font-size: .95rem; border-bottom: 1px solid var(--line-soft); }
    .nav-link::after { display: none; }
    .nav-cta { margin: var(--s-5) 0 0; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .rates { grid-template-columns: repeat(3, 1fr); }
    .rate:nth-child(4)::before { display: none; }
    .rate:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
    .codex, .grid-3, .donate-grid { grid-template-columns: repeat(2, 1fr); }
    .codex-item:nth-child(3n) { border-right: 1px solid var(--line-soft); }
    .codex-item:nth-child(2n) { border-right: 0; }
    .codex-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
    .codex-item:nth-last-child(-n+2) { border-bottom: 0; }
    .war-grid, .live-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .section { padding: var(--s-8) var(--s-4); }
    .hero { padding-left: var(--s-4); padding-right: var(--s-4); }
    .hero-edition { letter-spacing: .2em; }
    .hero-edition::before, .hero-edition::after { width: 20px; }
    .hero-btns { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto; }
    .cd-sep { display: none; }
    .cd-label { letter-spacing: .06em; }
    .hero-title { font-size: clamp(3.2rem, 14vw, 4.5rem); }
    .countdown { gap: 8px; }
    .rates { grid-template-columns: repeat(2, 1fr); }
    .rate::before { display: none; }
    .rate { border-bottom: 1px solid var(--line-soft); }
    .rate:nth-child(odd) { border-right: 1px solid var(--line-soft); }
    .rate:nth-last-child(-n+2) { border-bottom: 0; }
    .codex, .grid-2, .grid-3, .grid-4, .donate-grid, .req-grid, .start-grid { grid-template-columns: 1fr; }
    .codex-item { border-right: 0 !important; border-bottom: 1px solid var(--line-soft) !important; padding: var(--s-5); }
    .codex-item:last-child { border-bottom: 0 !important; }
    .war-list { grid-template-columns: 1fr; }
    .war-item, .war-item:nth-child(odd), .war-item:nth-child(even) { padding: var(--s-4) 0; border-right: 0; }
    .start-grid { gap: var(--s-6); }
    .community { grid-template-columns: 1fr; text-align: center; padding: var(--s-6) var(--s-5); justify-items: center; }
    .hero-live > div { min-width: 0; flex: 1 1 33%; padding: 10px 12px; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .form-wrapper { padding: var(--s-6) var(--s-4); }
    thead th, tbody td { padding: 11px 12px; }
    .logo-sub { display: none; }
    .lang-btn { padding: 4px 6px; }
}

/* Preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .fade-in { opacity: 1; }
    .scene-embers { display: none; }
}

/* Botão bloqueado mostra só o cadeado */
.btn[aria-disabled="true"] svg:not(.lock) { display: none; }

/* ============================================================
   13. LAYOUT "STAGE" — coluna central + artes laterais
   (inspirado em sites clássicos de servidores L2)
   ============================================================ */
.scene-dragon { animation: glide 38s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes glide { from { transform: translate(-60px, 10px); } to { transform: translate(90px, -20px); } }
.scene-smoke { animation: smoke 14s ease-in-out infinite alternate; }
@keyframes smoke { from { opacity: .55; transform: translateY(6px); } to { opacity: .85; transform: translateY(-10px); } }
.scene-flames path { transform-box: fill-box; transform-origin: 50% 100%; animation: flame 1.6s ease-in-out infinite alternate; }
.scene-flames path:nth-child(2n) { animation-duration: 1.2s; }
.scene-flames path:nth-child(3n) { animation-duration: 2s; }
@keyframes flame { from { transform: scaleY(.85) skewX(-3deg); } to { transform: scaleY(1.12) skewX(3deg); } }

.stage { position: relative; isolation: isolate; overflow: hidden; padding-top: calc(var(--nav-h) + 28px); }
.stage > .scene {
    position: absolute; inset: 0 0 auto 0; height: 1200px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%);
}
.stage::after { /* brilho de fogo que continua pela página */
    content: ""; position: absolute; inset: 900px 0 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40% 30% at 0% 20%, rgba(158,43,25,.18), transparent 70%),
        radial-gradient(40% 30% at 100% 55%, rgba(232,118,42,.12), transparent 70%);
}

.side-art { position: absolute; top: calc(var(--nav-h) + 10px); z-index: 1; pointer-events: none; }
.side-left  { right: calc(50% + 470px); }
.side-right { left:  calc(50% + 470px); }
.side-art .war-banner { width: 180px; height: auto; transform-origin: 50% 0; animation: sway 7s ease-in-out infinite alternate; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.side-right .war-banner { animation-delay: -3.5s; }
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.side-art.has-img { top: calc(var(--nav-h) - 20px); height: 1050px; width: clamp(360px, 34vw, 640px); }
.side-left.has-img  { right: calc(50% + 300px); }
.side-right.has-img { left:  calc(50% + 300px); }
.side-art img {
    width: 100%; height: 100%; object-fit: contain; object-position: top center;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    filter: drop-shadow(0 0 40px rgba(0,0,0,.5));
}
.side-left img { object-position: top right; }
.side-right img { object-position: top left; }

.column { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 var(--s-5) var(--s-7); }

/* Marca */
.brand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }
.brand-crest { filter: drop-shadow(0 0 18px rgba(255,190,100,.35)); }
.brand-title {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: .95;
    background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(50,25,5,.8)) drop-shadow(0 0 22px rgba(255,170,80,.28));
}
.brand-sub { font-family: var(--font-head); color: var(--gold); font-size: .85rem; letter-spacing: .14em; margin-top: 6px; }
.brand-stats { display: grid; gap: 4px; text-align: right; font-size: .82rem; }
.brand-stats div { display: flex; justify-content: flex-end; gap: 10px; align-items: baseline; }
.brand-stats dt { color: var(--text-2); }
.brand-stats dd { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; color: var(--gold-hi); display: inline-flex; align-items: center; gap: 6px; min-width: 64px; justify-content: flex-end; }
.brand-stats dd.on { color: var(--ok); } .brand-stats dd.off { color: var(--bad); }

/* Painel quente translúcido */
.panel-warm {
    position: relative;
    background: linear-gradient(180deg, rgba(40,22,10,.62), rgba(18,10,5,.72));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 rgba(255,220,150,.08), 0 30px 60px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.col-title {
    font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15;
    background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(40,20,5,.9));
}
.col-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.col-head a { font-size: var(--fs-sm); }
.col-desc { color: var(--text-2); margin: 6px 0 var(--s-5); }
.block { margin-top: var(--s-8); }
.block > .col-title { margin-bottom: var(--s-4); }

/* Intro */
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-6); padding: var(--s-6); align-items: center; }
.intro-text p { color: #D9CBB4; margin: var(--s-3) 0 var(--s-2); line-height: 1.75; }
.intro-more { font-size: var(--fs-sm); border-bottom: 1px dashed currentColor; }
.intro-cta { margin-top: var(--s-5); }
.media-frame {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; cursor: pointer;
    background-color: #120A05; background-size: cover; background-position: center;
    box-shadow: 0 0 0 1px var(--gold-lo), 0 0 0 5px rgba(13,8,5,.9), 0 0 0 6px var(--gold), 0 20px 40px rgba(0,0,0,.6);
}
.media-emblem { cursor: default; display: grid; place-items: center; align-content: center; gap: 10px;
    background: radial-gradient(60% 70% at 50% 60%, rgba(232,118,42,.35), transparent 70%), linear-gradient(180deg, #2A170B, #120A05); }
.media-emblem span { font-family: var(--font-head); color: var(--gold); letter-spacing: .2em; font-size: .8rem; }
.media-emblem svg { filter: drop-shadow(0 0 30px rgba(255,170,80,.4)); }
.play-btn { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%,-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(232,118,42,.95), rgba(158,43,25,.95)); box-shadow: 0 0 0 3px rgba(246,212,142,.8), 0 0 30px rgba(255,140,60,.6); transition: transform .3s var(--ease); }
.play-btn::after { content: ""; position: absolute; left: 31px; top: 23px; border-left: 22px solid #FFF3DD; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.media-frame:hover .play-btn { transform: translate(-50%,-50%) scale(1.08); }
.media-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Botão de fogo (CTA principal) */
.btn-fire {
    --cut: 12px;
    background: var(--fire-btn);
    color: #FFF3DD; text-shadow: 0 1px 2px rgba(60,10,0,.8), 0 0 12px rgba(255,180,90,.4);
    filter: drop-shadow(0 0 18px rgba(232,118,42,.45));
}
.btn-fire::before {
    --c2: calc(var(--cut) - 3px);
    content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
    clip-path: polygon(var(--c2) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c2));
    box-shadow: inset 0 0 0 1px rgba(255,225,160,.65), inset 0 10px 18px rgba(255,230,180,.25);
}
.btn-fire:hover { color: #fff; filter: brightness(1.12) drop-shadow(0 0 28px rgba(255,150,60,.7)); }
.btn-xl { min-height: 64px; padding: 18px 52px; font-size: 1.25rem; letter-spacing: .06em; }

/* Rates */
.rates-ribbon { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: var(--s-4); border-block: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(40,22,10,.6) 15%, rgba(40,22,10,.6) 85%, transparent); }
.rates-ribbon div { padding: 14px 8px; text-align: center; }
.rates-ribbon div + div { border-left: 1px solid var(--line-soft); }
.rates-ribbon b { display: block; font-family: var(--font-ui); font-size: 1.5rem; line-height: 1; color: var(--gold-hi); }
.rates-ribbon span { font-size: .78rem; color: var(--text-2); }

/* Screenshots */
.screens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.screen-thumb { padding: 0; border: 0; cursor: pointer; aspect-ratio: 16 / 10; background: #120A05; box-shadow: 0 0 0 1px var(--gold-lo), 0 0 0 3px rgba(13,8,5,.9), 0 0 0 4px rgba(217,168,91,.5); overflow: hidden; }
.screen-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease), filter .4s; filter: saturate(.85); }
.screen-thumb:hover img { transform: scale(1.06); filter: saturate(1.05); }

/* Sets custom */
.sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.set-card { display: flex; flex-direction: column; overflow: hidden; }
.set-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--tint), transparent); }
.set-visual { height: 170px; display: grid; place-items: center; background: radial-gradient(60% 80% at 50% 100%, color-mix(in srgb, var(--tint) 28%, transparent), transparent 70%), linear-gradient(180deg, #1F120A, #120A05); border-bottom: 1px solid var(--line-soft); }
.set-visual img { max-height: 160px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.set-glyph { width: 104px; height: 104px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tint) 45%, transparent)); }
.set-body { padding: var(--s-4) var(--s-5) var(--s-5); }
.set-name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--tint); text-shadow: 0 0 18px color-mix(in srgb, var(--tint) 35%, transparent); }
.set-pieces { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-3) 0 0; }
.set-pieces li { font-family: var(--font-ui); font-weight: 600; font-size: .82rem; padding: 2px 10px; border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent); color: var(--text); }
.set-pieces li.set-weapons { color: var(--tint); }
.set-how { margin-top: var(--s-3); font-size: .88rem; color: var(--text-2); }

/* Notícias + Top 10 */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
.news-list { list-style: none; margin-top: var(--s-4); }
.news-list li { display: grid; grid-template-columns: 52px 1fr; gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.news-list time { font-family: var(--font-ui); font-weight: 700; color: var(--arcane-hi); font-size: .95rem; padding-top: 1px; }
.news-list h3 { font-family: var(--font-body); font-weight: 600; font-size: .98rem; color: var(--text); }
.news-list h3 a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(246,212,142,.35); text-underline-offset: 3px; }
.news-list p { color: var(--text-2); font-size: .88rem; margin-top: 2px; }
.top10-head { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.top10-tabs { display: flex; gap: 4px; }
.top10-tabs button { background: none; border: 0; border-bottom: 1px dashed transparent; padding: 2px 4px; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text-2); }
.top10-tabs button:hover { color: var(--gold-hi); }
.top10-tabs button.active { color: var(--arcane-hi); border-bottom-color: currentColor; }
.table-compact { margin-top: var(--s-3); font-size: .9rem; background: rgba(13,8,5,.45); }
.table-compact thead th { background: rgba(40,22,10,.7); padding: 8px 10px; font-size: .7rem; }
.table-compact tbody td { padding: 7px 10px; color: var(--text); }
.table-compact tbody tr:nth-child(odd) { background: rgba(217,168,91,.035); }
.table-compact td small { display: block; font-size: .72rem; color: var(--text-2); }
.table-compact td.pos { width: 32px; color: var(--text-2); font-family: var(--font-ui); font-weight: 700; }
.table-compact tr:nth-child(-n+3) td.pos { color: var(--gold-hi); }
.table-compact td.lvl { color: var(--text); }
.top10 .empty { border: 1px solid var(--line-soft); margin-top: var(--s-3); background: rgba(13,8,5,.45); }
.top10-more { display: inline-block; margin-top: var(--s-3); font-size: var(--fs-sm); }

/* Recursos (lista compacta) */
.feat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-6); }
.feat { display: grid; grid-template-columns: 30px 1fr; gap: var(--s-3); align-items: start; }
.feat svg { width: 28px; height: 28px; color: var(--gold); }
.feat h3 { font-size: 1rem; color: var(--gold-hi); }
.feat p { font-size: .9rem; color: var(--text-2); }

.final-cta { margin-top: var(--s-8); display: flex; gap: var(--s-4); justify-content: center; align-items: center; flex-wrap: wrap; }
.home .footer { margin-top: 0; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 4vw; background: rgba(5,3,2,.92); }
.lightbox[hidden] { display: none; }
.lightbox-body img { max-width: 92vw; max-height: 86vh; box-shadow: 0 0 0 1px var(--gold), 0 30px 80px rgba(0,0,0,.8); }
.lightbox-close { position: absolute; top: 16px; right: 20px; width: 48px; height: 48px; border: 1px solid var(--line-strong); background: rgba(20,12,6,.8); color: var(--gold-hi); font-size: 1.8rem; cursor: pointer; }

/* Splash com laterais */
.splash .side-art { top: 40px; }

/* Responsivo do stage */
@media (max-width: 1360px) {
    .side-left  { right: calc(50% + 460px); }
    .side-right { left:  calc(50% + 460px); }
    .side-art .war-banner { width: 140px; }
}
@media (max-width: 1240px) {
    .side-art:not(.has-img) { display: none; }
    .side-art.has-img { opacity: .35; }
}
@media (max-width: 900px) {
    .brand { grid-template-columns: auto 1fr; }
    .brand-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: start; text-align: left; gap: var(--s-4); }
    .brand-stats div { flex-direction: column; gap: 0; align-items: flex-start; }
    .brand-stats dd { justify-content: flex-start; min-width: 0; }
    .intro { grid-template-columns: 1fr; }
    .intro-media { order: -1; }
    .duo { grid-template-columns: 1fr; gap: var(--s-7); }
    .sets { grid-template-columns: 1fr; }
    .set-card { flex-direction: row; }
    .set-visual { width: 130px; height: auto; flex: none; border-bottom: 0; border-right: 1px solid var(--line-soft); }
    .set-glyph { width: 76px; height: 76px; }
    .screens { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .side-art.has-img { opacity: .2; width: 80vw; }
    .side-left.has-img { right: 40%; } .side-right.has-img { left: 40%; }
    .brand-crest { width: 54px; height: 54px; }
    .intro { padding: var(--s-5) var(--s-4); }
    .btn-xl { width: 100%; padding: 16px 20px; font-size: 1.1rem; }
    .rates-ribbon { grid-template-columns: repeat(3, 1fr); }
    .rates-ribbon div:nth-child(4) { border-left: 0; }
    .rates-ribbon div:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
    .feat-list { grid-template-columns: 1fr; }
    .screens { grid-template-columns: repeat(2, 1fr); }
    .set-visual { width: 96px; }
}
.media-swords { width: 110px; height: 110px; color: var(--gold); filter: drop-shadow(0 0 24px rgba(255,170,80,.45)); }

/* Cena sem arte: castelo vira silhueta distante na névoa (menos "geométrico") */
.scene:not(.has-art) .scene-mid { filter: blur(2.2px); opacity: .55; }
.scene:not(.has-art) .scene-near { filter: blur(1px); }
.scene:not(.has-art) .scene-far { filter: blur(1.2px); }
.scene:not(.has-art) .scene-fog-back { opacity: 1; bottom: 22%; height: 46%; }
/* Com imagem de fundo: escurece o centro para a coluna de texto ficar legível */
.scene.has-art .scene-vignette {
    background:
        linear-gradient(90deg, transparent 0%, rgba(13,8,5,.35) 30%, rgba(13,8,5,.55) 50%, rgba(13,8,5,.35) 70%, transparent 100%),
        linear-gradient(180deg, rgba(13,8,5,.5) 0%, transparent 20%, transparent 65%, var(--bg-0) 100%);
}
.scene-art { background-position: center top; }

/* ============================================================
   Visitantes pelo mundo (estatísticas próprias)
   ============================================================ */
.visits { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.1fr) minmax(170px, .8fr); gap: 28px; align-items: center;
  padding: 28px 30px; margin: 0 auto; max-width: 1180px; text-align: left; }
.visits-head { display: flex; align-items: center; gap: 18px; }
.visits-emblem { font-family: var(--font-display); color: var(--gold); font-size: 22px; padding: 10px 6px; position: relative; }
.visits-emblem::before, .visits-emblem::after { content: "·"; position: absolute; left: 50%; transform: translateX(-50%); color: var(--gold); opacity: .6; }
.visits-emblem::before { top: -8px; } .visits-emblem::after { bottom: -8px; }
.visits-kicker { font-family: var(--font-head); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.visits-title { font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 26px); color: var(--text); line-height: 1.15; }
.visits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 214px; overflow-y: auto; padding-right: 6px; }
.visits-grid::-webkit-scrollbar { width: 6px; } .visits-grid::-webkit-scrollbar-thumb { background: var(--gold-lo); border-radius: 3px; }
.visits-cc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.06); }
.visits-cc .cc { font-family: var(--font-ui); font-weight: 700; font-size: 17px; color: var(--text); min-width: 28px; }
.visits-cc .nm { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visits-cc .n { font-family: var(--font-ui); font-weight: 700; font-size: 18px; color: var(--text); }
.visits-total { border-left: 1px solid var(--line); padding-left: 26px; }
.visits-total-n { font-family: var(--font-head); font-size: clamp(30px, 3.4vw, 40px); color: var(--gold-hi); line-height: 1.1; }
.visits-sub { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-top: 8px; }
.visits-empty { color: var(--text-2); font-size: 13px; grid-column: 1 / -1; }
.visits-daily { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.9fr); gap: 28px; align-items: end;
  border-top: 1px solid var(--line-soft); padding-top: 20px; }
.visits-daily-stats { display: grid; gap: 10px; }
.visits-daily-stats div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 6px; }
.visits-daily-stats b { font-family: var(--font-ui); font-size: 18px; color: var(--text); }
.visits-chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; }
.visits-chart .bar { flex: 1; min-width: 6px; position: relative; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); opacity: .85; border-radius: 2px 2px 0 0; min-height: 2px; transition: height .5s var(--ease); }
.visits-chart .bar.today { opacity: 1; box-shadow: 0 0 12px rgba(255,200,100,.35); }
.visits-chart .bar span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--text-2); white-space: nowrap; }
.visits-chart .bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #000; color: var(--gold-hi); font-size: 11px; padding: 3px 7px; white-space: nowrap; border: 1px solid var(--line); z-index: 2; }
.visits-chart-wrap { padding-bottom: 18px; }
.visits-credit { grid-column: 1 / -1; text-align: right; font-size: 10px; margin-top: -10px; }
.visits-credit a { color: var(--text-2); opacity: .6; }
.visits-section { position: relative; z-index: 2; padding: 0 var(--s-5) var(--s-7); }
@media (max-width: 900px) {
  .visits { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .visits-total { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .visits-daily { grid-template-columns: 1fr; }
  .visits-grid { max-height: 260px; }
}
@media (max-width: 420px) { .visits-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v6 — Novo layout (inspirado em sites clássicos de L2)
   ============================================================ */
/* Cabeçalho */
.topbar { position: sticky; top: 0; z-index: 1000; background: rgba(13,8,5,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.topbar-in { max-width: 1320px; margin: 0 auto; padding: 0 20px; height: 68px; display: flex; align-items: center; gap: 22px; }
.tb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.tb-logo b { display: block; font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-logo small { display: block; font-family: var(--font-head); font-size: 10px; letter-spacing: .14em; color: var(--text-2); text-transform: uppercase; }
.tb-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.tb-link { background: none; border: 0; cursor: pointer; padding: 10px 12px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; letter-spacing: .04em;
  color: #d9ccb6; text-decoration: none; border-radius: 6px; transition: color .2s, background .2s; }
.tb-link:hover, .tb-link.active, .tb-drop.active > .tb-link { color: var(--gold-hi); background: rgba(217,168,91,.08); }
.tb-drop { position: relative; }
.tb-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 8px; background: #160d07; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s; }
.tb-drop:hover .tb-menu, .tb-drop:focus-within .tb-menu { opacity: 1; visibility: visible; transform: none; }
.tb-menu a { display: block; padding: 9px 12px; color: var(--text); text-decoration: none; font-size: 14px; border-radius: 6px; }
.tb-menu a:hover { background: rgba(217,168,91,.1); color: var(--gold-hi); }
.tb-right { display: flex; align-items: center; gap: 10px; flex: none; }
.tb-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; padding: 5px 10px;
  border-radius: 99px; border: 1px solid var(--line-soft); }
.tb-status.on { color: var(--ok); } .tb-status.off { color: var(--bad); }
.tb-cta { min-height: 38px; padding: 8px 16px; font-size: 12.5px; --cut: 7px; }
.tb-mobile-cta { display: none; }
.topbar .hamburger { display: none; }

/* Hero */
.hx { position: relative; isolation: isolate; overflow: hidden; min-height: 620px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 70px 20px 80px; }
.hx .scene { position: absolute; inset: 0; }
.hx-in { position: relative; z-index: 2; max-width: 880px; }
.hx-in::before { content: ""; position: absolute; z-index: -1; inset: -40px -80px; background: radial-gradient(closest-side, rgba(13,8,5,.8), rgba(13,8,5,.45) 60%, transparent); }
.hx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: rgba(13,8,5,.6); border: 1px solid var(--line);
  font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--gold-hi); margin-bottom: 18px; }
.hx-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 6vw, 64px); line-height: 1.05; color: var(--text); text-shadow: 0 4px 30px rgba(0,0,0,.7); }
.hx-title em { font-style: normal; display: block; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-p { color: #e3d6c1; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; max-width: 680px; margin: 18px auto 26px; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.hx-p b { color: var(--gold-hi); }
.hx-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hx-rates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 640px; margin: 30px auto 0; border: 1px solid var(--line);
  background: rgba(13,8,5,.6); border-radius: 10px; overflow: hidden; }
.hx-rates div { padding: 12px 8px; } .hx-rates div + div { border-left: 1px solid var(--line-soft); }
.hx-rates b { display: block; font-family: var(--font-ui); font-size: 24px; color: var(--gold-hi); line-height: 1.1; }
.hx-rates span { font-size: 12px; color: var(--text-2); }

/* Contagem no meio da página */
.cd-band { position: relative; text-align: center; padding: 44px 20px 40px; border-block: 1px solid var(--line);
  background: radial-gradient(60% 120% at 50% 0%, rgba(232,118,42,.16), transparent 70%), linear-gradient(180deg, #1a0f08, #0d0805); }
.cd-band-k { font-family: var(--font-head); font-size: clamp(18px, 2.4vw, 26px); color: var(--gold-hi); margin-bottom: 18px; letter-spacing: .04em; }
.cd-note { margin-top: 10px; color: var(--text-2); font-size: 14px; }

/* Secções da home */
.hw { max-width: 1200px; margin: 0 auto; padding: 10px 20px 40px; }
.hw-sec { margin-top: 64px; }
.hw-head { margin-bottom: 22px; }
.hw-k { display: inline-block; font-family: var(--font-head); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.hw-head h2 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); color: var(--text); }
.hw-head p { color: var(--text-2); margin-top: 6px; }
.hw-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hw-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.hcard, .hstep, .hfeat { background: linear-gradient(180deg, rgba(38,23,13,.75), rgba(18,11,6,.85)); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.hcard h3 { font-family: var(--font-head); color: var(--gold-hi); font-size: 17px; margin-bottom: 12px; }
.hrank { list-style: none; padding: 0; margin: 0; }
.hrank li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hrank .pos { font-family: var(--font-ui); font-weight: 700; color: var(--gold); }
.hrank .nm { color: var(--text); font-weight: 600; } .hrank .nm small { display: block; color: var(--text-2); font-weight: 400; font-size: 12px; }
.hrank b { font-family: var(--font-ui); color: var(--gold-hi); }
.hempty { color: var(--text-2); font-size: 14px; padding: 12px 0; }
.hmore { display: inline-block; margin-top: 12px; font-size: 13px; }
.hstat { list-style: none; padding: 0; margin: 0; }
.hstat li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-size: 14px; }
.hstat b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); color: var(--text); font-size: 15px; }
.hstat b.on { color: var(--ok); } .hstat b.off { color: var(--bad); }
.hw-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hfeat svg { width: 30px; height: 30px; color: var(--gold); margin-bottom: 10px; }
.hfeat h3 { font-family: var(--font-head); color: var(--gold-hi); font-size: 16px; margin-bottom: 6px; }
.hfeat p { color: var(--text-2); font-size: 14px; }
.hstep { position: relative; padding-top: 30px; }
.hstep .n { position: absolute; top: -16px; left: 20px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-btn); color: #1a1206; font-family: var(--font-head); font-weight: 700; }
.hstep h3 { font-family: var(--font-head); color: var(--gold-hi); font-size: 17px; margin-bottom: 6px; }
.hstep p { color: var(--text-2); font-size: 14px; margin-bottom: 14px; }
.hstep .btn { min-height: 40px; padding: 9px 18px; font-size: 13px; }
.hnews article { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.hnews time { font-family: var(--font-ui); font-weight: 700; color: var(--arcane-hi); font-size: 13px; }
.hnews h3 { font-size: 16px; color: var(--text); margin: 3px 0; font-family: var(--font-body); font-weight: 600; }
.hnews p { color: var(--text-2); font-size: 14px; }
.hfaq details { border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 10px; background: rgba(13,8,5,.45); }
.hfaq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--text); list-style: none; position: relative; padding-right: 40px; }
.hfaq summary::-webkit-details-marker { display: none; }
.hfaq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 20px; }
.hfaq details[open] summary::after { content: "–"; }
.hfaq details p { padding: 0 16px 14px; color: var(--text-2); font-size: 14px; }
.hfinal { margin-top: 64px; text-align: center; padding: 44px 20px; border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(70% 120% at 50% 100%, rgba(232,118,42,.2), transparent 70%), linear-gradient(180deg, #1f120a, #120a05); }
.hfinal h2 { font-family: var(--font-head); font-size: clamp(24px, 3vw, 34px); color: var(--gold-hi); }
.hfinal p { color: var(--text-2); margin: 8px 0 20px; }

/* Barra lateral de votação */
.vote-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900; display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 12px 10px; background: rgba(13,8,5,.92); border: 1px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; box-shadow: -8px 0 30px rgba(0,0,0,.5);
  max-height: 80vh; overflow-y: auto; transition: transform .25s var(--ease); }
.vote-rail-head { font-family: var(--font-head); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.vote-rail a { display: block; line-height: 0; transition: transform .2s, filter .2s; }
.vote-rail a:hover { transform: scale(1.04); filter: drop-shadow(0 0 8px rgba(255,190,100,.4)); }
.vote-rail img { max-width: 120px; height: auto; }
.vote-rail .vote-txt { display: inline-block; line-height: 1.2; padding: 8px 10px; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--gold-hi); }
@media (max-width: 1560px) {
  .vote-rail { transform: translate(calc(100% - 30px), -50%); padding-left: 38px; }
  .vote-rail-head { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl; transform: rotate(180deg); background: rgba(217,168,91,.1); cursor: pointer; }
  .vote-rail:hover, .vote-rail:focus-within { transform: translate(0, -50%); }
}
.vote-strip { display: none; max-width: 1200px; margin: 0 auto; padding: 18px 20px 0; text-align: center; color: var(--text-2); font-size: 13px; }
.vote-strip div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.vote-strip img { max-width: 120px; height: auto; }
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.vote-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; text-decoration: none; text-align: center; }
.vote-card img { max-width: 180px; height: auto; } .vote-card b { color: var(--gold-hi); font-family: var(--font-head); }

/* Responsivo */
@media (max-width: 1080px) {
  .tb-cta, .tb-status { display: none; }
  .topbar .hamburger { display: block; }
  .tb-nav { position: fixed; top: 68px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 14px 18px 40px;
    background: rgba(13,8,5,.98); overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s, visibility 0s .3s; }
  .tb-nav.open { transform: none; visibility: visible; transition: transform .3s; }
  .tb-link { display: block; width: 100%; text-align: left; padding: 14px 6px; font-size: 16px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .tb-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0 0 6px 14px; }
  .tb-mobile-cta { display: grid; gap: 10px; margin-top: 18px; }
  .hw-3, .hw-feat { grid-template-columns: 1fr 1fr; }
  .hw-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vote-rail { display: none; } .vote-strip { display: block; }
  .hw-3, .hw-feat { grid-template-columns: 1fr; }
  .hx { min-height: 0; padding: 50px 16px 60px; }
  .hx-rates { grid-template-columns: repeat(2, 1fr); }
  .hx-rates div:nth-child(3) { border-left: 0; } .hx-rates div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .tb-logo small { display: none; }
  .hstep { margin-top: 10px; }
}
/* Páginas internas com o cabeçalho novo (fixo no topo, sem sobreposição) */
.page-hero { padding-top: 56px; min-height: 260px; }
/* No modo celular o menu é position:fixed; backdrop-filter no cabeçalho mudaria a referência
   dele e criaria rolagem horizontal. Fundo sólido em vez de desfoque. */
@media (max-width: 1080px) {
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0d0805; }
}