:root{
  --teal:#0F766E; --teal-d:#115E59; --amber:#F59E0B; --amber-d:#B45309;
  --blue:#0F766E; --blue-ink:#115E59; --violet:#F59E0B;
  --ink:#1C1917; --ink-soft:#78716C; --line:#EFE6DA; --line2:#E7DCCB;
  --card:#fff; --paper:#FFF8F0; --green:#16B364; --yellow:#F59E0B;
  --round:20px;
  --glow-teal:0 0 0 4px rgba(15,118,110,.15),0 12px 28px -8px rgba(15,118,110,.5);
  --sans:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,sans-serif;
  /* iOS safe areas */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--sans);
  min-height:100%;min-height:100dvh;display:flex;flex-direction:column;
  overscroll-behavior-y:none;
  background:
    radial-gradient(700px 400px at 90% -5%,rgba(254,243,199,.8) 0%,transparent 55%),
    radial-gradient(600px 400px at -5% 0%,rgba(204,251,241,.7) 0%,transparent 50%),
    var(--paper)}
.screen{flex:1;display:flex;flex-direction:column;max-width:560px;width:100%;margin:0 auto;
  padding-left:calc(16px + var(--sal));padding-right:calc(16px + var(--sar));
  padding-bottom:calc(20px + var(--sab))}
[hidden]{display:none!important}
button{font-family:inherit;touch-action:manipulation;user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}

/* ---------- appbar ---------- */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0;position:sticky;top:0;background:var(--paper);z-index:5;
  padding-top:calc(12px + var(--sat))}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.05rem;white-space:nowrap}
.logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--teal),var(--amber));color:#fff;font-size:1.15rem}
.kidchip{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:6px 12px;font-weight:800;font-size:.88rem;white-space:nowrap;min-width:0}
.kidchip .avatar{font-size:1.15rem}
.kidchip .lvl{background:#CCFBF1;color:var(--teal-d);border-radius:999px;padding:2px 8px;font-size:.7rem;flex:none}

/* ---------- stats ---------- */
.statsbar{display:flex;gap:9px;margin:6px 0 14px}
.stat{flex:1;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:11px 6px;text-align:center;box-shadow:0 4px 14px -12px rgba(60,40,20,.25)}
.stat b{display:block;font-size:1.25rem;line-height:1.2}
.stat span{font-size:.72rem;color:var(--ink-soft);font-weight:700;display:block;margin-top:2px}

/* ---------- level selects ---------- */
.levelrow{display:flex;gap:9px;margin-bottom:16px}
.levelrow label{flex:1;min-width:0;font-weight:800;font-size:.8rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px}
.levelrow select{padding:12px 10px;border-radius:12px;border:1.5px solid var(--line);
  font-family:inherit;font-weight:800;font-size:.95rem;background:var(--card);width:100%;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378716C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

/* ---------- topic grid ---------- */
.topicgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.topic{border-radius:var(--round);padding:16px 14px;border:2px solid;background:var(--card);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;cursor:pointer;
  text-align:left;transition:transform .12s,box-shadow .12s;min-height:96px;
  box-shadow:0 4px 14px -10px rgba(60,40,20,.2)}
.topic:active{transform:scale(.96)}
.ticon{font-size:1.7rem;font-weight:900;line-height:1;filter:drop-shadow(0 2px 4px rgba(60,40,20,.15))}
.tname{font-weight:900;font-size:1rem;color:var(--ink)}
.tsub{font-size:.75rem;color:var(--ink-soft);font-weight:600}

/* ---------- practice (game mode) ---------- */
.ghost{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink-soft);padding:6px;line-height:1}
.progress{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.progress .bar{flex:1;height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.progress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--amber));width:0;transition:width .3s;border-radius:999px}
.progress span{font-weight:800;font-size:.82rem;color:var(--ink-soft);white-space:nowrap}
.hearts{font-size:1rem;letter-spacing:2px;white-space:nowrap;transition:transform .2s}
.hearts.lose{animation:heartpop .4s}
@keyframes heartpop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* HUD: combo + xp */
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 2px;min-height:30px}
.combo{font-weight:900;font-size:1.05rem;color:#C2410C;
  background:linear-gradient(135deg,#FFEDD5,#FED7AA);border:2px solid #FDBA74;
  padding:4px 12px;border-radius:999px;animation:comboin .25s;display:inline-flex;align-items:center;gap:4px}
@keyframes comboin{0%{transform:scale(.5)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.combo b{font-size:1.15rem}
.xpbarwrap{flex:1;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.xpbar{flex:0 1 140px;height:9px;background:var(--line);border-radius:999px;overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),#FBBF24);border-radius:999px;transition:width .4s}
#xpGain{font-weight:900;font-size:.82rem;color:var(--amber-d);white-space:nowrap}

.qwrap{margin-top:6px;display:flex;flex-direction:column;gap:14px;flex:1}
.qtopic{font-weight:800;color:var(--ink-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;text-align:center}
.qtext{font-size:clamp(2rem,9vw,2.8rem);font-weight:900;line-height:1.2;min-height:70px;text-align:center;
  display:grid;place-items:center;word-break:break-word;padding:0 4px;
  background:linear-gradient(120deg,var(--ink),var(--teal-d));-webkit-background-clip:text;background-clip:text}
.qtext.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}

/* multiple choice */
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:420px;margin:0 auto;width:100%}
.choice{font-family:inherit;font-size:1.7rem;font-weight:900;padding:22px 10px;border-radius:18px;
  border:2.5px solid var(--line2);background:var(--card);color:var(--ink);cursor:pointer;
  box-shadow:0 4px 0 var(--line2),0 8px 16px -8px rgba(60,40,20,.15);
  transition:transform .08s,box-shadow .08s,background .15s,border-color .15s;
  animation:choicein .25s backwards}
.choice:nth-child(1){animation-delay:.02s}.choice:nth-child(2){animation-delay:.06s}
.choice:nth-child(3){animation-delay:.1s}.choice:nth-child(4){animation-delay:.14s}
@keyframes choicein{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
.choice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line2)}
.choice.correct{background:linear-gradient(135deg,#16B364,#0D9E63);border-color:#0D9E63;color:#fff;
  box-shadow:0 4px 0 #0B8A54,0 12px 24px -8px rgba(22,179,100,.6);animation:winpulse .4s}
.choice.wrongpick{background:#FEE2E2;border-color:#F87171;color:#B91C1C;animation:shake .4s}
.choice.dim{opacity:.4}
@keyframes winpulse{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
.choice .key{position:absolute;font-size:.7rem;color:var(--ink-soft);top:6px;left:10px;font-weight:800}

.qhint{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;color:var(--ink-soft);min-height:24px}
.link{background:none;border:none;color:var(--teal-d);font-weight:800;cursor:pointer;font-size:.9rem;padding:4px}
.qhint span{font-size:.88rem;background:#FEF3C7;border-radius:10px;padding:8px 12px}

/* ---------- analog clock (Masa topic) ---------- */
.clockwrap{display:flex;justify-content:center;margin:2px auto 0;width:100%}
#clockCanvas{width:min(64vw,240px);height:min(64vw,240px);
  background:var(--card);border-radius:50%;
  box-shadow:0 12px 28px -12px rgba(60,40,20,.3), inset 0 0 0 3px var(--line2)}

/* ---------- visual area (Pecahan bars / Wang money) ---------- */
.visualwrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:4px auto 0;width:100%;max-width:420px}
/* fraction bars */
.fracrow{display:flex;flex-direction:column;gap:10px;width:100%}
.fracbar{display:flex;width:100%;height:52px;border:2.5px solid var(--line2);border-radius:12px;overflow:hidden;background:#fff}
.fracbar .seg{flex:1;display:grid;place-items:center;font-weight:900;font-size:.95rem;color:var(--ink-soft);
  border-right:2px solid var(--line2);background:#fff}
.fracbar .seg:last-child{border-right:none}
.fracbar .seg.on{background:linear-gradient(135deg,var(--teal),#14B8A6);color:#fff}
.fraclabel{text-align:center;font-weight:800;color:var(--ink-soft);font-size:.85rem}
/* money */
.moneyrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.denom{display:grid;place-items:center;font-weight:900;border-radius:10px;box-shadow:0 4px 10px -4px rgba(60,40,20,.25);border:2px solid}
.denom.note{width:110px;height:52px;font-size:1.05rem;color:#fff}
.denom.coin{width:52px;height:52px;border-radius:50%;font-size:.8rem;color:#5A4A00;background:radial-gradient(circle at 35% 30%,#FFE08A,#F5C445);border-color:#D9A516}
.denom small{display:block;font-size:.6rem;font-weight:800;opacity:.85}

/* ---------- jalan kira (working pad) ---------- */
.qtools{display:flex;gap:10px;justify-content:center}
.toolbtn{background:var(--card);border:2px solid var(--line2);border-radius:999px;
  padding:9px 16px;font-weight:800;font-size:.88rem;color:var(--ink);cursor:pointer;
  box-shadow:0 3px 0 var(--line2);transition:transform .08s}
.toolbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line2)}
.working{margin-top:6px;background:var(--card);border:2px solid var(--teal);border-radius:18px;
  overflow:hidden;box-shadow:0 12px 28px -14px rgba(15,118,110,.4);animation:workin .2s}
@keyframes workin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.workhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;background:linear-gradient(135deg,#CCFBF1,#A5F3FC);font-weight:900;color:var(--teal-d);font-size:.9rem}
.worktools{display:flex;gap:6px}
.wbtn{background:#fff;border:1.5px solid var(--line2);border-radius:9px;width:34px;height:32px;
  font-size:.95rem;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.wbtn:active{transform:scale(.92)}
.wbtn.wclose{background:#FEE2E2;border-color:#FCA5A5;color:#B91C1C}
#workpad{display:block;width:100%;height:220px;background:#fff;touch-action:none;cursor:crosshair}

/* floating +XP popup */
.xppop{position:fixed;top:38%;left:50%;transform:translateX(-50%);z-index:60;
  font-size:2rem;font-weight:900;color:var(--amber-d);pointer-events:none;
  text-shadow:0 2px 8px rgba(255,248,240,.9);animation:xprise .9s forwards}
@keyframes xprise{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}
  20%{opacity:1;transform:translate(-50%,0) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-50px) scale(1)}}

/* full-screen color flash on answer */
.flash{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0}
.flash.showgood{animation:flashgood .5s}
.flash.showbad{animation:flashbad .5s}
@keyframes flashgood{0%{opacity:0;background:rgba(22,179,100,.0)}15%{opacity:1;background:rgba(22,179,100,.18)}100%{opacity:0}}
@keyframes flashbad{0%{opacity:0;background:rgba(220,38,38,0)}15%{opacity:1;background:rgba(220,38,38,.15)}100%{opacity:0}}

/* confetti canvas */
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}

/* smaller phones */
@media(max-height:700px){
  .qtext{min-height:52px;font-size:clamp(1.8rem,8vw,2.3rem)}
  .qwrap{gap:10px}
  .choice{padding:18px 8px;font-size:1.5rem}
}
@media(max-width:360px){.choices{gap:9px}.choice{font-size:1.35rem;padding:16px 6px}}

/* smaller phones: shrink numpad so it fits without scrolling */
@media(max-height:700px){
  .numpad button{height:50px;font-size:1.35rem}
  .numpad .np-go{height:50px}
  .qtext{min-height:52px;font-size:clamp(1.7rem,7vw,2.2rem)}
  .qwrap{gap:10px}
  .qanswer input{padding:10px;font-size:1.4rem}
}
@media(max-width:360px){
  .numpad{gap:7px}
  .numpad button{height:52px;font-size:1.3rem}
}

/* ---------- buttons ---------- */
.btn{border:none;border-radius:14px;padding:14px 20px;font-weight:900;
  font-size:1rem;cursor:pointer;transition:transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--teal);color:#fff}
.btn.big{width:100%;padding:16px;font-size:1.05rem;margin-top:10px}
.btn.ghostbtn{background:var(--card);border:2px solid var(--line2);color:var(--ink)}
.link{background:none;border:none;color:var(--teal-d);font-weight:800;cursor:pointer;font-size:.9rem;padding:4px}
.qhint{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;color:var(--ink-soft);min-height:24px}
.qhint span{font-size:.88rem}

/* ---------- feedback overlay ---------- */
.feedback{position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:calc(24px + var(--sat)) 24px calc(24px + var(--sab));text-align:center;
  background:radial-gradient(700px 500px at 50% 30%,rgba(204,251,241,.95),rgba(255,248,240,.98))}
.feedback.no{background:radial-gradient(700px 500px at 50% 30%,rgba(254,226,226,.95),rgba(255,248,240,.98))}
.femoji{font-size:5rem;animation:pop .4s cubic-bezier(.34,1.56,.64,1);line-height:1;
  filter:drop-shadow(0 8px 20px rgba(60,40,20,.25))}
.ftext{font-size:1.8rem;font-weight:900}
.feedback.ok .ftext{color:var(--teal-d)}
.feedback.no .ftext{color:#B91C1C}
.fstars{font-size:2.6rem;color:var(--amber);letter-spacing:6px;
  filter:drop-shadow(0 4px 10px rgba(245,158,11,.4))}
.feedback .btn{min-width:200px;box-shadow:var(--glow-teal,0 12px 28px -8px rgba(15,118,110,.5))}
@keyframes pop{0%{transform:scale(.4) rotate(-10deg)}70%{transform:scale(1.2) rotate(4deg)}100%{transform:scale(1) rotate(0)}}

/* ---------- results ---------- */
.resultcard{margin:auto;text-align:center;background:var(--card);border:2px solid var(--line2);
  border-radius:28px;padding:30px 22px;box-shadow:0 24px 48px -20px rgba(60,40,20,.3);width:100%;position:relative;overflow:hidden}
.resultcard::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;
  background:linear-gradient(90deg,var(--teal),var(--amber))}
.remoji{font-size:4.4rem;line-height:1;filter:drop-shadow(0 8px 20px rgba(60,40,20,.25))}
.resultcard h2{margin:12px 0 4px;font-size:1.7rem;
  background:linear-gradient(120deg,var(--ink),var(--teal-d));-webkit-background-clip:text;background-clip:text}
.rstars{font-size:2.2rem;color:var(--amber);letter-spacing:4px;margin-bottom:10px;
  filter:drop-shadow(0 4px 10px rgba(245,158,11,.4))}
.bestcombo{font-weight:900;color:#C2410C;font-size:1rem;margin-bottom:14px;
  background:linear-gradient(135deg,#FFEDD5,#FED7AA);border:2px solid #FDBA74;border-radius:12px;
  padding:8px 14px;display:inline-block}
.bestcombo b{font-size:1.15rem}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
.rstat{background:linear-gradient(135deg,#FBF6EE,#FEF9F0);border:1.5px solid var(--line);border-radius:16px;padding:16px}
.rstat b{display:block;font-size:1.6rem;
  background:linear-gradient(135deg,var(--teal),#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent}
.rstat span{font-size:.78rem;color:var(--ink-soft);font-weight:700}

/* ---------- access gate / login ---------- */
.gatewrap{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:400px;width:100%;
  margin:0 auto;padding:24px 0;text-align:center}
.gatelog{font-size:3.6rem;line-height:1;filter:drop-shadow(0 6px 14px rgba(60,40,20,.2))}
.gatetitle{font-size:2rem;font-weight:900;margin:12px 0 4px;
  background:linear-gradient(120deg,var(--ink),var(--teal-d));-webkit-background-clip:text;background-clip:text}
.gatesub{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin-bottom:22px}
.gatecard{background:var(--card);border:2px solid var(--line2);border-radius:22px;padding:24px 20px;
  box-shadow:0 16px 36px -18px rgba(60,40,20,.3);text-align:left}
.gatelabel{display:block;font-weight:800;font-size:.85rem;color:var(--ink-soft);margin-bottom:8px}
.gateinput{width:100%;font-size:1.05rem;font-weight:700;padding:14px 16px;border-radius:13px;
  border:2px solid var(--line2);font-family:inherit;margin-bottom:14px;background:#FBF6EE}
.gateinput:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 4px rgba(15,118,110,.15)}
.gatemsg{margin-top:12px;font-weight:700;font-size:.88rem;padding:11px 13px;border-radius:11px;text-align:center}
.gatemsg.err{background:#FEE2E2;color:#B91C1C}
.gatemsg.ok{background:#ECFDF5;color:#065F46}
.gatesentemoji{font-size:2.6rem;text-align:center}
.gatecard b{display:block;text-align:center;font-size:1.15rem;margin:8px 0 6px}
.gatecard p{color:var(--ink-soft);font-weight:600;font-size:.9rem;text-align:center;line-height:1.5}
.gatecard .link{display:block;margin:14px auto 0;text-align:center}
.gatebuy{margin-top:22px;color:var(--ink-soft);font-weight:600;font-size:.9rem}
.gatebuy a{color:var(--teal-d);font-weight:900;text-decoration:underline}

/* ---------- daily mission card ---------- */
.dailycard{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:linear-gradient(135deg,#134E4A,#0F766E 60%,#14B8A6);border:none;border-radius:18px;
  padding:14px 16px;margin:0 0 14px;cursor:pointer;color:#fff;text-align:left;
  box-shadow:0 10px 24px -12px rgba(15,118,110,.5);transition:transform .1s;position:relative;overflow:hidden}
.dailycard::after{content:"";position:absolute;top:-30px;right:-20px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.35),transparent 70%)}
.dailycard:active{transform:scale(.98)}
.dc-left{display:flex;align-items:center;gap:12px;min-width:0}
.dc-emoji{font-size:1.8rem;flex:none}
.dc-text{display:flex;flex-direction:column;min-width:0}
.dc-text b{font-weight:900;font-size:1rem}
.dc-text span{font-size:.76rem;color:#A7F3D0;font-weight:600}
.dc-go{flex:none;background:var(--amber);color:#3F2A00;font-weight:900;font-size:.85rem;
  padding:8px 14px;border-radius:999px;position:relative}
.dailycard.done{background:var(--line2);pointer-events:none}
.dailycard.done .dc-go{background:#D1C7B8;color:#78716C}

/* ---------- pet collection ---------- */
.collectcard{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  background:linear-gradient(135deg,#7C2D12,#C2410C 60%,#F59E0B);border:none;border-radius:18px;
  padding:14px 16px;margin:0 0 16px;cursor:pointer;color:#fff;text-align:left;
  box-shadow:0 10px 24px -12px rgba(194,65,12,.5);transition:transform .1s;position:relative;overflow:hidden}
.collectcard::after{content:"";position:absolute;top:-30px;right:-20px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%)}
.collectcard:active{transform:scale(.98)}
.collectsub{color:var(--ink-soft);font-weight:600;font-size:.88rem;text-align:center;margin:4px 0 14px}
.collectcount{font-weight:900;background:#CCFBF1;color:var(--teal-d);border-radius:999px;padding:4px 12px;font-size:.85rem}
.petgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:calc(16px + var(--sab))}
.pet{background:var(--card);border:2px solid var(--line2);border-radius:18px;padding:16px 10px;text-align:center;
  box-shadow:0 6px 16px -10px rgba(60,40,20,.25);position:relative;transition:transform .12s}
.pet:active{transform:scale(.96)}
.pet .pe{font-size:2.4rem;line-height:1;filter:drop-shadow(0 3px 6px rgba(60,40,20,.2))}
.pet .pn{font-weight:900;font-size:.78rem;margin-top:8px;line-height:1.15}
.pet .pr{font-size:.62rem;font-weight:800;margin-top:3px;text-transform:uppercase;letter-spacing:.03em}
.pet.locked{opacity:.55}
.pet.locked .pe{filter:grayscale(1) opacity(.5)}
.pet .lock{position:absolute;top:8px;right:8px;font-size:.9rem}
.pr.biasa{color:#78716C}.pr.jarang{color:#2563EB}.pr.epik{color:#7C3AED}.pr.legend{color:#B45309}
.pet.legendary{background:linear-gradient(135deg,#FEF3C7,#FDE68A);border-color:var(--amber)}

/* pet unlock toast */
.petunlock{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(28,25,23,.6);backdrop-filter:blur(4px)}
.pu-card{background:var(--card);border-radius:26px;padding:30px 26px;text-align:center;max-width:300px;width:100%;
  box-shadow:0 32px 64px -20px rgba(60,40,20,.5);position:relative;overflow:hidden;animation:puin .35s cubic-bezier(.34,1.56,.64,1)}
.pu-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:linear-gradient(90deg,var(--amber),#FBBF24)}
@keyframes puin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.pu-burst{position:absolute;font-size:1.4rem;top:14px;left:14px;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pu-emoji{font-size:4.4rem;line-height:1;animation:pupet .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes pupet{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1)}}
.pu-card h3{margin:12px 0 2px;font-size:1.1rem;color:var(--ink-soft);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.pu-name{font-weight:900;font-size:1.4rem}
.pu-rarity{font-weight:800;font-size:.82rem;margin:4px 0 18px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:400px){.petgrid{grid-template-columns:repeat(3,1fr);gap:9px}.pet .pe{font-size:2rem}}

/* ---------- gaming profile + shop ---------- */
.kidchip{border:2px solid var(--line);cursor:pointer;transition:transform .1s}
.kidchip:active{transform:scale(.96)}
.hdr-actions{display:flex;align-items:center;gap:8px}
.langbtn{background:var(--card);border:2px solid var(--line2);border-radius:999px;
  padding:7px 12px;font-weight:900;font-size:.82rem;color:var(--teal-d);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:transform .1s;white-space:nowrap}
.langbtn:active{transform:scale(.94)}
.langbtn b{letter-spacing:.03em}
.profcard{background:var(--card);border:2px solid var(--line2);border-radius:24px;padding:24px 20px;
  text-align:center;box-shadow:0 12px 28px -14px rgba(60,40,20,.3);position:relative;overflow:hidden;margin-bottom:18px}
.profcard::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;
  background:linear-gradient(90deg,var(--teal),var(--amber))}
.profavatar{position:relative;width:110px;height:110px;margin:8px auto 12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#CCFBF1,#A5F3FC);border-radius:50%;border:3px solid var(--teal);
  box-shadow:0 10px 24px -10px rgba(15,118,110,.4)}
.pa-base{font-size:3.6rem;line-height:1}
.pa-hat{position:absolute;top:-6px;font-size:2rem;line-height:1;transform:translateY(-30%)}
.pa-face{position:absolute;bottom:14px;font-size:1.7rem;line-height:1}
.profname{font-weight:900;font-size:1.4rem}
.profrank{display:inline-block;margin-top:6px;font-weight:900;font-size:.82rem;color:var(--amber-d);
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1.5px solid var(--amber);border-radius:999px;padding:4px 14px}
.proflevelrow{display:flex;align-items:center;gap:10px;margin-top:16px}
.plvl{font-weight:900;font-size:.88rem;color:var(--teal-d);white-space:nowrap}
.pxpbar{flex:1;height:11px;background:var(--line);border-radius:999px;overflow:hidden}
.pxpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),#FBBF24);border-radius:999px;transition:width .4s}
.pxpnum{font-weight:800;font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.profstats{display:flex;justify-content:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.profstats .ps{text-align:center;min-width:60px}
.profstats .ps b{display:block;font-size:1.25rem;font-weight:900;color:var(--teal-d)}
.profstats .ps span{font-size:.68rem;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* shop */
.shophead{font-size:1.15rem;font-weight:900;margin:6px 0 12px;display:flex;align-items:center;justify-content:space-between}
.shopcoins{font-size:.9rem;font-weight:900;color:var(--amber-d);background:#FEF3C7;border-radius:999px;padding:4px 12px;border:1.5px solid var(--amber)}
.shoptabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;margin-bottom:4px}
.shoptabs::-webkit-scrollbar{display:none}
.stab{flex:none;border:2px solid var(--line2);background:var(--card);border-radius:999px;padding:8px 16px;
  font-weight:800;font-size:.85rem;cursor:pointer;color:var(--ink)}
.stab.active{background:var(--teal);color:#fff;border-color:var(--teal)}
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding-bottom:calc(16px + var(--sab))}
.shopitem{background:var(--card);border:2px solid var(--line2);border-radius:16px;padding:14px 8px;text-align:center;
  cursor:pointer;transition:transform .1s;position:relative}
.shopitem:active{transform:scale(.95)}
.shopitem .si{font-size:2.2rem;line-height:1}
.shopitem .sn{font-weight:800;font-size:.72rem;margin-top:7px;line-height:1.15}
.shopitem .sp{margin-top:6px;font-weight:900;font-size:.78rem;color:var(--amber-d)}
.shopitem.owned .sp{color:var(--teal-d)}
.shopitem.equipped{border-color:var(--teal);background:#F0FDFA}
.shopitem.equipped::after{content:"✓ Dipakai";position:absolute;top:6px;right:6px;background:var(--teal);color:#fff;
  font-size:.55rem;font-weight:900;padding:2px 6px;border-radius:6px}
.shopitem.cant{opacity:.6}
@media(max-width:400px){.shopgrid{grid-template-columns:repeat(3,1fr);gap:9px}.shopitem .si{font-size:1.9rem}}

/* ---------- bonus banner ---------- */
.bonusbanner{display:flex;align-items:center;gap:13px;margin-top:16px;
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:2px dashed var(--amber);
  border-radius:var(--round);padding:15px 16px;color:inherit;
  box-shadow:0 6px 16px -12px rgba(60,40,20,.25)}
.bonusbanner:active{transform:scale(.98)}
.bb-emoji{font-size:1.9rem;flex:none}
.bb-text{display:flex;flex-direction:column;flex:1;min-width:0}
.bb-text b{font-weight:900;font-size:.98rem;color:#92400E}
.bb-text span{font-size:.78rem;color:var(--ink-soft);font-weight:600}
.bb-arrow{font-size:1.3rem;font-weight:900;color:var(--amber-d);flex:none}