/* Site header and navigation styles (loaded on every page)
 * Moved out of includes/header.php (was an inline <style>) on 2026-11-04. It is linked at the same spot,
 * so the cascade order is unchanged. Image URLs are root-absolute ($base_path is always "/").
 */

/* ============ CORE THEME VARIABLES (Dark Orange, Black, & Red) ============ */
:root {
    --point-wow-gif: url('/img/pointer_wow.gif');
    --hover-wow-gif: url('/img/hover_wow.gif');
    --gold-primary: #eab308;  /* Vivid Dark Yellow */
    --gold-dark: #ea580c;     /* Intense Dark Orange */
    --gold-deep: #991b1b;     /* Deep Crimson Red */
    --iron-bg: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%); /* Charcoal/Black Button Base */
}

* {
    box-sizing: border-box;
}

body {
    cursor: var(--point-wow-gif) 16 16, auto;
    padding-top: 80px;
}

@media (min-width: 1024px) {
    body { padding-top: 96px; }
}

.force-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============ NAVIGATION HEADER BACKGROUND ============ */
header.main-header {
    background: linear-gradient(180deg, #050608 0%, #0c0a09 80%, rgba(234, 88, 12, 0.15) 100%) !important;
    border-bottom: 1px solid rgba(234, 88, 12, 0.35) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(234, 179, 8, 0.1);
    z-index: 10000;
    overflow: visible;
}

header.transparent-header {
    background: rgba(5,7,11,0.55) !important;
    border-bottom-color: rgba(234, 88, 12, 0.15) !important;
}

.header-inner { position: relative; z-index: 10020; }

/* Background Parallelogram Accent Accent */
.parallelogram {
    position: absolute; left: 0; top: 0; width: 180px; height: 100%;
    background: linear-gradient(135deg, #ea580c 0%, #991b1b 100%);
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    opacity: 0.12; pointer-events: none; z-index: 0;
}

.parallelogram::after {
    content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(234, 88, 12, 0.1), rgba(153, 27, 27, 0.2));
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}

/* ============ MENU BUTTON BASE STYLES ============ */
.nav-link {
    position: relative;
    padding: .6rem 1.2rem !important;
    font-family: 'Cinzel', serif !important;
    font-weight: 700 !important;
    font-size: .85rem;
    letter-spacing: .06em;
    color: #d6d3d1 !important;
    background: var(--iron-bg) !important;
    border: 1px solid rgba(234, 88, 12, 0.2) !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: all 0.3s ease-in-out !important;
    text-decoration: none; text-transform: uppercase; white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

/* Active Page Accent Styling */
.nav-link.active {
    color: var(--gold-primary) !important;
    background: linear-gradient(180deg, rgba(234, 88, 12, 0.25) 0%, rgba(153, 27, 27, 0.2) 100%) !important;
    border-color: rgba(234, 179, 8, 0.6) !important;
    text-shadow: 0 0 8px rgba(234, 179, 8, 0.6) !important;
    box-shadow: inset 0 0 10px rgba(234, 88, 12, 0.2);
}
/* ============ THICK & INTENSIFIED FIRE HOVER GLOW SYSTEM ============ */
.nav-link:hover {
    color: #ffffff !important;
    background: var(--iron-bg) !important;
    border-color: #fef08a !important;
    transform: translateY(-3px);
    text-shadow: 0 0 10px #fef08a, 0 0 20px #ea580c, 0 2px 4px rgba(0, 0, 0, 1);

    /* ============ DENSE, THICK TRIPLE-STACKED GLOW BACKGROUND ============ */
    box-shadow:
        0 0 12px 5px rgba(234, 88, 12, 0.95),       /* Thick, solid dark orange ring around edge */
        0 0 25px 8px rgba(239, 68, 68, 0.8),         /* Deep red dense ambient layer */
        0 0 45px 12px rgba(234, 179, 8, 0.5),        /* Wide dark yellow background bloom */
        inset 0 0 15px rgba(254, 240, 138, 0.45) !important; /* Thick internal gold light frame */

    /* Multiplies the boundary thickness across custom clip-path shapes */
    filter: drop-shadow(0 0 14px rgba(234, 88, 12, 0.95)) drop-shadow(0 0 6px #eab308);
}


/* ============ USER DROPDOWN PANELS ============ */
#profileDropdownContainer, #langDropdownContainer { position: relative; }

.wow-dropdown {
    background: linear-gradient(180deg, rgba(15, 12, 12, 0.98), rgba(5, 6, 8, 0.98));
    border: 1px solid rgba(234, 88, 12, 0.4);
    box-shadow: 0 12px 32px rgba(0,0,0,.85), inset 0 0 40px rgba(220, 38, 38, 0.1);
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
}

.wow-dropdown::before {
    content: ''; position: absolute; inset: 4px;
    border: 1px solid rgba(234, 179, 8, 0.15); pointer-events: none;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    z-index: 0;
}

.dropdown-menu, .lang-options {
    position: absolute !important; right: 0 !important; left: auto !important; top: 100% !important;
    z-index: 10050 !important; max-width: calc(100vw - 2rem);
}

.dropdown-item {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem;
    color: #d6d3d1; font-size: .9rem; font-weight: 600;
    transition: all .2s ease; text-decoration: none; position: relative; z-index: 1;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(234, 88, 12, 0.2), transparent);
    color: var(--gold-primary); text-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}

.dropdown-item.danger { color: #f87171; }
.dropdown-item.danger:hover {
    background: linear-gradient(90deg, rgba(220,38,38,.2), transparent); color: #fca5a5;
}

.dropdown-divider {
    height: 1px; margin: .25rem 0;
    background: linear-gradient(90deg, transparent, rgba(234, 88, 12, 0.4), transparent);
    position: relative; z-index: 1;
}

/* ============ STATUS STAT BADGES ============ */
.badge-gold {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem;
    background: linear-gradient(180deg, #fef08a 0%, #eab308 45%, #ea580c 100%);
    color: #050608; font-weight: 800; font-size: .8rem; letter-spacing: .02em;
    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -4px 8px rgba(0,0,0,.3);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.badge-iron {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem;
    background: linear-gradient(180deg, #1c1917 0%, #0c0a09 55%, #000000 100%);
    color: #f87171; font-weight: 800; font-size: .8rem; letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.3), inset 0 -4px 8px rgba(0,0,0,.5);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ============ CURRENCY TOOLTIPS ============ */
.pw-tip { position: relative; display: inline-flex; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.pw-tip[href] { cursor: pointer; }
.pw-tip[href]:hover > .badge-gold, .pw-tip[href]:hover > .badge-iron { filter: brightness(1.15); }
.pw-tip:focus-visible { outline: 2px solid #f2cf5b; outline-offset: 3px; }
.pw-tip-bubble {
    position: absolute; top: calc(100% + 10px); left: 50%; z-index: 10060;
    width: max-content; max-width: min(240px, calc(100vw - 2rem));
    padding: .55rem .8rem; text-align: left; white-space: normal;
    background: linear-gradient(180deg, rgba(24, 16, 12, 0.98), rgba(5, 6, 8, 0.98));
    border: 1px solid rgba(234, 88, 12, 0.55);
    box-shadow: 0 10px 24px rgba(0,0,0,.75), inset 0 0 18px rgba(220, 38, 38, 0.08);
    color: #e7e5e4; font-size: .78rem; font-weight: 500; line-height: 1.4;
    letter-spacing: normal; text-shadow: none; font-family: inherit;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.pw-tip-bubble::before {
    content: ''; position: absolute; top: -6px; left: calc(50% - 5px); width: 10px; height: 10px;
    background: rgba(24, 16, 12, 0.98); border-left: 1px solid rgba(234, 88, 12, 0.55); border-top: 1px solid rgba(234, 88, 12, 0.55);
    transform: rotate(45deg);
}
.pw-tip-bubble strong { display: block; margin-bottom: 2px; font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700; color: #f2cf5b; }
.pw-tip-bubble.tok strong { color: #f87171; }
.pw-tip:focus-visible .pw-tip-bubble, .pw-tip.is-open .pw-tip-bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) { .pw-tip:hover .pw-tip-bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); } }
.pw-tip--end .pw-tip-bubble { left: auto; right: 0; transform: translate(0, 4px); }
.pw-tip--start .pw-tip-bubble { left: 0; transform: translate(0, 4px); }
.pw-tip--end .pw-tip-bubble::before { left: auto; right: 14px; }
.pw-tip--start .pw-tip-bubble::before { left: 14px; }
.pw-tip--end:focus-visible .pw-tip-bubble, .pw-tip--end.is-open .pw-tip-bubble,
.pw-tip--start:focus-visible .pw-tip-bubble, .pw-tip--start.is-open .pw-tip-bubble { transform: translate(0, 0); }
@media (hover: hover) { .pw-tip--end:hover .pw-tip-bubble, .pw-tip--start:hover .pw-tip-bubble { transform: translate(0, 0); } }
.pw-tip.is-dismissed .pw-tip-bubble { opacity: 0 !important; visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .pw-tip-bubble { transition: none; } }

/* ============ PROFILE FRAME ============ */
.avatar-frame {
    width: 48px; height: 48px; border: 2px solid #ea580c;
    box-shadow: 0 0 12px rgba(234, 88, 12, 0.5), inset 0 0 8px rgba(0,0,0,.8);
    object-fit: cover; cursor: pointer; transition: all .3s ease;
    clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%);
}

.avatar-frame:hover {
    border-color: #eab308;
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.7), inset 0 0 8px rgba(0,0,0,.8);
    transform: scale(1.05);
}

/* ============ LANGUAGE TRIGGER ============ */
.lang-btn {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem;
    background: rgba(0,0,0,.5); border: 1px solid rgba(234, 88, 12, 0.3);
    color: #eab308; font-weight: 700; font-size: .85rem;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: all .2s ease; cursor: pointer; white-space: nowrap;
}

.lang-btn:hover {
    border-color: #eab308; background: linear-gradient(180deg, rgba(234, 88, 12, 0.2), rgba(234, 88, 12, 0.05));
}

#langLabel { display: none; }
@media (min-width: 480px) { #langLabel { display: inline; } }

/* ============ PHONE MENU ============ */
.hamburger {
    display: block; width: 24px; height: 2px; background: #eab308;
    position: relative; transition: all 0.3s ease;
}

.hamburger::before, .hamburger::after {
    content: ''; position: absolute; width: 24px; height: 2px; background: #eab308; left: 0; transition: all 0.3s ease;
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }
.hamburger.active { background: transparent; }
.hamburger.active::before { transform: rotate(45deg); top: 0; }
.hamburger.active::after { transform: rotate(-45deg); top: 0; }

@media (max-width: 1023px) {
    header nav.nav-menu { display: none; }
    header nav.nav-menu.nav-open {
        display: flex !important; flex-direction: column; position: absolute !important;
        top: 100% !important; left: 0 !important; right: 0 !important; max-height: calc(100vh - 80px);
        overflow-y: auto; background: rgba(15, 12, 12, 0.98); border-bottom: 1px solid rgba(234, 88, 12, 0.4);
        box-shadow: 0 20px 40px rgba(0,0,0,.9); padding: 1.5rem; gap: .75rem; z-index: 10010;
    }
    header nav.nav-menu.nav-open .nav-link {
        width: 100%; text-align: center; font-size: 1.05rem; padding: 1rem !important; white-space: normal;
    }
    .nav-close { display: flex !important; align-self: flex-end; margin-bottom: .5rem; z-index: 10015; }
}

.dropdown-menu.show, .lang-options.show { display: block !important; }

/* PW i18n 2026-10-30: longer translated menu labels (Russian falls back to a wider font because Cinzel has no Cyrillic). Keeps the desktop menu on one row at 1280px. English and Chinese are unaffected. */
@media (min-width: 1024px) {
    html[lang="ru"] header nav.nav-menu, html[lang="de"] header nav.nav-menu, html[lang="fr"] header nav.nav-menu, html[lang="es"] header nav.nav-menu, html[lang="pt"] header nav.nav-menu { gap: .35rem; }
    html[lang="ru"] .nav-link { padding: .55rem .7rem !important; font-size: .74rem; letter-spacing: .02em; }
    html[lang="de"] .nav-link, html[lang="fr"] .nav-link, html[lang="es"] .nav-link, html[lang="pt"] .nav-link { padding: .55rem .75rem !important; font-size: .74rem; letter-spacing: .03em; }
}