.site-header { position: sticky; top: 0; z-index: 50; display: block; width: auto; padding: 0; border-bottom: 1px solid var(--line); background: rgba(11,16,24,.88); backdrop-filter: blur(18px); }
.tool-page-title { margin-left: 12px; color: #f4f7fb; font-size: .94rem; font-weight: 700; white-space: nowrap; }
.site-header .main-nav a { text-decoration: none; }
.game-search-wrap input { cursor: text; }
.games-main { padding-top: 42px; padding-bottom: 74px; }
.archive-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 6px 0 28px; }
.archive-hero-copy { max-width: 720px; }
.archive-hero .eyebrow { margin-bottom: 12px; }
.archive-hero h1 { margin: 0; font-size: clamp(2.35rem, 5vw, 4.25rem); font-weight: 800; letter-spacing: -.065em; line-height: 1.02; }
.archive-hero h1 em { color: var(--orange); font-style: normal; }
.archive-hero p:last-child { max-width: 620px; margin: 13px 0 0; color: var(--muted); font-size: .98rem; }
.archive-summary { display: flex; flex: 0 0 auto; gap: 10px; }
.archive-summary-card { min-width: 106px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#172231,#111925); }
.archive-summary-card strong { display: block; color: white; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.archive-summary-card span { display: block; margin-top: 2px; color: var(--muted); font-size: .6875rem; }
.archive-panel { padding: clamp(14px,2.4vw,24px); border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,rgba(22,31,44,.94),rgba(15,22,32,.97)); box-shadow: 0 18px 55px #0002; }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.platform-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-tab { display: inline-flex; min-height: 42px; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: #0b101855; color: #c5d0de; cursor: pointer; font-size: .8rem; font-weight: 700; transition: .18s ease; }
.platform-tab:hover { border-color: #ff806477; background: #ff654410; color: white; }
.platform-tab.is-active { border-color: #ff765a; background: linear-gradient(135deg,#ff6544,#e9433a); color: white; box-shadow: 0 7px 20px #f0523e25; }
.platform-tab i { font-size: .92rem; }
.platform-tab .platform-console-icon { width: 36px; height: 36px; flex: 0 0 auto; margin: -6px 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.platform-count { display: inline-grid; min-width: 22px; height: 22px; place-items: center; padding: 0 5px; border-radius: 6px; background: #07101930; font-size: .6875rem; }
.archive-search-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.game-search-wrap { display: flex; min-width: 0; min-height: 45px; flex: 1; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7,12,19,.52); color: #8796a9; transition: border-color .18s, box-shadow .18s; }
.game-search-wrap:focus-within { border-color: #ff8064aa; box-shadow: 0 0 0 3px #ff654417; }
.game-search-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: white; font: inherit; font-size: .83rem; }
.game-search-wrap input::placeholder { color: #7f8da0; }
.result-count { flex: 0 0 auto; color: var(--muted); font-size: .75rem; }
.result-count strong { color: white; font-variant-numeric: tabular-nums; }
.games-content-layout { display: grid; grid-template-columns: minmax(235px,270px) minmax(370px,420px) minmax(0,1fr); gap: 15px; align-items: start; }
.game-preview-pane { position: sticky; top: 98px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #0b101855; }
.gameplay-pane { position: sticky; top: 98px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(155deg,#192432aa,#0b101855); box-shadow: 0 12px 32px #0002; }
.preview-overline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .09em; }
.preview-platform { color: #ffad8e; font-size: .6875rem; letter-spacing: .04em; }
.game-preview-img-wrap { display: grid; width: 100%; min-height: 310px; aspect-ratio: 2 / 3; place-items: center; overflow: hidden; border: 1px solid #ffffff10; border-radius: 8px; background: radial-gradient(ellipse at 50% 35%,#202c3b,#0b1018 76%); }
.game-preview-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.game-preview-placeholder { display: grid; justify-items: center; gap: 10px; padding: 18px; color: var(--muted); text-align: center; font-size: .75rem; }
.game-preview-placeholder i { color: var(--orange); font-size: 1.8rem; }
.game-preview-placeholder.is-empty-preview { display: flex; width: 100%; height: 100%; min-height: 310px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
.empty-preview-message { max-width: 230px; color: var(--muted); font-size: .75rem; line-height: 1.5; text-align: center; }
.game-preview-placeholder.is-empty-preview img { display: block; width: min(56%, 145px); height: auto; flex: 0 0 auto; object-fit: contain; }
.gameplay-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid #ffffff10; border-radius: 8px; background: radial-gradient(ellipse at 50% 35%,#202c3b,#0b1018 76%); }
.gameplay-video-wrap iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.gameplay-placeholder { display: grid; justify-items: center; gap: 11px; max-width: 260px; padding: 16px; color: var(--muted); text-align: center; font-size: .75rem; line-height: 1.5; }
.gameplay-placeholder i { color: #ff5d52; font-size: 2rem; }
.gameplay-title { margin: 11px 2px 0; color: white; font-size: .88rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.selected-games-panel { margin-top: 13px; padding: 10px; border: 1px solid #ffffff12; border-radius: 8px; background: rgba(7,12,19,.3); }
.selected-games-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #dce5ef; font-size: .6875rem; font-weight: 700; }
.selected-games-heading span:last-child { color: var(--faint); font-size: .6875rem; font-weight: 600; }
.selected-games-list { display: flex; max-height: 126px; flex-wrap: wrap; align-content: flex-start; gap: 6px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #53647a #111925; scrollbar-width: thin; }
.selected-games-list::-webkit-scrollbar { width: 7px; height: 7px; }
.selected-games-list::-webkit-scrollbar-thumb { border-radius: 8px; background: #53647a; }
.selected-game-chip { display: flex; min-width: min(145px,100%); max-width: 100%; flex: 1 1 145px; align-items: center; justify-content: space-between; gap: 7px; padding: 6px 7px 6px 9px; border: 1px solid #ff765a2c; border-radius: 7px; background: linear-gradient(110deg,#ff654410,#ffffff04); }
.selected-game-details { display: grid; min-width: 0; gap: 2px; }
.selected-game-platform { overflow: hidden; color: #96a6ba; font-size: .6875rem; text-overflow: ellipsis; white-space: nowrap; }
.selected-game-name { overflow: hidden; color: #f2f5fa; font-size: .6875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.selected-game-remove { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border: 1px solid #ff765a35; border-radius: 6px; background: #ff65440e; color: #ff9a81; cursor: pointer; font-size: .6875rem; transition: .16s ease; }
.selected-game-remove:hover { border-color: var(--orange); background: var(--orange); color: white; }
.selected-games-empty { display: grid; width: 100%; min-height: 42px; place-items: center; margin: 0; padding: 8px; border: 1px dashed #ffffff18; border-radius: 6px; color: var(--faint); text-align: center; font-size: .6875rem; }
.game-preview-title { margin: 12px 2px 0; color: white; font-size: .9rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.game-list-container { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,12,19,.25); box-shadow: 0 10px 28px #0002; }
.game-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #ffffff04; color: #dfe7f1; font-size: .72rem; font-weight: 700; }
.game-list-heading span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-list-heading span:last-child { color: #aab8c9; font-size: .6875rem; font-weight: 500; }
.game-list-heading span:last-child::before { content: "↕ "; color: var(--gold); }
.game-list { display: grid; max-height: min(70vh, 680px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #53647a #111925; scrollbar-width: thin; }
.game-list::-webkit-scrollbar { width: 9px; }
.game-list::-webkit-scrollbar-track { background: #111925; }
.game-list::-webkit-scrollbar-thumb { border: 2px solid #111925; border-radius: 9px; background: #53647a; }
.game-list::-webkit-scrollbar-thumb:hover { background: #ff8064; }
.game-item { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 9px 12px; border-bottom: 1px solid rgba(210,224,244,.07); transition: background .16s ease; }
.game-item:last-child { border-bottom: 0; }
.game-item:hover,.game-item.active-preview { background: rgba(255,255,255,.045); }
.game-open { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.game-thumb-wrap { position: relative; width: 44px; height: 58px; flex: 0 0 auto; overflow: hidden; border: 1px solid #ffffff18; border-radius: 5px; background: linear-gradient(145deg,#1e2b3a,#101722); }
.game-thumb { width: 100%; height: 100%; object-fit: cover; }
.game-thumb-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(145deg,#273448,#111925); color: #ff9477; font-size: .8rem; font-weight: 800; }
.game-info { display: grid; min-width: 0; gap: 3px; }
.game-info-name { overflow: hidden; color: #e7edf6; font-size: .77rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.game-item.active-preview .game-info-name { color: white; }
.game-info-platform { color: var(--faint); font-size: .6875rem; }
.game-right { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.game-info-size { padding: 4px 7px; border: 1px solid #ffb33220; border-radius: 5px; background: #ffb3320c; color: #ffd18a; font-size: .6875rem; font-weight: 700; white-space: nowrap; }
.game-select-btn { min-width: 66px; min-height: 32px; padding: 5px 9px; border: 1px solid #ff765a77; border-radius: 6px; background: #ff65440b; color: #ff997c; cursor: pointer; font-size: .6875rem; font-weight: 700; transition: .16s ease; }
.game-select-btn:hover,.game-select-btn.selected { border-color: var(--orange); background: var(--orange); color: white; }
.empty-games { display: grid; justify-items: center; gap: 8px; padding: 42px 18px; color: var(--muted); text-align: center; font-size: .8rem; }
.empty-games i { color: var(--gold); font-size: 1.5rem; }
.selected-cart-box { position: sticky; z-index: 35; top: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 16px; padding: 13px 16px; border: 1px solid #ff765a55; border-radius: 10px; background: linear-gradient(110deg,rgba(33,34,43,.96),rgba(24,31,40,.96)); box-shadow: 0 10px 30px #0005; backdrop-filter: blur(16px); }
.cart-summary { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: .75rem; }
.cart-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid #ff806433; border-radius: 8px; background: #ff654415; color: #ff987b; }
.cart-summary .cart-icon { color: #ff987b; }
.cart-summary strong { color: white; }
.cart-summary span { color: #ffd18a; font-weight: 700; }
.cart-total { margin-left: 4px; padding-left: 13px; border-left: 1px solid var(--line); }
.request-load-btn { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; padding: 0 15px; border: 1px solid #3cdd8c77; border-radius: 7px; background: linear-gradient(135deg,#1dbb75,#118657); color: white; box-shadow: 0 8px 22px #12965e24; font-size: .74rem; font-weight: 800; transition: transform .17s ease, filter .17s ease; }
.request-load-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.archive-note { margin: 12px 2px 0; color: var(--faint); font-size: .6875rem; }
.games-footer { margin-top: 0; }

@media (max-width: 1100px) {
    .games-main { padding-top: 32px; }
    .archive-hero { align-items: flex-start; flex-direction: column; gap: 18px; }
    .games-content-layout { grid-template-columns: minmax(220px,.8fr) minmax(0,1.5fr); }
    .game-list-container { grid-column: 1 / -1; }
    .game-preview-pane,.gameplay-pane { position: static; }
    .game-preview-img-wrap { min-height: 260px; }
    .game-list { max-height: min(58vh, 560px); }
    .game-item { gap: 10px; padding: 8px 11px; }
    .game-open { gap: 8px; }
    .game-right { gap: 6px; }
    .game-select-btn { min-width: 56px; }
}
@media (max-width: 700px) {
    .page-shell.games-main { width: calc(100% - 32px); }
    .archive-hero h1 { font-size: clamp(2.25rem,11vw,3.35rem); }
    .archive-summary { width: 100%; }
    .archive-summary-card { min-width: 0; flex: 1; }
    .archive-panel { padding: 12px; }
    .archive-toolbar { align-items: stretch; flex-direction: column; }
    .platform-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .platform-tab { justify-content: center; padding: 8px; font-size: .7rem; }
    .archive-search-row { align-items: stretch; flex-direction: column; gap: 8px; }
    .result-count { align-self: flex-end; }
    .games-content-layout { grid-template-columns: 1fr; }
    .game-preview-pane { position: static; display: grid; grid-template-columns: minmax(90px,130px) minmax(0,1fr); align-items: center; column-gap: 14px; }
    .gameplay-pane { position: static; }
    .preview-overline { grid-column: 1 / -1; margin-bottom: 9px; }
    .game-preview-img-wrap { min-height: 0; aspect-ratio: 2 / 3; grid-row: 2 / span 2; }
    .game-preview-placeholder.is-empty-preview { min-height: 0; }
    .game-preview-placeholder.is-empty-preview img { width: min(45%, 90px); }
    .game-preview-title { align-self: start; margin: 4px 0 0; font-size: .84rem; }
    .game-list-container { grid-column: auto; }
    .game-list { max-height: min(56vh, 500px); }
    .game-list-heading { padding: 10px; }
    .game-item { padding: 8px 9px; }
    .game-info-name { max-width: 34vw; font-size: .72rem; }
    .game-info-size { font-size: .6rem; }
    .game-select-btn { min-width: 51px; min-height: 30px; padding-inline: 6px; font-size: .6875rem; }
    .selected-cart-box { top: 76px; gap: 9px; padding: 10px; }
    .cart-summary { gap: 8px; font-size: .69rem; }
    .cart-icon { width: 32px; height: 32px; }
    .cart-total { margin-left: 4px; padding-left: 8px; white-space: nowrap; }
    .request-load-btn { min-height: 38px; gap: 6px; padding: 0 9px; font-size: .6875rem; }
}
@media (max-width: 390px) {
    .page-shell.games-main { width: calc(100% - 22px); }
    .game-thumb-wrap { width: 36px; height: 49px; }
    .game-open { gap: 7px; }
    .game-info-name { max-width: 31vw; font-size: .6875rem; }
    .game-right { gap: 4px; }
    .game-info-size { padding-inline: 5px; font-size: .6875rem; }
    .game-select-btn { min-width: 45px; font-size: .6rem; }
    .selected-cart-box { gap: 6px; padding: 8px; }
    .cart-summary { gap: 6px; font-size: .6875rem; }
    .cart-icon { width: 28px; height: 28px; }
    .cart-total { padding-left: 5px; }
    .request-load-btn { padding-inline: 7px; font-size: .6875rem; }
}
@media (max-width: 480px) {
    .selected-cart-box { align-items: stretch; flex-direction: column; }
    .request-load-btn { width: 100%; min-height: 36px; font-size: .6875rem; }
}

/* Skip layout/painting for catalog rows outside the scrolling viewport. */
@supports (content-visibility: auto) {
    .game-item { content-visibility: auto; contain-intrinsic-size: auto 77px; }
    @media (max-width: 600px) { .game-item { contain-intrinsic-size: auto 66px; } }
}
/* All console families stay in a scrollable strip; model selection has its own field. */
.platform-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 6px; }
.platform-tab { flex: 0 0 auto; }
.platform-tab .platform-console-icon { width: 40px; height: 40px; object-fit: contain; }
.platform-console-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.console-model-choice { display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 100%; color: var(--text, #e8edf7); font-size: 12px; }
.console-model-choice select { max-width: 100%; padding: 10px; border-radius: 10px; background: #141d2b; color: #f4f7ff; border: 1px solid #42516a; font: inherit; }
@media (max-width: 650px) { .archive-search-row { flex-wrap: wrap; } .console-model-choice { width: 100%; } }