/* Palette follows https://mith-mmk.github.io/css/default.css.
   Small blue text is darkened to #226b9b for WCAG AA contrast. */
:root { color-scheme: light; font-family: 'Segoe UI', 'Yu Gothic', sans-serif; color: #333333; background: #f9f9f9; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden], .game-card[hidden], .controls[hidden] { display: none; }
.site-header { padding: 42px max(24px, calc((100% - 1240px) / 2)); background: #2c3e50; color: #ecf0f1; border-bottom: 4px solid #3498db; }
.eyebrow { color: #ecf0f1; font-size: .75rem; letter-spacing: .16em; font-weight: 700; }
h1 { margin: 4px 0; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.2; letter-spacing: -.04em; }
.site-header p { margin: 8px 0; }
main { max-width: 1288px; margin: auto; padding: 28px 24px 56px; }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 18px; border: 1px solid #bdc3c7; background: #fff; border-radius: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; font-weight: 700; }
.search-field { flex: 1 1 240px; }
input, select, button { font: inherit; font-size: 1rem; color: #333333; border: 1px solid #7f8c8d; border-radius: 6px; background: #fff; padding: 9px 12px; min-height: 44px; }
input { width: 100%; min-width: 0; }
button { cursor: pointer; background: #ecf0f1; }
button:hover { background: #dceaf3; }
:focus-visible { outline: 3px solid #2980b9; outline-offset: 4px; }
.results-bar { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; color: #566573; font-size: .85rem; margin: 15px 0; }
.results-bar p { margin: 0; }
#result-count { font-weight: 700; color: #2c3e50; }
.game-list { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; padding: 0; margin: 0; }
.game-card { flex: 0 1 calc((100% - 44px) / 3); min-width: 0; border: 1px solid #bdc3c7; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px #0000000d; }
.game-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: #226b9b; }
.game-link:hover { background: #f4f8fb; }
.game-link:hover h2 { color: #226b9b; text-decoration: underline; text-underline-offset: 4px; }
.game-link:focus-visible { outline-offset: -4px; }
.game-link img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: #ecf0f1; border-bottom: 1px solid #bdc3c7; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.genre { align-self: start; color: #226b9b; background: #ecf0f1; padding: 2px 8px; border-radius: 4px; font-size: .7rem; font-weight: 700; }
h2 { font-size: 1.12rem; line-height: 1.45; margin: 10px 0 8px; overflow-wrap: anywhere; }
.description { font-size: .88rem; color: #566573; margin: 0 0 20px; }
.card-meta { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: #59666e; margin: auto 0 0; overflow-wrap: anywhere; }
.empty-state { border: 1px dashed #7f8c8d; background: #fff; padding: 36px 20px; border-radius: 12px; text-align: center; }
footer { border-top: 1px solid #bdc3c7; padding: 24px; text-align: center; font-size: .85rem; color: #566573; }
footer p { margin: 0 0 6px; }
footer a { color: #226b9b; }
@media (max-width: 960px) { .game-card { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 580px) { .site-header { padding: 28px 18px; } main { padding: 20px 16px 36px; } .controls { padding: 14px; gap: 10px; } .search-field { flex-basis: 100%; } .controls label:not(.search-field) { flex: 1 1 125px; } .controls button { width: 100%; } .game-card { flex-basis: 100%; } .game-list { gap: 18px; } }