/* FullMoon MMO - Gothic Header
 * Replaces the flat website header with a game-appropriate ornamental bar.
 * Landscape mode: integrated with the stone frame.
 */

/* =====================================================
   LANDSCAPE GOTHIC HEADER
   ===================================================== */
@media (min-width: 768px) {
    body.hud-layout-landscape .header {
        left: 0;
        transform: none;
        max-width: none;
        width: 100%;
        height: 56px;
        padding: 0 20px 0 calc(14px + 170px + 16px);
        background:
            linear-gradient(180deg,
                rgba(26,21,24,0.98) 0%,
                rgba(18,12,16,0.97) 60%,
                rgba(12,8,10,0.95) 100%);
        border-bottom: 2px solid #3d2f35;
        box-shadow:
            inset 0 -1px 0 rgba(212,175,55,0.08),
            0 4px 20px rgba(0,0,0,0.6);
        grid-template-columns: auto 1fr auto;
        gap: 16px;
    }

    /* Gold accent line at bottom */
    body.hud-layout-landscape .header::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(212,175,55,0.2) 30%, rgba(212,175,55,0.3) 50%, rgba(212,175,55,0.2) 70%, transparent);
    }

    /* Player info — avatar and back button hidden in landscape.
       Only name+level remain as a clickable link to profile. */
    body.hud-layout-landscape .header-player {
        gap: 8px;
        align-items: center;
    }

    body.hud-layout-landscape .header-player__avatar {
        display: none;
    }

    body.hud-layout-landscape .header-back-compact {
        display: none;
    }

    body.hud-layout-landscape .header-player__name {
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-size: 15px;
        letter-spacing: 0.06em;
        color: #d4af37;
        max-width: 180px;
    }

    body.hud-layout-landscape .header-player__lvl {
        font-size: 11px;
        color: rgba(200,180,160,0.6);
    }

    /* ── Resource pills beside the player name ── */
    body.hud-layout-landscape .header-resources {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 12px;
    }

    body.hud-layout-landscape .header-resource {
        display: flex;
        align-items: center;
        gap: 5px;
        background: rgba(30,20,25,0.65);
        border: 1px solid rgba(80,60,70,0.35);
        border-radius: 4px;
        padding: 4px 10px;
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-size: 13px;
        color: #c8b898;
        letter-spacing: 0.04em;
        transition: border-color 180ms ease, box-shadow 180ms ease;
        white-space: nowrap;
    }

    body.hud-layout-landscape .header-resource:hover {
        border-color: rgba(212,175,55,0.25);
        box-shadow: 0 0 8px rgba(212,175,55,0.08);
    }

    body.hud-layout-landscape .header-resource__icon {
        font-size: 14px;
        line-height: 1;
    }

    body.hud-layout-landscape .header-resource__value {
        font-weight: 600;
    }

    body.hud-layout-landscape .header-resource--gold .header-resource__value {
        color: #d4af37;
    }

    body.hud-layout-landscape .header-resource--blood .header-resource__value {
        color: #c44;
    }

    /* Stats in header */
    body.hud-layout-landscape .header__stats {
        gap: 16px;
    }

    body.hud-layout-landscape .header__stat {
        background: rgba(30,20,25,0.6);
        border: 1px solid rgba(80,60,70,0.3);
        border-radius: 4px;
        padding: 3px 10px;
        font-size: 12px;
        color: #c8b898;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: all 180ms ease;
    }

    body.hud-layout-landscape .header__stat:hover {
        border-color: rgba(212,175,55,0.2);
        box-shadow: 0 0 8px rgba(212,175,55,0.08);
    }

    /* Action buttons — bigger for landscape */
    body.hud-layout-landscape .header-action-btn {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(80,60,70,0.4);
        background: rgba(30,20,25,0.6);
        border-radius: 4px;
        color: rgba(200,180,160,0.7);
        transition: all 180ms ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    body.hud-layout-landscape .header-action-btn:hover {
        border-color: rgba(212,175,55,0.3);
        background: rgba(45,32,38,0.7);
        color: #d4af37;
        box-shadow: 0 0 10px rgba(212,175,55,0.12);
    }

    body.hud-layout-landscape .header-action-btn__icon {
        font-size: 16px;
    }

    body.hud-layout-landscape .header-action-btn__badge {
        top: -4px;
        right: -4px;
        background: rgba(180,30,30,0.9);
        border: 1px solid rgba(255,100,100,0.3);
        font-size: 9px;
    }

    /* Logout button — danger accent */
    body.hud-layout-landscape .header-action-btn--logout {
        border-color: rgba(180,50,50,0.4);
    }

    body.hud-layout-landscape .header-action-btn--logout:hover {
        border-color: rgba(220,60,60,0.5);
        background: rgba(60,20,20,0.7);
        color: #ff6b6b;
        box-shadow: 0 0 10px rgba(180,40,40,0.15);
    }

    /* Logo text in header */
    body.hud-layout-landscape .header__logo {
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-size: 16px;
        letter-spacing: 0.12em;
        background: linear-gradient(180deg, #d4af37 0%, #8a7008 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
    }

    body.hud-layout-landscape .header__title {
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-size: 14px;
        letter-spacing: 0.06em;
        color: #c8b898;
    }

    /* Status overlay — moved to the bottom frame bar (footer).
       Positioned inside .gothic-frame__bottom via JS.
       These styles apply when the overlay is inside the footer. */
    /* ── Status-overlay bar in the footer ── */
    body.hud-layout-landscape .status-overlay {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 620px;
        transform: none;
        z-index: 1;
        pointer-events: auto;
        opacity: 1;
    }

    body.hud-layout-landscape .status-overlay--visible {
        opacity: 1;
    }

    body.hud-layout-landscape .status-overlay__track-wrap {
        gap: 4px;
        position: relative;
        /* Space for the gothic side ornaments */
        padding: 0 22px;
    }

    /* ── Gothic ornamental frame with curved edges ── */
    body.hud-layout-landscape .status-overlay__track {
        height: 34px;
        border: 2px solid #5a4850;
        background:
            linear-gradient(180deg,
                rgba(22,15,20,0.97) 0%,
                rgba(10,6,10,0.99) 100%);
        border-radius: 17px;
        box-shadow:
            inset 0 2px 8px rgba(0,0,0,0.8),
            inset 0 -1px 0 rgba(212,175,55,0.06),
            0 0 0 1px rgba(0,0,0,0.6),
            0 2px 12px rgba(0,0,0,0.5),
            0 0 2px rgba(212,175,55,0.10);
        position: relative;
        overflow: hidden;
    }

    /* Curved inner gold highlight at the top */
    body.hud-layout-landscape .status-overlay__track::before {
        content: '';
        position: absolute;
        top: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(212,175,55,0.30) 20%,
            rgba(212,175,55,0.45) 50%,
            rgba(212,175,55,0.30) 80%,
            transparent);
        z-index: 2;
        border-radius: 50%;
    }

    /* Curved inner highlight at the bottom */
    body.hud-layout-landscape .status-overlay__track::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15%;
        right: 15%;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(212,175,55,0.12) 25%,
            rgba(212,175,55,0.20) 50%,
            rgba(212,175,55,0.12) 75%,
            transparent);
        z-index: 2;
        border-radius: 50%;
    }

    /* ── Left gothic ornament (curved arch) ── */
    body.hud-layout-landscape .status-overlay__track-wrap::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 38px;
        background:
            radial-gradient(ellipse at right center,
                rgba(90,72,80,0.9) 0%,
                rgba(60,45,52,0.7) 40%,
                transparent 70%);
        border-right: 2px solid #5a4850;
        border-radius: 50% 0 0 50%;
        box-shadow:
            inset 2px 0 4px rgba(212,175,55,0.08),
            -2px 0 8px rgba(0,0,0,0.4);
        z-index: 2;
    }

    /* ── Right gothic ornament (curved arch) ── */
    body.hud-layout-landscape .status-overlay__track-wrap::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 38px;
        background:
            radial-gradient(ellipse at left center,
                rgba(90,72,80,0.9) 0%,
                rgba(60,45,52,0.7) 40%,
                transparent 70%);
        border-left: 2px solid #5a4850;
        border-radius: 0 50% 50% 0;
        box-shadow:
            inset -2px 0 4px rgba(212,175,55,0.08),
            2px 0 8px rgba(0,0,0,0.4);
        z-index: 2;
    }

    /* Fill bar — rounded to match the track */
    body.hud-layout-landscape .status-overlay__fill {
        border-radius: 15px;
    }

    /* Bigger text with outline for readability */
    body.hud-layout-landscape .status-overlay__label {
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: #fff;
        text-shadow:
            -1px -1px 0 rgba(0,0,0,0.9),
             1px -1px 0 rgba(0,0,0,0.9),
            -1px  1px 0 rgba(0,0,0,0.9),
             1px  1px 0 rgba(0,0,0,0.9),
             0    0  6px rgba(0,0,0,0.8),
             0    0  12px rgba(0,0,0,0.5);
        z-index: 3;
    }

    body.hud-layout-landscape .status-overlay__action-row {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    body.hud-layout-landscape .status-overlay__ready {
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-size: 13px;
        text-shadow:
            -1px -1px 0 rgba(0,0,0,0.8),
             1px  1px 0 rgba(0,0,0,0.8),
             0    0  4px rgba(0,0,0,0.6);
    }

    body.hud-layout-landscape .status-overlay__action {
        font-family: var(--font-family-display, 'Cinzel', serif);
        border: 1px solid rgba(212,175,55,0.35);
        border-radius: 12px;
        background: rgba(20,14,18,0.9);
        color: #ffe79b;
        font-size: 12px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        transition: all 180ms ease;
    }

    body.hud-layout-landscape .status-overlay__action:hover {
        border-color: rgba(212,175,55,0.55);
        box-shadow: 0 0 10px rgba(212,175,55,0.15);
        background: rgba(35,24,30,0.9);
    }
}