:root{
  --ink:#3a2d3f;--pink:#ff6f91;--mint:#6fe08b;--g:14px;--c:118px;
  --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;display:flex;flex-direction:column;
  padding:calc(var(--safeT) + 6px) calc(var(--safeR) + 10px) calc(var(--safeB) + 8px) calc(var(--safeL) + 10px)}

/* Now–Next visual schedule */
.nowNext{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0 8px}
.nnCard{display:flex;align-items:center;gap:8px;background:#fff;border-radius:18px;padding:8px 12px;
  box-shadow:0 3px 0 rgba(58,45,63,.1);min-width:0;flex:1 1 0;max-width:46%}
.nnCard.now{border:3px solid #ff9f1c;background:#fff8e8}
.nnCard.next{border:3px dashed #c9b6ff;opacity:.85}
.nnCard.resting{border:3px solid #6fe08b;background:#f0fff4}
.nnIcon{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center}
.nnIcon svg,.nnIcon img{width:100%;height:100%;display:block}
.nnTag{font-size:11px;font-weight:800;opacity:.75;letter-spacing:.02em;display:flex;align-items:center;gap:4px}
.nnTag .art,.nnTag img{width:14px;height:14px}
.nnLabel{font-size:clamp(15px,3.8vmin,20px);font-weight:900;line-height:1.1}
.nnArrow{font-size:22px;font-weight:900;opacity:.4;flex:0 0 auto}

#top{flex:0 0 auto;height:clamp(40px,8vmin,56px);display:flex;align-items:center;justify-content:space-between;gap:8px}
.pill{background:#fff;border-radius:999px;padding:.35em .9em;font-size:clamp(13px,2.6vmin,17px);font-weight:700;
  box-shadow:0 3px 0 rgba(58,45,63,.12);min-height:40px;min-width:44px}
.pill.soft{background:#fff0f6;color:#c45a7a}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(58,45,63,.12)}
#dots{display:flex;gap:clamp(5px,1.4vmin,10px);align-items:center;flex-wrap:wrap;justify-content:center;max-width:55%}
#dots .dot{width:clamp(14px,3.6vmin,22px);height:clamp(14px,3.6vmin,22px);border-radius:50%;background:rgba(255,255,255,.7);
  border:2px solid rgba(58,45,63,.15);transition:transform .2s,background .2s}
#dots .dot.done{background:#6fe08b;border-color:#2fbf5b}
#dots .dot.cur{background:#ffd93b;border-color:#e0a800;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:10px;min-height:clamp(44px,10vmin,72px);padding:2px 0}
#speakBtn{flex:0 0 auto;width:clamp(48px,10vmin,64px);height:clamp(48px,10vmin,64px);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:58%;height:58%}
#promptText{font-size:clamp(17px,4.2vmin,30px);font-weight:800;text-align:center;line-height:1.2;
  background:rgba(255,255,255,.78);padding:.35em .85em;border-radius:22px;max-width:78%}
#promptText.bounce{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.1)}}

#stage{flex:1 1 auto;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 0}

.board{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vmin,22px);width:100%;max-width:420px}
.targetWrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.targetCard{width:clamp(100px,26vmin,140px);height:clamp(100px,26vmin,140px);border-radius:28%;background:#fff;
  border:4px solid #ffd93b;box-shadow:0 6px 0 rgba(58,45,63,.1);display:grid;place-items:center}
.targetCard .art,.targetCard img{width:82%;height:82%;display:block}
.targetLabel{font-size:clamp(16px,3.8vmin,22px);font-weight:900;background:rgba(255,255,255,.8);padding:.2em .7em;border-radius:999px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2.8vmin,16px);width:100%;max-width:340px;justify-items:center}
.opts.stack{grid-template-columns:1fr;max-width:220px}
.opts.row4{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{width:var(--c);height:var(--c);max-width:42vw;max-height:42vw;border-radius:26%;background:#fff;display:grid;place-items:center;
  border:clamp(3px,.8vmin,5px) solid #ffd1e3;box-shadow:0 6px 0 rgba(58,45,63,.1),0 10px 22px rgba(255,111,145,.15);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .3s;cursor:pointer;position:relative}
.opts .card:nth-child(2){border-color:#c9f0ff}
.opts .card:nth-child(3){border-color:#fff0a8}
.opts .card:nth-child(4){border-color:#d8f5c8}
.card .inner{width:84%;height:84%;pointer-events:none;display:grid;place-items:center}
.card .art,.card img{width:100%;height:100%;display:block}
.card .lbl{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:clamp(12px,2.8vmin,15px);font-weight:800;
  background:rgba(255,255,255,.92);padding:.1em .45em;border-radius:999px;white-space:nowrap}
.card:active{transform:scale(.95)}
.card.wiggle{animation:wiggle .5s}
@keyframes wiggle{20%{transform:rotate(-8deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
.card.yay{animation:yay .8s cubic-bezier(.3,1.6,.5,1);border-color:#52d273;background:#f0fff4;z-index:6}
@keyframes yay{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-4deg)}55%{transform:scale(.94) rotate(3deg)}80%{transform:scale(1.06)}100%{transform:scale(1)}}
.card.disabled{opacity:.45;pointer-events:none}

/* Now–Next pick + Who */
.nnHint{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:4px}
.nnHintTag{font-size:clamp(12px,2.8vmin,15px);font-weight:800;background:rgba(255,255,255,.85);padding:.25em .7em;border-radius:999px;border:2px solid #ff9f1c}
.nnHintTag.soft{border-color:#c9b6ff;opacity:.85}
.nnOpts,.whoOpts{max-width:320px}
.nnCardPick,.whoCard{border-radius:24%}
.whoCard.you{border-color:#ff9fbd}
.whoCard.me{border-color:#7fd3b0}

/* Give food: top=你 bottom=我 */
.giveBoard{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vmin,14px);width:100%;height:100%;min-height:0;justify-content:center}
.giveStatus{font-size:clamp(15px,3.6vmin,20px);font-weight:800;background:rgba(255,255,255,.85);padding:.35em 1em;border-radius:999px;min-height:36px}
.givePhone{flex:1 1 auto;width:min(100%,340px);max-height:100%;min-height:0;display:flex;flex-direction:column;
  background:rgba(255,255,255,.55);border-radius:28px;border:3px solid rgba(58,45,63,.12);overflow:visible;
  box-shadow:0 8px 0 rgba(58,45,63,.08);touch-action:none}
.giveZone{flex:1 1 0;min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:transparent;border:0;border-radius:0;padding:8px;transition:background .2s,box-shadow .2s;cursor:pointer}
.giveZone.you{border-radius:24px 24px 0 0;background:linear-gradient(180deg,#ffe0ef 0%,rgba(255,224,239,.35) 100%)}
.giveZone.me{border-radius:0 0 24px 24px;background:linear-gradient(0deg,#d8f5e8 0%,rgba(216,245,232,.35) 100%)}
.giveZone.lit{box-shadow:inset 0 0 0 4px rgba(255,159,28,.55);animation:breathe 1.4s ease-in-out infinite}
.giveZone .zoneArt{width:clamp(48px,12vmin,72px);height:clamp(48px,12vmin,72px);display:grid;place-items:center}
.giveZone .zoneArt .art,.giveZone .zoneArt img{width:100%;height:100%;display:block;object-fit:contain}
.giveZone .zoneLab{font-size:clamp(22px,5.5vmin,32px);font-weight:900;line-height:1}
.giveZone .zoneHint{font-size:clamp(11px,2.6vmin,14px);font-weight:700;opacity:.7}
.giveZone:active{filter:brightness(.97)}
.giveMid{flex:0 0 auto;height:clamp(88px,22vmin,120px);display:grid;place-items:center;position:relative;z-index:2}
.giveItem{width:clamp(72px,18vmin,100px);height:clamp(72px,18vmin,100px);border-radius:28%;background:#fff;
  border:4px solid #ffd93b;box-shadow:0 6px 0 rgba(58,45,63,.12);display:grid;place-items:center;
  touch-action:none;cursor:grab;transition:box-shadow .15s;z-index:3}
.giveItem .art,.giveItem img{width:78%;height:78%;display:block;object-fit:contain;pointer-events:none}
.giveItem.dragging{cursor:grabbing;box-shadow:0 10px 18px rgba(58,45,63,.2);z-index:5}
.giveItem.wiggle,.giveZone.wiggle{animation:wiggle .5s}
.giveItem.flyYou{animation:flyYou 1.4s ease-in-out forwards}
.giveItem.flyMe{animation:flyMe 1.4s ease-in-out forwards}
@keyframes flyYou{to{transform:translateY(-145%) scale(.65);opacity:.12}}
@keyframes flyMe{to{transform:translateY(145%) scale(.65);opacity:.12}}
.turnProgress{display:flex;gap:8px;flex:0 0 auto}
.turnProgress i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.7);border:2px solid rgba(58,45,63,.15)}
.turnProgress i.on{background:#6fe08b;border-color:#2fbf5b}

.spark{position:fixed;width:clamp(16px,3.8vmin,26px);height:clamp(16px,3.8vmin,26px);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,14px);
  background:linear-gradient(160deg,#ffe3ef 0%,#fff6d6 50%,#dff6ff 100%);
  padding:calc(var(--safeT) + 12px) 16px calc(var(--safeB) + 12px);text-align:center;overflow:hidden}
.screen h1{margin:0;font-size:clamp(26px,6.2vmin,48px);font-weight:900;color:#ff4d8d;text-shadow:0 3px 0 #fff}
.screen .sub{margin:0;font-size:clamp(14px,3.2vmin,20px);font-weight:700;opacity:.8;max-width:92%;line-height:1.35}
.langPick{position:absolute;top:calc(var(--safeT) + 12px);right:calc(var(--safeR) + 14px)}
.buddies{display:flex;gap:clamp(6px,2vmin,16px);margin-bottom:4px}
.buddies .art{width:clamp(64px,16vmin,120px);height:clamp(64px,16vmin,120px);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(88px,20vmin,140px);height:clamp(88px,20vmin,140px);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:56%;height:56%}
.bigBtn:active{transform:translateY(6px);box-shadow:0 2px 0 #229447}
.bigBtn.small{width:auto;height:auto;border-radius:999px;padding:.65em 1.7em;font-size:clamp(18px,4vmin,28px);font-weight:900;color:#fff}
@keyframes breathe{50%{transform:scale(1.05)}}
.startLabel{font-size:clamp(16px,3.6vmin,22px);font-weight:800;opacity:.75}
.bigStar{width:clamp(80px,20vmin,140px);height:clamp(80px,20vmin,140px);margin-bottom:4px}
.bigStar svg{width:100%;height:100%;animation:hop 1.2s ease-in-out infinite}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#confetti b{position:absolute;top:-8%;width:10px;height:14px;border-radius:3px;animation:fall 2.4s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(420deg);opacity:.2}}

@media (max-height:700px){
  :root{--c:100px}
  .targetCard{width:90px;height:90px}
  .giveItem{width:68px;height:68px}
  .giveZone{min-height:60px}
}


#softBg{position:fixed;inset:0;pointer-events:none;z-index:0;display:grid;place-items:center;opacity:.18}
#softBg .art,#softBg img{width:min(70vmin,320px);height:min(70vmin,320px)}
#app,.screen{z-index:1}

/* ——— Batch1 merge: Grok-new rules (keep site shell) ——— */
.card.speaking{outline:4px solid #9ec9ff;animation:speakPulse .8s ease-in-out infinite}
.card.exag-small{transform:scale(.85)}
.card.correct-hint{outline:4px solid #ffd93b}
@keyframes speakPulse{0%,100%{box-shadow:0 0 0 0 rgba(158,201,255,.55)}50%{box-shadow:0 0 0 8px rgba(158,201,255,0)}}

.targetCard.fallBasket{animation:fallBasket 1.3s ease forwards}
.targetCard.flyToDoll{animation:flyToDoll 1.4s ease forwards}
.targetCard.flyToSelf{animation:flyToSelf 1.4s ease forwards}
@keyframes fallBasket{to{transform:translate(var(--tx,0),var(--ty,60px)) scale(.6);opacity:.7}}
@keyframes flyToDoll{to{transform:translateX(-70px) translateY(20px) scale(.5);opacity:.35}}
@keyframes flyToSelf{to{transform:translateX(70px) translateY(20px) scale(.5);opacity:.35}}

.bigBtn.ready{background:linear-gradient(#6fe08b,#2fbf5b);box-shadow:0 8px 0 #229447,0 14px 26px rgba(47,191,91,.35)}
.disabled-zone{opacity:.5} /* NO pointer-events:none — soft fail must stay tappable */

.queue{display:flex;gap:clamp(8px,2vmin,14px);justify-content:center;align-items:flex-end;flex-wrap:wrap}
.queueItem{width:clamp(56px,14vmin,80px);height:clamp(56px,14vmin,80px);display:grid;place-items:center;position:relative;background:rgba(255,255,255,.85);border-radius:24%;border:3px solid #c9f0ff;box-shadow:0 4px 0 rgba(58,45,63,.08)}
.queueItem.me{border-color:#ff9f1c;background:#fff8e8}
.queueItem .star{position:absolute;top:-8px;right:-6px;font-size:18px}

.basket{padding:12px;border-radius:24%;background:#fff;min-width:var(--c);min-height:calc(var(--c) * .85);text-align:center;border:clamp(3px,.8vmin,5px) solid #ffd1e3;box-shadow:0 6px 0 rgba(58,45,63,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-weight:800}
.basket.you{border-color:#ff9fbd}
.basket.me{border-color:#7fd3b0}
.basket .basketArt,.basket .art,.basket img{width:clamp(40px,10vmin,64px);height:clamp(40px,10vmin,64px)}
.basket:active{transform:scale(.96)}
.basket.wiggle{animation:wiggle .5s}

.placeholder{width:64px;height:64px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:11px;border-radius:12px;color:#666;word-break:break-all;padding:4px}

.playBtn{background:#ff9f1c;color:#fff;border:0;border-radius:999px;padding:.65em 1.4em;font-size:clamp(16px,3.8vmin,22px);font-weight:900;box-shadow:0 5px 0 #e07b00;min-height:48px;cursor:pointer}
.playBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #e07b00}

.typeLabel{font-size:clamp(13px,3vmin,16px);font-weight:800;opacity:.8;margin-top:4px}
#typeSelect{font:inherit;font-size:clamp(14px,3.2vmin,18px);font-weight:700;padding:.45em .8em;border-radius:14px;border:3px solid #ffd1e3;background:#fff;color:var(--ink);max-width:92%;min-height:44px;box-shadow:0 3px 0 rgba(58,45,63,.08)}


/* ——— Batch1 types 11–20 ——— */
.opts.row3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:360px}
.parentBtn{margin-top:8px;background:#fff0f6;color:#c45a7a;border-radius:999px;padding:.55em 1.4em;font-size:clamp(15px,3.4vmin,20px);font-weight:800;box-shadow:0 4px 0 rgba(196,90,122,.25);min-height:44px}
.parentBtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(196,90,122,.25)}
.stepBar{display:flex;flex-direction:column;gap:8px;width:100%;max-width:320px}
.step{background:rgba(255,255,255,.9);border:3px solid #c9f0ff;border-radius:16px;padding:.45em .8em;font-size:clamp(14px,3.2vmin,18px);font-weight:800;text-align:left}
.step.done{border-color:#6fe08b;background:#f0fff4;opacity:.9}
.boxRow{display:flex;gap:clamp(10px,3vmin,18px);justify-content:center;flex-wrap:wrap;width:100%}
.sortBox{flex:1 1 120px;max-width:160px;min-height:120px;background:#fff;border:4px solid #ffd93b;border-radius:24px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 5px 0 rgba(58,45,63,.1);cursor:pointer}
.sortBox.toy{border-color:#9ec9ff}
.sortBox .art,.sortBox img{width:64px;height:64px}
.sortBox .sortLbl{font-size:clamp(14px,3.2vmin,18px);font-weight:900}
.sortBox:active{transform:scale(.96)}
.sortBox.wiggle{animation:wiggle .5s}
.sortBox.yay{border-color:#52d273;background:#f0fff4}
.colorSwatch{width:70%;height:70%;border-radius:22%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.targetCard.colorSwatch{border-radius:28%}
.rhythmLights{display:flex;gap:12px;justify-content:center;margin-bottom:4px}
.rhythmDot{width:40px;height:40px;border-radius:50%;background:#ffd93b;opacity:.3;transition:opacity .25s}
.shapeArt{color:inherit}


/* ——— Batch2 types 21–30 ——— */
.sortSlots{display:flex;gap:clamp(8px,2vmin,14px);justify-content:center;width:100%;max-width:360px}
.sortSlot{flex:1;min-height:100px;background:rgba(255,255,255,.9);border:3px dashed #c9f0ff;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6px;cursor:pointer;box-shadow:0 4px 0 rgba(58,45,63,.06)}
.sortSlot .slotHint{font-size:clamp(12px,2.8vmin,15px);font-weight:800;opacity:.7;margin-bottom:4px}
.sortSlot .slotBody{width:64px;height:64px;display:grid;place-items:center}
.sortSlot .slotBody .art,.sortSlot .slotBody svg{width:56px;height:56px}
.sizeTray{display:flex;gap:clamp(8px,2vmin,14px);justify-content:center;flex-wrap:wrap;width:100%}
.sizeItem{min-width:80px}
.sizeItem.picked{outline:3px solid #ff9f1c;outline-offset:2px}
.sizeItem.used{opacity:.35;pointer-events:none}
.stepTitle{font-size:clamp(16px,3.6vmin,22px);font-weight:900;margin-bottom:4px}
.card.used{opacity:.4;pointer-events:none}

.bodyMap{position:relative;width:min(180px,46vmin);height:min(270px,70vmin);margin:0 auto 8px}
.bodyMap .bodyFig,.bodyMap svg{width:100%;height:100%}
.bodyHotspot{position:absolute;background:transparent;border:2px solid transparent;border-radius:16px;padding:0;cursor:pointer}
.bodyHotspot.glow{background:rgba(111,224,139,.35);border-color:#6fe08b;box-shadow:0 0 12px rgba(111,224,139,.5)}
.bodyHotspot.hint{animation:bodyHint 1.2s ease}
.bodyHotspot.wiggle{animation:wiggle .5s}
@keyframes bodyHint{0%,100%{background:transparent}40%{background:rgba(255,217,59,.45);border-color:#ffd93b}}

.oneMany{max-width:400px}
.manyCard{min-height:120px}
.manyInner{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;padding:6px;min-height:72px}
.manyDot{display:inline-grid;place-items:center;width:36px;height:36px;transition:transform .3s,outline .3s}
.manyDot .art,.manyDot svg{width:32px;height:32px}
.manyDot.sm{width:24px;height:24px}
.manyDot.sm .art,.manyDot.sm svg{width:20px;height:20px}
.manyDot.countFlash{transform:scale(1.25);outline:2px solid #ffd93b;border-radius:50%}
.countShow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;min-height:56px}
.countShow .manyDot{width:48px;height:48px}
.countShow .manyDot .art,.countShow .manyDot svg{width:44px;height:44px}

.shelves{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}
.shelfSlot{background:rgba(255,255,255,.92);border:3px solid #e8c48a;border-radius:18px;padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 5px 0 rgba(58,45,63,.08);min-height:88px}
.shelfSlot.up{border-color:#ff9fbd}
.shelfSlot.down{border-color:#7fd3b0}
.shelfSlot .shelfLbl{font-weight:900;font-size:clamp(14px,3.2vmin,18px)}
.shelfSlot .art,.shelfSlot svg{width:100%;max-width:200px;height:28px}
.shelfSlot .shelfDrop{min-height:40px;display:grid;place-items:center}
.shelfSlot .shelfDrop .art,.shelfSlot .shelfDrop svg{width:40px;height:40px}
.shelfSlot.yay{border-color:#52d273;background:#f0fff4}
.shelfSlot.hint{box-shadow:0 0 0 4px rgba(255,217,59,.5)}
.shelfSlot.wiggle{animation:wiggle .5s}
.upDownItem{transition:opacity .4s}


/* ——— Batch2 types 31–40 ——— */
.fitBoxes .fitBox{min-height:100px}
.fitItem{margin-bottom:4px}
.wantSentence{font-size:clamp(18px,4.2vmin,26px);font-weight:900;background:rgba(255,255,255,.9);border:3px solid #ffd1e3;border-radius:16px;padding:.4em .9em;margin-bottom:6px}
.card.giveAnim{animation:givePop 1.2s ease}
@keyframes givePop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.card.picked{outline:3px solid #ff9f1c;outline-offset:2px}

.waitDots{display:flex;gap:10px;justify-content:center;margin-bottom:8px}
.waitDot{width:18px;height:18px;border-radius:50%;background:#dfe6e9;transition:background .4s,transform .4s}
.waitDot.on{background:#a29bfe;transform:scale(1.15)}
.hourglass{width:72px;height:72px;margin:0 auto 8px}
.hourglass.done{filter:drop-shadow(0 0 8px #a29bfe)}
.waitGoBtn.disabled-zone{opacity:.55}

.transRow{display:flex;gap:clamp(10px,3vmin,18px);justify-content:center;flex-wrap:wrap;width:100%}
.transCard{flex:1 1 120px;max-width:160px;background:#fff;border:3px solid #c9f0ff;border-radius:20px;padding:10px;text-align:center;box-shadow:0 5px 0 rgba(58,45,63,.08);transition:opacity 1s,transform 1s}
.transCard.now{border-color:#ff9fbd}
.transCard.next{border-color:#7fd3b0}
.transTag{font-size:clamp(12px,2.8vmin,15px);font-weight:800;opacity:.75}
.transLbl{font-weight:900;font-size:clamp(14px,3.2vmin,18px);margin-top:4px}
.transCard .art,.transCard svg{width:64px;height:64px}
.transCard.fadeOut{opacity:.35;transform:scale(.92)}
.transCard.focusIn{transform:scale(1.06);box-shadow:0 0 0 4px rgba(127,211,176,.45)}

.trafficLight{display:flex;flex-direction:column;gap:10px;align-items:center;background:#2d3436;padding:14px;border-radius:24px;margin-bottom:8px}
.tLamp{width:56px;height:56px;border-radius:50%;background:#636e72;display:grid;place-items:center;opacity:.35;transition:opacity .4s,box-shadow .4s}
.tLamp.on{opacity:1}
.tLamp.red.on{background:#ff6b6b;box-shadow:0 0 16px #ff6b6b}
.tLamp.green.on{background:#6fe08b;box-shadow:0 0 16px #6fe08b}
.tLamp.flash{animation:wiggle .5s}
.tShape{display:block;width:22px;height:22px;background:rgba(255,255,255,.85)}
.tShape.oct{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.tShape.tri{clip-path:polygon(50% 0,100% 100%,0 100%);width:24px;height:22px}

.deviceCard{width:min(160px,42vmin);height:min(160px,42vmin);display:grid;place-items:center;border-radius:24px;background:#fff;border:4px solid #dfe6e9;transition:filter .8s,box-shadow .8s,background .8s}
.deviceCard .art,.deviceCard svg{width:70%;height:70%}
.deviceCard.dark{filter:brightness(.35);background:#2d3436}
.deviceCard.lit{filter:none;box-shadow:0 0 20px rgba(255,217,59,.55);border-color:#ffd93b;background:#fffef5}
.deviceCard.lit.spin{animation:deviceSpin 1.2s ease}
.deviceCard.lit.music{box-shadow:0 0 20px rgba(255,159,243,.55);border-color:#ff9ff3}
.deviceCard.lit.bubble{box-shadow:0 0 20px rgba(116,185,255,.55);border-color:#74b9ff}
@keyframes deviceSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.soundTog{margin-bottom:6px}

.sceneHint{width:72px;height:72px;margin-bottom:6px}
.sceneGrid{display:flex;flex-wrap:wrap;gap:clamp(8px,2vmin,14px);justify-content:center;max-width:320px;background:rgba(248,244,255,.7);border:3px dashed #dfe6e9;border-radius:24px;padding:12px}
.sceneItem{width:clamp(64px,16vmin,88px);height:clamp(64px,16vmin,88px);border:3px solid #ffd1e3;border-radius:22%;background:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 rgba(58,45,63,.08);padding:0}
.sceneItem .art,.sceneItem svg{width:70%;height:70%}
.sceneItem.glow{box-shadow:0 0 16px rgba(111,224,139,.7);border-color:#6fe08b;background:#f0fff4}
.sceneItem.softShake{animation:wiggle 1s ease}
.sceneItem.wiggle{animation:wiggle .5s}

.puzzleTray{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.puzzleHalf{width:100px;height:100px;padding:0;border:3px dashed #c9f0ff;border-radius:16px;background:#fff;cursor:pointer;overflow:hidden;position:relative}
.puzzleHalf.picked{outline:3px solid #ff9f1c}
.puzzleHalf.placed{opacity:.3;pointer-events:none}
.puzzleClip{width:100%;height:100%;overflow:hidden;position:relative}
.puzzleClip .art,.puzzleClip svg{width:200%;height:200%;max-width:none;position:absolute}
.puzzleClip.a.lr .art,.puzzleClip.a.lr svg{left:0;top:-50%;width:200%;height:200%}
.puzzleClip.b.lr .art,.puzzleClip.b.lr svg{right:0;left:auto;top:-50%;width:200%;height:200%}
.puzzleClip.a.tb .art,.puzzleClip.a.tb svg{top:0;left:-50%;width:200%;height:200%}
.puzzleClip.b.tb .art,.puzzleClip.b.tb svg{bottom:0;top:auto;left:-50%;width:200%;height:200%}
.puzzleClip.a.lr{clip-path:inset(0 50% 0 0)}
.puzzleClip.b.lr{clip-path:inset(0 0 0 50%)}
.puzzleClip.a.tb{clip-path:inset(0 0 50% 0)}
.puzzleClip.b.tb{clip-path:inset(50% 0 0 0)}
/* simpler half display: show full art scaled in half window */
.puzzleClip{display:grid;place-items:center}
.puzzleClip .art,.puzzleClip svg{width:90px;height:90px;position:static;max-width:none}
.puzzleHalf.a.lr .puzzleClip{border-right:3px dashed #ff9fbd}
.puzzleHalf.b.lr .puzzleClip{border-left:3px dashed #7fd3b0}
.puzzleHalf.a.tb .puzzleClip{border-bottom:3px dashed #ff9fbd}
.puzzleHalf.b.tb .puzzleClip{border-top:3px dashed #7fd3b0}
.puzzleSlot{width:120px;height:120px;margin:0 auto;border:3px solid #ffd93b;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.85)}
.puzzleSlot .slotHint{font-size:28px;opacity:.4;font-weight:900}
.puzzleSlot.complete{border-color:#52d273;background:#f0fff4}
.puzzleSlot.complete .art,.puzzleSlot.complete svg{width:90px;height:90px}


/* ——— Batch3 types 41–50 ——— */
.shadowCard .shadowSil,.shadowCard .shadowSil svg,.shadowCard .shadowSil .art{
  filter:brightness(0) opacity(.55);
}
.shadowCard.filled .inner{filter:none}
.sentenceFrame{background:rgba(255,255,255,.92);border:3px solid #ffd1e3;border-radius:18px;padding:.5em .9em;font-weight:900;font-size:clamp(16px,3.8vmin,22px);text-align:center;max-width:340px}
.sentenceFrame .art,.sentenceFrame svg{width:48px;height:48px;vertical-align:middle}
.sentText{margin-top:4px}
.tfRow{max-width:300px}
.tfBtn.yes{border-color:#6fe08b}
.tfBtn.no{border-color:#ffeaa7}
.wipeArea{position:relative;width:min(280px,85vw);height:min(180px,50vw);background:#fff;border:3px solid #e8c48a;border-radius:20px;overflow:hidden;margin:0 auto}
.wipeArea .art,.wipeArea svg{width:100%;height:100%}
.dirtSpot{position:absolute;width:36px;height:36px;border-radius:50%;background:rgba(139,105,20,.45);border:2px solid rgba(100,70,20,.35);padding:0;cursor:pointer;transition:opacity .5s,transform .5s}
.dirtSpot.cleared{opacity:0;transform:scale(.3);pointer-events:none}
.wipeArea.shine{box-shadow:0 0 18px rgba(255,217,59,.55);border-color:#ffd93b}
.sortBox.hint{box-shadow:0 0 0 4px rgba(255,217,59,.55)}
.washBar .step.cur{border-color:#ff9f1c;background:#fff8e8}
.step.cur{border-color:#ff9f1c;background:#fff8e8}