/* REV4 — one illustration and interaction language throughout Ruang Angka */
:root{--text:#102F76;--sage-dark:#1753EA;--border:#DCE7FF;--radius:26px}
body{background:#fff}
.card,.modal,.lesson-tile,.activity-zone{border-radius:27px}
.card,.lesson-tile,.modal{border-color:#D9E6FB}
.item-art{object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.tile-icon{background:#F0F6FF!important;border:2px solid #D7E8FF!important}
.tile-item{width:55px;height:55px;max-width:90%;max-height:90%;filter:drop-shadow(0 3px 0 rgba(21,78,190,.08))}
.lesson-tile:nth-child(4n+2) .tile-icon,.home-card:nth-child(4n+2) .tile-icon{background:#FFF6CA!important;border-color:#FFE48A!important}
.lesson-tile:nth-child(4n+3) .tile-icon,.home-card:nth-child(4n+3) .tile-icon{background:#FFEFF1!important;border-color:#FFD4D9!important}
.lesson-grid .home-card{border-radius:28px;box-shadow:0 5px 0 #EAF1FE;background:#fff;overflow:hidden}
.lesson-grid .home-card:nth-child(4n+2){background:#FFFEF7}
.level-head{color:#153A91}.level-num{background:#FFCC0A;color:#1547D6}
.kid-welcome-mascot .home-mascot{width:95%;height:100%;filter:drop-shadow(0 8px 0 rgba(12,62,149,.08))}
.kid-welcome-mascot:before{background:#E4F0FF}
.kid-onboarding .onboarding-sticker{position:absolute;width:150px;height:150px;right:6px;bottom:0;filter:drop-shadow(0 7px 0 rgba(31,64,107,.05))}
.summary-art .summary-sticker{width:104px;height:104px}
.lesson-summary{background:#fff;border:2px solid #DCE8FF;border-radius:34px;box-shadow:0 6px 0 #EDF3FF}
.lesson-summary h1{color:#123DA4}
.lesson-summary .summary-art{width:118px;height:118px;background:#FFEFAB!important}
.lesson-card{overflow:hidden}
.lesson-card .stage-mark{background:#FFF2A9!important;color:#21449A!important}
.lesson-card h1{line-height:1.25}
.activity-zone{border:2px dashed #B9D4FD;background:#F4F8FF;overflow:visible}
.activity-zone .tiny{color:#2453AD}
.activity-zone .dot-grid.object-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:5px;max-width:550px;margin:12px auto 24px}
.item-count.dot{width:auto;height:auto;margin:0;min-width:0;min-height:0;display:grid;place-items:center;background:none!important;border:0!important;box-shadow:none!important;position:relative}
.item-count .item-art{width:clamp(35px,10vw,75px);height:clamp(35px,10vw,75px);filter:drop-shadow(0 2px 0 rgba(10,54,130,.08))}
.item-count.crossed{opacity:.32}.item-count.crossed:after{content:'✕';position:absolute;font-weight:900;font-size:34px;color:#EE4055;inset:0;display:grid;place-items:center;opacity:1}
.visual-option .item-count .item-art{width:clamp(22px,5vw,39px);height:clamp(22px,5vw,39px)}
.visual-option .item-count.dot{margin:0!important;width:auto!important;height:auto!important}
.visual-option{gap:1px}
.math-group{background:#fff;border:2px solid #DCE8FD;border-radius:21px}
.math-block.item-block{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:17px;display:grid;place-items:center;flex-shrink:0;width:clamp(49px,13vw,65px);height:clamp(49px,13vw,65px);padding:0;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;transition:transform .14s}
.math-block.item-block:active{cursor:grabbing;transform:scale(1.07)}
.math-block.item-block.selected{outline:3px solid #FFD028;background:#FFF3C1!important}
.math-block.item-block .block-item{width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(15,48,115,.10))}
.math-block.item-block.dragging-source{opacity:.42}
.block-zone{min-height:80px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.merge-target{background:#EAF4FF;border:2px dashed #96C0FE;border-radius:23px;min-height:110px;padding:14px 8px;transition:background .12s,border-color .12s}
.merge-target.drag-hover,[data-dropzone].drag-hover{background:#FFF0A6!important;border-color:#FFB800!important;outline:3px solid #FFD644}
.kid-drop-basket{margin-top:14px;min-height:125px}
.drag-ghost{position:fixed!important;z-index:1000!important;left:0;top:0;transform:translate(-50%,-55%) scale(1.28);width:65px!important;height:65px!important;pointer-events:none!important;opacity:.95;filter:drop-shadow(0 9px 6px rgba(27,69,148,.18));touch-action:none}
.drag-ghost img{width:100%;height:100%}
.num-token{touch-action:none;user-select:none;cursor:grab}
.sequence-shelf[data-dropzone]{min-height:75px;border-radius:18px;padding:8px;background:#EAF4FF;border:2px dashed #A6C9FC}
.sequence-shelf[data-dropzone].drag-hover{background:#FFF2A8}
.answer-choices button,.assessment-choices button{background:white;border:3px solid #DDE9FB;border-radius:24px;color:#1550E1;font-weight:1000;min-height:75px;box-shadow:0 4px 0 rgba(23,84,209,.06)}
.answer-choices button.selected{background:#FFCC0C;border-color:#F5B700;color:#163F9C;box-shadow:0 5px 0 #E9A500}
.answer-choices button:active,.assessment-choices button:active{transform:scale(.97)}
.shape-choice{background:white}
.feedback{background:#E3FAEA;border:2px solid #A6E9BA;border-radius:21px;color:#14643A;font-size:16px;font-weight:900}
.feedback.try{background:#FFF3DF;border-color:#FFD696;color:#985B14}
.feedback:not(.try):before{content:'★';color:#E9A900;font-size:24px}
.auto-lesson-hint{font-size:12px;color:#3B5CA2;font-weight:900;background:#EAF2FF;padding:12px 13px;border-radius:18px;margin-left:auto}
.lesson-toolbar .btn.ghost{border:2px solid #D5E4FA;background:#fff;color:#1552CD}
.lesson-card .help-card{background:#FFF6D6;border:2px solid #FFDF83;color:#584318;border-radius:20px}
.parent-tabs button{background:#fff;border:2px solid #E3EDFC;border-radius:15px;font-weight:900}
.parent-tabs button.active{background:#1755EC;color:white;border-color:#1755EC}
.metric,.competency-row{border-color:#E0EBFC}
.status-pill.mastered{background:#DDF9E9;color:#087443}
.status-pill.progress{background:#FFF1BC;color:#8A6100}
.kid-onboarding .onboard-form{background:#fff;border:2px solid #DFEAFB;border-radius:28px}
@media(max-width:550px){
 .item-count .item-art{width:clamp(35px,13vw,54px);height:clamp(35px,13vw,54px)}
 .activity-zone .dot-grid.object-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .math-block.item-block{height:clamp(45px,13vw,55px);width:clamp(45px,13vw,55px)}
 .block-zone{gap:3px}
 .lesson-toolbar{flex-wrap:wrap}.auto-lesson-hint{font-size:11px}
 .lesson-card h1{font-size:clamp(22px,5.7vw,29px)}
 .kid-welcome-mascot .home-mascot{max-height:162px}
 .kid-onboarding .onboarding-sticker{width:105px;height:105px;right:-4px;bottom:4px}
}
@media(prefers-reduced-motion:reduce){.math-block.item-block,.answer-choices button{transition:none}}

@keyframes starPop{0%{transform:scale(.75) rotate(-25deg);opacity:.4}55%{transform:scale(1.35) rotate(9deg)}100%{transform:scale(1) rotate(0deg);opacity:1}}
.feedback:not(.try):before{animation:starPop .48s ease-out both}
@media(prefers-reduced-motion:reduce){.feedback:not(.try):before{animation:none}}