/* ==========================================================
   MADSIX VISUAL SYSTEM V2 — STAGE 20B

   Purpose:
   - use modern wide-screen space without losing terminal identity
   - reduce unnecessary vertical scrolling
   - keep images visually dominant where appropriate
   - reduce repeated "database card" framing on public pages
   - provide one coordinated override layer instead of appending
     further page-specific patches to legacy style.css
   ========================================================== */

:root {
    --v2-content-max: 1560px;
    --v2-section-gap: 24px;
    --v2-grid-gap: 9px;
    --v2-panel-pad: 11px;
}


/* ----------------------------------------------------------
   WIDE DESKTOP FRAME
   ---------------------------------------------------------- */

body > header,
body > main,
.site-footer {
    width: min(
        var(--v2-content-max),
        calc(100% - 48px)
    );
}

body:not(.area-admin) {
    font-size: 13.5px;
}

body:not(.area-admin) main {
    padding-bottom: 42px;
}


/* ----------------------------------------------------------
   COMPACT TERMINAL CHROME
   ---------------------------------------------------------- */

body:not(.area-admin) .site-header {
    padding-top: 12px;
    margin-bottom: 20px;
}

body:not(.area-admin) .header-top {
    gap: 16px;
    padding-bottom: 10px;
}

body:not(.area-admin) .site-logo {
    width: 118px;
    max-height: 62px;
}

body:not(.area-admin) .brand {
    gap: 13px;
}

body:not(.area-admin) .brand-system {
    font-size: 0.82rem;
}

body:not(.area-admin) .brand-status {
    font-size: 0.7rem;
}

body:not(.area-admin) .main-nav a {
    padding: 7px 12px;
    font-size: 0.75rem;
}

body:not(.area-admin) .theme-toggle {
    padding: 6px 10px;
    font-size: 0.7rem;
}


/* ----------------------------------------------------------
   PUBLIC PAGE RHYTHM
   ---------------------------------------------------------- */

body:not(.area-admin) .section {
    margin-top: var(--v2-section-gap);
}

body:not(.area-admin) h2 {
    margin-bottom: 12px;
    padding-bottom: 5px;
    font-size: 1.08rem;
}

body:not(.area-admin) h3 {
    margin-bottom: 7px;
}

body:not(.area-admin) p {
    margin-top: 5px;
    margin-bottom: 7px;
}

body:not(.area-admin) .detail-card,
body:not(.area-admin) .game-card {
    padding: var(--v2-panel-pad);
    margin-bottom: 8px;
    box-shadow: none;
}

/* The :: section marker already carries the terminal language.
   Repeating SYS on every public card makes dense pages visually noisy. */
body:not(.area-admin) .detail-card::before,
body:not(.area-admin) .game-card::before {
    display: none;
}

body:not(.area-admin) .detail-card:hover,
body:not(.area-admin) .game-card:hover {
    box-shadow: inset 0 0 14px var(--screen-glow);
}


/* ----------------------------------------------------------
   GENERIC PUBLIC FORM DENSITY
   ---------------------------------------------------------- */

body:not(.area-admin) input,
body:not(.area-admin) select,
body:not(.area-admin) textarea {
    padding: 6px 8px;
    font-size: 0.79rem;
}

body:not(.area-admin) input[type="checkbox"] {
    width: auto;
}

body:not(.area-admin) button,
body:not(.area-admin) input[type="submit"],
body:not(.area-admin) input[type="button"],
body:not(.area-admin) input[type="reset"] {
    padding: 0.4rem 0.7rem;
}


/* ==========================================================
   HOME — DASHBOARD INSTEAD OF LONG VERTICAL STACK
   ========================================================== */

.area-home .home-intro {
    margin: 0;
    max-width: 720px;
    font-size: 0.82rem;
}

.area-home .home-dashboard {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(340px, 0.75fr);
    gap: 18px;
    align-items: start;
}

.area-home .home-dashboard > .section {
    margin-top: 20px;
}

.area-home .home-random-game {
    grid-template-columns:
        minmax(300px, 1.15fr)
        minmax(250px, 0.85fr);
    gap: 0;
    align-items: stretch;
}

.area-home .home-random-image {
    padding: 0;
    border-right: 0;
}

.area-home .home-random-image img {
    height: 310px;
    padding: 10px;
}

.area-home .home-random-info {
    min-height: 310px;
    padding: 18px;
    justify-content: center;
}

.area-home .home-random-info h3 {
    margin: 7px 0;
    font-size: 1.12rem;
}

.area-home .home-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.area-home .home-archive-card {
    min-height: 86px;
    padding: 10px 11px;
}

.area-home .home-archive-card strong {
    font-size: 1rem;
}

.area-home .home-archive-card span {
    font-size: 0.78rem;
}

.area-home .home-archive-card small {
    font-size: 0.66rem;
}

.area-home .home-archive-stats {
    margin-top: 9px;
    padding: 6px 0;
    font-size: 0.7rem;
}

.area-home .home-recent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.area-home .home-recent-card {
    min-height: 60px;
    padding: 10px 11px;
}


/* ==========================================================
   COLLECTION — DENSER STORE WALL
   ========================================================== */

body:not(.area-admin).page-collection .collection-filter-panel {
    margin-bottom: 12px;
}

body:not(.area-admin).page-collection .filters {
    grid-template-columns:
        minmax(220px, 1.35fr)
        repeat(3, minmax(135px, 0.8fr))
        minmax(145px, auto)
        auto;
    gap: 8px;
    align-items: end;
    padding: 10px 11px;
    margin-bottom: 12px;
    box-shadow: none;
}

body:not(.area-admin).page-collection .filters::before {
    display: none;
}

body:not(.area-admin).page-collection .filters > div {
    gap: 4px;
}

body:not(.area-admin).page-collection .filters > div:nth-of-type(5) {
    justify-content: flex-end;
    padding-bottom: 5px;
}

body:not(.area-admin).page-collection .filters > div:nth-of-type(5) label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

body:not(.area-admin).page-collection .filter-buttons {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 1px;
}

body:not(.area-admin).page-collection .collection-result-count {
    margin: 9px 0 7px;
    font-size: 0.76rem;
}

body:not(.area-admin).page-collection .collection-store-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(148px, 1fr)
        );
    gap: 8px;
}

body:not(.area-admin).page-collection .collection-store-card {
    box-shadow: none;
}

body:not(.area-admin).page-collection .collection-store-visual {
    aspect-ratio: 4 / 3;
    padding: 5px;
}

body:not(.area-admin).page-collection .collection-store-caption {
    min-height: 52px;
    padding: 7px 8px 8px;
}

body:not(.area-admin).page-collection .collection-store-title {
    font-size: 0.82rem;
}

body:not(.area-admin).page-collection .collection-store-meta {
    font-size: 0.68rem;
}

body:not(.area-admin).page-collection .collection-store-edition {
    font-size: 0.63rem;
}

body:not(.area-admin).page-collection .collection-store-placeholder {
    gap: 5px;
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            var(--screen-glow) 50%,
            transparent 100%
        );
}

body:not(.area-admin).page-collection .collection-store-placeholder span {
    font-size: 0.72rem;
}

body:not(.area-admin).page-collection .pagination {
    margin: 7px 0 11px;
    gap: 4px;
}

body:not(.area-admin).page-collection .pagination a,
body:not(.area-admin).page-collection .pagination-current,
body:not(.area-admin).page-collection .pagination-gap {
    min-width: 28px;
    padding: 4px 7px;
    font-size: 0.7rem;
}


/* ==========================================================
   GAME — PRODUCT / COLLECTOR INSPECTION LAYOUT V2
   ========================================================== */

body:not(.area-admin).page-game .game-backlink {
    margin: 0 0 10px;
    font-size: 0.72rem;
}

body:not(.area-admin).page-game .game-hero {
    display: grid;
    grid-template-columns:
        minmax(270px, 330px)
        minmax(0, 1fr);
    min-height: 300px;
    margin-bottom: 25px;
    border: 1px solid var(--border);
    background:
        linear-gradient(
            135deg,
            var(--panel) 0%,
            var(--bg-secondary) 100%
        );
    box-shadow:
        inset 0 0 24px var(--screen-glow);
}

body:not(.area-admin).page-game .game-hero-media {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 10px;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
}

body:not(.area-admin).page-game .game-hero-media > a {
    display: flex;
    min-height: 245px;
    flex: 1;
    align-items: center;
    justify-content: center;
}

body:not(.area-admin).page-game .game-hero-media img {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: contain;
}

body:not(.area-admin).page-game .game-hero-media-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.68rem;
}

body:not(.area-admin).page-game .game-hero-media-meta strong {
    color: var(--text-strong);
}

body:not(.area-admin).page-game .game-hero-placeholder {
    display: flex;
    min-height: 260px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--border);
    background:
        linear-gradient(
            135deg,
            transparent,
            var(--screen-glow),
            transparent
        );
    color: var(--text-muted);
    text-align: center;
}

body:not(.area-admin).page-game .game-hero-placeholder span {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.16em;
}

body:not(.area-admin).page-game .game-hero-copy {
    min-width: 0;
    padding: 19px 22px;
}

body:not(.area-admin).page-game .game-hero-copy-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.8fr);
    gap: 20px;
    min-height: 100%;
    align-items: center;
}

body:not(.area-admin).page-game .game-hero-primary {
    min-width: 0;
}

body:not(.area-admin) .page-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.12em;
}

body:not(.area-admin).page-game .game-hero-copy h1 {
    margin: 0 0 15px;
    color: var(--text-strong);
    font-family: var(--font-terminal);
    font-size: clamp(1.45rem, 2.35vw, 2.05rem);
    line-height: 1.08;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body:not(.area-admin).page-game .game-fact-strip {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
}

body:not(.area-admin).page-game .game-fact-strip > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-left: 2px solid var(--border-bright);
    background: var(--panel);
}

body:not(.area-admin).page-game .game-fact-strip small {
    color: var(--text-muted);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
}

body:not(.area-admin).page-game .game-fact-strip strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-hero-notes {
    margin-top: 13px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.5;
}

body:not(.area-admin).page-game .game-owned-panel {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-game .game-owned-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-game .game-owned-panel-header span {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

body:not(.area-admin).page-game .game-owned-panel-header strong {
    display: inline-flex;
    min-width: 26px;
    height: 23px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-bright);
    color: var(--active-text);
    background: var(--active);
    font-size: 0.7rem;
}

body:not(.area-admin).page-game .game-owned-copy-list {
    display: grid;
    gap: 6px;
}

body:not(.area-admin).page-game .game-owned-copy-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 2px 8px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--bg-secondary);
    text-decoration: none;
}

body:not(.area-admin).page-game .game-owned-copy-card:hover,
body:not(.area-admin).page-game .game-owned-copy-card:focus-visible {
    border-color: var(--border-bright);
    background: var(--panel-hover);
    outline: none;
}

body:not(.area-admin).page-game .game-owned-copy-index {
    grid-row: 1 / span 4;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.54rem;
    font-weight: bold;
    letter-spacing: 0.06em;
}

body:not(.area-admin).page-game .game-owned-copy-card strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-owned-copy-card > span:not(.game-owned-copy-index) {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.62rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-owned-copy-card .game-owned-copy-source {
    color: var(--text);
}

body:not(.area-admin).page-game .section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-game .section-heading-row h2 {
    flex: 1;
    margin-bottom: -1px;
    border-bottom: 0;
}

body:not(.area-admin).page-game .section-count {
    padding-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.67rem;
}

body:not(.area-admin).page-game .collection-copy-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

body:not(.area-admin).page-game .collection-item-detail {
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(
            110deg,
            var(--panel) 0%,
            var(--bg-secondary) 100%
        );
    box-shadow:
        inset 0 0 18px var(--screen-glow);
}

body:not(.area-admin).page-game .collection-item-detail--media-rich {
    grid-column: 1 / -1;
}

body:not(.area-admin).page-game .collection-item-layout {
    display: grid;
    grid-template-columns:
        minmax(280px, 1.05fr)
        minmax(230px, 0.85fr);
    min-height: 0;
}

body:not(.area-admin).page-game .collection-item-detail--media-rich .collection-item-layout {
    grid-template-columns:
        minmax(480px, 1.15fr)
        minmax(300px, 0.7fr);
}

body:not(.area-admin).page-game .collection-item-detail--no-media .collection-item-layout {
    grid-template-columns: 1fr;
}

body:not(.area-admin).page-game .collection-item-media-panel {
    min-width: 0;
    padding: 8px;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
}

body:not(.area-admin).page-game .collection-item-detail .media-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

body:not(.area-admin).page-game .collection-item-detail--media-rich .media-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

body:not(.area-admin).page-game .collection-item-detail .media-card,
body:not(.area-admin).page-game .collection-item-detail .media-card--front {
    min-width: 0;
    grid-column: auto;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-game .collection-item-detail .media-card--front {
    border-color: var(--border-bright);
}

body:not(.area-admin).page-game .collection-item-detail .media-card img,
body:not(.area-admin).page-game .collection-item-detail .media-card--front img {
    display: block;
    width: 100%;
    height: 128px;
    object-fit: contain;
}

body:not(.area-admin).page-game .collection-item-detail--media-rich .media-card img,
body:not(.area-admin).page-game .collection-item-detail--media-rich .media-card--front img {
    height: 150px;
}

body:not(.area-admin).page-game .collection-item-detail .media-card figcaption {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.61rem;
}

body:not(.area-admin).page-game .collection-item-info {
    min-width: 0;
    padding: 13px 14px;
}

body:not(.area-admin).page-game .collection-item-detail--no-media .collection-item-info {
    padding: 14px 16px;
}

body:not(.area-admin).page-game .collection-item-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-game .collection-item-index {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

body:not(.area-admin).page-game .collection-item-header h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 0.92rem;
}

body:not(.area-admin).page-game .collection-item-facts {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border: 1px solid var(--border);
}

body:not(.area-admin).page-game .collection-item-facts > div {
    min-width: 0;
    padding: 6px 7px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-game .collection-item-facts > div:nth-child(even) {
    border-right: 0;
}

body:not(.area-admin).page-game .collection-item-facts dt {
    color: var(--text-muted);
    font-size: 0.54rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body:not(.area-admin).page-game .collection-item-facts dd {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 0.68rem;
}

body:not(.area-admin).page-game .collection-item-provenance,
body:not(.area-admin).page-game .collection-reference-links {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

body:not(.area-admin).page-game .collection-item-subhead {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body:not(.area-admin).page-game .collection-item-provenance p {
    margin: 2px 0;
    font-size: 0.66rem;
}

body:not(.area-admin).page-game .collection-reference-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.area-admin).page-game .collection-reference-links li {
    font-size: 0.65rem;
}

body:not(.area-admin).page-game .gameplay-media-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 300px)
        );
    gap: 9px;
}

body:not(.area-admin).page-game .gameplay-media-image,
body:not(.area-admin).page-game .gameplay-media-video {
    height: 185px;
}



/* ==========================================================
   STAGE 20E — GAME RECORD POLISH
   ========================================================== */

body:not(.area-admin).page-game .game-hero-copy-grid--single {
    grid-template-columns: 1fr;
}

body:not(.area-admin).page-game .game-record-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 13px;
}

body:not(.area-admin).page-game .game-record-metrics > span {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

body:not(.area-admin).page-game .game-record-metrics small {
    color: var(--text-muted);
    font-size: 0.52rem;
    font-weight: bold;
    letter-spacing: 0.08em;
}

body:not(.area-admin).page-game .game-record-metrics strong {
    color: var(--text-strong);
    font-size: 0.78rem;
}

body:not(.area-admin).page-game .game-latest-play {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 10px;
    margin-top: 7px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-left: 2px solid var(--border-bright);
    color: var(--text);
    background: var(--panel);
    text-decoration: none;
}

body:not(.area-admin).page-game .game-latest-play:hover,
body:not(.area-admin).page-game .game-latest-play:focus-visible {
    border-color: var(--border-bright);
    background: var(--panel-hover);
    outline: none;
}

body:not(.area-admin).page-game .game-latest-play-label {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    padding-right: 9px;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.52rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-latest-play strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-latest-play > span:last-child {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-local-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: -13px 0 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-game .game-local-nav > a,
body:not(.area-admin).page-game .game-local-nav-stat {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.6rem;
    text-decoration: none;
}

body:not(.area-admin).page-game .game-local-nav > a:hover,
body:not(.area-admin).page-game .game-local-nav > a:focus-visible {
    color: var(--text-strong);
    background: var(--panel-hover);
    outline: none;
}

body:not(.area-admin).page-game .game-local-nav > a strong,
body:not(.area-admin).page-game .game-local-nav-stat strong {
    display: inline-flex;
    min-width: 22px;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    padding: 1px 5px;
    border: 1px solid var(--border);
    color: var(--text-strong);
    background: var(--bg-secondary);
    font-size: 0.62rem;
}

body:not(.area-admin).page-game .game-local-nav-stat {
    margin-left: auto;
    border-right: 0;
}

body:not(.area-admin).page-game #collection,
body:not(.area-admin).page-game #gameplay,
body:not(.area-admin).page-game #play-history {
    scroll-margin-top: 16px;
}

body:not(.area-admin).page-game .play-history-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(330px, 1fr)
        );
    gap: 10px;
    align-items: start;
}

body:not(.area-admin).page-game .play-history-entry {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(
            135deg,
            var(--panel) 0%,
            var(--bg-secondary) 100%
        );
    box-shadow:
        inset 0 0 16px var(--screen-glow);
}

body:not(.area-admin).page-game .play-history-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-game .play-history-entry-header > div {
    min-width: 0;
}

body:not(.area-admin).page-game .play-history-index {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.5rem;
    font-weight: bold;
    letter-spacing: 0.09em;
}

body:not(.area-admin).page-game .play-history-entry-header strong {
    display: block;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .play-history-entry-header time {
    flex: 0 0 auto;
    padding: 3px 5px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.58rem;
}

body:not(.area-admin).page-game .play-history-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: var(--border);
}

body:not(.area-admin).page-game .play-history-facts > div {
    min-width: 0;
    padding: 6px 8px;
    background: var(--bg-secondary);
}

body:not(.area-admin).page-game .play-history-facts dt {
    color: var(--text-muted);
    font-size: 0.5rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body:not(.area-admin).page-game .play-history-facts dd {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .play-history-context {
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-strong);
    font-size: 0.65rem;
    font-weight: bold;
}

body:not(.area-admin).page-game .play-history-notes {
    padding: 8px 10px 10px;
    color: var(--text);
    font-size: 0.65rem;
    line-height: 1.45;
}

body:not(.area-admin).page-game .game-empty-state {
    padding: 13px 14px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    background: var(--panel);
    font-size: 0.68rem;
}

/* ==========================================================
   HAULS — ADAPTIVE CARD BOARD
   ========================================================== */

body:not(.area-admin).page-hauls .hauls-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-hauls .hauls-page-heading h2 {
    margin-bottom: -1px;
    border-bottom: 0;
}

body:not(.area-admin).page-hauls .hauls-page-count {
    padding-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.67rem;
}

body:not(.area-admin).page-hauls .haul-board {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 15px;
    align-items: start;
}

body:not(.area-admin).page-hauls .haul-post {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(
            135deg,
            var(--panel) 0%,
            var(--bg-secondary) 100%
        );
    box-shadow:
        inset 0 0 20px var(--screen-glow);
}

body:not(.area-admin).page-hauls .haul-post--feature {
    grid-column: 1 / -1;
}

body:not(.area-admin).page-hauls .haul-post-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 11px 13px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-hauls .haul-post-kicker {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: bold;
    letter-spacing: 0.09em;
}

body:not(.area-admin).page-hauls .haul-post-header h2 {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-strong);
    font-size: 1rem;
    line-height: 1.2;
}

body:not(.area-admin).page-hauls .haul-post-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: 48%;
}

body:not(.area-admin).page-hauls .haul-post-meta span {
    padding: 3px 5px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.6rem;
    white-space: nowrap;
}

body:not(.area-admin).page-hauls .haul-post-body {
    display: grid;
    grid-template-columns:
        minmax(220px, 0.72fr)
        minmax(0, 1.28fr);
    min-width: 0;
}

body:not(.area-admin).page-hauls .haul-post--feature .haul-post-body {
    grid-template-columns:
        minmax(360px, 0.78fr)
        minmax(0, 1.22fr);
}

body:not(.area-admin).page-hauls .haul-post--no-media .haul-post-body {
    grid-template-columns: 1fr;
}

body:not(.area-admin).page-hauls .haul-post-media {
    min-width: 0;
    padding: 9px;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
}

body:not(.area-admin).page-hauls .haul-photo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    margin: 0;
}

body:not(.area-admin).page-hauls .haul-post--feature .haul-photo-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

body:not(.area-admin).page-hauls .haul-photo {
    min-width: 0;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-hauls .haul-photo-link {
    display: block;
}

body:not(.area-admin).page-hauls .haul-photo img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: var(--bg-secondary);
}

body:not(.area-admin).page-hauls .haul-post--feature .haul-photo img {
    height: 170px;
}

body:not(.area-admin).page-hauls .haul-photo figcaption {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.35;
}

body:not(.area-admin).page-hauls .haul-post-content {
    min-width: 0;
    padding: 11px 12px 12px;
}

body:not(.area-admin).page-hauls .haul-block {
    margin: 0 0 12px;
    padding: 0;
}

body:not(.area-admin).page-hauls .haul-block:last-child {
    margin-bottom: 0;
}

body:not(.area-admin).page-hauls .haul-block h3 {
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    color: var(--text-strong);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:not(.area-admin).page-hauls .haul-location-list,
body:not(.area-admin).page-hauls .haul-item-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body:not(.area-admin).page-hauls .haul-location-list {
    display: grid;
    gap: 5px;
}

body:not(.area-admin).page-hauls .haul-location {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-hauls .haul-location > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

body:not(.area-admin).page-hauls .haul-location strong {
    color: var(--text-strong);
    font-size: 0.68rem;
}

body:not(.area-admin).page-hauls .haul-location span,
body:not(.area-admin).page-hauls .haul-location > a {
    color: var(--text-muted);
    font-size: 0.6rem;
}

body:not(.area-admin).page-hauls .haul-item-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

body:not(.area-admin).page-hauls .haul-post--feature .haul-item-list {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

body:not(.area-admin).page-hauls .haul-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    padding: 5px 7px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-hauls .haul-item > a {
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-hauls .haul-item-meta,
body:not(.area-admin).page-hauls .haul-item-source {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-hauls .haul-item-source {
    color: var(--text);
}

body:not(.area-admin).page-hauls .haul-story {
    padding: 8px 9px;
    border-left: 2px solid var(--border-bright);
    background: var(--panel);
}

body:not(.area-admin).page-hauls .haul-story h3 {
    border: 0;
    margin-bottom: 4px;
    padding: 0;
}

body:not(.area-admin).page-hauls .haul-story p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.5;
}


/* ==========================================================
   VIRTUAL SHELF OVERVIEW
   ========================================================== */

body:not(.area-admin).page-shelves .shelf-overview-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(300px, 400px)
        );
    gap: 10px;
}

body:not(.area-admin).page-shelves .shelf-overview-card {
    padding: 9px;
}

body:not(.area-admin).page-shelves .shelf-overview-card img {
    aspect-ratio: 16 / 5;
}

body:not(.area-admin).page-shelves .shelf-overview-card h3 {
    margin: 7px 0 5px;
    font-size: 0.9rem;
}

body:not(.area-admin).page-shelves .shelf-overview-card p {
    font-size: 0.75rem;
}


/* ==========================================================
   HARDWARE & COLLECTIBLES — BASELINE CATALOGUE POLISH
   Full visual redesign remains Stage 20F.
   ========================================================== */

body:not(.area-admin).page-archive .section:first-of-type .admin-form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.3fr)
        repeat(3, minmax(150px, 0.8fr))
        auto;
    gap: 8px;
    align-items: end;
    max-width: none;
}

body:not(.area-admin).page-archive .section:first-of-type .admin-form > div {
    margin-bottom: 0;
}

body:not(.area-admin).page-archive .section:first-of-type .admin-actions {
    gap: 8px;
    padding-bottom: 1px;
}

body:not(.area-admin).page-archive .archive-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(180px, 1fr)
        );
    gap: 9px;
}

body:not(.area-admin).page-archive .archive-card {
    padding: 8px;
}

body:not(.area-admin).page-archive .archive-preview {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

body:not(.area-admin).page-archive .archive-card h3 {
    margin-top: 7px;
    margin-bottom: 5px;
    font-size: 0.86rem;
}

body:not(.area-admin).page-archive .archive-card p {
    margin: 3px 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}


/* ==========================================================
   PLAY HISTORY — DATA-DENSE BY DESIGN
   ========================================================== */

body:not(.area-admin).page-played .played-table th,
body:not(.area-admin).page-played .played-table td {
    padding: 6px 8px;
}

body:not(.area-admin).page-played .played-table {
    font-size: 0.78rem;
}

body:not(.area-admin).page-played .played-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}


/* ==========================================================
   WISHLIST — TEMPORARY COMPACT BASELINE
   Stage 20D will replace this with the visual gift catalogue.
   ========================================================== */

body:not(.area-admin).page-wishlist .collection-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(220px, 1fr)
        );
    gap: 9px;
}

body:not(.area-admin).page-wishlist .game-card {
    padding: 10px 11px;
}

body:not(.area-admin).page-wishlist .game-card h3 {
    font-size: 0.88rem;
    margin-bottom: 6px;
}

body:not(.area-admin).page-wishlist .game-card p {
    margin: 2px 0;
    font-size: 0.75rem;
}


/* ==========================================================
   ARCHIVE ITEM / GENERIC MEDIA DETAIL
   ========================================================== */

body:not(.area-admin).page-archive-item .archive-detail-media,
body:not(.area-admin).page-archive-item .media-grid {
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 280px)
        );
    gap: 9px;
}

body:not(.area-admin).page-archive-item .media-card {
    padding: 7px;
}

body:not(.area-admin).page-archive-item .archive-detail-media img,
body:not(.area-admin).page-archive-item .media-card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
}


/* ----------------------------------------------------------
   TABLE SCROLLING IS ALWAYS AVAILABLE WHEN NEEDED
   ---------------------------------------------------------- */

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}


/* ==========================================================
   BREAKPOINTS
   ========================================================== */

@media (max-width: 1180px) {

    body > header,
    body > main,
    .site-footer {
        width: calc(100% - 32px);
    }

    .area-home .home-dashboard {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .area-home .home-archive-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:not(.area-admin).page-collection .filters {
        grid-template-columns:
            repeat(3, minmax(150px, 1fr));
    }

    body:not(.area-admin).page-collection .filter-buttons {
        justify-content: flex-start;
    }

    body:not(.area-admin).page-archive .section:first-of-type .admin-form {
        grid-template-columns:
            repeat(2, minmax(180px, 1fr));
    }

    body:not(.area-admin).page-game .game-hero-copy-grid {
        grid-template-columns: 1fr;
        align-content: center;
    }

    body:not(.area-admin).page-game .collection-copy-grid {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-game .collection-item-detail--media-rich {
        grid-column: auto;
    }

    body:not(.area-admin).page-game .collection-item-detail--media-rich .collection-item-layout {
        grid-template-columns:
            minmax(360px, 1fr)
            minmax(260px, 0.72fr);
    }

    body:not(.area-admin).page-game .game-record-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-game .game-local-nav {
        flex-wrap: wrap;
    }

    body:not(.area-admin).page-game .game-local-nav-stat {
        margin-left: 0;
    }

    body:not(.area-admin).page-hauls .haul-board {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-hauls .haul-post--feature {
        grid-column: auto;
    }

}


@media (max-width: 700px) {

    body > header,
    body > main,
    .site-footer {
        width: calc(100% - 20px);
    }

    body:not(.area-admin) {
        font-size: 13px;
    }

    body:not(.area-admin) .site-header {
        margin-bottom: 16px;
    }

    body:not(.area-admin) .section {
        margin-top: 20px;
    }

    .area-home .home-random-game {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .area-home .home-random-image {
        border-right: 1px solid var(--border);
    }

    .area-home .home-random-image img {
        height: auto;
        max-height: 280px;
    }

    .area-home .home-random-info {
        min-height: 0;
        padding: 12px;
    }

    .area-home .home-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-home .home-recent-grid {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-collection .collection-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body:not(.area-admin).page-collection .collection-store-visual {
        aspect-ratio: 4 / 3;
    }

    body:not(.area-admin).page-collection .collection-filter-panel .filters {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-collection .collection-filter-panel .filters > div:first-child,
    body:not(.area-admin).page-collection .collection-filter-panel .filter-buttons {
        grid-column: auto;
    }

    body:not(.area-admin).page-game .game-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body:not(.area-admin).page-game .game-hero-media {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-game .game-hero-media > a {
        min-height: 0;
    }

    body:not(.area-admin).page-game .game-hero-media img {
        height: auto;
        max-height: 300px;
    }

    body:not(.area-admin).page-game .game-hero-copy {
        padding: 15px 13px;
    }

    body:not(.area-admin).page-game .game-hero-copy-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    body:not(.area-admin).page-game .game-hero-copy h1 {
        font-size: 1.35rem;
    }

    body:not(.area-admin).page-game .game-fact-strip {
        grid-template-columns: 1fr 1fr;
    }

    body:not(.area-admin).page-game .game-owned-copy-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    body:not(.area-admin).page-game .collection-copy-grid {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-game .collection-item-layout,
    body:not(.area-admin).page-game .collection-item-detail--media-rich .collection-item-layout {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-game .collection-item-media-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-game .collection-item-detail .media-grid,
    body:not(.area-admin).page-game .collection-item-detail--media-rich .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-game .collection-item-detail .media-card img,
    body:not(.area-admin).page-game .collection-item-detail .media-card--front img,
    body:not(.area-admin).page-game .collection-item-detail--media-rich .media-card img,
    body:not(.area-admin).page-game .collection-item-detail--media-rich .media-card--front img {
        height: 145px;
    }

    body:not(.area-admin).page-game .collection-item-info {
        padding: 12px;
    }

    body:not(.area-admin).page-game .collection-item-facts {
        grid-template-columns: 1fr 1fr;
    }

    body:not(.area-admin).page-game .gameplay-media-grid {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-game .gameplay-media-image,
    body:not(.area-admin).page-game .gameplay-media-video {
        height: auto;
        max-height: 300px;
    }

    body:not(.area-admin).page-game .game-record-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-game .game-latest-play {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-game .game-latest-play-label {
        grid-row: auto;
        padding-right: 0;
        padding-bottom: 4px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-game .game-local-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: -10px;
    }

    body:not(.area-admin).page-game .game-local-nav > a,
    body:not(.area-admin).page-game .game-local-nav-stat {
        justify-content: space-between;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-game .game-local-nav-stat {
        margin-left: 0;
    }

    body:not(.area-admin).page-game .play-history-grid {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-game .play-history-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-hauls .hauls-page-heading,
    body:not(.area-admin).page-hauls .haul-post-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body:not(.area-admin).page-hauls .haul-post-meta {
        justify-content: flex-start;
        max-width: none;
    }

    body:not(.area-admin).page-hauls .haul-post-body,
    body:not(.area-admin).page-hauls .haul-post--feature .haul-post-body {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-hauls .haul-post-media {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-hauls .haul-post--feature .haul-photo-grid {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-hauls .haul-photo img,
    body:not(.area-admin).page-hauls .haul-post--feature .haul-photo img {
        height: auto;
        max-height: 300px;
    }

    body:not(.area-admin).page-hauls .haul-post--feature .haul-item-list {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-archive .section:first-of-type .admin-form {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-archive .archive-preview {
        max-height: 300px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .collection-store-card,
    .collection-store-visual img,
    .home-random-image img {
        transition: none;
    }

}


/* ==========================================================
   STAGE 20C — THREE-THEME SYSTEM
   ========================================================== */

.theme-toggle {
    min-width: 154px;
    transition:
        background 120ms ease,
        color 120ms ease,
        border-color 120ms ease;
}

/* Keep the long insider label stable without shifting the header. */
:root[data-theme="progear"] .theme-toggle {
    letter-spacing: 0.035em;
}

/* PRO-GEAR SPEC is meant to feel premium, not like yellow terminal text. */
:root[data-theme="progear"] body {
    background:
        radial-gradient(
            ellipse at 48% 16%,
            #17130c 0%,
            var(--bg-secondary) 28%,
            var(--bg) 74%
        );
}

:root[data-theme="progear"] .site-header,
:root[data-theme="progear"] .section > h2,
:root[data-theme="progear"] .site-footer {
    border-color: var(--border);
}

:root[data-theme="progear"] .main-nav a.active,
:root[data-theme="progear"] .theme-toggle:hover,
:root[data-theme="progear"] .wishlist-acquire-link:hover,
:root[data-theme="progear"] .wishlist-acquire-link:focus-visible {
    background: var(--active);
    color: var(--active-text);
}

:root[data-theme="progear"] .detail-card:hover,
:root[data-theme="progear"] .game-card:hover {
    box-shadow:
        inset 0 0 0 1px rgba(240, 211, 132, 0.08),
        inset 0 0 18px var(--screen-glow);
}

/* SCPH uses PlayStation-grey as the base and reserves the controller
   colours for small interface accents rather than flooding the page. */
:root[data-theme="scph"] body {
    background:
        radial-gradient(
            ellipse at 48% 12%,
            #d4d4cf 0%,
            var(--bg-secondary) 34%,
            var(--bg) 78%
        );
}

:root[data-theme="scph"] body::before {
    opacity: 0.34;
}

:root[data-theme="scph"] body::after {
    opacity: 0.46;
}

/* In SCPH, the normal terminal section marker becomes a subtle
   controller-button signature. */
:root[data-theme="scph"] h2::before {
    content: "□ × ○ △  ";
    display: inline-block;
    background:
        linear-gradient(
            90deg,
            var(--ps-square) 0 22%,
            var(--ps-cross) 26% 47%,
            var(--ps-circle) 52% 72%,
            var(--ps-triangle) 78% 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    letter-spacing: 0.025em;
}

/* Cycle the four controller colours through navigation arrows. */
:root[data-theme="scph"] .main-nav a:nth-child(4n + 1)::before {
    color: var(--ps-square);
}

:root[data-theme="scph"] .main-nav a:nth-child(4n + 2)::before {
    color: var(--ps-cross);
}

:root[data-theme="scph"] .main-nav a:nth-child(4n + 3)::before {
    color: var(--ps-circle);
}

:root[data-theme="scph"] .main-nav a:nth-child(4n)::before {
    color: var(--ps-triangle);
}

:root[data-theme="scph"] .main-nav a.active::before {
    color: var(--active-text);
}

/* The theme control itself gets the four-button accent without turning
   the whole interface into a rainbow. */
:root[data-theme="scph"] .theme-toggle {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--button-bg), var(--button-bg)) padding-box,
        linear-gradient(
            90deg,
            var(--ps-square),
            var(--ps-cross),
            var(--ps-circle),
            var(--ps-triangle)
        ) border-box;
}

:root[data-theme="scph"] .theme-toggle:hover {
    color: #f5f5f2;
    background:
        linear-gradient(#41464e, #41464e) padding-box,
        linear-gradient(
            90deg,
            var(--ps-square),
            var(--ps-cross),
            var(--ps-circle),
            var(--ps-triangle)
        ) border-box;
}

:root[data-theme="scph"] .detail-card:hover,
:root[data-theme="scph"] .game-card:hover,
:root[data-theme="scph"] .collection-store-card:hover {
    box-shadow:
        inset 0 0 0 1px rgba(53, 104, 173, 0.12),
        0 2px 8px rgba(37, 41, 48, 0.08);
}

/* GT65 keeps the phosphor identity but is intentionally less aggressive
   than the former AS/400 mode. */
:root[data-theme="gt65"] body::before {
    opacity: 0.82;
}

:root[data-theme="gt65"] body::after {
    opacity: 0.78;
}

/* A500 stays crisp and almost paper-like. */
:root[data-theme="a500"] body::before {
    opacity: 0.72;
}

:root[data-theme="a500"] body::after {
    opacity: 0.68;
}

@media (max-width: 700px) {
    .theme-toggle {
        min-width: 0;
    }
}

/* ==========================================================
   STAGE 20D — WISHLIST SHOWCASE / GIFT CATALOGUE
   ========================================================== */

body:not(.area-admin).page-wishlist .wishlist-showcase-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-header h2 {
    margin-bottom: 5px;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-header p {
    max-width: 760px;
    margin: 0;
    color: var(--text-muted);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-count {
    padding: 5px 8px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-controls {
    margin-top: 0;
    margin-bottom: 15px;
}

body:not(.area-admin).page-wishlist .wishlist-public-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.35fr)
        repeat(6, minmax(130px, 0.72fr))
        auto;
    gap: 8px;
    align-items: end;
    padding: 10px 11px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-wishlist .wishlist-public-filters > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body:not(.area-admin).page-wishlist .wishlist-public-filter-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(235px, 1fr)
        );
    gap: 11px;
    align-items: stretch;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    background:
        linear-gradient(
            180deg,
            var(--panel) 0%,
            var(--bg-secondary) 100%
        );
    box-shadow: inset 0 0 18px var(--screen-glow);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-card.priority-high {
    border-color: var(--border-bright);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-visual {
    position: relative;
    display: flex;
    aspect-ratio: 5 / 4;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    text-decoration: none;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 140ms ease;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-card:hover .wishlist-showcase-visual img,
body:not(.area-admin).page-wishlist .wishlist-showcase-card:focus-within .wishlist-showcase-visual img {
    transform: scale(1.025);
}

body:not(.area-admin).page-wishlist .wishlist-reference-placeholder {
    display: flex;
    width: 76%;
    height: 78%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            var(--screen-glow) 50%,
            transparent 100%
        );
    color: var(--text);
    text-align: center;
}

body:not(.area-admin).page-wishlist .wishlist-reference-placeholder::before {
    content: "W";
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid var(--border-bright);
    font-size: 1.4rem;
    font-weight: bold;
}

body:not(.area-admin).page-wishlist .wishlist-reference-placeholder small {
    color: var(--text-muted);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
}

body:not(.area-admin).page-wishlist .wishlist-reference-placeholder strong {
    font-size: 0.8rem;
}

body:not(.area-admin).page-wishlist .wishlist-reference-placeholder span {
    color: var(--text-muted);
    font-size: 0.67rem;
}

body:not(.area-admin).page-wishlist .wishlist-priority-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 4px 6px;
    border: 1px solid var(--border-bright);
    background: var(--bg);
    color: var(--text-strong);
    font-size: 0.58rem;
    font-weight: bold;
    letter-spacing: 0.07em;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px 11px;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-body > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-body h3 {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.25;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-body > header > span {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.64rem;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-release {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    font-size: 0.72rem;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-release span {
    color: var(--text-muted);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-specs > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-specs small {
    color: var(--text-muted);
    font-size: 0.54rem;
    letter-spacing: 0.08em;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-specs strong {
    overflow: hidden;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-price-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 7px;
    border-left: 3px solid var(--border);
    background: var(--screen-glow);
    font-size: 0.62rem;
    font-weight: bold;
    letter-spacing: 0.04em;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-price-state span {
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: normal;
    letter-spacing: 0;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-price-state.state-good {
    border-color: var(--status-good);
    background: var(--status-good-bg);
    color: var(--status-good);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-price-state.state-near {
    border-color: var(--status-near);
    background: var(--status-near-bg);
    color: var(--status-near);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-price-state.state-above {
    border-color: var(--status-above);
    background: var(--status-above-bg);
    color: var(--status-above);
}

body:not(.area-admin).page-wishlist .wishlist-showcase-price-state.state-good span,
body:not(.area-admin).page-wishlist .wishlist-showcase-price-state.state-near span,
body:not(.area-admin).page-wishlist .wishlist-showcase-price-state.state-above span {
    color: currentColor;
    opacity: 0.8;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-descriptor {
    margin: -3px 0 0;
    color: var(--text-muted);
    font-size: 0.64rem;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-card.kind-hardware .wishlist-reference-placeholder::before {
    content: "HW";
    width: 58px;
}

.area-admin.page-archive-wishlist-edit .wishlist-admin-hardware-preview {
    display: inline-flex;
    width: 220px;
    min-height: 140px;
    align-items: center;
    justify-content: center;
}

.area-admin.page-archive-wishlist-edit .wishlist-admin-hardware-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
}

body:not(.area-admin).page-wishlist .wishlist-showcase-note {
    margin-top: auto;
    padding-top: 7px;
    border-top: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 0.68rem;
    line-height: 1.45;
}

body:not(.area-admin).page-wishlist .wishlist-order-form {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--border);
}

body:not(.area-admin).page-wishlist .wishlist-order-button {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

body:not(.area-admin).page-wishlist .wishlist-order-button:hover,
body:not(.area-admin).page-wishlist .wishlist-order-button:focus-visible {
    background: var(--active);
    color: var(--active-text);
}

body:not(.area-admin).page-wishlist .wishlist-order-help {
    color: var(--text-muted);
    font-size: 0.56rem;
    line-height: 1.4;
}

body:not(.area-admin).page-wishlist .wishlist-order-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

body:not(.area-admin).page-wishlist .wishlist-public-action-message {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--status-good);
    background: var(--status-good-bg);
    color: var(--status-good);
    font-size: 0.7rem;
}

body:not(.area-admin).page-wishlist .wishlist-public-action-message--muted {
    border-left-color: var(--border);
    background: var(--screen-glow);
    color: var(--text-muted);
}


/* ----------------------------------------------------------
   ADMIN — WISHLIST TARGET / REFERENCE COVER MANAGEMENT
   ---------------------------------------------------------- */

.area-admin.page-wishlist-targets .wishlist-admin-target-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.area-admin.page-wishlist-targets .wishlist-admin-target-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.area-admin.page-wishlist-targets .wishlist-admin-target-preview {
    display: flex;
    aspect-ratio: 4 / 3;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.64rem;
    text-align: center;
}

.area-admin.page-wishlist-targets .wishlist-admin-target-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.area-admin.page-wishlist-prices .wishlist-target-card-v2 {
    min-width: 0;
}

.area-admin.page-wishlist-prices .wishlist-target-card-top {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin-bottom: 10px;
}

.area-admin.page-wishlist-prices .wishlist-target-admin-cover {
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.55rem;
}

.area-admin.page-wishlist-prices .wishlist-target-admin-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.area-admin.page-wishlist-prices .wishlist-price-filter-actions {
    margin-bottom: 10px;
}


@media (max-width: 900px) {

    body:not(.area-admin).page-wishlist .wishlist-public-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-wishlist .wishlist-public-filter-actions {
        grid-column: 1 / -1;
    }

    .area-admin.page-wishlist-targets .wishlist-admin-target-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    body:not(.area-admin).page-wishlist .wishlist-showcase-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body:not(.area-admin).page-wishlist .wishlist-public-filters {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-wishlist .wishlist-public-filter-actions {
        grid-column: auto;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-visual {
        padding: 5px;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-body {
        gap: 6px;
        padding: 8px;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-specs {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-note {
        display: none;
    }

    .area-admin.page-wishlist-targets .wishlist-admin-target-card {
        grid-template-columns: 1fr;
    }

    .area-admin.page-wishlist-targets .wishlist-admin-target-preview {
        max-width: 280px;
    }
}


/* ==========================================================
   STAGE 20F — HARDWARE / HAULS / PLAYED FINAL POLISH
   ========================================================== */

/* ----------------------------------------------------------
   HARDWARE & COLLECTIBLES — CATALOGUE
   ---------------------------------------------------------- */

body:not(.area-admin).page-archive .archive-catalogue-head {
    margin-top: 0;
}

body:not(.area-admin).page-archive .archive-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-archive .archive-page-heading h2 {
    margin: 2px 0 4px;
    padding: 0;
    border: 0;
}

body:not(.area-admin).page-archive .archive-page-heading p {
    max-width: 720px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

body:not(.area-admin).page-archive .archive-page-total {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    gap: 7px;
    padding-bottom: 2px;
    color: var(--text-muted);
    font-size: 0.62rem;
    white-space: nowrap;
}

body:not(.area-admin).page-archive .archive-page-total strong {
    color: var(--text-strong);
    font-size: 1.15rem;
}

body:not(.area-admin).page-archive .archive-category-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-archive .archive-category-rail a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-right: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

body:not(.area-admin).page-archive .archive-category-rail a:last-child {
    border-right: 0;
}

body:not(.area-admin).page-archive .archive-category-rail a:hover,
body:not(.area-admin).page-archive .archive-category-rail a:focus-visible,
body:not(.area-admin).page-archive .archive-category-rail a.is-active {
    color: var(--active-text);
    background: var(--active);
    outline: none;
}

body:not(.area-admin).page-archive .archive-category-rail span {
    overflow: hidden;
    font-size: 0.67rem;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-archive .archive-category-rail strong {
    flex: 0 0 auto;
    font-size: 0.66rem;
}

body:not(.area-admin).page-archive .archive-filter-panel {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.45fr)
        minmax(155px, 0.8fr)
        minmax(185px, 1fr)
        minmax(155px, 0.8fr)
        auto;
    gap: 8px;
    align-items: end;
    padding: 9px 10px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-archive .archive-filter-panel > div {
    min-width: 0;
    margin: 0;
}

body:not(.area-admin).page-archive .archive-filter-panel label {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.area-admin).page-archive .archive-filter-panel input,
body:not(.area-admin).page-archive .archive-filter-panel select {
    width: 100%;
    min-height: 34px;
}

body:not(.area-admin).page-archive .archive-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body:not(.area-admin).page-archive .archive-filter-actions button {
    width: auto;
    min-height: 34px;
}

body:not(.area-admin).page-archive .archive-filter-actions a {
    font-size: 0.66rem;
}

body:not(.area-admin).page-archive .archive-results-heading,
body:not(.area-admin).page-archive-item .archive-item-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-archive .archive-results-heading h2,
body:not(.area-admin).page-archive-item .archive-item-section-heading h2 {
    margin-bottom: -1px;
    border-bottom: 0;
}

body:not(.area-admin).page-archive .archive-results-heading span,
body:not(.area-admin).page-archive-item .archive-item-section-heading span {
    padding-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.62rem;
}

body:not(.area-admin).page-archive .archive-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    gap: 10px;
}

body:not(.area-admin).page-archive .archive-store-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--panel);
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

body:not(.area-admin).page-archive .archive-store-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-bright);
    box-shadow: 0 5px 18px var(--screen-glow);
}

body:not(.area-admin).page-archive .archive-store-link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

body:not(.area-admin).page-archive .archive-store-visual {
    display: flex;
    aspect-ratio: 4 / 3;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 7px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

body:not(.area-admin).page-archive .archive-store-visual .archive-preview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 150ms ease;
}

body:not(.area-admin).page-archive .archive-store-card:hover .archive-preview {
    transform: scale(1.025);
}

body:not(.area-admin).page-archive .archive-store-placeholder {
    display: flex;
    width: 76%;
    height: 76%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background:
        linear-gradient(135deg, var(--panel), var(--bg-secondary));
    text-align: center;
}

body:not(.area-admin).page-archive .archive-store-placeholder strong {
    color: var(--text-strong);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
}

body:not(.area-admin).page-archive .archive-store-placeholder span {
    font-size: 0.55rem;
    letter-spacing: 0.08em;
}

body:not(.area-admin).page-archive .archive-store-placeholder small {
    max-width: 90%;
    font-size: 0.58rem;
}

body:not(.area-admin).page-archive .archive-store-copy {
    display: flex;
    min-height: 126px;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px 10px;
}

body:not(.area-admin).page-archive .archive-store-type {
    color: var(--text-muted);
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body:not(.area-admin).page-archive .archive-store-copy h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 0.84rem;
    line-height: 1.3;
}

body:not(.area-admin).page-archive .archive-store-maker {
    margin: 0;
    color: var(--text);
    font-size: 0.66rem;
}

body:not(.area-admin).page-archive .archive-store-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

body:not(.area-admin).page-archive .archive-store-meta span {
    padding: 2px 5px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.56rem;
}

body:not(.area-admin).page-archive .archive-empty-state,
body:not(.area-admin).page-played .played-empty-state {
    padding: 18px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    background: var(--panel);
    font-size: 0.7rem;
}


/* ----------------------------------------------------------
   HARDWARE & COLLECTIBLES — DETAIL / INSPECTION VIEW
   ---------------------------------------------------------- */

body:not(.area-admin).page-archive-item .archive-detail-back {
    margin: 0 0 9px;
    font-size: 0.66rem;
}

body:not(.area-admin).page-archive-item .archive-item-record {
    margin-top: 0;
}

body:not(.area-admin).page-archive-item .archive-item-hero {
    display: grid;
    grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
    min-height: 360px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-archive-item .archive-item-hero--no-media {
    grid-template-columns: 1fr;
    min-height: 0;
}

body:not(.area-admin).page-archive-item .archive-item-hero-media {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
}

body:not(.area-admin).page-archive-item .archive-item-hero-media a {
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
}

body:not(.area-admin).page-archive-item .archive-item-hero-media img {
    display: block;
    width: 100%;
    height: 390px;
    object-fit: contain;
}

body:not(.area-admin).page-archive-item .archive-item-hero-media > span {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 0.58rem;
    text-transform: uppercase;
}

body:not(.area-admin).page-archive-item .archive-item-hero-copy {
    display: flex;
    min-width: 0;
    justify-content: center;
    flex-direction: column;
    padding: 28px 30px;
}

body:not(.area-admin).page-archive-item .archive-item-hero-copy h1 {
    margin: 5px 0 6px;
    color: var(--text-strong);
    font-size: clamp(1.45rem, 2vw, 2.25rem);
    line-height: 1.08;
}

body:not(.area-admin).page-archive-item .archive-item-classification {
    margin: 0 0 17px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

body:not(.area-admin).page-archive-item .archive-item-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

body:not(.area-admin).page-archive-item .archive-item-facts > div {
    min-width: 0;
    padding: 8px 9px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-archive-item .archive-item-facts dt,
body:not(.area-admin).page-archive-item .archive-detail-grid dt {
    color: var(--text-muted);
    font-size: 0.52rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.area-admin).page-archive-item .archive-item-facts dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.68rem;
    text-overflow: ellipsis;
}

body:not(.area-admin).page-archive-item .archive-item-edition,
body:not(.area-admin).page-archive-item .archive-item-acquisition {
    margin: 11px 0 0;
    padding: 7px 9px;
    border-left: 2px solid var(--border-bright);
    color: var(--text);
    background: var(--bg-secondary);
    font-size: 0.67rem;
}

body:not(.area-admin).page-archive-item .archive-item-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 240px));
    gap: 8px;
}

body:not(.area-admin).page-archive-item .archive-item-gallery .media-card {
    margin: 0;
    padding: 6px;
}

body:not(.area-admin).page-archive-item .archive-item-gallery .media-card img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: var(--bg-secondary);
}

body:not(.area-admin).page-archive-item .archive-item-gallery figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.58rem;
}

body:not(.area-admin).page-archive-item .archive-item-gallery figcaption strong {
    color: var(--text-strong);
    font-size: 0.62rem;
}

body:not(.area-admin).page-archive-item .archive-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

body:not(.area-admin).page-archive-item .archive-detail-grid > div {
    padding: 9px 10px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-archive-item .archive-detail-grid dd {
    margin: 4px 0 0;
    color: var(--text);
    font-size: 0.68rem;
    line-height: 1.45;
}

body:not(.area-admin).page-archive-item .archive-item-notes {
    padding: 11px 13px;
    border-left: 2px solid var(--border-bright);
    background: var(--panel);
    color: var(--text);
    font-size: 0.7rem;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   HAULS — FINAL INFORMATION DENSITY
   ---------------------------------------------------------- */

body:not(.area-admin).page-hauls .haul-summary-strip,
body:not(.area-admin).page-played .played-summary-strip {
    display: flex;
    align-items: stretch;
    margin: -5px 0 13px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-hauls .haul-summary-strip > div,
body:not(.area-admin).page-played .played-summary-strip > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    padding: 6px 9px;
    border-right: 1px solid var(--border);
}

body:not(.area-admin).page-hauls .haul-summary-strip > div:last-child,
body:not(.area-admin).page-played .played-summary-strip > div:last-child {
    border-right: 0;
}

body:not(.area-admin).page-hauls .haul-summary-strip strong,
body:not(.area-admin).page-played .played-summary-strip strong {
    color: var(--text-strong);
    font-size: 0.78rem;
}

body:not(.area-admin).page-hauls .haul-summary-strip span,
body:not(.area-admin).page-played .played-summary-strip span {
    color: var(--text-muted);
    font-size: 0.56rem;
    white-space: nowrap;
}

body:not(.area-admin).page-hauls .haul-post {
    position: relative;
    transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

body:not(.area-admin).page-hauls .haul-post::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--border-bright);
    content: "";
    opacity: 0.55;
}

body:not(.area-admin).page-hauls .haul-post:hover {
    transform: translateY(-1px);
    border-color: var(--border-bright);
    box-shadow: 0 6px 22px var(--screen-glow);
}

body:not(.area-admin).page-hauls .haul-photo img {
    aspect-ratio: 4 / 3;
    height: auto;
}

body:not(.area-admin).page-hauls .haul-post--feature .haul-photo img {
    aspect-ratio: 16 / 10;
    height: auto;
}

body:not(.area-admin).page-hauls .haul-item,
body:not(.area-admin).page-hauls .haul-location {
    transition:
        border-color 100ms ease,
        background 100ms ease;
}

body:not(.area-admin).page-hauls .haul-item:hover,
body:not(.area-admin).page-hauls .haul-location:hover {
    border-color: var(--border-bright);
    background: var(--bg-secondary);
}


/* ----------------------------------------------------------
   PLAY HISTORY — VISUAL DATA TABLE
   ---------------------------------------------------------- */

body:not(.area-admin).page-played .played-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

body:not(.area-admin).page-played .played-page-heading h2 {
    margin: 2px 0 0;
    padding: 0;
    border: 0;
}

body:not(.area-admin).page-played .played-page-heading .played-summary-strip {
    flex: 0 0 auto;
    margin: 0;
}

body:not(.area-admin).page-played .played-filter-panel {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.6fr)
        minmax(130px, 0.6fr)
        minmax(180px, 0.9fr)
        auto;
    gap: 8px;
    align-items: end;
    padding: 9px 10px;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-played .played-filter-panel > div {
    min-width: 0;
    margin: 0;
}

body:not(.area-admin).page-played .played-filter-panel label {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.area-admin).page-played .played-filter-panel input,
body:not(.area-admin).page-played .played-filter-panel select {
    width: 100%;
    min-height: 34px;
}

body:not(.area-admin).page-played .played-filter-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body:not(.area-admin).page-played .played-filter-actions button {
    width: auto;
    min-height: 34px;
}

body:not(.area-admin).page-played .played-filter-actions a {
    font-size: 0.66rem;
}

body:not(.area-admin).page-played .played-results-section {
    margin-top: 14px;
}

body:not(.area-admin).page-played .played-table-wrap {
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-played .played-table-v2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

body:not(.area-admin).page-played .played-table-v2 thead {
    background: var(--bg-secondary);
}

body:not(.area-admin).page-played .played-table-v2 th {
    padding: 6px 8px;
    color: var(--text-muted);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.area-admin).page-played .played-table-v2 td {
    padding: 6px 8px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

body:not(.area-admin).page-played .played-table-v2 tbody tr:nth-child(even) {
    background: var(--screen-glow);
}

body:not(.area-admin).page-played .played-table-v2 tbody tr:hover {
    background: var(--bg-secondary);
}

body:not(.area-admin).page-played .played-game-link {
    display: grid;
    min-width: 215px;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--text-strong);
    text-decoration: none;
}

body:not(.area-admin).page-played .played-game-thumb {
    display: flex;
    width: 72px;
    height: 52px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.5rem;
}

body:not(.area-admin).page-played .played-game-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body:not(.area-admin).page-played .played-game-link strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
}

body:not(.area-admin).page-played .played-rating-cell {
    white-space: nowrap;
}

body:not(.area-admin).page-played .played-rating-cell strong {
    color: var(--text-strong);
    font-size: 0.76rem;
}

body:not(.area-admin).page-played .played-rating-cell span {
    color: var(--text-muted);
    font-size: 0.58rem;
}

body:not(.area-admin).page-played .played-notes-cell {
    min-width: 220px;
    max-width: 440px;
    color: var(--text-muted);
    line-height: 1.4;
}


/* ----------------------------------------------------------
   STAGE 20F RESPONSIVE SAFETY
   Full mobile visual audit is still Stage 20G.
   ---------------------------------------------------------- */

@media (max-width: 1180px) {

    body:not(.area-admin).page-archive .archive-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-archive .archive-filter-actions {
        grid-column: 1 / -1;
    }

    body:not(.area-admin).page-archive-item .archive-item-hero {
        grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    }

    body:not(.area-admin).page-archive-item .archive-item-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-played .played-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 700px) {

    body:not(.area-admin).page-archive .archive-page-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    body:not(.area-admin).page-archive .archive-category-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-archive .archive-category-rail a:nth-child(2) {
        border-right: 0;
    }

    body:not(.area-admin).page-archive .archive-category-rail a:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-archive .archive-filter-panel,
    body:not(.area-admin).page-played .played-filter-panel {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-archive .archive-filter-actions {
        grid-column: auto;
    }

    body:not(.area-admin).page-archive .archive-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body:not(.area-admin).page-archive .archive-store-copy {
        min-height: 112px;
        padding: 8px;
    }

    body:not(.area-admin).page-archive .archive-store-meta span:nth-child(n+3) {
        display: none;
    }

    body:not(.area-admin).page-archive-item .archive-item-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body:not(.area-admin).page-archive-item .archive-item-hero-media {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-archive-item .archive-item-hero-media a {
        min-height: 0;
    }

    body:not(.area-admin).page-archive-item .archive-item-hero-media img {
        height: auto;
        max-height: 320px;
    }

    body:not(.area-admin).page-archive-item .archive-item-hero-copy {
        padding: 15px 13px;
    }

    body:not(.area-admin).page-archive-item .archive-item-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-archive-item .archive-item-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-archive-item .archive-item-gallery .media-card img {
        height: 135px;
    }

    body:not(.area-admin).page-hauls .haul-summary-strip,
    body:not(.area-admin).page-played .played-summary-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.area-admin).page-hauls .haul-summary-strip > div:nth-child(2),
    body:not(.area-admin).page-played .played-summary-strip > div:nth-child(2) {
        border-right: 0;
    }

    body:not(.area-admin).page-hauls .haul-summary-strip > div:nth-child(-n+2),
    body:not(.area-admin).page-played .played-summary-strip > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

    body:not(.area-admin).page-played .played-filter-actions {
        justify-content: flex-start;
    }

}

/* ==========================================================
   STAGE 20F.1 — WISHLIST SORT / ADMIN BULK TOOLS
   ========================================================== */

.area-admin.page-wishlist .wishlist-admin-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 10px 0 12px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.area-admin.page-wishlist .wishlist-admin-bulk-bar strong {
    margin-right: 4px;
}

.area-admin.page-wishlist .wishlist-admin-bulk-bar button,
.area-admin.page-wishlist .wishlist-admin-bulk-bar select {
    width: auto;
}

.area-admin.page-wishlist .wishlist-admin-select-col {
    width: 62px;
    text-align: center;
}

.area-admin.page-wishlist .wishlist-admin-select-col input {
    width: auto;
}

@media (max-width: 1180px) {
    body:not(.area-admin).page-wishlist .wishlist-public-filters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body:not(.area-admin).page-wishlist .wishlist-public-filter-actions {
        grid-column: 1 / -1;
    }
}



/* ==================================================
   STAGE 20F.3 — COMPACT REVERSIBLE WISHLIST SORT
   ================================================== */

body:not(.area-admin).page-wishlist .wishlist-sort-inputs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 4px;
    align-items: stretch;
}

body:not(.area-admin).page-wishlist .wishlist-sort-direction {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 100%;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

body:not(.area-admin).page-wishlist .wishlist-sort-direction:disabled {
    opacity: 0.35;
    cursor: default;
}

body:not(.area-admin).page-wishlist .wishlist-sort-direction span {
    display: block;
    transform: translateY(-1px);
}

@media (min-width: 1181px) {
    body:not(.area-admin).page-wishlist .wishlist-public-filters {
        grid-template-columns:
            minmax(220px, 1.35fr)
            repeat(5, minmax(120px, 0.7fr))
            minmax(150px, 0.78fr)
            auto;
    }
}

/* ==========================================================
   STAGE 20F.4 — UNIFIED BROWSE / ADMIN UX
   ========================================================== */

.browse-toolbar,
.filters.browse-toolbar,
.archive-filter-panel.browse-toolbar,
.played-filter-panel.browse-toolbar,
.wishlist-public-filters.browse-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 7px;
    align-items: end;
    margin: 10px 0 8px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.browse-toolbar > div,
.browse-toolbar .filter-field,
.browse-toolbar .sort-field {
    min-width: 0;
    margin: 0;
}

.browse-toolbar label {
    display: block;
    margin: 0 0 3px;
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.browse-toolbar input[type="text"],
.browse-toolbar input[type="search"],
.browse-toolbar select {
    width: 100%;
    min-height: 34px;
}

.browse-toolbar .filter-checkbox {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}

.browse-toolbar .filter-checkbox input {
    width: auto;
}

.sort-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 4px;
}

.sort-direction {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.sort-direction:disabled {
    opacity: 0.35;
    cursor: default;
}

.browse-toolbar .filter-actions,
.browse-toolbar .filter-buttons,
.browse-toolbar .wishlist-public-filter-actions,
.browse-toolbar .archive-filter-actions,
.browse-toolbar .played-filter-actions {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    align-self: end;
}

.browse-toolbar .filter-actions button,
.browse-toolbar .filter-buttons button,
.browse-toolbar .wishlist-public-filter-actions button,
.browse-toolbar .archive-filter-actions button,
.browse-toolbar .played-filter-actions button {
    width: auto;
    min-height: 34px;
}

.filter-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 7px 12px;
    margin: 7px 0 10px;
}

.filter-result-count {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.active-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    padding: 3px 7px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.59rem;
    text-decoration: none;
}

.filter-chip strong {
    color: var(--text-strong);
}

.filter-chip:hover {
    border-color: var(--border-bright);
    color: var(--text-strong);
}

.area-admin .admin-bulk-bar,
.area-admin .wishlist-admin-bulk-bar {
    position: sticky;
    z-index: 25;
    bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 10px 0;
    padding: 8px 10px;
    border: 1px solid var(--border-bright);
    background: var(--panel);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.area-admin .admin-bulk-bar:not(.is-active)[data-bulk-bar] {
    opacity: 0.72;
}

.area-admin .admin-bulk-bar button,
.area-admin .admin-bulk-bar select,
.area-admin .wishlist-admin-bulk-bar button,
.area-admin .wishlist-admin-bulk-bar select {
    width: auto;
}

.admin-selected-count {
    color: var(--text-strong);
    font-weight: bold;
}

.admin-list-checkbox {
    width: 48px;
    text-align: center;
}

.admin-list-checkbox input {
    width: auto;
}

.admin-back-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

.admin-back-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    text-decoration: none;
}

.admin-toast {
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 16px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid var(--border-bright);
    background: var(--panel);
    color: var(--text-strong);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
}

.admin-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.upload-dropzone {
    padding: 12px;
    border: 1px dashed var(--border-bright);
    background: var(--bg-secondary);
}

.upload-queue {
    display: grid;
    gap: 4px;
    margin-top: 7px;
}

.upload-queue-row {
    padding: 5px 7px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-muted);
    font-size: 0.62rem;
}

@media (max-width: 700px) {
    .browse-toolbar,
    .filters.browse-toolbar,
    .archive-filter-panel.browse-toolbar,
    .played-filter-panel.browse-toolbar,
    .wishlist-public-filters.browse-toolbar {
        grid-template-columns: 1fr;
    }

    .area-admin .admin-bulk-bar,
    .area-admin .wishlist-admin-bulk-bar {
        bottom: 4px;
    }
}

.sortable-media-card {
    cursor: grab;
}
.sortable-media-card.is-dragging {
    opacity: 0.42;
    outline: 1px dashed var(--border-bright);
}
[data-sortable-media].is-saving-order {
    opacity: 0.76;
}
[data-sortable-media].order-saved {
    outline: 1px solid var(--active);
    outline-offset: 3px;
}
.rapid-entry-table input,
.rapid-entry-table select {
    min-width: 150px;
    width: 100%;
}
.rapid-entry-table td:nth-child(2) input {
    min-width: 360px;
}

/* ==========================================================
   STAGE 20G — MOBILE / RESPONSIVE UX AUDIT

   Goals:
   - preserve the dense terminal identity without desktop-scale chrome
   - reduce vertical overhead from navigation and filter panels
   - keep two-column visual browsing where it remains legible
   - make Admin tables/forms/bulk tools usable by touch
   - prevent iOS form zoom and account for display safe areas
   - provide touch controls for media ordering
   ========================================================== */

.mobile-toolbar-toggle {
    display: none;
}

.media-touch-order {
    display: none;
}

@media (max-width: 900px) {
    body > header,
    body > main,
    .site-footer {
        width: calc(100% - 24px);
    }

    /* Keep medium-width filter layouts compact instead of creating
       a very long single horizontal row that overflows tablets. */
    .browse-toolbar,
    .filters.browse-toolbar,
    .archive-filter-panel.browse-toolbar,
    .played-filter-panel.browse-toolbar,
    .wishlist-public-filters.browse-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .browse-toolbar .filter-buttons,
    .browse-toolbar .filter-actions,
    .browse-toolbar .archive-filter-actions,
    .browse-toolbar .played-filter-actions,
    .browse-toolbar .wishlist-public-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    /* ------------------------------------------------------
       MOBILE FRAME / SAFE AREAS
       ------------------------------------------------------ */
    body > header,
    body > main,
    .site-footer {
        width: auto;
        margin-left: max(10px, env(safe-area-inset-left));
        margin-right: max(10px, env(safe-area-inset-right));
    }

    body > main {
        padding-bottom: calc(36px + env(safe-area-inset-bottom));
    }

    .site-footer {
        padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    /* iOS Safari zooms focused form controls below 16px. */
    input,
    select,
    textarea,
    body:not(.area-admin) input,
    body:not(.area-admin) select,
    body:not(.area-admin) textarea,
    .browse-toolbar input[type="text"],
    .browse-toolbar input[type="search"],
    .browse-toolbar select {
        font-size: 16px;
    }

    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .admin-back-link {
        min-height: 40px;
    }

    /* ------------------------------------------------------
       COMPACT MOBILE HEADER
       ------------------------------------------------------ */
    .site-header,
    body:not(.area-admin) .site-header {
        padding-top: max(8px, env(safe-area-inset-top));
        margin-bottom: 14px;
    }

    .header-top,
    body:not(.area-admin) .header-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 8px;
    }

    .brand,
    body:not(.area-admin) .brand {
        min-width: 0;
        gap: 8px;
    }

    .site-logo,
    body:not(.area-admin) .site-logo {
        width: 88px;
        max-height: 48px;
    }

    .brand-copy {
        display: none;
    }

    .theme-toggle,
    body:not(.area-admin) .theme-toggle {
        width: auto;
        min-width: 0;
        min-height: 36px;
        flex: 0 0 auto;
        padding: 5px 8px;
        font-size: 0.62rem;
    }

    /* A single horizontally scrolling navigation rail is much shorter
       than the previous four-row two-column mobile navigation. */
    .main-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a,
    body:not(.area-admin) .main-nav a {
        flex: 0 0 auto;
        min-width: auto;
        min-height: 40px;
        padding: 9px 11px;
        white-space: nowrap;
        text-align: center;
        border-bottom: 0;
        scroll-snap-align: start;
    }

    /* ------------------------------------------------------
       MOBILE FILTER / SORT DRAWER
       JS progressively enhances normal forms. Without JS the form
       simply stays visible and fully functional.
       ------------------------------------------------------ */
    .mobile-toolbar-toggle {
        display: flex;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 8px 0;
        padding: 7px 10px;
        border: 1px solid var(--border-bright);
        background: var(--panel);
        color: var(--text-strong);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .mobile-toolbar-toggle::after {
        content: "+";
        display: inline-flex;
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        color: var(--text-strong);
        background: var(--bg-secondary);
        font-size: 1rem;
        line-height: 1;
    }

    .mobile-toolbar-toggle[aria-expanded="true"]::after {
        content: "−";
    }

    .mobile-toolbar-toggle small {
        color: var(--text-muted);
        font-size: 0.58rem;
        font-weight: normal;
        white-space: nowrap;
    }

    .mobile-toolbar-collapsible:not(.is-mobile-open) {
        display: none !important;
    }

    .browse-toolbar,
    .filters.browse-toolbar,
    .archive-filter-panel.browse-toolbar,
    .played-filter-panel.browse-toolbar,
    .wishlist-public-filters.browse-toolbar {
        grid-template-columns: 1fr;
        margin-top: 0;
        padding: 9px;
    }

    .browse-toolbar .filter-buttons,
    .browse-toolbar .filter-actions,
    .browse-toolbar .archive-filter-actions,
    .browse-toolbar .played-filter-actions,
    .browse-toolbar .wishlist-public-filter-actions {
        grid-column: auto;
    }

    .browse-toolbar .filter-buttons,
    .browse-toolbar .filter-actions,
    .archive-filter-actions,
    .played-filter-actions,
    .wishlist-public-filter-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
        align-items: stretch;
    }

    .browse-toolbar .filter-buttons button,
    .browse-toolbar .filter-buttons input[type="submit"],
    .browse-toolbar .filter-actions button,
    .browse-toolbar .filter-actions input[type="submit"],
    .archive-filter-actions button,
    .played-filter-actions button,
    .wishlist-public-filter-actions button {
        width: 100%;
    }

    .filter-summary-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        margin: 7px 0 10px;
    }

    .active-filter-chips {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .active-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex: 0 0 auto;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* ------------------------------------------------------
       PUBLIC BROWSING
       ------------------------------------------------------ */
    body:not(.area-admin) .section {
        margin-top: 17px;
    }

    body:not(.area-admin) h2 {
        font-size: 1rem;
    }

    body:not(.area-admin).page-collection .collection-store-grid,
    body:not(.area-admin).page-archive .archive-store-grid,
    body:not(.area-admin).page-wishlist .wishlist-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    body:not(.area-admin).page-collection .collection-store-caption,
    body:not(.area-admin).page-archive .archive-store-copy,
    body:not(.area-admin).page-wishlist .wishlist-showcase-body {
        padding: 7px;
    }

    body:not(.area-admin).page-collection .collection-store-title,
    body:not(.area-admin).page-archive .archive-store-copy h3,
    body:not(.area-admin).page-wishlist .wishlist-showcase-body h3 {
        font-size: 0.76rem;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-specs {
        grid-template-columns: 1fr;
    }

    body:not(.area-admin).page-wishlist .wishlist-showcase-price-state {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    body:not(.area-admin).page-wishlist .wishlist-priority-badge {
        top: 5px;
        right: 5px;
        padding: 3px 5px;
    }

    .pagination {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .pagination::-webkit-scrollbar {
        display: none;
    }

    .pagination a,
    .pagination-current,
    .pagination-gap {
        flex: 0 0 auto;
        min-width: 38px;
        min-height: 38px;
    }

    /* Game record: keep the useful dense information, but avoid tall
       stacked navigation and oversized media. */
    body:not(.area-admin).page-game .game-hero-media img {
        max-height: 250px;
    }

    body:not(.area-admin).page-game .game-hero-copy {
        padding: 11px;
    }

    body:not(.area-admin).page-game .game-hero-copy h1 {
        font-size: 1.2rem;
    }

    body:not(.area-admin).page-game .game-local-nav {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        flex-wrap: nowrap;
        margin-top: -8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.area-admin).page-game .game-local-nav::-webkit-scrollbar {
        display: none;
    }

    body:not(.area-admin).page-game .game-local-nav > a,
    body:not(.area-admin).page-game .game-local-nav-stat {
        flex: 0 0 auto;
        justify-content: flex-start;
        min-height: 40px;
        white-space: nowrap;
        border-bottom: 0;
    }

    body:not(.area-admin).page-game .game-local-nav-stat {
        margin-left: 0;
    }

    body:not(.area-admin).page-game .collection-item-detail .media-card img,
    body:not(.area-admin).page-game .collection-item-detail .media-card--front img,
    body:not(.area-admin).page-game .collection-item-detail--media-rich .media-card img,
    body:not(.area-admin).page-game .collection-item-detail--media-rich .media-card--front img {
        height: 125px;
    }

    body:not(.area-admin).page-game .gameplay-media-image,
    body:not(.area-admin).page-game .gameplay-media-video {
        max-height: 260px;
    }

    body:not(.area-admin).page-hauls .haul-post {
        margin-bottom: 12px;
    }

    body:not(.area-admin).page-hauls .haul-post-header,
    body:not(.area-admin).page-hauls .haul-post-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    body:not(.area-admin).page-hauls .haul-photo img,
    body:not(.area-admin).page-hauls .haul-post--feature .haul-photo img {
        max-height: 250px;
    }

    body:not(.area-admin).page-shelves .shelf-overview-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    body:not(.area-admin).page-shelf .virtual-shelf-grid {
        gap: 10px;
    }

    /* ------------------------------------------------------
       TABLES / ADMIN
       ------------------------------------------------------ */
    .table-scroll {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .area-admin .table-scroll table {
        min-width: 720px;
    }

    body:not(.area-admin).page-played .table-scroll table {
        min-width: 680px;
    }

    .area-admin table th,
    .area-admin table td {
        padding: 8px 9px;
    }

    .area-admin .admin-form {
        width: 100%;
        max-width: none;
    }

    .area-admin .admin-actions {
        gap: 6px;
    }

    .area-admin .admin-actions > a,
    .area-admin .admin-actions > button,
    .area-admin .admin-actions > input[type="submit"] {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .area-admin .admin-stat-grid,
    .area-admin .admin-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .area-admin .admin-command-card,
    .area-admin .admin-stat-grid .detail-card {
        min-height: 64px;
        padding: 9px;
    }

    /* Keep the selected-item controls reachable but avoid covering the
       whole viewport. Horizontal scrolling is preferable to wrapping
       the bar to three or four lines. */
    .area-admin .admin-bulk-bar,
    .area-admin .wishlist-admin-bulk-bar {
        left: 10px;
        right: 10px;
        bottom: max(4px, env(safe-area-inset-bottom));
        max-width: calc(100vw - 20px);
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 7px;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .area-admin .admin-bulk-bar::-webkit-scrollbar,
    .area-admin .wishlist-admin-bulk-bar::-webkit-scrollbar {
        display: none;
    }

    .area-admin .admin-bulk-bar > *,
    .area-admin .wishlist-admin-bulk-bar > * {
        flex: 0 0 auto;
    }

    .admin-toast {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        max-width: none;
    }

    .upload-dropzone {
        padding: 10px;
    }

    .upload-dropzone input[type="file"] {
        width: 100%;
        max-width: 100%;
    }

    /* Desktop drag-and-drop is unreliable on touch devices. Stage 20G
       adds explicit move buttons while leaving drag ordering intact on
       desktop. */
    .sortable-media-card {
        cursor: default;
    }

    .media-touch-order {
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        margin: -2px -2px 6px;
    }

    .media-touch-order button {
        width: 40px;
        min-width: 40px;
        min-height: 36px;
        padding: 0;
    }

    .rapid-entry-table {
        min-width: 980px;
    }
}

@media (max-width: 420px) {
    .site-logo,
    body:not(.area-admin) .site-logo {
        width: 78px;
    }

    .theme-toggle,
    body:not(.area-admin) .theme-toggle {
        font-size: 0.56rem;
        padding-left: 6px;
        padding-right: 6px;
    }

    body:not(.area-admin).page-collection .collection-store-caption,
    body:not(.area-admin).page-archive .archive-store-copy,
    body:not(.area-admin).page-wishlist .wishlist-showcase-body {
        padding: 6px;
    }

    body:not(.area-admin).page-game .game-fact-strip,
    body:not(.area-admin).page-game .game-record-metrics,
    body:not(.area-admin).page-game .collection-item-facts,
    body:not(.area-admin).page-game .play-history-facts,
    body:not(.area-admin).page-archive-item .archive-item-facts {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================
   STAGE 20G.1 — MOBILE ADMIN RECORD CARDS

   Overview/list tables become compact two-column record cards on
   phones. Editable matrix tables keep horizontal scrolling.
   ========================================================== */

.mobile-table-scroll-hint {
    display: none;
}

@media (max-width: 700px) {
    /* ------------------------------------------------------
       ADMIN OVERVIEW TABLES → RECORD CARDS
       ------------------------------------------------------ */
    .area-admin .table-scroll.admin-mobile-card-list {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .area-admin table.admin-mobile-card-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }

    .area-admin table.admin-mobile-card-table thead {
        display: none;
    }

    .area-admin table.admin-mobile-card-table tbody {
        display: grid;
        width: 100%;
        gap: 8px;
    }

    .area-admin table.admin-mobile-card-table tbody tr {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        margin: 0;
        border: 1px solid var(--border);
        background: var(--panel);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .area-admin table.admin-mobile-card-table tbody td,
    .area-admin table.admin-mobile-card-table tbody th {
        display: block;
        min-width: 0;
        min-height: 0;
        padding: 7px 8px !important;
        border: 0;
        border-top: 1px solid var(--border);
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.3;
        text-align: left;
        vertical-align: top;
    }

    .area-admin table.admin-mobile-card-table tbody td::before,
    .area-admin table.admin-mobile-card-table tbody th::before {
        content: attr(data-mobile-label);
        display: block;
        margin-bottom: 3px;
        color: var(--text-muted);
        font-size: 0.56rem;
        font-weight: normal;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-primary {
        grid-column: 1 / -1;
        padding: 10px 46px 9px 9px !important;
        border-top: 0;
        background: var(--bg-secondary);
        color: var(--text-strong);
        font-size: 0.86rem;
        font-weight: 700;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-primary::before {
        margin-bottom: 4px;
        font-size: 0.54rem;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-select {
        position: absolute;
        z-index: 2;
        top: 8px;
        right: 8px;
        display: flex;
        width: auto !important;
        min-width: 0;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: 0 !important;
        background: transparent;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-select::before {
        display: none;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-select input[type="checkbox"] {
        width: 24px;
        height: 24px;
        margin: 0;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-actions {
        grid-column: 1 / -1;
        padding: 7px 8px !important;
        background: var(--bg-secondary);
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-actions::before {
        display: none;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-actions .admin-actions,
    .area-admin table.admin-mobile-card-table .mobile-admin-actions > div {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
    }

    .area-admin table.admin-mobile-card-table .mobile-admin-actions .admin-actions > a,
    .area-admin table.admin-mobile-card-table .mobile-admin-actions .admin-actions > button,
    .area-admin table.admin-mobile-card-table .mobile-admin-actions a,
    .area-admin table.admin-mobile-card-table .mobile-admin-actions button {
        display: inline-flex;
        width: auto;
        min-height: 34px !important;
        align-items: center;
        justify-content: center;
        padding: 5px 8px;
        border: 1px solid var(--border);
        background: var(--panel);
        text-decoration: none;
        white-space: nowrap;
    }

    .area-admin table.admin-mobile-card-table .is-mobile-empty {
        display: none !important;
    }

    /* ------------------------------------------------------
       TRUE EDIT TABLES → RELIABLE HORIZONTAL SWIPE
       ------------------------------------------------------ */
    .mobile-table-scroll-hint {
        display: flex;
        align-items: center;
        min-height: 32px;
        margin: 5px 0 0;
        padding: 5px 8px;
        border: 1px solid var(--border);
        border-bottom: 0;
        background: var(--bg-secondary);
        color: var(--text-muted);
        font-size: 0.66rem;
    }

    .area-admin .table-scroll.admin-mobile-scroll-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: scroll !important;
        overflow-y: hidden;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: auto;
        border: 1px solid var(--border);
    }

    .area-admin .table-scroll.admin-mobile-scroll-table table {
        width: max-content;
        min-width: 100% !important;
        margin: 0;
    }

    .area-admin .table-scroll.admin-mobile-scroll-table.rapid-entry-table,
    .area-admin .table-scroll.admin-mobile-scroll-table table.rapid-entry-table {
        min-width: 1080px;
    }

    /* ------------------------------------------------------
       BULK CONTROLS → ONE COMPACT TOUCH RAIL
       The older Wishlist selector had a more-specific flex-wrap rule;
       explicitly override it here.
       ------------------------------------------------------ */
    .area-admin .admin-bulk-bar,
    .area-admin.page-wishlist .wishlist-admin-bulk-bar,
    .area-admin .wishlist-admin-bulk-bar {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-height: 46px;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 5px 6px;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .area-admin .admin-bulk-bar::-webkit-scrollbar,
    .area-admin.page-wishlist .wishlist-admin-bulk-bar::-webkit-scrollbar,
    .area-admin .wishlist-admin-bulk-bar::-webkit-scrollbar {
        display: none;
    }

    .area-admin .admin-bulk-bar strong,
    .area-admin .wishlist-admin-bulk-bar strong {
        flex: 0 0 auto;
        margin: 0 3px 0 0;
        font-size: 0.72rem;
    }

    .area-admin .admin-bulk-bar button,
    .area-admin .admin-bulk-bar select,
    .area-admin .wishlist-admin-bulk-bar button,
    .area-admin .wishlist-admin-bulk-bar select {
        flex: 0 0 auto;
        width: auto;
        min-height: 36px;
        padding: 5px 8px;
    }

    /* Before anything is selected, only show the useful entry action.
       Once selection starts, the remaining controls reappear in the rail. */
    .area-admin .admin-bulk-bar:not(.is-active) [data-select-none],
    .area-admin .admin-bulk-bar:not(.is-active) select,
    .area-admin .admin-bulk-bar:not(.is-active) button[type="submit"],
    .area-admin .wishlist-admin-bulk-bar:not(.is-active) [data-select-none],
    .area-admin .wishlist-admin-bulk-bar:not(.is-active) select,
    .area-admin .wishlist-admin-bulk-bar:not(.is-active) button[type="submit"] {
        display: none;
    }
}

/* ==========================================================
   STAGE 21 — MOBILE NAV DISCOVERABILITY + GAME IDENTITY
   ========================================================== */

.main-nav-shell {
    position: relative;
}

.main-nav-scroll {
    display: none;
}

.game-alias-list,
.game-consolidation-summary {
    display: grid;
    gap: 8px;
}

.game-alias-row,
.game-consolidation-stat {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid var(--border);
    background: var(--panel);
}

.game-alias-meta,
.release-local-title,
.canonical-title-note {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.game-title-aliases {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.game-title-aliases span {
    padding: 3px 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.68rem;
}

.consolidation-warning {
    border-left: 3px solid var(--warning, var(--active));
}

.consolidation-danger {
    border-left: 3px solid var(--danger, var(--active));
}

@media (max-width: 700px) {
    .main-nav-shell {
        margin-inline: 0;
    }

    .main-nav-shell::before,
    .main-nav-shell::after {
        content: "";
        position: absolute;
        z-index: 4;
        top: 0;
        bottom: 0;
        width: 34px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 120ms ease;
    }

    .main-nav-shell::before {
        left: 0;
        background: linear-gradient(90deg, var(--bg) 10%, transparent 100%);
    }

    .main-nav-shell::after {
        right: 0;
        background: linear-gradient(270deg, var(--bg) 10%, transparent 100%);
    }

    .main-nav-shell.can-scroll-left::before,
    .main-nav-shell.can-scroll-right::after {
        opacity: 1;
    }

    .main-nav-scroll {
        position: absolute;
        z-index: 6;
        top: 50%;
        display: flex;
        width: 28px;
        min-width: 28px;
        height: 34px;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border-bright);
        background: var(--panel);
        color: var(--text-strong);
        font: inherit;
        font-size: 1.15rem;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 120ms ease;
    }

    .main-nav-scroll--left {
        left: 2px;
    }

    .main-nav-scroll--right {
        right: 2px;
    }

    .main-nav-shell.can-scroll-left .main-nav-scroll--left,
    .main-nav-shell.can-scroll-right .main-nav-scroll--right {
        opacity: 0.94;
        pointer-events: auto;
    }

    .main-nav-shell.can-scroll-left .main-nav {
        padding-left: 28px;
    }

    .main-nav-shell.can-scroll-right .main-nav {
        padding-right: 28px;
    }

    .game-alias-row,
    .game-consolidation-stat {
        grid-template-columns: 1fr;
    }
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 12px;
    align-items: end;
}

.admin-form-grid > div {
    min-width: 0;
}

@media (max-width: 700px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   STAGE 22 — PROJECTS / WORKBENCH
   ========================================================== */

.projects-page-head .archive-page-heading {
    align-items: end;
}

.projects-summary-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    gap: 8px;
    min-width: min(100%, 320px);
}

.projects-summary-mini > div {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    padding: 12px 14px;
    display: grid;
    gap: 3px;
}

.projects-summary-mini strong {
    font-size: 1.35rem;
    color: var(--text-strong);
}

.projects-summary-mini span {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .08em;
}

.project-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.project-card {
    border: 1px solid var(--border);
    background: var(--panel);
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.project-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-bright);
    background: var(--panel-hover);
}

.project-card-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.project-card-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.project-media-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
    color: var(--text-muted);
    background:
        linear-gradient(135deg, transparent 0 49%, color-mix(in srgb, var(--border) 45%, transparent) 50%, transparent 51%) 0 0 / 24px 24px,
        var(--bg-secondary);
}

.project-media-placeholder strong {
    color: var(--text-strong);
    letter-spacing: .14em;
}

.project-media-placeholder span {
    font-size: .72rem;
    letter-spacing: .1em;
}

.project-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
}

.project-card-kicker,
.project-hero-title-row,
.project-reference-card > div,
.related-project-card > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.project-card-kicker > span:not(.project-status-badge) {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .08em;
}

.project-card h3 {
    margin: 0;
    font-size: 1.08rem;
}

.project-card h3 a {
    color: var(--text-strong);
}

.project-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 2px 7px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-status--active {
    color: var(--status-good);
    border-color: color-mix(in srgb, var(--status-good) 65%, var(--border));
    background: var(--status-good-bg);
}

.project-status--completed {
    color: var(--active);
    border-color: color-mix(in srgb, var(--active) 65%, var(--border));
    background: color-mix(in srgb, var(--active) 10%, var(--panel));
}

.project-status--paused {
    color: var(--status-near);
    border-color: color-mix(in srgb, var(--status-near) 65%, var(--border));
    background: var(--status-near-bg);
}

.project-status--abandoned {
    color: var(--status-above);
    border-color: color-mix(in srgb, var(--status-above) 65%, var(--border));
    background: var(--status-above-bg);
}

.project-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.project-progress-track {
    flex: 1;
    height: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: hidden;
}

.project-progress-track > span {
    display: block;
    height: 100%;
    min-width: 0;
    background: var(--active);
}

.project-progress strong,
.project-progress small {
    flex: 0 0 auto;
    color: var(--text-strong);
}

.project-card-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--text-muted);
    font-size: .7rem;
}

.project-card-meta span {
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

.project-detail-back {
    margin: 0 0 12px;
}

.project-hero {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.7fr);
    border: 1px solid var(--border);
    background: var(--panel);
}

.project-hero--no-media {
    grid-template-columns: 1fr;
}

.project-hero-media {
    min-width: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
}

.project-hero-media a {
    display: block;
    min-height: 320px;
    flex: 1;
}

.project-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
}

.project-hero-media > span {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: .68rem;
}

.project-hero-copy {
    min-width: 0;
    padding: clamp(22px, 4vw, 54px);
    align-self: center;
}

.project-hero-title-row {
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.project-hero h1 {
    margin: 8px 0 5px;
    font-size: clamp(1.8rem, 4vw, 3.3rem);
}

.project-hero-type,
.project-hero-summary {
    color: var(--text-muted);
}

.project-hero-summary {
    max-width: 900px;
    line-height: 1.65;
    margin: 22px 0;
}

.project-progress--hero {
    margin: 20px 0;
}

.project-progress--hero .project-progress-track {
    height: 12px;
}

.project-progress--hero strong {
    font-size: 1.05rem;
}

.project-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 24px 0 0;
    border: 1px solid var(--border);
}

.project-facts > div {
    padding: 11px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.project-facts > div:nth-child(3n) {
    border-right: 0;
}

.project-facts dt {
    color: var(--text-muted);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-facts dd {
    margin: 4px 0 0;
    color: var(--text-strong);
}

.project-local-nav {
    margin-top: 12px;
}

.project-reference-group + .project-reference-group {
    margin-top: 26px;
}

.project-reference-group h3 {
    margin: 0 0 10px;
}

.project-reference-grid,
.related-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.project-reference-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    padding: 9px;
}

.project-reference-card:hover,
.related-project-card:hover {
    border-color: var(--border-bright);
    background: var(--panel-hover);
}

.project-reference-card img {
    width: 92px;
    height: 76px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.project-reference-card > div {
    align-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.project-reference-card strong {
    color: var(--text-strong);
}

.project-reference-card span,
.project-reference-card small,
.project-reference-card em {
    color: var(--text-muted);
    font-size: .7rem;
    font-style: normal;
}

.project-reference-card em {
    color: var(--link);
}

.project-media-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.project-media-grid .media-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.project-timeline {
    display: grid;
    gap: 0;
    max-width: 1180px;
}

.project-update {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    position: relative;
}

.project-update::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 44px;
    bottom: -1px;
    width: 1px;
    background: var(--border);
}

.project-update:last-child::before {
    display: none;
}

.project-update-marker {
    width: 56px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-bright);
    background: var(--bg-secondary);
    color: var(--text-strong);
    z-index: 1;
}

.project-update-body {
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 17px 18px;
    margin-bottom: 18px;
    min-width: 0;
}

.project-update-body > header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.project-update-body h3 {
    margin: 4px 0 0;
}

.project-update-state {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-update-copy {
    padding-top: 14px;
    line-height: 1.7;
}

.project-update-media {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-top: 14px;
}

.project-update-media img {
    display: block;
    width: 150px;
    height: 108px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.project-notes {
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 18px;
    line-height: 1.7;
    max-width: 1180px;
}

.project-external-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-external-links a {
    border: 1px solid var(--border);
    padding: 9px 12px;
    background: var(--panel);
}

.related-project-card {
    border: 1px solid var(--border);
    background: var(--panel);
    padding: 12px;
    display: grid;
    gap: 9px;
    min-width: 0;
}

.related-project-card > div {
    justify-content: space-between;
}

.related-project-card > div > span:not(.project-status-badge) {
    color: var(--text-muted);
    font-size: .68rem;
    text-transform: uppercase;
}

.related-project-card > strong {
    color: var(--text-strong);
}

.haul-project-list {
    display: grid;
    gap: 6px;
}

.haul-project-list > a {
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    padding: 8px 9px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.haul-project-list small {
    color: var(--text-muted);
}

/* Admin Project hub / editors */
.project-admin-hub {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.project-admin-hub .admin-command-card {
    min-height: 92px;
}

.project-admin-form,
.project-update-form {
    margin-top: 16px;
}

.project-admin-relation-list,
.project-admin-update-list,
.project-admin-link-list {
    display: grid;
    gap: 10px;
}

.project-relation-edit-card,
.project-admin-update-card,
.project-admin-link-card {
    margin: 0;
}

.project-relation-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.project-relation-card-head > div {
    display: grid;
    gap: 3px;
}

.project-relation-card-head span {
    color: var(--text-muted);
}

.project-relation-fields {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) 100px minmax(260px, 2fr);
    gap: 10px;
}

.project-relation-fields label,
.project-update-edit-grid label,
.project-link-edit-grid label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.project-update-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 10px;
}

.project-update-edit-body {
    grid-column: 1 / -1;
}

.project-link-edit-grid {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) minmax(280px, 2fr) 90px 100px;
    gap: 10px;
}

.project-media-edit-preview {
    max-width: 520px;
    margin-bottom: 18px;
}

.project-media-edit-preview img {
    max-height: 420px;
    width: 100%;
    object-fit: contain;
}

@media (max-width: 1180px) {
    .project-card-grid,
    .project-reference-grid,
    .related-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-admin-hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .projects-summary-mini {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        min-width: 0;
    }

    .project-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .project-card {
        display: grid;
        grid-template-columns: 38% minmax(0, 1fr);
    }

    .project-card-media {
        aspect-ratio: auto;
        min-height: 180px;
        border-bottom: 0;
        border-right: 1px solid var(--border);
    }

    .project-card-body {
        padding: 12px;
    }

    .project-card p {
        -webkit-line-clamp: 2;
    }

    .project-hero {
        grid-template-columns: 1fr;
    }

    .project-hero-media {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .project-hero-media a {
        min-height: 220px;
        max-height: 360px;
    }

    .project-hero-copy {
        padding: 18px 16px;
    }

    .project-hero-title-row {
        display: grid;
        gap: 10px;
    }

    .project-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-facts > div,
    .project-facts > div:nth-child(3n) {
        border-right: 1px solid var(--border);
    }

    .project-facts > div:nth-child(2n) {
        border-right: 0;
    }

    .project-reference-grid,
    .related-project-grid {
        grid-template-columns: 1fr;
    }

    .project-reference-card {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .project-reference-card img {
        width: 78px;
        height: 68px;
    }

    .project-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-update {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
    }

    .project-update::before {
        left: 17px;
    }

    .project-update-marker {
        width: 36px;
        height: 36px;
        font-size: .68rem;
    }

    .project-update-body {
        padding: 12px;
    }

    .project-update-body > header {
        display: grid;
    }

    .project-admin-hub {
        grid-template-columns: 1fr 1fr;
    }

    .project-relation-fields,
    .project-update-edit-grid,
    .project-link-edit-grid {
        grid-template-columns: 1fr;
    }

    .project-update-edit-body,
    .project-link-url {
        grid-column: auto;
    }

    .project-relation-card-head {
        display: grid;
    }

    .haul-project-list > a {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 520px) {
    .projects-summary-mini > div {
        padding: 9px 8px;
    }

    .projects-summary-mini strong {
        font-size: 1.05rem;
    }

    .project-card {
        grid-template-columns: 34% minmax(0, 1fr);
    }

    .project-card-media {
        min-height: 160px;
    }

    .project-card-body {
        gap: 7px;
    }

    .project-card-meta {
        display: none;
    }

    .project-admin-hub {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   STAGE 23 — CONTENT STUDIO
   ========================================================== */

.content-studio-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}

.content-stat-card {
    display: grid;
    gap: 4px;
    min-height: 84px;
    align-content: center;
    text-decoration: none;
}

.content-stat-card strong {
    font-size: clamp(1.15rem, 2vw, 1.65rem);
}

.content-stat-card span {
    color: var(--text-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.content-queue-grid,
.content-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.content-queue-card,
.content-source-card {
    display: grid;
    gap: 10px;
    align-content: start;
}

.content-queue-card h3,
.content-source-card h3 {
    margin: 0;
}

.content-queue-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.content-queue-head > div {
    display: grid;
    gap: 6px;
}

.content-status-badge {
    display: inline-flex;
    width: fit-content;
    padding: 3px 7px;
    border: 1px solid var(--border);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.content-status--idea {
    border-color: var(--border);
    color: var(--text-muted);
}

.content-status--drafting {
    border-color: var(--active);
    color: var(--active);
}

.content-status--ready {
    border-color: var(--success, var(--active));
    color: var(--success, var(--active));
}

.content-status--scheduled {
    border-color: var(--warning, var(--active));
    color: var(--warning, var(--active));
}

.content-status--published {
    border-color: var(--success, var(--active));
    background: color-mix(in srgb, var(--success, var(--active)) 8%, transparent);
    color: var(--success, var(--active));
}

.content-status--archived {
    opacity: .65;
}

.content-target-date,
.content-source-line,
.content-queue-meta,
.content-source-metrics {
    color: var(--text-muted);
    font-size: .72rem;
}

.content-source-line {
    margin: 0;
}

.content-queue-meta,
.content-source-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
}

.content-source-metrics span {
    padding: 3px 6px;
    border: 1px solid var(--border);
}

.content-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-admin-grid .form-field--wide {
    grid-column: 1 / -1;
}

.content-draft-editor,
.content-prep-packet {
    font-family: var(--font-mono, monospace);
    line-height: 1.55;
}

.content-delete-form {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 1180px) {
    .content-queue-grid,
    .content-source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .content-studio-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-queue-grid,
    .content-source-grid,
    .content-admin-grid {
        grid-template-columns: 1fr;
    }

    .content-admin-grid .form-field--wide {
        grid-column: auto;
    }

    .content-queue-head {
        display: grid;
    }
}

/* Stage 24.1 — Admin Haul note preview */
.haul-admin-notes-cell {
    width: 28%;
    min-width: 220px;
    max-width: 420px;
}

.haul-admin-notes {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .admin-mobile-cards .haul-admin-notes-cell {
        max-width: none;
        width: auto;
    }

    .admin-mobile-cards .haul-admin-notes {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* ==========================================================
   Stage 24.2 — Data Health dashboard
   ========================================================== */

.health-title-row,
.health-section-heading,
.health-check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.health-title-row {
    align-items: flex-end;
}

.health-banner {
    margin-top: 16px;
    border-left-width: 4px;
}

.health-banner--ok,
.health-status--ok {
    border-color: var(--success, var(--active));
}

.health-banner--review,
.health-status--review {
    border-color: var(--warning, #a97800);
}

.health-banner--issue,
.health-status--issue {
    border-color: var(--danger, #a23838);
}

.health-summary-grid,
.health-entity-grid,
.health-check-grid,
.health-location-grid {
    display: grid;
    gap: 10px;
}

.health-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 12px;
}

.health-summary-grid .detail-card,
.health-entity-card {
    display: grid;
    gap: 4px;
}

.health-summary-grid strong,
.health-entity-card strong {
    font-size: 1.2rem;
}

.health-summary-label,
.health-entity-card span,
.health-environment-card span,
.health-check-state,
.health-generic-row small {
    color: var(--text-muted);
    font-size: .66rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.health-entity-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.health-environment-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.health-environment-card > div {
    display: grid;
    gap: 4px;
}

.health-check-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.health-check-card {
    border-left-width: 3px;
}

.health-check-card p {
    margin: 8px 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.health-check-head > div {
    display: grid;
    gap: 4px;
}

.health-check-count {
    min-width: 34px;
    text-align: right;
    font-size: 1.15rem;
    font-weight: 700;
}

.health-status--ok .health-check-state {
    color: var(--success, var(--active));
}

.health-status--review .health-check-state {
    color: var(--warning, #a97800);
}

.health-status--issue .health-check-state {
    color: var(--danger, #a23838);
}

.health-findings {
    margin-top: 10px;
    padding: 0;
}

.health-findings > summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    font-weight: 700;
}

.health-findings[open] > summary {
    border-bottom: 1px solid var(--border);
}

.health-findings-list {
    display: grid;
}

.health-finding-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.health-finding-row:last-child {
    border-bottom: 0;
}

.health-finding-row > div {
    display: grid;
    gap: 3px;
}

.health-finding-row span {
    color: var(--text-muted);
}

.health-generic-row {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 14px !important;
}

.health-generic-row > span {
    display: grid;
    gap: 2px;
}

.health-location-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.health-location-card {
    display: grid;
    gap: 4px;
    text-decoration: none;
}

.health-location-card span {
    color: var(--text-muted);
    font-size: .72rem;
}

.health-relation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.health-relation-list span {
    padding: 4px 7px;
    border: 1px solid var(--border);
    font-size: .72rem;
}

.health-detail-list {
    display: grid;
    gap: 10px;
}

.health-detail-card--issue {
    border-left: 4px solid var(--danger, #a23838);
}

@media (max-width: 1180px) {
    .health-entity-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .health-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .health-title-row,
    .health-section-heading {
        align-items: stretch;
    }

    .health-title-row {
        display: grid;
    }

    .health-summary-grid,
    .health-entity-grid,
    .health-check-grid,
    .health-location-grid,
    .health-environment-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .health-check-grid {
        grid-template-columns: 1fr;
    }

    .health-finding-row {
        display: grid;
    }

    .health-generic-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================
   STAGE 24.2E — FILTERED COLLECTION NAV + IMAGE VIEWER
   ========================================================== */

body:not(.area-admin).page-game .game-result-nav {
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) auto minmax(420px, 1.7fr);
    align-items: stretch;
    gap: 8px;
    margin: 0 0 10px;
}

body:not(.area-admin).page-game .game-result-nav-back,
body:not(.area-admin).page-game .game-result-nav-position,
body:not(.area-admin).page-game .game-result-nav-link {
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--panel);
}

body:not(.area-admin).page-game .game-result-nav-back {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-size: 0.72rem;
}

body:not(.area-admin).page-game .game-result-nav-position {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 0.66rem;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-result-nav-position strong {
    color: var(--text-strong);
}

body:not(.area-admin).page-game .game-result-nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
}

body:not(.area-admin).page-game .game-result-nav-link {
    display: grid;
    gap: 2px;
    padding: 7px 10px;
    text-decoration: none;
}

body:not(.area-admin).page-game .game-result-nav-link small {
    color: var(--text-muted);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
}

body:not(.area-admin).page-game .game-result-nav-link strong,
body:not(.area-admin).page-game .game-result-nav-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.area-admin).page-game .game-result-nav-link strong {
    color: var(--text-strong);
    font-size: 0.72rem;
}

body:not(.area-admin).page-game .game-result-nav-link span {
    color: var(--text-muted);
    font-size: 0.62rem;
}

body:not(.area-admin).page-game .game-result-nav-link--next {
    text-align: right;
}

body:not(.area-admin).page-game .game-result-nav-link:not(.game-result-nav-link--disabled):hover,
body:not(.area-admin).page-game .game-result-nav-back:hover {
    background: var(--active);
    color: var(--active-text);
}

body:not(.area-admin).page-game .game-result-nav-link:not(.game-result-nav-link--disabled):hover strong,
body:not(.area-admin).page-game .game-result-nav-link:not(.game-result-nav-link--disabled):hover span,
body:not(.area-admin).page-game .game-result-nav-link:not(.game-result-nav-link--disabled):hover small {
    color: var(--active-text);
}

body:not(.area-admin).page-game .game-result-nav-link--disabled {
    opacity: 0.42;
}

body:not(.area-admin).page-game [data-image-lightbox] {
    cursor: zoom-in;
}

body.image-lightbox-open {
    overflow: hidden;
}

.image-lightbox[hidden] {
    display: none !important;
}

.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: color-mix(in srgb, var(--bg) 93%, transparent);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 120ms ease;
}

.image-lightbox.is-open {
    opacity: 1;
}

.image-lightbox-stage {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 52px 68px 20px;
    touch-action: none;
}

.image-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    will-change: transform;
}

.image-lightbox-image.is-loading {
    opacity: 0.45;
}

.image-lightbox.is-zoomed .image-lightbox-image {
    cursor: grab;
}

.image-lightbox.is-zoomed .image-lightbox-image:active {
    cursor: grabbing;
}

.image-lightbox-close,
.image-lightbox-nav,
.image-lightbox-controls button {
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
}

.image-lightbox-close:hover,
.image-lightbox-nav:not(:disabled):hover,
.image-lightbox-controls button:not(:disabled):hover {
    background: var(--active);
    color: var(--active-text);
}

.image-lightbox-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.45rem;
    line-height: 1;
}

.image-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 72px;
    padding: 0;
    transform: translateY(-50%);
    font-size: 2rem;
    line-height: 1;
}

.image-lightbox-nav--previous {
    left: 14px;
}

.image-lightbox-nav--next {
    right: 14px;
}

.image-lightbox-nav:disabled,
.image-lightbox-controls button:disabled {
    opacity: 0.3;
    cursor: default;
}

.image-lightbox-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 9px 16px;
    border-top: 1px solid var(--border);
    background: var(--panel);
    box-shadow: 0 -8px 24px var(--screen-glow);
}

.image-lightbox-caption {
    min-width: 0;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-lightbox-counter {
    color: var(--text-muted);
    font-size: 0.67rem;
    white-space: nowrap;
}

.image-lightbox-controls {
    display: flex;
    gap: 5px;
}

.image-lightbox-controls button {
    min-width: 38px;
    height: 34px;
    padding: 4px 9px;
}

.image-lightbox-controls button:nth-child(2) {
    min-width: 62px;
    font-size: 0.65rem;
}

@media (max-width: 760px) {
    body:not(.area-admin).page-game .game-result-nav {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    body:not(.area-admin).page-game .game-result-nav-actions {
        grid-column: 1 / -1;
    }

    body:not(.area-admin).page-game .game-result-nav-back,
    body:not(.area-admin).page-game .game-result-nav-position {
        min-height: 38px;
    }

    body:not(.area-admin).page-game .game-result-nav-link {
        min-height: 58px;
    }

    .image-lightbox-stage {
        padding: 50px 10px 12px;
    }

    .image-lightbox-close {
        top: 8px;
        right: 8px;
    }

    .image-lightbox-nav {
        top: auto;
        bottom: 68px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .image-lightbox-nav--previous {
        left: 8px;
    }

    .image-lightbox-nav--next {
        right: 8px;
    }

    .image-lightbox-footer {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding: 8px 10px;
    }

    .image-lightbox-controls {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .image-lightbox-caption {
        font-size: 0.68rem;
    }
}