.games-page { min-height: 100svh; background: #070707; color: var(--ink); }.games-page main { min-height: calc(100svh - 158px); padding-top: 86px; }.games-grid { position: fixed; z-index: 0; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom,black,transparent 78%); }.games-nav { display: flex; gap: 24px; color: #a4a39d; font: .56rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.games-nav a { transition: color .2s; }.games-nav a:hover,.games-nav a[aria-current="page"] { color: var(--lime); }
.library { width: min(1180px,92vw); margin: 0 auto; padding: 120px 0 140px; position: relative; z-index: 1; }.library__heading { display: grid; grid-template-columns: 1fr .46fr; gap: 70px; align-items: end; padding-bottom: 23px; border-bottom: 1px solid var(--line); }.library__heading > div > span { color: var(--lime); font: .5rem var(--mono); letter-spacing: .12em; }.library__heading h1 { margin: 25px 0 0; font-size: clamp(3.4rem,6vw,6.2rem); letter-spacing: -.07em; line-height: .9; font-weight: 500; }.library__heading > p { margin: 0; color: #777670; font-size: .75rem; line-height: 1.7; }.library-tools { display: flex; justify-content: space-between; gap: 20px; padding: 26px 0 16px; }.library-filter { display: flex; flex-wrap: wrap; gap: 8px; }.library-filter button { height: 32px; padding: 0 12px; border: 1px solid #3a3a36; color: #85847e; background: #0d0d0d; cursor: pointer; font: .48rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }.library-filter button:hover,.library-filter button[aria-pressed="true"] { border-color: var(--lime); color: #0a0a09; background: var(--lime); }.library-search { width: min(260px,100%); height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #363632; color: #77766f; background: #0c0c0c; }.library-search:focus-within { border-color: var(--lime); }.library-search span { font: 1rem var(--mono); }.library-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: .57rem var(--mono); }.library-search input::placeholder { color: #5b5a55; }.library-count { margin: 0 0 12px; color: #66655f; font: .48rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.game-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.game-card { min-height: 460px; display: grid; grid-template-rows: 220px 1fr; overflow: hidden; border: 1px solid var(--line); background: #0d0d0d; transition: transform .25s,border-color .25s; }.game-card:hover { transform: translateY(-5px); border-color: #5a5a54; }.game-card__visual { position: relative; overflow: hidden; background: radial-gradient(circle at 63% 58%,rgba(201,255,71,.19),transparent 34%),#10120d; }.game-card__grid { position: absolute; inset: -40%; background-image: linear-gradient(rgba(201,255,71,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(201,255,71,.11) 1px,transparent 1px); background-size: 28px 28px; transform: rotate(-16deg) scale(1.2); }.game-card__territory { position: absolute; border: 1px solid rgba(201,255,71,.55); background: rgba(201,255,71,.14); clip-path: polygon(9% 13%,74% 0,100% 36%,76% 100%,18% 86%,0 43%); }.game-card__territory--one { width: 43%; height: 49%; left: 11%; top: 18%; }.game-card__territory--two { width: 38%; height: 55%; right: 8%; top: 29%; background: rgba(159,140,255,.14); border-color: rgba(159,140,255,.65); }.game-card__territory--three { width: 36%; height: 38%; left: 35%; bottom: 1%; background: rgba(255,101,52,.11); border-color: rgba(255,101,52,.6); }.game-card__base { position: absolute; z-index: 2; width: 12px; height: 12px; border: 3px solid #0d0e0b; border-radius: 50%; background: var(--lime); box-shadow: 0 0 20px var(--lime); }.game-card__base--one { left: 29%; top: 40%; }.game-card__base--two { right: 25%; top: 52%; background: var(--violet); box-shadow: 0 0 20px var(--violet); }.game-card__base--three { left: 52%; bottom: 18%; background: var(--orange); box-shadow: 0 0 20px var(--orange); }.game-card__copy { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }.game-card__meta { width: 100%; display: flex; justify-content: space-between; color: #61605b; font: .46rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }.game-card__meta b { color: var(--lime); font-weight: 400; }.game-card__copy .eyebrow { margin: 27px 0 12px; font-size: .46rem; }.game-card h3 { margin: 0; font-size: 1.55rem; letter-spacing: -.05em; line-height: 1.06; font-weight: 500; }.game-card__copy > p:not(.eyebrow) { max-width: 440px; margin: 15px 0 0; color: #7f7e78; font-size: .72rem; line-height: 1.65; }.game-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }.game-card__tags span { padding: 5px 7px; border: 1px solid #3d3d38; color: #8f8e88; font: .42rem var(--mono); letter-spacing: .06em; }.game-card__action { margin-top: auto; color: var(--lime); font: .48rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.game-card__action i { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); }.library-empty[hidden] { display: none; }.library-empty { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 13px; border: 1px solid var(--line); color: #85847e; }.library-empty span { color: var(--lime); font: .48rem var(--mono); letter-spacing: .1em; }.library-empty b { font-size: .9rem; font-weight: 500; }.library-empty button { padding: 0; border: 0; color: var(--lime); background: transparent; cursor: pointer; font: .53rem var(--mono); }.games-footer { min-height: 72px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #696863; font: .48rem var(--mono); letter-spacing: .08em; position: relative; z-index: 1; }.games-footer a { color: #aaa9a2; }
@media (max-width:850px) { .games-nav { gap: 16px; }.library__heading { grid-template-columns: 1fr; gap: 20px; }.game-library { grid-template-columns: 1fr; } }
@media (max-width:560px) { .library { width: calc(100% - 40px); padding: 85px 0 100px; }.library-tools { flex-direction: column; }.library-search { width: 100%; }.game-card { min-height: 430px; grid-template-rows: 190px 1fr; }.game-card__copy { padding: 20px; }.games-footer { padding: 20px; }.games-footer span:nth-child(2) { display: none; } }