/* Homepage only. Game hubs and articles retain their current styles. */
.home{--page-bg:#101016;--text:#f4f4f7;--text-muted:#a8a8b7;--border:#2c2c37;--accent:#a99bff;--content:1200px;--gutter:32px;background:#101016;color:#f4f4f7;min-height:100vh}
.home .site-header{background:#14141b;border-bottom:1px solid #272731;position:relative}
.home .nav-wrap{min-height:76px;gap:24px}
.home .brand{color:#fafaff;gap:10px;text-decoration:none}
.home .brand-mark{width:27px;height:27px;color:#b8aaff}
.home .brand-name{font-size:20px;letter-spacing:-.6px;font-weight:750}
.home .main-nav{gap:30px}.home .main-nav a{color:#b4b4c1;font-size:14px;padding:10px 0}
.home .main-nav a:first-child{color:#f5f4ff}.home .main-nav a:hover{color:#c4baff}
.home-main{max-width:1264px;margin:0 auto;padding:0 32px}
.home-intro{text-align:center;padding:78px 0 72px;position:relative;isolation:isolate}
.hero-art{position:absolute;inset:0 -32px;z-index:-1;overflow:hidden;pointer-events:none;opacity:.35;mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%)}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#10101644,#101016bb 50%,#101016ee),linear-gradient(0deg,#101016cc,#10101655)}
.art-grid{display:grid;grid-template-columns:repeat(4,220px);gap:14px;transform:rotate(-12deg);position:absolute;top:-40px;left:-65px}
.art-grid img{width:220px;height:245px;object-fit:cover;border-radius:10px}
.intro-label{margin:0 0 23px;font-size:12px;letter-spacing:2.8px;color:#aaa7bf;font-weight:650;display:flex;gap:12px;justify-content:center;align-items:center}
.intro-label span{height:2px;width:24px;background:#a99bff}
.home-wordmark{font-size:clamp(36px,6.3vw,79px);line-height:1.1;letter-spacing:-4px;font-weight:850;color:#fff;white-space:nowrap}
.home-wordmark>span{color:#b5a7ff}.home-wordmark .wordmark-period{color:#f4f4f7}
.home-intro h1{font-size:26px;font-weight:650;letter-spacing:-.7px;margin:22px 0 8px;line-height:1.35}
.home-subtitle{font-size:16px;line-height:1.6;color:#a8a8b7;margin:0 0 30px}
.game-search{display:flex;align-items:center;gap:14px;max-width:610px;min-height:60px;padding:0 18px;margin:0 auto;border:1px solid #393845;background:#1d1d26;border-radius:10px;box-shadow:0 12px 40px #00000020;text-align:left;transition:border-color .2s}
.game-search:focus-within{border-color:#b6a7ff;box-shadow:0 0 0 3px #b6a7ff18}
.game-search svg{width:22px;height:22px;fill:none;stroke:#aaa6bd;stroke-width:1.7;flex:none}
.game-search input{font:inherit;font-size:16px;border:0;background:transparent;color:#fafaff;width:100%;min-width:0;outline:none;padding:16px 0;line-height:1.5}
.game-search input:focus-visible{outline:none}.game-search input::placeholder{color:#9392a5;opacity:1}.game-search input::-webkit-search-cancel-button{display:none}
.search-shortcut{font:12px/1.7 inherit;white-space:nowrap;padding:2px 7px;border:1px solid #3e3d4b;border-radius:4px;color:#a6a2ba}
.home button{cursor:pointer;font-family:inherit}.search-clear{background:none;border:0;color:#c5c0d7;font-size:26px;width:28px;padding:0;flex:none}
.game-library{padding:0 0 40px}.library-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:23px}
.library-title{display:flex;gap:12px;align-items:center}.library-title h2{margin:0;font-size:23px;font-weight:650;letter-spacing:-.5px}
.game-count{font-size:13px;color:#bcb8cb;padding:2px 9px;line-height:1.6;border:1px solid #373441;border-radius:6px;background:#22212b;min-width:27px;text-align:center}
.sort-control{display:flex;gap:6px;align-items:center}.sort-label{font-size:13px;color:#9491a4;margin-right:8px}.sort-control button{color:#bcb8cc;background:#1b1b24;border:1px solid #33313e;border-radius:6px;font-size:13px;padding:7px 12px;line-height:1.4}.sort-control button:hover,.sort-control button[aria-pressed=true]{color:#e6ddff;background:#302b43;border-color:#77639b}
.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.game-tile{display:block;text-decoration:none;min-width:0;background:#1a1a23;border:1px solid #30303b;border-radius:11px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.game-tile:hover{transform:translateY(-5px);border-color:#8c7daf;box-shadow:0 16px 30px #0003}.game-tile:focus-visible{outline:3px solid #b6a7ff;outline-offset:4px}
.game-cover{position:relative;aspect-ratio:1.25;overflow:hidden;background:#20202a}.game-cover img{height:100%;width:100%;object-fit:cover;transition:transform .4s}.game-tile:hover .game-cover img{transform:scale(1.045)}
.game-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 40%,#090911a0 100%)}
.cover-label{position:absolute;bottom:14px;left:16px;z-index:1;color:#fff;font-size:11px;font-weight:650;letter-spacing:1.4px;text-shadow:0 1px 4px #000}
.tile-copy{padding:18px 17px 20px}.tile-copy h3{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.3px}.tile-copy p{font-size:14px;color:#a4a1b4;line-height:1.5;min-height:42px;margin:0 0 19px}.tile-link{font-size:13px;color:#c3b6ff;font-weight:600}
.library-note{font-size:13px;color:#8d889e;text-align:center;letter-spacing:.25px;margin:30px 0 0}
.search-empty{text-align:center;border:1px dashed #3d354e;border-radius:10px;padding:50px 20px;background:#1a1721}.search-empty h3{margin:0 0 9px;font-size:22px}.search-empty p{color:#a8a0bc;font-size:16px}.reset-search{border:1px solid #706181;background:#34293f;color:#efdeff;border-radius:6px;padding:10px 16px;font-size:14px}
.home .site-footer{background:#14141b;border-top:1px solid #2a2833;margin-top:20px;padding:32px 0;color:#9690a6}
.home .footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}.footer-brand strong{color:#e6e0ef;font-size:18px;letter-spacing:-.6px}.footer-brand strong span{color:#b5a7ff}.footer-brand p{margin:7px 0 0;font-size:13px}.footer-right{text-align:right}.home .footer-nav{justify-content:flex-end}.home .footer-nav a{color:#bcb5ca;font-size:14px}.home .copyright{font-size:12px;margin:10px 0 0;color:#888293}
.home [hidden]{display:none!important}.home :focus-visible{outline:2px solid #c3adff;outline-offset:4px}
@media(min-width:1500px){.home-intro{padding-top:88px;padding-bottom:72px}}
@media(max-width:1000px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.game-cover{aspect-ratio:1.7}.home-intro{padding:52px 0}.home-wordmark{letter-spacing:-2px}.tile-copy p{min-height:0}}
@media(max-width:600px){.home{--gutter:20px}.home-main{padding:0 20px}.home .nav-wrap{min-height:70px;gap:12px}.home .brand-name{font-size:16px}.home .brand-mark{width:22px;height:22px}.home .main-nav{gap:14px}.home .main-nav a{font-size:12px}.home .main-nav a:nth-child(2){display:none}.home-intro{padding:42px 0 38px}.intro-label{font-size:11px;letter-spacing:1.8px;margin-bottom:20px}.home-wordmark{font-size:clamp(25px,8vw,44px);letter-spacing:-1.5px}.home-intro h1{font-size:22px;margin-top:20px}.home-subtitle{font-size:15px;max-width:300px;margin:0 auto 24px}.game-search{min-height:56px;gap:10px;padding:0 13px}.game-search input{font-size:14px}.search-shortcut{display:none}.library-title h2{font-size:20px}.sort-label{display:none}.sort-control button{padding:8px 9px;font-size:12px}.library-heading{margin-bottom:18px;gap:12px}.game-grid{gap:14px}.game-cover{aspect-ratio:1}.tile-copy{padding:13px 12px 16px}.tile-copy h3{font-size:16px;min-height:44px}.tile-copy p{font-size:13px;min-height:58px;margin-bottom:12px}.tile-link{font-size:12px}.cover-label{font-size:9px;left:12px;bottom:10px;letter-spacing:1px}.home .footer-inner{align-items:flex-start}.footer-brand p{max-width:150px;line-height:1.5}.home .copyright{max-width:140px;line-height:1.5}}
@media(max-width:350px){.game-grid{grid-template-columns:1fr}.game-cover{aspect-ratio:1.5}.tile-copy h3,.tile-copy p{min-height:0}.home .brand-mark{display:none}}
@media(prefers-reduced-motion:reduce){.game-tile,.game-cover img{transition:none}.game-tile:hover{transform:none}}

.home .nav-wrap{flex-wrap:nowrap}.home .main-nav{order:0;width:auto;padding-top:0;border-top:0;margin-top:0;margin-left:auto}


/* Match the mobile gutter so the decorative hero stays within the viewport. */
@media(max-width:600px){.home .hero-art{inset:0 -20px}}