/* Original Augmen games UI; no external fonts or assets. */
.games-page { --ink: #17202a; --accent: #1266a6; }
.games-page a { color: #1266a6; }
.games-page .language-switcher a { color: white; }
.games-page .language-switcher a[aria-current] { background: #1266a6; }
.games-page .site-header { flex-direction: row; align-items: center; padding: 22px max(24px, calc((100vw - 1080px) / 2)); }
.games-page .site-main { max-width: 1080px; padding: 40px 28px 56px; min-height: 65vh; }
.games-page h1 { max-width: 850px; font-size: clamp(2.2rem, 5.5vw, 4rem); line-height: 1.08; }
.games-page .eyebrow { color: #1266a6; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; font-size: .9rem; }
.intro { max-width: 640px; }
.game-catalogue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; padding: 0; list-style: none; }
.game-card { padding: 24px; border: 1px solid #bdcbd6; border-radius: 14px; background: #f5f8fb; display: flex; flex-direction: column; }
.game-card .number { font-size: .8rem; font-weight: bold; color: #52616d; }
.game-card h2 { margin: 22px 0 12px; font-size: 1.5rem; }
.game-card p { flex: 1; }
.game-card a { display: inline-block; margin-top: 12px; }
.games-page button, .games-page input, .games-page select { font: inherit; min-height: 46px; border: 2px solid #718294; border-radius: 8px; padding: 10px 16px; }
.games-page button { color: white; background: #1266a6; border-color: #1266a6; cursor: pointer; font-weight: 700; }
.games-page button:hover { background: #084f86; }
.games-page button[aria-disabled="true"] { cursor: default; }
.games-page button:disabled { background: #e0e6ec; border-color: #718294; color: #354556; cursor: default; }
.games-page :focus-visible, .build-footer :focus-visible { outline: 3px solid #bc4b00; outline-offset: 4px; }
.skip-link { position: absolute; left: 16px; top: -100px; padding: 14px; background: white; z-index: 10; }
.skip-link:focus { top: 10px; }
.play-area { padding: 28px; border: 1px solid #bdcbd6; background: #f5f8fb; border-radius: 14px; max-width: 640px; margin: 28px 0; }
.game-status { min-height: 3.2em; font-size: 1.2rem; font-weight: bold; color: #17202a; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 350px; margin: 0 auto; }
.board button { aspect-ratio: 1; padding: 0; font-size: 2.8rem; background: white; color: #17202a; border-color: #718294; }
.board button:hover { background: #e3eff8; }
.board .winner { border: 4px double #17202a; background: #cce8dc; }
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.memory-board button { aspect-ratio: 1; padding: 8px; position: relative; }
.memory-board button.revealed { background: white; color: #17202a; }
.memory-board button.matched { background: #e0eee6; color: #17202a; border-style: dashed; }
.memory-board svg { width: 65%; height: 65%; fill: none; stroke: currentColor; stroke-width: 5; vertical-align: middle; }
.memory-board .check { position: absolute; top: 2px; right: 6px; font-size: .85rem; }
.question { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: bold; margin: 24px 0; color: #17202a; }
.answer-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.answer-form label { display: flex; flex-direction: column; gap: 8px; }
.answer-form input { width: 150px; background: white; color: #17202a; }
.answer-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.games-page .answer-choice { min-height: 68px; display: flex; align-items: center; gap: 12px; justify-content: flex-start; font-size: clamp(1.25rem, 5vw, 1.7rem); }
.choice-key { display: inline-grid; place-items: center; flex: 0 0 1.7em; height: 1.7em; border: 2px solid currentColor; border-radius: 50%; font-size: .65em; }
.games-page .answer-choice.correct:disabled { background: #d9efdf; border-color: #2f7a44; color: #173b22; }
.games-page .answer-choice.incorrect:disabled { background: #f8dfdc; border-color: #a83b32; color: #5b1a15; }
.level-label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media(max-width:700px) { .game-catalogue { grid-template-columns: 1fr; } .games-page .site-main { padding: 28px 20px; } .play-area { padding: 18px; } .game-card h2 { margin-top: 12px; } }
@media(max-width:380px) { .memory-board { gap: 6px; } .memory-board button { padding: 4px; } .games-page .site-header { padding: 20px; gap: 12px; } .answer-choices { grid-template-columns: 1fr; } }