/* Gerado por tools/build-home-css.js. Nao editar manualmente. */
/* ==========================================================================
   MU ZORD DESIGN TOKENS (PHASE 1 - CANONICAL DESIGN SYSTEM)
   ========================================================================== */
:root{
    /* Canonical Gold Palette — FIXED: was circular self-references (var resolving to unset) */
    --mz-gold-primary: #d4af37;
    --mz-gold-light:   #f5e0a0;
    --mz-gold-dark:    #8a6a1c;
    --mz-gold-accent:  #ffd700;
    --mz-gold-glow:    rgba(212, 175, 55, 0.4);
    --mz-gold-subtle:  rgba(212, 175, 55, 0.15);

    /* Canonical Neutrals & Surfaces */
    --mz-parchment:       #f0e6c8;
    --mz-parchment-light: #fdf6e3;
    --mz-obsidian-deep:   #060910;
    --mz-surface-base:    rgba(10, 14, 22, 0.92);
    --mz-surface-elevated: rgba(16, 22, 34, 0.95);
    --mz-surface-overlay:  rgba(24, 34, 52, 0.98);
    --mz-border-subtle:    rgba(255, 255, 255, 0.06);
    --mz-border-gold:      rgba(212, 175, 55, 0.35);

    /* Typographic Scale */
    --mz-text-xs:   12px;
    --mz-text-sm:   14px;
    --mz-text-base: 16px;
    --mz-text-lg:   20px;
    --mz-text-xl:   24px;
    --mz-text-2xl:  32px;

    /* Font Families */
    --mz-font-display: 'Cinzel', serif;
    --mz-font-body:    'Inter', sans-serif;
    --font-cinzel:     'Cinzel', serif;
    --font-inter:      'Inter', sans-serif;

    /* Button Tokens */
    --mz-btn-radius: 4px;
    --mz-btn-font:   'Cinzel', serif;
}/* ==========================================================================
   UNIFIED BUTTON & NAVIGATION TAB SYSTEM (PHASE 1 - CALIBRATED)
   ========================================================================== */
/* --- 1. PRIMARY BUTTONS (Gold Polished Metallic CTA - Visually Dominant) --- */
.mz-btn--primary,
.btn-gold,
.btn-register,
.btn-buy,
.btn-buy-product,
.btn-primary-zord,
.btn-donate,
.mz-cta-hero__btn--primary,
.mz-act-btn-primary{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-primary) 50%, var(--mz-gold-dark) 100%) !important;
    color: #060910 !important;
    font-family: var(--mz-font-display) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid var(--mz-gold-light) !important;
    border-radius: var(--mz-btn-radius) !important;
    box-shadow: 0 4px 15px var(--mz-gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mz-btn--primary:hover,
.btn-gold:hover,
.btn-register:hover,
.btn-buy:hover,
.btn-buy-product:hover,
.btn-primary-zord:hover,
.btn-donate:hover,
.mz-cta-hero__btn--primary:hover,
.mz-act-btn-primary:hover{
    background: linear-gradient(180deg, #ffffff 0%, var(--mz-gold-light) 40%, var(--mz-gold-primary) 100%) !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6), inset 0 1px 0 #ffffff !important;
    transform: translateY(-1px) !important;
}/* --- 2. SECONDARY BUTTONS (Dark Obsidian Surface with Subtle Gold Border) --- */
.mz-btn--secondary,
.btn-secondary,
.btn-default,
.btn-continue,
.mz-side-cta-btn,
.btn,
.mz-cta-hero__btn--secondary,
.mz-act-btn-secondary{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, var(--mz-surface-elevated) 0%, var(--mz-surface-base) 100%) !important;
    color: var(--mz-gold-light) !important;
    font-family: var(--mz-font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border: 1px solid var(--mz-border-gold) !important;
    border-radius: var(--mz-btn-radius) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.mz-btn--secondary:hover,
.btn-secondary:hover,
.btn-default:hover,
.btn-continue:hover,
.mz-side-cta-btn:hover,
.btn:hover,
.mz-cta-hero__btn--secondary:hover,
.mz-act-btn-secondary:hover{
    background: var(--mz-surface-overlay) !important;
    color: #ffffff !important;
    border-color: var(--mz-gold-primary) !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25) !important;
    transform: translateY(-1px) !important;
}/* --- 3. GHOST & MICRO BUTTONS (Transparent with Gold Accent) --- */
.mz-btn--ghost,
.btn-veja-mais,
.btn-view-more{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: var(--mz-gold-primary) !important;
    font-family: var(--mz-font-display) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: var(--mz-btn-radius) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.mz-btn--ghost:hover,
.btn-veja-mais:hover,
.btn-view-more:hover{
    background: var(--mz-gold-subtle) !important;
    color: var(--mz-gold-light) !important;
    border-color: var(--mz-gold-primary) !important;
    box-shadow: 0 0 10px var(--mz-gold-glow) !important;
}/* ==========================================================================
   SURFACE & CARD TIER SYSTEM (PHASE 2 - FIX #4)
   ========================================================================== */
/* --- TIER 1: BASE / NEUTRAL SURFACE (Secondary content, sidebars, info boxes) --- */

.mz-ft-spec-box,
.mz-home-faq__item,
.mz-seo-quick-item,
.wrap .main .sidebar .box,
.box-panel{
    background: var(--mz-surface-base) !important;
    border: 1px solid var(--mz-border-subtle) !important;
    border-radius: var(--mz-btn-radius) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}
.box-panel-title{
    font-family: var(--mz-font-display) !important;
    font-size: var(--mz-text-base) !important;
    color: var(--mz-gold-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--mz-border-subtle) !important;
    background: rgba(16, 22, 34, 0.6) !important;
}/* --- TIER 2: ELEVATED INTERACTIVE SURFACE (Classes, events, discord/wa, downloads) --- */

.mz-ch-card,
.mz-evento-card,
.mz-act-card{
    background: var(--mz-surface-elevated) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--mz-btn-radius) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mz-ch-card:hover,
.mz-evento-card:hover,
.mz-act-card:hover{
    border-color: var(--mz-border-gold) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px var(--mz-gold-subtle) !important;
    transform: translateY(-2px) !important;
}/* --- TIER 3: OVERLAY / HERO HIGHLIGHT CARDS (Gift Card, Bolão, Legendary Rewards) --- */

.mz-gift-card,
.muzord-bolao-panel,
.muzord-bolao-box{
    background: var(--mz-surface-overlay) !important;
    border: 1px solid var(--mz-border-gold) !important;
    border-radius: var(--mz-btn-radius) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 20px var(--mz-gold-subtle) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative !important;
}

.mz-gift-card::before,
.muzord-bolao-panel::before,
.muzord-bolao-box::before{
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 10% !important;
    right: 10% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, var(--mz-gold-light) 50%, transparent 100%) !important;
    pointer-events: none !important;
}/* ==========================================================================
   UNIVERSAL TABLE SYSTEM (PHASE 2 - FIX #5)
   ========================================================================== */

table.list.panel{
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 8px 0 16px 0 !important;
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-sm) !important;
    background: rgba(12, 16, 26, 0.7) !important;
    border: 1px solid var(--mz-border-subtle) !important;
    border-radius: var(--mz-btn-radius) !important;
    overflow: hidden !important;
}

table.list.panel th{
    background: var(--mz-surface-elevated) !important;
    color: var(--mz-gold-light) !important;
    font-family: var(--mz-font-display) !important;
    font-size: var(--mz-text-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--mz-border-subtle) !important;
    text-align: left !important;
}

table.list.panel td{
    padding: 10px 14px !important;
    color: var(--mz-parchment) !important;
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-sm) !important;
    font-variant-numeric: tabular-nums !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
    transition: background 0.15s ease !important;
}/* First column in key-value panel tables */
table.list.panel td:first-child{
    font-weight: 600 !important;
    color: var(--mz-gold-primary) !important;
    width: 35% !important;
    background: rgba(16, 22, 34, 0.4) !important;
    border-right: 1px solid var(--mz-border-subtle) !important;
}

table.list.panel tr:hover td{
    background: rgba(212, 175, 55, 0.06) !important;
}

table.list.panel tr:last-child td{
    border-bottom: none !important;
}/* ==========================================================================
   RANKINGS GRID & CARDS SYSTEM (PHASE 2 - FIX #5)
   ========================================================================== */
.rankings{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    width: 100% !important;
}
.rankings .character,
.rankings .guild{
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 88px !important;
    margin: 0 !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    background: var(--mz-surface-base) !important;
    border: 1px solid var(--mz-border-subtle) !important;
    border-radius: var(--mz-btn-radius) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
}
.rankings .character:hover,
.rankings .guild:hover{
    background: var(--mz-surface-elevated) !important;
    border-color: var(--mz-border-gold) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px var(--mz-gold-subtle) !important;
    transform: translateY(-2px) !important;
}/* Top 3 Rankings Highlights */
.rankings .character.rank-1,
.rankings .guild.rank-1{
    border-color: rgba(212, 175, 55, 0.5) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, var(--mz-surface-base) 100%) !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15) !important;
}/* Avatar container */
.rankings .character .image,
.rankings .guild .image{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--mz-border-subtle) !important;
    overflow: visible !important;
}
.rankings .character .image img,
.rankings .character .image svg,
.rankings .guild .image img,
.rankings .guild .image svg{
    position: static !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 3px !important;
    display: block !important;
}/* Description & Player Details */
.rankings .character .desc,
.rankings .guild .desc{
    flex: 1 !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
}
.rankings .character .name,
.rankings .guild .name{
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-sm) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
.rankings .character .name a,
.rankings .guild .name a{
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.rankings .character .name a:hover,
.rankings .guild .name a:hover{
    color: var(--mz-gold-light) !important;
    text-shadow: 0 0 8px var(--mz-gold-glow) !important;
}
.rankings .character .class,
.rankings .guild .class{
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-xs) !important;
    color: var(--mz-parchment) !important;
    opacity: 0.8 !important;
    height: auto !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.rankings .character .level,
.rankings .guild .level,
.rankings .character .resets,
.rankings .guild .resets{
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-xs) !important;
    font-weight: 700 !important;
    color: var(--mz-gold-light) !important;
    font-variant-numeric: tabular-nums !important;
    height: auto !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
.rankings .character .status,
.rankings .guild .status{
    font-size: 11px !important;
    height: auto !important;
    line-height: 1.2 !important;
}/* ==========================================================================
   GLOBAL FORM & INPUT COMPONENT SYSTEM (PHASE 3 - FIX #6)
   ========================================================================== */
.form,
.mz-form{
    font-family: var(--mz-font-body) !important;
    color: var(--mz-parchment) !important;
}

.mz-form-row{
    position: relative !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--mz-border-subtle) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 40px !important;
}

.mz-form-row:last-child{
    border-bottom: none !important;
}/* --- Input Fields (Text, Password, Email, Number, Tel, Search) --- */
.mz-input,
.form input[type=text],
.form input[type=password],
.form input[type=email],
.form input[type=number],
.form input[type=tel],
.form input[type=search],
.form textarea{
    background: rgba(8, 12, 20, 0.85) !important;
    border: 1px solid var(--mz-border-subtle) !important;
    border-radius: var(--mz-btn-radius) !important;
    color: #ffffff !important;
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-sm) !important;
    padding: 8px 12px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.form textarea{
    height: auto !important;
    min-height: 90px !important;
}
.mz-input:focus,
.form input[type=text]:focus,
.form input[type=password]:focus,
.form input[type=email]:focus,
.form input[type=number]:focus,
.form input[type=tel]:focus,
.form input[type=search]:focus,
.form textarea:focus{
    outline: none !important;
    border-color: var(--mz-gold-primary) !important;
    background: rgba(12, 18, 30, 0.95) !important;
    box-shadow: 0 0 10px var(--mz-gold-subtle), inset 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
}
.mz-input::placeholder,
.form input::placeholder,
.form textarea::placeholder{
    color: rgba(213, 205, 190, 0.4) !important;
    font-style: italic !important;
}/* --- Select Dropdowns --- */

.form select{
    background: rgba(8, 12, 20, 0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d4af37' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    background-size: 10px 6px !important;
    border: 1px solid var(--mz-border-subtle) !important;
    border-radius: var(--mz-btn-radius) !important;
    color: var(--mz-parchment-light) !important;
    font-family: var(--mz-font-body) !important;
    font-size: var(--mz-text-sm) !important;
    padding: 8px 32px 8px 12px !important;
    height: 38px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s ease !important;
}

.form select:focus{
    outline: none !important;
    border-color: var(--mz-gold-primary) !important;
    background-color: rgba(12, 18, 30, 0.95) !important;
    box-shadow: 0 0 10px var(--mz-gold-subtle) !important;
}

.form select option{
    background: #0d121c !important;
    color: var(--mz-parchment) !important;
    padding: 8px !important;
}/* --- Checkboxes & Radios (Accessible & Styled) --- */
.mz-checkbox,
.form input[type=checkbox],
.form input[type=radio]{
    accent-color: var(--mz-gold-primary) !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}/* --- Submit Area --- */
.form .submit,
.mz-form-submit{
    margin-top: 16px !important;
    padding-top: 12px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}/*
====================================================================
   MU ZORD - CUSTOM CSS UNIFICADO
   Epic Dark Luxury Theme
   Todos os estilos consolidados aqui (removidos do inline)
====================================================================
*/
/* ============ VARIAVEIS ============ */
:root{
    /* Cor/fonte existentes - paleta Epic Dark Luxury (preservados) */
    --color-primary: var(--mz-gold-primary);
    --color-primary-glow: rgba(218, 190, 104, 0.4);
    --font-cinzel: 'Cinzel', serif;
    --font-inter: 'Inter', sans-serif;

    /* Largura/espaco - layout fluido com teto (R1.2, R1.4) */
    --mz-container-max: 1600px;   /* teto configuravel: faixa 1280-1600px */
    --mz-container-fluid: 97vw;   /* largura fluida abaixo do teto */
    --mz-gap-cols: 28px;          /* espacamento entre colunas da home */
    --mz-shop-card-min: 150px;    /* largura minima do card de item da loja */
}/* ============ BASE ============ */
body{
    background: url(../images/bg1.webp?v=2026_v127) center top no-repeat,
                url(../images/bg2.webp?v=2026_v127) center 934px repeat-y #070503 !important;
    background-size: cover, 100% auto !important;
    font-family: var(--font-inter) !important;
    color: var(--mz-parchment) !important;
    font-size: 12px !important;
    overflow-x: hidden !important;
}
a:hover{
    color: goldenrod;
    text-decoration: none;
}
h4{
    font-size: 14px;
    font-family: 'cinzel';
    text-align: center;
    text-transform: uppercase;
}
hr{
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #181818;
}

@keyframes mz-loading-slide {
    0% { left: -40%; }
    100% { left: 100%; }
}/* Reduz o respiro entre os paineis de opcoes */
.box-panel.margin-bottom{
    margin-bottom: 12px !important;
}

@keyframes animarBola {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.3); opacity: 0.5; }
}/* ============ SOCIAL SIDEBAR (FIXED RIGHT) ============ */
div#midiasociais{
    position: fixed;
    right: 0;
    top: 28%;
    width: 64px;
    height: auto;
    background: rgba(8, 6, 4, 0.85);
    border: 1px solid #141c28;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -3px 0 15px rgba(0,0,0,0.6);
    margin: 0;
    padding: 10px 0;
    z-index: 9990;
}
div#midiasociais::before{
    display: none;
}
div#alinksz{
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 0;
}
div#alinksz a{
    color: var(--color-primary);
    font-size: 24px;
    margin: 0 0 10px 0;
    background: rgba(0, 0, 0, 0.8);
    width: 50px;
    text-align: center;
    display: block;
    height: 50px;
    border-radius: 167px;
    box-shadow: inset 0 0 11px #000;
    border: 1px solid #141c28;
    line-height: 51px;
    transition: all 0.3s;
}
div#alinksz a:hover{
    background: var(--color-primary);
    color: #000;
    box-shadow: 0 0 15px var(--color-primary-glow);
    transform: scale(1.1);
}/* ============ MENU PRINCIPAL ============ */
.container2{
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}
.randomClass{
    background: #000 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
}
.menujszz{
    background: #000 !important;
    background-image: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    padding: 8px 0 !important;
}
.menujszz::after{
    display: none !important;
}
ul#mennuj{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}
ul#mennuj li{
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul#mennuj li a{
    color: var(--mz-parchment) !important;
    font-size: 14px !important;
    font-family: 'Cinzel', serif !important;
    padding: 6px 10px !important;
    margin: 2px 4px !important;
    white-space: nowrap !important;
    transition: all 0.3s;
}
ul#mennuj li a:hover{
    color: var(--color-primary) !important;
    text-shadow: 0 0 10px var(--color-primary-glow);
}/* Item de menu correspondente a rota atual (R13.1) */
ul#mennuj li a.is-active{
    color: var(--color-primary) !important;
    text-shadow: 0 0 10px var(--color-primary-glow);
    position: relative;
}
ul#mennuj li a.is-active::after{
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -2px;
    height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary-glow);
    border-radius: 2px;
}/* ============ LANGUAGE SELECTOR ============ */
.language{
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
    margin: 0 5px !important;
    vertical-align: middle;
}
.language a{
    opacity: 0.5;
    transition: 0.3s;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
}
.language a.active,
.language a:hover{
    opacity: 1;
}
.language img{
    border: 1px solid var(--color-primary-glow);
    border-radius: 2px;
    transition: transform 0.2s;
    vertical-align: middle;
}
.language img:hover{
    transform: scale(1.1);
    border-color: var(--color-primary);
}/* ============ LAYOUT PRINCIPAL ============ */
/* Container fluido com teto: largura util maior em telas largas (R1.1)
   limitada ao teto configuravel --mz-container-max (R1.2). Mantem
   centralizacao e box-sizing; preserva identidade visual (R1.4).

   Rodape sticky (R1.3): .wrap vira uma coluna flex com altura minima
   igual a viewport (min-height: 100vh). Como os filhos (#contadordeinauguração,
   .header, .main, .footer) ja sao blocos full-width, empilha-los em
   flex-direction:column preserva o fluxo vertical existente. O .main
   recebe flex-grow para ocupar o espaco livre, empurrando o .footer para
   baixo quando o conteudo e curto e reduzindo a faixa preta inferior,
   sem alterar a estrutura do .phtml. */
.wrap{
    width: min(var(--mz-container-fluid), var(--mz-container-max)) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}
.wrap .main{
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    flex: 1 0 auto !important;
}/* Rodape empurrado para a base do .wrap quando o conteudo e curto (R1.3).
   margin-top:auto reforca o flex-grow do .main para qualquer caso de borda. */
.wrap .footer{
    flex: 0 0 auto !important;
    margin-top: auto !important;
}
.wrap .main .top{
    background: transparent !important;
}/* ============================================================
   LINHA DE 3 COLUNAS (flex fluido proporcional)
   As colunas deixam de ter largura fixa em px e passam a flex
   proporcional (flex-grow ~ proporcao original 291/568/310), de
   modo que o espaco extra do container fluido e redistribuido
   entre sidebar esquerda, conteudo e sidebar direita (R4.1, R4.2).
   flex-wrap:nowrap mantem as 3 colunas lado a lado em telas largas
   (>=1025px, R1.5); o empilhamento <1025px e tratado nas media
   queries (tarefa 3.2). Os min-width somam < 1025px para garantir
   que as 3 colunas caibam lado a lado sem overflow no teto.
============================================================ */
.wrap .main .mz-columns{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: var(--mz-gap-cols) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    clear: both !important;
    box-sizing: border-box !important;
}/* ============================================================
   LINHA DE 3 COLUNAS
   Sidebars com largura FIXA e a coluna central FLUIDA: todo o
   espaco extra do container vai para o conteudo (loja, mercado,
   noticias), que antes ficava estreito/espremido com flex
   proporcional. Em telas largas o centro fica bem mais amplo.
============================================================ */
.wrap .main .mz-columns .sidebar.left{
    flex: 0 0 260px !important;
    min-width: 260px !important;
    width: 260px !important;
    float: none !important;
    margin: 0 !important;
}
.wrap .main .mz-columns .content{
    flex: 1 1 0 !important;
    min-width: 300px !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
.wrap .main .mz-columns .sidebar.right{
    flex: 0 0 260px !important;
    min-width: 260px !important;
    width: 260px !important;
    float: none !important;
    margin: 0 !important;
}
.wrap .header{
    height: 340px !important;
}
.wrap .header .logotipo{
    width: 100%;
    position: absolute;
    left: 0;
    text-align: center;
    top: 140px !important;
    height: 180px;
}/* ============ AREA NOBRE (SLIDER + LOGIN) ============ */
/* Moldura de imagem raster de largura fixa (1200px). Como o .main agora
   e fluido (mais largo que 1200px), centralizamos o bloco com margin auto
   para que ele nao fique encostado a esquerda deixando vazio a direita. */
div#areanobrejsz{
    background: rgba(12, 9, 6, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(218, 190, 104, 0.3) !important;
    border-radius: 12px !important;
    width: 1200px;
    max-width: 100%;
    height: auto;
    min-height: 340px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9), inset 0 0 20px rgba(218, 190, 104, 0.05);
    margin: 20px auto 0 auto;
    padding: 12px;
    z-index: 1;
    position: relative;
    transform: none !important;
    overflow: visible !important;
    box-sizing: border-box;
}
div#sliderjscallzer{
    width: 707px;
    min-height: 275px;
    margin: 30px 0 40px 102px;
    position: absolute;
}
div#areadousuariojscallzer{
    width: 266px;
    float: right;
    background: rgba(10, 8, 4, 0.95);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 20px rgba(218, 190, 104, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    min-height: 150px;
    height: auto !important;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 14px 8px 14px !important;
    margin: 22px 103px 0 0 !important;
    box-sizing: border-box;
    overflow-x: visible;
}/* Rolagem discreta (so aparece se o conteudo logado exceder a moldura) */
div#areadousuariojscallzer::-webkit-scrollbar{ width: 6px; }
div#areadousuariojscallzer::-webkit-scrollbar-track{ background: transparent; }
div#areadousuariojscallzer::-webkit-scrollbar-thumb{
    background: rgba(212, 190, 104, 0.35);
    border-radius: 3px;
}
div#areadousuariojscallzer form{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}
div#areadousuariojscallzer .box{
    height: auto !important;
    overflow: visible !important;
}
div#areadousuariojscallzer p.title{
    font-family: var(--font-cinzel);
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    margin: 6px 0 12px 0;
}
div#effejscallzer{
    z-index: 1;
    margin: -290px 0 0 30px;
    position: absolute;
}/* ============ LOGIN ============ */
.partial-login input{
    color: #fff !important;
    font-family: var(--font-inter) !important;
}
input.login-input,
.partial-login input.login-input,
div#areadousuariojscallzer input.login-input,
div#areadousuariojscallzer .partial-login input.login-input{
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 4px !important;
    color: #fff !important;
    padding: 8px 12px !important;
    margin: 4px 0 6px 0 !important;
    outline: none !important;
    font-family: var(--font-inter) !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s, box-shadow 0.3s;
    display: block !important;
    height: auto !important;
    font-size: 13px !important;
}
input.login-input::placeholder{ color: #9a8a66; }
input.login-input:focus,
div#areadousuariojscallzer input.login-input:focus{
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 0 8px var(--color-primary-glow) !important;
}
div#botaodevermaisrankings a.btn,
div#botaodevermaisrankings a{
    padding: 6px 16px !important;
    font-size: 11px !important;
    display: inline-block !important;
    background: transparent !important;
    color: var(--mz-gold-primary) !important;
    border: 1px solid var(--mz-gold-primary) !important;
    border-image: none !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    box-shadow: 0 0 5px rgba(218, 190, 104, 0.2) !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    margin: 0 auto !important;
    width: auto !important;
    line-height: normal !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}
div#botaodevermaisrankings a.btn:hover,
div#botaodevermaisrankings a:hover{
    background: var(--mz-gold-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(218, 190, 104, 0.6) !important;
}
input.login-submit,
.partial-login input.login-submit,
div#areadousuariojscallzer input.login-submit,
div#areadousuariojscallzer .partial-login input.login-submit{
    background: rgba(14, 19, 28, 0.95) !important;
    background-image: none !important;
    color: var(--color-primary) !important;
    padding: 10px 20px !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: center !important;
    letter-spacing: 2px !important;
}
input.login-submit:hover,
div#areadousuariojscallzer input.login-submit:hover{
    background: var(--color-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 12px var(--color-primary-glow) !important;
    filter: none !important;
}
.forgot-password,
div#areadousuariojscallzer .forgot-password,
.partial-login .forgot-password{
    color: #fff !important;
    margin: 12px 0 10px 0 !important;
    font-family: 'cinzel' !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-align: center !important;
    position: relative !important;
    width: 100% !important;
}
.forgot-password a,
div#areadousuariojscallzer .forgot-password a{
    color: var(--color-primary) !important;
    text-decoration: none;
}
.forgot-password a:hover{
    text-shadow: 0 0 8px var(--color-primary-glow);
}
.loading-login img{
    opacity: 0;
}
.loading-login,
div#areadousuariojscallzer .loading-login{
    display: none !important;
    margin: 0 !important;
    background: none !important;
}
div#crieusacontajscallzer{
    margin: 10px 0 5px 0 !important;
    text-align: center !important;
}
div#crieusacontajscallzer a{
    display: block !important;
    height: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    padding: 7px 0 !important;
    color: var(--mz-gold-light) !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    background: linear-gradient(180deg, rgba(40,32,16,0.9), rgba(14, 19, 28, 0.95)) !important;
    background-image: linear-gradient(180deg, rgba(40,32,16,0.9), rgba(14, 19, 28, 0.95)) !important;
    border: 1px solid var(--color-primary) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow: 0 0 11px #000, inset 0 0 11px rgba(0,0,0,0.6) !important;
    text-shadow: 0 0 8px var(--color-primary-glow) !important;
    transition: all 0.3s;
    box-sizing: border-box !important;
}
div#crieusacontajscallzer a:hover{
    background: linear-gradient(180deg, var(--color-primary), #b6923e) !important;
    background-image: linear-gradient(180deg, var(--color-primary), #b6923e) !important;
    color: #0c1118 !important;
    box-shadow: 0 0 18px var(--color-primary-glow) !important;
    text-shadow: none !important;
    filter: none !important;
}/* ============ SIDEBAR LEFT (RANKINGS) ============ */
.wrap .main .sidebar.left{
    background: transparent !important;
    float: left !important;
    width: 291px !important;
    margin: 0 0 0 26px !important;
}
.wrap .main .sidebar.left .container .title{
    background: linear-gradient(90deg, var(--color-primary-glow) 0%, rgba(15,15,15,0.9) 100%) !important;
    font-family: var(--font-cinzel);
    text-align: center;
    width: 100% !important;
    height: auto !important;
    padding: 8px 0;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 11px #000;
    line-height: normal !important;
    font-weight: bold;
    border-left: 3px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary-glow);
    margin-bottom: 8px;
}
.wrap .main .sidebar.left .container .box{
    background: transparent !important;
    width: auto !important;
    margin-left: 0 !important;
}
.wrap .main .sidebar.left .sidebar-bottom{
    background: transparent !important;
    height: 10px;
}
.wrap .main .sidebar{
    width: 334px !important;
}
.top-players .type,
.top-players-group .type{
    background: transparent;
    color: var(--color-primary);
    font-family: 'cinzel';
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 11px #000;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px solid #141c28;
    border-radius: 0;
    padding: 8px 0 4px 0;
}
.type::before{
    content: '';
    width: 100%;
    height: 2px;
    background-image: linear-gradient(to right, #52422d00, var(--color-primary), #52422d00);
    display: block;
    margin: -8px 0 5px 0;
}/* ============ CONTENT (CENTRO) ============ */
.wrap .main .content{
    width: 568px !important;
    float: left !important;
    margin-left: 0 !important;
}
.wrap .main .content .container{
    background: transparent !important;
    /* min-height fixa removida: criava reserva de altura (vao vazio) abaixo
       do conteudo curto. A altura passa a ser natural; em desktop o stretch
       das colunas (media >=1025px) ja preenche a moldura. */
    min-height: 0;
    overflow: visible !important;
    height: auto !important;
}
.wrap .main .content .container h1.title{
    margin: 0 0 7px 0;
    height: auto !important;
    min-height: 30px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    font-weight: 700;
    line-height: 1.3 !important;
    padding: 6px 30px;
    font-size: 23px;
    background: transparent !important;
    font-family: var(--font-cinzel);
    text-align: center !important;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 11px #000;
    overflow: visible !important;
    white-space: normal !important;
}
.wrap .main .content .container .c{
    position: relative;
    z-index: 10;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.wrap .main .content .content-middle{
    display: none !important;
}
.content{
    padding: 20px 16px 20px 16px;
    background: rgba(10, 8, 4, 0.6) !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: visible !important;
    height: auto !important;
}
.content::before{
    display: none !important;
}
.content::after{
    display: none !important;
}
.ajax-container{
    padding: 0;
    color: #fff;
}/* ============ NOTICIAS / POSTS ============ */
div#noticiiasjscallzer{
    background: transparent;
    padding: 0 0 20px 0;
    height: auto;
    width: 100%;
    box-sizing: border-box;
}
ul.posts{
    margin: 20px 0;
    list-style: none;
    background: url(../images/bg-rank-row.webp);
    background-size: 140%;
    padding: 0 0 0 12px;
    text-shadow: 0 0 11px #000;
    font-size: 13px;
    font-family: 'cinzel';
    font-weight: 600;
}
ul.posts li a{
    font-size: 14px;
    color: #fff;
    transition: 0.3s;
}
ul.posts li a:hover{
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary-glow);
}
div#botaodevermaisrankings a{
    width: 130px;
    margin: 0 auto;
}/* ============ SIDEBAR RIGHT (INFO/TEAM) ============ */
.wrap .main .sidebar.right{
    background: transparent !important;
    width: 310px !important;
    float: right !important;
}
.wrap .main .sidebar.right .container .box-bottom{
    height: 10px;
    width: 260px;
    background: transparent !important;
}
.wrap .main .sidebar.right .container .title{
    margin: 0;
    background: transparent !important;
    height: 27px;
    line-height: 27px;
    color: var(--color-primary);
    font-size: 12px;
    padding-left: 10px;
}
.wrap .main .sidebar.right .container .box{
    width: 100% !important;
    color: #fff;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
.wrap .main .sidebar.right .sidebar-bottom{
    background: transparent !important;
    height: 10px;
}
div#sidebarjsz .title{
    background: linear-gradient(90deg, var(--color-primary-glow) 0%, rgba(15,15,15,0.9) 100%) !important;
    font-family: var(--font-cinzel);
    text-align: center;
    width: 100% !important;
    padding: 8px 0;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 11px #000;
    font-weight: bold;
    margin-bottom: 6px;
    box-sizing: border-box !important;
    border-left: 3px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary-glow);
}
.wrap .main .sidebar.right .container .box ul{
    margin: 5px 0;
    list-style: none;
    width: 100% !important;
    padding: 0 4px;
    font-family: var(--font-inter);
    font-size: 11px;
    box-sizing: border-box !important;
}
.wrap .main .sidebar.right .container .box ul li{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 6px 2px;
    line-height: 1.4;
    color: #fff;
    border-bottom: 1px solid #141c28;
    text-shadow: 0 0 8px #000;
}
.wrap .main .sidebar.right .container .box ul li span.text{
    color: var(--color-primary);
    font-weight: bold;
    font-size: 11px;
    text-align: right;
    flex-shrink: 0;
}
.wrap .main .sidebar.right .container .box ul li span.offline{
    color: red;
    text-shadow: 0 0 8px #180000;
    font-weight: bold;
    font-size: 11px;
    text-align: right;
    flex-shrink: 0;
}
.sidebar.right div#botaodevermaisrankings{
    width: 100% !important;
    margin: 10px 0 0 0 !important;
    text-align: center !important;
}
div#botaodevermaisrankings a.btn,
div#botaodevermaisrankings a{
    padding: 6px 16px !important;
    font-size: 11px !important;
    display: inline-block !important;
    background: linear-gradient(135deg, rgba(14, 19, 28, 0.95) 0%, rgba(14, 19, 28, 0.98) 100%) !important;
    color: var(--mz-gold-primary) !important;
    border: 1px solid var(--mz-gold-primary) !important;
    border-image: none !important;
    border-radius: 4px !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    box-shadow: 0 0 5px rgba(218, 190, 104, 0.2) !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    margin: 0 auto !important;
    width: auto !important;
    line-height: normal !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}
div#botaodevermaisrankings a.btn:hover,
div#botaodevermaisrankings a:hover{
    background: var(--mz-gold-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(218, 190, 104, 0.6) !important;
}/* Remove old carbon fiber backgrounds that frame the elements in the right sidebar */
.wrap .main .sidebar.right .container .box{
    background: transparent !important;
    border: none !important;
}/* ============ TABLES / RANKINGS ============ */
/* Cabecalho: gradiente dourado metalico (substitui a imagem de botao
   client_down_btn.webp, que tinha texto/desenho embutido aparecendo como
   "letras fantasma" atras da barra ao ser escalada). */
/* Task 11.1: Expandir table.list para largura total disponível
   Remove restrições de largura fixa e garante que tabelas dentro de
   .ajax-container usem 100% da largura (Requirements 2.2, 2.4).
   Preserva estilização dos headers (gradiente dourado) e rows. */
table.list{
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}/* Garante que tabelas dentro de containers centralizados usem largura total */
.ajax-container table.list,
.content table.list{
    width: 100% !important;
    max-width: 100% !important;
}
table.list thead tr{
    background: linear-gradient(180deg, #e8d18a 0%, #cda955 48%, #a07f3c 52%, #8c6c30 100%) !important;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
table.list tbody tr td{
    padding: 4px;
    background: transparent !important;
}
table.list tr{
    background: url(../images/bg-rank-row.webp);
    color: #f6db86;
    text-shadow: 0 0 11px #000;
}
table.list tr:hover{
    box-shadow: inset 0 0 11px #000;
}
table.custom{
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 6px !important;
    table-layout: fixed !important;
    background: transparent !important;
}
table.custom tr{
    background: transparent !important;
}
table.custom tr td,
table.custom tbody tr td,
table.custom td,
.ajax-container table.custom td,
.wrap .main .content table.custom td{
    background: rgba(0, 0, 0, 0.5) !important;
    font-size: 12px !important;
    color: #fff !important;
    height: auto !important;
    padding: 14px 10px !important;
    border-bottom: none !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4) !important;
    text-align: center !important;
    vertical-align: top !important;
    font-family: var(--font-cinzel) !important;
    transition: all 0.3s;
}
table.custom tr td:hover,
table.custom td:hover{
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 0 8px var(--color-primary-glow) !important;
    background: rgba(14, 19, 28, 0.95) !important;
}
table.custom td.true,
table.custom tr td.true{
    border: 1px solid var(--color-primary-glow) !important;
    background: rgba(14, 19, 28, 0.95) !important;
    font-size: 12px !important;
    color: var(--color-primary) !important;
    height: auto !important;
    padding: 10px 4px !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px #000;
    box-shadow: none !important;
    border-radius: 4px !important;
    text-align: center !important;
}
table.custom td.true:hover{
    background: rgba(14, 19, 28, 0.95) !important;
    box-shadow: none !important;
    border-color: var(--color-primary-glow) !important;
}
table.custom td img{
    max-width: 120px !important;
    height: auto !important;
    filter: drop-shadow(0 0 6px var(--color-primary-glow));
    display: block !important;
    margin: 0 auto 8px auto !important;
}
table.custom td a{
    display: inline-block !important;
    padding: 6px 14px !important;
    background: rgba(14, 19, 28, 0.95) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-image: none !important;
    border-radius: 4px !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s;
    margin-top: 6px !important;
}
table.custom td a:hover{
    background: var(--color-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--color-primary-glow) !important;
}/* ============ RANKINGS GRID RESPONSIVO (Task 10.1) ============ */
/* Converte .rankings de lista vertical com float para CSS Grid responsivo.
   A grade se adapta a largura disponivel, preenchendo o espaco horizontal
   em telas largas sem deixar vazios expressivos a direita. */
.rankings{
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(251px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ============================================================
   TASK 10.2: BREAKPOINTS RESPONSIVOS PARA RANKINGS
   Adapta o número de colunas do grid .rankings conforme a largura
   disponível (Requirements 2.2, 2.4).
   
   - Desktop (≥1025px): 3-4 colunas (auto-fill com minmax)
   - Tablet (768-1024px): 2 colunas fixas
   - Mobile (<768px): 1 coluna full-width
   
   A grade base (Task 10.1) usa auto-fill para desktop amplo;
   nas media queries forçamos colunas fixas para tablet/mobile.
============================================================ */

/* Tablet: 2 colunas fixas (768px-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.rankings{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: 1 coluna full-width (<768px) */
@media (max-width: 767px) {
.rankings{
        grid-template-columns: 1fr !important;
    }
.rankings .character,
    .rankings .guild{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        overflow: visible !important;
    }
.rankings .character .image,
    .rankings .guild .image{
        flex-shrink: 0 !important;
        width: 50px !important;
        height: 62px !important;
    }
.rankings .character .image img,
    .rankings .guild .image img{
        width: 50px !important;
        height: 62px !important;
        object-fit: cover !important;
    }/* Bloco .desc ocupa o espaco restante e permite wrap natural */
.rankings .character .desc,
    .rankings .guild .desc{
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
.rankings .character .name,
    .rankings .character .level,
    .rankings .character .class,
    .rankings .character .status,
    .rankings .character .info,
    .rankings .guild .name,
    .rankings .guild .level,
    .rankings .guild .info{
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
.rankings .character .name,
    .rankings .guild .name{
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }
.rankings .character .level,
    .rankings .guild .level{
        font-size: 14px !important;
        font-weight: 700 !important;
        color: var(--color-primary, var(--mz-gold-primary)) !important;
    }
.rankings .character .class{
        font-size: 12px !important;
        color: #bbb !important;
    }
.rankings .character .status{
        font-size: 11px !important;
        color: #8c8c8c !important;
    }
}
.rankings .character .level,
.rankings .guild .level{
    margin: 2px 0 6px;
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 700;
    text-shadow: 0 0 8px var(--color-primary-glow);
}
.rankings{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}
.rankings .character,
.rankings .guild{
    box-sizing: border-box !important;
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 10px 90px 10px 85px !important; /* 85px left (logo), 90px right (badge) */
    border: 1px solid rgba(218, 190, 104, 0.25) !important; /* Dourado suave para dar mais vida */
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 19, 28, 0.98), rgba(0,0,0,0.5)) !important; /* Fundo um pouco mais claro */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 0 0 10px 0 !important; /* SEPARAÇÃO DAS COLUNAS/FILEIRAS */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible !important; /* Prevent cutting off shadows or badges */
}
.rankings .character .desc,
.rankings .guild .desc{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1;
    width: 100%;
    min-width: 0;
}
.rankings .character .desc > div,
.rankings .guild .desc > div{
    flex: 1;
    text-align: center;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 1) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    word-wrap: break-word;
    line-height: 1.2 !important;
}
.rankings .character .desc > div a,
.rankings .guild .desc > div a{
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.rankings .character .desc .name,
.rankings .guild .desc .name{
    text-align: left;
    font-size: 17px !important;
    font-weight: 700 !important;
}
.rankings .character .desc .name a,
.rankings .guild .desc .name a{
    color: var(--color-primary) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.rankings .character:hover,
.rankings .guild:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(218, 190, 104, 0.5) !important;
    background: linear-gradient(135deg, rgba(40,32,15,0.9), rgba(0,0,0,0.7)) !important;
}/* Destaque top 3 */
.rankings .character.rank-1,
.rankings .guild.rank-1{
    border-color: rgba(218, 190, 104, 0.6) !important;
    background: linear-gradient(135deg, rgba(218,190,104,0.3), rgba(0,0,0,0.6)) !important;
    box-shadow: inset 0 0 20px rgba(218, 190, 104, 0.2) !important;
}
.name a{
    color: var(--color-primary);
    font-weight: bold;
    text-shadow: 0 0 11px #000;
}
.rankings .character .image,
.rankings .guild .image{
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 15px !important;
    width: 50px !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}
.rankings .guild .image table,
.rankings .guild .image canvas{
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}
.rankings .character .image img,
.rankings .character .image svg,
.rankings .guild .image img,
.rankings .guild .image svg{
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.rankings .character:hover .image img,
.rankings .character:hover .image svg,
.rankings .guild:hover .image img,
.rankings .guild:hover .image svg{
    border-color: var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary-glow);
    transform: translateY(-50%) scale(1.1);
}/* ============ BUTTONS ============ */
input.btn, a.btn, button.btn{
    height: 30px;
    text-align: center;
    color: #000;
    border: 1px solid var(--color-primary) !important;
    background: var(--color-primary);
    padding: 5px 12px;
    text-shadow: none;
    margin: 0 auto 20px auto;
    display: block;
    box-shadow: 0 0 11px #000;
    text-transform: uppercase;
    font-family: var(--font-cinzel);
    font-weight: 700;
    transition: all 0.3s;
    line-height: normal;
    border-radius: 4px;
}
input.btn:hover, a.btn:hover, button.btn:hover{
    background: var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary-glow);
    color: #000;
    text-decoration: none;
    filter: brightness(1.1);
}
.btn-secondary{
    border-radius: 4px !important;
    border: 1px solid var(--mz-gold-primary) !important;
    display: inline-block !important;
    color: var(--mz-gold-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: rgba(14, 19, 28, 0.95) !important;
    padding: 8px 16px !important;
    text-shadow: none !important;
    margin: 5px !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    font-family: var(--font-cinzel) !important;
    letter-spacing: 1px !important;
    transition: all 0.3s !important;
    text-decoration: none !important;
}
.btn-secondary:hover{
    background: var(--mz-gold-primary) !important;
    color: #000 !important;
    text-decoration: none !important;
    box-shadow: 0 0 10px rgba(218, 190, 104, 0.4) !important;
}
.btn-secondary.active{
    background: var(--mz-gold-primary) !important;
    color: #000 !important;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.3) !important;
}/* ============================================================
   COMPONENTES-BASE (consistencia visual entre paginas)
   Camada de base compartilhada para os mesmos tipos de elemento
   (titulos, cards) usada em paginas diferentes. Referencia
   EXCLUSIVAMENTE os tokens de cor/fonte (--color-primary,
   --color-primary-glow, --font-cinzel, --font-inter); nenhum valor
   literal de cor/fonte ja representado por token e reintroduzido
   (R5.1, R5.3, R5.4).

   Especificidade intencionalmente baixa (sem !important, seletor
   simples): as regras contextuais ja existentes (ex.: .sidebar.left
   .container .title, h1.title, .shop-categories .title) continuam a
   sobrepor estes padroes onde precisam de ajustes proprios, enquanto
   qualquer ocorrencia do mesmo elemento em outra pagina herda o mesmo
   conjunto de estilos de base (R5.2). */
/* Titulos de secao: mesma fonte/cor/transformacao de base em todo o site */
.title,
h1.title,
h2.title,
h3.title{
    font-family: var(--font-cinzel);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 11px #000;
}/* Card base reutilizavel para novos componentes visuais (R5.4) */
.card{
    background: linear-gradient(135deg, rgba(14, 19, 28, 0.95), rgba(0,0,0,0.6));
    border: 1px solid var(--color-primary-glow);
    border-radius: 6px;
    box-shadow: inset 0 0 11px #000;
    color: var(--mz-parchment);
    font-family: var(--font-inter);
    box-sizing: border-box;
    transition: all 0.3s;
}
.card:hover{
    border-color: var(--color-primary);
    box-shadow: inset 0 0 11px #000, 0 0 10px var(--color-primary-glow);
}/* VIP page styles */
.ajax-container h3{
    font-family: var(--font-cinzel);
    color: var(--color-primary);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 20px 0 10px 0;
    text-shadow: 0 0 8px var(--color-primary-glow);
}
.ajax-container p{
    line-height: 1.6;
    font-size: 13px;
    color: var(--mz-parchment);
}
.ajax-container hr{
    border: 0;
    border-top: 1px solid var(--color-primary-glow);
    margin: 20px 0;
}
.ajax-container button{
    background: rgba(14, 19, 28, 0.95) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: all 0.3s;
}
.ajax-container button:hover{
    background: var(--color-primary) !important;
    color: #000 !important;
}
.breadcrumber{
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 11px;
    color: #999;
}
.breadcrumber li{
    display: inline;
}
.breadcrumber li a{
    color: var(--color-primary);
    text-decoration: none;
}
.breadcrumber li.active{
    color: #fff;
}/* ============ BOX PANELS ============ */
.box-panel{
    margin-bottom: 12px;
}
.ajax-container .grid{
    display: block !important;
}
.box-panel .box-panel-title{
    margin: 0 0 0 0;
    border-image: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    display: block;
    border: none;
    border-left: 3px solid var(--color-primary);
    z-index: 100;
    padding: 8px 12px;
    background: linear-gradient(90deg, var(--color-primary-glow) 0%, rgba(15,15,15,0.9) 100%);
    text-shadow: 0 0 11px #000;
    font-family: var(--font-cinzel);
    letter-spacing: 1px;
    border-radius: 4px 4px 0 0;
}/* ============ EVENTOS ============ */
.p2EVENTOS p.title{
    display: none;
}
#mz-eventos{
    margin: 20px 0 0 0;
    width: auto;
}
#mz-eventos .mz-eventos-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
#mz-eventos .mz-eventos-header h3{
    font-family: var(--font-cinzel);
    color: var(--color-primary);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px var(--color-primary-glow);
    margin: 0;
}
#mz-eventos .mz-eventos-header h3 i{
    margin-right: 6px;
    font-size: 14px;
}
#mz-eventos select,
#mz-eventos-filter-slot select{
    background: rgba(10, 8, 4, 0.9) !important;
    border: 1px solid var(--color-primary-glow) !important;
    color: var(--color-primary) !important;
    font-family: var(--font-cinzel) !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    cursor: pointer;
}
.events-spotlight{
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}
.events-spotlight .event{
    margin: 0 !important;
    display: block !important;
    width: auto !important;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    transition: all 0.3s;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
}
.events-spotlight .event:hover{
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 0 8px var(--color-primary-glow);
    background: rgba(14, 19, 28, 0.95) !important;
}
.events-spotlight .event h4{
    font-family: var(--font-cinzel) !important;
    color: #fff !important;
    font-size: 13px !important;
    margin: 0 0 4px 0 !important;
    text-align: left !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.events-spotlight .event span{
    font-size: 13px;
    line-height: 1.45;
    color: #b9ad97;
}
.events-spotlight .event span b,
.events-spotlight .event span strong,
.events-spotlight .event .countdown,
.events-spotlight .event b{
    color: var(--color-primary) !important;
    font-weight: 700;
}/* Botao Todos Eventos */
.p2{
    text-align: center;
    margin-top: 12px;
}
.p2 a.btn{
    background: rgba(14, 19, 28, 0.95) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    transition: all 0.3s;
}
.p2 a.btn:hover{
    background: var(--color-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 15px var(--color-primary-glow) !important;
}/* ============ CASTLE SIEGE ============ */
img.siege{
    display: none;
}
.castle-siege{
    position: relative;
    width: 100%;
    max-width: 694px;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1024 / 576;
    margin: 14px auto;
    background: #070b12;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.32);
    box-shadow: 0 8px 30px rgba(0,0,0,0.85);
}

@media (max-width: 600px) {
html body .castle-siege{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }
}/* ============ SLIDER PAGER ============ */
.sy-pager{
    clear: both;
    display: grid;
    width: 3%;
    margin: -229px 0 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
    z-index: 11111;
    position: relative;
    float: right;
}
.sy-pager li a{
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    background-size: 2em;
    background: transparent url(../images/spr_event_bt.fw.webp);
    background-size: 100%;
    border-radius: 0;
    position: relative;
    z-index: 1111111;
}
.sy-pager li.sy-active a{
    background: transparent url(../images/spr_event_btn.webp);
    background-size: 100%;
}
.sy-controls{
    display: none;
    list-style: none;
    height: 100%;
    width: 100%;
    position: absolute;
    padding: 0;
    margin: 40px 0 0 0;
}/* ============ COUNTDOWN ============ */
.countdowns .countdown{
    margin: 100px 0 0 930px;
    padding: 7px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 31px #000, inset 0 0 11px #000;
    color: var(--color-primary);
    text-shadow: 0 0 11px #000;
}
.market .market-search .title{
    background-color: #917435;
    border-radius: 3px;
    box-shadow: inset 0 0 2px #000;
    font-size: 15px;
    margin: 4px 0;
    color: #fff;
    padding: 5px;
    text-align: center;
    font-family: var(--font-cinzel);
    font-weight: 600;
}
.market-search ul li a{
    color: #fff;
}/* ============ PAGHIPER ============ */
/* ============ LOJA DE PACOTES (CREDIT SHOP) ============ */
/* Task 16.1: Expandir .credit-shop de 2 para 3-4 colunas em desktop amplo
   Usa grid auto-fill com minmax(200px, 1fr) para aproveitar largura disponivel.
   A grade se adapta automaticamente: 3-4 colunas em desktop amplo (>=1025px),
   2 colunas em tablet (768-1024px), 1-2 em mobile (<768px).
   Requirements: R3.2 (densidade da loja), R1.1 (aproveitamento horizontal). */
.credit-shop{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}
.credit-shop li{
    text-align: center !important;
    width: auto !important;
    float: none !important;
    padding: 16px 10px !important;
    border-bottom: none !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s;
    box-sizing: border-box !important;
}
.credit-shop li:hover{
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 0 8px var(--color-primary-glow) !important;
    background: rgba(14, 19, 28, 0.95) !important;
}
.credit-shop li:nth-child(3n){
    padding-right: 10px !important;
}
.credit-shop .title{
    font-family: var(--font-cinzel) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    margin: 8px 0 6px 0 !important;
    text-shadow: 0 0 8px #000;
}
.credit-shop .desc{
    background: rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    height: auto !important;
    padding: 8px !important;
    line-height: 1.4em;
    margin-bottom: 6px !important;
    color: #ccc !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    border: 1px solid var(--color-primary-glow) !important;
}
.credit-shop .price{
    font-family: var(--font-cinzel) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin: 8px 0 !important;
    text-shadow: 0 0 5px var(--color-primary-glow);
}
.credit-shop img{
    max-width: 120px !important;
    height: auto !important;
    filter: drop-shadow(0 0 6px var(--color-primary-glow));
    margin: 0 auto;
    display: block;
}
.credit-shop a{
    display: inline-block !important;
    padding: 6px 16px !important;
    background: rgba(14, 19, 28, 0.95) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-image: none !important;
    border-radius: 4px !important;
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.3s;
    margin-top: 6px;
}
.credit-shop a:hover{
    background: var(--color-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 10px var(--color-primary-glow) !important;
}/* ============ SELECAO DE PERSONAGENS (PAINEL) ============ */
/* Os cards de selecao (.characters > a.character) nao tinham tema:
   nomes cinza apagados e avatares sem moldura. Aqui aplicamos grid
   responsivo, moldura dourada, nome legivel e destaque do ativo. */
.characters{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 12px 0 !important;
}
.characters a.character{
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    background: linear-gradient(180deg, rgba(16, 22, 32, 0.85), rgba(8, 11, 17, 0.9)) !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
}
.characters a.character:hover{
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 12px var(--color-primary-glow) !important;
    transform: translateY(-2px) !important;
}
.characters a.character.active{
    border-color: var(--color-primary) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 0 12px var(--color-primary-glow) !important;
    background: linear-gradient(180deg, rgba(50,40,18,0.9), rgba(12, 17, 24, 0.9)) !important;
}
.characters a.character .name{
    font-family: var(--font-cinzel) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    text-shadow: 0 0 8px #000 !important;
    white-space: nowrap !important;
}
.characters a.character .avatar{
    width: auto !important;
    height: auto !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,0.4) !important;
}
.characters a.character .avatar img{
    display: block !important;
    border-radius: 3px !important;
}/* ============ CLASSIFICACAO ============ */
div#classificacaojscallzer{
    width: 220px;
    margin: 270px 0 0 70px;
    position: absolute;
    text-align: left;
    color: #888;
    font-size: 9px;
}
div#classificacaojscallzer::before{
    content: '';
    display: block;
    width: 44px;
    height: 44px;
    background: url(../images/classificacao.webp) -295px -10px;
    position: absolute;
    margin: -8px 0 0 -58px;
    background-size: 174px;
    border-radius: 6px;
    box-shadow: inset 0 0 11px #000;
}
.onlines{
    display: none;
}/* ============ FOOTER ============ */
.footer{
    width: 100%;
    /* position:relative: vira o contexto da elf (.footer::after), que agora
       e ancorada no canto direito com right/bottom (em vez de margens frageis). */
    position: relative;
    text-align: center;
    float: left;
    padding-top: 20px;
    padding-bottom: 20px;
    /* P2/P3: reduz a reserva vertical do rodape (era 400px) que criava uma
       grande faixa preta entre o conteudo e o logo/copyright do footer. */
    height: 120px;
    margin: 40px 0 0 0;
}
.footer::after,
.footer::before{
    display: none !important;
    content: none !important;
    background: none !important;
    visibility: hidden !important;
}
.footer p{
    color: var(--color-primary);
    position: relative;
    z-index: 1;
    line-height: 15px;
    width: 280px;
    font-family: var(--mz-font-body);
    font-weight: bold;
    text-shadow: 0 0 11px #000;
    filter: drop-shadow(0 -6mm 4mm #000);
    text-align: center;
    /* P2/P3: sobe o logo/copyright (era 130px de topo) reduzindo o vao preto
       no rodape, mantendo a sobreposicao do logo via ::before.
       margin lateral auto: centraliza o bloco de creditos no rodape (desktop). */
    margin: 60px auto -126px auto;
}
.footer p a{
    color: var(--color-primary);
    text-decoration: none;
}
.footer p::before{
    width: 500px;
    background: url(../images/logomuzord.webp?v=2026_v9) no-repeat center;
    height: 170px;
    content: '';
    display: block;
    position: absolute;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
    margin: -190px 0 0 0;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    100% { opacity: 1; filter: drop-shadow(0 0 20px var(--color-primary-glow)); }
}/* ============ EFEITOS VISUAIS (SPARKS/RAY/RAINBOW) ============ */
.ray{
    background: url(../images/ray.webp) no-repeat;
    width: 419px;
    height: 419px;
    position: absolute;
    left: 394px;
    top: 252px;
    animation: ray 14s infinite linear;
    transform: rotate(0deg);
    opacity: 0.3;
}

@keyframes ray {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.rainbow{
    background: url(../images/rainbow.webp) no-repeat;
    background-size: 150px 142px;
    width: 445px;
    height: 422px;
    position: absolute;
    left: 500px;
    top: 329px;
    opacity: 0;
    animation: rainbow 5s infinite linear;
}

@keyframes rainbow {
    0% { background-size: 150px 142px; opacity: 0; }
    50% { opacity: 0.3; }
    100% { background-size: 445px 422px; opacity: 0; left: 500px; top: 329px; }
}
.sparks{
    position: absolute;
    width: 1200px;
    left: 50%;
    margin-left: -600px;
    bottom: -650px;
}
.sparks > div{ position: absolute; }
.sparks .spark_1{
    background: url(../images/spark_1.webp) no-repeat;
    width: 764px; height: 313px; right: 0; bottom: 0;
    will-change: transform, opacity;
    animation: spark-1 4s linear infinite;
    animation-delay: 1s;
}

@keyframes spark-1 {
    0% { transform: translateY(320px) scale(0.6); opacity: 1; }
    25% { transform: translateY(240px) scale(0.7); opacity: 1; }
    50% { transform: translateY(160px) scale(0.8); opacity: 1; }
    75% { transform: translateY(80px) scale(0.9); opacity: 0.5; }
    100% { transform: translateY(0px) scale(1); opacity: 0; }
}
.sparks .spark_2{
    background: url(../images/spark_2.webp) no-repeat;
    width: 179px; height: 335px; right: 230px; bottom: 0;
    will-change: transform, opacity;
    animation: spark-1 4s linear infinite;
    animation-delay: 2s;
}
.sparks .spark_3{
    background: url(../images/spark_3.webp) no-repeat;
    width: 128px; height: 165px; right: 280px; bottom: 0;
    will-change: transform, opacity;
    animation: spark-3 4s linear infinite;
    animation-delay: 2s;
}

@keyframes spark-3 {
    0% { transform: translateY(140px) scale(0.6); opacity: 1; }
    25% { transform: translateY(80px) scale(0.7); opacity: 1; }
    50% { transform: translateY(20px) scale(0.8); opacity: 1; }
    75% { transform: translateY(-40px) scale(0.9); opacity: 0.5; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}
.sparks .spark_5{ animation-delay: 2s; right: 40px; }

@keyframes spark-5 {
    0% { transform: translateY(180px) scale(0.6); opacity: 1; }
    25% { transform: translateY(120px) scale(0.7); opacity: 1; }
    50% { transform: translateY(60px) scale(0.8); opacity: 1; }
    75% { transform: translateY(0px) scale(0.9); opacity: 0.5; }
    100% { transform: translateY(-60px) scale(1); opacity: 0; }
}/* ============ MODAIS ============ */
.modal_window{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    box-shadow: 0 0 30px #000;
    border: 2px solid var(--color-primary);
    background: #000;
}
#video_modal{
    width: min(800px, calc(100vw - 32px));
    max-width: 800px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
#video_modal iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.close_mw{
    position: absolute;
    right: 8px;
    top: 8px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 44px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #fff;
    z-index: 100001;
    text-decoration: none;
}/* ============ RESPONSIVO ============
   O modelo de largura passou de fixo (1200px) para fluido com teto
   (--mz-container-max), conforme o design. A antiga "trava global" que
   forcava 1200px em html/body/.wrap/.mz-columns foi removida para que o
   container fluido (tarefa 1.2) realmente funcione. Os regimes
   mobile/tablet (empilhamento, contencao de elementos fixos, alvos de
   toque) sao tratados no bloco centralizado de media queries (tarefa 3.2).
============================================================================ */
/* Sem trava de largura minima: o layout pode comprimir abaixo de 1200px.
   Sobrescreve eventual min-width herdado do framework (style.min.css). */
html,
body{
    min-width: 0 !important;
}

@media (max-width: 768px) {
table td{ padding: 15px 10px; }
}

/* ============================================================
   TASK 12.1: POSTS LIST (DESKTOP)
   Nota: o grid de 2 colunas foi revertido a pedido — as noticias voltam
   ao formato de coluna unica (uma abaixo da outra, largura total), que e
   a aparencia original. Mantemos apenas um leve espacamento entre os itens.
   ============================================================ */
@media (min-width: 1025px) {
ul.posts li{
        margin: 0 0 6px 0 !important;
        padding: 8px 12px !important;
    }
}/* ============================================================
   MOLDURA MEDIEVAL UNIFICADA (border-image ornamentado)
   Usa a arte rankingsborderjszz.webp em todas as caixas, sem distorcer
============================================================ */
/* ============================================================
   MOLDURA MEDIEVAL - border-image (corte assimetrico)
   topo ornamentado + barra dourada embaixo + trilhos laterais
   mostra os 4 lados em qualquer altura, sem distorcer
============================================================ */
.wrap .main .sidebar.left .container,
.wrap .main .sidebar.right div#sidebarjsz{

    /* DARK FANTASY GLASSMORPHISM BORDERS */
    background: rgba(12, 9, 6, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(218, 190, 104, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 0 15px rgba(218, 190, 104, 0.05) !important;
    padding: 12px 16px !important;
}
#mz-eventos{
    padding: 10px 0 !important;
    margin: 20px 0 0 0 !important;
    width: auto !important;
    border: none !important;
    border-image: none !important;
    background: transparent !important;
}
#mz-eventos .p2EVENTOS,
#mz-eventos .p2EVENTOS > div{
    width: 100% !important;
}
#mz-eventos .events-spotlight{
    width: 100% !important;
}
.wrap .main .sidebar.right div#sidebarjsz{

    /* DARK FANTASY GLASSMORPHISM BORDERS */
    background: rgba(12, 9, 6, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(218, 190, 104, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 0 15px rgba(218, 190, 104, 0.05) !important;
    padding: 12px 16px !important;
}/* Filhos do sidebarjsz - largura maxima */
div#sidebarjsz > *,
div#sidebarjsz ul{
    max-width: 100% !important;
    box-sizing: border-box !important;
}/* ============ WEBSHOP (REDESIGN) ============ */
/* Garante que o container das lojas use toda a largura disponível */
.shops{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
}/* Categorias da loja */
.shop-categories{
    width: 140px !important;
    margin-right: 12px !important;
}
.shop-categories .title{
    background: linear-gradient(90deg, var(--color-primary-glow) 0%, rgba(15,15,15,0.6) 100%) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-family: var(--font-cinzel) !important;
    font-size: 12px !important;
    color: var(--color-primary) !important;
    text-transform: uppercase;
    padding: 8px !important;
    border-left: 3px solid var(--color-primary);
}
.shop-categories ul li a{
    border-bottom: 1px solid var(--color-primary-glow) !important;
    background: none !important;
    padding: 7px 10px !important;
    color: var(--mz-parchment) !important;
    font-family: var(--font-cinzel);
    font-size: 12px;
    transition: all 0.2s;
}
.shop-categories ul li a:hover{
    color: var(--color-primary) !important;
    background: var(--color-primary-glow) !important;
    padding-left: 14px !important;
}
.shop-categories input{
    background: rgba(0,0,0,0.5) !important;
    border: 1px solid var(--color-primary-glow) !important;
    border-radius: 4px !important;
    color: #fff !important;
    padding: 6px !important;
}


/* =====================================================================
   MEDIA QUERIES CENTRALIZADAS - RESPONSIVIDADE (Tarefa 3.2)
   Bloco unico no fim do arquivo, integrado ao container fluido (.wrap)
   e a linha flex (.wrap .main .mz-columns) definidos acima. Cobre os
   tres regimes do design:
     - Desktop amplo (>=1025px): tratado pelas regras base (3 colunas).
     - Tablet (768px-1024px): arranjo intermediario + grade da loja menor.
     - Mobile (<768px): coluna unica empilhada, sem overflow horizontal.
   Mais a contencao de elementos de medida fixa (#areanobrejsz, logotipo,
   slider) e os alvos de toque >= 44x44px (R2.2, R2.3, R2.4, R2.5, R2.6).
   ===================================================================== */

/* ---------------------------------------------------------------------
   COMPARTILHADO EM TELAS DE TOQUE / NAO-DESKTOP (<= 1024px)
   - Contém os elementos de medida fixa do cabecalho (hero/areanobre)
     dentro da largura da tela, evitando rolagem horizontal (R2.6, R2.3).
   - Garante alvos de toque >= 44x44px em menu, botoes de compra e de
     navegacao (R2.5).
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {/* Cabecalho fluido: neutraliza largura fixa (1200px) e o scale(1.1) */
.wrap .header{
        height: auto !important;
    }
.wrap .header .logotipo{
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        margin: 0 auto !important;
    }
.wrap .header .logotipo img,
    .logotipo img{
        max-width: 100% !important;
        height: auto !important;
    }
div#areanobrejsz{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 20px 0 0 0 !important;
        transform: none !important;
        background-size: contain !important;
        text-align: center !important;
    }/* Slider passa a fluir no fluxo normal e escala proporcionalmente */
div#sliderjscallzer{
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 16px !important;
    }
div#sliderjscallzer img{
        max-width: 100% !important;
        height: auto !important;
    }/* Caixa de login/usuario centralizada e contida */
div#areadousuariojscallzer{
        float: none !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto 16px !important;
    }/* Efeito decorativo posicionado fora do fluxo: oculto p/ nao gerar overflow */
div#effejscallzer{
        display: none !important;
    }/* Alvos de toque do menu principal >= 44x44px (R2.5) */
ul#mennuj li a{
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }/* Alvos de toque dos botoes de compra e de navegacao >= 44px (R2.5) */

    input.btn,
    a.btn,
    button.btn,
    div#botaodevermaisrankings a,
    div#crieusacontajscallzer a,
    input.login-submit{
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------------
   TABLET (768px - 1024px): arranjo intermediario (R2.4)
   Conteudo + sidebar esquerda lado a lado; sidebar direita reposicionada
   para baixo em largura total. Grade da loja com menos colunas.
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 979px) {
.wrap .main .mz-columns{
        flex-wrap: wrap !important;
    }
.wrap .main .mz-columns .sidebar.left{
        flex: 1 1 38% !important;
        min-width: 0 !important;
        order: 1 !important;
    }
.wrap .main .mz-columns .content{
        flex: 1 1 58% !important;
        min-width: 0 !important;
        order: 2 !important;
    }/* Sidebar direita abaixo, ocupando a linha inteira */
.wrap .main .mz-columns .sidebar.right{
        flex: 1 1 100% !important;
        min-width: 0 !important;
        order: 3 !important;
    }
}

/* ---------------------------------------------------------------------
   MOBILE (< 768px): coluna unica empilhada (R2.2, R2.3, R2.5)
   As 3 colunas da home empilham verticalmente; sem rolagem horizontal;
   grade da loja densa (2-3 colunas) e categorias em largura total.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {/* Empilha sidebar esquerda, conteudo e sidebar direita em 1 coluna */
.wrap .main .mz-columns{
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }
.wrap .main .mz-columns .sidebar.left,
    .wrap .main .mz-columns .content,
    .wrap .main .mz-columns .sidebar.right{
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        order: 0 !important;
    }/* Login/usuario do hero em largura total no mobile */
div#areadousuariojscallzer{
        max-width: 100% !important;
    }/* Loja: categorias acima (largura total) e itens em grade densa */
.shop-categories{
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
    }
}/* ---- Sidebar de categorias / busca ---- */
.market .market-search{
    width: 170px;
}/* Título "CATEGORIA": troca o verde por barra dourada do tema */
.market .market-search .title{
    background: linear-gradient(90deg, var(--color-primary-glow) 0%, rgba(15, 12, 8, 0.92) 100%) !important;
    border-left: 3px solid var(--color-primary);
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: var(--font-cinzel), serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}/* Campo de busca nativo da sidebar, integrado ao tema */
.market .market-search input{
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--color-primary-glow);
    border-radius: 4px;
    color: #f3e9cf;
    padding: 7px 10px;
    box-sizing: border-box;
    font-family: var(--font-inter), sans-serif;
    font-size: 12px;
    outline: none;
}
.market .market-search input::placeholder{
    color: rgba(213, 205, 190, 0.45);
}
.market .market-search input:focus{
    border-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary-glow);
}/* Lista de categorias: remove o arrow.gif e usa chevron CSS + hover */
.market .market-search ul li a{
    background: none !important;
    padding: 7px 8px 7px 18px !important;
    position: relative;
    color: var(--mz-parchment);
    border-bottom: 1px solid var(--color-primary-glow) !important;
    font-family: var(--font-inter), sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: color .12s ease, padding-left .12s ease, background .12s ease;
}
.market .market-search ul li a::before{
    content: "›";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-weight: 700;
}
.market .market-search ul li a:hover{
    color: var(--color-primary);
    padding-left: 22px !important;
    background: var(--color-primary-glow) !important;
}


/* =====================================================================
   TASK 16.1: MEDIA QUERIES RESPONSIVOS PARA .CREDIT-SHOP
   Adapta o número de colunas do grid .credit-shop conforme a largura
   disponível. Desktop usa auto-fill (3-4 colunas); forçamos colunas fixas
   em tablet/mobile para garantir legibilidade.
   
   - Desktop amplo (≥1025px): 3-4 colunas (auto-fill com minmax(200px, 1fr))
   - Tablet (768-1024px): 2 colunas fixas
   - Mobile (<768px): 1-2 colunas (minmax menor para densidade)
   
   Requirements: R3.2 (densidade loja), R2.2 (mobile sem overflow),
   R2.4 (tablet intermediário)
   ===================================================================== */

/* Tablet: 2 colunas fixas para pacotes (768px-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
.credit-shop{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: 1-2 colunas densas com minmax menor (<768px) */
@media (max-width: 767px) {
.credit-shop{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }/* Cards de pacote ajustados para mobile */
.credit-shop li{
        padding: 12px 8px !important;
    }
.credit-shop .title{
        font-size: 11px !important;
        margin: 6px 0 4px 0 !important;
    }
.credit-shop .desc{
        font-size: 10px !important;
        padding: 6px !important;
    }
.credit-shop .price{
        font-size: 13px !important;
        margin: 6px 0 !important;
    }
.credit-shop img{
        max-width: 100px !important;
    }
.credit-shop a{
        font-size: 10px !important;
        padding: 5px 12px !important;
    }
}
@keyframes mz-cp-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: none; }
}/* ---- Banner da home ---- */
.mz-community-banner{
    position: relative;
    margin: 0 0 16px;
    padding: 20px 20px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: linear-gradient(135deg, rgba(16, 22, 32, 0.95), rgba(10, 14, 20, 0.98));
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.mz-community-banner::before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 100% 0%, rgba(212, 175, 55, 0.15), transparent 60%);
    opacity: 0.25;
    pointer-events: none;
}
.mz-cb-title{
    position: relative;
    font-family: var(--font-cinzel);
    font-weight: 800;
    font-size: 18px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px var(--color-primary-glow);
    margin: 0 0 8px;
    text-align: center;
}/* ---- Canais (cards de conversao: Informacoes / Comunidade / Discord) ---- */

.mz-cb-social{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: #c9bfa8;
    margin: -2px 0 16px;
}
.mz-live-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2fae5a;
    box-shadow: 0 0 8px #2fae5a;
    animation: mz-live-pulse 1.6s ease-in-out infinite;
}
@keyframes mz-live-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.mz-ch-list{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.mz-ch-card{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(218, 190, 104, 0.28);
    background: rgba(0, 0, 0, 0.35);
    color: var(--mz-parchment-light);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mz-ch-card:hover,
.mz-ch-card:focus-visible{
    border-color: var(--color-primary);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 16px var(--color-primary-glow);
    outline: none;
}
.mz-ch-ico{
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.mz-ch-dc   .mz-ch-ico{ background: linear-gradient(180deg, #5865f2, #3b45c4); }
.mz-ch-info{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mz-ch-name{ font-family: var(--font-cinzel); font-weight: 700; font-size: 14px; color: #f0e4b8; }
.mz-ch-desc{ font-size: 12px; line-height: 1.4; color: #c9bfa8; }
.mz-ch-go{ flex: 0 0 auto; color: var(--color-primary); font-size: 14px; opacity: 0.7; transition: transform 0.2s ease, opacity 0.2s ease; }
.mz-ch-card:hover .mz-ch-go{ transform: translateX(3px); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
.mz-live-dot{ animation: none; }
.mz-ch-card, .mz-ch-go{ transition: none; }
.mz-ch-card:hover .mz-ch-go{ transform: none; }
}/* ---- Banner inline: Mega Atualizacao (Temporada 2) ---- */
.mz-mega-banner{
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: linear-gradient(135deg, rgba(14, 20, 32, 0.95) 0%, rgba(8, 12, 18, 0.98) 100%);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.8);
    color: var(--mz-parchment-light);
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.mz-mega-banner::before{
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 120% at 0% 50%, rgba(212, 175, 55, 0.15), transparent 60%);
    opacity: 0.3;
    animation: mz-mega-glow 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mz-mega-glow { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.4; } }
.mz-mega-banner:hover,
.mz-mega-banner:focus-visible{
    border-color: var(--mz-gold-primary);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.35);
    transform: translateY(-2px);
    outline: none;
}
.mz-mega-badge{
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1c2432, #0d131c);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--mz-gold-light);
    font-family: var(--font-cinzel);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}
.mz-mega-body{ position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mz-mega-title{
    font-family: var(--font-cinzel);
    font-weight: 800;
    font-size: 16px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px var(--color-primary-glow);
}
.mz-mega-text{ font-size: 12.5px; line-height: 1.45; color: var(--mz-parchment); }
.mz-mega-cta{
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%);
    border: 1px solid var(--mz-gold-light);
    color: #0b0908;
    font-family: var(--font-cinzel);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.45);
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}
.mz-mega-banner:hover .mz-mega-cta{
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-dark) 100%);
    box-shadow: 0 0 20px rgba(245, 215, 127, 0.65);
    color: #000;
}
.mz-mega-banner:hover .mz-mega-cta i{ transform: translateX(3px); }
.mz-mega-cta i{ transition: transform 0.2s ease; }

@media (max-width: 767px) {
.mz-mega-banner{ flex-direction: column; text-align: center; gap: 12px; }
.mz-mega-badge{ align-self: center; }
.mz-mega-cta{ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.mz-mega-banner{ transition: none; }
.mz-mega-banner::before{ animation: none; }
.mz-mega-banner:hover{ transform: none; }
.mz-mega-cta i{ transition: none; }
.mz-mega-banner:hover .mz-mega-cta i{ transform: none; }
}

/* =====================================================================
   CORRECAO DE ESPACOS PRETOS VERTICAIS (layout 3 colunas)
   Problema: as 3 colunas (Top Players / conteudo / Info+Equipe) tinham
   alturas diferentes (align-items:flex-start). Quando o conteudo central
   era mais curto que a coluna esquerda (ex.: Web Shops com poucos itens),
   sobrava o fundo preto do body abaixo da coluna curta.
   Solucao: em desktop, as colunas passam a ter a MESMA altura (stretch),
   entao a moldura/fundo do conteudo central preenche todo o vao, sem
   "buraco preto". Em tablet/mobile (que empilham) isto nao se aplica.
   ===================================================================== */
@media (min-width: 1281px) {
.wrap .main .mz-columns{
        align-items: flex-start !important;
    }/* O item flex .content (que possui a moldura/border-image) estica ate a
       altura da coluna mais alta, preenchendo o fundo. */
.wrap .main .mz-columns > .content{
        display: flex !important;
        flex-direction: column !important;
    }/* O container interno acompanha a altura; remove a min-height fixa que
       criava um degrau quando o conteudo era ainda menor. */
.wrap .main .mz-columns > .content > .container{
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }/* A coluna esquerda tambem estica para casar a moldura quando ela for a
       mais curta (ex.: poucas listas de ranking). */
.wrap .main .mz-columns > .sidebar.left{
        display: flex !important;
        flex-direction: column !important;
    }
.wrap .main .mz-columns > .sidebar.left > .container{
        flex: 1 1 auto !important;
    }
}

/* =====================================================================
   MOBILE / TABLET — refeito preservando a identidade dark/dourado/fantasy
   Cobre: header 100% sem corte, banner/slider visivel, login com frame
   dourado, empilhamento ordenado (banner -> login -> conteudo -> Top
   Players -> Info/Equipe, sem vaos pretos) e menu hamburguer em OVERLAY
   escuro com links dourados centralizados.
   ===================================================================== */

/* ---- HEADER + AREA NOBRE (<= 1024px) ---- */
@media (max-width: 1024px) {/* Logo 100% de largura, sem o margin negativo inline que cortava o topo */
.wrap .header{ height: auto !important; padding: 8px 0 0 !important; }/* BUG #2: remove alturas mortas reservadas no topo (faixa preta entre o
       logo e o slider). .top2, area nobre e o box de login nao devem reservar
       altura fixa em mobile. */
.wrap .main .top2{
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
div#areanobrejsz{ min-height: 0 !important; }
div#areadousuariojscallzer{ min-height: 0 !important; }
.wrap .header .logotipo{
        position: static !important;
        margin: 0 auto !important;
        height: auto !important;
    }
.wrap .header .logotipo img,
    .logotipo img{
        width: auto !important;
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto !important;   /* anula o margin:-120px inline */
    }/* Area nobre fluida: empilha banner (slider) + login, largura total */
div#areanobrejsz{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 12px 0 0 0 !important;
        transform: none !important;
        background: none !important;     /* remove moldura raster cortada */
        filter: none !important;
        text-align: center !important;
        overflow: visible !important;
    }/* BANNER/SLIDER: apenas torna o container externo fluido e no fluxo.
       O slippry (adaptiveHeight + responsive) gerencia a estrutura interna
       (.sy-box/.sy-slides/.sy-filler) e calcula a altura responsiva sozinho.
       NAO forcamos display/height/position dos li/wrappers internos: isso
       quebrava o plugin e era a real causa do gap preto. */
div#sliderjscallzer{
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 14px !important;
    }
#sliderjscallzer img{
        max-width: 100% !important;
        height: auto !important;
    }/* LOGIN: frame dourado decorativo do tema mantido, so menor/centralizado */
div#areadousuariojscallzer{
        float: none !important;
        width: 100% !important;
        max-width: 380px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        background: linear-gradient(180deg, rgba(16, 22, 32, 0.95), rgba(8, 11, 17, 0.96)) !important;
        border: 2px solid var(--color-primary) !important;
        border-radius: 8px !important;
        box-shadow: 0 0 16px var(--color-primary-glow), inset 0 0 22px rgba(0,0,0,0.75) !important;
        padding: 16px 16px 12px !important;
    }
div#effejscallzer{ display: none !important; }
}

/* ---- EMPILHAMENTO ORDENADO + SEM VAOS PRETOS (<= 767px) ----
   Ordem visual: banner -> login (ja vem antes, no #areanobrejsz) ->
   conteudo central -> Top Players -> Informacao/Equipe. */
@media (max-width: 767px) {
.wrap .main .mz-columns{
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
.wrap .main .mz-columns > .content{ order: 1 !important; }
.wrap .main .mz-columns > .sidebar.left{ order: 2 !important; }
.wrap .main .mz-columns > .sidebar.right{ order: 3 !important; }
.wrap .main .mz-columns > .sidebar.left,
    .wrap .main .mz-columns > .content,
    .wrap .main .mz-columns > .sidebar.right{
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }/* espacadores que geravam faixa preta entre os blocos empilhados */
.wrap .main .sidebar .sidebar-bottom,
    .wrap .main .content .content-middle{
        height: 0 !important;
        margin: 0 !important;
        display: none !important;
    }
.castle-siege{ margin: 10px auto !important; }
#mz-eventos{ margin-top: 12px !important; }
}/* ---- MENU HAMBURGUER EM OVERLAY (<= 768px) ---- */
/* Oculto por padrao (desktop): !important (especificidade baixa 0,1,0) para
   vencer regras NAO-important do core/style.min.css que estilizam <button>
   dentro do .menujszz e faziam os botoes vazarem como botoes cinza no canto.
   As regras de exibicao (mobile e ponteiro grosso) vem depois, com a mesma
   especificidade + !important, prevalecendo no contexto correto por ordem. */
.mz-menu-toggle,
.mz-menu-close{ display: none !important; }

@media (max-width: 768px) {
.menujszz{
        position: relative !important;
        padding: 0 !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }/* Botao ☰ */
.mz-menu-toggle{
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 48px;
        padding: 10px 22px;
        background: transparent;
        border: none;
        color: var(--color-primary);
        font-family: var(--font-cinzel), serif;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        cursor: pointer;
        text-shadow: 0 0 10px var(--color-primary-glow);
    }
.mz-menu-toggle i{ font-size: 20px; }/* Overlay: painel escuro do topo com a altura do conteudo (NAO 100vh).
       Fechado usa display:none (nao ocupa a tela: evita a "tela preta" quando
       o JS do toggle nao roda). Prefixado com .menujszz para vencer o <style>
       inline do layout. */
.menujszz ul#mennuj{
        display: none !important;
    }/* Aberto: overlay FULLSCREEN, 100% largura, fundo SOLIDO opaco (sem ghost),
       links centralizados. Especificidade .menujszz.mz-open (1,2,1) vence o
       <style> inline do layout (ul#mennuj = 1,0,1), inclusive max-width/margin. */
.menujszz.mz-open ul#mennuj{
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        z-index: 999999 !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        padding: 70px 16px 28px !important;
        background: #080604 !important;
        background-image: none !important;
        overflow-y: auto !important;
    }
.menujszz ul#mennuj li{
        width: 100% !important;
        max-width: 340px !important;
        display: flex !important;
        justify-content: center !important;
        float: none !important;
        margin: 0 auto !important;
    }
.menujszz ul#mennuj li a{
        width: 100% !important;
        justify-content: center !important;
        min-height: 50px !important;
        font-family: var(--font-cinzel), serif !important;
        font-size: 17px !important;
        color: var(--color-primary) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        border-bottom: 1px solid rgba(218, 190, 104, 0.18) !important;
        text-shadow: 0 0 8px #000 !important;
    }
.menujszz ul#mennuj li a:hover{ color: #fff !important; }
.menujszz ul#mennuj li .language{
        justify-content: center !important;
        width: 100% !important;
        padding-top: 12px !important;
    }/* Botao X de fechar (criado pelo default.js), so visivel com overlay aberto */
.menujszz.mz-open .mz-menu-close{
        display: flex !important;
        position: fixed !important;
        top: 14px;
        right: 18px;
        z-index: 1000000 !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        background: rgba(14, 19, 28, 0.95);
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        color: var(--color-primary);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 0 12px var(--color-primary-glow);
    }
}

/* =====================================================================
   AJUSTES MOBILE FINAIS (<= 768px)
   BUG #1: gap preto antes do slider  |  BUG #2: texto cortado no Castle
   (bloco no fim do arquivo p/ ter precedencia sobre as regras anteriores)
   ===================================================================== */
@media (max-width: 768px) {/* =================================================================
       BUG #1 — Gap preto (~300px) entre o banner estatico e o slider.
       Causa: o Slippry injeta .sy-filler, que reserva (via JS) a altura
       do slider ANTES das imagens carregarem -> bloco fantasma preto.
       Correcao cirurgica: zera o .sy-filler e deixa os wrappers do slider
       com altura automatica, ajustando-se ao tamanho REAL das imagens.
       (NAO travamos slides em display:none: o carrossel continua normal.)
       ================================================================= */
/* Containers externos voltam ao fluxo, sem altura reservada */
.wrap .main .top2,
    div#areanobrejsz,
    div#sliderjscallzer{
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        top: auto !important;
        left: auto !important;
    }
.wrap .main .top2{ padding: 0 !important; margin: 0 !important; }
div#areanobrejsz{ margin: 8px 0 0 0 !important; padding: 0 !important; }
div#sliderjscallzer{
        margin: 0 auto 12px !important;
        padding: 0 !important;
        overflow: visible !important;
    }/* 1) Mata o elemento fantasma .sy-filler (a real causa do gap) */
#sliderjscallzer .sy-filler,
    .sy-box .sy-filler,
    .sy-filler{
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
    }/* 2) Wrappers do slider: NAO forcar height:auto (zera a altura dos slides
       absolutos e some o banner). Deixa o Slippry gerenciar a altura. */
#sliderjscallzer .sy-box,
    #sliderjscallzer .sy-box.sy-loading,
    #sliderjscallzer .sy-slides-wrap,
    #sliderjscallzer .sy-slides-crop,
    #sliderjscallzer .sy-list,
    .sy-box,
    .sy-box.sy-loading,
    .sy-slides-wrap,
    .sy-slides-crop{
        min-height: 0 !important;
        background: none !important;
    }/* Imagens fluidas dentro das slides */
#sliderjscallzer .sy-slide img,
    #sliderjscallzer .sy-slide > a > img,
    #sliderjscallzer img{
        width: 100% !important;
        height: auto !important;
        border-radius: 6px !important;
    }/* Pager/controles/legenda ocultos no mobile (limpeza visual) */
#sliderjscallzer .sy-pager,
    #sliderjscallzer .sy-controls,
    #sliderjscallzer .sy-caption-wrap,
    #sliderjscallzer .sy-caption{ display: none !important; }
}

/* =====================================================================
   BLOCO MOBILE CONSOLIDADO (<= 768px) — AUTORITATIVO E FINAL
   ---------------------------------------------------------------------
   Corrige o site espremido numa coluna fina a esquerda. Forca os
   containers macro a 100% da largura e ZERA qualquer transform em
   ancestrais (transform cria containing-block e fazia o overlay fixed do
   menu encolher junto). Este bloco e o ultimo do arquivo => tem a palavra
   final. Consolida tambem o overlay do menu e o botao de fechar.
   ===================================================================== */
@media (max-width: 768px) {/* 1) RESET DE LARGURA — containers macro ocupam 100% e sem transform - */
html,
    body,
    html body .wrap,
    html body .wrap .main,
    html body .wrap .main .top2,
    html body .wrap .main .mz-columns,
    html body .wrap .main .content,
    html body .wrap .main .sidebar,
    html body .wrap .main .sidebar.left,
    html body .wrap .main .sidebar.right,
    html body div#areanobrejsz,
    html body div#areadousuariojscallzer{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;
    }/* Mantem o .wrap centralizado e sem overflow horizontal */
html body .wrap{ margin: 0 auto !important; overflow-x: hidden !important; }
html, body{ overflow-x: hidden !important; }/* O .wrap continua flex column (rodape sticky); apenas reforca largura */
html body .wrap{ display: flex !important; flex-direction: column !important; }/* 2) MENU ABERTO — overlay full-screen centralizado (consolidado) ---- */
html body .menujszz.mz-open ul#mennuj,
    html body .menujszz.mz-open #mennuj{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 80px 16px 32px !important;
        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 4px !important;
    }
html body .menujszz.mz-open ul#mennuj li{
        width: 100% !important;
        max-width: 360px !important;
        float: none !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        text-align: center !important;
        position: relative !important;
    }
html body .menujszz.mz-open ul#mennuj li a{
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 14px 0 !important;
        text-align: center !important;
        font-family: var(--font-cinzel, 'Cinzel'), serif !important;
        font-size: 17px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: var(--color-primary, var(--mz-gold-primary)) !important;
        text-shadow: 0 0 8px #000 !important;
    }
html body .menujszz.mz-open ul#mennuj li a:hover{ color: #ffffff !important; }
html body .menujszz.mz-open ul#mennuj li a i{
        vertical-align: middle !important;
        line-height: 1 !important;
        color: var(--color-primary, var(--mz-gold-primary)) !important;
    }/* divisoria suave a 80%, centralizada, entre itens (nao encosta nas bordas) */
html body .menujszz.mz-open ul#mennuj li:not(:last-child)::after{
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        height: 1px !important;
        background: rgba(218, 190, 104, 0.18) !important;
    }/* Seletor de idioma (bandeiras) centralizado */
html body .menujszz.mz-open ul#mennuj li .language{
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding-top: 14px !important;
    }/* 3) BOTAO FECHAR — fixo no topo direito, acima do overlay ----------- */
html body .menujszz.mz-open .mz-menu-close{
        display: flex !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        left: auto !important;
        z-index: 100000 !important;
        width: 46px !important;
        height: 46px !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--color-primary, var(--mz-gold-primary)) !important;
        border: none !important;
        border-radius: 50% !important;
        color: #0a0a0a !important;
        font-size: 22px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        box-shadow: 0 0 14px rgba(0,0,0,0.6) !important;
    }/* Oculta o botao retangular antigo "X Fechar" (toggle) quando o menu
       esta aberto: fica so o circulo dourado da direita. */
html body .menujszz.mz-open .mz-menu-toggle{
        display: none !important;
    }/* 5) RODAPE — separado de Equipe/Eventos, sem sobreposicao ----------- */
html body .wrap .footer,
    html body .footer{
        clear: both !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 30px !important;
        padding-top: 10px !important;
    }/* 6) AJUSTES FINOS DE DESIGN ----------------------------------------- */
/* 7.1 HERO DO TOPO — CONSISTENTE COM O DESKTOP ----------------------
       =====================================================================
       Antes o mobile usava uma arte EXCLUSIVA de fundo (header-mobile.webp:
       guerreiro + castelo + ceu alaranjado), o que deixava o topo do celular
       visualmente diferente do desktop. O desktop nao tem imagem de hero: ele
       mostra o logo MU ZORD (logomuzord.webp) grande sobre o fundo de ceu
       vermelho do tema (background do body). Aqui replicamos esse mesmo hero
       no mobile: SEM imagem dedicada, fundo transparente (deixa o bg do body
       aparecer) e o logo como protagonista, igual ao desktop. */
html body .wrap .header{
        background-image: none !important;
        background-color: transparent !important;
        width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        padding: 14px 0 6px !important;
        margin: 0 !important;
        overflow: visible !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }/* Logo MU ZORD centralizado e com presenca (mesmo elemento do desktop) */
html body .wrap .header .logotipo{
        position: static !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }
html body .wrap .header .logotipo img,
    html body .wrap .header .logo img{
        width: 92% !important;
        max-width: 92% !important;
        max-height: none !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }/* 7.2 Logo do rodape (pseudo-elemento) centralizado --------------------
       O logo e .footer p::before (absolute + margin negativo => puxava p/
       esquerda). Voltamos ao fluxo e centralizamos com margin auto. */
html body .footer p::before{
        position: relative !important;
        left: auto !important;
        right: auto !important;
        float: none !important;
        display: block !important;
        width: 220px !important;
        height: 72px !important;
        margin: 0 auto 15px auto !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }/* 7.3 Creditos do rodape centralizados e padronizados ----------------- */
html body .footer p{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        letter-spacing: 0.5px !important;
    }/* aviso de classificacao etaria tambem centralizado, mesmo padrao */
html body .footer #classificacaojscallzer{
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.6 !important;
        letter-spacing: 0.5px !important;
        margin: 10px auto 0 auto !important;
    }/* container do rodape: sem altura/margens fixas do desktop (260px/220px) */
html body .wrap .footer,
    html body .footer{
        height: auto !important;
        float: none !important;
        text-align: center !important;
        padding: 20px 12px 24px !important;
    }/* 8) RESPIROS DE ELEMENTOS FLUTUANTES + TABELAS ---------------------- */
/* 8.1 Barra de redes sociais (vertical, direita) afastada da borda */
html body div#midiasociais{
        right: 10px !important;
    }/* 8.3 Tabelas de ranking: respiro lateral p/ o "Score"/resets nao ficarem
       colados na borda nem atras dos botoes flutuantes. */
html body .top-players table,
    html body .wrap .main .sidebar.left table,
    html body table[class*="reset"]{
        width: 96% !important;
        margin: 0 auto !important;
    }
html body .wrap .main table td:last-child,
    html body .wrap .main table th:last-child{
        padding-right: 15px !important;
    }
}/* =====================================================================
   ANTI-DUPLICIDADE DE TOPO EM "MODO DESKTOP" NO CELULAR
   ---------------------------------------------------------------------
   DESATIVADO em 10/Jul/2026: o usuario quer que "versao para computador"
   mostre EXATAMENTE o layout de desktop real (menu horizontal, 3 colunas,
   hero completo). As regras de pointer:coarse interceptavam e forcavam
   hamburger/mobile, causando discrepancia.
   Quando o celular ativar "site para computador", a viewport sera ~980px,
   as regras max-width:768px nao disparam e o desktop real aparece.
   ===================================================================== */
/* (bloco pointer:coarse menu removido — desktop real prevalece) */
/* =====================================================================
   ANTI-DUPLICIDADE DO TOPO (banner/logo) NO CELULAR
   DESATIVADO em 10/Jul/2026: "versao para computador" agora mostra o
   desktop real completo (header, slider, login lado a lado, 3 colunas).
   ===================================================================== */
/* (bloco pointer:coarse banner/header removido — desktop real prevalece) */
/* =====================================================================
   FIX RANKINGS — "SOLICITAR VERSAO PARA COMPUTADOR"
   DESATIVADO em 10/Jul/2026: no modo "versao para computador" o ranking
   agora usa o layout de desktop real (grid auto-fill com cards de 88px).
   ===================================================================== */
/* (bloco pointer:coarse rankings removido — desktop real prevalece) */
/* =====================================================================
   ACESSIBILIDADE / SEO — heading visualmente oculto
   ---------------------------------------------------------------------
   Usado pelo SEO dinamico (default.phtml) para garantir um <h1> unico e
   semantico em paginas que nao possuem um titulo visivel proprio (ex.:
   home/loja), sem alterar o visual. Tecnica "visually hidden" acessivel:
   o texto e lido por leitores de tela e indexado, mas nao ocupa espaco.
   ===================================================================== */
.mz-visually-hidden{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}/* =====================================================================
   CTA DE COMUNIDADE NA SIDEBAR ESQUERDA — ancorado ao rodape da moldura
   para aproveitar o espaco vago quando a coluna estica (paginas altas).
   ===================================================================== */
.wrap .main .sidebar.left .container .mz-side-cta{
    margin-top: auto;          /* empurra para o rodape (container e flex-column) */
    padding-top: 14px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.mz-side-cta .mz-side-cta-title{
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--mz-gold-light) !important;
    margin: 14px 0 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(218, 190, 104, 0.25) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
}
.mz-side-cta .mz-side-cta-title i{ margin-right: 6px; color: var(--mz-gold-primary) !important; }
.mz-side-cta .mz-side-cta-btn{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    margin: 8px 0 !important;
    border-radius: 5px !important;
    border: 1px solid rgba(212, 175, 55, 0.6) !important;
    background: linear-gradient(180deg, #2a2015 0%, #14100a 100%) !important;
    color: var(--mz-gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(212, 175, 55, 0.15) !important;
    transition: all 0.2s ease-in-out !important;
}
.mz-side-cta .mz-side-cta-btn i{ font-size: 14px !important; color: var(--mz-gold-primary) !important; }
.mz-side-cta .mz-side-cta-btn:hover{
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    border-color: var(--mz-gold-light) !important;
    box-shadow: 0 0 14px rgba(247, 223, 148, 0.6) !important;
    transform: translateY(-1px) !important;
}
.mz-side-cta .mz-side-cta-btn:hover i{ color: #0b0908 !important; }
.mz-side-cta .mz-side-cta-vip{
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: var(--mz-gold-light) !important; /* FIXED: was #0b0908 (near-black on dark gold = invisible) */
    border: 1px solid var(--mz-gold-light) !important;
    font-weight: 900 !important;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.4) !important;
}
.mz-side-cta .mz-side-cta-vip i{ color: var(--mz-gold-light) !important; /* FIXED: was #0b0908 */ }
.mz-side-cta .mz-side-cta-vip:hover{
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-dark) 100%) !important;
    box-shadow: 0 0 18px rgba(245, 215, 127, 0.7) !important;
}/* =====================================================================
   NAVEGACAO INTERNA DO RODAPE — descoberta/indexacao das paginas-chave.
   Grid responsivo, glassmorphism escuro/dourado (Epic Dark Luxury).
   ===================================================================== */
.mz-footer-nav{
    /* z-index alto + position relative: o menu precisa ficar ACIMA da
       guerreira (.footer::after) e da logo (.footer p::before), que sao
       absolutas e cobririam a coluna "Ajuda". */
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
    max-width: 620px;
    margin: 0 auto 22px;
    padding: 24px 30px;
    /* conteudo centralizado em cada coluna: simetria com a logo/copyright
       (que ja sao centralizados no tema) e evita o ar "torto". */
    text-align: center;
    /* fundo mais opaco para o texto continuar legivel mesmo sobre a arte */
    background: rgba(12, 17, 24, 0.95);
    border: 1px solid rgba(218, 190, 104, 0.22);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.mz-foot-col{
    min-width: 0;
}
.mz-footer-nav .mz-foot-title{
    margin: 0 0 10px;
    padding-bottom: 8px;
    font-family: var(--font-cinzel), serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary);
    border-bottom: 1px solid rgba(218, 190, 104, 0.18);
    text-align: center;
}
.mz-footer-nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.mz-footer-nav li{
    margin: 0 0 6px;
}
.mz-footer-nav a{
    color: #ece2cd;
    font-family: var(--font-inter), sans-serif;
    font-size: 13px;
    text-decoration: none;
    display: inline-block;
    padding: 3px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    transition: color 0.2s ease;
}
.mz-footer-nav a:hover,
.mz-footer-nav a:focus-visible{
    color: var(--color-primary);
}

@media (max-width: 600px) {
.mz-footer-nav{
        grid-template-columns: 1fr 1fr;
        gap: 14px 16px;
        padding: 18px 16px;
    }
}
@media (max-width: 380px) {
.mz-footer-nav{ grid-template-columns: 1fr; }
}/* Logo do rodape: reativado de forma LIMPA — pequeno, centralizado e em fluxo
   normal, logo acima do copyright (sem o position:absolute que causava o
   "fantasma" sobre a navegacao). */
.footer p::before{
    display: block !important;
    position: static !important;
    width: 230px !important;
    height: 85px !important;
    margin: 0 auto 10px !important;
    background: url(../images/logomuzord.webp?v=2026_v9) no-repeat center !important;
    background-size: contain !important;
    transform: none !important;
    left: auto !important;
}
.footer p{ margin-top: 22px !important; }/* =====================================================================
   FASE 3 — FOCO POR TECLADO (acessibilidade)
   ---------------------------------------------------------------------
   Contorno dourado de alto contraste apenas na navegacao por teclado
   (:focus-visible nao afeta cliques de mouse). Cobre menu, hamburguer,
   botoes flutuantes, chips/abas e botoes do tema.
   ===================================================================== */
ul#mennuj li a:focus-visible,
.menujszz a:focus-visible,
.mz-menu-toggle:focus-visible,
.mz-menu-close:focus-visible,
div#alinksz a:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible{
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
    box-shadow: 0 0 8px var(--color-primary-glow) !important;
}/* =====================================================================
   BOLAO - modal nativo com iframe do Tally (Glassmorphism Dark)
   ---------------------------------------------------------------------
   Aberto pelo item "Bolao" do menu (default.phtml) via display:flex.
   Overlay escuro com blur; painel translucido com borda dourada sutil,
   cantos arredondados e o iframe do Tally ocupando 100% da largura.
   Responsivo: no mobile reduz paddings e a altura do iframe.
   ===================================================================== */
.muzord-bolao-modal{
    position: fixed;
    inset: 0;
    /* display controlado inline (none -> flex pelo onclick) */
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 24px;
    box-sizing: border-box;
    background: rgba(5, 4, 2, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    /* Fade-in do overlay ao trocar de display:none -> flex (sem JS, sem layout shift) */
    animation: mzBolaoOverlayIn 0.28s ease both;
}/* Painel glassmorphism (o "container" do modal) */
.muzord-bolao-panel{
    position: relative;
    display: flex;
    flex-direction: column;
    /* Desktop: 600px centralizado; nunca estoura a viewport */
    width: min(92vw, 600px);
    max-height: 92vh;
    padding: 24px 24px 20px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(14, 19, 28, 0.95), rgba(0, 0, 0, 0.74));
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(218, 190, 104, 0.35);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), inset 0 0 30px rgba(0, 0, 0, 0.4),
                0 0 22px var(--color-primary-glow);
    overflow-y: auto;
    overflow-x: hidden;
    /* Fade-in + leve subida; opacity/transform sao acelerados por GPU */
    animation: mzBolaoPanelIn 0.30s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    will-change: transform, opacity;
}

/* Keyframes do fade-in (disparam a cada abertura do modal) */
@keyframes mzBolaoOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mzBolaoPanelIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
/* Acessibilidade: respeita quem desativa animacoes */
@media (prefers-reduced-motion: reduce) {
.muzord-bolao-modal,
    .muzord-bolao-panel{ animation: none !important; }
}/* Scrollbar do painel no tom do tema */
.muzord-bolao-panel::-webkit-scrollbar{ width: 8px; }
.muzord-bolao-panel::-webkit-scrollbar-track{ background: rgba(0,0,0,0.3); border-radius: 4px; }
.muzord-bolao-panel::-webkit-scrollbar-thumb{ background: var(--color-primary); border-radius: 4px; }
.muzord-bolao-title{
    margin: 0 40px 6px 0;
    font-family: var(--font-cinzel), serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 12px var(--color-primary-glow);
}
.muzord-bolao-title i{ margin-right: 8px; }
.muzord-bolao-sub{
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mz-parchment);
}/* ---- Bloco de regulamento / premiacao (sub-card glass) ---- */
.muzord-bolao-rules{
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(218, 190, 104, 0.20);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 0 0 18px;
    color: #d9d1c2;
    font-size: 13px;
    line-height: 1.6;
}
.muzord-bolao-rules .mbr-title{
    margin: 0 0 12px;
    font-family: var(--font-cinzel), serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px var(--color-primary-glow);
}
.muzord-bolao-rules .mbr-subtitle{
    margin: 0 0 10px;
    font-family: var(--font-cinzel), serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.muzord-bolao-rules .mbr-title i,
.muzord-bolao-rules .mbr-subtitle i{ margin-right: 7px; }/* Premios: cards leves com barra dourada a esquerda */
.muzord-bolao-rules .mbr-prizes{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.muzord-bolao-rules .mbr-prizes li{
    background: linear-gradient(90deg, rgba(218,190,104,0.10), rgba(0,0,0,0.15));
    border-left: 3px solid var(--color-primary);
    border-radius: 6px;
    padding: 10px 14px;
}
.muzord-bolao-rules .mbr-prizes strong{ color: #fff; }
.muzord-bolao-rules .mbr-prizes em{ color: #b9ad97; font-style: italic; }/* Lista numerada de regras */
.muzord-bolao-rules .mbr-list{
    margin: 0;
    padding: 0 0 0 20px;
    display: grid;
    gap: 8px;
}
.muzord-bolao-rules .mbr-list li{ padding-left: 4px; }
.muzord-bolao-rules .mbr-list strong{ color: #fff; }/* Destaque dourado em valores/premios */
.muzord-bolao-rules .mbr-hl{
    color: var(--color-primary);
    font-weight: 700;
}/* Separador sutil dourado */
.muzord-bolao-rules .mbr-sep{
    border: 0;
    border-top: 1px solid rgba(218, 190, 104, 0.18);
    margin: 14px 0;
}/* Caixa do iframe: ocupa 100% da largura, cantos arredondados, sem moldura branca */
.muzord-bolao-box{
    width: 100%;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(218, 190, 104, 0.18);
}
.muzord-bolao-box iframe{
    display: block;
    width: 100%;
    height: 650px;
    border: 0;
    background: transparent;
}/* Botao fechar (X) dourado no canto */
.muzord-bolao-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    line-height: 30px;
    text-align: center;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary-glow);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease;
}
.muzord-bolao-close:hover{
    background: var(--color-primary);
    color: #1a140a;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
.muzord-bolao-modal{ padding: 12px; }
.muzord-bolao-panel{
        width: 90vw;
        max-width: 90vw;
        max-height: 94vh;
        padding: 18px 14px 14px;
        border-radius: 12px;
    }
.muzord-bolao-title{ font-size: 17px; }
.muzord-bolao-sub{ font-size: 12px; margin-bottom: 12px; }
.muzord-bolao-box iframe{ height: 70vh; }
}/* =====================================================================
   LEGIBILIDADE (UX) — textos de leitura densos estavam pequenos (11px).
   Sobe rankings (TOP PLAYERS), caixas Informacao/Equipe e meta das
   noticias para um tamanho confortavel, com line-height maior. NAO mexe
   em micro-rotulos/badges/uppercase tags (que devem permanecer pequenos).
   ===================================================================== */
/* Listas das sidebars (esquerda = rankings; direita = Informacao/Equipe/rankings) */
.wrap .main .sidebar.left .container .box ul,
.wrap .main .sidebar.right .container .box ul{
    font-size: 13px !important;
}
.wrap .main .sidebar.left .container .box ul li,
.wrap .main .sidebar.right .container .box ul li{
    line-height: 1.5 !important;
    padding: 7px 2px !important;
}
.wrap .main .sidebar.left .container .box ul li span.text,
.wrap .main .sidebar.left .container .box ul li span.offline,
.wrap .main .sidebar.right .container .box ul li span.text,
.wrap .main .sidebar.right .container .box ul li span.offline{
    font-size: 13px !important;
}/* Corpo geral do conteudo: garante minimo legivel sem afetar titulos/badges */
.ajax-container,
div#noticiiasjscallzer{
    font-size: 14px;
    line-height: 1.55;
}/* =====================================================================
   ARTIGO / POST via gancho de JS (.ajax-container.mz-post)
   ---------------------------------------------------------------------
   O editor do painel remove a <div class="mz-article"> ao salvar, entao
   o JS marca o proprio container com .mz-post nas rotas /post/. Aqui
   replicamos a tipografia de leitura direto nos filhos do container.
   ===================================================================== */
.ajax-container.mz-post{
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #e8dfce !important;
    background: rgba(10, 8, 4, 0.55) !important;
    border: 1px solid rgba(218, 190, 104, 0.15) !important;
    border-radius: 8px !important;
    padding: 24px 28px !important;
    text-align: left !important;
}
.ajax-container.mz-post h1,
.ajax-container.mz-post h2{
    font-family: var(--font-cinzel), serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin: 26px 0 12px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(218, 190, 104, 0.20) !important;
    text-align: left !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}
.ajax-container.mz-post h3{
    font-family: var(--font-cinzel), serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f2e8cf !important;
    margin: 20px 0 8px !important;
    text-align: left !important;
    text-transform: none !important;
}
.ajax-container.mz-post p{
    margin: 0 0 14px !important;
    color: #e8dfce !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}
.ajax-container.mz-post ul,
.ajax-container.mz-post ol{
    margin: 0 0 16px !important;
    padding-left: 24px !important;
    list-style-position: outside !important;
}
.ajax-container.mz-post li{
    margin: 0 0 7px !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #e8dfce !important;
    text-align: left !important;
}
.ajax-container.mz-post a{
    color: var(--color-primary) !important;
    text-decoration: underline !important;
}
.ajax-container.mz-post strong{ color: #fff !important; }
.ajax-container.mz-post table{
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 0 18px !important;
    background: transparent !important;
}
.ajax-container.mz-post th{
    background: rgba(218, 190, 104, 0.15) !important;
    color: var(--color-primary) !important;
    font-family: var(--font-cinzel), serif !important;
    font-size: 14px !important;
    text-align: left !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(218, 190, 104, 0.28) !important;
}
.ajax-container.mz-post td{
    background: rgba(0, 0, 0, 0.30) !important;
    color: #e8dfce !important;
    font-family: var(--font-inter), sans-serif !important;
    font-size: 15px !important;
    text-align: left !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(218, 190, 104, 0.15) !important;
    vertical-align: top !important;
}
.ajax-container.mz-post td img{ transform: none !important; margin: 0 !important; max-width: 100% !important; }

@media (max-width: 768px) {
.ajax-container.mz-post{ padding: 16px 14px !important; }
.ajax-container.mz-post p,
    .ajax-container.mz-post li{ font-size: 15px !important; }
.ajax-container.mz-post table{ font-size: 13px !important; }
.ajax-container.mz-post td,
    .ajax-container.mz-post th{ padding: 8px 8px !important; }
}/* O breadcrumb tambem e um <ul> dentro do container: blindar para nao
   herdar a lista do artigo (bullets/indentacao). */
.ajax-container.mz-post ul.breadcrumber{
    padding-left: 0 !important;
    margin: 0 0 14px !important;
    list-style: none !important;
    font-size: 12px !important;
}
.ajax-container.mz-post ul.breadcrumber li{
    margin: 0 !important;
    font-size: 12px !important;
    display: inline !important;
}/* Caso o core/editor envolva o conteudo num wrapper com fundo claro, zera o
   fundo de TODOS os descendentes do post (as tabelas mantem o fundo proprio
   por terem especificidade maior nas regras th/td acima). */
.ajax-container.mz-post *{
    background-color: transparent !important;
}/* =====================================================================
   CLS FIX — slider do hero (#sliderjscallzer)
   ---------------------------------------------------------------------
   Os slides sao 707x250 (proporcao 2.828:1). No carregamento o slider
   ficava com height:auto e crescia de 0 ate a altura da imagem, empurrando
   o box de login pra baixo (CLS ~0.468 no mobile). Reservando a proporcao,
   o espaco fica guardado antes das imagens chegarem -> sem layout shift.
   ===================================================================== */
/* Proporcao da imagem do slide (natural 707x250) — inofensivo no desktop */
#sliderjscallzer img{
    aspect-ratio: 707 / 250;
    width: 100%;
    height: auto;
}
/* So no mobile reservamos a altura do container (pager/controles ja ocultos
   nesse breakpoint), evitando o "pulo" do login. No desktop o slider fica
   como esta (sem risco de cortar pager). */
@media (max-width: 767px) {
#sliderjscallzer{
        aspect-ratio: 707 / 250;
        min-height: 0 !important;
    }
}


/* =====================================================================
   RESPONSIVO — MODO "SITE PARA COMPUTADOR" no celular (~980-1024px) e
   janelas estreitas. A faixa 768-1100px NAO era coberta pelas media
   queries de mobile (<768), entao os flutuantes (barra social a direita +
   FAB de comunidade) sobrepunham o conteudo (rankings, botoes, textos).
   Solucao: mover os flutuantes para os cantos INFERIORES (fora da area de
   conteudo) com z-index controlado (abaixo de modais/menu = 100000).
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1280px) {/* Barra social: de vertical-direita para horizontal compacta no canto
       inferior ESQUERDO (longe do conteudo a direita e do FAB a direita). */
html body div#midiasociais{
        top: auto !important;
        bottom: 12px !important;
        left: 12px !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 6px 8px !important;
        border: 1px solid #141c28 !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important;
        z-index: 980 !important;
    }
html body div#alinksz{
        display: grid !important;
        grid-auto-flow: column !important;
        gap: 6px !important;
        margin: 0 !important;
    }
html body div#alinksz a{
        width: 38px !important;
        height: 38px !important;
        line-height: 39px !important;
        font-size: 18px !important;
        margin: 0 !important;
    }/* Conteudo central nao precisa de margem lateral pra flutuantes: eles
       agora ficam nos cantos de baixo. Garante que a barra social aberta
       (caso vire menu) nao estoure a viewport. */
html body div#midiasociais{ max-width: calc(100vw - 24px) !important; }
}/* Quebra de palavras longas (todas as larguras): evita estouro/sobreposicao
   de texto pelas colunas vizinhas (titulos, rodape, conteudo de post). */
.title,
.breadcrumber,
.mz-footer-nav .mz-foot-title,
.mz-footer-nav a,
.footer p,
.ajax-container.mz-post h1,
.ajax-container.mz-post h2,
.ajax-container.mz-post h3,
.ajax-container.mz-post p,
.ajax-container.mz-post li{
    overflow-wrap: break-word;
    word-break: break-word;
}/* Rodape: reforco de gap entre colunas para nao colarem/colidirem em
   larguras intermediarias. */
.mz-footer-nav{ column-gap: 24px; }

/* =====================================================================
   SOCIAL — FAIXA LATERAL DIREITA + RESERVA DE ESPACO
   ---------------------------------------------------------------------
   ESCOPADO para telas < 768px OU > 1280px. A faixa intermediaria
   (768-1280px) fica sob controle EXCLUSIVO da regra "MODO SITE PARA
   COMPUTADOR" (acima), que move os icones para o canto inferior-esquerdo.
   Antes esta regra nao tinha media query e anulava aquela por vir depois.
   ===================================================================== */

/* Mobile nativo (<768px): barra horizontal no RODAPE do viewport,
   compacta e fora do caminho do conteudo */
@media (max-width: 767px) {
html body div#midiasociais{
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 8px 12px !important;
        background: rgba(8, 6, 4, 0.95) !important;
        border: none !important;
        border-top: 1px solid #141c28 !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6) !important;
        z-index: 900 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
html body div#alinksz{
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        margin: 0 !important;
    }
html body div#alinksz a{
        width: 38px !important;
        height: 38px !important;
        line-height: 39px !important;
        font-size: 18px !important;
        margin: 0 !important;
    }/* Reserva espaco no rodape para a barra social nao sobrepor conteudo */
html body .wrap{
        padding-bottom: 60px !important;
    }/* Remove padding-right que empurrava conteudo para a lateral */
html body .wrap{
        padding-right: 0 !important;
    }
}

/* Desktop largo (>=1281px): barra vertical discreta na DIREITA,
   centralizada verticalmente, mas com top fixo para nao parecer "solta" */
@media (min-width: 1281px) {
html body div#midiasociais{
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        padding: 8px 6px !important;
        background: rgba(10, 8, 4, 0.82) !important;
        border: 1px solid rgba(64, 50, 26, 0.6) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
        z-index: 900 !important;
    }
html body div#alinksz{
        display: grid !important;
        grid-auto-flow: row !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        margin: 0 !important;
    }
html body div#alinksz a{
        width: 40px !important;
        height: 40px !important;
        line-height: 41px !important;
        font-size: 20px !important;
        margin: 0 !important;
    }
}
/* Desktop estreito (1281-1560px): reserva espaco para barra social na direita */
@media (min-width: 1281px) and (max-width: 1560px) {
html body .wrap{
        box-sizing: border-box !important;
        padding-right: 58px !important;
    }
}

/* Telas estreitas (<=480px): icones menores na barra inferior */
@media (max-width: 480px) {
html body div#alinksz a{
        width: 33px !important;
        height: 33px !important;
        line-height: 34px !important;
        font-size: 16px !important;
    }
html body div#alinksz{
        gap: 12px !important;
    }
}

/* =====================================================================
   FAIXA INTERMEDIARIA (1025-1280px) — "site para computador" no mobile e
   janelas estreitas. Elementos de LARGURA FIXA do hero/area nobre passam a
   FLUIDOS para nao estourar a viewport, deixar espaco preto na lateral e
   desalinhar os blocos com moldura. As colunas ja reflowam nessa faixa
   (regra 768-1280) e ficam centralizadas (justify-content: center).
   ===================================================================== */
@media (min-width: 1025px) and (max-width: 1280px) {/* Area nobre (slider + login) deixa de ser 1200px fixo */
html body div#areanobrejsz{
        width: 100% !important;
        max-width: 100% !important;
        background-size: cover !important;
    }/* Hero/header sem o margin negativo do logo que cortava/empurrava */
html body .wrap .header{ height: auto !important; }
html body .wrap .header .logotipo img{
        max-width: 92% !important;
        height: auto !important;
        margin: 10px auto 20px !important;
        display: block !important;
    }/* Colunas centralizadas e sem estourar o teto */
html body .wrap .main .mz-columns{
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }/* Caixas internas das colunas ocupam 100% da coluna (sem px fixo que
       deixava sobrar o fundo preto a esquerda/direita). */
html body .wrap .main .sidebar .container,
    html body .wrap .main .content .container{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}/* =====================================================================
   COLUNAS — altura NATURAL (align-items: flex-start na .mz-columns).
   A coluna esquerda (Top Players) termina quando o conteudo acaba, sem
   esticar a moldura. A altura das molduras e baseada no proprio conteudo
   (height: auto). (Revertido o stretch a pedido — preferimos altura natural
   ao inves de moldura esticada vazia.)
   ===================================================================== */
.wrap .main .mz-columns > .sidebar > .container,
.wrap .main .mz-columns > .content > .container{
    height: auto !important;
}/* =====================================================================
   3 COLUNAS A PARTIR DE 980px (inclui "site para computador" no mobile)
   ---------------------------------------------------------------------
   As laterais sao 220px fixas e o meio e fluido (flex:1) — assim as 3
   colunas cabem em ~980px sem empurrar a 3a para baixo. Abaixo de 980px o
   reflow (768-979) e o empilhamento (<768) cuidam do mobile.
   Aqui garantimos que NADA dentro das sidebars trave em largura > coluna.
   ===================================================================== */
.wrap .main .mz-columns .sidebar .container,
.wrap .main .mz-columns .sidebar .container .title,
.wrap .main .mz-columns .sidebar .container .box,
.wrap .main .mz-columns .sidebar div#sidebarjsz{

    /* DARK FANTASY GLASSMORPHISM BORDERS */
    background: rgba(12, 9, 6, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(218, 190, 104, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 0 15px rgba(218, 190, 104, 0.05) !important;
    padding: 12px 16px !important;
}

/* =====================================================================
   HERO (Banner + Login) — estrutura definitiva por media query
   ---------------------------------------------------------------------
   PC real (>1024px): bloco centrado (max 1200), banner 75% a ESQUERDA e
   login 23% a DIREITA (space-between), mesma base das 3 colunas.
   Telas menores / "site para computador" (<=1024px): empilha centralizado,
   ambos width 100% — encaixa no topo das 3 colunas sem estourar.
   ===================================================================== */
@media (min-width: 1025px) {
html body div#areanobrejsz{
        width: 82% !important;
        max-width: 1100px !important;          /* centralizado e mais estreito que as colunas */
        margin: 20px auto 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;     /* banner + login centralizados na moldura */
        align-items: center !important;
        box-sizing: border-box !important;
        gap: var(--mz-gap-cols, 28px) !important;
        padding: 6px 12px !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
        filter: none !important;
        background: none !important;
        /* moldura ornamentada (border-image 9-slice: escala sem perder qualidade) */
        overflow: hidden !important;
    }
html body div#sliderjscallzer{
        position: static !important;
        flex: 0 1 707px !important;             /* tamanho nativo: nitido, sem upscale */
        width: auto !important;
        max-width: 707px !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 4px !important;
    }
html body div#sliderjscallzer img{
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
html body div#areadousuariojscallzer{
        position: static !important;
        flex: 0 0 260px !important;
        width: 260px !important;
        max-width: 260px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        float: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1024px) {
html body div#areanobrejsz{
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        height: auto !important;
    }
html body div#sliderjscallzer{
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }
html body div#sliderjscallzer img{
        width: 100% !important;
        height: auto !important;
    }
html body div#areadousuariojscallzer{
        width: 100% !important;
        max-width: 340px !important;
        float: none !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
}


/* =====================================================================
   HERO (BANNER + LOGIN) — MOBILE/TABLET POR FAIXA (autoritativo, fim do arquivo)
   Desktop real (>=1025px) fica como esta (perfeito). Aqui so corrigimos:
   - 768-1024px ("Site para Computador" no celular): banner + login LADO A
     LADO, proporcionais (encolhem juntos, sem vazar nem deixar vao preto).
   - <=767px (mobile nativo): EMPILHA, banner 100% visivel (mata o vao preto)
     e login 100% (max 320). Nao altera as 3 colunas de baixo.
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
html body div#areanobrejsz{
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px auto 0 auto !important;
        padding: 6px 10px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
        overflow: hidden !important;
    }
html body div#sliderjscallzer{
        position: static !important;
        flex: 0 1 74% !important;
        width: 74% !important;
        max-width: 840px !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 4px !important;
    }
html body div#sliderjscallzer img,
    html body #sliderjscallzer .sy-slide img{
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
html body div#areadousuariojscallzer{
        flex: 0 0 24% !important;
        width: 24% !important;
        max-width: 270px !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {/* MOBILE NATIVO: empilha (banner em cima, login centralizado embaixo), com a moldura dourada */
html body div#areanobrejsz{
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 8px auto 0 auto !important;
        padding: 12px 0 !important;
        box-sizing: border-box !important;
        background: none !important;
        overflow: hidden !important;
    }/* BANNER: largura total no topo, visivel */
html body div#sliderjscallzer,
    html body div#areanobrejsz .sy-box{
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        border-radius: 4px !important;
    }
html body #sliderjscallzer .sy-filler,
    html body .sy-filler{ display: none !important; height: 0 !important; }
html body #sliderjscallzer .sy-box,
    html body #sliderjscallzer .sy-slides-wrap,
    html body #sliderjscallzer .sy-slides-crop,
    html body #sliderjscallzer .sy-list,
    html body .sy-box,
    html body .sy-slides-wrap,
    html body .sy-slides-crop{
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        background: none !important;
    }/* Mostra SO o 1o slide de forma estatica (mata o vao preto do slider absoluto).
       No mobile o banner vira imagem fixa; no PC o carrossel continua normal. */
html body #sliderjscallzer .sy-slide,
    html body .sy-slides-crop .sy-slide{
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        margin: 0 !important;
    }
html body div#sliderjscallzer img,
    html body #sliderjscallzer .sy-slide img,
    html body #sliderjscallzer .sy-slide > a > img{
        width: 100% !important;
        height: auto !important;
        display: block !important;
        aspect-ratio: 707 / 250 !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }/* LOGIN: largura total dentro da moldura (sem sobra preta nas laterais) */
html body div#areadousuariojscallzer{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 15px auto 0 auto !important;
        box-sizing: border-box !important;
    }
}


/* =====================================================================
   ACABAMENTO MOBILE (<=767px): banner centrado, texto do Castle Siege e
   rodape empilhado. So mobile — desktop intocado.
   ===================================================================== */
@media (max-width: 767px) {/* 1) BANNER cravado a 100% dentro da moldura, sem vazar */
html body div#areanobrejsz div#sliderjscallzer,
    html body div#areanobrejsz div#sliderjscallzer .sy-box,
    html body div#areanobrejsz div#sliderjscallzer .sy-slides-wrap,
    html body div#areanobrejsz div#sliderjscallzer .sy-slides-crop{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        float: none !important;
        left: 0 !important;
        right: 0 !important;
    }
html body div#areanobrejsz div#sliderjscallzer .sy-slide,
    html body div#areanobrejsz div#sliderjscallzer .sy-list > li{
        width: 100% !important;
        max-width: 100% !important;
    }
html body div#areanobrejsz div#sliderjscallzer img,
    html body div#areanobrejsz div#sliderjscallzer .sy-slide img{
        width: 100% !important;
        max-width: 100% !important;
    }/* 2) RODAPE: 2 colunas em cima (Servidor/Loja) + 3a (Ajuda) centralizada embaixo */
html body .mz-footer-nav{
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        align-items: flex-start !important;
        gap: 0 !important;
        grid-template-columns: none !important;
        text-align: center !important;
    }
html body .mz-foot-col{
        float: none !important;
    }
html body .mz-foot-col:nth-child(1),
    html body .mz-foot-col:nth-child(2){
        width: 45% !important;
        text-align: center !important;
    }
html body .mz-foot-col:nth-child(3){
        width: 100% !important;
        text-align: center !important;
        margin-top: 15px !important;
    }
html body .mz-footer-nav ul,
    html body .mz-footer-nav li{
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        list-style: none !important;
    }
}


/* =====================================================================
   AJUSTES FINAIS (v82): Castle Siege overlay, banner mobile, classificacao
   ===================================================================== */

/* 1) BANNER mobile: centralizado sem vazamento lateral, sem vao preto antes do login */
@media (max-width: 767px) {
html body div#areanobrejsz div#sliderjscallzer{
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        position: static !important;
    }/* Remove vao preto entre banner e login (margin-top excessiva) */
html body div#areanobrejsz div#areadousuariojscallzer{
        margin-top: 8px !important;
    }
}/* 3) CLASSIFICACAO ETARIA: nunca tapada pelos icones flutuantes das redes sociais.
      Padding-bottom no footer empurra o texto pra cima + z-index elevado. */
#classificacaojscallzer{
    position: relative !important;
    z-index: 50 !important;
    padding-bottom: 10px !important;
}
.footer{
    padding-bottom: 60px !important; /* espaco pra o texto nao ficar sob os icones flutuantes */
}/* =====================================================================
   ANTI-AUTOFILL DO LOGIN (campos brancos do navegador)
   ---------------------------------------------------------------------
   Quando o navegador preenche usuario/senha automaticamente, ele aplica
   o estado :-webkit-autofill, que sobrepoe o fundo com branco/amarelo
   IGNORANDO o background do tema (era o que deixava os campos brancos no
   mobile e no desktop). Nao da pra mudar o fundo de autofill diretamente,
   mas o truque padrao e cobri-lo com um box-shadow interno solido e fixar
   a cor do texto via -webkit-text-fill-color. A transition longa impede o
   "flash" branco momentaneo. Cobre tanto .login-input quanto qualquer
   input dentro da area do usuario (fallback). */
input.login-input:-webkit-autofill,
input.login-input:-webkit-autofill:hover,
input.login-input:-webkit-autofill:focus,
input.login-input:-webkit-autofill:active,
div#areadousuariojscallzer input:-webkit-autofill,
div#areadousuariojscallzer input:-webkit-autofill:hover,
div#areadousuariojscallzer input:-webkit-autofill:focus,
div#areadousuariojscallzer input:-webkit-autofill:active{
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.85) inset !important;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.85) inset !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 4px !important;
    font-family: var(--font-inter) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}/* =====================================================================
   EFEITOS DE DESTAQUE (resgate de identidade visual)
   ---------------------------------------------------------------------
   1) Destaque do 1o colocado nas tabelas de ranking (Top Players)
   2) Brilho avermelhado pulsante ao redor do banner Castle of Siege
   ===================================================================== */
/* 1) PRIMEIRO LUGAR EM DESTAQUE -------------------------------------- */
/* Cada tabela de ranking (Resets Tempo Real/Diario/Semanal, MUFC, Master)
   tem o #1 na 1a linha do tbody. Damos a ela fundo dourado, texto branco
   brilhante e uma borda lateral dourada para "saltar" das demais. */
.top-players table.list tbody tr:first-child td,
.top-players-group table.list tbody tr:first-child td,
.wrap .main .sidebar.left table.list tbody tr:first-child td{
    background: linear-gradient(90deg, rgba(245, 215, 110, 0.32) 0%, rgba(218, 190, 104, 0.10) 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(245, 215, 110, 0.65), 0 0 2px #000 !important;
}
.top-players table.list tbody tr:first-child td:first-child,
.top-players-group table.list tbody tr:first-child td:first-child,
.wrap .main .sidebar.left table.list tbody tr:first-child td:first-child{
    border-left: 3px solid var(--mz-gold-light) !important;
    box-shadow: inset 0 0 12px rgba(245, 215, 110, 0.30) !important;
}
.top-players table.list tbody tr:first-child td:last-child,
.top-players-group table.list tbody tr:first-child td:last-child,
.wrap .main .sidebar.left table.list tbody tr:first-child td:last-child{
    color: var(--mz-gold-light) !important;
    box-shadow: inset 0 0 12px rgba(245, 215, 110, 0.30) !important;
}/* 2) CASTLE OF SIEGE — AURA AVERMELHADA (GPU, 60fps) ----------------- */
/* Tecnica premium: o glow vive num pseudo-elemento e animamos APENAS a
   opacity (composited na GPU, sem repaint do box-shadow a cada frame).
   No hover o card faz um "lift" sutil e a aura intensifica. */
.castle-siege{
    transition: transform .28s ease !important;
    will-change: transform !important;
}
.castle-siege::after{
    content: '' !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: inherit !important;
    box-shadow: 0 0 30px 4px rgba(212, 175, 55, 0.3),
                0 0 70px 14px rgba(0, 0, 0, 0.5) !important;
    opacity: 0.55 !important;
    animation: mz-castle-aura 3.4s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes mz-castle-aura {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}
.castle-siege:hover{
    transform: translateY(-2px) scale(1.006) !important;
}
.castle-siege:hover::after{
    opacity: 1 !important;
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
.castle-siege{ transition: none !important; }
.castle-siege:hover{ transform: none !important; }
.castle-siege::after{ animation: none !important; opacity: 0.6 !important; }
}/* =====================================================================
   PACOTE DE MICROINTERACOES PREMIUM (vida ao tema dark/gold)
   ---------------------------------------------------------------------
   Tudo em CSS puro, escopado e com fallback de reduced-motion. Cobre:
   titulos com brilho pulsante, hover das noticias, hover dos eventos,
   hover do ranking e "shine sweep" nos botoes dourados.
   ===================================================================== */
/* (A) TITULOS DE SECAO — brilho dourado pulsante sutil ---------------- */
.wrap .main .sidebar .container .title,
.wrap .main .content .container h1.title,
#mz-eventos .mz-eventos-header h3,
div#sidebarjsz .title{
    /* animation removed to improve performance */
}/* (B) NOTICIAS — realce dourado + leve deslize ao passar o mouse ------ */
ul.posts li{
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 4px;
}
ul.posts li:hover{
    background: linear-gradient(90deg, rgba(218, 190, 104, 0.12), rgba(218, 190, 104, 0) 90%) !important;
    transform: translateX(4px);
    box-shadow: inset 3px 0 0 0 var(--color-primary);
}/* (C) EVENTOS — card "respira" e brilha no hover --------------------- */
.events-spotlight .event{
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.events-spotlight .event:hover{
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 14px var(--color-primary-glow), inset 0 0 12px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px);
}/* (D) RANKING — realce dourado na linha sob o cursor ----------------- */
.top-players table.list tbody tr:hover td,
.top-players-group table.list tbody tr:hover td,
.wrap .main .sidebar.left table.list tbody tr:hover td{
    background: rgba(218, 190, 104, 0.14) !important;
    color: #fff !important;
    text-shadow: 0 0 8px var(--color-primary-glow) !important;
}/* (E) BOTOES DOURADOS — "shine sweep" (brilho que cruza) no hover ----- */
.mz-side-cta .mz-side-cta-btn,
.p2 a.btn,
div#botaodevermaisrankings a.btn,
div#crieusacontajscallzer a{
    position: relative;
    overflow: hidden;
}
.mz-side-cta .mz-side-cta-btn::after,
.p2 a.btn::after,
div#botaodevermaisrankings a.btn::after,
div#crieusacontajscallzer a::after{
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 245, 200, 0.45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
.mz-side-cta .mz-side-cta-btn:hover::after,
.p2 a.btn:hover::after,
div#botaodevermaisrankings a.btn:hover::after,
div#crieusacontajscallzer a:hover::after{
    animation: mz-btn-shine 0.7s ease;
}
@keyframes mz-btn-shine {
    0%   { left: -120%; }
    100% { left: 130%; }
}

/* Acessibilidade: desativa as animacoes/transicoes deste pacote -------- */
@media (prefers-reduced-motion: reduce) {
.wrap .main .sidebar .container .title,
    .wrap .main .content .container h1.title,
    #mz-eventos .mz-eventos-header h3,
    div#sidebarjsz .title{ animation: none !important; }
ul.posts li,
    .events-spotlight .event{ transition: none !important; transform: none !important; }
.mz-side-cta .mz-side-cta-btn:hover::after,
    .p2 a.btn:hover::after,
    div#botaodevermaisrankings a.btn:hover::after,
    div#crieusacontajscallzer a:hover::after{ animation: none !important; }
}/* =====================================================================
   PACOTE DE MICROINTERACOES PREMIUM (vida ao site, tema dark/gold)
   Tudo em CSS puro. Hovers nao quebram layout; animacoes continuas sao
   sutis e desativadas em prefers-reduced-motion.
   ===================================================================== */
/* --- Hover nas linhas de NOTICIAS (realce dourado + leve deslize) ---- */
ul.posts li{
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
    border-left: 2px solid transparent !important;
}
ul.posts li:hover{
    background: linear-gradient(90deg, rgba(218, 190, 104, 0.14), rgba(0, 0, 0, 0) 70%) !important;
    border-left-color: var(--color-primary) !important;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4) !important;
    transform: translateX(3px) !important;
}/* --- Hover nos CARDS DE EVENTOS (eleva + glow dourado) -------------- */
.events-spotlight .event{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.events-spotlight .event:hover{
    transform: translateY(-2px) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px var(--color-primary-glow) !important;
}/* --- Hover nas LINHAS DE RANKING (exceto o 1o, que ja tem destaque) - */
.top-players table.list tbody tr,
.top-players-group table.list tbody tr,
.wrap .main .sidebar.left table.list tbody tr{
    transition: background .15s ease !important;
}
.top-players table.list tbody tr:not(:first-child):hover td,
.top-players-group table.list tbody tr:not(:first-child):hover td,
.wrap .main .sidebar.left table.list tbody tr:not(:first-child):hover td{
    background: rgba(218, 190, 104, 0.12) !important;
    color: #fff !important;
    text-shadow: 0 0 8px var(--color-primary-glow) !important;
}/* --- SHIMMER dourado deslizando nos TITULOS das se\u00e7\u00f5es ------------- */
.wrap .main .sidebar .container .title,
div#sidebarjsz .title{
    position: relative !important;
    overflow: hidden !important;
}
.wrap .main .sidebar .container .title::after,
div#sidebarjsz .title::after{
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 45% !important;
    height: 100% !important;
    background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.35), transparent) !important;
    animation: mz-title-shimmer 6s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes mz-title-shimmer {
    0%   { transform: translateX(-150%) skewX(-20deg); }
    22%  { transform: translateX(250%) skewX(-20deg); }
    100% { transform: translateX(250%) skewX(-20deg); }
}/* --- PULSE suave no CTA "Seja VIP" da sidebar (REMOVIDO por performance) --- */
.mz-side-cta .mz-side-cta-vip{
    /* animation removed to improve performance */
}/* --- SHINE SWEEP nos botoes dourados ao passar o mouse ------------- */
.p2 a.btn,
div#botaodevermaisrankings a.btn,
div#botaodevermaisrankings a,
.mz-side-cta .mz-side-cta-btn{
    position: relative !important;
    overflow: hidden !important;
}
.p2 a.btn::before,
div#botaodevermaisrankings a::before,
.mz-side-cta .mz-side-cta-btn::before{
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(100deg, transparent, rgba(255, 245, 210, 0.45), transparent) !important;
    transform: skewX(-20deg) !important;
    transition: left .5s ease !important;
    pointer-events: none !important;
}
.p2 a.btn:hover::before,
div#botaodevermaisrankings a:hover::before,
.mz-side-cta .mz-side-cta-btn:hover::before{
    left: 130% !important;
}

/* --- Acessibilidade: desliga as animacoes continuas se solicitado --- */
@media (prefers-reduced-motion: reduce) {
ul.posts li:hover,
    .events-spotlight .event:hover{ transform: none !important; }
.wrap .main .sidebar .container .title::after,
    div#sidebarjsz .title::after,
    .mz-side-cta .mz-side-cta-vip{ animation: none !important; }
.p2 a.btn::before,
    div#botaodevermaisrankings a::before,
    .mz-side-cta .mz-side-cta-btn::before{ transition: none !important; }
}/* =====================================================================
   POLISH DA HOME — SCROLL REVEAL + FADE DO HERO
   ---------------------------------------------------------------------
   As secoes surgem com fade+subida ao entrar na viewport. SEGURANCA: o
   estado "escondido" so vale quando body.mz-reveal-ready existe (classe
   adicionada pelo JS APENAS se IntersectionObserver e suportado e o
   usuario nao pediu reduce-motion). Sem JS => nada fica invisivel.
   ===================================================================== */
body.mz-reveal-ready .mz-reveal{
    opacity: 0;
    transition: opacity .4s ease;
    will-change: opacity;
}
body.mz-reveal-ready .mz-reveal.mz-revealed{
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
body.mz-reveal-ready .mz-reveal{
        opacity: 1 !important;
        transition: none !important;
    }
}/* Fade-in suave do logo (hero) ao carregar — CSS puro, sem depender de JS */
.wrap .header .logotipo{
    animation: mz-hero-fade .9s ease both;
}
@keyframes mz-hero-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.wrap .header .logotipo{ animation: none !important; }
}


/* ===================================================================
   MOBILE HEADER MU ZORD — hamburguer + drawer + banner + badge online
   Escopo: SO mobile (<=768px). Desktop nao e afetado. (2026)
   =================================================================== */
@media (max-width: 768px) {/* --- Barra fixa no topo (logo centrada + hamburguer absoluto no canto direito) --- */
#mz-m-bar{
    display: flex !important;
    align-items: center;
    justify-content: center;      /* logo centralizada */
    position: sticky;
    top: 0;
    z-index: 9998;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 56px;            /* padding lateral para nao colidir com o botao */
    background: linear-gradient(180deg, rgba(8, 11, 17, 0.98), rgba(10,8,4,0.92));
    border-bottom: 1px solid rgba(218,190,104,0.35);
    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  }/* Logo centralizada horizontalmente */
#mz-m-bar .mz-m-logo{
    height: 34px;
    width: auto;
    display: block;
    margin: 0 auto;
  }/* Hamburguer absoluto no canto superior direito — nao empurra a logo */
#mz-m-toggle{
    position: absolute !important;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
  }/* Oculta o contador antigo (.onlines) dentro do .header — so o novo badge fica */
.wrap .header .onlines{ display: none !important; }/* Remove margem negativa inline da logo (sobrescreve o style="margin:-120px...") */
.wrap .header .logotipo img,
  .wrap .header .logo img{
    margin: 0 auto !important;
    position: static !important;
    width: 88% !important;
    max-width: 88% !important;
    height: auto !important;
    display: block !important;
  }/* Remove faixa preta entre a sticky bar e o banner (.header fica sem padding/margin topo) */
.wrap .header{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }/* Badge de jogadores online: centralizado, abaixo do .header, acima do banner */
#mz-m-online{
    margin: 8px auto 4px !important;
    width: fit-content;
  }/* ---- Hamburguer (estilos visuais, posição já definida acima como absolute) ---- */
#mz-m-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px; height: 48px;
    padding: 9px;
    background: rgba(14, 19, 28, 0.95);
    border: 1px solid var(--mz-gold-primary);
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
  }
#mz-m-toggle span{
    display: block; height: 2px; width: 100%;
    background: var(--mz-gold-primary); border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }/* ---- FIX: Ícones sociais flutuantes — reduzir tamanho e afastar do conteúdo ---- */
div#midiasociais{
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.8) !important;
  }
div#midiasociais #alinksz a{
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }/* ---- FIX: Tabela de perfil — impede corte de texto nas colunas ---- */
.box-panel table.list{
    width: 100% !important;
    table-layout: auto !important;
    word-break: break-word !important;
  }
.box-panel table.list td{
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }/* ---- FIX: "Comece Agora/Baixar o Jogo" da sidebar — não flutua solta no topo ---- */
.mz-side-cta{
    position: static !important;
    margin: 12px auto !important;
    width: 92% !important;
  }
body.mz-m-open #mz-m-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.mz-m-open #mz-m-toggle span:nth-child(2){ opacity: 0; }
body.mz-m-open #mz-m-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }/* --- Overlay escuro --- */
#mz-m-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9998;
  }
body.mz-m-open #mz-m-overlay{ opacity: 1; visibility: visible; }/* --- Drawer lateral --- */
#mz-m-drawer{
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 82%; max-width: 320px;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 9999;
    background: linear-gradient(180deg, #0d0a05 0%, #131009 100%);
    border-right: 1px solid rgba(218,190,104,0.4);
    box-shadow: 4px 0 24px rgba(0,0,0,0.7);
    overflow-y: auto;
    padding: 16px 0 32px;
    box-sizing: border-box;
  }
body.mz-m-open #mz-m-drawer{ transform: translateX(0); }
#mz-m-drawer .mz-m-drawer-head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px 14px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(218,190,104,0.2);
  }
#mz-m-drawer .mz-m-drawer-head img{ height: 30px; width: auto; }
#mz-m-drawer .mz-m-close{
    background: none; border: none; color: var(--mz-gold-primary);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
  }
#mz-m-drawer .mz-m-group-title{
    font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--mz-gold-primary); opacity: .85;
    padding: 14px 18px 6px;
  }
#mz-m-drawer a{
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    color: var(--mz-parchment-light) !important;
    font-family: 'Cinzel', serif; font-size: 14px; text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background .2s ease, color .2s ease;
  }
#mz-m-drawer a:active,
  #mz-m-drawer a:hover{ background: rgba(218,190,104,0.12); color: #fff !important; }/* --- Badge "X JOGADORES ONLINE" (barra centralizada) --- */
#mz-m-online{
    display: flex !important;
    align-items: center; justify-content: center; gap: 8px;
    width: fit-content; max-width: 90%;
    margin: 12px auto;
    padding: 8px 18px;
    background: rgba(10,8,4,0.75);
    border: 1px solid rgba(218,190,104,0.3);
    border-radius: 999px;
    backdrop-filter: blur(3px);
    font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; color: var(--mz-parchment-light);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }
#mz-m-online .mz-m-dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: #39ff14;
    box-shadow: 0 0 8px #39ff14, 0 0 14px #39ff14;
    animation: mzMPulse 1.4s infinite ease-in-out;
    flex: 0 0 auto;
  }
#mz-m-online b{ color: #39ff14; }
  @keyframes mzMPulse {
    0%   { transform: scale(0.8); opacity: 0.7; }
    50%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.7; }
  }/* --- Banner promocional responsivo --- */
.wrap .main .content img,
  .wrap .header img{
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto; margin-right: auto;
  }/* Esconde o menu horizontal desktop no mobile (o drawer assume) */
.menujszz{ display: none !important; }
#mz-m-onlinesrc{ display: none !important; }
}

/* Desktop REAL: garante que os elementos mobile NUNCA aparecem.
   Usa min-width E hover:hover (pointer fino) pra nao pegar celular com "site desktop". */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
#mz-m-bar, #mz-m-drawer, #mz-m-overlay, #mz-m-online{ display: none !important; }
}


/* ======================================================================
   NUCLEAR MOBILE OVERRIDE — FINAL DO ARQUIVO
   Prevalece sobre TUDO acima por ser o ultimo bloco + !important.
   Resolve: logo deslocada, faixa preta, contador duplicado, ícones
   sociais cobrindo conteúdo, tabela de perfil cortada, sidebar CTA solta.
   ====================================================================== */
@media (max-width: 768px) {/* === 1. BARRA STICKY (logo + hamburguer) === */
html body #mz-m-bar{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9998 !important;
    width: 100% !important;
    padding: 8px 56px !important;
    background: linear-gradient(180deg, rgba(8, 11, 17, 0.98), rgba(10,8,4,0.92)) !important;
    border-bottom: 1px solid rgba(218,190,104,0.35) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.6) !important;
    box-sizing: border-box !important;
  }
html body #mz-m-bar .mz-m-logo{
    height: 34px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
html body #mz-m-toggle{
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 9px !important;
    background: rgba(14, 19, 28, 0.95) !important;
    border: 1px solid var(--mz-gold-primary) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
html body #mz-m-toggle span{
    display: block !important;
    height: 2px !important;
    width: 100% !important;
    background: var(--mz-gold-primary) !important;
    border-radius: 2px !important;
  }/* === 2. ELIMINAR FAIXA PRETA + CENTRALIZAR LOGO DO .HEADER === */
html body .wrap .header{
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    text-align: center !important;
  }
html body .wrap .header .logotipo{
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
    height: auto !important;
    width: auto !important;
    transform: none !important;
  }
html body .wrap .header .logotipo img{
    display: block !important;
    margin: 0 auto !important;
    position: static !important;
    width: 85% !important;
    max-width: 85% !important;
    height: auto !important;
  }/* === 3. OCULTAR CONTADORES ANTIGOS (oval dourado + counter do tema) ===
     O oval dourado "X JOGADORES ONLINE" e o .mz-online-live (HTML fixo) que
     ficava colado na logo. Escondemos ele e o .onlines legado; so o pill
     preto #mz-m-online (criado no JS, abaixo da logo) permanece. */
html body .wrap .header .onlines{
    display: none !important;
  }/* === 4. BADGE ONLINE — verde esmeralda, centralizado abaixo da logo === */
html body #mz-m-online{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 8px auto 4px !important;
    width: fit-content !important;
    padding: 6px 18px !important;
    background: rgba(6,20,12,0.9) !important;
    border: 1px solid #2ecc71 !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #b8f5d0 !important;
    box-shadow: 0 0 12px rgba(46,204,113,0.35) !important;
  }
html body #mz-m-online b{ color: #39ff14 !important; }
html body #mz-m-online .mz-m-dot{
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #39ff14 !important;
    box-shadow: 0 0 8px #39ff14, 0 0 4px #39ff14 !important;
    flex: 0 0 auto !important;
    animation: mzMPulse 1.6s infinite !important;
  }/* === 5. ÍCONES SOCIAIS — menores e mais afastados === */
html body div#midiasociais{
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.7) !important;
    width: 44px !important;
    padding: 6px 0 !important;
  }
html body div#midiasociais #alinksz a{
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    line-height: 30px !important;
    margin: 0 0 6px 0 !important;
  }/* === 6. TABELA DE PERFIL — sem cortar texto === */
html body .box-panel table.list{
    width: 100% !important;
    table-layout: auto !important;
  }
html body .box-panel table.list td{
    padding: 6px 8px !important;
    font-size: 12px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }/* === 7. SIDEBAR CTA — não flutua solta no topo === */
html body .mz-side-cta{
    position: static !important;
    margin: 12px auto !important;
    width: 92% !important;
  }/* === 8. EFEITOS DE FOGO/RAINBOW — ocultar no mobile (performance) === */
html body div#effejscallzer{
    display: none !important;
  }/* === 9. MATAR O MENU ANTIGO (fonte unica de navegacao = #mz-m-drawer) ===
     Elimina a barra preta "MENU" e o overlay antigo que vazava a imagem da
     asa e grudava os textos. So o sistema #mz-m-* permanece. */
html body .menujszz,
  html body .menujszz.mz-open,
  html body .mz-menu-toggle,
  html body .mz-menu-close,
  html body #mennuj,
  html body .randomClass{ display: none !important; }/* === 10. DRAWER FULL-SCREEN OPACO (menu aberto) ===
     Container unico, sem imagem de fundo, cobrindo a tela toda. */
html body #mz-m-overlay{
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 9998 !important;
    opacity: 0 !important;              /* ESCONDIDO por padrao */
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .25s ease, visibility .25s ease !important;
  }
html body.mz-m-open #mz-m-overlay{
    opacity: 1 !important;              /* aparece SO com o menu aberto */
    visibility: visible !important;
    pointer-events: auto !important;
  }
html body.mz-m-open{
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
html body #mz-m-drawer{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(-100%) !important;
    transition: transform .28s ease !important;
    z-index: 9999 !important;
    background: rgba(10,10,10,0.98) !important;   /* opaco: sem asa vazando */
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    overflow-y: auto !important;
    padding: 0 0 24px !important;                 /* cabecalho sticky ja da o topo */
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
html body.mz-m-open #mz-m-drawer{ transform: translateX(0) !important; }/* Cabecalho do drawer: barra flexivel "NAVEGACAO" (esq) + X (dir), FIXA no
     topo do overlay, com recuo de safe-area (barra do navegador/notch). O X
     fica DENTRO desta barra (nao mais position:fixed, que quebrava por causa
     do transform do #mz-m-drawer e do parent display:none). */
html body #mz-m-drawer .mz-m-drawer-head{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 12px)
             calc(env(safe-area-inset-right, 0px) + 16px)
             12px
             calc(env(safe-area-inset-left, 0px) + 16px) !important;
    background: rgba(10,10,10,0.98) !important;
    border-bottom: 1px solid rgba(218,190,104,0.25) !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
  }
html body #mz-m-drawer .mz-m-drawer-head .mz-m-drawer-title{
    font-family: 'Cinzel', serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--mz-gold-primary) !important;
    text-shadow: 0 0 10px rgba(218,190,104,0.4) !important;
  }/* Botao X de fechar — dentro do cabecalho, alvo de toque generoso */
html body #mz-m-drawer .mz-m-close{
    position: static !important;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: var(--mz-gold-primary) !important;
    background: rgba(14, 19, 28, 0.95) !important;
    border: 1px solid var(--mz-gold-primary) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }/* A lista e clonada do menu oficial do desktop, mantendo a mesma ordem. */
html body #mz-m-drawer .mz-m-menu-list{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    list-style: none !important;
  }
html body #mz-m-drawer .mz-m-menu-list > li{
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }/* Links verticais, espacados, touch-friendly (min 52px de altura) */
html body #mz-m-drawer a{
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    margin: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: var(--mz-parchment-light) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
html body #mz-m-drawer a i{
    width: 22px !important;
    flex: 0 0 22px !important;
    color: var(--mz-gold-primary) !important;
    text-align: center !important;
  }
html body #mz-m-drawer .mz-m-language-item{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 56px !important;
  }
html body #mz-m-drawer .mz-m-language-item .language-flag{
    width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    margin: 0 !important;
    justify-content: center !important;
    border-bottom: 0 !important;
  }
html body #mz-m-drawer a:active{
    background: rgba(218,190,104,0.14) !important;
    color: #fff !important;
  }
}

/* Desktop REAL: garante que os elementos mobile NUNCA aparecem */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
html body #mz-m-bar,
  html body #mz-m-drawer,
  html body #mz-m-overlay,
  html body #mz-m-online{
    display: none !important;
  }
}

/* =====================================================================
   PAINEL INTERNO LOGADO — layout responsivo mobile (v105)
   Alvos: /site/panel, /site/packages e paginas de "Minha Conta".
   Bloco no FIM p/ ter precedencia. Escopo estrito: @media <=768px.
   ===================================================================== */
@media (max-width: 768px) {/* 1) DESTRAVA O GRID — colunas empilham e conteudo ocupa 100%.
       Impede o menu lateral esmagado de atropelar a tabela de infos. */
html body .wrap .main .mz-columns{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
html body .wrap .main .content,
    html body .wrap .main .sidebar.left,
    html body .wrap .main .sidebar.right{
        width: 100% !important;
        float: none !important;
        margin: 0 0 14px 0 !important;
        box-sizing: border-box !important;
    }
html body .wrap .main .content .container,
    html body .wrap .main .content .container .c{
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }/* 2) Caixas do painel em largura total */
html body .wrap .main .content .box-panel{
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }/* 3) TABELAS DO PAINEL (info da conta + INDICACAO): empilha rotulo/valor.
       Corrige a URL de indicacao que quebrava letra a letra na vertical. */
html body .wrap .main .content table.list.panel,
    html body .wrap .main .content table.list.panel tbody,
    html body .wrap .main .content table.list.panel tr,
    html body .wrap .main .content table.list.panel td{
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
html body .wrap .main .content table.list.panel tr{
        margin: 0 0 10px 0 !important;
        padding: 8px 10px !important;
        border: 1px solid rgba(218,190,104,0.18) !important;
        border-radius: 6px !important;
        background: rgba(0,0,0,0.25) !important;
    }/* 1a celula = rotulo (ex.: "Link para indicacao") ACIMA do valor */
html body .wrap .main .content table.list.panel td:first-child{
        font-family: var(--mz-font-body);
        font-weight: 700 !important;
        color: var(--mz-gold-primary) !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: .5px !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }/* 2a celula = valor/URL: quebra por palavra, nunca letra-a-letra vertical */
html body .wrap .main .content table.list.panel td:last-child{
        color: var(--mz-parchment-light) !important;
        font-size: 13px !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }/* 4) FORMULARIOS DO PAINEL: label acima, campo 100%, empilhado */
html body .wrap .main .content .form .box{
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        float: none !important;
    }
html body .wrap .main .content .form label{
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        float: none !important;
        margin: 0 0 4px 0 !important;
    }
html body .wrap .main .content input:not([type=checkbox]):not([type=radio]),
    html body .wrap .main .content select,
    html body .wrap .main .content textarea{
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* >=16px evita zoom automatico no iOS */
    }/* 5) Grade de pacotes do painel empilha em 1 coluna */
html body .wrap .main .content .packages{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
}/* =====================================================================
   ESCONDER BADGE "BETA" DO MORPHEUS WEB (mobile)
   O core do framework injeta um selo "BETA" no canto superior em mobile.
   Nao temos controle sobre o HTML gerado, entao escondemos via CSS
   qualquer elemento com classe ou ID que contenha "beta", "version-tag"
   ou "mw-badge", e tambem pseudo-elementos que mostram "beta" via content.
   ===================================================================== */
[class*="beta" i],
[id*="beta" i],
[class*="version-tag" i],
[class*="mw-badge" i]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}/* =====================================================================
   FIX 08/Jul/2026 (v107) — Menu mobile (X), footer, brasões, social icons
   Correções dos erros visuais reportados nas renderizações nativa e
   "site para computador" no mobile. Este bloco vem por último = prioridade.
   ===================================================================== */
/* ---- 1. BOTÃO FECHAR (X) — visível em qualquer modo de renderização ---- */
.mz-menu-close{
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid var(--mz-gold-primary) !important;
    border-radius: 50% !important;
    color: var(--mz-gold-primary) !important;
    font-size: 24px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000001 !important;
    line-height: 1 !important;
    transition: background 0.2s, color 0.2s !important;
}
.mz-menu-close:hover,
.mz-menu-close:focus{
    background: var(--mz-gold-primary) !important;
    color: #000 !important;
}/* Garante que o cabeçalho do drawer com o X apareça sempre relativo */
#mz-m-drawer .mz-m-drawer-head{ position: relative !important; }/* ---- 2. SOCIAL ICONS — renderização gráfica garantida (FontAwesome) ---- */
div#alinksz a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 20px !important;
    color: var(--mz-gold-primary) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(218,190,104,0.3) !important;
    background: rgba(0,0,0,0.5) !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
}
div#alinksz a:hover{
    background: var(--mz-gold-primary) !important;
    color: #000 !important;
}/* O <i> do FontAwesome nunca pode colapsar para 0px (vira "texto vazio") */
div#alinksz a i,
div#alinksz a .fa-brands{
    font-size: 20px !important;
    line-height: 1 !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
}

/* ---- 3. FOOTER — brasões empilhados, sem sobreposição ---- */
@media (max-width: 768px) {
html body .footer::after{ display: none !important; }
html body .footer img,
    html body .footer p::before{
        display: block !important;
        position: static !important;
        float: none !important;
        margin: 0 auto 20px auto !important;
        max-width: 200px !important;
        height: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
html body .footer{
        height: auto !important;
        min-height: auto !important;
        margin-top: 40px !important;
        padding: 30px 16px 60px 16px !important;
        overflow: visible !important;
    }
html body .footer p{
        text-align: center !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }
}

/* ---- 4. SOCIAL ICONS — mobile menores mas visíveis ---- */
@media (max-width: 480px) {
div#alinksz a{
        width: 33px !important;
        height: 33px !important;
        font-size: 16px !important;
    }
div#alinksz a i{
        font-size: 16px !important;
    }
}

/* =====================================================================
   AUDITORIA MOBILE GLOBAL — BLOCO FINAL AUTORITATIVO
   ---------------------------------------------------------------------
   Correcoes abrangentes para TODAS as paginas do site no mobile nativo
   (<=767px) e no modo "site para computador" (pointer:coarse >= 769px).
   Garante que posts, market, shop, profile, videos, tabelas e conteudo
   geral nunca fiquem espremidos ou cortados.
   Data: 10/Jul/2026
   ===================================================================== */

/* ==========================================================
   A) MOBILE NATIVO (<=767px) — PAGINAS DE CONTEUDO
   ========================================================== */
@media (max-width: 767px) {/* --- POST / SINGLE POST: largura total, sem espremimento --- */

    .ajax-container,
    .ajax-container.mz-post{
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 12px !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    .ajax-container img,
    .ajax-container.mz-post img{
        max-width: 100% !important;
        height: auto !important;
    }/* --- LISTAGEM DE POSTS (.posts) --- */
ul.posts li{
        padding: 12px 8px !important;
        word-break: break-word !important;
    }
.market .market-search{
        width: 100% !important;
        float: none !important;
        margin-bottom: 12px !important;
    }/* --- PROFILE/CHARACTER: tabelas fluidas --- */
.box-panel{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
    }/* --- INFO (Account): tabelas panel --- */
table.list.panel{
        width: 100% !important;
        table-layout: fixed !important;
    }
table.list.panel td{
        padding: 6px 4px !important;
        font-size: 12px !important;
        word-break: break-word !important;
    }/* --- TABELAS GENERICAS: scroll horizontal se necessario --- */
.wrap .main .content table{
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }/* --- FORMULARIOS: inputs/textareas full-width --- */
.form input[type="text"],
    .form input[type="password"],
    .form input[type="email"],
    .form input[type="number"],
    .form textarea,
    .form select{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }/* --- COMMUNITY BANNER e MEGA BANNER: stack vertical --- */
.mz-community-banner,
    .mz-mega-banner{
        flex-direction: column !important;
        padding: 14px 12px !important;
        gap: 10px !important;
    }
.mz-ch-list{
        flex-direction: column !important;
        gap: 8px !important;
    }
.mz-ch-card{
        width: 100% !important;
    }/* --- TITULO + BREADCRUMB: sem overflow --- */
h1.title,
    .title{
        font-size: 18px !important;
        word-break: break-word !important;
        padding: 0 4px !important;
    }
ul.breadcrumber{
        flex-wrap: wrap !important;
        font-size: 11px !important;
        padding: 0 4px !important;
    }/* --- BOTOES .btn: minimo touch-friendly (44px) --- */
a.btn,
    button.btn,
    input.btn,
    input[type="submit"].btn{
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* =====================================================================
   REFORCO — ESCONDER SISTEMA DE NAV MOBILE NO DESKTOP (>=769px)
   ---------------------------------------------------------------------
   Belt-and-suspenders: mesmo que o default.js (versao antiga em cache)
   injete a barra mobile #mz-m-*, ela NUNCA aparece no desktop nem no modo
   "versao para computador" (viewport >768px). Evita logo/menu duplicados.
   Data: 10/Jul/2026
   ===================================================================== */
@media (min-width: 769px) {
html body #mz-m-bar,
    html body #mz-m-toggle,
    html body #mz-m-drawer,
    html body #mz-m-online,
    html body #mz-m-backdrop,
    html body .mz-m-backdrop,
    html body .mz-menu-toggle,
    html body .mz-menu-close{
        display: none !important;
    }/* Garante que o menu horizontal desktop apareca normalmente */
html body .menujszz,
    html body .menujszz ul#mennuj,
    html body .randomClass{
        display: block !important;
    }
html body .menujszz ul#mennuj{
        display: flex !important;
    }
}

/* =====================================================================
   OVERRIDE FINAL — ICONES SOCIAIS NO MOBILE NATIVO (<=767px)
   ---------------------------------------------------------------------
   Barra horizontal CENTRALIZADA no rodape do viewport. Vence os blocos
   anteriores (nuclear=direita-vertical e 768-1280=esquerda). Ultimo bloco
   do arquivo => palavra final. Data: 10/Jul/2026
   ===================================================================== */
@media (max-width: 767px) {
html body div#midiasociais{
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        background: rgba(8, 6, 4, 0.96) !important;
        border: none !important;
        border-top: 1px solid rgba(64, 50, 26, 0.9) !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6) !important;
        z-index: 900 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
html body div#midiasociais #alinksz,
    html body div#alinksz{
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 18px !important;
        margin: 0 !important;
        width: auto !important;
        grid-auto-flow: unset !important;
        grid-template-columns: unset !important;
    }
html body div#midiasociais #alinksz a,
    html body div#alinksz a{
        width: 38px !important;
        height: 38px !important;
        line-height: 39px !important;
        font-size: 18px !important;
        margin: 0 !important;
    }/* Reserva espaco no rodape para a barra nao cobrir conteudo */
html body .wrap{ padding-bottom: 60px !important; }
}
@media (max-width: 480px) {
html body div#midiasociais #alinksz a,
    html body div#alinksz a{
        width: 34px !important;
        height: 34px !important;
        line-height: 35px !important;
        font-size: 16px !important;
    }
html body div#midiasociais #alinksz,
    html body div#alinksz{ gap: 14px !important; }
}


@media (max-width: 991px) {
#areanobrejsz, .sy-box, #sliderjscallzer{ min-height: 220px; }
.footer::before{ display: none !important; }
}/* Reserva espaço para o slider evitar salto no .wrap */
.sy-box, #slider, .sy-slides-wrap, #sliderjscallzer{
    min-height: 250px !important;
    aspect-ratio: 707 / 250;
    contain: layout paint;
}
@media (max-width: 991px) {
.sy-box, #slider, .sy-slides-wrap, #sliderjscallzer{
        min-height: 220px !important;
    }
}
.sy-box, #slider, .sy-slides-wrap, #sliderjscallzer{
    min-height: 250px !important;
    aspect-ratio: 707 / 250 !important;
    contain: layout paint !important;
}
@media (max-width: 991px) {
.sy-box, #slider, .sy-slides-wrap, #sliderjscallzer{
        min-height: 220px !important;
    }
}/* Estabiliza a caixa do Slider e evita salto no topo (Otimizacao CLS) */
.sy-box, #slider, .sy-slides-wrap, #sliderjscallzer, .sy-slides-crop{
    min-height: 240px !important;
    aspect-ratio: 707 / 240 !important;
    contain: layout paint !important;
}/* Estabiliza o bloco do Rei do Mu e rankings */
.container.mz-reveal, .sidebar .container{
    contain: layout !important;
}

@media (max-width: 991px) {
.sy-box, #slider, .sy-slides-wrap, #sliderjscallzer, .sy-slides-crop{
        min-height: 200px !important;
        aspect-ratio: auto !important;
    }
}
 .main{
    min-height: 500px;
}
input.login-input,
.partial-login input.login-input,
div#areadousuariojscallzer input.login-input,
div#areadousuariojscallzer .partial-login input.login-input{
    background: rgba(8, 11, 17, 0.95) !important;
    border: 2px solid var(--mz-gold-primary) !important;
    box-shadow: 0 0 10px rgba(218, 190, 104, 0.4), inset 0 0 5px rgba(0,0,0,0.8) !important;
    color: #fff !important;
}
input.login-input:focus,
div#areadousuariojscallzer input.login-input:focus{
    border-color: #fce8a1 !important;
    box-shadow: 0 0 15px rgba(252, 232, 161, 0.6), inset 0 0 5px rgba(0,0,0,0.8) !important;
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.woff2") format("woff2");
}/* ============ REFINAMENTOS DE LOGIN E ESTABILIDADE ============ */
.login-input{ 
    border: 1px solid rgba(255,255,255,0.3) !important; 
    background: rgba(0,0,0,0.5) !important; 
    color: #fff !important; 
    padding: 10px !important; 
    border-radius: 4px !important; 
    box-shadow: 0 0 5px rgba(218,190,104,0.3) !important; 
}
.login-input:focus{ 
    border-color: var(--mz-gold-primary) !important; 
    outline: none !important; 
    box-shadow: 0 0 8px rgba(218,190,104,0.6) !important; 
}
.wrap .main .sidebar.right, #mz-eventos{
    min-height: 400px;
}/* =========================================================================
   RESTAURAÇÃO DO BANNER SLIDER, MOLDURA DO LOGIN E SHOP COM BOTÃO DE COMPRA
   ========================================================================= */
/* 1. RESTAURAÇÃO DO SLIDER DE BANNERS */
#slider, .sy-box, .sy-slides-wrap{
    width: 100% !important;
    position: relative !important;
}
#slider li img,
#slider img,
.sy-slide img,
.sy-slide > a > img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}/* 2. MOLDURA E CONTRASTE DO BLOCO DE LOGIN */
.login-box, div.login, div#areadousuariojscallzer, .partial-login{
    background: radial-gradient(circle, rgba(30, 22, 16, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(212, 175, 55, 0.15) !important;
    padding: 20px !important;
}
.login-box input[type="text"], 
.login-box input[type="password"],
div#areadousuariojscallzer input.login-input,
.login-input{
    background: rgba(10, 8, 7, 0.85) !important;
    border: 1px solid #7d6333 !important;
    color: #f3e5c8 !important;
}
.login-box input:focus,
div#areadousuariojscallzer input.login-input:focus,
.login-input:focus{
    border-color: #e5c368 !important;
    box-shadow: 0 0 8px rgba(229, 195, 104, 0.4) !important;
}/* 3. RESTAURAÇÃO DO SHOP E DESTAQUE DO BOTÃO DE COMPRA */
.btn-buy-product,
input[type="submit"].btn-buy{
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 25px auto 10px auto !important;
    padding: 14px 20px !important;
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 1px solid var(--mz-gold-light) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35) !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: normal !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.btn-buy-product:hover,
input[type="submit"].btn-buy:hover{
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-dark) 100%) !important;
    box-shadow: 0 0 20px rgba(245, 215, 127, 0.6) !important;
    color: #000 !important;
}/* Contraste dos textos e opções do Shop */

.shop-categories,
.box-panel{
    color: #e0d5be !important;
}/* =========================================================================
   RESTAURAÇÃO VISUAL DO BOTÃO DE CONFIRMAÇÃO EM DOAÇÃO (MERCADOPAGO/PICPAY/ETC)
   ========================================================================= */

form[action*="donate"] input[type="submit"],
form[action*="donate"] button[type="submit"],
form[id*="donate"] input[type="submit"],
form[id*="donate"] button[type="submit"],
.btn-donate,
.btn-continue,
input[value*="Continue" i],
input[value*="Continuar" i],
input[value*="Gerar" i],
input[value*="Pagar" i],
input[value*="Doar" i]{
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 20px auto 10px auto !important;
    padding: 12px 24px !important;
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 1px solid var(--mz-gold-light) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: normal !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

form[action*="donate"] input[type="submit"]:hover,
form[action*="donate"] button[type="submit"]:hover,
form[id*="donate"] input[type="submit"]:hover,
form[id*="donate"] button[type="submit"]:hover,
.btn-donate:hover,
.btn-continue:hover,
input[value*="Continue" i]:hover,
input[value*="Continuar" i]:hover,
input[value*="Gerar" i]:hover,
input[value*="Pagar" i]:hover,
input[value*="Doar" i]:hover{
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-dark) 100%) !important;
    box-shadow: 0 0 20px rgba(245, 215, 127, 0.6) !important;
    color: #000 !important;
}/* =========================================================================
   DESIGN SYSTEM GLOBAL - BOTÕES DOURADOS & PAINÉIS DE ALTO CONTRASTE (CRO)
   ========================================================================= */
.btn-gold,
.btn-primary-zord,
a.btn-gold,
button.btn-gold{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 26px !important;
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 1px solid var(--mz-gold-light) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: normal !important;
    transition: all 0.2s ease-in-out !important;
}
.btn-gold:hover,
.btn-primary-zord:hover,
a.btn-gold:hover,
button.btn-gold:hover{
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-dark) 100%) !important;
    box-shadow: 0 0 20px rgba(245, 215, 127, 0.6) !important;
    color: #000 !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}/* =========================================================================
   BOTÃO "VEJA MAIS!" NA SIDEBAR DE INFORMAÇÕES
   ========================================================================= */

.sidebar a[href*="informacoes"],
.sidebar a[href*="info"],
.sidebar .btn-veja-mais,
.sidebar a.btn-default,
div#botaodevermaisrankings a.btn,
div#botaodevermaisrankings a{
    display: block !important;
    width: 85% !important;
    max-width: 180px !important;
    margin: 15px auto 5px auto !important;
    padding: 8px 16px !important;
    background: linear-gradient(180deg, #2e2318 0%, #15110d 100%) !important;
    color: var(--mz-gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 1px solid rgba(212, 175, 55, 0.6) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(212, 175, 55, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
    line-height: normal !important;
    height: auto !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.sidebar a[href*="informacoes"]:hover,
.sidebar a[href*="info"]:hover,
.sidebar a.btn-default:hover,
div#botaodevermaisrankings a.btn:hover,
div#botaodevermaisrankings a:hover{
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    border-color: var(--mz-gold-light) !important;
    box-shadow: 0 0 12px rgba(247, 223, 148, 0.6) !important;
    transform: translateY(-1px) !important;
    text-decoration: none !important;
}/* =========================================================================
   REFATORAÇÃO GLOBAL DE FORMULÁRIOS, CAMPOS & TIPOGRAFIA DARK FANTASY
   ========================================================================= */
/* 1. Campos de Entrada (Zero Caixas Pretas Chapadas) */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form select,
.form textarea,
.box-panel input[type="text"],
.box-panel input[type="password"],
.box-panel input[type="email"],
.box-panel input[type="number"],
.box-panel select,
.box-panel textarea,
.login-box input[type="text"],
.login-box input[type="password"]{
    background: rgba(18, 14, 11, 0.9) !important;
    border: 1px solid #7d6333 !important;
    border-radius: 4px !important;
    color: #f5e6c8 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
}
.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form select:focus,
.form textarea:focus,
.box-panel input[type="text"]:focus,
.box-panel input[type="password"]:focus,
.box-panel input[type="email"]:focus,
.box-panel input[type="number"]:focus,
.box-panel select:focus,
.box-panel textarea:focus,
.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus{
    border-color: #e5c368 !important;
    box-shadow: 0 0 10px rgba(229, 195, 104, 0.4) !important;
    background: rgba(26, 20, 15, 0.95) !important;
    color: #ffffff !important;
}/* 2. Títulos e Hierarquia Tipográfica Dark Fantasy */
h1.title,
.wrap .main .content .container h1.title,
.box-panel-title{
    font-family: 'Cinzel', serif !important;
    color: var(--mz-gold-light) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.3) !important;
    letter-spacing: 1px !important;
}/* 3. Contraste de Textos, Labels e Tabelas */

.box-panel .label label{
    color: var(--mz-parchment) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* 4. Acessibilidade & Mobile Guard */
@media (max-width: 768px) {
.box-panel,
    .login-box,
    .form,
    .wrap{
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
.form input[type="text"],
    .form input[type="password"],
    .form input[type="email"],
    .form select{
        width: 100% !important;
        max-width: 100% !important;
    }
}/* =========================================================================
   RESTAURAÇÃO DO BOTÃO "ENTRAR" (MOLDURA DOURADA) E "CADASTRO" NO LOGIN
   ========================================================================= */
input.login-submit,
div#areadousuariojscallzer input.login-submit,
.login-box input[type="submit"],
form[data-ajax-login] input[type="submit"],
input[value="ENTRAR" i]{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    margin: 8px auto 4px auto !important;
    padding: 8px 16px !important;
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    background-image: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    line-height: normal !important;
    border: 1px solid var(--mz-gold-light) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.45) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.2s ease-in-out !important;
}
input.login-submit:hover,
div#areadousuariojscallzer input.login-submit:hover,
.login-box input[type="submit"]:hover,
form[data-ajax-login] input[type="submit"]:hover,
input[value="ENTRAR" i]:hover{
    background: linear-gradient(180deg, var(--mz-gold-light) 0%, var(--mz-gold-dark) 100%) !important;
    box-shadow: 0 0 16px rgba(245, 215, 127, 0.7) !important;
    color: #000 !important;
    transform: translateY(-1px) !important;
}
div#crieusacontajscallzer a,
.login-box a.btn-register{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    margin: 4px auto !important;
    padding: 8px 16px !important;
    background: linear-gradient(180deg, #2e2318 0%, #15110d 100%) !important;
    color: var(--mz-gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 1px solid rgba(212, 175, 55, 0.6) !important;
    border-image: none !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(212, 175, 55, 0.2) !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}
div#crieusacontajscallzer a:hover,
.login-box a.btn-register:hover{
    background: linear-gradient(180deg, var(--mz-gold-primary) 0%, var(--mz-gold-dark) 100%) !important;
    color: #0b0908 !important;
    border-color: var(--mz-gold-light) !important;
    box-shadow: 0 0 12px rgba(247, 223, 148, 0.6) !important;
    transform: translateY(-1px) !important;
}/* =========================================================================
   RESTAURAÇÃO & ENQUADRAMENTO DO TOP PLAYERS (SIDEBAR ESQUERDA)
   ========================================================================= */
.wrap .main .sidebar.left .top-players,
.wrap .main .sidebar.left .top-players-group,
.top-players-group,
.top-players{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    float: none !important;
}
.top-player-group,
.top-players-group .top-player-group,
.top-players .top-player-group{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(14, 20, 30, 0.95), rgba(8, 11, 17, 0.98)) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 8px rgba(212, 175, 55, 0.04) !important;
    box-sizing: border-box !important;
    float: none !important;
}/* Subtítulo da categoria (Resets Diário, Semanal, Mensal, MR) */
.top-players .type,
.top-players-group .type{
    background: linear-gradient(180deg, rgba(20, 28, 42, 0.95), rgba(10, 14, 22, 0.98)) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    border-radius: 4px !important;
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
    color: var(--mz-gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8) !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}/* Tabela de classificação interna */
.top-player-group table.list,
.top-players table.list,
.top-players-group table.list{
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    border-spacing: 0 !important;
}
.top-player-group table.list thead th,
.top-players table.list thead th{
    background: linear-gradient(180deg, #182232 0%, #0d131e 100%) !important;
    color: var(--mz-gold-light) !important;
    font-family: var(--mz-font-body);
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 6px !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
}
.top-player-group table.list tbody tr td,
.top-players table.list tbody tr td{
    padding: 4px 6px !important;
    font-size: 11px !important;
    color: #d0d8e2 !important;
    background: rgba(10, 14, 22, 0.8) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    vertical-align: middle !important;
}
.top-player-group table.list tbody tr:last-child td,
.top-players table.list tbody tr:last-child td{
    border-bottom: none !important;
}/* Destaque ouro para o 1º Lugar */
.top-player-group table.list tbody tr:first-child td,
.top-players table.list tbody tr:first-child td{
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.25) 0%, rgba(14, 20, 32, 0.9) 100%) !important;
    color: var(--mz-gold-primary) !important;
    font-weight: 700 !important;
}
.top-player-group table.list tbody tr:first-child td a,
.top-players table.list tbody tr:first-child td a{
    color: var(--mz-gold-light) !important;
    font-weight: 800 !important;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.4) !important;
}

.shop-categories{
    flex: 0 0 230px !important;
    width: 230px !important;
    min-width: 230px !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
/* =====================================================================
   SHOP LANDING — exibida na rota raiz /shop/{slug}

/* ==========================================================================
   RESPONSIVIDADE (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 900px) {

    .shop-categories{
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 100% !important;
    }
}/* ============================================================
   NOTICIAS (POSTS) - Estilo Epic Dark Luxury
============================================================ */
ul.posts{
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}
ul.posts li{
    background: rgba(14, 19, 28, 0.95) !important;
    border: 1px solid rgba(218, 190, 104, 0.2) !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(4px) !important;
    border-left: 4px solid var(--mz-gold-primary) !important;
}
ul.posts li:hover{
    background: rgba(14, 19, 28, 0.98) !important;
    border-color: rgba(218, 190, 104, 0.5) !important;
    box-shadow: 0 4px 15px rgba(218, 190, 104, 0.1) !important;
    transform: translateX(5px) !important;
}
ul.posts li a{
    font-family: var(--mz-font-body);
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    transition: color 0.3s !important;
}
ul.posts li a:hover{
    color: var(--mz-gold-primary) !important;
}/* Label de [AVISOS] ou tags (Permite a cor original definida no painel admin) */
ul.posts li span{
    font-weight: bold !important;
    margin-right: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}/* Oculta fundos antigoes de table ou hr que possam ter vazado do estilo antigo */
ul.posts li hr{
    display: none !important;
}/* ============================================================
   TITULOS PADRAO (Remover caixa marrom antiga)
============================================================ */
h1.title, .title{
    background: linear-gradient(90deg, rgba(218, 190, 104, 0.15) 0%, transparent 100%) !important;
    border: none !important;
    border-left: 3px solid var(--mz-gold-primary) !important;
    border-bottom: 1px solid rgba(218, 190, 104, 0.2) !important;
    color: var(--mz-gold-primary) !important;
    font-family: var(--font-cinzel) !important;
    padding: 10px 15px !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 20px !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    box-shadow: none !important;
}

@keyframes mzFadeInDetails {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}/* ==========================================================================
   4. MENU HORIZONTAL TRADICIONAL (1 LINHA + CENTRALIZADO + IDIOMAS À DIREITA)
   ========================================================================== */

.container2{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    background: rgba(7, 5, 3, 0.95) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    z-index: 99999 !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.randomClass{
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-sizing: border-box !important;
}
.menujszz{
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 99999 !important;
}
.menujszz ul#mennuj{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}
.menujszz ul#mennuj > li{
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
.menujszz ul#mennuj > li > a{
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 8px !important;
    color: var(--mz-parchment) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.menujszz ul#mennuj > li:hover > a{
    color: var(--mz-gold-primary) !important;
    background: rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2) !important;
}

/* Responsividade Mobile para Top Bar */
@media (max-width: 991px) {

    .menujszz{
        display: none !important;
    }
}/* REMOVE EFEITO RAIO DE SOL / SOMBRA FANTASMA DA LOGO */
#effejscallzer, .rainbow, .ray, .sparks, .spark_1, .spark_2, .spark_3, .spark_4, .spark_5{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}/* MOLDURA MODERNA GLASSMORPHISM BANNER + LOGIN */
html body div#areanobrejsz{
    background: rgba(15, 20, 28, 0.70) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 0 15px rgba(218, 190, 104, 0.05) !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}


            html { background-color: #060910 !important; min-height: 100% !important; }
            body { background: url(../images/bg_fixed.webp?v=2026_dual_master_v2) center top no-repeat !important; background-size: cover !important; background-attachment: fixed !important; background-color: #060910 !important; font-family: 'Inter', sans-serif !important; color: #d5cdbe !important; min-width: 100% !important; }
            .wrap { width: min(96vw, var(--mz-container-max, 1440px)) !important; max-width: var(--mz-container-max, 1440px) !important; margin: 0 auto !important; }
            .wrap .main { width: 100% !important; background: transparent !important; }
            .wrap .main .top, .wrap .main .top2 { background: transparent !important; height: auto !important; margin: 0 !important; width: auto !important; border: none !important; box-shadow: none !important; }
            @media (min-width: 769px) { .wrap .header { height: 290px !important; margin-top: 15px !important; } }
            @media (max-width: 768px) { .wrap .header { height: auto !important; } }

            /* RESET DO FOOTER - REMOVE ROGUE PSEUDO-ELEMENT LOGOS AND OVERLAPS */
            .footer {
                width: 100% !important;
                height: auto !important;
                min-height: auto !important;
                margin: 40px auto 20px auto !important;
                padding: 30px 10px 40px 10px !important;
                float: none !important;
                clear: both !important;
                position: relative !important;
                text-align: center !important;
                box-sizing: border-box !important;
            }
            .footer p::before,
            .footer a::before,
            .footer p::after,
            .footer a::after {
                display: none !important;
                content: none !important;
                width: 0 !important;
                height: 0 !important;
                visibility: hidden !important;
            }
            .footer p {
                width: 100% !important;
                margin: 0 auto !important;
                position: relative !important;
                filter: none !important;
                box-shadow: none !important;
                text-shadow: none !important;
            }
            .mz-footer-logo {
                display: block !important;
                text-align: center !important;
                margin: 20px auto 10px auto !important;
            }
            .mz-footer-logo img {
                max-width: 240px !important;
                height: auto !important;
                display: inline-block !important;
                filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)) !important;
            }
            .mz-footer-nav {
                position: relative !important;
                z-index: 5 !important;
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 18px 20px !important;
                max-width: 620px !important;
                margin: 0 auto 20px auto !important;
                padding: 20px 25px !important;
                text-align: center !important;
                background: rgba(12, 17, 24, 0.95) !important;
                border: 1px solid rgba(218, 190, 104, 0.25) !important;
                border-radius: 8px !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
                box-shadow: 0 6px 25px rgba(0,0,0,0.7) !important;
            }

            /* REMOVE EFEITOS DE RAIOS / SOL / FANTASMA AO REDOR DA LOGO */
            #effejscallzer, .rainbow, .ray, .sparks, .spark_1, .spark_2, .spark_3, .spark_4, .spark_5 {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                height: 0 !important;
                width: 0 !important;
            }

            /* LOGO */
            .wrap .header .logo { 
                margin: -35px auto 10px auto !important; 
                text-align: center !important; 
                position: relative !important; 
                z-index: 10 !important; 
                display: block !important; 
            }
            .wrap .header .logo img { 
                max-width: 500px !important; 
                height: auto !important; 
                display: inline-block !important; 
                transition: transform 0.3s ease !important; 
            }
            .wrap .header .logo img:hover { 
                transform: scale(1.02) !important; 
            }

            /* TOP NAVBAR GLASSMORPHISM */
            .container2 { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; }
            .randomClass, .menujszz { 
                background: rgba(7, 5, 3, 0.88) !important; 
                backdrop-filter: blur(14px) !important; 
                -webkit-backdrop-filter: blur(14px) !important; 
                border-bottom: 1px solid rgba(218, 190, 104, 0.25) !important; 
                box-shadow: 0 4px 25px rgba(0,0,0,0.9) !important; 
                width: 100% !important; height: auto !important; min-height: 48px !important; padding: 6px 0 !important; 
            }
            .menujszz::after { display: none !important; }
            ul#mennuj { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: var(--mz-container-max, 1440px) !important; margin: 0 auto !important; padding: 0 10px !important; list-style: none !important; gap: 2px !important; }
            @media (min-width: 992px) { ul#mennuj { flex-wrap: nowrap !important; } }
            ul#mennuj li { float: none !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
            ul#mennuj li a { font-size: 11px !important; font-weight: 700 !important; padding: 7px 8px !important; margin: 0 !important; white-space: nowrap !important; color: #dfd6c7 !important; font-family: 'Cinzel', serif !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-radius: 4px !important; transition: all 0.2s ease !important; }
            ul#mennuj li a:hover { color: #ffd700 !important; background: rgba(218,190,104,0.15) !important; text-shadow: 0 0 8px rgba(255,215,0,0.4) !important; }
            ul#mennuj li .language { position: static !important; top: auto !important; right: auto !important; display: inline-flex !important; gap: 4px !important; align-items: center !important; justify-content: center !important; margin-right: 8px !important; }
            .language a, a.language-flag { display: inline-block !important; border: 1px solid rgba(218,190,104,0.3) !important; border-radius: 3px !important; padding: 2px !important; transition: transform 0.2s !important; }
            .language a:hover, a.language-flag:hover { transform: scale(1.1) !important; border-color: #ffd700 !important; }
            .language a.active, a.language-flag.active { opacity: 1 !important; border-color: #dabe68 !important; box-shadow: 0 0 6px rgba(218,190,104,0.5) !important; }

            /* HERO AREA - BANNER & LOGIN GLASSMORPHISM CONTAINER */
            div#areanobrejsz { 
                background: rgba(10, 14, 22, 0.82) !important; 
                backdrop-filter: blur(14px) !important; 
                -webkit-backdrop-filter: blur(14px) !important; 
                border: 1px solid rgba(212, 175, 55, 0.25) !important; 
                border-radius: 8px !important; 
                box-shadow: 0 8px 32px rgba(0,0,0,0.85), inset 0 0 15px rgba(218, 190, 104, 0.05) !important; 
                padding: 10px 12px !important; 
                margin: 4px auto 14px auto !important; 
                box-sizing: border-box !important; 
                display: flex !important; 
                justify-content: space-between !important; 
                align-items: stretch !important; 
                gap: 14px !important; 
                height: auto !important;
                min-height: 330px !important;
                max-height: none !important;
                overflow: visible !important;
            }
            div#sliderjscallzer { 
                flex: 1 1 auto !important; 
                max-width: calc(100% - 280px) !important; 
                height: 308px !important;
                max-height: 308px !important;
                background: rgba(8, 11, 17, 0.9) !important; 
                border: 1px solid rgba(212, 175, 55, 0.3) !important; 
                border-radius: 6px !important; 
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important; 
                overflow: hidden !important; 
                position: relative !important; 
                margin: 0 !important; 
            }
            div#sliderjscallzer .sy-box,
            div#sliderjscallzer .sy-slides-wrap,
            div#sliderjscallzer .sy-slides-crop {
                height: 308px !important;
                max-height: 308px !important;
                overflow: hidden !important;
            }
            div#sliderjscallzer img {
                width: 100% !important;
                height: 308px !important;
                max-height: 308px !important;
                object-fit: fill !important;
                display: block !important;
            }
            div#sliderjscallzer .sy-caption,
            div#sliderjscallzer p.title,
            div#sliderjscallzer p,
            div#sliderjscallzer .caption,
            .sy-caption {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            .sy-pager {
                position: absolute !important;
                right: 14px !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 8px !important;
                margin: 0 !important;
                padding: 0 !important;
                z-index: 10 !important;
                list-style: none !important;
                float: none !important;
                width: auto !important;
            }
            .sy-pager li {
                width: 10px !important;
                height: 10px !important;
                margin: 0 !important;
            }
            .sy-pager li a {
                width: 10px !important;
                height: 10px !important;
                background: rgba(255,255,255,0.35) !important;
                border: 1px solid rgba(212, 175, 55, 0.7) !important;
                border-radius: 50% !important;
                display: block !important;
                transition: all 0.2s ease !important;
                text-indent: -9999px !important;
            }
            .sy-pager li.sy-active a {
                background: #ffd700 !important;
                box-shadow: 0 0 10px #ffd700 !important;
                transform: scale(1.3) !important;
            }
            div#areadousuariojscallzer { 
                flex: 0 0 268px !important; 
                width: 268px !important; 
                max-width: 268px !important; 
                height: auto !important;
                min-height: 308px !important;
                max-height: none !important;
                background: rgba(10, 14, 22, 0.95) !important; 
                background-image: none !important; 
                backdrop-filter: blur(12px) !important; 
                -webkit-backdrop-filter: blur(12px) !important; 
                border: 1px solid rgba(212, 175, 55, 0.3) !important; 
                border-radius: 6px !important; 
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), inset 0 0 12px rgba(0,0,0,0.5) !important; 
                padding: 12px 16px !important;
                margin: 0 !important; 
                box-sizing: border-box !important; 
                display: flex !important; 
                flex-direction: column !important; 
                justify-content: center !important; 
                overflow: visible !important;
            }
            div#areadousuariojscallzer p.title,
            div#areadousuariojscallzer .partial-login > p.title,
            div#areadousuariojscallzer .title {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 6px !important;
                font-family: 'Cinzel', serif !important;
                font-size: 13px !important;
                font-weight: 800 !important;
                letter-spacing: 2px !important;
                text-transform: uppercase !important;
                color: #f5e0a0 !important;
                text-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 2px 4px rgba(0,0,0,0.8) !important;
                margin: 0 0 12px 0 !important;
                padding: 0 0 8px 0 !important;
                border: none !important;
                border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
                border-left: none !important;
                border-radius: 0 !important;
                height: auto !important;
                line-height: normal !important;
                text-align: center !important;
                background: transparent !important;
                background-image: none !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }
            div#areadousuariojscallzer .partial-login,
            div#areadousuariojscallzer #logadocomsucessso,
            div#areadousuariojscallzer .box {
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                background: transparent !important;
                background-image: none !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }
            div#areadousuariojscallzer form { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; }
            div#areadousuariojscallzer .mz-form-row {
                display: block !important;
                height: auto !important;
                min-height: 0 !important;
                margin: 0 0 8px !important;
                padding: 0 !important;
                border: 0 !important;
            }
            div#areadousuariojscallzer .mz-form-submit {
                display: block !important;
                height: auto !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 0 !important;
            }
            div#areadousuariojscallzer input.login-input { background: rgba(6, 9, 14, 0.95) !important; border: 1px solid rgba(212, 175, 55, 0.4) !important; border-radius: 4px !important; color: #f5e6c8 !important; padding: 6px 12px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; display: block !important; height: 36px !important; font-size: 13px !important; font-family: 'Inter', sans-serif !important; box-shadow: inset 0 0 8px rgba(0,0,0,0.7) !important; }
            div#areadousuariojscallzer input.login-input:focus { border-color: #ffd700 !important; box-shadow: 0 0 10px rgba(255,215,0,0.4) !important; background: rgba(12,17,25,0.98) !important; }
            div#areadousuariojscallzer input.login-submit { background: linear-gradient(180deg, #d4af37 0%, #8a6a1c 100%) !important; color: #0b0908 !important; padding: 0 14px !important; border: 1px solid #fce6a2 !important; border-radius: 4px !important; margin: 2px 0 8px 0 !important; width: 100% !important; box-sizing: border-box !important; display: block !important; height: 36px !important; font-size: 13px !important; font-family: 'Cinzel', serif !important; font-weight: 900 !important; text-transform: uppercase !important; text-align: center !important; letter-spacing: 2px !important; line-height: 34px !important; cursor: pointer !important; box-shadow: 0 3px 10px rgba(212, 175, 55, 0.45) !important; text-shadow: none !important; transition: all 0.2s ease-in-out !important; }
            div#areadousuariojscallzer input.login-submit:hover { background: linear-gradient(180deg, #f5d77f 0%, #a68128 100%) !important; box-shadow: 0 0 15px rgba(245, 215, 127, 0.65) !important; color: #000 !important; transform: translateY(-1px) !important; }
            div#areadousuariojscallzer .forgot-password { position: relative !important; margin: 0 0 8px !important; text-align: center !important; width: 100% !important; font-family: 'Cinzel', serif !important; font-weight: 600 !important; font-size: 11px !important; color: #d5c7ab !important; }
            div#areadousuariojscallzer .forgot-password a { color: #dabe68 !important; text-decoration: none !important; padding: 2px !important; min-height: auto !important; }
            div#areadousuariojscallzer .forgot-password a:hover { color: #fff !important; text-shadow: 0 0 6px rgba(218,190,104,0.6) !important; }
            div#crieusacontajscallzer { margin: 0 !important; text-align: center !important; }
            div#crieusacontajscallzer a { display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; height: auto !important; min-height: 48px !important; line-height: 1.2 !important; width: 100% !important; margin: 0 !important; padding: 10px 12px !important; color: #f7df94 !important; font-family: 'Cinzel', serif !important; font-weight: 800 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 2px !important; text-align: center !important; background: linear-gradient(180deg, #1c2432 0%, #0d131c 100%) !important; border: 1px solid rgba(212, 175, 55, 0.5) !important; border-radius: 4px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.8), inset 0 0 6px rgba(212, 175, 55, 0.2) !important; outline: none !important; box-sizing: border-box !important; text-decoration: none !important; transition: all 0.2s ease-in-out !important; }
            div#crieusacontajscallzer a:hover { background: linear-gradient(180deg, #d4af37 0%, #8a6a1c 100%) !important; color: #0b0908 !important; border-color: #ffe8a1 !important; box-shadow: 0 0 12px rgba(247, 223, 148, 0.6) !important; transform: translateY(-1px) !important; }
            div#areadousuariojscallzer { overflow: visible !important; }
            div#areadousuariojscallzer .box, div#logadocomsucessso { overflow: visible !important; min-height: auto !important; }
            div#areadousuariojscallzer #logadocomsucessso.is-guest {
                display: block !important;
                background: transparent !important;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 0 !important;
            }
            div#areadousuariojscallzer #logadocomsucessso.is-guest div#crieusacontajscallzer {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 100% !important;
                margin: 8px 0 0 !important;
            }
            @media (max-width: 767px) {
                html body div#areanobrejsz {
                    height: auto !important;
                    min-height: 0 !important;
                    overflow: visible !important;
                }
                html body div#areanobrejsz div#sliderjscallzer,
                html body div#areanobrejsz div#sliderjscallzer .sy-box,
                html body div#areanobrejsz div#sliderjscallzer .sy-slides-wrap,
                html body div#areanobrejsz div#sliderjscallzer .sy-slides-crop,
                html body div#areanobrejsz div#sliderjscallzer .sy-list {
                    position: relative !important;
                    width: 100% !important;
                    height: auto !important;
                    min-height: 0 !important;
                    aspect-ratio: 707 / 250 !important;
                    overflow: hidden !important;
                }
                html body div#areanobrejsz div#sliderjscallzer .sy-list > .sy-slide {
                    position: absolute !important;
                    inset: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    opacity: 0 !important;
                    visibility: hidden !important;
                    pointer-events: none !important;
                }
                html body div#areanobrejsz div#sliderjscallzer .sy-list > .sy-slide:first-child {
                    opacity: 1 !important;
                    visibility: visible !important;
                    pointer-events: auto !important;
                    z-index: 1 !important;
                }
                html body div#areanobrejsz div#sliderjscallzer .sy-list > .sy-slide:first-child img {
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover !important;
                }
                html body div#areanobrejsz div#areadousuariojscallzer {
                    flex: 0 0 auto !important;
                    width: calc(100% - 24px) !important;
                    max-width: 380px !important;
                    height: auto !important;
                    min-height: 0 !important;
                    margin: 8px auto 0 !important;
                    justify-content: flex-start !important;
                    overflow: visible !important;
                }
                div#areadousuariojscallzer #logadocomsucessso.is-guest input.login-input,
                div#areadousuariojscallzer #logadocomsucessso.is-guest input.login-submit,
                div#areadousuariojscallzer #logadocomsucessso.is-guest div#crieusacontajscallzer a {
                    min-height: 48px !important;
                }
                div#areadousuariojscallzer #logadocomsucessso.is-guest .forgot-password a,
                div#areadousuariojscallzer #logadocomsucessso.is-guest .remember-login .mz-checkbox-label {
                    display: inline-flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    min-height: 48px !important;
                    width: 100% !important;
                    box-sizing: border-box !important;
                }
                div#areadousuariojscallzer #logadocomsucessso.is-guest .remember-login {
                    margin: 0 0 8px !important;
                }
                div#areadousuariojscallzer #logadocomsucessso.is-authenticated li a {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    min-height: 48px !important;
                    width: 100% !important;
                    padding: 8px 12px !important;
                    box-sizing: border-box !important;
                }
            }
            @media (min-width: 1025px) {
                html body div#areanobrejsz {
                    height: 330px !important;
                    min-height: 330px !important;
                    max-height: 330px !important;
                    overflow: visible !important;
                }
                html body div#areanobrejsz div#sliderjscallzer,
                html body div#areanobrejsz div#sliderjscallzer .sy-box,
                html body div#areanobrejsz div#sliderjscallzer .sy-slides-wrap,
                html body div#areanobrejsz div#sliderjscallzer .sy-slides-crop {
                    height: 308px !important;
                    min-height: 308px !important;
                    max-height: 308px !important;
                }
                html body div#areanobrejsz div#sliderjscallzer img {
                    height: 308px !important;
                    max-height: 308px !important;
                }
                html body div#areanobrejsz div#areadousuariojscallzer {
                    flex: 0 0 268px !important;
                    width: 268px !important;
                    max-width: 268px !important;
                    height: 308px !important;
                    min-height: 308px !important;
                    max-height: 308px !important;
                    overflow-x: hidden !important;
                    overflow-y: auto !important;
                }
                html body div#areadousuariojscallzer #logadocomsucessso.is-guest input.login-input {
                    height: 36px !important;
                    min-height: 36px !important;
                    padding: 6px 12px !important;
                }
                html body div#areadousuariojscallzer #logadocomsucessso.is-guest input.login-submit {
                    height: 36px !important;
                    min-height: 36px !important;
                    margin: 0 0 6px !important;
                    padding: 6px 12px !important;
                }
                html body div#areadousuariojscallzer #logadocomsucessso.is-guest .remember-login {
                    margin: 0 0 4px !important;
                }
                html body div#areadousuariojscallzer #logadocomsucessso.is-guest .remember-login .mz-checkbox-label {
                    min-height: 24px !important;
                }
                html body div#areadousuariojscallzer #logadocomsucessso.is-guest .forgot-password a {
                    min-height: 28px !important;
                    padding: 2px 8px !important;
                }
                html body div#areadousuariojscallzer #logadocomsucessso.is-guest div#crieusacontajscallzer a {
                    height: 44px !important;
                    min-height: 44px !important;
                    padding: 6px 12px !important;
                }
            }
            .loading-login { display: none !important; }

            /* SIDEBAR RANKINGS & REI DO MU OVERRIDES */
            #mz-rei-widget { 
                background: linear-gradient(180deg, rgba(16,22,32,0.95), rgba(10,14,20,0.95)) !important; 
                border: 1px solid rgba(212, 175, 55, 0.35) !important; 
                box-shadow: 0 8px 24px rgba(0,0,0,0.8), inset 0 0 15px rgba(218, 190, 104, 0.05) !important; 
            }
            .top-players, .top-players-group, .top-player-group { background: transparent !important; }
            .top-players .type, .top-players-group .type { 
                background: linear-gradient(135deg, rgba(218, 190, 104, 0.2) 0%, rgba(16, 22, 32, 0.95) 100%) !important; 
                border: 1px solid rgba(212, 175, 55, 0.35) !important; 
                color: #f3e6c9 !important; 
                font-family: 'Cinzel', serif !important; 
            }
            .top-players table, .top-players-group table, .top-player-group table, .top-players .top-player { 
                background: rgba(10, 14, 20, 0.85) !important; 
                border: 1px solid rgba(212, 175, 55, 0.25) !important; 
                border-radius: 6px !important; 
                overflow: hidden !important; 
            }
            .top-players table tr th, .top-players-group table tr th { 
                background: rgba(16, 22, 32, 0.95) !important; 
                color: #dabe68 !important; 
                font-family: 'Cinzel', serif !important; 
            }
            .top-players table tr td, .top-players-group table tr td { 
                background: rgba(12, 17, 24, 0.8) !important; 
                color: #d5cdbe !important; 
                border-bottom: 1px solid rgba(218, 190, 104, 0.08) !important; 
            }
            .top-players table tr:first-child td, .top-players-group table tr:first-child td,
            .top-players table tr.rank-1 td, .top-players-group table tr.rank-1 td { 
                background: linear-gradient(90deg, rgba(218, 190, 104, 0.22) 0%, rgba(14, 20, 30, 0.9) 100%) !important; 
                color: #ffd700 !important; 
                font-weight: 700 !important; 
            }

            /* UNIFICAÇÃO DE CORES: REMOVE TONS AVERMELHADOS/MARRONS DE TODOS OS CARDS */
            .mz-community-banner {
                background: linear-gradient(135deg, rgba(16, 22, 32, 0.95), rgba(10, 14, 20, 0.98)) !important;
                border: 1px solid rgba(212, 175, 55, 0.35) !important;
                box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.5) !important;
            }
            .mz-community-banner::before {
                background: radial-gradient(80% 60% at 100% 0%, rgba(212, 175, 55, 0.15), transparent 60%) !important;
            }
            .mz-cta-hero {
                background: linear-gradient(145deg, rgba(16, 22, 32, 0.95), rgba(10, 14, 20, 0.98)) !important;
                border: 1px solid rgba(212, 175, 55, 0.35) !important;
                box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
            }
            .mz-gift-card {
                background: rgba(12, 17, 24, 0.85) !important;
                border: 1px solid rgba(212, 175, 55, 0.3) !important;
                box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
            }
            .mz-vip-showcase {
                background: linear-gradient(135deg, rgba(16, 22, 32, 0.95), rgba(10, 14, 20, 0.98)) !important;
                border: 1px solid rgba(212, 175, 55, 0.35) !important;
                box-shadow: 0 8px 32px rgba(0,0,0,0.8) !important;
            }
            .mz-f2p-trinity {
                background: rgba(12, 17, 24, 0.85) !important;
                border: 1px solid rgba(212, 175, 55, 0.25) !important;
            }

            /* SIDEBARS & CONTENT CONTAINERS (REMOVAL OF ALL 2000s RASTER FRAMES) */
            .wrap .main .sidebar { width: 334px !important; }
            .wrap .main .sidebar.left { background: transparent !important; float: left !important; width: 291px !important; margin: 0 0 0 26px !important; }
            .wrap .main .sidebar.right { background: transparent !important; width: 310px !important; float: right !important; }
            .wrap .main .content { width: 568px !important; float: left !important; margin-left: 0 !important; }
            .wrap .main .content .container { background: transparent !important; }

            /* GLASSMORPHISM BOXES */
            .wrap .main .sidebar.left .container, 
            .wrap .main .sidebar.right div#sidebarjsz, 
            .wrap .main .content .container .c, 
            .wrap .main .content .box-panel { 
                background: rgba(15, 20, 28, 0.72) !important; 
                backdrop-filter: blur(14px) !important; 
                -webkit-backdrop-filter: blur(14px) !important; 
                border: 1px solid rgba(212, 175, 55, 0.25) !important; 
                border-radius: 8px !important; 
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(218, 190, 104, 0.04) !important; 
                padding: 14px 16px !important; 
                box-sizing: border-box !important; 
                border-image: none !important; 
                -moz-border-image: none !important; 
                -webkit-border-image: none !important; 
                margin-bottom: 16px !important; 
            }
            .wrap .main .sidebar .sidebar-bottom, 
            .wrap .main .sidebar .box-bottom, 
            .wrap .main .sidebar.left .container .box-bottom,
            .wrap .main .sidebar.right .container .box-bottom,
            .wrap .main .sidebar.left .sidebar-bottom,
            .wrap .main .sidebar.right .sidebar-bottom,
            .wrap .main .content .content-middle { 
                display: none !important; 
                height: 0 !important; 
                visibility: hidden !important; 
            }
            .wrap .main .sidebar.left .container .box, 
            .wrap .main .sidebar.right .container .box { 
                background: transparent !important; 
                width: 100% !important; 
                margin: 0 !important; 
                padding: 0 !important; 
            }
            #mz-rei-widget { display: block !important; visibility: visible !important; opacity: 1 !important; }

            /* UNIFIED DARK FANTASY HEADERS & TITLES */
            .wrap .main .sidebar.left .container .title, 
            .wrap .main .sidebar.right .container .title, 
            div#sidebarjsz .title, 
            .wrap .main .content .container h1.title, 
            .wrap .main .content .container h2.title, 
            .box-panel .box-panel-title, 
            .shop-categories .title, 
            .market-search .title { 
                background: linear-gradient(135deg, rgba(218, 190, 104, 0.22) 0%, rgba(20, 26, 36, 0.92) 100%) !important; 
                border: 1px solid rgba(212, 175, 55, 0.35) !important; 
                border-left: 4px solid #dabe68 !important; 
                border-radius: 4px !important; 
                font-family: 'Cinzel', serif !important; 
                font-size: 13px !important; 
                font-weight: 700 !important; 
                color: #f3e6c9 !important; 
                text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(218, 190, 104, 0.35) !important; 
                text-transform: uppercase !important; 
                letter-spacing: 1px !important; 
                padding: 8px 12px !important; 
                margin: 6px 0 10px 0 !important; 
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important; 
                width: 100% !important; 
                box-sizing: border-box !important; 
                height: auto !important; 
                line-height: normal !important; 
                border-image: none !important; 
                -moz-border-image: none !important; 
                -webkit-border-image: none !important; 
            }

            /* BUTTONS */
            a.btn, button.btn, input.btn, a.morpheus-popup-btn, .btn-secondary { 
                background: linear-gradient(180deg, #d4af37 0%, #8a6a1c 100%) !important; 
                color: #0b0908 !important; 
                border: 1px solid #fce6a2 !important; 
                border-radius: 4px !important; 
                border-image: none !important; 
                -moz-border-image: none !important; 
                -webkit-border-image: none !important; 
                font-family: 'Cinzel', serif !important; 
                font-weight: 700 !important; 
                text-transform: uppercase !important; 
                letter-spacing: 1px !important; 
                box-shadow: 0 3px 10px rgba(212, 175, 55, 0.35) !important; 
                transition: all 0.2s ease !important; 
                text-decoration: none !important; 
                padding: 6px 14px !important; 
                display: inline-block !important; 
                text-align: center !important; 
            }
            a.btn:hover, button.btn:hover, input.btn:hover, a.morpheus-popup-btn:hover, .btn-secondary:hover { 
                background: linear-gradient(180deg, #f5d77f 0%, #a68128 100%) !important; 
                box-shadow: 0 0 14px rgba(245, 215, 127, 0.6) !important; 
                color: #000 !important; 
                transform: translateY(-1px) !important; 
            }

            /* TABLES & LISTS */
            table.list { border-collapse: collapse !important; border-radius: 6px !important; overflow: hidden !important; width: 100% !important; }
            table.list thead tr th, table.list thead tr { 
                background: linear-gradient(135deg, rgba(218, 190, 104, 0.25) 0%, rgba(20, 26, 36, 0.95) 100%) !important; 
                color: #dabe68 !important; 
                font-family: 'Cinzel', serif !important; 
                text-transform: uppercase !important; 
                border-bottom: 1px solid rgba(218, 190, 104, 0.3) !important; 
                padding: 8px !important; 
            }
            table.list tbody tr td { 
                background: rgba(15, 20, 28, 0.6) !important; 
                border-bottom: 1px solid rgba(218, 190, 104, 0.12) !important; 
                color: #d5cdbe !important; 
                padding: 6px 8px !important; 
            }
            table.list tbody tr:nth-child(2n) td { 
                background: rgba(22, 29, 40, 0.75) !important; 
            }

            /* RANKINGS CARDS */
            .rankings .character, .rankings .guild { 
                background: rgba(15, 20, 28, 0.6) !important; 
                border: 1px solid rgba(218, 190, 104, 0.25) !important; 
                border-radius: 6px !important; 
                padding: 4px !important; 
            }
            .rankings .character .level, .rankings .guild .level { color: #dabe68 !important; }
            .rankings .character .name, .rankings .guild .name { color: #fff !important; }

            /* EVENTOS & SPOTLIGHT */
            #mz-eventos { margin: 20px 0 0 0 !important; width: auto !important; padding: 10px 0 !important; border: none !important; border-image: none !important; background: transparent !important; }
            #mz-eventos .mz-eventos-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
            #mz-eventos .mz-eventos-header h3 { font-family: 'Cinzel', serif !important; color: #dabe68 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: 1px !important; text-shadow: 0 0 10px rgba(218,190,104,0.3) !important; margin: 0 !important; }
            #mz-eventos select, #mz-eventos-filter-slot select { background: rgba(10,8,4,0.9) !important; border: 1px solid rgba(218,190,104,0.4) !important; color: #dabe68 !important; font-family: 'Cinzel', serif !important; font-size: 11px !important; padding: 4px 8px !important; border-radius: 4px !important; }
            .events-spotlight { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: 100% !important; }
            .events-spotlight .event { width: auto !important; float: none !important; margin: 0 !important; }
            .p2 { text-align: center !important; margin-top: 12px !important; }
            .p2 a.btn { background: rgba(14, 19, 28, 0.95) !important; color: #dabe68 !important; border: 1px solid #dabe68 !important; border-radius: 4px !important; padding: 8px 20px !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 1px !important; display: inline-block !important; }
            .p2EVENTOS > div { width: 100% !important; }

            /* PACOTES / SHOP TABLES */
            table.custom, table.custom tr, table.custom tbody { background: transparent !important; }
            table.custom td, table.custom tr td, table.custom tbody tr td { background: rgba(0,0,0,0.5) !important; color: #fff !important; border: 1px solid rgba(218,190,104,0.2) !important; border-radius: 6px !important; padding: 14px 10px !important; text-align: center !important; font-family: 'Cinzel', serif !important; font-size: 12px !important; height: auto !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.4) !important; vertical-align: top !important; }
            table.custom td.true, table.custom tr td.true { background: rgba(14, 19, 28, 0.95) !important; color: #dabe68 !important; font-weight: 700 !important; text-transform: uppercase !important; }
            table.custom td img { max-width: 80px !important; display: block !important; margin: 0 auto 8px auto !important; }
            table.custom td a { background: rgba(14, 19, 28, 0.95) !important; color: #dabe68 !important; border: 1px solid #dabe68 !important; border-image: none !important; border-radius: 4px !important; padding: 6px 14px !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-block !important; }

            /* CREDIT SHOP */
            .credit-shop { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
            .credit-shop li { float: none !important; width: auto !important; padding: 16px 10px !important; background: rgba(0,0,0,0.5) !important; border: 1px solid rgba(218,190,104,0.2) !important; border-radius: 6px !important; box-shadow: inset 0 0 10px rgba(0,0,0,0.4) !important; text-align: center !important; color: #fff !important; border-bottom: none !important; }
            .credit-shop li:nth-child(3n) { padding-right: 10px !important; }
            .credit-shop .title { font-family: 'Cinzel', serif !important; font-size: 12px !important; font-weight: 700 !important; color: #fff !important; text-transform: uppercase !important; margin: 8px 0 !important; }
            .credit-shop .price { font-family: 'Cinzel', serif !important; font-size: 14px !important; font-weight: 700 !important; color: #dabe68 !important; margin: 8px 0 !important; }
            .credit-shop .desc { background: rgba(0,0,0,0.3) !important; text-align: center !important; height: auto !important; padding: 8px !important; color: #ccc !important; border-radius: 4px !important; }
            .ajax-container > table td img, .ajax-container table:not(.list) td img, .credit-shop img, table.custom td img { width: 100px !important; height: auto !important; min-width: 100px !important; min-height: 100px !important; max-width: 150px !important; display: inline-block !important; margin: 55px 0 40px 0 !important; object-fit: contain !important; transform: scale(2.2) !important; transform-origin: center center !important; }
            .credit-shop a { background: rgba(14, 19, 28, 0.95) !important; color: #dabe68 !important; border: 1px solid #dabe68 !important; border-image: none !important; border-radius: 4px !important; padding: 6px 14px !important; font-family: 'Cinzel', serif !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-block !important; margin-top: 6px !important; }
            .ajax-container > table, .ajax-container table { width: 100% !important; border-collapse: separate !important; border-spacing: 6px !important; background: transparent !important; }
            .ajax-container > table td, .ajax-container table:not(.list) td { background: rgba(0,0,0,0.5) !important; color: #fff !important; border: 1px solid rgba(218,190,104,0.2) !important; border-radius: 6px !important; padding: 14px 10px !important; text-align: center !important; font-family: 'Cinzel', serif !important; font-size: 12px !important; height: auto !important; vertical-align: top !important; }

            /* M1: responsividade global e desempenho em dispositivos moveis */
            @media (max-width: 768px), (hover: none) and (pointer: coarse) {
                body {
                    background-attachment: scroll !important;
                }
            }

            @media (max-width: 480px) {
                html body .footer {
                    padding-right: 8px !important;
                    padding-left: 8px !important;
                }
                html body .mz-footer-nav {
                    display: grid !important;
                    grid-template-columns: minmax(0, 1fr) !important;
                    gap: 0 !important;
                    width: 100% !important;
                    max-width: 420px !important;
                    padding: 10px 14px !important;
                    box-sizing: border-box !important;
                    backdrop-filter: none !important;
                    -webkit-backdrop-filter: none !important;
                }
                html body .mz-footer-nav .mz-foot-col,
                html body .mz-footer-nav .mz-foot-col:nth-child(1),
                html body .mz-footer-nav .mz-foot-col:nth-child(2),
                html body .mz-footer-nav .mz-foot-col:nth-child(3) {
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 12px 0 !important;
                    border-bottom: 1px solid rgba(218, 190, 104, 0.16) !important;
                    box-sizing: border-box !important;
                }
                html body .mz-footer-nav .mz-foot-col:last-child {
                    border-bottom: 0 !important;
                }
                html body .mz-footer-nav ul,
                html body .mz-footer-nav li {
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 0 !important;
                }
                html body .mz-footer-nav a {
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    min-height: 48px !important;
                    padding: 8px 12px !important;
                    box-sizing: border-box !important;
                    line-height: 1.35 !important;
                }
                html body .footer .mz-seo-about,
                html body .footer .mz-seo-keywords,
                html body .footer .mz-footer-copyright {
                    width: 100% !important;
                    max-width: 100% !important;
                    padding-right: 12px !important;
                    padding-left: 12px !important;
                    box-sizing: border-box !important;
                }
                html body .footer .mz-seo-about p,
                html body .footer .mz-footer-copyright p,
                html body .footer #classificacaojscallzer {
                    width: 100% !important;
                    max-width: 100% !important;
                    margin-right: auto !important;
                    margin-left: auto !important;
                    box-sizing: border-box !important;
                    white-space: normal !important;
                    overflow-wrap: break-word !important;
                    word-break: normal !important;
                }
                html body .footer .mz-footer-copyright p {
                    letter-spacing: 0.5px !important;
                }
            }