/* Layout: a single column shelf of game cards; same night palette as the games. */
:root{--night:#140d16;--panel:#22172a;--plum:#3a2742;--cream:#f6ecdf;--dim:#b3a2ad;--cheese:#f6c445;
--display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;--body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;color-scheme:dark}
body{background:var(--night);color:var(--cream);font-family:var(--body);padding-inline:16px;padding-block:0 40px}
.top,main,.foot{max-width:760px;margin:0 auto}
.top{padding-block:36px 20px}
.top h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,7vw,44px);margin:0;color:var(--cheese);letter-spacing:.02em;text-wrap:balance}
.top p{margin:8px 0 0;color:var(--dim);font-weight:700;font-size:14px}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.game a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:var(--panel);border:2px solid var(--plum);border-radius:16px;overflow:hidden;transition:border-color .15s,transform .15s}
.game a:hover{border-color:var(--cheese);transform:translateY(-2px)}
.game a:focus-visible{outline:3px solid var(--cheese);outline-offset:3px}
.game img{display:block;width:100%;aspect-ratio:40/21;object-fit:cover;background:#120c14}
.game .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.game h2{font-family:var(--display);font-weight:400;font-size:20px;margin:0}
.game p{margin:0;font-size:13px;line-height:1.6;color:var(--dim);font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:rgba(246,196,69,.14);color:var(--cheese)}
.msg,.foot{color:var(--dim);font-size:12px;font-weight:700}
.foot{padding-top:24px}
.msg a{color:var(--cheese)}
@media (prefers-reduced-motion:reduce){.game a{transition:none}.game a:hover{transform:none}}