/* ==========================================================
   TAMASYA-HI - Gaya "Buku Cerita Anak"
   Desain orisinal: blok mainan kayu, bukit, dan matahari.
   ========================================================== */
:root{
  --kertas:#FFF9EF;
  --kartu:#FFFFFF;
  --tinta:#2B3A42;
  --tinta-lembut:#5B6B74;
  --garis:#2B3A42;
  --hijau:#3B9E5F;  --hijau-muda:#E2F3E7;
  --biru:#2E7FC2;   --biru-muda:#E3EFFA;
  --jingga:#F08A24; --jingga-muda:#FDEEDC;
  --ungu:#8A5FC0;   --ungu-muda:#F0E9FA;
  --kuning:#FFC93C;
  --merah:#E2574C;
  --r:22px;
  --bayang:0 6px 0 rgba(43,58,66,.16);
  --font-judul:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-isi:"Nunito", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--kertas); color:var(--tinta);
  font-family:var(--font-isi); font-size:16.5px; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:22px 18px 56px}
h1,h2,h3{font-family:var(--font-judul); line-height:1.18; margin:0 0 .4em}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem); font-weight:800}
h2{font-size:clamp(1.3rem,3vw,1.8rem); font-weight:700}
h3{font-size:1.15rem; font-weight:700}
p{margin:.35em 0 1em}
a{color:var(--biru)}
img{max-width:100%}
.kecil{font-size:.86rem; color:var(--tinta-lembut)}
.lompat{position:absolute; left:-999px; top:0; background:#fff; padding:8px 14px; z-index:99}
.lompat:focus{left:8px}

/* ---------- Bilah atas ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 18px; background:#fff; border-bottom:3px solid var(--garis);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta)}
.brand-logo svg{display:block}
.brand-teks{display:flex; flex-direction:column; line-height:1.1}
.brand-teks b{font-family:var(--font-judul); font-size:1.25rem; font-weight:800; letter-spacing:.5px}
.brand-teks small{font-size:.68rem; color:var(--tinta-lembut); max-width:270px}
.menu-utama{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.menu-utama a{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:var(--tinta);
  font-weight:800; font-size:.9rem; padding:8px 12px; border-radius:14px;
}
.menu-utama a:hover{background:var(--biru-muda)}
.menu-utama .btn-kecil{background:var(--kuning); border:2.5px solid var(--garis); box-shadow:0 3px 0 rgba(43,58,66,.25)}
.ic{vertical-align:-3px; flex:none}

/* ---------- Tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-judul); font-weight:700; font-size:1.05rem;
  color:var(--tinta); background:var(--kuning);
  border:3px solid var(--garis); border-radius:18px; padding:12px 22px;
  box-shadow:var(--bayang); cursor:pointer; text-decoration:none;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(43,58,66,.16)}
.btn.hijau{background:var(--hijau); color:#fff}
.btn.biru{background:var(--biru); color:#fff}
.btn.jingga{background:var(--jingga); color:#fff}
.btn.ungu{background:var(--ungu); color:#fff}
.btn.putih{background:#fff}
.btn.blok{width:100%}

/* ---------- Kartu ---------- */
.kartu{
  background:var(--kartu); border:3px solid var(--garis); border-radius:var(--r);
  box-shadow:var(--bayang); padding:22px;
}
.kartu + .kartu{margin-top:18px}

/* ---------- Hero beranda ---------- */
.hero{
  position:relative; overflow:hidden; border:3px solid var(--garis); border-radius:26px;
  background:linear-gradient(#BFE3F7 0%, #E8F5FD 62%, #CBE8C9 62%, #B7DFB4 100%);
  box-shadow:var(--bayang); padding:40px 26px 120px; text-align:center; margin-bottom:26px;
}
.hero h1{margin-bottom:.2em}
.hero p{max-width:560px; margin:0 auto; font-weight:700; color:#33502F}
.hero .matahari-svg{position:absolute; top:18px; right:24px; animation:puter 24s linear infinite; transform-origin:center}
@keyframes puter{to{transform:rotate(360deg)}}
.hero .bukit{position:absolute; left:0; right:0; bottom:0; width:100%; height:110px}
.hero .awan{position:absolute; opacity:.9; animation:layang 30s linear infinite alternate}
@keyframes layang{from{transform:translateX(-12px)}to{transform:translateX(26px)}}
@media (prefers-reduced-motion: reduce){ .hero .matahari-svg,.hero .awan{animation:none} }

/* ---------- Grid pilar ---------- */
.grid-pilar{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin:20px 0 8px}
.pilar-btn{
  position:relative; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  text-decoration:none; color:#fff; padding:20px 18px 22px; min-height:150px;
  border:3px solid var(--garis); border-radius:24px; box-shadow:0 7px 0 rgba(43,58,66,.22);
  transition:transform .1s ease;
}
.pilar-btn:hover{transform:translateY(-3px)}
.pilar-btn .nomor{
  font-family:var(--font-judul); font-weight:800; font-size:.8rem; letter-spacing:1px;
  background:rgba(255,255,255,.28); padding:3px 12px; border-radius:99px;
}
.pilar-btn h3{color:#fff; font-size:1.22rem; margin:0}
.pilar-btn .ic{opacity:.95}
.p-hijau{background:var(--hijau)} .p-biru{background:var(--biru)}
.p-jingga{background:var(--jingga)} .p-ungu{background:var(--ungu)}
.t-hijau{color:var(--hijau)} .t-biru{color:var(--biru)} .t-jingga{color:var(--jingga)} .t-ungu{color:var(--ungu)}
.latar-hijau{background:var(--hijau-muda)} .latar-biru{background:var(--biru-muda)}
.latar-jingga{background:var(--jingga-muda)} .latar-ungu{background:var(--ungu-muda)}

/* ---------- Grid menu peran ---------- */
.grid-menu{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:18px}
.menu-kartu{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--tinta);
  background:#fff; border:3px solid var(--garis); border-radius:20px; padding:16px 18px;
  box-shadow:var(--bayang); font-weight:800; transition:transform .1s ease;
}
.menu-kartu:hover{transform:translateY(-3px)}
.menu-kartu .bulat{
  flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:3px solid var(--garis); color:#fff;
}
.menu-kartu small{display:block; font-weight:600; color:var(--tinta-lembut); font-size:.8rem}

/* ---------- Formulir ---------- */
form label{display:block; font-weight:800; margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%; font:inherit; color:var(--tinta); background:#fff;
  border:3px solid var(--garis); border-radius:14px; padding:11px 14px;
}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{
  outline:3px solid var(--kuning); outline-offset:2px;
}
.form-sempit{max-width:460px; margin:0 auto}
.peringatan{background:var(--jingga-muda); border:3px solid var(--jingga); border-radius:14px; padding:10px 14px; font-weight:700}
.sukses{background:var(--hijau-muda); border:3px solid var(--hijau); border-radius:14px; padding:10px 14px; font-weight:700}

/* ---------- Bintang ---------- */
.stars{display:inline-flex; gap:2px}
.st-on{color:var(--kuning)} .st-on svg path{stroke:#B5851B; stroke-width:2}
.st-off{color:#C8CFD3}

/* ---------- Dasbor ---------- */
.kepala-anak{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.avatar{
  width:76px; height:76px; border-radius:50%; border:3px solid var(--garis);
  display:grid; place-items:center; color:#fff; font-family:var(--font-judul);
  font-size:2rem; font-weight:800; flex:none;
}
.grid-stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:16px}
.stat{
  border:3px solid var(--garis); border-radius:18px; padding:14px 16px; background:#fff;
  box-shadow:var(--bayang);
}
.stat b{font-family:var(--font-judul); font-size:1.5rem}
.baris-pilar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px; border-bottom:2px dashed #D8D2C4; flex-wrap:wrap}
.baris-pilar:last-child{border-bottom:none}
.grafik-batang{display:flex; align-items:flex-end; gap:18px; height:170px; padding:12px 8px 0; border-bottom:3px solid var(--garis)}
.batang{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.batang .isi{width:70%; max-width:64px; border-radius:12px 12px 0 0; border:3px solid var(--garis); border-bottom:none; background:var(--biru); transition:height .6s ease}
.batang small{font-weight:800}

/* ---------- Tabel ---------- */
.tabel-bungkus{overflow-x:auto}
table.rapi{width:100%; border-collapse:collapse; min-width:520px}
table.rapi th,table.rapi td{padding:10px 12px; border-bottom:2px solid #E7E0D2; text-align:left; vertical-align:top}
table.rapi th{font-family:var(--font-judul); background:var(--biru-muda)}

/* ---------- Modul ---------- */
.modul-bagian{margin-top:18px; padding:16px 18px; border-radius:18px; border:3px solid var(--garis); background:#fff; box-shadow:var(--bayang)}
.modul-bagian h3{display:flex; align-items:center; gap:10px}
.label-pil{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-judul); font-weight:800; font-size:.85rem; padding:5px 14px; border-radius:99px; border:2.5px solid var(--garis); color:#fff; letter-spacing:.4px}
ul.centang{list-style:none; padding:0; margin:0}
ul.centang li{padding-left:34px; position:relative; margin:10px 0}
ul.centang li::before{
  content:""; position:absolute; left:0; top:3px; width:20px; height:20px;
  border:3px solid var(--garis); border-radius:7px; background:var(--kuning);
}

/* ---------- Checklist refleksi ---------- */
.cek-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border:3px solid var(--garis); border-radius:16px; background:#fff; margin-top:12px; cursor:pointer; box-shadow:var(--bayang)}
.cek-item input{width:26px; height:26px; accent-color:var(--hijau); flex:none}
.cek-item span{font-weight:800}

/* ---------- Menu game ---------- */
.grid-game{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:14px}
.game-kartu{
  display:flex; flex-direction:column; text-decoration:none; color:var(--tinta);
  border:3px solid var(--garis); border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:var(--bayang); transition:transform .1s ease;
}
.game-kartu:hover{transform:translateY(-4px)}
.game-thumb{height:120px; display:grid; place-items:center}
.game-thumb svg{width:86px; height:86px}
.game-kartu .isi{padding:14px 16px 16px}
.game-kartu .isi p{margin:.3em 0 0; font-size:.85rem; color:var(--tinta-lembut)}
.game-kartu h3{margin:0}

/* ---------- Halaman main game ---------- */
.arena-bungkus{max-width:900px; margin:0 auto}
.arena-atas{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px}
#arena{
  width:100%; aspect-ratio:8/5; display:block; touch-action:none;
  border:4px solid var(--garis); border-radius:22px; background:#DFF1FB;
  box-shadow:0 8px 0 rgba(43,58,66,.2);
}
.arena-bawah{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap}
.pil-anak{display:flex; align-items:center; gap:8px; font-weight:800}
.pil-anak select{width:auto; padding:8px 12px}

/* ---------- Kaki ---------- */
.kaki{margin-top:30px}
.kaki-ombak{display:block; width:100%; height:60px}
.kaki-isi{background:var(--biru); color:#fff; text-align:center; padding:8px 16px 26px}
.kaki-isi p{margin:.2em 0}
.kaki-isi .kecil{color:#CFE6F8}

/* ---------- Responsif ---------- */
@media (max-width:640px){
  main{padding:14px 12px 40px}
  .brand-teks small{display:none}
  .menu-utama a span{display:none}
  .menu-utama a{padding:9px}
  .menu-utama .btn-kecil span{display:inline; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .hero{padding:44px 16px 96px}
  .hero .awan{display:none}
  .hero .matahari-svg{width:54px;height:54px;top:8px;right:10px}
  .kartu{padding:16px}
  .grafik-batang{gap:8px; height:140px}
}

/* ---------- panggung game 3D ---------- */
#panggung{position:relative;border:3px solid var(--tinta);border-radius:20px;overflow:hidden;
  background:#BFE3F7;box-shadow:0 6px 0 rgba(43,58,66,.22)}
#panggung:fullscreen{border-radius:0;border:0}
#arena3d{width:100%;line-height:0;touch-action:none;cursor:pointer}
#arena3d canvas{width:100%!important;height:auto;display:block}
#hud{position:absolute;top:10px;left:50%;transform:translateX(-50%);pointer-events:none;max-width:94%}
#hud-teks{display:inline-block;background:rgba(255,255,255,.94);border:3px solid var(--tinta);
  border-radius:999px;padding:7px 18px;font-family:var(--f-judul);font-weight:800;font-size:1.02rem;
  color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#hud-teks:empty{display:none}
#layar{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(43,58,66,.45);backdrop-filter:blur(2px);padding:16px}
#layar.tampak{display:flex}
.panel-mulai{background:var(--kertas);border:3px solid var(--tinta);border-radius:24px;
  box-shadow:0 8px 0 rgba(43,58,66,.3);padding:26px 30px;text-align:center;max-width:520px;
  animation:muncul .35s ease}
.panel-mulai h2{font-family:var(--f-judul);font-size:1.8rem;margin:0 0 8px}
.panel-mulai p{margin:8px 0 14px}
.btn.besar{font-size:1.15rem;padding:13px 26px}
@keyframes muncul{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.baris-bint{display:flex;justify-content:center;gap:6px;margin:10px 0 4px}
.bint{display:inline-block;transform:scale(0);animation:bint-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes bint-pop{to{transform:scale(1)}}
@media (max-width:640px){
  .arena-atas{flex-wrap:wrap;gap:8px}
  #hud-teks{font-size:.88rem;padding:6px 13px}
  .panel-mulai{padding:18px 16px}
  .panel-mulai h2{font-size:1.4rem}
}