:root { color-scheme: dark; --bg: #12110f; --surface: #1d1b18; --surface-hover: #28241f; --ink: #eee8dc; --muted: #9d968a; --line: #342f29; --copper: #b98252; --sage: #71806b; --gap: clamp(8px, .85vw, 13px); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.35; }
a { color: inherit; text-decoration: none; }
header, main, footer { width: min(100% - 32px, 1540px); margin-inline: auto; }
header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: baseline; gap: 14px; }
.identity strong { font-size: 1.35rem; letter-spacing: -.04em; }
.identity span { color: var(--muted); font-size: .82rem; }
nav { display: flex; align-items: center; gap: clamp(15px, 2.2vw, 32px); }
nav a, footer { color: var(--muted); font-size: .82rem; }
nav a:hover, nav a:focus-visible, footer a:hover { color: var(--ink); }
main { padding: 40px 0 90px; }
.collection + .collection { margin-top: 58px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; border-top: 3px solid var(--copper); padding: 12px 0 15px; }
.section-title h1 { margin: 0; font-size: clamp(1.45rem, 2vw, 2.1rem); letter-spacing: -.05em; }
.youtube-title { border-color: #b9685f; }
.crazy-title { border-color: #76509d; }
.game-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.game { aspect-ratio: 4 / 3; min-height: 0; padding: clamp(15px, 1.5vw, 23px); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .16s ease, background-color .16s ease, border-color .16s ease; }
.game:hover, .game:focus-visible { transform: translateY(-3px); background: var(--surface-hover); border-color: var(--copper); outline: none; }
.game h2 { margin: auto 0; max-width: 14ch; font-size: clamp(1.2rem, 1.75vw, 1.9rem); line-height: 1; letter-spacing: -.05em; }
.open { align-self: flex-end; color: var(--copper); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.collection-playable .game { background: #2b2119; border-color: #493425; }
.collection-playable .game:hover, .collection-playable .game:focus-visible { background: #36281d; border-color: #b98252; }
.collection-youtube .game { background: #2a1a19; border-color: #4a2926; }
.collection-youtube .game:hover, .collection-youtube .game:focus-visible { background: #351f1d; border-color: #b9685f; }
.collection-youtube .open { color: #c97a70; }
.collection-crazygames .game { background: #21172d; border-color: #3c1568; }
.collection-crazygames .game:hover, .collection-crazygames .game:focus-visible { background: #2b1b3c; border-color: #76509d; }
.collection-crazygames .open { color: #9a78bd; }
.short-grid .game { max-width: 300px; width: 100%; }
footer { color: var(--muted); font-size: .82rem; }
.copyright { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 18px 0 28px; }
.copyright a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } header { align-items: flex-start; padding: 20px 0; } .identity { display: block; } .identity span { display: block; margin-top: 2px; } }
@media (max-width: 600px) { header, main, footer { width: min(100% - 20px, 1540px); } header { display: block; } nav { margin-top: 16px; justify-content: space-between; } main { padding-top: 28px; } .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .game { padding: 14px; } .game h2 { font-size: 1.18rem; } .open { font-size: .6rem; } .short-grid .game { max-width: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }