/* Tap-to-answer cards use the same ink, paper and illustrated objects as print. */
.phone-dialog{width:min(620px,calc(100% - 24px));padding:24px;overscroll-behavior:contain}.phone-dialog h2{font-size:29px;margin:14px 0}.phonehead .eyebrow{font-size:12px;letter-spacing:1px}.phone-dialog progress{display:block;width:100%;height:6px;margin-top:12px;accent-color:#2d5748;border:0;border-radius:9px;overflow:hidden}.phone-dialog progress::-webkit-progress-bar{background:#e0e6dc}.phone-dialog progress::-webkit-progress-value{background:#2d5748}.phone-dialog .phoneprompt{min-height:0;padding:16px 0 0}.phone-dialog .phoneprompt .eyebrow{font-size:11px;letter-spacing:1.1px;margin:0 0 8px}.phone-dialog .phoneprompt #phonePrompt{font-size:23px;line-height:1.35}.phoneanswerhelp{font-size:13px;line-height:1.4;color:#58695f;margin:10px 0 14px}.phonechoices{display:grid;gap:9px}.phonechoices.visualchoices{grid-template-columns:repeat(3,minmax(0,1fr))}.phonechoice{position:relative;border:1.5px solid #aabdaf;border-radius:12px;background:#fff;color:#244638;text-align:left;padding:14px 38px 14px 16px;min-height:60px;font:600 17px/1.4 Arial,sans-serif;cursor:pointer;overflow-wrap:anywhere}.phonechoice:hover:not(:disabled){border-color:#294f42;background:#f3f5ec}.phonechoice:focus-visible{outline:3px solid #bb692c;outline-offset:3px}.phonechoice.picturechoice,.phonechoice.numberchoice{text-align:center;padding:10px 8px;min-height:98px}.phonechoice.picturechoice svg{height:70px;width:62px;display:block;margin:0 auto 4px}.phonechoice.numberchoice{font-size:34px;font-weight:600}.phonechoice:disabled{opacity:1;cursor:default}.phonechoice.chosen{border:2px solid #285743;background:#e4efdf;color:#214b35}.phonechoice.retry{border:2px solid #b87949;background:#fff4e6}.choicemark{position:absolute;top:6px;right:7px;font-size:16px;color:#285743}.phonefeedback{min-height:44px;margin:12px 0 0;font-size:15px;line-height:1.5}.phonefeedback.accepted{color:#285743;font-weight:600}.phonefeedback.tryagain{color:#7d4e24}.phone-dialog .phonecontrols{position:static;padding:8px 0;align-items:center;min-height:48px}.phonecontrols .textbutton{font-size:14px;margin:0;min-height:44px}.phonecontrols .textbutton:disabled{opacity:.45}.phone-dialog details{margin:10px 0 0;padding-top:14px;border-top:1px solid #d6ded2}.phone-dialog details p{font-size:14px}.phonecomplete{text-align:center;padding:0 12px 10px}.phonecomplete #phoneFinishArt{width:150px;margin:0 auto}.phonecomplete #phoneFinishArt svg{width:100%;display:block}.phonecomplete p{font-size:17px;line-height:1.6;margin:10px 0 24px}.phonecomplete .button{display:block;width:100%;margin:10px 0}.phonecomplete .textbutton{font-size:14px;min-height:44px}.memorycover{display:flex;justify-content:center;align-items:center;gap:18px;min-height:140px;background:#edf0e4;border-radius:14px;color:#365443}.memorycover>span{font:48px Georgia,serif}.memorycover p{font-size:15px;line-height:1.5}.phone-dialog [hidden]{display:none!important}
.librarycontrols{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 22px;color:#52665a;font-size:14px}.librarycontrols p{margin:0;line-height:1.5}.librarycontrols label{display:flex;align-items:center;gap:8px;white-space:nowrap}.librarycontrols select{width:auto;min-width:67px;min-height:40px;margin:0;padding:8px;font-size:14px}.librarypagination{border-top:1px solid #cdd7cb;margin-top:30px;padding-top:22px}.pageactions{display:flex;align-items:center;justify-content:space-between;gap:12px}.pageactions>span{font-size:14px;white-space:nowrap;color:#52665a}.pagenumbers{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:16px}.pagenumbers button{width:44px;height:44px;border:1px solid #bbcaba;border-radius:8px;background:#fffdf7;color:#284f43;font-size:15px;cursor:pointer}.pagenumbers button[aria-current=page]{background:#284f43;color:white;border-color:#284f43}.pagenumbers button:focus-visible{outline:3px solid #bb692c;outline-offset:2px}#resultTitle{scroll-margin-top:110px}.librarycontrols[hidden],.librarypagination[hidden]{display:none!important}
@media(max-width:700px){.phone-dialog{padding:18px;max-height:calc(100dvh - 16px);margin:auto}.phone-dialog h2{font-size:26px;margin:10px 0}.phone-dialog .phoneprompt #phonePrompt{font-size:21px}.phone-dialog .phoneprompt{padding-top:12px}.phonechoice{font-size:16px;min-height:58px;padding-top:12px;padding-bottom:12px}.phonechoice.picturechoice svg{height:57px;width:50px}.phonechoice.picturechoice,.phonechoice.numberchoice{min-height:92px}.phone-dialog #phonePictures svg{max-height:118px}.phonechoices{gap:8px}.phonefeedback{font-size:14px;min-height:42px}.phone-dialog .phonecontrols .button{font-size:14px;padding:10px 15px}.memorycover{min-height:118px}.librarycontrols{font-size:13px;gap:8px}.pageactions .button{font-size:13px;padding:10px 12px}.pageactions>span{font-size:13px}.phonehead .eyebrow{font-size:11px}.phone-dialog #phoneAnswerHelp{font-size:12px}.phone-dialog .phoneprompt .eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){.phone-dialog *{animation:none!important;transition:none!important}}

.phonechoices.visualchoices.twochoices{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Keep Back, Next and Skip in separate slots when a turn changes. */
.phone-dialog .phonecontrols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#phonePrevious{grid-column:1;grid-row:1;justify-self:start}
#phoneContinue{grid-column:2;grid-row:1;justify-self:center}
#phoneSkip{grid-column:3;grid-row:1;justify-self:end}

/* Scene-based activities need readable object and character sizes. */
.phone-dialog #phonePictures svg[data-rich-scene="true"]{width:100%;height:auto;max-height:210px}

/* Match the public shell while preserving the approved phone control behavior. */
.phone-dialog{max-width:calc(100vw - 24px);overflow-y:auto}
.phone-dialog .phonehead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.phone-dialog .phonehead .eyebrow{margin:0}
.phone-dialog .iconbutton{flex:0 0 44px;width:44px;min-height:44px;border:0;background:transparent;color:var(--text);font:24px/1 Nunito,sans-serif}
.phone-dialog .textbutton{border:0;background:transparent;color:var(--green);font-family:inherit;text-decoration:underline;padding:8px 2px;min-height:44px}
.phone-dialog .phonechoice{font-family:inherit}
.phone-dialog .quick-scene{display:block;width:100%;height:auto;max-height:260px;object-fit:contain;margin:0 auto}
.phone-dialog .phoneprompt #phonePrompt{font-weight:800}
.phone-dialog .phonecontrols .button{gap:0;min-width:0}
.phone-dialog .phonechoices{min-width:0}
@media(max-width:700px){.phone-dialog .quick-scene{max-height:210px}.phone-dialog{padding:16px}.phone-dialog .phonecontrols{gap:6px}}
/* The same accessible game controls, now part of the Play page. */
.phone-dialog.inline-play{position:relative;inset:auto;width:100%;max-width:none;max-height:none;margin:0;padding:26px 30px;border:1px solid var(--line);border-radius:20px;box-shadow:none;background:#fff;overflow:visible}.phone-dialog.inline-play .phonehead{margin-bottom:0}.phone-dialog.inline-play #phoneClose{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-width:0;min-height:44px;height:auto;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--green);font-size:13px;font-weight:700;line-height:1.35;white-space:nowrap;text-decoration:none}.phone-dialog.inline-play #phoneClose:hover{background:var(--sage);border-color:#aabdaf}.phone-dialog.inline-play #phoneClose:focus-visible{outline:3px solid #bb692c;outline-offset:3px}.phone-dialog.inline-play h2{font-size:30px;margin:18px 0}.inline-play #phonePlay{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}.inline-play #phonePictures{grid-column:1;grid-row:1/7;background:var(--sage);border-radius:14px;padding:16px;align-self:stretch;display:flex;align-items:center;min-height:250px}.inline-play .quick-scene{max-height:300px}.inline-play .phoneprompt,.inline-play .phoneanswerhelp,.inline-play .phonechoices,.inline-play .phonefeedback,.inline-play .phonecontrols{grid-column:2}.inline-play #phoneGuide{grid-column:1/-1}.phone-dialog.inline-play .phoneprompt{padding-top:0}.phone-dialog.inline-play #phonePrompt{font-size:22px}.inline-play .phonefeedback:empty{min-height:12px;margin-top:4px}.inline-play .phoneprompt .eyebrow{display:none}.inline-play .phoneanswerhelp{font-size:12px}.inline-play #phoneGuide summary{font-size:13px}.inline-play .phonecomplete{max-width:460px;margin:auto}.inline-play .phonecomplete p{font-size:16px}.inline-play .phonehead .eyebrow{font-size:12px}.phone-dialog.inline-play[open]{display:block}
@media(max-width:650px){.phone-dialog.inline-play{padding:17px;border-radius:16px}.phone-dialog.inline-play h2{font-size:25px;margin:10px 0 16px}.inline-play #phonePlay{display:flex;flex-direction:column;gap:0}.inline-play #phonePlay>*{width:100%}.inline-play #phonePictures{min-height:0;padding:10px;margin-bottom:16px;display:block}.phone-dialog.inline-play .quick-scene{max-height:175px}.phone-dialog.inline-play #phonePrompt{font-size:21px;line-height:1.3}.inline-play .phoneanswerhelp{margin:7px 0 12px;font-size:12px}.inline-play .phonechoice{min-height:52px;font-size:15px;padding:11px 28px 11px 12px}.inline-play .phonechoice.picturechoice,.inline-play .phonechoice.numberchoice{min-height:76px}.inline-play .phonechoice.numberchoice{font-size:29px}.inline-play .phonechoice.picturechoice svg{height:49px}.inline-play .phonefeedback{font-size:14px;min-height:0;margin-top:10px}.inline-play .phonecontrols{padding:8px 0 0;min-height:44px}.inline-play #phoneGuide{margin-top:12px;padding-top:9px}.inline-play .memorycover{min-height:160px}.inline-play .phonecomplete #phoneFinishArt{width:120px}}

/* Stories begin with the child's idea; examples remain optional. */
.phonechoices.open-choices{display:block}.phonechoices.open-choices>.phonechoice{width:100%;min-height:48px}
.phone-examples{margin-top:12px}.phone-examples>summary{min-height:44px;padding:12px 4px;box-sizing:border-box;cursor:pointer;font-weight:700;color:#34584a}
.phone-examples>summary:focus-visible{outline:3px solid #bb692c;outline-offset:2px}.phone-example-choices{display:grid;gap:10px;margin-top:8px}.phone-example-choices .phonechoice{width:100%;min-height:48px}
