/* v4: every zone is one full-screen game scene, no page scroll */
.panel.v3{height:100dvh;overflow:hidden}
.panel.v3,body.v3book{background:linear-gradient(#1a084055,#1a084022 30%,#1a084066),var(--bgl) center/cover no-repeat,#1a0840!important}
@media (orientation:portrait){.panel.v3,body.v3book{background:linear-gradient(#1a084055,#1a084022 30%,#1a084066),var(--bgp) center/cover no-repeat,#1a0840!important}}
.panel.v3 .ptop{flex-wrap:nowrap;padding-top:max(6px,env(safe-area-inset-top))!important;padding-bottom:6px!important;background:linear-gradient(#1a0840ee,#1a0840aa)!important}
.panel.v3 .ptop .ntabs{flex:1 1 auto;min-width:0;width:auto;order:2}
.panel.v3 .ptop .back{order:1;flex:0 0 auto}
.panel.v3 .ptitle{display:none}
.panel.v3 .pbody{overflow:hidden!important;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)!important;min-height:0}
.panel.v3 .sec{flex:1 1 auto;min-height:0;width:100%;max-width:1040px;margin:0 auto;padding:8px 12px 10px!important;display:flex;flex-direction:column;gap:6px;box-sizing:border-box}
.panel.v3 .sec>*{flex:0 0 auto;margin-top:0!important;margin-bottom:0!important}
.panel.v3 .sec>h2{font-size:clamp(24px,4.4vh,44px)!important}
.panel.v3 .sub{font-size:clamp(12px,1.9vh,16px)!important}
.panel.v3 .side{height:min(38dvh,380px)}
/* learn */
#p-learn .hero,#p-learn .sec>h2,#p-learn .sub{display:none!important}
#p-learn #ltabs{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
#p-learn .ltiles{display:flex;justify-content:center;gap:8px;padding:6px!important;background:#22095acc!important;border-radius:22px!important;width:max-content;max-width:100%;margin:0 auto!important}
#p-learn .ltiles button.gt{height:clamp(48px,8.5vh,78px);width:clamp(70px,11vw,120px);flex-direction:row;justify-content:center;gap:4px;font-size:clamp(13px,2vh,19px)!important;padding:4px 8px!important;border-radius:18px!important}
#p-learn .ltiles button.gt img{height:78%;max-width:44%}
#p-learn .ltiles button.gt.on{outline:4px solid #fff;outline-offset:2px;transform:scale(1.04)}
#p-learn .stagebox{flex:1 1 auto!important;min-height:120px;height:auto!important}
.caprow{display:flex;align-items:center;justify-content:center;gap:8px}
.caprow .pillcap{margin:0!important;font-size:clamp(15px,2.4vh,20px);padding:5px 18px}
.caprow .capspk{margin:0;width:40px;height:40px;flex:0 0 auto}
#p-learn .tiles{gap:6px!important;padding:8px!important;grid-template-columns:repeat(13,1fr)!important}
#p-learn #tiles .tile{min-height:0!important;height:clamp(32px,5.6vh,54px);font-size:clamp(15px,2.6vh,24px)!important;padding:0!important;min-width:0!important}
#p-learn.only1 .tiles{grid-template-columns:repeat(13,1fr)!important}
@media (max-width:700px){#p-learn .tiles{grid-template-columns:repeat(7,1fr)!important}}
/* music */
#p-music #mnote,#p-music #keyhint{font-size:13px!important;margin:0!important;text-align:center}
#p-music .mbox{flex:1 1 auto!important;min-height:140px;height:auto!important}
#p-music .rec{display:flex;flex-direction:column;gap:4px;padding:6px 10px;border-radius:22px;border:3px solid #d78bff;background:#22095acc;box-shadow:0 0 18px #b04dffaa}
#p-music .rec>h3{margin:0;font-size:clamp(14px,2.2vh,20px);color:#fff}
#p-music .rec>.sub{display:none}
#p-music .eq{height:22px;margin:0 auto}
#p-music #lanes{padding:4px!important;display:flex;flex-direction:column;gap:4px}
#p-music .lane{padding:2px 8px!important;min-height:0!important;margin:0!important}
#p-music .lane button{width:clamp(32px,4.6vh,46px)!important;height:clamp(32px,4.6vh,46px)!important;min-height:0!important;padding:0!important}
#p-music .rbar{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:0!important}
#p-music .rbar button{padding:6px 14px!important;font-size:clamp(13px,2vh,17px)!important}
#p-music .spk{bottom:4%}
/* videos: one theater screen with a sideways carousel */
#p-videos .sec{justify-content:center}
#p-videos #feat,#p-videos #latest{display:flex!important;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:10px!important;scrollbar-width:thin}
#p-videos #feat>*,#p-videos #latest>*{flex:0 0 auto;scroll-snap-align:center;width:clamp(220px,34vw,400px)}
#p-videos #latest>*{width:clamp(150px,20vw,230px)}
#p-videos .sec>h3{margin:0!important;color:#fff;font-size:16px;text-align:center}
#p-videos .mut{font-size:11px!important;text-align:center;margin:0!important}
/* crossword */
#p-crossword .cwwrap{flex:1 1 auto;min-height:0;padding:8px!important;align-items:stretch;overflow:hidden}
#p-crossword .cwwrap>div:first-child{display:flex;flex-direction:column;gap:4px;min-height:0}
#p-crossword .cw3d{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
#p-crossword #cw{max-height:100%;aspect-ratio:var(--cols)/var(--rows,var(--cols));width:auto;height:100%;max-width:100%;transform:none}
#p-crossword #clue{margin:0!important;font-size:14px;text-align:center}
#p-crossword #kb{gap:4px}#p-crossword #kb button{min-height:0!important;height:clamp(28px,4.4vh,42px);padding:0!important}
#p-crossword .cwb{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}#p-crossword .cwb button{padding:5px 10px!important;font-size:13px!important}
#p-crossword .clues{overflow:auto;max-height:100%;font-size:13px}
@media (max-width:820px){#p-crossword .clues{display:none}#p-crossword .sub{display:none}}
/* phone portrait */
@media (max-width:700px){
 .panel.v3 .ptop{flex-wrap:wrap}.panel.v3 .ptop .ntabs{order:0;width:100%;flex-basis:100%}.panel.v3 .back{font-size:12px!important;padding:4px 10px!important}
 .panel.v3 .ntabs{flex-wrap:nowrap}.panel.v3 .nrow{order:0;width:auto;flex-basis:auto;justify-content:flex-start}.panel.v3 .nlogo img{height:30px}.panel.v3 .nend{display:none}
 .panel.v3 .ntab{padding:4px 9px;font-size:12px}
 .panel.v3 .sec>h2{font-size:24px!important}#p-music .sub{display:none}
 .panel.v3 .side{height:16dvh;bottom:0}
 #p-learn .ltiles button.gt{width:auto;flex:1 1 0;height:46px;font-size:12px!important}#p-learn .ltiles{width:100%;box-sizing:border-box}
 .deco b{font-size:28px!important}
}
/* phone landscape: short screens */
@media (max-height:500px){
 .panel.v3 .nlogo img{height:28px}.panel.v3 .ntab{padding:3px 9px;font-size:12px}.panel.v3 .nend .nstar{display:none}.panel.v3 .nsnd{width:30px;height:30px;font-size:14px}
 .panel.v3 .sec>h2,.panel.v3 .sub,#p-music .rec>h3,#p-music .eq,#p-videos .sec>h3,#p-videos .mut{display:none!important}
 .panel.v3 .side{height:34dvh}
 #p-learn .sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:6px}
 #p-learn .ltiles{grid-column:1/3}#p-learn .stagebox{grid-column:1;grid-row:2/4}#p-learn .caprow{grid-column:2;grid-row:2}#p-learn .tiles{grid-column:2;grid-row:3;grid-template-columns:repeat(7,1fr)!important}
 #p-learn .ltiles button.gt{height:40px}
 #p-music .sec{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px}
 #p-music #itabs{grid-column:1/3}#p-music .mbox{grid-column:1;grid-row:2}#p-music .rec{grid-column:2;grid-row:2;overflow:hidden}#p-music #mnote,#p-music #keyhint{display:none}
 #p-music .rbar button{padding:4px 8px!important;font-size:12px!important}
 #p-crossword .cwwrap{grid-template-columns:1fr!important}#p-crossword .cwwrap>div:first-child{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:4px}
 #p-crossword .cw3d{grid-row:1/4}
}
body.v3book{min-height:100dvh}
/* music phone portrait */
@media (max-width:700px){#p-music .sec>.sub,#p-music .rec>h3,#p-music .eq,#p-music #mnote{display:none!important}
 #p-music .sec>h2{font-size:22px!important}#p-music #itabs{flex-wrap:nowrap;gap:5px}#p-music #itabs button{padding:6px 10px!important;font-size:13px!important}
 #p-music .rbar button{padding:5px 9px!important;font-size:12px!important}#p-music #rlen{display:none}
 #p-videos .sub{display:none}}
/* videos landscape phone: one sideways row */
@media (max-height:500px){#p-videos .sec{flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden}#p-videos #feat,#p-videos #latest{overflow:visible;padding:4px!important;flex:0 0 auto}
 #p-videos #feat>*{width:260px}#p-videos #latest>*{width:180px}}
/* coloring book page fits the screen */
body.v3book{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.v3book .top{flex:0 0 auto;max-width:none;width:100%;box-sizing:border-box;padding:6px 12px!important;flex-wrap:nowrap}
body.v3book .top h1{display:none}body.v3book .top .ntabs{order:2;flex:1 1 auto;min-width:0}body.v3book .top .back{order:1;min-height:0;padding:6px 14px;font-size:14px}
body.v3book .hint{display:none}
body.v3book .wrap{flex:1 1 auto;min-height:0;width:100%;max-width:1400px;padding:6px 12px;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto auto 1fr;column-gap:16px;align-content:center;position:relative;z-index:2}
body.v3book .desk{grid-column:1;grid-row:1/5;padding:6px 0;align-self:center}
body.v3book .book{width:min(100%,calc((100dvh - 110px) * 4 / 3))}
body.v3book .pname,body.v3book .mnav,body.v3book .pal,body.v3book .tools{grid-column:2;margin:6px 0}
body.v3book .pname{background:#2a0d63;border:3px solid #ff7be0;border-radius:999px;padding:6px 10px;box-shadow:0 0 12px #ff4fb8}
body.v3book .pal{padding:10px;border-radius:22px;border:3px solid #d78bff;background:#22095acc;box-shadow:0 0 18px #b04dffaa}
body.v3book .tools button{min-height:46px;padding:6px 14px;font-size:15px;border-radius:999px;box-shadow:0 0 8px #b04dff,0 4px 0 #0007}
@media (max-width:700px),(max-height:500px) and (max-width:700px){
 body.v3book .top{flex-wrap:wrap}body.v3book .top .ntabs{order:0;flex-basis:100%}body.v3book .nend .nstar{display:none}body.v3book .nlogo img{height:30px}body.v3book .ntab{padding:4px 9px;font-size:12px}
 body.v3book .wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:4px 8px}
 body.v3book .desk{padding:4px 0;align-self:stretch;width:100%}body.v3book .book{width:100%}
 body.v3book .pname{margin:4px 0;font-size:15px}body.v3book .mnav{margin:2px 0}body.v3book .mnav .navb{width:46px;height:46px;font-size:20px}
 body.v3book .pal{margin:4px 0;padding:6px;gap:5px}body.v3book .cray{width:32px;height:54px}
 body.v3book .tools{margin:2px 0;gap:6px}body.v3book .tools button{min-height:40px;padding:4px 10px;font-size:13px}
 body.v3book .side{height:90px}}
@media (max-height:500px){body.v3book .wrap{grid-template-columns:minmax(0,1fr) 260px}body.v3book .book{width:min(100%,calc((100dvh - 84px) * 4 / 3))}body.v3book .cray{width:30px;height:50px}body.v3book .pal{gap:4px;padding:6px}body.v3book .tools button{min-height:36px;padding:3px 9px;font-size:12px}body.v3book .top{flex-wrap:nowrap}body.v3book .top .ntabs{flex-basis:auto}body.v3book .side{height:30dvh}}
/* coloring: one sound button (tab bar), #snd kept for logic but visually hidden */
body.v3book .top #snd{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
@media (max-width:700px){
 body.v3book .desk{overflow:visible}
 body.v3book .book.closed{transform-origin:75% 0;transform:translateX(-25%) scale(1.4);margin-bottom:34%}
 body.v3book .book{transition:transform .9s cubic-bezier(.3,.7,.3,1),margin .9s}
}
@media (max-height:500px){body.v3book .book{width:min(100%,calc((100dvh - 120px) * 4 / 3))}body.v3book .book.closed{transform:translateX(-25%)}}
@media (max-width:700px){body.v3book:has(.book.closed) .mnav{display:none}}
@media (max-height:500px){body.v3book .cover .front h2{font-size:clamp(16px,5dvh,24px)}body.v3book .cover .tap{font-size:13px;padding:5px 12px}body.v3book .cover .front img{width:74%;margin:5% 0}body.v3book .cover .fl{font-size:18px}}