:root{
  --u:1px;
  --ink:#5b3a29;
  --ink-soft:#8a6450;
  --cream:#fff8ec;
  --cream-2:#fbeedb;
  --gold:#e9bd5a;
  --gold-dark:#c8913a;
  --pink:#f07aa8;
  --pink-light:#ffb3cf;
  --purple:#b77be0;
  --green:#5cbf7a;
  --red:#e2607a;
  --font:"Huninn","PingFang TC","Heiti TC","Microsoft JhengHei","Noto Sans TC",sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#f3d9ea;font-family:var(--font);color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
body{background:radial-gradient(circle at 50% 40%,#fbe9f3,#ecd0e6)}
#stage{position:absolute;overflow:hidden;border-radius:calc(var(--u)*18);box-shadow:0 10px 40px rgba(120,60,110,.25);background:#f6e4ee}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:block}
.bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.abs{position:absolute}
button{font:inherit;color:inherit;border:0;background:transparent;padding:0;margin:0;cursor:pointer}
button:focus-visible{outline:calc(var(--u)*5) solid #ffd54a;outline-offset:calc(var(--u)*3)}
.hot{position:absolute;border-radius:50%}
.hot.rect{border-radius:calc(var(--u)*30)}
.hot:active{background:rgba(255,255,255,.18)}

/* HUD */
.lvnum{display:flex;align-items:center;justify-content:center;color:#fff;font-size:calc(var(--u)*30);text-shadow:0 calc(var(--u)*2) 0 rgba(80,30,110,.55);pointer-events:none}
.xp{background:#4d5470;border-radius:999px;overflow:hidden;pointer-events:none;box-shadow:inset 0 calc(var(--u)*3) calc(var(--u)*4) rgba(0,0,0,.35)}
.xp i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(#f2b9fb,#c27fe6 60%,#a965d9);transition:width .8s cubic-bezier(.3,1.4,.5,1);box-shadow:inset 0 calc(var(--u)*3) 0 rgba(255,255,255,.45)}
.xp b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:calc(var(--u)*19);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.cointext{display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*34);color:var(--ink);pointer-events:none;font-variant-numeric:tabular-nums}
.badge{position:absolute;min-width:calc(var(--u)*36);height:calc(var(--u)*36);padding:0 calc(var(--u)*8);border-radius:999px;background:var(--pink);color:#fff;font-size:calc(var(--u)*20);display:flex;align-items:center;justify-content:center;border:calc(var(--u)*3) solid #fff;pointer-events:none}

/* labels on map */
.plate{position:absolute;transform:translate(-50%,0);white-space:nowrap;display:flex;align-items:center;gap:calc(var(--u)*6);
  padding:calc(var(--u)*6) calc(var(--u)*18);border-radius:999px;background:rgba(255,248,236,.94);border:calc(var(--u)*4) solid var(--gold);
  font-size:calc(var(--u)*24);color:var(--ink);box-shadow:0 calc(var(--u)*4) 0 rgba(150,90,40,.25);pointer-events:none}
.plate.locked{background:rgba(240,232,240,.92);border-color:#c9b6cf;color:#7d6a80}
.plate svg{width:calc(var(--u)*24);height:calc(var(--u)*24)}
.plate.hero{font-size:calc(var(--u)*28);background:#fff3f8;border-color:var(--pink)}
.marker{position:absolute;z-index:5;transform:translate(-50%,-100%);width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7c7,#ffd23f 55%,#f0a91f);border:calc(var(--u)*5) solid #fff;color:#7a4a10;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*40);box-shadow:0 calc(var(--u)*6) calc(var(--u)*10) rgba(160,90,20,.35);
  animation:bob 1.2s ease-in-out infinite;pointer-events:none}
@keyframes bob{50%{transform:translate(-50%,-118%)}}
.glow{position:absolute;border-radius:50%;pointer-events:none;box-shadow:0 0 calc(var(--u)*40) calc(var(--u)*16) rgba(255,230,120,.55);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 calc(var(--u)*60) calc(var(--u)*26) rgba(255,214,90,.7)}}
.say{position:absolute;padding:calc(var(--u)*12) calc(var(--u)*20);background:#fffdf7;border:calc(var(--u)*4) solid var(--gold);border-radius:calc(var(--u)*26);
  font-size:calc(var(--u)*24);line-height:1.45;color:var(--ink);box-shadow:0 calc(var(--u)*5) 0 rgba(150,90,40,.2);pointer-events:none;max-width:calc(var(--u)*320);text-align:center}
.say::after{content:"";position:absolute;left:50%;bottom:calc(var(--u)*-16);transform:translateX(-50%);border:calc(var(--u)*13) solid transparent;border-top-color:var(--gold);border-bottom:0}

/* bakery */
.board{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*6);padding:calc(var(--u)*10) calc(var(--u)*16);pointer-events:none}
.board h3{margin:0;font-weight:400;font-size:calc(var(--u)*28);color:#c25485}
.board p{margin:0;font-size:calc(var(--u)*22);line-height:1.45}
.board .small{font-size:calc(var(--u)*19);color:var(--ink-soft)}
.counter{white-space:pre-line;display:flex;align-items:center;justify-content:center;text-align:center;padding:calc(var(--u)*10) calc(var(--u)*40);
  font-size:calc(var(--u)*34);line-height:1.5;pointer-events:none}
.stagebtn{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:999px;color:#fff;
  text-shadow:0 calc(var(--u)*2) calc(var(--u)*2) rgba(90,40,70,.45);font-size:calc(var(--u)*34);line-height:1.2}
.stagebtn small{font-size:calc(var(--u)*22);opacity:.95;display:flex;align-items:center;gap:calc(var(--u)*4)}
.stagebtn.locked{background:rgba(110,100,120,.45)}
.stagebtn:active{transform:scale(.96)}
.stagebtn svg{width:calc(var(--u)*24);height:calc(var(--u)*24)}
.roundbtn{display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffdf6,#f6e6cc);
  border:calc(var(--u)*6) solid var(--gold);box-shadow:0 calc(var(--u)*6) 0 rgba(150,90,40,.3)}
.roundbtn svg{width:55%;height:55%}

/* quiz */
.dot{position:absolute;border-radius:50%;background:#fbf1e2;border:calc(var(--u)*3) solid #b48a63;pointer-events:none}
.dot.done{background:radial-gradient(circle at 35% 30%,#e7c3ff,#a865db);border-color:#7d4ba8}
.dot.miss{background:radial-gradient(circle at 35% 30%,#ffe2a8,#f2b54e);border-color:#b77d24}
.dot.now{background:#fff;border-color:var(--pink);box-shadow:0 0 0 calc(var(--u)*5) rgba(240,122,168,.35)}
.qcard{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*30);pointer-events:none}
.qtext{font-size:calc(var(--u)*46);line-height:1.45;white-space:pre-line}
.qtext.mid{font-size:calc(var(--u)*38)}
.qtext.long{font-size:calc(var(--u)*31)}
.qmeta{font-size:calc(var(--u)*20);color:var(--ink-soft);display:flex;gap:calc(var(--u)*14);align-items:center}
.qmeta .stars{color:#f0a91f;letter-spacing:calc(var(--u)*2)}
.answerbox{min-width:calc(var(--u)*260);height:calc(var(--u)*86);border-radius:calc(var(--u)*20);border:calc(var(--u)*5) dashed #d9a95a;background:#fffdf8;
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*52);padding:0 calc(var(--u)*24);color:#3f2a1d;font-variant-numeric:tabular-nums}
.answerbox.bad{animation:shake .35s;border-color:var(--red)}
.answerbox.ok{border-style:solid;border-color:var(--green);background:#ecfaef}
.opt{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:999px;color:#4a2c1c;font-size:calc(var(--u)*40);line-height:1.2;padding:0 calc(var(--u)*30);transition:transform .1s}
.opt.long{font-size:calc(var(--u)*30)}
.opt:active{transform:scale(.97)}
.opt.ok{box-shadow:0 0 0 calc(var(--u)*8) #6fd38d,0 0 calc(var(--u)*30) calc(var(--u)*8) rgba(111,211,141,.7)}
.opt.bad{animation:shake .35s;background:rgba(90,80,90,.45);color:#fff}
.opt .mk{position:absolute;right:calc(var(--u)*18);top:50%;transform:translateY(-50%);width:calc(var(--u)*54);height:calc(var(--u)*54);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}
.opt .mk svg{width:65%;height:65%}
.cover{background:linear-gradient(#fff9ef,#f8ebd7);border:calc(var(--u)*6) solid var(--gold);border-radius:calc(var(--u)*46);box-shadow:0 calc(var(--u)*6) 0 rgba(150,90,40,.25)}
.optcover{border-radius:999px;background:rgba(250,240,226,.97);border:calc(var(--u)*5) dashed #e0c79b}
@keyframes shake{20%,60%{transform:translateX(calc(var(--u)*-10))}40%,80%{transform:translateX(calc(var(--u)*10))}}
.keypad{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:calc(var(--u)*14);padding:calc(var(--u)*22)}
.key{border-radius:calc(var(--u)*28);background:linear-gradient(#ffffff,#fde9f1);border:calc(var(--u)*4) solid #f3b8cf;font-size:calc(var(--u)*48);color:#6b3a50;box-shadow:0 calc(var(--u)*6) 0 #e79fbd}
.key:active{transform:translateY(calc(var(--u)*4));box-shadow:0 calc(var(--u)*2) 0 #e79fbd}
.key.ok{background:linear-gradient(#a8e6b8,#5cbf7a);border-color:#4aa767;color:#fff;box-shadow:0 calc(var(--u)*6) 0 #3e8d57;font-size:calc(var(--u)*34)}
.key.del{background:linear-gradient(#fff,#ece6f3);border-color:#cbbbe0;box-shadow:0 calc(var(--u)*6) 0 #b6a3cf}
.key svg{width:calc(var(--u)*44);height:calc(var(--u)*44)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:calc(var(--u)*16);padding:calc(var(--u)*22)}
.tile{border-radius:calc(var(--u)*26);font-size:calc(var(--u)*36);color:#4a2c1c;border:calc(var(--u)*5) solid #f2c26b;background:linear-gradient(#fffef8,#ffeccc);box-shadow:0 calc(var(--u)*6) 0 #e2a94b;transition:transform .15s,opacity .35s}
.tile.ans{border-color:#c7a3ee;background:linear-gradient(#fffaff,#f0e1ff);box-shadow:0 calc(var(--u)*6) 0 #a77fd6}
.tile.sel{transform:translateY(calc(var(--u)*-8)) scale(1.04);box-shadow:0 0 0 calc(var(--u)*6) #ff9fc6,0 calc(var(--u)*10) 0 #e2a94b}
.tile.bad{animation:shake .35s}
.tile.gone{opacity:0;transform:scale(.6);pointer-events:none}
.bubble{display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--u)*24);line-height:1.4;padding:calc(var(--u)*6) calc(var(--u)*16);pointer-events:none;overflow:hidden}
.bubble.long{font-size:calc(var(--u)*19)}
.pop{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.float{position:absolute;font-size:calc(var(--u)*40);color:#fff;text-shadow:0 calc(var(--u)*3) 0 #c27a10,0 0 calc(var(--u)*10) rgba(255,190,60,.9);pointer-events:none;animation:floatup 1.2s ease-out forwards;white-space:nowrap}
@keyframes floatup{0%{transform:translate(-50%,0) scale(.7);opacity:0}20%{opacity:1;transform:translate(-50%,-20%) scale(1.1)}100%{transform:translate(-50%,-160%) scale(1);opacity:0}}

/* result */
.rstar{position:absolute;pointer-events:none;opacity:0}
.rstar.on{animation:starin .55s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes starin{0%{opacity:0;transform:scale(2.2) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.banner{display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*26);color:#8b4a6a;pointer-events:none}
.lvnum.gold{color:#8a4b10;text-shadow:0 calc(var(--u)*2) 0 rgba(255,255,255,.8)}
.bigbtn{display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:calc(var(--u)*44)}
.bigbtn.pink{color:#fff;text-shadow:0 calc(var(--u)*2) calc(var(--u)*2) rgba(150,40,80,.45)}
.bigbtn.cream{color:var(--ink)}
.bigbtn:active{transform:scale(.97)}
.gain{position:absolute;display:flex;gap:calc(var(--u)*14);transform:translateX(-50%);pointer-events:none}
.gain span{padding:calc(var(--u)*8) calc(var(--u)*22);border-radius:999px;background:rgba(255,250,240,.95);border:calc(var(--u)*4) solid var(--gold);font-size:calc(var(--u)*28);white-space:nowrap}

/* modal */
.modal{position:absolute;inset:0;background:rgba(70,40,80,.42);display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.card{position:relative;width:calc(var(--u)*900);max-height:calc(var(--u)*960);overflow:auto;background:var(--cream);border:calc(var(--u)*8) solid var(--gold);border-radius:calc(var(--u)*48);
  box-shadow:0 calc(var(--u)*10) 0 rgba(150,90,40,.35);padding:calc(var(--u)*38) calc(var(--u)*46);animation:pop .3s cubic-bezier(.3,1.5,.5,1)}
.card.wide{width:calc(var(--u)*1080)}
.card h2{margin:0 0 calc(var(--u)*12);font-weight:400;font-size:calc(var(--u)*44);color:#c25485}
.card p,.card li{font-size:calc(var(--u)*30);line-height:1.6;margin:0 0 calc(var(--u)*12)}
.card .row{display:flex;gap:calc(var(--u)*30);align-items:flex-start}
.card .face{width:calc(var(--u)*210);flex:none}
.card .face img{width:100%;display:block}
.card .body{flex:1;min-width:0}
.card .ans{display:inline-block;padding:calc(var(--u)*4) calc(var(--u)*18);border-radius:calc(var(--u)*14);background:#eaf8ee;border:calc(var(--u)*3) solid #8fd3a3;font-size:calc(var(--u)*32);margin-bottom:calc(var(--u)*10)}
.card .explain{background:#fff;border-radius:calc(var(--u)*24);border:calc(var(--u)*3) dashed #eec98a;padding:calc(var(--u)*18) calc(var(--u)*24);font-size:calc(var(--u)*29);line-height:1.7}
.card .gainline{font-size:calc(var(--u)*28);color:#b7741a;margin-bottom:calc(var(--u)*10)}
.actions{display:flex;gap:calc(var(--u)*24);justify-content:center;margin-top:calc(var(--u)*26);flex-wrap:wrap}
.pill{min-width:calc(var(--u)*260);height:calc(var(--u)*96);padding:0 calc(var(--u)*40);border-radius:999px;font-size:calc(var(--u)*36);
  color:#fff;background:linear-gradient(#ffa9cb,#f0659e);border:calc(var(--u)*6) solid #f6d27c;box-shadow:0 calc(var(--u)*7) 0 #c8487c;text-shadow:0 calc(var(--u)*2) calc(var(--u)*2) rgba(140,30,70,.4)}
.pill.cream{color:var(--ink);background:linear-gradient(#fffdf6,#f7e5c6);box-shadow:0 calc(var(--u)*7) 0 #d0a764;text-shadow:none}
.pill.purple{background:linear-gradient(#d8b3f5,#a86ad8);box-shadow:0 calc(var(--u)*7) 0 #7d48ad}
.pill.small{min-width:calc(var(--u)*170);height:calc(var(--u)*72);font-size:calc(var(--u)*28);padding:0 calc(var(--u)*26)}
.pill:active{transform:translateY(calc(var(--u)*4));box-shadow:0 calc(var(--u)*3) 0 #c8487c}
.pill[disabled]{opacity:.45;pointer-events:none}
.close{position:absolute;right:calc(var(--u)*22);top:calc(var(--u)*22);width:calc(var(--u)*72);height:calc(var(--u)*72);border-radius:50%;background:#fde6ef;border:calc(var(--u)*4) solid #f3b8cf}
.close svg{width:50%;height:50%}
.quest{display:flex;align-items:center;gap:calc(var(--u)*20);padding:calc(var(--u)*16) 0;border-bottom:calc(var(--u)*3) dashed #eed7b4}
.quest:last-child{border-bottom:0}
.quest .qt{flex:1;font-size:calc(var(--u)*30)}
.quest .bar{height:calc(var(--u)*22);border-radius:999px;background:#f1e3cf;margin-top:calc(var(--u)*8);overflow:hidden}
.quest .bar i{display:block;height:100%;background:linear-gradient(90deg,#ffcf5a,#f6a623)}
.quest small{font-size:calc(var(--u)*22);color:var(--ink-soft)}
table.stats{width:100%;border-collapse:collapse;font-size:calc(var(--u)*26)}
table.stats th,table.stats td{padding:calc(var(--u)*10) calc(var(--u)*12);border-bottom:calc(var(--u)*2) solid #eedcc2;text-align:left}
table.stats th{color:var(--ink-soft);font-weight:400}
.tabs{display:flex;gap:calc(var(--u)*12);margin-bottom:calc(var(--u)*18)}
.tab{padding:calc(var(--u)*10) calc(var(--u)*26);border-radius:999px;font-size:calc(var(--u)*28);background:#f4e6d2}
.tab.on{background:var(--pink);color:#fff}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*20);padding:calc(var(--u)*14) 0;border-bottom:calc(var(--u)*2) solid #eedcc2;font-size:calc(var(--u)*30)}
.seg{display:flex;gap:calc(var(--u)*8);flex-wrap:wrap}
.seg button{padding:calc(var(--u)*8) calc(var(--u)*20);border-radius:999px;background:#f4e6d2;font-size:calc(var(--u)*26)}
.seg button.on{background:var(--purple);color:#fff}
.gatein{font:inherit;font-size:calc(var(--u)*44);width:calc(var(--u)*260);text-align:center;border-radius:calc(var(--u)*20);border:calc(var(--u)*4) solid var(--gold);padding:calc(var(--u)*10);color:var(--ink);background:#fff}
.toast{position:absolute;left:50%;top:calc(var(--u)*150);transform:translateX(-50%);z-index:60;background:rgba(255,250,240,.97);border:calc(var(--u)*5) solid var(--gold);
  border-radius:999px;padding:calc(var(--u)*16) calc(var(--u)*40);font-size:calc(var(--u)*30);box-shadow:0 calc(var(--u)*6) 0 rgba(150,90,40,.3);animation:pop .3s;white-space:nowrap;pointer-events:none}
.lvbig{font-size:calc(var(--u)*110);color:#c25485;text-align:center;line-height:1;text-shadow:0 calc(var(--u)*5) 0 #ffd8e7}
.center{text-align:center}
.avatar{width:calc(var(--u)*200);height:calc(var(--u)*200);margin:0 auto calc(var(--u)*10);display:block}
.muted{color:var(--ink-soft)}

#rotate{display:none;position:fixed;inset:0;background:linear-gradient(#fbe9f3,#eed3e7);z-index:100;align-items:center;justify-content:center;text-align:center;color:var(--ink);font-size:24px;line-height:1.6}
.rot-icon{width:90px;height:60px;margin:0 auto 18px;border:6px solid #c27fe6;border-radius:12px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,30%{transform:rotate(90deg)}60%,100%{transform:rotate(0)}}
@media (orientation:portrait) and (max-width:1100px){#rotate{display:flex}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition:none!important}}

/* ===== v2: living world ===== */
.patch{position:absolute;background-image:var(--src);background-repeat:no-repeat;pointer-events:none;will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.patch.soft{-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
.patch.rect{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.a-sway{animation:sway 4s ease-in-out infinite}
.a-wave{animation:wave 2.2s ease-in-out infinite}
.a-flag{animation:flag 1.4s ease-in-out infinite}
.a-swing{animation:swing 3.2s ease-in-out infinite}
.a-flame{animation:flame .9s ease-in-out infinite}
.a-shimmer{animation:shimmer 1.6s ease-in-out infinite}
.a-float{animation:floaty 3s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
@keyframes wave{0%,100%{transform:skewX(-3deg)}50%{transform:skewX(3deg)}}
@keyframes flag{0%,100%{transform:skewY(-7deg) scaleX(.95)}50%{transform:skewY(6deg) scaleX(1.02)}}
@keyframes swing{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
@keyframes flame{0%,100%{transform:scaleY(1) scaleX(1);filter:brightness(1)}30%{transform:scaleY(1.07) scaleX(.98);filter:brightness(1.18)}60%{transform:scaleY(.97) scaleX(1.02);filter:brightness(.95)}}
@keyframes shimmer{0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.15) saturate(1.2)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
.glowdot{position:absolute;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,236,160,.95) 0,rgba(255,200,90,.55) 35%,rgba(255,170,60,0) 70%);animation:flicker 2.3s infinite}
.glowdot.warm{background:radial-gradient(circle,rgba(255,210,120,.9) 0,rgba(255,140,40,.55) 40%,rgba(255,110,20,0) 72%)}
.glowdot.magic{background:radial-gradient(circle,rgba(230,200,255,.95) 0,rgba(180,130,255,.5) 40%,rgba(160,110,255,0) 72%)}
@keyframes flicker{0%{opacity:.55;transform:scale(1)}17%{opacity:.9}31%{opacity:.62;transform:scale(1.07)}48%{opacity:1}63%{opacity:.7;transform:scale(.97)}81%{opacity:.92}100%{opacity:.55;transform:scale(1)}}
.fall{position:absolute;top:-4%;width:calc(var(--u)*16);height:calc(var(--u)*11);border-radius:60% 0 60% 0;background:linear-gradient(135deg,#ffd6e6,#f7a8c8);opacity:.9;pointer-events:none;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(calc(var(--u)*60),25vh) rotate(90deg)}50%{transform:translate(calc(var(--u)*-20),50vh) rotate(200deg)}75%{transform:translate(calc(var(--u)*70),75vh) rotate(290deg)}100%{transform:translate(calc(var(--u)*10),110vh) rotate(380deg)}}
.twinkle{position:absolute;width:calc(var(--u)*26);height:calc(var(--u)*26);pointer-events:none;animation:twinkle 2.4s ease-in-out infinite}
.twinkle::before,.twinkle::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;transform:translate(-50%,-50%);box-shadow:0 0 calc(var(--u)*8) #fff6c0}
.twinkle::before{width:100%;height:14%}.twinkle::after{width:14%;height:100%}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.fall-water{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:.55;border-radius:calc(var(--u)*10);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.0) 0,rgba(255,255,255,.75) calc(var(--u)*6),rgba(255,255,255,0) calc(var(--u)*14),rgba(255,255,255,0) calc(var(--u)*30));
  background-size:100% calc(var(--u)*60);animation:waterfall .6s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
@keyframes waterfall{to{background-position:0 calc(var(--u)*60)}}
.butterfly{position:absolute;width:calc(var(--u)*34);height:calc(var(--u)*28);pointer-events:none;offset-rotate:0deg}
.butterfly svg{width:100%;height:100%;animation:flap .25s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.35)}}

/* walker (map bunny) */
.walklayer{position:absolute;inset:0;touch-action:none}
.walker{position:absolute;pointer-events:none;z-index:6}
.walker .flip{position:absolute;inset:0;transition:transform .15s}
.walker.left .flip{transform:scaleX(-1)}
.walker .wbody{position:absolute;inset:0;transform-origin:50% 95%;animation:breathe 2.6s ease-in-out infinite}
.walker.walking .wbody{animation:waddle .34s ease-in-out infinite alternate}
.walker img{width:100%;height:100%;display:block}
.walker .shadow{position:absolute;left:18%;right:18%;bottom:-3%;height:9%;border-radius:50%;background:rgba(80,50,40,.28);filter:blur(1px)}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.975)}}
@keyframes waddle{0%{transform:rotate(-7deg) translateY(0)}100%{transform:rotate(7deg) translateY(-7%)}}
.walker.hop .wbody{animation:hop .5s ease-out}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22%) scale(.98,1.04)}70%{transform:translateY(0) scale(1.05,.94)}}
.lid{position:absolute;border-radius:50%;opacity:0;pointer-events:none}
.blink .lid{opacity:1}
.ripple{position:absolute;width:calc(var(--u)*60);height:calc(var(--u)*26);border-radius:50%;border:calc(var(--u)*4) solid rgba(255,255,255,.95);transform:translate(-50%,-50%);pointer-events:none;animation:ripple .6s ease-out forwards;z-index:5}
@keyframes ripple{from{opacity:1;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.say.follow{z-index:7;transform:translate(-50%,-100%)}
.fadeout{animation:fadeout .45s forwards}
@keyframes fadeout{to{opacity:0}}
.curtain{position:absolute;inset:0;background:#fff3f8;z-index:70;pointer-events:none;animation:curtain .7s ease forwards}
@keyframes curtain{0%{opacity:0}45%{opacity:1}100%{opacity:0}}

/* bakery characters */
.actor{position:absolute;pointer-events:none}
.actor img{width:100%;height:100%;display:block}
.actor .body{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 3s ease-in-out infinite}
.actor.cheer .body{animation:cheer .8s ease-out}
.actor.no .body{animation:nope .7s ease-in-out}
@keyframes cheer{0%,100%{transform:translateY(0)}25%{transform:translateY(-6%) scale(.98,1.03)}50%{transform:translateY(0) scale(1.03,.97)}75%{transform:translateY(-3%)}}
@keyframes nope{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.bear .body{animation:bearsway 4s ease-in-out infinite;transform-origin:45% 100%}
@keyframes bearsway{0%,100%{transform:rotate(-.6deg) scale(1,1)}50%{transform:rotate(.6deg) scale(1.006,1.012)}}
.rays{position:absolute;pointer-events:none;mix-blend-mode:screen;opacity:.35;animation:rays 7s ease-in-out infinite;
  background:repeating-linear-gradient(115deg,rgba(255,250,220,0) 0,rgba(255,250,220,.65) calc(var(--u)*40),rgba(255,250,220,0) calc(var(--u)*90),rgba(255,250,220,0) calc(var(--u)*150));
  -webkit-mask-image:linear-gradient(160deg,#000 10%,transparent 75%);mask-image:linear-gradient(160deg,#000 10%,transparent 75%)}
@keyframes rays{0%,100%{opacity:.22}50%{opacity:.45}}
.mote{position:absolute;width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:rgba(255,245,200,.9);box-shadow:0 0 calc(var(--u)*6) rgba(255,240,180,.9);pointer-events:none;animation:mote linear infinite}
@keyframes mote{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(calc(var(--u)*120),calc(var(--u)*-160));opacity:0}}
.steam{position:absolute;width:calc(var(--u)*34);height:calc(var(--u)*80);border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);pointer-events:none;animation:steam 3s ease-out infinite}
@keyframes steam{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.8}100%{transform:translateY(calc(var(--u)*-90)) scale(1.4);opacity:0}}
.backpill{display:flex;align-items:center;gap:calc(var(--u)*8);padding:0 calc(var(--u)*26) 0 calc(var(--u)*18);height:calc(var(--u)*74);border-radius:999px;
  background:linear-gradient(#fffdf6,#f7e5c6);border:calc(var(--u)*5) solid var(--gold);box-shadow:0 calc(var(--u)*6) 0 rgba(150,90,40,.3);font-size:calc(var(--u)*30);color:var(--ink);z-index:8}
.backpill svg{width:calc(var(--u)*34);height:calc(var(--u)*34)}
.backpill:active{transform:translateY(calc(var(--u)*3))}
.bubble2{position:absolute;z-index:8;display:flex;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*14) calc(var(--u)*22);background:#fffdf7;border:calc(var(--u)*5) solid var(--gold);
  border-radius:calc(var(--u)*30);font-size:calc(var(--u)*26);line-height:1.45;color:var(--ink);box-shadow:0 calc(var(--u)*6) 0 rgba(150,90,40,.22);pointer-events:none}
.bubble2::after{content:"";position:absolute;left:calc(var(--u)*-26);top:calc(var(--u)*60);border:calc(var(--u)*14) solid transparent;border-right:calc(var(--u)*22) solid var(--gold)}
.bubble2 img{width:calc(var(--u)*70);flex:none}
.bubble2.hide{display:none}
.mini{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*10)}
.mini .dots{display:flex;gap:calc(var(--u)*8)}
.mini .dots i{width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:50%;background:#fbf1e2;border:calc(var(--u)*3) solid #c7a27a}
.mini .dots i.done{background:#b47ae0;border-color:#7d4ba8}
.mini .dots i.miss{background:#f2b54e;border-color:#b77d24}
.mini .dots i.now{background:#fff;border-color:var(--pink);box-shadow:0 0 0 calc(var(--u)*4) rgba(240,122,168,.35)}
.counter .q{font-size:calc(var(--u)*46);line-height:1.4}
.counter .q.mid{font-size:calc(var(--u)*38)}
.counter .q.long{font-size:calc(var(--u)*30)}
.counter.quiz{flex-direction:column;gap:calc(var(--u)*10);pointer-events:none}
.counter .ansrow{display:flex;align-items:center;gap:calc(var(--u)*14)}
.counter .answerbox{height:calc(var(--u)*70);font-size:calc(var(--u)*44);min-width:calc(var(--u)*220)}
.stagebtn.opt3{font-size:calc(var(--u)*40);color:#fff}
.stagebtn.opt3.long{font-size:calc(var(--u)*28)}
.stagebtn.ok{box-shadow:0 0 0 calc(var(--u)*8) #6fd38d,0 0 calc(var(--u)*30) calc(var(--u)*10) rgba(111,211,141,.75)}
.stagebtn.bad{animation:shake .35s;background:rgba(90,80,90,.5)}
.stagebtn .mk{position:absolute;right:calc(var(--u)*14);top:calc(var(--u)*-14);width:calc(var(--u)*50);height:calc(var(--u)*50);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.stagebtn .mk svg{width:65%;height:65%}
.keyrow{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u)*8);padding:calc(var(--u)*12);z-index:4}
.keyrow .key{font-size:calc(var(--u)*40);border-radius:calc(var(--u)*20)}
.keyrow .key.ok{font-size:calc(var(--u)*26)}
.keyrow .key svg{width:calc(var(--u)*34);height:calc(var(--u)*34)}
.ctiles{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:calc(var(--u)*12);padding:calc(var(--u)*10) calc(var(--u)*20)}
.ctiles .tile{font-size:calc(var(--u)*32)}
.hintbtn{display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffdf6,#f6e6cc);border:calc(var(--u)*6) solid var(--gold);box-shadow:0 calc(var(--u)*5) 0 rgba(150,90,40,.3);z-index:8}
.hintbtn svg{width:62%;height:62%}
.hintbtn{animation:hintpulse 2.4s ease-in-out infinite}
@keyframes hintpulse{0%,100%{box-shadow:0 calc(var(--u)*5) 0 rgba(150,90,40,.3)}50%{box-shadow:0 calc(var(--u)*5) 0 rgba(150,90,40,.3),0 0 calc(var(--u)*24) calc(var(--u)*8) rgba(255,215,80,.6)}}

/* ===== v3: sprite frames & 3D walking ===== */
.sprite{position:absolute;inset:0}
.sprite .fr{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:none}
.sprite .fr img,.walker .sprite .fr img,.actor .sprite .fr img{height:100%;width:auto;display:block;max-width:none}
.walker .persp{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
.walker .shadow{left:22%;right:22%;bottom:-2%;height:8%}
.walker .wbody{animation:breathe 2.6s ease-in-out infinite}
.walker.walking.side .wbody{animation:bob .19s ease-in-out infinite alternate}
.walker.walking.vert .wbody{animation:waddle .3s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3%)}}
.bunbox .body{animation:breathe 3s ease-in-out infinite}