/* ══════════════════════════════════════════════════════
   Classic PVP Portal — portal.css v3.0
   Layout centralizado: Grid | Menu | Detail
   + Ranking paginado, API components
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family:'Cinzel',serif;
    background:#050508;
    color:#e5d7b5;
    min-height:100vh;
    overflow-x:hidden;
    text-shadow:0 0 8px rgba(0,0,0,.7);
    -webkit-font-smoothing:antialiased;
}

/* ══════════════════════════════════════
   VIDEO
   ══════════════════════════════════════ */
#bg-video {
    position:fixed; top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
    filter: brightness(1.15) saturate(1.5) contrast(1.1);
    z-index:-2;
    pointer-events:none;
    opacity:0;
    transition:opacity 2s ease;
}
#bg-video.loaded { opacity:1; }

.overlay {
    position:fixed; top:0; left:0;
    width:100%; height:100%;
    background:
        radial-gradient(circle at 50% 40%, rgba(10,8,15,.2) 0%, rgba(5,3,10,.55) 100%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 100%);
    z-index:-1;
    pointer-events:none;
}

/* ══════════════════════════════════════
   SPLASH
   ══════════════════════════════════════ */
.hero-splash {
    position:fixed; top:0; left:0;
    width:100%; height:100%;
    z-index:1000;
    display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    background:rgba(5,3,8,.97);
    opacity:1;
    transition:opacity 1.2s ease;
    pointer-events:all;
}
.hero-splash.phase-reveal { pointer-events:none; opacity:0; }
.hero-splash.hidden { display:none; }

.splash-logo-wrapper {
    display:flex; align-items:center; justify-content:center;
}
.splash-logo {
    display:block; width:auto; height:auto;
    max-width:none; max-height:none;
    opacity:0; transition:opacity 1.5s ease;
}
.splash-logo.visible { opacity:1; }
.splash-logo.fade-out { opacity:0; transition:opacity 1s ease; }

.splash-loading-text {
    margin-top:30px; font-family:'Cinzel',serif;
    font-size:1rem; color:#8a7a60;
    letter-spacing:4px; text-transform:uppercase;
    opacity:0; transition:opacity .8s ease;
}
.splash-loading-text.visible { opacity:1; animation:textPulse 2s infinite; }
.splash-loading-text.hidden { opacity:0; }

.splash-progress {
    position:absolute; bottom:60px;
    left:50%; transform:translateX(-50%);
    width:200px; height:2px;
    background:rgba(100,80,50,.3);
    border-radius:2px; overflow:hidden;
    opacity:0; transition:opacity .5s ease;
}
.splash-progress.visible { opacity:1; }

.splash-progress-bar {
    width:0%; height:100%;
    background:linear-gradient(90deg,#b89060,#e0c080,#b89060);
    border-radius:2px; transition:width .4s ease;
}

@keyframes textPulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ══════════════════════════════════════
   PAGE CONTENT
   ══════════════════════════════════════ */
.page-content {
    opacity:0; transform:translateY(30px);
    transition:opacity 1.2s ease, transform 1.2s ease;
}
.page-content.revealed { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════
   LANGUAGE BAR
   ══════════════════════════════════════ */
.lang-flag-bar {
    position:fixed; top:20px; right:30px;
    display:flex; gap:12px; z-index:500;
    background:rgba(0,0,0,.6);
    padding:10px 20px; border-radius:50px;
    backdrop-filter:blur(8px);
    border:1px solid rgba(184,155,123,.4);
    box-shadow:0 4px 25px rgba(0,0,0,.5);
    opacity:0; transform:translateY(-20px);
    transition:opacity .8s ease, transform .8s ease;
}
.lang-flag-bar.revealed { opacity:1; transform:translateY(0); }

.lang-flag {
    cursor:pointer;
    transition:transform .2s, box-shadow .2s, border-color .2s;
    width:44px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border-radius:6px; background:rgba(0,0,0,.3);
    border:2px solid transparent;
    padding:2px; overflow:hidden;
}
.lang-flag img {
    width:100%; height:100%;
    object-fit:cover; border-radius:3px;
    display:block; pointer-events:none;
}
.lang-flag:hover, .lang-flag:focus {
    transform:scale(1.15); border-color:#ffd700;
    box-shadow:0 0 12px rgba(255,215,0,.4); outline:none;
}
.lang-flag.active-lang {
    border-color:#ffd700;
    box-shadow:0 0 15px rgba(255,215,0,.5);
    background:rgba(255,215,0,.1);
}

/* ══════════════════════════════════════
   HERO HEADER
   ══════════════════════════════════════ */
.hero-header {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:50px;
    overflow:hidden; isolation:isolate;
}
.hero-bg-wrapper {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    z-index:0; pointer-events:none; overflow:hidden;
}
.hero-bg-image {
    display:block; width:auto; height:auto;
    max-width:90%; max-height:100%;
    object-fit:contain; opacity:.2; user-select:none;
}
.hero-text {
    position:relative; z-index:2;
    text-align:center; padding:40px 20px;
}

.entrance {
    max-width:1600px; margin:0 auto;
    padding:20px 20px 60px; text-align:center;
}

h1 {
    font-size:3.2rem; font-weight:900;
    letter-spacing:6px; text-transform:uppercase;
    background:linear-gradient(180deg,#f9e2b7 15%,#c49660 50%,#b5885a 85%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; margin-bottom:18px;
    filter:drop-shadow(0 0 25px rgba(181,124,72,.5));
    line-height:1.2;
}
.sub {
    font-size:1.15rem; color:#cfb591;
    margin-bottom:10px; font-style:italic;
    border-bottom:1px dashed #7a5f44;
    display:inline-block; padding-bottom:10px;
    letter-spacing:1px;
}

/* ══════════════════════════════════════════════
   SERVER STAGE — FLEX ROW CENTRALIZADO
   [ Grid ] [ Menu ] [ Detail ]
   ══════════════════════════════════════════════ */
.server-stage {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:24px;
    min-height:500px;
    transition:all .5s cubic-bezier(.4,0,.2,1);
    margin:0 auto;
    padding:0 20px;
}

/* ══════════════════════════════════════
   SERVER GRID
   ══════════════════════════════════════ */
.server-grid {
    display:flex; flex-wrap:wrap;
    justify-content:center;
    gap:30px 35px;
    flex:0 1 auto;
    min-width:0;
    transition:all .6s cubic-bezier(.4,0,.2,1);
}

.server-stage.panel-open .server-grid {
    flex:0 0 360px;
    max-width:360px;
    justify-content:center;
}

.server-stage.detail-open .server-grid {
    flex:0 0 320px;
    max-width:320px;
}

/* ══════════════════════════════════════
   SERVER CARDS
   ══════════════════════════════════════ */
.server-card {
    flex:0 1 340px;
    background:rgba(5,5,8,.75);
    backdrop-filter:blur(10px);
    border:1px solid #57442f;
    border-radius:28px 28px 20px 20px;
    padding:0 0 28px 0;
    transition:all .5s cubic-bezier(.4,0,.2,1);
    box-shadow:
        0 25px 35px -12px rgba(0,0,0,.8),
        inset 0 0 25px rgba(190,140,70,.15);
    overflow:hidden;
    display:flex; flex-direction:column;
    animation:floatGlow 4s infinite alternate;
    opacity:0; transform:translateY(40px);
    cursor:default;
}
.server-card.card-visible {
    opacity:1; transform:translateY(0);
    transition:opacity .8s ease, transform .8s ease, border-color .35s, box-shadow .35s;
}
.server-card:hover {
    border-color:#c9a369;
    box-shadow:0 0 35px rgba(184,134,61,.4), 0 15px 30px rgba(0,0,0,.7);
    transform:translateY(-4px);
}
.server-card.selected {
    border-color:#ffd700;
    box-shadow:0 0 40px rgba(255,215,0,.3), 0 10px 25px rgba(0,0,0,.6);
}

.server-stage.panel-open .server-card:not(.selected) {
    opacity:.3; transform:scale(.9);
    pointer-events:none; max-height:200px;
}
.server-stage.panel-open .server-card.selected {
    flex:0 0 340px;
}

/* ══════════════════════════════════════
   CHARACTER BANNER
   ══════════════════════════════════════ */
.char-banner {
    height:220px; position:relative;
    display:flex; justify-content:center; align-items:flex-end;
    border-bottom:2px solid #6a4d31;
    box-shadow:inset 0 -12px 25px rgba(0,0,0,.6);
    overflow:hidden;
}
.banner-purple { background:linear-gradient(180deg,#0d0818,#18102a 40%,#100a18); }
.banner-purple::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:radial-gradient(ellipse at 50% 85%,rgba(150,80,200,.15),transparent 60%);
    pointer-events:none; z-index:1;
}
.banner-steel { background:linear-gradient(180deg,#0c0c10,#141418 40%,#0c0c10); }
.banner-steel::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:radial-gradient(ellipse at 50% 85%,rgba(200,180,100,.12),transparent 60%);
    pointer-events:none; z-index:1;
}
.banner-fire { background:linear-gradient(180deg,#100c08,#1a1410 40%,#100c08); }
.banner-fire::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:radial-gradient(ellipse at 50% 85%,rgba(220,100,30,.14),transparent 60%);
    pointer-events:none; z-index:1;
}

.banner-particles {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    pointer-events:none; z-index:1; overflow:hidden;
}
.banner-particles::before, .banner-particles::after {
    content:''; position:absolute;
    width:3px; height:3px; border-radius:50%;
    background:#ffd78c; opacity:0;
    animation:particle 4s infinite;
}
.banner-particles::before { left:30%; bottom:20%; }
.banner-particles::after  { left:65%; bottom:30%; animation-delay:2s; }
.banner-purple .banner-particles::before,
.banner-purple .banner-particles::after { background:#c490ff; }
.banner-fire .banner-particles::before,
.banner-fire .banner-particles::after { background:#ff9050; }

.class-label {
    position:absolute; top:12px; left:14px;
    background:rgba(0,0,0,.7); border:1px solid #8a6f48;
    border-radius:20px; padding:4px 14px;
    font-size:.72rem; color:#e8c878;
    letter-spacing:1.5px; z-index:5; text-transform:uppercase;
}

.l2-character {
    display:block; height:240px; width:auto; max-width:90%;
    object-fit:contain; object-position:center bottom;
    filter:drop-shadow(0 0 18px rgba(255,180,100,.6));
    animation:charDescend 1.8s ease-out, charFloat 3.5s infinite alternate 1.8s;
    transform-origin:bottom center;
    position:relative; z-index:3;
    user-select:none; pointer-events:none;
}
.banner-purple .l2-character { filter:drop-shadow(0 0 18px rgba(180,100,255,.6)); }
.banner-fire .l2-character   { filter:drop-shadow(0 0 18px rgba(255,130,50,.6)); }

@keyframes charDescend {
    0%{transform:translateY(-300px);opacity:.05}
    50%{transform:translateY(10px);opacity:1}
    70%{transform:translateY(-5px)}
    100%{transform:translateY(0)}
}
@keyframes charFloat { 0%{transform:translateY(0)} 100%{transform:translateY(-4px)} }
@keyframes floatGlow { 0%{border-color:#57442f} 100%{border-color:#a57e55} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes particle  { 0%{transform:translateY(0) scale(1);opacity:0} 15%{opacity:.6} 100%{transform:translateY(-90px) scale(0);opacity:0} }

/* ── CARD CONTENT ── */
.server-content { padding:22px 20px 10px; text-align:left; flex:1; }
.server-title {
    font-size:1.5rem; font-weight:700; color:#fadfad;
    border-left:4px solid #ca9e6e; padding-left:14px;
    margin-bottom:14px; text-shadow:2px 2px 0 #2f1f0e;
}
.badge-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.badge {
    display:inline-block; background:rgba(38,34,28,.8);
    color:#ebc68e; border-radius:20px; padding:5px 13px;
    font-size:.75rem; font-weight:bold; border:1px solid #8f7654;
}
.info-text {
    font-size:.88rem; line-height:1.65; color:#c5b69a;
    margin:8px 0 12px; max-height:140px;
    overflow-y:auto; padding-right:6px;
    font-family:'Segoe UI',Tahoma,sans-serif;
    text-shadow:none;
    scrollbar-width:thin; scrollbar-color:#7a5f3a #1a140e;
}

/* ── PLAY BUTTON ── */
.server-status-area { margin-top:18px; padding:0 20px; }
.btn-play {
    display:block; width:100%;
    background:linear-gradient(135deg,#2f281d,#3d3225);
    border:1px solid #b99660; color:#f3d9a0;
    padding:14px 12px; border-radius:40px;
    font-weight:bold; font-size:1rem;
    letter-spacing:1px; text-align:center;
    font-family:'Cinzel',serif;
    cursor:pointer; margin-bottom:10px;
    transition:all .25s ease;
}
.btn-play:hover, .btn-play:focus {
    background:linear-gradient(135deg,#584831,#6a5a42);
    color:#ffefc0; border-color:#e4b87a;
    box-shadow:0 0 22px rgba(219,164,94,.5);
    outline:none; transform:translateY(-1px);
}

/* ── STATUS INDICATOR ── */
.status-indicator {
    display:flex; align-items:center; justify-content:center;
    gap:10px; font-size:.82rem;
    background:rgba(0,0,0,.5);
    padding:9px 14px; border-radius:40px;
    border:1px solid #5f503b;
}
.status-led {
    width:13px; height:13px; border-radius:50%;
    flex-shrink:0; transition:background .3s, box-shadow .3s;
}
.led-green   { background:#2ecc71; box-shadow:0 0 12px #2ecc71; }
.led-red     { background:#e74c3c; box-shadow:0 0 12px #e74c3c; }
.led-loading { background:#f39c12; box-shadow:0 0 12px #f39c12; animation:pulse 1.2s infinite; }
.led-yellow  { background:#f0ad4e; box-shadow:0 0 8px rgba(240,173,78,.5); }
.players-count { font-weight:bold; color:#ffd58c; }

/* ══════════════════════════════════════════════
   GLASS PANEL — MENU (inline flex item)
   ══════════════════════════════════════════════ */
.glass-panel {
    flex:0 0 0px;
    width:0;
    height:580px;
    min-height:380px;
    align-self:stretch;
    background:rgba(8,6,12,.78);
    backdrop-filter:blur(25px) saturate(1.2);
    -webkit-backdrop-filter:blur(25px) saturate(1.2);
    border:1px solid rgba(184,155,123,.2);
    border-radius:28px 28px 20px 20px;
    box-shadow:
        0 0 40px rgba(0,0,0,.5),
        inset 0 0 30px rgba(180,140,70,.08);
    overflow:hidden;
    opacity:0;
    transition:
        flex-basis .5s cubic-bezier(.4,0,.2,1),
        width .5s cubic-bezier(.4,0,.2,1),
        opacity .4s ease;
    display:flex;
    flex-direction:column;
    pointer-events:none;
    position:relative;
}

.server-stage.panel-open .glass-panel {
    flex:0 0 310px;
    width:310px;
    opacity:1;
    pointer-events:all;
}

.glass-panel::before {
    content:'';
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(135deg,
        rgba(255,255,255,.04) 0%, transparent 40%,
        transparent 60%, rgba(255,255,255,.02) 100%);
    pointer-events:none; z-index:0;
}

.panel-close {
    position:absolute; top:12px; right:12px;
    width:20px; height:40px; border-radius:50%;
    background:rgba(0,0,0,.4);
    border:1px solid rgba(184,155,123,.3);
    color:#cfb591; font-size:1.1rem;
    cursor:pointer; z-index:10;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.panel-close:hover {
    background:rgba(200,160,80,.2);
    border-color:#ffd700; color:#ffd700;
    transform:rotate(90deg);
}

.panel-header {
    padding:22px 18px 16px;
    border-bottom:1px solid rgba(184,155,123,.15);
    position:relative; z-index:1;
}
.panel-server-name {
    font-size:1.2rem; font-weight:700; color:#fadfad;
    letter-spacing:1px;
    text-shadow:0 0 20px rgba(180,130,60,.3);
    margin-bottom:6px;
}
.panel-status { font-size:.85rem; color:#9a8a70; }

/* ══════════════════════════════════════
   PANEL MENU ITEMS
   ══════════════════════════════════════ */
.panel-menu {
    flex:1; padding:15px 12px;
    overflow-y:auto; position:relative; z-index:1;
    scrollbar-width:thin; scrollbar-color:#5a4830 transparent;
}

.menu-item {
    display:block; text-decoration:none; color:#e0d0b0;
    margin-bottom:6px; border-radius:16px;
    transition:all .2s; cursor:pointer;
    border:1px solid transparent;
}
.menu-item:hover, .menu-item:focus-within {
    background:rgba(180,140,70,.1);
    border-color:rgba(184,155,123,.2);
}
.menu-item.active-menu {
    background:rgba(180,140,70,.12);
    border-color:rgba(255,215,0,.2);
}
.menu-item.active-menu .menu-item-main { color:#ffd700; }
.menu-item.active-menu .menu-item-main i:first-child {
    color:#ffd700; filter:drop-shadow(0 0 6px rgba(255,215,0,.4));
}

.menu-item-main {
    display:flex; align-items:center; gap:10px;
    padding:12px 14px; font-size:.88rem;
    font-weight:600; letter-spacing:.5px;
    position:relative;
}
.menu-item-main i:first-child {
    width:24px; text-align:center;
    color:#c9a060; font-size:1.1rem; flex-shrink:0;
}
.menu-label { white-space:nowrap; overflow:hidden; }

.menu-arrow {
    margin-left:auto; font-size:.7rem;
    color:#8a7a60; transition:transform .3s;
}
.has-submenu.open .menu-arrow { transform:rotate(180deg); }

.menu-external { margin-left:auto; font-size:.65rem; color:#6a5a40; }

/* Discord */
.menu-discord .menu-item-main i:first-child { color:#7289da; }
.menu-discord:hover {
    background:rgba(114,137,218,.1);
    border-color:rgba(114,137,218,.3);
}

/* Submenu */
.submenu {
    max-height:0; overflow:hidden;
    transition:max-height .4s cubic-bezier(.4,0,.2,1), padding .3s;
    padding:0 10px;
}
.has-submenu.open .submenu {
    max-height:400px; padding:0 10px 10px;
}

.submenu-link {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px 8px 30px; color:#c5b69a;
    text-decoration:none; font-size:.8rem;
    border-radius:10px; transition:all .2s;
    font-family:'Segoe UI',Tahoma,sans-serif;
    text-shadow:none; cursor:pointer;
}
.submenu-link:hover {
    background:rgba(180,140,70,.12); color:#ffd78c;
}
.submenu-link.active-sub {
    background:rgba(255,215,0,.08); color:#ffd700;
}
.submenu-link.active-sub i { color:#ffd700 !important; }
.submenu-link i {
    width:20px; text-align:center;
    color:#9a8060; font-size:.85rem;
}
.submenu-link:hover i { color:#e0b050; }

.panel-footer {
    padding:15px 18px;
    border-top:1px solid rgba(184,155,123,.1);
    position:relative; z-index:1;
}
.panel-hint {
    font-size:.75rem; color:#6a5a40;
    letter-spacing:1px; text-align:center;
}
.panel-hint i { margin-right:6px; }

/* ══════════════════════════════════════════════
   DETAIL PANEL (inline flex item, à direita)
   ══════════════════════════════════════════════ */
.detail-panel {
    flex:0 0 0px;
    width:0;
    min-height:500px;
    align-self:stretch;
    background:rgba(8,6,12,.78);
    backdrop-filter:blur(25px) saturate(1.2);
    -webkit-backdrop-filter:blur(25px) saturate(1.2);
    border:1px solid rgba(184,155,123,.2);
    border-radius:28px 28px 20px 20px;
    box-shadow:
        0 0 50px rgba(0,0,0,.6),
        inset 0 0 35px rgba(180,140,70,.06),
        0 0 60px rgba(194,164,96,.03);
    overflow:hidden;
    opacity:0;
    transition:
        flex-basis .5s cubic-bezier(.4,0,.2,1),
        width .5s cubic-bezier(.4,0,.2,1),
        opacity .4s ease .05s;
    display:flex;
    flex-direction:column;
    pointer-events:none;
    position:relative;
}

.detail-panel.open {
    flex:0 0 560px;
    height:640px;
    width:580px;
    opacity:1;
    pointer-events:all;
}

.detail-panel::before {
    content:'';
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    background:linear-gradient(160deg,
        rgba(255,255,255,.03) 0%, transparent 30%,
        transparent 70%, rgba(255,255,255,.015) 100%);
    pointer-events:none; z-index:0;
}
.detail-panel::after {
    content:'';
    position:absolute;
    top:0; left:20%; right:20%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(194,164,96,.3), transparent);
    z-index:1;
}

/* ── DETAIL TOPBAR ── */
.detail-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px 12px;
    position:relative; z-index:2;
}
.detail-back {
    display:flex; align-items:center; gap:8px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(184,155,123,.25);
    border-radius:30px; color:#cfb591;
    font-family:'Cinzel',serif;
    font-size:.78rem; font-weight:600;
    letter-spacing:1px; padding:8px 16px;
    cursor:pointer; transition:all .25s ease;
}
.detail-back:hover {
    background:rgba(180,140,70,.15);
    border-color:rgba(255,215,0,.4);
    color:#ffd700; transform:translateX(-4px);
    box-shadow:0 0 15px rgba(255,215,0,.15);
}
.detail-back i { font-size:.7rem; }

.detail-close-x {
    width:34px; height:34px; border-radius:50%;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(184,155,123,.2);
    color:#8a7a60; font-size:.9rem;
    cursor:pointer; transition:all .25s ease;
    display:flex; align-items:center; justify-content:center;
}
.detail-close-x:hover {
    background:rgba(200,60,60,.2);
    border-color:rgba(200,60,60,.4);
    color:#ff6b6b; transform:rotate(90deg);
}

/* ── DETAIL HEADER ── */
.detail-header {
    text-align:center; padding:10px 25px 20px;
    border-bottom:1px solid rgba(184,155,123,.1);
    position:relative; z-index:1;
}
.detail-icon {
    width:52px; height:52px; margin:0 auto 10px;
    background:linear-gradient(135deg, rgba(180,140,70,.18), rgba(180,140,70,.06));
    border:1px solid rgba(184,155,123,.3);
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color:#c9a060;
    box-shadow:0 4px 20px rgba(0,0,0,.3), inset 0 0 15px rgba(180,140,70,.08);
}
.detail-title {
    font-size:1.4rem; font-weight:900; color:#fadfad;
    letter-spacing:2px;
    text-shadow:0 0 20px rgba(180,130,60,.3);
    margin-bottom:4px;
}
.detail-subtitle {
    font-size:.78rem; color:#8a7a60;
    letter-spacing:1px; font-style:italic;
}

/* ── DETAIL BODY ── */
.detail-body {
    flex:1; padding:20px 22px;
    overflow-y:auto; position:relative; z-index:1;
    min-height:200px;
    scrollbar-width:thin; scrollbar-color:#5a4830 transparent;
}
.detail-body::-webkit-scrollbar { width:5px; }
.detail-body::-webkit-scrollbar-track { background:transparent; }
.detail-body::-webkit-scrollbar-thumb { background:rgba(184,155,123,.2); border-radius:10px; }

/* ── DETAIL FOOTER ── */
.detail-footer {
    padding:12px 22px;
    border-top:1px solid rgba(184,155,123,.08);
    position:relative; z-index:1;
}
.detail-footer-text {
    font-size:.68rem; color:#5a4a30;
    letter-spacing:1px; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.detail-footer-text i { color:rgba(184,155,123,.3); }

/* ── DETAIL LOADING ── */
.detail-loading {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:60px 20px;
    color:#c9a060;
    font-size:.9rem;
    letter-spacing:1px;
    text-align:center;
    gap:12px;
}
.detail-loading i {
    font-size:2rem;
}

/* ── DETAIL ERROR ── */
.detail-error {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:50px 20px;
    text-align:center;
}
.btn-retry {
    margin-top:12px;
    padding:8px 20px;
    background:rgba(201,160,96,.15);
    border:1px solid rgba(201,160,96,.3);
    color:#c9a060;
    border-radius:8px;
    cursor:pointer;
    font-family:'Cinzel',serif;
    font-size:.82rem;
    transition:all .25s ease;
}
.btn-retry:hover {
    background:rgba(201,160,96,.25);
    border-color:rgba(201,160,96,.5);
    color:#fadfad;
    box-shadow:0 0 12px rgba(201,160,96,.2);
}

/* ══════════════════════════════════════════════
   RANKING TABLE
   ══════════════════════════════════════════════ */
.rank-table { width:100%; border-collapse:collapse; }
.rank-table thead th {
    font-size:.7rem; color:#c9a060;
    text-transform:uppercase; letter-spacing:1.5px;
    padding:10px 8px;
    border-bottom:2px solid rgba(184,155,123,.2);
    text-align:left; font-weight:700;
    font-family:'Cinzel',serif;
}
.rank-table tbody tr {
    transition:background .2s ease;
    border-bottom:1px solid rgba(255,255,255,.03);
}
.rank-table tbody tr:hover { background:rgba(180,140,70,.06); }
.rank-table td {
    padding:10px 8px; font-size:.82rem; color:#c5b69a;
    font-family:'Segoe UI',Tahoma,sans-serif;
    text-shadow:none; vertical-align:middle;
}
.rank-pos {
    font-weight:900; font-family:'Cinzel',serif;
    width:36px; text-align:center;
}
.rank-pos.gold   { color:#ffd700; text-shadow:0 0 10px rgba(255,215,0,.5); }
.rank-pos.silver { color:#c0c0c0; text-shadow:0 0 8px rgba(192,192,192,.4); }
.rank-pos.bronze { color:#cd7f32; text-shadow:0 0 8px rgba(205,127,50,.4); }
.rank-name { font-weight:700; color:#fadfad; }
.rank-clan { color:#9a8a70; font-size:.75rem; }
.rank-value { text-align:right; font-weight:700; color:#c9a060; }

/* ── RANKING WRAPPER & INFO BAR ── */
.ranking-wrapper {
    padding:4px 0;
}
.ranking-info {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 14px;
    margin-bottom:12px;
    background:rgba(0,0,0,.2);
    border-radius:10px;
    border:1px solid rgba(184,155,123,.08);
    font-size:.72rem;
    color:#8a7a60;
    font-family:'Segoe UI',sans-serif;
    text-shadow:none;
}

/* ── PAGINATION ── */
.ranking-pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
    margin-top:16px;
    padding:10px 0;
    flex-wrap:wrap;
}
.page-btn {
    min-width:34px;
    height:34px;
    padding:0 8px;
    border:1px solid rgba(184,155,123,.2);
    background:rgba(0,0,0,.3);
    color:#c5b69a;
    border-radius:8px;
    cursor:pointer;
    font-family:'Cinzel',serif;
    font-size:.75rem;
    transition:all .2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.page-btn:hover {
    background:rgba(201,160,96,.15);
    border-color:rgba(201,160,96,.4);
    color:#fadfad;
}
.page-btn.page-active {
    background:rgba(201,160,96,.25);
    border-color:rgba(201,160,96,.6);
    color:#ffd58c;
    font-weight:700;
    box-shadow:0 0 8px rgba(201,160,96,.2);
}
.page-dots {
    color:#6a5a40;
    font-size:.8rem;
    padding:0 4px;
    user-select:none;
}

/* ══════════════════════════════════════════════
   REGISTER FALLBACK (portal.css scope)
   ══════════════════════════════════════════════ */
.register-form { display:flex; flex-direction:column; gap:14px; }
.register-form .form-group { display:flex; flex-direction:column; gap:5px; }
.register-form .form-group label {
    font-size:.75rem; color:#c9a060;
    letter-spacing:1px; text-transform:uppercase; font-weight:700;
}
.register-form .form-group input {
    background:rgba(0,0,0,.4); border:1px solid rgba(184,155,123,.25);
    border-radius:12px; padding:11px 14px; color:#e5d7b5;
    font-family:'Segoe UI',Tahoma,sans-serif; font-size:.88rem;
    transition:all .25s ease; outline:none; text-shadow:none;
}
.register-form .form-group input:focus {
    border-color:#c9a060;
    box-shadow:0 0 15px rgba(194,164,96,.15);
    background:rgba(0,0,0,.55);
}
.register-form .form-group input::placeholder { color:#5a4a35; }
.form-submit {
    display:flex;
    justify-content:center;
    align-items:center;
    width:50%;
    margin:12px auto;
    background:linear-gradient(135deg,#2f281d,#3d3225);
    border:1px solid #b99660;
    color:#f3d9a0;
    padding:14px;
    border-radius:40px;
    font-weight:bold;
    font-size:.95rem;
    letter-spacing:1px;
    font-family:'Cinzel',serif;
    cursor:pointer;
    transition:all .25s ease;
}
.form-submit:hover {
    background:linear-gradient(135deg,#584831,#6a5a42);
    color:#ffefc0; border-color:#e4b87a;
    box-shadow:0 0 22px rgba(219,164,94,.5);
}

/* ══════════════════════════════════════════════
   DOWNLOAD
   ══════════════════════════════════════════════ */
.download-section { text-align:center; }
.download-card {
    background:rgba(0,0,0,.3); border:1px solid rgba(184,155,123,.15);
    border-radius:16px; padding:20px 18px;
    margin-bottom:12px; transition:all .25s ease;
}
.download-card:hover { border-color:rgba(184,155,123,.3); background:rgba(0,0,0,.4); }
.download-card h4 { color:#fadfad; font-size:.95rem; margin-bottom:6px; letter-spacing:1px; }
.download-card p {
    color:#8a7a60; font-size:.78rem; margin-bottom:12px;
    font-family:'Segoe UI',Tahoma,sans-serif; text-shadow:none;
}
.download-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,#2f281d,#3d3225);
    border:1px solid #b99660; color:#f3d9a0;
    padding:9px 24px; border-radius:30px;
    font-weight:bold; font-size:.82rem;
    font-family:'Cinzel',serif; cursor:pointer;
    transition:all .25s ease; text-decoration:none;
}
.download-btn:hover {
    background:linear-gradient(135deg,#584831,#6a5a42);
    color:#ffefc0; border-color:#e4b87a;
    box-shadow:0 0 22px rgba(219,164,94,.5);
    transform:translateY(-2px);
}
.download-size { display:block; font-size:.68rem; color:#6a5a40; margin-top:8px; }

/* ══════════════════════════════════════════════
   SERVER INFO
   ══════════════════════════════════════════════ */
.info-section h4 {
    color:#fadfad; font-size:.95rem; margin-bottom:12px;
    letter-spacing:1px; border-left:3px solid #c9a060; padding-left:12px;
}
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.info-item {
    background:rgba(0,0,0,.25); border:1px solid rgba(184,155,123,.1);
    border-radius:12px; padding:12px 14px; transition:all .2s ease;
}
.info-item:hover { border-color:rgba(184,155,123,.25); background:rgba(0,0,0,.35); }
.info-item-label {
    font-size:.65rem; color:#8a7a60;
    text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;
}
.info-item-value { font-size:.9rem; color:#fadfad; font-weight:700; }

/* ══════════════════════════════════════
   BACKDROP
   ══════════════════════════════════════ */
.panel-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.65); z-index:90;
    opacity:0; visibility:hidden;
    transition:all .3s ease; backdrop-filter:blur(3px);
}
.panel-backdrop.visible { opacity:1; visibility:visible; }

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */
.subdomain-hint {
    margin-top:70px; font-size:.95rem; color:#9f8d73;
    background:rgba(0,0,0,.45);
    padding:16px 28px; border-radius:60px;
    backdrop-filter:blur(3px);
    display:inline-block;
    border:1px solid rgba(100,80,55,.3);
}
hr { border:none; border-top:1px solid #4d402b; margin:35px auto; width:50%; }

.lang-block        { display:none; }
.lang-block.active { display:block; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width:1400px) {
    .server-stage.panel-open .server-grid { flex:0 0 320px; max-width:320px; }
    .server-stage.panel-open .glass-panel { flex:0 0 280px; width:280px; }
    .detail-panel.open { flex:0 0 460px; width:460px; }
}

@media (max-width:1100px) {
    .server-stage { gap:16px; }
    .server-stage.panel-open .server-grid { flex:0 0 280px; max-width:280px; }
    .server-stage.panel-open .glass-panel { flex:0 0 260px; width:260px; }
    .detail-panel.open { flex:0 0 380px; width:380px; }
    .server-card { flex:0 1 280px; }
}

@media (max-width:900px) {
    h1 { font-size:2.4rem; letter-spacing:3px; }
    .lang-flag-bar { top:10px; right:10px; padding:8px 12px; gap:8px; }
    .lang-flag { width:38px; height:28px; }

    .server-stage {
        flex-direction:column;
        align-items:center;
        gap:16px;
        padding:0 10px;
    }

    .server-grid { flex:none !important; max-width:100% !important; width:100%; }
    .server-stage.panel-open .server-grid { flex:none !important; max-width:100% !important; }
    .server-stage.panel-open .server-card:not(.selected) { display:none; }

    .glass-panel {
        position:fixed !important;
        top:auto !important; bottom:0; left:0; right:0;
        flex:none !important; width:100% !important;
        height:0; min-height:0;
        border-radius:24px 24px 0 0;
        transition:height .5s cubic-bezier(.4,0,.2,1), opacity .3s;
        z-index:100;
    }
    .server-stage.panel-open .glass-panel {
        flex:none !important; width:100% !important;
        height:65vh; opacity:1;
    }

    .detail-panel {
        position:fixed !important;
        top:0 !important; left:0; right:0; bottom:0;
        flex:none !important; width:100% !important;
        height:100%; min-height:0;
        border-radius:0; z-index:150;
        transform:translateY(100%);
        transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
    }
    .detail-panel.open {
        flex:none !important; width:100% !important;
        transform:translateY(0);
    }

    .panel-backdrop { display:block; }

    /* Pagination responsivo */
    .ranking-pagination { gap:3px; }
    .page-btn { min-width:30px; height:30px; font-size:.7rem; }
}

@media (max-width:600px) {
    h1 { font-size:1.7rem; letter-spacing:2px; }
    .entrance { padding:85px 12px 30px; }
    .server-card { flex:0 1 100%; max-width:400px; }
    .char-banner { height:180px; }
    .l2-character { height:160px; }
    .server-title { font-size:1.3rem; }
    .subdomain-hint { font-size:.82rem; padding:12px 18px; }
    .detail-title { font-size:1.15rem; }
    .info-grid { grid-template-columns:1fr; }

    /* Ranking mobile */
    .ranking-info { flex-direction:column; gap:4px; text-align:center; }
    .rank-table td { padding:8px 6px; font-size:.78rem; }
    .rank-table thead th { font-size:.65rem; padding:8px 6px; }
}

@media (max-width:400px) {
    h1 { font-size:1.4rem; }
    .lang-flag-bar { padding:6px 8px; gap:6px; }
    .lang-flag { width:32px; height:22px; }
    .l2-character { height:140px; }
}