:root{--ink:#3a2d3f;--pink:#ff6f91;--g:14px;--c:120px;--safeT:env(safe-area-inset-top,0px);--safeB:env(safe-area-inset-bottom,0px);--safeL:env(safe-area-inset-left,0px);--safeR:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:"Varela Round","Nunito","Arial Rounded MT Bold","PingFang HK","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink)}
body{background:linear-gradient(160deg,#ffe3ef 0%,#fff6d6 45%,#dff6ff 100%)}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
.hidden{display:none!important}
#bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#bg i{position:absolute;border-radius:50%;opacity:.55;animation:float 14s ease-in-out infinite alternate}
#bg i:nth-child(1){width:34vmin;height:34vmin;left:-8vmin;top:8%;background:#ffd1e3}
#bg i:nth-child(2){width:24vmin;height:24vmin;right:-6vmin;top:22%;background:#c9f0ff;animation-delay:-3s}
#bg i:nth-child(3){width:18vmin;height:18vmin;left:30%;bottom:-6vmin;background:#fff0a8;animation-delay:-6s}
#bg i:nth-child(4){width:12vmin;height:12vmin;right:22%;bottom:12%;background:#d8f5c8;animation-delay:-2s}
#bg i:nth-child(5){width:9vmin;height:9vmin;left:12%;bottom:22%;background:#e7d6ff;animation-delay:-8s}
#bg i:nth-child(6){width:7vmin;height:7vmin;right:8%;top:4%;background:#ffe0c2;animation-delay:-5s}
@keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(3vmin,-4vmin) scale(1.08)}}

#app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;padding:calc(var(--safeT) + 6px) calc(var(--safeR) + 10px) calc(var(--safeB) + 8px) calc(var(--safeL) + 10px);pointer-events:auto}
#top{flex:0 0 auto;height:clamp(40px,8vmin,60px);display:flex;align-items:center;justify-content:space-between;gap:10px}
.pill{background:#fff;border-radius:999px;padding:.35em .9em;font-size:clamp(13px,2.6vmin,18px);font-weight:700;box-shadow:0 3px 0 rgba(58,45,63,.12);min-height:36px}
.pill.on{background:#ffd93b}
.parentHold{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.6);font-size:20px;line-height:1;opacity:.7;position:relative}
.parentHold.holding::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid #ff6f91;animation:hold .7s linear forwards}
@keyframes hold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
#dots{display:flex;gap:clamp(6px,1.6vmin,12px);align-items:center}
#dots .dot{width:clamp(20px,4.6vmin,34px);height:clamp(20px,4.6vmin,34px);display:grid;place-items:center}
#dots .dot svg{width:100%;height:100%}
#dots .dot.cur{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

#promptRow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:12px;min-height:clamp(44px,10vmin,76px);padding:2px 0}
#speakBtn{flex:0 0 auto;width:clamp(44px,9vmin,66px);height:clamp(44px,9vmin,66px);border-radius:50%;background:#ff9f1c;box-shadow:0 4px 0 #e07b00;display:grid;place-items:center}
#speakBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #e07b00}
#speakBtn svg{width:62%;height:62%}
#promptText{font-size:clamp(16px,4vmin,32px);font-weight:800;text-align:center;line-height:1.2;background:rgba(255,255,255,.75);padding:.3em .8em;border-radius:22px;max-width:80%}
#promptText.bounce{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.12)}}

#stage{flex:1 1 auto;position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vmin,16px);padding:8px 0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* board: equation pills on top, two colour clusters under A / B (sketch) */
.board{display:flex;align-items:flex-start;justify-content:center;gap:clamp(4px,1.8vmin,12px);width:100%;max-width:560px;flex-wrap:nowrap;position:relative;z-index:3;overflow:visible}
.addendCol{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vmin,14px);min-width:0;flex:1 1 0}
.opCol{display:flex;flex-direction:column;align-items:center;padding-top:calc((var(--pill-eq, clamp(56px,14vw,96px)) - clamp(40px,10vw,64px)) / 2);flex:0 0 auto}
.eqCol{padding-top:calc((var(--pill-eq, clamp(56px,14vw,96px)) - clamp(40px,10vw,64px)) / 2)}
.sumCol{flex:0 0 auto}
.numPill{--pill:clamp(56px,14vw,96px);--pill-eq:var(--pill);width:var(--pill);height:var(--pill);min-width:0;flex:0 0 auto;border-radius:28%;background:#fff;display:grid;place-items:center;position:relative;font-size:clamp(28px,8vmin,56px);font-weight:900;border:clamp(3px,.8vmin,6px) solid #ffb3b8;box-shadow:0 6px 0 rgba(58,45,63,.10),0 10px 22px rgba(255,77,94,.16);transition:transform .2s,opacity .3s,border-color .2s;cursor:pointer;overflow:hidden;box-sizing:border-box;padding:0;isolation:isolate}
.numPill.b{border-color:#ffe08a;box-shadow:0 6px 0 rgba(58,45,63,.10),0 10px 22px rgba(255,217,59,.22)}
.numPill.op,.numPill.eqMark{--pill:clamp(40px,10vw,64px);width:var(--pill);height:var(--pill);cursor:default;border:none;box-shadow:none;background:transparent;font-size:clamp(28px,7vmin,48px);overflow:visible;padding:0}
.numPill.tappable:not(.done):not(.disabled){animation:breathe 1.8s ease-in-out infinite}
.numPill.tappable:not(.done):not(.disabled):active{transform:scale(.94)}
.numPill.done{opacity:.55;transform:scale(.92);cursor:default;animation:none}
.numPill.disabled{opacity:.4;cursor:default;animation:none;pointer-events:none}
.numPill.glow{border-color:#ff9f1c;box-shadow:0 0 0 6px rgba(255,159,28,.35),0 10px 22px rgba(255,159,28,.3)}
.numPill.yay{animation:yay .8s cubic-bezier(.3,1.6,.5,1);border-color:#52d273;background:#f0fff4}
@keyframes breathe{50%{transform:scale(1.06)}}
@keyframes yay{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-4deg)}55%{transform:scale(.94) rotate(3deg)}80%{transform:scale(1.08)}100%{transform:scale(1)}}

.dotBuddy.counting{animation:countPulse .45s ease;z-index:2;filter:drop-shadow(0 0 6px rgba(255,120,160,.85))}
@keyframes countPulse{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes wiggle{20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.numPill.wiggle,.choiceBtn.wiggle{animation:wiggle .5s}

/* per-addend trays (red under A, yellow under B) */
.tray{width:100%;min-width:clamp(64px,18vw,120px);min-height:clamp(72px,20vmin,160px);background:rgba(255,255,255,.7);border-radius:22px;padding:clamp(8px,2vmin,14px) clamp(6px,1.6vmin,12px);
  display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:clamp(3px,1.2vmin,8px);overflow:visible;position:relative;z-index:2}
.trayA{box-shadow:inset 0 0 0 3px rgba(255,77,94,.35);background:rgba(255,77,94,.08)}
.trayB{box-shadow:inset 0 0 0 3px rgba(255,217,59,.45);background:rgba(255,217,59,.12)}
.sumCol .tray{display:none}
.dotBuddy{width:clamp(32px,8vmin,56px);height:clamp(32px,8vmin,56px);position:relative;animation:dotIn .42s cubic-bezier(.3,1.6,.5,1);flex:0 0 auto;overflow:visible}
.dotBuddy svg,.dotBuddy .dotImg{width:100%;height:100%;display:block;object-fit:contain}
.dotBuddy .pop{position:absolute;left:50%;top:-22%;transform:translateX(-50%);font-size:clamp(14px,3.6vmin,22px);font-weight:900;color:#ff4d5e;
  text-shadow:0 2px 0 #fff;animation:numPop .7s ease-out forwards;pointer-events:none;z-index:3}
.dotBuddy.yellow .pop{color:#c9a000}
@keyframes dotIn{from{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes numPop{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.5)}30%{opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.2)}100%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.9)}}

/* choices */
.choices{display:flex;flex-wrap:wrap;gap:clamp(8px,2vmin,14px);justify-content:center;align-items:center;max-width:100%}
.choiceBtn{--pill:clamp(56px,14vw,92px);width:var(--pill);height:var(--pill);min-width:0;flex:0 0 auto;border-radius:28%;background:#fff;font-size:clamp(26px,7vmin,48px);font-weight:900;border:clamp(3px,.8vmin,6px) solid #ffd1e3;box-shadow:0 6px 0 rgba(58,45,63,.10),0 10px 22px rgba(255,111,145,.18);transition:transform .2s;overflow:hidden;box-sizing:border-box;display:grid;place-items:center;position:relative;padding:0;isolation:isolate}
.choiceBtn:nth-child(2){border-color:#c9f0ff}
.choiceBtn:nth-child(3){border-color:#fff0a8}
.choiceBtn:nth-child(4){border-color:#d8f5c8}
.choiceBtn:active{transform:scale(.94)}
.choiceBtn.yay{animation:yay .8s cubic-bezier(.3,1.6,.5,1);border-color:#52d273;background:#f0fff4}
.choices.solved .choiceBtn:not(.yay){opacity:.35;transform:scale(.9)}

.spark{position:fixed;width:clamp(18px,4vmin,30px);height:clamp(18px,4vmin,30px);pointer-events:none;z-index:50;animation:spark .9s ease-out forwards}
.spark svg{width:100%;height:100%}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(.3) rotate(0)}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(200deg);opacity:0}}

.screen{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,2vmin,16px);
  background:linear-gradient(160deg,#ffe3ef 0%,#fff6d6 50%,#dff6ff 100%);padding:calc(var(--safeT) + 12px) 16px calc(var(--safeB) + 12px);text-align:center;overflow:auto;pointer-events:auto;-webkit-overflow-scrolling:touch}
.screen h1{margin:0;font-size:clamp(24px,6vmin,52px);font-weight:900;color:#ff4d8d;text-shadow:0 3px 0 #fff}
.screen .sub{margin:0;font-size:clamp(14px,3vmin,22px);font-weight:700;opacity:.8}
.langPick{position:absolute;top:calc(var(--safeT) + 12px);right:calc(var(--safeR) + 14px)}
.startParent{position:absolute;top:calc(var(--safeT) + 12px);left:calc(var(--safeL) + 14px)}
.buddies{display:flex;gap:clamp(4px,2vmin,18px);align-items:center}
.buddies .art{width:clamp(56px,15vmin,130px);height:clamp(56px,15vmin,130px);animation:hop 1.4s ease-in-out infinite}
.buddies .art:nth-child(2){animation-delay:.2s}.buddies .art:nth-child(3){animation-delay:.4s}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14%) rotate(-4deg)}60%{transform:translateY(0) scale(1.05,.95)}}
.bigBtn{width:clamp(84px,20vmin,150px);height:clamp(84px,20vmin,150px);border-radius:50%;background:linear-gradient(#6fe08b,#2fbf5b);box-shadow:0 8px 0 #229447,0 14px 26px rgba(47,191,91,.35);display:grid;place-items:center;animation:breathe 1.8s ease-in-out infinite}
.bigBtn svg{width:58%;height:58%}
.bigBtn:active{transform:translateY(6px);box-shadow:0 2px 0 #229447}
.bigBtn.small{width:auto;height:auto;border-radius:999px;padding:.6em 1.6em;font-size:clamp(18px,4vmin,30px);font-weight:900;color:#fff}
.startLabel{font-size:clamp(16px,3.4vmin,26px);font-weight:900;color:#2a9d4a}
.bigStar{width:clamp(110px,30vmin,240px);height:clamp(110px,30vmin,240px);animation:starIn 1s cubic-bezier(.3,1.6,.5,1),spin 4s 1s ease-in-out infinite}
.bigStar .art{width:100%;height:100%}
@keyframes starIn{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
@keyframes spin{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-6vh;width:12px;height:16px;border-radius:3px;animation:fall linear forwards}
#confetti i.st{width:26px;height:26px;border-radius:0;background:none!important}
#confetti i.st svg{width:100%;height:100%}
@keyframes fall{to{transform:translate(var(--x),112vh) rotate(var(--r))}}
.panel{background:#fff;border-radius:28px;padding:18px 20px;max-width:min(440px,92vw);max-height:92%;overflow:auto;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(58,45,63,.2);touch-action:pan-y}
.panel h2{margin:0;font-size:22px}
.panel p{margin:0}
.panel .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.panel .pill{box-shadow:0 0 0 2px #ffd1e3 inset}
.panel .pill.on{background:#ffd93b}
.pill.wide{width:100%;padding:.6em}
.small{font-size:13px;opacity:.75}
@media (prefers-reduced-motion:reduce){#bg i,.buddies .art,.numPill.tappable{animation:none}}

/* --- illustrator asset images --- */
img.art, img.dotImg, img.counterImg, img.opImg, img.popImg, img.progStar, img.sparkImg, img.confettiImg, img.bigStarImg{
  display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;border:0}
/* Absolute fill inside fixed square pills — avoids iOS SVG intrinsic overflow */
.numPill,.choiceBtn{touch-action:manipulation;-webkit-user-select:none;z-index:2}
.numPill .counterImg,.choiceBtn .counterImg,.numPill .opImg{
  position:absolute;left:10%;top:10%;width:80%;height:80%;max-width:80%;max-height:80%;
  object-fit:contain;object-position:center;margin:auto}
.numPill.op .opImg,.numPill.eqMark .opImg{left:5%;top:5%;width:90%;height:90%;max-width:90%;max-height:90%}
.numPill.sumSlot{--pill:clamp(64px,16vw,108px);width:var(--pill);height:var(--pill);background:#fff;border:clamp(3px,.8vmin,6px) dashed #c5b8d0;border-radius:22%;
  font-size:clamp(28px,7vmin,48px);font-weight:900;color:#ff4d8d;overflow:hidden;box-shadow:0 6px 0 rgba(58,45,63,.08)}
.numPill.sumSlot.yay{border-style:solid;border-color:#52d273;background:#f0fff4}
.numPill.sumSlot .counterImg{left:10%;top:10%;width:80%;height:80%}
.dotBuddy .dotImg{width:100%;height:100%}
.dotBuddy .pop{top:-28%;width:clamp(28px,7vmin,48px);height:clamp(28px,7vmin,48px);display:block;left:50%;transform:translateX(-50%)}
.dotBuddy .pop .popImg{width:100%;height:100%}
@keyframes numPop{0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.5)}30%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1.15)}100%{opacity:0;transform:translateX(-50%) translateY(-28px) scale(.85)}}
#dots .dot .progStar{width:100%;height:100%}
.spark .sparkImg,#confetti i .confettiImg{width:100%;height:100%}
#confetti i.st{width:clamp(22px,5vmin,36px);height:clamp(22px,5vmin,36px);background:none!important}
.buddies img.art{width:clamp(56px,15vmin,130px);height:clamp(56px,15vmin,130px);animation:hop 1.4s ease-in-out infinite}
.buddies img.art:nth-child(2){animation-delay:.2s}.buddies img.art:nth-child(3){animation-delay:.4s}
.bigStar img.art,.bigStar .bigStarImg{width:100%;height:100%}

/* soft pastel SVG under animated blobs */
body{
  background-color:#ffe3ef;
  background-image:url('assets/bg-soft-pastel.svg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat}

/* interactive hit targets — never block taps */
.pill,.bigBtn,.langPick,.parentHold,#startBtn,#againBtn,#speakBtn,#langBtn,#closePanel,.numPill.tappable,.choiceBtn{
  position:relative;z-index:5;touch-action:manipulation;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.screen.hidden{pointer-events:none!important}
.screen:not(.hidden){pointer-events:auto;z-index:40}
#parentPanel:not(.hidden){z-index:50}
#stage{position:relative;z-index:2;pointer-events:auto;overflow:visible}
.board{position:relative;z-index:3;overflow:visible}
.choices{position:relative;z-index:3;overflow:visible;flex:0 0 auto}
.dotBuddy{overflow:visible;flex:0 0 auto}
@media (max-height:740px),(max-width:430px){
  .tray{min-height:clamp(56px,16vmin,120px);min-width:clamp(52px,16vw,100px);padding:clamp(6px,1.5vmin,10px) clamp(4px,1vmin,8px)}
  .dotBuddy{width:clamp(26px,7vmin,44px);height:clamp(26px,7vmin,44px)}
  .numPill{--pill:clamp(52px,18vw,84px)}
  .numPill.op,.numPill.eqMark{--pill:clamp(32px,12vw,52px)}
  .choiceBtn{--pill:clamp(52px,18vw,80px)}
  .board{gap:clamp(2px,1vw,8px)}
  .addendCol{gap:clamp(6px,1.5vmin,10px)}
  #stage{gap:clamp(6px,1.5vmin,12px);justify-content:flex-start;padding-top:8px;overflow:auto}
}
@media (max-width:360px){
  .board{gap:2px}
  .numPill{--pill:clamp(48px,16vw,72px)}
  .dotBuddy{width:clamp(22px,6vmin,36px);height:clamp(22px,6vmin,36px)}
}

.countAllBtn{display:block;margin:clamp(8px,2vmin,16px) auto 0;z-index:4;position:relative}
.countAllBtn.hidden{display:none!important}