/* =====================================================================
   TumbuhTahu 3D — TATA LETAK RESPONSIF (BEKU, mesin)
   Desktop/tablet: dock menu di bawah, panel dan overlay 2–3 kolom tanpa scroll.
   HP mendatar (landscape): satu baris atas yang ringkas.  HP tegak: baris kedua ikon.
   ===================================================================== */

/* ---------- dock menu belajar ---------- */
#dock{position:fixed;z-index:21;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:8px;padding:8px;background:var(--card);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
#dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:86px;height:68px;padding:4px 10px;border-radius:20px;background:#f3f8fc;font-weight:800;font-size:12.5px;line-height:1.1;color:var(--navy);transition:transform .12s,background .15s}
#dock button:hover{background:#e6f2fc}
#dock button:active{transform:scale(.95)}
#dock .e{font-size:28px;line-height:1}
#dock button.lock{opacity:.55}
body.noui #dock{display:none!important}
body:not(.touch).m-jelajah #keys{bottom:98px}
#near{bottom:max(100px,calc(env(safe-area-inset-bottom) + 92px))}
body:not(.touch).m-jelajah #near{bottom:140px}
@media (max-width:1240px){body.cardopen #dock{left:calc(50% + 196px)}}
@media (max-width:1000px){#dock button{min-width:66px;font-size:11px}#dock{gap:5px}}

/* ---------- panel (bangunan, karakter, pengaturan) ---------- */
.panel h3,.sec h3{margin:0 0 8px;font-size:16px;color:var(--navy)}
.sec{margin-bottom:14px}
.sgrid{display:block}
@media (min-width:700px){
  .panel{width:min(760px,94vw);max-height:92vh;padding:18px 22px}
  #blist{grid-template-columns:repeat(2,1fr)}
  #charlist{grid-template-columns:repeat(2,1fr)}
  .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;align-items:start}
  .sgrid .s1{grid-row:span 2}
  .sec{margin-bottom:6px}
}
@media (min-width:1000px){
  .panel{width:min(1040px,94vw)}
  #blist{grid-template-columns:repeat(3,1fr)}
  .sgrid{grid-template-columns:1.6fr 1fr 1fr}
  .help{font-size:13px;line-height:1.4}
  .sgrid .s1{grid-row:auto}
}
@media (min-width:700px) and (max-height:520px){
  .panel{padding:10px 14px}.panel h2{margin-bottom:6px;font-size:17px}
  .row{min-height:44px;padding:4px 10px}.row i{width:30px;height:30px;font-size:14px}
  .help{font-size:11.5px;line-height:1.3}.help li{margin:1px 0}
  #blist{grid-template-columns:repeat(3,1fr)}
  .sgrid{grid-template-columns:1.5fr 1fr 1fr}.sgrid .s1{grid-row:auto}
  .panel h3,.sec h3{font-size:14px;margin-bottom:4px}.sec{margin-bottom:2px}
  #prog{font-size:12px;line-height:1.35;padding:6px 8px;margin:2px 0 6px}.prow{margin-top:4px}.ptxt{font-size:11px;margin-top:2px}
  #musnote{font-size:11px;margin-bottom:4px}
  #qual button,#mus button{height:38px;font-size:12.5px}.prow .btn{height:38px}
}

/* ---------- overlay buku (#bk) lebar: 2 kolom, tanpa scroll ---------- */
#bk .bkcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 22px;align-items:center}
#bk .bkL{display:flex;flex-direction:column;justify-content:center;min-width:0}
#bk .bkR{min-width:0}
#bk .bkL>*{width:100%}
#bk .bkL .bkrobo{margin-bottom:0}
#bk .bkL .bkrobo:only-child{flex-direction:column;align-items:center;gap:10px}
#bk .bkL .bkrobo:only-child>img{width:clamp(70px,17vh,130px)}
#bk .bkL .bkrobo:only-child .bkbub::before{left:50%;top:-10px;bottom:auto;margin-left:-8px;transform:rotate(135deg)}
@media (min-width:760px){
  #bk .bkc{width:min(860px,96vw)}
  #bk .bkc.two{width:min(1080px,96vw);padding:16px 22px}
  #bk .bkc.wide{width:min(1120px,96vw)}
  #bk .two .bkpic{margin:0 0 8px;padding:12px}
  #bk .two .bkpic img{max-height:min(34vh,300px)}
  #bk .two .bkbub{font-size:20px}
  #bk .two .bkn{margin-top:8px}
  #bk .two .bkg{margin:0 0 8px}
  #bk .two .bkc2{min-height:92px}
  #bk .two .bkc2 img{width:min(76px,60%);max-height:70px}
  #bk .two .akmz{width:min(100%,46vh,440px);margin:0 auto}
  #bk .two .akmem{max-width:min(100%,62vh)!important}
  #bk .two .akpad{margin:6px auto 16px}
  /* daftar-daftar jadi grid */
  #bk .bkc>div:has(>.bkt){display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #bk .bkc>div:has(>.bkt)>.bkt{margin:0}
  #bk .bkc>div:has(>.akrow){display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #bk .bkc>div:has(>.akrow)>.akrow{margin:0}
  #bk .bkc>div:has(>.akrow)>.bkrobo,#bk .bkc>div:has(>.akrow)>.bkn,#bk .bkc>div:has(>.bkt)>.bkn{grid-column:1/-1}
  #bk .akcards{grid-template-columns:repeat(5,1fr)}
  #bk .aklv{grid-template-columns:repeat(10,1fr)}
  #bk .akhub{grid-template-columns:1fr 1fr;max-width:620px;margin-left:auto;margin-right:auto}
  #bk .akcert{padding:14px 20px}#bk .akcert h2{font-size:30px}
  #bk .akrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:14px}
  #bk .rpbody{max-height:min(38vh,300px)}
}
@media (min-width:1180px){#bk .rpbody{max-height:min(42vh,330px)}}
@media (min-width:760px) and (max-height:700px){
  #bk .bkc{max-height:97vh;padding:12px 18px}
  #bk .two .bkpic img{max-height:min(30vh,230px)}
  #bk .two .bkc2{min-height:74px}#bk .two .bkc2 img{width:min(56px,50%);max-height:54px}
  #bk .two .bkbub{font-size:17px;padding:8px 12px}
  #bk .bkrobo>img{width:46px}
  #bk .akcert .who{font-size:28px}#bk .akcert .st{font-size:26px}
}
@media (max-height:500px) and (min-width:560px){
  #bk{padding:6px 10px}
  #bk .bkc{max-height:98vh;padding:8px 14px;border-radius:20px}
  #bk .bkh{margin-bottom:2px}#bk .bkh h2{font-size:16px}#bk .bkx{width:34px;height:34px}
  #bk .bks{margin:0 0 2px;font-size:11.5px}#bk .bkdots{display:none}
  #bk .bkbub,#bk .two .bkbub{font-size:14.5px;padding:6px 10px;line-height:1.3}#bk .bkbub h3{font-size:15px}
  #bk .bkrobo>img{width:38px}
  #bk .bkpic,#bk .two .bkpic{padding:4px;margin:0 0 4px}#bk .bkpic img,#bk .two .bkpic img{max-height:25vh}
  #bk .bkc2,#bk .two .bkc2{min-height:50px;font-size:13.5px;padding:4px 6px;border-radius:14px;box-shadow:0 3px 0 rgba(22,58,99,.14)}
  #bk .bkc2 img,#bk .two .bkc2 img{width:40px;max-height:40px}
  #bk .bkg,#bk .two .bkg{gap:6px;margin:0 0 4px}
  #bk .bkn .btn{height:38px;font-size:13.5px}
  #bk .bkf{min-height:18px;font-size:13px;margin:2px 0}
  #bk .two .akmz{width:min(100%,56vh)}
  #bk .akpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,42px);gap:4px}
  #bk .akpad button{font-size:20px}
  #bk .akcert{padding:8px 14px}#bk .akcert img.lg{height:30px}#bk .akcert h2{font-size:22px;margin:2px 0}#bk .akcert .who{font-size:22px;margin:2px 0}
  #bk .akcert p{margin:2px 0;font-size:13px}#bk .akcert .st{font-size:20px}#bk .akcert .sg{margin-top:6px}#bk .akcert .fine{margin-top:4px}
  #bk .akcards{grid-template-columns:repeat(5,1fr)}#bk .akc{min-height:78px}#bk .akc img{width:40px;height:40px}
  #bk .akcard img{width:80px}
  #bk .akrow{padding:3px 8px;margin-bottom:0}#bk .akrow img{width:34px;height:34px}#bk .akrow b{font-size:14.5px}#bk .akrow small{display:none}#bk .akrow u{width:22px;height:22px;font-size:12px}
  #bk .bkrobo{margin:0 0 4px}
  #bk .bkt{padding:6px 10px;margin-bottom:0}
  #bk .bkr .bkc2{min-height:40px}
  #bk .akcert .sub{font-size:12px}#bk .akcert .who{border-bottom-width:2px}
  #bk .akrap{grid-template-columns:1fr 1fr 1.3fr;gap:8px;font-size:12px}#bk .rpc{padding:6px 8px}#bk .rpc h3{margin-bottom:4px;font-size:13px}#bk .rpc h3 i{width:22px;height:22px;font-size:12px}#bk .rpL{display:contents}#bk .rpbody{max-height:150px}#bk .rpchips{margin-top:4px}#bk .dis p{font-size:10.5px}
}

/* ---------- layar pendaftaran: 2 kolom + karakter 3D berjalan ---------- */
#intro .pc canvas.wcv{display:block;width:100%;height:150px;pointer-events:none}
#intro .pc.has3d img{display:none}
@media (min-width:700px){
  #intro .icard{width:min(960px,96vw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:34px;align-items:start;padding:20px 30px 24px}
  #intro .icard>*{grid-column:1}
  #intro .icard>#introX{grid-column:auto}
  #intro .icard>#whoChar{grid-column:2;grid-row:1;margin-top:8px;font-size:16px;align-self:end}
  #intro .icard>.pick{grid-column:2;grid-row:2/span 9;align-self:center;gap:16px}
  #intro .pc{padding:10px 8px 12px;border-radius:26px;background:linear-gradient(180deg,#eaf5ff,#f4f8fc)}
  #intro .pc canvas.wcv{height:min(330px,44vh)}
  #intro .pc img{height:min(300px,40vh);max-width:200px}
  #intro .pc b{font-size:16px}
  #intro.pickmode .icard{display:block;width:min(520px,100%)}
}
@media (min-width:700px) and (max-height:560px){
  #intro .icard{padding:10px 20px 12px;column-gap:22px}
  #intro .ilogo{width:130px;margin:0 auto}
  #intro h1{font-size:20px;margin:2px 0}#intro .sub{display:none}
  #nameIn{height:44px;font-size:17px}
  #intro .who{margin:8px 0 4px}
  #intro .ages{margin-bottom:6px}#intro .ages button{padding:6px 2px;font-size:14px}
  #introGo{height:46px;margin-top:8px;font-size:16px}
  #intro .pc canvas.wcv{height:min(200px,46vh)}
  #intro .pc img{height:min(190px,44vh)}
  #isave{margin-top:6px;min-height:0}
}
@media (max-width:699px){
  #intro .pc canvas.wcv{height:128px}
}
/* saran HP mendatar (hanya layar sentuh tegak) */
#rotip{display:none}
@media (pointer:coarse) and (orientation:portrait) and (max-width:700px){
  #rotip{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:16px;background:#fff8dc;border:3px solid #f3d97a;font-size:13px;font-weight:800;color:var(--navy);text-align:left;line-height:1.3}
  #rotip button{flex:none;height:38px;padding:0 12px;border-radius:12px;background:#ffc83d;color:#5a3b00;font-weight:800;font-size:13px}
}

/* ---------- HP mendatar: satu baris atas ringkas ---------- */
@media (max-height:500px) and (min-width:560px){
  #top{top:max(6px,env(safe-area-inset-top))}
  #title{height:40px;min-height:40px;padding:2px 8px}#title .logo{height:30px}
  #tools{gap:6px}#tools .tbtn{height:40px;min-width:40px;padding:0 8px;border-radius:14px}#tools .tbtn .t{display:none}
  #tools .tbtn .ico{width:24px;height:24px;font-size:13px}
  #modes{top:max(6px,env(safe-area-inset-top));left:50%;transform:translateX(calc(-100% - 4px));padding:3px;border-radius:16px}
  #modes>button{height:34px;padding:0 9px}#modes .mt{display:none}
  #dock{top:max(6px,env(safe-area-inset-top));bottom:auto;left:50%;transform:translateX(4px);padding:3px;gap:2px;border-radius:16px}
  #dock button{min-width:40px;height:34px;padding:0 7px;border-radius:12px;background:#f3f8fc}
  #dock .t{display:none}#dock .e{font-size:20px}
  body.cardopen #dock{left:50%}
  #stars{top:max(6px,env(safe-area-inset-top));left:calc(max(10px,env(safe-area-inset-left)) + 96px);min-height:40px;padding:3px 10px 3px 4px;border-radius:14px}
  #stars .sico{width:30px;height:30px}
  #btnme{top:calc(max(6px,env(safe-area-inset-top)) + 46px);padding:0;width:40px;height:40px;min-width:40px}#btnme .t{display:none}
  #tod{top:calc(max(6px,env(safe-area-inset-top)) + 92px);height:38px}
  #toast{top:calc(max(6px,env(safe-area-inset-top)) + 52px)}
  #hint{top:calc(max(6px,env(safe-area-inset-top)) + 50px);font-size:12.5px;padding:6px 8px 6px 12px}
  #flag{top:calc(max(6px,env(safe-area-inset-top)) + 48px)}
  #card{width:min(340px,48vw);padding:10px 12px;border-radius:20px}
  #cdesc{margin:6px 0 2px;font-size:13px}#cdist{margin-bottom:6px}
  #card .btn{height:44px;font-size:14px}
  #near{bottom:max(14px,env(safe-area-inset-bottom))}
  body:not(.touch).m-jelajah #near{bottom:56px}
  #acts .ab{width:62px;height:62px}
  #joy{width:112px;height:112px}
}
@media (max-height:500px) and (min-width:560px) and (max-width:720px){#btnchar{display:none}}

/* ---------- HP mendatar sempit/pendek (mis. bingkai artefak ~650x270) ---------- */
@media (max-height:500px) and (min-width:560px) and (max-width:900px){
  #stars{gap:6px;padding:3px 8px 3px 4px}
  #stars .stx small,#stars #sArrow{display:none}
  #stars .stx b{font-size:15px}
  #tod{width:40px;min-width:40px;padding:0;justify-content:center}#tod .t{display:none}
}
@media (max-height:340px) and (min-width:560px){
  #acts{gap:8px;bottom:max(12px,env(safe-area-inset-bottom))}
  #acts .ab{width:56px;height:56px;font-size:10.5px}#acts .ab svg{width:22px;height:22px}
  #joy{width:104px;height:104px;bottom:max(14px,env(safe-area-inset-bottom))}
  #joyknob{width:46px;height:46px;margin:-23px 0 0 -23px}
  #tod{top:calc(max(6px,env(safe-area-inset-top)) + 90px);height:36px;width:36px;min-width:36px}
  #btnme{top:calc(max(6px,env(safe-area-inset-top)) + 46px);width:38px;height:38px;min-width:38px}
}

/* ---------- HP tegak: baris kedua berisi ikon peta + dock ---------- */
@media (max-width:640px) and (min-height:501px){
  #modes .mt{display:none}#modes>button{padding:0 9px}
  #dock{top:calc(max(10px,env(safe-area-inset-top)) + 58px);bottom:auto;left:calc(max(12px,env(safe-area-inset-left)) + 92px);transform:none;padding:4px;gap:2px;border-radius:18px}
  #dock button{min-width:38px;height:40px;padding:0 6px;border-radius:14px}
  #dock .t{display:none}#dock .e{font-size:20px}
  body.cardopen #dock{left:calc(max(12px,env(safe-area-inset-left)) + 92px)}
  #near{bottom:max(14px,env(safe-area-inset-bottom))}
}

/* ---------- Pengaturan: kartu bernada, pemisah jelas, ramah anak ---------- */
#setp .sgrid{gap:14px!important;align-items:stretch!important}
#setp .sec{background:var(--cf);border:2px solid var(--cb);border-radius:20px;padding:12px 14px 14px;margin:0!important;min-width:0}
#setp .c-blue{--cb:#cfe6ff;--cf:#f3f8ff;--ca:#0878F9}#setp .c-green{--cb:#c9ecd0;--cf:#f2fbf4;--ca:#55B957}#setp .c-orange{--cb:#ffddb8;--cf:#fff8ef;--ca:#F28B35}
#setp .sec h3{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:17px;color:var(--navy)}
#setp .sec h3 i{font-style:normal;width:32px;height:32px;border-radius:11px;background:var(--ca);display:grid;place-items:center;font-size:17px;flex:none}
#setp .help{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13px}
#setp .help li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:7px 10px;background:#fff;border-radius:13px}
#setp .help li span{font-size:19px;line-height:1.15;flex:none}
#setp .help p{margin:0;line-height:1.32;color:var(--ink)}#setp .help b{display:block;font-size:13.5px;color:var(--navy)}
#setp .lab{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#5b8a62;margin:4px 0 5px}
#setp #qual,#setp #mus{background:#e3f3e7;border-radius:15px;padding:4px;gap:4px;margin:0 0 8px}
#setp #qual button,#setp #mus button{background:transparent;height:40px;border-radius:12px;font-size:13.5px}
#setp #qual button.on,#setp #mus button.on{background:var(--green);color:#fff;box-shadow:0 2px 0 #3d8d40}
#setp #musnote{font-size:12px;margin:0 0 8px}
#setp .sec .prow{margin-top:0}#setp #sndbtn{height:44px;border-radius:14px;background:#fff;border:2px solid #c9ecd0}
#setp #sndbtn.off{background:#f3f3f3;border-color:#ddd;color:#7a8a99}
#setp #prog{background:transparent;padding:0;margin:0 0 10px}
#setp .pghead{display:flex;align-items:center;gap:11px;margin-bottom:10px}
#setp .pghead b{display:block;font-size:18px;color:var(--navy);line-height:1.15;word-break:break-word}#setp .pghead small{font-size:12.5px;color:var(--mute);font-weight:700}
#setp .pgav{width:46px;height:46px;border-radius:50%;background:#ffc83d;color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:22px;font-family:'Baloo 2',sans-serif;flex:none;box-shadow:0 3px 0 #d9a400}
#setp .pgchips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#setp .pgchip{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:7px 9px}#setp .pgchip>span{font-size:20px}
#setp .pgchip b{display:block;font-size:15px;color:var(--navy);line-height:1.1}#setp .pgchip small{font-size:11px;color:var(--mute);font-weight:700}
#setp .pgguest{font-size:12px;color:#b05f10;font-weight:700;margin:6px 0 0}
#setp .s3 .prow:not(.dz) .btn{height:42px;font-size:13.5px;min-width:0}
#setp .prow.dz{margin-top:12px;padding-top:10px;border-top:2px dashed #ffddb8}
#setp .prow.dz .btn{height:36px;font-size:12.5px;background:#fff;color:#c43a3a;border:2px solid #f3c4c4;box-shadow:none}
#setp .ptxt{margin:10px 2px 0;font-size:12px;color:var(--mute)}
@media (min-width:1000px){#setp .sgrid{grid-template-columns:1.35fr 1fr 1fr!important}}
@media (min-width:700px) and (max-height:520px){
  #setp .sec{padding:7px 9px 8px}#setp .sec h3{font-size:14px;margin-bottom:5px}#setp .sec h3 i{width:24px;height:24px;font-size:13px}
  #setp .help{gap:3px;font-size:11px}#setp .help li{padding:3px 7px}#setp .help b{font-size:11.5px;display:inline;margin-right:4px}#setp .help li span{font-size:14px}
  #setp #qual button,#setp #mus button{height:32px;font-size:12px}#setp .lab{margin:2px 0 3px;font-size:10.5px}#setp #qual,#setp #mus{margin-bottom:4px}
  #setp .pgchip{padding:3px 6px}#setp .pgchip>span{font-size:15px}#setp .pgchip b{font-size:12.5px}#setp .pghead{margin-bottom:5px}#setp .pgav{width:34px;height:34px;font-size:17px}
  #setp #sndbtn,#setp .s3 .prow:not(.dz) .btn{height:34px}#setp .prow.dz{margin-top:6px;padding-top:6px}#setp .prow.dz .btn{height:28px}#setp .ptxt{font-size:10px}
}

/* ---------- adegan cerita 3D: sembunyikan antarmuka dunia ---------- */
body.story #hud,body.story #labels,body.story #dock,body.story #modes,body.story #tod,body.story #stars,body.story #near,body.story #keys,body.story #joy,body.story #acts,body.story #hint,body.story #musbtn,body.story #toast{display:none!important}