/* Games and Speak Clear only; no changes to shared layout or game styles. */
/* Allow the new views to fit a 320px viewport even with a classic scrollbar. */
body:has(.games-page) { min-width: 0; }
/* Preserve the old title's intrinsic height at every dashboard breakpoint. */
.dashboard-games-card { position: relative; }
.dashboard-games-card strong { text-align: center; }
.dashboard-games-card strong::before { content: attr(data-sizing-label); display: block; visibility: hidden; }
.dashboard-games-button-space { min-height: 40px; }
.dashboard-games-card > button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(50% - 21px); min-width: max-content; max-width: calc(100% - 26px); white-space: nowrap; background: #ff7f62; color: #000; }
.dashboard-games-card > button:hover { filter: brightness(.96); }
.dashboard-games-card > button:focus-visible { outline: 3px solid #1749a3; outline-offset: 4px; }
.dashboard-games-card .card-kicker { visibility: hidden; }
.games-page { max-width: 1140px; margin: 0 auto; color: #173f5a; }
.games-page button { cursor: pointer; }
.games-page button:focus-visible { outline: 3px solid #1749a3; outline-offset: 4px; }
.games-page [tabindex="-1"]:focus { outline: none; }
.games-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
.games-heading { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; margin: 30px 0 36px; }
.games-brand-icon { display: block; width: 96px; height: 96px; object-fit: contain; flex: 0 0 auto; }
.games-heading h1 { font-size: 48px; margin: 0; line-height: 1; }
.games-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.games-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 30px; border: 1px solid #7ebbc8; border-radius: 26px; background: #effaff; box-shadow: 0 9px 0 #6cabb724, 0 16px 32px #23607713; text-align: center; }
.games-card-memory { background: linear-gradient(145deg, #fffbed, #f3faff); }
.games-card-clear { background: linear-gradient(145deg, #edfaff, #d7f2ff); }
.games-card-art { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 270px; gap: 18px; }
.games-card > p { flex: 1; max-width: 30ch; line-height: 1.65; color: #34576c; margin: 20px 0 28px; }
.games-enter { display: flex; justify-content: center; align-items: center; align-self: center; width: 112px; max-width: 100%; min-width: max-content; padding-inline: 18px; background: #ff7f62; color: #000; box-shadow: 0 4px 0 #b78000; }
.games-enter:hover { filter: brightness(.96); }
.amq-wordmark { display: grid; text-align: left; line-height: 1.2; margin: 0; color: #543276; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.045em; }
.amq-wordmark > span { display: flex; align-items: baseline; }
.amq-wordmark b { display: inline-block; margin-right: .035em; color: #087f80; font-size: 1.35em; font-weight: 900; }
/* Optical cap-height adjustment; transform leaves row geometry and spacing intact. */
.amq-wordmark > span:nth-child(2) > b { transform: translateY(-.03em); }
.amq-card-pair { display: flex; gap: 12px; color: #2b709c; }
.amq-card-pair span { display: grid; place-items: center; width: 42px; height: 48px; border: 2px solid #e1b044; border-radius: 9px; background: #fff7da; font-size: 1.5rem; transform: rotate(-9deg); }
.amq-card-pair span + span { transform: rotate(9deg); }
.sc-hub-brand { margin: 0; width: 100%; }
.sc-banner { display: block; width: 100%; height: auto; border-radius: 12px; }
.games-preview-badge { display: inline-block; border: 1px solid #739bb5; border-radius: 999px; padding: 6px 12px; color: #315c77; background: #e7f6fd; font-size: .75rem; font-weight: 750; }
.sc-header { max-width: 690px; margin: 0 auto 14px; }
.sc-header h1 { margin: 0; }
.sc-lesson-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; margin: 0 auto 26px; font-size: .9rem; color: #264e67; }
.sc-lesson-strip > * { padding: 0 16px; border-right: 1px solid #69a6b4; }
.sc-lesson-strip > :last-child { border-right: 0; }
.sc-main { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 30px; align-items: stretch; }
.sc-main h2 { margin: 0; font-size: 1.15rem; }
.sc-illustration { min-width: 0; padding: 23px 20px 16px; border-radius: 24px; background: #d8f4f7; border: 1px solid #77b8c4; }
.sc-illustration > p { margin: 8px 0 16px; color: #35596a; line-height: 1.5; font-size: .83rem; max-width: 48ch; }
.sc-color-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; }
.sc-color-item { position: relative; min-width: 0; height: 85px; }
.sc-object { display: block; width: 100%; height: 100%; }
.sc-marker { position: absolute; z-index: 1; top: 4px; left: 2px; width: 30px; height: 30px; display: grid; place-content: center; border: 2px solid #265883; border-radius: 50%; background: #fffdf0; color: #193f60; font-size: .8rem; font-weight: 900; box-shadow: 0 2px 0 #235e7d1a; }
.sc-completion { display: none; }
/* Reserved completion states. No Phase 1 code applies is-complete. */
.sc-color-item.is-complete .sc-object { visibility: hidden; }
.sc-color-item.is-complete .sc-marker { background: #e3f9e5; border-color: #2e8542; color: #227038; }
.sc-color-item.is-complete .sc-completion { display: inline; position: absolute; right: -10px; top: -8px; border-radius: 50%; background: #e3f9e5; padding: 0 3px; }
.sc-status { min-width: 0; }
.sc-metrics { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-bottom: 20px; }
.sc-time, .sc-progress { display: grid; align-content: start; gap: 3px; min-width: 0; }
.sc-metrics span { font-size: .8rem; font-weight: 750; }
.sc-metrics strong { font-size: 2.2rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sc-time small { font-size: .7rem; color: #35596a; }
.sc-progress progress { appearance: none; display: block; width: 100%; height: 12px; margin-top: 5px; overflow: hidden; border: 1px solid #719f86; border-radius: 999px; background: #e6f4e9; color: #369552; }
.sc-progress progress::-webkit-progress-bar { background: #e6f4e9; border-radius: 999px; }
.sc-progress progress::-webkit-progress-value { background: #369552; border-radius: 999px; }
.sc-progress progress::-moz-progress-bar { background: #369552; border-radius: 999px; }
.sc-word-list { list-style: none; display: grid; gap: 6px; padding: 0; margin: 12px 0 0; }
.sc-word-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto 18px; align-items: center; gap: 8px; min-height: 36px; padding: 3px 10px; border: 1px solid #87bbc6; border-radius: 10px; background: #f5fcff; }
.sc-row-number { font-size: .85rem; font-weight: 850; }
.sc-word { overflow-wrap: anywhere; font-size: .95rem; font-weight: 750; }
.sc-hint { min-height: 30px; min-width: 60px; padding: 3px 10px; border: 1px solid #84a7ba; border-radius: 999px; background: #e6f2fb; color: #244e6d; font-size: .75rem; font-weight: 750; }
.sc-hint:hover { background: #d4e8f8; }
.sc-hint[aria-expanded="true"] { background: #f1f7fb; }
.sc-row-completion { visibility: hidden; color: #227038; font-weight: 900; }
.sc-word-row.is-complete .sc-row-completion { visibility: visible; }
.sc-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.sc-speak { display: flex; justify-content: center; align-items: center; gap: 15px; min-width: 230px; min-height: 66px; padding: 10px 28px; border: 2px solid #2262a2; border-radius: 999px; background: #176dbc; color: #fff; box-shadow: 0 4px 0 #174e81; font-size: 1.15rem; font-weight: 850; }
.games-page .sc-speak:disabled { opacity: 1; cursor: not-allowed; }
.sc-speak svg { width: 32px; height: 34px; flex-shrink: 0; }
.sc-speak small { display: block; font-size: .7rem; font-weight: 600; margin-top: 2px; }
.sc-controls > p { width: 100%; margin: 0; text-align: center; font-size: .78rem; color: #345569; line-height: 1.6; }
.sc-missing-art { display: grid; place-content: center; padding: 10px 35px; font-size: .8rem; }
@media (max-width: 700px) {
  .games-cards, .sc-main { grid-template-columns: minmax(0,1fr); }
  .games-cards { max-width: 480px; margin: 0 auto; gap: 22px; }
  .games-card { padding: 24px; }
  .games-card-art { min-height: 210px; }
  .amq-wordmark { font-size: 1.9rem; }
  .games-heading { margin: 20px 0 26px; gap: 14px; }
  .games-brand-icon { width: 72px; height: 72px; }
  .games-heading h1 { font-size: 36px; }
  .sc-main { gap: 24px; }
  .sc-color-board { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .sc-color-item { height: 80px; }
  .sc-illustration { padding: 18px 14px 12px; }
  .sc-lesson-strip { font-size: .8rem; }
  .sc-lesson-strip > * { padding: 0 9px; }
  .sc-controls { gap: 18px; }
  .games-nav .secondary-action { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .games-page *, .games-page *::before, .games-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}