.therapy-loop, .turn-cue { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 22px auto; } .therapy-loop span { display: flex; flex-direction: column; gap: 3px; min-width: 92px; background: #fff; border: 2px solid #ded5f5; border-radius: 18px; padding: 12px; font-size: 1.8rem; } .therapy-loop b { font-size: .78rem; } .therapy-loop i { font-style: normal; color: #9b8dbd; } .turn-cue span { background: #eeeaff; color: #5e43bd; border-radius: 999px; padding: 7px 12px; font-size: .78rem; font-weight: 900; } .caregiver-how { max-width: 760px; margin: 26px auto; padding: 22px; text-align: left; background: #fff; border: 3px solid #dcd2f8; border-radius: 26px; box-shadow: 0 8px 0 #e0d8f1; } .how-title { display: flex; align-items: center; gap: 13px; } .how-title > span { font-size: 2.4rem; } .how-title small { color: #6847d2; font-weight: 900; letter-spacing: .07em; } .how-title h2 { margin: 2px 0; font: 800 1.55rem 'Baloo 2'; } .caregiver-how ol { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .caregiver-how li { display: flex; gap: 11px; padding: 13px; background: #f8f6ff; border-radius: 16px; } .caregiver-how li > span { flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #7655e8; font-weight: 900; } .caregiver-how li b { font-size: .92rem; } .caregiver-how li p { margin: 3px 0 0; font-size: .8rem; line-height: 1.4; } .no-pressure { padding: 12px; background: #fff5c7; border-radius: 14px; text-align: center; font-weight: 900; font-size: .84rem; } .voice-model { margin: 8px auto 15px; padding: 13px 18px; border: 2px solid #5acbb1; border-radius: 999px; color: #25594e; background: #e4fff8; box-shadow: 0 5px 0 #9ce0cf; font-weight: 900; cursor: pointer; } [data-hear].speaking { animation: voicePulse .8s infinite alternate; background: #fff1b9; border-color: #e8c449; } @keyframes voicePulse { to { transform: scale(1.04); } } .session-builder { max-width: 850px; margin: 25px auto; padding: 22px; text-align: left; background: #fff; border: 3px solid #ded5f5; border-radius: 26px; box-shadow: 0 8px 0 #e2daef; } .session-builder h2 { margin: 4px 0 12px; font: 800 1.3rem 'Baloo 2'; } .session-builder > div + div { margin-top: 24px; } .level-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(135px,1fr)); gap: 12px; } .level-options button,.duration-options button { border: 3px solid #e2daf1; border-radius: 18px; background: #faf8ff; padding: 15px; cursor: pointer; } .level-options button span,.level-options button b,.level-options button small,.duration-options button b,.duration-options button small { display: block; } .level-options button span { font-size: 2rem; } .level-options button small,.duration-options button small { margin-top: 3px; color: #756e87; } .level-options button.selected,.duration-options button.selected { border-color: #55cdb3; background: #eafff8; box-shadow: 0 5px 0 #75cbb8; } .duration-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .session-summary { display: inline-block; margin: 0 auto 10px!important; padding: 9px 15px; border-radius: 999px; color: #5f43bb!important; background: #eee9ff; font-weight: 900; } .difficulty-check { max-width: 680px; margin: 28px auto; padding: 22px; border: 3px solid #ded5f5; border-radius: 25px; background: #fff; } .difficulty-check h2 { font: 800 1.6rem 'Baloo 2'; } .difficulty-check > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .difficulty-check button { border: 3px solid #e2daf1; border-radius: 18px; padding: 16px 8px; background: #faf8ff; cursor: pointer; } .difficulty-check button span,.difficulty-check button b { display: block; } .difficulty-check button span { font-size: 2.3rem; } .difficulty-check button.selected { border-color: #7655e8; background: #eee9ff; box-shadow: 0 5px 0 #b8a9e6; } .slide-game,.jump-game { max-width: 620px; margin: 18px auto 5px; padding: 18px; border-radius: 22px; background: linear-gradient(#e8faff,#fff5d7); border: 3px solid #d8d0ef; } .slide-world { position: relative; height: 105px; border-bottom: 8px solid #78c983; overflow: hidden; } .slider-buddy { position: absolute; left: 0; bottom: 8px; width: 60px; height: 60px; display: grid; place-items: center; font-size: 3rem; transition: left .08s linear; } .slide-target { position: absolute; right: 0; bottom: 8px; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 3.3rem; box-shadow: 0 5px 0 #f2ce57; } .slide-game input[type=range] { width: 100%; height: 44px; margin-top: 12px; accent-color: #7655e8; touch-action: pan-x; } .slide-game small { display: block; color: #665e7c; font-weight: 900; } .jump-world { position: relative; min-height: 115px; display: flex; align-items: end; justify-content: space-around; border-bottom: 8px solid #68bf75; } .jump-world i { color: #8f83ab; font-size: 1.5rem; } .jump-world b { width: 65px; height: 65px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 2.7rem; } .jump-buddy { font-size: 3.5rem; transform-origin: bottom; } .jump-buddy.jumping { animation: characterJump .55s ease-out; } @keyframes characterJump { 50% { transform: translateY(-55px) rotate(8deg); } } .jump-game button { margin-top: 15px; min-width: 190px; padding: 14px 18px; border: 0; border-radius: 18px; color: #fff; background: #7655e8; box-shadow: 0 6px 0 #4e2cb3; font-weight: 900; cursor: pointer; } .jump-game button span { margin-left: 8px; padding: 4px 8px; border-radius: 999px; background: #fff; color: #5b38c5; } footer small { display: block; max-width: 680px; margin: 5px auto 0; font-size: .72rem; font-weight: 700; } .footer-glory { display: block; width: 100%; margin: 10px auto 0; text-align: center; font-style: normal; } .header-tools { display: flex; align-items: center; gap: 10px; } .program-nav { display: flex; gap: 6px; } .program-nav button { min-height: 40px; padding: 8px 11px; border: 0; border-radius: 12px; color: #4f4274; background: #fff; font-weight: 900; cursor: pointer; } .bottom-tools { display:flex; align-items:center; justify-content:center; gap:24px; margin:32px auto 0; padding:18px clamp(14px,4vw,42px); border-top:3px solid #e6def4; border-bottom:1px solid #e6def4; background:#fff; }.bottom-program-nav { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }.bottom-program-nav button { min-height:48px; padding:10px 16px; border:2px solid #dcd2f0; border-radius:16px; background:#fff; color:#44356d; font-weight:900; cursor:pointer; }.bottom-program-nav button span { margin-right:6px; }.bottom-tools .language-choice { flex:0 0 auto; } .logo img { width: clamp(130px,12vw,180px); height: auto; max-height: 72px; object-fit: contain; } .bgp-return { min-height: 45px; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 14px; color: #fff; background: #079a9b; font-size: 14px; font-weight: 900; line-height: 1; white-space: nowrap; text-decoration: none; transition: transform .15s ease,background .15s ease; } .bgp-return:hover { color: #fff; background: #068788; transform: translateY(-1px); } .bgp-return span { font-size: 18px; line-height: 1; } .language-choice { display: flex; align-items: center; gap: 5px; } .language-choice button { min-height: 38px; padding: 7px 10px; border: 2px solid #ddd5f3; border-radius: 999px; background: #fff; font-weight: 900; cursor: pointer; } .language-choice button.selected { color: #fff; background: #7655e8; border-color: #7655e8; } .bonus-teaser { display: flex; align-items: center; gap: 14px; max-width: 720px; margin: 20px auto; padding: 16px 20px; text-align: left; border: 3px dashed #e5b933; border-radius: 20px; background: #fff6bd; } .bonus-teaser > span { font-size: 3rem; } .bonus-teaser b,.bonus-teaser small { display: block; } .bonus-teaser p { margin: 3px 0; font-size: .85rem; } .bonus-page { max-width: 1050px; margin: 15px auto; padding: 20px; text-align: center; } .bonus-head > span { color: #704bdc; font-weight: 900; letter-spacing: .08em; } .bonus-head h1 { margin: 5px 0; font-size: clamp(2.6rem,6vw,5rem); } .bonus-head p { margin: 4px; } .bonus-status { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px auto; } .bonus-status > * { padding: 9px 13px; border-radius: 999px; background: #fff; } .bonus-status button { border: 2px solid #55cdb3; cursor: pointer; font-weight: 900; } .platform-world { position: relative; height: clamp(260px,42vw,430px); overflow: hidden; border: 5px solid #fff; border-radius: 30px; background: linear-gradient(#82d9ff 0 68%,#9be073 69% 82%,#68b850 83%); box-shadow: 0 10px 0 #dcd3ef; } .clouds { position: absolute; inset: 20px 0 auto; color: #fff; font-size: clamp(2rem,5vw,4rem); opacity: .9; } .bonus-player { position: absolute; z-index: 3; bottom: 72px; width: clamp(54px,8vw,90px); font-size: clamp(3rem,7vw,6rem); transition: left .55s ease; } .bonus-player.bonus-jumping { animation: bonusJump .62s ease-out; } @keyframes bonusJump { 50% { transform: translateY(-110px) rotate(8deg); } } .bonus-platform { position: absolute; width: clamp(70px,10vw,115px); height: 45px; display: flex; justify-content: space-around; align-items: center; border-radius: 10px; background: #c18146; border-bottom: 8px solid #8b552c; } .bonus-platform span { font-size: 1.5rem; }.bonus-platform i { font-style: normal; font-size: 2rem; } .bonus-platform.collected span { color: #fff; }.bonus-finish { position: absolute; right: 2%; bottom: 70px; font-size: clamp(3rem,7vw,6rem); } .bonus-action { max-width: 700px; margin: 20px auto; }.bonus-action p { font-size: .9rem; } .bonus-action button { min-height: 58px; padding: 14px 25px; border: 0; border-radius: 18px; color: #fff; background: #7655e8; box-shadow: 0 7px 0 #4f2db6; font-weight: 900; font-size: 1.05rem; cursor: pointer; } .program-page,.reports-page { max-width: 1100px; } .year-progress { max-width: 760px; margin: 24px auto; padding: 16px 20px; border-radius: 18px; background: #fff; text-align: left; } .year-progress > div { height: 13px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e5def5; } .year-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#55d6be,#7655e8); } .curriculum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; } .curriculum-block { display: flex; gap: 14px; padding: 18px; border: 3px solid #e4dcf3; border-radius: 20px; background: #fff; } .curriculum-block > span { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #a99bc8; font-weight: 900; } .curriculum-block h2 { margin: 3px 0; font: 800 1.2rem 'Baloo 2'; } .curriculum-block p { margin: 4px 0 0; font-size: .85rem; line-height: 1.4; } .curriculum-block small { color: #786b9b; font-weight: 900; } .curriculum-block.active { border-color: #55d6be; background: #edfff9; box-shadow: 0 6px 0 #8fd7c7; } .curriculum-block.active > span { background: #079a9b; } .curriculum-block.complete > span { background: #5fc676; } .professional-note { display: block!important; max-width: 820px!important; margin-top: 26px!important; } .report-tabs { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin: 22px; } .report-tabs button { min-height: 46px; padding: 10px 17px; border: 3px solid #ded5f3; border-radius: 999px; background: #fff; font-weight: 900; cursor: pointer; } .report-tabs button.selected { color: #fff; background: #7655e8; border-color: #7655e8; } .report-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin: 25px 0; } .report-summary article { padding: 18px; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 #e3dbf1; } .report-summary span,.report-summary b,.report-summary small { display: block; } .report-summary span { font-size: 2rem; }.report-summary b { margin: 5px; font: 800 2rem 'Baloo 2'; }.report-summary small { color: #756d87; } .report-detail { padding: 24px; border-radius: 24px; background: #fff; text-align: left; } .report-detail h2 { font: 800 1.35rem 'Baloo 2'; } .observation-bars p { display: flex; justify-content: space-between; margin: 8px 0; padding: 10px 13px; border-radius: 12px; background: #f5f2ff; } .report-actions { margin-top: 22px; } .account-card { max-width:720px; margin:28px auto; padding:clamp(24px,5vw,48px); border:3px solid #b8eadc; border-radius:30px; background:#fff; box-shadow:0 9px 0 #a6ddd0; }.account-card>span { font-size:3rem; }.account-card ul { display:grid; gap:10px; max-width:520px; margin:22px auto; padding:0; list-style:none; text-align:left; }.account-id { display:grid; gap:5px; max-width:380px; margin:22px auto; padding:16px; border-radius:18px; background:#edfff9; }.account-id b { color:#078787; font-size:clamp(1.3rem,4vw,2rem); letter-spacing:.08em; }.privacy-line { color:#716987; font-size:.9rem; } .award-earned { max-width:520px; margin:18px auto 26px; padding:22px; border:3px solid #ffce52; border-radius:24px; background:linear-gradient(135deg,#fff9cf,#e8fff8); box-shadow:0 7px 0 #ebbb3f; }.award-earned small,.award-earned b { display:block; }.award-earned b { margin:6px; font:800 clamp(1.6rem,5vw,2.5rem) 'Baloo 2'; color:#6040c5; }.award-shelf { display:flex; flex-wrap:wrap; gap:10px; }.award-shelf span { padding:10px 13px; border-radius:14px; background:#fff6cc; } .certificate { margin:34px auto 10px; padding:clamp(24px,6vw,64px); border:10px double #079a9b; border-radius:12px; background:#fffdf1; color:#33305e; page-break-before:always; }.certificate img { width:110px; height:auto; }.certificate small,.certificate strong,.certificate em { display:block; }.certificate h2 { font-size:clamp(1.8rem,5vw,3rem); color:#078787; }.certificate strong { margin:18px auto; padding-bottom:8px; max-width:620px; border-bottom:2px solid #7c6a9e; font:800 clamp(2rem,6vw,4rem) 'Baloo 2'; }.certificate>div { display:flex; justify-content:space-between; gap:20px; margin-top:35px; padding-top:12px; border-top:1px solid #cabf9d; }.certificate em { margin-top:22px; color:#776f65; font-size:.8rem; } .popoy-welcome { position:fixed; inset:0; z-index:999; display:grid; grid-template-columns:minmax(190px,360px) minmax(280px,570px); place-content:center; align-items:center; gap:clamp(12px,4vw,45px); padding:24px; overflow:auto; background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.96),rgba(222,251,245,.96) 45%,rgba(213,239,255,.98)); animation:welcome-in .45s ease-out both; }.popoy-welcome>img { width:100%; max-height:68vh; object-fit:contain; filter:drop-shadow(0 18px 18px #264f6250); animation:popoy-hop 1.4s ease-in-out infinite; }.welcome-bubble { position:relative; padding:clamp(24px,5vw,48px); border:5px solid #fff; border-radius:38px; background:#fffdf7; box-shadow:0 12px 0 #65cdb8,0 24px 50px #244d6430; text-align:center; animation:bubble-pop .65s .18s cubic-bezier(.2,1.5,.5,1) both; }.welcome-bubble:before { content:''; position:absolute; left:-32px; bottom:35%; border:18px solid transparent; border-right-color:#fff; }.welcome-bubble small { color:#078787; font-weight:900; letter-spacing:.08em; }.welcome-bubble h1 { margin:8px 0; font:800 clamp(2rem,5vw,4rem) 'Baloo 2'; color:#443270; }.welcome-bubble p { font-size:clamp(1rem,2vw,1.3rem); line-height:1.55; }.welcome-sparkles { position:absolute; top:8%; left:50%; transform:translateX(-50%); font-size:clamp(1.3rem,4vw,2.5rem); letter-spacing:1rem; animation:sparkle 1.2s ease-in-out infinite; }.welcome-skip { position:absolute; top:18px; right:20px; padding:10px 15px; border:0; border-radius:999px; background:#ffffffc9; color:#625a76; font-weight:800; cursor:pointer; }.popoy-welcome .primary { min-width:190px; } @keyframes welcome-in { from { opacity:0 } to { opacity:1 } } @keyframes popoy-hop { 0%,100% { transform:translateY(0) rotate(-1deg) } 50% { transform:translateY(-16px) rotate(2deg) } } @keyframes bubble-pop { from { opacity:0; transform:scale(.7) } to { opacity:1; transform:scale(1) } } @keyframes sparkle { 0%,100% { opacity:.55; transform:translateX(-50%) scale(.92) } 50% { opacity:1; transform:translateX(-50%) scale(1.08) } } @media (max-width:700px) { .popoy-welcome { grid-template-columns:1fr; grid-template-rows:minmax(150px,35vh) auto; gap:4px; padding:52px 16px 18px; }.popoy-welcome>img { height:100%; }.welcome-bubble { padding:22px 18px; border-radius:28px; }.welcome-bubble:before { display:none; }.welcome-bubble p { margin:8px 0 14px; }.welcome-sparkles { top:3%; letter-spacing:.45rem; } } @media (prefers-reduced-motion:reduce) { .popoy-welcome,.popoy-welcome>img,.welcome-bubble,.welcome-sparkles { animation:none!important; } } /* Accessible reading controls and varied real-world practice */ html[data-text-size="small"] { font-size:15px; } html[data-text-size="normal"] { font-size:16px; } html[data-text-size="large"] { font-size:19px; } .accessibility-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; } .text-size-choice { display:flex; align-items:center; gap:4px; padding:4px; border:2px solid #ded5f3; border-radius:999px; background:#fff; } .text-size-choice button { min-width:42px; min-height:42px; border:0; border-radius:999px; background:transparent; font-weight:900; cursor:pointer; } .text-size-choice button.selected { color:#fff; background:#7655e8; } .practice-style-options { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .practice-style-options button { display:grid; place-items:center; gap:5px; min-height:96px; padding:12px; border:3px solid #e5ddf4; border-radius:18px; background:#fff; cursor:pointer; } .practice-style-options button span { font-size:2rem; } .practice-style-options button.selected { border-color:#55cdb5; background:#eafff8; box-shadow:0 6px 0 #55cdb5; } .routine-context,.activity-variations { display:grid; gap:6px; max-width:690px; margin:16px auto; padding:15px 18px; border-radius:18px; text-align:left; } .routine-context { grid-template-columns:auto 1fr; background:#e9fff8; border:2px solid #8cddc9; } .routine-context b:after { content:':'; } .activity-variations { background:#fff7d2; border:2px solid #efd861; } .activity-variations span:before { content:'✓ '; color:#078787; font-weight:900; } .format-steps { max-width:650px; margin:18px auto; padding-left:28px; text-align:left; line-height:1.6; } .format-steps li { margin:7px 0; } .complete-activity { display:block; min-width:190px; margin:22px auto 5px; } .format-song { border-color:#ffc94d; background:linear-gradient(135deg,#fffdf0,#fff7cf); } .format-routine,.format-choice { border-color:#66d4bd; background:linear-gradient(135deg,#fff,#eafff8); } .format-book,.format-conversation { border-color:#8ca9ee; background:linear-gradient(135deg,#fff,#eef4ff); } .format-movement,.format-pretend { border-color:#d498ec; background:linear-gradient(135deg,#fff,#fcf0ff); } @media (max-width:760px) { .practice-style-options { grid-template-columns:1fr 1fr; } .accessibility-tools { width:100%; } .routine-context { grid-template-columns:1fr; } } /* Large responsive game imagery */ .prompt span { width: clamp(90px,12vw,145px); height: clamp(90px,12vw,145px); font-size: clamp(3.8rem,7vw,6.2rem); } .objects button { width: clamp(100px,12vw,145px); height: clamp(96px,11vw,132px); font-size: clamp(3.7rem,6vw,5.5rem); } .guide img { width: clamp(78px,9vw,112px); height: clamp(78px,9vw,112px); } .guide i { font-size: clamp(3rem,5vw,4.8rem); } .slider-buddy { width: clamp(62px,8vw,92px); height: clamp(62px,8vw,92px); font-size: clamp(3rem,6vw,5rem); } .slide-target { width: clamp(76px,9vw,108px); height: clamp(76px,9vw,108px); font-size: clamp(3.5rem,6vw,5.4rem); } .jump-buddy { font-size: clamp(4rem,7vw,6rem); } .jump-world b { width: clamp(72px,9vw,105px); height: clamp(72px,9vw,105px); font-size: clamp(3rem,6vw,5rem); } /* Desktop and tablet layout */ @media (min-width: 900px) { .game { max-width: 1040px; } .play-card { padding: 30px 45px; } .session-builder { padding: 28px 34px; } .slide-game,.jump-game { min-height: 190px; } } /* Keep each activity in one stable desktop workspace. */ @media (min-width:1000px) and (min-height:680px) { html[data-screen="game"],html[data-screen="game"] body { height:100%; overflow:hidden; } html[data-screen="game"] header { max-width:1280px; height:68px; padding-block:7px; } html[data-screen="game"] .logo img { width:130px; max-height:52px; } html[data-screen="game"] main { height:calc(100vh - 68px); } html[data-screen="game"] .bottom-tools,html[data-screen="game"] footer { display:none; } html[data-screen="game"] .game { width:min(1240px,96vw); height:100%; max-width:none; padding:5px 12px 12px; display:grid; grid-template-columns:minmax(0,1fr) 290px; grid-template-rows:auto auto auto minmax(0,1fr) auto; grid-template-areas:"head head" "quest support" "cue support" "card support" "card controls"; column-gap:18px; align-items:start; } html[data-screen="game"] .game-head { grid-area:head; } html[data-screen="game"] .quest { grid-area:quest; justify-content:flex-start; margin:5px 10px; } html[data-screen="game"] .quest>span { font-size:2.2rem; } html[data-screen="game"] .quest h1 { font-size:1.8rem; } html[data-screen="game"] .turn-cue { grid-area:cue; margin:4px 0 8px; } html[data-screen="game"] .play-card { grid-area:card; height:100%; min-height:0; padding:12px 18px; overflow:hidden; border-radius:24px; } html[data-screen="game"] .game aside { grid-area:support; margin:5px 0 10px; align-self:stretch; } html[data-screen="game"] .controls { grid-area:controls; display:grid; gap:8px; align-self:end; } html[data-screen="game"] .controls button { width:100%; min-height:45px; } html[data-screen="game"] .guide img { width:46px; height:46px; } html[data-screen="game"] .guide i { font-size:2.35rem; } html[data-screen="game"] .guide b { padding:6px 9px; } html[data-screen="game"] .voice-model { margin:3px auto 6px; padding:7px 14px; box-shadow:0 3px 0 #9ce0cf; } html[data-screen="game"] .prompt { margin:4px; gap:8px; } html[data-screen="game"] .prompt span { width:64px; height:64px; border-width:3px; border-radius:17px; font-size:2.8rem; box-shadow:0 4px 0 #eec744; } html[data-screen="game"] .objects { gap:10px; } html[data-screen="game"] .objects button { width:82px; height:72px; font-size:2.8rem; box-shadow:0 4px 0 #d9d0ea; } html[data-screen="game"] .play-card:not(.format-game) { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-areas:"guide guide" "voice voice" "message coaching" "complete complete"; gap:4px 16px; align-items:center; } html[data-screen="game"] .play-card:not(.format-game)>.guide { grid-area:guide; } html[data-screen="game"] .play-card:not(.format-game)>.voice-model { grid-area:voice; } html[data-screen="game"] .activity-message-column { grid-area:message; min-width:0; align-self:center; } html[data-screen="game"] .activity-coaching-column { grid-area:coaching; min-width:0; align-self:center; } html[data-screen="game"] .activity-message-column>p { margin:4px 0; font-size:.82rem; line-height:1.3; } html[data-screen="game"] .routine-context,html[data-screen="game"] .activity-variations { margin:4px auto; padding:6px 9px; font-size:.78rem; line-height:1.25; } html[data-screen="game"] .format-steps { margin:2px auto; padding-left:22px; font-size:.8rem; line-height:1.22; } html[data-screen="game"] .format-steps li { margin:2px 0; } html[data-screen="game"] .complete-activity { grid-area:complete; min-height:38px; margin:4px auto 1px; padding:8px 18px; box-shadow:0 5px 0 #4f2db6; } html[data-screen="game"] .format-game>p { margin:4px 0; font-size:.78rem; line-height:1.25; } html[data-screen="game"] .slide-game,html[data-screen="game"] .jump-game { min-height:0; margin:6px auto 2px; padding:8px 12px; } html[data-screen="game"] .slide-world { height:68px; } html[data-screen="game"] .jump-world { min-height:72px; } html[data-screen="game"] .slider-buddy { width:48px; height:48px; font-size:2.4rem; } html[data-screen="game"] .slide-target { width:54px; height:54px; font-size:2.5rem; } html[data-screen="game"] .slide-game input[type=range] { height:32px; margin-top:5px; } html[data-screen="game"] .jump-buddy { font-size:2.8rem; } html[data-screen="game"] .jump-world b { width:54px; height:54px; font-size:2.5rem; } html[data-screen="game"] .jump-game button { min-width:165px; margin-top:6px; padding:8px 14px; } } /* Tablet portrait and landscape */ @media (min-width: 700px) and (max-width: 1100px) { header { padding-inline: 28px; } .hero { min-height: 600px; padding-inline: 36px; gap: 18px; } .center { max-width: 900px; padding-inline: 30px; } .game { max-width: 920px; padding-inline: 28px; } .characters { grid-template-columns: repeat(3,1fr); } .session-builder { padding: 25px; } .level-options,.duration-options { gap: 10px; } .level-options button,.duration-options button { min-height: 105px; } .caregiver-how ol { grid-template-columns: 1fr 1fr; } .play-card { padding: 26px 30px; } .objects button { width: 125px; height: 115px; } .voice-model,.controls button,.jump-game button { min-height: 52px; } .slide-game input[type=range] { height: 58px; } .difficulty-check button { min-height: 115px; } } @media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) { .hero { grid-template-columns: 1fr; text-align: center; } .hero > div:first-child > p { margin-inline: auto; } .badges { justify-content: center; } .popoy-stage { min-height: 350px; } .characters { grid-template-columns: repeat(3,1fr); } } @media (max-width: 760px) { header { padding: 12px 15px; } .logo img { width: clamp(112px,28vw,145px); height: auto; max-height: 60px; } .center,.game { padding-inline: 14px; } .game-head { position: sticky; top: 0; z-index: 8; padding: 8px; background: rgba(238,249,255,.94); backdrop-filter: blur(8px); border-radius: 15px; } .quest { margin: 15px 5px; } .quest > span { font-size: 2.3rem; } .quest h1 { font-size: 1.9rem; } .turn-cue { gap: 6px; } .turn-cue span { flex: 1 1 44%; text-align: center; } .play-card { border-radius: 24px; } .guide { flex-wrap: wrap; } .guide b { font-size: .82rem; } .voice-model { width: 100%; min-height: 50px; } .controls { gap: 10px; } .controls button { min-height: 48px; flex: 1; } .slide-game,.jump-game { padding: 14px 10px; } .slide-game input[type=range] { height: 54px; } .jump-game button { width: 100%; min-height: 54px; font-size: 1.05rem; } .objects button { min-width: 82px; min-height: 82px; } .grownup { display: none; } .header-tools { margin-left: auto; } .header-tools { flex-wrap: wrap; justify-content: flex-end; } .program-nav { order: 3; width: 100%; justify-content: flex-end; } .bottom-tools { flex-direction:column; gap:12px; padding:14px 10px; }.bottom-program-nav { width:100%; display:grid; grid-template-columns:repeat(3,1fr); }.bottom-program-nav button { padding:9px 5px; font-size:.78rem; }.bottom-program-nav button span { display:block; margin:0 0 2px; font-size:1.15rem; }.bottom-tools .language-choice { width:100%; justify-content:center; } .bgp-return { min-height: 44px; padding: 11px 14px; font-size: 12px; } .platform-world { border-radius: 20px; } .bonus-page { padding-inline: 10px; } .curriculum-grid { grid-template-columns: 1fr; } .report-summary { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { header { flex-wrap: wrap; } .logo img { width: 120px; max-height: 54px; } .header-tools { width: 100%; justify-content: space-between; } .program-nav { order: 4; justify-content: center; } .bgp-return { margin-left: auto; } } @media print { header,footer,.bottom-tools,.report-tabs,.report-actions { display: none!important; } body { background: #fff!important; } .reports-page { max-width: none; } .report-summary article,.report-detail { box-shadow: none; border: 1px solid #ccc; } } @media (max-width: 430px) { .game-head .stars { font-size: .95rem; white-space: nowrap; } .progress { min-width: 80px; } .prompt { gap: 8px; } .prompt span { width: 76px; height: 76px; font-size: 3.1rem; } .objects { flex-wrap: wrap; } .objects button { width: 86px; height: 82px; } .slide-world { height: 90px; } .slider-buddy { width: 52px; height: 52px; font-size: 2.6rem; } .slide-target { width: 60px; height: 60px; font-size: 2.7rem; } .jump-world { min-height: 100px; } .jump-buddy { font-size: 3rem; } .birthday-banner p { display: none; } footer { padding: 22px 14px; } } @media (orientation: landscape) and (max-height: 520px) { .game { padding-top: 5px; } .quest { margin-block: 8px; } .turn-cue { margin-block: 8px; } .play-card { padding-block: 12px; } .prompt span { width: 68px; height: 68px; font-size: 2.8rem; } } .birthday-setup { max-width: 700px; margin: 24px auto 34px; padding: 22px; text-align: left; background: #fff; border: 3px solid #ffcf55; border-radius: 24px; box-shadow: 0 7px 0 #f1bb3c; } .birthday-setup > label, .birthday-setup fieldset label { margin: 0; } .birthday-setup input, .birthday-setup select { width: 100%; margin-top: 6px; padding: 11px; border: 2px solid #ded6ef; border-radius: 12px; background: #fff; } .birthday-setup fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: 0; padding: 16px 0 10px; } .birthday-setup legend { font-weight: 900; padding-top: 12px; } .birthday-setup > small { color: #6d6680; } .birthday-banner { max-width: 900px; margin: 5px auto 12px; padding: 16px 22px; display: flex; justify-content: center; align-items: center; gap: 20px; text-align: center; color: #5432b5; background: linear-gradient(135deg, #fff0a8, #ffd6ef, #d7fff4); border: 3px solid #fff; border-radius: 25px; box-shadow: 0 8px 22px #6650a52b; } .birthday-banner > span { font-size: 3rem; animation: float 2s infinite; } .birthday-banner small,.birthday-banner b { display: block; } .birthday-banner b { font: 800 2rem 'Baloo 2'; } .birthday-banner p { margin: 0; font-size: .95rem; } @media (max-width: 520px) { .birthday-setup fieldset { grid-template-columns: 1fr; } .birthday-banner { margin-inline: 12px; gap: 8px; } .birthday-banner > span { font-size: 2rem; } .birthday-banner b { font-size: 1.5rem; } .caregiver-how ol { grid-template-columns: 1fr; } .level-options { grid-template-columns: 1fr 1fr; } .duration-options { grid-template-columns: 1fr 1fr; } .difficulty-check > div { grid-template-columns: 1fr; } } /* Final desktop fit guard: game interactions must remain fully visible. */ @media (min-width:1000px) and (min-height:680px) { html[data-screen="game"] .format-game .guide { min-height:38px; max-height:40px; } html[data-screen="game"] .format-game .guide img { width:36px; height:36px; } html[data-screen="game"] .format-game .guide i { font-size:1.75rem; } html[data-screen="game"] .format-game .guide b { font-size:.72rem; padding:4px 7px; } html[data-screen="game"] .format-game .voice-model { min-height:34px; margin:2px auto 4px; padding:4px 12px; font-size:.76rem; } html[data-screen="game"] .format-game .prompt { margin:2px; } html[data-screen="game"] .format-game .prompt span { width:50px; height:50px; font-size:2.15rem; } html[data-screen="game"] .format-game .objects button { width:68px; height:58px; min-height:0; font-size:2.35rem; } html[data-screen="game"] .format-game .slide-game,html[data-screen="game"] .format-game .jump-game { margin:3px auto 1px; padding:5px 9px; } html[data-screen="game"] .format-game .slide-world { height:48px; border-bottom-width:5px; } html[data-screen="game"] .format-game .jump-world { min-height:52px; border-bottom-width:5px; } html[data-screen="game"] .format-game .slider-buddy { width:36px; height:36px; bottom:5px; font-size:1.9rem; } html[data-screen="game"] .format-game .slide-target { width:40px; height:40px; bottom:5px; font-size:1.9rem; } html[data-screen="game"] .format-game .slide-game input[type=range] { height:25px; margin-top:2px; } html[data-screen="game"] .format-game .slide-game small { font-size:.68rem; } html[data-screen="game"] .format-game .jump-buddy { font-size:2rem; } html[data-screen="game"] .format-game .jump-world i { font-size:1rem; } html[data-screen="game"] .format-game .jump-world b { width:38px; height:38px; font-size:1.8rem; } html[data-screen="game"] .format-game .jump-game button { min-width:145px; min-height:32px; margin-top:3px; padding:5px 11px; font-size:.78rem; box-shadow:0 4px 0 #4e2cb3; } } /* Compact caregiver help is now on-demand via the ? button. */ html[data-screen="game"] .game > aside{display:none} /* 2026-08-29 audit fix: restore the current game DOM layout. The previous desktop grid rules targeted the old .game structure and caused the new .game-play-layout content to be misplaced/clipped. */ @media (min-width:1000px) and (min-height:680px) { html[data-screen="game"], html[data-screen="game"] body { height:auto; min-height:100%; overflow-x:hidden; overflow-y:auto; } html[data-screen="game"] header { height:auto; min-height:68px; padding:8px 24px; } html[data-screen="game"] main { height:auto; min-height:0; } html[data-screen="game"] .game { width:min(1180px,96vw); max-width:none; height:auto; min-height:0; padding:8px 16px 24px; display:block; } html[data-screen="game"] .game-head { margin-bottom:8px; } html[data-screen="game"] .quest { margin:8px 6px; } html[data-screen="game"] .turn-cue { margin:5px 0 9px; } html[data-screen="game"] .game-play-layout { display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:16px; align-items:stretch; } html[data-screen="game"] .play-card { height:auto; min-height:430px; overflow:visible; } html[data-screen="game"] .game-side-actions { align-self:stretch; } } /* Consistent spacing across Popoy screens. */ .center, .game { margin-inline:auto; } .center { padding-top:24px; padding-bottom:28px; } .game { padding-top:12px; padding-bottom:24px; } .game-head { gap:12px; } .quest { margin-top:10px; margin-bottom:10px; } .turn-cue { margin-top:6px; margin-bottom:10px; } .play-card { padding:18px 20px; } @media (max-width:760px) { .center { padding-top:18px; padding-bottom:22px; } .game { padding-top:8px; padding-bottom:20px; } .quest { margin-top:12px; margin-bottom:10px; } .turn-cue { margin-top:5px; margin-bottom:9px; } .play-card { padding:16px 12px; } } /* 2026-08-29 responsive device fit One fluid layout for desktop, iPad/tablet, and phone. Keep the game readable without horizontal scrolling or clipped controls. */ html, body { max-width:100%; } img, video, canvas, svg { max-width:100%; } button, input, textarea, select { max-width:100%; } /* Desktop: use available width, but keep comfortable reading proportions. */ @media (min-width:1101px) { header { width:min(100% - 40px, 1240px); } html[data-screen="game"] .game { width:min(1180px, calc(100vw - 40px)); } html[data-screen="game"] .game-play-layout { grid-template-columns:minmax(0,1fr) clamp(128px,12vw,150px); gap:18px; } html[data-screen="game"] .game-side-actions { min-width:0; } } /* iPad / tablet: avoid desktop-only compression and give touch targets room. */ @media (min-width:701px) and (max-width:1100px) { header { width:100%; padding-inline:clamp(18px,4vw,32px); } .hero { width:min(100%,980px); padding-inline:clamp(24px,5vw,40px); } .center, .game { width:min(100%,960px); padding-inline:clamp(20px,4vw,34px); } html[data-screen="game"] .game-play-layout { display:grid; grid-template-columns:minmax(0,1fr) 145px; gap:14px; align-items:stretch; } html[data-screen="game"] .play-card { min-width:0; padding:clamp(18px,3vw,28px); } html[data-screen="game"] .game-side-actions { min-width:0; display:flex; flex-direction:column; gap:10px; } html[data-screen="game"] .game-side-actions button { width:100%; min-height:58px; padding:10px 8px; } html[data-screen="game"] .game-side-actions button span { display:block; line-height:1.15; } .guide { gap:8px; } .prompt { gap:12px; } .prompt span { width:clamp(84px,12vw,120px); height:clamp(84px,12vw,120px); } .objects { gap:clamp(10px,2vw,18px); } .objects button { width:clamp(90px,12vw,120px); height:clamp(86px,11vw,110px); } .answers { max-width:760px; } } /* iPad portrait and smaller tablets: stack the side controls under the activity. */ @media (min-width:701px) and (max-width:900px) and (orientation:portrait) { html[data-screen="game"] .game-play-layout { grid-template-columns:1fr; } html[data-screen="game"] .game-side-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } html[data-screen="game"] .game-side-actions .complete-side { grid-column:1 / -1; } html[data-screen="game"] .game-side-actions button { min-height:58px; } html[data-screen="game"] .play-card { min-height:0; } } /* Phone: single-column, touch-friendly, no clipped right rail. */ @media (max-width:700px) { header { width:100%; min-width:0; } .hero, .center, .game { width:100%; max-width:none; min-width:0; } .hero { gap:12px; } html[data-screen="game"] .game { width:100%; padding-inline:10px; overflow:visible; } html[data-screen="game"] .game-head { width:100%; min-width:0; gap:7px; } html[data-screen="game"] .game-head > button { flex:0 0 42px; } html[data-screen="game"] .progress { min-width:0; } html[data-screen="game"] .stars { flex:0 0 auto; } html[data-screen="game"] .quest { justify-content:flex-start; align-items:flex-start; gap:8px; margin-inline:2px; } html[data-screen="game"] .quest > span { flex:0 0 auto; } html[data-screen="game"] .quest > div { min-width:0; } html[data-screen="game"] .quest small { display:block; line-height:1.25; } html[data-screen="game"] .quest h1 { overflow-wrap:anywhere; } html[data-screen="game"] .game-play-layout { display:flex; flex-direction:column; width:100%; gap:12px; } html[data-screen="game"] .play-card { width:100%; min-width:0; min-height:0; overflow:visible; padding:14px 10px; } html[data-screen="game"] .game-side-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } html[data-screen="game"] .game-side-actions button { width:100%; min-height:54px; padding:9px 6px; } html[data-screen="game"] .game-side-actions button span { display:block; font-size:.78rem; line-height:1.1; } html[data-screen="game"] .game-side-actions [data-hear] { grid-column:1 / -1; } html[data-screen="game"] .game-side-actions .complete-side { grid-column:1 / -1; } .guide img { width:64px; height:64px; } .guide i { font-size:2.8rem; } .voice-model { width:min(100%,360px); } .prompt { flex-wrap:wrap; } .prompt span { width:clamp(72px,22vw,92px); height:clamp(72px,22vw,92px); font-size:clamp(2.8rem,11vw,3.7rem); } .prompt b { font-size:1.4rem; } .objects { flex-wrap:wrap; } .objects button { width:clamp(76px,25vw,94px); height:clamp(72px,23vw,88px); font-size:clamp(2.8rem,11vw,3.5rem); } .format-steps { padding-left:22px; } .routine-context { grid-template-columns:1fr; } .activity-message-column, .activity-coaching-column { min-width:0; } .slide-game, .jump-game { width:100%; } .slide-game input[type="range"] { min-width:0; } .session-builder, .difficulty-check, .birthday-setup { margin-inline:10px; } .duration-options { grid-template-columns:1fr 1fr; } .practice-style-options { grid-template-columns:1fr 1fr; } .caregiver-how ol { grid-template-columns:1fr; } } /* Very small phones: prevent text and controls from forcing overflow. */ @media (max-width:430px) { header { padding-inline:10px; } .game { padding-inline:8px; } .game-head .stars { font-size:.85rem; } .turn-cue { gap:5px; } .turn-cue span { padding:6px 9px; font-size:.72rem; } .play-card { border-width:2px; border-radius:20px; } .guide { gap:5px; } .guide b { max-width:calc(100vw - 120px); overflow-wrap:anywhere; } .game-side-actions button { min-height:52px; } .game-side-actions button span { font-size:.72rem; } } /* Landscape phone: preserve width for the activity while keeping controls reachable. */ @media (max-width:700px) and (orientation:landscape) { .game { padding-top:4px; } .quest { margin-block:7px; } .turn-cue { margin-block:6px; } html[data-screen="game"] .play-card { padding-block:10px; } html[data-screen="game"] .game-side-actions { grid-template-columns:repeat(3,minmax(0,1fr)); } html[data-screen="game"] .game-side-actions [data-hear], html[data-screen="game"] .game-side-actions .complete-side { grid-column:auto; } } /* ========================================================================== 2026-08-29 WHOLE-SITE STABILITY AUDIT PATCH This section intentionally comes last. It neutralizes an older desktop game workspace rule that had higher selector specificity than the newer responsive rules and could stack the action rail over the activity card. ========================================================================== */ /* Global safety: no page may create accidental horizontal canvas overflow. */ html, body { width: 100%; max-width: 100%; overflow-x: clip; } *, *::before, *::after { box-sizing: border-box; } main, section, article, aside, header, footer, nav, div { min-width: 0; } img, svg, video, canvas { max-width: 100%; height: auto; } /* The game is a normal document flow. Do not let legacy desktop rules turn the entire screen into a fixed grid with detached grid areas. */ html[data-screen="game"], html[data-screen="game"] body { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; } html[data-screen="game"] main { height: auto !important; min-height: 0 !important; } html[data-screen="game"] .game { display: block !important; width: min(1180px, calc(100vw - 40px)) !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin-inline: auto !important; padding: 12px 16px 28px !important; overflow: visible !important; grid-template-columns: none !important; grid-template-rows: none !important; grid-template-areas: none !important; } /* Reset legacy grid placement so every game part stays in its own flow. */ html[data-screen="game"] .game-head, html[data-screen="game"] .quest, html[data-screen="game"] .turn-cue, html[data-screen="game"] .play-card, html[data-screen="game"] .game aside, html[data-screen="game"] .controls { grid-area: auto !important; } html[data-screen="game"] .game-play-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(132px, 12vw, 156px) !important; gap: clamp(14px, 2vw, 22px) !important; align-items: stretch !important; } html[data-screen="game"] .game-play-layout .play-card { display: flex !important; width: 100% !important; height: auto !important; min-height: 430px !important; padding: clamp(18px, 2.4vw, 30px) !important; overflow: visible !important; } html[data-screen="game"] .game-side-actions { position: static !important; display: flex !important; width: 100% !important; min-width: 0 !important; align-self: stretch !important; flex-direction: column !important; justify-content: center !important; align-items: stretch !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } html[data-screen="game"] .game-side-actions button { width: 100% !important; height: auto !important; min-height: 104px !important; padding: 12px 10px !important; font-size: 1.25rem !important; } html[data-screen="game"] .game-side-actions button span { display: block !important; font-size: .86rem !important; line-height: 1.2 !important; } /* Large desktop: prevent the old 290px support rail from reserving space and keep the card/action relationship visually balanced. */ @media (min-width: 1101px) { html[data-screen="game"] .game-play-layout { grid-template-columns: minmax(0, 1fr) 150px !important; } html[data-screen="game"] .play-card { min-height: 440px !important; } } /* Tablets: retain a readable rail without squeezing the activity. */ @media (min-width: 701px) and (max-width: 1100px) { html[data-screen="game"] .game { width: min(100%, 960px) !important; padding-inline: clamp(18px, 4vw, 32px) !important; } html[data-screen="game"] .game-play-layout { grid-template-columns: minmax(0, 1fr) 145px !important; } html[data-screen="game"] .game-play-layout .play-card { min-height: 380px !important; } html[data-screen="game"] .game-side-actions button { min-height: 88px !important; } } /* Narrow portrait tablets: controls become a compact row beneath the card. */ @media (min-width: 701px) and (max-width: 900px) and (orientation: portrait) { html[data-screen="game"] .game-play-layout { grid-template-columns: 1fr !important; } html[data-screen="game"] .game-side-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-self: auto !important; } html[data-screen="game"] .game-side-actions button { min-height: 62px !important; } html[data-screen="game"] .game-side-actions .complete-side { grid-column: 1 / -1 !important; } } /* Phones: one column, with controls fully visible and touch-friendly. */ @media (max-width: 700px) { html[data-screen="game"] .game { width: 100% !important; padding: 8px 10px 22px !important; } html[data-screen="game"] .game-play-layout { grid-template-columns: 1fr !important; gap: 12px !important; } html[data-screen="game"] .game-play-layout .play-card { min-height: 0 !important; padding: 16px 12px !important; } html[data-screen="game"] .game-side-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; } html[data-screen="game"] .game-side-actions button { min-height: 58px !important; padding: 9px 6px !important; } html[data-screen="game"] .game-side-actions [data-hear], html[data-screen="game"] .game-side-actions .complete-side { grid-column: 1 / -1 !important; } } /* Keep the global shell from inheriting fixed desktop assumptions. */ @media (min-width: 1000px) and (min-height: 680px) { html[data-screen="game"] header { height: auto !important; min-height: 68px !important; } } /* 2026-08-29 follow-up: the action rail is an