/* FullMoon MMO - Gothic Game Layout
 * Overrides main.css layout for the gothic game frame in landscape.
 * Central content area framed within ornamental borders.
 */

/* =====================================================
   LANDSCAPE GOTHIC MAIN CONTENT
   ===================================================== */
@media (min-width: 768px) {

    /* Body background — dark atmospheric with subtle fog */
    body.hud-layout-landscape {
        background: #030203;
        background-image:
            radial-gradient(ellipse at 20% 80%, rgba(30,10,15,0.5) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 20%, rgba(15,10,30,0.4) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, rgba(8,5,10,1) 0%, rgba(3,2,3,1) 100%);
        color: var(--color-text);
        font-family: var(--font-family);
    }

    /* Remove the mobile max-width constraint */
    body.hud-layout-landscape .app {
        max-width: none;
        background: transparent;
        box-shadow: none;
    }

    /* Disable base vignette — the fog layer (.app::after) and
       body background gradient already provide atmosphere.
       Stacking both creates excessive darkening. */
    body.hud-layout-landscape .app::before {
        display: none;
    }

    /* Main content — framed within the gothic border system */
    body.hud-layout-landscape .main-content {
        padding-left: calc(14px + 220px + 16px);
        padding-right: calc(14px + 16px);
        padding-top: calc(56px + 12px);
        padding-bottom: calc(56px + 12px);
        background: transparent;
    }

    body.hud-layout-landscape .main-content--with-subnavbar {
        padding-bottom: calc(56px + 56px + 12px);
    }

    /* Cards — gothic styled panels */
    body.hud-layout-landscape .card {
        background:
            linear-gradient(180deg,
                rgba(22,16,20,0.92) 0%,
                rgba(14,10,14,0.95) 100%);
        border: 1px solid rgba(80,60,70,0.35);
        border-radius: 4px;
        box-shadow:
            0 4px 20px rgba(0,0,0,0.4),
            inset 0 1px 0 rgba(255,255,255,0.03);
    }

    body.hud-layout-landscape .card:hover {
        border-color: rgba(100,75,85,0.45);
    }

    body.hud-layout-landscape .card--interactive:hover {
        border-color: rgba(212,175,55,0.25);
        box-shadow:
            0 4px 20px rgba(0,0,0,0.4),
            0 0 12px rgba(212,175,55,0.08);
    }

    /* Full-height screens */
    body.hud-layout-landscape .screen--full {
        padding-left: calc(14px + 220px + 24px);
        padding-right: calc(14px + 24px);
        padding-top: calc(56px + 24px);
        padding-bottom: calc(56px + 24px);
    }

    /* Toast container */
    body.hud-layout-landscape .toast-container {
        left: calc(14px + 220px + 50%);
        transform: translateX(-50%);
        top: calc(56px + 8px);
    }

    body.hud-layout-landscape .toast {
        border: 1px solid rgba(80,60,70,0.4);
        border-radius: 4px;
        background: rgba(18,12,16,0.95) !important;
    }

    /* Modals — gothic styling */
    body.hud-layout-landscape .modal {
        border: 2px solid rgba(80,60,70,0.5);
        border-radius: 6px;
        background:
            linear-gradient(180deg,
                rgba(26,18,22,0.98) 0%,
                rgba(14,10,14,0.99) 100%);
        box-shadow:
            0 8px 40px rgba(0,0,0,0.7),
            0 0 20px rgba(212,175,55,0.05);
    }

    body.hud-layout-landscape .modal::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(212,175,55,0.2), transparent);
    }

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

    /* Buttons — gothic game style */
    body.hud-layout-landscape .btn {
        border-radius: 4px;
        font-family: var(--font-family-display, 'Cinzel', serif);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-size: 12px;
        transition: all 180ms ease;
    }

    body.hud-layout-landscape .btn--primary {
        background:
            linear-gradient(180deg,
                rgba(140,30,30,0.85) 0%,
                rgba(90,10,10,0.9) 50%,
                rgba(60,5,5,0.95) 100%);
        border: 1px solid rgba(180,50,50,0.4);
        box-shadow:
            inset 0 1px 0 rgba(255,100,100,0.1),
            0 2px 8px rgba(0,0,0,0.4);
    }

    body.hud-layout-landscape .btn--primary:hover {
        background:
            linear-gradient(180deg,
                rgba(160,40,40,0.9) 0%,
                rgba(110,20,20,0.9) 50%,
                rgba(70,8,8,0.95) 100%);
        border-color: rgba(220,70,70,0.5);
        box-shadow:
            inset 0 1px 0 rgba(255,120,120,0.15),
            0 0 14px rgba(180,40,40,0.2);
    }

    body.hud-layout-landscape .btn--secondary {
        background:
            linear-gradient(180deg,
                rgba(45,35,38,0.7) 0%,
                rgba(28,20,24,0.8) 100%);
        border: 1px solid rgba(212,175,55,0.25);
        color: #d4af37;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.03),
            0 2px 8px rgba(0,0,0,0.3);
    }

    body.hud-layout-landscape .btn--secondary:hover {
        background:
            linear-gradient(180deg,
                rgba(55,42,48,0.8) 0%,
                rgba(35,25,30,0.85) 100%);
        border-color: rgba(212,175,55,0.4);
        box-shadow:
            0 0 12px rgba(212,175,55,0.1);
    }

    body.hud-layout-landscape .btn--ghost {
        border: 1px solid rgba(80,60,70,0.3);
        color: rgba(200,180,160,0.7);
    }

    body.hud-layout-landscape .btn--ghost:hover {
        border-color: rgba(100,75,85,0.5);
        color: #e0d0c0;
        background: rgba(45,32,38,0.3);
    }

    body.hud-layout-landscape .btn--accent {
        background:
            linear-gradient(180deg,
                rgba(180,140,40,0.85) 0%,
                rgba(140,100,20,0.9) 50%,
                rgba(100,70,10,0.95) 100%);
        border: 1px solid rgba(220,180,60,0.4);
        color: #1a1518;
        box-shadow:
            inset 0 1px 0 rgba(255,220,100,0.15),
            0 2px 8px rgba(0,0,0,0.4);
    }

    body.hud-layout-landscape .btn--accent:hover {
        background:
            linear-gradient(180deg,
                rgba(200,160,50,0.9) 0%,
                rgba(160,120,30,0.9) 50%,
                rgba(120,85,15,0.95) 100%);
        border-color: rgba(240,200,80,0.5);
        box-shadow:
            0 0 14px rgba(212,175,55,0.2);
    }

    /* ================================================
       CITY VIEWPORT — full content area
       ================================================ */
    body.hud-layout-landscape .city-viewport {
        height: 50vh;
        min-height: 300px;
        border: 1px solid rgba(80,60,70,0.3);
        border-radius: 4px;
        box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
    }

    /* ================================================
       STAT BARS — darker gothic style
       ================================================ */
    body.hud-layout-landscape .stat-bar {
        border: 1px solid rgba(80,60,70,0.3);
        background: rgba(10,6,8,0.7);
        border-radius: 3px;
    }

    /* ================================================
       TYPOGRAPHY — gothic treatment
       ================================================ */
    body.hud-layout-landscape h1,
    body.hud-layout-landscape h2,
    body.hud-layout-landscape h3 {
        font-family: var(--font-family-display, 'Cinzel', serif);
        letter-spacing: 0.04em;
        color: #c8b898;
    }

    body.hud-layout-landscape h1 {
        text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    }

    /* ================================================
       SCROLLBAR — dark gothic
       ================================================ */
    body.hud-layout-landscape ::-webkit-scrollbar {
        width: 6px;
    }

    body.hud-layout-landscape ::-webkit-scrollbar-track {
        background: rgba(10,6,8,0.5);
    }

    body.hud-layout-landscape ::-webkit-scrollbar-thumb {
        background: rgba(80,60,70,0.5);
        border-radius: 3px;
    }

    body.hud-layout-landscape ::-webkit-scrollbar-thumb:hover {
        background: rgba(100,80,90,0.6);
    }

    /* ================================================
       FORM INPUTS — gothic style
       ================================================ */
    body.hud-layout-landscape .form__input,
    body.hud-layout-landscape .input,
    body.hud-layout-landscape input[type="text"],
    body.hud-layout-landscape input[type="email"],
    body.hud-layout-landscape input[type="password"],
    body.hud-layout-landscape select,
    body.hud-layout-landscape textarea {
        background: rgba(15,10,14,0.8);
        border: 1px solid rgba(80,60,70,0.4);
        border-radius: 4px;
        color: #c8b898;
        transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    body.hud-layout-landscape .form__input:focus,
    body.hud-layout-landscape .input:focus,
    body.hud-layout-landscape input:focus,
    body.hud-layout-landscape select:focus,
    body.hud-layout-landscape textarea:focus {
        border-color: rgba(212,175,55,0.4);
        box-shadow: 0 0 8px rgba(212,175,55,0.1);
        outline: none;
    }

    /* ================================================
       LINKS — gothic gold accent
       ================================================ */
    body.hud-layout-landscape a:not(.btn):not(.navbar__item):not(.header-player) {
        color: rgba(212,175,55,0.8);
        transition: color 150ms ease;
    }

    body.hud-layout-landscape a:not(.btn):not(.navbar__item):not(.header-player):hover {
        color: #d4af37;
        text-shadow: 0 0 4px rgba(212,175,55,0.2);
    }

    /* ================================================
       AMBIENT FOG ANIMATION (subtle)
       ================================================ */
    body.hud-layout-landscape .app::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background:
            radial-gradient(ellipse at 30% 70%, rgba(60,20,30,0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 30%, rgba(20,15,40,0.05) 0%, transparent 40%);
        animation: fogDrift 30s ease-in-out infinite alternate;
    }

    @keyframes fogDrift {
        0% { opacity: 0.4; transform: scale(1) translate(0, 0); }
        100% { opacity: 0.7; transform: scale(1.05) translate(10px, -10px); }
    }

    /* ================================================
       PROPORTIONAL HUD SCALING
       Maintains visual proportions like a 2D canvas.
       Designed for 1366×768 base; scales up/down to fit.
       The --hud-scale custom property is set by JS.
       ================================================ */

    body.hud-layout-landscape .gothic-frame,
    body.hud-layout-landscape .header,
    body.hud-layout-landscape .navbar,
    body.hud-layout-landscape .subnavbar {
        --_s: var(--hud-scale, 1);
    }

    /* Scale the sidebar width & all fixed chrome sizes */
    body.hud-layout-landscape .navbar {
        width: calc(220px * var(--_s));
        font-size: calc(1rem * var(--_s));
    }

    body.hud-layout-landscape .navbar__item {
        padding: calc(9px * var(--_s)) calc(12px * var(--_s));
        gap: calc(8px * var(--_s));
        border-radius: calc(4px * var(--_s));
    }

    body.hud-layout-landscape .navbar__icon {
        font-size: calc(1.15rem * var(--_s));
        width: calc(22px * var(--_s));
    }

    body.hud-layout-landscape .navbar__label {
        font-size: calc(12px * var(--_s));
    }

    body.hud-layout-landscape .header {
        height: calc(56px * var(--_s));
        padding-left: calc((14px + 220px + 16px) * var(--_s));
        padding-right: calc(20px * var(--_s));
        font-size: calc(1rem * var(--_s));
    }

    body.hud-layout-landscape .gothic-frame__bottom {
        height: calc(56px * var(--_s));
        padding: calc(6px * var(--_s)) calc(40px * var(--_s));
    }

    body.hud-layout-landscape .gothic-frame__left {
        width: calc(14px * var(--_s));
    }

    body.hud-layout-landscape .gothic-frame__right {
        width: calc(14px * var(--_s));
    }

    body.hud-layout-landscape .main-content {
        padding-left:   calc((14px + 220px + 16px) * var(--hud-scale, 1));
        padding-right:  calc((14px + 16px) * var(--hud-scale, 1));
        padding-top:    calc((56px + 12px) * var(--hud-scale, 1));
        padding-bottom: calc((56px + 12px) * var(--hud-scale, 1));
    }

    body.hud-layout-landscape .main-content--with-subnavbar {
        padding-bottom: calc((56px + 56px + 12px) * var(--hud-scale, 1));
    }

    /* Navbar positioning tracks the scaled dimensions */
    body.hud-layout-landscape .navbar {
        top:    calc(56px * var(--_s));
        left:   calc(14px * var(--_s));
        bottom: calc(56px * var(--_s));
        width:  calc(220px * var(--_s));
    }

    body.hud-layout-landscape .subnavbar {
        left:   calc((14px + 220px) * var(--_s));
        right:  calc(14px * var(--_s));
        bottom: calc(56px * var(--_s));
    }

    /* Status overlay bar scales inside the footer */
    body.hud-layout-landscape .status-overlay__track {
        height: calc(34px * var(--_s));
    }

    body.hud-layout-landscape .status-overlay__label {
        font-size: calc(16px * var(--_s));
    }

    /* Header resources */
    body.hud-layout-landscape .header-resource {
        font-size: calc(13px * var(--_s));
        padding: calc(4px * var(--_s)) calc(10px * var(--_s));
    }

    body.hud-layout-landscape .header-player__name {
        font-size: calc(15px * var(--_s));
    }

    body.hud-layout-landscape .header-action-btn {
        width: calc(36px * var(--_s));
        height: calc(36px * var(--_s));
    }

    body.hud-layout-landscape .header-action-btn__icon {
        font-size: calc(16px * var(--_s));
    }
}