/* Little Hearth v4 — glossy "premium merge" skin */
:root{--ink:#3b2a20;--soft:#7d6a5c;--card:#fffdf8;--cell:48px;--out:#4a2616;--blue:#3d9cf0;--blueD:#1f6fc4;--green:#43c46a;--greenD:#259148;--pink:#ff5c9a;--gold:#ffc63d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#f7c98a;font-family:Fredoka,ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;color:var(--ink);touch-action:none;overscroll-behavior:none}
body{background:linear-gradient(180deg,#8fd6ff 0%,#bfe8ff 30%,#ffe7b8 62%,#ffd18a 100%)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
#app{height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);position:relative;overflow:hidden}
.ic{display:inline-block;width:22px;height:22px;flex:none}.ic svg,.ic img{width:100%;height:100%;display:block;pointer-events:none}
img{-webkit-user-drag:none}
.out{text-shadow:0 2px 0 var(--out),2px 0 0 var(--out),-2px 0 0 var(--out),0 -2px 0 var(--out),1.5px 1.5px 0 var(--out),-1.5px 1.5px 0 var(--out),1.5px -1.5px 0 var(--out),-1.5px -1.5px 0 var(--out)}
/* ---------- room + sky ---------- */
#roomWrap{position:relative;flex:none;height:clamp(205px,28dvh,340px);overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#58b8f5 0%,#9ad8ff 45%,#d9f1ff 72%,#fff1cf 100%)}
.sky .cl{position:absolute;background:#fff;border-radius:50px;opacity:.9;filter:drop-shadow(0 4px 0 rgba(120,180,230,.35));animation:drift 60s linear infinite}
.sky .cl:before,.sky .cl:after{content:"";position:absolute;background:#fff;border-radius:50%}
.sky .c1{width:110px;height:30px;top:62px;left:-20px}.sky .c1:before{width:50px;height:50px;left:16px;top:-26px}.sky .c1:after{width:38px;height:38px;left:56px;top:-16px}
.sky .c2{width:80px;height:22px;top:110px;left:70%;animation-duration:80s}.sky .c2:before{width:36px;height:36px;left:12px;top:-18px}.sky .c2:after{width:28px;height:28px;left:40px;top:-12px}
.sky .c3{width:60px;height:18px;top:34px;left:58%;opacity:.7;animation-duration:95s}.sky .c3:before{width:28px;height:28px;left:10px;top:-14px}.sky .c3:after{width:20px;height:20px;left:30px;top:-8px}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(60px)}}
.sky .hill{position:absolute;border-radius:50%;bottom:-120px}
.sky .h1{width:520px;height:260px;left:-200px;background:radial-gradient(ellipse at 50% 20%,#9be37f,#5ec55a)}
.sky .h2{width:480px;height:240px;right:-220px;bottom:-110px;background:radial-gradient(ellipse at 50% 20%,#b5ec8f,#6fcf63)}
#room{position:absolute;inset:0;width:100%;height:100%;display:block}
/* ---------- top bar ---------- */
.hud{position:absolute;top:8px;left:8px;right:8px;display:flex;align-items:center;gap:15px;z-index:5}
#lvBadge{position:relative;width:54px;height:54px;flex:none;border-radius:16px;background:linear-gradient(180deg,#fff,#dff1ff);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--out),0 6px 0 2px rgba(74,38,22,.35);overflow:visible}
#lvBadge .pav{position:absolute;inset:2px;border-radius:13px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#bfe6ff,#6cbaf0)}
#lvBadge .pav img{width:118%;margin:-2px 0 0 -9%}
#lvBadge .lvc{position:absolute;left:-8px;bottom:-10px;min-width:28px;height:24px;padding:0 4px;border-radius:12px;background:linear-gradient(180deg,#5fb6ff,#2a7fe0);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--out);display:grid;place-items:center}
#lvBadge .lvc b{font-size:14px;font-weight:700;color:#fff;text-shadow:0 1.5px 0 #164f96,1px 0 0 #164f96,-1px 0 0 #164f96}
#lvBadge .xpbar{position:absolute;left:22px;right:2px;bottom:-7px;height:8px;border-radius:6px;background:#fff;box-shadow:0 0 0 2px var(--out);overflow:hidden}
#xpFill{display:block;height:100%;width:0;background:linear-gradient(180deg,#ffe27a,#f0a018);transition:width .6s}
.pill{position:relative;flex:1 1 0;min-width:0;height:34px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#eaf5ff 60%,#cfe6fa 100%);box-shadow:inset 0 -3px 0 rgba(80,130,190,.25),0 0 0 2.5px var(--out),0 4px 0 2px rgba(74,38,22,.3);font-weight:700;font-size:17px;color:var(--ink);padding:0 20px 0 26px}
.pill>.ic{position:absolute;left:-10px;top:50%;width:36px;height:36px;transform:translateY(-50%);filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
.pill b{line-height:1}
.pill .plus{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:8px;background:linear-gradient(180deg,#7be36f,#2fae46);box-shadow:0 0 0 2px var(--out),inset 0 -3px 0 rgba(0,90,30,.35);color:#fff;font-style:normal;font-weight:700;font-size:20px;line-height:22px;text-align:center;text-shadow:0 1.5px 0 #17702c}
.pill small{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;background:linear-gradient(180deg,#5a4bd8,#3a2fb0);border-radius:8px;padding:0 6px;line-height:15px;box-shadow:0 0 0 1.5px var(--out);white-space:nowrap}
.pill small:empty{display:none}
#energyPill{margin-left:6px}#coinPill{padding-right:10px}
#cartBtn{flex:none;width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,#ffe58a,#ffb21e);box-shadow:0 0 0 2.5px var(--out),inset 0 -4px 0 rgba(170,90,0,.35),0 4px 0 2px rgba(74,38,22,.3);display:grid;place-items:center}
#cartBtn .ic{width:34px;height:34px}
.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.16)}}
#lvBadge.bump{animation:bump .5s}
/* area progress pill (left, under the bar) */
#areaPill{position:absolute;left:8px;top:74px;z-index:4;display:flex;align-items:center;gap:0;background:linear-gradient(180deg,#fff2d6,#ffd9a0);border-radius:16px;padding:4px 10px 4px 4px;box-shadow:0 0 0 2.5px var(--out),inset 0 -3px 0 rgba(190,120,40,.3),0 4px 0 2px rgba(74,38,22,.25)}
#areaPill .shield{width:34px;height:38px;display:grid;place-items:center;background:linear-gradient(180deg,#ff8fc0,#e0478f);clip-path:path('M17 0 L34 6 V20 C34 30 26 35 17 38 C8 35 0 30 0 20 V6Z');margin-right:6px}
#areaPill .shield b{color:#fff;font-size:17px;font-weight:700;text-shadow:0 2px 0 #8a1f52}
#areaPill .ap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:80px}
#areaPill .apt{display:flex;align-items:center;gap:3px;font-size:15px;font-weight:700}#areaPill .apt .ic{width:18px;height:18px}
#areaPill .bar{display:block;width:100%;height:7px;background:#fff;border-radius:6px;box-shadow:0 0 0 1.5px var(--out);overflow:hidden}
#progFill{display:block;height:100%;width:0;background:linear-gradient(180deg,#ffe27a,#f08a18);transition:width .8s cubic-bezier(.3,1.4,.5,1)}
#areaPill small{font-size:10.5px;font-weight:600;color:#8a5a2a;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nextTxt{position:absolute;right:8px;top:76px;z-index:4;display:flex;align-items:center;gap:4px;max-width:52%;background:rgba(255,255,255,.88);border-radius:12px;padding:3px 4px 3px 8px;font-size:11.5px;box-shadow:0 0 0 2px rgba(74,38,22,.55)}
#nextTxt small{font-size:10px;color:var(--soft);font-weight:600}#nextTxt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.starNeed{display:inline-flex;align-items:center;gap:2px;flex:none;background:linear-gradient(180deg,#fff3c4,#ffd970);border-radius:9px;padding:0 6px;font-weight:700;color:#8a5a00}.starNeed .ic{width:14px;height:14px}
/* ---------- order givers ---------- */
#orders{flex:none;position:relative;z-index:3;display:flex;gap:2px;padding:0 6px;margin-top:-92px;height:150px;overflow-x:auto;overflow-y:visible;scrollbar-width:none;align-items:flex-end;transition:transform .5s cubic-bezier(.3,1.3,.5,1),opacity .4s}
#orders::-webkit-scrollbar{display:none}
#orders.peek{transform:translateY(60px);opacity:.25}
.order{flex:0 0 auto;width:120px;height:146px;position:relative;cursor:pointer}
.order .who{position:absolute;left:2px;top:0;width:88px;height:100px;transform-origin:50% 100%;animation:idle 3.6s ease-in-out infinite}
.order:nth-child(2) .who{animation-delay:-1.2s}.order:nth-child(3) .who{animation-delay:-2.3s}.order:nth-child(4) .who{animation-delay:-.6s}
.order .who img,.order .who svg{width:100%;height:100%;display:block}
@keyframes idle{50%{transform:translateY(-2px) rotate(-1deg) scaleY(1.01)}}
.order.speaking .who{animation:talkb .5s ease-in-out infinite}
@keyframes talkb{50%{transform:translateY(-4px) scale(1.03)}}
.order .rw{position:absolute;right:0;top:26px;display:flex;flex-direction:column;gap:3px;align-items:flex-end;z-index:2}
.chip{display:flex;align-items:center;gap:1px;height:20px;padding:0 6px 0 2px;border-radius:10px;font-size:12.5px;font-weight:700;color:#fff;box-shadow:0 0 0 2px var(--out);text-shadow:0 1.5px 0 rgba(0,0,0,.35)}
.chip .ic{width:18px;height:18px;margin-left:-6px}
.chip.st{background:linear-gradient(180deg,#a38bff,#6a4fe0)}.chip.cn{background:linear-gradient(180deg,#ffcf4d,#f08c18)}.chip.en{background:linear-gradient(180deg,#ff8ad0,#e0408f)}
.order .card{position:absolute;left:3px;right:3px;bottom:6px;height:52px;border-radius:14px;background:linear-gradient(180deg,#ffffff,#eef6ff);box-shadow:0 0 0 2.5px var(--out),inset 0 -4px 0 rgba(90,140,200,.2),0 5px 0 1px rgba(74,38,22,.28);display:flex;align-items:center;justify-content:center;padding:0 4px}
.need{display:flex;gap:2px;justify-content:center}
.need .ni{width:38px;height:42px;position:relative;display:grid;place-items:center}
.need .ni img,.need .ni svg{width:46px;height:46px;margin:-4px}
.need .ni:not(.have) img{filter:saturate(.85)}
.bdg{position:absolute;pointer-events:none;z-index:2}.bdg img,.bdg svg{width:100%;height:100%;display:block}
.need .bdg.ck{right:-3px;bottom:-1px;width:20px;height:20px}
.order .go{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);z-index:3;background:linear-gradient(180deg,#7be36f,#2fae46);color:#fff;font-weight:700;font-size:13px;border-radius:10px;padding:1px 12px 3px;box-shadow:0 0 0 2px var(--out),inset 0 -3px 0 rgba(0,90,30,.35);text-shadow:0 1.5px 0 #17702c;animation:go 1s ease-in-out infinite}
@keyframes go{50%{transform:translateX(-50%) scale(1.08)}}
.order.ready .need .bdg.ck{display:none}
.order.ready .card{background:linear-gradient(180deg,#f2fff0,#d6f7d2);box-shadow:0 0 0 2.5px var(--out),0 0 0 6px rgba(120,230,110,.55),0 5px 0 1px rgba(74,38,22,.28)}
.order.timed .card{background:linear-gradient(180deg,#fff9e2,#ffe9a8)}
.order .tmr{position:absolute;left:0;top:70px;z-index:3;display:flex;align-items:center;gap:2px;background:linear-gradient(180deg,#ff9a5a,#f0602a);color:#fff;font-size:11.5px;font-weight:700;border-radius:10px;padding:1px 6px 1px 2px;box-shadow:0 0 0 2px var(--out)}.order .tmr .ic{width:16px;height:16px}.order .tmr em{font-style:normal}
.order.leave{animation:leave .5s forwards}
@keyframes leave{to{transform:translateY(-40px) scale(.8);opacity:0}}
.order.enter{animation:enter .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes enter{from{transform:translateY(40px) scale(.7);opacity:0}}
/* ---------- board ---------- */
#boardWrap{flex:1;display:grid;place-items:center;min-height:0;padding:6px 4px 0;position:relative;z-index:2}
#frame{padding:6px;border-radius:20px;background:linear-gradient(180deg,#ffe9b0,#f7c66a 50%,#e8a648);box-shadow:0 0 0 3px var(--out),inset 0 3px 0 rgba(255,255,255,.7),inset 0 -4px 0 rgba(160,90,20,.35),0 8px 0 2px rgba(74,38,22,.3),0 14px 26px rgba(74,38,22,.25)}
#board{display:grid;grid-template-columns:repeat(7,var(--cell));grid-auto-rows:var(--cell);gap:0;border-radius:14px;overflow:hidden;box-shadow:0 0 0 2.5px var(--out),inset 0 3px 6px rgba(20,60,120,.25);background:#b9dcfa}
.cell{position:relative;display:grid;place-items:center;background:
  radial-gradient(circle at 50% 50%,rgba(255,255,255,.35) 0 2px,transparent 2.5px) 0 0/50% 50%,
  linear-gradient(180deg,#d4ebff,#c3e2fd);box-shadow:inset 0 0 0 .5px rgba(80,140,210,.35)}
.cell:nth-child(14n+2),.cell:nth-child(14n+4),.cell:nth-child(14n+6),.cell:nth-child(14n+8),.cell:nth-child(14n+10),.cell:nth-child(14n+12),.cell:nth-child(14n+14){background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.3) 0 2px,transparent 2.5px) 0 0/50% 50%,linear-gradient(180deg,#b5d9fb,#a6cff6)}
.cell.over{background:linear-gradient(180deg,#e2ffd9,#bff3b0)!important}
.cell.sel:before{content:"";position:absolute;inset:1px;z-index:3;pointer-events:none;
  background:linear-gradient(#1e9bff,#1e9bff) 0 0/12px 4px no-repeat,linear-gradient(#1e9bff,#1e9bff) 0 0/4px 12px no-repeat,
  linear-gradient(#1e9bff,#1e9bff) 100% 0/12px 4px no-repeat,linear-gradient(#1e9bff,#1e9bff) 100% 0/4px 12px no-repeat,
  linear-gradient(#1e9bff,#1e9bff) 0 100%/12px 4px no-repeat,linear-gradient(#1e9bff,#1e9bff) 0 100%/4px 12px no-repeat,
  linear-gradient(#1e9bff,#1e9bff) 100% 100%/12px 4px no-repeat,linear-gradient(#1e9bff,#1e9bff) 100% 100%/4px 12px no-repeat;
  filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff);animation:selp 1s ease-in-out infinite}
@keyframes selp{50%{transform:scale(1.07)}}
.item{width:100%;height:100%;position:relative;transition:transform .15s;display:grid;place-items:center}
.item>img,.item>svg{width:116%;height:116%;margin:-8%;display:block;pointer-events:none}
.item>img[src$='.webp']{width:128%;height:128%;margin:-14%}
.item.gen>img{width:118%;height:118%}
.item .bdg.gb{right:0;bottom:0;width:38%;height:38%;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.item.gen.empty{filter:grayscale(.7) brightness(.95)}
.item.gen.empty .bdg.gb{animation:none;filter:grayscale(1)}
.item .bdg.ck{right:2%;bottom:2%;width:42%;height:42%}
.item .bdg.cr{left:-2%;top:-4%;width:40%;height:40%;transform:rotate(-14deg)}
.item.max:after{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,170,.75),rgba(255,220,120,0) 70%);z-index:-1;animation:halo 2.2s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.15);opacity:.6}}
.glint{position:absolute;right:8%;top:6%;width:22%;height:22%;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,transparent 22%),linear-gradient(0deg,transparent 44%,#fff 48% 52%,transparent 56%),linear-gradient(90deg,transparent 44%,#fff 48% 52%,transparent 56%);animation:tw 1.8s ease-in-out infinite}
@keyframes tw{0%,100%{transform:scale(.3) rotate(0);opacity:0}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
.item.box>img{width:108%;height:108%}
.item .hp{position:absolute;left:0;right:0;bottom:4%;display:flex;justify-content:center;gap:2px}
.item .hp i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c8,#f0a018);box-shadow:0 0 0 1.2px var(--out)}
.item.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.2)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.item.hint{animation:wig 1.1s infinite}
@keyframes wig{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-9deg) scale(1.08)}25%{transform:rotate(8deg) scale(1.08)}40%{transform:rotate(-4deg)}}
.item.tap{animation:tap .25s}
@keyframes tap{50%{transform:scale(.84)}}
.item.lift{opacity:.25}
.ghost{position:fixed;z-index:50;pointer-events:none;width:var(--cell);height:var(--cell);transform:translate(-50%,-60%) scale(1.25);filter:drop-shadow(0 10px 8px rgba(40,20,10,.3))}
.ghost svg,.ghost img{width:100%;height:100%}
/* ---------- bottom info bar ---------- */
#bar{flex:none;display:flex;gap:6px;align-items:flex-end;padding:16px 8px 10px;position:relative;z-index:2}
.fbtn{flex:none;width:64px;height:66px;border-radius:18px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#ff9fc4,#ff5c9a 55%,#e03a7e);box-shadow:0 0 0 2.5px var(--out),inset 0 3px 0 rgba(255,255,255,.5),inset 0 -5px 0 rgba(140,10,60,.35),0 5px 0 1px rgba(74,38,22,.3)}
#shopBtn{background:linear-gradient(180deg,#8fd8ff,#3d9cf0 55%,#1f6fc4);box-shadow:0 0 0 2.5px var(--out),inset 0 3px 0 rgba(255,255,255,.5),inset 0 -5px 0 rgba(10,60,140,.35),0 5px 0 1px rgba(74,38,22,.3)}
.fbtn .ic{width:40px;height:40px;margin-top:-6px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.fbtn .fl{position:absolute;bottom:3px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1.5px 0 rgba(60,10,30,.7),1px 0 0 rgba(60,10,30,.6),-1px 0 0 rgba(60,10,30,.6)}
.fbtn em{position:absolute;top:-7px;right:-7px;background:linear-gradient(180deg,#ff6a5a,#e02a2a);color:#fff;font-style:normal;font-size:12px;font-weight:700;border-radius:11px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 5px;box-shadow:0 0 0 2px var(--out)}
.fbtn em:empty{display:none}
#habitBtn.glow,#habitBtn.walking{animation:go2 1.2s ease-in-out infinite}
@keyframes go2{50%{transform:scale(1.06) rotate(-2deg)}}
#habitBtn.walking{box-shadow:0 0 0 2.5px var(--out),0 0 0 6px rgba(120,230,110,.7)}
#info{flex:1;min-width:0;position:relative;height:66px;border-radius:16px;background:linear-gradient(180deg,#ffffff,#eef4fb);box-shadow:0 0 0 2.5px var(--out),inset 0 -4px 0 rgba(90,120,170,.18),0 5px 0 1px rgba(74,38,22,.28)}
.itab{position:absolute;left:8px;top:-14px;max-width:calc(100% - 16px);display:flex;align-items:center;gap:6px;height:24px;padding:0 4px 0 10px;border-radius:12px;background:linear-gradient(180deg,#5fb6ff,#2a7fe0);box-shadow:0 0 0 2px var(--out),inset 0 -3px 0 rgba(10,50,120,.3);color:#fff;font-weight:700;font-size:14px;text-shadow:0 1.5px 0 #164f96}
.itab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.itab i{flex:none;width:17px;height:17px;border-radius:50%;background:#fff;color:#2a7fe0;font-style:normal;font-size:12px;font-weight:700;line-height:17px;text-align:center;font-family:Georgia,serif;text-shadow:none}
.ibody{position:absolute;inset:12px 8px 6px 8px;display:flex;align-items:center;gap:6px}
#infoIcon{width:40px;height:40px}#infoIcon:empty{display:none}
#infoIcon.face{width:44px;height:50px;margin-top:-10px}
#info p{flex:1;margin:0;font-size:12.5px;line-height:1.22;color:#3b4a6a;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#info p b{color:#2a7fe0;font-weight:700}
#info.talk .itab{background:linear-gradient(180deg,#ffa0c8,#e8508f);text-shadow:0 1.5px 0 #8a1f52}
#info.talk .itab i{display:none}
#info.say{animation:say .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes say{from{transform:translateY(6px) scale(.97)}}
.sell{flex:none;background:linear-gradient(180deg,#ffe27a,#f0a018);border-radius:12px;padding:5px 10px 7px;font-size:13px;font-weight:700;color:#fff;box-shadow:0 0 0 2px var(--out),inset 0 -3px 0 rgba(140,70,0,.35);text-shadow:0 1.5px 0 #8a5000;white-space:nowrap}
.hidden{display:none!important}
/* ---------- sheets (habits, shop, level…) ---------- */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(30,40,80,.42);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.sheetCard{width:100%;max-width:520px;background:linear-gradient(180deg,#fffaf0,#fff1dc);border-radius:26px 26px 0 0;padding:20px 14px calc(18px + env(safe-area-inset-bottom));position:relative;animation:up .35s cubic-bezier(.3,1.3,.5,1);max-height:86dvh;overflow:auto;box-shadow:0 0 0 3px var(--out),inset 0 4px 0 #fff}
@keyframes up{from{transform:translateY(100%)}}
.sheetCard h2{margin:0 0 4px;font-size:23px;font-weight:700;color:#fff;display:inline-block;background:linear-gradient(180deg,#5fb6ff,#2a7fe0);border-radius:14px;padding:2px 16px 4px;box-shadow:0 0 0 2.5px var(--out),inset 0 -3px 0 rgba(10,50,120,.3);text-shadow:0 2px 0 #164f96,1px 0 0 #164f96,-1px 0 0 #164f96}
.sheetCard p.sub{margin:6px 0 12px;color:var(--soft);font-size:13px;font-weight:500}
.x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#ff8a7a,#e0402a);color:#fff;font-size:22px;font-weight:700;line-height:30px;box-shadow:0 0 0 2.5px var(--out),inset 0 -3px 0 rgba(120,20,0,.35);text-shadow:0 1.5px 0 #8a2010}
.habit{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:18px;background:linear-gradient(180deg,#fff,#f4f9ff);margin-bottom:10px;box-shadow:0 0 0 2px rgba(74,38,22,.75),inset 0 -3px 0 rgba(90,120,170,.15),0 4px 0 rgba(74,38,22,.18)}
.habit .ic{width:46px;height:46px;flex:none}
.habit div{flex:1;min-width:0}.habit b{display:block;font-size:16px;font-weight:700}.habit small{color:var(--soft);font-size:11.5px}
.habit button,.todoAdd button,.todo button{background:linear-gradient(180deg,#7be36f,#2fae46);color:#fff;font-weight:700;border-radius:12px;padding:7px 12px 9px;font-size:14px;display:flex;gap:3px;align-items:center;box-shadow:0 0 0 2px var(--out),inset 0 -3px 0 rgba(0,90,30,.35);text-shadow:0 1.5px 0 #17702c}
.habit button .ic{width:16px;height:16px}
.habit.done{opacity:.7}.habit.done button{background:linear-gradient(180deg,#e9eef3,#c9d3dc);color:#6a7a8a;text-shadow:none}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0 14px}
.day{background:linear-gradient(180deg,#fff,#eef4fb);border-radius:12px;padding:6px 0;text-align:center;font-size:11px;font-weight:700;box-shadow:0 0 0 2px rgba(74,38,22,.6)}
.day.got{background:linear-gradient(180deg,#e2ffd9,#bff3b0);color:#2f8f46}.day.today{background:linear-gradient(180deg,#ffe27a,#f0a018);color:#fff;transform:scale(1.1);text-shadow:0 1px 0 #8a5000}
.big{display:block;width:100%;background:linear-gradient(180deg,#7be36f,#2fae46);color:#fff;font-weight:700;font-size:19px;border-radius:18px;padding:12px 12px 15px;box-shadow:0 0 0 2.5px var(--out),inset 0 3px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(0,90,30,.35),0 5px 0 rgba(74,38,22,.25);text-shadow:0 2px 0 #17702c}
.shopRow{display:flex;gap:8px}.shopRow button{flex:1;background:linear-gradient(180deg,#fff,#eef4fb);border-radius:18px;padding:10px 4px;box-shadow:0 0 0 2px var(--out),inset 0 -4px 0 rgba(90,120,170,.2);font-weight:700;font-size:16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.shopRow button .ic{width:44px;height:44px}.shopRow small{display:flex;gap:3px;align-items:center;color:#fff;background:linear-gradient(180deg,#ffcf4d,#f08c18);border-radius:9px;padding:1px 8px;font-size:13px;box-shadow:0 0 0 1.5px var(--out);text-shadow:0 1px 0 #8a5000}.shopRow small .ic{width:16px;height:16px}
#todoIn{width:100%;border:2px solid #d8c4b4;border-radius:12px;padding:6px 9px;font:inherit;font-size:13px;margin-top:4px;outline:none;user-select:text;-webkit-user-select:text}
/* toast + fx */
#toast{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.9);background:linear-gradient(180deg,#4a3b6a,#2a2048);color:#fff;padding:9px 18px;border-radius:16px;font-size:15px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:80;white-space:nowrap;box-shadow:0 0 0 2.5px #fff,0 8px 20px rgba(0,0,0,.3)}
#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#fx{position:fixed;inset:0;pointer-events:none;z-index:70}
.fly{position:fixed;width:30px;height:30px;margin:-15px 0 0 -15px}.fly svg,.fly img{width:100%;height:100%}
.spark{position:fixed;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.floatTxt{position:fixed;font-weight:700;font-size:18px;color:#fff;transform:translate(-50%,-50%);text-shadow:0 2px 0 var(--out),2px 0 0 var(--out),-2px 0 0 var(--out),0 -2px 0 var(--out)}
.celebrate{text-align:center}.celebrate .ic{width:96px;height:96px;margin:4px auto 8px;display:block}
.chainRow{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#fff,#f4f9ff);border-radius:14px;padding:6px 10px;margin-bottom:7px;box-shadow:0 0 0 2px rgba(74,38,22,.6)}.chainRow .ic{width:38px;height:38px}.chainRow b{flex:1}.chainRow small{color:var(--soft);font-size:11.5px}.chainRow.locked{opacity:.5;filter:grayscale(.7)}
#finger{position:fixed;z-index:75;width:46px;height:46px;margin:-6px 0 0 -14px;pointer-events:none;display:none;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 30 V10 a5 5 0 0 1 10 0 V26 l14 3 a6 6 0 0 1 5 7 l-3 14 a10 10 0 0 1 -10 8 H30 a10 10 0 0 1 -8 -4 L12 42 a5 5 0 0 1 7 -7Z' fill='white' stroke='%234a2616' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
#banner{position:fixed;left:50%;top:22%;z-index:85;transform:translate(-50%,-30px) scale(.8);opacity:0;pointer-events:none;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#fffaf0,#ffe9b8);border-radius:22px;padding:10px 18px 10px 12px;box-shadow:0 0 0 3px var(--out),inset 0 -4px 0 rgba(190,120,40,.3),0 12px 30px rgba(40,20,10,.3);transition:.45s cubic-bezier(.3,1.5,.5,1);white-space:nowrap}
#banner.show{opacity:1;transform:translate(-50%,0) scale(1)}#banner .ic{width:50px;height:50px}#banner b{display:block;font-size:19px}#banner small{color:var(--soft);font-size:12px}
.nextArea{background:linear-gradient(180deg,#fff,#f4f9ff);border-radius:18px;padding:12px;margin:4px 0 14px;box-shadow:0 0 0 2px rgba(74,38,22,.6)}.nextArea b{display:block;font-size:20px;margin:2px 0}.nextArea small{display:block;color:var(--soft);font-size:12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}.stats div{background:linear-gradient(180deg,#fff,#f4f9ff);border-radius:14px;padding:8px 4px;text-align:center;box-shadow:0 0 0 2px rgba(74,38,22,.6)}.stats b{display:block;font-size:18px}.stats small{font-size:10px;color:var(--soft)}
/* habits detail */
.habit.v{align-items:flex-start}.habit.v>button{margin-top:6px;white-space:nowrap}
.habit .how{display:block;font-size:10.5px;color:#6a7a9a;margin-top:3px;line-height:1.25;background:#eef4fb;border-radius:8px;padding:3px 6px}
.habit .hs{display:block;font-weight:700;color:#d07a00;font-size:12px}
.habit .manual{display:inline-block;margin-top:4px;font-size:10.5px;color:var(--soft);text-decoration:underline;cursor:pointer}
.back{font-weight:700;color:#2a7fe0;font-size:14px;margin:-6px 0 8px;padding:2px 0;display:block}
.vbox{background:linear-gradient(180deg,#fff,#f4f9ff);border-radius:18px;padding:12px;margin-bottom:12px;box-shadow:0 0 0 2px rgba(74,38,22,.6),inset 0 -3px 0 rgba(90,120,170,.15);text-align:center}
.vbox canvas{width:100%;max-width:320px;aspect-ratio:4/3;border-radius:14px;background:#e6eef8;box-shadow:0 0 0 2px rgba(74,38,22,.5)}
.vmsg{font-size:13.5px;margin:8px 0;padding:8px 10px;border-radius:12px;background:#eef4fb;text-align:left;font-weight:500}.vmsg.ok{background:#dcf8d4;color:#22803a;box-shadow:0 0 0 1.5px #7bd06a}.vmsg.bad{background:#ffe2de;color:#c0301d;box-shadow:0 0 0 1.5px #f08a7a}.vmsg:empty{display:none}
label.big{text-align:center;cursor:pointer}label.big.off,.big.off{opacity:.45;pointer-events:none}
.walk{display:grid;grid-template-columns:1fr 1fr;gap:8px}.walk .vmsg{grid-column:1/-1}.wstat{background:linear-gradient(180deg,#5fb6ff,#2a7fe0);color:#fff;border-radius:14px;padding:8px 4px;box-shadow:0 0 0 2px var(--out),inset 0 -3px 0 rgba(10,50,120,.3)}.wstat b{display:block;font-size:22px;text-shadow:0 2px 0 #164f96}.wstat small{font-size:11px;opacity:.9}
.todoAdd{display:flex;gap:6px;margin:4px 0}.todoAdd input{flex:1;border:2px solid #d8c4b4;border-radius:12px;padding:9px 10px;font:inherit;font-size:14px;outline:none;user-select:text;-webkit-user-select:text;background:#fff}
.todos{margin-top:8px}.todo{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fff,#f4f9ff);border-radius:12px;padding:8px 10px;margin-bottom:7px;font-size:14px;box-shadow:0 0 0 2px rgba(74,38,22,.55)}.todo span{flex:1}.todo.done span{text-decoration:line-through;color:var(--soft)}.todo em{font-style:normal;font-size:12px;font-weight:700;color:#2fae46}.todo em.wait{color:var(--soft);font-weight:500}.todo button{padding:4px 10px 6px;font-size:13px}
.sess .ring{width:156px;height:156px;margin:6px auto;border-radius:50%;display:grid;place-content:center;background:radial-gradient(circle,#fff 57%,var(--out) 58% 59.5%,transparent 60%),conic-gradient(#ff5c9a,#ffb21e,#ffe27a,#43c46a,#3d9cf0,#a38bff,#ff5c9a);box-shadow:0 0 0 2.5px var(--out),0 6px 0 rgba(74,38,22,.2)}.sess .ring b{font-size:36px}.sess .ring small{font-size:12px;color:var(--soft);min-height:15px}
.tapnow{display:block;margin:8px auto 0;background:linear-gradient(180deg,#ffe27a,#f0a018);color:#fff;font-weight:700;font-size:21px;border-radius:20px;padding:12px 26px 15px;box-shadow:0 0 0 2.5px var(--out),inset 0 -5px 0 rgba(140,70,0,.35);text-shadow:0 2px 0 #8a5000;animation:go2 .6s infinite}.tapnow em{font-style:normal;font-size:13px;opacity:.9}
.journal p{background:#fff;border-radius:12px;padding:8px 10px;font-size:13px;font-style:italic;box-shadow:0 0 0 1.5px rgba(74,38,22,.35)}
/* =================== v5: Home / Board screens =================== */
#homeUI,#deco{display:none}
body[data-screen=home] #orders,body[data-screen=home] #boardWrap,body[data-screen=home] #bar{display:none}
body[data-screen=home] #roomWrap{flex:1;height:auto}
body[data-screen=home] #homeUI{display:flex}
body[data-screen=home] #nextTxt{display:none}
body[data-screen=board] #roomWrap{height:112px}
body[data-screen=board] #room,body[data-screen=board] #areaPill,body[data-screen=board] #nextTxt{display:none}
body[data-screen=board] #orders{margin-top:-50px}
body[data-screen=board] .sky .hill{bottom:-185px}
#app>section,#app>footer{animation:scrIn .35s ease-out}
@keyframes scrIn{from{opacity:.0;transform:translateY(8px)}}
#homeUI{position:absolute;left:8px;right:8px;bottom:10px;z-index:6;align-items:flex-end;gap:8px}
.hbtn{flex:none;width:74px;height:78px;border-radius:22px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;background:linear-gradient(180deg,#fff,#dff0ff);box-shadow:0 0 0 3px var(--out),inset 0 -5px 0 rgba(80,130,190,.25),0 6px 0 2px rgba(74,38,22,.3)}
.hbtn .ic{position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:66px;height:66px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.2))}
.hbtn .fl{font-weight:700;font-size:15px;color:#fff;text-shadow:0 2px 0 var(--out),1.5px 0 0 var(--out),-1.5px 0 0 var(--out),0 -1.5px 0 var(--out)}
#playBtn{width:96px;height:92px;background:linear-gradient(180deg,#8cf07a,#2fb04a);box-shadow:0 0 0 3px var(--out),inset 0 -6px 0 rgba(0,90,30,.35),inset 0 4px 0 rgba(255,255,255,.45),0 6px 0 2px rgba(74,38,22,.3)}
#playBtn .ic{width:80px;height:80px;top:-26px}#playBtn .fl{font-size:21px}
#playBtn.hint{animation:go2 1.2s ease-in-out infinite}
@keyframes go2{50%{transform:scale(1.06)}}
#taskCard{flex:1;min-width:0;position:relative;background:linear-gradient(180deg,#fffdf6,#ffeccc);border-radius:20px;padding:8px 10px 10px;box-shadow:0 0 0 3px var(--out),inset 0 -4px 0 rgba(190,120,40,.25),0 6px 0 2px rgba(74,38,22,.28);display:flex;flex-direction:column;gap:1px;min-height:92px}
#taskCard small{font-size:11px;font-weight:700;color:#c0508a;text-transform:uppercase;letter-spacing:.04em}
#taskCard{padding-right:78px!important}#taskCard small,#taskCard b,#taskSub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#taskCard b{font-size:16px;line-height:1.2}
#taskSub{font-size:12px;color:var(--soft);display:flex;align-items:center;gap:2px}#taskSub .ic{width:15px;height:15px}
#restoreBtn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:64px;height:64px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#e3e3e3,#b9b9b9);box-shadow:0 0 0 2.5px var(--out),inset 0 -4px 0 rgba(0,0,0,.18);color:#fff;filter:saturate(.3)}
#restoreBtn .ic{width:28px;height:28px;margin-bottom:-4px}#restoreBtn b{font-size:17px;line-height:1;text-shadow:0 1.5px 0 var(--out)}#restoreBtn small{font-size:11px;color:#fff;text-transform:none;letter-spacing:0;text-shadow:0 1.5px 0 var(--out)}
#restoreBtn.ready{filter:none;background:linear-gradient(180deg,#ffb2d6,#ff5c9a);box-shadow:0 0 0 2.5px var(--out),inset 0 -4px 0 rgba(150,20,70,.35),0 0 0 7px rgba(255,120,180,.35);animation:go3 1s ease-in-out infinite}
@keyframes go3{50%{transform:translateY(-50%) scale(1.08)}}
#homeBtn.ready{animation:go2 1s ease-in-out infinite}#homeBtn.ready:after{content:"!";position:absolute;right:-4px;top:-6px;width:22px;height:22px;border-radius:50%;background:#ff4f7f;color:#fff;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--out)}
body.decorating #homeUI,body.decorating .hud,body.decorating #areaPill{opacity:0;pointer-events:none;transition:opacity .3s}
/* decorate picker */
#deco{position:absolute;left:8px;right:8px;bottom:10px;z-index:8;flex-direction:column;gap:8px;background:linear-gradient(180deg,#fffdf6,#fff0d6);border-radius:24px;padding:10px 10px 12px;box-shadow:0 0 0 3px var(--out),0 8px 0 2px rgba(74,38,22,.3),0 18px 40px rgba(74,38,22,.3);animation:up .4s cubic-bezier(.3,1.4,.5,1)}
body[data-screen=home] #deco:not(.hidden){display:flex}
@keyframes up{from{transform:translateY(120%)}}
#deco .dh{text-align:center;display:flex;flex-direction:column}#deco .dh small{font-size:11px;font-weight:700;color:#c0508a;text-transform:uppercase;letter-spacing:.05em}#deco .dh b{font-size:19px}
.dopts{display:flex;gap:8px;margin-bottom:8px}
.dopt{flex:1;position:relative;border-radius:16px;background:#fff;padding:10px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 0 0 2.5px rgba(74,38,22,.35),0 4px 0 rgba(74,38,22,.15);transition:transform .15s}
.dopt.on{box-shadow:0 0 0 3px var(--out),0 0 0 7px #ffc63d,0 4px 0 rgba(74,38,22,.2);transform:translateY(-3px)}
.dopt .sw{display:flex;gap:2px;margin-bottom:3px}.dopt .sw i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15),0 0 0 1.5px rgba(74,38,22,.4)}
.dopt b{font-size:15px}.dopt small{font-size:10.5px;color:var(--soft);line-height:1.1;text-align:center}
.dopt .paw{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;font-style:normal;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(180deg,#ffa95a,#f0702a);padding:1px 7px;border-radius:9px;box-shadow:0 0 0 1.5px var(--out)}
#deco .big{margin:0}
/* story order ribbon */
.order .otitle{position:absolute;left:4px;right:4px;bottom:58px;z-index:3;text-align:center;font-size:10px;font-weight:700;color:#fff;background:linear-gradient(180deg,#ffcf4d,#f0a018);border-radius:8px;padding:1px 4px;box-shadow:0 0 0 1.5px var(--out);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order.story .card{background:linear-gradient(180deg,#fffbe8,#ffeeb8)}
/* =================== cutscenes =================== */
#cut{position:absolute;inset:0;z-index:40;overflow:hidden;opacity:0;transition:opacity .35s}
#cut.hidden{display:none}#cut.open{opacity:1}
#cut .cbg{position:absolute;inset:0;background:#1a1530 center/cover no-repeat;transition:background-image .5s}
#cut[data-bg=room] .cbg{background:none}
#cut .cshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,40,.15),rgba(20,10,40,0) 30%,rgba(20,10,40,.15) 55%,rgba(20,10,40,.55))}
#cut[data-bg=room] .cshade{background:linear-gradient(180deg,rgba(40,20,60,.35),rgba(40,20,60,.05) 35%,rgba(40,20,60,.3) 60%,rgba(40,20,60,.6))}
.cport{position:absolute;bottom:128px;width:96%;max-width:470px;aspect-ratio:1;transition:transform .45s cubic-bezier(.3,1.25,.5,1),opacity .35s,filter .3s;opacity:0;pointer-events:none}
.cport img{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 18px rgba(20,10,40,.35))}
.cport.L{left:-26%;transform:translateX(-60%)}.cport.R{right:-26%;transform:translateX(60%)}
.cport.on{opacity:1;transform:none;filter:brightness(.62) saturate(.8)}
.cport.on.talk{filter:none;z-index:2}
.cport.L.on:not(.talk){transform:translateX(-8%) scale(.92)}.cport.R.on:not(.talk){transform:translateX(8%) scale(.92)}
.cport.pop.talk img{animation:pbob .45s ease-out}
@keyframes pbob{30%{transform:translateY(-10px) scale(1.02)}}
.cbox{position:absolute;left:12px;right:12px;bottom:28px;min-height:118px;z-index:5;background:linear-gradient(180deg,#fffdf8,#fff3e0);border-radius:22px;padding:22px 18px 16px;box-shadow:0 0 0 3px var(--out),0 7px 0 2px rgba(30,15,40,.35),0 20px 40px rgba(20,10,40,.35);opacity:0;transform:translateY(30px);transition:opacity .25s,transform .3s cubic-bezier(.3,1.3,.5,1)}
.cbox.show{opacity:1;transform:none}
.cname{position:absolute;top:-17px;left:18px;font-weight:700;font-size:17px;color:#fff;background:var(--nc,#f0a020);padding:3px 16px 4px;border-radius:14px;box-shadow:0 0 0 2.5px var(--out),inset 0 -3px 0 rgba(0,0,0,.18);text-shadow:0 1.5px 0 rgba(0,0,0,.3)}
.cbox[data-side=R] .cname{left:auto;right:18px}
.ctext{font-size:18px;line-height:1.35;font-weight:500;color:var(--ink);min-height:48px}.ctext.it{font-style:italic;color:#7a5a48}
.cnext{position:absolute;right:16px;bottom:8px;font-style:normal;font-size:12px;color:#c08a5a;animation:nb 1s ease-in-out infinite}
@keyframes nb{50%{transform:translateY(3px)}}
.cnarr{position:absolute;left:22px;right:22px;top:16%;z-index:6;text-align:center;font-size:16.5px;line-height:1.45;font-style:italic;color:#fff;background:rgba(30,18,50,.72);border-radius:18px;padding:14px 16px;box-shadow:0 0 0 2px rgba(255,255,255,.25);backdrop-filter:blur(4px);opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .35s}
.cnarr.show{opacity:1;transform:none}
.ctitle{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;pointer-events:none;transition:opacity .6s;background:radial-gradient(ellipse at 50% 45%,rgba(255,220,160,.35),rgba(30,15,50,.55) 70%)}
.ctitle.show{opacity:1}
.ctitle b{font-size:46px;font-weight:700;color:#fff;letter-spacing:.02em;text-shadow:0 4px 0 #b4406e,0 0 30px rgba(255,180,120,.8),3px 0 0 #b4406e,-3px 0 0 #b4406e;transform:scale(.8);transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
.ctitle.show b{transform:none}
.ctitle small{font-size:20px;font-weight:600;color:#ffe6b0;text-shadow:0 2px 0 rgba(0,0,0,.4);max-width:80%;text-align:center}
.ctitle.small b{font-size:34px}.ctitle.small small{font-size:16px}
.cletter{position:absolute;inset:0;z-index:7;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s;background:rgba(20,10,40,.45)}
.cletter.show{opacity:1}
.cletter .paper{position:relative;width:78%;max-width:380px;padding:34px 26px 40px;background:linear-gradient(180deg,#fffaf0,#f6e8cc);border-radius:6px;box-shadow:0 20px 40px rgba(0,0,0,.4),inset 0 0 40px rgba(180,140,80,.25);transform:rotate(-3deg) scale(.9);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.cletter.show .paper{transform:rotate(-2deg)}
.cletter p{margin:0;font-family:Caveat,cursive;font-size:30px;line-height:1.25;color:#2a3a7a}.cletter .sig{display:block;text-align:right;margin-top:6px}
.cletter .pm{position:absolute;right:-12px;top:-16px;transform:rotate(12deg);font-size:12px;font-weight:700;color:#c0283e;border:3px solid #c0283e;border-radius:50%;width:84px;height:84px;display:grid;place-items:center;text-align:center;line-height:1.1;background:rgba(255,250,240,.6)}
.cchoice{position:absolute;left:14px;right:14px;bottom:28px;z-index:8;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateY(20px);transition:opacity .25s,transform .3s;pointer-events:none}
.cchoice.show{opacity:1;transform:none;pointer-events:auto}
.cchoice p{margin:0 0 2px;text-align:center;font-weight:700;color:#fff;font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.cchoice button{position:relative;text-align:left;font-size:16.5px;font-weight:600;padding:12px 16px;border-radius:18px;background:linear-gradient(180deg,#ffffff,#eef6ff);box-shadow:0 0 0 3px var(--out),inset 0 -4px 0 rgba(90,140,200,.22),0 5px 0 1px rgba(30,15,40,.35);display:flex;align-items:center;justify-content:space-between;gap:8px;transition:transform .15s}
.cchoice button em{flex:none;font-style:normal;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(180deg,#b08bff,#7a52e8);border-radius:9px;padding:2px 8px;box-shadow:0 0 0 1.5px var(--out)}
.cchoice button:active,.cchoice button.picked{transform:scale(.97);background:linear-gradient(180deg,#fff4c4,#ffd96a)}
.cskip{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;z-index:9;font-size:13px;font-weight:700;color:#fff;background:rgba(30,18,50,.55);padding:5px 12px;border-radius:12px;box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
.cclue{position:absolute;left:50%;top:34%;z-index:8;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:linear-gradient(180deg,#fff7d8,#ffe08a);border-radius:16px;padding:8px 18px;text-align:center;box-shadow:0 0 0 3px var(--out),0 6px 0 2px rgba(30,15,40,.3);display:flex;flex-direction:column;white-space:nowrap}
.cclue small{font-size:11px;font-weight:700;color:#a0602a;text-transform:uppercase}.cclue b{font-size:17px}
.cclue.show{animation:clue 3.2s ease forwards}
@keyframes clue{0%{opacity:0;transform:translate(-50%,-20px) scale(.8)}12%{opacity:1;transform:translate(-50%,0) scale(1.05)}20%{transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0}}
/* mini (in-world) bubble */
#cut.mini .cbg,#cut.mini .cshade{display:none}
#cut.mini .cport{width:42%;bottom:118px}
#cut.mini .cport.L{left:-4%}#cut.mini .cport.R{right:-4%}
#cut.mini .cbox{bottom:22px;min-height:96px}

body.cutting .hud,body.cutting #areaPill,body.cutting #homeUI{opacity:0;pointer-events:none;transition:opacity .3s}
.order .who img[src$='.webp']{width:128%;height:128%;margin:-22% 0 0 -14%;max-width:none}
/* v6: task names wrap to two lines instead of truncating */
#taskCard b#taskName,#taskCard #taskName{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.15;word-break:normal;overflow-wrap:anywhere}
#taskCard{padding-right:76px!important}
#taskSub{white-space:nowrap}