/* ================= Belajar: bamboo ladder path + lesson player ================= */
:root{--bamboo1:#C9E27A;--bamboo2:#8DBA3E;--bamboo3:#6E9A2A}
html[data-theme="dark"]{--bamboo1:#7FA63A;--bamboo2:#5C8229;--bamboo3:#46661E}

.bl-path{padding-top:4px}
.bl-top{text-align:center;margin-bottom:-6px;position:relative;z-index:1}
.bl-crown{font-size:84px;line-height:1;filter:drop-shadow(0 6px 10px rgba(20,60,20,.25))}
.bl-trophy{display:inline-block;margin-top:-8px;background:var(--card);border-radius:999px;padding:8px 16px;
  font-weight:900;font-size:15px;box-shadow:var(--shadow)}

/* two bamboo rails with knots; rungs are drawn per row */
.bl-ladder{position:relative;padding:18px 0 6px}
.bl-ladder::before,.bl-ladder::after{content:"";position:absolute;top:0;bottom:0;width:13px;border-radius:8px;
  background:repeating-linear-gradient(180deg,var(--bamboo1) 0 86px,var(--bamboo3) 86px 90px),linear-gradient(90deg,var(--bamboo2),var(--bamboo1),var(--bamboo2));
  background-blend-mode:multiply;box-shadow:0 2px 6px rgba(40,70,10,.25)}
.bl-ladder::before{left:calc(50% - 60px)}
.bl-ladder::after{left:calc(50% + 47px)}

.bl-row{position:relative;height:98px;display:flex;align-items:center;justify-content:center}
.bl-row::before{content:"";position:absolute;left:calc(50% - 56px);right:calc(50% - 56px);top:50%;height:10px;margin-top:-5px;
  border-radius:6px;background:linear-gradient(180deg,var(--bamboo1),var(--bamboo2));box-shadow:0 2px 3px rgba(40,70,10,.25)}
.bl-node{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  font:inherit;font-size:24px;font-weight:900;color:#fff;background:var(--uc);
  box-shadow:0 5px 0 rgba(0,0,0,.2),0 8px 18px rgba(20,30,70,.25);transition:transform .1s}
.bl-node:active{transform:translateY(3px) scale(.96);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.bl-node.done{background:linear-gradient(150deg,#FFD84D,#F2B01E);color:#6B4A00}
.bl-node.locked{background:var(--card2);color:var(--ink2);font-size:20px;box-shadow:0 4px 0 var(--hair)}
.bl-node.cur{animation:blpulse 1.8s ease-in-out infinite}
@keyframes blpulse{0%,100%{box-shadow:0 5px 0 rgba(0,0,0,.2),0 0 0 0 color-mix(in srgb,var(--uc) 45%,transparent)}
  50%{box-shadow:0 5px 0 rgba(0,0,0,.2),0 0 0 12px color-mix(in srgb,var(--uc) 0%,transparent)}}
.bl-row.fresh .bl-node{animation:blpop .7s cubic-bezier(.34,1.6,.5,1) both}
@keyframes blpop{from{transform:scale(.3)}to{transform:scale(1)}}

.bl-lab{position:absolute;top:50%;transform:translateY(-50%);width:calc(50% - 76px);display:flex;flex-direction:column;gap:2px;
  font-size:13px;line-height:1.25;color:var(--ink)}
.bl-lab b{font-weight:900}
.bl-lab .stars{font-size:15px}
.bl-row.r .bl-lab{left:calc(50% + 72px)}
.bl-row.l .bl-lab{right:calc(50% + 72px);text-align:right;align-items:flex-end}
.bl-titi{position:absolute;top:50%;margin-top:-30px;z-index:3;pointer-events:none}
.bl-row.r .bl-titi{right:calc(50% + 70px)}
.bl-row.l .bl-titi{left:calc(50% + 70px)}

.bl-unit{position:relative;z-index:2;display:flex;align-items:center;gap:12px;margin:6px 0 10px;padding:12px 14px;
  background:var(--card);border-radius:18px;box-shadow:var(--shadow);border-left:6px solid var(--uc)}
.bl-unit b{display:block;font-size:16px;font-weight:900}
.bl-unit span{font-size:12.5px;color:var(--ink2);font-weight:800}
.bl-uico{font-size:28px;flex:none;width:40px;text-align:center}

.bl-ground{margin-top:4px;border-top:6px solid #7BC96F}
.bl-goal{margin:14px 0 2px;font-size:13.5px;font-weight:800;color:var(--ink2)}
.bl-goal .bar{margin-top:7px}

@media (prefers-reduced-motion:reduce){ .bl-node.cur,.bl-row.fresh .bl-node{animation:none} }

/* ---------- lesson player ---------- */
.bl-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bl-bar .bar{flex:1;height:14px}
.bl-x,.bl-say{border:0;background:var(--card);color:var(--ink2);width:44px;height:44px;border-radius:14px;flex:none;
  font:inherit;font-size:18px;font-weight:900;cursor:pointer;box-shadow:var(--keyshadow)}
.bl-q{font-size:19px;font-weight:900;line-height:1.35;margin:0 0 12px;letter-spacing:-.2px}
.bl-q .bl-op{display:block;font-size:34px;letter-spacing:-1px;color:var(--dot);margin-bottom:2px}
.bl-intro{margin-bottom:12px}
.bl-intro .bubble{font-size:16px;margin:0}
.bl-card .paper{margin-bottom:12px}
svg.bl-lines{min-width:0;max-height:150px}
.bl-dash svg{min-width:0;max-height:60px}
.bl-hintbtn{margin:0 0 10px}
.bl-help .paper{margin-bottom:10px}
.bl-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bl-choice{border:2.5px solid var(--hair);background:var(--card2);border-radius:20px;min-height:76px;font:inherit;font-size:30px;
  font-weight:900;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:transform .08s}
.bl-choice:active{transform:scale(.95)}
.bl-choice.good{border-color:var(--good);background:var(--goodbg)}
.bl-choice.bad{border-color:var(--hot);animation:mshake .35s 2}
.bl-sw{width:38px;height:38px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.bl-build svg{min-width:0;max-height:260px}

.bl-fb{min-height:10px}
.bl-msg{display:flex;align-items:center;gap:12px;border-radius:20px;padding:10px 14px;font-size:17px;margin-bottom:10px}
.bl-msg.good{background:var(--goodbg);color:var(--good)}
.bl-msg.warn{background:var(--warnbg);color:#C2560C}
html[data-theme="dark"] .bl-msg.warn{color:#FFB36B}
.bl-msg .mascot{flex:none}

.bl-done{text-align:center;padding:24px 18px}
.bl-done .mascot{margin:0 auto}
.bl-done h2{font-size:26px;font-weight:900;margin:6px 0 8px}
.bl-bigstars{display:flex;justify-content:center;gap:8px;font-size:52px;line-height:1;margin-bottom:10px}
.bl-bigstars span{color:var(--hair);transform:scale(0);animation:blstar .45s cubic-bezier(.34,1.6,.5,1) forwards;animation-delay:calc(.35s + var(--i)*.26s)}
.bl-bigstars span.on{color:var(--star);text-shadow:0 3px 8px rgba(245,180,0,.45)}
@keyframes blstar{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .bl-bigstars span{animation:none;transform:none} }
.bl-done .pill{margin:0 0 6px}