/* Header logo and local trailer. Video files live in ../media/videos/. */
.header-announcements{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;width:100%;max-width:800px}.header-announcements>.release-stack{box-sizing:border-box;flex-shrink:0}@media(max-width:760px){.header-announcements{max-width:460px;flex-direction:column}}
body {
    position: relative;
    isolation: isolate;
    background: #100e0d !important;
}
#header.header-media {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 100%;
    min-height: 190px;
    padding: 48px 20px 32px;
    background: transparent;
}
.site-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: #100e0d;
}
.site-background-tiles {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 40% 40% 20%;
    grid-template-rows: 512fr 223fr;
    width: min(100%, 1920px);
    aspect-ratio: 1280 / 735;
    pointer-events: none;
}
.site-background-tiles img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}
.site-background::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 5, 8, .12), rgba(10, 5, 8, .38));
}
.header-media-logo {
    display: inline-block;
    line-height: 0;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .65));
}
.header-media-logo img {
    display: block;
    width: 540px;
    max-width: 100%;
    height: auto;
}
.header-trailer-frame {
    width: min(100%, 760px);
    padding: 4px;
    border: 1px solid #896738;
    border-radius: 12px;
    background: linear-gradient(130deg, #49351e, #171410 55%, #5b4225);
    box-shadow: 0 14px 45px rgba(0, 0, 0, .65), 0 0 24px rgba(187, 124, 35, .09);
    overflow: hidden;
}
.header-trailer {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background: #080706;
    object-fit: contain;
}
.home-trailer {
    display: flex;
    justify-content: center;
    margin: 0 0 25px;
}
.header-media-logo:focus-visible {
    outline: 2px solid #e5bd7a;
    outline-offset: 6px;
}
@media (max-width: 600px) {
    #header.header-media { padding: 24px 14px; gap: 18px; }
    .header-trailer-frame { padding: 3px; border-radius: 8px; }
    .header-trailer { border-radius: 5px; }
}

/* Desktop logo and trailer sizes. The background is independent of the header. */
@media (min-width: 1024px) and (hover: hover) {
    #header.header-media {
        min-height: 500px;
        justify-content: flex-start;
        padding: 48px 20px 260px;
    }
    .site-background-tiles { width: min(100%, 1800px); }
    .header-trailer-frame { width: min(100%, 700px); }
}

.top-bar-layout { display: flex; align-items: center; gap: 18px; }
.top-bar-language, .top-bar-account { flex: 0 0 auto; }
.top-bar-account { white-space: nowrap; margin-left: auto; }
.announcement-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    height: 26px;
    line-height: 26px;
    color: #f1cf94;
    text-transform: none;
    white-space: nowrap;
}
.announcement-text {
    position: relative;
    display: inline-block;
    width: max-content;
    font-size: 13px;
    letter-spacing: .3px;
    animation: announcement-travel 18s linear infinite;
}
@keyframes announcement-travel {
    from { left: 100%; transform: translateX(0); }
    to { left: 0; transform: translateX(-100%); }
}
.announcement-viewport:hover .announcement-text,
.announcement-viewport:focus .announcement-text { animation-play-state: paused; }
.announcement-viewport:focus-visible { outline: 1px solid #dcb583; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .announcement-viewport { text-align: center; }
    .announcement-text { animation: none; left: 0; transform: none; }
}
.home-trailer { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; align-items: stretch; }
.home-trailer > .header-trailer-frame { width: 100%; align-self: center; }
.server-status-panel { display: flex; flex-direction: column; justify-content: center; padding: 20px; border: 1px solid #654d2e; border-radius: 9px; background: linear-gradient(145deg, #2b2116, #151310); color: #d7c9b2; text-align: center; }
.server-status-panel h3 { margin: 0 0 18px; font: 17px/1.4 Cinzel, serif; color: #e6c58f; }
.server-status-state { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; color: #c6b79d; font-size: 15px; }
.server-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a89b86; }
.server-status-panel[data-status="online"] .server-status-state { color: #8bdaa0; }
.server-status-panel[data-status="online"] .server-status-dot { background: #78cf90; box-shadow: 0 0 9px #78cf9040; }
.server-status-panel[data-status="offline"] .server-status-state { color: #e59991; }
.server-status-panel[data-status="offline"] .server-status-dot { background: #df8178; }
.server-status-players strong { display: block; color: #f0d29d; font-size: 40px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.server-status-players > span { display: block; color: #c5b597; margin-top: 7px; font-size: 12px; }
.server-status-scope { color: #a39580; font-size: 11px; line-height: 1.7; margin: 18px 0 0; }
@media (max-width: 800px) { .home-trailer { grid-template-columns: minmax(0, 1fr); } .server-status-panel { padding: 16px; } }