/* Prasekolah PlayLab Adventure v1.8: immersive mobile-first learning progression */
.ppl-app .ppl-adv-home{padding:12px 13px 26px;background:linear-gradient(160deg,#fffef7,#f5f0ff 54%,#effcf6);}
.ppl-app .ppl-adv-greeting{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px;background:linear-gradient(118deg,#6951ca,#9369da);border-radius:23px;color:white;min-height:132px;overflow:hidden;position:relative}
.ppl-app .ppl-adv-greeting:after{content:'✦  ✦  ✦';position:absolute;right:3px;top:9px;color:#ffffff4a;font-size:20px;letter-spacing:9px;pointer-events:none}
.ppl-app .ppl-adv-kicker{font-size:10px;color:#fde68a;font-weight:1000;letter-spacing:1.3px}
.ppl-app .ppl-adv-greeting h2{font-size:clamp(21px,4.5vw,32px);line-height:1.12;font-weight:1000;color:#fff;margin:8px 0 5px}
.ppl-app .ppl-adv-greeting p{font-size:12px;line-height:1.5;color:#f4eaff;max-width:450px;margin:0}
.ppl-app .ppl-adv-fox{font-size:76px;line-height:1;filter:drop-shadow(3px 6px 2px #271b6033);animation:ppl-adv-float 3s ease-in-out infinite}
.ppl-app .ppl-adv-nextcard{display:flex;align-items:center;gap:12px;justify-content:space-between;background:linear-gradient(105deg,#fff1b8,#fff8df);border:2px solid #f8d580;border-radius:18px;padding:14px;margin:11px 0;box-shadow:0 5px 0 #c78d1d0a}
.ppl-app .ppl-adv-nextcard>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.ppl-app .ppl-adv-nextcard>div>span{font-size:10px;font-weight:1000;color:#8c5510}
.ppl-app .ppl-adv-nextcard strong{font-size:clamp(13px,3.7vw,18px);line-height:1.3;color:#503e32;overflow-wrap:anywhere}
.ppl-app .ppl-adv-nextcard small{font-size:10px;line-height:1.4;color:#886331}
.ppl-app .ppl-adv-nextcard .ppl-button{flex-shrink:0;min-height:50px;font-size:12px;max-width:130px}
.ppl-app .ppl-adv-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 17px}
.ppl-app .ppl-adv-summary>span{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;padding:10px 5px;border-radius:13px;border:1px solid #e4dff4;background:#fff;color:#6d50b4;font-size:14px}
.ppl-app .ppl-adv-summary b{font-size:18px;color:#47337c}
.ppl-app .ppl-adv-summary small{font-size:10px;color:#766c92;white-space:nowrap}
.ppl-app .ppl-adv-worldhead h3{color:#453577;font-size:18px;font-weight:1000;margin:0 0 4px}
.ppl-app .ppl-adv-worldhead p{font-size:11px;color:#7d7897;line-height:1.5;margin:0 0 11px}
.ppl-app .ppl-adv-worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;background:radial-gradient(ellipse at 15% 18%,#fff9 0 6%,transparent 7%),radial-gradient(ellipse at 84% 61%,#fff7 0 9%,transparent 10%),linear-gradient(145deg,#b9e7f7,#d5f6f0);padding:13px 10px;border-radius:25px;border:3px solid #fff;position:relative}
.ppl-app .ppl-adv-world{background:var(--world-bg,#dcfce7);border:2px solid #ffffff;border-radius:43% 52% 38% 48% / 26% 35% 27% 31%;min-height:140px;padding:11px 9px;text-align:center;color:#24425c;box-shadow:0 5px 12px #47556912;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .12s ease,box-shadow .12s}
.ppl-app .ppl-adv-world:active{transform:scale(.97)}
.ppl-app .ppl-adv-world:focus-visible{outline:3px solid #6b46c6;outline-offset:1px}
.ppl-app .ppl-adv-worldicon{font-size:37px;line-height:1.15}
.ppl-app .ppl-adv-worldcopy{display:flex;flex-direction:column;gap:3px;width:100%}
.ppl-app .ppl-adv-worldcopy strong{font-size:12px;line-height:1.3;color:#39405a;overflow-wrap:anywhere}
.ppl-app .ppl-adv-worldcopy small{font-size:10px;color:#64748b}
.ppl-app .ppl-adv-worldbar{width:80%;height:7px;background:#ffffffa8;border-radius:999px;overflow:hidden}
.ppl-app .ppl-adv-worldbar i{height:100%;display:block;border-radius:999px;background:#22a879;transition:width .3s}
.ppl-app .ppl-adv-other{margin:16px 0;background:#fff;border:1px solid #e6dcf5;border-radius:15px;padding:12px}
.ppl-app .ppl-adv-other summary{font-size:13px;font-weight:900;color:#6043a0;cursor:pointer;padding:4px 0;touch-action:manipulation}
.ppl-app .ppl-adv-other>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:12px}
.ppl-app .ppl-adv-extragame{border:1px solid #e6dffa;border-radius:11px;background:#f9f6ff;color:#6541a3;min-height:52px;font-weight:850;font-size:11px;padding:8px 7px;text-align:left;cursor:pointer}
.ppl-app .ppl-adv-boardlink{display:block;width:100%;min-height:48px;border:1px solid #decffb;background:#f3efff;border-radius:13px;color:#5d40aa;font-size:13px;font-weight:900;cursor:pointer}
/* Replace old website-style hero / long topic list with quick-entry Adventure, retain leaderboard below. */
.ppl-app [data-ppl-screen="home"]>.ppl-hero,
.ppl-app [data-ppl-screen="home"]>.ppl-feature,
.ppl-app [data-ppl-screen="home"]>.ppl-section,
.ppl-app [data-ppl-screen="home"]>.ppl-stats,
.ppl-app [data-ppl-screen="home"]>.ppl-quickprofile{display:none!important}
.ppl-app .ppl-news-banner{margin:7px 12px 3px}
.ppl-app .ppl-boardsection{background:#fffdf9;border-radius:18px}
/* Journey map - deliberate winding path; scroll belongs to optional map, never to game entry */
.ppl-app .ppl-adv-journeyhead{position:sticky;top:0;z-index:9;background:#fffdfa;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:11px 12px;border-bottom:1px solid #ebe2fb;color:#6440b4;font-weight:1000;font-size:13px}
.ppl-app .ppl-adv-pathshell{min-height:calc(100svh - 160px);background:linear-gradient(165deg,#e6f9ed 0%,#e5f4fd 52%,#f8ebfa 100%);padding:14px 12px 30px}
.ppl-app .ppl-adv-pathintro{display:flex;align-items:center;gap:12px;background:#fffef6;border:1px solid #e2d7f1;padding:13px;border-radius:17px}
.ppl-app .ppl-adv-pathintro>span{font-size:48px}
.ppl-app .ppl-adv-pathintro h2{font-size:21px;font-weight:1000;color:#4d387f;margin:0}
.ppl-app .ppl-adv-pathintro p{font-size:11px;color:#64748b;margin:4px 0 0}
.ppl-app .ppl-adv-subjecttabs{display:flex;justify-content:space-between;gap:6px;margin:12px auto;max-width:520px}
.ppl-app .ppl-adv-subjecttabs button{flex:1;background:#fff;border:2px solid #e3e0f2;min-height:51px;border-radius:14px;font-size:25px;cursor:pointer}
.ppl-app .ppl-adv-subjecttabs button.current{background:#fef3c7;border-color:#fbbf24;box-shadow:0 3px 0 #b45309}
.ppl-app .ppl-adv-path{padding:10px 5px 20px;max-width:600px;margin:0 auto;position:relative}
.ppl-app .ppl-adv-path:before{content:'';position:absolute;top:15px;bottom:15px;left:50%;transform:translateX(-50%);border-left:7px dotted #b5acd9;pointer-events:none}
.ppl-app .ppl-adv-pathrow{display:flex;margin:0 0 19px;position:relative;z-index:1}
.ppl-app .ppl-adv-pathrow.zig-left{justify-content:flex-start}
.ppl-app .ppl-adv-pathrow.zig-right{justify-content:flex-end}
.ppl-app .ppl-adv-mission{display:flex;align-items:center;gap:7px;padding:9px;border-radius:17px;min-height:79px;width:85%;border:2px solid #d8d1ee;background:#fff;color:#4b4b68;cursor:pointer;text-align:left;box-shadow:0 4px 0 #55428810}
.ppl-app .ppl-adv-mission.done{border-color:#85d6a2;background:#ebfff0}
.ppl-app .ppl-adv-mission.progress{border-color:#f9b248;background:#fff5df}
.ppl-app .ppl-adv-mission.locked{background:#e9e8ee;color:#8f94a3;opacity:.78;cursor:not-allowed}
.ppl-app .ppl-adv-missionicon{min-width:51px;height:51px;border-radius:50%;background:#ebddff;display:grid;place-items:center;font-size:28px}
.ppl-app .ppl-adv-mission.done .ppl-adv-missionicon{background:#c9f3d6}
.ppl-app .ppl-adv-mission.progress .ppl-adv-missionicon{background:#ffdf99}
.ppl-app .ppl-adv-missioncopy{min-width:0;flex:1;display:grid;gap:4px}
.ppl-app .ppl-adv-missioncopy strong{font-size:12px;font-weight:1000;line-height:1.3;overflow-wrap:anywhere}
.ppl-app .ppl-adv-missioncopy small{font-size:10px;line-height:1.3}
.ppl-app .ppl-adv-missionarrow{font-size:14px;color:#7458bb}
.ppl-app .ppl-adv-pathtip{font-size:10px;color:#607089;text-align:center;line-height:1.8;background:#ffffffcf;padding:10px;border-radius:13px}
/* Compact activity screen: one mission takes priority over menus, tiny headers, no lengthy scrolling. */
.ppl-app.ppl-adventure-race .ppl-gameheader{padding:10px 10px 8px!important}
.ppl-app.ppl-adventure-race .ppl-gameheader>span{display:none!important}
.ppl-app.ppl-adventure-race .ppl-gameheader h2{font-size:17px!important;margin:0!important}
.ppl-app.ppl-adventure-race .ppl-gameheader p{display:none!important}
.ppl-app.ppl-adventure-race .ppl-gamebody{padding:9px 10px!important}
.ppl-app.ppl-adventure-race .ppl-game-identity{margin:2px 0 8px;padding:7px 10px;font-size:11px}
.ppl-app.ppl-adventure-race .ppl-topic-pick,
.ppl-app.ppl-adventure-race .ppl-levels,
.ppl-app.ppl-adventure-race .ppl-disclaimer{display:none!important}
.ppl-app.ppl-adventure-race .ppl-lanes{gap:9px;margin-top:9px}
.ppl-app.ppl-adventure-race .ppl-road{height:63px}
.ppl-app.ppl-adventure-race .ppl-car{font-size:32px;top:8px}
.ppl-app.ppl-adventure-race .ppl-lanelabel{font-size:11px;margin-bottom:4px}
.ppl-app.ppl-adventure-race .ppl-progress{height:5px}
.ppl-app.ppl-adventure-race .ppl-quiz{padding:10px!important;margin-top:10px!important}
.ppl-app.ppl-adventure-race .ppl-equation{font-size:clamp(20px,5vw,28px)!important;margin:7px 0!important;line-height:1.25!important}
.ppl-app.ppl-adventure-race .ppl-answers button{min-height:60px}
.ppl-app.ppl-adventure-race .ppl-voicebtn{font-size:11px;padding:7px 9px;min-height:32px}
.ppl-app.ppl-adventure-race .ppl-gameactions{margin-top:6px}
.ppl-app.ppl-adventure-race .ppl-topic-qimage{font-size:30px;margin:4px auto}
.ppl-app.ppl-adventure-race .ppl-topic-qimage img{height:70px}
.ppl-app.ppl-adventure-race .ppl-statepanel{padding:12px 10px}
.ppl-app.ppl-adventure-race .ppl-hugeemoji{font-size:32px}
/* Artwork save / gallery */
.ppl-app .ppl-adv-arttools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 5px}
.ppl-app .ppl-adv-arttools button{min-height:47px}
.ppl-app .ppl-adv-artgallery{margin-top:12px;background:#fff4fe;border:1px solid #efd6f3;border-radius:15px;padding:12px}
.ppl-app .ppl-adv-artgallery>strong{font-size:13px;color:#704296}
.ppl-app .ppl-adv-artgallery>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.ppl-app .ppl-adv-artgallery small{font-size:11px;color:#866393}
.ppl-app .ppl-adv-artitem{border:1px solid #ddbde9;border-radius:11px;padding:7px;background:#fff;color:#664280;font-size:11px;min-height:42px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:165px}.ppl-app .ppl-adv-artthumb{width:120px;height:107px;display:block;border-radius:8px;max-width:100%}
@keyframes ppl-adv-float{50%{transform:translateY(-6px) rotate(4deg)}}
@media(min-width:750px){.ppl-app .ppl-adv-worlds{grid-template-columns:repeat(5,minmax(0,1fr))}.ppl-app .ppl-adv-greeting{min-height:160px}.ppl-app .ppl-adv-world{min-height:170px}.ppl-app .ppl-adv-home{padding:18px 24px 30px}}
@media(max-width:390px){.ppl-app .ppl-adv-home{padding:9px 9px 22px}.ppl-app .ppl-adv-fox{font-size:51px}.ppl-app .ppl-adv-greeting{min-height:113px;padding:13px}.ppl-app .ppl-adv-greeting h2{font-size:22px}.ppl-app .ppl-adv-greeting p{font-size:11px}.ppl-app .ppl-adv-nextcard{padding:11px 9px;gap:6px}.ppl-app .ppl-adv-nextcard .ppl-button{max-width:109px;padding:9px 8px}.ppl-app .ppl-adv-world{min-height:127px}.ppl-app .ppl-adv-mission{width:94%}}
@media(prefers-reduced-motion:reduce){.ppl-app .ppl-adv-fox{animation:none!important}}
/* Keep the drawing canvas and Save Artwork control close together on small phones. */
@media(max-width:540px){
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extrahero{padding:9px 10px!important}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extralogo{font-size:25px;line-height:1.1}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extrahero h2{font-size:21px;margin:3px 0}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extrahero p{font-size:11px}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extrabody{padding:9px 11px}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-gamehint{padding:6px 9px;margin:5px auto;font-size:10px;line-height:1.3}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-chiprow{margin:7px 0;gap:5px}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-chiprow button{min-height:39px;padding:7px 9px;font-size:11px}
 .ppl-app [data-ppl-screen="symmetry"] canvas.ppl-extra-canvas{margin:8px auto}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extra-tools{margin:8px 0;gap:5px}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-extra-tools .ppl-button{min-height:38px;padding:7px 10px;font-size:11px}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-adv-arttools{margin:7px 0;gap:5px}
 .ppl-app [data-ppl-screen="symmetry"] .ppl-adv-arttools button{min-height:41px;padding:8px 10px;font-size:11px}
}