:root { color-scheme: dark; --bg:#0d0d0f; --panel:#171719; --raised:#29292d; --line:#454548; --text:#f6f6f6; --muted:#c6c6c6; --accent:#ffd447; --warm:#ffd447; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:radial-gradient(ellipse at 65% 10%,#3c171b 0,transparent 45%),#0d0d0f; color:var(--text); font:16px/1.5 "Segoe UI",Arial,sans-serif; }
body.gallery-open { overflow:hidden; }
[hidden] { display:none!important; }
button,input,select { font:inherit; }
button { cursor:pointer; border:0; }
button:disabled { cursor:default; opacity:.55; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-underline-offset:4px; }
:focus-visible { outline:3px solid #ffd447; outline-offset:4px; }
h1,h2,h3,p { margin:0; } h1,h2,h3 { line-height:1.2; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:12px 18px; background:var(--accent); color:#191919; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.site-header { min-height:104px; background:#09090b; }
.global-header-inner { max-width:1250px; min-height:104px; padding:0 28px; margin:auto; display:flex; align-items:center; gap:38px; }
.logo-home-link { display:block; flex-shrink:0; }
.brand-logo { display:block; width:215px; height:auto; }
.header-actions { display:flex; align-items:center; gap:24px; }
.header-link { font-size:17px; color:#c6c6c6; text-decoration:none; padding:12px 0; }
.header-link.current { color:var(--accent); box-shadow:0 3px var(--accent); }
.header-note { margin-left:auto; font-size:13px; color:#c6c6c6; }
.saved-games-btn { padding:12px 0; background:none; color:#c6c6c6; font-size:16px; }
.saved-games-btn span { display:inline-block; margin-left:6px; padding:1px 7px; background:#29292d; color:#ffd447; font-size:13px; }
.saved-games-btn.is-active { color:var(--accent); }
.store-layout { max-width:1250px; margin:0 auto; padding:28px 28px 0; display:grid; grid-template-columns:170px minmax(0,1fr); gap:28px; }
.browse-sidebar { padding-top:54px; }
.sidebar-home { display:block; text-decoration:none; padding-bottom:22px; border-bottom:1px solid #454548; }
.sidebar-home strong { color:#ffd447; font-size:22px; font-weight:600; display:block; }
.sidebar-home span { color:var(--muted); font-size:13px; }
.sidebar-label { color:#f0c64b; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.06em; margin:24px 0 8px; }
.browse-sidebar .filter-row { display:grid; gap:3px; }
.filter-chip { background:none; color:var(--muted); min-height:40px; padding:8px 10px; border:1px solid transparent; border-radius:2px; text-align:left; font-size:15px; }
.filter-chip:hover { background:#2d272a; color:#f6f6f6; }
.filter-chip.is-active { border-left:3px solid var(--accent); background:#3c171b; color:#f6f6f6; }
.quick-filter-btn,.random-sidebar-btn { display:block; width:100%; min-height:44px; padding:10px; text-align:left; border-radius:2px; background:#29292d; border:1px solid #454548; color:#dddddd; font-size:14px; }
.quick-filter-btn.is-active { background:#3c171b; border-color:var(--accent); color:#f6f6f6; }
.random-sidebar-btn { margin-top:8px; background:transparent; border:0; padding-left:0; }
.random-sidebar-btn span { color:var(--accent); }
.sidebar-footnote { margin:26px 0; color:#c6c6c6; font-size:13px; line-height:1.7; }
.select-wrap { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:14px; color:var(--muted); }
.select-wrap select { min-height:44px; width:100%; max-width:100%; padding:8px 9px; border:1px solid #454548; border-radius:2px; background:#171719; color:var(--text); }
.browse-sidebar .select-wrap>span { display:none; }
.store-content { min-width:0; }
.store-toolbar { display:flex; align-items:center; gap:22px; min-height:52px; padding:6px 8px 6px 18px; background:linear-gradient(90deg,#961f28,#610f19); box-shadow:0 3px 12px #00000055; }
.store-toolbar-link { text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; padding:8px 0; }
.store-toolbar-link:hover { color:#f6f6f6; text-decoration:underline; }
.search-wrap { position:relative; display:flex; flex:1; max-width:300px; margin-left:auto; min-width:160px; }
.search-input { width:100%; min-height:38px; padding:8px 38px 8px 12px; border:1px solid #727276; border-radius:2px; background:#09090b; color:#f6f6f6; font-size:15px; }
.search-input::placeholder { color:#dddddd; opacity:1; }
.search-icon { position:absolute; right:12px; top:0; color:#ffd447; font-size:25px; pointer-events:none; }
.featured-section { margin-top:26px; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
h2 { font-size:17px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.section-intro { color:var(--muted); font-size:14px; }
.featured-grid { display:block; }
.spotlight-card { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); background:#171719; box-shadow:0 6px 18px #00000088; }
.spotlight-media { display:block; position:relative; min-height:338px; width:100%; padding:0; background:#09090b; overflow:hidden; }
.spotlight-media>img { display:block; width:100%; height:100%; object-fit:contain; position:absolute; inset:0; }
.spotlight-media::after { content:''; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,#000000b3); pointer-events:none; }
.spotlight-play-hint { display:flex; gap:12px; align-items:center; position:absolute; z-index:1; bottom:18px; left:20px; color:#f6f6f6; font-size:16px; padding:8px 12px; background:#111111a8; }
.spotlight-play-hint span { color:#ffd447; }
.spotlight-copy { padding:22px 22px 18px; display:flex; flex-direction:column; }
.feature-kicker { color:#ffd447; font-size:12px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; }
.spotlight-copy h1 { font-size:27px; font-weight:500; letter-spacing:-.025em; }
.feature-description { margin-top:12px; color:#c6c6c6; font-size:15px; line-height:1.5; }
.feature-screenshots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:16px 0 12px; }
.feature-shot { display:block; padding:0; aspect-ratio:16/9; background:#29292d; border:2px solid transparent; overflow:hidden; }
.feature-shot.is-active { border-color:#ffd447; }
.feature-shot img { display:block; width:100%; height:100%; object-fit:cover; }
.feature-tags { display:flex; flex-wrap:wrap; gap:5px; }
.feature-tags span { padding:3px 7px; background:#29292d; color:#dddddd; font-size:12px; border-radius:2px; }
.feature-actions { display:flex; align-items:center; gap:16px; margin-top:auto; padding-top:18px; }
.retro-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 22px; background:linear-gradient(90deg,#ffe36a,#ffd02c); color:#191919; border-radius:2px; font-size:16px; font-weight:600; white-space:nowrap; }
.retro-btn:hover { background:linear-gradient(90deg,#fff08c,#ffdf56); }
.feature-free { display:block; color:#c6c6c6; font-size:12px; margin-top:10px; }
.feature-warning { margin-top:10px; font-size:13px; }
.detail-card-btn,.favourite-btn { min-height:40px; padding:8px 3px; background:none; color:#ffd447; font-size:14px; }
.detail-card-btn:hover,.favourite-btn:hover,.favourite-btn.is-saved { color:#f6f6f6; }
.feature-pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 0; }
.feature-pages { display:flex; align-items:center; gap:1px; }
.feature-page { width:28px; height:32px; background:none; padding:0 6px; }
.feature-page>span { display:block; width:16px; height:9px; border-radius:2px; background:#454548; }
.feature-page.is-active>span { background:#ffd447; }
.feature-arrow { width:36px; height:36px; padding:0; background:#171719; color:#dddddd; font-size:28px; line-height:1; }
.feature-position { color:#c6c6c6; font-size:12px; }
.network-status:not(:empty) { margin:10px 0; color:#ffd447; }
.recent-section { margin:24px 0; }
.recent-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.recent-game-card { display:flex; align-items:center; gap:12px; background:#171719; padding:10px; }
.recent-game-thumb { width:76px; height:48px; object-fit:cover; }
.recent-game-copy { flex:1; min-width:0; }
.recent-game-copy span { font-size:12px; color:var(--muted); display:block; }
.recent-game-copy strong { font-size:15px; display:block; font-weight:500; }
.recent-game-copy small { display:none; }
.recent-play-btn { padding:10px; background:#29292d; color:#dddddd; font-size:14px; }
.clear-history-btn { color:#c6c6c6; background:none; font-size:13px; min-height:36px; text-decoration:underline; }
.library-section { margin-top:28px; padding-top:18px; }
.eyebrow { color:#f0c64b; font-size:12px; margin-bottom:6px; }
.library-heading h2 { font-size:20px; text-transform:none; letter-spacing:0; }
.library-heading { margin-bottom:16px; }
.result-count { color:#c6c6c6; font-size:13px; }
.catalog-navigation { position:relative; display:flex; align-items:end; justify-content:space-between; gap:10px; border-bottom:1px solid #454548; margin-bottom:6px; }
.catalog-tabs { display:flex; gap:3px; }
.catalog-tabs button { min-height:44px; padding:10px 15px; color:#c6c6c6; background:transparent; font-size:14px; border-radius:2px 2px 0 0; }
.catalog-tabs button[aria-pressed="true"] { color:#f6f6f6; background:#29292d; border-top:2px solid #ffd447; }
.filter-drawer { margin:0; }
.filter-drawer>summary { display:flex; align-items:center; gap:6px; padding:10px; min-height:44px; color:#dddddd; list-style:none; cursor:pointer; font-size:14px; }
.filter-drawer>summary::after { content:'▾'; }
.filter-drawer>summary::-webkit-details-marker { display:none; }
.more-options-content { position:absolute; z-index:5; top:48px; right:0; width:min(600px,calc(100vw - 56px)); padding:20px; background:#171719; border:1px solid #454548; box-shadow:0 12px 32px #000000aa; }
.more-options-content .filter-row { display:flex; flex-wrap:wrap; gap:5px; }
.filter-label { font-size:14px; color:#c6c6c6; margin-bottom:8px; }
.option-selects { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; margin-top:18px; }
.option-actions { display:flex; gap:20px; margin-top:15px; }
.text-mode-btn,.reset-filters-btn { background:none; color:#ffd447; min-height:40px; font-size:14px; padding:8px 0; text-decoration:underline; }
.game-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.game-card { display:grid; grid-template-columns:190px minmax(0,1fr) 124px; align-items:stretch; gap:16px; padding:0 14px 0 0; background:#171719; transition:background-color .15s; }
.game-card:hover,.game-card:focus-within { background:#2d272a; }
.thumb-frame { display:block; position:relative; width:100%; min-height:106px; padding:0; background:#09090b; overflow:hidden; }
.game-thumb { display:block; position:relative; z-index:1; width:100%; height:100%; min-height:106px; object-fit:cover; }
.image-fallback { position:absolute; inset:0; display:grid; place-items:center; color:#c6c6c6; font-size:18px; }
.card-content { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:12px 0; }
.game-card h3 { font-size:19px; font-weight:500; line-height:1.3; }
.game-title-button { font:inherit; color:#f6f6f6; padding:0; text-align:left; background:none; }
.game-desc { color:#c6c6c6; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:5px; }
.card-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; color:#ffd447; font-size:12px; }
.card-meta>span { background:#29292d; padding:2px 6px; border-radius:2px; }
.catalog-status { color:#ffd447; font-size:12px; }
.card-footer { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:5px; padding:10px 0; }
.session-length { color:#c6c6c6; font-size:13px; text-align:center; }
.card-footer .retro-btn { min-height:38px; padding:7px 12px; font-size:15px; }
.row-secondary { display:flex; justify-content:center; gap:14px; }
.row-secondary .detail-card-btn,.row-secondary .favourite-btn { min-height:28px; font-size:12px; padding:2px 0; }
.warning { color:#ffd447; }
.empty-state,.loading-card { padding:28px; background:#171719; color:#dddddd; grid-column:1 / -1; }
.empty-state p { margin:8px 0 16px; }
.secondary-cta,.detail-secondary-btn,.gallery-close { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:10px 14px; background:#29292d; border:1px solid #454548; color:#dddddd; border-radius:2px; text-decoration:none; }
.pagination-row { display:flex; align-items:center; justify-content:center; gap:14px; padding:24px 0; }
.pagination-pages { display:flex; gap:5px; align-items:center; }
.pagination-btn { min-height:40px; min-width:40px; padding:8px 11px; color:#dddddd; background:#29292d; border:1px solid #454548; border-radius:2px; }
.pagination-btn.is-active { background:#3c171b; border-color:#ffd447; color:#f6f6f6; }
.site-footer { max-width:1030px; margin:46px auto 0; padding:24px 28px 32px; display:grid; grid-template-columns:1fr auto; gap:14px; border-top:1px solid #454548; color:#c6c6c6; font-size:13px; }
.site-footer strong { color:#f6f6f6; margin-right:18px; }
.site-footer p { grid-column:1 / -1; font-size:12px; }
.text-only-mode .game-card { grid-template-columns:minmax(0,1fr) 124px; padding-left:16px; }
.text-only-mode .game-card .thumb-frame { display:none; }
@media(max-width:1100px) {
    .store-layout { grid-template-columns:145px minmax(0,1fr); gap:20px; padding-left:22px; padding-right:22px; }
    .header-note { display:none; }
    .spotlight-card { grid-template-columns:minmax(0,1.3fr) minmax(240px,1fr); }
    .spotlight-copy { padding:18px; }
    .spotlight-copy h1 { font-size:24px; }
    .store-toolbar { gap:16px; }
    .store-toolbar-link { font-size:13px; }
    .game-card { grid-template-columns:160px minmax(0,1fr) 105px; gap:12px; }
}
@media(max-width:850px) {
    .global-header-inner { min-height:90px; padding:0 22px; gap:28px; }
    .site-header { min-height:90px; }
    .brand-logo { width:180px; }
    .header-actions { gap:20px; }
    .store-layout { display:block; padding-top:20px; }
    .browse-sidebar { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 0 18px; }
    .sidebar-home,.sidebar-label,.sidebar-footnote { display:none; }
    .browse-sidebar #collection-list { max-width:210px; }
    .browse-sidebar .filter-row { display:flex; flex-wrap:wrap; gap:5px; width:100%; }
    .browse-sidebar .filter-chip { min-height:40px; padding:8px 12px; }
    .quick-filter-btn,.random-sidebar-btn { width:auto; min-height:40px; margin:0; padding:8px 12px; }
    .spotlight-card { grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr); }
    .spotlight-media { min-height:320px; }
}
@media(max-width:620px) {
    .global-header-inner { min-height:84px; padding:0 16px; gap:16px; justify-content:space-between; }
    .site-header { min-height:84px; }
    .brand-logo { width:155px; }
    .header-actions { gap:14px; }
    .header-link { font-size:14px; }
    .header-link:not(.current) { display:none; }
    .saved-games-btn { font-size:13px; }
    .saved-games-btn span { margin-left:2px; }
    .store-layout { padding:18px 14px 0; }
    .browse-sidebar { margin-bottom:14px; gap:8px; }
    .browse-sidebar .filter-chip { font-size:14px; padding:7px 10px; min-height:38px; }
    .quick-filter-btn,.random-sidebar-btn { font-size:13px; min-height:38px; }
    .browse-sidebar #collection-list { max-width:none; flex:1; min-width:150px; }
    .browse-sidebar .select-wrap select { font-size:13px; min-height:38px; }
    .store-toolbar { padding:7px; }
    .store-toolbar-link { display:none; }
    .search-wrap { max-width:none; width:100%; }
    .search-input { min-height:42px; font-size:16px; }
    .featured-section { margin-top:22px; }
    h2 { font-size:14px; }
    .section-intro { display:none; }
    .spotlight-card { display:flex; flex-direction:column; }
    .spotlight-media { min-height:0; aspect-ratio:16/9; }
    .spotlight-copy { padding:18px; }
    .spotlight-copy h1 { font-size:25px; }
    .feature-description { font-size:15px; margin-top:8px; }
    .feature-screenshots { margin-top:12px; }
    .feature-actions { padding-top:16px; }
    .feature-pagination { padding-top:8px; }
    .library-section { margin-top:24px; padding-top:10px; }
    .library-heading { flex-wrap:wrap; gap:8px; }
    .result-count { font-size:12px; }
    .catalog-tabs { gap:0; }
    .catalog-tabs button { font-size:12px; padding:9px; min-height:42px; }
    .catalog-tabs button[data-sort="newest"] { display:none; }
    .filter-drawer>summary { font-size:13px; padding:8px; }
    .more-options-content { width:calc(100vw - 28px); padding:16px; }
    .option-selects { grid-template-columns:1fr; }
    .game-card { grid-template-columns:110px minmax(0,1fr); gap:10px; padding:0 10px 0 0; }
    .thumb-frame { grid-row:1 / span 2; min-height:148px; }
    .game-thumb { position:absolute; height:100%; min-height:148px; object-fit:cover; }
    .card-content { padding:12px 0 0; }
    .game-card h3 { font-size:17px; }
    .game-desc { display:none; }
    .card-meta { font-size:11px; gap:4px; }
    .card-footer { grid-column:2; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 10px; padding:6px 0 10px; }
    .session-length { font-size:12px; text-align:left; }
    .card-footer .retro-btn { font-size:14px; padding:7px 12px; min-height:40px; grid-column:2; grid-row:1 / span 2; }
    .row-secondary { justify-content:start; gap:12px; }
    .row-secondary .detail-card-btn,.row-secondary .favourite-btn { min-height:30px; }
    .recent-grid { grid-template-columns:1fr; }
    .recent-game-copy strong { font-size:14px; }
    .pagination-row { gap:8px; }
    .pagination-btn { min-width:34px; padding:7px; }
    .pagination-pages { gap:4px; }
    .site-footer { margin-top:28px; padding:24px 16px; }
    .site-footer span { display:block; margin-top:4px; }
    .text-only-mode .game-card { grid-template-columns:1fr; padding:0 14px; }
    .text-only-mode .card-footer { grid-column:1; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .game-card { transition:none; } }

.gallery-modal, .detail-modal { position: fixed; z-index: 20; inset: 0; padding: 30px; display: flex; align-items: center; justify-content: center; }
.gallery-modal { z-index: 30; }
.gallery-backdrop, .detail-backdrop { position: absolute; inset: 0; background: #000b; }
.gallery-dialog, .detail-dialog { position: relative; z-index: 1; width: min(1080px, 100%); max-height: calc(100dvh - 60px); overflow-y: auto; padding: 24px; border: 1px solid #454548; border-radius: 12px; background: var(--panel); box-shadow: 0 20px 100px #0008; }
.gallery-header, .detail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.gallery-header h2, .detail-header h2 { margin-top: 6px; }
.gallery-stage { position: relative; display: grid; place-items: center; min-height: 200px; background: var(--bg); }
.gallery-stage > img { max-width: 100%; max-height: 65vh; object-fit: contain; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 48px; height: 56px; background: #111111dd; border: 1px solid var(--line); border-radius: 5px; color: var(--text); font-size: 36px; }
.gallery-nav.prev { left: 10px; }.gallery-nav.next { right: 10px; }
.gallery-strip, .detail-shot-strip { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.gallery-strip button, .detail-shot { overflow: hidden; padding: 3px; border: 2px solid transparent; border-radius: 5px; background: var(--bg); }
.gallery-strip img, .detail-shot img { display: block; width: 90px; max-width: 22vw; aspect-ratio: 16/9; object-fit: cover; }
.gallery-strip .is-active, .detail-shot.is-active { border-color: var(--accent); }
.detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.detail-image-button { display: block; width: 100%; padding: 0; background: var(--bg); }
.detail-image-button img { display: block; max-width: 100%; width: 100%; }
.detail-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-meta-grid span, .detail-support-item span { display: block; color: var(--muted); font-size: 13px; }
.detail-meta-grid strong, .detail-support-item strong { display: block; font-size: 16px; }
.detail-readiness-note, .detail-meta-grid em { display: none; }
.detail-description, .detail-how-to { margin-top: 20px; }
.detail-label { margin: 20px 0 7px; font-size: 14px; color: var(--warm); font-weight: 600; }
.detail-support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.detail-support-item.is-warning { color: var(--warm); }
.detail-tag-list, .control-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-tag-list span, .badge { padding: 5px 9px; font-size: 14px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.detail-actions .retro-btn { order: -1; }

@media(max-width:650px){.gallery-modal,.detail-modal{padding:12px}.gallery-dialog,.detail-dialog{padding:18px;max-height:calc(100dvh - 24px)}.detail-body{grid-template-columns:1fr}}