/* ==========================================================
   THEMES v8 — FINAL ELITE EDITION
   7 Themes – Engraved FX – UltraGlass Popups – Premium Hover
========================================================== */


/* ==========================================================
   BASE VARIABLES (safe defaults)
========================================================== */
body {
    --bg: #000;
    --panel: rgba(255,255,255,0.05);
    --text: #ddd;

    --accent: #fff;
    --accent2: #fff;

    --border: rgba(255,255,255,0.25);
    --glow: rgba(255,255,255,0.25);
    --fx-glow: 0 0 18px var(--glow);
}


/* ==========================================================
   NECRO — Blood Occult (Testo inciso, occult dark)
========================================================== */
body.theme-mirc-necro {
    --bg: #050304;
    --panel: rgba(25,0,0,0.55);
    --text: #d6c6c9; /* niente rosa, tono osseo */

    --accent: #ff0028;
    --accent2: #ff2f44;

    --border: #6a0010;
    --glow: rgba(255,0,40,0.55);
    --fx-glow: 0 0 18px var(--glow);
}

/* Testo inciso (solo NECRO) */
body.theme-mirc-necro h1,
body.theme-mirc-necro h2,
body.theme-mirc-necro h3 {
    color: #ff0028;
    text-shadow:
        0 0 12px rgba(255,0,40,0.35),
        0 0 2px #000,
        -1px -1px 0 #000,
        1px 1px 0 #400;
}

body.theme-mirc-necro p {
    text-shadow:
        0 0 2px #000,
        -1px -1px 0 #000,
        1px 1px 0 #200;
}

body.theme-mirc-necro .mirc-header {
    background: rgba(20,0,0,0.6);
    border-bottom: 1px solid var(--border);
}

body.theme-mirc-necro .nav-sub {
    background: rgba(30,0,0,0.92);
    border-color: var(--border);
}

body.theme-mirc-necro #mobile-menu {
    background: rgba(20,0,0,0.95);
}

/* ---------------------------------------------------------- */


/* ==========================================================
   DARK — Silver Neon
========================================================== */
body.theme-mirc-dark {
    --bg: #050505;
    --panel: rgba(25,25,25,0.65);
    --text: #e0e0e0;

    --accent: #cfcfcf;
    --accent2: #ffffff;

    --border: rgba(180,180,180,0.35);
    --glow: rgba(200,200,200,0.35);
    --fx-glow: 0 0 22px var(--glow);
}


/* ==========================================================
   LIGHT — AUREA GLASS (Warm Glassmorphism)
   Single block, safe, readable, premium
========================================================== */
body.theme-mirc-light {
    --bg: #f2efe8;
    --panel: rgba(255,255,255,0.65);
    --panel-strong: rgba(255,255,255,0.78);

    --text: #2a2722;
    --muted: #6f6a60;

    --accent: #b88b22;
    --accent2: #d8b24a;

    --border: rgba(184,139,34,0.35);

    --glow: rgba(255,255,255,0.6);
    --fx-glow: none;
}

/* TITLES */
body.theme-mirc-light h1,
body.theme-mirc-light h2,
body.theme-mirc-light h3,
body.theme-mirc-light .section-title {
    position: relative;
    z-index: 3;
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0.3px;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.85),
        0 -1px 0 rgba(0,0,0,0.25);
}

/* SECTIONS / HERO */
body.theme-mirc-light .section,
body.theme-mirc-light .hero,
body.theme-mirc-light .panel {
    background: var(--panel);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.75),
        0 18px 40px rgba(0,0,0,0.18);
}

/* DIVIDERS */
body.theme-mirc-light .section::before,
body.theme-mirc-light .section::after {
    content: "";
    display: block;
    height: 6px;
    margin: 18px 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.75),
        rgba(184,139,34,0.45),
        rgba(255,255,255,0.65)
    );
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 6px 14px rgba(0,0,0,0.25);
    pointer-events: none;
    position: relative;
    z-index: 1;
}

/* CARDS */
body.theme-mirc-light .card {
    background: var(--panel-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        0 10px 26px rgba(0,0,0,0.22);
}

body.theme-mirc-light .card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 18px 38px rgba(0,0,0,0.3);
}

/* ==========================================================
   FIX — INNER GRAY CARDS → IVORY GOLD
========================================================== */
body.theme-mirc-light .card p,
body.theme-mirc-light .card .box,
body.theme-mirc-light .card .content {
    background: linear-gradient(
        180deg,
        #fffdfa 0%,
        #f3efe6 100%
    );

    border: 1px solid rgba(184,139,34,0.45);
    border-radius: 10px;

    color: #2a2722;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 4px 10px rgba(0,0,0,0.15);
}

.section-title {
    text-shadow:
        0 1px 0 rgba(255,255,255,0.9),
        0 -1px 0 rgba(0,0,0,0.25);
}
/* ==========================================================
   SECTION DIVIDERS — GOLD SAFE
========================================================== */
body.theme-mirc-light .section {
    position: relative;
}

body.theme-mirc-light .section::before,
body.theme-mirc-light .section::after {
    content: "";
    display: block;

    height: 6px;
    margin: 16px 0;

    background: linear-gradient(
        180deg,
        #fff6dd 0%,
        #e8cf86 40%,
        #b88b22 50%,
        #e3c97a 60%,
        #fff1c8 100%
    );

    border-radius: 8px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        0 6px 14px rgba(0,0,0,0.18);

    pointer-events: none;
    position: relative;
    z-index: 1; /* SEMPRE sotto al testo */
}

/* TITOLI SEMPRE SOPRA */
body.theme-mirc-light .section-title,
body.theme-mirc-light h1,
body.theme-mirc-light h2 {
    position: relative;
    z-index: 3;
}


/* TEXT */
body.theme-mirc-light p {
    color: var(--text);
}

/* LINKS */
body.theme-mirc-light a {
    color: var(--accent);
    font-weight: 600;
}
body.theme-mirc-light a:hover {
    color: var(--accent2);
}

/* POPUPS */
body.theme-mirc-light .mirc-popup {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 24px 50px rgba(0,0,0,0.35);
}

/* FOOTER */
body.theme-mirc-light .site-footer {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.45);
}


/* ==========================================================
   CRYSTAL — Frosted Turquoise
========================================================== */
body.theme-mirc-crystal {
    --bg: #0e2a33;
    --panel: rgba(255,255,255,0.10);
    --text: #b9eaff;

    --accent: #4bd9ff;
    --accent2: #8ff0ff;

    --border: rgba(120,200,255,0.45);
    --glow: rgba(90,180,255,0.45);
    --fx-glow: 0 0 22px var(--glow);
}


/* ==========================================================
   HELLFIRE — Infernal Flame
========================================================== */
body.theme-mirc-hellfire {
    --bg: #150000;
    --panel: rgba(40,0,0,0.55);
    --text: #ffe3c0;

    --accent: #ff4500;
    --accent2: #ffdd00;

    --border: #c22800;
    --glow: rgba(255,60,0,0.55);
    --fx-glow: 0 0 22px var(--glow);
}


/* ==========================================================
   XPOP — Purple Neon Glass
========================================================== */
body.theme-mirc-xpop {
    --bg: #0b0312;

    --panel: rgba(50,20,80,0.28);
    --panel-strong: rgba(65,25,100,0.40);

    --text: #eedcff;

    --accent: #c57aff;
    --accent2: #e58bff;

    --border: rgba(180,120,255,0.55);
    --glow: rgba(200,140,255,0.55);
    --fx-glow: 0 0 22px var(--glow);
}



/* ==========================================================
   UNIVERSAL GLASS PANELS (Hover A)
========================================================== */
.section,
.text-block,
.card,
.warning-box {
    padding: 14px 18px;
    border-radius: 12px;

    background: var(--panel);
    border: 1px solid var(--border);
    backdrop-filter: blur(12px);

    transition: .30s ease;
}

.section:hover,
.text-block:hover,
.card:hover {
    border-color: var(--accent2);
    box-shadow: 0 0 24px var(--accent2);
    transform: translateY(-6px);
}



/* ==========================================================
   ULTRA GLASS POPUP (Mode A)
========================================================== */
.mirc-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(.92);
    opacity: 0;
    visibility: hidden;

    min-width: 300px;
    max-width: 480px;

    padding: 0;
    border-radius: 14px;

    background: var(--panel);
    border: 1px solid var(--border);

    backdrop-filter: blur(16px);
    box-shadow: 0 0 24px var(--glow);

    transition:
        opacity .28s ease,
        transform .28s ease;

    z-index: var(--z-popup);
}

.mirc-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    animation: popupEntry .32s ease-out;
}

/* Header */
.mirc-popup h2 {
    margin: 0;
    padding: 16px 20px;
    font-size: 1.35rem;

    color: var(--accent);
    border-bottom: 1px solid var(--border);

    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);

    text-shadow: 0 0 10px var(--accent2);
}

/* Body */
.mirc-popup p {
    padding: 18px;
    opacity: .92;
}

/* Close btn */
.mirc-popup .popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.5rem;

    color: var(--accent);
    cursor: pointer;

    transition: .25s ease;
}
.mirc-popup .popup-close:hover {
    transform: scale(1.28);
    filter: brightness(1.25);
}

/* Overlay */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;
    transition: .25s ease;

    z-index: calc(var(--z-popup) - 1);
}

.popup-overlay.open {
    opacity: 1;
    visibility: visible;
}

@keyframes popupEntry {
    from { opacity: 0; transform: translate(-50%, -42%) scale(.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==========================================================
   POPUP — THEME SIGNATURES (integrated, safe)
========================================================== */

/* NECRO — rituale inciso */
body.theme-mirc-necro .mirc-popup {
    background:
        linear-gradient(
            180deg,
            rgba(35,0,0,0.92),
            rgba(15,0,0,0.88)
        );
    box-shadow:
        inset 0 0 22px rgba(255,0,40,0.35),
        0 0 34px rgba(255,0,40,0.55);
}

/* DARK — vetro profondo */
body.theme-mirc-dark .mirc-popup {
    background: rgba(18,18,18,0.92);
    box-shadow:
        0 0 34px rgba(255,255,255,0.10),
        inset 0 0 18px rgba(255,255,255,0.08);
}

/* LIGHT — pannello premium */
body.theme-mirc-light .mirc-popup {
    background: rgba(255,255,255,0.95);
    box-shadow:
        0 10px 34px rgba(0,0,0,0.18),
        inset 0 0 12px rgba(255,220,120,0.45);
}

/* CRYSTAL — vetro ghiaccio */
body.theme-mirc-crystal .mirc-popup {
    background: rgba(255,255,255,0.16);
    box-shadow:
        0 0 38px rgba(90,180,255,0.45),
        inset 0 0 20px rgba(180,240,255,0.30);
}

/* HELLFIRE — fornace */
body.theme-mirc-hellfire .mirc-popup {
    background: rgba(55,0,0,0.88);
    box-shadow:
        0 0 40px rgba(255,80,0,0.65),
        inset 0 0 24px rgba(255,140,0,0.40);
}

/* XPOP — neon glass */
body.theme-mirc-xpop .mirc-popup {
    background: rgba(65,25,100,0.48);
    box-shadow:
        0 0 44px rgba(200,120,255,0.65),
        inset 0 0 22px rgba(255,180,255,0.35);
}

/* ==========================================================
   FOOTER — SOFT GLASS (safe mode)
========================================================== */

.site-footer {
    background: var(--panel);
    border-top: 1px solid var(--border);

    backdrop-filter: blur(12px);
    box-shadow:
        0 -8px 28px rgba(0,0,0,0.25),
        inset 0 0 14px rgba(255,255,255,0.05);

    transition: .3s ease;
}

/* Hover molto discreto */
.site-footer:hover {
    box-shadow:
        0 -10px 36px var(--glow),
        inset 0 0 18px rgba(255,255,255,0.08);
}

/* ==========================================================
   RAINBOW — MENU VARIANT B (High Contrast)
========================================================== */

body.theme-mirc-rainbow .main-nav a,
body.theme-mirc-rainbow .menu-trigger,
body.theme-mirc-rainbow .menu-sub a {
    color: #fff;
    text-shadow:
        0 0 6px rgba(255,255,255,.85),
        0 0 12px rgba(255,255,255,.45);
}

body.theme-mirc-rainbow .main-nav a:hover,
body.theme-mirc-rainbow .menu-sub a:hover,
body.theme-mirc-rainbow .main-nav a.active {
    color: #000;
    background: linear-gradient(
        90deg,
        #ff004c,
        #ffcc00,
        #00ffcc,
        #3399ff,
        #cc66ff
    );

    background-size: 200% 200%;
    animation: rainbowFlow 3s linear infinite;

    border-radius: 6px;
    padding: 6px 10px;

    box-shadow:
        0 0 12px rgba(255,255,255,.75),
        inset 0 0 6px rgba(0,0,0,.35);
}

@keyframes rainbowFlow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
}

body.theme-mirc-rainbow .menu-sub {
    background: rgba(0,0,0,.85);
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(14px);
}

/* ==========================================================
   RAINBOW — MOBILE MENU VARIANT B (High Contrast)
========================================================== */

body.theme-mirc-rainbow #mobileMenu,
body.theme-mirc-rainbow .mobile-menu {
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(16px);
}

/* Sezioni (Scripts, Addons, ecc.) */
body.theme-mirc-rainbow .mobile-list > li > span {
    color: #fff;
    font-weight: 700;
    text-shadow:
        0 0 6px rgba(255,255,255,.9),
        0 0 12px rgba(255,255,255,.45);
}

/* Voci menu */
body.theme-mirc-rainbow .mobile-list a {
    display: block;
    padding: 10px 14px;
    margin: 4px 0;

    color: #fff;
    border-radius: 8px;

    text-shadow:
        0 0 6px rgba(255,255,255,.75);

    transition: .25s ease;
}

/* Hover / Active */
body.theme-mirc-rainbow .mobile-list a:hover,
body.theme-mirc-rainbow .mobile-list a.active {
    color: #000;

    background: linear-gradient(
        90deg,
        #ff004c,
        #ffcc00,
        #00ffcc,
        #3399ff,
        #cc66ff
    );
    background-size: 200% 200%;
    animation: rainbowFlow 3s linear infinite;

    box-shadow:
        0 0 14px rgba(255,255,255,.75),
        inset 0 0 6px rgba(0,0,0,.35);
}

/* Divider line più visibile */
body.theme-mirc-rainbow .mobile-list ul li {
    border-bottom: 1px solid rgba(255,255,255,.18);
}

/* Lingua (IT / EN) */
body.theme-mirc-rainbow .mobile-lang a {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
}

body.theme-mirc-rainbow .mobile-lang a.active {
    color: #000;
    background: linear-gradient(
        90deg,
        #ff004c,
        #ffcc00,
        #00ffcc,
        #3399ff,
        #cc66ff
    );
    box-shadow: 0 0 12px rgba(255,255,255,.85);
}