@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap');
:root{--purple:#7655e8;--ink:#342b57;--mint:#55d6be;--yellow:#ffdd57}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:Nunito,sans-serif;background:linear-gradient(#eef9ff,#fff9e9);overflow-x:hidden}button,textarea{font:inherit;color:inherit}.sky{position:fixed;inset:20px 0 auto;text-align:center;word-spacing:30vw;font-size:2rem;opacity:.45;z-index:-1}header{max-width:1160px;margin:auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center}.auth-links{display:flex;align-items:center;gap:8px}.auth-links button{border:2px solid #e2dafb;background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;font-weight:900;cursor:pointer}.auth-links button:hover{border-color:var(--purple);transform:translateY(-1px)}.bgp-return{display:inline-flex;align-items:center;gap:5px;background:#55d6be;color:#183f38;text-decoration:none;border:2px solid #3fbba5;border-radius:999px;padding:9px 13px;font-weight:1000;white-space:nowrap}.logo{border:0;background:none;display:flex;align-items:center;gap:9px;cursor:pointer;font:800 1.2rem 'Baloo 2'}.logo img{width:48px;height:48px;object-fit:contain}.grownup,.pill{background:#fff;border:2px solid #e2dafb;border-radius:999px;padding:9px 14px;font-weight:900;font-size:.78rem}.pill{display:inline-block;color:#6541d4;letter-spacing:.06em}h1{font:800 clamp(2.6rem,5vw,5rem)/1 'Baloo 2';margin:18px 0}h1 em{font-style:normal;color:var(--purple)}p{font-size:1.1rem;line-height:1.6;color:#68617f}.hero{max-width:1120px;min-height:650px;margin:auto;padding:50px 30px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:25px}.hero>div:first-child>p{max-width:580px}.primary{border:0;border-radius:19px;padding:16px 24px;color:#fff;background:linear-gradient(135deg,#8265ef,#6841d5);font-weight:900;font-size:1.05rem;box-shadow:0 8px 0 #4f2db6;cursor:pointer;transition:.18s}.primary:hover{transform:translateY(-2px)}.primary:active{transform:translateY(5px);box-shadow:0 3px 0 #4f2db6}.primary:disabled{opacity:.4;cursor:not-allowed}.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.badges span{background:#fff;border-radius:13px;padding:9px;font-size:.78rem;font-weight:800}.popoy-stage{position:relative;display:grid;place-items:center;min-height:480px;background:radial-gradient(circle,#fff 0 40%,#c9f6ee 41% 61%,transparent 62%)}.popoy-stage img{width:min(400px,90%);filter:drop-shadow(0 18px 16px #49627733)}.guide-label{position:absolute;top:8%;background:var(--yellow);border:3px solid #fff;border-radius:999px;padding:8px 13px;font-weight:900;transform:rotate(-3deg)}.popoy-stage i{position:absolute;background:#fff;border:3px solid #ffe88c;border-radius:20px;padding:11px;font-style:normal;font-size:2.7rem;box-shadow:0 9px 20px #5d4b8922;animation:float 3s infinite}.popoy-stage i:nth-of-type(1){left:0;top:20%}.popoy-stage i:nth-of-type(2){right:2%;top:40%;animation-delay:.7s}.popoy-stage i:nth-of-type(3){left:10%;bottom:8%;animation-delay:1.4s}@keyframes float{50%{transform:translateY(-10px) rotate(3deg)}}.center{max-width:980px;margin:20px auto;padding:35px 25px;text-align:center}.center>p{max-width:680px;margin:0 auto 25px}.popoy-guide{display:inline-flex;align-items:center;gap:10px;background:#dffbf4;border:2px solid var(--mint);border-radius:999px;padding:6px 16px;margin-bottom:22px}.popoy-guide img{width:55px;height:55px;object-fit:contain}.characters{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:0 0 34px}.character{position:relative;border:3px solid #e8e0f7;border-radius:25px;background:#fff;padding:16px 10px;box-shadow:0 7px 0 #e2daf1;cursor:pointer;transition:.18s}.character:hover{transform:translateY(-4px)}.character.selected{border-color:var(--c);box-shadow:0 7px 0 var(--c),0 14px 25px #55466e22}.character>span{display:grid;place-items:center;width:90px;height:90px;margin:auto;border-radius:50%;background:color-mix(in srgb,var(--c) 24%,white);font-size:3.8rem}.character b,.character small{display:block}.character b{font:800 1.25rem 'Baloo 2';margin-top:7px}.character small{color:#817994}.character i{position:absolute;right:5px;top:5px;background:var(--yellow);font-style:normal;border-radius:999px;padding:4px 7px;font-size:.62rem;font-weight:900}.main-character{background:linear-gradient(#effffa,#fff)}.team{display:flex;justify-content:center;align-items:center;gap:16px;margin:25px}.team img,.team i{width:110px;height:110px;object-fit:contain;border-radius:50%;background:#fff;border:5px solid var(--mint);font-style:normal;font-size:4.5rem;display:grid;place-items:center}.team i{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,white)}.path{display:flex;justify-content:center;align-items:center;gap:15px;margin:32px}.path div{position:relative}.path div>span,.path strong{display:grid;place-items:center;width:78px;height:78px;background:#fff;border:4px solid #ffd75b;border-radius:50%;font-size:2.7rem}.path div b{position:absolute;right:-4px;bottom:-4px;background:var(--purple);color:#fff;border-radius:50%;width:25px;height:25px;display:grid;place-items:center}.path>i{color:#b9add7;letter-spacing:4px}.center aside,.game aside{display:flex;align-items:center;gap:12px;text-align:left;max-width:690px;margin:20px auto;background:#fff7d2;border:2px solid #efd861;border-radius:18px;padding:12px 17px}.center aside>span,.game aside>span{font-size:2rem}.center aside p,.game aside p{margin:0;font-size:.95rem}.game{max-width:900px;margin:auto;padding:15px 24px}.game-head{display:flex;align-items:center;gap:16px}.game-head>button{width:44px;height:44px;border:0;border-radius:14px;background:#fff;font-size:1.3rem}.progress{height:16px;flex:1;background:#ded8ec;border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),#79e5a0);border-radius:inherit}.stars{font-size:1.7rem;color:#d6cfe4}.stars .won{color:#ffc83d;text-shadow:0 2px #dc9719}.quest{display:flex;justify-content:center;align-items:center;gap:12px;margin:20px}.quest>span{font-size:3rem}.quest small{color:var(--purple);font-weight:900}.quest h1{font-size:2.4rem;margin:0}.play-card{background:#fff;border:3px solid #e8e0f7;border-radius:30px;padding:24px;box-shadow:0 10px 0 #e2daef;text-align:center}.guide{display:flex;align-items:center;justify-content:center;gap:9px}.guide img{width:75px;height:75px;object-fit:contain}.guide b{background:#edfff9;border-radius:15px;padding:9px}.guide i{font-style:normal;font-size:3rem;margin-left:10px}.prompt{display:flex;justify-content:center;align-items:center;gap:17px;margin:12px}.prompt span{width:115px;height:115px;display:grid;place-items:center;background:#fff6ce;border:4px solid #ffe273;border-radius:24px;font-size:4.8rem;box-shadow:0 6px 0 #eec744}.prompt b{font-size:2rem;color:#9b8bbd}.play-card>p{font-size:.9rem;font-weight:900}.objects{display:flex;justify-content:center;gap:20px}.objects button{width:115px;height:105px;border:3px solid #dcd3f5;border-radius:22px;background:#faf8ff;font-size:4rem;box-shadow:0 6px 0 #d9d0ea;cursor:pointer;transition:.18s}.objects button:hover{transform:translateY(-4px);border-color:var(--purple)}.objects .right{background:#dbfff2;border-color:#4ac9a5;transform:scale(1.08)}.objects .wrong{animation:shake .35s;background:#fff0f4}@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}.controls{display:flex;justify-content:space-between}.controls button{border:2px solid #ddd4f2;background:#fff;border-radius:14px;padding:11px 15px;font-weight:900;cursor:pointer}.controls button:disabled{opacity:.35}.trophy{font-size:6rem;animation:float 2s infinite}.big-stars{color:#ffc83d;text-shadow:0 3px #d99218;font-size:3.5rem}.rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px}.rewards div{background:#fff;border-radius:22px;padding:18px;box-shadow:0 7px 0 #e1d9f0}.rewards span,.rewards b{display:block}.rewards span{font-size:2.8rem}.celebrate>small{display:block;margin-top:20px;color:#817a93}.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:700px;margin:25px auto}.answers button{display:flex;align-items:center;gap:13px;border:3px solid #e1d9f2;background:#fff;border-radius:20px;padding:18px;text-align:left;cursor:pointer}.answers button span{font-size:2.1rem}.answers button.selected{border-color:var(--mint);background:#eafff8;box-shadow:0 6px 0 #54c7ac}.center label{display:block;max-width:700px;margin:20px auto;text-align:left;font-weight:900}.center textarea{display:block;width:100%;min-height:90px;margin-top:8px;border:2px solid #ded6ef;border-radius:15px;padding:13px;resize:vertical}footer{text-align:center;padding:28px;color:#746d88;font-weight:800}.confetti{position:fixed;top:-20px;width:12px;height:20px;z-index:20;animation:fall 1.2s forwards}@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}@media(max-width:760px){.grownup{display:none}.auth-links button{padding:7px 9px;font-size:.78rem}.bgp-return{padding:8px 9px;font-size:.78rem}.hero{grid-template-columns:1fr;text-align:center;padding-top:25px}.hero>div:first-child>p{margin-inline:auto}.badges{justify-content:center}.popoy-stage{min-height:360px}.characters{grid-template-columns:repeat(2,1fr)}.path{gap:6px}.path>i{display:none}.path div>span,.path strong{width:55px;height:55px;font-size:2rem}.play-card{padding:18px 10px}.prompt span{width:88px;height:88px;font-size:3.6rem}.objects{gap:8px}.objects button{width:90px;height:86px;font-size:3.2rem}.rewards{grid-template-columns:1fr}.answers{grid-template-columns:1fr}}@media(max-width:430px){.auth-links{gap:4px}.auth-links button{font-size:.72rem;padding:7px}.bgp-return{font-size:.72rem;padding:7px}.characters{gap:9px}.character>span{width:75px;height:75px;font-size:3.2rem}.team img,.team i{width:82px;height:82px;font-size:3.5rem}.controls button{font-size:.8rem;padding:9px}.hero h1{font-size:3rem}}
.reviewer-page{max-width:860px}.reviewer-form{text-align:left;max-width:760px;margin:28px auto}.reviewer-form fieldset{border:2px solid #e2daf1;border-radius:20px;background:#fff;padding:18px 20px;margin:14px 0}.reviewer-form legend{font-weight:900;padding:0 6px}.survey-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.survey-options label{margin:0;position:relative}.survey-options input{position:absolute;opacity:0}.survey-options span{display:block;background:#faf8ff;border:2px solid #ddd5ef;border-radius:14px;padding:10px 16px;font-weight:900;cursor:pointer}.survey-options input:focus-visible+span{outline:3px solid #7655e8;outline-offset:3px}.survey-options input:checked+span{background:#eafff8;border-color:#55d6be}.survey-options.stars span{font-size:1.1rem}.survey-comment{display:block;font-weight:900}.survey-comment textarea{margin-top:8px}.survey-status{min-height:1.5em;font-weight:900}.reviewer-page>p{max-width:720px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.reviewer-form fieldset{padding:15px}.survey-options{display:grid;grid-template-columns:1fr 1fr}.survey-options label,.survey-options span{width:100%}}


/* 2026-08-28 compact player picker + spacious desktop layout */
@media (min-width: 1101px){
  .center{padding:18px 20px;margin:8px auto}
  .center h1{font-size:clamp(2.35rem,4vw,3.65rem);margin:8px 0}
  .center>p{margin-bottom:12px;line-height:1.35}
  .popoy-guide{padding:3px 12px;margin-bottom:10px}
  .popoy-guide img{width:46px;height:46px}
  .characters{grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:15px}
  .character{padding:7px 6px;border-radius:18px;box-shadow:0 4px 0 #e2daf1}
  .character:hover{transform:translateY(-2px)}
  .character>span{width:104px;height:104px;font-size:4.35rem}
  .character b{font-size:1.05rem;margin-top:3px;line-height:1.05}
  .character small{font-size:.72rem;line-height:1.05;margin-top:2px}
  .characters + .primary{padding:11px 20px}
  footer{padding:12px 18px}
}
@media (min-width: 761px) and (max-width: 1100px){
  .center{padding:18px 18px;margin:8px auto}
  .center h1{font-size:clamp(2.25rem,4.5vw,3.4rem);margin:8px 0}
  .center>p{margin-bottom:12px;line-height:1.35}
  .popoy-guide{margin-bottom:12px}
  .characters{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
  .character{padding:8px 6px;border-radius:20px}
  .character>span{width:100px;height:100px;font-size:4.15rem}
  .character b{font-size:1.05rem;margin-top:3px}
}
@media (max-height: 850px) and (min-width: 761px){
  header{padding-top:10px;padding-bottom:10px}
  .bottom-tools{padding-top:7px;padding-bottom:7px}
  footer{padding-top:8px;padding-bottom:8px}
}

/* 2026-08-28 compact help, larger activity visuals, singing and cleaner activity screens */
.help-button{width:40px;height:40px;border:3px solid #e8e0f7;border-radius:50%;background:#fff;color:#7655e8;font-weight:900;font-size:1.25rem;cursor:pointer;box-shadow:0 4px 0 #e2daf1;flex:0 0 auto}
.help-button:hover{transform:translateY(-2px)}
.quick-instruction{position:fixed;inset:0;background:#342b5799;display:grid;place-items:center;padding:20px;z-index:1300;opacity:0;pointer-events:none;transition:.18s}
.quick-instruction.open{opacity:1;pointer-events:auto}
.quick-instruction-card{position:relative;width:min(560px,94vw);background:#fff;border:4px solid #e8e0f7;border-radius:28px;padding:18px;box-shadow:0 18px 50px #342b5733;text-align:center}
.quick-close{position:absolute;right:10px;top:8px;width:38px;height:38px;border:0;border-radius:50%;background:#f4efff;font-size:1.5rem;font-weight:900;cursor:pointer;z-index:2}
.instruction-reel{height:230px;position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(#eef9ff,#fff9e9);border:2px solid #dffbf4}
.instruction-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;animation:instructionScene 9s infinite;padding:16px}
.instruction-scene:nth-child(2){animation-delay:3s}.instruction-scene:nth-child(3){animation-delay:6s}
.instruction-scene img{width:135px;height:135px;object-fit:contain;animation:instructionPop 3s infinite}
.instruction-scene b{font:800 1.35rem 'Baloo 2';background:#fff;border-radius:999px;padding:7px 14px;box-shadow:0 5px 0 #e2daf1}
@keyframes instructionScene{0%,28%{opacity:1;transform:translateX(0)}33%,100%{opacity:0;transform:translateX(-20px)}}
@keyframes instructionPop{50%{transform:translateY(-7px) rotate(2deg)}}
.quick-replay{margin-top:12px;padding:10px 18px;font-size:.9rem}
.song-card{display:flex;align-items:center;justify-content:center;gap:15px;max-width:650px;margin:4px auto 10px;background:#fff8d9;border:3px solid #ffe273;border-radius:22px;padding:12px 16px;text-align:left}
.song-note{font-size:3rem;animation:singBounce .75s infinite alternate}
.song-card strong{font:800 1.25rem 'Baloo 2'}.song-card p{margin:2px 0 6px;font-size:.82rem;line-height:1.3}.song-words{font-weight:900;color:#7655e8;font-size:1.1rem}
@keyframes singBounce{to{transform:translateY(-6px) rotate(7deg)}}
.sing-button.singing{animation:singButton .7s infinite alternate;background:linear-gradient(135deg,#55d6be,#8265ef)}
@keyframes singButton{to{transform:translateY(-2px) scale(1.02)}}
.compact-context{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;margin:8px auto 0!important;padding:8px 12px!important;max-width:720px!important}
.compact-context small{grid-column:1/-1;color:#746d88;font-size:.78rem;font-weight:800}
.compact-steps{max-width:700px;margin:8px auto 10px;padding-left:25px;text-align:left;font-size:.84rem}
.compact-steps li{margin:3px 0}
.activity-message-column>p{font-size:.82rem;line-height:1.35;margin:5px auto}
.play-card.format-song{padding:18px 20px}
.play-card.format-song .guide img{width:86px;height:86px}
.play-card.format-routine .prompt span,.play-card.format-choice .prompt span,.play-card.format-book .prompt span,.play-card.format-movement .prompt span,.play-card.format-conversation .prompt span,.play-card.format-pretend .prompt span{width:132px;height:132px;font-size:5.2rem}
.play-card .guide img{width:88px;height:88px}
@media(min-width:761px){.play-card{padding:18px 22px}.game{padding-top:8px}.quest{margin:10px}.turn-cue{margin:7px 0}.play-card>p{margin:7px 0}.objects button{width:130px;height:115px;font-size:4.3rem}}
@media(max-width:760px){.help-button{width:38px;height:38px}.instruction-reel{height:205px}.instruction-scene img{width:115px;height:115px}.compact-context{grid-template-columns:auto 1fr}.compact-context small{grid-column:1/-1}.song-card{padding:10px}.song-note{font-size:2.5rem}.play-card .guide img{width:72px;height:72px}}

/* 2026-08-29 song-screen refinement: centered content, big target image, outside action button */
.format-song .song-guide{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 10px}
.format-song .song-guide img{width:82px;height:82px;object-fit:contain}
.format-song .song-guide b{background:#edfff9;border-radius:15px;padding:9px 13px}
.format-song .chosen-player{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:#fff;border:4px solid #8c78ef;font-size:3.3rem;box-shadow:0 5px 0 #e2daf1}
.format-song .song-card{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:650px;margin:0 auto;padding:16px 18px 14px}
.format-song .song-card{width:min(100%,650px)}
.format-song .song-card>strong{font-size:1.35rem}
.format-song .song-card>p{margin:0 0 3px;font-size:.9rem}
.format-song .music-status{min-height:1.3em;margin:-4px 0 0;color:#5e5871;font-size:.78rem;line-height:1.3}
.format-song .song-play.playing{background:#dffbf4;border-color:#2bb99b;box-shadow:0 5px 0 #75cfba}
.format-song .song-target{display:flex;flex-direction:column;align-items:center;gap:3px;margin:3px 0 5px}
.format-song .song-target span{display:grid;place-items:center;width:190px;height:150px;font-size:7.2rem;line-height:1;background:#fff;border:4px solid #ffe273;border-radius:28px;box-shadow:0 7px 0 #eec744}
.format-song .song-target b{font:800 1.25rem 'Baloo 2';color:#7655e8}
.format-song .compact-context{width:100%;max-width:560px!important;margin-top:6px!important}
.song-button-outside{display:block;margin:14px auto 12px;min-width:250px}
.song-button-outside.singing{animation:singButton .7s infinite alternate;background:linear-gradient(135deg,#55d6be,#8265ef)}
@media(min-width:761px){.format-song.play-card{padding:15px 22px}.format-song .song-guide img{width:78px;height:78px}.format-song .chosen-player{width:72px;height:72px}.format-song .song-target span{width:210px;height:160px;font-size:7.7rem}.song-button-outside{margin-top:16px}}
@media(max-width:760px){.format-song .song-guide img{width:68px;height:68px}.format-song .chosen-player{width:62px;height:62px;font-size:2.7rem}.format-song .song-target span{width:170px;height:135px;font-size:6.2rem}.format-song .song-card{padding:12px 10px}.song-button-outside{width:100%;max-width:300px}}

/* Use the wide screen instead of leaving the song controls in a narrow column. */
@media(min-width:901px){
  html[data-screen="game"] .format-song.play-card{
    display:grid!important;
    grid-template-columns:minmax(230px,.75fr) minmax(360px,1.25fr)!important;
    gap:clamp(20px,4vw,56px)!important;
    align-items:center!important;
    justify-content:center!important;
  }
  html[data-screen="game"] .format-song .song-guide{
    flex-direction:column;
    margin:0;
  }
  html[data-screen="game"] .format-song .song-card{
    margin:0;
    gap:9px;
  }
}

/* 2026-08-29 caregiver side controls: same-size square access buttons */
.game{max-width:1120px}
.game-play-layout{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:18px;align-items:stretch}
.game-play-layout .play-card{min-width:0;height:100%;display:flex;flex-direction:column;justify-content:center}
.game-side-actions{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;background:transparent;border:0;padding:0;margin:0;max-width:none;box-shadow:none}
.game-side-actions button{width:126px;height:126px;border:2px solid #ddd4f2;background:#fff;border-radius:18px;padding:12px 9px;font-weight:900;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;line-height:1.1;box-shadow:0 5px 0 #e2daf1;font-size:1.5rem}
.game-side-actions button span{font-size:.9rem;line-height:1.15}
.game-side-actions button:hover{transform:translateY(-2px);border-color:#7655e8}
.game-side-actions button:active{transform:translateY(3px);box-shadow:0 2px 0 #e2daf1}
.game-side-actions button:disabled{opacity:.35;cursor:not-allowed}
.game-side-actions .complete-side{border:0;color:#fff;background:linear-gradient(135deg,#8265ef,#6841d5);box-shadow:0 6px 0 #4f2db6}
.game-side-actions .complete-side:hover{border:0}
.song-button-inline{display:block;width:min(250px,90%);margin:7px auto 9px;padding:10px 15px;font-size:.9rem;border-radius:15px;box-shadow:0 5px 0 #4f2db6}
.song-button-inline.singing{animation:singButton .7s infinite alternate;background:linear-gradient(135deg,#55d6be,#8265ef)}
.song-button-outside{display:none!important}
@media(max-width:760px){
  .game{max-width:100%;padding-left:12px;padding-right:12px}
  .game-play-layout{grid-template-columns:1fr;gap:14px}
  .game-side-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .game-side-actions button{width:104px;height:104px;border-radius:16px}
  .game-side-actions button span{font-size:.78rem}
}

/* 2026-08-29 activity load safety */
.activity-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:260px;text-align:center}.activity-fallback p{max-width:520px}.activity-fallback .primary{min-width:220px}

/* Target quest: modeling, participation, real-world use, and spaced review. */
.quest-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:720px;margin:8px auto 18px}.quest-loop span{display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:2px solid #e6def7;border-radius:16px;padding:9px;font-weight:900}.quest-loop i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#7655e8;color:#fff;font-style:normal;font-size:.75rem}.real-world-mission{margin:15px 0 2px;padding:13px 16px;text-align:left;background:#fff8d7;border:2px solid #f0cf53;border-radius:17px}.real-world-mission small{font-weight:900;color:#715c05}.real-world-mission p{margin:5px 0 0;line-height:1.4}.quest-complete{display:grid;place-items:center;gap:6px;padding:14px;background:#edfff9;border:2px solid #55d6be;border-radius:18px;text-align:center}.quest-complete>span{font-size:2.4rem}.quest-complete p{margin:0;font-size:.85rem}.quest-complete button{width:100%;margin-top:4px}.next-quest{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin:18px 0;padding:18px;background:linear-gradient(135deg,#edfff9,#f4efff);border:3px solid #7b61ff;border-radius:22px;text-align:left}.next-quest>span{font-size:3.2rem}.next-quest small{font-weight:900;color:#6753bd}.next-quest h2,.next-quest p{margin:2px 0}.next-quest button{white-space:nowrap}
@media(max-width:760px){.quest-loop{grid-template-columns:repeat(2,1fr)}.next-quest{grid-template-columns:auto 1fr}.next-quest button{grid-column:1/-1;width:100%}}
.translation-pair{display:block;margin:-7px 0 9px;color:#6d6680;font-size:.78rem;font-style:normal;font-weight:800}.word-card .translation-pair+div{margin-top:0}
.language-practice-summary{margin-top:18px;padding:16px;background:#f4efff;border:2px solid #d8cdf5;border-radius:18px}.language-practice-summary h2{margin-top:0}.language-practice-summary p{display:flex;gap:12px;flex-wrap:wrap}.language-practice-summary span{padding:9px 13px;background:#fff;border-radius:12px;font-weight:800}.language-practice-summary b{margin-left:6px;color:#6841d5}

/* Image-fit regression guard: keep the Watch & Copy mascot fully inside its stage. */
.word-practice-page .model-stage img{position:absolute;left:11%;top:6%;width:78%;height:88%;max-width:none;max-height:none;object-fit:contain}

/* Short-screen game compaction: preserve content while avoiding stacked scroll. */
@media(max-width:700px){
  html[data-screen="game"] .play-card{min-height:0!important}
  html[data-screen="game"] .play-card .guide img{width:64px!important;height:64px!important}
  html[data-screen="game"] .play-card .guide i{font-size:2.7rem!important}
  html[data-screen="game"] .play-card .prompt{margin:7px!important}
  html[data-screen="game"] .play-card .prompt span{width:88px!important;height:88px!important;font-size:3.5rem!important}
  html[data-screen="game"] .compact-context{margin-top:5px!important;padding:6px 8px!important;font-size:.72rem}
  html[data-screen="game"] .compact-context small{font-size:.68rem}
  html[data-screen="game"] .compact-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:6px auto!important;padding:0;list-style-position:inside;font-size:.66rem;line-height:1.25}
  html[data-screen="game"] .compact-steps li{margin:0;padding:5px 3px;border-radius:9px;background:#f8f6ff}
  html[data-screen="game"] .complete-activity{margin:8px auto 5px!important;min-height:48px!important}
  html[data-screen="game"] .game-side-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:7px!important}
  html[data-screen="game"] .game-side-actions button{width:100%!important;height:48px!important;min-height:48px!important}
  html[data-screen="game"] .game-side-actions [data-hear],html[data-screen="game"] .game-side-actions .complete-side{grid-column:auto!important}
}
@media(min-width:701px) and (max-height:850px){
  html[data-screen="game"] .play-card .guide img{width:72px!important;height:72px!important}
  html[data-screen="game"] .play-card .guide i{font-size:3.1rem!important}
  html[data-screen="game"] .play-card .prompt span{width:112px!important;height:112px!important;font-size:4.4rem!important}
  html[data-screen="game"] .compact-context{margin-top:5px!important;padding:7px 10px!important}
  html[data-screen="game"] .compact-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:7px auto!important;padding:0;list-style-position:inside;font-size:.72rem;line-height:1.25}
  html[data-screen="game"] .compact-steps li{margin:0;padding:6px 4px;border-radius:10px;background:#f8f6ff}
  html[data-screen="game"] .complete-activity{margin:9px auto 5px!important}
}
@media(min-width:701px) and (max-height:800px){
  html[data-screen="game"] .play-card .guide img{width:60px!important;height:60px!important}
  html[data-screen="game"] .play-card .guide i{font-size:2.7rem!important}
  html[data-screen="game"] .play-card .prompt{margin:6px!important}
  html[data-screen="game"] .play-card .prompt span{width:98px!important;height:98px!important;font-size:3.9rem!important}
  html[data-screen="game"] .compact-context{padding:5px 8px!important}
  html[data-screen="game"] .compact-steps{margin:5px auto!important}
}
html[data-screen="game"] .game-side-actions{min-width:0;background:transparent!important;border:0!important;box-shadow:none!important}
html[data-screen="game"] .game-side-actions button{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden;text-align:center}
html[data-screen="game"] .game-side-actions button span{display:block;max-width:100%;overflow-wrap:anywhere}

/* Popoy follow-along study prototype. */
.follow-open{min-height:48px;margin:7px auto 3px;padding:8px 14px;border:2px solid #7655e8;border-radius:15px;background:#fff;color:#563db4;font-weight:900;cursor:pointer}.follow-open-game{align-self:center;order:-1;margin:0 auto 6px}.follow-modal{position:fixed;inset:0;z-index:1200;display:none;place-items:center;padding:16px;background:#31265cc7;overflow:auto}.follow-modal.open{display:grid}.follow-card{position:relative;width:min(680px,100%);padding:22px;border:4px solid #fff;border-radius:30px;background:#fdfbff;box-shadow:0 24px 70px #15102e80;text-align:center}.follow-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:#eee9fb;font-size:1.5rem;font-weight:900}.study-badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff0b8;color:#674f00;font-size:.68rem;font-weight:1000;letter-spacing:.06em}.follow-card h2{margin:8px 0 12px}.follow-screen{position:relative;height:min(48vh,370px);min-height:260px;display:grid;place-items:center;overflow:hidden;border:4px solid #d8cff5;border-radius:24px;background:radial-gradient(circle,#fff 0 30%,#dcf8f1 31% 65%,#bfeadf 66%)}.follow-model{position:absolute;left:8%;top:5%;height:90%;aspect-ratio:720/971}.follow-model img{display:block;width:100%;height:100%;object-fit:contain}.follow-count{position:absolute;left:15px;top:15px;z-index:4;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#7655e8;color:#fff;font-weight:1000}.follow-mouth{position:absolute;left:44.8%;top:46.8%;z-index:5;width:19%;height:9.5%;transform:translate(-50%,-50%);overflow:hidden;border-radius:42% 42% 52% 52%;background:#441326;box-shadow:inset 0 -1px 2px #210712}.follow-mouth i{position:absolute;left:20%;right:20%;bottom:-6%;height:47%;border-radius:50% 50% 42% 42%;background:linear-gradient(#d84b65,#ff6576)}.follow-screen.speaking .follow-mouth{animation:follow-mouth-talk .18s ease-in-out infinite alternate}.follow-screen.speaking .follow-model{animation:follow-model-bob .42s ease-in-out infinite alternate}.follow-caption{position:absolute;right:5%;bottom:10%;z-index:6;width:50%;padding:14px;border-radius:18px;background:#fffc;border:2px solid #fff;text-align:left;backdrop-filter:blur(5px)}.follow-caption small,.follow-caption b{display:block}.follow-caption small{color:#6541d4;font-weight:1000}.follow-caption b{font:900 clamp(2rem,6vw,4rem)/1 'Baloo 2';overflow-wrap:anywhere}.follow-caption p{margin:5px 0 0;font-size:.85rem;line-height:1.3}.follow-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}.follow-timeline span{padding:8px;border-radius:11px;background:#eeeaf8;font-size:.78rem;font-weight:900}.follow-timeline span.active{background:#7655e8;color:#fff}.follow-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.follow-actions button{min-height:50px;padding:8px 16px;border:2px solid #d9d0f1;border-radius:14px;background:#fff;color:#342b57;font-weight:900}.follow-actions .primary{border-color:#7655e8;background:linear-gradient(135deg,#8265ef,#6841d5);color:#fff}.follow-note{margin:12px 0 0;font-size:.82rem!important}@keyframes follow-mouth-talk{from{height:3%;border-radius:50%}to{height:10.5%;border-radius:42% 42% 52% 52%}}@keyframes follow-model-bob{to{transform:translateY(-6px) scale(1.015)}}
@media(max-width:600px){.follow-card{padding:14px}.follow-screen{height:340px}.follow-model{left:50%;top:3%;height:58%;transform:translateX(-50%)}.follow-screen.speaking .follow-model{animation:follow-model-bob-mobile .42s ease-in-out infinite alternate}.follow-caption{left:5%;right:5%;bottom:5%;width:90%;text-align:center}.follow-caption b{font-size:2.4rem}.follow-card h2{font-size:1.15rem}.follow-actions button{flex:1 1 140px}}@keyframes follow-model-bob-mobile{to{transform:translateX(-50%) translateY(-4px) scale(1.015)}}
.follow-open-game{display:block;align-self:auto;order:initial;margin:10px auto 0}

/* Privacy-minimized month/day birthday reminder and cake animation. */
.follow-modal{z-index:1400}
.birthday-settings{display:grid;grid-template-columns:auto 1fr;gap:13px;margin-top:20px;padding:16px;border:2px solid #f0cf65;border-radius:18px;background:#fff9dc}.birthday-settings>span{font-size:2.5rem}.birthday-settings h2,.birthday-settings p{margin:0 0 6px}.birthday-fields{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.birthday-fields label{display:grid;gap:4px;margin:0;min-width:130px}.birthday-fields select,.birthday-fields input{min-height:44px;padding:7px 10px;border:2px solid #ddd5f2;border-radius:11px;background:#fff;font:inherit}.birthday-fields button{min-height:44px;padding:7px 13px;border:0;border-radius:11px;background:#7655e8;color:#fff;font-weight:900}.birthday-fields .birthday-remove{background:#fff0f2;color:#a1263e}.birthday-status{min-height:20px;margin:5px 0 0!important;font-size:.82rem}.birthday-today{grid-column:1/-1;justify-self:center;padding:10px 17px;border:2px solid #efc84b;border-radius:999px;background:#fff5bd;font-weight:900}.birthday-celebration{position:fixed;inset:0;z-index:1500;display:grid;grid-template-columns:minmax(180px,330px) minmax(320px,620px);place-content:center;align-items:center;gap:clamp(12px,4vw,42px);padding:20px;overflow:auto;background:radial-gradient(circle,#fff9d5,#dff8f2 52%,#d8ceff)}.birthday-celebration>img{width:100%;max-height:70vh;object-fit:contain;filter:drop-shadow(0 18px 16px #493d7538);animation:home-float 1.4s ease-in-out infinite alternate}.birthday-sky{position:absolute;top:5%;left:50%;transform:translateX(-50%);font-size:clamp(1.3rem,4vw,2.6rem)}.birthday-party{padding:clamp(18px,4vw,38px);border:5px solid #fff;border-radius:34px;background:#fffdf8;box-shadow:0 12px 0 #65cdb8;text-align:center}.birthday-party h1{margin:8px 0;font-size:clamp(2.4rem,6vw,4.8rem);color:#5b3cbc}.birthday-party p{margin:5px auto;max-width:500px}.birthday-pill{display:inline-block;padding:6px 11px;border-radius:999px;background:#fff0a6;color:#6d5100;font-size:.7rem;font-weight:1000}.cake{position:relative;width:270px;height:245px;margin:8px auto 16px}.cake-layer,.cake-top,.cake-plate,.candles,.cake-smoke{position:absolute;left:50%;transform:translateX(-50%)}.cake-plate{bottom:4px;width:270px;height:24px;border-radius:50%;background:#b7a7e9}.cake-layer{border:4px solid #c65a74;background:repeating-linear-gradient(90deg,#ffb6c8 0 34px,#ffd1dc 34px 68px);box-shadow:inset 0 -9px #e989a1}.cake-one{bottom:20px;width:235px;height:80px;border-radius:14px 14px 25px 25px}.cake-two{bottom:96px;width:190px;height:62px;border-radius:14px}.cake-top{bottom:151px;width:190px;height:28px;border:4px solid #c65a74;border-radius:50%;background:#fff0b5}.candles{z-index:4;bottom:175px;display:flex;gap:34px}.candles i{position:relative;width:11px;height:46px;border-radius:4px;background:repeating-linear-gradient(45deg,#7655e8 0 6px,#fff 6px 12px)}.candles i:before{content:"";position:absolute;left:50%;bottom:43px;width:18px;height:28px;transform:translateX(-50%);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 65%,#fff7a4 0 20%,#ffb522 21% 55%,#ff6b35 56%);filter:drop-shadow(0 0 8px #ffb522);animation:candle-flicker .35s infinite alternate}.cake-smoke{display:none;z-index:5;bottom:197px;color:#aaa;font-size:2rem;animation:smoke-rise 1.4s ease-out forwards}.candles-out .candles i:before{animation:flame-out .45s forwards}.candles-out .cake-smoke{display:block}.birthday-continue{min-height:48px;margin-top:8px;padding:8px 15px;border:0;border-radius:14px;background:#19a98f;color:#fff;font-weight:900}.birthday-continue[hidden]{display:none}@keyframes candle-flicker{to{transform:translateX(-50%) scale(.86) rotate(4deg)}}@keyframes flame-out{to{opacity:0;transform:translateX(-50%) scale(.1)}}@keyframes smoke-rise{to{opacity:0;transform:translate(-50%,-45px)}}
@media(max-width:700px){.birthday-settings{grid-template-columns:1fr}.birthday-celebration{display:block;padding:14px}.birthday-celebration>img{display:block;width:120px;height:125px;margin:12px auto 0}.birthday-party{padding:16px}.birthday-party h1{font-size:2.5rem}.cake{transform:scale(.78);margin:-15px auto -18px}.birthday-fields>*{flex:1 1 125px}.birthday-fields button{flex-basis:100%}}
.quick-check{max-width:850px;margin-inline:auto}.quick-check h1{margin-bottom:6px}.quick-question{margin:10px 0 5px}.quick-answers{margin:0 auto 4px;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.quick-answers button{min-height:66px;padding:7px}.quick-answers button span{font-size:1.45rem}.quick-summary{margin:12px 0}.quick-check>.primary{min-width:190px}@media(max-width:600px){body:has(.quick-check) footer,body:has(.quick-check) .bottom-tools{display:none!important}body:has(.quick-check) main{padding-block:4px}.quick-check{padding-bottom:4px}.quick-check>.pill{font-size:.65rem}.quick-check h1{font-size:1.85rem;margin:2px 0}.quick-answers{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.quick-answers button{min-height:49px;padding:3px;font-size:.7rem}.quick-answers button span{font-size:1.15rem}.quick-question{margin:5px 0 3px;font-size:.86rem}.quick-summary{margin:7px 0;font-size:.82rem}.quick-check>.primary{min-height:44px}}
.tester-login{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,#e4fbf6,#e7e0ff)}.tester-login form{width:min(430px,100%);padding:28px;border:4px solid #fff;border-radius:28px;background:#fffdf8;box-shadow:0 20px 60px #40366b35;text-align:center}.tester-login img{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto 8px}.tester-login h1{font-size:2.4rem;margin:12px 0 5px}.tester-login p{margin:0 0 12px}.tester-login label{margin:10px 0;text-align:left}.tester-login input{width:100%;min-height:50px;margin-top:5px;padding:9px 12px;border:2px solid #dcd3f5;border-radius:13px;font:inherit}.tester-login .primary{width:100%;margin:10px 0}.tester-login [data-login-status]{min-height:22px;margin:5px 0;color:#a1263e;font-weight:900}.tester-account{display:block!important;text-align:center!important}.tester-account button{min-height:42px;padding:7px 14px;border:0;border-radius:11px;background:#fff0f2;color:#a1263e;font-weight:900}.install-popoy{position:fixed;z-index:2200;right:16px;bottom:16px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;width:min(520px,calc(100% - 32px));padding:12px;border:2px solid #70d7c3;border-radius:18px;background:#fff;box-shadow:0 14px 38px #342b5730}.install-popoy img{width:48px;height:48px;object-fit:contain}.install-popoy b,.install-popoy p{display:block;margin:0}.install-popoy p{font-size:.8rem;line-height:1.35}.install-popoy button{min-height:40px;padding:7px 12px;border:0;border-radius:11px;background:#7655e8;color:#fff;font-weight:900}.install-popoy .install-close{background:transparent;color:#6b647c;font-size:1.4rem;padding:4px}.tester-login~.install-popoy{display:none}footer{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px}footer em{font-style:normal;font-weight:1000;color:#5e45b5}@media(max-width:520px){.install-popoy{grid-template-columns:auto 1fr auto;right:8px;bottom:8px;width:calc(100% - 16px)}.install-popoy>button:not(.install-close){grid-column:2}.install-popoy .install-close{position:absolute;right:4px;top:2px}.tester-login form{padding:20px}.tester-login h1{font-size:2rem}}
.anonymous-review-note{display:block!important;margin-top:18px!important;padding:14px 16px!important;border:2px solid #b9e1d7!important;border-radius:16px!important;background:#effbf8!important;text-align:left!important}.anonymous-review-note p{margin:5px 0 0!important;font-size:.85rem!important;line-height:1.45}

/* Professional evaluation + inclusive communication setup */
.evaluation-panel{margin-top:24px;padding:24px;border:2px solid #cce3df;border-radius:20px;background:#fff}
.evaluation-head h2{margin:8px 0}.evaluation-head p,.eval-help{color:#56707d}
.evaluation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 20px}
.eval-option{display:flex;align-items:center;gap:8px;min-height:58px;padding:10px 12px;border:2px solid #cce3df;border-radius:14px;background:#fff;cursor:pointer}.eval-option:has(input:checked){border-color:#067c7b;background:#dff8ee}.eval-option input{width:20px;height:20px}.eval-option span{font-size:1.35rem}.eval-option b{font-size:.9rem}.eval-option.compact{min-height:52px}.evaluation-panel h3{margin:18px 0 8px}.eval-field{display:grid;gap:7px;margin:14px 0}.eval-field textarea{width:100%;border:2px solid #cce3df;border-radius:12px;padding:10px;resize:vertical;background:#fff}.baseline-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.baseline-row label{display:grid;gap:6px;font-weight:800}.baseline-row input{width:100%;border:2px solid #cce3df;border-radius:10px;padding:10px;background:#fff}.evaluation-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.evaluation-status{font-weight:800;color:#067c7b}.evaluation-note{margin-top:18px;padding:14px;border-radius:14px;background:#fffaf0}.evaluation-note p{margin:4px 0 0;color:#56707d}.evaluation-panel hr{border-top:1px solid #cce3df;margin:22px 0}
@media(max-width:640px){.baseline-row{grid-template-columns:1fr}.evaluation-panel{padding:16px}.evaluation-grid{grid-template-columns:1fr 1fr}.eval-option b{font-size:.84rem}}
.tester-login form{position:relative}.tester-login .login-close{position:absolute;top:10px;right:12px;width:42px;height:42px;border:0;border-radius:50%;background:#f2edf9;color:#51486b;font-size:1.7rem;font-weight:900;line-height:1;cursor:pointer}.tester-login .login-close:hover{background:#e8e0f5}.tester-login .login-close:focus-visible{outline:3px solid #7655e8;outline-offset:2px}

/* Quick Check #4: make response choices visibly selectable and touch-safe. */
.quick-check .session-response-panel .quick-answers button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;}
.quick-check .session-response-panel .quick-answers button.selected,.quick-check .session-response-panel .quick-answers button[data-selected="true"]{border-color:var(--mint)!important;background:#eafff8!important;box-shadow:0 6px 0 #54c7ac!important;transform:translateY(-1px);}
.quick-check .session-response-panel .quick-answers button:focus-visible{outline:4px solid #ffbf19;outline-offset:3px;}

/* Quick Check #4 final selection visibility safeguard. */
.quick-check .session-response-panel .quick-answers button.selected, .quick-check .session-response-panel .quick-answers button[data-selected="true"] { background:#dff8ee !important; border:3px solid #067c7b !important; box-shadow:0 0 0 4px #067c7b55, 0 6px 0 #067c7b !important; transform:translateY(-1px) !important; }
.quick-check .session-response-panel .quick-answers button.selected b, .quick-check .session-response-panel .quick-answers button[data-selected="true"] b { color:#083c5a !important; }

/* 2026-08-31 player character art: Asena and Alexandra */
.character>span{overflow:hidden}
.character-art{width:100%;height:100%;object-fit:contain;display:block;border-radius:50%}
.guide i .character-art,.chosen-player .character-art,.slider-buddy .character-art,.jump-buddy .character-art,.bonus-player .character-art{width:100%;height:100%;object-fit:contain;display:block}
.guide i:has(.character-art){width:76px;height:76px;display:grid;place-items:center}
.slider-buddy:has(.character-art),.jump-buddy:has(.character-art){display:grid;place-items:center}
@media(max-width:760px){.guide i:has(.character-art){width:64px;height:64px}.chosen-player:has(.character-art){display:grid;place-items:center}.character>span{width:90px;height:90px}}

.auth-links.signed-in{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.auth-status{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:12px;background:#e8f8f4;color:#126d5a;font-weight:900}.auth-status.god{background:#fff4d6;color:#7a5200}.auth-links.signed-in button{min-height:40px;padding:0 12px;border:1px solid #d7d0f3;border-radius:12px;background:#fff;color:#4d3c93;font-weight:900;cursor:pointer}@media(max-width:720px){.auth-links.signed-in{justify-content:center}.auth-status{font-size:.85rem}}

/* Auth header interaction fix */
.auth-links{position:relative;z-index:50}.auth-links button,.auth-links a{pointer-events:auto;touch-action:manipulation}

.auth-links>a:not(.bgp-return){display:inline-flex;align-items:center;justify-content:center;border:2px solid #e2dafb;background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;font-weight:900;text-decoration:none;white-space:nowrap}.auth-links>a:not(.bgp-return):hover{border-color:var(--purple);transform:translateY(-1px)}.tester-login .auth-page-link{display:block;text-align:center;margin:4px 0 10px;color:#6541d4;font-weight:900;text-decoration:none}.tester-login .auth-page-link:hover{text-decoration:underline}
/* Popoy v1 PWA install accessibility/responsive hardening */
.install-popoy{max-width:calc(100vw - 24px);box-sizing:border-box}
.install-popoy img{width:56px;height:56px}
.install-popoy button{min-height:44px;min-width:44px}
.install-popoy button:focus-visible{outline:4px solid #ffdd57;outline-offset:2px}
@media(max-width:520px){
  .install-popoy{right:8px;left:8px;bottom:8px;width:auto;grid-template-columns:56px 1fr auto;padding:12px}
  .install-popoy>button:not(.install-close){grid-column:2 / 4;width:100%;}
  .install-popoy .install-close{position:absolute;right:4px;top:2px}
}
@media(max-width:360px){
  .install-popoy{grid-template-columns:48px 1fr auto;gap:7px;padding:10px}
  .install-popoy img{width:48px;height:48px}
  .install-popoy b{font-size:.95rem}
  .install-popoy p{font-size:.76rem}
}


/* iPhone/iPad installation instructions: intentionally uses the existing Popoy install card. */
.install-popoy .install-steps{margin:8px 0 4px;padding-left:20px;font-size:.84rem;line-height:1.42}
.install-popoy .install-steps li{margin:4px 0}
.install-popoy .install-note{font-size:.75rem;line-height:1.35;margin-top:7px}
.install-popoy [data-install-content]{min-width:0}
@media(max-width:520px){
  .install-popoy .install-steps{font-size:.82rem}
  .install-popoy .install-note{font-size:.73rem}
}