/* ============================================================
   Pandora UO – Visual Theme Override
   Applied on top of index.css / menu.css / audio.css / page.css
   Targets the existing table-based HTML structure.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------- Body & background ---------- */
html, body {
    background-color: #060a12 !important;
}

body {
    font-family: 'Crimson Text', Georgia, serif !important;
    color: #c0a96e !important;
    background-image: url('../images/bg3.jpg') !important;
    background-size: 110% !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    will-change: background-position;
}

/* ---------- Main page table ---------- */
#page {
    background: rgba(4, 8, 18, 0.60) !important;
}

/* ---------- Left sidebar columns ---------- */
#menu-top,
#menu-bottom {
    background: linear-gradient(
        180deg,
        rgba(6, 9, 20, 0.97) 0%,
        rgba(8, 12, 26, 0.94) 60%,
        rgba(5, 8, 18, 0.98) 100%
    ) !important;
    border-right: 1px solid rgba(180, 145, 60, 0.22) !important;
    box-shadow: 3px 0 28px rgba(0, 0, 0, 0.55) !important;
    max-width: 190px !important;
    min-width: 160px !important;
    vertical-align: top !important;
}

#menu-bottom {
    vertical-align: bottom !important;
}

/* ============================================================
   Logo node (Home) — ornate, cinematic wordmark
   Built entirely from CSS — no image dependency.
   Structure (vertical stack inside .menu-link):
     ::before  → eyebrow "ULTIMA · ONLINE" with hairlines
     .menu-logo (img, repurposed) → main wordmark "PANDORA"
                  rendered as the link's first inline content;
                  we hide the actual <img> and use ::after for text
   ============================================================ */

.menu-node-home {
    padding: 0 !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(180, 145, 60, 0.30) !important;
    margin-bottom: 10px !important;
    font-size: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* deep parchment + smoke radial glow behind the logo */
#menu-top .menu-node-home {
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(80, 50, 8, 0.55) 0%,
            rgba(35, 22, 4, 0.40) 35%,
            rgba(4, 8, 18, 0.10) 100%
        ),
        linear-gradient(180deg, rgba(2, 4, 10, 0.0) 0%, rgba(2, 4, 10, 0.6) 100%) !important;
    cursor: pointer !important;
}

/* slow drifting "ember" light layer behind everything */
#menu-top .menu-node-home::before {
    content: '' !important;
    position: absolute !important;
    inset: -20% !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(230, 196, 85, 0.18) 0%, rgba(230, 196, 85, 0) 45%),
        radial-gradient(circle at 70% 80%, rgba(212, 100, 40, 0.12) 0%, rgba(212, 100, 40, 0) 50%);
    filter: blur(8px) !important;
    animation: pandora-ember 11s ease-in-out infinite alternate !important;
    z-index: 0 !important;
}

@keyframes pandora-ember {
    0%   { transform: translate(0, 0)    scale(1.00); opacity: 0.85; }
    50%  { transform: translate(2%, -1%) scale(1.05); opacity: 1.00; }
    100% { transform: translate(-2%, 1%) scale(1.02); opacity: 0.80; }
}

/* hide original img — we render text via pseudo-elements */
#menu-top .menu-node-home .menu-link img,
#menu-top .menu-node-home .menu-link > span,
#menu-top .menu-node-home .menu-link .menu-logo {
    display: none !important;
}

/* link becomes a centered column above the ember layer */
#menu-top .menu-node-home .menu-link {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 26px 8px 28px !important;
    font-size: 0 !important;
    line-height: 1 !important;
}

/* ---- Eyebrow: "ULTIMA · ONLINE" with hairline rules ---- */
#menu-top .menu-node-home .menu-link::before {
    content: 'Ultima  \00b7  Online' !important;
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 5px !important;
    text-indent: 5px !important; /* compensate trailing letter-spacing for visual centering */
    text-transform: uppercase !important;
    color: rgba(212, 175, 80, 0.80) !important;
    border-top: 1px solid rgba(180, 145, 60, 0.45) !important;
    border-bottom: 1px solid rgba(180, 145, 60, 0.45) !important;
    padding: 7px 14px !important;
    margin-bottom: 14px !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(230, 196, 85, 0.35) !important;
    transition: color 0.28s ease, border-color 0.28s ease, text-shadow 0.28s ease !important;
}

/* ---- Main wordmark: huge metallic-gold "PANDORA" ---- */
#menu-top .menu-node-home .menu-link::after {
    content: 'Pandora' !important;
    display: block !important;
    position: relative !important;
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-indent: 4px !important;
    text-transform: uppercase !important;
    line-height: 1 !important;

    /* metallic-gold gradient fill */
    background: linear-gradient(
        180deg,
        #fff2b8  0%,
        #f5d472 22%,
        #e6b13a 48%,
        #a87213 72%,
        #f1c95a 100%
    ) !important;
    background-size: 100% 200% !important;
    background-position: 0% 0% !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
            color: transparent !important;

    /* outer halo, inner highlight, deep glow */
    filter:
        drop-shadow(0 0 6px  rgba(230, 196, 85, 0.85))
        drop-shadow(0 0 22px rgba(230, 196, 85, 0.55))
        drop-shadow(0 0 60px rgba(230, 196, 85, 0.25)) !important;

    animation: pandora-shimmer 6s ease-in-out infinite !important;
    transition: filter 0.30s ease !important;
}

@keyframes pandora-shimmer {
    0%, 100% { background-position: 0%   0%;   }
    50%      { background-position: 0% 100%;   }
}

/* decorative gold flourish under the wordmark — three diamond ornament */
#menu-top .menu-node-home .menu-link {
    --flourish: linear-gradient(90deg,
        rgba(180, 145, 60, 0)   0%,
        rgba(212, 169, 64, 0.7) 50%,
        rgba(180, 145, 60, 0) 100%);
}
#menu-top .menu-node-home::after {
    content: '\2756' !important; /* black diamond minus white X — fancy ornament */
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    font-size: 11px !important;
    color: rgba(212, 169, 64, 0.75) !important;
    text-shadow: 0 0 10px rgba(230, 196, 85, 0.6) !important;
    z-index: 2 !important;
    pointer-events: none !important;
    letter-spacing: 8px !important;
    /* repeat the ornament with text duplication via pseudo content */
}

/* hover: brighten ember, intensify glow, push wordmark forward */
#menu-top .menu-node-home:hover {
    border-bottom: 1px solid rgba(212, 169, 64, 0.45) !important;
}

#menu-top .menu-node-home:hover .menu-link::before {
    color: rgba(244, 215, 110, 0.95) !important;
    border-top-color: rgba(230, 196, 85, 0.70) !important;
    border-bottom-color: rgba(230, 196, 85, 0.70) !important;
    text-shadow: 0 0 14px rgba(230, 196, 85, 0.65) !important;
}

#menu-top .menu-node-home:hover .menu-link::after {
    filter:
        drop-shadow(0 0 10px rgba(255, 226, 130, 1.00))
        drop-shadow(0 0 32px rgba(230, 196, 85, 0.85))
        drop-shadow(0 0 80px rgba(230, 196, 85, 0.40)) !important;
}

#menu-top .menu-node-home:hover::after {
    color: rgba(244, 215, 110, 1.00) !important;
    text-shadow: 0 0 14px rgba(255, 226, 130, 0.85) !important;
}

/* ---------- Navigation links ---------- */
.menu {
    padding: 6px 10px !important;
}

.menu-node {
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #8c7a50 !important;
    padding: 9px 10px !important;
    margin: 2px 0 !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
}

.menu-node .menu-link {
    font-family: 'Cinzel', serif !important;
    color: #8c7a50 !important;
    display: block !important;
    transition: color 0.22s ease, text-shadow 0.22s ease !important;
}

/* Active & hover state – override the default 3em font-size jump */
.menu-node-cur,
.menu-node:hover {
    font-size: 12px !important;
    color: #d4a940 !important;
    border-color: rgba(180, 145, 60, 0.30) !important;
    background: rgba(180, 145, 60, 0.08) !important;
}

.menu-node-cur .menu-link,
.menu-node:hover .menu-link {
    color: #d4a940 !important;
    text-shadow: 0 0 14px rgba(212, 169, 64, 0.45) !important;
}

/* ---------- Content area ---------- */
#content {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.content-page {
    background: transparent !important;
    padding: 24px 36px !important;
    color: #c0a96e !important;
    font-family: 'Crimson Text', Georgia, serif !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
}

/* ---------- Headings inside content ---------- */
.content-page h1,
.content-page h2,
.content-page h3 {
    font-family: 'Cinzel', serif !important;
    color: #d4a940 !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 0 18px rgba(212, 169, 64, 0.3) !important;
}

.content-page a {
    color: #62a8c8 !important;
    transition: color 0.2s !important;
}

.content-page a:hover {
    color: #85bfd4 !important;
}

/* ---------- Global titles / subtitles ---------- */
.title,
.subtitle {
    font-family: 'Cinzel Decorative', serif !important;
    color: #d4a940 !important;
    text-shadow: 0 0 18px rgba(212, 169, 64, 0.3) !important;
}

/* ---------- Buttons & bordered elements ---------- */
.button,
.circle {
    border-color: rgba(180, 145, 60, 0.40) !important;
    border-radius: 2px !important;
    transition: border-color 0.22s ease !important;
}

.button:hover,
.button:active,
.circle:hover,
.circle:active {
    border-color: rgba(212, 169, 64, 0.75) !important;
}

/* ---------- Video / trailer — big & cinematic ---------- */
#home.page {
    padding: 36px 28px !important;
    text-align: center !important;
    cursor: default !important;
}

/* outer ornate frame — wraps the video and provides the gilded mat */
.trailer-wrap {
    max-width: 1480px !important;
    width: 96% !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    overflow: visible !important;
    padding: 14px !important;
    background:
        /* inner dark velvet mat */
        radial-gradient(ellipse at 50% 50%, rgba(8, 5, 2, 0.0) 55%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(135deg,
            #2a1d08 0%,
            #1a1206 18%,
            #4a3514 38%,
            #d4a940 50%,
            #4a3514 62%,
            #1a1206 82%,
            #2a1d08 100%) !important;
    background-size: 100% 100%, 220% 220% !important;
    background-position: center, 0% 50% !important;
    box-shadow:
        /* deep cast shadow into the page */
        0 40px 120px rgba(0, 0, 0, 0.95),
        /* far ambient gold halo */
        0 0 240px rgba(212, 169, 64, 0.18),
        /* tight outer line */
        0 0 0 1px rgba(0, 0, 0, 0.85) !important;
    animation: pandora-frame-shimmer 14s ease-in-out infinite !important;
    transition: box-shadow 0.45s ease !important;
}

@keyframes pandora-frame-shimmer {
    0%   { background-position: center, 0%   50%; }
    50%  { background-position: center, 100% 50%; }
    100% { background-position: center, 0%   50%; }
}

/* decorative inner bevel — dark mat between gold frame and video */
.trailer-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: 10px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: #050306 !important;
    box-shadow:
        inset 0 0 0 1px rgba(230, 196, 85, 0.55),
        inset 0 0 28px rgba(0, 0, 0, 0.95) !important;
}

/* corner-decoration: subtle vignette on top of video for cinematic feel */
.trailer-wrap::after {
    content: '' !important;
    position: absolute !important;
    inset: 14px !important;
    pointer-events: none !important;
    z-index: 3 !important;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55) !important;
}

.trailer-wrap:hover {
    box-shadow:
        0 40px 130px rgba(0, 0, 0, 0.95),
        0 0 320px rgba(230, 196, 85, 0.32),
        0 0 0 1px rgba(0, 0, 0, 0.85) !important;
}

.trailer-wrap .trailer {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    z-index: 2 !important;
    background: #000 !important;
}

/* tighten the cinematic frame on small screens */
@media (max-width: 900px) {
    .trailer-wrap { padding: 8px !important; width: 98% !important; }
    .trailer-wrap::before { inset: 6px !important; }
    .trailer-wrap::after  { inset: 8px !important; }
    .trailer-wrap .trailer {
        top: 8px !important; left: 8px !important;
        right: 8px !important; bottom: 8px !important;
    }
}

/* ---------- Audio player ---------- */
.audio-container {
    padding: 10px 14px !important;
    text-align: center !important;
}

.audio-eqz .eqz-bar {
    background: rgba(90, 154, 181, 0.75) !important;
    border-radius: 1px !important;
}

.audio-controls {
    border-radius: 2px !important;
}

/* ---------- ESRB ---------- */
#esrb {
    padding: 10px 14px 14px !important;
    text-align: center !important;
}

#esrb img {
    width: 52px !important;
    opacity: 0.82;
    transition: opacity 0.22s ease;
}

#esrb img:hover { opacity: 1; }

/* ---------- Footer ---------- */
#footer {
    background: rgba(4, 8, 18, 0.90) !important;
    border-top: 1px solid rgba(180, 145, 60, 0.12) !important;
    padding: 0 !important;
}

.copyright {
    font-family: 'Cinzel', serif !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(180, 145, 60, 0.35) !important;
    padding: 10px 28px !important;
    text-align: center !important;
}

/* ---------- Flicker animation ---------- */
@keyframes flicker {
    0%, 90%, 100% { opacity: 0.82; }
    91%            { opacity: 0.60; }
    92%            { opacity: 0.82; }
    94%            { opacity: 0.55; }
    95%            { opacity: 0.82; }
}

.flicker { animation: flicker 9s infinite !important; }

/* ---------- IE gradient filter strip ---------- */
.grad-tb, .grad-bt, .grad-lr, .grad-rl, .grad { filter: none; }