/* Premium 2.0 - resilient, offline-first IFP interface */
:root{--school-green:#086b45;--school-gold:#efaa32;--school-ink:#173f48}
.school-badge{display:flex;align-items:center;gap:11px;flex:0 1 auto;min-width:0;min-height:62px;padding:7px 11px;background:rgba(255,255,255,.94);border:1px solid rgba(8,107,69,.18);border-radius:16px;box-shadow:0 6px 20px #185b3720}
.school-badge img{width:48px;height:48px;object-fit:contain;border-radius:10px;flex-shrink:0}
.school-badge .school-meta{min-width:0;display:grid;gap:2px}
.school-kicker{font:700 10px/1.2 Kota,Arial,sans-serif;letter-spacing:.16em;color:var(--school-green)}
.school-name{font:700 12px/1.25 Kota,Arial,sans-serif;color:#16503a;white-space:normal}
.ifp-music-button{position:fixed;z-index:550;right:18px;bottom:18px;display:flex;align-items:center;gap:9px;background:#124b45;color:white;border:1px solid #3c8066;border-radius:30px;min-height:52px;padding:7px 17px 7px 8px;box-shadow:0 12px 28px #0c473b44;cursor:pointer;font:700 14px/1 Kota,Arial,sans-serif;letter-spacing:.01em;touch-action:manipulation}
.ifp-music-button .music-symbol{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ffffff27;font:700 25px/1 Kota,Arial,sans-serif}
.ifp-music-button.is-playing{background:#076443;border-color:#39aa6c}
.ifp-music-button.is-playing .music-symbol{animation:musicPulse 2s ease-in-out infinite}
@keyframes musicPulse{50%{box-shadow:0 0 0 5px #ffffff1e}}
.ifp-music-button:focus-visible{outline:4px solid #fbc86b;outline-offset:3px}
/* Shared header: logo stays visible without stealing the lesson surface */
body:not(:has(.portal)) .school-badge{margin-inline:auto 8px}
body:not(:has(.portal)) header{gap:10px;min-width:0}
body:not(:has(.portal)) header button,body:not(:has(.portal)) header a{min-height:44px}
body:not(:has(.portal)) .header-tools{flex-shrink:0}
body:not(:has(.portal)) .school-badge{min-width:170px;max-width:248px}
body:not(:has(.portal)) .school-name{font-size:11px}
/* Splash opening screen */
body.has-welcome{overflow:hidden}
.welcome-screen[hidden]{display:none!important}
.welcome-screen{position:fixed;inset:0;z-index:9990;background:radial-gradient(circle at 16% 7%,#fdf6d9 0,transparent 36%),radial-gradient(circle at 83% 90%,#bbdcc8 0,transparent 35%),linear-gradient(135deg,#e6f3e9 0%,#f8faf5 57%,#f7ecd7 100%);display:grid;place-items:center;padding:20px;overflow:auto}
.welcome-decoration{position:absolute;width:25vw;height:25vw;max-width:380px;max-height:380px;border:2px solid #9dbf9c75;border-radius:55px;transform:rotate(-25deg);pointer-events:none}
.welcome-decoration-a{top:-12%;left:-8%;border-radius:90px}
.welcome-decoration-b{right:-10%;bottom:-18%;border-radius:140px;transform:rotate(22deg)}
.welcome-panel{width:min(590px,100%);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#ffffffed;border:1px solid #d4e5d7;border-radius:32px;box-shadow:0 25px 85px #255f3540;padding:28px clamp(20px,5vw,48px) 24px;gap:11px}
.welcome-panel:before{content:'';position:absolute;inset:0 0 auto;height:9px;border-radius:32px 32px 0 0;background:linear-gradient(90deg,#067443 0%,#f5af32 50%,#067443 100%)}
.welcome-topline{font:700 12px/1.3 Kota,Arial,sans-serif;letter-spacing:.23em;color:#5c8268}
.welcome-logo{width:clamp(120px,21vh,195px);height:clamp(120px,21vh,195px);object-fit:contain;filter:drop-shadow(0 6px 10px #215f3321)}
.welcome-school{font:700 clamp(13px,1.6vw,17px)/1.4 Kota,Arial,sans-serif;letter-spacing:.07em;color:#087045}
.welcome-rule{width:84px;height:3px;border-radius:5px;background:#e6a13c;margin-top:2px}
.welcome-panel h2{font:700 clamp(30px,4.5vw,43px)/1.15 Kota,Arial,sans-serif;letter-spacing:-.03em;color:#144e39;margin:2px 0}
.welcome-panel p{font:400 clamp(15px,1.9vw,18px)/1.5 Kota,Arial,sans-serif;color:#557069;margin:0;max-width:380px}
.welcome-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:13px}
.welcome-actions button{min-height:58px;border-radius:15px;font:700 14px/1.25 Kota,Arial,sans-serif;padding:12px 14px;border:1px solid #aacfb8;cursor:pointer}
.welcome-play{background:linear-gradient(125deg,#096b45,#0a8756);color:#fff;border-color:#076b47!important;box-shadow:0 5px 0 #0b573a31}
.welcome-quiet{background:#f4f8f4;color:#174d3a}
.welcome-actions button:focus-visible{outline:4px solid #ffc45c;outline-offset:3px}
.welcome-panel small{font:400 12px/1.4 Kota,Arial,sans-serif;color:#718881;margin-top:7px}
.welcome-exit{opacity:0;transform:scale(1.02);transition:opacity .25s,transform .25s;pointer-events:none}
/* Portal header and welcoming school section */
.portal{background:transparent}
.portal header{min-width:0;gap:16px}
.portal .brand-mark{background:#096948;color:#ffc567;box-shadow:0 5px 0 #c5dfcd}
.portal h1{color:#124c3d}
.portal .tools #fullscreenButton{background:#096948;border-color:#096948}
.portal-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(260px,.77fr) minmax(0,1.3fr);align-items:center;gap:20px;background:linear-gradient(104deg,#e4f3e7 0%,#fbfdf9 59%,#fff3de 100%);border:1px solid #cfe3d0;box-shadow:0 10px 30px #2b6f3830;padding:15px 24px;border-radius:25px;min-height:130px}
.portal-school-anchor{position:relative;z-index:1}
.portal-school-anchor .school-badge{width:100%;background:transparent;border:0;box-shadow:none;padding:0;max-width:420px}
.portal-school-anchor .school-badge img{width:88px;height:88px;border-radius:15px;background:#fff;padding:4px;box-shadow:0 6px 20px #0a5b3d1a}
.portal-school-anchor .school-name{font-size:clamp(13px,1.45vw,20px);line-height:1.35}
.portal-school-anchor .school-kicker{font-size:11px;letter-spacing:.15em}
.hero-description{position:relative;z-index:1}
.hero-eyebrow{display:block;color:#52816a;letter-spacing:.13em;font-size:11px;font-weight:700}
.portal-hero h2{font:700 clamp(22px,2.4vw,35px)/1.13 Kota,Arial,sans-serif;max-width:none;letter-spacing:-.025em;color:#17583f;margin:6px 0}
.portal-hero p{font:400 clamp(13px,1.16vw,16px)/1.4 Kota,Arial,sans-serif;margin:0;color:#516f63}
.hero-sparkle{position:absolute;right:12px;top:0;font-size:100px;color:#ebc27124;line-height:1}
.portal .app-card{border-radius:22px;border:1px solid #d6e3d6;box-shadow:0 5px 15px #2d704116;background:#fffffcec}
.portal .app-card:hover,.portal .app-card:focus-visible{border-color:#4d9771;box-shadow:0 12px 28px #256b3d27}
.portal .card-icon{border-radius:18px}
.portal footer{padding-right:170px}
/* Responsiveness: IFP landscape, portrait, tablet and phones */
@media(min-width:1500px) and (min-height:830px){.portal{padding:22px 35px 16px;gap:12px}.portal-hero{min-height:145px}.app-grid{gap:13px}.app-card{padding:12px 20px}}
@media(max-width:1250px){body:not(:has(.portal)) .school-badge{max-width:202px;min-width:0}.school-badge img{width:40px;height:40px}.school-badge{padding:6px 8px;gap:7px}.school-name{font-size:10px!important}}
@media(orientation:portrait) and (min-width:650px){
 .portal{height:auto!important;min-height:100dvh}
 .portal-hero{grid-template-columns:1fr;gap:8px;padding:20px 25px}
 .portal-school-anchor .school-badge{max-width:100%;gap:15px}
 .portal-school-anchor .school-badge img{width:90px;height:90px}
 .portal-hero h2{font-size:32px}
 .portal .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .portal .app-card{min-height:145px}
 body[data-app] .app-shell{height:auto!important;min-height:100dvh!important}
 body[data-app] .workspace{height:auto!important;overflow:visible!important}
 body[data-app='robot-cari-jalan'] .game-layout,body[data-app='timbangan-misteri'] .workspace{display:flex!important;flex-direction:column!important}
 body[data-app='robot-cari-jalan'] .game-layout > *,body[data-app='timbangan-misteri'] .workspace > *{width:100%;max-width:100%}
 body[data-app='timbangan-misteri'] .interaction-panel,body[data-app='timbangan-misteri'] .scale-stage{grid-column:auto!important;grid-row:auto!important}
 body[data-app='taman-kelompok-ceria'] .play-zone{grid-template-columns:1fr!important}
 body[data-app='pulau-perasaan'] .emotion-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
 body:not(:has(.portal)) header{flex-wrap:wrap;align-items:center;justify-content:space-between;height:auto!important;max-height:none!important}
 body:not(:has(.portal)) header .header-tools{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
 body:not(:has(.portal)) .school-badge{order:4;flex:0 0 auto;max-width:100%;width:auto;margin:2px 0 0!important}
 body:not(:has(.portal)) .school-name{font-size:11px!important}
 .portal header{flex-wrap:wrap}
 .portal .app-grid{gap:11px}
}
@media(max-width:680px){
 .portal{padding:13px;gap:13px}
 .portal header{gap:10px}
 .portal-hero{display:flex;flex-direction:column;align-items:stretch;padding:16px;border-radius:19px;gap:15px}
 .portal-school-anchor .school-badge{gap:11px}
 .portal-school-anchor .school-badge img{width:68px;height:68px}
 .portal-school-anchor .school-name{font-size:13px!important}
 .portal-hero h2{font-size:24px}
 .portal .app-grid{grid-template-columns:1fr}
 .portal .app-card{min-height:115px}
 .portal footer{padding-right:0;padding-bottom:62px}
 .welcome-panel{padding:20px 16px;gap:8px}
 .welcome-actions{grid-template-columns:1fr;gap:8px}
 .welcome-actions button{min-height:50px}
 .ifp-music-button{bottom:10px;right:10px;min-height:48px;padding:5px 12px 5px 6px}
 .ifp-music-button .music-symbol{width:33px;height:33px;font-size:21px}
 .ifp-music-button .music-label{font-size:12px}
 body:not(:has(.portal)) .school-badge{max-width:100%;width:fit-content}
 body:not(:has(.portal)) .school-badge img{height:32px;width:32px}
 body:not(:has(.portal)) .school-badge .school-kicker{font-size:9px}
 body:not(:has(.portal)) .school-name{font-size:10px!important}
}
@media(max-width:420px){
 body[data-app] .workspace,body[data-app] .activity-panel,body[data-app] .game-layout,body[data-app] .play-zone{min-width:0!important;max-width:100%!important}
 body[data-app] .wagon-track,body[data-app] .choice-grid{max-width:100%;overflow-x:auto}
 body[data-app] .school-badge{width:100%;max-width:100%}
}
@media(prefers-reduced-motion:reduce){.ifp-music-button.is-playing .music-symbol{animation:none}.welcome-exit{transition:none}}

/* Keep exercise actions close to the exercise on portrait panels, not at the bottom of a tall empty page. */
@media(orientation:portrait) and (min-width:650px){
 body[data-app] .workspace{flex:0 0 auto!important;align-self:stretch}
 body[data-app] .bottom-dock{margin-top:0!important}
 body[data-app] footer{margin-top:0!important;padding-bottom:78px!important}
}
/* Avoid the floating music player covering the last question/answer buttons. */
body:not(:has(.portal)) footer{padding-bottom:max(72px,env(safe-area-inset-bottom))!important}
body:not(:has(.portal)) .lab-shell footer{padding-bottom:72px!important}
@media(max-width:680px){body:not(:has(.portal)) footer{padding-bottom:75px!important}}