/* ============================================================
   BelajarSeru! 3D — styles.css
   Gaya: "Candy Neo-Brutalist" — outline tinta tebal, hard
   shadow, warna permen, font bulat, animasi memantul.
   ============================================================ */

:root{
  --paper:#FFF6E5;
  --card:#FFFFFF;
  --ink:#2A2140;
  --ink-soft:#6B6484;
  --line:3px;
  --coral:#FF6B5E; --coral-d:#E04F42;
  --sun:#FFC53D;   --sun-d:#F2A900;
  --leaf:#2EC77E;  --leaf-d:#1EA864;
  --sky:#38A9F5;   --sky-d:#1E8AD6;
  --grape:#9B5CF6; --grape-d:#7E3FE0;
  --pink:#FF8FAB;  --pink-d:#F26B8D;
  --mint:#7FE3C3;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --sh:0 6px 0 var(--ink);
  --sh-sm:0 4px 0 var(--ink);
  --sh-lg:0 10px 0 var(--ink);
  --font-disp:'Baloo 2', 'Comic Sans MS', cursive;
  --font-body:'Nunito', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; min-height:100vh;
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  color:var(--ink); background:var(--paper);
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-disp); line-height:1.15; margin:0 0 .4em;}
h1{font-size:clamp(1.7rem,4.5vw,2.6rem); font-weight:800;}
h2{font-size:clamp(1.3rem,3.2vw,1.8rem); font-weight:800;}
h3{font-size:1.15rem; font-weight:700;}
p{margin:.35em 0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
button{font-family:inherit;}
b,strong{font-weight:800;}

/* ---- latar coretan ---- */
#bg-doodles{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
#bg-doodles::before,#bg-doodles::after{content:''; position:absolute; width:56vmax; height:56vmax; border-radius:50%; opacity:.5; filter:blur(2px);}
#bg-doodles::before{background:radial-gradient(circle at 30% 30%, #FFE9C9 0%, transparent 60%); top:-24vmax; right:-18vmax;}
#bg-doodles::after{background:radial-gradient(circle at 60% 60%, #DDF6EC 0%, transparent 60%); bottom:-26vmax; left:-20vmax;}
.doodle{position:absolute; font-size:26px; opacity:.35; animation:floaty 7s ease-in-out infinite;}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px clamp(10px,3vw,22px);
  background:var(--paper);
  border-bottom:var(--line) solid var(--ink);
}
.brand{display:flex; align-items:center; gap:8px;}
.brand-owl{
  display:grid; place-items:center; width:44px; height:44px; font-size:26px;
  background:var(--sun); border:var(--line) solid var(--ink); border-radius:14px;
  box-shadow:var(--sh-sm); transform:rotate(-6deg);
  animation:owlbob 3s ease-in-out infinite;
}
.brand-txt{font-family:var(--font-disp); font-weight:700; font-size:1.25rem; letter-spacing:.2px;}
.brand-txt b{color:var(--coral);}
.topstats{display:flex; align-items:center; gap:8px;}
.pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border:var(--line) solid var(--ink); border-radius:999px;
  background:var(--card); font-weight:800; font-size:.92rem; box-shadow:var(--sh-sm);
  white-space:nowrap;
}
.pill b{min-width:1.6ch; text-align:center;}
.pill-fire{background:#FFEDE3;}
.pill-coin{background:#FFF3C9;}
.pill-xp{background:#E5F3FF;}
.iconbtn{
  display:grid; place-items:center; width:40px; height:40px; font-size:18px; cursor:pointer;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:13px;
  box-shadow:var(--sh-sm); transition:transform .12s;
}
.iconbtn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink);}

/* ============================================================
   LAYOUT DASAR
   ============================================================ */
.app{position:relative; z-index:1; padding:0 clamp(12px,3.5vw,28px) 90px; max-width:1180px; margin:0 auto; outline:none;}
.view{animation:viewin .35s cubic-bezier(.2,1.4,.4,1);}
@keyframes viewin{from{opacity:0; transform:translateY(14px) scale(.99);} to{opacity:1; transform:none;}}

.card{
  background:var(--card); border:var(--line) solid var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sh); padding:18px 20px; position:relative;
}
.card + .card{margin-top:16px;}
.card-pad-lg{padding:clamp(18px,4vw,30px);}

.section-title{display:flex; align-items:center; gap:10px; margin:26px 0 12px;}
.section-title .emoji{
  display:grid; place-items:center; width:40px; height:40px; font-size:20px; flex:none;
  background:var(--sun); border:var(--line) solid var(--ink); border-radius:12px; box-shadow:var(--sh-sm);
  transform:rotate(-4deg);
}
.section-title h2{margin:0;}
.section-title .sub{color:var(--ink-soft); font-size:.9rem; font-weight:700; margin-left:auto; text-align:right;}

/* ---- tombol chunky ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-disp); font-weight:700; font-size:1rem; color:var(--ink);
  padding:11px 20px; cursor:pointer; user-select:none;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:16px;
  box-shadow:var(--sh-sm); transition:transform .1s, box-shadow .1s;
  text-align:center;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--ink);}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--ink);}
.btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.btn-big{font-size:1.12rem; padding:14px 26px; border-radius:19px;}
.btn-coral{background:var(--coral); color:#fff;}
.btn-sun{background:var(--sun);}
.btn-leaf{background:var(--leaf); color:#fff;}
.btn-sky{background:var(--sky); color:#fff;}
.btn-grape{background:var(--grape); color:#fff;}
.btn-pink{background:var(--pink);}
.btn-ghost{background:transparent; box-shadow:none; border-style:dashed;}
.btn-ghost:hover{background:#fff;}
.btn-block{display:flex; width:100%;}
.btn-row{display:flex; flex-wrap:wrap; gap:10px;}

/* ---- chip ---- */
.chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:8px 14px; font-family:var(--font-disp); font-weight:700; font-size:.95rem;
  border:var(--line) solid var(--ink); border-radius:999px; background:var(--card);
  box-shadow:var(--sh-sm); transition:transform .1s, background .15s;
}
.chip:hover{transform:translateY(-2px);}
.chip.on{background:var(--ink); color:#fff;}
.chip-row{display:flex; flex-wrap:wrap; gap:9px;}

/* ---- sticker & label ---- */
.sticker{
  display:inline-block; font-family:var(--font-disp); font-weight:700; font-size:.78rem;
  padding:3px 10px; border:2.5px solid var(--ink); border-radius:999px;
  background:var(--mint); transform:rotate(-3deg);
}
.sticker.sun{background:var(--sun);}
.sticker.pink{background:var(--pink);}
.sticker.sky{background:#CFE9FF;}
.sticker.grape{background:#E5D8FF;}
.sticker.leaf{background:#D2F5E5;}

/* ============================================================
   HERO 3D — HOME
   ============================================================ */
.hero{
  position:relative; margin-top:16px; height:clamp(300px,42vw,430px);
  border:var(--line) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  overflow:hidden; background:linear-gradient(#8ED8FF 0%, #C9EEFF 55%, #DFF8E8 100%);
}
.hero canvas{display:block; width:100%; height:100%; cursor:grab;}
.hero canvas:active{cursor:grabbing;}
.hero-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(12px,3vw,26px); pointer-events:none;
}
.hero-overlay > *{pointer-events:auto;}
.hero-title{
  font-family:var(--font-disp); font-weight:800; font-size:clamp(1.5rem,4.4vw,2.5rem);
  color:var(--ink); text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(42,33,64,.14); margin:0;
  max-width:600px;
}
.hero-sub{font-weight:800; color:var(--ink); background:#FFFFFFCC; display:inline-block; padding:4px 14px; border-radius:999px; border:2.5px solid var(--ink); margin-top:8px; width:fit-content;}
.hero-hint{position:absolute; top:12px; right:14px; font-size:.78rem; font-weight:800; color:var(--ink); background:#FFFFFFCC; padding:4px 10px; border-radius:999px; border:2px solid var(--ink); opacity:.85;}
.hero-cta{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;}

/* ---- kartu dunia ---- */
.world-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:6px;}
.world-card{
  position:relative; overflow:hidden; cursor:pointer;
  border:var(--line) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh);
  padding:20px 18px 18px; color:#fff; min-height:190px;
  display:flex; flex-direction:column; gap:6px;
  transition:transform .15s, box-shadow .15s;
  transform:perspective(700px) rotateX(0);
}
.world-card:hover{transform:perspective(700px) translateY(-5px) rotateX(4deg); box-shadow:var(--sh-lg);}
.world-card:active{transform:translateY(4px); box-shadow:var(--sh-sm);}
.world-card .wc-ico{
  width:58px; height:58px; display:grid; place-items:center; font-size:32px;
  background:#FFFFFF33; border:3px solid #fff; border-radius:18px; transform:rotate(-5deg);
  box-shadow:0 4px 0 rgba(0,0,0,.18);
}
.world-card h3{font-size:1.45rem; margin:.4em 0 0; text-shadow:1px 2px 0 rgba(0,0,0,.22);}
.world-card p{margin:0; font-weight:700; font-size:.9rem; opacity:.95;}
.wc-meta{margin-top:auto; display:flex; gap:6px; flex-wrap:wrap;}
.wc-meta .sticker{border-color:var(--ink);}
.world-card::after{
  content:''; position:absolute; right:-26px; top:-26px; width:110px; height:110px; border-radius:50%;
  background:#FFFFFF22; border:3px solid #FFFFFF44;
}
.world-card.tkc{background:linear-gradient(160deg,var(--pink) 0%, var(--sun) 130%);}
.world-card.sdc{background:linear-gradient(160deg,var(--leaf) 0%, #7FE3C3 130%);}
.world-card.smpc{background:linear-gradient(160deg,var(--sky) 0%, var(--mint) 130%);}
.world-card.smac{background:linear-gradient(160deg,var(--grape) 0%, #C9A6FF 130%);}
.world-card .wc-progress{
  position:absolute; bottom:0; left:0; height:7px; background:#FFFFFFCC; border-top:2.5px solid var(--ink);
  transition:width .6s;
}

/* ---- misi harian ---- */
.missions{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
.mission{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:var(--line) solid var(--ink); border-radius:var(--r-md); background:var(--card); box-shadow:var(--sh-sm);
}
.mission .m-ico{width:44px; height:44px; display:grid; place-items:center; font-size:22px; flex:none; background:var(--sun); border:2.5px solid var(--ink); border-radius:12px;}
.mission .m-txt{flex:1; min-width:0;}
.mission .m-txt b{display:block; font-size:.95rem;}
.mission .m-bar{height:9px; margin-top:6px; background:#EFEAF9; border:2px solid var(--ink); border-radius:99px; overflow:hidden;}
.mission .m-bar i{display:block; height:100%; background:var(--leaf); transition:width .5s;}
.mission.done{background:#E9FBF2;}
.mission.done .m-ico{background:var(--leaf);}
.mission .m-check{font-size:22px;}

/* ---- strip statistik home ---- */
.statstrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px;}
.statbox{
  text-align:center; padding:14px 8px; border:var(--line) solid var(--ink); border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--sh-sm);
}
.statbox .s-ico{font-size:26px;}
.statbox b{display:block; font-family:var(--font-disp); font-size:1.35rem;}
.statbox span{font-size:.78rem; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.5px;}

/* ============================================================
   DUNIA (WORLD VIEW)
   ============================================================ */
.world-hero{
  position:relative; margin-top:16px; height:clamp(180px,26vw,260px);
  border:var(--line) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh);
  overflow:hidden;
}
.world-hero canvas{display:block; width:100%; height:100%; cursor:grab;}
.world-hero .wh-label{
  position:absolute; left:14px; bottom:12px; pointer-events:none;
  font-family:var(--font-disp); font-weight:800; font-size:clamp(1.2rem,3vw,1.9rem); color:var(--ink);
  text-shadow:2px 2px 0 #fff; display:flex; align-items:center; gap:10px;
}
.world-hero .wh-label .wh-badge{
  display:grid; place-items:center; width:52px; height:52px; font-size:28px;
  background:#fff; border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink);
}
.world-hero .wh-hint{position:absolute; top:10px; right:12px; font-size:.75rem; font-weight:800; background:#FFFFFFCC; border:2px solid var(--ink); border-radius:99px; padding:3px 10px;}

/* ---- peta petualangan ---- */
.advmap{
  position:relative; padding:26px 10px 10px; margin-top:14px;
  border:var(--line) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh);
  background:
    radial-gradient(circle at 12% 20%, #FFEFC1 0 8%, transparent 9%),
    radial-gradient(circle at 88% 14%, #D8F2FF 0 6%, transparent 7%),
    radial-gradient(circle at 78% 82%, #FFDCE5 0 7%, transparent 8%),
    linear-gradient(#F4FBEF, #EAF7FF);
}
.advmap .map-path{position:absolute; inset:0; pointer-events:none; opacity:.85;}
.map-nodes{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.map-node{
  cursor:pointer; text-align:center; padding:14px 10px 12px; position:relative;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--sh-sm);
  transition:transform .12s;
}
.map-node:hover{transform:translateY(-4px) rotate(-1deg);}
.map-node .n-ico{font-size:34px; display:block; animation:floaty 4s ease-in-out infinite;}
.map-node b{display:block; font-family:var(--font-disp); font-size:1rem; margin-top:4px;}
.map-node span{font-size:.75rem; font-weight:800; color:var(--ink-soft);}
.map-node .n-stars{letter-spacing:1px; font-size:.8rem;}
.map-node.locked{opacity:.6; filter:grayscale(.4);}

/* ---- grid topik ---- */
.topic-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.topic-card{
  display:flex; flex-direction:column; gap:8px; padding:16px;
  border:var(--line) solid var(--ink); border-radius:var(--r-md); background:var(--card); box-shadow:var(--sh-sm);
  transition:transform .13s, box-shadow .13s;
}
.topic-card:hover{transform:translateY(-4px); box-shadow:var(--sh);}
.topic-card .t-head{display:flex; align-items:flex-start; gap:10px;}
.topic-card .t-ico{
  width:46px; height:46px; flex:none; display:grid; place-items:center; font-size:24px;
  border:2.5px solid var(--ink); border-radius:13px; background:#FFF; box-shadow:0 3px 0 var(--ink);
  transform:rotate(-3deg);
}
.topic-card h3{font-size:1.02rem; margin:0;}
.topic-card .t-obj{font-size:.8rem; color:var(--ink-soft); font-weight:700; margin:0;}
.topic-card .t-actions{display:flex; gap:8px; margin-top:auto;}
.topic-card .t-actions .btn{flex:1; padding:8px 10px; font-size:.88rem; border-radius:12px;}
.mastery-dots{display:flex; gap:3px;}
.mastery-dots i{width:12px; height:12px; border:2px solid var(--ink); border-radius:50%; background:#EFEAF9;}
.mastery-dots i.got{background:var(--leaf);}

/* ---- tab mapel ---- */
.subject-tabs{display:flex; flex-wrap:wrap; gap:9px; margin:14px 0;}
.sub-tab{
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border:var(--line) solid var(--ink); border-radius:999px;
  background:var(--card); box-shadow:var(--sh-sm); font-family:var(--font-disp); font-weight:700;
}
.sub-tab.on{color:#fff;}
.sub-tab .cnt{font-size:.75rem; background:#FFFFFF33; border:2px solid currentColor; border-radius:99px; padding:0 7px;}

/* ============================================================
   MATERI (study-tutor layout)
   ============================================================ */
.materi-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px;}
.materi-head .m-ico-big{
  width:64px; height:64px; font-size:34px; display:grid; place-items:center;
  background:var(--sun); border:var(--line) solid var(--ink); border-radius:20px; box-shadow:var(--sh-sm);
  transform:rotate(-4deg);
}
.materi-block{margin-top:14px; border:var(--line) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--sh-sm); background:var(--card); overflow:hidden;}
.materi-block .mb-title{
  display:flex; align-items:center; gap:8px; padding:9px 16px; font-family:var(--font-disp); font-weight:700;
  border-bottom:var(--line) solid var(--ink); font-size:.95rem;
}
.materi-block .mb-body{padding:12px 16px;}
.mb-core{background:#FFF3C9;} .mb-core .mb-title{background:var(--sun);}
.mb-intu{background:#FFF0F3;} .mb-intu .mb-title{background:var(--pink);}
.mb-det .mb-title{background:#CFE9FF;} .mb-det{background:#F2F9FF;}
.mb-ex{background:#EAFBF2;} .mb-ex .mb-title{background:var(--mint);}
.mb-mist{background:#FFEDE3;} .mb-mist .mb-title{background:#FFB088;}
.mb-tip{background:#F1E9FF;} .mb-tip .mb-title{background:#D3BCFF;}
.materi-block ul{margin:.2em 0; padding-left:1.2em;}
.materi-block li{margin:.3em 0;}
.materi-block li::marker{color:var(--coral); font-weight:800;}
.example-steps{list-style:none; padding:0; margin:.2em 0 0; counter-reset:step;}
.example-steps li{
  position:relative; padding:8px 10px 8px 44px; margin:6px 0; background:#fff;
  border:2.5px solid var(--ink); border-radius:12px; font-weight:600;
}
.example-steps li::before{
  counter-increment:step; content:counter(step); position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; display:grid; place-items:center; font-family:var(--font-disp); font-weight:800; font-size:.85rem;
  background:var(--leaf); color:#fff; border:2.5px solid var(--ink); border-radius:50%;
}
.obj-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.obj-item{display:flex; gap:10px; align-items:flex-start; font-weight:700; background:#fff; border:2.5px dashed var(--ink); border-radius:12px; padding:9px 13px;}
.obj-item .obj-check{color:var(--leaf-d); font-size:1.1rem;}
.tts-btn{margin-left:auto;}
.materi-nav{display:flex; justify-content:space-between; gap:10px; margin-top:18px; flex-wrap:wrap;}

/* ============================================================
   KUIS
   ============================================================ */
.quiz-wrap{max-width:760px; margin:0 auto;}
.quiz-top{display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap;}
.quiz-progress{flex:1; min-width:160px; height:16px; border:var(--line) solid var(--ink); border-radius:99px; background:#fff; overflow:hidden; box-shadow:var(--sh-sm);}
.quiz-progress i{display:block; height:100%; background:repeating-linear-gradient(-45deg, var(--leaf) 0 12px, var(--mint) 12px 24px); transition:width .4s;}
.combo-badge{
  font-family:var(--font-disp); font-weight:800; padding:5px 13px; border:var(--line) solid var(--ink); border-radius:99px;
  background:var(--sun); box-shadow:var(--sh-sm); animation:pop .3s;
}
.q-card{margin-top:16px; animation:cardin .3s cubic-bezier(.2,1.3,.4,1);}
@keyframes cardin{from{opacity:0; transform:translateY(18px) rotate(calc(var(--tilt,0deg)*2)) scale(.96);} to{opacity:1; transform:rotate(var(--tilt,0deg)) scale(1);}}
.q-text{font-size:clamp(1.15rem,2.6vw,1.45rem); font-weight:800; font-family:var(--font-disp); margin:.2em 0 .5em;}
.q-emoji-big{font-size:clamp(2rem,6vw,3rem); text-align:center; margin:6px 0;}
.opts{display:grid; gap:10px; margin-top:12px;}
.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:13px 15px; font-size:1.02rem; font-weight:700; color:var(--ink);
  background:var(--card); border:var(--line) solid var(--ink); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); transition:transform .1s, background .2s;
}
.opt:hover:not(:disabled){transform:translateY(-2px); background:#FFFDF4;}
.opt .opt-key{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  font-family:var(--font-disp); font-weight:800; background:var(--paper); border:2.5px solid var(--ink); border-radius:10px;
}
.opt.correct{background:var(--leaf); color:#fff; animation:pop .35s;}
.opt.correct .opt-key{background:#fff;}
.opt.wrong{background:var(--coral); color:#fff; animation:shake .4s;}
.opt.wrong .opt-key{background:#fff;}
.opt.dim{opacity:.55;}
.opt:disabled{cursor:default;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-7px);}40%{transform:translateX(7px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.feedback{
  margin-top:14px; padding:13px 16px; border:var(--line) solid var(--ink); border-radius:var(--r-md);
  font-weight:700; display:flex; gap:10px; align-items:flex-start; animation:cardin .3s;
}
.feedback.ok{background:#E9FBF2;} .feedback.no{background:#FFEDE3;}
.feedback .fb-ico{font-size:24px; flex:none;}
.quiz-actions{display:flex; justify-content:flex-end; margin-top:14px;}

/* ---- layar akhir kuis ---- */
.result-stars{text-align:center; font-size:clamp(2.6rem,9vw,4rem); letter-spacing:6px; margin:10px 0;}
.result-stars .dim{opacity:.25; filter:grayscale(1);}
.result-title{text-align:center;}
.result-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; margin:18px 0;}
.reward-pop{animation:pop .5s;}
@keyframes pop{0%{transform:scale(.6);}70%{transform:scale(1.12);}100%{transform:scale(1);}}

/* ============================================================
   GAME umum
   ============================================================ */
.game-stage{
  border:var(--line) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh);
  background:var(--card); padding:18px; margin-top:16px;
}
.game-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.game-status{display:flex; gap:8px; flex-wrap:wrap;}
.gs-pill{padding:5px 12px; border:2.5px solid var(--ink); border-radius:99px; background:var(--paper); font-weight:800; font-size:.9rem;}
.game-canvas{width:100%; border:var(--line) solid var(--ink); border-radius:var(--r-md); background:#EAF7FF; touch-action:none; display:block;}
.game-msg{text-align:center; font-family:var(--font-disp); font-weight:700; font-size:1.05rem; margin-top:10px; min-height:1.6em;}
.big-display{
  text-align:center; font-family:var(--font-disp); font-weight:800; font-size:clamp(3rem,12vw,5.5rem);
  color:var(--coral); text-shadow:3px 3px 0 var(--sun); margin:18px 0; animation:pop .4s;
}
.choice-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px;}
.choice-btn{
  min-width:86px; padding:16px 20px; font-size:1.5rem; font-family:var(--font-disp); font-weight:800; cursor:pointer;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--sh-sm);
  transition:transform .1s;
}
.choice-btn:hover{transform:translateY(-3px);}
.choice-btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--ink);}
.choice-btn.correct{background:var(--leaf); color:#fff;}
.choice-btn.wrong{background:var(--coral); color:#fff;}
.grid-memory{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:520px; margin:14px auto;}
.mem-card{
  aspect-ratio:3/3.4; font-size:clamp(1.6rem,5vw,2.4rem); cursor:pointer; border:var(--line) solid var(--ink);
  border-radius:var(--r-md); background:var(--sky); box-shadow:var(--sh-sm);
  display:grid; place-items:center; transition:transform .3s; transform-style:preserve-3d; position:relative;
  padding:0;
}
.mem-card .mem-face{position:absolute; inset:0; display:grid; place-items:center; border-radius:calc(var(--r-md) - 6px); backface-visibility:hidden;}
.mem-card .mem-front{background:repeating-linear-gradient(-45deg, var(--sky) 0 10px, var(--sky-d) 10px 20px); color:#fff; font-family:var(--font-disp);}
.mem-card .mem-back{background:#fff; transform:rotateY(180deg);}
.mem-card.flipped{transform:rotateY(180deg);}
.mem-card.matched{border-color:var(--leaf-d); animation:pop .4s;}
/* robot koding */
.rob-grid{display:grid; grid-template-columns:repeat(var(--cols,5), 52px); gap:5px; justify-content:center; margin:14px 0;}
.rob-cell{width:52px; height:52px; border:2.5px solid var(--ink); border-radius:10px; background:#EAF7FF; display:grid; place-items:center; font-size:24px; position:relative;}
.rob-cell.goal{background:#FFE9A8;}
.rob-cell.wall{background:var(--ink);}
.rob-cell .rob-bot{position:absolute; inset:0; display:grid; place-items:center; transition:all .3s; font-size:28px;}
.cmd-strip{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; min-height:46px; padding:8px; background:var(--paper); border:2.5px dashed var(--ink); border-radius:12px;}
.cmd-chip{display:inline-flex; align-items:center; gap:4px; background:var(--sun); border:2.5px solid var(--ink); border-radius:10px; padding:4px 9px; font-weight:800; font-size:.9rem;}
/* lab */
.lab-controls{display:grid; gap:12px; margin:14px 0;}
.lab-controls label{font-weight:800; font-size:.9rem; display:block;}
input[type=range]{width:100%; accent-color:var(--coral); height:26px;}
.lab-readout{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px;}
.beaker-row{display:flex; gap:14px; justify-content:center; align-items:flex-end; flex-wrap:wrap; margin:12px 0;}
.beaker{
  width:110px; height:150px; border:var(--line) solid var(--ink); border-radius:10px 10px 26px 26px;
  position:relative; overflow:hidden; background:#fff; box-shadow:var(--sh-sm);
}
.beaker .liquid{position:absolute; bottom:0; left:0; right:0; height:45%; transition:background .4s, height .4s;}
.beaker .b-label{position:absolute; top:6px; width:100%; text-align:center; font-weight:800; font-size:.8rem;}
.ph-scale{display:flex; max-width:560px; margin:10px auto; border:2.5px solid var(--ink); border-radius:99px; overflow:hidden; height:22px;}
.ph-scale i{flex:1;}
.ph-marker{width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:14px solid var(--ink); margin:-6px auto 0; transition:margin-left .4s;}
/* flashcard 3D */
.fc-stage{perspective:1100px; max-width:560px; margin:18px auto;}
.fc-card{
  position:relative; height:300px; cursor:pointer; transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,1.2,.4,1);
}
.fc-card.flipped{transform:rotateY(180deg);}
.fc-face{
  position:absolute; inset:0; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:26px; text-align:center; border:var(--line) solid var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh);
}
.fc-front{background:linear-gradient(160deg,#fff, #FFF3D6);}
.fc-back{background:linear-gradient(160deg,#E9FBF2, #CBF0DD); transform:rotateY(180deg);}
.fc-face .fc-tag{position:absolute; top:12px; left:14px;}
.fc-face .fc-q{font-family:var(--font-disp); font-weight:800; font-size:1.3rem;}
.fc-face .fc-a{font-weight:700; font-size:1.05rem;}
.fc-hint{font-size:.8rem; font-weight:800; color:var(--ink-soft); position:absolute; bottom:12px;}
/* UTBK */
.utbk-timer{
  font-family:var(--font-disp); font-weight:800; font-size:1.5rem; text-align:center; padding:8px 22px;
  border:var(--line) solid var(--ink); border-radius:99px; background:var(--ink); color:#fff; box-shadow:var(--sh-sm);
  width:fit-content; margin:0 auto;
}
.utbk-timer.hurry{background:var(--coral); animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.6;}}
.utbk-map{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
.utbk-map .um{
  width:34px; height:34px; display:grid; place-items:center; font-weight:800; font-size:.8rem;
  border:2.5px solid var(--ink); border-radius:9px; background:#fff; cursor:pointer;
}
.utbk-map .um.ans{background:var(--leaf); color:#fff;}
.utbk-map .um.cur{background:var(--sun);}
.utbk-analysis .bar-row{display:grid; grid-template-columns:150px 1fr 44px; align-items:center; gap:10px; margin:8px 0;}
.utbk-analysis .bar{height:14px; border:2px solid var(--ink); border-radius:99px; background:#fff; overflow:hidden;}
.utbk-analysis .bar i{display:block; height:100%; background:var(--grape);}
/* grafik fungsi */
.fn-canvas{width:100%; height:320px; border:var(--line) solid var(--ink); border-radius:var(--r-md); background:#fff; display:block; touch-action:none;}
.fn-controls{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:12px;}
.fn-controls .fn-val{font-family:var(--font-disp); font-weight:800; color:var(--grape-d);}
/* karier */
.career-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:13px;}
.career-card{padding:15px; border:var(--line) solid var(--ink); border-radius:var(--r-md); background:var(--card); box-shadow:var(--sh-sm);}
.career-card .c-top{font-size:30px;}
.career-card b{font-family:var(--font-disp);}
.career-card p{font-size:.86rem; color:var(--ink-soft); font-weight:600; margin:.3em 0;}
.career-card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}

/* ============================================================
   PROFIL
   ============================================================ */
.profile-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:16px;}
.avatar-big{
  width:96px; height:96px; font-size:52px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--sun), var(--pink)); border:var(--line) solid var(--ink);
  border-radius:28px; box-shadow:var(--sh); transform:rotate(-3deg); animation:floaty 5s ease-in-out infinite;
}
.level-bar{flex:1; min-width:220px;}
.level-bar .lv-top{display:flex; justify-content:space-between; font-weight:800; margin-bottom:6px;}
.level-bar .lv-track{height:20px; border:var(--line) solid var(--ink); border-radius:99px; background:#fff; overflow:hidden; box-shadow:var(--sh-sm);}
.level-bar .lv-track i{display:block; height:100%; background:repeating-linear-gradient(-45deg,var(--grape) 0 14px, #B98CFF 14px 28px); transition:width .6s;}
.level-title{font-family:var(--font-disp); font-weight:800; color:var(--grape-d);}
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px;}
.badge-item{text-align:center; padding:14px 8px; border:var(--line) solid var(--ink); border-radius:var(--r-md); background:var(--card); box-shadow:var(--sh-sm); transition:transform .15s;}
.badge-item:hover{transform:rotate(-2deg) scale(1.04);}
.badge-item .b-ico{font-size:34px; display:block;}
.badge-item b{display:block; font-size:.8rem; font-family:var(--font-disp); margin-top:4px;}
.badge-item span{font-size:.68rem; color:var(--ink-soft); font-weight:700;}
.badge-item.locked{opacity:.5; filter:grayscale(1);}
.avatar-picker{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px;}
.av-opt{font-size:34px; padding:10px 0; cursor:pointer; border:var(--line) solid var(--ink); border-radius:14px; background:#fff; box-shadow:var(--sh-sm); transition:transform .12s;}
.av-opt:hover{transform:translateY(-3px);}
.av-opt.on{background:var(--sun); transform:scale(1.06);}
.weak-list{display:flex; flex-direction:column; gap:9px;}
.weak-item{display:flex; align-items:center; gap:11px; padding:11px 14px; border:var(--line) solid var(--ink); border-radius:var(--r-md); background:#FFF6F4; box-shadow:var(--sh-sm);}
.weak-item .w-ico{font-size:22px;}
.weak-item b{flex:1; font-size:.95rem;}
.name-input{
  font-family:var(--font-disp); font-weight:700; font-size:1.1rem; padding:10px 14px; max-width:280px; width:100%;
  border:var(--line) solid var(--ink); border-radius:14px; background:#fff; box-shadow:var(--sh-sm);
}

/* ============================================================
   ORTU
   ============================================================ */
.gate-wrap{max-width:430px; margin:8vh auto 0; text-align:center;}
.gate-input{
  font-family:var(--font-disp); font-size:1.6rem; font-weight:800; text-align:center; width:150px;
  padding:10px; border:var(--line) solid var(--ink); border-radius:14px; box-shadow:var(--sh-sm); margin:10px 0;
}
.mastery-table{width:100%; border-collapse:separate; border-spacing:0 8px;}
.mastery-table th{font-family:var(--font-disp); text-align:left; font-size:.85rem; color:var(--ink-soft); padding:0 10px;}
.mastery-table td{background:#fff; border-top:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink); padding:9px 10px; font-weight:700; font-size:.92rem;}
.mastery-table td:first-child{border-left:2.5px solid var(--ink); border-radius:12px 0 0 12px;}
.mastery-table td:last-child{border-right:2.5px solid var(--ink); border-radius:0 12px 12px 0;}
.mastery-bar{height:12px; width:130px; border:2px solid var(--ink); border-radius:99px; background:#fff; overflow:hidden; display:inline-block; vertical-align:middle;}
.mastery-bar i{display:block; height:100%; background:var(--leaf);}
.mastery-table .warn i{background:var(--coral);}
.tips-list{counter-reset:tip;}
.tips-list li{margin:9px 0; font-weight:600; padding-left:6px;}
.tips-list li::marker{font-family:var(--font-disp); font-weight:800; color:var(--grape-d);}

/* ============================================================
   MODAL / TOAST / CONFETTI / KAPSUL
   ============================================================ */
.modal-back{
  position:fixed; inset:0; z-index:90; background:rgba(42,33,64,.45); display:grid; place-items:center; padding:18px;
  animation:fadein .2s;
}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.modal{
  max-width:480px; width:100%; background:var(--card); border:var(--line) solid var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:22px; animation:cardin .3s;
  max-height:84vh; overflow:auto;
}
#toast-layer{position:fixed; left:50%; transform:translateX(-50%); bottom:92px; z-index:95; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{
  background:var(--ink); color:#fff; font-weight:800; padding:10px 20px; border-radius:99px;
  border:3px solid #fff; box-shadow:0 4px 0 rgba(0,0,0,.3); animation:toastin .3s, toastout .4s 2.6s forwards;
  max-width:88vw; text-align:center;
}
.toast.reward{background:var(--leaf);}
@keyframes toastin{from{opacity:0; transform:translateY(14px) scale(.9);} to{opacity:1; transform:none;}}
@keyframes toastout{to{opacity:0; transform:translateY(-10px);}}
#confetti-layer{position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden;}
.confetti{position:absolute; width:11px; height:15px; border-radius:3px; animation:confall linear forwards;}
@keyframes confall{to{transform:translateY(105vh) rotate(720deg);}}
.coin-fly{
  position:fixed; z-index:85; font-size:26px; pointer-events:none; font-weight:800;
  animation:coinfly .8s cubic-bezier(.3,-0.4,.6,1.4) forwards;
}
@keyframes coinfly{to{transform:translate(var(--tx), var(--ty)) scale(.4); opacity:.4;}}

/* ---- kapsul energi (xp burst) ---- */
.xp-burst{
  position:fixed; z-index:85; pointer-events:none; font-family:var(--font-disp); font-weight:800;
  color:var(--sun-d); font-size:1.3rem; text-shadow:2px 2px 0 #fff; animation:xpup 1s forwards;
}
@keyframes xpup{to{transform:translateY(-60px); opacity:0;}}

/* ---- floating keyframes ---- */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes owlbob{0%,100%{transform:rotate(-6deg) translateY(0);}50%{transform:rotate(-2deg) translateY(-3px);}}
.doodle{animation-name:floaty;}

/* ---- bottom nav ---- */
.bottomnav{
  position:fixed; left:50%; transform:translateX(-50%); bottom:12px; z-index:70;
  display:flex; gap:4px; padding:7px;
  background:var(--card); border:var(--line) solid var(--ink); border-radius:22px; box-shadow:var(--sh);
}
.bottomnav a{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:6px 13px; border-radius:15px; font-size:.68rem; font-weight:800; color:var(--ink-soft);
  transition:background .15s;
}
.bottomnav a .nav-ico{font-size:21px;}
.bottomnav a.on{background:var(--sun); color:var(--ink); box-shadow:inset 0 -3px 0 rgba(42,33,64,.18);}

/* ---- khusus petualangan & materi listing ---- */
.hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:8px;}
.hub-card{display:block; padding:18px; border:var(--line) solid var(--ink); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh); transition:transform .14s;}
.hub-card:hover{transform:translateY(-4px) rotate(-.4deg);}
.hub-card .h-ico{width:54px; height:54px; display:grid; place-items:center; font-size:28px; border:3px solid var(--ink); border-radius:16px; box-shadow:0 4px 0 var(--ink); margin-bottom:10px; transform:rotate(-3deg);}
.hub-card h3{margin:0;}
.hub-card p{color:var(--ink-soft); font-weight:700; font-size:.88rem; margin:.2em 0 0;}
.hub-card .h-progress{height:12px; margin-top:12px; border:2px solid var(--ink); border-radius:99px; background:#fff; overflow:hidden;}
.hub-card .h-progress i{display:block; height:100%; background:var(--leaf);}
.subject-accordion{border:var(--line) solid var(--ink); border-radius:var(--r-lg); background:var(--card); box-shadow:var(--sh); margin-top:14px; overflow:hidden;}
.subject-accordion + .subject-accordion{margin-top:14px;}
.subject-accordion > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 18px;
  font-family:var(--font-disp); font-weight:800; font-size:1.08rem;
}
.subject-accordion > summary::-webkit-details-marker{display:none;}
.subject-accordion > summary .sa-ico{width:42px; height:42px; display:grid; place-items:center; font-size:22px; border:2.5px solid var(--ink); border-radius:12px; background:var(--paper); box-shadow:0 3px 0 var(--ink);}
.subject-accordion > summary .sa-arrow{margin-left:auto; transition:transform .25s; font-size:1.1rem;}
.subject-accordion[open] > summary .sa-arrow{transform:rotate(180deg);}
.subject-accordion .sa-body{padding:0 16px 18px;}

/* ============================================================
   RESPONSIF & AKSESIBILITAS
   ============================================================ */
@media (max-width:640px){
  .topstats .pill{padding:4px 9px; font-size:.82rem;}
  .brand-txt{font-size:1.05rem;}
  .world-grid{grid-template-columns:1fr 1fr;}
  .world-card{min-height:150px; padding:13px;}
  .world-card .wc-ico{width:44px; height:44px; font-size:24px;}
  .world-card h3{font-size:1.1rem;}
  .grid-memory{grid-template-columns:repeat(4,1fr);}
  .rob-grid{grid-template-columns:repeat(var(--cols,5), 44px);}
  .rob-cell{width:44px; height:44px;}
  .bottomnav a{padding:5px 8px;}
  .utbk-analysis .bar-row{grid-template-columns:100px 1fr 40px;}
}
@media (max-width:380px){ .world-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important;
    animation-delay:0s !important; transition-delay:0s !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}
:focus-visible{outline:3px dashed var(--grape); outline-offset:3px;}
.hidden{display:none !important;}

/* ============================================================
   GKIT + GAME BARU (v3) — kelas generik untuk 20 game edukatif
   ============================================================ */
.drag-ghost{position:fixed; z-index:99; pointer-events:none; opacity:.92; transform:rotate(2.5deg); box-shadow:0 12px 0 rgba(42,33,64,.28); cursor:grabbing;}
.drag-src{opacity:.35;}
.drop-hint{outline:3.5px dashed var(--coral); outline-offset:2px;}
.gs-asbtn{cursor:pointer; font-family:var(--font-disp);}
.gs-asbtn:hover{background:#fff;}
.g-tile{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:grab;
  padding:12px 16px; font-family:var(--font-disp); font-weight:800; font-size:1.15rem; color:var(--ink);
  background:var(--sun); border:3px solid var(--ink); border-radius:14px; box-shadow:var(--sh-sm);
  touch-action:none; user-select:none; transition:transform .12s; text-align:center;
}
.g-tile:hover{transform:translateY(-2px);}
.g-tile.ok{background:var(--leaf); color:#fff;}
.g-tile.bad{background:var(--coral); color:#fff; animation:shake .4s;}
.g-tile.ghosted{opacity:.5;}
.g-tile.sel{outline:3.5px solid var(--coral); transform:scale(1.06);}
.g-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center;}
.g-duo{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
.g-grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px;}
.g-center{text-align:center;}
.g-q{font-family:var(--font-disp); font-weight:800; font-size:clamp(1.1rem,3vw,1.4rem); text-align:center; margin:.2em 0 .4em;}
.g-panel{background:#FFFDF6; border:2.5px dashed var(--ink); border-radius:16px; padding:12px 14px;}
.g-slot{
  min-height:60px; border:3px dashed var(--ink); border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center; gap:4px; padding:6px; flex-wrap:wrap;
}
.g-slot.filled{border-style:solid; background:#F2FBF6;}
.g-slot.done{background:#E9FBF2; border-color:var(--leaf-d);}
.g-num{
  font-family:var(--font-disp); font-weight:800; font-size:1.6rem; text-align:center; width:130px;
  padding:10px 12px; border:3px solid var(--ink); border-radius:14px; background:#fff; box-shadow:var(--sh-sm);
}
.g-bar{height:18px; border:3px solid var(--ink); border-radius:99px; background:#fff; overflow:hidden; box-shadow:var(--sh-sm);}
.g-bar i{display:block; height:100%; background:repeating-linear-gradient(-45deg,var(--leaf) 0 12px, var(--mint) 12px 24px); transition:width .45s, background .45s;}
.g-bar.hot i{background:repeating-linear-gradient(-45deg,var(--coral) 0 12px, #FFB088 12px 24px);}
.g-bar.cool i{background:repeating-linear-gradient(-45deg,var(--sky) 0 12px, #A8DBFF 12px 24px);}
.g-meter-label{display:flex; justify-content:space-between; font-weight:800; font-size:.85rem; margin-bottom:4px;}
.g-hintbox{
  margin-top:10px; padding:10px 14px; background:#FFF3C9; border:2.5px solid var(--ink);
  border-radius:14px; font-weight:700; font-size:.95rem; animation:cardin .3s;
}
.g-ava{font-size:34px; display:inline-block; animation:floaty 4s ease-in-out infinite;}
.g-tray{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:14px; min-height:74px;
  background:var(--paper); border:3px dashed var(--ink); border-radius:16px;
}
.g-wallet{display:flex; gap:8px; flex-wrap:wrap; padding:12px; background:#FFF6D6; border:3px solid var(--ink); border-radius:16px; min-height:70px; align-items:center; justify-content:center;}
.g-money{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; cursor:grab;
  min-width:64px; min-height:52px; padding:6px 10px; background:#D2F5E5; border:2.5px solid var(--ink);
  border-radius:50% 50% 48% 48%; font-weight:800; font-size:.72rem; font-family:var(--font-disp);
  touch-action:none; box-shadow:var(--sh-sm); user-select:none;
}
.g-money.paper{border-radius:12px; background:#FFE9A8;}
.g-clockwrap{display:grid; place-items:center; margin:8px auto; width:min(320px,80vw);}
.g-clockwrap svg{width:100%; height:auto; touch-action:none;}
.g-clock-hands .hand{cursor:grab; touch-action:none;}
.g-mapbox{max-width:560px; margin:0 auto;}
.g-mapbox svg{width:100%; height:auto; display:block;}
.g-prov{cursor:pointer; transition:filter .2s, opacity .2s;}
.g-prov.ok{filter:none; opacity:1;}
.g-prov.done{animation:pop .5s;}
.g-plantbox{display:grid; place-items:center; min-height:240px;}
.g-daychip{font-family:var(--font-disp); font-weight:800; background:var(--sun); border:2.5px solid var(--ink); border-radius:99px; padding:4px 14px;}
.g-balloon{
  position:absolute; cursor:pointer; font-family:var(--font-disp); font-weight:800; font-size:1.25rem;
  padding:10px 18px; background:#FFE3EE; border:3px solid var(--ink); border-radius:999px; box-shadow:var(--sh-sm);
  animation:balfloat linear forwards; touch-action:auto;
}
@keyframes balfloat{from{transform:translateY(-10px);}to{transform:translateY(var(--fall,420px));}}
.g-bubble{
  position:absolute; width:34px; height:34px; border-radius:50%; border:2.5px solid var(--ink);
  background:#DFF1FF; display:grid; place-items:center; font-weight:800; font-size:.8rem; font-family:var(--font-disp); cursor:pointer;
}
.g-cell3d-wrap{position:relative; height:340px; border:3px solid var(--ink); border-radius:18px; overflow:hidden; background:radial-gradient(circle at 40% 30%, #2E1F52 0%, #1B1233 70%);}
.g-cell3d-wrap canvas{width:100%; height:100%; display:block; touch-action:none;}
.g-cell-label{
  position:absolute; right:10px; bottom:10px; max-width:250px; background:#FFFFFFEE; border:3px solid var(--ink);
  border-radius:14px; padding:10px 12px; font-weight:700; font-size:.88rem; box-shadow:var(--sh-sm);
}
.g-organel-chip{
  cursor:pointer; padding:8px 12px; border:2.5px solid var(--ink); border-radius:12px; background:#fff;
  font-weight:800; font-size:.85rem; font-family:var(--font-disp); box-shadow:var(--sh-sm);
}
.g-organel-chip.got{background:var(--leaf); color:#fff;}
.g-tl-card{
  display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:grab; touch-action:none;
  background:#fff; border:3px solid var(--ink); border-radius:14px; box-shadow:var(--sh-sm); font-weight:800; user-select:none;
}
.g-tl-line{position:relative; height:74px; border:3px dashed var(--ink); border-radius:16px; background:#FFFDF6; display:flex; align-items:center; gap:8px; padding:8px; overflow-x:auto;}
.g-tl-year{font-family:var(--font-disp); font-weight:800; color:var(--grape-d);}
.g-cube{cursor:pointer;}
.g-cube:hover{opacity:.85;}
.g-punnett{display:grid; border:3px solid var(--ink); border-radius:16px; overflow:hidden; width:min(420px,90vw); margin:0 auto; background:#fff;}
.g-punnett .pc{display:grid; place-items:center; aspect-ratio:1; border:2px solid var(--ink); font-family:var(--font-disp); font-weight:800; font-size:1.15rem;}
.g-punnett .ph{background:var(--sun); font-size:1.2rem;}
.g-chem-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; font-family:var(--font-disp); font-weight:800; font-size:1.2rem;}
.g-coef{display:inline-flex; align-items:center; gap:6px; background:#fff; border:3px solid var(--ink); border-radius:12px; padding:6px 10px;}
.g-coef b{min-width:2ch; text-align:center; font-size:1.35rem; color:var(--coral-d);}
.g-coef button{width:34px; height:34px; border:2.5px solid var(--ink); border-radius:9px; background:var(--sun); font-weight:800; cursor:pointer; font-size:1rem;}
.g-atombars{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
.g-atombars .ab{min-width:90px; padding:8px 12px; border:2.5px solid var(--ink); border-radius:12px; background:#fff; font-weight:800; font-size:.85rem; text-align:center;}
.g-atombars .ab.balanced{background:#E9FBF2;}
.g-atombars .ab .abbar{height:8px; border:2px solid var(--ink); border-radius:99px; overflow:hidden; margin-top:5px; background:#EFEAF9;}
.g-atombars .ab .abbar i{display:block; height:100%; background:var(--sky);}
.g-vector-canvas{width:100%; height:380px; border:3px solid var(--ink); border-radius:16px; background:#EAF7FF; display:block; touch-action:none;}
.g-market-log{max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:10px; background:#FFFDF6; border:2.5px dashed var(--ink); border-radius:14px;}
.g-profit-row{display:flex; align-items:center; gap:8px; font-weight:800; font-size:.88rem;}
.g-profit-row .pbar{flex:1; height:12px; border:2px solid var(--ink); border-radius:99px; overflow:hidden; background:#fff;}
.g-profit-row .pbar i{display:block; height:100%;}
.g-calc-canvas{width:100%; height:340px; border:3px solid var(--ink); border-radius:16px; background:#fff; display:block; touch-action:none;}
.g-chip-cur{font-family:var(--font-disp); font-weight:800; font-size:1.05rem;}
.g-bigres{font-family:var(--font-disp); font-weight:800; font-size:1.6rem; color:var(--sky-d); text-align:center;}

/* ============================================================
   UI UPGRADE v3 — Playful & Flexible (ui-spec 3-C)
   Bento asimetris + tema dunia + motion berlapis + a11y touch
   ============================================================ */

/* ---- 1. Token & tema per dunia (#app[data-world]) ---- */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--tap:44px;--bouncy:cubic-bezier(.2,1.4,.4,1);
  --w-accent:var(--coral);--w-accent-d:var(--coral-d);--w-bg:#FFF6E5;--w-pattern:none;}
#app[data-world="tk"]{--w-accent:var(--pink);--w-accent-d:var(--pink-d);--w-bg:#FFE3EE;
  --w-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect x='18' y='22' width='9' height='14' rx='3' fill='%23FF6B5E' opacity='.5' transform='rotate(20 22 29)'/%3E%3Ccircle cx='70' cy='40' r='6' fill='%2338A9F5' opacity='.45'/%3E%3Crect x='104' y='70' width='9' height='14' rx='3' fill='%232EC77E' opacity='.45' transform='rotate(-18 108 77)'/%3E%3Ccircle cx='40' cy='96' r='5' fill='%23FFC53D' opacity='.55'/%3E%3Ccircle cx='112' cy='18' r='4' fill='%23FF8FAB' opacity='.6'/%3E%3C/svg%3E");}
#app[data-world="sd"]{--w-accent:var(--leaf);--w-accent-d:var(--leaf-d);--w-bg:#E4F8EC;
  --w-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cpath d='M40 108c0-32 20-54 50-58-2 32-19 52-50 58z' fill='%232EC77E' opacity='.38'/%3E%3Cpath d='M90 50c-15 23-8 46 11 60' fill='none' stroke='%231EA864' stroke-width='3' opacity='.38' stroke-linecap='round'/%3E%3Ccircle cx='112' cy='112' r='6' fill='%23FFC53D' opacity='.55'/%3E%3Ccircle cx='20' cy='30' r='5' fill='%23FFC53D' opacity='.4'/%3E%3C/svg%3E");}
#app[data-world="smp"]{--w-accent:var(--sky);--w-accent-d:var(--sky-d);--w-bg:#DFF1FF;
  --w-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64'%3E%3Cpath d='M0 24 Q20 8 40 24 T80 24 T120 24 T160 24' fill='none' stroke='%23FFFFFF' stroke-width='6' opacity='.45' stroke-linecap='round'/%3E%3Cpath d='M0 46 Q20 32 40 46 T80 46 T120 46 T160 46' fill='none' stroke='%237FE3C3' stroke-width='5' opacity='.4' stroke-linecap='round'/%3E%3C/svg%3E");}
#app[data-world="sma"]{--w-accent:var(--grape);--w-accent-d:var(--grape-d);--w-bg:#ECE2FF;
  --w-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cpath d='M22 22l3.2 7 7.2.9-5.3 5 1.3 7.1-6.4-3.4-6.4 3.4 1.3-7.1-5.3-5 7.2-.9z' fill='%23FFFFFF' opacity='.55'/%3E%3Cpath d='M92 64l2.4 5.2 5.6.7-4.1 3.9 1 5.5-4.9-2.6-4.9 2.6 1-5.5-4.1-3.9 5.6-.7z' fill='%23FFFFFF' opacity='.4'/%3E%3Ccircle cx='104' cy='16' r='2.6' fill='%23FFFFFF' opacity='.5'/%3E%3Ccircle cx='34' cy='108' r='2.2' fill='%23FFC53D' opacity='.55'/%3E%3C/svg%3E");}
.world-hero{background:var(--w-bg);}
.world-hero::before{content:'';position:absolute;inset:0;background-image:var(--w-pattern);background-repeat:repeat;opacity:.9;pointer-events:none;}
.sub-tab.on{background:var(--w-accent);}
.quiz-progress i{background:repeating-linear-gradient(-45deg,var(--w-accent,var(--leaf)) 0 12px,#fff 12px 24px);}

/* ---- 2. Bento playful (asimetris + tilt) ---- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,2vw,16px);margin-top:14px;}
.b-card{
  position:relative;background:var(--card);border:var(--line) solid var(--ink);
  border-radius:var(--r-lg);box-shadow:var(--sh);padding:18px;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;
  transform:rotate(var(--tilt,0deg));
  transition:transform .14s var(--spring),box-shadow .14s;
  animation:cardin .45s var(--bouncy) both;animation-delay:calc(var(--i,0)*55ms);
}
.b-hero{grid-column:span 7;grid-row:span 2;min-height:250px;padding:22px;}
.b-wide{grid-column:span 5;}
.b-tall{grid-column:span 5;grid-row:span 2;}
.b-mini{grid-column:span 4;}
@media (hover:hover){
  .b-card:hover{transform:rotate(0deg) scale(1.035);box-shadow:var(--sh-lg);animation:wobble .45s var(--spring);}
}
.b-card:active{transform:translateY(4px);box-shadow:var(--sh-sm);}
.b-card .gico{width:54px;height:54px;display:grid;place-items:center;font-size:28px;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);background:#FFF;transform:rotate(-3deg);}
.b-card h3{margin:0;}
.b-card.world{color:#fff;overflow:hidden;min-height:170px;}
.b-card.world.tkc{background:linear-gradient(160deg,var(--pink) 0%,var(--sun) 130%);}
.b-card.world.sdc{background:linear-gradient(160deg,var(--leaf) 0%,var(--mint) 130%);}
.b-card.world.smpc{background:linear-gradient(160deg,var(--sky) 0%,var(--mint) 130%);}
.b-card.world.smac{background:linear-gradient(160deg,var(--grape) 0%,#C9A6FF 130%);}
.b-card.world::after{content:'';position:absolute;right:-26px;top:-26px;width:110px;height:110px;border-radius:50%;background:#FFFFFF22;border:3px solid #FFFFFF44;}
.b-card.world.b-hero .wc-ico{width:74px;height:74px;font-size:40px;}
.b-card.world .wc-ico{width:58px;height:58px;display:grid;place-items:center;font-size:32px;background:#FFFFFF33;border:3px solid #fff;border-radius:18px;transform:rotate(-5deg);box-shadow:0 4px 0 rgba(0,0,0,.18);}
.b-card.world h3{text-shadow:1px 2px 0 rgba(0,0,0,.22);margin:.4em 0 0;font-size:1.4rem;}
.b-card.world p{margin:0;font-weight:700;font-size:.9rem;opacity:.95;}
.b-card.world .wc-meta{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;}
.b-card.world .wc-progress{position:absolute;bottom:0;left:0;height:8px;background:#FFFFFFCC;border-top:2.5px solid var(--ink);transition:width .6s;}
.stick-badge{
  position:absolute;top:-13px;right:-7px;z-index:2;
  font-family:var(--font-disp);font-weight:800;font-size:.75rem;
  padding:4px 11px;background:var(--sun);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;
  transform:rotate(7deg);box-shadow:0 3px 0 var(--ink);
}
.stick-badge.leaf{background:var(--leaf);color:#fff;}
.stick-badge.pink{background:var(--pink);}
.stick-badge.grape{background:#E5D8FF;}

/* ---- 3. Toolbar galeri + chip filter bebas ---- */
.game-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 4px;position:sticky;top:64px;z-index:5;background:var(--paper);padding:8px 0;}
.chip-filter{display:flex;flex-wrap:wrap;gap:9px;flex:1;}
.chip-filter .chip{min-height:var(--tap);padding:8px 16px;font-size:.95rem;}
.chip-filter .chip[aria-pressed="true"]{background:var(--w-accent,var(--ink));color:#fff;transform:rotate(-1.5deg);}
.chip-filter .chip:active{transform:translateY(3px);}
.chip-filter .chip .cnt{font-size:.72rem;border:2px solid currentColor;border-radius:99px;padding:0 7px;}
.b-card.hide,.topic-card.hide{display:none;}
.region-title{display:flex;align-items:center;gap:12px;margin:22px 0 2px;}
.region-title .region-line{flex:1;height:3px;border-top:3px dashed var(--ink);opacity:.35;border-radius:99px;}
.btn-ink{background:var(--ink);color:#fff;}
.btn-surprise{background:var(--coral);color:#fff;font-size:1.08rem;animation:pipowiggle 3.4s ease-in-out infinite;}
.btn-surprise:hover{animation:wobble .5s var(--spring);}

/* ---- 4. Empty state maskot ---- */
.empty-state{margin-top:16px;padding:26px 18px;text-align:center;border:var(--line) dashed var(--ink);border-radius:var(--r-lg);background:#FFFDF6;}
.empty-state .empty-owl{display:inline-grid;place-items:center;width:72px;height:72px;font-size:40px;background:var(--sun);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--sh-sm);transform:rotate(-6deg);animation:pipoidle 5.5s ease-in-out infinite;}
.empty-state .empty-bubble{position:relative;display:inline-block;margin:14px auto 4px;padding:12px 18px;background:#fff;border:2.5px solid var(--ink);border-radius:16px;font-weight:800;max-width:36ch;}
.empty-state .empty-bubble::before{content:'';position:absolute;top:-12px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom-color:var(--ink);}
.empty-state .btn{margin-top:10px;}

/* ---- 5. Motion: spring, stagger, juice, idle maskot ---- */
@keyframes wobble{
  0%{transform:rotate(var(--tilt,0deg)) scale(1)}
  35%{transform:rotate(calc(var(--tilt,0deg)*-1.6)) scale(1.045)}
  65%{transform:rotate(calc(var(--tilt,0deg)*.9)) scale(1.02)}
  100%{transform:rotate(0deg) scale(1.035)}
}
@keyframes pipowiggle{0%,92%,100%{transform:rotate(0)}94%{transform:rotate(-2.5deg)}96%{transform:rotate(2.5deg)}98%{transform:rotate(-1.2deg)}}
@keyframes pipoidle{0%,100%{transform:rotate(-5deg) translateY(0)}25%{transform:rotate(-1deg) translateY(-4px)}50%{transform:rotate(2deg) translateY(-1px)}75%{transform:rotate(-2deg) translateY(-3px)}}
.brand-owl{animation:pipoidle 5.5s ease-in-out infinite;transform-origin:50% 85%;}
@keyframes squish{0%{transform:scale(1)}40%{transform:scale(1.06,.92)}70%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
.opt.correct{animation:pop .35s, squish .45s .1s;}
.combo-badge{animation:combo-pulse 1.1s ease-in-out infinite;}
@keyframes combo-pulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(2deg)}}
.confetti.mini{width:7px;height:10px;animation-duration:1.2s;}
.levelup-card{text-align:center;animation:levelin .6s var(--spring);}
@keyframes levelin{0%{opacity:0;transform:scale(.5) rotate(-6deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}

/* ---- 6. Touch ≥44px + fokus + safe area ---- */
.iconbtn{width:44px;height:44px;font-size:19px;}
.chip,.sub-tab{min-height:var(--tap);}
.bottomnav a{min-width:56px;min-height:48px;padding:7px 12px;font-size:.75rem;}
.bottomnav{bottom:calc(12px + env(safe-area-inset-bottom));}
.utbk-map .um{width:40px;height:40px;}
.av-opt{min-height:56px;}
:focus-visible{outline:3.5px solid var(--coral);outline-offset:3px;border-radius:6px;}
.bottomnav a:focus-visible{outline-offset:-4px;}
@media (max-width:640px){
  .bottomnav a{min-width:48px;padding:6px 9px;font-size:.68rem;}
}

/* ---- 7. Bento responsif ---- */
@media (max-width:860px){
  .bento{grid-template-columns:repeat(6,1fr);}
  .b-hero{grid-column:span 6;}
  .b-wide,.b-tall,.b-mini{grid-column:span 3;}
  .b-tall{grid-row:span 1;}
  .world-bento .b-hero{min-height:200px;}
}
@media (max-width:480px){
  .bento{grid-template-columns:1fr 1fr;}
  .b-hero,.b-wide,.b-tall{grid-column:span 2;min-height:0;}
  .b-mini{grid-column:span 1;}
  .b-card{--tilt:0deg;animation-delay:calc(var(--i,0)*30ms);}
  .game-toolbar{position:static;}
}
@media (prefers-reduced-motion:reduce){
  .b-card,.stick-badge,.btn-surprise,.brand-owl,.g-ava{transform:rotate(0) !important;animation:none !important;}
}