/* ============================================================
   Emberion MuOnline — responsive.css
   1. Font unification           — Cinzel sitewide
   2. Panel opacity cohesion     — warm rgba(8,6,3) at graduated opacity
   3. Mobile layout overrides
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   INLINE NOTE / ALERT BOXES  (.s_note .e_note .i_note .w_note)
   style.css uses generic green/red/blue/orange backgrounds.
   Override all four to match the amber dark-fantasy theme:
   same glassmorphism base, accent colour changes per type.
   ══════════════════════════════════════════════════════════ */

/* ── Shared base reset ── */
.i_note, .s_note, .w_note, .e_note {
    background-color: rgba(8, 6, 3, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(212, 168, 67, 0.22) !important;
    border-left: 3px solid #d4a843 !important;
    border-radius: var(--radius, 4px) !important;
    padding: 12px 16px 12px 44px !important;
    background-size: 18px 18px !important;
    background-position: 14px center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 0 20px rgba(0,0,0,0.50), inset 0 1px 0 rgba(212,168,67,0.06) !important;
    font-family: 'Cinzel', 'Georgia', serif !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* ── Success — amber gold ── */
.s_note {
    color: #c8a96e !important;
    border-left-color: #d4a843 !important;
    border-color: rgba(212, 168, 67, 0.30) !important;
    text-shadow: 0 0 12px rgba(212, 168, 67, 0.25) !important;
    box-shadow: 0 0 22px rgba(212, 168, 67, 0.10), 0 4px 16px rgba(0,0,0,0.60),
                inset 0 1px 0 rgba(212, 168, 67, 0.07) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d4a843'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ── Error — deep red ── */
.e_note {
    color: #e07070 !important;
    border-left-color: #c04848 !important;
    border-color: rgba(200, 60, 60, 0.30) !important;
    text-shadow: 0 0 12px rgba(200, 60, 60, 0.20) !important;
    box-shadow: 0 0 22px rgba(200, 60, 60, 0.10), 0 4px 16px rgba(0,0,0,0.60),
                inset 0 1px 0 rgba(200, 60, 60, 0.06) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c04848'%3E%3Cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ── Warning — amber orange ── */
.w_note {
    color: #c8a040 !important;
    border-left-color: #b07820 !important;
    border-color: rgba(180, 130, 30, 0.30) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23b07820'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ── Info — muted steel blue (kept readable against warm bg) ── */
.i_note {
    color: #90b8d8 !important;
    border-left-color: #4a80b8 !important;
    border-color: rgba(74, 128, 184, 0.28) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234a80b8'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ══════════════════════════════════════════════════════════
   FONT UNIFICATION — Cinzel across entire site
   style.css uses Exo 2 for form inputs and PT Sans Narrow /
   Verdana in notice boxes and jQuery UI widgets. Override
   all of them here so every character uses Cinzel.
   ══════════════════════════════════════════════════════════ */

/* ── Define the missing --font-main variable ── */
:root {
    --font-main: 'Cinzel', 'Georgia', serif;
}

/* ── Form inputs, selects, textareas ── */
/* Cinzel has no true lowercase — use Exo 2 for data entry so
   typed characters render correctly in mixed case.            */
input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select,
select option {
    font-family: 'Exo 2', 'Segoe UI', Arial, sans-serif !important;
}

/* ── jQuery UI widgets (.ui-widget overrides Verdana/Arial) ── */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: 'Cinzel', 'Georgia', serif !important;
}

/* ── Notice / message boxes body text ── */
/* notice.css sets PT Sans Narrow (not loaded) -> system font   */
div.message-box {
    font-family: 'Cinzel', 'Georgia', serif !important;
}

/* ══════════════════════════════════════════════════════════
   PANEL OPACITY COHESION
   Goal: every layer of the page uses the same warm near-black
   base (rgba 8,6,3) at graduated opacities so they stack
   visually rather than fighting each other. The beautiful
   background art bleeds through at each level.

   Layer hierarchy (back → front):
     body background image         — 25 % (set by style.css)
     #page-wrapper outer shell      — 0.38  (lightest)
     .box-style1/2/4 content panels — 0.58  (mid)
     inner cards / item grids       — 0.65  (darkest card layer)
   ══════════════════════════════════════════════════════════ */

/* ── Navbar — was cold rgba(15,15,28) blue gradient ── */
/* Sits above the page; slightly more opaque than the outer    */
/* shell so nav links stay readable, but same warm tone.       */
#menu-wrapper {
    background: linear-gradient(180deg,
        rgba(12, 8,  3, 0.55) 0%,
        rgba(10, 7,  3, 0.52) 55%,
        rgba(8,  6,  3, 0.48) 100%) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(212, 168, 67, 0.28) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40) !important;
}

/* ── Outer page shell — was cold rgba(20,20,32,0.52) ── */
#page-wrapper,
#page-bgtop,
#page-bgbtm {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.03) 0%,
            rgba(255,255,255,0.01) 60px,
            transparent 180px),
        rgba(8, 6, 3, 0.38) !important;
    backdrop-filter: blur(6px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.2) !important;
    border-color: rgba(212, 168, 67, 0.25) !important;
    border-top-color: rgba(212, 168, 67, 0.45) !important;
}

/* ── Main content boxes (box-style1 / 2 / 4) ── */
/* Reduced from 0.72 → 0.58 so backdrop blur actually shows */
.box-style1,
.box-style2,
.box-style4 {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.03) 0%,
            rgba(255,255,255,0.01) 60px,
            transparent 120px),
        rgba(8, 6, 3, 0.58) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    border-color: rgba(212, 168, 67, 0.20) !important;
    border-top-color: rgba(212, 168, 67, 0.42) !important;
}

/* ── Realm status boxes — was cold rgba(18,18,30,0.58) ── */
/* Brought into the warm palette, slightly lighter than panels */
.realm-box {
    background: rgba(8, 6, 3, 0.45) !important;
    border-color: rgba(212, 168, 67, 0.22) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.realm-box:hover {
    background: rgba(14, 10, 4, 0.58) !important;
    border-color: rgba(212, 168, 67, 0.45) !important;
}
.realm-box.realm-main { border-color: rgba(212, 168, 67, 0.30) !important; }
.realm-box.realm-vip  { border-color: rgba(139, 92, 246, 0.30) !important; }

/* ── Shop item card backgrounds ── */
.each_item .item_bg {
    background: rgba(8, 6, 3, 0.65) !important;
}

/* ── Shop item purchase panel (right side) ── */
#item_buy_right {
    background: rgba(8, 6, 3, 0.65) !important;
}

/* ── Shop item image well (keeps the item_bg.png sprite) ── */
#item_image_bg {
    background-color: rgba(8, 6, 3, 0.65) !important;
}

/* ── Donation / payment method buttons ── */
.payment-method-button {
    background: rgba(8, 6, 3, 0.65) !important;
}

/* ── Market / auction inventory grid ── */
.inv {
    background: rgba(8, 6, 3, 0.65) !important;
}

/* ── 1. Kill the 1000px body floor ──────────────────────────
   style.css sets  body { min-width: 1000px }  which prevents
   the browser from ever rendering narrower than 1000 px even
   on a phone. Override it for every mobile/tablet viewport.   */
@media (max-width: 1024px) {
    body {
        min-width: 0 !important;
        overflow-x: hidden;
    }
    html {
        overflow-x: hidden;
    }
}

/* ── 2. Wrapper/page containers ─────────────────────────────
   Ensure all top-level wrappers respect the viewport width.  */
@media (max-width: 768px) {
    #wrapper,
    #wrapper-bgtop,
    #wrapper-bgbtm,
    #page-wrapper,
    #page-bgtop,
    #page-bgbtm,
    #page,
    .container {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Banner images inside the rotating banner */
    #banner img {
        width: 100%;
        height: auto;
    }

    /* Tables inside any box scroll horizontally instead of
       breaking the layout                                      */
    .box-style1 table,
    .box-style2 table,
    .box-style4 table,
    #content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Market / shop item grids wrap instead of overflowing   */
    .items-grid,
    .shop-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Login form in sidebar always fills its container        */
    #login_form {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Avatar upload area scales on mobile                     */
    .avatar-upload-wrap {
        margin: 0 auto;
    }

    /* Hero banner responsive tweaks                           */
    .abn-outer,
    .abn {
        border-radius: 0;
    }
    .abn-content {
        padding: 20px 16px;
    }
    .abn-title {
        letter-spacing: 0.05em;
    }
    .abn-corner {
        width: 40px;
        height: 40px;
    }
    .abn-corner__h { width: 40px; }
    .abn-corner__v { height: 40px; }

    /* Notice / popup boxes stay on screen                     */
    #notifier-box {
        right: 8px;
        left: 8px;
    }
    div.message-box {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ── 3. Small phones (≤480px) ───────────────────────────────  */
@media (max-width: 480px) {
    .abn-content {
        padding: 16px 12px;
    }
    .abn-subtitle {
        letter-spacing: 0.2em;
    }
}