/* Homepage evolution: existing charcoal / emerald brand, native system type.
   Quiet motion (3/10), familiar library layouts (4/10), useful density (5/10).
   Shared sidebar and mobile navigation continue to use the site shell. */
.home-page {
    --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --home-muted: #a7a7b0;
    background: var(--bg-primary);
}
.home-page::before, .home-page::after { display: none; }
.home-page .container { max-width: 1328px; padding-inline: 48px; }
.home-page .section { padding-block: 64px; }
.home-page .section-header { text-align: start; margin-bottom: 28px; }
.home-page .section-title { font-size: clamp(1.65rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -.04em; margin-bottom: 10px; }
.home-page .section-subtitle { margin: 0; max-width: 65ch; color: var(--home-muted); font-size: .95rem; }
.home-page .btn { min-height: 46px; white-space: nowrap; line-height: 1.3; }
.home-page :is(a, button):active { transform: translateY(1px); }
.home-page .home-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 14px; font-weight: 600; min-height: 46px; }
.home-page .home-text-link i { font-size: 11px; color: var(--home-muted); }
.home-page .home-text-link:hover { color: var(--accent-light); }
.home-hero { overflow: hidden; position: relative; }
.home-page .home-hero-layout { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 12px; padding-block: 66px 48px; }
.home-hero-copy { position: relative; z-index: 1; padding-block: 12px; }
.home-eyebrow { font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--accent-light); margin-bottom: 22px; }
.home-page .home-hero .hero-title { font-size: clamp(2.75rem, 4.4vw, 4.5rem); letter-spacing: -.06em; line-height: 1.14; margin-bottom: 22px; text-align: start; overflow-wrap: normal; background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; }
.home-hero .hero-title span { color: var(--accent-light); -webkit-text-fill-color: currentColor; }
.home-page .home-hero .hero-subtitle { max-width: 39ch; text-align: start; margin: 0 0 26px; font-size: 1rem; line-height: 1.75; color: #b2b2bb; }
.home-page .home-hero .hero-buttons { justify-content: flex-start; align-items: center; gap: 24px; margin: 0; }
.home-logo-mix { position: relative; width: 100%; max-width: 520px; height: 420px; justify-self: center; isolation: isolate; }
.home-logo-mix::before { content: ""; position: absolute; inset: 5%; z-index: -1; background: radial-gradient(ellipse at 50% 50%, rgba(var(--flow-color-a,77,205,163),.14), transparent 65%); }
.home-logo-orbit { position: absolute; width: 73%; aspect-ratio: 1; left: 17%; top: 10%; border: 1px solid rgba(var(--flow-color-a,77,205,163),.15); border-radius: 50%; transform: rotate(-24deg) scaleY(.84); }
.home-logo-orbit::after { content: ""; position: absolute; inset: -20px; border: 1px dashed rgba(var(--flow-color-b,69,158,203),.09); border-radius: 50%; }
.home-logo-tile { position: absolute; display: grid; place-items: center; border: 1px solid rgba(207,223,230,.14); border-radius: 16px; background: linear-gradient(145deg,rgba(34,39,46,.95),rgba(13,16,21,.94)); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.035); padding: 18px; transition: border-color .2s, box-shadow .2s; animation: home-logo-drift 9s ease-in-out infinite alternate; }
.home-logo-tile:hover, .home-logo-tile:focus-visible { border-color: rgba(var(--flow-color-a,77,205,163),.6); box-shadow: 0 18px 45px -22px rgba(var(--flow-color-a,77,205,163),.25); z-index: 4; }
.home-logo-tile img { width: 100%; height: 100%; object-fit: contain; }
.home-logo-gta { --logo-turn: -9deg; width: 30%; height: 132px; left: 3%; top: 5%; }
.home-logo-cs { --logo-turn: 7deg; width: 39%; height: 90px; right: 0; top: 14%; animation-delay: -3s; }
.home-logo-cs img { filter: brightness(0) invert(1); }
.home-logo-cod { --logo-turn: -6deg; width: 40%; height: 85px; left: 0; top: 66%; animation-delay: -5s; }
.home-logo-gmod { --logo-turn: 11deg; width: 22%; height: 104px; right: 1%; top: 60%; padding: 22px; animation-delay: -1s; }
.home-logo-rdr { --logo-turn: 4deg; width: 45%; height: 80px; left: 32%; top: 80%; padding: 14px; animation-delay: -7s; }
/* Console wordmarks use smaller plaques between the larger game logos. */
.home-console-logo { padding: 12px 14px; border-radius: 12px; }
.home-console-logo img { filter: brightness(0) invert(1); opacity: .9; }
.home-logo-ps5 { --logo-turn: 5deg; width: 27%; height: 58px; left: 2%; top: 43%; animation-delay: -2s; }
.home-logo-xbox { --logo-turn: -4deg; width: 31%; height: 52px; left: 43%; top: 0; animation-delay: -6s; }
.home-logo-switch { --logo-turn: -7deg; width: 17%; height: 66px; right: 2%; top: 41%; padding: 13px; animation-delay: -4s; }
.home-logo-centre { position: absolute; z-index: 2; width: 37%; height: 168px; left: 33%; top: 32%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 20px 14px; border: 1px solid rgba(var(--flow-color-a,77,205,163),.45); border-radius: 24px; background: linear-gradient(140deg,rgba(26,39,37,.96),rgba(14,19,24,.98)); box-shadow: 0 24px 65px -25px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); transform: rotate(-3deg); }
.home-logo-centre img { width: 104px; height: 80px; object-fit: contain; }
.home-logo-centre span { color: #e7eee9; font-size: 13px; font-weight: 650; letter-spacing: -.03em; }
@keyframes home-logo-drift { from { transform: translateY(-4px) rotate(var(--logo-turn)); } to { transform: translateY(5px) rotate(calc(var(--logo-turn) + 2deg)); } }
.home-page.site-motion-paused .home-logo-tile { animation-play-state: paused; }
.home-page .home-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); padding-block: 18px; position: relative; }
.home-shortcuts::before, .home-shortcuts::after { content: ""; height: 1px; background: var(--border); position: absolute; inset-inline: 48px; }
.home-shortcuts::before { top: 0; } .home-shortcuts::after { bottom: 0; }
.home-shortcuts a { display: flex; align-items: center; gap: 10px; padding: 12px 18px; min-height: 48px; color: #c4c4cc; font-size: 13px; font-weight: 500; }
.home-shortcuts a:first-child { padding-inline-start: 0; }
.home-shortcuts a + a { border-inline-start: 1px solid var(--border); }
.home-shortcuts a > i:first-child { color: var(--accent-light); font-size: 15px; }
.home-shortcuts a > i:last-child { font-size: 10px; margin-inline-start: auto; color: var(--home-muted); transition: transform .18s; }
.home-shortcuts a:hover { color: var(--text-primary); }
.home-shortcuts a:hover > i:last-child { transform: translateX(3px); }
.home-game-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.home-page .home-game-controls .filter-buttons { justify-content: flex-start; margin: 0; gap: 6px; flex-wrap: nowrap; }
.home-page .filter-buttons .filter-btn { border-radius: 8px; min-height: 44px; padding: 9px 13px; background: transparent; border-color: transparent; color: #b2b2bb; font-size: 13px; white-space: nowrap; }
.home-page .filter-buttons .filter-btn.active { background: #25252b; border-color: #38383f; color: var(--text-primary); }
.home-page .filter-buttons .filter-btn:hover { background: #1a1a1e; color: var(--text-primary); }
.home-page .home-game-controls .search-container { margin: 0; max-width: 320px; width: 100%; }
.home-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.home-page .search-input { min-height: 44px; border-radius: 8px; background: #101013; border-color: #303036; font-size: 13px; }
.home-page .search-input::placeholder { color: #9898a3; }
.home-search-status { color: var(--home-muted); font-size: 12px; margin: 16px 0; }
.home-page .games-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px 16px; }
.home-page .game-card { display: flex; flex-direction: column; border: 0; background: transparent; border-radius: 0; overflow: visible; }
.home-page .game-card:hover { transform: none; }
.home-page .game-image { aspect-ratio: 16/10; border-radius: 12px; }
.home-page .game-image img { object-position: center; }
.home-page .game-info { padding: 16px 0 8px; display: flex; flex-direction: column; height: auto; flex: 1; }
.home-page .game-title { font-size: 15px; line-height: 1.35; letter-spacing: -.02em; font-weight: 650; margin-bottom: 7px; }
.home-page .game-description { color: var(--home-muted); font-size: 12px; line-height: 1.65; min-height: 3.3em; margin-bottom: 12px; }
.home-page .game-link { color: #d4d4db; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; align-self: start; min-height: 36px; margin-top: auto; }
.home-page .game-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.home-page .game-link:focus-visible { outline: 0; }
.home-page .game-card:focus-within { outline: 2px solid var(--accent-light); outline-offset: 5px; border-radius: 12px; }
.home-page .game-card:hover .game-link { color: var(--accent-light); }
.home-page .game-link i { font-size: 10px; transition: transform .18s; }
.home-page .game-card:hover .game-link i { transform: translateX(3px); }
.home-page .game-card-more { grid-column: 1/-1; flex-direction: row; align-items: center; gap: 18px; padding: 18px 20px; background: #131316; border-radius: 12px; margin-top: 4px; }
.home-page .game-card-more .game-image { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 8px; background: #222229; color: var(--accent-light); font-size: 20px; }
.home-page .game-card-more .game-info { flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 18px; padding: 0; }
.home-page .game-card-more .game-title { grid-column: 1; font-size: 14px; margin: 0 0 4px; }
.home-page .game-card-more .game-description { min-height: 0; grid-column: 1; margin: 0; }
.home-page .game-card-more .game-link { grid-column: 2; grid-row: 1/3; align-self: center; margin-top: 0; }
.home-page .no-results { padding: 48px 16px; border-radius: 12px; background: var(--bg-secondary); }
.home-page .no-results h3 { font-size: 20px; margin: 12px 0 8px; }
.home-page .no-results p { color: var(--home-muted); margin-bottom: 20px; }
.home-page .home-consoles { background: rgba(16,16,19,.68); border-block: 1px solid var(--border); }
.home-platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 36px; }
.home-platform { display: flex; align-items: center; gap: 18px; min-height: 110px; padding-block: 22px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.home-platform-mark { width: 76px; min-width: 76px; display: flex; align-items: center; justify-content: center; }
.home-platform-mark img { width: 76px; height: 36px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; transition: opacity .18s; }
.home-platform-mark i { font-size: 30px; color: #d4d4db; }
.home-platform-copy { min-width: 0; flex: 1; }
.home-platform h3 { font-size: 15px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 5px; }
.home-platform-copy > span { display: block; color: var(--home-muted); font-size: 12px; line-height: 1.5; }
.home-platform > i { color: var(--home-muted); font-size: 12px; transition: transform .18s; }
.home-platform:hover { color: var(--accent-light); }
.home-platform:hover .home-platform-mark img { opacity: 1; }
.home-platform:hover > i { transform: translateX(3px); color: var(--accent-light); }
.home-console-links { display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0 32px; }
.home-console-links a { min-height: 36px; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--accent-light); }
.home-console-links i { font-size: 10px; }
.home-emulators { background: #1a1a1e; border-radius: 12px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-emulators h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 4px; }
.home-emulators p { font-size: 12px; color: var(--home-muted); }
.home-emulators nav { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; }
.home-emulators a { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; font-size: 12px; color: #cdccd4; }
.home-emulators a:first-child { color: var(--accent-light); }
.home-emulators a:hover { color: var(--text-primary); }
.home-emulators a i { font-size: 10px; }
.home-page .tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.home-page .tool-card { flex-direction: row; border: 1px solid var(--border); border-radius: 12px; background: #111114; padding: 24px; gap: 18px; align-items: flex-start; }
.home-page .tool-card:hover { transform: none; border-color: var(--border-hover); }
.home-page .tool-icon { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0; background: #222229; }
.home-page .tool-icon img { width: 48px; height: 48px; object-fit:contain; border-radius: 8px; }
.home-page .tool-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 5px; letter-spacing: -.02em; }
.home-page .tool-info p { font-size: 12px; color: var(--home-muted); line-height: 1.65; margin-bottom: 12px; }
.home-page .tool-link { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-size: 12px; }
.home-page .tool-link i { font-size: 10px; }
.home-page .home-help { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 0 64px; }
.home-help h2 { font-size: 22px; line-height: 1.3; letter-spacing: -.03em; margin-bottom: 8px; }
.home-help p { color: var(--home-muted); font-size: 13px; }
.home-help-links { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.home-help-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: #d4d4db; }
.home-help-links a:first-child { color: var(--accent-light); }
.home-help-links i { font-size: 10px; }
.home-page .footer { background: rgba(16,16,19,.8); }
.home-page .footer-section p { max-width: 32ch; }

@media (min-width: 1025px) and (max-width: 1200px) {
    .home-page .container { padding-inline: 32px; }
    .home-page .home-shortcuts a { padding-inline: 10px; font-size: 12px; }
    .home-shortcuts::before, .home-shortcuts::after { inset-inline: 32px; }
    .home-page .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-game-controls { align-items: stretch; flex-direction: column-reverse; gap: 16px; }
    .home-page .home-game-controls .search-container { max-width: none; }
    .home-emulators, .home-page .home-help { align-items: flex-start; flex-direction: column; }
    .home-platform-grid { column-gap: 24px; }
    .home-platform { gap: 12px; }
    .home-platform-mark, .home-platform-mark img { width: 56px; min-width: 56px; }
}
@media (max-width: 1024px) {
    .home-page .container { padding-inline: 32px; }
    .home-page .search-input { font-size: 16px; }
    .home-page .home-hero-layout { padding-block: 40px; }
    .home-page .home-hero .hero-title { font-size: clamp(2.75rem,6vw,4rem); }
    .home-shortcuts::before, .home-shortcuts::after { inset-inline: 32px; }
    .home-page .section { padding-block: 48px; }
    .home-page .home-help { padding-bottom: 48px; }
}
@media (max-width: 900px) {
    .home-game-controls { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
    .home-page .home-game-controls .search-container { max-width: none; }
    .home-page .games-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .home-page .home-shortcuts { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-shortcuts a { padding-inline: 16px; }
    .home-shortcuts a:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
    .home-emulators, .home-page .home-help { align-items: flex-start; flex-direction: column; gap: 16px; }
}
@media (max-width: 767px) {
    .home-page .container { padding-inline: 24px; }
    .home-page .home-hero-layout { grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 36px 32px; }
    .home-hero-copy { padding: 0; }
    .home-eyebrow { margin-bottom: 18px; font-size: 11px; }
    .home-page .home-hero .hero-title { font-size: clamp(2.75rem,9vw,4rem); margin-bottom: 18px; }
    .home-page .home-hero .hero-subtitle { max-width: 43ch; font-size: 14px; line-height: 1.75; margin-bottom: 20px; }
    .home-page .home-hero .hero-buttons { gap: 22px; }
    .home-page .home-hero .hero-buttons .btn { flex: 0 1 auto; font-size: 13px; }
    .home-logo-mix { max-width: 420px; height: 320px; }
    .home-logo-gta { height: 108px; padding: 14px; }
    .home-logo-cs { height: 72px; padding: 14px; }
    .home-logo-cod { top: 68%; height: 70px; padding: 14px; }
    .home-logo-gmod { height: 80px; padding: 17px; }
    .home-logo-rdr { left: 35%; height: 64px; padding: 12px; }
    .home-logo-ps5 { height: 46px; top: 44%; padding: 10px; }
    .home-logo-xbox { height: 44px; top: -3%; padding: 9px 11px; }
    .home-logo-switch { width: 18%; height: 56px; top: 39%; right: 0; padding: 10px; }
    .home-logo-centre { height: 138px; padding: 14px 10px; }
    .home-logo-centre img { width: 88px; height: 68px; }
    .home-logo-centre span { font-size: 11px; }
    .home-shortcuts::before, .home-shortcuts::after { inset-inline: 24px; }
    .home-page .home-shortcuts { padding-block: 12px; }
    .home-shortcuts a { font-size: 12px; padding-block: 12px; gap: 9px; }
    .home-shortcuts a > i:last-child { display: none; }
    .home-page .games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px; }
    .home-page .game-title { font-size: 14px; }
    .home-page .home-game-controls .filter-buttons { gap: 2px; flex-wrap: wrap; }
    .home-page .filter-buttons .filter-btn { font-size: 12px; padding-inline: 12px; }
    .home-page .game-card-more { padding: 16px; gap: 14px; }
    .home-page .game-card-more .game-info { display: flex; align-items: flex-start; gap: 4px; }
    .home-page .game-card-more .game-link { align-self: start; min-height: 32px; }
    .home-platform-grid { grid-template-columns: minmax(0,1fr); }
    .home-platform { min-height: 98px; padding-block: 18px; }
    .home-platform h3 { font-size: 15px; }
    .home-platform-copy > span { font-size: 12px; }
    .home-console-links { gap: 8px 24px; margin-bottom: 24px; }
    .home-emulators { padding: 20px; }
    .home-emulators nav { gap: 4px 20px; }
    .home-page .tools-grid { grid-template-columns: minmax(0,1fr); }
    .home-page .tool-card { padding: 20px; }
    .home-help h2 { font-size: 20px; }
    .home-help-links { gap: 8px 20px; }
}
@media (max-width: 380px) {
    .home-page .container { padding-inline: 16px; }
    .home-shortcuts::before, .home-shortcuts::after { inset-inline: 16px; }
    .home-page .home-hero .hero-buttons { gap: 16px; }
    .home-page .home-text-link { font-size: 12px; }
    .home-page .filter-buttons .filter-btn { padding-inline: 10px; }
    .home-page .games-grid { gap: 20px 12px; }
    .home-page .game-title { font-size: 13px; }
    .home-page .game-description { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .home-page .game-card:hover .game-image img, .home-page :is(a,button):active { transform: none; }
}