* { box-sizing: border-box; }
body { margin: 0; background: #f5f7f1; color: #203b2c; font: 16px/1.5 system-ui, sans-serif; }
a { color: inherit; }
header, main, footer { max-width: 580px; margin: auto; padding: 20px; }
header a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; }
header span { font-size: 14px; }
main { padding-top: 12px; }
.eyebrow { font-size: 12px; letter-spacing: .12em; font-weight: 750; margin: 8px 0; }
h1 { font: bold 36px/1.15 Georgia, serif; margin: 12px 0; }
.intro { color: #556856; margin: 0 0 24px; }
nav { display: grid; gap: 12px; }
.game { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; border: 1px solid #d5dfcf; border-radius: 16px; background: white; padding: 18px 12px; text-decoration: none; }
.game:hover { border-color: #36704b; background: #f0f5eb; }
a:focus-visible { outline: 3px solid #7554ac; outline-offset: 4px; }
.symbol { background: #e5eddc; border-radius: 10px; font-size: 22px; font-weight: 700; text-align: center; padding: 8px 0; }
strong, small { display: block; }
strong { font-size: 19px; }
small { color: #556856; font-size: 13px; }
.play { font-size: 14px; font-weight: 750; white-space: nowrap; }
.more { display: inline-block; padding: 18px 0; }
footer { color: #556856; font-size: 13px; }
@media(max-width: 360px) { .game { grid-template-columns: 1fr auto; } .symbol { display: none; } }