/* Shared compact game headers. Keep the individual page skins;
   load geometry after them so later artwork cannot restore oversized spacing. */
.game-frame {
    --page-gap: 14px;
    --layout-inset: clamp(18px, 1.8vw, 28px);
    --game-content-top: 12px;
}
/* Let the actual header height determine the remaining page, including wraps. */
.game-frame:has(> .game-columns) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.game-frame > .game-topbar { flex-shrink: 0; }
/* An explicit inline map focus borrows the header space. Leaving focus restores
   the same DOM, header preference and navigation without remounting the page. */
.game-frame:has(.atlas-console.is-focused) > .game-topbar,
.game-frame:has(.atlas-console.is-focused) .game-main > :is([data-page-hero], .section-navigation) { display: none; }
.game-frame .game-main {
    padding-top: var(--game-content-top);
}

/* Introduction first, full-width tabs directly beside the content they select. */
.game-frame .section-navigation {
    flex-direction: row;
    align-items: center;
    padding: 12px var(--layout-inset);
    margin-bottom: var(--page-gap);
    border-radius: var(--page-radius);
    border-bottom: 1px solid var(--theme-line,#bddcde);
}
.game-frame .section-navigation nav {
    flex: 1;
    min-width: 0;
    gap: 10px;
}
.game-frame .section-navigation nav a {
    min-height: 44px;
    padding: 9px 14px;
    flex-direction: row;
    gap: 9px;
    font-size: 13px;
    line-height: 1.3;
}
.game-frame .section-tab-icon {
    font-size: 21px;
    line-height: 1;
}
/* PageHero owns geometry once, including overview and live panel variants.
   Colour skins stay with their themes; nothing here scales the whole page. */
.game-frame .game-main [data-page-hero] {
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    min-height: 94px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px var(--layout-inset);
    margin-bottom: var(--page-gap);
    gap: 18px;
    border-radius: var(--page-radius);
}
[data-page-hero] .page-hero-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
[data-page-hero] .page-hero-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; }
.game-frame [data-page-hero] .editor-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    gap: 4px 12px;
}
.game-frame [data-page-hero] h1 { font-size: 28px; line-height: 1.2; letter-spacing: -1px; margin: 3px 0; overflow-wrap: anywhere; }
.game-frame [data-page-hero] .eyebrow { display: block; font-size: 9px; letter-spacing: .2em; line-height: 1.4; }
[data-page-hero] .page-hero-details > p { max-width: 72ch; font-size: 13px; line-height: 1.6; color: var(--theme-muted,#597d88); margin: 0; }
[data-page-hero] .page-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
[data-page-hero] .page-hero-facts > span { padding: 5px 10px; font-size: 11px; }
.game-frame [data-page-hero] .editor-heading > .editor-shortcut {
    position: static;
    transform: none;
    flex: none;
    width: auto;
    height: 32px;
    padding: 0 10px;
}
[data-page-hero] .page-hero-title-extra { min-width: 0; }
[data-page-hero] .page-hero-actions { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; gap: 8px; }
[data-page-hero] :is(.page-hero-tools, .page-hero-actions):empty { display: none; }
[data-page-hero] .page-hero-tools { flex: 0 1 280px; min-width: 160px; max-width: 32%; }
/* One field geometry for catalogue, clan, technique and player searches.
   Keep the accessible name on the input, without a duplicate visible caption. */
.game-frame .search-field { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; color: var(--theme-muted,#597d88); }
.game-frame .search-field > input { display: block; flex: 1; width: 100%; min-width: 0; height: 36px; min-height: 36px; box-sizing: border-box; margin: 0; padding: 7px 10px 7px 34px; border: 1px solid var(--theme-line,#bddcde); border-radius: 10px; background: var(--theme-surface,#ffffffd9); color: var(--theme-ink,#23505d); font: inherit; font-size: 13px; line-height: 20px; }
.game-frame .search-field > svg { position: absolute; left: 11px; pointer-events: none; }
.search-field svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.game-frame .search-field-submit > input { padding-left: 11px; }
.game-frame .search-field > button { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; box-sizing: border-box; padding: 0; border: 1px solid var(--theme-line,#bddcde); border-radius: 10px; background: var(--theme-soft,#e9f7f5); color: var(--theme-ink,#23505d); cursor: pointer; }
.game-frame .search-field > button:hover { border-color: var(--theme-accent,#159aaa); color: var(--theme-accent,#159aaa); }
.game-frame .search-field > :is(input,button):focus-visible { outline: 2px solid var(--theme-accent,#159aaa); outline-offset: 2px; }
@media (pointer: coarse) {
    .game-frame .search-field > input { height: 44px; min-height: 44px; }
    .game-frame .search-field > button { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
}
.page-hero-count { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; background: var(--theme-soft,#e9f7f5); color: var(--theme-muted,#597d88); font-size: 11px; white-space: nowrap; }
.page-hero-filter { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 180px; min-height: 32px; padding: 5px 9px; border: 1px solid var(--theme-line,#bddcde); border-radius: 9px; background: var(--theme-soft,#e9f7f5); color: var(--theme-ink,#23505d); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
.page-hero-filter > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-hero-filter svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.page-hero-filter:focus-visible { outline: 2px solid var(--theme-accent,#159aaa); outline-offset: 2px; }
[data-page-hero] .page-hero-artwork { flex: none; margin-inline: 8px; }
[data-page-hero] .page-hero-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
}
[data-page-hero] .page-hero-orbit > span { font-size: 28px; line-height: 1; }
.page-hero-toggle {
    display: none;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--control-edge);
    border-radius: 11px;
    background: var(--control-surface);
    color: var(--control-ink);
    box-shadow: var(--control-relief);
    cursor: pointer;
}
html[data-page-header] .page-hero-toggle { display: grid; }
.page-hero-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.page-hero-toggle:hover { border-color: var(--control-accent); color: var(--control-accent); }
.page-hero-toggle:focus-visible { outline: 3px solid var(--theme-accent,#159aaa); outline-offset: 3px; }
html[data-page-header="collapsed"] .game-frame .game-main [data-page-hero] { min-height: 48px; padding-block: 6px; gap: 12px; }
html[data-page-header="collapsed"] [data-page-hero] .page-hero-detail { display: none; }
html[data-page-header="collapsed"] .game-frame [data-page-hero] h1 { font-size: 18px; letter-spacing: -.35px; margin: 0; }
html[data-page-header="collapsed"] .page-hero-toggle svg { transform: rotate(180deg); }
html[data-page-header="collapsed"] [data-page-hero] .page-hero-actions > a { min-height: 32px; padding-block: 6px; font-size: 12px; }
/* A tool must not squeeze the title in the narrow desktop content column. */
@media (min-width: 851px) and (max-width: 1199px) {
    html:not([data-page-header="collapsed"]) .game-frame .game-main [data-page-hero]:has(.page-hero-tools:not(:empty)) { flex-wrap: wrap; }
    [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-artwork { display: none; }
    html:not([data-page-header="collapsed"]) [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-copy { flex: 1 1 calc(100% - 60px); }
    [data-page-hero] .page-hero-tools { order: 2; flex: 1 1 200px; max-width: none; }
    html:not([data-page-header="collapsed"]) [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-actions { order: 3; flex-wrap: wrap; }
    [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-actions:empty { display: none; }
}
@media (max-width: 850px) {
    .game-frame .game-main [data-page-hero] { min-height: 0; gap: 10px; padding-block: 12px; }
    html:not([data-page-header="collapsed"]) .game-frame .game-main [data-page-hero]:has(.page-hero-tools:not(:empty)) { flex-wrap: wrap; }
    [data-page-hero] .page-hero-tools { order: 2; flex-basis: 100%; max-width: 100%; min-width: 0; }
    html:not([data-page-header="collapsed"]) [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-copy { flex-basis: calc(100% - 70px); }
    html:not([data-page-header="collapsed"]) [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-actions { order: 3; flex-basis: 100%; flex-wrap: wrap; }
    [data-page-hero]:has(.page-hero-tools:not(:empty)) .page-hero-actions:empty { display: none; }
    .game-frame [data-page-hero] h1 { font-size: 24px; }
    [data-page-hero] .page-hero-artwork { display: none; }
    .game-frame [data-page-hero] .editor-heading > .editor-shortcut { width: 34px; padding: 0; }
    .game-frame [data-page-hero] .editor-shortcut span { display: none; }
    .game-frame [data-page-hero] .editor-shortcut svg { width: 16px; height: 16px; }
    /* Counts belong to the expanded introduction. Hidden tools must not reserve
       another row; the title, direct action and toggle share one compact line. */
    html[data-page-header="collapsed"] [data-page-hero] .page-hero-title-extra { display: none; }
    html[data-page-header="collapsed"] [data-page-hero] .page-hero-actions { flex-shrink: 0; }
    html[data-page-header="collapsed"] [data-page-hero] .page-hero-actions > :is(a,button) { min-height: 32px; padding: 6px 9px; font-size: 12px; white-space: nowrap; }
    html[data-page-header="collapsed"] [data-page-hero] .page-hero-filter { width: 34px; height: 34px; justify-content: center; }
    html[data-page-header="collapsed"] [data-page-hero] .page-hero-filter > :is(span,svg:first-child) { display: none; }
}
@media (pointer: coarse) {
    .page-hero-toggle { width: 40px; height: 40px; }
    .game-frame [data-page-hero] .editor-heading > .editor-shortcut { min-width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .page-hero-toggle svg { transition: none; } }
@media (forced-colors: active) { .page-hero-toggle { border-color: ButtonText; background: ButtonFace; color: ButtonText; } }

.game-frame[data-page="nachrichten"] .mail-grid { margin-top: var(--page-gap); }

/* These are technique content, not another page-header layout. */
.library-hero-counts { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.library-hero-counts > div { display: flex; align-items: baseline; gap: 5px; }
.library-hero-counts strong { font-size: 17px; line-height: 1.2; color: var(--theme-ink,#173f4d); }
.library-hero-counts span { font-size: 9px; letter-spacing: .06em; color: var(--theme-muted,#527786); }
[data-page-hero] .library-hero-art { position: relative; width: 128px; height: 70px; }
[data-page-hero] .library-orbit { width: 70px; height: 70px; box-shadow: 0 0 0 9px #85d5d31f, 0 0 0 18px #8bd7d41a; }
[data-page-hero] .library-orbit::after { inset: 8px; }
[data-page-hero] .library-showcase { width: 60px; border-width: 2px; border-radius: 10px; box-shadow: 0 5px 14px #17445426; }
@media (max-width: 360px) {
    .library-hero-counts { gap: 10px; }
    .library-hero-counts span { font-size: 8px; }
}

@media (max-width: 600px) {
    .game-frame {
        --layout-inset: 16px;
        --page-gap: 12px;
    }
    .game-frame .section-navigation { padding: 12px; }
    .game-frame .section-navigation nav { gap: 8px; }
    .game-frame .section-navigation nav a { padding: 9px 7px; font-size: 12px; gap: 7px; }
}

/* DOM order is introduction -> section tabs -> controls/content. */
.game-frame .game-main .page-hero:has(+ .section-navigation) {
    margin-bottom: 0;
    /* Keep the same border box as standalone heroes: removing this pixel
       shifts the centered collapse button by half a pixel. */
    border-bottom: 1px solid transparent;
    border-radius: var(--page-radius) var(--page-radius) 0 0;
}
.game-frame :is(.page-hero, .clan-profile-hero) + .section-navigation {
    border-radius: 0 0 var(--page-radius) var(--page-radius);
}

.game-frame .clan-profile-hero { margin-bottom: 0; border-radius: var(--page-radius) var(--page-radius) 0 0; padding: 18px var(--layout-inset); }
.game-frame .clan-profile-hero > img { width: 76px; height: 76px; }
.game-frame .surface-context { margin-block: 0 var(--page-gap); }
.game-frame[data-page="gil"] .mail-grid { margin-top: var(--page-gap); }
.game-frame .account-settings-grid { margin-top: var(--page-gap); }
/* The shop scene follows the shared introduction and section navigation. */
.game-frame[data-page="quitte"] .quitte-stage { border-radius: var(--page-radius); }
@media (max-width: 600px) {
    .game-frame .section-navigation nav:has(> a:nth-child(4)) a { flex-direction: column; gap: 4px; padding: 8px 3px; font-size: 11px; min-height: 58px; }

    .game-frame .clan-profile-hero { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .game-frame .clan-profile-hero > img { width: 60px; height: 60px; }
}


/* Workshop pages keep their grouped tools; their introductions use the same scale. */
.game-frame .admin-workspace > .we-toolbar {
    padding: 12px var(--layout-inset);
    min-height: 94px;
    box-sizing: border-box;
    border: 1px solid var(--theme-line,#bddcde);
    border-radius: var(--page-radius);
    background: linear-gradient(120deg,var(--theme-surface,#f9fffd),var(--theme-soft,#e5f5f2));
    margin-bottom: var(--page-gap);
}
.game-frame .admin-workspace .admin-heading { gap: 16px; }
.game-frame .admin-workspace .admin-heading > img { width: 56px; height: 56px; }
.game-frame .admin-workspace .admin-heading h1 { font-size: 28px; margin: 3px 0; }
.game-frame .admin-workspace .admin-heading p { font-size: 13px; margin: 4px 0 8px; }
.game-frame .admin-workspace > .admin-tabs { gap: 8px; margin: var(--page-gap) 0; }
.game-frame .admin-workspace > .admin-tabs button { min-height: 44px; padding: 9px 12px; }
.game-frame .content-editor > .editor-context { margin-block: 12px; }
@media (max-width: 600px) {
    .game-frame .admin-workspace .admin-heading h1 { font-size: 26px; }
}

/* Mobile navigation keeps its touch targets beneath the shared page header. */
@media (max-width: 850px) {
    .game-frame .game-main .section-navigation {
        margin: 0 0 12px;
        padding: 12px;
    }
    .game-frame .game-main .section-navigation nav { gap: 8px; }
    .game-frame .game-main .section-navigation nav a {
        position: relative;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        height: 64px;
        min-height: 64px;
        box-sizing: border-box;
        padding: 5px 3px;
        font-size: 11px;
        line-height: 1.2;
        min-width: 0;
    }
    .game-frame .game-main .section-tab-icon { font-size: 19px; }


}

@media (max-width: 850px) {
    .game-frame .clan-profile-intro { display: flex; flex-direction: column-reverse; }
    .game-frame .clan-profile-intro .clan-profile-hero { border-radius: var(--page-radius); margin-bottom: 12px; }
}

@media (max-width: 850px) {
    .game-frame .section-navigation .comm-badge { position: absolute; top: 4px; right: 5px; margin: 0; font-size: 10px; }
}