/* Layout: papan tulis ceria — header bergambar, tab besar untuk anak, satu kolom yang mengalir */
:root{
  --bg:#f3f8f6; --paper:#ffffff; --ink:#1d3a3a; --muted:#5b7473; --line:#d5e6e2;
  --teal:#1f8f86; --teal-soft:#d6f0ec; --sun:#f6b62a; --sun-soft:#fff1cc;
  --coral:#e5674f; --coral-soft:#fde3dc; --leaf:#4a9a3c; --leaf-soft:#e1f2db;
  --sky:#3a7fc4; --sky-soft:#dcebf9;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10201f; --paper:#172b2a; --ink:#e6f2ef; --muted:#9bb5b1; --line:#294341;
  --teal:#4cc2b6; --teal-soft:#1d3d3a; --sun:#f6c14f; --sun-soft:#3a3218;
  --coral:#f08a74; --coral-soft:#43251f; --leaf:#7cc66c; --leaf-soft:#22391d;
  --sky:#76aee6; --sky-soft:#1c3045; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10201f; --paper:#172b2a; --ink:#e6f2ef; --muted:#9bb5b1; --line:#294341;
  --teal:#4cc2b6; --teal-soft:#1d3d3a; --sun:#f6c14f; --sun-soft:#3a3218;
  --coral:#f08a74; --coral-soft:#43251f; --leaf:#7cc66c; --leaf-soft:#22391d;
  --sky:#76aee6; --sky-soft:#1c3045; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
.wrap{max-width:980px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
h2{font-size:clamp(26px,4vw,34px)} h3{font-size:22px}
p{margin:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* header */
.hero{background:var(--teal);color:#fff;position:relative;overflow:hidden}
.hero .wrap{padding-block:28px 34px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.hero .eyebrow{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px;opacity:.9}
.hero h1{font-size:clamp(34px,7vw,58px);margin-top:4px}
.hero h1 span{color:var(--sun)}
.hero .sub{margin-top:8px;max-width:52ch;font-size:17px;opacity:.95}
.hero .author{margin-top:12px;font-size:14px;font-weight:700;opacity:.9}
.signs{display:flex;gap:10px}
.sign{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px;line-height:1.05;text-align:center;border:5px solid #fff;color:#fff}
.sign.s1{background:#e5674f}.sign.s2{background:#3a7fc4;border-radius:14px}.sign.s3{background:#f6b62a;color:#1d3a3a;clip-path:polygon(50% 0,100% 100%,0 100%);border:none;padding-top:22px}
@media (max-width:640px){.hero .wrap{grid-template-columns:1fr}.signs{order:-1}}

/* nav */
nav.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:2px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
nav.tabs .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
nav.tabs a{flex:none;text-decoration:none;color:var(--ink);font-weight:800;padding:8px 14px;border-radius:999px;font-size:15px}
nav.tabs a[aria-current="page"]{background:var(--teal);color:#fff}
nav.tabs a:hover:not([aria-current="page"]){background:var(--teal-soft)}

main{padding-block:28px 60px}
.view{display:grid;gap:22px}
.lead{color:var(--muted);max-width:62ch}
.panel{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:20px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.grid2>*{min-width:0}

/* beranda */
.welcome{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start}
@media (max-width:720px){.welcome{grid-template-columns:1fr}}
.goals{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none;counter-reset:g}
.goals li{counter-increment:g;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.goals li::before{content:counter(g);width:30px;height:30px;border-radius:50%;background:var(--sun);color:#1d3a3a;font-weight:800;display:grid;place-items:center;font-family:var(--display)}
.steps{display:grid;gap:8px;margin-top:12px}
.steps a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);background:var(--teal-soft);padding:10px 14px;border-radius:12px;font-weight:700}
.steps a span{color:var(--teal)}

/* materi */
.normcard{border-radius:18px;padding:18px;border:2px solid transparent;display:grid;gap:8px}
.normcard .tag{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.n-agama{background:var(--sky-soft)} .n-agama .tag{color:var(--sky)}
.n-susila{background:var(--leaf-soft)} .n-susila .tag{color:var(--leaf)}
.n-sopan{background:var(--sun-soft)} .n-sopan .tag{color:#9a6a00}
:root[data-theme="dark"] .n-sopan .tag{color:var(--sun)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .n-sopan .tag{color:var(--sun)}}
.n-hukum{background:var(--coral-soft)} .n-hukum .tag{color:var(--coral)}
.normcard ul{margin:0;padding-left:20px}
.places{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.place{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px}
.place h3{font-size:20px;color:var(--teal)}
.place ul{margin:8px 0 0;padding-left:20px}
.tabe{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--sun-soft);border-radius:18px;padding:18px}
.tabe .big{font-family:var(--display);font-size:44px;font-weight:800;color:var(--coral);line-height:1}
@media (max-width:520px){.tabe{grid-template-columns:1fr}}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.vs{grid-template-columns:1fr}}
.vs>div{border-radius:16px;padding:16px}
.vs .ok{background:var(--leaf-soft)} .vs .no{background:var(--coral-soft)}
.vs h3{font-size:19px}
.vs ul{margin:6px 0 0;padding-left:20px}

/* unggahan */
.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.files{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.file{background:var(--paper);border:2px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.file .thumb{aspect-ratio:16/10;max-width:100%;background:var(--teal-soft);display:grid;place-items:center;color:var(--teal);font-family:var(--display);font-weight:800;font-size:26px}
.file .thumb img{width:100%;height:100%;object-fit:cover}
.file .body{padding:12px 14px;display:grid;gap:8px;align-content:space-between}
.file .title{font-weight:800}
.file .meta{font-size:13px;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:none;border-radius:999px;padding:9px 16px;font-weight:800;background:var(--teal);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:15px}
.btn.alt{background:var(--teal-soft);color:var(--teal)}
.btn.warn{background:var(--coral-soft);color:var(--coral)}
.btn.sun{background:var(--sun);color:#1d3a3a}
.btn:disabled{opacity:.55;cursor:not-allowed}
.empty{border:2px dashed var(--line);border-radius:16px;padding:22px;color:var(--muted);text-align:center}
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.videos>*{min-width:0}
.vid{background:var(--paper);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.vid video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;background:#000}
.vid .ytbox{aspect-ratio:16/9;max-width:100%;background:var(--coral);display:grid;place-items:center;text-decoration:none;color:#fff}
.vid .play{width:70px;height:70px;border-radius:50%;background:#fff;position:relative}
.vid .play::after{content:"";position:absolute;left:27px;top:20px;border-left:24px solid var(--coral);border-top:15px solid transparent;border-bottom:15px solid transparent}
.vid .body{padding:12px 14px;display:grid;gap:6px}

/* game */
.game-card{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:14px;text-align:center}
.game-card .situ{font-family:var(--display);font-size:clamp(22px,3.6vw,28px);font-weight:700}
.game-card .row{justify-content:center}
.game-card .btn{font-size:18px;padding:12px 22px}
.feedback{min-height:28px;font-weight:800}
.feedback.good{color:var(--leaf)} .feedback.bad{color:var(--coral)}
.progress{height:12px;background:var(--line);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--sun);width:0;transition:width .3s}

/* kuis */
.q{display:grid;gap:12px}
.q .num{font-weight:800;color:var(--teal);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.q .text{font-size:21px;font-weight:800}
.opts{display:grid;gap:10px}
.opt{text-align:left;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:14px;padding:12px 14px;font-weight:700;display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center}
.opt b{width:30px;height:30px;border-radius:50%;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center}
.opt:hover:not(:disabled){border-color:var(--teal)}
.opt.right{border-color:var(--leaf);background:var(--leaf-soft)}
.opt.wrong{border-color:var(--coral);background:var(--coral-soft)}
.stars{font-size:40px;color:var(--sun);letter-spacing:4px}
.scorebig{font-family:var(--display);font-size:64px;font-weight:800;color:var(--teal);line-height:1}

/* profil & guru */
.profile{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.avatar{width:88px;height:88px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-family:var(--display);font-size:36px;font-weight:800;color:#1d3a3a}
@media (max-width:480px){.profile{grid-template-columns:1fr}}
.teacherbar{background:var(--sun-soft);border:2px solid var(--sun);border-radius:16px;padding:14px 16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.teacherbar p{font-weight:700}
.form{display:grid;gap:10px}
.form label{font-weight:800;font-size:14px}
.form input,.form textarea,.form select{width:100%;border:2px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg);color:var(--ink)}
.status{font-weight:700;font-size:14px;color:var(--muted);min-height:20px}
.status.err{color:var(--coral)}
.confirm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:14px;font-weight:700}
footer{color:var(--muted);font-size:14px;padding-block:20px 40px;text-align:center}
/* sampul */
body[data-view="mulai"] .hero,body[data-view="mulai"] nav.tabs,body[data-view="mulai"] main,body[data-view="mulai"] footer{display:none}
.cover{position:relative;overflow:hidden;min-height:max(560px,100dvh);background:#bfe8f5;color:#1d3a3a;display:grid}
.cover>svg.scene{position:absolute;inset:0;width:100%;height:100%}
.cover-in{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:12px;max-width:1100px;width:100%;margin:0 auto;padding-block:40px 70px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.cover-title{text-align:center;display:grid;justify-items:center;gap:4px}
.cover .mari{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.4vw,46px);color:#1e3fa8;-webkit-text-stroke:2px #ffe36b;paint-order:stroke fill;transform:rotate(-3deg)}
.cover .big{font-family:var(--display);font-weight:800;font-size:clamp(48px,9vw,104px);line-height:.92;letter-spacing:.06em;color:#e3262b;-webkit-text-stroke:6px #fff;paint-order:stroke fill;text-shadow:0 5px 0 rgba(0,0,0,.18)}
.cover .big span{display:block}
.startbtn{margin-top:18px;border:none;background:none;display:grid;justify-items:center;gap:4px;text-decoration:none;color:#e3262b;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.12em}
.startbtn .ring{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd463,#f39a12 70%);border:6px solid #b8650a;box-shadow:0 6px 0 #8b4a05;display:grid;place-items:center;transition:transform .15s}
.startbtn .ring::after{content:"";margin-left:8px;border-left:32px solid #fff;border-top:20px solid transparent;border-bottom:20px solid transparent}
.startbtn:hover .ring{transform:scale(1.07)}
.startbtn:active .ring{transform:translateY(4px);box-shadow:0 2px 0 #8b4a05}
.mascot{position:relative;width:100%;max-width:380px;justify-self:center}
@keyframes bob{50%{transform:translateY(-10px)}}
.startbtn .ring{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 6px 0 #8b4a05,0 0 0 12px rgba(243,154,18,.25)}}
@media (max-width:700px),(orientation:portrait) and (max-width:900px){.cover-in{grid-template-columns:1fr;padding-block:28px 60px}.mascot{max-width:280px}}
body[data-view="menu"] .hero,body[data-view="menu"] nav.tabs,body[data-view="menu"] main,body[data-view="menu"] footer{display:none}
body[data-view="literasi"] main,body[data-view="literasi"] footer,body[data-view="literasi"] .topbar{display:none}
.menu-pane{display:grid;justify-items:center;gap:14px;width:100%;max-width:420px;justify-self:center}
.hang{position:relative;text-decoration:none;display:block;margin-top:46px}
.hang .vine{position:absolute;bottom:100%;width:6px;height:70px;background:repeating-linear-gradient(#3f8a2e 0 10px,#7cc66c 10px 16px);border-radius:3px}
.hang .vine.l{left:24%}.hang .vine.r{right:24%}
.hang .board{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,3.4vw,32px);line-height:1;text-align:center;color:#e3262b;-webkit-text-stroke:3px #fff;paint-order:stroke fill;padding:14px 42px;border-radius:6px;background:repeating-linear-gradient(0deg,#d9a35c 0 9px,#cf964e 9px 11px);border:4px solid #8b5a2b;box-shadow:0 5px 0 #6b4220}
.wood{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;text-decoration:none;font-family:var(--display);font-weight:800;font-size:clamp(28px,4vw,38px);letter-spacing:.08em;color:#e3262b;-webkit-text-stroke:3px #fff;paint-order:stroke fill;padding:6px 26px;border-radius:999px;background:repeating-linear-gradient(0deg,#f6c36b 0 8px,#eeb45a 8px 10px);border:5px solid #c47a22;box-shadow:0 6px 0 #8b5a2b;transition:transform .15s}
.wood:hover,.hang:hover .board{transform:translateY(-2px) scale(1.03)}
.wood:active{transform:translateY(4px);box-shadow:0 2px 0 #8b5a2b}
.ic{width:52px;height:52px;flex:none}
.hang .mic{position:absolute;right:-24px;top:-22px;width:46px;height:46px}
.stage-nav{position:absolute;left:0;right:0;bottom:0;display:flex;gap:12px;padding-block:0 calc(14px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stage-nav .spacer{flex:1}
.round{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb347,#ea7d10 70%);border:4px solid #fff;box-shadow:0 4px 0 #9a4f06,0 0 0 3px #c4620a;display:grid;place-items:center}
.round svg{width:28px;height:28px}
.round:hover{transform:scale(1.07)}
.cover-in{padding-bottom:96px}
/* ice breaking */
.ib{display:grid;gap:16px}
.chant{display:grid;gap:6px;font-weight:800;font-size:19px}
.chant span{color:var(--coral)}
.light{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
@media (max-width:560px){.light{grid-template-columns:1fr;justify-items:center;text-align:center}}
.pole{background:#2b2f33;border-radius:22px;padding:12px;display:grid;gap:10px;width:96px}
.lamp{width:72px;height:72px;border-radius:50%;background:#4a4f55;transition:background .2s,box-shadow .2s}
.lamp.on.r{background:#ff3b3b;box-shadow:0 0 24px #ff3b3b}.lamp.on.y{background:#ffd23b;box-shadow:0 0 24px #ffd23b}.lamp.on.g{background:#35d06b;box-shadow:0 0 24px #35d06b}
.cmd{font-family:var(--display);font-weight:800;font-size:clamp(26px,4vw,34px)}
.words{display:flex;flex-wrap:wrap;gap:10px}
.words b{background:var(--sun-soft);border:2px solid var(--sun);border-radius:999px;padding:6px 16px;font-family:var(--display);font-size:20px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.sound-ctl{position:fixed;z-index:20;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));display:flex;gap:8px}
.sbtn{width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:#1f8f86;color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.25);position:relative}
.sbtn svg{width:22px;height:22px}
.sbtn.off{background:#8a9896}
.sbtn.off::after{content:"";position:absolute;width:30px;height:3px;background:#fff;transform:rotate(-45deg);border-radius:2px}
body:not([data-view="mulai"]):not([data-view="menu"]):not([data-view="literasi"]) .sound-ctl{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.vid iframe{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0;background:#000}
/* materi dari guru */
.mlist{display:grid;gap:14px}
.mitem{display:grid;gap:12px}
.mitem .meta{font-size:14px;color:var(--muted);font-weight:700}
.mitem .isi{display:grid;gap:10px}
.mitem img{border-radius:12px;max-height:420px;width:auto;justify-self:start}
footer a{color:var(--teal);font-weight:700}

/* ---------- header ringkas di setiap halaman ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:2px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:12px;padding-block:10px}
.tb-back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:800;color:#fff;background:radial-gradient(circle at 35% 30%,#ffb347,#ea7d10 70%);border:3px solid #fff;box-shadow:0 3px 0 #9a4f06,0 0 0 2px #c4620a;border-radius:999px;padding:6px 14px 6px 10px}
.tb-back svg{width:20px;height:20px}
.tb-title{flex:1;min-width:0;display:grid;line-height:1.15}
.tb-title small{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-title b{font-family:var(--display);font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-teacher{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-width:0}
.tb-who{display:grid;line-height:1.15;min-width:0}
.tb-who small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tb-who b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.ph{width:44px;height:44px;flex:none;border-radius:50%;background:var(--sun);color:#1d3a3a;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 2px var(--teal)}
.ph img{width:100%;height:100%;object-fit:cover}
.tb-panel{flex:none}
@media (max-width:640px){.tb-who,.tb-back span{display:none}.tb-title small{font-size:11px;letter-spacing:.03em}.tb-title b{font-size:19px}}
body[data-view="mulai"] .topbar,body[data-view="menu"] .topbar{display:none}
/* header di sampul & menu */
.stage-top{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.85);border-radius:999px;padding:5px 6px 5px 5px;max-width:calc(100% - 130px)}
.stage-top .tb-teacher{color:#1d3a3a}
.stage-top .tb-who small{color:#5b7473}
@media (max-width:480px){.stage-top .tb-who{display:none}}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- banner tiap halaman ---------- */
.banner{position:relative;overflow:hidden;border-radius:26px;padding:26px 28px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;color:#fff;
  background-image:radial-gradient(circle at 12% 120%,rgba(255,255,255,.18) 0 70px,transparent 71px),radial-gradient(circle at 92% -20%,rgba(255,255,255,.16) 0 90px,transparent 91px)}
.banner h2{font-size:clamp(30px,5vw,46px);-webkit-text-stroke:2px rgba(0,0,0,.12);text-shadow:0 3px 0 rgba(0,0,0,.15)}
.banner .kicker{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:13px;opacity:.95}
.banner p:last-child{margin-top:6px;max-width:52ch;font-weight:600;opacity:.97}
.banner-ic{width:96px;height:96px;padding:14px;background:#fff;border-radius:50%;box-shadow:0 6px 0 rgba(0,0,0,.15);animation:bob 3s ease-in-out infinite}
@media (max-width:520px){.banner{grid-template-columns:1fr;padding:22px}.banner-ic{width:72px;height:72px;order:-1}}
.b-home{background-color:#1f8f86}.b-ice{background-color:#4a9a3c}.b-materi{background-color:#d9822b}
.b-video{background-color:#e0485f}.b-game{background-color:#5a4fb3}.b-kuis{background-color:#3a7fc4}.b-profil{background-color:#c98a10}
.h2{font-size:clamp(26px,4vw,34px)}

/* ---------- ice breaking ---------- */
.act{position:relative;background:var(--paper);border:3px solid var(--c);border-radius:22px;padding:22px 22px 22px 78px;box-shadow:0 6px 0 var(--c)}
.act .no{position:absolute;left:18px;top:20px;width:44px;height:44px;border-radius:50%;background:var(--c);color:#fff;font-family:var(--display);font-weight:800;font-size:24px;display:grid;place-items:center}
.act-in{display:grid;gap:14px}
.act h3{font-size:26px;color:var(--c)}
.a1{--c:#e5674f}.a2{--c:#3a7fc4}.a3{--c:#c98a10}
@media (max-width:520px){.act{padding:72px 16px 18px}.act .no{left:16px;top:16px}}
.chant{display:grid;gap:8px}
.chant button{text-align:left;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:10px 14px;font-weight:800;font-size:19px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;transition:transform .15s,background .15s,border-color .15s}
.chant button span{color:var(--coral)}
.chant button:hover{border-color:var(--coral)}
.chant button.on{background:var(--coral-soft);border-color:var(--coral);transform:scale(1.02)}
.words{display:flex;flex-wrap:wrap;gap:12px}
.words button{border:3px solid var(--sun);background:var(--sun-soft);color:var(--ink);border-radius:999px;padding:8px 20px;font-family:var(--display);font-weight:800;font-size:22px;transition:transform .15s}
.words button:hover{transform:translateY(-2px)}
.words button.pop{animation:pop .45s ease}
@keyframes pop{40%{transform:scale(1.18) rotate(-3deg)}}
.bubble{position:relative;justify-self:start;background:var(--sun);color:#1d3a3a;font-weight:800;font-size:20px;padding:12px 18px;border-radius:18px}
.bubble::before{content:"";position:absolute;left:26px;top:-12px;border:12px solid transparent;border-top:0;border-bottom-color:var(--sun)}

/* ---------- logo sekolah & ikon Panel Guru ---------- */
.logo{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:12px;background:#fff;padding:3px;box-shadow:0 0 0 2px var(--line)}
.logo img{width:100%;height:100%;object-fit:contain}

.sbtn.tb-panel{flex:none;background:var(--sun);color:#1d3a3a;text-decoration:none}
.sbtn.tb-panel:hover{transform:scale(1.07)}
@media (max-width:640px){.topbar .logo{width:40px;height:40px}}

/* nama sekolah di sampul & menu */

/* ---------- animasi sampul: matahari, awan, gunung, pohon, pensil ---------- */
.scene .sun-rays{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite}
.scene .sun-face{transform-box:fill-box;transform-origin:center;animation:sun-beat 3s ease-in-out infinite}
.scene .cloud{animation:drift 18s ease-in-out infinite alternate}
.scene .cloud.c2{animation-duration:24s;animation-direction:alternate-reverse}
.scene .cloud.c3{animation-duration:14s;animation-delay:-5s}
.scene .mtn-back{animation:mtn 30s ease-in-out infinite alternate}
.scene .mtn-front{animation:mtn 22s ease-in-out infinite alternate-reverse}
.scene .tree{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.2s ease-in-out infinite alternate}
.scene .tree.t2{animation-duration:5s;animation-delay:-1.6s}
.scene .tree.t3{animation-duration:3.4s;animation-delay:-.7s}
.twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
.scene .sun-eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.twinkle.tw2{animation-delay:-1.2s}
.twinkle.tw3{animation-delay:-.6s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sun-beat{50%{transform:scale(1.05)}}
@keyframes blink{0%,91%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes drift{from{transform:translateX(-70px)}to{transform:translateX(70px)}}
@keyframes mtn{from{transform:translateX(-22px)}to{transform:translateX(22px)}}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes twinkle{50%{transform:scale(.35);opacity:.35}}
/* judul tema panjang → huruf sedikit lebih kecil */
.cover .big.long{font-size:clamp(38px,6.6vw,78px)}

/* maskot Pensil Bamba (gambar): melayang, bergoyang, berkilau */
.mascot-fig{position:relative;transform-origin:50% 100%;animation:float-sway 4s ease-in-out infinite}
.mascot-fig img{display:block;width:100%;height:auto;max-height:min(76vh,640px);object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))}
.mascot-fig .shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%) no-repeat;background-size:260% 100%;
  -webkit-mask:url(../img/pensil-bamba.webp) center/contain no-repeat;mask:url(../img/pensil-bamba.webp) center/contain no-repeat;
  animation:shine 4.5s ease-in-out infinite}
.mascot::after{content:"";position:absolute;left:18%;right:18%;bottom:-6px;height:18px;border-radius:50%;background:rgba(0,0,0,.18);filter:blur(4px);animation:shadow 4s ease-in-out infinite;z-index:-1}
.mascot-fx{position:absolute;inset:-4% -8%;width:116%;height:108%;pointer-events:none}
@keyframes float-sway{0%,100%{transform:translateY(0) rotate(-1.5deg)}25%{transform:translateY(-12px) rotate(0)}50%{transform:translateY(-4px) rotate(1.5deg)}75%{transform:translateY(-14px) rotate(0)}}
@keyframes shine{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}
@keyframes shadow{25%,75%{transform:scaleX(.85);opacity:.7}}
@media (max-width:700px),(orientation:portrait) and (max-width:900px){.mascot{max-width:260px}}

/* ---------- halaman ketiga: Pojok Baca (suasana senja/malam) ---------- */
.scene-malam{display:none}
body[data-view="literasi"] .scene-siang{display:none}
body[data-view="literasi"] .scene-malam{display:block}
body[data-view="literasi"] .cover{background:#2a1f5c}
body[data-view="literasi"] .stage-footer{color:#fff}
.scene .moon-glow{transform-box:fill-box;transform-origin:center;animation:moon 4s ease-in-out infinite}
.scene .firefly{transform-box:fill-box;transform-origin:center;animation:firefly 5s ease-in-out infinite;filter:drop-shadow(0 0 6px #fff27a)}
.scene .firefly.ff2{animation-duration:6.5s;animation-delay:-2s}
.scene .firefly.ff3{animation-duration:4.2s;animation-delay:-3.3s}
.scene .fly-book{transform-box:fill-box;transform-origin:center;animation:fly 6s ease-in-out infinite}
.scene .fly-book.fb2{animation-duration:7.5s;animation-delay:-2.5s}
.scene .fly-book.fb3{animation-duration:5.2s;animation-delay:-1s}
@keyframes moon{50%{transform:scale(1.12);opacity:.75}}
@keyframes firefly{0%,100%{transform:translate(0,0);opacity:.25}30%{transform:translate(18px,-26px);opacity:1}60%{transform:translate(-14px,-44px);opacity:.6}}
@keyframes fly{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-26px) rotate(6deg)}}
/* papan menu versi malam: ungu bercahaya, huruf emas */
.hang.malam{cursor:default}
.hang.malam .vine{background:repeating-linear-gradient(#ffd463 0 8px,#c98a10 8px 12px)}
.hang.malam .board{color:#ffd463;-webkit-text-stroke:3px #2a1d66;background:repeating-linear-gradient(0deg,#3b2a7a 0 9px,#33246c 9px 11px);border-color:#ffd463;box-shadow:0 5px 0 #1a1245,0 0 22px rgba(255,212,99,.35)}
.hang.malam:hover .board{transform:none}
.wood.malam{color:#ffd463;-webkit-text-stroke:3px #2a1d66;background:repeating-linear-gradient(0deg,#7b5cd6 0 8px,#6f50cb 8px 10px);border-color:#ffd463;box-shadow:0 6px 0 #2a1d66,0 0 24px rgba(123,92,214,.55)}
.wood.malam:active{box-shadow:0 2px 0 #2a1d66}

/* ---------- Story Book & LKPD ---------- */
.b-story{background-color:#7b5cd6}.b-lkpd{background-color:#2a9d8f}
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px}
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.books>*,.sheets>*{min-width:0}
.cover-btn{display:block;width:100%;padding:0;border:none;background:none;cursor:pointer}
.cover-btn img,.cov-ph{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.cov-ph{display:grid;place-items:center;padding:16px;text-align:center;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;color:#fff;overflow:hidden}
.book{display:grid;gap:10px;align-content:start}
.book .cover-btn{border-radius:6px 14px 14px 6px;overflow:hidden;box-shadow:inset 10px 0 0 rgba(0,0,0,.18),0 8px 0 rgba(0,0,0,.15),0 12px 22px rgba(0,0,0,.18);transition:transform .2s}
.book .cover-btn:hover{transform:translateY(-6px) rotate(-1.5deg)}
.book .cov-ph{background:linear-gradient(160deg,#7b5cd6,#e0485f)}
.book .body,.sheet .body{display:grid;gap:6px}
.book .title,.sheet .title{font-weight:800}
.book .meta,.sheet .meta{font-size:14px;color:var(--muted)}
.sheet{background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:10px;align-content:start;position:relative}
.sheet::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:64px;height:16px;border-radius:6px;background:#7b5cd6;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.sheet .cover-btn{border-radius:10px;overflow:hidden;border:2px solid var(--line)}
.sheet .cover-btn img,.sheet .cov-ph{aspect-ratio:4/3}
.sheet .cov-ph{background:linear-gradient(160deg,#2a9d8f,#3a7fc4)}
/* jendela pembaca dokumen */
.reader{width:min(1100px,96vw);height:min(92dvh,900px);padding:0;border:none;border-radius:18px;background:var(--paper);color:var(--ink);overflow:hidden}
.reader[open]{display:grid;grid-template-rows:auto 1fr}
.reader::backdrop{background:rgba(10,8,30,.7)}
.rd-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 14px;border-bottom:2px solid var(--line)}
.rd-head b{font-family:var(--display);font-size:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.reader[data-jenis="storybook"] #rdDown{display:none}
.rd-body{min-height:0;background:#525659;display:grid;place-items:center;overflow:auto}
.rd-body:has(.pdf-page){grid-template-rows:1fr auto;place-items:stretch;overflow:hidden}
.pdf-page{position:relative;min-height:0;display:grid;place-items:center;perspective:1600px}
.pdf-page canvas{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.35);border-radius:4px}
.pdf-msg{position:absolute;color:#fff;font-weight:700}
.pdf-nav{display:flex;gap:14px;align-items:center;justify-content:center;padding:10px;background:rgba(0,0,0,.25);color:#fff}
.pdf-nav .btn{font-size:18px;padding:8px 18px}
.pdf-page canvas.flip-r{animation:flip-r .45s ease}
.pdf-page canvas.flip-l{animation:flip-l .45s ease}
@keyframes flip-r{from{transform:rotateY(-70deg);transform-origin:left center;opacity:.3}to{transform:none}}
@keyframes flip-l{from{transform:rotateY(70deg);transform-origin:right center;opacity:.3}to{transform:none}}
.rd-body iframe{width:100%;height:100%;border:0;background:#fff}
.rd-body img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- video YouTube: pratinjau klik-untuk-putar & judul beranimasi ---------- */
.yt-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;cursor:pointer;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#ff5a5f,#b3122e 75%)}
.yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.yt-facade:hover img{transform:scale(1.05)}
.yt-play{position:absolute;left:50%;top:50%;width:84px;height:60px;margin:-30px 0 0 -42px;border-radius:18px;background:#ff0033;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:yt-pulse 1.8s ease-in-out infinite}
.yt-play::after{content:"";position:absolute;left:33px;top:17px;border-left:24px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.yt-facade:hover .yt-play{animation-duration:.9s}
@keyframes yt-pulse{50%{transform:scale(1.1);box-shadow:0 0 0 12px rgba(255,0,51,.25)}}
.vid-title{font-family:var(--display);font-size:clamp(32px,5vw,44px);font-weight:800;line-height:1.2;margin:2px 0 0;letter-spacing:.02em;
  text-shadow:0 3px 0 rgba(0,0,0,.25)}
.vid-title span{display:inline-block;animation:title-wave 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .09s)}
.vid-title span:nth-child(5n+1){color:var(--sun)}.vid-title span:nth-child(5n+2){color:var(--coral)}
.vid-title span:nth-child(5n+3){color:var(--teal)}.vid-title span:nth-child(5n+4){color:var(--sky)}.vid-title span:nth-child(5n){color:var(--leaf)}
@keyframes title-wave{0%,60%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-8px) rotate(-4deg)}}
.yt-link{font-size:14px;font-weight:700;color:var(--teal);text-decoration:none}
.yt-link:hover{text-decoration:underline}

/* ---------- header halaman 1–3: identitas (daerah, sekolah) + profil, ukuran ringkas ---------- */
.stage-top{right:calc(112px + env(safe-area-inset-right,0px));max-width:none;justify-content:space-between;gap:10px;padding:5px 6px 5px 6px;border-radius:16px}
.st-id,.st-prof{display:flex;align-items:center;gap:7px;min-width:0}
.st-prof{flex:none;gap:8px}
.stage-top .logo{width:34px;height:34px;border-radius:9px;padding:2px;box-shadow:none}
.st-text{display:grid;line-height:1.15;min-width:0}
.st-text b{font-family:var(--display);font-weight:800;font-size:14px;color:#1e3fa8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-text small{font-size:11.5px;font-weight:700;color:#5b4a7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-top .ph{width:34px;height:34px;font-size:15px;border-width:2px}
.stage-top .tb-who small{font-size:9.5px}
.stage-top .tb-who b{font-size:12.5px;max-width:150px}
.stage-top .sbtn.tb-panel{width:34px;height:34px;border-width:2px}
.stage-top .sbtn.tb-panel svg{width:18px;height:18px}
@media (max-width:640px){.stage-top .tb-who{display:none}.stage-top{right:calc(104px + env(safe-area-inset-right,0px))}.st-text b{font-size:12.5px}.st-text small{font-size:10.5px}}
@media (max-width:400px){.stage-top .logo{width:28px;height:28px}.stage-top .ph,.stage-top .sbtn.tb-panel{width:30px;height:30px}}
/* header halaman isi: logo & foto sedikit lebih kecil */
.topbar .logo{width:40px;height:40px;border-radius:10px}
.topbar .ph{width:38px;height:38px;font-size:17px}
.topbar .sbtn.tb-panel{width:38px;height:38px}

/* ---------- halaman 1 (sampul): suasana pagi — matahari terbit, pelangi, balon, burung ---------- */
.scene-pagi{display:none}
body[data-view="mulai"] .scene-siang{display:none}
body[data-view="mulai"] .scene-pagi{display:block}
body[data-view="mulai"] .cover{background:#ffd9b0}
.scene .dawn-glow{transform-box:fill-box;transform-origin:center;animation:moon 5s ease-in-out infinite}
.scene .rainbow{animation:rainbow 4s ease-in-out infinite}
.scene .balloon{transform-box:fill-box;transform-origin:50% 100%;animation:balloon 6s ease-in-out infinite}
.scene .balloon.bl2{animation-duration:7.5s;animation-delay:-2s}
.scene .balloon.bl3{animation-duration:5.4s;animation-delay:-3.5s}
.scene .bird{animation:bird 22s linear infinite}
.scene .bird.b2{animation-duration:28s;animation-delay:-9s}
.scene .bird.b3{animation-duration:25s;animation-delay:-17s}
.scene .bird path{transform-box:fill-box;transform-origin:center;animation:flap .5s ease-in-out infinite alternate}
@keyframes rainbow{50%{opacity:.5}}
@keyframes balloon{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-34px) rotate(4deg)}}
@keyframes bird{from{transform:translate(-120px,230px)}50%{transform:translate(800px,170px)}to{transform:translate(1720px,240px)}}
@keyframes flap{to{transform:scaleY(.45)}}
/* konten halaman 1–3 mulai di bawah bar header (tidak tertutup) */
.cover-in{padding-top:calc(74px + env(safe-area-inset-top,0px))}

/* ---------- transisi pergantian halaman ----------
   Animasi diputar saat elemen muncul (hidden → tampil). Arah: body[data-dir] = fwd / back */
.cover>svg.scene{animation:scene-in .8s ease backwards}
.cover-title,.menu-pane{animation:pane-in .6s cubic-bezier(.2,.8,.3,1.15) backwards}
body[data-dir="back"] .cover-title,body[data-dir="back"] .menu-pane{animation-name:pane-in-back}
.menu-pane>*{animation:pop-in .55s cubic-bezier(.2,.8,.3,1.4) backwards}
.menu-pane>.wood{animation:pop-in .55s cubic-bezier(.2,.8,.3,1.4) backwards,float-btn 3.2s ease-in-out infinite}
.menu-pane>:nth-child(2){animation-delay:.09s,0s}.menu-pane>:nth-child(3){animation-delay:.18s,-1.07s}.menu-pane>:nth-child(4){animation-delay:.27s,-2.13s}
.mascot.in{animation:mascot-in .75s cubic-bezier(.2,.8,.3,1.3) backwards}
.view{animation:view-in .5s cubic-bezier(.2,.8,.3,1) backwards}
body[data-dir="back"] .view{animation-name:view-in-back}
.view>.banner{animation:banner-in .6s cubic-bezier(.2,.8,.3,1.25) .05s backwards}
#pageTitle{display:block;animation:title-in .45s ease backwards}
@keyframes scene-in{from{opacity:0}}
@keyframes pane-in{from{opacity:0;transform:translateX(70px) scale(.96)}}
@keyframes pane-in-back{from{opacity:0;transform:translateX(-70px) scale(.96)}}
@keyframes pop-in{from{opacity:0;transform:translateY(26px) scale(.85)}}
@keyframes mascot-in{from{opacity:0;transform:translateY(40px) scale(.9)}}
@keyframes view-in{from{opacity:0;transform:translateX(48px)}}
@keyframes view-in-back{from{opacity:0;transform:translateX(-48px)}}
@keyframes banner-in{from{opacity:0;transform:scale(.92)}}
@keyframes title-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- judul halaman Materi, Story Book, LKPD: huruf warna-warni bergaris putih ---------- */
.banner h2.fun-title{font-size:clamp(38px,6vw,58px);letter-spacing:.03em;-webkit-text-stroke:0;text-shadow:none;line-height:1.1}
.fun-title span{display:inline-block;-webkit-text-stroke:6px #fff;paint-order:stroke fill;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));
  animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-delay:calc(var(--i) * .13s)}
.fun-title span:nth-child(6n+1){color:#f59f00}.fun-title span:nth-child(6n+2){color:#e8590c}.fun-title span:nth-child(6n+3){color:#e64980}
.fun-title span:nth-child(6n+4){color:#7048e8}.fun-title span:nth-child(6n+5){color:#1c7ed6}.fun-title span:nth-child(6n){color:#2f9e44}
/* Materi: huruf meletup membesar bergantian */
.fun-title.pop span{animation-name:t-pop}
@keyframes t-pop{0%,40%,100%{transform:scale(1) rotate(0)}14%{transform:scale(1.32) rotate(-7deg)}24%{transform:scale(.92) rotate(3deg)}}
/* Story Book: huruf berputar seperti halaman buku dibalik */
.fun-title.flip span{animation-name:t-flip;animation-duration:3.6s}
@keyframes t-flip{0%{transform:perspective(400px) rotateY(0)}28%,100%{transform:perspective(400px) rotateY(360deg)}}
/* LKPD: huruf melompat lalu memantul (gepeng sesaat) */
.fun-title.drop span{transform-origin:50% 100%;animation-name:t-drop;animation-delay:calc(var(--i) * .2s)}
@keyframes t-drop{0%,34%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(-22px) rotate(8deg) scale(1)}22%{transform:translateY(0) scale(1.18,.78)}28%{transform:translateY(-5px) scale(.95,1.06)}}

/* ---------- animasi menu halaman 1–3 (terus berjalan) ---------- */
/* papan gantung berayun dari tali */
.hang .board{transform-origin:50% -70px;animation:swing 3.4s ease-in-out infinite}
.hang .mic{transform-origin:50% 100%;animation:sing 1.2s ease-in-out infinite}
/* tombol kayu: melayang (float-btn di atas) + kilau cahaya menyapu */
.wood{position:relative;overflow:hidden}
.wood::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);translate:-130% 0;animation:wood-shine 4.5s ease-in-out infinite}
.menu-pane>:nth-child(3)::after{animation-delay:.5s}.menu-pane>:nth-child(4)::after{animation-delay:1s}
.wood.malam::after{background:linear-gradient(100deg,transparent 38%,rgba(255,228,140,.55) 50%,transparent 62%)}
.wood .ic{animation:icon-wiggle 2.6s ease-in-out infinite}
.menu-pane>:nth-child(3) .ic{animation-delay:-.9s}.menu-pane>:nth-child(4) .ic{animation-delay:-1.8s}
.wood.malam{animation-name:pop-in,float-btn,glow-night;animation-duration:.55s,3.2s,2.6s;animation-iteration-count:1,infinite,infinite;animation-timing-function:cubic-bezier(.2,.8,.3,1.4),ease-in-out,ease-in-out;animation-fill-mode:backwards,none,none}
.menu-pane>.wood.malam:nth-child(2){animation-delay:.09s,0s,0s}.menu-pane>.wood.malam:nth-child(3){animation-delay:.18s,-1.07s,-1.3s}
/* halaman 1: judul & tombol START */
.cover .mari{animation:mari 3s ease-in-out infinite}
.cover .big span{animation:word-wobble 2.8s ease-in-out infinite}
.cover .big span:nth-child(2){animation-delay:-.93s}.cover .big span:nth-child(3){animation-delay:-1.86s}.cover .big span:nth-child(4){animation-delay:-2.3s}
.startbtn{animation:start-bounce 2s ease-in-out infinite}
@keyframes swing{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes sing{0%,100%{rotate:-10deg;scale:1}50%{rotate:12deg;scale:1.12}}
@keyframes float-btn{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes wood-shine{0%,55%{translate:-130% 0}85%,100%{translate:130% 0}}
@keyframes icon-wiggle{0%,60%,100%{rotate:0deg;scale:1}70%{rotate:-12deg;scale:1.15}80%{rotate:10deg;scale:1.15}90%{rotate:-4deg;scale:1.05}}
@keyframes glow-night{50%{box-shadow:0 6px 0 #2a1d66,0 0 38px rgba(255,212,99,.6)}}
@keyframes mari{0%,100%{rotate:0deg;scale:1}50%{rotate:2deg;scale:1.05}}
@keyframes word-wobble{0%,70%,100%{rotate:0deg;translate:0 0}78%{rotate:-3deg;translate:0 -6px}88%{rotate:2.5deg;translate:0 -2px}}
@keyframes start-bounce{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* header halaman 1–3: latar putih dipotong — identitas sekolah & profil guru jadi dua kotak terpisah */
.stage-top{background:none;padding:0;border-radius:0;box-shadow:none}
.st-id,.st-prof{background:rgba(255,255,255,.88);border-radius:16px;padding:5px 12px 5px 6px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.st-id{flex:0 1 auto;max-width:100%}
.st-prof{padding:5px 6px}

/* ---------- maskot bisa diklik: melompat + balon ucapan ---------- */
.mascot{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mascot:focus-visible{outline:none}
.mascot:focus-visible .mascot-fig img{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px var(--sun))}
.mascot.tap .mascot-fig img{animation:mascot-tap .65s cubic-bezier(.3,1.6,.5,1)}
@keyframes mascot-tap{0%{scale:1;translate:0 0}20%{scale:1.08 .9;translate:0 6px}45%{scale:.95 1.08;translate:0 -26px}70%{scale:1.03 .97;translate:0 0}100%{scale:1;translate:0 0}}
.mascot-say{position:absolute;z-index:3;left:50%;top:-4%;translate:-50% 0;max-width:min(260px,90%);margin:0;padding:10px 16px;border-radius:18px;
  background:#fff;color:#1d3a3a;font-family:var(--display);font-weight:800;font-size:clamp(15px,1.8vw,19px);line-height:1.2;text-align:center;
  box-shadow:0 6px 0 rgba(0,0,0,.12),0 0 0 3px var(--sun);pointer-events:none}
.mascot-say::after{content:"";position:absolute;left:50%;bottom:-12px;translate:-50% 0;border:12px solid transparent;border-bottom:0;border-top-color:#fff}
.mascot-say.show{animation:say-pop .35s cubic-bezier(.2,.8,.3,1.5)}
@keyframes say-pop{from{opacity:0;scale:.6;translate:-50% 14px}}
/* balon ucapan di kiri atas maskot (tidak menutupi tulisan di topi) */
.mascot-say{left:-8%;top:16%;translate:0 0}
.mascot-say::after{left:auto;right:18px;translate:0 0;bottom:-12px}
@keyframes say-pop{from{opacity:0;scale:.6}}

/* ---------- maskot Pensil Bamba (SVG): berkedip, jempol, rumbai, tablet, mulut berbicara ---------- */
.mascot-fig svg.pensil{display:block;width:100%;height:auto;max-height:min(76vh,640px);overflow:visible;filter:drop-shadow(0 10px 10px rgba(0,0,0,.18))}
.mascot.tap .mascot-fig svg{animation:mascot-tap .65s cubic-bezier(.3,1.6,.5,1)}
.pensil .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.pensil .arm-l{transform-box:view-box;transform-origin:132px 344px;animation:wave-hi 1.6s ease-in-out infinite}
.pensil .arm-r{transform-box:view-box;transform-origin:266px 344px;animation:tablet 3.2s ease-in-out infinite}
.pensil .tassel{transform-box:view-box;transform-origin:370px 114px;animation:tassel-swing 1.8s ease-in-out infinite alternate}
.pensil .screen-glow{animation:screen-glow 1.6s ease-in-out infinite}
.pensil .mouth{transform-box:fill-box;transform-origin:50% 8%}
.mascot.talking .pensil .mouth{animation:talk .17s ease-in-out infinite alternate}
.mascot.talking .pensil .arm-l{animation-duration:.8s}
@keyframes thumb{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes tablet{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes tassel-swing{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes screen-glow{50%{opacity:.45}}
@keyframes talk{from{transform:scaleY(.25)}to{transform:scaleY(1.15)}}
@keyframes wave-hi{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(8deg)}}

/* ---------- menu Literasi (halaman 3): 4 tombol, sedikit lebih ringkas ---------- */
.menu-pane.malam{gap:10px}
.menu-pane.malam .wood{font-size:clamp(22px,3vw,30px);padding-block:2px}
.menu-pane.malam .ic{width:44px;height:44px}
.menu-pane>.wood.malam:nth-child(4){animation-delay:.27s,-2.13s,-2s}
.menu-pane>.wood.malam:nth-child(5){animation-delay:.36s,-.6s,-.7s}
.menu-pane>:nth-child(5){animation-delay:.36s,-.6s}
.menu-pane>:nth-child(5)::after{animation-delay:1.5s}
.menu-pane>:nth-child(5) .ic{animation-delay:-.4s}

/* ---------- Beranda: Apersepsi (balon percakapan) ---------- */
.apersepsi{display:grid;gap:10px;margin-top:12px}
.ap-bubble{position:relative;margin:0;padding:12px 14px 12px 50px;border-radius:18px 18px 18px 6px;background:var(--sun-soft);border:2px solid var(--sun);font-weight:700;
  animation:ap-in .5s cubic-bezier(.2,.8,.3,1.3) backwards;animation-delay:calc(var(--i) * .12s)}
.ap-bubble:nth-child(even){background:var(--sky-soft);border-color:var(--sky)}
.ap-no{position:absolute;left:12px;top:10px;width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:15px}
@keyframes ap-in{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* ---------- Tautan dari guru ---------- */
.links-wrap{display:grid;gap:12px}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.link-card{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:12px 14px;transition:transform .15s,border-color .15s}
.link-card:hover{transform:translateY(-3px);border-color:var(--teal)}
.lk-ic{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);display:grid;place-items:center;font-size:20px}
.lk-body{display:grid;min-width:0}
.lk-body b{font-weight:800}
.lk-body small{color:var(--muted);font-size:14px}
.lk-body em{font-style:normal;font-size:12px;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-go{font-weight:800;font-size:14px;color:#1d3a3a;background:var(--sun);border-radius:999px;padding:6px 12px}

/* ---------- Refleksi ---------- */
.b-refleksi{background-color:#e0567f}
.fun-title.heart span{animation-name:t-heart;animation-duration:2.6s}
@keyframes t-heart{0%,30%,100%{transform:scale(1)}8%{transform:scale(1.3)}16%{transform:scale(.95)}22%{transform:scale(1.18)}}
.refleksi{gap:16px}
.refl-q{border:2px solid var(--line);border-radius:16px;padding:14px;margin:0;display:grid;gap:10px}
.refl-q legend{position:relative;padding:0 6px 0 38px;font-weight:800;font-size:18px;line-height:1.3}
.refl-q legend .ap-no{left:0;top:-2px}
.emo-pick{display:flex;flex-wrap:wrap;gap:8px}
.emo-pick label{cursor:pointer}
.emo-pick input{position:absolute;opacity:0;pointer-events:none}
.emo-pick span{display:grid;justify-items:center;gap:2px;min-width:78px;padding:8px 6px;border:2px solid var(--line);border-radius:14px;font-size:13px;font-weight:700;transition:transform .15s}
.emo-pick b{font-size:36px;line-height:1}
.emo-pick label:hover span{transform:translateY(-3px)}
.emo-pick input:checked+span{border-color:var(--sun);background:var(--sun-soft);transform:scale(1.08)}
.emo-pick input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}
.refl-done{text-align:center;display:grid;gap:8px;padding:10px}
.big-emo{font-size:64px;animation:t-heart 1.6s ease-in-out infinite}


/* ---------- warna mata pelajaran (website & Panel Guru) ---------- */
.mp-merah{--mp:#e03131}.mp-oranye{--mp:#e8590c}.mp-kuning{--mp:#e0a100}.mp-hijau{--mp:#2f9e44}
.mp-teal{--mp:#0c8599}.mp-biru{--mp:#1971c2}.mp-ungu{--mp:#7048e8}.mp-pink{--mp:#d6336c}

/* ---------- navigasi mata pelajaran (halaman Materi) ---------- */
.mapel-nav{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;scroll-snap-type:x proximity}
.mp-btn{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;border:3px solid var(--mp);background:var(--paper);color:var(--ink);
  border-radius:999px;padding:8px 16px;font-family:var(--display);font-weight:800;font-size:17px;box-shadow:0 4px 0 var(--mp);transition:transform .15s,background .15s,color .15s}
.mp-btn small{font-family:var(--body);font-size:12px;font-weight:800;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--mp);color:#fff}
.mp-btn:hover{transform:translateY(-2px)}
.mp-btn[aria-pressed="true"]{background:var(--mp);color:#fff;transform:translateY(2px);box-shadow:0 2px 0 var(--mp)}
.mp-btn[aria-pressed="true"] small{background:#fff;color:var(--mp)}
.mp-semua{--mp:var(--teal)}
.mitem .mp-chip{display:inline-block;margin-bottom:6px;font-weight:800;font-size:13px;padding:3px 12px;border-radius:999px;color:#fff;background:var(--mp)}
#materiList.swap{animation:view-in .4s cubic-bezier(.2,.8,.3,1) backwards}

/* Profil Guru: peran, sekolah, daerah — huruf, ukuran, warna sama, tanpa tebal */
.profile-info p{margin:3px 0 0;font-family:var(--body);font-size:17px;font-weight:400;line-height:1.4;color:var(--muted)}
.profile-info h3{margin-bottom:4px}