/* ==========================================================================
   MCUniverse — overrides.css
   Targeted fixes that override style.css without editing it.
   Load AFTER style.css and hud.css.
   ========================================================================== */

/* ── 1. KILL the white glare/shimmer from body::after and .tier-netherite::after
        on the INDEX page only. We replace it with the canvas aurora.
   ──────────────────────────────────────────────────────────────────────────── */
body.page-index::after {
    display: none !important;
}
/* Netherite shimmer on premium cards — keep it BUT contain it so it
   never escapes the card boundaries and shifts page layout            */
.hud-card.tier-netherite::after,
.premium-card.tier-netherite::after,
.server-card.tier-netherite::after {
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    /* Dim to purple instead of white glare */
    background: linear-gradient(
        45deg,
        transparent 42%,
        rgba(180,80,220,0.07) 50%,
        transparent 58%
    ) !important;
    animation: mcu-shimmer-purple 5s ease-in-out infinite !important;
    overflow: hidden;
}
@keyframes mcu-shimmer-purple {
    0%   { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(200%) rotate(25deg); }
}

/* ── 2. HEADER — content clips behind it correctly (overflow hidden on header) */
.site-header {
    overflow: hidden;
    /* Subtle bottom blur mask so things don't hard-clip */
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* ── 3. PAGE OFFSET — ensure content clears the fixed header */
main {
    padding-top: calc(var(--header-h, 56px) + 40px) !important;
    display: block;
}

/* ── 4. AUTH MODAL — larger, colored, boxed close button with glow on hover */
#auth-modal-close {
    top: 0.9rem !important;
    right: 0.9rem !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    border: 1px solid rgba(255,107,53,0.35) !important;
    border-radius: 3px !important;
    color: var(--orange-ember) !important;
    background: rgba(255,107,53,0.06) !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}
#auth-modal-close:hover {
    background: var(--orange-ember) !important;
    color: var(--black-pure) !important;
    border-color: var(--orange-ember) !important;
    box-shadow: 0 0 14px rgba(255,107,53,0.45) !important;
}

/* ── 5. VOTE BUTTON — prominent orange, moved out of cramped srow-right corner */
.vote-btn {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 11px !important;
    border-radius: 2px;
    border: 1px solid rgba(255,107,53,0.55) !important;
    background: rgba(255,107,53,0.07) !important;
    color: var(--orange-ember) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    align-self: flex-start; /* stop it sticking to right edge */
}
.vote-btn:hover {
    border-color: var(--orange-ember) !important;
    background: rgba(255,107,53,0.18) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(255,107,53,0.35) !important;
}
.vote-btn.voted {
    border-color: #00ff88 !important;
    color: #00ff88 !important;
    background: rgba(0,255,136,0.06) !important;
    box-shadow: none !important;
    cursor: default;
}



/* ── 6. PREMIUM CARD — vote button overlay at top-center of each pcard */
.pcard { position: relative; }
.pcard-vote-btn {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 2px;
    border: 1px solid rgba(255,107,53,0.55);
    background: rgba(0,0,0,0.65);
    color: var(--orange-ember);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}
.pcard-vote-btn:hover {
    background: rgba(255,107,53,0.85);
    color: #000;
    box-shadow: 0 0 10px rgba(255,107,53,0.5);
}
.pcard-vote-btn.voted {
    border-color: #00ff88;
    color: #00ff88;
    background: rgba(0,0,0,0.65);
}

/* ── 7. CATEGORY TAGS — toggle style */
.cat-tag[data-filter-tag] {
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.cat-tag[data-filter-tag].active {
    border-color: var(--orange-ember) !important;
    color: var(--orange-ember) !important;
    background: rgba(255,107,53,0.1) !important;
    box-shadow: 0 0 8px rgba(255,107,53,0.2);
}

/* ── 8. TOP-SERVERS sidebar widget — ensure it's always visible */
.widget-rising {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Make sure sidebar itself isn't affected by scroll-fade opacity */
.sidebar > * {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* AI trigger position comes from style.css — no override needed */

/* srow layout handled directly in index.php */