/* Book-led Letter Games, Claude Design, September 17, 2026.
   Scoped to the eight letter books. Other reading and coding games keep their layout. */
.ap-page.ap-page-kid.letter-book-games {
    --pg-ink:#222; --pg-muted:#6b6152; --pg-card:#fff; --pg-soft:#f6fbff;
    --pg-line:#e0e6e9; --pg-blue:#0174b1; --pg-on-accent:#fff;
    max-width:none; min-height:100vh; margin:0; color:#222; background:#fdfaf3;
    padding:calc(5rem + var(--topnav-inset-top, 0px)) max(16px, calc((100% - 880px)/2)) 48px;
}
.letter-book-games * { box-sizing:border-box; }
.letter-game-art { height:160px; overflow:hidden; border-radius:24px 24px 0 0; background:#fffaf0; }
.letter-game-scene { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.letter-game-book { height:100%; display:flex; align-items:center; justify-content:center; gap:16px; padding:64px 20px 12px; }
.letter-game-book img { height:80px; width:auto; max-width:70px; object-fit:contain; border-radius:6px; box-shadow:0 3px 10px #17334825; }
.letter-game-book span { max-width:330px; font-size:16px; font-weight:700; line-height:1.3; }
.letter-book-games .pg-stage { width:100%; max-width:none; padding:0; margin:0; background:transparent; border:0; box-shadow:none; }
.letter-book-games .pg-header { position:relative; height:160px; margin:-160px 0 0; display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; padding:12px; }
.letter-book-games .pg-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.letter-book-games .pg-close { position:static; display:flex; gap:6px; align-items:center; justify-content:center; width:auto; min-width:88px; height:48px; padding:10px 16px; border:1px solid #efe3cd; border-radius:30px; background:#fff; color:#29546a; font-size:15px; font-weight:700; }
.letter-book-games .pg-progress { background:#fff; color:#29546a; padding:8px 12px; border-radius:24px; font-size:13px; font-weight:700; }
.letter-book-games .pg-board { width:100%; max-width:640px; min-height:0; margin:0 auto; padding:28px; gap:24px; background:#fff; border-radius:0 0 28px 28px; border:0; box-shadow:0 8px 24px #17334812; }
.letter-book-games .pg-audio-prompt { display:flex; flex-direction:row-reverse; justify-content:center; gap:18px; width:100%; }
.letter-book-games .pg-hint { color:#222; font-size:clamp(18px,2.4vw,25px); font-weight:700; line-height:1.3; text-align:left; }
.letter-book-games .pg-speaker { flex-shrink:0; width:72px; height:72px; border-radius:50%; background:#0174b1; color:#fff; box-shadow:0 4px 12px #0174b130; }
.letter-book-games .pg-speaker i { font-size:32px; }
.letter-book-games .pg-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; padding:16px; background:#f6fbff; border-radius:20px; }
.letter-book-games .pg-choices.pr-choices-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
.letter-book-games .pg-choice { min-width:0; width:100%; min-height:116px; padding:12px 6px; border:2px solid var(--pg-line); border-radius:18px; background:#fff; color:#222; font-size:clamp(42px,5vw,64px); box-shadow:0 3px 8px #17334810; }
.letter-book-games .pg-choice.is-correct { background:#edf9ee; border-color:#287547; color:#205d37; }
.letter-book-games .pg-choice.is-wrong { background:#fff5ed; border-color:#b96e3a; color:#74543b; }
.letter-book-games .pg-board > .pg-choice-letter { font-size:70px; margin:0; color:#222; }
.letter-book-games .pr-pick-label { margin:0; color:#222; font-size:20px; font-weight:700; }
.letter-book-games .pg-feedback { padding:8px; margin:0; font-size:17px; }
.letter-book-games .pr-audio-options { width:100%; gap:12px; }
.letter-book-games .pr-audio-option { padding:10px 14px; gap:16px; }
.letter-book-games .pr-audio-play,.letter-book-games .pr-audio-pick { min-width:48px; min-height:48px; }
.letter-book-games .pr-pic-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; }
.letter-book-games .pr-pic-option { width:100%; height:170px; padding:10px; }
.letter-book-games .pg-done { max-width:640px; margin:0 auto; background:#fff; border-radius:0 0 28px 28px; padding:40px 24px; }
.letter-book-games .pg-done-title { font-size:32px; }
.letter-book-games .pg-done-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.letter-book-games .pg-btn { min-height:48px; font-size:17px; }
.letter-book-games button:focus-visible { outline:3px solid #0174b1; outline-offset:4px; }
.letter-book-games .ap-header { padding:20px; margin:0; }
body.dark-mode .ap-page.ap-page-kid.letter-book-games {
    --pg-ink:#eaf4ff; --pg-muted:#9bb6cc; --pg-card:#15293b; --pg-soft:#13283a;
    --pg-line:#26425a; --pg-blue:#4db8ff; --pg-on-accent:#102030;
    color:var(--pg-ink); background:#101d29;
}
body.dark-mode .letter-game-art { background:var(--pg-soft); }
body.dark-mode .letter-book-games :is(.pg-board,.pg-done,.pg-choice,.pg-close,.pg-progress) {
    background:var(--pg-card); color:var(--pg-ink); border-color:var(--pg-line);
}
body.dark-mode .letter-book-games .pg-choices { background:var(--pg-soft); }
body.dark-mode .letter-book-games :is(.pg-hint,.pg-board > .pg-choice-letter,.pr-pick-label) { color:var(--pg-ink); }
body.dark-mode .letter-book-games .pg-speaker { background:var(--pg-blue); color:var(--pg-on-accent); }
body.dark-mode .letter-book-games .pg-choice.is-correct { background:#193b2d; border-color:#70c99c; color:#9de9be; }
body.dark-mode .letter-book-games .pg-choice.is-wrong { background:#432b22; border-color:#d99a67; color:#ffc266; }
body.dark-mode .letter-book-games button:focus-visible { outline-color:var(--pg-blue); }
@media(max-width:480px) {
    .ap-page.ap-page-kid.letter-book-games { padding-left:12px; padding-right:12px; }
    .letter-game-art,.letter-book-games .pg-header { height:140px; }
    .letter-book-games .pg-header { margin-top:-140px; }
    .letter-game-book { gap:12px; padding:60px 12px 8px; }
    .letter-game-book img { height:68px; }
    .letter-game-book span { font-size:14px; }
    .letter-book-games .pg-board { padding:20px 14px; gap:20px; }
    .letter-book-games .pg-speaker { width:56px; height:56px; }
    .letter-book-games .pg-choices { gap:8px; padding:10px; }
    .letter-book-games .pg-choice { min-height:94px; padding:8px 4px; }
    .letter-book-games .pr-pic-options { gap:8px; }
    .letter-book-games .pr-pic-option { height:124px; padding:6px; }
}