/* Game directory: deliberately varied cards, not one repeated template. */
:root { color-scheme: light dark; }
body.games-page { min-height:100vh; }
.games-wrap { width:min(1240px,100%); margin:0 auto; padding:clamp(28px,5vw,62px) clamp(20px,5vw,58px) 34px; }
.home-nav { display:flex; align-items:center; gap:24px; padding-bottom:18px; border-bottom:var(--ui-border-width) solid var(--ui-border); }
.home-mark { display:flex; align-items:center; gap:10px; color:var(--ui-ink); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.02em; }.home-mark::before { width:9px; height:9px; border-radius:50%; background:var(--ui-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-accent) 16%,transparent); content:""; }
.home-nav-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 20px; }.home-nav-links a { position:relative; color:var(--ui-text-secondary); text-decoration:none; font-size:13px; transition:color var(--ui-fast) var(--ui-ease-out); }.home-nav-links a[aria-current="page"],.home-nav-links a:hover { color:var(--ui-brand); }.home-nav-links a[aria-current="page"]::after { position:absolute; right:0; bottom:-7px; left:0; height:2px; border-radius:99px; background:var(--ui-brand); content:""; }
.games-hero { padding:clamp(58px,9vw,112px) 0 clamp(32px,5vw,58px); }.games-kicker,.game-card__eyebrow { margin:0; color:var(--ui-brand); font-size:10px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }.games-hero__copy { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr); align-items:end; gap:40px; margin-top:18px; }.games-hero h1 { margin:0; color:var(--ui-ink); font-size:clamp(48px,7vw,95px); font-weight:780; letter-spacing:-.08em; line-height:.92; }.games-hero__copy p { max-width:365px; margin:0 0 5px; color:var(--ui-text-secondary); font-size:clamp(15px,1.5vw,18px); line-height:1.75; }.games-hero__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }.games-hero__meta span { padding:7px 10px; border:var(--ui-border-width) solid var(--ui-border); border-radius:999px; color:var(--ui-muted); font-size:11px; font-weight:700; }
.game-deck { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(164px,auto); gap:var(--ui-space-3); }.game-card { position:relative; overflow:hidden; min-width:0; border:var(--ui-border-width) solid var(--ui-border); border-radius:var(--ui-radius-lg); background:var(--ui-surface); box-shadow:var(--ui-shadow-sm); transition:transform var(--ui-motion) var(--ui-ease-out),box-shadow var(--ui-motion) var(--ui-ease-out),border-color var(--ui-motion) var(--ui-ease-out); }.game-card:hover { z-index:1; transform:translateY(-4px); border-color:color-mix(in srgb,var(--ui-brand) 52%,var(--ui-border)); box-shadow:var(--ui-shadow-lg); }.game-card__link { position:relative; display:flex; min-height:100%; flex-direction:column; justify-content:space-between; padding:clamp(20px,2.6vw,30px); overflow:hidden; color:var(--ui-text); text-decoration:none; }.game-card__top,.game-card__foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:14px; }.game-card__tag,.game-card__metric { color:var(--ui-brand); font-size:10px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }.game-card__index { color:var(--ui-muted); font-size:11px; font-weight:850; letter-spacing:.12em; }.game-card__copy { position:relative; z-index:2; }.game-card__copy h2 { margin:7px 0 0; color:var(--ui-ink); font-size:clamp(24px,3vw,43px); font-weight:780; letter-spacing:-.065em; line-height:.94; }.game-card__copy h2 em { color:var(--ui-brand); font-style:normal; }.game-card__copy>p:last-child { max-width:340px; margin:13px 0 0; color:var(--ui-text-secondary); font-size:14px; line-height:1.65; }.game-card__enter { display:inline-flex; align-items:center; gap:7px; color:var(--ui-ink); font-size:12px; font-weight:800; transition:gap var(--ui-fast) var(--ui-ease-out),color var(--ui-fast) var(--ui-ease-out); }.game-card__enter b { color:var(--ui-brand); font-size:18px; font-weight:500; }.game-card:hover .game-card__enter { gap:11px; color:var(--ui-brand); }
.game-card--void { grid-column:span 7; grid-row:span 2; min-height:468px; background:linear-gradient(145deg,color-mix(in srgb,var(--ui-brand) 22%,var(--ui-surface)),var(--ui-surface) 58%); }.game-card--void .game-card__link { padding:clamp(26px,4vw,46px); }.game-card--void .game-card__copy { margin-top:auto; }.game-card--void .game-card__copy h2 { font-size:clamp(60px,8.2vw,112px); letter-spacing:-.095em; }.game-card--void .game-card__copy>p:last-child { max-width:300px; }.game-card--void .game-card__foot { padding-top:26px; border-top:var(--ui-border-width) solid color-mix(in srgb,var(--ui-border) 70%,transparent); }.game-card__art--void { position:absolute; width:clamp(250px,42vw,560px); aspect-ratio:1; right:-12%; top:-23%; border:1px solid color-mix(in srgb,var(--ui-brand) 30%,transparent); border-radius:50%; background:radial-gradient(circle at 42% 44%,color-mix(in srgb,var(--ui-accent) 36%,transparent) 0 2%,color-mix(in srgb,var(--ui-brand) 18%,transparent) 3% 14%,transparent 15%),repeating-radial-gradient(circle at center,transparent 0 27px,color-mix(in srgb,var(--ui-brand) 11%,transparent) 28px 29px); transform:rotate(-18deg); }.game-card__art--void::after { position:absolute; inset:17%; border:1px dashed color-mix(in srgb,var(--ui-accent) 48%,transparent); border-radius:50%; content:""; }.game-card__art--void span { position:absolute; inset:36% 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--ui-accent),transparent); transform:rotate(17deg); }.game-card__art--void i { position:absolute; top:39%; left:44%; width:11px; height:11px; border-radius:50%; background:var(--ui-accent); box-shadow:0 0 0 7px color-mix(in srgb,var(--ui-accent) 14%,transparent),0 0 44px var(--ui-accent); }
.game-card--astral { grid-column:span 5; min-height:226px; background:linear-gradient(145deg,color-mix(in srgb,var(--ui-accent) 15%,var(--ui-surface)),var(--ui-surface) 70%); }.game-card--astral::before { position:absolute; top:25px; right:20px; width:130px; height:130px; border:1px solid color-mix(in srgb,var(--ui-accent) 45%,transparent); border-radius:50%; box-shadow:inset 0 0 0 22px color-mix(in srgb,var(--ui-brand) 6%,transparent); content:""; }.game-card--astral::after { position:absolute; top:57px; right:52px; width:12px; height:12px; border-radius:50%; background:var(--ui-accent); box-shadow:0 0 0 8px color-mix(in srgb,var(--ui-accent) 11%,transparent); content:""; }.game-card--astral .game-card__copy h2 { font-size:clamp(30px,4vw,52px); }
.game-card--snake { grid-column:span 5; min-height:226px; background:color-mix(in srgb,var(--ui-brand) 7%,var(--ui-surface)); }.game-card--snake::before { position:absolute; right:-35px; bottom:-73px; width:208px; height:208px; border:19px solid color-mix(in srgb,var(--ui-brand) 24%,transparent); border-radius:48% 52% 46% 54%; content:""; }.game-card--snake::after { position:absolute; right:61px; bottom:47px; width:12px; height:12px; border-radius:50%; background:var(--ui-accent); box-shadow:25px -31px 0 -2px color-mix(in srgb,var(--ui-accent) 70%,transparent),-18px -45px 0 -3px color-mix(in srgb,var(--ui-accent) 46%,transparent); content:""; }
.game-card--minicraft { grid-column:span 7; min-height:226px; background:linear-gradient(135deg,color-mix(in srgb,var(--ui-brand) 9%,var(--ui-surface)),var(--ui-surface)); }.game-card--minicraft::before { position:absolute; right:31px; bottom:27px; width:145px; height:96px; opacity:.45; background:linear-gradient(90deg,color-mix(in srgb,var(--ui-brand) 48%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--ui-brand) 48%,transparent) 1px,transparent 1px); background-size:24px 24px; transform:skewY(-14deg); content:""; }.game-card--minicraft::after { position:absolute; right:64px; bottom:81px; width:44px; height:44px; background:var(--ui-accent); box-shadow:55px 28px 0 color-mix(in srgb,var(--ui-brand) 78%,transparent),-26px 25px 0 color-mix(in srgb,var(--ui-brand) 53%,transparent); content:""; }.game-card--minicraft .game-card__copy h2 { font-size:clamp(30px,4vw,52px); }
.game-card--guest { grid-column:span 12; min-height:150px; background:linear-gradient(90deg,var(--ui-surface),color-mix(in srgb,var(--ui-accent) 9%,var(--ui-surface))); }.game-card--guest .game-card__link { display:grid; grid-template-columns:1fr minmax(190px,.8fr) auto; align-items:center; gap:20px; }.game-card--guest .game-card__copy h2 { font-size:clamp(25px,3vw,39px); }.game-card--guest .game-card__copy>p:last-child { max-width:250px; }.game-card--guest .game-card__foot { justify-self:end; }.game-card--guest::after { position:absolute; left:47%; top:-35px; width:166px; height:166px; border:1px dashed color-mix(in srgb,var(--ui-brand) 35%,transparent); border-radius:50%; content:""; }
.games-note { display:flex; align-items:flex-start; gap:15px; width:min(670px,100%); margin-top:clamp(55px,9vw,110px); padding:20px 0; border-top:var(--ui-border-width) solid var(--ui-border); }.games-note__mark { display:grid; flex:0 0 28px; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--ui-accent); background:var(--ui-brand-soft); }.games-note b { color:var(--ui-ink); font-size:14px; }.games-note p { margin:6px 0 0; color:var(--ui-muted); font-size:13px; line-height:1.65; }.games-footer { display:flex; justify-content:space-between; gap:20px; margin-top:clamp(42px,8vw,84px); padding-top:18px; border-top:var(--ui-border-width) solid var(--ui-border); color:var(--ui-muted); font-size:12px; }.games-footer a { color:inherit; text-decoration:none; }.games-footer a:hover { color:var(--ui-brand); }
@media (max-width:800px) { .games-hero__copy { grid-template-columns:1fr; gap:22px; }.game-card--void { grid-column:span 12; min-height:400px; }.game-card--astral,.game-card--snake,.game-card--minicraft { grid-column:span 6; }.game-card--guest .game-card__link { grid-template-columns:1fr auto; }.game-card--guest .game-card__top { display:none; } }
@media (max-width:540px) { .games-wrap { padding-inline:20px; }.home-nav { align-items:flex-start; flex-direction:column; }.home-nav-links { justify-content:flex-start; }.games-hero { padding-top:53px; }.games-hero h1 { font-size:clamp(45px,14vw,70px); }.game-deck { grid-template-columns:1fr; grid-auto-rows:auto; }.game-card--void,.game-card--astral,.game-card--snake,.game-card--minicraft,.game-card--guest { grid-column:1; grid-row:auto; min-height:204px; }.game-card--void { min-height:365px; }.game-card--void .game-card__copy h2 { font-size:clamp(56px,17vw,86px); }.game-card--guest .game-card__link { display:flex; }.game-card--guest .game-card__top { display:flex; }.game-card--guest .game-card__foot { align-self:auto; justify-self:auto; }.games-footer { align-items:flex-start; flex-direction:column; margin-top:58px; } }