.games-page { min-height:100vh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 85% 0,rgba(28,90,143,.22),transparent 50%),var(--navy); }
.games-page .site-nav a[aria-current="page"] { color:var(--gold); text-decoration:underline; }
.games-main { width:100%; max-width:1250px; margin:0 auto; padding:9rem var(--gutter) 4rem; flex:1; }
.games-intro { margin-bottom:3.5rem; }
.eyebrow { margin:0 0 1rem; color:var(--gold); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; }
.games-intro h1 { margin:0; font:400 clamp(3rem,6vw,5rem)/1.1 var(--serif); letter-spacing:-.035em; }
.games-intro>p:last-child { color:var(--silver); font:400 1.25rem/1.6 var(--serif); margin:1.15rem 0 0; }
.collection-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; border-top:1px solid var(--line); padding-top:1.25rem; }
.collection-heading h2 { font-size:1rem; font-weight:500; margin:0; }
.collection-heading>span { color:var(--steel); font-size:.75rem; }
.games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.game-tile { min-width:0; display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); border-radius:.5rem; background:var(--navy-deep); transition:border-color .2s,transform .2s; }
a.game-tile:hover { border-color:var(--gold); transform:translateY(-4px); }
.game-art { min-height:180px; display:grid; place-items:center; border-radius:.45rem .45rem 0 0; }
.game-art img { display:block; width:96px; height:96px; filter:drop-shadow(0 10px 16px #030d1a25); }
.flavor-art { background:#edd9ce; }
.word-art { background:#30264f; }
.game-copy { display:flex; flex-direction:column; flex:1; padding:1.5rem; }
.game-category { margin:0 0 .75rem; color:var(--gold); font-size:.65rem; letter-spacing:.07em; text-transform:uppercase; line-height:1.5; }
.game-copy h3 { font:400 2rem/1.2 var(--serif); margin:0; }
.game-copy>p:not(.game-category) { color:var(--steel); font-size:.95rem; line-height:1.65; margin:.8rem 0 1.6rem; }
.game-action { display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-top:1px solid #d9e1e733; padding-top:1rem; margin-top:auto; font-size:.85rem; }
.game-action svg { width:1.2rem; transition:transform .2s; }
a.game-tile:hover .game-action svg { transform:translateX(3px); }
.coming-soon { border-style:dashed; background:transparent; }
.future-art { background:#d9e1e707; }
.future-art>span { display:grid; place-items:center; width:64px; height:64px; border:1px dashed #aebdca80; border-radius:16px; color:var(--steel); font:300 2rem/1 var(--ui); }
.future-note { color:var(--steel); margin-top:auto; padding-top:1rem; border-top:1px solid #d9e1e733; font:italic .95rem/1.2 var(--serif); }
.back-home { display:inline-block; margin-top:2.5rem; color:var(--steel); }
.games-page .site-footer { border-top:1px solid var(--line); padding-block:1.25rem; }
@media (min-width:901px) and (max-width:1100px) { .site-header { gap:1.25rem; } .site-nav { gap:1.25rem; } .header-cta { min-width:10rem; } }
@media (max-width:900px) { .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .games-main { padding-top:8rem; } }
@media (max-width:620px) { .games-main { padding:7rem 1.25rem 3rem; } .games-intro { margin-bottom:2.25rem; } .games-intro>p:last-child { font-size:1.15rem; } .collection-heading { flex-direction:column; gap:.6rem; } .games-grid { grid-template-columns:1fr; } .game-art { min-height:160px; } }