/* FullMoon MMO - Gothic Game Frame
 * Inspired by dark RPG game UIs like Bloodmoon.
 * Provides ornamental stone/metal borders around the game viewport.
 */

/* =====================================================
   GOTHIC FRAME — wraps the entire game area
   ===================================================== */

.gothic-frame {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-gothic-frame, 350);
    overflow: hidden;
}

/* Top ornamental border — hidden by default;
   the .header (z-fixed:300) renders the actual top bar.
   This element exists only as a fallback if header is absent. */
.gothic-frame__top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    /* Hidden: the .header already occupies this exact space at a higher z-index.
       Rendering both causes double border/gradient overlap. */
    display: none;
}

/* Bottom ornamental border — houses the activity/energy status bar.
   Fully opaque so scrolling content never bleeds through. */
.gothic-frame__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background:
        linear-gradient(0deg,
            #080607 0%,
            #110e10 30%,
            #1a1518 60%,
            #1e181c 100%);
    border-top: 2px solid #4a3a42;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(212,175,55,0.10),
        0 -6px 24px rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 40px;
}

/* Gold accent line */
.gothic-frame__bottom::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 2%,
        rgba(212,175,55,0.15) 15%,
        rgba(212,175,55,0.35) 50%,
        rgba(212,175,55,0.15) 85%,
        transparent 98%);
}

/* Subtle upper fog to soften the hard edge */
.gothic-frame__bottom::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
    background: linear-gradient(0deg, #1e181c 0%, transparent 100%);
    pointer-events: none;
}

/* Left ornamental border */
.gothic-frame__left {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 14px;
    background:
        linear-gradient(90deg,
            #1a1518 0%,
            #2a2028 50%,
            rgba(26,21,24,0) 100%);
    border-right: 1px solid #3d2f35;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
}

/* Right ornamental border */
.gothic-frame__right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 14px;
    background:
        linear-gradient(270deg,
            #1a1518 0%,
            #2a2028 50%,
            rgba(26,21,24,0) 100%);
    border-left: 1px solid #3d2f35;
    box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

/* Corner ornaments (stone gargoyle/skull accents) */
.gothic-frame__corner {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 1;
}

.gothic-frame__corner--tl {
    top: 0;
    left: 0;
    background: radial-gradient(circle at 100% 100%, rgba(60,45,50,0.9) 0%, rgba(30,22,26,0.8) 40%, transparent 70%);
    border-bottom-right-radius: 50%;
}

.gothic-frame__corner--tr {
    top: 0;
    right: 0;
    background: radial-gradient(circle at 0% 100%, rgba(60,45,50,0.9) 0%, rgba(30,22,26,0.8) 40%, transparent 70%);
    border-bottom-left-radius: 50%;
}

.gothic-frame__corner--bl {
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 100% 0%, rgba(60,45,50,0.9) 0%, rgba(30,22,26,0.8) 40%, transparent 70%);
    border-top-right-radius: 50%;
}

.gothic-frame__corner--br {
    bottom: 0;
    right: 0;
    background: radial-gradient(circle at 0% 0%, rgba(60,45,50,0.9) 0%, rgba(30,22,26,0.8) 40%, transparent 70%);
    border-top-left-radius: 50%;
}

/* Corner ornament symbols via pseudo-elements */
.gothic-frame__corner::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%);
}

.gothic-frame__corner--tl::after { top: 8px; left: 8px; }
.gothic-frame__corner--tr::after { top: 8px; right: 8px; }
.gothic-frame__corner--bl::after { bottom: 8px; left: 8px; }
.gothic-frame__corner--br::after { bottom: 8px; right: 8px; }

/* Top corners sit behind header (which is z-fixed:300, above frame z:250),
   so hide them to avoid peeking out at edges */
.gothic-frame__corner--tl,
.gothic-frame__corner--tr {
    display: none;
}

/* Top center logo/ornament area — disabled.
   The .header component handles the top bar content.
   Rendering this inside gothic-frame would create a duplicate layer. */
.gothic-frame__logo {
    display: none;
}

/* Top navigation links — disabled.
   Sidebar navbar provides all navigation in landscape mode.
   Having pointer-events:auto here inside pointer-events:none frame
   would intercept clicks meant for the header. */
.gothic-frame__topnav {
    display: none;
}

/* =====================================================
   LANDSCAPE MODE — frame with sidebar
   The frame sits BEHIND header (z:300) and navbar (z:300)
   at z:250, providing background chrome only.
   ===================================================== */
@media (min-width: 768px) {
    /* Left border: sits behind navbar (navbar starts at left:14px, same width) */
    body.hud-layout-landscape .gothic-frame__left {
        width: 14px;
    }

    body.hud-layout-landscape .gothic-frame__bottom {
        left: 0;
    }
}

/* =====================================================
   MOBILE PORTRAIT — hide all frame elements
   ===================================================== */
@media (max-width: 767px) {
    .gothic-frame__left,
    .gothic-frame__right {
        width: 0;
        border: none;
        box-shadow: none;
    }

    .gothic-frame__corner {
        display: none;
    }

    .gothic-frame__bottom {
        height: 0;
        border: none;
        box-shadow: none;
    }

    .gothic-frame__bottom::before {
        display: none;
    }

    .gothic-hp-bar {
        display: none;
    }
}