@font-face {
  font-family: "Pixelify Sans";
  src: url("assets/PixelifySans-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

:root { --ink: #ffffff; --paper: #000000; --line: #333333; --accent: #e44724; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: "Pixelify Sans", monospace; }
.site-header { min-height: 94px; padding: 18px clamp(20px, 5vw, 76px); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 18px; line-height: .82; font-weight: 700; letter-spacing: .04em; }
.brand img { width: 54px; height: 54px; object-fit: contain; image-rendering: auto; }
nav { display: flex; gap: clamp(18px, 3vw, 48px); font-size: 18px; text-transform: uppercase; }
nav a { color: inherit; text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
nav a:hover, nav a:focus-visible, nav .active { border-color: var(--accent); }
.social-links { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.social-links a { width: 20px; height: 20px; display: grid; place-items: center; color: var(--ink); }
.social-links a:hover, .social-links a:focus-visible { color: var(--accent); }
.social-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.social-links svg { width: 100%; height: 100%; fill: currentColor; }
.social-links svg circle, .social-links svg rect { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-links svg path { fill: currentColor; }
main { padding: clamp(36px, 7vw, 92px) clamp(20px, 5vw, 76px) 72px; }
.game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 32px); }
.game-card { display: block; color: inherit; text-decoration: none; }
.cover { position: relative; overflow: hidden; aspect-ratio: 616 / 353; background: #242424; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: transform .45s ease, filter .45s ease; }
.game-card:hover .cover img, .game-card:focus-visible .cover img { transform: scale(1.04); filter: saturate(1.1); }
.game-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.game-title { margin: 10px 0 0; font-size: clamp(22px, 2.2vw, 35px); font-weight: 500; text-transform: uppercase; line-height: 1; text-align: center; }
.empty-state { font-size: 23px; }
footer { border-top: 1px solid var(--line); padding: 24px clamp(20px, 5vw, 76px); font-size: 16px; text-align: center; }
.copyright-symbol { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1; vertical-align: -.04em; }
@media (max-width: 760px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .site-header { grid-template-columns: auto 1fr; } nav { justify-self: end; } .social-links { grid-column: 1 / -1; justify-content: center; } }
@media (max-width: 620px) { .site-header { min-height: 78px; } .brand img { width: 43px; height: 43px; } .brand { font-size: 15px; } nav { font-size: 16px; gap: 20px; } .game-grid { grid-template-columns: 1fr; } }