: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.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}