/* Ornamental frames (launcher style) */
.panel,
.explore-card,
.world-metric {
    border-style: solid;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.panel {
    border-width: 40px 42px;
    border-image: url("../images/frames/news.webp") 100 100 / 40px 42px stretch;
    padding: 6px 10px;
}

.world-metric {
    border-width: 26px 30px;
    border-image: url("../images/frames/small.webp") 70 80 / 26px 30px stretch;
    padding: 0 4px;
    min-height: 0;
}

.explore-card {
    border-width: 20px 24px;
    border-image: url("../images/frames/small.webp") 70 80 / 20px 24px stretch;
    padding: 4px 2px;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.explore-card .eyebrow { font-size: 8px; letter-spacing: .08em; }

.home-feature-grid .boost-card {
    border: 30px solid transparent;
    border-width: 30px 34px;
    border-image: url("../images/frames/boost-portrait.webp") 54 42 38 42 fill / 30px 34px stretch;
    background: transparent;
    box-shadow: none;
    padding: 0 4px;
    position: relative;
    isolation: isolate;
}

.home-feature-grid .ticker-panel {
    padding: 6px 10px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Header bar: left/right caps, stretched middle */
.site-header { position: relative; border-bottom: 0; box-shadow: none; background: transparent; }
.site-header::before {
    content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 96px; translate: 0 -50%;
    z-index: 0; pointer-events: none;
    border-style: solid; border-color: transparent; border-width: 0 66px;
    border-image: url("../images/frames/bar.webp?v=3") 0 78 0 78 fill / 0 66px 0 66px stretch;
}

/* Dark fills behind the transparent-centre frames */
.panel, .world-metric, .explore-card { position: relative; isolation: isolate; }
.panel::before, .world-metric::before, .explore-card::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: calc(var(--fy) * -1 + 15px) calc(var(--fx) * -1 + 15px);
    background: rgba(14, 14, 13, .92); border-radius: 10px;
}
.panel { --fy: 40px; --fx: 42px; }
.world-metric { --fy: 26px; --fx: 30px; }
.explore-card { --fy: 20px; --fx: 24px; }

/* Side menu groups and rail tiles */
.side-group, .rail-tile {
    border-style: solid; border-color: transparent; border-width: 24px 28px;
    border-image: url("../images/frames/tile.webp") 40 55 fill / 24px 28px stretch;
    border-radius: 0; background: transparent;
    box-shadow: none; backdrop-filter: none; overflow: visible;
}
.rail-tile { min-height: 0; padding: 6px 4px; }
.side-group summary { position: relative; justify-content: center; min-height: 30px; padding: 0 6px; text-align: center; }
.side-group summary::after { position: absolute; right: 6px; }
.side-group a, .side-group button { padding: 7px 8px; text-align: center; }
.site-header > * { position: relative; z-index: 1; }
.rail-wiki { background: transparent; animation: none; min-height: 90px; }

/* Hover must not paint outside the ornamental frame */
.world-metric-link:hover, .world-metric-link:focus-visible,
.explore-card:hover, .rail-tile:hover {
    background: transparent; border-color: transparent; box-shadow: none;
}
.world-metric-link:hover::before { background: rgba(48, 34, 16, .94); }

/* Centered text in the status tiles */
.world-metric { text-align: center; justify-items: center; }
.world-metric > * { justify-self: center; }
.world-metric .arrow, .world-metric-link span:last-child { justify-self: center; }
.world-metric .metric-label, .world-metric .metric-value { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; text-align: center; }
.world-metric .metric-link-arrow { position: absolute; right: 8px; }

/* Boosted monster tile, same as in the launcher */
.home-feature-grid .boost-art {
    background: radial-gradient(circle at 50% 40%, #8a7650, #4a3d26 75%);
    border: 1px solid #d2a84f99; border-radius: 6px;
}

/* Header: everything sits inside the bar */
.site-header { height: 124px; padding: 0 70px; }
.site-header::before { height: 124px; border-width: 0 86px; border-image-width: 0 86px; left: -10px; right: -10px; }
.header-podium { flex-basis: 400px; gap: 6px; }
.header-podium .podium-place { grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: 4px; height: 52px; padding: 3px 6px 3px 4px; }
.header-podium .podium-sprite { width: 36px; height: 36px; }
.header-podium .podium-details { justify-items: start; }
.header-podium .podium-medal { top: 2px; left: 2px; width: 14px; height: 14px; font-size: 8px; }
.site-account-link, .site-account button, .site-login-link { padding: 6px 8px; }
.header-podium .podium-level { font-size: 7px; }

/* Prevent overlaps: nav shrinks, secondary items collapse on narrower screens */
.site-header { gap: 10px; }
.site-header nav { flex: 1 1 0; min-width: 0; overflow: hidden; justify-content: flex-start; }
.site-header nav > a { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.lang-switch { flex: none; }
.header-podium { flex: 0 1 330px; min-width: 0; margin-inline: 0; }
.header-podium .podium-place { background-origin: border-box; }
.header-podium .podium-level { display: none; }
.site-account { flex: none; gap: 6px; }
.site-account-link, .site-account button { font-size: 9px; padding: 5px 7px; white-space: nowrap; }
@media (max-width: 1500px) { .header-podium { display: none; } }
@media (max-width: 1150px) { .site-header { padding: 0 56px; } .site-header .lang-switch { display: none; } }
@media (max-width: 900px) { .site-account-link.site-admin-link { display: none; } }

/* ---- Frames from the second sheet ---- */
.site-header::before {
    height: 122px; border-width: 0 100px;
    border-image: url("../images/frames/bar.webp?v=3") 0 110 0 110 fill / 0 100px 0 100px stretch;
}

/* Podium cards */
.header-podium .podium-place {
    position: relative; isolation: isolate; border: 0; border-radius: 0; box-shadow: none; background: transparent;
    border-style: solid; border-color: transparent; border-width: 14px 14px;
    border-image: url("../images/frames/pod.webp?v=3") 42 42 fill / 14px 14px stretch;
    height: 58px; padding: 0 4px; margin: 0 2px;
}
.header-podium .podium-place::before {
    content: ""; position: absolute; z-index: -1; inset: -9px; border-radius: 6px;
    background: linear-gradient(160deg, var(--podium-surface), #17110b);
}
.header-podium .podium-medal { top: -8px; left: -8px; }
.header-podium .podium-sprite { width: 30px; height: 30px; }

/* Small header buttons */
.site-account-link, .site-account button, .site-login-link, .site-cta {
    border: 0; border-style: solid; border-color: transparent; border-width: 10px 14px; border-radius: 0;
    border-image: url("../images/frames/btn.webp?v=3") 34 40 fill / 10px 14px stretch;
    background: transparent; box-shadow: none; padding: 4px 4px; position: relative; isolation: isolate;
}
.site-account-link::before, .site-account button::before, .site-login-link::before, .site-cta::before {
    content: ""; position: absolute; z-index: -1; inset: -6px -9px; border-radius: 6px; background: rgba(14, 14, 13, .94);
}
.site-cta-primary::before { background: linear-gradient(#f0c869, #b9842f); }
.site-cta-primary { color: #1b1208; }
.site-account-link:hover::before, .site-account button:hover::before, .site-cta:hover::before { background: rgba(60, 40, 16, .96); }
.site-cta-primary:hover::before { background: linear-gradient(#ffd982, #c8903a); }
.site-account-link:hover, .site-account button:hover, .site-cta:hover { border-color: transparent; background: transparent; }

/* Right rail tiles */
.rail-tile {
    border-width: 28px 22px;
    border-image: url("../images/frames/tile2.webp?v=3") 56 46 fill / 28px 22px stretch;
    position: relative; isolation: isolate;
}
.rail-tile::before { content: ""; position: absolute; z-index: -1; inset: -16px -10px; background: rgba(14, 14, 13, .94); border-radius: 8px; }
.rail-tile:hover { background: transparent; border-color: transparent; }
.rail-tile:hover::before { background: rgba(40, 28, 14, .96); }
.discord-link {
    border-style: solid; border-color: transparent; border-width: 28px 22px;
    border-image: url("../images/frames/disc.webp?v=3") 56 46 fill / 28px 22px stretch;
    background: transparent; box-shadow: none; border-radius: 0; position: relative; isolation: isolate;
}
.discord-link::before { content: ""; position: absolute; z-index: -1; inset: -16px -10px; background: rgba(14, 14, 20, .94); border-radius: 8px; }

/* Fills as element backgrounds (a ::before with z-index -1 would paint over the border image) */
.header-podium .podium-place::before,
.site-account-link::before, .site-account button::before, .site-login-link::before, .site-cta::before,
.rail-tile::before, .discord-link::before { content: none; }
.header-podium .podium-place { background: linear-gradient(160deg, var(--podium-surface), #17110b); border-radius: 8px; }
.site-account-link, .site-account button, .site-login-link, .site-cta { background: rgba(14, 14, 13, .94); border-radius: 6px; }
.site-cta-primary { background: linear-gradient(#f0c869, #b9842f); }
.site-account-link:hover, .site-account button:hover, .site-cta:hover { background: rgba(60, 40, 16, .96); }
.site-cta-primary:hover { background: linear-gradient(#ffd982, #c8903a); }
.rail-tile { background: rgba(14, 14, 13, .94); border-radius: 8px; }
.rail-tile:hover { background: rgba(40, 28, 14, .96); }
.rail-wiki { background: rgba(14, 22, 28, .94); }
.discord-link { background: rgba(14, 14, 20, .94); border-radius: 8px; }
.header-podium .podium-place, .site-account-link, .site-account button, .site-cta, .rail-tile, .discord-link { background-origin: border-box; background-clip: border-box; }

/* ---- Two-row header: ornamental bar (nav + flags) and a row with podium and account buttons ---- */
.site-header {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 112px auto;
    align-items: center; column-gap: 12px; row-gap: 14px;
    height: auto; min-height: 0; padding: 0 96px 0;
    margin-bottom: 14px;
}
.site-header::before { top: 0; height: 122px; translate: none; left: 0; right: 0; }
.site-header .wordmark { display: none; }
.site-header nav { grid-column: 1; grid-row: 1; justify-content: center; gap: 10px; overflow: visible; }
.site-header nav > a { font-size: 14px; padding: 10px 16px; }
.site-header .lang-switch { grid-column: 2; grid-row: 1; display: flex !important; }
.header-podium { grid-column: 1; grid-row: 2; display: flex !important; justify-content: flex-start; flex: none; gap: 14px; margin: 6px 0 0 8px; }
.header-podium .podium-place { flex: 0 0 190px; height: 60px; }
.header-podium .podium-level { display: block; font-size: 9px; }
.header-podium .podium-name { font-size: 12px; }
.site-header > .site-account { grid-column: 2; grid-row: 2; justify-self: end; gap: 18px; margin-top: 6px; }
.site-account-link, .site-account button, .site-login-link, .site-cta { font-size: 10px; padding: 6px 8px; }
@media (max-width: 1100px) { .header-podium { display: none !important; } .site-header { padding: 0 60px; } .site-header::before { border-width: 0 70px; border-image-width: 0 70px; } }
@media (max-width: 800px) { .site-header { grid-template-columns: 1fr; } .site-header .lang-switch, .site-header > .site-account { grid-column: 1; grid-row: auto; justify-self: center; } }

/* ---- Tidy header: bar spans the content width; second row is a neat strip aligned to the same edges ---- */
.site-header { padding: 0; grid-template-rows: 112px 64px; row-gap: 10px; margin-bottom: 12px; }
.site-header::before { left: -6px; right: -6px; }
.site-header nav { padding-left: 70px; }
.site-header .lang-switch { margin-right: 80px; }
.header-podium { margin: 0; gap: 12px; width: 100%; align-self: center; }
.header-podium .podium-place { flex: 0 0 200px; height: 58px; margin: 0; }
.site-header > .site-account { margin: 0; gap: 10px; align-self: center; }
.site-account-link, .site-account button, .site-login-link, .site-cta { min-width: 96px; text-align: center; }

/* ---- One-row header: nav | podium | flags (account buttons live in the side menu) ---- */
.site-header {
    display: flex; align-items: center; gap: 14px; height: 112px; padding: 0 104px 0 118px; margin-bottom: 16px;
}
.site-header::before { top: 0; height: 122px; left: -6px; right: -6px; }
.site-header nav { flex: 0 1 auto; padding: 0; justify-content: flex-start; gap: 4px; overflow: visible; }
.site-header nav > a { font-size: 13px; padding: 9px 12px; }
.header-podium { flex: 1 1 auto; display: flex !important; justify-content: center; gap: 8px; width: auto; margin: 0; padding-left: 90px; min-width: 0; }
.header-podium .podium-place { flex: 0 1 150px; height: 52px; min-width: 0; }
.header-podium .podium-level { display: none; }
.site-header .lang-switch { margin: 0; flex: none; }
.site-header > .site-account { flex: none; margin: 0; gap: 8px; }
body:has(.side-menu) .site-header > .site-account { display: none; }
@media (max-width: 1250px) { .header-podium { display: none !important; } .site-header { padding: 0 70px; } }
@media (max-width: 800px) { .site-header { height: auto; flex-wrap: wrap; justify-content: center; padding: 20px 60px; } }

/* Account page sidebar */
.account-sidebar {
    border-style: solid; border-color: transparent; border-width: 28px 22px; border-radius: 0;
    border-image: url("../images/frames/tile2.webp?v=3") 56 46 fill / 28px 22px stretch;
    background: rgba(14, 14, 13, .94); background-origin: border-box; background-clip: border-box; box-shadow: none; padding: 0 4px 6px;
}
.site-header .lang-switch { order: 3; }
.header-podium { order: 2; }
.site-header > .site-account { order: 4; }

/* ---- Home: boosted monsters + top 3 in one row, announcements full width below ---- */
.home-feature-grid { grid-template-columns: minmax(0, 1fr) 250px; }
.home-feature-grid > .ticker-panel { grid-column: 1 / -1; height: auto; }
.home-feature-grid .header-podium.home-podium {
    display: flex !important; flex-direction: column; justify-content: space-between; gap: 12px;
    width: auto; margin: 0; padding: 0; order: 0; align-self: stretch;
}
.home-podium .podium-place { flex: 1 1 0; height: auto; min-height: 84px; margin: 0; }
.home-podium .podium-level { display: block; font-size: 10px; }
.home-podium .podium-name { font-size: 14px; }
.home-podium .podium-sprite { width: 44px; height: 44px; }
@media (max-width: 1100px) { .home-feature-grid { grid-template-columns: 1fr; } .home-feature-grid .header-podium.home-podium { flex-direction: row; } }

/* Latest news scrolls inside its frame so the page stays put */
.home-news .news-list { max-height: none; overflow: visible; padding-right: 0; }
.home-feature-grid > .boost-stack { grid-column: 1; grid-row: 1; }
.home-feature-grid > .home-podium { grid-column: 2; grid-row: 1; width: 250px; flex: none; }
.home-feature-grid > .ticker-panel { grid-row: 2; }
@media (max-width: 1100px) { .home-feature-grid > .home-podium { grid-column: 1; grid-row: 2; width: auto; } .home-feature-grid > .ticker-panel { grid-row: 3; } }

/* Fills stop at the padding box; the frame's own corner pixels cover the rest, so nothing pokes out */
.header-podium .podium-place, .site-account-link, .site-account button, .site-login-link, .site-cta,
.rail-tile, .discord-link, .account-sidebar, .side-group {
    background-origin: padding-box; background-clip: padding-box; border-radius: 0;
}
.rail-tile, .discord-link, .account-sidebar { background-color: #0a0908; }
.rail-tile:hover { background-color: #1a1209; }
.rail-wiki { background-color: #0a1014; }
.site-account-link, .site-account button, .site-login-link { background-color: #0a0908; }
/* Interior is baked into these frame images */
.rail-tile, .discord-link, .site-account-link, .site-account button, .site-login-link { background: transparent !important; }
.site-cta-primary { background: linear-gradient(#f0c869, #b9842f) padding-box !important; }
.rail-tile:hover, .site-account-link:hover, .site-account button:hover { filter: brightness(1.25); }

/* subpages: no top bar */
.site-header.is-hidden-sub { display: none !important; }

/* account pages live inside the standard shell; the menu carries the links */
.account-layout { grid-template-columns: minmax(0, 1fr); width: 100%; }
.account-layout > .account-sidebar { display: none; }