@import url('/shared/navigation.css');
:root { color-scheme: light; font-family: system-ui, sans-serif; color: #173c35; background: #f4f0e6; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
main { max-width: 1120px; margin: auto; padding: 64px 28px 80px; }
.eyebrow { font-size: .75rem; letter-spacing: .17em; font-weight: 800; text-transform: uppercase; }
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.2; letter-spacing: -.04em; margin: 20px 0; max-width: 850px; }
.introduction { font-size: 1.2rem; line-height: 1.8; max-width: 640px; color: #50605a; }
.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.game-tile { padding: 32px; min-height: 320px; border-radius: 22px; background: #173c35; color: #f4f0e6; display: flex; flex-direction: column; text-decoration: none; border: 2px solid transparent; transition: transform .15s; }
.game-tile:nth-child(2) { background: #e1e9cc; color: #173c35; }
.game-tile:hover { transform: translateY(-4px); }
a:focus-visible, select:focus-visible { outline: 3px solid #b65a36; outline-offset: 5px; }
.tile-symbol { font-size: 4.5rem; line-height: 1.2; font-family: serif; }
.game-tile h2 { font-size: 1.8rem; margin: 22px 0 8px; }
.game-tile p { line-height: 1.8; margin: 0 0 24px; }
.tile-action { margin-top: auto; font-weight: 800; display: flex; justify-content: space-between; gap: 16px; }
footer { max-width: 1120px; margin: auto; padding: 24px 28px; border-top: 1px solid #cdd2c6; font-size: .85rem; }
@media (max-width: 620px) { main { padding: 32px 20px 48px; } .directory { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .game-tile { padding: 26px; min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { .game-tile { transition: none; } }