/* PeanutStudy interface. Same vocabulary as the village's HUD: ink outlines, cream paper, wood, soft drop shadows. */
:root{--paper:#fffaf3;--butter:#f9cf73;--butter-dark:#eebc55;--leaf:#b5dcc0;--leaf-dark:#8fc29f;--rose:#f2a698;--sky:#b3d9ea;--lilac:#d9b8ea;--shadow:0 .2rem 0 rgba(120,70,40,.28);--ease:cubic-bezier(.2,1.25,.4,1);--pop:cubic-bezier(.3,1.8,.5,1);--dock:5.4rem}
#app{position:fixed;inset:0;pointer-events:none;z-index:10}
#app>*{pointer-events:auto}
.hide{display:none!important}
svg.i{display:block;width:100%;height:100%;overflow:visible}
img.face{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 30%;-webkit-user-drag:none;user-select:none}

/* ---------- tags over animals ---------- */
#tags{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
/* labels fade out over this band as they pass under the top bar (engine/actors.js tagFade); a mask on #tags did it before,
   but iOS redraws a masked layer offscreen on every frame anything in it moves */
#tags>.tagband{position:absolute;left:0;top:calc(var(--sat,0px) + 3.6rem);width:0;height:2.8rem;visibility:hidden}
#tags>.fading{transition:none}
.tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.25rem;padding:.12rem .45rem .14rem;border-radius:.7rem;background:rgba(255,246,236,.92);border:.11rem solid rgba(138,93,85,.4);font-size:.82rem;line-height:1.1;white-space:nowrap;opacity:0;will-change:transform;box-shadow:0 .12rem 0 rgba(120,70,40,.2)}
/* the fade is declared only while a tag fades in or out (.tr, engine/actors.js tagShow): a declared transition is checked on every
   style change, and the tags move every frame */
.tag.tr,.roomname.tr{transition:opacity .25s}
.tag.on{opacity:var(--tf,1)}
.tag b{font-weight:400}
.tag i{font-style:normal;color:#a0756b}
.tag.you{background:var(--butter);border:.13rem solid var(--ink);font-size:.95rem;z-index:2}
.tag.you i{color:var(--ink)}
.tag.peer{background:#dff1c8;border-color:var(--ink)}

.tag::after{content:"";position:absolute;left:50%;bottom:-.32rem;width:.42rem;height:.42rem;margin-left:-.21rem;background:inherit;border-right:inherit;border-bottom:inherit;transform:rotate(45deg)}
.tag.brk{background:#cfe6f5}

/* ---------- top HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;transition:opacity .35s}
#hud>*{pointer-events:auto}
#hud.away{opacity:0;pointer-events:none}
#hud.away>*{pointer-events:none}
#me{position:fixed;left:calc(.6rem + var(--sal));top:calc(.5rem + var(--sat));width:3.15rem;height:3.15rem;padding:0;background:var(--cream);border:var(--lw) solid var(--ink);border-radius:.8rem;overflow:visible;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s var(--pop)}
#me:active{transform:scale(.92)}
#me .pic{position:absolute;inset:0;border-radius:.62rem;overflow:hidden;background:#a8c98d}
#me .pic img,#me .pic svg{width:100%;height:100%;object-fit:cover;display:block}
#me .lv{position:absolute;right:-.45rem;bottom:-.4rem;min-width:1.45rem;height:1.45rem;padding:0 .25rem;border-radius:.75rem;background:var(--butter);border:.13rem solid var(--ink);font-size:.8rem;line-height:1.2rem;text-align:center}
#top{position:fixed;top:calc(.5rem + var(--sat));left:calc(4.2rem + var(--sal));right:calc(.6rem + var(--sar));display:flex;gap:.3rem;justify-content:flex-end}
.pill{position:relative;height:2.1rem;display:flex;align-items:center;gap:.22rem;padding:0 .45rem 0 .28rem;background:rgba(255,246,236,.9);border:.11rem solid rgba(138,93,85,.32);border-radius:.8rem;font-size:1rem;line-height:1;white-space:nowrap;cursor:pointer;min-width:0}
.pill .ic{width:1.35rem;height:1.35rem;flex:none}
.pill .plus{width:1.05rem;height:1.05rem;margin-left:.1rem;border-radius:50%;background:var(--leaf);border:.1rem solid var(--ink);display:grid;place-items:center;font-size:.8rem;line-height:1;color:var(--ink)}
.pill.bump{animation:bump .22s var(--pop)}
@keyframes bump{40%{transform:scale(1.14)}}
.pill.streak.off .ic{filter:grayscale(1) opacity(.55)}
#side{position:fixed;right:calc(.5rem + var(--sar));top:calc(3.1rem + var(--sat));display:flex;flex-direction:column;gap:.25rem}
.mini{position:relative;width:3.1rem;height:3.1rem;padding:.22rem;border:0;background:none;cursor:pointer;transition:transform .15s var(--pop)}
.mini:active{transform:scale(.86)}
.mini svg{filter:drop-shadow(0 .1rem 0 rgba(120,70,40,.28))}
.mini.wig svg{animation:wig 1.1s ease-in-out infinite}
@keyframes wig{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-11deg)}84%{transform:rotate(10deg)}92%{transform:rotate(-5deg)}}
.badge{position:absolute;right:-.05rem;top:-.05rem;min-width:1.15rem;height:1.15rem;padding:0 .2rem;border-radius:.6rem;background:#ef6f62;color:#fff;border:.1rem solid var(--ink);font-size:.72rem;line-height:.95rem;text-align:center;pointer-events:none}
.badge:empty{display:none}
.mini .cap{position:absolute;left:50%;bottom:-.3rem;transform:translateX(-50%);font-size:.66rem;color:#fff6ec;-webkit-text-stroke:.16rem var(--ink);paint-order:stroke fill;white-space:nowrap;pointer-events:none}
#placeChip{position:fixed;left:calc(.6rem + var(--sal));top:calc(4.2rem + var(--sat));display:flex;align-items:center;gap:.5rem;padding:.3rem .4rem .3rem .3rem;border-radius:1.05rem;background:rgba(255,246,236,.9);border:.11rem solid rgba(138,93,85,.32);font-size:.92rem;line-height:1.1;cursor:pointer;max-width:58vw}
#placeChip .pwin{position:relative;flex:none;width:2.55rem;height:2.55rem;border-radius:.75rem;border:.12rem solid var(--ink);overflow:hidden;background:linear-gradient(#9fd2ec,#dcf0f8);display:grid;place-items:end center}
#placeChip .pwin[data-sky=dawn]{background:linear-gradient(#e5a7b6,#f9dcbc)}#placeChip .pwin[data-sky=dusk]{background:linear-gradient(#e59a6c,#f7d59c)}#placeChip .pwin[data-sky=night]{background:linear-gradient(#2c3356,#575c8c)}
#placeChip .pwin::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-.85rem;height:1.4rem;border-radius:50%;background:#b8d49c;border-top:.12rem solid var(--ink)}
#placeChip .pwin>.face{position:relative;z-index:1;width:2.3rem;height:2.3rem;margin-bottom:-.55rem;object-fit:contain;animation:heroBob 3.2s ease-in-out infinite}
#placeChip .pwin.pic::after{display:none}#placeChip .pwin.pic>*{position:absolute;inset:0;width:100%;height:100%}
#placeChip .pmid{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.12rem;text-align:left}
#placeChip .prow{display:flex;align-items:center;gap:.35rem}
#placeChip [data-name]{max-width:100%;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
b.dday{font-weight:400;min-width:3.4rem;padding:.12rem .4rem;border-radius:.55rem;background:#fdebc3;border:.1rem solid rgba(138,93,85,.32);text-align:center;font-size:.9rem}
#placeChip .dd{flex:none;margin-left:.25rem;display:flex;flex-direction:column;align-items:stretch;width:2.45rem;border-radius:.45rem;overflow:hidden;background:var(--paper);border:.1rem solid var(--ink);text-align:center;color:var(--ink)}
#placeChip .dd i{display:block;background:#ef8a7e;color:#fff6ec;font-style:normal;font-size:.48rem;line-height:.72rem;padding:0 .15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:.1rem solid var(--ink)}
#placeChip .dd b{display:block;font-weight:400;font-size:.76rem;line-height:1.05rem}
#placeChip small{display:flex;align-items:center;color:#a0756b;font-size:.72rem;white-space:nowrap}
#placeChip #cozy{display:none}
#placeChip .fnd{display:inline-flex;align-items:center;gap:.12rem;margin-left:.45rem}#placeChip .fnd:empty{display:none}#placeChip .fnd svg{width:.8rem;height:.8rem}
/* the same small arrow the phone menu widgets carry: the chip opens who is here */
#placeChip::after{content:"";flex:none;align-self:center;width:.8rem;height:.8rem;margin:0 .05rem 0 -.1rem;background:var(--ink);opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 12l8 8-8 8' fill='none' stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 12l8 8-8 8' fill='none' stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#placeChip .dot{position:relative;display:inline-block;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#7fc35a;margin-right:.2rem}
/* the live ring pulses with transform and opacity only, so it never repaints */
#placeChip .dot::after{content:"";position:absolute;inset:-.12rem;border-radius:50%;border:.12rem solid rgba(127,195,90,.3);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{transform:scale(1.5);opacity:0}}
/* cozy meter: how alive this place is right now */
#cozy{display:flex;gap:.08rem;flex:none}
#cozy i{display:block;width:.68rem;height:.62rem}
#cozy i svg{display:block;width:100%;height:100%;overflow:visible}
#cozy i path{fill:rgba(138,93,85,.16);transition:fill .4s}
#cozy i.on path{fill:#ef8a7e;stroke:var(--ink);stroke-width:1.6}
#cozy.up i.on{animation:cozyUp .6s var(--pop)}
#cozy.full i.on{animation:cozyGlow 1.6s ease-in-out infinite alternate}
#cozy.full i:nth-child(2){animation-delay:.15s}#cozy.full i:nth-child(3){animation-delay:.3s}#cozy.full i:nth-child(4){animation-delay:.45s}#cozy.full i:nth-child(5){animation-delay:.6s}
@keyframes cozyUp{40%{transform:scale(1.45) translateY(-.08rem)}}
@keyframes cozyGlow{to{transform:scale(1.15);filter:drop-shadow(0 0 .2rem rgba(239,138,126,.8))}}
@media (prefers-reduced-motion:reduce){#cozy.up i.on,#cozy.full i.on{animation:none}}

/* ---------- no dock: a Town card bottom-left, Focus with its arc of plates in the right thumb corner ---------- */
#dock{position:fixed;left:0;right:0;bottom:0;height:0;pointer-events:none;transition:visibility 0s}
#dock>*{pointer-events:auto}
#dock.down{visibility:hidden;transition:visibility 0s .45s}
.dk{position:relative;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);font:inherit}
.dk .badge{right:-.2rem;top:-.2rem}
.townw{position:fixed;left:calc(1.1rem + var(--sal));bottom:calc(3rem + var(--sab));transform:rotate(-6deg);transition:transform .45s var(--ease)}
#dkTown{display:block;width:4.9rem}
#dkTown .tc{position:relative;display:grid;place-items:center;width:4.9rem;height:5rem;border:var(--lw) solid var(--ink);border-radius:.8rem .9rem .7rem .85rem;background:var(--cream);box-shadow:var(--shadow)}
#dkTown .tc .ic{width:3rem;height:3rem}
#dkTown .tpin{position:absolute;left:50%;top:-.6rem;margin-left:-.5rem;width:1rem;height:1rem;border-radius:50%;background:var(--butter);border:.13rem solid var(--ink);z-index:2}
.plq{position:absolute;left:50%;bottom:-1.3rem;transform:translateX(-50%);padding:.1rem .8rem .2rem;border-radius:.65rem;background:var(--butter);border:.14rem solid var(--ink);font-size:1.12rem;line-height:1.15;white-space:nowrap;box-shadow:var(--shadow);z-index:2;pointer-events:none}
.plq::after{content:"";position:absolute;left:.45rem;right:.45rem;top:-.36rem;height:.62rem;background:radial-gradient(circle at .31rem .31rem,var(--cream) .14rem,var(--ink) .17rem,var(--ink) .26rem,transparent .29rem) left/.62rem .62rem no-repeat,radial-gradient(circle at .31rem .31rem,var(--cream) .14rem,var(--ink) .17rem,var(--ink) .26rem,transparent .29rem) right/.62rem .62rem no-repeat}
#dkTown .plq{font-size:1rem;bottom:-1.15rem}
#corner{position:fixed;right:calc(1rem + var(--sar));bottom:calc(2.75rem + var(--sab));width:6.5rem;height:6.5rem;transition:transform .45s var(--ease)}
#focusBtn{position:absolute;inset:0;display:block}
#focusBtn .disc{position:absolute;inset:0;border-radius:50%;background:var(--butter);border:var(--lw) solid var(--ink);box-shadow:var(--shadow),inset 0 -.42rem 0 var(--butter-dark);display:grid;place-items:center}
#focusBtn .disc svg{width:3.9rem;height:3.9rem}
#focusBtn.breathe .disc{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.06) rotate(-3deg)}}
.plate{position:absolute;width:3.4rem;height:3.4rem;left:calc(3.25rem + cos(var(--a)) * 6.1rem - 1.7rem);top:calc(3.25rem - sin(var(--a)) * 6.1rem - 1.7rem);border-radius:50%;background:var(--cream);border:var(--lw) solid var(--ink);box-shadow:var(--shadow);display:grid;place-items:center}
.plate .ic{width:2.15rem;height:2.15rem}
/* little honey flicks: Focus nudges you before your first session, Town when a place is buzzing */
.tick{position:absolute;width:1.9rem;height:1.9rem;fill:none;stroke:var(--butter-dark);stroke-width:3;stroke-linecap:round;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--pop)}
.townw .tick{right:-1.4rem;top:-1.1rem}
#corner .tick{right:-.7rem;top:-1.3rem}
.townw.buzz .tick,#corner.nudge .tick{opacity:1;transform:none}
#dock.down .townw{transform:translate(-9rem,7rem) rotate(-24deg)}
#dock.down #corner{transform:translate(5rem,13rem)}
/* labels show on a long press, and for your first few launches */
.dk .cap{position:absolute;left:50%;bottom:-1rem;transform:translateX(-50%);font-size:.72rem;color:#fff6ec;-webkit-text-stroke:.16rem var(--ink);paint-order:stroke fill;white-space:nowrap;pointer-events:none}
.mini .cap,.dk .cap{opacity:0;transition:opacity .2s}
html.labels .mini .cap,html.labels .dk .cap,.showcap .cap{opacity:1}
.showcap .cap{z-index:3;padding:.08rem .5rem .14rem;border-radius:.55rem;background:var(--butter);border:.12rem solid var(--ink);color:var(--ink);-webkit-text-stroke:0;font-size:.8rem}

/* ---------- buttons ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:3rem;padding:.35rem 1.1rem;border:var(--lw) solid var(--ink);border-radius:1rem;background:var(--butter);color:var(--ink);font:inherit;font-size:1.15rem;line-height:1.1;cursor:pointer;box-shadow:0 .24rem 0 var(--ink);transition:transform .1s,box-shadow .1s,filter .2s;white-space:nowrap}
.btn:active{transform:translateY(.18rem);box-shadow:0 .06rem 0 var(--ink)}
.btn.wide{width:100%}
.btn.leaf{background:var(--leaf)}
.btn.cream{background:var(--paper)}
.btn.rose{background:#f2a698}
.btn.sky{background:#bfe2f4}
/* Sign in with Apple and Google (js/screens/account.js): the providers' own colours, the app's button shape */
.btn.apple{background:#000;color:#fff}
.btn.google{background:#fff;color:#1f1f1f}
/* the "or" between the provider buttons and the email code (the onboarding sign-in step) */
.orline{display:flex;align-items:center;gap:.6rem;color:#a0756b;font-size:.92rem}
.orline::before,.orline::after{content:'';flex:1;border-top:var(--lw) solid currentColor;opacity:.35}
/* the required sign-in sheet (js/screens/account.js requireSignIn): their passport with a lock on it, the perks, the providers' buttons */
/* the welcome picnic's packing list: a ruled note taped to the sheet, one row per thing to bring */
.picnicsheet .pbasket{width:4.6rem;height:4.6rem;margin:-.2rem auto .2rem;padding:.6rem;border-radius:50%;background:var(--butter);border:var(--lw) solid var(--ink);box-shadow:var(--shadow);transform:rotate(-6deg)}
.picnicsheet .pbasket svg{width:100%;height:100%;display:block}
.picnicsheet h2{margin:.15rem 0 .1rem}
.picnicsheet .pnote{position:relative;margin:.9rem .3rem .2rem;padding:1rem .8rem .6rem 1.6rem;border-radius:.9rem;text-align:left;background:linear-gradient(90deg,transparent 1.05rem,#f2b8a8 1.05rem 1.17rem,transparent 1.17rem),repeating-linear-gradient(#fffaf3 0 2.4rem,#f0e2c8 2.4rem 2.48rem);background-position:0 0,0 1rem;border:.16rem solid var(--ink);box-shadow:var(--shadow);transform:rotate(-1deg)}
.picnicsheet .pit .grow{flex:1;min-width:0}
.picnicsheet .ptape{position:absolute;left:50%;top:-.75rem;width:5.2rem;height:1.4rem;margin-left:-2.6rem;background:rgba(255,207,77,.75);border:.1rem solid rgba(138,93,85,.25);transform:rotate(3deg)}
.picnicsheet .pit{display:flex;align-items:center;gap:.6rem;height:2.48rem;animation:pitIn .4s var(--ease) both;animation-delay:var(--d)}
.picnicsheet .pic{flex:none;width:2rem;height:2rem;padding:.3rem;border-radius:50%;border:.12rem solid var(--ink)}
.picnicsheet .pic svg{width:100%;height:100%;display:block}
.picnicsheet .pbox{flex:none;width:1.25rem;height:1.25rem;border-radius:.35rem;border:.14rem dashed #b99187}
@keyframes pitIn{from{opacity:0;transform:translateX(-.5rem)}}
@media (prefers-reduced-motion:reduce){.picnicsheet .pit{animation:none}}
.signsheet .signpp{position:relative;margin:0 .2rem .9rem;transform:rotate(-1.2deg)}
.signsheet .signlock{position:absolute;right:-.35rem;bottom:-.55rem;width:3rem;height:3rem;padding:.55rem;border-radius:50%;background:var(--leaf);border:var(--lw) solid var(--ink);box-shadow:0 .18rem 0 var(--ink);color:var(--ink);transition:transform .35s var(--pop)}
.signsheet .signlock .i{width:100%;height:100%}
.signsheet .signpp.saved .signlock{transform:scale(1.18) rotate(-8deg);background:var(--butter)}
.signsheet h2{margin:.1rem 0 .55rem}
.perks.light{margin:0 0 .4rem}
.perks.light li{padding:.5rem 0;border-bottom:1px dashed rgba(138,93,85,.22)}
.perks.light li:last-child{border-bottom:0}
.perks.light .pb{border:var(--lw) solid var(--ink);background:#fffdf6;padding:.45rem;color:var(--ink)}
.perks.light .pb .i{width:100%;height:100%}
.perks.light b{color:var(--ink)}
.perks.light small{color:#a0756b}
.btn.sm{min-height:2.3rem;padding:.2rem .7rem;font-size:.95rem;border-radius:.8rem;box-shadow:0 .18rem 0 var(--ink)}
.btn[disabled],.btn.off{filter:grayscale(.85) opacity(.6);pointer-events:none}
.btn .ic{width:1.4rem;height:1.4rem;flex:none}
.link{appearance:none;border:0;background:none;font:inherit;color:#a0756b;text-decoration:underline;text-underline-offset:.2rem;cursor:pointer;padding:.4rem}
.x{position:absolute;right:.5rem;top:.45rem;width:2.6rem;height:2.6rem;padding:.45rem;border:0;background:none;cursor:pointer;z-index:2;transition:transform .15s var(--pop)}
.x:active{transform:scale(.85)}
.back{position:absolute;left:.5rem;top:.45rem;width:2.6rem;height:2.6rem;padding:.5rem;border:0;background:none;cursor:pointer;z-index:2}
/* keyboard focus: an ink ring that shows on cream sheets and on the town alike */
:focus-visible{outline:.2rem solid var(--ink);outline-offset:.14rem}
.dk:focus-visible{outline-offset:-.2rem;border-radius:1rem}

/* ---------- sheets (bottom) and cards (centre) ---------- */
.layer{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(70,45,35,0);transition:background .28s,padding-bottom .25s ease-out;padding:0 calc(.6rem + var(--sar)) calc(.6rem + max(var(--sab),var(--kb,0px))) calc(.6rem + var(--sal));z-index:20}
.layer.open{background:rgba(70,45,35,.42)}
.layer.clear.open{background:rgba(70,45,35,0)}
.layer.center{align-items:center}
.layer.top{align-items:flex-start;padding-top:calc(.6rem + var(--sat))}
.sheet{position:relative;width:100%;max-width:30rem;max-height:calc(100% - .9rem - var(--sat));display:flex;flex-direction:column;background:var(--cream);border:.2rem solid var(--ink);border-radius:1.4rem;box-shadow:0 .35rem 0 rgba(120,70,40,.3);transform:translateY(120%);transition:transform .34s var(--ease)}
.layer.open .sheet{transform:none}
.layer.center .sheet{transform:scale(.6);opacity:0;transition:transform .34s var(--pop),opacity .2s}
.layer.center.open .sheet{transform:none;opacity:1}
.layer.top .sheet{transform:translateY(-130%)}
.layer.top.open .sheet{transform:none}
.sheet>.body{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;padding:.9rem .85rem 1rem}
/* the fade at the bottom of a list that scrolls on (js/ui.js fade): a strip in the panel's own colour laid over the list's last
   1.8rem, sliding up into place while there is more below. It used to be a mask on the scrolling list, which a phone redraws
   offscreen on every frame of every scroll and of the panel sliding in; every sheet has a solid colour, so the strip looks the same */
.sheet>.bfade{display:none;flex:none;position:relative;height:1.8rem;margin-top:-1.8rem;pointer-events:none;border-radius:0 0 var(--sbr,0) var(--sbr,0);background:linear-gradient(transparent,var(--sbg,var(--cream))) 0 0/100% 100% no-repeat}
.sheet.fades>.bfade{display:block;background-position:0 1.8rem;transition:background-position .25s var(--ease)}
.sheet.fades.more>.bfade{background-position:0 0}
/* the list stays one group as it was under its mask, the strip goes over it, and the outline over both (the list's last row used to
   be masked away under the outline's bottom corners; now the outline is what covers them) */
.sheet.fades>.body{isolation:isolate}
.sheet.fades::before{z-index:1}
.sheet>.foot{padding:.2rem .85rem .9rem;display:flex;gap:.5rem;flex:none}
.sheet>.foot .btn{flex:1}
.sheet h2{margin:.05rem 2.4rem .65rem;font-size:1.5rem;font-weight:400;text-align:center;line-height:1.15}
.sheet h3{margin:1rem 0 .45rem;font-size:1.1rem;font-weight:400;display:flex;align-items:center;gap:.35rem}
.sheet h3 .ic{width:1.3rem;height:1.3rem}
.sheet h3 small{margin-left:auto;font-size:.82rem;color:#a0756b}
.sub{color:#a0756b;font-size:.92rem;line-height:1.3}
.sheet p{margin:.3rem 0;line-height:1.35}
.card{position:relative;background:var(--paper);border:var(--lw) solid var(--ink);border-radius:1rem;padding:.65rem .7rem;box-shadow:var(--shadow)}
.card+.card{margin-top:.55rem}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem}
.row{display:flex;align-items:center;gap:.5rem}
.row>.grow{flex:1;min-width:0}
.sep{height:0;border-top:.14rem dashed rgba(138,93,85,.3);margin:.7rem 0}
.tabs{display:flex;gap:.3rem;padding:.25rem;border-radius:1rem;background:rgba(138,93,85,.1);margin:0 0 .7rem}
.tabs button{flex:1;appearance:none;border:0;border-radius:.75rem;background:none;font:inherit;font-size:.98rem;color:var(--ink);padding:.45rem .2rem;cursor:pointer;transition:background .2s}
/* a closet tab word (Тваринка, Emoteuri) stays whole: it takes a little more of the row instead of breaking with a hyphen */
.closet .tabs{gap:.15rem}.closet .tabs button{hyphens:manual;overflow-wrap:normal;min-width:max-content;padding-left:.1rem;padding-right:.1rem}
.tabs button[aria-selected=true]{background:var(--paper);box-shadow:0 .14rem 0 rgba(120,70,40,.25);border:.12rem solid var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{appearance:none;display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;border-radius:.9rem;border:.13rem solid rgba(138,93,85,.45);background:var(--paper);font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer;transition:transform .12s var(--pop)}
.chip:active{transform:scale(.94)}
.chip[aria-pressed=true]{background:var(--butter);border-color:var(--ink)}
.chip .dot{width:.7rem;height:.7rem;border-radius:50%;border:.1rem solid var(--ink)}
.field{width:100%;padding:.65rem .8rem;border-radius:.9rem;border:var(--lw) solid var(--ink);background:#fffdf6;font:inherit;font-size:1.08rem;color:var(--ink);user-select:text;-webkit-user-select:text}
.field::placeholder{color:#c4a596}
textarea.field{resize:none;min-height:4.6rem;line-height:1.3}
.amt{display:inline-flex;align-items:center;gap:.18rem;white-space:nowrap}
.amt .ic{width:1.15rem;height:1.15rem}
.empty{text-align:center;color:#a0756b;padding:1.2rem .5rem;line-height:1.35}
.empty .ic{width:4rem;height:4rem;margin:0 auto .5rem}
/* Who is here: one scrolling row of speech bubbles, and an empty place shown with your own animal instead of a leaf */
.chips.sayc{flex-wrap:nowrap;overflow-x:auto;margin:0 -1rem;padding:.1rem 1rem .4rem;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1.5rem),transparent)}
.chips.sayc::-webkit-scrollbar{display:none}
.chips.sayc .chip{flex:none;border-radius:1rem 1rem 1rem .3rem;padding:.4rem .8rem}
.empty.alone{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .5rem .6rem}
.empty.alone .av{width:4.2rem;height:4.2rem;border-radius:50%;border:var(--lw) solid var(--ink);overflow:hidden;box-shadow:var(--shadow);margin-bottom:.3rem}
.empty.alone b{font-weight:400;font-size:1.1rem;color:var(--ink)}
.empty.alone b::first-letter{text-transform:uppercase}
.toggle{position:relative;flex:none;width:3.1rem;height:1.8rem;border-radius:1rem;border:var(--lw) solid var(--ink);background:#e9dcc3;cursor:pointer;transition:background .2s;padding:0}
.toggle::after{content:"";position:absolute;left:.14rem;top:.14rem;width:1.22rem;height:1.22rem;border-radius:50%;background:#fff;border:.12rem solid var(--ink);transition:transform .25s var(--pop)}
.toggle[aria-checked=true]{background:var(--leaf)}
.toggle[aria-checked=true]::after{transform:translateX(1.28rem)}
/* the label keeps at least ~9rem: wider controls (a row of times, long words) drop to their own line instead of squeezing it to a word per line */
.setrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:.55rem .1rem;border-bottom:.12rem dashed rgba(138,93,85,.18)}
.setrow:last-child{border-bottom:0}
.card.rem.off .setrow+.setrow{opacity:.5}
.setrow .grow{flex:1 1 9rem;min-width:0;line-height:1.2}
.setrow .grow small{display:block;color:#a0756b;font-size:.8rem}
/* Send feedback (js/feedback.js) opens as a centred card, but its switch row reads like the ones in Settings */
.fbsheet .setrow{text-align:start}
.fbsheet .seg{margin-bottom:.7rem}
.setrow .ic{width:1.6rem;height:1.6rem;flex:none}
/* never wider than its row: long chips (Greek "9:00 μ.μ." times, a fifth custom time) wrap their text instead of running off the card */
.seg{display:flex;border:.14rem solid var(--ink);border-radius:.8rem;overflow:hidden;flex:none;max-width:100%}
.seg button{appearance:none;border:0;background:var(--paper);font:inherit;font-size:.86rem;color:var(--ink);padding:.3rem .55rem;cursor:pointer;hyphens:manual}
.seg button+button{border-left:.12rem solid var(--ink)}
/* a dropdown in a settings row (Settings, Sky): the same frame and type as the switches next to it, and a little card of choices under it */
.pickw{position:relative;flex:none}
.pick{appearance:none;border:.14rem solid var(--ink);border-radius:.8rem;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%238a5d55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .6rem center/.7rem;font:inherit;font-size:.86rem;color:var(--ink);padding:.3rem 1.7rem .3rem .65rem;cursor:pointer;white-space:nowrap}
.pick[aria-expanded=true]{background-color:var(--butter)}
.pickmenu{position:absolute;right:0;top:calc(100% + .35rem);z-index:5;min-width:100%;display:flex;flex-direction:column;background:var(--paper);border:.14rem solid var(--ink);border-radius:.8rem;box-shadow:var(--shadow);overflow:hidden;animation:pickIn .16s var(--ease)}
.pickmenu[hidden]{display:none}
.pickmenu button{appearance:none;border:0;background:none;font:inherit;font-size:.86rem;color:var(--ink);text-align:left;padding:.45rem .8rem;white-space:nowrap;cursor:pointer}
.pickmenu button+button{border-top:.1rem dashed rgba(138,93,85,.25)}
.pickmenu button[aria-selected=true]{background:var(--butter)}
.pickmenu button:focus-visible{outline:.14rem solid var(--ink);outline-offset:-.25rem}
@keyframes pickIn{from{opacity:0;transform:translateY(-.3rem) scale(.97)}}
@media (prefers-reduced-motion:reduce){.pickmenu{animation:none}}
.seg.full{width:100%;margin:.7rem 0 .1rem}.seg.full button{flex:1;padding:.45rem .5rem;font-size:.95rem}
.seg button[aria-pressed=true]{background:var(--butter)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2.2rem;background:none;touch-action:pan-x;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:.9rem;border-radius:.6rem;border:.15rem solid var(--ink);background:linear-gradient(90deg,var(--butter) var(--p,50%),#efe3cc var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:2rem;height:2rem;margin-top:-.7rem;border-radius:50%;background:#fffaf3;border:.18rem solid var(--ink);box-shadow:0 .15rem 0 rgba(120,70,40,.3)}
input[type=range]::-moz-range-track{height:.9rem;border-radius:.6rem;border:.15rem solid var(--ink);background:linear-gradient(90deg,var(--butter) var(--p,50%),#efe3cc var(--p,50%))}
input[type=range]::-moz-range-thumb{width:1.7rem;height:1.7rem;border-radius:50%;background:#fffaf3;border:.18rem solid var(--ink)}
.bar{height:.8rem;border-radius:.5rem;border:.13rem solid var(--ink);background:#efe3cc;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,#f6c765 0 .45rem,#f0b84f .45rem .9rem);border-radius:.3rem;transition:width .6s var(--ease)}
.bar.leaf i{background:repeating-linear-gradient(-45deg,#a6d47d 0 .45rem,#93c768 .45rem .9rem)}

/* ---------- Peanut talks ---------- */
#talk{position:fixed;left:calc(.6rem + var(--sal));right:calc(.6rem + var(--sar));bottom:calc(.8rem + var(--sab));z-index:40;display:flex;justify-content:center;pointer-events:none}
/* hidden below the screen: its own height, the gap under it, the name tag above it and the home indicator inset, so no tag peeks out on a phone */
#talk .box{position:relative;width:100%;max-width:30rem;min-height:7.2rem;padding:1.05rem 1rem .8rem 6.4rem;background:var(--cream);border:.2rem solid var(--ink);border-radius:1.3rem;box-shadow:0 .3rem 0 rgba(120,70,40,.3);font-size:1.15rem;line-height:1.38;pointer-events:auto;cursor:pointer;transform:translateY(calc(100% + 2.2rem + var(--sab)));transition:transform .4s var(--ease)}
#talk.on .box{transform:none}
/* the name tag sits over the portrait: a tall speaker (the lantern's handle) must not cross the name */
#talk .who{position:absolute;left:1rem;top:-.95rem;z-index:1;padding:.2rem .7rem;border-radius:.8rem;background:var(--butter);border:.16rem solid var(--ink);font-size:1rem}
#talk .face{position:absolute;left:-.2rem;bottom:.2rem;width:6.6rem;height:6.6rem;pointer-events:none}
#talk .face img{width:100%;height:100%;object-fit:contain;transform-origin:50% 100%}
#talk.speaking .face img{animation:yap .32s ease-in-out infinite alternate}
@keyframes yap{to{transform:scale(1.03,.97) rotate(-1.5deg)}}
#talk .veil{position:fixed;inset:0;pointer-events:none;-webkit-tap-highlight-color:transparent}
#talk.on .veil{pointer-events:auto;cursor:pointer}
/* talking text: each letter fades in and rises a touch */
#talk .txt .tw{white-space:nowrap}
#talk .txt .tc{display:inline-block;white-space:pre;opacity:0;transform:translateY(.28em) scale(.92);transition:opacity .2s ease-out,transform .32s var(--pop)}
#talk .txt .tc.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#talk .txt .tc{transform:none;transition:opacity .12s}}
#talk .more{position:absolute;right:.8rem;bottom:.35rem;width:1rem;height:1rem;animation:nudge .8s ease-in-out infinite alternate}
@keyframes nudge{to{transform:translateY(.2rem)}}
#talk .choices{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
#talk .choices .btn{min-height:2.6rem;font-size:1rem;justify-content:flex-start;background:var(--paper)}
/* the feature tour: Peanut's box can sit at the top while the dock below is pointed at, with a "Skip tour" tag like the name tag */
#talk.up{top:calc(.8rem + var(--sat));bottom:auto}
#talk.up:not(.on) .box{transform:translateY(calc(-100% - 2.2rem - var(--sat)))}
#talk.up .box{margin-top:.95rem}
#talk .skip{position:absolute;right:1rem;top:-.95rem;z-index:1;appearance:none;padding:.2rem .7rem;border-radius:.8rem;background:var(--paper);border:.16rem solid var(--ink);color:var(--ink);font:inherit;font-size:1rem;line-height:1.38;cursor:pointer}
#talk .skip[hidden]{display:none}
/* the world dims like an open panel, with a soft butter ring round the real button and a bobbing arrow pointing at it */
#tour{position:fixed;inset:0;z-index:30;cursor:pointer;-webkit-tap-highlight-color:transparent}
#tour .tdim{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}#tour .tdim>rect{fill:rgba(50,30,24,.55)}#tour.on .tdim{opacity:1}
#tour .tring{position:fixed;left:0;top:0;width:0;height:0;border-radius:999px;border:.22rem solid #fffaf0;box-shadow:0 0 0 .16rem var(--ink),0 0 1.6rem .5rem rgba(50,30,24,.55);opacity:0;pointer-events:none;transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease),border-radius .45s,opacity .3s}
#tour.on .tring.on{opacity:1}
/* a soft white ring breathes out from the spotlight, so the eye finds it at once */
#tour .tring::after{content:"";position:absolute;inset:-.22rem;border-radius:inherit;border:.2rem solid #fffaf0;animation:tourPulse 1.8s ease-out infinite}
@keyframes tourPulse{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){#tour .tring::after{animation:none;opacity:0}}
#tour .tpoint{position:fixed;left:0;top:0;width:2.5rem;height:2.5rem;margin:-1.25rem 0 0 -1.25rem;padding:.3rem;border-radius:50%;background:var(--butter);border:var(--lw) solid var(--ink);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:left .45s var(--ease),top .45s var(--ease),opacity .3s}
#tour.on .tpoint{opacity:1}
#tour .tpoint svg{display:block;width:100%;height:100%;transition:transform .3s}
#tour .tpoint.right svg{transform:rotate(-90deg)}
#tour .tpoint{animation:tourPoke 1s ease-in-out infinite}
#tour .tpoint.right{--px:.35rem;--py:0}
#tour .tpoint.left svg{transform:rotate(90deg)}
#tour .tpoint.left{--px:-.35rem;--py:0}
@keyframes tourPoke{50%{translate:var(--px,0) var(--py,.35rem)}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;width:max-content;text-wrap:balance;top:calc(3.2rem + var(--sat));transform:translate(-50%,-1rem);z-index:70;padding:.45rem .9rem;max-width:min(24rem,86vw);border-radius:.9rem;background:rgba(91,59,46,.92);color:var(--cream);font-size:1rem;line-height:1.25;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
#toast.on{opacity:1;transform:translate(-50%,0)}
/* notes (js/notify.js): small cards that slide in and out on their own; down from the top on a phone, bottom right when wide */
#notes{position:fixed;z-index:72;left:calc(.6rem + var(--sal));right:calc(.6rem + var(--sar));top:calc(.5rem + var(--sat));display:flex;flex-direction:column;align-items:center;gap:.45rem;pointer-events:none}
.note{appearance:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;pointer-events:auto;display:flex;align-items:center;gap:.7rem;width:min(21rem,100%);padding:.5rem .9rem .5rem .55rem;opacity:0;transform:translateY(calc(-100% - 1rem - var(--sat)));transition:transform .45s var(--ease),opacity .3s}
.note.in{opacity:1;transform:none}
.note .nart{flex:none;width:3.3rem;height:3.3rem;display:grid;place-items:center}
.note .nart>*{width:100%;height:100%;object-fit:contain}
.note .ntx{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:.1rem}
.note small{font-size:.72rem;line-height:1.1;letter-spacing:.07em;color:#a0756b}
.note b{font-weight:400;font-size:1.08rem;line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note .nln{font-size:.82rem;line-height:1.2;color:#a0756b}
.note .nrw{flex:none;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;font-size:1.45rem;line-height:1}
.note .nrw .ic{width:1.55rem;height:1.55rem}
/* a found activity's picture in its note, the activity book's sticker face (.stk .av) */
.note .nart .actic{display:grid;place-items:center;border-radius:.6rem;border:.12rem solid var(--ink);overflow:hidden}.note .nart .actic svg{width:72%;height:72%}
@media (min-width:760px){#notes{left:auto;top:auto;right:calc(1rem + var(--sar));bottom:calc(1rem + var(--sab));width:21rem;align-items:flex-end}.note{transform:translateX(calc(100% + 1.5rem + var(--sar)))}}
html.calm .note{transform:none;transition:opacity .35s}
@media (prefers-reduced-motion:reduce){.note{transform:none;transition:opacity .35s}}

/* ---------- flying peanuts ---------- */
.flynut{position:fixed;left:0;top:0;width:1.8rem;height:1.8rem;margin:-.9rem 0 0 -.9rem;pointer-events:none;z-index:80;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.3 0 5.4 2.4 5.1 5.3-.2 1.6-1.4 2.5-1.4 4.2 0 1.6 1.6 2.7 1.6 4.8 0 3-2.5 4.9-5.3 4.9s-5.3-1.9-5.3-4.9c0-2.1 1.6-3.2 1.6-4.8 0-1.7-1.2-2.6-1.4-4.2C6.6 4.9 8.7 2.5 12 2.5z' fill='%23e9b779' stroke='%238a5d55' stroke-width='1.7'/%3E%3Cpath d='M9.6 7.2h.1M14.2 6.6h.1M10.6 15.4h.1M14 17.2h.1M8.9 18.1h.1' stroke='%23b9824d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.flynut.gold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.3 0 5.4 2.4 5.1 5.3-.2 1.6-1.4 2.5-1.4 4.2 0 1.6 1.6 2.7 1.6 4.8 0 3-2.5 4.9-5.3 4.9s-5.3-1.9-5.3-4.9c0-2.1 1.6-3.2 1.6-4.8 0-1.7-1.2-2.6-1.4-4.2C6.6 4.9 8.7 2.5 12 2.5z' fill='%23f9d765' stroke='%238a5d55' stroke-width='1.7'/%3E%3Cpath d='M9.3 6.5c.7-1.3 2-1.9 3.1-1.8' stroke='%23fff6c8' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E")}

/* ---------- title screen ---------- */
#title{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(1.6rem + var(--sat)) 1rem calc(1.2rem + var(--sab));background:linear-gradient(rgba(249,227,162,.0),rgba(249,227,162,.0) 55%,rgba(251,241,220,.85));transition:opacity .5s}
#title.gone{opacity:0;pointer-events:none}
#title .home{position:absolute;left:calc(.9rem + var(--sal));top:calc(.9rem + var(--sat));z-index:1;display:grid;place-items:center;width:3rem;height:3rem;padding:.5rem;animation:drop .9s var(--pop) both}
#title .home svg{width:100%;height:100%}
#title .home:active{transform:scale(.92)}
@media (max-width:560px){#title.hasHome{padding-top:calc(5.2rem + var(--sat))}}
#title .logo{text-align:center;animation:drop .9s var(--pop) both}
#title .logo .word{display:block;width:min(23rem,88vw);height:auto;margin:0 auto;-webkit-user-drag:none;user-select:none}
#title .logo .tl{display:inline-block;margin-top:.5rem;padding:.3rem .8rem;border-radius:.9rem;background:rgba(255,246,236,.92);border:.13rem solid rgba(138,93,85,.35);font-size:1.05rem;min-height:2rem;transition:opacity .4s;text-wrap:balance;max-width:min(22rem,88vw)}
@keyframes drop{from{transform:translateY(-3rem) scale(.6);opacity:0}}
#title .letters{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.6rem 1rem 1rem;width:100%;max-width:34rem;touch-action:pan-x;scrollbar-width:none}
#title .letters::-webkit-scrollbar{display:none}
.letter{flex:0 0 13.5rem;scroll-snap-align:center;position:relative;padding:.75rem .8rem .6rem;border-radius:.9rem;background:repeating-linear-gradient(#fffaf3 0 1.45rem,#f0e2c8 1.45rem 1.53rem);border:.16rem solid var(--ink);box-shadow:var(--shadow);font-size:.95rem;line-height:1.53rem;transform:rotate(var(--r,0deg))}
.letter .stamp{position:absolute;right:.5rem;top:.5rem;width:2.8rem;height:3.2rem;border:.14rem dashed #d48a6a;border-radius:.3rem;background:#fde7da;display:grid;place-items:center}
.letter .stamp .ic{width:2.2rem;height:2.2rem}
/* the writer's own portrait in the stamp window, like a friend's photo */
/* each wish card gets its own bright tile, with a sunny glow behind the face, a white mat and a strip of tape */
.letter{--c1:#ffcf4d;--c2:#ffa62b}
.letter:nth-child(6n+2){--c1:#ff9fb8;--c2:#ff6f93}
.letter:nth-child(6n+3){--c1:#8fd0ff;--c2:#4fa9ec}
.letter:nth-child(6n+4){--c1:#9fe08c;--c2:#5fbd52}
.letter:nth-child(6n+5){--c1:#caa9ff;--c2:#9c74f0}
.letter:nth-child(6n){--c1:#ffb47f;--c2:#ff8447}
#title .letter{background:linear-gradient(90deg,transparent 0 .5rem,color-mix(in srgb,var(--c2) 55%,transparent) .5rem .62rem,transparent .62rem),repeating-linear-gradient(color-mix(in srgb,var(--c1) 14%,#fffaf3) 0 1.45rem,color-mix(in srgb,var(--c1) 45%,#f0e2c8) 1.45rem 1.53rem);padding-left:1rem}
.letter .stamp.pfp{right:.55rem;top:.6rem;width:3.1rem;height:3.1rem;padding:0;background:radial-gradient(circle at 50% 40%,var(--c1) 0 35%,var(--c2) 80%);border:var(--lw) solid var(--ink);border-radius:.8rem;overflow:visible;box-shadow:var(--shadow);transform:rotate(4deg)}
.letter .stamp.pfp .pfp{width:100%;height:100%;object-fit:cover;display:block;border-radius:.62rem;transform:translateY(.12rem) scale(.94)}
.letter .stamp.pfp::before{content:"";position:absolute;left:50%;top:-.42rem;width:1.7rem;height:.6rem;transform:translateX(-50%) rotate(-6deg);background:var(--c2);opacity:.9;border-radius:.12rem;box-shadow:0 .06rem 0 rgba(120,70,40,.18);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 .2rem,transparent .2rem .4rem)}
.letter b{font-weight:400;display:block;margin-right:3.2rem}
.letter small{display:block;color:#a0756b;color:color-mix(in srgb,var(--c2) 45%,#7a4c3f);margin-top:.3rem}
#title .cta{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;max-width:22rem}

/* ---------- picking a spot ---------- */
#pins{position:fixed;inset:0;pointer-events:none;z-index:8}
.pin{position:absolute;left:0;top:0;pointer-events:auto;appearance:none;border:0;background:none;padding:0;cursor:pointer;transform-origin:50% 100%;will-change:transform}
.pin .bub{display:flex;align-items:center;gap:.3rem;padding:.3rem .6rem .3rem .35rem;border-radius:1rem;background:var(--paper);border:.16rem solid var(--ink);box-shadow:var(--shadow);font-size:.92rem;line-height:1.1;white-space:nowrap;animation:pinin .45s var(--pop) both}
.pin .bub .ic{width:1.5rem;height:1.5rem}
.pin .bub small{display:block;font-size:.7rem;color:#a0756b}
.pin .bub{position:relative}.pin .nw{position:absolute;right:-.5rem;top:-.6rem;padding:.02rem .32rem .04rem;border-radius:.6rem;background:#f58f94;color:#fff;border:.12rem solid var(--ink);font-size:.62rem;line-height:1.2;transform:rotate(8deg);box-shadow:0 .1rem 0 rgba(120,70,40,.25)}
.pin::after{content:"";display:block;width:.7rem;height:.7rem;margin:-.4rem auto 0;background:var(--paper);border-right:.16rem solid var(--ink);border-bottom:.16rem solid var(--ink);transform:rotate(45deg)}
.pin.taken .bub{background:#efe5d2}
.pin.sel .bub{background:var(--butter)}
.pin:active .bub{transform:scale(.94)}
@keyframes pinin{from{transform:translateY(.8rem) scale(.4);opacity:0}}
#pickBar{position:fixed;left:50%;top:calc(.6rem + var(--sat));transform:translateX(-50%);z-index:12;text-align:center;font-size:1.7rem;line-height:1.1;color:#fff6ec;-webkit-text-stroke:.24rem var(--ink);paint-order:stroke fill;pointer-events:none;white-space:nowrap;animation:drop .5s var(--pop) both;padding:.45rem 1.1rem .5rem;border-radius:1.4rem;background:rgba(255,246,236,.9);border:.16rem solid rgba(138,93,85,.3);box-shadow:var(--shadow)}
#pickBar small{display:block;font-size:.95rem;color:var(--ink);-webkit-text-stroke:0;margin-top:.1rem}

/* ---------- timer setup ---------- */
.big{font-size:4.2rem;line-height:1;text-align:center;margin:.1rem 0 .2rem;color:var(--ink)}
.big small{font-size:1.5rem;margin-left:.2rem}
.ticks{display:flex;justify-content:space-between;font-size:.78rem;color:#a0756b;margin-top:-.2rem;padding:0 .2rem}
.doing{display:flex;align-items:center;gap:.6rem;padding:.55rem .65rem;border-radius:1rem;background:#fdebc3;border:.15rem solid rgba(138,93,85,.35);margin-bottom:.6rem}
.doing .ic{width:2.4rem;height:2.4rem;flex:none}
.doing b{font-weight:400;font-size:1.1rem;display:block}
.doing small{color:#a0756b;font-size:.82rem}
.reward{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.5rem .7rem;border-radius:.9rem;background:var(--paper);border:.14rem solid rgba(138,93,85,.35);margin-top:.5rem;font-size:1rem}
.reward .amts{display:flex;gap:.6rem}
.boostline{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.boost{display:inline-flex;align-items:center;gap:.2rem;padding:.12rem .45rem;border-radius:.7rem;font-size:.78rem;background:#eef6e2;border:.1rem solid rgba(138,93,85,.3)}
.boost.off{background:#f1e8d8;color:#a8907f}
.dial{position:relative;width:13rem;height:13rem;margin:.2rem auto .4rem;touch-action:none}
.dial svg{width:100%;height:100%}
.dial .val{position:absolute;inset:0;display:grid;place-items:center;font-size:3rem;pointer-events:none;text-align:center;line-height:1}
.dial .val small{display:block;font-size:1rem;color:#a0756b}

/* ---------- active session ---------- */
#run{position:fixed;left:50%;top:calc(.6rem + var(--sat));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 1.2rem);z-index:12;display:flex;flex-direction:column;align-items:center;gap:.3rem;transition:transform .45s var(--ease),opacity .3s}
#run.gone{transform:translate(-50%,-160%);opacity:0;pointer-events:none}
#run .clock{display:flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .45rem;border-radius:1.3rem;background:var(--cream);border:.2rem solid var(--ink);box-shadow:var(--shadow)}
#run .ring{width:3.3rem;height:3.3rem;flex:none}
#run .ring circle{fill:none;stroke-width:4}
#run .ring .tr{stroke:#efe3cc}
#run .ring .fl{stroke:#b5dcc0;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s linear}
#run .t{font-size:2.3rem;line-height:1;font-variant-numeric:tabular-nums;min-width:5.6rem}
#run .what{font-size:.86rem;color:#a0756b;line-height:1.15;max-width:13rem}
#run .what [data-doing]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#run .what b{font-weight:400;color:var(--ink);display:flex;align-items:center;gap:.25rem}
/* tag and task stay on one line; a long task trails off instead of leaving "Study ·" alone */
#run .what b .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#run.paused .clock{background:#e7eef3}
#run.brk .ring .fl{stroke:var(--sky)}
#runTools{position:fixed;right:calc(.6rem + var(--sar));bottom:calc(1rem + var(--sab));z-index:12;display:flex;flex-direction:column;gap:.5rem;transition:transform .45s var(--ease)}
#runTools.gone{transform:translateX(160%)}
.rbtn{position:relative;width:3.6rem;height:3.6rem;padding:.6rem;border-radius:50%;background:var(--cream);border:var(--lw) solid var(--ink);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s}
.rbtn:active{transform:translateY(.1rem) scale(.95)}
.rbtn.hold{padding:0;overflow:hidden}
.rbtn.hold .ic{width:2.1rem;height:2.1rem;margin:auto;position:relative;z-index:1}
.rbtn.hold::before{content:"";position:absolute;inset:0;background:#f2a698;transform:scaleY(var(--k,0));transform-origin:50% 100%}
.rbtn.hold{display:grid;place-items:center}
#runLeft{position:fixed;left:calc(.6rem + var(--sal));bottom:calc(1rem + var(--sab));z-index:12;display:flex;flex-direction:column;gap:.5rem;transition:transform .45s var(--ease)}
#runLeft.gone{transform:translateX(-160%)}
#holdTip{position:fixed;right:calc(4.8rem + var(--sar));bottom:calc(1.6rem + var(--sab));z-index:12;padding:.35rem .7rem;border-radius:.8rem;background:rgba(91,59,46,.9);color:var(--cream);font-size:.9rem;opacity:0;transition:opacity .2s;pointer-events:none}
#holdTip.on{opacity:1}
#cheerLine{position:fixed;pointer-events:none;left:50%;width:max-content;text-wrap:balance;bottom:calc(1.2rem + var(--sab));transform:translateX(-50%);z-index:11;max-width:min(19rem,60vw);padding:.4rem .8rem;border-radius:1rem;background:rgba(255,246,236,.92);border:.13rem solid rgba(138,93,85,.35);font-size:.92rem;line-height:1.25;text-align:center;transition:opacity .5s}
/* the session's controls live on the page, above #app: a panel opened mid-session (sounds, a confirm box) hides them instead of sitting under them */
body:has(#app>.layer.open:not(.clear)) :is(#run,#runTools,#runLeft,#cheerLine,#holdTip){visibility:hidden}
#cheerLine:empty{opacity:0}

/* ---------- results ---------- */
.result{text-align:center}
.result .tagchip{position:absolute;left:.8rem;top:.8rem}
.result .num{font-size:3.6rem;line-height:1;margin:.9rem 0 .1rem}
.result .num small{font-size:1.4rem}
.result .newact{display:inline-flex;align-items:center;gap:.3rem;margin:.45rem auto 0;padding:.14rem .65rem .16rem .4rem;border-radius:1rem;background:#fdeaa6;border:.12rem solid var(--ink);font-size:.86rem;animation:bump .5s .35s var(--pop) both}.result .newact .ic{width:1.05rem;height:1.05rem;display:inline-flex}.result .newact .ic svg{width:100%;height:100%}
.result .newact.master{background:#d9efc4}.result .newact+.newact{margin-left:.3rem}
.stampmark{position:absolute;right:.6rem;top:.5rem;width:5.2rem;height:5.2rem;color:#d9574a;animation:stampin .5s .35s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stampin{from{transform:scale(2.4) rotate(-30deg);opacity:0}}
.earn{display:flex;justify-content:center;gap:1rem;font-size:1.6rem;margin:.6rem 0}
.earn .ic{width:2rem;height:2rem}
.earn .amt{gap:.3rem}
.breakdown{font-size:.85rem;color:#a0756b;line-height:1.5}
.flames{display:flex;justify-content:center;gap:.35rem;margin:.6rem 0}
.flames .f{width:2.1rem;text-align:center;font-size:.72rem;color:#a0756b}
.flames .f .ic{width:2rem;height:2rem;margin:0 auto .1rem}
.flames .f.lit .ic{animation:flick 1.2s ease-in-out infinite alternate}
.flames .f.today .ic{animation:flick 1.2s ease-in-out infinite alternate,bounce .6s .3s var(--pop) both}
@keyframes flick{to{transform:scale(1.06,.96) rotate(2deg)}}
@keyframes bounce{from{transform:scale(.2)}}
.freezes{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:.9rem;background:#e3f1f8;border:.12rem solid rgba(138,93,85,.3);font-size:.88rem;line-height:1.2}
.freezes .ic{width:1.4rem;height:1.4rem}

/* ---------- place cards (town) ---------- */
.place{display:flex;gap:.65rem;align-items:stretch;cursor:pointer;transition:transform .14s var(--pop)}
.place:active{transform:scale(.97)}
.place .thumb{flex:0 0 7.2rem;border-radius:.7rem;overflow:hidden;border:.14rem solid var(--ink);position:relative;background:#f2c98a}
.place .thumb svg{width:100%;height:100%;display:block}
/* locked: the place stays visible, faded, with a small padlock badge, so you can see what you are working toward */
.place .thumb:has(.lock) .pimg{filter:saturate(.45) brightness(.94)}
.place .thumb .lock{position:absolute;right:.3rem;bottom:.3rem;width:2.1rem;height:2.1rem;display:grid;place-items:center;background:var(--paper,#fffaf3);border:.14rem solid var(--ink);border-radius:50%;box-shadow:0 .12rem 0 rgba(120,70,40,.25)}
.place .thumb .lock svg{width:1.35rem;height:1.35rem}
.place .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem;line-height:1.2}
.place .info b{font-weight:400;font-size:1.12rem}
.place .info small{color:#a0756b;font-size:.8rem}
.place .tried{display:block;margin-top:.2rem;font-size:.72rem;opacity:.75}
.place .tried.all{display:inline-flex;align-items:center;gap:.25rem;opacity:1;font-weight:700;color:#5d7f3f}.place .tried.all svg{width:.95rem;height:.95rem}
button.tried{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;display:inline-flex!important;align-items:center;gap:.25rem;cursor:pointer}button.tried svg{width:.95rem;height:.95rem}
.place.here{background:#fdebc3}
.place.locked .info b{color:#8f7266}
.gate{display:flex;align-items:center;gap:.35rem;font-size:.82rem;margin-top:auto}
.gate .bar{flex:1;height:.62rem}
.livebadge{display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;color:#5d8a3e}
.livebadge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#7fc35a}

/* ---------- quests (Peanut's notebook): the picnic basket styles are at the end of the file ---------- */

/* ---------- shop ---------- */
.shophead{position:relative;height:5.2rem;margin:-.9rem -.85rem .7rem;border-radius:1.2rem 1.2rem 0 0;overflow:hidden;background:linear-gradient(#f6c98b,#efb874)}
.shophead svg{position:absolute;inset:0;width:100%;height:100%}
.shophead h2{position:absolute;left:0;right:0;bottom:.4rem;margin:0;color:#fff6ec;-webkit-text-stroke:.24rem var(--ink);paint-order:stroke fill;font-size:1.8rem}
.item{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .35rem .45rem;border-radius:1rem;border:var(--lw) solid var(--ink);background:var(--paper);box-shadow:var(--shadow);cursor:pointer;font-size:.86rem;line-height:1.1;text-align:center;transition:transform .14s var(--pop)}
.item:active{transform:scale(.95)}
.item .art{width:3.6rem;height:3.6rem}
.item .price{display:inline-flex;align-items:center;gap:.15rem;padding:.12rem .45rem;border-radius:.7rem;background:#fdebc3;border:.1rem solid rgba(138,93,85,.35);font-size:.85rem}
.item .price .ic{width:1rem;height:1rem}
.item.owned .price{background:#e1f1e6}
.item.on{background:#fdebc3;outline:.18rem solid var(--butter);outline-offset:.05rem}
.item .slotlbl{position:absolute;left:.35rem;top:.3rem;font-size:.62rem;color:#a0756b}
.item .new{position:absolute;right:-.3rem;top:-.4rem;padding:.06rem .35rem;border-radius:.5rem;background:#ef6f62;color:#fff;border:.1rem solid var(--ink);font-size:.66rem;transform:rotate(8deg)}
img.i.fit{width:100%;height:100%;object-fit:contain;display:block}
.wtabs{display:flex;gap:.3rem;overflow-x:auto;overflow-y:hidden;padding:.25rem;margin:0 -.1rem .7rem;border-radius:1rem;background:rgba(138,93,85,.1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wtabs::-webkit-scrollbar{display:none}
.wtabs{--fl:0rem;--fr:0rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.wtabs.ml{--fl:2.2rem}.wtabs.mr{--fr:2.2rem}
.wtabs button{flex:none;display:inline-flex;align-items:center;gap:.22rem;appearance:none;border:.12rem solid transparent;border-radius:999px;background:none;font:inherit;font-size:.95rem;color:#8a6a62;padding:.36rem .8rem;cursor:pointer;transition:background .15s,color .15s}
.wtabs button:hover{background:rgba(255,250,243,.6)}
.wtabs button .ic{width:1.05rem;height:1.05rem;flex:none}
.wtabs button[aria-selected=true]{background:var(--paper);border-color:var(--ink);color:var(--ink);box-shadow:0 .14rem 0 rgba(120,70,40,.25)}
.wtabs button.gold{color:#c08a1e}
.wtabs button.gold[aria-selected=true]{background:linear-gradient(135deg,#ffe9a0,#ffd3e8 60%,#cfe8ff);color:var(--ink)}
.sethead{margin-bottom:.1rem}
/* legendary cards: the card is the art's own night colour (#3b3259, baked into each picture) so the art has no box,
   with a gold double frame, a few stars round the edge, a soft gold glow over the figure and the sheen passing by */
.item.legend,.shop2 .shelfrow .item.legend{overflow:hidden;color:#ffe9a8;border:.16rem solid #f9d765;border-radius:1.2rem;padding:.6rem .4rem .6rem;font-size:.95rem;
  background:radial-gradient(circle at 9% 8%,#fff6d8 0 .07rem,transparent .11rem),radial-gradient(circle at 88% 13%,#fff6d8 0 .09rem,transparent .13rem),radial-gradient(circle at 93% 55%,#fff6d8 0 .06rem,transparent .1rem),radial-gradient(circle at 6% 62%,#fff6d8 0 .06rem,transparent .1rem),radial-gradient(circle at 15% 90%,#fff6d8 0 .07rem,transparent .11rem),radial-gradient(circle at 86% 91%,#fff6d8 0 .08rem,transparent .12rem),#3b3259;
  box-shadow:inset 0 0 0 .2rem #3b3259,inset 0 0 0 .3rem rgba(249,215,101,.55),0 0 .9rem rgba(249,215,101,.35),var(--shadow)}
.item.legend::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(249,215,101,.2),transparent 52%);mix-blend-mode:screen;pointer-events:none;animation:legendGlow 3.2s ease-in-out infinite}
@keyframes legendGlow{50%{opacity:.55}}
/* each legendary picture comes with its own dark square: fade its edges out so only the costume and its glow show */
.item.legend .art img{-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 98%);mask-image:radial-gradient(closest-side,#000 58%,transparent 98%)}
.shop2 .shelfrow .item.legend .price{transform:none;font-size:.95rem;padding:.12rem .6rem}
.item.legend .art,.shop2 .shelfrow .item.legend .art{width:8rem;height:8rem;z-index:1}
.item.legend>*{position:relative}
/* no sweeping sheen on legendary cards (it read as a glaring pill over the drawn outline); the gold border and soft glow carry it */
.item.legend::before{content:none}
.item.legend.owned .price{background:#e1f1e6;color:var(--ink)}
@keyframes legendSheen{0%,55%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(420%) skewX(-14deg)}}
@media (prefers-reduced-motion:reduce){.item.legend::before{animation:none;display:none}.item.legend::after{animation:none}}
.legendart{width:100%;height:100%;background:#33295f;border:.22rem solid #f9d765;border-radius:1.4rem;padding:.6rem;box-shadow:0 0 2rem rgba(249,215,101,.55)}
.legendart img{width:100%;height:100%;object-fit:contain;display:block}
.shelfrow{position:relative;padding-bottom:.6rem;margin-bottom:.4rem}
.shelfrow::after{content:"";position:absolute;left:-.3rem;right:-.3rem;bottom:0;height:.55rem;border-radius:.3rem;background:linear-gradient(#e8b98a,#c98f60);border:.13rem solid var(--ink)}
.promo{display:flex;align-items:center;gap:.7rem;cursor:pointer}
.promo .art{width:4.4rem;height:4.4rem;flex:none}
.promo .grow{flex:1;line-height:1.2}
.promo .grow small{display:block;color:#a0756b;font-size:.8rem}
.promo.gold{background:linear-gradient(#fff6d6,#fbe7a8)}
/* launch party: a festival banner in the shop, dusk sky over the hill like the hero windows, bunting, a stamped gold peanut */
.lparty{position:relative;display:flex;align-items:center;gap:1.05rem;min-height:9rem;padding:2.1rem .9rem 1.55rem .85rem;margin-bottom:.6rem;border:var(--lw) solid var(--ink);border-radius:1.1rem;overflow:hidden;background:linear-gradient(#ee9f73 0%,#f6c68c 55%,#fbe3b0 100%);box-shadow:var(--shadow);text-align:left}
button.lparty{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.lparty .lend svg:last-child{width:.8rem;height:.8rem;transform:rotate(-90deg)}
.lparty::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-2.05rem;height:3.3rem;border-radius:50%;background:#b8d49c;border-top:var(--lw) solid var(--ink)}
.aoff,.aoff *,.aoff::before,.aoff::after,.aoff *::before,.aoff *::after{animation-play-state:paused!important}
.lparty .lbunt{position:absolute;left:0;right:0;top:-.05rem;width:100%;height:1.9rem;z-index:2;--k:1.75}
.lparty .lbunt>svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.lparty .lbunt>.lflag{position:absolute;width:7.3334%;height:50%;transform-origin:50% 10%;transform:scale(var(--k),1)}
.lparty .lflag>span{position:absolute;inset:0;transform-origin:50% 10%;animation:lflag 2.6s ease-in-out infinite}
.lparty .lbunt>.lflag:nth-child(odd)>span{animation-delay:-1.3s}
.lparty .lflag svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;transform-origin:50% 10%;transform:scale(calc(1/var(--k)),1)}
@keyframes lflag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.lparty .lgold{position:relative;z-index:1;flex:0 0 5rem;height:5rem;display:grid;place-items:center}
.lparty .lgold>svg{position:relative;width:4.3rem;height:4.3rem;filter:drop-shadow(0 .22rem 0 rgba(120,70,40,.3));animation:heroBob 3.2s ease-in-out infinite}
.lparty .lglow{position:absolute;inset:-.6rem;border-radius:50%;background:radial-gradient(circle,#fff6d0 0,rgba(255,240,190,.75) 38%,rgba(255,240,190,0) 70%);animation:lglow 2.8s ease-in-out infinite}
@keyframes lglow{50%{transform:scale(1.12);opacity:.75}}
.lparty .lx2{position:absolute;right:-.55rem;bottom:.05rem;display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:50%;background:#f58f94;border:.16rem solid var(--ink);box-shadow:0 .16rem 0 rgba(120,70,40,.3);color:#fff6ec;font-size:1.12rem;line-height:1;-webkit-text-stroke:.14rem var(--ink);paint-order:stroke fill;transform:rotate(-12deg);animation:lstamp .7s .35s var(--pop) backwards}
@keyframes lstamp{0%{transform:rotate(-40deg) scale(2.2);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}
.lparty .ltxt{position:relative;z-index:1;flex:1;min-width:0}
.lparty .ltitle{display:block;text-wrap:balance;font-weight:400;font-size:2.05rem;line-height:1;color:#fff6ec;-webkit-text-stroke:.26rem var(--ink);paint-order:stroke fill;letter-spacing:.01em;filter:drop-shadow(0 .16rem 0 rgba(120,70,40,.3));transform:rotate(-2deg);transform-origin:left center}
.lparty .ltxt small{display:block;margin:.4rem 0 .45rem;font-size:.84rem;line-height:1.22;color:var(--ink);text-wrap:balance}
.lparty .lend{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .55rem .14rem .3rem;border-radius:.8rem;background:var(--paper);border:.13rem solid var(--ink);font-size:.8rem;white-space:nowrap}
.lparty .lend svg{width:1rem;height:1rem}
/* the shop's Peanut Club banner: the paywall's night sky, friends at the lantern table along the bottom */
.cban{position:relative;display:block;width:100%;min-height:11.5rem;margin:0 0 .6rem;padding:0;border:var(--lw) solid var(--ink);border-radius:1.1rem;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:#fff6ec;background:#1f2650;box-shadow:0 .25rem 0 rgba(120,70,40,.25)}
.cban:active{transform:translateY(.12rem);box-shadow:0 .12rem 0 rgba(120,70,40,.25)}
.cban .cbsky{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 84% 18%,rgba(255,240,200,.3),transparent 32%),linear-gradient(#141a3d,#26306a 50%,#3d4686)}
.cban .cbsky>i{position:absolute;width:calc(.2rem * var(--k));height:calc(.2rem * var(--k));border-radius:50%;background:#fff6d8;opacity:.85;animation:ctw 3s ease-in-out infinite}
.cban .cbmoon{position:absolute;right:1.5rem;top:1rem;width:2.3rem;height:2.3rem;border-radius:50%;background:#fff3cc;box-shadow:0 0 1.7rem .5rem rgba(255,236,180,.35)}
.cban .cbmoon::after{content:"";position:absolute;left:.75rem;top:-.35rem;width:2.1rem;height:2.1rem;border-radius:50%;background:#1a2147}
.cban .cbart{position:absolute;right:-3.6rem;bottom:-9.6rem;width:17rem;aspect-ratio:1/2;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
.cban .cbart>img{display:block;width:100%;height:100%}
.cban .cbbr{position:absolute;overflow:hidden;transform-origin:50% 100%;animation:cbBreath 3.6s ease-in-out infinite}
.cban .cbbr img{position:absolute;max-width:none}
@keyframes cbBreath{50%{transform:scale(1.012,1.03)}}
.cban .cbl{position:absolute;width:9%;aspect-ratio:1;margin:-4.5% 0 0 -4.5%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,170,.75),rgba(255,214,120,.25) 55%,transparent);mix-blend-mode:screen;animation:cbGlow 4.2s ease-in-out infinite}
@keyframes cbGlow{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.cban .cbst{position:absolute;width:2.6%;height:3.4%;margin-left:-1.3%;border-radius:50%;background:rgba(255,250,240,.55);filter:blur(1.5px);opacity:0;animation:cbSteam 3.2s ease-out infinite}
@keyframes cbSteam{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:.8}100%{transform:translate(.35rem,-1.6rem) scale(1.6);opacity:0}}
.cban .cbfly{position:absolute;width:1.1%;aspect-ratio:1;border-radius:50%;background:#fff4b8;box-shadow:0 0 .35rem .15rem rgba(255,236,150,.7);animation:cbDrift 9s ease-in-out infinite alternate,cbBlink 2.4s ease-in-out infinite}
@keyframes cbDrift{0%{transform:translate(0,0)}50%{transform:translate(1.1rem,-.8rem)}100%{transform:translate(-.6rem,-1.5rem)}}
@keyframes cbBlink{0%,100%{opacity:.25}50%{opacity:1}}
.cban .cbfade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,26,61,.92) 0,rgba(20,26,61,.78) 46%,rgba(20,26,61,0) 78%)}
.cban .cbtxt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:64%;padding:1rem .2rem 1rem 1rem}
.cban .cbeye{display:flex;align-items:center;gap:.3rem;font-size:.76rem;letter-spacing:.14em;color:#f2cf6a}
.cban .cbeye svg{width:1rem;height:1rem}
.cban .cbtitle{margin:.3rem 0 0;font-weight:400;font-size:1.45rem;line-height:1.12;color:#fff6ec;text-shadow:0 .12rem 0 rgba(0,0,0,.25)}
.cban small{margin:.35rem 0 .7rem;font-size:.8rem;line-height:1.3;color:#d8d5f2}
.cban .cbcta{display:inline-flex;align-items:center;gap:.15rem;padding:.42rem .55rem .44rem .9rem;border-radius:1.2rem;border:.14rem solid var(--ink);background:linear-gradient(#ffe9a8,#f9d765 45%,#eab547);color:#3a2a1c;font-size:.92rem;box-shadow:0 0 1.2rem rgba(240,192,80,.35)}
.cban .cbcta svg{width:1.05rem;height:1.05rem;transform:rotate(-90deg)}
html.calm .cban *{animation:none!important}
@media (prefers-reduced-motion:reduce){.cban *{animation:none!important}}
.lparty .lsp{position:absolute;z-index:1;width:1rem;height:1rem;background:#fffbe8;filter:drop-shadow(0 0 .25rem #fff3c0);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:ltwink 2.4s ease-in-out infinite}
.lparty .lsp.a{left:5.2rem;top:2.2rem}.lparty .lsp.b{left:.8rem;top:5.6rem;width:.7rem;height:.7rem;animation-delay:-.8s}
.lparty .lsp.c{right:1.3rem;top:2.4rem;width:.8rem;height:.8rem;animation-delay:-1.5s}.lparty .lsp.d{right:4.2rem;bottom:1.9rem;width:.6rem;height:.6rem;animation-delay:-.4s}
@keyframes ltwink{0%,100%{transform:scale(.4) rotate(0);opacity:.35}50%{transform:scale(1) rotate(45deg);opacity:1}}
html.calm .lparty *{animation:none!important}
@media (prefers-reduced-motion:reduce){.lparty *{animation:none!important}}
/* the launch party chip on the start sheet, and the next gold peanut on the reward card */
.boost.party{background:#fdeaa6;border-color:var(--ink);color:var(--ink)}
.boost.party .ic,.boost.party svg{width:.95rem;height:.95rem}
.result .saving.gold{background:linear-gradient(#fff6d6,#fbe7a8)}
/* Peanut Club, the starter bundle and gold packs (js/screens/club.js), and the reward videos on the session card (js/ads.js) */
.clubsheet .askq{font-size:1.3rem;margin:.2rem 0 .4rem}
/* the Club sheet is a night garden: deep navy all the way down, friends studying under the lanterns as the hero, gold kept for
   the button, the thin rings round the perks and the chosen plan */
.sheet.clubsheet{background:#1f2650;color:#f6ecd8}
.clubsheet>.body{border-radius:1.2rem 1.2rem 0 0;position:relative}
.clubsheet .askq,.clubsheet h3{color:#f6ecd8}
.clubsheet .sub{color:#aeabd2}
.clubsheet .cnight{position:relative;height:19rem;margin:-.9rem -.85rem 0;overflow:hidden;pointer-events:none;
  background:radial-gradient(circle at 80% 13%,rgba(255,240,200,.32),transparent 30%),linear-gradient(#141a3d,#26306a 45%,#3d4686 75%,#474d86)}
@keyframes ctw{50%{opacity:.35;transform:scale(.8)}}
.clubsheet .cnight i{position:absolute;width:calc(.2rem * var(--k));height:calc(.2rem * var(--k));border-radius:50%;background:#fff6d8;opacity:.85;animation:ctw 3s ease-in-out infinite}
.clubsheet .cmoon{position:absolute;right:2.6rem;top:1.9rem;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff3cc;box-shadow:0 0 1.9rem .6rem rgba(255,236,180,.35)}
.clubsheet .cmoon::after{content:"";position:absolute;left:.85rem;top:-.4rem;width:2.4rem;height:2.4rem;border-radius:50%;background:#151b3f}
.clubsheet .cart{position:absolute;left:50%;bottom:-17.2rem;width:26.5rem;margin-left:-13.25rem;max-width:none}
.clubsheet .cfade{position:absolute;left:0;right:0;bottom:0;height:6.5rem;background:linear-gradient(rgba(31,38,80,0),#1f2650 88%)}
/* the sky comes down over the treetops so the title reads, the moon and stars stay on top */
.clubsheet .cnight::after{content:"";position:absolute;left:0;right:0;top:0;height:62%;background:linear-gradient(#141a3d 0,rgba(20,26,61,.92) 38%,rgba(24,31,70,0))}
.clubsheet .cnight i,.clubsheet .cmoon{z-index:1}
.clubsheet .ctitle{position:absolute;left:0;right:0;top:1.9rem;padding:0 1.35rem;pointer-events:none}
.clubsheet .ceye{display:flex;align-items:center;gap:.35rem;font-size:.78rem;letter-spacing:.16em;color:#f2cf6a}
.clubsheet .ceye svg{width:1.1rem;height:1.1rem}
.clubsheet .ctitle h2{margin:.35rem 0 0;font-size:1.95rem;line-height:1.15;font-weight:400;text-align:left;color:#fff6ec;text-shadow:0 .12rem 0 rgba(0,0,0,.25)}
.clubsheet .ctitle h2 em{display:block;font-style:normal;color:#f9d765}
/* the gold comparison sits on a night-blue pill so it stays readable over the lanterns and trees */
.clubsheet .ctitle p{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.1rem;margin:.55rem 0 0;padding:.3rem .7rem .32rem;border-radius:1rem;background:rgba(20,26,61,.82);box-shadow:0 0 0 .1rem rgba(242,207,106,.35);font-size:.82rem;color:#ece9ff}
.clubsheet .cgold{display:inline-flex;align-items:center;gap:.25rem;margin-left:.4rem;color:#fff6ec}
.clubsheet .cgold .amt{font-size:.9rem}.clubsheet .cgold .amt:last-child{color:#f9d765;font-size:1.05rem}
.clubsheet .cgold .arr{opacity:.6}
.perks{list-style:none;position:relative;margin:-1.6rem 0 .3rem;padding:0;text-align:left}
.perks li{display:flex;gap:.75rem;align-items:center;padding:.62rem 0;border-bottom:1px solid rgba(246,236,216,.12)}
.perks .pb{flex:none;width:2.4rem;height:2.4rem;padding:.42rem;border-radius:50%;border:.1rem solid #e8c35e;background:rgba(249,215,101,.08)}
.perks .pb .ic{width:100%;height:100%}
.perks b{display:block;font-weight:400;line-height:1.2;font-size:1rem}
.perks small{display:block;color:#aeabd2;font-size:.8rem;line-height:1.3;margin-top:.08rem}
.perks2{list-style:none;margin:.2rem 0 .6rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.5rem .6rem;text-align:left}
.perks2 li{display:flex;gap:.45rem;align-items:center;font-size:.84rem;line-height:1.2}
.perks2 b{font-weight:400}
.perks2 .pb{flex:none;width:1.7rem;height:1.7rem;padding:.28rem;border-radius:50%;border:.09rem solid rgba(232,195,94,.7)}
.perks2 .pb .ic{width:100%;height:100%}
/* the plans sit side by side over the button; the chosen one gets a gold ring, the yearly one wears its saving as a ribbon */
.clubsheet .plans{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.6rem}
.clubsheet .opt.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.1rem;min-height:3.9rem;padding:.6rem .75rem;text-align:left;color:#f6ecd8;background:rgba(255,255,255,.05);border:.1rem solid rgba(246,236,216,.25);box-shadow:none}
.clubsheet .opt.plan b{font-weight:400;font-size:1.02rem}.clubsheet .opt.plan small{font-size:.74rem;line-height:1.2;color:#aeabd2}
.clubsheet .opt.plan[aria-pressed=true]{background:rgba(249,215,101,.12);border:.13rem solid #f2cf6a;box-shadow:none}
.clubsheet .ptag{position:absolute;right:.55rem;top:-.62rem;padding:0 .5rem;border-radius:.6rem;background:#f2cf6a;color:#3a2f22;font-size:.72rem;line-height:1.2rem}
.clubsheet .btn.gold{color:#3a2a1c;box-shadow:0 0 1.4rem rgba(240,192,80,.35)}
.clubsheet .fine{color:#9a97bd}
.clubsheet .finelinks .link{color:#aeabd2}
.btn.gold{position:relative;overflow:hidden;background:linear-gradient(#ffe9a8,#f9d765 45%,#eab547)}
/* the sheen slides with transform (moving it with left repainted the button, outline and all, every frame) */
.btn.gold::after{content:"";position:absolute;top:0;bottom:0;left:-4rem;width:calc(100% + 8rem);background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0)) 0 0/3rem 100% no-repeat;pointer-events:none;animation:sheen 3.6s ease-in-out 1s infinite}
@keyframes sheen{0%{transform:none}35%,100%{transform:translateX(calc(100% - 3rem))}}
@media (prefers-reduced-motion:reduce){.btn.gold::after{animation:none;display:none}.clubsheet .cnight i{animation:none}}
button.card.promo{width:100%;font:inherit;color:inherit;text-align:left}
.opt.plan .grow,.opt.pack .grow{flex:1;min-width:0}
.opt.plan b,.opt.pack b{display:block;font-weight:400}
.opt.plan small,.opt.pack small{display:block;font-size:.82rem;color:#a0756b;line-height:1.25}
.opt.pack>svg{width:2.1rem;height:2.1rem;flex:none}
.opt.pack s{font-size:.82rem;color:#a0756b}
.opt.pack .pp{flex:none;padding:.12rem .55rem;border-radius:.75rem;background:var(--butter);border:.12rem solid var(--ink);font-size:.92rem;white-space:nowrap}
.ptag{flex:none;padding:.08rem .5rem;border-radius:.7rem;background:var(--leaf);border:.1rem solid var(--ink);font-size:.78rem;white-space:nowrap}
.sheet>.foot.col{flex-direction:column;align-items:stretch;gap:.35rem}
.sheet>.foot.col>.link{align-self:center;padding:.15rem .5rem;font-size:.85rem}
.fine{margin:0;font-size:.76rem;line-height:1.35;color:#a0756b;text-align:center}
.finelinks{display:flex;flex-wrap:wrap;justify-content:center;font-size:.82rem}
/* the Club gift ticket beside Buy (js/screens/giftuse.js): its own line under the buy row */
.sheet>.foot.wrap{flex-wrap:wrap}.sheet>.foot .btn.giftuse{flex:1 1 100%;order:9}
/* the gift ticket's picks (js/screens/clubgift.js): an animal's face and a room theme's view, the same frames as the closet and decorate */
.giftpicks .item .art .face{width:100%;height:100%;object-fit:contain}
.giftpicks .item .art.gthumb{position:relative;width:3.4rem;height:3.4rem;margin:.1rem auto .25rem;border-radius:.9rem;border:.13rem solid var(--ink);overflow:hidden;box-shadow:0 .14rem 0 rgba(120,70,40,.18)}.giftpicks .art.gthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finelinks .link{padding:.15rem .4rem}
.starterart{position:relative;width:6.5rem;height:6.5rem;margin:.4rem auto;display:grid;place-items:center}
.starterart svg{position:relative;width:5.4rem;height:5.4rem;animation:float 2.4s ease-in-out infinite}
.starterart .glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(#fff3bf 0,#fbe08a 45%,transparent 70%);animation:lglow 2.6s ease-in-out infinite}
.result .vid{display:flex;align-items:center;gap:.5rem;margin-top:.45rem}
.result .vid .btn{flex:1;min-height:2.3rem}
.result .vid .btn svg{width:1.1rem;height:1.1rem}
.result .clubline{display:block;margin-top:.35rem;font-size:.82rem;color:#a0756b;text-align:center}
.result .clubline .link{padding:0 .2rem;font-size:.82rem}
html.calm .clubhero .hart svg,html.calm .starterart *{animation:none}
@media (prefers-reduced-motion:reduce){.clubhero .hart svg,.starterart *{animation:none}}
.odds{font-size:.8rem;color:#a0756b;line-height:1.45}
.timer-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .5rem;border-radius:.7rem;background:#fde3d6;border:.1rem solid rgba(138,93,85,.3);font-size:.78rem}

/* ---------- reveal (new item / unlocked place) ---------- */
#reveal{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:2rem 1rem;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(255,240,190,.97),rgba(249,227,162,.97) 45%,rgba(240,190,120,.97));opacity:0;pointer-events:none;transition:opacity .3s}
#reveal.on{opacity:1;pointer-events:auto}
#reveal .rays{position:absolute;left:50%;top:42%;width:46rem;height:46rem;margin:-23rem 0 0 -23rem;background:repeating-conic-gradient(rgba(255,255,255,.4) 0 7deg,transparent 7deg 18deg);border-radius:50%;animation:spin 22s linear infinite;-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%)}
@keyframes spin{to{transform:rotate(360deg)}}
#reveal .eyebrow{position:relative;font-size:1.1rem;color:#a0756b;letter-spacing:.08em}
#reveal .art{position:relative;width:11rem;height:11rem;animation:float 2.6s ease-in-out infinite,bounce .6s var(--pop) both}
#reveal .art img{width:100%;height:100%;object-fit:cover;border-radius:1.4rem;border:.22rem solid var(--ink);box-shadow:var(--shadow)}
@keyframes float{50%{transform:translateY(-.5rem) rotate(2deg)}}
#reveal h2{position:relative;margin:0;font-weight:400;font-size:2.4rem;color:#fff6ec;-webkit-text-stroke:.3rem var(--ink);paint-order:stroke fill;line-height:1.05}
#reveal p{position:relative;margin:0;max-width:22rem;line-height:1.35}
#reveal .btns{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-top:.5rem;width:100%;max-width:18rem}

/* ---------- passport: warm paper with fine guilloche and a faint rosette, the photo held by corners, an inked stamp over its corner ---------- */
.passport{--pw:4.9rem;--ph:calc(var(--pw) * 1.1786);--stamp:#8e4964;position:relative;text-align:left;border-radius:.95rem;border:.2rem solid var(--ink);padding:0 .6rem;box-shadow:var(--shadow);overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cellipse id='e' cx='50' cy='50' rx='47' ry='15'/%3E%3C/defs%3E%3Cg fill='none' stroke='%238a5d55' stroke-opacity='.075' stroke-width='.35'%3E%3Cuse href='%23e' transform='rotate(0 50 50)'/%3E%3Cuse href='%23e' transform='rotate(12 50 50)'/%3E%3Cuse href='%23e' transform='rotate(24 50 50)'/%3E%3Cuse href='%23e' transform='rotate(36 50 50)'/%3E%3Cuse href='%23e' transform='rotate(48 50 50)'/%3E%3Cuse href='%23e' transform='rotate(60 50 50)'/%3E%3Cuse href='%23e' transform='rotate(72 50 50)'/%3E%3Cuse href='%23e' transform='rotate(84 50 50)'/%3E%3Cuse href='%23e' transform='rotate(96 50 50)'/%3E%3Cuse href='%23e' transform='rotate(108 50 50)'/%3E%3Cuse href='%23e' transform='rotate(120 50 50)'/%3E%3Cuse href='%23e' transform='rotate(132 50 50)'/%3E%3Cuse href='%23e' transform='rotate(144 50 50)'/%3E%3Cuse href='%23e' transform='rotate(156 50 50)'/%3E%3Cuse href='%23e' transform='rotate(168 50 50)'/%3E%3Cpath d='M20 4c5.6 0 9.2 4.1 8.7 9-.3 2.8-2.4 4.3-2.4 7.2 0 2.8 2.7 4.6 2.7 8.2 0 5.1-4.3 8.4-9 8.4s-9-3.3-9-8.4c0-3.6 2.7-5.4 2.7-8.2 0-2.9-2.1-4.4-2.4-7.2C10.8 8.1 14.4 4 20 4z' transform='rotate(-16 50 50) translate(38 37.8) scale(.6)' stroke-opacity='.13' stroke-width='1.3'/%3E%3Ccircle cx='50' cy='50' r='48' stroke-dasharray='1 1.6'/%3E%3C/g%3E%3C/svg%3E") right -1.2rem top 1.6rem/7.6rem 7.6rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='18'%3E%3Cg fill='none' stroke='%238a5d55' stroke-opacity='.07' stroke-width='.6'%3E%3Cpath d='M0 9c8-8 24-8 32 0s24 8 32 0'/%3E%3Cpath d='M0 9c8 8 24 8 32 0s24-8 32 0'/%3E%3Cpath d='M0 0c8 5 24 5 32 0s24-5 32 0M0 18c8-5 24-5 32 0s24 5 32 0' stroke-opacity='.045'/%3E%3C/g%3E%3C/svg%3E") 0 0/4rem 1.125rem,
    linear-gradient(160deg,#fffaf0,#fcf0da 60%,#f8e7c9)}
.passport .hd{display:flex;align-items:center;gap:.42rem;margin:0 -.6rem;padding:.3rem .6rem;background:linear-gradient(rgba(240,182,110,.38),rgba(240,182,110,.2));border-bottom:.12rem solid rgba(138,93,85,.4)}
.passport .crest{flex:none;width:1.6rem;height:1.6rem;padding:.2rem;border-radius:50%;background:#fff7e6;border:.12rem solid var(--ink);box-shadow:inset 0 0 0 .1rem #fff7e6,inset 0 0 0 .18rem rgba(138,93,85,.3)}
.passport .tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.05}
.passport .tt b{font-weight:400;font-size:.84rem;letter-spacing:.06em;line-height:1.15;text-wrap:balance;overflow-wrap:anywhere}
.passport .tt small{font-size:.58rem;color:#a0756b;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.passport .no{flex:none;padding:.08rem .28rem;border:.1rem dashed rgba(178,84,64,.5);border-radius:.3rem;font:700 .64rem/1.2 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.06em;color:#b25440;background:rgba(255,250,240,.55)}
.passport .bd{display:flex;gap:.65rem;padding:.55rem 0 .4rem}
.passport .idc{position:relative;flex:none;width:var(--pw);padding-bottom:1.75rem}
.passport .pic{position:relative;height:var(--ph)}
.passport .photo{position:absolute;inset:0;border-radius:.28rem;background:#a8c98d;overflow:hidden;border:.12rem solid rgba(138,93,85,.55);box-shadow:0 0 0 .16rem rgba(255,251,242,.9),0 .1rem .35rem .08rem rgba(110,64,40,.16)}
.passport .photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .12rem rgba(255,255,255,.28),inset 0 .1rem .45rem rgba(80,44,28,.28);pointer-events:none}
.passport .photo img{display:block;width:100%;height:100%;object-fit:cover}
.passport .pic i{position:absolute;width:.9rem;height:.9rem;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 2h16L2 18z' fill='%23efd6a6' stroke='%238a5d55' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5 5h6M5 5v6' stroke='%23fff6e2' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.passport .pic i:nth-of-type(1){left:-.26rem;top:-.26rem}
.passport .pic i:nth-of-type(2){right:-.26rem;top:-.26rem;transform:scaleX(-1)}
.passport .pic i:nth-of-type(3){right:-.26rem;bottom:-.26rem;transform:scale(-1)}
.passport dl{flex:1;min-width:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .6rem;align-content:start}
.passport .f{min-width:0}
.passport .f.nil:not(:has(.lit)){display:none}
.passport dt{font-size:.56rem;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;color:#a27c6c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a long value (Spanish "Habitante fundador", a Portuguese date) wraps onto a second line instead of losing its end */
.passport dd{margin:0;font-size:.84rem;line-height:1.2;min-height:1.2em;overflow-wrap:anywhere;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:background .3s}
/* scripts without capitals read small at the label size */
:is(:lang(ko),:lang(ja),:lang(zh),:lang(hi),:lang(bn),:lang(ta),:lang(te),:lang(mr),:lang(th)) .passport dt{font-size:.62rem;letter-spacing:.02em}
.passport .f-name dd{font-size:.98rem;line-height:1.15}
.passport dd.lit{background:#fdebc3;border-radius:.2rem}
.passport dd .dim{display:inline-flex;align-items:center;gap:.2rem;color:#a0756b}
.passport dd .dim svg{width:.75rem;height:.75rem;flex:none}
.passport .mrz{display:block;box-sizing:content-box;width:100%;height:auto;margin:0 -.6rem;padding:.3rem .6rem .32rem;background:linear-gradient(#f4e6cb,#f1e0c2);border-top:.12rem solid rgba(138,93,85,.2);font:500 11.5px ui-monospace,'SF Mono',Menlo,Consolas,monospace;fill:#7a5a4f;overflow:visible}
.passport .spot{position:absolute;left:-.6rem;top:calc(var(--ph) - 1.65rem);width:3.4rem;height:3.4rem;border-radius:50%;border:.1rem dashed rgba(138,93,85,.22);transition:opacity .3s}
.passport.sealed .spot{opacity:0}
.passport .seal{position:absolute;left:-.8rem;top:calc(var(--ph) - 1.85rem);width:3.8rem;height:3.8rem;color:var(--stamp);mix-blend-mode:multiply;opacity:0;pointer-events:none;transform:rotate(9deg)}
.passport.sealed .seal{opacity:.88}
.passport.sealed:not(.still) .seal{animation:seal .6s .15s cubic-bezier(.3,.7,.3,1) both}
@keyframes seal{0%{opacity:0;transform:translate(.3rem,-.45rem) scale(1.3) rotate(15deg)}55%{opacity:.96;transform:scale(.965) rotate(8.6deg)}100%{opacity:.88;transform:scale(1) rotate(9deg)}}
.steps{display:flex;gap:.25rem;margin:.1rem 0 .6rem}
.steps i{flex:1;height:.4rem;border-radius:.3rem;background:rgba(138,93,85,.16);transition:background .3s}
.steps i.on{background:#e8a35e}
.opts{display:flex;flex-direction:column;gap:.45rem}
.opt{appearance:none;width:100%;text-align:left;padding:.65rem .85rem;border-radius:1rem;border:var(--lw) solid var(--ink);background:var(--paper);font:inherit;font-size:1.05rem;color:var(--ink);cursor:pointer;box-shadow:0 .2rem 0 var(--ink);transition:transform .1s,box-shadow .1s,background .2s;display:flex;align-items:center;gap:.5rem}
.opt:active{transform:translateY(.15rem);box-shadow:0 .05rem 0 var(--ink)}
.opt[aria-pressed=true]{background:var(--butter)}
.opt .ic{width:1.6rem;height:1.6rem;flex:none}
.qa{animation:qa .4s var(--ease) both}
@keyframes qa{from{transform:translateX(1.5rem);opacity:0}}

/* species picker */
/* two rows that scroll sideways: the whole cast fits without a long list */
.species{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:4.4rem;gap:.45rem;overflow-x:auto;padding:.2rem .1rem .6rem;scroll-snap-type:x proximity;touch-action:pan-x;scrollbar-width:none}
.species::-webkit-scrollbar{display:none}
.species.few{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(var(--c),minmax(0,5.2rem));justify-content:center;gap:.4rem;overflow:visible;touch-action:auto}
.species.few .sp{min-width:0;overflow:hidden;white-space:nowrap;font-size:min(.82rem,3.3vw);line-height:1.1;padding-left:.1rem;padding-right:.1rem}.species.few .sp.long{white-space:normal;hyphens:auto;text-align:center;font-size:min(.7rem,2.8vw)}.species.few .sp .ic{max-width:100%;aspect-ratio:1;height:auto}
.sp{scroll-snap-align:center;appearance:none;padding:.35rem .2rem .3rem;border-radius:1rem;border:var(--lw) solid var(--ink);background:var(--paper);font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.15rem;transition:transform .14s var(--pop)}
.sp .ic{width:3rem;height:3rem}
/* closet animal tiles: a new release's focus-together bar (as .item.bdg .bar) and a Golden Path animal's season tag */
.sp .bar{width:78%;height:.42rem;border-width:.1rem}
.sp .sptag{font-size:.66rem;line-height:1.15;text-align:center}
.sp[aria-pressed=true]{background:var(--butter);transform:translateY(-.2rem)}

/* ---------- phone-like menu (the satchel) ---------- */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem .4rem;padding:.2rem 0}
.app{appearance:none;border:0;background:none;font:inherit;color:var(--ink);font-size:.9rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;position:relative;transition:transform .14s var(--pop)}
.app:active{transform:scale(.9)}
.app .sq{width:4rem;height:4rem;border-radius:1.15rem;border:var(--lw) solid var(--ink);display:grid;place-items:center;box-shadow:var(--shadow)}
.app .sq .ic{width:2.6rem;height:2.6rem}
.app .badge{right:.6rem;top:-.2rem}
.clockhead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:.7rem;padding:.6rem .7rem;border-radius:1rem;background:linear-gradient(#5b6f9a,#7d8fb8);color:#fff6ec;border:.16rem solid var(--ink)}
.clockhead[data-sky=dawn]{background:linear-gradient(#8f6a8c,#c08484)}.clockhead[data-sky=dusk]{background:linear-gradient(#9c5f4c,#c9834f)}.clockhead[data-sky=night]{background:linear-gradient(#2c3356,#474d7a)}
.clockhead .tm{font-size:2.4rem;line-height:1}
.clockhead small{display:block;font-size:.85rem;opacity:.9}
.clockhead .wd{text-align:right;font-size:.85rem;line-height:1.35}

/* ---------- stats & calendar ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.kpi{padding:.5rem .4rem;border-radius:.9rem;background:var(--paper);border:.14rem solid rgba(138,93,85,.35);text-align:center;line-height:1.15}
.kpi b{display:block;font-weight:400;font-size:1.35rem}
.kpi small{color:#a0756b;font-size:.75rem}
/* stats: rows with a bar sized against the top one, a small place picture, and the club cards shown as a sample */
.srow{flex-wrap:nowrap}
.srow .sname{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.srow .sname b{font-weight:400;flex:none}
.srow>.grow{display:block;min-width:0}
.srow .bar{display:block;height:.55rem;margin-top:.3rem;border-width:.1rem}
.sthumb{flex:0 0 3.1rem;height:2.2rem;border-radius:.5rem;overflow:hidden;border:.13rem solid var(--ink)}
.sthumb>*{width:100%;height:100%}
.sthumb.sico{display:grid;place-items:center;background:#f7ead6}.sthumb.sico>svg{width:1.5rem;height:1.5rem}
.bars{display:flex;align-items:flex-end;gap:.3rem;height:7.5rem;padding:.4rem .2rem 0}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:.7rem;color:#a0756b;gap:.15rem}
.bars .b i{display:block;width:100%;border-radius:.4rem .4rem .15rem .15rem;background:var(--butter);border:.12rem solid var(--ink);min-height:.2rem;transform-origin:50% 100%;animation:grow .6s var(--ease) both}
.bars .b.today i{background:#f0a35e}
@keyframes grow{from{transform:scaleY(0)}}
.heat{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:.18rem}
.heat i.soon{background:none}
.heatkey{align-items:center;gap:.3rem}.heatkey i{width:.7rem;height:.7rem;border-radius:.2rem;background:#efe3cc}.heatkey .l1{background:#f7dc9b}.heatkey .l2{background:#f3c26a}.heatkey .l3{background:#e8a35e}.heatkey .l4{background:#d9824a}
.heat i{aspect-ratio:1;border-radius:.2rem;background:#efe3cc}
.heat i.l1{background:#f7dc9b}.heat i.l2{background:#f3c26a}.heat i.l3{background:#e8a35e}.heat i.l4{background:#d9824a}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.2rem;text-align:center}
.cal .h{font-size:.72rem;color:#a0756b;padding-bottom:.15rem}
.cal .d{position:relative;min-height:3.1rem;border-radius:.6rem;background:var(--paper);border:.1rem solid rgba(138,93,85,.2);font-size:.78rem;padding:.15rem .1rem;line-height:1.1;display:flex;flex-direction:column;align-items:center;gap:.05rem}
.cal .d.out{opacity:.35}
.cal .d.today{border:.16rem solid var(--ink);background:#fdebc3}
.cal .d .ic{width:1.15rem;height:1.15rem}
.cal .d .m{font-size:.64rem;color:#b06c3a}
.cal .d .goal{font-size:.58rem;color:#8f7266;border:.08rem dashed rgba(138,93,85,.45);border-radius:.3rem;padding:0 .12rem}
.legend{display:flex;gap:.6rem;flex-wrap:wrap;font-size:.75rem;color:#a0756b;margin-top:.4rem}
.pie{width:7.5rem;height:7.5rem;border-radius:50%;border:.16rem solid var(--ink);flex:none;display:grid;place-items:center;position:relative}
.pie::before{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--paper);border:.16rem solid var(--ink)}
.pie span{position:relative;text-align:center;line-height:1;font-size:1.1rem}.pie small{display:block;font-size:.7rem;color:#a0756b;margin-top:.15rem}
.pielist{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}
.pielist span{display:flex;align-items:center;gap:.3rem}
.pielist .dot{width:.7rem;height:.7rem;border-radius:50%;border:.1rem solid var(--ink)}

/* ---------- mail ---------- */
.mail{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.mail .env{width:2.6rem;height:2.6rem;flex:none}
.mail .grow{flex:1;min-width:0;line-height:1.25}
.mail .grow b{font-weight:400;display:block}
.mail .grow small{color:#a0756b;font-size:.78rem}
.mail.unread{background:#fdebc3}
.mail.unread::after{content:"";position:absolute;right:.6rem;top:.6rem;width:.6rem;height:.6rem;border-radius:50%;background:#ef6f62;border:.1rem solid var(--ink)}
.letterbody{white-space:pre-line;line-height:1.53rem;text-align:left;font-size:.98rem;max-height:52vh;overflow:auto}
/* a long letter scrolls inside its paper: the ruled lines live on the text box itself (attachment local), one under every line of text, so they move with the words */
.letter:has(.letterbody){background:#fffaf3}
.letterbody{background:repeating-linear-gradient(transparent 0 1.45rem,#f0e2c8 1.45rem 1.53rem);background-attachment:local}

/* ---------- profile card for an animal you tapped ---------- */
#peek{position:fixed;left:50%;top:calc(.6rem + var(--sat));z-index:25;width:min(22rem,calc(100% - 1.2rem));transform:translate(-50%,-140%);transition:transform .38s var(--ease)}
#peek.on{transform:translate(-50%,0)}
#peek .card{padding:.65rem .75rem}
#peek .row .av{width:3.2rem;height:3.2rem;border-radius:.8rem;border:.15rem solid var(--ink);background:#a8c98d;flex:none;overflow:hidden;display:grid;place-items:center}
#peek .row .av .ic{width:2.6rem;height:2.6rem}
#peek b{font-weight:400;font-size:1.1rem}
#peek .kv{display:flex;gap:.4rem;flex-wrap:wrap;margin:.45rem 0 .2rem;font-size:.82rem}
#peek .kv span{padding:.1rem .45rem;border-radius:.6rem;background:#f6ecd8;border:.08rem solid rgba(138,93,85,.25)}
#peek .pnav{flex:none;width:2.4rem;padding:0;justify-content:center}
#peek .pnav svg{transform:rotate(90deg)}
#peek .pnav.next svg{transform:rotate(-90deg)}
#peek .dream{font-size:.9rem;line-height:1.3;padding:.4rem .5rem;border-radius:.7rem;background:#fff2f0;border:.1rem dashed rgba(200,90,80,.5);margin-top:.35rem}

/* ---------- mixer ---------- */
.mix{display:flex;align-items:center;gap:.55rem;padding:.35rem 0}
.mix .ic{width:2rem;height:2rem;flex:none}
.mix .nm{flex:0 0 5.6rem;font-size:.95rem}
.mix .pc{flex:0 0 2.4rem;text-align:right;font-size:.8rem;color:#a0756b}
.stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
.station{appearance:none;text-align:left;padding:.5rem .55rem;border-radius:.95rem;border:var(--lw) solid var(--ink);background:var(--paper);font:inherit;color:var(--ink);cursor:pointer;display:flex;gap:.45rem;align-items:center;line-height:1.15}
.station .ic{width:2.3rem;height:2.3rem;flex:none}
.station small{display:block;color:#a0756b;font-size:.74rem;text-wrap:balance}
.station>span:last-child{text-wrap:balance}
.station[aria-pressed=true]{background:var(--butter)}

/* ---------- pass (Peanut Path) ----------
   A season banner, then one row per tier: free card | tier on the rail | Golden Path card (js/screens/quests.js rows()).
   The row you last reached is framed and the minutes to the next tier sit under it; the rail is green up to there, dotted after. */
.rw{position:relative}
.rw .ic.done{width:1.5rem;height:1.5rem;padding:.12rem;border-radius:50%;background:var(--leaf);border:.13rem solid var(--ink);animation:mpop .35s cubic-bezier(.3,1.6,.5,1) both}
/* banner: the season's key art (a still, with its loop over it once it plays), the title and two pills on top */
.pban{position:relative;height:12.2rem;margin-top:.1rem;border-radius:1.4rem;border:.16rem solid var(--ink);overflow:hidden;background:#8f8ac6;isolation:isolate}
.pban .bart,.pban .bvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none}
.pban .bvid{opacity:0;transition:opacity .4s}
.pban.playing .bvid{opacity:1}
.pban .ptl{position:absolute;z-index:3;left:.85rem;top:.6rem;font-size:2.15rem;line-height:1;color:#fff6ec;-webkit-text-stroke:.36rem var(--ink);paint-order:stroke fill}
.pban .pdl,.pban .pjoin{position:absolute;z-index:3;bottom:.6rem;display:flex;align-items:center;gap:.3rem;min-height:2.1rem;padding:0 .8rem;border-radius:1.05rem;border:.15rem solid var(--ink);font-size:.9rem;color:var(--ink)}
.pban .pdl{left:.6rem;background:#fff8ea}
.pban .pjoin{right:.6rem;background:var(--butter);box-shadow:0 .18rem 0 var(--ink);font:inherit;font-size:.9rem;cursor:pointer}
.pban .pjoin.on{box-shadow:none;cursor:default;background:#fdebc3}
.pban .pdl svg,.pban .pjoin svg{width:1rem;height:1rem;flex:none}
.pban .pjoin:active{transform:translateY(.12rem);box-shadow:0 .06rem 0 var(--ink)}
/* season name between two little clouds, then the line under it */
.pseas{text-align:center;margin:.75rem 0 .1rem}
.pseas b{display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:400;font-size:1.55rem;line-height:1.1}
.pseas .pcl{width:2.2rem;height:1.2rem;flex:none}.pseas .pcl:last-child{transform:scaleX(-1)}
.pseas small{display:block;margin-top:.2rem;font-size:.88rem;color:#a0756b}
/* the whole season as one pill: tier reached, green track, last tier */
.pprog{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;padding:.45rem .8rem;border-radius:1.3rem;border:.15rem solid var(--ink);background:#fff8ea;font-size:.92rem;white-space:nowrap}
.pprog .ptrack{flex:1;height:.8rem;border-radius:.5rem;border:.13rem solid var(--ink);background:#f3e7d6;overflow:hidden}
.pprog .ptrack i{display:block;height:100%;background:#a8d48f;border-radius:.3rem;transition:width .6s var(--ease)}
/* lane names stay on top while the rows scroll */
.plane{position:sticky;top:-.95rem;z-index:3;display:grid;grid-template-columns:1fr 3.2rem 1fr;gap:0 .5rem;margin:.6rem -.85rem 0;padding:.6rem .85rem .45rem;background:var(--cream)}
.plane>span{display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:2.1rem;border-radius:1.05rem;border:.15rem solid var(--ink);background:#fff8ea;font-size:.95rem}
.plane>span.g{grid-column:3;background:linear-gradient(150deg,#fff1c6,#fbe0a0)}
.plane>span svg{width:1rem;height:1rem;flex:none}
/* the rewards slide softly under the lane names instead of being cut by a hard line */
.plane::after{content:"";position:absolute;left:0;right:0;top:100%;height:1rem;background:linear-gradient(var(--cream),rgba(255,246,236,0));pointer-events:none}
/* the list scrolls inside the sheet's rounded corners, so the lane names never poke square corners over its outline */
.pathsheet>.body{border-radius:inherit}
/* Claim all stays at the bottom while you scroll the path */
.pall{position:sticky;bottom:-1rem;z-index:4;margin:.2rem -.85rem -1rem;padding:1.1rem .85rem 1rem;background:linear-gradient(rgba(255,246,236,0),var(--cream) 45%);pointer-events:none}
.pall .btn{pointer-events:auto}
.prows{position:relative;padding:.2rem 0 .5rem}
.pr{position:relative;display:grid;grid-template-columns:1fr 3.2rem 1fr;gap:0 .5rem;align-items:center;padding:.4rem 0}
.pr::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:.4rem;margin-left:-.2rem;background:#a8d48f}
.pr.fut::before{width:.3rem;margin-left:-.15rem;background:radial-gradient(circle,rgba(138,93,85,.28) 0 .14rem,transparent .16rem) 50% 0/.3rem .62rem repeat-y}
.prows>.pr:first-child::before{top:50%}.prows>.pr:last-child::before{bottom:50%}
.pr .tn{position:relative;justify-self:center;width:2.5rem;height:2.5rem;border-radius:50%;border:.15rem solid var(--ink);background:#fffaf3;display:grid;place-items:center;font-size:1.05rem;z-index:1}
.pr .tn b{font-weight:400}
.pr.got .tn{background:#a8d48f}
.pr.cur .tn{width:3rem;height:3rem;font-size:1.2rem;background:var(--butter);box-shadow:0 0 0 .25rem var(--cream)}
.pr .tn .ray{position:absolute;inset:-.85rem;width:calc(100% + 1.7rem);height:calc(100% + 1.7rem);fill:none;stroke:#e2ae45;stroke-width:3;stroke-linecap:round;overflow:visible}
.pr.cur::after{content:"";position:absolute;inset:.1rem -.4rem;border-radius:1.35rem;border:.16rem solid #eec463;background:rgba(249,215,101,.13);pointer-events:none;z-index:0}
.pr>.pc,.pr>.tn{z-index:1}
.pr.fut .pc{opacity:.6}
.pr.fut .pc .art{filter:saturate(.8)}
/* a card: picture on top, name under it, Claim inside; check, lock or sparkle in the corners */
.pc{height:6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.4rem .4rem .45rem;border-radius:1.1rem;border:.14rem solid var(--ink);background:#fffaf3;box-shadow:0 .2rem 0 rgba(138,93,85,.16);text-align:center;min-width:0}
.pc .art{width:2.5rem;height:2.5rem;flex:none;display:grid;place-items:center}
.pc .art>*{width:100%;height:100%;object-fit:contain}
.pc .art>.heap{position:relative;display:block;width:128%;height:112%;flex:none}
.heap>svg{position:absolute;width:66%;height:66%}
.heap.h2>svg:nth-child(1){left:6%;top:24%;transform:rotate(-20deg)}
.heap.h2>svg:nth-child(2){left:30%;top:4%;transform:rotate(14deg)}
.heap.h3>svg{width:60%;height:60%}
.heap.h3>svg:nth-child(1){left:0;top:38%;transform:rotate(-22deg)}
.heap.h3>svg:nth-child(2){left:40%;top:38%;transform:rotate(20deg)}
.heap.h3>svg:nth-child(3){left:20%;top:4%;transform:rotate(-4deg)}
.pc .nm{font-size:.84rem;line-height:1.15;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc:not(:has(>.btn)) .nm{flex:none;white-space:normal;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.pc:has(>.btn) .art{width:1.7rem;height:1.7rem}
/* a card waiting to be claimed keeps the whole name (two short lines) so 'Pencil behind the ear' never loses its last word */
.pc:has(>.btn) .nm{flex:none;white-space:normal;text-wrap:balance;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.76rem;line-height:1.05}
.pc .ani{display:block;border-radius:50%;border:.13rem solid var(--ink);overflow:hidden}
.pc .ani .face{width:100%;height:100%;object-fit:contain}
/* a view out of the window as a reward: the same little rounded picture Decorate shows for it */
.pc .art>.bgpic{display:block;width:2.6rem;height:2.6rem;border-radius:.7rem;border:.13rem solid var(--ink);overflow:hidden;background:#f2d7de}
.pc .bgpic img{width:100%;height:100%;object-fit:cover;display:block}
.pc>.btn{margin:.1rem 0 0;min-height:1.6rem;padding:0 .95rem;font-size:.82rem;border-radius:.8rem;box-shadow:0 .14rem 0 var(--ink)}
.pc>.ic.done{position:absolute;right:.35rem;top:.35rem;width:1.4rem;height:1.4rem}
.pc.claimed .art{opacity:.55;filter:saturate(.7)}
/* the gold glow fades in and out on its own layer: animating box-shadow repainted the card every frame */
.pc.can{position:relative}
.pc.can::after{content:"";position:absolute;inset:-.14rem;border-radius:inherit;box-shadow:0 0 0 .25rem rgba(249,215,101,.5),0 0 .9rem .15rem rgba(249,215,101,.5);opacity:0;pointer-events:none;animation:pcGlow 1.8s ease-in-out infinite}
@keyframes pcGlow{50%{opacity:1}}
.pc .lkb,.pc .lk svg{position:absolute;right:.35rem;top:.35rem;width:1.45rem;height:1.45rem;padding:.2rem;border-radius:50%;background:#fffaf3;border:.13rem solid var(--ink);display:grid;place-items:center}
.pc .lkb svg{width:100%;height:100%}
.pc .lk{position:absolute;inset:0;border:0;background:none;padding:0;cursor:pointer;border-radius:inherit;z-index:2}
.pc.gold{background:linear-gradient(160deg,#fff4cf,#fde7a8 70%,#fbdf96)}
.pc.gold.big{background:linear-gradient(160deg,#ffeedd,#fcdcaa 70%,#f9cf92)}
.pc .spk{position:absolute;left:.4rem;top:.35rem;width:1.25rem;height:1.25rem}
.pc .spk svg{width:100%;height:100%}
.pgate{display:flex;justify-content:center;padding:.4rem 0;position:relative;z-index:1}
.pgate::before{content:"";position:absolute;left:50%;top:0;height:50%;width:.4rem;margin-left:-.2rem;background:#a8d48f;z-index:-1}
.pgate::after{content:"";position:absolute;left:50%;top:50%;bottom:0;width:.3rem;margin-left:-.15rem;background:radial-gradient(circle,rgba(138,93,85,.28) 0 .14rem,transparent .16rem) 50% 0/.3rem .62rem repeat-y;z-index:-1}
.prows>.pgate:first-child::before{display:none}
.pgate span{display:flex;align-items:center;gap:.3rem;padding:.28rem .85rem .32rem;border-radius:1rem;border:.14rem solid var(--ink);background:#fdebc3;font-size:.85rem}
.pgate svg{width:1rem;height:1rem}
@media (prefers-reduced-motion:reduce){.pc.can{animation:none}}

/* ---------- misc ---------- */
.spark{position:fixed;width:1.4rem;height:1.4rem;pointer-events:none;z-index:85;animation:sparkle .7s ease-out forwards}
@keyframes sparkle{from{transform:translate(-50%,-50%) scale(.2) rotate(0)}50%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(90deg);opacity:0}}
.confirm p{text-align:center}
/* the peanut swap (js/screens/short.js): a trade card, gold going out on the left, peanuts coming in on the right */
.confirm .swaptrade{display:flex;align-items:stretch;justify-content:center;gap:.4rem;margin-top:.75rem}
.confirm .sw{flex:1 1 0;max-width:9.5rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.55rem .4rem .5rem;border-radius:1rem;border:var(--lw) solid rgba(138,93,85,.25);background:var(--paper);color:var(--ink);line-height:1.15}
.confirm .sw .ic{width:2rem;height:2rem;display:block}
.confirm .sw .ic svg{width:100%;height:100%;display:block}
.confirm .sw small{font-size:.78rem;color:#a0756b}
.confirm .sw .d{font-weight:400;font-size:1.45rem}
.confirm .sw.out .d{color:#c0645a}
.confirm .sw.in .d{color:#5f9a4a}
.confirm .sw .w{font-size:.8rem;color:#a0756b;display:inline-flex;align-items:center;gap:.2rem}
.confirm .sw .w i{font-style:normal}
.confirm .swar{flex:none;align-self:center;width:1.5rem;height:1.5rem;color:var(--ink);opacity:.7}
.confirm .swar svg{width:100%;height:100%;display:block;transform:scaleX(-1)}
.center{text-align:center}
.mt{margin-top:.7rem}
.mb{margin-bottom:.6rem}
.kbd{display:inline-block;padding:0 .3rem;border-radius:.3rem;border:.1rem solid rgba(138,93,85,.4);font-size:.8rem}
/* the keyboard guide (js/hud.js openKeys): a card of rows like Settings, each name with its keys */
.kbsheet .kbic{width:3.6rem;height:3.6rem;margin:.1rem auto .2rem}
.kbsheet .card{text-align:start;margin-top:.6rem}
.kbsheet .kbds{display:flex;align-items:center;gap:.25rem;flex:none}
.kbsheet .kbds i{color:#a0756b;font-style:normal;margin:0 .2rem}
.kbsheet .kbd{font-family:inherit;min-width:1.8rem;padding:.1rem .4rem;text-align:center;background:var(--paper);font-size:.85rem;line-height:1.35;box-shadow:0 .12rem 0 rgba(138,93,85,.4)}
.kbsheet .kbd.wide{min-width:3.8rem}
/* the Shortcuts button is for a computer's keyboard only */
@media (hover:none),(pointer:coarse){#hud .kbOnly{display:none!important}}
.dim{color:#a0756b}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important}}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.12s!important}
/* the photo countdown's only visible moment is mid-animation, so with less motion it simply stands still (passport.js removes it) */
@media (prefers-reduced-motion:reduce){.banner.snapcd{animation:none!important;opacity:1}}html.calm .banner.snapcd{animation:none!important;opacity:1}
@media (min-width:900px) and (min-height:600px){.sheet{max-width:32rem}}
/* icons sitting inline next to numbers and labels */
.amt>svg,.price>svg,.btn>svg,.chip>svg,.boost>svg,.earn svg{width:1.15rem;height:1.15rem;flex:none}
.earn .amt>svg{width:2rem;height:2rem}
.btn>svg{width:1.4rem;height:1.4rem}
/* passport photo: a little viewfinder, tags tucked away */
body.snap #tags{opacity:0;transition:opacity .3s}
#vf{position:fixed;left:50%;top:38%;width:min(72vw,20rem);aspect-ratio:1;translate:-50% -50%;z-index:40;pointer-events:none;animation:bounce .45s var(--pop) both}
#vf i{position:absolute;width:2.4rem;height:2.4rem;border:.32rem solid #fff6ec;filter:drop-shadow(0 .14rem 0 rgba(138,93,85,.45))}
#vf i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:1rem 0 0 0}
#vf i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 1rem 0 0}
#vf i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 1rem}
#vf i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 1rem 0}
#vf .rec{position:absolute;left:50%;top:-2.2rem;transform:translateX(-50%);padding:.15rem .6rem;border-radius:1rem;background:#e86a5a;color:#fff6ec;font-weight:400;font-size:.9rem;letter-spacing:.12em;border:.13rem solid var(--ink)}
/* the passport ID booth (passport.js takePhoto): a portrait frame the shape of the passport's photo box, a little chip under it */
#vf.id{top:40%;width:min(64vw,17rem);aspect-ratio:5.6/6.6}
/* the photo booth's controls under the viewfinder: the poses as chips, a big round shutter like the Study button, a way out */
#booth{position:fixed;left:0;right:0;bottom:calc(1.1rem + var(--sab,0px));z-index:41;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:0 1rem;animation:bounce .45s var(--pop) both}
#booth[hidden]{display:none}
#booth .hint{padding:.2rem .8rem;border-radius:1rem;background:var(--paper);border:.14rem solid var(--ink);font-size:.95rem;box-shadow:var(--shadow)}
#booth .chips{flex-wrap:nowrap;gap:.3rem;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:.1rem .2rem .3rem}
#booth .chips::-webkit-scrollbar{display:none}
#booth .chip{flex:none;padding:.3rem .55rem;font-size:.9rem;box-shadow:var(--shadow)}
#booth .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:20rem}
#booth .shut{appearance:none;justify-self:center;width:4.8rem;height:4.8rem;padding:.55rem;border-radius:50%;background:var(--butter);border:var(--lw) solid var(--ink);box-shadow:var(--shadow),inset 0 -.42rem 0 var(--butter-dark);cursor:pointer;transition:transform .12s var(--pop)}
#booth .shut i{display:block;width:100%;height:100%;border-radius:50%;background:#fffaf0;border:.16rem solid var(--ink)}
#booth .shut:active{transform:scale(.92)}
#booth .out{appearance:none;justify-self:end;width:3rem;height:3rem;padding:.6rem;border-radius:50%;background:var(--paper);border:var(--lw) solid var(--ink);box-shadow:var(--shadow);cursor:pointer}
#booth .out svg{display:block;width:100%;height:100%}
#booth.busy{pointer-events:none}#booth.busy .shut{transform:scale(.92)}
body.idbooth #vf .cue{display:none}
#vf .cue{position:absolute;left:50%;top:calc(100% + .8rem);transform:translate(-50%,.3rem);white-space:nowrap;padding:.2rem .8rem;border-radius:1rem;background:var(--butter);border:.16rem solid var(--ink);font-size:1rem;opacity:0;transition:opacity .3s,transform .3s var(--ease)}
#vf.ready .cue{opacity:1;transform:translate(-50%,0)}
body.idbooth .banner.snapcd{bottom:calc(12% + var(--sab,0px))}
.booth.idflash{z-index:90}
.booth.idflash::after{background:#fffaf0}
.idprint .passport{animation:idprint .5s var(--ease) both}
@keyframes idprint{from{transform:translateY(1.2rem) rotate(-1.5deg);opacity:0}}
.passport .photo.dev img{animation:develop 1.8s .15s ease-out both}
@keyframes develop{from{filter:brightness(1.7) saturate(.2) contrast(.8);opacity:.4}55%{filter:brightness(1.15) saturate(.8)}to{filter:none;opacity:1}}
.banner.snapcd{font-size:5rem;top:auto;bottom:14%;animation:banner .7s cubic-bezier(.2,1.4,.4,1) forwards}
#run:not(.gone)~#toast,body:has(#run:not(.gone)) #toast{top:calc(8.5rem + var(--sat))}
#run.done .ring .fl{stroke:var(--butter-dark);transition:stroke-dashoffset .8s var(--ease),stroke .3s}#run.done .clock{animation:bump .5s var(--pop)}
/* the break card sits at the bottom so the town menus stay reachable */
#run.brk{top:auto;bottom:calc(.9rem + var(--sab))}
#run.brk.gone{transform:translate(-50%,160%)}
#run.brk .ring .fl{stroke:var(--sky)}
#run.brk .t{font-size:1.9rem;min-width:4.6rem}
#run.brk .btn{margin-left:.3rem}
#run.brk .what span{display:block;white-space:nowrap}
.tag.far{font-size:.7rem;padding:.06rem .35rem .08rem;background:rgba(255,246,236,.8)}.tag.far i{display:none!important}.tag.far::before{width:.55rem;height:.55rem}
/* wide screens: see-through sheets (timer setup, try-on, closet) sit on the right so your animal stays in view */
@media (min-width:900px){
  .layer.clear:not(.center):not(.top){justify-content:flex-end;align-items:center;padding:1.2rem 1.6rem}
  .layer.clear:not(.center):not(.top) .sheet{max-width:26rem;max-height:calc(100% - 2.4rem);transform:translateX(125%)}
  .layer.clear.open:not(.center):not(.top) .sheet{transform:none}
}
.quest .price{display:inline-flex;align-items:center;padding:.12rem .45rem;border-radius:.7rem;background:#fdebc3;border:.1rem solid rgba(138,93,85,.35);font-size:.85rem;opacity:.75;flex:none}.quest .price .amt>svg{width:1rem;height:1rem}
/* who is focusing with you: a tab under the timer, in the clock's own cream and ink, with their faces beside yours */
#run .with{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .8rem .25rem .3rem;border-radius:1.2rem;background:var(--cream);border:.15rem solid var(--ink);box-shadow:var(--shadow);color:var(--ink);opacity:0;transform:translateY(-.3rem);transition:opacity .4s,transform .4s var(--ease)}
#run .with{font:inherit;cursor:pointer;text-align:left}
#run .with:active{transform:scale(.97)}
#run .with.on{opacity:1;transform:none}
#run .with.bump{animation:bump .5s var(--pop)}
#run .with .ic{width:1.3rem;height:1.3rem;margin-left:.3rem}
#run .with .faces{display:flex;align-items:center;flex:none}
#run .with .faces i{width:1.85rem;height:1.85rem;border-radius:50%;overflow:hidden;background:#fff6ec;border:.13rem solid var(--ink);display:grid;place-items:center}
#run .with .faces i+i,#run .with .faces em{margin-left:-.55rem}
#run .with .faces i.me{border-color:#6fb487;background:#e1f1e6;position:relative;z-index:1}
#run .with .faces .face{width:120%;height:120%;object-fit:cover;object-position:50% 20%}
#run .with .faces em{font-style:normal;height:1.85rem;min-width:1.85rem;padding:0 .3rem;border-radius:1rem;background:var(--butter);border:.13rem solid var(--ink);display:grid;place-items:center;font-size:.78rem}
#run .with .wtx{display:flex;flex-direction:column;line-height:1.1;min-width:0}
#run .with .wtx b{font-weight:400;font-size:1rem;white-space:nowrap}
/* studying with a friend: double peanuts, a little butter pill like the +N one beside the faces */
#run .with .x2{flex:none;display:inline-flex;align-items:center;gap:.12rem;margin-left:.35rem;height:1.6rem;padding:0 .45rem 0 .3rem;border-radius:1rem;background:var(--butter);border:.13rem solid var(--ink);font-size:.85rem;line-height:1}
#run .with .x2 svg{width:1rem;height:1rem}
#run .with .wtx small{font-size:.78rem;color:#a0756b;white-space:nowrap}
#run.brk .with{display:none}
/* who is here */
.card.here{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;margin-bottom:.45rem;padding:.45rem .6rem}
.card.here:active{transform:scale(.98)}
.card.here.me{background:#fdebc3}
.card.here .av{width:2.7rem;height:2.7rem;border-radius:.7rem;border:.13rem solid var(--ink);flex:none;overflow:hidden;display:grid;place-items:center}
.onl .av{width:2.3rem;height:2.3rem;border-radius:.6rem;border:.13rem solid var(--ink);flex:none;overflow:hidden;display:grid;place-items:center}
[data-onl]:not(:empty){margin:.2rem 0 .6rem}
.card.here b{font-weight:400}
.card.here .hic{display:inline-block;width:.95rem;height:.95rem;vertical-align:-.15rem;margin-right:.2rem}
.card.here .grow{min-width:0}
.card.here .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.here .left{flex:none;font-size:.8rem;padding:.12rem .5rem;border-radius:99rem;background:#f3e6c9;color:var(--ink)}
/* the ring round each face fills as their focus goes; the timer ticks in steady digits */
.card.here .avr{flex:none;width:3.15rem;height:3.15rem;padding:.2rem;border-radius:.95rem;background:conic-gradient(#6fb487 calc(var(--k,0)*1turn),#ead9bb 0);display:grid;place-items:center}
.card.here .avr .av{width:100%;height:100%;border-radius:.75rem}
.card.here .left.clock{font-size:.9rem;min-width:3.6rem;text-align:center;font-variant-numeric:tabular-nums;padding:.18rem .55rem;border:.11rem solid rgba(138,93,85,.25)}
.card.here .left.clock.done{background:#d7eedd;color:#3f7a52;border-color:#9fcfae}
.card.here.me .left.clock{background:#fff6ec}
.card.here .frtag{display:inline-block;margin-left:.35rem;padding:0 .4rem;border-radius:99rem;background:#e1f1e6;color:#3f7a52;font-size:.7rem;vertical-align:.12rem}
.card.here.walk{cursor:default}
.card.here.walk:active{transform:none}
.card.here.walk .av{opacity:.95}
/* town board */
.card.here.news{cursor:default}
.card.here.news:active{transform:none}
.card.here .what{font-size:.95rem;line-height:1.25}
.card.here .what b{font-weight:400;color:#5f9a3e}
.card.here.sit .av{opacity:.85}
.card.here .clap{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:.12rem solid var(--ink);background:#fdebc3;padding:.35rem;cursor:pointer;box-shadow:0 .14rem 0 rgba(120,70,40,.25);transition:transform .15s,background .2s}
.card.here .clap:active{transform:scale(.9)}
.card.here .clap.done,.card.here .clap:disabled{background:#d8ecc4;opacity:.75;box-shadow:none;cursor:default}
.card.here .clap svg{width:100%;height:100%}
/* the ticker under the place chip */
#ticker{position:fixed;left:calc(.6rem + var(--sal));top:calc(7.35rem + var(--sat));display:flex;align-items:center;gap:.4rem;max-width:min(17rem,64vw);padding:.25rem .5rem .25rem .25rem;border-radius:.9rem;background:rgba(255,246,236,.92);border:.11rem solid rgba(138,93,85,.32);font:inherit;font-size:.8rem;line-height:1.15;color:var(--ink);text-align:left;cursor:pointer;pointer-events:none;opacity:0;transform:translateX(-115%) rotate(-2deg);transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
#ticker.on{opacity:1;transform:none;pointer-events:auto}
#hud.away #ticker{pointer-events:none}
#ticker .av{width:1.8rem;height:1.8rem;border-radius:.5rem;border:.1rem solid var(--ink);flex:none;overflow:hidden;display:grid;place-items:center}
#ticker b{font-weight:400}
#ticker small{display:block;color:#a0756b;font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11rem}
#ticker .ok{width:1.1rem;height:1.1rem;flex:none}
#ticker .ok svg{width:100%;height:100%}
.card.here.news{padding:.35rem .55rem;margin-bottom:.35rem}
.card.here.news .av{width:2.3rem;height:2.3rem}
.card.here.news.sit{background:transparent;border-color:rgba(138,93,85,.3);box-shadow:none}
/* leaderboard */
.card.rank{padding:.4rem .6rem;margin-bottom:.4rem;gap:.5rem}
.card.rank.me{background:#fdebc3}
.card.rank .no{width:1.6rem;text-align:center;font-size:1.05rem;flex:none;color:#a0756b}
.card.rank .no.p1,.card.rank .no.p2,.card.rank .no.p3{width:1.6rem;height:1.6rem;line-height:1.5rem;border-radius:50%;border:.12rem solid var(--ink);color:var(--ink);font-size:.9rem}
.card.rank .no.p1{background:#f9cf73}
.card.rank .no.p2{background:#e3e0dc}
.card.rank .no.p3{background:#e8b48a}
.card.rank .av{width:2.4rem;height:2.4rem;border-radius:.65rem;border:.13rem solid var(--ink);flex:none;overflow:hidden;display:grid;place-items:center}
.card.rank .grow{min-width:0}
.card.rank b{font-weight:400}
.card.rank .hic{display:inline-block;width:.9rem;height:.9rem;vertical-align:-.12rem;margin-right:.2rem}
.card.rank .left{flex:none;font-size:.85rem;padding:.12rem .5rem;border-radius:99rem;background:#f3e6c9;color:var(--ink)}
.card.mycode{margin-bottom:.6rem;display:flex;flex-direction:column;gap:.5rem;text-align:center}
.card.mycode .tiles{appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;display:flex;justify-content:center;gap:.35rem}
.card.mycode .tiles b{font-weight:400;width:2.6rem;height:3.1rem;display:grid;place-items:center;font-size:1.6rem;border:var(--lw) solid var(--ink);border-radius:.75rem;background:#fffdf6;box-shadow:0 .18rem 0 var(--ink)}
.card.mycode .tiles b:nth-child(odd){background:#fdebc3}
.card.mycode .tiles:active b{transform:translateY(.1rem);box-shadow:0 .08rem 0 var(--ink)}
.card.mycode .row .btn{flex:1 1 0;min-width:0}
.card.mycode .gift{text-align:left}
/* the dream letters fade out at the edges instead of being cut off */
#title .letters{-webkit-mask-image:linear-gradient(90deg,transparent,#000 1.6rem,#000 calc(100% - 1.6rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 1.6rem,#000 calc(100% - 1.6rem),transparent)}
@media (min-width:760px){#title .letters{max-width:52rem}}
/* on a wide screen every animal fits at once, no hidden scroll */
@media (min-width:900px){.species{scrollbar-width:thin}.species .sp{scroll-snap-align:none}}
.pin .lead{position:absolute;left:50%;top:100%;height:0;border-top:.16rem dashed rgba(138,93,85,.55);transform-origin:0 0;pointer-events:none;z-index:-1}
.pin .lead::after{content:'';position:absolute;right:-.3rem;top:-.38rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--paper);border:.14rem solid var(--ink)}
/* session postcard */
.keepsake .keep{display:block;width:100%;max-width:22rem;max-height:56vh;object-fit:contain;margin:0 auto;border-radius:.6rem;filter:drop-shadow(0 .25rem 0 rgba(120,70,40,.22));animation:keepin .55s var(--pop) both}
@keyframes keepin{from{transform:rotate(-4deg) scale(.86);opacity:0}to{transform:none;opacity:1}}
.result .foot .btn>svg{width:1.3rem;height:1.3rem}
/* neighbour album */
.albumhead{padding:.6rem .7rem}
.albumhead .big{font-size:2.1rem;line-height:1;flex:none;margin-right:.3rem}
.albumhead .big small{font-size:.95rem;color:#a0756b}
.albumhead b{font-weight:400}
.album{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem .5rem;margin-top:.8rem}
.stk{position:relative;appearance:none;font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.35rem .2rem .3rem;border-radius:.8rem;border:.13rem solid var(--ink);background:var(--paper);box-shadow:0 .14rem 0 rgba(120,70,40,.22);transform:rotate(var(--r,0deg));cursor:pointer;transition:transform .2s var(--pop)}
.stk:active{transform:rotate(0) scale(.94)}
.stk .av{width:3rem;height:3rem;border-radius:.6rem;border:.12rem solid var(--ink);overflow:hidden;display:grid;place-items:center}
.stk b{font-weight:400;font-size:.78rem;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stk i{position:absolute;top:-.45rem;right:-.35rem;min-width:1.2rem;height:1.2rem;padding:0 .25rem;border-radius:99rem;background:var(--butter);border:.1rem solid var(--ink);font-style:normal;font-size:.7rem;line-height:1.05rem}
.stk.off{background:transparent;border-style:dashed;border-color:rgba(138,93,85,.35);box-shadow:none;cursor:default}
.stk.off .av{border-style:dashed;border-color:rgba(138,93,85,.3);background:rgba(138,93,85,.06);padding:.6rem;opacity:.35}
.stk.off b{color:rgba(138,93,85,.45)}
.stk.big{width:6rem;cursor:default}
.stk.big .av{width:5rem;height:5rem}
/* a place's activity book (js/screens/actbook.js): the album's stickers, three across so the longer names fit on two lines */
.actbook .album{grid-template-columns:repeat(3,minmax(0,1fr))}
.actbook .stk b{white-space:normal;text-align:center;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.3em}
.actbook .stk .av svg{width:72%;height:72%}
.actbook .stk.off{cursor:pointer}.actbook .stk.off .av svg{filter:brightness(0)}
.stk.big.act .av svg{width:72%;height:72%}
.kvs{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;font-size:.82rem}
.kvs span{padding:.12rem .5rem;border-radius:.6rem;background:#f6ecd8;border:.08rem solid rgba(138,93,85,.25)}
.dream{font-size:.9rem;line-height:1.3;padding:.45rem .6rem;border-radius:.7rem;background:#fff2f0;border:.1rem dashed rgba(200,90,80,.5)}
/* ten apps sit in two tidy rows */
.apps{grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem .2rem}
.app{font-size:.78rem}
.app .sq{width:3.3rem;height:3.3rem;border-radius:1rem}
.app .sq .ic{width:2.15rem;height:2.15rem}
.app .badge{right:.1rem}

/* ?snap mode: just the painted place, for thumbnails */
.snap #tags,.snap #hud,.snap #dock,.snap .toast{display:none!important}
/* place thumbnails: the painted shot over its drawing */
.pimg{position:relative;display:block;width:100%;height:100%}
.pimg svg{width:100%;height:100%;display:block}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* a place in the reveal is a landscape painting, not an icon */
#reveal .art:has(.pimg){width:min(80vw,19rem);height:auto;aspect-ratio:4/3}
#reveal .art .pimg img{border:0;border-radius:0;box-shadow:none}
/* an outfit picture inside its framed card (Path, notebook gift, pouch, a friend's parcel, legendary) has the card's frame only */
#reveal .art>div>img.fit{border:0;border-radius:0;box-shadow:none;object-fit:contain}
.snap #title{background:none}
/* the close button stays put while a sheet scrolls, so give it paper to sit on */
.sheet .x{background:var(--cream);border-radius:50%}
/* add to home screen coach */
.appicon{width:4.6rem;height:4.6rem;border-radius:1.15rem;border:.18rem solid var(--ink);box-shadow:var(--shadow);display:block;margin:.2rem auto 0;animation:float 2.6s ease-in-out infinite}
.howto{display:block;text-align:left;margin:.8rem 0 0;padding:.7rem .9rem .7rem 2.1rem;background:var(--paper);border:.13rem solid rgba(138,93,85,.3);border-radius:1rem;line-height:1.5}
.howto li{display:list-item;margin:.15rem 0}.howto b{font-weight:400;color:var(--ink)}
/* the place's shared total, a quiet cooperative number rather than a ranking */
.together{display:flex;align-items:center;justify-content:center;gap:.35rem;width:fit-content;margin:-.2rem auto .7rem;padding:.25rem .75rem;border-radius:.9rem;background:#fde3e3;border:.13rem solid rgba(138,93,85,.25);font-size:.9rem;color:var(--ink)}
.together .ic{width:1.05rem;height:1.05rem}.together b{font-weight:400}

/* ---------- town map labels: a plaque per place, floating over the 3D island ---------- */
.mnode{position:absolute;transform:translate(-50%,-2.8rem);display:flex;flex-direction:column;align-items:center;appearance:none;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:mpop .5s var(--pop) both}
.mnode:nth-of-type(2){animation-delay:.05s}.mnode:nth-of-type(3){animation-delay:.1s}.mnode:nth-of-type(4){animation-delay:.15s}.mnode:nth-of-type(5){animation-delay:.2s}.mnode:nth-of-type(6){animation-delay:.25s}.mnode:nth-of-type(7){animation-delay:.3s}
@keyframes mpop{from{opacity:0;scale:.7}}
.mstar{position:absolute;top:-.3rem;left:-.35rem;width:2rem;height:2rem;border-radius:50%;background:var(--paper);border:.14rem solid var(--ink);display:grid;place-items:center;box-shadow:0 .12rem 0 rgba(120,70,40,.25);z-index:1;animation:bump .5s .4s var(--pop) both}.mstar svg{width:72%;height:72%}
@keyframes bob{50%{translate:0 -.25rem}}
.mlabel{position:relative;margin-top:-.7rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:7.5rem;max-width:10rem;padding:.2rem .6rem .3rem;border-radius:.75rem;background:var(--paper);border:.13rem solid var(--ink);box-shadow:0 .14rem 0 rgba(120,70,40,.25);line-height:1.15}
.mlabel b{font-weight:400;font-size:1rem;white-space:nowrap}
.mlabel small{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;color:#a0756b;text-align:center}
.mnode:not(.locked) .mlabel small{color:#5d8a3e}
.mlabel .live{width:.45rem;height:.45rem;border-radius:50%;background:#7fc35a;animation:livepulse 1.8s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.35}}
.mlabel .bar{width:100%;height:.45rem;margin-top:.1rem}
.mnode.locked .mlabel b{color:#8f7266}

/* ---------- live town: real people carry a green dot, residents a leaf ---------- */
.tag.person::before,.tag.resident::before{content:"";width:.5rem;height:.5rem;flex:none;border-radius:50%;background:#7fc35a;box-shadow:0 0 0 .12rem rgba(127,195,90,.3);animation:livepulse 1.8s ease-in-out infinite}
i.livedot{display:inline-block;width:.5rem;height:.5rem;margin-left:.35rem;border-radius:50%;background:#7fc35a;vertical-align:.12rem;animation:livepulse 1.8s ease-in-out infinite}
span.livedot{display:inline-flex;align-items:center;gap:.3rem;color:#5d8a3e}
span.livedot::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#7fc35a}
/* the first locked place on the map: what you are working toward */
.nextup{position:absolute;top:-.9rem;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:2;padding:.08rem .5rem;border-radius:.6rem;background:var(--butter);border:.12rem solid var(--ink);font-size:.72rem;white-space:nowrap;box-shadow:0 .1rem 0 rgba(120,70,40,.25);animation:bob 2s ease-in-out infinite}

/* ---------- saving up: the outfit you hearted, and how close you are ---------- */
.promo.saving{background:#fde3e3}
.promo.saving .art{width:3.6rem;height:3.6rem}
.promo.saving .bar{height:.6rem}
.btn.wish,.sheet>.foot .btn.wish{flex:none;width:3.4rem;padding-left:0;padding-right:0}
/* three buttons in one foot (Take off, Buy for, wish): less side padding and more room for the price, so neither label breaks */
/* a two-line button label splits evenly instead of leaving one word (or one kana) alone on the second line */
.sheet>.foot .btn{text-wrap:balance}
.sheet>.foot .btn.tight{padding-left:.6rem;padding-right:.6rem}.sheet>.foot .btn.buyfor{flex:1.7}
/* Take off, Buy for and the heart in one row (German, Ukrainian): Take off keeps its own width and no word is hyphenated across two lines */
.sheet>.foot:has(>.btn.wish)>.btn[data-off]{flex:0 1 auto}
/* a button label never splits a word with a hyphen ("Ent-/fernen"): it wraps between words, and breaks a word only when one alone cannot fit */
.sheet>.foot .btn{hyphens:manual}
/* next to a long buy label (French, Spanish, Portuguese) Cancel keeps just its own width, so the label fits on two lines */
.sheet>.foot:has(>.btn.buyfor)>.btn.cream:is([data-close],[data-cancel]){flex:0 1 auto;padding-left:1.1rem;padding-right:1.1rem}
/* a danger confirm (Delete my data in Dutch or Greek): Cancel keeps its own width so the long red label gets the room and stays on two lines */
.confirm>.foot:has(>.btn.rose)>.btn.cream[data-v="0"]{flex:0 1 auto;padding-left:1.1rem;padding-right:1.1rem}
/* a long buy label (a set in French, Spanish, Portuguese) steps down a size so it still fits on two lines */
.sheet>.foot .btn.long{font-size:.92rem;padding-left:.5rem;padding-right:.5rem}
.btn.wish svg{width:1.5rem;height:1.5rem;filter:grayscale(1) opacity(.45);transition:filter .2s,transform .3s var(--pop)}
.btn.wish[aria-pressed=true] svg{filter:none;transform:scale(1.15)}
.btn.wish.giftb svg{filter:none}
.result .saving{display:flex;align-items:center;gap:.55rem;margin:.6rem auto 0;max-width:17rem;padding:.4rem .6rem;border-radius:.9rem;background:#fde3e3;text-align:left}
.result .saving .art{width:2.4rem;height:2.4rem;flex:none}
.result .saving small{display:block;font-size:.78rem;color:#a0756b;margin-bottom:.2rem}
.result .saving .bar{height:.55rem}
.result .saving>b{font-weight:400;font-size:.85rem;font-variant-numeric:tabular-nums}
.item .wished{position:absolute;left:-.35rem;top:-.45rem;width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:50%;background:#fde3e3;border:.1rem solid var(--ink);transform:rotate(-10deg)}
.item .wished svg{width:1.05rem;height:1.05rem}
.goals{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.goals .card{margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;min-height:4.2rem;line-height:1.3;text-align:left;font-size:.95rem}
.goals .card small{font-size:.75rem;color:#a0756b}
.goals .card.empty{background:transparent;border-style:dashed;border-color:rgba(138,93,85,.35);box-shadow:none}
.goals .card .dim{display:flex;align-items:center;gap:.3rem}
.goals .card .dim .i{flex:none;width:.9rem;height:.9rem}
.goals .card:active{transform:scale(.98)}
/* decorating: step between spots */
.spotnav{display:flex;align-items:center;justify-content:center;gap:.9rem}
.spotnav [data-next] svg{transform:scaleX(-1)}
.spotnav span{min-width:6.5rem;text-align:center;font-size:1.05rem}
[data-packrow] .link{margin-top:.45rem}

/* My Room: buttons that only make sense at home */
html:not(.athome) .homeOnly{display:none!important}
/* a friend's room (js/visit.js): the same screen as your own room, minus the tools that change your things there */
.visitOnly{display:none!important}
html.visiting .visitOnly{display:block!important}
html.visiting #dkShop,html.visiting #dkCloset,html.visiting #dkDecor,html.visiting #dkBag{display:none!important}
#placeChip .dot.out{background:#c9b3a8}
#placeChip .dot.out::after{display:none}
/* a friend joining live: a little banner drops in as they spring into the room (js/visit.js joinNote) */
.joinNote{position:fixed;left:50%;top:calc(7.7rem + var(--sat));z-index:65;display:flex;align-items:center;gap:.55rem;max-width:min(22rem,84vw);padding:.32rem .95rem .32rem .32rem;border-radius:1.05rem;background:rgba(255,246,236,.96);border:.11rem solid rgba(138,93,85,.32);box-shadow:0 .35rem .9rem rgba(91,59,46,.16);font-size:1rem;line-height:1.2;color:var(--ink);pointer-events:none;transform:translateX(-50%);animation:joinIn .62s cubic-bezier(.3,1.7,.55,1) both}
.joinNote.out{animation:joinOut .42s ease-in both}
.joinNote .jwin{position:relative;flex:none;width:2.4rem;height:2.4rem;border-radius:.75rem;border:.12rem solid var(--ink);overflow:hidden;background:linear-gradient(#ffd9e6,#fff1d6);display:grid;place-items:end center}
.joinNote .jwin>.face{width:2.15rem;height:2.15rem;margin-bottom:-.45rem;object-fit:contain;animation:joinFace .9s .25s cubic-bezier(.3,1.6,.5,1) both}
.joinNote .jt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.joinNote .jt b{font-weight:inherit;color:#c4646b}
.joinNote .jst{position:absolute;width:.9rem;height:.9rem;background:#f9d765;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:joinTw 1.1s ease-in-out both}
.joinNote .jst.a{left:-.35rem;top:-.4rem;animation-delay:.3s}
.joinNote .jst.b{right:-.3rem;top:-.25rem;width:.7rem;height:.7rem;background:#f5a3b5;animation-delay:.45s}
.joinNote .jst.c{right:1.4rem;bottom:-.45rem;width:.6rem;height:.6rem;animation-delay:.6s}
@keyframes joinIn{0%{opacity:0;transform:translate(-50%,-2.4rem) scale(.4)}55%{opacity:1}100%{transform:translate(-50%,0) scale(1)}}
@keyframes joinOut{to{opacity:0;transform:translate(-50%,-1rem) scale(.9)}}
@keyframes joinFace{0%{transform:translateY(1.6rem) scale(.6)}60%{transform:translateY(-.15rem) rotate(-8deg)}100%{transform:none}}
@keyframes joinTw{0%{opacity:0;transform:scale(0) rotate(0)}40%{opacity:1;transform:scale(1.25) rotate(60deg)}100%{opacity:0;transform:scale(.5) rotate(120deg)}}
@media (prefers-reduced-motion:reduce){.joinNote,.joinNote.out,.joinNote .jwin>.face,.joinNote .jst{animation-duration:.01s}}
/* the photo booth countdown over My Room */
.booth{position:fixed;inset:0;z-index:60;pointer-events:none;display:grid;place-items:center}
.booth .cd{font:400 min(34vw,11rem)/1 Jua,ui-rounded,system-ui,sans-serif;color:#fff8e6;text-shadow:.2rem .2rem 0 #8a5d55,-.2rem .2rem 0 #8a5d55,.2rem -.2rem 0 #8a5d55,-.2rem -.2rem 0 #8a5d55,0 .25rem 0 #8a5d55,0 -.25rem 0 #8a5d55,.25rem 0 0 #8a5d55,-.25rem 0 0 #8a5d55,0 .6rem 0 rgba(138,93,85,.35)}
.booth .cd.pop{animation:boothPop .8s cubic-bezier(.2,1.6,.4,1)}
.booth .tag{position:absolute;top:calc(env(safe-area-inset-top) + 1rem);left:50%;transform:translateX(-50%);font:400 1.3rem var(--font,Jua),ui-rounded,system-ui,sans-serif;color:#fff8e6;background:rgba(138,93,85,.75);padding:.25rem .9rem;border-radius:2rem}
.booth .tag:empty{display:none}
.booth.flash::after{content:'';position:absolute;inset:0;background:#fff;animation:boothFlash .6s ease-out forwards}
@keyframes boothPop{0%{transform:scale(.3);opacity:0}40%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:.9}}
@keyframes boothFlash{from{opacity:.95}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.booth .cd.pop{animation:none}.booth.flash::after{animation:none;opacity:0}}
/* decorating My Room: a slim drawer, the room stays touchable around it, buttons float over the piece you move */
.layer.passthru{pointer-events:none!important}
.layer.passthru .sheet{pointer-events:auto}
.sheet *{scrollbar-width:none}
.sheet *::-webkit-scrollbar{display:none}
/* the drawer wears the shop's look (.shop2): sub-tabs, pieces on wooden planks with their price tags, what you are trying adds up in the foot */
.sheet.decosheet{height:min(25rem,47%)}
.sheet.decosheet>.body{flex:1;padding-top:.7rem}
@media (min-width:900px){.layer.clear .sheet.decosheet{height:calc(100% - 2.4rem)}}
.decosheet .tabs{margin-bottom:.55rem}
.decosheet .tabs button{white-space:nowrap;padding:.4rem .3rem;font-size:.92rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
.decosheet .shelfrow .item{font-size:.8rem;gap:.12rem}
.decosheet .shelfrow .item .art{width:3.3rem;height:3.3rem;display:flex;align-items:center;justify-content:center}
.decosheet .shelfrow .item .art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.decosheet .shelfrow .item .art.swatch{width:2.9rem;height:2.9rem;margin:.2rem auto .3rem;border-radius:.8rem;border:.13rem solid var(--ink)}
.decosheet .shelfrow .item .art.swatch.round{border-radius:50%}
.decosheet .shelfrow .item .art .i{width:1.3rem;height:1.3rem}
.decosheet .item .nm{max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-height:1.1;text-align:center;overflow-wrap:anywhere}
.decosheet .item .price{font-size:.76rem}
.decosheet .item .arts{display:flex;gap:.15rem;justify-content:center}
.decosheet .shelfrow .item .arts .art{width:2.7rem;height:2.7rem}
.decosheet .shelfrow .item .arts .art.swatch{width:2.4rem;height:2.4rem;margin:.15rem 0 .3rem}
.decosheet .item small.sub{font-size:.7rem;margin-top:.1rem}
.decosheet .foot .decotip{align-self:center;font-size:.84rem;line-height:1.25}
.decosheet .foot .btn.leaf{flex:none}
.decosheet .foot .buyfor>span,.sheet>.foot [data-rest]>span{text-align:center}
.decosheet .foot .buyfor .amt,.sheet>.foot [data-rest] .amt{display:inline-flex;align-items:center;gap:.1rem;white-space:nowrap;vertical-align:-.1rem}
.decosheet .foot .buyfor.two{font-size:.84rem;line-height:1.15;padding-left:.45rem;padding-right:.45rem}.decosheet .foot .buyfor.two .ic{width:1.05rem;height:1.05rem}
.decosheet .item .price s{opacity:.55;margin-right:.1rem}
.decosheet .item .deal{position:absolute;left:.35rem;top:.35rem;z-index:2;padding:.02rem .4rem;border-radius:.6rem;background:#f2a698;border:.1rem solid var(--ink);color:#fff8ee;font-size:.74rem;transform:rotate(-5deg)}
.decosheet .shelfrow .item .art.bgthumb{position:relative;width:3.4rem;height:3.4rem;margin:.1rem auto .25rem;border-radius:.9rem;border:.13rem solid var(--ink);overflow:hidden;box-shadow:0 .14rem 0 rgba(120,70,40,.18)}
.decosheet .art.bgthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.decosheet .item.locked .art.bgthumb img{filter:saturate(.8) brightness(.97)}
.decosheet .art.bgthumb .lk{position:absolute;right:.12rem;bottom:.12rem;display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--paper);border:.1rem solid var(--ink)}
.decosheet .art.bgthumb .lk .i{width:.8rem;height:.8rem}
.decosheet .shelfrow .item .arts .art.bgthumb{width:2.4rem;height:2.4rem;margin:.15rem 0 .3rem;border-radius:.7rem}
/* a locked background: the lock and why sit in one line on the left, Cancel stays its own size on the right, like Done */
.decosheet .foot .decotip.lockwhy{display:flex;align-items:center;gap:.3rem;color:#8a6a62}
.decosheet .foot .decotip .i{flex:none;width:.95rem;height:.95rem;vertical-align:-.12rem;margin-right:.2rem}
.decosheet .foot .decotip.lockwhy .i{margin-right:0}
.decosheet .foot.lockfoot{flex-wrap:wrap;row-gap:.45rem}
.decosheet .foot.lockfoot .decotip.lockwhy{flex:1 0 100%;font-size:.8rem;padding:0 .15rem}
.decosheet .foot.lockfoot .decotip b{font-weight:400;color:var(--ink)}
.decosheet .foot.lockfoot .btn.cream{flex:none}
.decosheet .foot.lockfoot .btn.grow{gap:.3rem}.decosheet .foot.lockfoot .btn.grow .i{width:1.1rem;height:1.1rem;flex:none}
.placebar{position:fixed;left:0;top:0;z-index:40;display:none;flex-direction:column;align-items:center;gap:.25rem;pointer-events:auto;will-change:transform}
.placebar.on{display:flex}
.placebar .nm{padding:.1rem .6rem;border-radius:.8rem;background:rgba(255,248,230,.92);border:.11rem solid rgba(138,93,85,.35);font-size:.85rem;white-space:nowrap}
.placebar .btn.sm{min-width:2.6rem;justify-content:center}
.placebar .nm{display:inline-flex;align-items:center;gap:.15rem}.placebar .nm .i{flex:none;width:1rem;height:1rem}
.decohint{position:fixed;left:50%;top:calc(var(--sat,0px) + .8rem);transform:translateX(-50%);z-index:30;max-width:calc(100% - 2rem);padding:.35rem .9rem;border-radius:1rem;background:rgba(255,248,230,.92);border:.11rem solid rgba(138,93,85,.35);font-size:.88rem;text-align:center;pointer-events:none}

/* My Room: a plain name label over a friend dropping by (engine/roomlife.js) */
.roomname{position:absolute;left:0;top:0;font-size:.78rem;line-height:1;white-space:nowrap;color:#fffaf3;text-shadow:0 0 .12rem #8a5d55,0 0 .12rem #8a5d55,0 0 .12rem #8a5d55,0 .1rem .12rem rgba(70,40,30,.45);opacity:0;will-change:transform;pointer-events:none}
.roomname.on{opacity:var(--tf,1)}

/* passport privacy: a small lock on parts only you can see, and the note on a friend's card (js/screens/passport.js) */
.passport dd .pv,.kpi small .pv{display:inline-block;width:.75rem;height:.75rem;margin-left:.25rem;vertical-align:-.08rem;color:#a27c6c}
.sheet h3 small.pvtag{display:inline-flex;align-items:center;gap:.2rem}
.sheet h3 small.pvtag svg,.pvnote svg{width:.85rem;height:.85rem;flex:none}
.pvnote{display:flex;align-items:center;justify-content:center;gap:.3rem}
.chip[data-share][aria-pressed=false]{color:#a0756b;border-style:dashed}
html.nonames .roomname{display:none}

/* ---------- hand-wobbled outlines: only the line wavers (filter #wob in index.html), text and icons stay crisp ---------- */
.sheet,.card,.btn,.pill,#me,#placeChip,.chip,.item,.tabs button,#dkTown .tc,.plate,#focusBtn .disc,.plq{--bw:var(--lw);--bc:var(--ink)}
.plq{--bw:.14rem}
.btn,.chip,.tabs button{position:relative}
.sheet{--bw:.2rem}
.pill,#placeChip{--bw:.11rem;--bc:rgba(138,93,85,.32)}
.chip{--bw:.13rem;--bc:rgba(138,93,85,.45)}
.chip[aria-pressed=true]{--bc:var(--ink)}
.tabs button{--bw:.12rem}
.card.here.news.sit{--bc:rgba(138,93,85,.3)}
.goals .card.empty{--bc:rgba(138,93,85,.35)}
.sheet,.card,.btn,.pill,#me,#placeChip,.chip,.item,.tabs button[aria-selected=true],#dkTown .tc,.plate,#focusBtn .disc,.plq{border-color:transparent!important}
.sheet::before,.card::before,.btn::before,.pill::before,#me::before,#placeChip::before,.chip::before,.item::before,.tabs button[aria-selected=true]::before,#dkTown .tc::before,.plate::before,#focusBtn .disc::before,.plq::before{content:"";position:absolute;inset:calc(var(--bw) * -1.5);border-width:var(--bw);border-style:inherit;border-color:var(--bc);border-radius:inherit;filter:url(#wob);pointer-events:none}
/* speed: the wobble is a software SVG filter a phone re-runs for every outline each time it paints one (about 65 ms for a shop's worth,
   on a fast Mac in WebKit). Inside panels, where lists open and scroll, the line stays where it was, just straight;
   the always-on HUD and dock keep the wobble, each outline on its own layer so it is drawn once and reused */
.layer :is(.sheet,.card,.btn,.pill,.chip,.item,.plate,.plq,.tabs button[aria-selected=true],.ftabs button,.mlabel)::before{filter:none}
:is(#me,#placeChip,.pill,#dkTown .tc,.plate,#focusBtn .disc,.plq):not(.layer *)::before{will-change:transform}

/* ---------- jelly press: squash on the way down, wobble back on release (wired once in ui.js) ---------- */
.jd{transform:scale(1.1,.86)!important;transition:transform .08s ease-out!important}
.jd.jbig{transform:scale(1.025,.95)!important}
.ju{animation:jelly .5s ease-out!important}
.ju.jbig{animation:jellySoft .45s ease-out!important}
@keyframes jelly{0%{transform:scale(1.1,.86)}35%{transform:scale(.92,1.1)}60%{transform:scale(1.04,.97)}80%{transform:scale(.99,1.01)}100%{transform:none}}
@keyframes jellySoft{0%{transform:scale(1.025,.95)}40%{transform:scale(.985,1.02)}70%{transform:scale(1.005,.995)}100%{transform:none}}

/* ---------- framed menus: grey-blue world, floating title with Peanut peeking, folder tabs, round close at the bottom ---------- */
.layer.framed{flex-direction:column;align-items:center;justify-content:flex-end;padding-top:calc(2.6rem + var(--sat))}
.layer.framed.open{background:rgba(58,74,92,.55)}
/* the grey goes on the room and its overlays themselves (html.dim, js/ui.js dimSync): a full-screen backdrop-filter over the
   live 3D room was re-filtered by the phone on every frame of it, and of every scroll in the panel on top */
#world,#tags,#hud,#dock{transition:filter .28s}
html.dim :is(#world,#tags,#hud,#dock){filter:grayscale(.8) brightness(.8)}
.layer.framed .sheet{flex:0 1 auto;min-height:0;max-height:none}
.fhead{flex:none;width:100%;max-width:30rem;text-align:center;margin:0 0 1.2rem;pointer-events:none;opacity:0;transform:translateY(-.8rem) scale(.9);transition:opacity .25s,transform .45s var(--pop)}
.layer.framed.hastabs .fhead{margin-bottom:3.2rem}
.layer.open .fhead{opacity:1;transform:none}
.ftitle{margin:0;font-weight:400;font-size:2.55rem;line-height:1.05;color:#fff6ec;-webkit-text-stroke:.42rem var(--ink);paint-order:stroke fill;text-wrap:balance}
.ftitle>span{position:relative;z-index:0;display:inline-block}
.fsub{margin-top:.25rem;font-size:1rem;color:#fff6ec;-webkit-text-stroke:.22rem var(--ink);paint-order:stroke fill}
.fclose{flex:none;width:3.6rem;height:3.6rem;margin:.85rem 0 .1rem;padding:.8rem;border-radius:50%;background:var(--cream);border:var(--lw) solid var(--ink);box-shadow:var(--shadow);cursor:pointer;opacity:0;transform:scale(.5);transition:opacity .2s,transform .4s var(--pop)}
.layer.open .fclose{opacity:1;transform:none}
.sheet>.tabs.ftabs{position:absolute;left:1rem;right:1rem;bottom:100%;margin:0;padding:0;background:none;border-radius:0;display:flex;gap:.25rem;align-items:flex-end;z-index:2}
.ftabs button{flex:1;border:var(--lw) solid var(--ink);border-bottom:0;border-radius:.95rem .95rem 0 0;padding:.4rem .2rem .5rem;background:#b5dcc0;box-shadow:none;font-size:1.02rem;margin-bottom:0}
.ftabs button:nth-child(3n+2){background:#f2a698}
.ftabs button:nth-child(3n){background:#b3d9ea}
.ftabs button[aria-selected=true]{background:var(--cream);padding-top:.65rem;margin-bottom:-.2rem;box-shadow:none}
.ftabs button,.fclose{--bw:var(--lw);--bc:var(--ink);border-color:transparent!important}
.ftabs button::before,.fclose::before{content:"";position:absolute;inset:calc(var(--bw) * -1.5);border:var(--bw) solid var(--bc);border-radius:inherit;filter:url(#wob);pointer-events:none}
.ftabs button::before{border-bottom-width:0;bottom:0}
.fclose{position:relative}
.tabs.ftabs button[aria-selected=true]{border:var(--lw) solid transparent;border-bottom:0}
.tabs.ftabs button[aria-selected=true]::before{border-bottom-width:0;bottom:0}

/* ---------- soft shelf tiles: no borders, the item sits on its own little shadow ---------- */
.item{border:0;background:#f7ead6;box-shadow:none;border-radius:1.1rem;padding:.65rem .3rem .5rem}
.item .art{position:relative;z-index:0}
.item .art::after{content:"";position:absolute;left:50%;bottom:-.25rem;width:2.5rem;height:.55rem;margin-left:-1.25rem;border-radius:50%;background:#e4cfb2;z-index:-1}
.item .price,.item.owned .price{background:none;border:0;padding:0;opacity:.85;font-size:.85rem}
.item.owned .price{font-size:.76rem;opacity:.65}
.item.owned::after{content:"";position:absolute;left:.35rem;top:.35rem;width:1.35rem;height:1.35rem;border-radius:50%;border:.12rem solid var(--ink);background:#b5dcc0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M9 21l7 7 15-16' fill='none' stroke='%238a5d55' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;z-index:2}
.item.on{background:#fbe6bf;outline:0;box-shadow:inset 0 0 0 .14rem var(--ink)}
.item .new{background:#f2a698}
.item .slotlbl{display:none}
.shelfrow{padding-bottom:0;margin-bottom:.45rem}
.shelfrow::after{display:none}
/* the +N that floats into a counter */
.float.gain{color:#fff6ec;-webkit-text-stroke:.24rem var(--ink);font-size:1.5rem;animation:gain .9s cubic-bezier(.2,.7,.4,1) forwards;z-index:30}
@keyframes gain{0%{transform:translate(-50%,2.6rem) scale(.6);opacity:0}20%{transform:translate(-50%,1.9rem) scale(1.15);opacity:1}100%{transform:translate(-50%,0) scale(1);opacity:0}}

/* ---------- the Town map: a 3D island (js/screens/townmap3d.js) with honey name plaques and count pills over it ---------- */
.mapview .tsub,.mapview [data-home]{display:none}
/* the town map takes the whole screen: the sheet rises over the dimmed HUD instead of stopping under it */
.layer.framed:has(.sheet.mapview){padding-top:calc(.5rem + var(--sat))}
/* Peanut Club: no floating title, the night sky fills the screen top to bottom */
.layer.framed:has(.sheet.clubsheet){padding-top:calc(.6rem + var(--sat))}
.layer.framed:has(.sheet.clubsheet) .fhead{display:none}
.layer.framed .sheet.clubsheet{flex:1 1 auto}.sheet.clubsheet>.body{flex:1 1 auto}
.layer.framed.hastabs:has(.sheet.mapview) .fhead{margin-bottom:2.5rem}
/* the place you picked on the map: its sign grows, the others go quiet, and a little peanut arrow bobs over it */
.tm-ov.picking .tnode:not(.sel) .mlabel{background:var(--cream)}
.tm-ov.picking .tnode:not(.sel).in{opacity:.72}
.tnode.sel{z-index:2}
.tnode .mlabel{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tnode.sel .mlabel{transform:scale(1.16);box-shadow:0 .25rem 0 rgba(120,70,40,.3),0 0 0 .35rem rgba(255,250,240,.75)}
.tnode.sel:not(.here)::before{content:"";position:absolute;left:50%;bottom:calc(100% + .5rem);width:2.3rem;height:2.15rem;margin-left:-1.15rem;filter:drop-shadow(0 0 .14rem #fffaf0) drop-shadow(0 .15rem 0 rgba(120,70,40,.3));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M5 6h22c2.4 0 3.6 2.7 2 4.5L18 25c-1 1.3-3 1.3-4 0L3 10.5C1.4 8.7 2.6 6 5 6z' fill='%23f7c948' stroke='%235b3a33' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:bob 1.1s ease-in-out infinite;pointer-events:none}
.tnode:focus{outline:none}.tnode:focus-visible .mlabel{outline:.18rem solid var(--ink);outline-offset:.2rem}
html.calm .tnode.sel::before{animation:none}
@media (prefers-reduced-motion:reduce){.tnode.sel::before{animation:none}.tnode .mlabel{transition:none}}
.tmap3d{position:relative;height:clamp(22rem,calc(100dvh - 11.6rem - var(--sat) - var(--sab)),64rem);border-radius:1rem;overflow:hidden;background:#8dc2e1;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.tmap3d .tm-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.tm-ov{position:absolute;inset:0;pointer-events:none}
.tnode{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform}
.tnode{animation:none;opacity:0;scale:.55;transition:opacity .22s var(--d,0s),scale .5s cubic-bezier(.3,1.6,.5,1) var(--d,0s)}.tnode.in{opacity:1;scale:1}
.tnode.poke .mlabel{animation:tpoke .5s}
@keyframes tpoke{0%{scale:1}25%{scale:1.12 .86}50%{scale:.93 1.08}75%{scale:1.03 .98}100%{scale:1}}
.tnode .mlabel{margin-top:0;min-width:0;padding:.14rem .75rem .22rem}
.tnode .mlabel b{display:inline-flex;align-items:center;gap:.2rem;font-size:1rem}
.tnode .tl{display:inline-grid;width:.95rem;height:.95rem}.tnode .tl svg{width:100%;height:100%}
.tnode:not(.locked) .mlabel small svg{width:.85rem;height:.85rem}
.tnode .mstar{top:-.85rem;left:-.9rem;width:1.6rem;height:1.6rem}
.tnode .nextup{top:-1.15rem}
.tnode:active .mlabel{scale:.94}
.tm-pin{position:absolute;left:0;top:0;width:3rem;height:3.5rem;pointer-events:none;animation:bob 1.6s ease-in-out infinite}
.tm-pin{opacity:0;scale:.2;transform-origin:50% 100%;transition:opacity .2s,scale .55s cubic-bezier(.3,1.7,.5,1)}.tm-pin.in{opacity:1;scale:1;transition-delay:.45s}
.tm-pin::before{content:"";position:absolute;left:0;top:0;width:3rem;height:3rem;box-sizing:border-box;background:var(--butter);border:.16rem solid var(--ink);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:-.12rem .12rem 0 rgba(120,70,40,.25)}
.tm-pin>span{position:absolute;left:.42rem;top:.42rem;width:2.16rem;height:2.16rem;border-radius:50%;background:var(--cream);border:.13rem solid var(--ink);display:grid;place-items:center;overflow:hidden;box-sizing:border-box}
.tm-pin svg{width:92%;height:92%}
/* a trip on the map (townmap3d.js travel): the panel under the map steps aside while the camera dives */
.trip .tm-dock{opacity:0;translate:0 1.5rem;pointer-events:none;transition:opacity .2s,translate .3s var(--ease)}
.mlabel{background:var(--butter);margin-top:-.6rem;padding:.18rem .7rem .26rem;border-radius:.7rem;min-width:6.5rem;--bw:.13rem;--bc:var(--ink);border-color:transparent!important}
.mlabel::before{content:"";position:absolute;inset:calc(var(--bw) * -1.5);border:var(--bw) solid var(--bc);border-radius:inherit;filter:url(#wob);pointer-events:none}
.mlabel::after{content:"";position:absolute;left:.5rem;right:.5rem;top:-.36rem;height:.62rem;background:radial-gradient(circle at .31rem .31rem,var(--cream) .14rem,var(--ink) .17rem,var(--ink) .26rem,transparent .29rem) left/.62rem .62rem no-repeat,radial-gradient(circle at .31rem .31rem,var(--cream) .14rem,var(--ink) .17rem,var(--ink) .26rem,transparent .29rem) right/.62rem .62rem no-repeat}
.mlabel b{font-size:1.05rem}
.mnode:not(.locked) .mlabel small{position:absolute;top:calc(100% + .3rem);left:50%;transform:translateX(-50%);white-space:nowrap;padding:.06rem .55rem .1rem;border-radius:99rem;background:var(--cream);border:.12rem solid var(--ink);color:var(--ink);font-size:.76rem}
.mnode.locked .mlabel{background:var(--cream)}
/* four plates around Study: a wider arc so they do not touch */
#corner .plate{left:calc(3.25rem + cos(var(--a)) * 7rem - 1.7rem);top:calc(3.25rem - sin(var(--a)) * 7rem - 1.7rem)}
/* the card after stopping early: what mess it left at home (same note box as .dream, in the tile colour) */
.messnote{width:fit-content;margin:.6rem auto 0;font-size:.9rem;line-height:1.3;padding:.3rem .8rem;border-radius:.7rem;background:#f7ead6;border:.1rem dashed rgba(138,93,85,.45);text-align:center}
.messnote b{font-weight:400;color:#a0564b}

/* ---------- the satchel: a today card with a window on the sky, two little widgets, then the apps ---------- */
.satchel .today{display:flex;gap:.75rem;align-items:center;padding:.6rem .7rem .6rem .6rem;border-radius:1.1rem;background:#f7ead6;margin-bottom:.55rem}
.satchel .win{position:relative;flex:0 0 5.2rem;height:5.2rem;border-radius:1rem;border:var(--lw) solid var(--ink);overflow:hidden;background:linear-gradient(#9fd2ec,#dcf0f8)}
.satchel .today[data-sky=dawn] .win{background:linear-gradient(#e5a7b6,#f9dcbc)}
.satchel .today[data-sky=dusk] .win{background:linear-gradient(#e59a6c,#f7d59c)}
.satchel .today[data-sky=night] .win{background:linear-gradient(#2c3356,#575c8c)}
.satchel .win::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-1.35rem;height:2.4rem;border-radius:50%;background:#b8d49c;border-top:var(--lw) solid var(--ink)}
.satchel .today[data-sky=night] .win::after{background:#6f8a6a}
.satchel .orb{position:absolute;right:.5rem;top:.45rem;width:1.1rem;height:1.1rem;border-radius:50%;background:#fff3b0;box-shadow:0 0 0 .3rem rgba(255,243,176,.35)}
.satchel .today[data-sky=night] .orb{background:transparent;box-shadow:inset .32rem -.12rem 0 0 #fdf2c4}
.satchel .cloud{position:absolute;top:1.35rem;left:-2rem;width:1.7rem;height:.5rem;border-radius:.5rem;background:#fffdf8;animation:satCloud 16s linear infinite}
.satchel .cloud::before{content:"";position:absolute;left:.35rem;bottom:.2rem;width:.75rem;height:.6rem;border-radius:50%;background:#fffdf8}
.satchel .today[data-sky=night] .cloud{opacity:.35}
@keyframes satCloud{to{transform:translateX(8.5rem)}}
.satchel .pet{position:absolute;z-index:1;left:50%;bottom:-.7rem;width:3.5rem;height:3.5rem;margin-left:-1.75rem;animation:satPeek 3.2s ease-in-out infinite}
.satchel .pet .face{width:100%;height:100%;object-fit:contain}
@keyframes satPeek{0%,100%{transform:translateY(0)}50%{transform:translateY(.12rem)}}
.satchel .tm{font-size:2.15rem;line-height:1}
.satchel .today small{display:block;font-size:.82rem;color:#a0756b;margin:.15rem 0 .4rem}
.tchips{display:flex;flex-wrap:wrap;gap:.25rem}
.tchip{display:inline-flex;align-items:center;gap:.15rem;padding:.08rem .45rem .08rem .28rem;border-radius:.7rem;background:var(--paper);border:.1rem solid rgba(138,93,85,.3);font-size:.78rem;line-height:1.3;white-space:nowrap}
.tchip svg{width:.95rem;height:.95rem}
button.tchip{appearance:none;font-family:inherit;color:inherit;cursor:pointer}
/* two plain numbers under a hero (stats): value over a small label, split by the dashed rule the rows use */
.hstats{display:flex;gap:.8rem;margin-top:.2rem}
.hstats>span{display:flex;flex-direction:column;line-height:1.1}
.hstats>span+span{padding-left:.8rem;border-left:.12rem dashed rgba(138,93,85,.3)}
.hstats b{font-weight:400;font-size:1.08rem;color:var(--ink)}
.hstats small{font-size:.7rem;color:#a0756b}
.tchip.dd{background:#fdebc3;padding-left:.45rem}
.tchip.mess{background:#fbe0da;padding-left:.45rem}
.satchel .widgets{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.8rem}
.wdg{appearance:none;position:relative;border:var(--lw) solid var(--ink);font:inherit;color:var(--ink);text-align:left;background:#f7ead6;border-radius:1.1rem;padding:.5rem .65rem .55rem;display:flex;flex-direction:column;gap:.35rem;cursor:pointer;min-height:5.7rem;box-shadow:var(--shadow);transition:transform .14s var(--pop)}
.wdg:active{transform:scale(.96)}
/* the widgets open a screen, so each carries the app icons' ink border and shadow and a small arrow; the clock card above stays flat */
.wdg::after{content:"";position:absolute;right:.5rem;top:.62rem;width:.78rem;height:.78rem;background:var(--ink);opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 12l8 8-8 8' fill='none' stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 12l8 8-8 8' fill='none' stroke='%23000' stroke-width='4.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.wdg .wh{padding-right:.85rem}
.wdg .wh{display:flex;justify-content:space-between;align-items:baseline;gap:.3rem;font-size:.8rem;color:#a0756b}
.wdg .wh b{font-weight:400;font-size:1.05rem;color:var(--ink)}
.wbars{display:flex;gap:.22rem;height:3.1rem}
.wbars>span{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.12rem}
.wbars i{display:block;flex:none;max-height:calc(100% - .75rem);border-radius:.3rem .3rem .15rem .15rem;background:#e4cfb2;border:.1rem solid rgba(138,93,85,.4)}
.wbars em{font-style:normal;font-size:.6rem;line-height:.62rem;text-align:center;color:#a0756b}
.wbars .on i{background:var(--butter);border-color:var(--ink)}
.wbars .on em{color:var(--ink)}
.wpath{display:flex;align-items:center;gap:.35rem;margin-top:.15rem}
.wpath svg{width:1.7rem;height:1.7rem;flex:none}
.wpath .bar{flex:1;min-width:0}
.wdg small{font-size:.75rem;color:#a0756b;margin-top:auto}
.wdg .badge{right:-.2rem;top:-.3rem}
.satchel .apps{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem .3rem;padding:0}
.satchel .app{font-size:.8rem;gap:.3rem;animation:satIn .5s var(--pop) both;animation-delay:calc(var(--k)*35ms + 90ms)}
.satchel .app .sq{width:3.65rem;height:3.65rem;border-radius:1.1rem}
.satchel .app .sq .ic{width:2.35rem;height:2.35rem}
.satchel .app .badge{right:.2rem;top:-.25rem}
.satchel .sq.cal{display:flex;flex-direction:column;overflow:hidden;background:var(--paper)!important}
.satchel .sq.cal i{display:block;width:100%;background:#ef8a7e;color:#fff6ec;font-style:normal;font-size:.62rem;line-height:1.1rem;text-align:center;border-bottom:.12rem solid var(--ink);text-transform:uppercase;letter-spacing:.04em}
.satchel .sq.cal b{flex:1;display:grid;place-items:center;font-weight:400;font-size:1.6rem;line-height:1}
@keyframes satIn{0%{opacity:0;transform:translateY(.6rem) scale(.6)}60%{opacity:1;transform:translateY(-.1rem) scale(1.06)}100%{opacity:1;transform:none}}
html.calm .satchel .app,html.calm .satchel .cloud,html.calm .satchel .pet{animation:none}
@media (prefers-reduced-motion:reduce){.satchel .app,.satchel .cloud,.satchel .pet{animation:none}}
/* map session (js/session.js): a town place is a study session you join, not your room. Room tools stay home;
   your animal wanders, with a back button (where to?), the people here, and Study (a spot is handed out) */
html.joined #me,html.joined #side,html.joined #dock{display:none!important}
html.joined .tag.far i{display:inline!important}
#seatTop,#seatLeft,#seatBar{display:none}
html.joined:not(.dockdown) #seatTop{display:block;position:fixed;left:calc(.6rem + var(--sal));top:calc(.5rem + var(--sat));z-index:12}
#seatTop .rbtn{width:3.15rem;height:3.15rem;padding:.55rem}
html.joined:not(.dockdown) #seatLeft{display:flex;flex-direction:column;gap:.45rem;position:fixed;left:calc(.6rem + var(--sal));bottom:calc(6.9rem + var(--sab));z-index:11}
#seatLeft .rbtn{width:3.1rem;height:3.1rem;padding:.55rem}
html.joined:not(.dockdown) #seatBar{display:flex;flex-direction:column;align-items:stretch;gap:.45rem;position:fixed;left:calc(.6rem + var(--sal));right:calc(.6rem + var(--sar));bottom:calc(1rem + var(--sab));z-index:11;pointer-events:none;max-width:32rem;margin:0 auto}
#seatBar>*{pointer-events:auto}
#seatBar .btn{min-height:3.6rem;font-size:1.3rem}
#seatBar .seatnote{align-self:center;display:inline-flex;align-items:center;gap:.25rem;padding:.12rem .6rem .14rem .4rem;border-radius:.9rem;background:rgba(255,246,236,.92);border:.11rem solid rgba(138,93,85,.4);font-size:.8rem;color:var(--ink)}
#seatBar .seatnote:empty{display:none}
#seatBar button.seatnote{font:inherit;font-size:.8rem;cursor:pointer}
#seatBar button.seatnote:active{transform:scale(.97)}
#seatBar .seatnote .ic{width:.9rem;height:.9rem}
/* ---------- every panel, satchel style (js/ui.js hero): a hero card with a little window, soft cream tiles
   instead of ink boxes, quiet section labels, and the parts popping in one by one when it opens ---------- */
.hero{display:flex;gap:.75rem;align-items:center;padding:.6rem .7rem .6rem .6rem;border-radius:1.1rem;background:#f7ead6;margin-bottom:.6rem;text-align:left}
/* the little sky window: sky, sun or moon, clouds and a far hill (.hsk), the near hill (::after), then grass, flowers and the
   animal's shadow (.hfg); sizes are in % so every window size looks the same. Each tone sets its own colours */
.hero .win,.cwin{--s1:#9fd2ec;--s2:#dcf0f8;--far:#cde4b6;--near:#b8d49c;--near2:#a5c78b;--tuft:#8cb574;--glow:rgba(255,248,222,.75);--cl:.95;position:relative;flex:0 0 4.9rem;height:4.9rem;border-radius:1rem;border:var(--lw) solid var(--ink);overflow:hidden;background:linear-gradient(var(--s1),var(--s2) 80%);display:grid;place-items:center}
.hero .win::after,.cwin::after{content:"";position:absolute;left:-22%;right:-22%;top:77%;height:50%;border-radius:50%;background:linear-gradient(var(--near),var(--near2) 45%);border-top:var(--lw) solid var(--ink);box-shadow:inset 0 .16rem 0 rgba(255,255,255,.42)}
.hero[data-tone=dawn] .win,.cwin[data-tone=dawn]{--s1:#e5a7b6;--s2:#f9dcbc;--far:#dfd0a8;--glow:rgba(255,242,224,.85)}
.hero[data-tone=dusk] .win,.cwin[data-tone=dusk]{--s1:#e59a6c;--s2:#f7d59c;--far:#dcc68c;--glow:rgba(255,238,196,.85)}
.hero[data-tone=dawn] .win,.cwin[data-tone=dawn],.hero[data-tone=dusk] .win,.cwin[data-tone=dusk]{background:radial-gradient(72% 36% at 22% 70%,rgba(255,246,220,.9),rgba(255,246,220,0)),linear-gradient(var(--s1),var(--s2) 80%)}
.hero[data-tone=night] .win,.cwin[data-tone=night]{--s1:#272f51;--s2:#555a8a;--far:#47557a;--near:#5f7c60;--near2:#4f6a52;--tuft:#425d47;--glow:rgba(255,206,150,.32);--cl:.2}
.hero[data-tone=night] .win::after,.cwin[data-tone=night]::after{box-shadow:inset 0 .16rem 0 rgba(255,232,190,.2)}
.hero[data-tone=mint] .win,.cwin[data-tone=mint]{--s1:#a9dcc0;--s2:#e3f4e6;--far:#c9e8cf;--glow:rgba(255,255,246,.9)}
.hero[data-tone=rose] .win,.cwin[data-tone=rose]{--s1:#f2b0a4;--s2:#fbe2d8;--far:#f8d6cb;--near:#f6cfc4;--near2:#efbcaf;--tuft:#e09e90;--glow:rgba(255,246,238,.9)}
.hero[data-tone=lilac] .win,.cwin[data-tone=lilac]{--s1:#c6b3e6;--s2:#ece3f7;--far:#e3d8f3;--near:#ddd0ef;--near2:#cebee6;--tuft:#b6a1da;--glow:rgba(255,250,255,.9)}
.hero[data-tone=butter] .win,.cwin[data-tone=butter]{--s1:#f7cf6e;--s2:#fcefc4;--far:#f6e2a8;--near:#f3dca0;--near2:#eac87e;--tuft:#d5ad5a;--glow:rgba(255,253,238,.9)}
:is(.hero .win,.cwin)>:is(.hsk,.hfg){position:absolute;inset:0;pointer-events:none}
:is(.hero .win,.cwin)>.hfg{z-index:1}
:is(.hsk,.hfg)>i{position:absolute;display:block}
.hsk>.hfar{inset:0;background:radial-gradient(56% 24% at 90% 84%,var(--far) 98%,transparent),radial-gradient(38% 17% at 6% 86%,var(--far) 98%,transparent)}
.hsk>.hgl{left:6%;right:6%;top:10%;height:80%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent)}
/* clouds stay inside the window and drift slowly there and back */
.hsk>.hcl{top:14%;left:7%;width:29%;height:8.5%;border-radius:1rem;background:#fffdf8;opacity:var(--cl);animation:hDrift 19s ease-in-out infinite alternate}
.hsk>.hcl::before,.hsk>.hcl::after{content:"";position:absolute;border-radius:50%;background:inherit}
.hsk>.hcl::before{left:16%;bottom:40%;width:42%;height:135%}
.hsk>.hcl::after{left:50%;bottom:30%;width:30%;height:100%}
.hsk>.hcl.b{top:34%;left:auto;right:7%;width:21%;height:6.5%;animation:hDriftB 24s ease-in-out infinite alternate}
@keyframes hDrift{to{transform:translateX(85%)}}
@keyframes hDriftB{to{transform:translateX(-105%)}}
/* dawn and dusk: a low sun behind the far hill */
.hsk>.hsun{display:none;left:3%;top:49%;width:36%;height:36%;border-radius:50%;background:radial-gradient(closest-side,#fff7df 40%,rgba(255,238,200,.7) 46%,rgba(255,232,190,0))}
:is(.hero[data-tone=dawn] .win,.cwin[data-tone=dawn],.hero[data-tone=dusk] .win,.cwin[data-tone=dusk]) .hsun{display:block}
/* night: a crescent moon and a few stars that twinkle softly */
.hsk>.hmo,.hsk>.hst{display:none}
:is(.hero[data-tone=night] .win,.cwin[data-tone=night]) :is(.hmo,.hst){display:block}
.hsk>.hmo{right:7%;top:7%;width:24%;height:24%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,186,.38),rgba(255,236,186,0))}
.hsk>.hmo::before{content:"";position:absolute;inset:26%;border-radius:50%;background:#fbedbd;-webkit-mask:radial-gradient(40% 40% at 74% 30%,transparent 97%,#000);mask:radial-gradient(40% 40% at 74% 30%,transparent 97%,#000)}
.hsk>.hst{inset:0;background:radial-gradient(1.5% 1.5% at 13% 15%,#fff4d8 90%,transparent),radial-gradient(1.2% 1.2% at 45% 8%,#fff4d8 90%,transparent),radial-gradient(1.2% 1.2% at 64% 38%,#fff4d8 90%,transparent);animation:hTwinkle 4.4s ease-in-out infinite}
.hsk>.hst.b{background:radial-gradient(1.2% 1.2% at 30% 6%,#fff4d8 90%,transparent),radial-gradient(1.4% 1.4% at 92% 46%,#fff4d8 90%,transparent);animation-delay:-2.2s}
.hsk>.hst.b::before{content:"";position:absolute;left:14%;top:33%;width:8%;height:8%;background:#fff4d8;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
@keyframes hTwinkle{0%,100%{opacity:1}50%{opacity:.3}}
/* on the near hill: two grass tufts, two little flowers, and the soft shadow the animal stands in */
.hfg>.hsh{left:26%;width:48%;top:77%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(96,56,44,.34),rgba(96,56,44,0))}
.hfg>.htf{left:8%;top:83%;width:11%;height:8%;background:var(--tuft);clip-path:polygon(0 100%,12% 38%,27% 100%,37% 100%,50% 0,63% 100%,73% 100%,88% 34%,100% 100%)}
.hfg>.htf.b{left:auto;right:9%;top:84%;width:8.5%;height:6.5%}
.hfg>.hfl{left:23%;top:89%;width:6.5%;height:6.5%;border-radius:50%;background:radial-gradient(closest-side,#f3c058 34%,#fffaf2 40% 88%,rgba(255,250,242,0))}
.hfg>.hfl.b{left:auto;right:22%;top:87%;width:5.5%;height:5.5%;background:radial-gradient(closest-side,#f3c058 34%,#f9cbc8 40% 88%,rgba(249,203,200,0))}
:is(.hero[data-tone=night] .win,.cwin[data-tone=night]) .hfl{opacity:.55}
.hero .hart,.hero .win>.hpic,.cwin .hart{position:relative;z-index:1;width:3.2rem;height:3.2rem;margin-top:.3rem;animation:heroBob 3.2s ease-in-out infinite}
.hero .hart>svg,.cwin .hart>svg{display:block;width:100%;height:100%}
/* a painted scene (ui.js scene()) fills the whole window and stands still on the hill; its icon waits underneath until it loads */
:is(.hero .win,.cwin) .hart.scn{position:absolute;inset:0;width:auto!important;height:auto!important;margin:0!important;animation:none;display:grid;place-items:center}
:is(.hero .win,.cwin) .hart.scn>svg{width:62%;height:62%;margin-top:6%}
:is(.hero .win,.cwin) .hart.scn>img{position:absolute;left:5%;top:8%;width:90%;height:90%;object-fit:contain;-webkit-user-drag:none;user-select:none}
:is(.hero .win,.cwin):has(>.hart.scn) .hsh{animation:none}
:is(.hero .win,.cwin):has(>.hart.scn) .hgl{display:none}
/* the animal stands with its feet in the shadow on the hill and breathes, head clear of the top */
.hero .win>.face,.cwin>.face{position:absolute;z-index:1;left:14%;width:72%;bottom:17%;height:68%;margin:0;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;animation:heroBreathe 4.8s ease-in-out infinite}
:is(.hero[data-tone=night] .win,.cwin[data-tone=night])>.face{filter:drop-shadow(0 0 .18rem rgba(255,212,150,.34)) brightness(1.04)}
/* a floating icon's shadow shrinks as it bobs up */
:is(.hero .win,.cwin):has(>.hart) .hsh{animation:hShadow 3.2s ease-in-out infinite}
@keyframes heroBreathe{0%,100%{transform:none}50%{transform:scale(.985,1.025)}}
@keyframes hShadow{50%{transform:scaleX(.8);opacity:.65}}
.hero .hx{flex:1;min-width:0}
.hero .hb{display:block;font-weight:400;font-size:1.65rem;line-height:1.05}
.hero .hb em{font-style:normal;font-size:1rem;color:#a0756b;margin-left:.2rem}
.hero small{display:block;font-size:.82rem;color:#a0756b;margin:.2rem 0 .35rem;line-height:1.25}
.hero small:last-child{margin-bottom:0}
.hero .tchip{cursor:default}
.hero .tchip.on{background:#d8ecc4}
.hero .tchip.warm{background:#fdebc3}
.hero .tchip.cool{background:#e3f1f8}
.hero .tchip.pink{background:#fbe0da}
@keyframes heroBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-.22rem) rotate(2deg)}}
/* soft tiles: :where keeps these weak, so highlighted cards (unread mail, you on the leaderboard) keep their colour */
:where(.layer.framed .sheet) .card{background:#f7ead6;box-shadow:none;--bc:transparent}
:where(.layer.framed .sheet) .kpi,:where(.layer.center .sheet) .kpi{background:#f7ead6;border-color:transparent}
.layer.framed .sheet h3{font-size:.98rem;color:#a0756b;margin:.95rem .25rem .4rem}
.layer.framed .sheet h3 .ic{opacity:.85}
.layer.framed .sheet h3 small{color:#bf9a8e}
:where(.layer.framed .sheet) .card .btn.cream{background:#fffaf0}
/* pop in one by one; fill mode backwards so a part's own transform comes back once it lands */
.layer:not(.settled) .sheet>.body>*,.layer:not(.settled) .sheet>.foot{animation:panelIn .46s var(--pop) backwards;animation-delay:70ms}
.layer:not(.settled) .sheet>.body>:nth-child(2){animation-delay:110ms}
.layer:not(.settled) .sheet>.body>:nth-child(3){animation-delay:150ms}
.layer:not(.settled) .sheet>.body>:nth-child(4){animation-delay:190ms}
.layer:not(.settled) .sheet>.body>:nth-child(5){animation-delay:230ms}
.layer:not(.settled) .sheet>.body>:nth-child(6){animation-delay:270ms}
.layer:not(.settled) .sheet>.body>:nth-child(7){animation-delay:310ms}
.layer:not(.settled) .sheet>.body>:nth-child(n+8){animation-delay:350ms}
.layer:not(.settled) .sheet>.foot{animation-delay:260ms}
/* a tall pane (the decorate drawer's and the closet's shelves) pops in from its top edge: scaled from its middle, the overshoot lifts it over the tabs */
.sheet>.body>[data-pane]{transform-origin:50% 0}
@keyframes panelIn{0%{opacity:0;transform:translateY(.7rem) scale(.95)}70%{opacity:1;transform:translateY(-.08rem) scale(1.01)}100%{opacity:1;transform:none}}
html.calm .layer .sheet>.body>*,html.calm .layer .sheet>.foot,html.calm .hero .hart,html.calm .hero :is(.hcl,.hst,.hsh),html.calm .hero .win>.face{animation:none}
@media (prefers-reduced-motion:reduce){.layer .sheet>.body>*,.layer .sheet>.foot,.hero .hart,.hero :is(.hcl,.hst,.hsh),.hero .win>.face{animation:none}}
.hero .hcal{display:flex;flex-direction:column;width:3.3rem;height:3.4rem;margin-top:.2rem;border-radius:.7rem;border:var(--lw) solid var(--ink);background:var(--paper);overflow:hidden}
.hero .hcal i{display:block;background:#ef8a7e;color:#fff6ec;font-style:normal;font-size:.62rem;line-height:1.05rem;text-align:center;border-bottom:.12rem solid var(--ink);text-transform:uppercase;letter-spacing:.04em}
.hero .hcal b{flex:1;display:grid;place-items:center;font-weight:400;font-size:1.5rem;line-height:1}
.hero.pic .win::after,.hero.pic .hsk,.hero.pic .hfg{display:none}
.hero .hplace{position:absolute;inset:0;display:block}
.hero .hplace>*{width:100%;height:100%;object-fit:cover;display:block}
.hero .tchips .hbtn{min-height:1.7rem;padding:.05rem .55rem;font-size:.8rem;border-radius:.7rem;box-shadow:0 .12rem 0 rgba(120,70,40,.25)}
.hero .tchips .hbtn .ic{width:1rem;height:1rem}
/* soft tiles inside panels too: calendar days and radio stations */
.layer.framed .cal .d{background:#f7ead6;border-color:transparent}
.layer.framed .cal .d.today{background:#fdebc3;border-color:var(--ink)}
.layer.framed .station{background:#f7ead6;border-color:transparent}
.layer.framed .station[aria-pressed=true]{background:var(--butter);border-color:var(--ink)}

.cwin{width:5.4rem;height:5.4rem;margin:.1rem auto .45rem}
.cwin .hart{width:3.4rem;height:3.4rem}
html.calm .cwin .hart,html.calm .cwin :is(.hcl,.hst,.hsh),html.calm .cwin>.face{animation:none}
@media (prefers-reduced-motion:reduce){.cwin .hart,.cwin :is(.hcl,.hst,.hsh),.cwin>.face{animation:none}}
/* back to the satchel, beside close */
.fnav{display:flex;gap:1.1rem;align-items:center;justify-content:center}
.fback{background:var(--paper)}
/* ---------- Peanut's notebook as a picnic (js/screens/quests.js): treats drop into the basket, errands are rings ---------- */
.baskethero .win::after{top:82%}.baskethero .hfg{transform:translateY(5%)}
.basket{position:relative;z-index:1;display:block;width:3.9rem;height:3.9rem;margin-top:1.1rem}
.basket .pb{position:absolute;inset:0}
.basket .pb svg{display:block;width:100%;height:100%}
.basket .pi{position:absolute;left:50%;top:.45rem;width:1.5rem;height:1.5rem;margin-left:calc(-.95rem + var(--x));animation:bskBob 2.4s ease-in-out infinite;animation-delay:var(--d)}
.basket .pi svg{display:block;width:100%;height:100%}
.basket .pi.drop{animation:bskDrop .7s cubic-bezier(.3,1.5,.5,1) both,bskBob 2.4s .7s ease-in-out infinite}
.basket .twinkle{position:absolute;left:0;right:0;top:-.6rem;height:1.4rem;display:none;justify-content:center;gap:.3rem}
.basket.full .twinkle{display:flex}
.basket .twinkle i{width:.45rem;height:.45rem;border-radius:50%;background:#f9d765;opacity:0;animation:bskTwinkle 2.2s ease-out infinite}
.basket .twinkle i:nth-child(2){animation-delay:.7s}.basket .twinkle i:nth-child(3){animation-delay:1.4s}
@keyframes bskBob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-.14rem) rotate(6deg)}}
@keyframes bskDrop{0%{transform:translateY(-3rem) scale(.6);opacity:0}60%{transform:translateY(.15rem) scale(1.1);opacity:1}100%{transform:none}}
@keyframes bskTwinkle{0%{transform:translateY(.6rem) scale(.6);opacity:0}30%{opacity:.9}100%{transform:translateY(-.7rem) scale(1.3);opacity:0}}
.ingrow{display:flex;gap:.22rem}
.ingrow i{width:1.45rem;height:1.45rem;border-radius:50%;background:#fff8ea;border:.1rem dashed rgba(138,93,85,.4);display:grid;place-items:center;padding:.17rem}
.ingrow i svg{display:block;width:100%;height:100%;opacity:.28;filter:grayscale(1)}
.ingrow i.on{border:.1rem solid var(--ink);background:#fdebc3}
.ingrow i.on svg{opacity:1;filter:none}
.giftbtn .ic{width:1.5rem;height:1.5rem}
.giftbtn{animation:potReady 1.6s ease-in-out infinite}
@keyframes potReady{0%,70%,100%{transform:none}78%{transform:rotate(-1.5deg) scale(1.02)}88%{transform:rotate(1.5deg) scale(1.02)}}
.qrow{display:flex;align-items:center;gap:.65rem;padding:.55rem .6rem;border-radius:1.1rem;background:#f7ead6;margin-bottom:.45rem}
.qrow.ready{background:#e3f2d6}
.qic{position:relative;flex:none;width:2.75rem;height:2.75rem;border-radius:.85rem;background:#fff8ea;display:grid;place-items:center;padding:.38rem}
.qic>svg{display:block;width:100%;height:100%}
.qing{position:absolute;right:-.4rem;bottom:-.35rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--c);border:.1rem solid var(--ink);padding:.14rem;display:grid;place-items:center}
.qing svg{display:block;width:100%;height:100%}
.qrow.ready .qing{animation:wig 1s ease-in-out infinite}
.qrow .grow{flex:1;min-width:0}
.qrow .grow b{display:block;font-weight:400;line-height:1.15}
.qrow .grow small{display:block;color:#a0756b;font-size:.78rem;line-height:1.2;margin-top:.08rem}
.qrow .bar{height:.5rem;margin-top:.3rem}
.qrow .btn{flex:none}
.inbasket{display:flex;align-items:center;gap:.3rem;margin:.15rem .35rem .2rem;font-size:.82rem;color:#a0756b}
.inbasket .ic{width:1rem;height:1rem}
.inbasket i{width:1.35rem;height:1.35rem;opacity:.65}
.inbasket i svg{display:block;width:100%;height:100%}
.rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.ring{appearance:none;border:0;font:inherit;color:var(--ink);background:#f7ead6;border-radius:1.1rem;padding:.65rem .3rem .55rem;display:flex;flex-direction:column;align-items:center;gap:.32rem;text-align:center}
.ring.can{background:#e3f2d6;cursor:pointer}
.ring.can:active{transform:scale(.96)}
.rg{width:3.4rem;height:3.4rem;border-radius:50%;background:conic-gradient(#f0b84f var(--k),#efe3cc 0);border:.12rem solid var(--ink);display:grid;place-items:center}
.ring.done .rg,.ring.can .rg{background:#a6d47d}
.rg>span{width:2.5rem;height:2.5rem;border-radius:50%;background:#fffaf0;border:.12rem solid var(--ink);display:grid;place-items:center;font-size:1rem;line-height:1}
.rg small{font-size:.66rem;color:#a0756b}
.rg svg{display:block;width:1.5rem;height:1.5rem}
.ring.can .rg svg{animation:wig 1s ease-in-out infinite}
.ring b{font-weight:400;font-size:.8rem;line-height:1.15}
.ring em{font-style:normal;font-size:.74rem;color:#a0756b;display:inline-flex;align-items:center;gap:.12rem}
.ring.can em{color:#5f9a3e}
html.calm .basket .pi,html.calm .basket .twinkle i,html.calm .giftbtn,html.calm .qrow.ready .qing,html.calm .ring.can .rg svg{animation:none}
@media (prefers-reduced-motion:reduce){.basket .pi,.basket .twinkle i,.giftbtn,.qrow.ready .qing,.ring.can .rg svg{animation:none}}
/* town map: the place strip and panel over the map, and New room (js/screens/town.js). Same paper, ink border and
   shadow as the map labels and sheets; the big button is the Study button's leaf */
.tm-dock{position:absolute;left:.45rem;right:.45rem;bottom:.45rem;z-index:3;display:flex;flex-direction:column;gap:.35rem;pointer-events:none}
.tm-dock>*{pointer-events:auto;background:var(--paper);border:var(--lw) solid var(--ink);border-radius:1rem;box-shadow:var(--shadow);padding:.4rem .5rem}
/* the place you picked: its postcard, name and who is there, then Pop in and a nook of your own */
.tm-ph{display:flex;align-items:center;gap:.55rem}
.tm-th{flex:none;width:3.1rem;height:3.1rem;border-radius:.75rem;overflow:hidden;border:.13rem solid var(--ink);background:var(--cream);display:grid;place-items:center}
.tm-th>*{width:100%;height:100%;object-fit:cover;display:block}.tm-th>svg{width:82%;height:82%}.tm-th.locked>*{filter:grayscale(.55) brightness(.92)}
.tm-ph .grow{flex:1;min-width:0}.tm-ph b{display:block;font-weight:400;font-size:1.1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-ph small{display:flex;align-items:center;gap:.28rem;font-size:.76rem;color:#5d8a3e;white-space:nowrap;overflow:hidden}
.tm-ph small.tm-fr{color:#8a5d55;margin-top:.12rem;gap:.4rem}.tm-fav{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;border:.1rem solid #8a5d55;overflow:hidden;display:inline-flex;margin-right:-.32rem}.tm-fav:last-of-type{margin-right:0}.tm-fav svg,.tm-fav img{width:100%;height:100%}
.tm-ph small.gate{color:#a0756b}.tm-ph small.tm-fd{margin-top:.12rem}.tm-ph small.tm-fd button{appearance:none;border:0;background:none;padding:0;font:inherit;color:#8a5d55;display:inline-flex;align-items:center;gap:.2rem;cursor:pointer}.tm-ph small.tm-fd svg{width:.9rem;height:.9rem}.tm-ph small .bar{flex:none;width:2.6rem;height:.4rem;border-radius:.3rem;background:#ead7bd;overflow:hidden}.tm-ph small .bar i{display:block;height:100%;background:var(--butter)}
.tm-ph small .live{flex:none;width:.42rem;height:.42rem;border-radius:50%;background:#7fc35a;animation:livepulse 1.8s ease-in-out infinite}
.tm-pa{display:flex;align-items:center;gap:.4rem;margin-top:.45rem}
.tm-pa .btn{min-height:2.7rem;font-size:1.05rem}.tm-pa .btn[aria-disabled=true]{opacity:.8}
.tm-pa .tm-nook{flex:none;width:auto;padding:0 .8rem;font-size:.95rem}.tm-pa .tm-nook .ic{width:1rem;height:1rem}
.nr-head{gap:.7rem;align-items:center}.nr-head h2{margin:0;text-align:left}.nr-head .thumb{flex:none;width:4.4rem;height:4.4rem;border-radius:.8rem;overflow:hidden;border:.14rem solid var(--ink);background:#f2c98a}.nr-head .thumb>*{width:100%;height:100%;object-fit:cover;display:block}
[data-fr] .chip .ic{width:1.2rem;height:1.2rem}[data-fr] .chip[aria-pressed=true]{background:var(--butter)}
html.calm .tm-ph small .live{animation:none}
@media (prefers-reduced-motion:reduce){.tm-ph small .live{animation:none}}
/* the timer sheet: hero on top, one soft tile for the time, one for what you earn */
.tset .ttop{display:flex;align-items:center;gap:.4rem;min-height:2.6rem;padding-right:2.6rem;margin:-.15rem 0 0}
.tset .ttop>:is(.back,.x){position:static;flex:none}
/* the row pops in with a transform, which would make it the X's box only while it animates (the X jumped as it settled): pin the X to the row from the start, at the spot it settles in */
.tset .ttop{position:relative}.tset .ttop>.x{position:absolute;right:-.35rem;top:-.3rem}
/* the tag chip opens the tag picker, so it wears a little pencil; its outline is drawn outside the box (::before), so only the label clips */
.tset .tagpick{min-width:0;max-width:100%}.tset .tagpick .tg{display:inline-flex;align-items:center;gap:.3rem;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tset .tagpick>svg{flex:none;width:.95rem;height:.95rem;margin-right:-.15rem}
/* warm cocoa sits next to the tag chip: the cup and "Double peanuts", a toggle for this session (yellow when on) */
.tset .cocoa{flex:none;padding:.22rem .6rem;font-size:.88rem;gap:.25rem}.tset .cocoa svg{width:1.15rem;height:1.15rem}

.tset .cocoa[aria-pressed=true]{background:var(--butter)}
/* how many mugs are left, as the shop's cocoa card says it */
.tset .cocoa small{font-size:.75rem;color:#a0756b;margin-left:.05rem}
/* the lock next to it: block your picked apps while you focus (js/shield.js), the cocoa chip's size, yellow when on, faded when off */
.tset .shieldc{flex:none;padding:.22rem .45rem}.tset .shieldc svg{width:1.15rem;height:1.15rem}
.tset .shieldc[aria-pressed=false] svg{opacity:.55;filter:grayscale(.6)}
/* the big number sits between − and +, which never move as it changes (a fixed grid, figures all one width) */
.tset .tstep{display:grid;grid-template-columns:2.6rem minmax(0,1fr) 2.6rem;align-items:center;gap:.5rem;max-width:21rem;margin:.1rem auto 0}
.tset .tstep .chip{width:2.6rem;height:2.6rem;padding:0;justify-content:center;font-size:1.4rem;border-radius:50%}
.tset .big{font-size:3.4rem;margin:0;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
/* the ruler wheel under it (js/focus.js rulerWheel): five-minute ticks, taller every 15, an hour mark with its label every hour,
   a butter pointer fixed in the middle and the ends fading out. Native scroll-snap, so a flick glides and settles on a step */
/* the box is a .card (paper, the ink outline drawn by .card::before), so it carries no overflow clip of its own: the strip clips */
.tset .wheelbox{max-width:21rem;height:3.3rem;margin:.4rem auto 0;padding:0}
.tset .wheel{height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;outline-offset:-.3rem;border-radius:inherit;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.tset .wheel::-webkit-scrollbar{display:none}
.tset .wheel.drag{scroll-snap-type:none;cursor:grabbing}
.tset .wtrack{display:flex;width:max-content;height:100%;padding:0 calc(50% - .45rem)}
.tset .tk{position:relative;flex:none;width:.9rem;height:100%;scroll-snap-align:center}
.tset .tk::before{content:"";position:absolute;left:50%;top:.4rem;width:.13rem;height:.7rem;margin-left:-.065rem;border-radius:.1rem;background:rgba(138,93,85,.45)}
.tset .tk.q::before{height:1.05rem;background:var(--ink)}
.tset .tk.hr::before{width:.2rem;height:1.35rem;margin-left:-.1rem;background:var(--ink)}
.tset .tk b{position:absolute;left:50%;bottom:.3rem;transform:translateX(-50%);font-weight:400;font-style:normal;font-size:.8rem;line-height:1;white-space:nowrap;color:var(--ink)}
.tset .wptr{position:absolute;left:50%;top:.22rem;width:.55rem;height:1.7rem;margin-left:-.275rem;border-radius:.35rem;background:var(--butter);border:.13rem solid var(--ink);box-shadow:0 .12rem 0 rgba(120,70,40,.25);pointer-events:none}
.tset [data-sw] .big{margin:.1rem 0 0}
.tset .pres{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-top:.45rem}
.tset .pres .chip{flex:none;padding:.18rem .5rem;font-size:.85rem;background:var(--paper)}
.tset .pres .chip[aria-pressed=true]{background:var(--butter)}
/* Pomodoro (js/focus.js POMO): Timer | Pomodoro above the minutes; in Pomodoro the presets give way to the plan of the set */
.tset .tmode{margin:.1rem 0 .45rem}
.tset .tmode button{display:inline-flex;align-items:center;justify-content:center;gap:.25rem}
.tset .tmode .ic{width:1.05rem;height:1.05rem;display:inline-block}
.tset .pres[hidden],.tset .pomoplan[hidden]{display:none}
.tset .pomoplan{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.45rem}
.tset .pomoplan .chip{flex:none;display:inline-flex;align-items:center;gap:.2rem;padding:.18rem .5rem .18rem .35rem;font-size:.85rem;background:var(--paper);cursor:pointer}
.tset .pomoplan .chip:active{transform:scale(.95)}
.tset .pomoplan .chip small{font-size:.75rem;color:#a0756b;margin-left:.1rem}
.tset .pomoplan .pb{color:#5d8fb0;background:#eef5f9}
.tset .pomoplan .ic{width:1rem;height:1rem;display:inline-block}
.tset .pomoplan .ic svg{width:100%;height:100%;display:block}
#run .what .pomoround{display:flex;align-items:center;gap:.2rem;font-size:.78rem}
#run .what .pomoround svg{width:.9rem;height:.9rem;flex:none}
.pomodots{display:flex;justify-content:center;gap:.4rem;margin:.6rem 0 .1rem}
.pomodots i{width:1.6rem;height:1.6rem;opacity:.3;filter:grayscale(.7)}
.pomodots i.on{opacity:1;filter:none}
.pomodots i.now{opacity:1;filter:none;transform:scale(1.15)}
.pomodots i svg{width:100%;height:100%;display:block}
.tset [data-go] .earn{display:inline-flex;gap:.3rem;margin-left:.35rem;padding:.05rem .5rem;border-radius:.7rem;background:rgba(255,255,255,.55);font-size:.9rem}
.tset [data-go] .earn:empty{display:none}

/* the title's letters and buttons step aside while the restore box is open, so nothing draws over it */
#title.asking .letters,#title.asking .cta{visibility:hidden}
/* a sheet or question from the title (sign in, restore a backup) sits above the title, which sits above everything else */
#title.asking{z-index:19}

/* the fitting room (engine/fitting.js): the place's tags and speech step out with the place */
body.fitting #tags,body.fitting .say,body.fitting .comic{display:none}
body.fitting #side,body.fitting #placeChip,body.fitting #corner,body.fitting #ticker{visibility:hidden}
/* the closet keeps one height so the model doesn't jump between tabs */
.sheet.closet{height:min(27rem,50%)}
.sheet.closet>.body{flex:1}
@media (min-width:900px){.layer.clear .sheet.closet{height:calc(100% - 2.4rem)}}
/* the closet wears the shop's look (.shop2): sub-tabs, shelves on planks, the set photo cards stacked */
.wtabs button small{color:#a0756b;font-size:.78rem}
.closet .csets{display:grid;gap:.65rem;padding-bottom:.3rem}
@media (min-width:900px){.closet .csets{grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}}
.settag{display:inline-block;padding:.02rem .4rem;border-radius:.5rem;background:#e6f6ff;border:.1rem solid rgba(138,93,85,.35);font-size:.72rem;vertical-align:.1rem}
/* the shop: wallet hero, a strip of shelf tabs that stays on top, a picks strip, sets as tiles, then the shelves */
/* the shop's top banner slot: one banner at a time at a fixed height, swipe for the next */
.shop2 .sban{margin:0 0 .6rem}
/* the track runs to the sheet's edges and pads back in, so every card sits on the same margins as the wallet below and its neighbours peek into those margins, the same on both sides */
.shop2 .sbtrack{display:flex;gap:.35rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -.85rem;padding:0 .85rem .35rem;scroll-padding:0 .85rem}
.shop2 .sbtrack::-webkit-scrollbar{display:none}
/* with two banners each one is a little narrower than the sheet, so the next one peeks in from the right */
.shop2 .sbs{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
.shop2 .sban .lparty,.shop2 .sban .cban,.shop2 .sban .pathb{height:10.4rem;min-height:0;margin:0}
.shop2 .sban .fdots{margin:.1rem 0 0}
.shop2 .sban .cban .cbtxt{max-width:72%;padding:.8rem .2rem .8rem .9rem}.shop2 .sban .cban .cbtitle{font-size:1.25rem}.shop2 .sban .cban small{margin:.3rem 0 .55rem;font-size:.76rem}.shop2 .sban .cban .cbcta{font-size:.86rem;padding:.36rem .5rem .38rem .8rem}
/* the wallet: peanuts and gold side by side; the plus jumps to the gold shelf */
.shop2 .swal{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0 0 .6rem}
.shop2 .swc{position:relative;display:flex;align-items:center;gap:.5rem;min-width:0;padding:.5rem .55rem;border:var(--lw) solid var(--ink);border-radius:1.1rem;background:var(--paper);box-shadow:0 .2rem 0 rgba(120,70,40,.18)}
.shop2 .swc.gold{background:linear-gradient(150deg,#fff3c2,#f9d765 70%,#f0c453)}
.shop2 .swi{flex:0 0 2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:50%;background:#f7ead6;border:.13rem solid var(--ink)}
.shop2 .swc.gold .swi{background:#fff8e2}
.shop2 .swi svg{width:1.65rem;height:1.65rem}
.shop2 .swn{display:flex;flex-direction:column;min-width:0;line-height:1}
.shop2 .swn b{font-weight:400;font-size:1.4rem;white-space:nowrap}
.shop2 .swn small{margin-top:.2rem;font-size:.72rem;line-height:1.1;color:#a0756b;overflow-wrap:anywhere}
.shop2 .swc.gold .swn small{color:#9a6a3c}
.shop2 .swp{flex:none;margin-left:auto;width:1.85rem;height:1.85rem;padding:.3rem;border-radius:50%;border:.14rem solid var(--ink);background:var(--paper);box-shadow:0 .14rem 0 rgba(120,70,40,.25);cursor:pointer}
.shop2 .swp:active{transform:translateY(.1rem);box-shadow:none}
.shop2 .swp svg{width:100%;height:100%}
.shop2 .swp:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
/* small controls keep their look but take a finger-sized tap: Path claim, wallet +, Pomodoro chips */
.pc>.btn,.shop2 .swp,.tset .pomoplan .chip{position:relative}
.pc>.btn::after,.shop2 .swp::after,.tset .pomoplan .chip::after{content:"";position:absolute;inset:-.45rem}
.tset .pomoplan .chip::after{inset:-.45rem -.15rem}
/* the line under the wallet that says how gold and peanuts relate */
.shop2 .swrate{margin:-.25rem 0 .7rem;text-align:center;color:#a0756b;font-size:.78rem;line-height:1.3}
/* the gold to peanuts swap: the cocoa card's shape with a stepper (the wallet's round buttons) and a Swap button */
.shop2 .swapr .xstep{flex:none;display:flex;align-items:center;gap:.3rem}
.shop2 .swapr .xstep b{min-width:2.1rem;text-align:center;font-size:1.05rem}
.shop2 .swapr [data-xgo]{flex:none;min-height:2.3rem}
/* a phone is too narrow for picture, words, stepper and Swap on one line: the stepper and Swap drop under the words */
@media (max-width:430px){.shop2 .cocoa.swapr{flex-wrap:wrap;row-gap:.45rem}.shop2 .cocoa.swapr .fx{flex:1 1 calc(100% - 4.4rem)}.shop2 .cocoa.swapr .xstep{margin-left:4.25rem}.shop2 .cocoa.swapr [data-xgo]{margin-left:auto}}
.shop2 .shero .hb{display:flex;gap:.7rem;flex-wrap:wrap;font-size:1.45rem}
.shop2 .wal{display:inline-flex;align-items:center;gap:.25rem}.shop2 .wal .ic{width:1.5rem;height:1.5rem}
/* the sticky cream backdrop sits on a wrapper: the nav's edge fade would otherwise let shelves scrolling underneath show through */
.shop2 .snavw{position:sticky;top:-.9rem;z-index:3;margin:.5rem -.85rem 0;border-radius:1.2rem 1.2rem 0 0;background:var(--cream);overflow:hidden;isolation:isolate}
.shop2 .snav{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;padding:.55rem .85rem .5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 .85rem,#000 calc(100% - .85rem),transparent);mask-image:linear-gradient(90deg,transparent,#000 .85rem,#000 calc(100% - .85rem),transparent)}
.shop2 .snav::-webkit-scrollbar{display:none}
.shop2 .snav .chip{flex:none;padding:.22rem .7rem;font-size:.9rem}
.shop2 .shelf{scroll-margin-top:2.6rem}
/* Blocks of a shelf that are off screen are not drawn until they come near (each item card is many layers). While any loop runs,
   Chrome sorts the whole page into layers again on every frame, and the cards below the fold made that the shop's biggest cost.
   It sits on the blocks, not the shelf, so the heading margins still merge as before */
.shop2 .sbody>*{content-visibility:auto;contain-intrinsic-size:auto 12rem}
.shop2 .shelf>h3 small{margin-left:auto;font-size:.78rem;color:#a0756b}
.shop2 .feats{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -.85rem;padding:.35rem .85rem .5rem}
.shop2 .feats::-webkit-scrollbar{display:none}
.shop2 .feat{appearance:none;position:relative;flex:0 0 min(82%,19rem);scroll-snap-align:center;display:flex;align-items:center;gap:.7rem;padding:.6rem;border:0;border-radius:1.2rem;background:#f7ead6;font:inherit;color:var(--ink);text-align:left;cursor:pointer;transition:transform .15s}
.shop2 .feat:active,.shop2 .stile:active{transform:scale(.97)}
.shop2 .feat .cwin{flex:0 0 5.4rem;height:5.4rem}
.shop2 .feat .cwin .hart{width:3.7rem;height:3.7rem;margin-top:.1rem}
.shop2 .feat .cwin .sarts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1.8rem);gap:.1rem}
.shop2 .fx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.shop2 .fx b{font-weight:400;font-size:1.12rem;line-height:1.1}
.shop2 .fx small{color:#a0756b;font-size:.8rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop2 .pp{display:inline-flex;align-items:center;gap:.2rem;margin-top:.2rem;padding:.12rem .55rem;border-radius:.75rem;background:var(--butter);border:.12rem solid var(--ink);font-size:.92rem;white-space:nowrap}
.shop2 .pp .ic{width:1rem;height:1rem}
.shop2 .pp s{opacity:.55;margin-right:.15rem;font-size:.8rem}
.shop2 .pp.g{background:#fff1c2}
.shop2 .pp.done{background:#b5dcc0}
.shop2 .ftag{position:absolute;right:.5rem;top:-.35rem;padding:.04rem .45rem;border-radius:.55rem;background:#ef6f62;color:#fff;border:.1rem solid var(--ink);font-size:.7rem;transform:rotate(5deg)}
.shop2 .stile{appearance:none;position:relative;flex:0 0 9.6rem;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;padding:0 .6rem .65rem;border:0;border-radius:1.2rem;background:#f7ead6;font:inherit;color:var(--ink);text-align:left;cursor:pointer;overflow:visible;transition:transform .15s}
.shop2 .stile .sband{align-self:stretch;height:.75rem;margin:0 -.6rem .25rem;border-radius:1.2rem 1.2rem 0 0;background:linear-gradient(90deg,var(--c1) 0 33%,var(--c2) 33% 66%,var(--c3) 66%);border-bottom:.12rem solid rgba(138,93,85,.35)}
.shop2 .stile b{font-weight:400;font-size:1rem;line-height:1.1}
.shop2 .sarts{display:grid;grid-template-columns:repeat(3,1fr);gap:.15rem;width:100%}
.shop2 .sarts>span{aspect-ratio:1;display:grid;place-items:center;border-radius:.5rem;background:#fffaf3}
.shop2 .sarts>span svg{width:80%;height:80%}
.shop2 .sarts>span.nope svg{opacity:.35;filter:grayscale(.6)}
.shop2 .feat .sarts>span{background:rgba(255,250,243,.85)}
.shop2 .sprog{width:100%;height:.45rem;border-radius:.3rem;background:#ecdcc0;overflow:hidden}
.shop2 .sprog i{display:block;height:100%;background:var(--butter-dark)}
.shop2 .stile small{color:#a0756b;font-size:.76rem;margin-top:-.15rem}
.shop2 .stile .pp{margin-top:0}
.shop2 .item .have{position:absolute;right:.35rem;top:.35rem;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:.65rem;background:var(--butter);border:.1rem solid var(--ink);font-size:.75rem;line-height:1.1rem}
.shop2 .pile{position:relative}.shop2 .pile svg{position:absolute;width:62%;height:62%;left:19%;top:19%}
.shop2 .pile.p2 svg:nth-child(1){left:4%;top:24%;transform:rotate(-14deg)}.shop2 .pile.p2 svg:nth-child(2){left:34%;top:14%;transform:rotate(10deg)}
.shop2 .pile.p3 svg:nth-child(1){left:0;top:30%;transform:rotate(-18deg)}.shop2 .pile.p3 svg:nth-child(2){left:38%;top:30%;transform:rotate(14deg)}.shop2 .pile.p3 svg:nth-child(3){left:19%;top:4%}
/* set showcase cards: a window of the set's colours with its six pieces on stands */
.shop2 .feats.big{gap:.65rem;padding-bottom:.2rem}
/* outfit set cards: a display case in the set's colours, six pieces on two wooden shelves, a pip per piece below */
.shop2 .bigf{flex:0 0 min(86%,21rem);scroll-snap-align:center;border-radius:1.3rem;border:var(--lw) solid var(--ink);background:var(--paper);box-shadow:0 .25rem 0 rgba(120,70,40,.2);overflow:hidden;display:flex;flex-direction:column}
.shop2 .bwin{position:relative;display:flex;flex-direction:column;padding:2.1rem .5rem .55rem;overflow:hidden;border-bottom:var(--lw) solid var(--ink);
  background:linear-gradient(color-mix(in srgb,var(--c1) 55%,#fffaf3),color-mix(in srgb,var(--c2) 40%,#fffaf3))}
.shop2 .bwin .bglow{position:absolute;left:50%;top:-3rem;width:15rem;height:9rem;margin-left:-7.5rem;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,240,.75),rgba(255,252,240,0));pointer-events:none}
.shop2 .bwin .hcl{position:absolute;top:.9rem;left:-2rem;width:2.2rem;height:.6rem;border-radius:.5rem;background:#fffdf8;opacity:.9;animation:satCloud 22s linear infinite}
.shop2 .bsh{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:end;height:3.5rem}
.shop2 .bplank{position:relative;z-index:1;display:block;height:.5rem;margin:-.05rem -.15rem .7rem;border-radius:.3rem;background:linear-gradient(#e2b585,#cf9d6b);border:.12rem solid var(--ink);box-shadow:0 .28rem 0 rgba(120,70,40,.16)}
.shop2 .bplank:last-child,.shop2 .bwin>.bplank:last-of-type{margin-bottom:0}
.shop2 .stand{position:relative;width:3.2rem;height:3.2rem;animation:heroBob 3.6s ease-in-out infinite}
.shop2 .stand svg,.shop2 .stand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .2rem 0 rgba(120,70,40,.18))}
.shop2 .stand.own::before{content:"";position:absolute;z-index:1;right:-.2rem;top:-.1rem;width:1rem;height:1rem;border-radius:50%;background:#b5dcc0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%238a5d55' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%;border:.1rem solid var(--ink)}
.shop2 .bigf.done .bwin::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 30%,#fffbe8 0 .12rem,transparent .16rem),radial-gradient(circle at 82% 22%,#fffbe8 0 .1rem,transparent .14rem),radial-gradient(circle at 70% 70%,#fffbe8 0 .12rem,transparent .16rem);pointer-events:none}
.shop2 .btag{position:absolute;left:.6rem;top:.55rem;z-index:3;padding:.08rem .55rem;border-radius:.6rem;background:var(--paper);border:.12rem solid var(--ink);font-size:.76rem}
.shop2 .bx{display:flex;flex-direction:column;gap:.2rem;padding:.65rem .8rem .75rem;background:var(--paper)}
.shop2 .bx b{font-weight:400;font-size:1.32rem;line-height:1.1}
.shop2 .bx>small{color:#a0756b;font-size:.82rem;line-height:1.25}
.shop2 .brow{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.45rem}
.shop2 .brow .pp{margin:0}
.shop2 .brow .btn .ic{width:1rem;height:1rem;margin:0 -.2rem 0 .1rem;transform:rotate(-90deg)}
.shop2 .fdots{display:flex;justify-content:center;gap:.35rem;margin:.15rem 0 .2rem}
.shop2 .fdots i{width:.45rem;height:.45rem;border-radius:50%;background:#e4cfb2;transition:width .2s,background .2s}
.shop2 .fdots i.on{width:1.1rem;border-radius:.3rem;background:var(--ink)}
/* today's finds under a striped awning */
.shop2 .awnbox{position:relative;border-radius:1.2rem;background:#f7ead6;padding:2.3rem .55rem .6rem;margin-top:.2rem;overflow:hidden}
.shop2 .awn{position:absolute;left:0;right:0;top:0;height:2.6rem;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 60 34%27%3E%3Cpath d=%27M0 0H30V22a15 9 0 0 1-30 0Z%27 fill=%27%23f2a698%27/%3E%3Cpath d=%27M30 0H60V22a15 9 0 0 1-30 0Z%27 fill=%27%23fff6ec%27/%3E%3Cpath d=%27M0 0H60V5H0Z%27 fill=%27%238a5d55%27 fill-opacity=%27.13%27/%3E%3Cpath d=%27M30 0V22%27 stroke=%27%238a5d55%27 stroke-opacity=%27.35%27 stroke-width=%271.2%27/%3E%3Cpath d=%27M0 22a15 9 0 0 0 30 0a15 9 0 0 0 30 0%27 fill=%27none%27 stroke=%27%238a5d55%27 stroke-width=%272.2%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") left .5rem/3.2rem 1.82rem repeat-x;filter:drop-shadow(0 .2rem 0 rgba(120,70,40,.13))}
.shop2 .awn::before{content:"";position:absolute;left:0;right:0;top:0;height:.62rem;background:linear-gradient(#e3ad7e,#c98f62);border-bottom:.14rem solid var(--ink)}
.shop2 .awnbox .reset{position:absolute;right:.55rem;top:2.75rem;display:inline-flex;align-items:center;gap:.2rem;padding:.05rem .5rem;border-radius:.6rem;background:var(--paper);font-size:.74rem;color:#a0756b}
.shop2 .awnbox .reset .ic{width:.85rem;height:.85rem}
.shop2 .finds{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:2rem 0 .5rem}
.shop2 .finds .item{background:var(--paper)}
.shop2 .finds .item .art{width:4.2rem;height:4.2rem}
.shop2 .finds .pp{font-size:.85rem;padding:.08rem .45rem}
/* saving up: one tap to buy once you have enough */
.shop2 .wishc{appearance:none;display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .65rem;margin-bottom:.6rem;border:0;border-radius:1.2rem;background:#fbe6e2;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.shop2 .wishc.ready{background:#fdf1d0}
.shop2 .wishc .cwin{flex:0 0 3.8rem;height:3.8rem}.shop2 .wishc .cwin .hart{width:2.7rem;height:2.7rem}
.shop2 .wishc .fx b{font-size:1.05rem}
.shop2 .wishc .sprog{margin:.15rem 0 .05rem}
.shop2 .wishc .sprog i{background:#ef9a8c}
.shop2 .wishc>.pp{margin:0;flex:none}
.shop2 .wishc.ready>.pp{animation:heroBob 2.4s ease-in-out infinite}
/* the starter bundle, in the wish card's shape with the Club calculator's gold */
.shop2 .wishc.offer{background:linear-gradient(#fff6d6,#fbe7a8)}
.shop2 .wishc.offer .cwin svg{width:2.6rem;height:2.6rem}
/* the bundle's value tag ("5x value") right after the gold count, in the packs' tag shape */
.ptag.xv{display:inline-block;margin-left:.4rem;vertical-align:.12rem;font-size:.74rem;background:#f2cf6a}
/* the gold shelf's top: packs, today's video and Club, as cards above the swap planks */
.shop2 .gtop{display:flex;flex-direction:column;gap:.45rem;margin:.1rem 0 .7rem}
.shop2 .gcard{appearance:none;display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .6rem;border:0;border-radius:1rem;background:var(--paper);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.shop2 .gcard>svg{flex:none;width:2.1rem;height:2.1rem}
.shop2 .gcard .fx{flex:1;min-width:0;display:flex;flex-direction:column}
.shop2 .gcard small{color:#a0756b;font-size:.82rem;line-height:1.25}
.shop2 .gcard>.pp{margin:0;flex:none}
.shop2 .gcard>.ic{flex:none;width:1.1rem;height:1.1rem;transform:rotate(-90deg)}
.shop2 .gcard.soon{cursor:default}.shop2 .gcard.soon>svg{opacity:.55}
.shop2 .gcard.club{background:#fdf1d0}
.shop2 .gcard:disabled{opacity:.6;cursor:default}
/* gold piles (gold packs): a heap of gold peanuts that grows with the pack */
.gpile{position:relative;display:block;flex:none;width:5rem;height:3.6rem}
.gpile>span{position:absolute;width:1.9rem;height:1.9rem;filter:drop-shadow(0 .15rem 0 rgba(120,70,40,.22))}
.gpile svg{width:100%;height:100%}
.gbuy{display:inline-flex;align-items:center;justify-content:center;padding:.22rem .7rem;border-radius:.9rem;border:.14rem solid var(--ink);background:linear-gradient(#fff2b8,#f9d765 60%,#f0c453);color:#4a3220;font-size:.95rem;white-space:nowrap;box-shadow:0 .16rem 0 rgba(120,70,40,.25)}
/* the gold shelf: packs on a gold card, Peanut Club on a little night card like its banner */
.shop2 .gcard{border:var(--lw) solid var(--ink);box-shadow:0 .2rem 0 rgba(120,70,40,.18);padding:.55rem .7rem}
.shop2 .gcard.packs{background:linear-gradient(150deg,#fff6d2,#fbe39a);padding-left:.3rem}
.shop2 .gcard.packs .gpile{width:4.4rem;height:3.2rem;transform:scale(.9)}
.shop2 .gcard b{font-weight:400;font-size:1.05rem}
.shop2 .gcard.club{background:radial-gradient(circle at 12% 30%,rgba(255,240,200,.25),transparent 30%),linear-gradient(120deg,#1f2650,#3d4686);color:#fff6ec}
.shop2 .gcard.club small{color:#d8d5f2}
.shop2 .gcard.club .ic path{stroke:#fff6ec}
.shop2 .gcard .gmoon{position:relative;flex:none;width:2rem;height:2rem;margin:0 .1rem 0 .15rem;border-radius:50%;background:#fff3cc;box-shadow:0 0 1rem .2rem rgba(255,236,180,.35);overflow:hidden}
.shop2 .gcard .gmoon::after{content:"";position:absolute;left:.65rem;top:-.3rem;width:1.8rem;height:1.8rem;border-radius:50%;background:#252d5c}
/* gold packs: a grid of tiles, the heap grows with each pack, the biggest one glows */
.gpk{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.gpt{position:relative;appearance:none;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.75rem .5rem .65rem;border:var(--lw) solid var(--ink);border-radius:1.2rem;background:var(--paper);box-shadow:0 .25rem 0 rgba(120,70,40,.2);font:inherit;color:var(--ink);cursor:pointer}
.gpt:active{transform:translateY(.12rem);box-shadow:0 .12rem 0 rgba(120,70,40,.2)}
.gpt .gpile{margin-bottom:.15rem}
.gpt b{font-weight:400;font-size:1.35rem;line-height:1.1;display:flex;align-items:baseline;gap:.3rem}
.gpt b s{font-size:.8rem;color:#a0756b}
.gpt small{font-size:.8rem;color:#a0756b}
.gpt .gbuy{margin-top:.35rem;align-self:stretch}
/* the pack's name on top, and what it is worth in plain peanuts under the gold count */
.gpt .gname{order:-1;margin-bottom:.1rem;font-size:.82rem;color:#a0756b}
.geq{display:inline-flex;align-items:center;gap:.2rem;margin-top:.15rem;padding:.06rem .5rem .06rem .3rem;border-radius:.8rem;background:#f6ead8;border:.1rem solid rgba(138,93,85,.25);color:#8a5d55;font-size:.74rem;line-height:1.3;white-space:nowrap}
.geq svg{width:.95rem;height:.95rem;flex:none}
.promo .grow .geq{margin-top:.3rem}
.gpt.top{background:radial-gradient(circle at 50% 30%,#fff8d8,#fbe39a 75%);box-shadow:0 0 0 .2rem rgba(249,215,101,.45),0 .25rem 0 rgba(120,70,40,.2)}
.gpt .ptag{position:absolute;left:50%;top:-.7rem;transform:translateX(-50%);z-index:4}
.gpt .gx2{position:absolute;right:.45rem;top:.45rem;z-index:4;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:#f58f94;border:.13rem solid var(--ink);color:#fff6ec;font-size:.82rem;transform:rotate(-8deg)}
.shop2 .slbl{display:flex;align-items:baseline;justify-content:space-between;margin:0 .1rem .3rem;font-size:.95rem}
.shop2 .slbl small{color:#a0756b;font-size:.8rem}
/* shelves: each grid is a little cabinet, things stand on wooden planks with a price tag */
.shop2 .sbody:has(>.shelfrow){background:#f7ead6;border-radius:1.2rem;padding:.55rem .7rem .15rem}
.shop2 .shelfrow{padding-bottom:.7rem;margin-bottom:.75rem}
.shop2 .shelfrow::after{display:block;left:-.25rem;right:-.25rem;height:.6rem;box-shadow:0 .28rem 0 rgba(120,70,40,.16)}
.shop2 .shelfrow .item{background:none;padding:.35rem .15rem .25rem;font-size:.9rem;line-height:1.15}
.shop2 .shelfrow .item .art{width:3.9rem;height:3.9rem;margin-bottom:.1rem}
.shop2 .shelfrow .item .art::after{display:none}
.shop2 .shelfrow .item .price{margin-top:auto;padding:.06rem .5rem;border-radius:.5rem;background:var(--paper);border:.1rem solid rgba(138,93,85,.35);opacity:1;transform:rotate(-2deg)}
.shop2 .shelfrow .item.owned .price{background:#e1f1e6}
/* gold prices are gold: a shiny gold tag, so they never read like a peanut price (the plain paper tag) */
.item:not(.owned) .price:has([data-cur=gold]){color:#9a6414}
.shop2 .shelfrow .item:not(.owned) .price:has([data-cur=gold]),.shop2 .pp.g{background:linear-gradient(#fff2b8,#f9d765 60%,#f0c453);border:.12rem solid #c9962e;color:#6b4518;box-shadow:0 0 .5rem rgba(249,215,101,.55)}
.shop2 .pp:not(.g):not(.done){background:var(--paper)}
.shop2 .shelfrow .item .slotlbl{display:none}

/* ---------- languages: js/i18n.js sets <html lang> and --font (docs/i18n.md) ---------- */
/* Korean breaks between words, never inside one; Japanese keeps small kana and closing marks off the line start */
html:lang(ko) body{word-break:keep-all}
html:lang(ja) body{line-break:strict}
html:lang(ja) :is(h2,h3,.sub){word-break:auto-phrase}
/* long compound words (German, Finnish, Hungarian, Dutch, Nordic, Greek, Slavic) may break on narrow cards */
html:is(:lang(de),:lang(fi),:lang(hu),:lang(nl),:lang(sv),:lang(da),:lang(nb),:lang(el),:lang(pl),:lang(cs),:lang(uk),:lang(ro),:lang(tr),:lang(ta),:lang(te),:lang(ms),:lang(id),:lang(fil)) body{overflow-wrap:break-word;hyphens:auto}
/* two buttons side by side in a sheet's foot: a long label wraps onto a second line instead of pushing the other off screen */
.sheet>.foot .btn{min-width:0;white-space:normal;text-align:center}
/* a pair of growing buttons in a row (backup, passport): when both labels no longer fit side by side, each takes a full line of its own */
@supports selector(:has(*)){.row:has(>.btn.grow+.btn.grow){flex-wrap:wrap}.row:has(>.btn.grow+.btn.grow)>.btn.grow{flex:1 0 auto;max-width:100%;white-space:normal;text-align:center}}
/* Indic and Thai marks sit above and below the line: give them room */
html:is(:lang(hi),:lang(bn),:lang(ta),:lang(te),:lang(mr),:lang(th)) :is(.setrow .grow,.sub,.say>b,small){line-height:1.35}
/* letter-spaced capitals are a Latin effect */
html:is(:lang(ko),:lang(ja),:lang(zh-Hans),:lang(zh-Hant-TW),:lang(zh-Hant-HK),:lang(hi),:lang(bn),:lang(ta),:lang(te),:lang(mr),:lang(th)) *{letter-spacing:0!important}
/* Peanut Club mark: a small gold peanut after the name on town tags and room name plates, and a gold frame round a member's room while you visit (js/visit.js) */
.tag.club b::after,.roomname.club::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:.22em;vertical-align:-.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 4c5.6 0 9.2 4.1 8.7 9-.3 2.8-2.4 4.3-2.4 7.2 0 2.8 2.7 4.6 2.7 8.2 0 5.1-4.3 8.4-9 8.4s-9-3.3-9-8.4c0-3.6 2.7-5.4 2.7-8.2 0-2.9-2.1-4.4-2.4-7.2C10.8 8.1 14.4 4 20 4z' fill='%23f9d765' stroke='%238a5d55' stroke-width='3.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.roomname.club{padding:.14rem .5rem .16rem;border-radius:.7rem;background:#fdebc3;border:.11rem solid #e0a83a;color:var(--ink);text-shadow:none;box-shadow:0 .12rem 0 rgba(120,70,40,.2)}
html.clubroom::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;border:.38rem solid #f9d765;box-shadow:inset 0 0 0 .14rem #e0a83a,inset 0 0 1.2rem rgba(249,215,101,.45)}
/* Stats (js/screens/stats.js): focus by hour of the day, coloured like the 15-week grid */
.hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:.12rem}
.hours i{height:1.6rem;border-radius:.2rem;background:#efe3cc}
.hours i.l1{background:#f7dc9b}.hours i.l2{background:#f3c26a}.hours i.l3{background:#e8a35e}.hours i.l4{background:#d9824a}
.hourkey{display:grid;grid-template-columns:repeat(4,1fr);font-size:.75rem;color:#a0756b;margin-top:.2rem}
/* the Golden Path's rewards on the Peanut Path (js/screens/quests.js goldSide) */

/* Peanut Path season banner: harvest dusk, the big moon, leaves drifting down, the season animal on the hill */
.pathb{position:relative;display:block;width:100%;min-height:10.4rem;margin:0 0 .6rem;padding:0;border:var(--lw) solid var(--ink);border-radius:1.1rem;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:var(--ink);background:linear-gradient(#b7a3d4 0%,#e3b1b4 38%,#f4c48f 68%,#fbdfab 100%);box-shadow:0 .25rem 0 rgba(120,70,40,.25);isolation:isolate}
.pathb:active{transform:translateY(.1rem)}
.pathb .pbsky{position:absolute;inset:0;pointer-events:none}
.pathb .pbmoon{position:absolute;right:1.1rem;top:.55rem;width:3.7rem;height:3.7rem;border-radius:50%;border:.14rem solid rgba(138,93,85,.55);background:radial-gradient(circle at 38% 34%,#fff6d8 0 18%,#ffe2a0 48%,#f6bf6a 100%);box-shadow:0 0 1.6rem .5rem rgba(255,214,140,.55)}
.pathb .pbmoon::before,.pathb .pbmoon::after{content:"";position:absolute;border-radius:50%;background:rgba(214,150,80,.28)}
.pathb .pbmoon::before{width:.8rem;height:.65rem;left:.7rem;top:1.7rem}.pathb .pbmoon::after{width:.5rem;height:.45rem;left:2.1rem;top:.9rem}
/* the glow swells by fading a wider glow in over the resting one (an opacity change runs on the compositor; a changing
   box-shadow is painted again every display frame) */
.pathb .pbmg{position:absolute;inset:-.14rem;border-radius:50%;box-shadow:0 0 2.1rem .75rem rgba(255,214,140,.32);opacity:0;animation:pbMoon 9s ease-in-out infinite}
@keyframes pbMoon{50%{opacity:1}}
/* its slow glow repaints only the moon's own layer, not the whole Peanut Path panel */
.pathb .pbmoon{will-change:transform}
.pathb .pbsky>i{position:absolute;top:-1.4rem;width:calc(.95rem*var(--k));height:calc(.95rem*var(--k));--lc:#e98e52;animation:pbFall 11s linear infinite;opacity:.95}
.pathb .pbsky>i:nth-of-type(2n){--lc:#f2c260}.pathb .pbsky>i:nth-of-type(3n){--lc:#d9694a}
.pathb .pbsky>i svg{display:block;width:100%;height:100%;animation:pbSway 3.6s ease-in-out infinite alternate}
@keyframes pbFall{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}88%{opacity:.95}100%{transform:translate(-1.6rem,12.5rem);opacity:0}}
@keyframes pbSway{0%{transform:translateX(-.35rem) rotate(-28deg)}100%{transform:translateX(.35rem) rotate(24deg)}}
.pathb .pbhill{position:absolute;border-radius:50%;border-top:var(--lw) solid var(--ink)}
.pathb .pbhill.b{right:-18%;bottom:-2.9rem;width:82%;height:7rem;background:#e6b07c}
.pathb .pbhill.f{left:-14%;right:-14%;bottom:-2.35rem;height:3.7rem;background:#cfc07a}
.pathb .pbtree{position:absolute;border-radius:50%;border:.14rem solid var(--ink)}
.pathb .pbtree::after{content:"";position:absolute;left:50%;top:92%;width:.32rem;height:.9rem;margin-left:-.16rem;border-radius:.15rem;background:#9a6a4c;border:.12rem solid var(--ink);z-index:-1}
.pathb .pbtree.c{right:.5rem;bottom:3.9rem;width:1.7rem;height:1.6rem;background:#d9694a}
.pathb .pbpet{position:absolute;z-index:1;right:.7rem;bottom:.45rem;width:6.1rem}
.pathb .pbpet img{position:relative;display:block;width:100%;filter:drop-shadow(0 .2rem 0 rgba(120,70,40,.28));animation:heroBob 4.2s ease-in-out infinite}
.pathb .pbglow{position:absolute;left:8%;right:8%;top:6%;bottom:12%;border-radius:50%;background:radial-gradient(rgba(255,236,170,.95),rgba(255,214,120,.45) 55%,rgba(255,214,120,0) 72%)}
.pathb .pbname{position:absolute;left:50%;bottom:-.15rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.15rem;padding:.06rem .45rem .08rem .3rem;border-radius:.7rem;border:.13rem solid var(--ink);background:linear-gradient(#ffe9a8,#f9d765);font-size:.66rem;white-space:nowrap;color:#3a2a1c}
.pathb .pbname svg{width:.75rem;height:.75rem}
.pathb .pbtxt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;max-width:64%;padding:.7rem .2rem .7rem .85rem}
.pathb .pbeye{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .5rem .12rem .28rem;border-radius:.8rem;border:.13rem solid var(--ink);background:rgba(255,248,234,.9);font-size:.72rem;white-space:nowrap}
.pathb .pbeye svg{width:.95rem;height:.95rem;flex:none}
.pathb .pbeye em{display:inline-flex;align-items:center;gap:.15rem;margin-left:.25rem;padding-left:.4rem;border-left:.12rem solid rgba(138,93,85,.35);font-style:normal;opacity:.8}
.pathb .pbeye em svg{width:.75rem;height:.75rem}
.pathb .pbtitle{display:block;margin:.35rem 0 .15rem;font-weight:400;font-size:1.8rem;line-height:1.02;color:#fff6ec;-webkit-text-stroke:.26rem var(--ink);paint-order:stroke fill;filter:drop-shadow(0 .16rem 0 rgba(120,70,40,.3))}
.pathb small{display:block;margin:0 0 .5rem;font-size:.74rem;line-height:1.25;color:#5a3b33}
.pathb .pbcta{display:inline-flex;align-items:center;gap:.3rem;padding:.26rem .35rem .28rem .6rem;border-radius:1.1rem;border:.14rem solid var(--ink);background:var(--paper);font-size:.8rem;white-space:nowrap;box-shadow:0 .16rem 0 var(--ink)}
.pathb .pbcta.claim{background:linear-gradient(#ffe9a8,#f9d765 45%,#eab547);color:#3a2a1c}
.pathb .pbcta svg{width:.95rem;height:.95rem;flex:none}
.pathb .pbcta svg:last-child{width:.85rem;height:.85rem;transform:rotate(-90deg)}
.pathb .pbbar{width:3.4rem;height:.55rem;border-radius:.35rem;border:.12rem solid var(--ink);background:#f3e7d6;overflow:hidden}
.pathb .pbbar i{display:block;height:100%;background:#a8d48f}
@media (prefers-reduced-motion:reduce){.pathb .pbsky>i,.pathb .pbsky>i svg,.pathb .pbmg,.pathb .pbpet img{animation:none}.pathb .pbsky>i{display:none}}

/* the set's group photo: three animals in the whole set, standing on a soft oval of the set's light colour */
/* the set's scene: a drawn backdrop (setscenes.js), something drifting through it, and the trio in front, a still photo until its loop plays */
.shop2 .bwin .bgrp,.shop2 .bwin .bvid{position:relative;z-index:2;display:block;width:100%;height:9.6rem;object-fit:contain;object-position:center bottom}
.shop2 .bwin .bvid{position:absolute;left:50%;bottom:.55rem;height:auto;max-height:9.6rem;transform:translateX(-50%);pointer-events:none}
.shop2 .bwin.playing .bgrp{visibility:hidden}
.shop2 .bwin .bscn{position:absolute;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;object-position:center 40%;pointer-events:none}
/* the trio stands on the ground: a soft shadow under them */
.shop2 .bwin .bshd{position:absolute;left:10%;right:10%;bottom:.15rem;height:1.6rem;z-index:1;border-radius:50%;background:radial-gradient(closest-side,rgba(110,72,60,.3),rgba(110,72,60,0));pointer-events:none}
.shop2 .bwin .bfx{position:absolute;left:0;right:0;top:-6rem;bottom:0;z-index:1;pointer-events:none;will-change:transform;animation:bfxFall 7s linear infinite}
.shop2 .bwin .fx-snow{background:radial-gradient(circle at 20% 20%,#fff 0 .13rem,transparent .17rem),radial-gradient(circle at 70% 55%,#fff 0 .1rem,transparent .14rem),radial-gradient(circle at 45% 85%,rgba(255,255,255,.85) 0 .16rem,transparent .2rem),radial-gradient(circle at 88% 12%,rgba(255,255,255,.8) 0 .08rem,transparent .12rem);background-size:6rem 6rem}
.shop2 .bwin .fx-rain{top:-3rem;--fall:3rem;animation-duration:.55s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg stroke='%23fff' stroke-width='1.6' stroke-linecap='round' opacity='.75'%3E%3Cpath d='M6 4v10M22 24v9M38 10v11M30 36v8M14 30v7'/%3E%3C/g%3E%3C/svg%3E") 0 0/3rem 3rem}
.shop2 .bwin .fx-motes{animation-name:bfxRise;animation-duration:12s;background:radial-gradient(circle at 30% 40%,rgba(255,246,214,.9) 0 .1rem,transparent .16rem),radial-gradient(circle at 75% 80%,rgba(255,246,214,.7) 0 .08rem,transparent .13rem);background-size:6rem 6rem}
.shop2 .bwin .fx-petals{animation-duration:11s;background:radial-gradient(ellipse .16rem .1rem at 25% 30%,#f7b6c8 98%,transparent),radial-gradient(ellipse .14rem .09rem at 72% 75%,#fffaf3 98%,transparent);background-size:6rem 6rem}
.shop2 .bwin .fx-leaves{animation-duration:9s;background:radial-gradient(ellipse .22rem .12rem at 20% 25%,#ec8a4e 98%,transparent),radial-gradient(ellipse .2rem .11rem at 68% 60%,#f2c260 98%,transparent),radial-gradient(ellipse .18rem .1rem at 45% 92%,#d9694a 98%,transparent);background-size:6rem 6rem}
@keyframes bfxFall{to{transform:translate3d(0,var(--fall,6rem),0)}}
@keyframes bfxRise{from{transform:translate3d(0,6rem,0)}to{transform:translate3d(0,0,0)}}
/* nothing moves on a card that is off screen, in calm mode or with reduced motion */
.shop2 .bwin:not(.vis) .bfx{animation-play-state:paused}
html.calm .shop2 .bwin .bfx{animation:none}
@media (prefers-reduced-motion:reduce){.shop2 .bwin .bfx{animation:none}}
.shop2 .bwin .bshelves{display:none}
.shop2 .bwin.noshot .bgrp{display:none}.shop2 .bwin.noshot .bshelves{display:block;position:relative;z-index:2}
.shop2 .bparts{display:flex;justify-content:center;gap:.3rem;margin-top:.45rem}
.shop2 .bparts span{position:relative;width:1.95rem;height:1.95rem;padding:.15rem;border-radius:.6rem;background:#fff;border:.12rem solid rgba(138,93,85,.3)}
.shop2 .bparts span svg,.shop2 .bparts span img{display:block;width:100%;height:100%;object-fit:contain}
.shop2 .bparts span.own{border-color:var(--ink);background:#eef7ef}
.shop2 .bparts span.own::after{content:"";position:absolute;right:-.3rem;top:-.3rem;width:.8rem;height:.8rem;border-radius:50%;border:.1rem solid var(--ink);background:#b5dcc0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%238a5d55' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.shop2 .bx .bhave{display:block;margin-top:.3rem;font-size:.74rem;color:#a0756b}

/* "While you were away" (js/home.js): one paper card, a picture per line, dashed rules between, friends' notes open the mail */
.awayc .awl{display:flex;flex-direction:column;padding:.2rem .75rem;text-align:left}
.awayc .awr{display:flex;align-items:center;gap:.7rem;width:100%;padding:.6rem 0;background:none;border:0;font:inherit;color:inherit;text-align:left;line-height:1.35}
.awayc .awr+.awr{border-top:.13rem dashed rgba(138,93,85,.25)}
.awayc .awi{flex:none;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:.85rem;background:var(--b);border:.13rem solid var(--ink)}
.awayc .awi svg{width:1.9rem;height:1.9rem}
.awayc .awt{flex:1;min-width:0}
.awayc .awc{flex:none;width:1.2rem;height:1.2rem;opacity:.7}.awayc .awc svg{width:100%;height:100%;transform:rotate(-90deg)}
.awayc .awr.go{cursor:pointer}.awayc .awr.go:active{transform:scale(.98)}

/* ---------- the seasonal event shelf (js/screens/eventshelf.js) ---------- */
.shop2 .evhero{width:100%;flex:none}
.shop2 .evhero .bwin{min-height:11.4rem;justify-content:flex-end}
.shop2 .evtag{display:inline-flex;align-items:center;gap:.2rem;padding-left:.3rem;background:linear-gradient(#ffe9a8,#f9d765 55%,#eab547)}
.shop2 .evtag .ic{width:.9rem;height:.9rem}
.shop2 .evend{position:absolute;right:.6rem;top:.55rem;z-index:3;display:inline-flex;align-items:center;gap:.2rem;padding:.08rem .55rem .08rem .3rem;border-radius:.6rem;background:var(--paper);border:.12rem solid var(--ink);font-size:.76rem;white-space:nowrap}
.shop2 .evend .ic{width:.9rem;height:.9rem}
.shop2 .evtrack{display:flex;align-items:center;gap:.55rem;margin-top:.4rem}
.shop2 .evseg{flex:1;display:flex;gap:.16rem}
.shop2 .evseg i{flex:1;height:.62rem;border-radius:.32rem;border:.1rem solid var(--ink);background:#f3e7d6}
.shop2 .evseg i.on{background:#f4b6c2}.shop2 .evseg i.on:nth-child(3n+2){background:#a9dcc8}.shop2 .evseg i.on:nth-child(3n){background:#b7c3ec}
.shop2 .evseg i.sec{flex:1.6;border-style:dashed;background:#efe6f6}
.shop2 .evseg i.sec.on{border-style:solid;background:linear-gradient(90deg,#7fd0c4,#b9a3e8,#f7a6b4)}
.shop2 .evcount{font-size:.85rem;color:#a0756b;white-space:nowrap}.shop2 .evcount b{font-size:1.15rem;color:var(--ink)}
.shop2 .evbox{margin-top:.75rem;padding:.7rem .75rem .75rem;border:var(--lw) solid var(--ink);border-radius:1.2rem;box-shadow:0 .25rem 0 rgba(120,70,40,.2);
  background:radial-gradient(circle at 8% 14%,#fffaf3 0 .16rem,transparent .2rem),radial-gradient(circle at 92% 20%,#fffaf3 0 .12rem,transparent .16rem),radial-gradient(circle at 78% 86%,#fffaf3 0 .14rem,transparent .18rem),linear-gradient(160deg,#fff3e2,#fbd9cf)}
.shop2 .evbtop{display:flex;align-items:center;gap:.6rem}
.shop2 .evbart{flex:0 0 4.6rem;height:4.6rem;display:grid}
.shop2 .evbart svg{width:100%;height:100%;animation:heroBob 3.4s ease-in-out infinite}
.shop2 .evbox .fx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.shop2 .evbox .fx b{font-weight:400;font-size:1.2rem;line-height:1.1}
.shop2 .evbox .fx small{color:#a0756b;font-size:.82rem;line-height:1.25}
.shop2 .evbox .link{padding:.2rem 0 0;font-size:.8rem}
.shop2 .evbtns{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.65rem}
.shop2 .evbtns.two{grid-template-columns:1fr 1fr}
.shop2 .evbtns .btn,.shop2 .evnut{position:relative;flex-wrap:wrap;gap:.3rem;min-height:3.1rem}
.shop2 .evbtns .btn .pp,.shop2 .evnut .pp{margin:0}
.shop2 .evbw{position:relative;display:grid}
.shop2 .evplus{position:absolute;z-index:2;right:-.3rem;top:-.6rem;pointer-events:none;padding:.06rem .4rem;border-radius:.5rem;background:#ef6f62;color:#fff;border:.1rem solid var(--ink);font-size:.7rem;transform:rotate(6deg)}
.shop2 .evnut{display:flex;width:100%;margin-top:.5rem}
.shop2 .evnut small{font-size:.74rem;color:#a0756b}
.shop2 .evnote{margin-top:.55rem;font-size:.8rem;color:#a0756b;text-align:center;line-height:1.3}
.shop2 .evbox.done{display:flex;align-items:center;gap:.6rem;background:linear-gradient(160deg,#f2fbf3,#d9efdd)}
.shop2 .evfree{appearance:none;display:flex;align-items:center;gap:.7rem;width:100%;margin:.7rem 0 .9rem;padding:.55rem .65rem;border:0;border-radius:1.2rem;background:#e9f3ea;font:inherit;color:var(--ink);text-align:left}
.shop2 .evfree .cwin{flex:0 0 3.4rem;height:3.4rem;margin:0}.shop2 .evfree .cwin .hart{width:2.3rem;height:2.3rem}
.shop2 .evfree .fx{flex:1;min-width:0;display:flex;flex-direction:column}
.shop2 .evfree b{font-weight:400;font-size:1.02rem;line-height:1.15}
.shop2 .evfree small{color:#a0756b;font-size:.78rem;line-height:1.25}
.shop2 .evfree .sprog{margin:.3rem 0 .1rem}.shop2 .evfree .sprog i{background:#8fc29f}
.shop2 .evfree.ready{cursor:pointer;background:linear-gradient(#fff6d6,#fbe7a8)}
.shop2 .evfree.ready>.ic{flex:none;width:1.1rem;height:1.1rem;transform:rotate(-90deg)}
.shop2 .evfree.taken{background:#e1f1e6}.shop2 .evfree.taken .evart{flex:0 0 3rem;height:3rem}.shop2 .evfree.taken>.ic{flex:none;width:1.4rem;height:1.4rem}
.shop2 .grid1{display:grid;grid-template-columns:1fr}
.evart{position:relative;display:grid;place-items:center;width:100%;height:100%}
.evart>img{width:100%;height:100%;object-fit:contain}
.evart.nopic>img{display:none}
.evart.nopic::before,.evart.nopic::after{content:"";grid-area:1/1;border:.14rem solid var(--ink)}
.evart.nopic::before{width:74%;aspect-ratio:1;border-radius:50% 50% 42% 42%;background:var(--pc,#f4b6c2);box-shadow:inset 0 -.45rem 0 rgba(0,0,0,.08)}
.evart.nopic::after{width:42%;aspect-ratio:1.15;margin-top:12%;border-radius:50%;background:#fbf1df}
.shop2 .evsec{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"art lbl" "art price" "art sh";align-items:center;justify-items:start;column-gap:.8rem;row-gap:.25rem;padding:.6rem .9rem;text-align:left}
.shop2 .shelfrow .item.legend.evsec .art{grid-area:art;width:6.4rem;height:6.4rem}
.shop2 .evsec .evsl{grid-area:lbl;font-size:1.15rem}
.shop2 .evsec .price{grid-area:price}
.shop2 .evsec .evsh{grid-area:sh;font-size:.76rem;line-height:1.25;color:#ffe9a8;opacity:.8}
.evq{display:grid;place-items:center;width:84%;aspect-ratio:1;margin:auto;border-radius:50%;border:.16rem solid #f9d765;color:#ffe9a8;font-size:3.6rem;line-height:1;-webkit-text-stroke:.24rem var(--ink);paint-order:stroke fill;
  background:radial-gradient(circle at 30% 28%,#fff6d8 0 .07rem,transparent .11rem),radial-gradient(circle at 72% 64%,#fff6d8 0 .06rem,transparent .1rem),radial-gradient(circle at 50% 38%,#4a5796,#161c40);box-shadow:0 0 1rem .2rem rgba(249,215,101,.45);position:relative}
.evq::after{content:"";position:absolute;inset:-.16rem;border-radius:50%;box-shadow:0 0 1.7rem .45rem rgba(249,215,101,.47);opacity:0;animation:evqGlow 3.2s ease-in-out infinite;pointer-events:none}
@keyframes evqGlow{50%{opacity:1}}
.evq{will-change:transform}
.evsec2 .evq{font-size:2rem}
/* opening the box: it wobbles, opens, and the cards turn over one by one */
#evrv{position:fixed;inset:0;z-index:56;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));text-align:center;color:#fff6ec;
  background:radial-gradient(circle at 50% 40%,rgba(98,92,150,.94),rgba(30,30,62,.96) 70%);opacity:0;transition:opacity .3s}
#evrv.on{opacity:1}
#evrv .evrvglow{position:absolute;left:50%;top:44%;width:24rem;height:24rem;margin:-12rem 0 0 -12rem;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.7),rgba(255,226,150,.18) 55%,rgba(255,226,150,0));opacity:0;transform:scale(.6);transition:opacity .6s,transform .9s var(--ease);pointer-events:none}
#evrv.open .evrvglow{opacity:1;transform:none}
#evrv .evrvbox{position:absolute;left:50%;top:50%;width:9.5rem;height:9.5rem;margin:-4.75rem 0 0 -4.75rem;transition:transform .45s .12s,opacity .45s .12s}
#evrv .evrvbox svg{width:100%;height:100%;overflow:visible}
#evrv .evrvbox .cwin{width:100%;height:100%;margin:0}
#evrv.wob .evrvbox{animation:evWob 1s ease-in-out}
#evrv .lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .4s var(--ease),opacity .4s}
#evrv.open .lid{transform:translateY(-1.8rem) rotate(-14deg);opacity:0}
#evrv.open .evrvbox{transform:scale(.55);opacity:0}
@keyframes evWob{0%,100%{transform:none}15%{transform:rotate(-7deg) scale(1.03,.97)}35%{transform:rotate(6deg) scale(.98,1.02)}55%{transform:rotate(-4deg)}75%{transform:rotate(2deg) scale(1.02,.98)}}
#evrv .evcards{position:relative;display:grid;gap:.5rem;justify-content:center;width:min(22rem,94vw)}
#evrv.one .evcards{grid-template-columns:min(11.5rem,60vw)}
#evrv.many .evcards{display:flex;flex-wrap:wrap}
#evrv.many .evc{flex:0 0 min(4.9rem,21vw)}
#evrv .evc{perspective:40rem;opacity:0;transform:translateY(2rem) scale(.6);transition:opacity .35s calc(var(--i)*45ms),transform .5s var(--pop) calc(var(--i)*45ms)}
#evrv.deal .evc{opacity:1;transform:none}
#evrv .evci{position:relative;aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .55s var(--ease)}
#evrv .evc.up .evci{transform:rotateY(180deg)}
#evrv .evcb,#evrv .evcf{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:.9rem;border:.16rem solid var(--ink);box-shadow:0 .2rem 0 rgba(20,16,40,.4)}
#evrv .evcb{background:radial-gradient(circle,#fbf1df 0 18%,transparent 19%),repeating-linear-gradient(45deg,#f4b6c2 0 .45rem,#eda2b3 .45rem .9rem)}
#evrv .evcb::after{content:"";position:absolute;inset:.3rem;border-radius:.6rem;border:.12rem dashed rgba(251,241,223,.75)}
#evrv .evc.hold .evcb{animation:evHold .7s ease-in-out;box-shadow:0 0 1.4rem .4rem rgba(249,215,101,.75)}
@keyframes evHold{25%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}}
#evrv .evcf{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.35rem;background:#fff8ea;color:var(--ink);--c1:#f4b6c2;--c2:#a9dcc8;--c3:#b7c3ec}
#evrv .evcf .art{width:78%;aspect-ratio:1;display:grid}
#evrv .evcn{font-size:.72rem;line-height:1.1}
#evrv.one .evcn{font-size:1.05rem}
#evrv .evc.sec .evcf{background:radial-gradient(circle at 50% 40%,#3d4a86,#1b2350);color:#ffe9a8;border-color:#f9d765;box-shadow:0 0 1.4rem .35rem rgba(249,215,101,.55)}
#evrv .evcs{padding:.02rem .4rem;border-radius:.5rem;background:linear-gradient(#ffe9a8,#f9d765);color:#3a2a1c;border:.1rem solid var(--ink);font-size:.62rem;letter-spacing:.05em}
#evrv .evrvtxt,#evrv .evrvbtns{position:relative;opacity:0;transform:translateY(.6rem);transition:opacity .35s,transform .45s var(--ease)}
#evrv.done .evrvtxt,#evrv.done .evrvbtns{opacity:1;transform:none}
#evrv .eyebrow{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:#ffe9a8}
#evrv h2{margin:.15rem 0;font-weight:400;font-size:2rem;line-height:1.05;color:#fff6ec;-webkit-text-stroke:.28rem var(--ink);paint-order:stroke fill}
#evrv p{margin:0;font-size:.92rem;opacity:.85}
#evrv .evrvbtns{display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;max-width:18rem}
#evrv .evrvbtns .link{color:#e8e4f6}
@media (prefers-reduced-motion:reduce){#evrv,#evrv *{transition:none!important;animation:none!important}.shop2 .evbart svg{animation:none}}
#evrv .evc.sec .art img{-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 98%);mask-image:radial-gradient(closest-side,#000 58%,transparent 98%)}
.shop2 .evsec.owned .price{color:var(--ink)}
/* the cocoa card on the treats shelf: gold or a video (js/screens/shop.js cocoaCard), the shape of the gold shelf's cards */
.shop2 .cocoa{display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;border:var(--lw) solid var(--ink);border-radius:1rem;background:linear-gradient(150deg,#fff3e2,#f6dcc0);box-shadow:0 .2rem 0 rgba(120,70,40,.18)}
/* the treats shelf stacks its cards (cocoa, then the streak freeze): the same space between them as between the shop's cards */
.shop2 .cocoa+.cocoa{margin-top:.6rem}
.shop2 .cocoa .cwin{flex:0 0 3.6rem;height:3.6rem;margin:0}.shop2 .cocoa .cwin .hart{width:2.5rem;height:2.5rem}
.shop2 .cocoa .fx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.shop2 .cocoa b{font-weight:400;font-size:1.05rem}
.shop2 .cocoa small{color:#a0756b;font-size:.8rem;line-height:1.25}
.shop2 .cocoa .chave{margin-top:.2rem;padding:.04rem .45rem;border-radius:.6rem;background:#e1f1e6;border:.1rem solid rgba(138,93,85,.35);font-size:.74rem}
.shop2 .cocoa .cbtns{flex:none;display:flex;flex-direction:column;gap:.35rem}
.shop2 .cocoa .cbtns .btn{min-height:2.3rem;gap:.25rem;padding:.15rem .55rem}
.shop2 .cocoa .cbtns .pp{margin:0}
.shop2 .cocoa .cbtns .btn .ic{width:1rem;height:1rem}
.shop2 .cocoa [data-cvid]{flex-wrap:wrap;font-size:.86rem}
.shop2 .cocoa [data-cvid] small{flex-basis:100%;text-align:center;font-size:.68rem;margin-top:-.15rem}

/* Snowy Nights on the Peanut Path banner (shop.js pathBanner): replaces the harvest dusk above */
.pathb{background:linear-gradient(#8ea3d6 0%,#b4b4e0 42%,#e2cde2 74%,#f6e2da 100%)}
.pathb .pbmoon{background:radial-gradient(circle at 38% 34%,#fffdf0 0 22%,#fff1c8 60%,#f3dca0 100%);border-color:rgba(138,93,85,.4)}
.pathb .pbmoon::before,.pathb .pbmoon::after{background:rgba(214,190,140,.3)}
.pathb .pbsky>i{width:calc(.5rem*var(--k));height:calc(.5rem*var(--k));top:-.8rem;border-radius:50%;background:#fffdf8;border:.08rem solid rgba(138,93,85,.35);animation:pbSnow 9s linear infinite;opacity:.95}
.pathb .pbsky>i:nth-of-type(2n){animation-duration:11.5s}.pathb .pbsky>i:nth-of-type(3n){animation-duration:13s}
@keyframes pbSnow{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}50%{transform:translate(.6rem,6.2rem)}90%{opacity:.95}100%{transform:translate(-.3rem,12.4rem);opacity:0}}
.pathb .pbhill.b{background:#e8ebf7}
.pathb .pbhill.f{background:#fffdf8}
.pathb .pbtree{display:none}
.pathb .pbvil{position:absolute;right:4.7rem;bottom:1.25rem;width:6.6rem;height:auto;overflow:visible}
.pathb .pbglow2{opacity:.45;animation:pbWarm 3.8s ease-in-out infinite}.pathb .pbglow2.b{animation-delay:-1.9s}
@keyframes pbWarm{50%{opacity:.85}}
.pathb small{color:#4e3a52}
@media (prefers-reduced-motion:reduce){.pathb .pbglow2{animation:none}}
html.calm .pathb .pbsky>i,html.calm .pathb .pbglow2{animation:none}html.calm .pathb .pbsky>i{display:none}

/* ---------- badges (js/screens/badges.js): round pins on the shop's wooden shelves, three tiers by rim ---------- */
.bmed{display:block;width:100%;height:100%;overflow:visible}
.item.bdg{gap:.15rem;padding:.45rem .25rem .45rem;min-height:10.6rem}
/* big enough that each badge's little scene reads */
.item.bdg .art{width:5.5rem;height:5.5rem;margin-bottom:0}
.item.bdg.got .art{filter:drop-shadow(0 .16rem 0 rgba(120,70,40,.18))}
.item.bdg .bn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;line-height:1.12;min-height:1.84rem;text-wrap:balance}
.item.bdg.lock .bn{color:#a0756b}
.item.bdg .bsub{font-size:.68rem;color:#a0756b;line-height:1.1}
.item.bdg .bar{width:78%;height:.42rem;margin-top:.12rem;border-width:.1rem}
.bpips{display:flex;gap:.2rem;justify-content:center}
.bpips i,.bdot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#efe3cc;border:.08rem solid rgba(138,93,85,.4)}
.bpips i.on.p0,.bdot.p0{background:#eab088;border-color:var(--ink)}
.bpips i.on.p1,.bdot.p1{background:#dce4ed;border-color:var(--ink)}
.bpips i.on.p2,.bdot.p2{background:#f7d062;border-color:var(--ink)}
.tchip .bdot{margin:0 .15rem 0 .1rem}
.hero.bhero .hart.bhart{width:3.2rem;height:3.2rem;margin-top:-.7rem}
/* the three pins on the passport */
.bpins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;padding:.55rem .4rem .5rem;border-radius:1.1rem;background:#f7ead6}
.bpin{appearance:none;border:0;background:none;font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:0;cursor:pointer;min-width:0}
span.bpin{cursor:default}
.bpin>.bmed{width:4.7rem;height:4.7rem;filter:drop-shadow(0 .16rem 0 rgba(120,70,40,.18))}
.bpin>b{font-size:.78rem;line-height:1.1;text-align:center;max-width:100%;text-wrap:balance;margin-top:.1rem}
.bpin .bpt{display:inline-flex;align-items:center;gap:.22rem;font-size:.66rem;line-height:1;color:#a0756b;padding:.16rem .42rem;border-radius:1rem;background:#fff8ea;white-space:nowrap}
.bpin small{font-size:.66rem;line-height:1.15;color:#a0756b;text-align:center;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-wrap:balance}
.bpin.empty small{font-size:.72rem;min-height:1.6rem}
.bpin.empty small{color:#a0756b}
.bhole{display:grid;place-items:center;width:3.4rem;height:3.4rem;margin:.25rem 0 .25rem;border-radius:50%;border:.14rem dashed rgba(138,93,85,.4);background:rgba(255,250,243,.6)}
.bhole .ic{width:1.2rem;height:1.2rem;opacity:.55}
.card.bempty{background:#f7ead6;border:0;box-shadow:none}
/* a badge's own page: the medal on a soft glow */
.bstage{position:relative;display:grid;place-items:center;height:9.8rem;margin:.2rem 0 .3rem}
.bstage .bglow{position:absolute;left:50%;top:50%;width:12rem;height:12rem;margin:-6rem 0 0 -6rem;border-radius:50%;background:radial-gradient(closest-side,rgba(255,243,176,.95),rgba(255,236,190,.45) 55%,rgba(255,236,190,0))}
.bstage:not(.got)>.bglow{opacity:.35}
.bstage .bmed.big{position:relative;width:9.2rem;height:9.2rem;filter:drop-shadow(0 .22rem 0 rgba(120,70,40,.2))}
.bdetail .body{text-align:center}
.btiers{display:flex;flex-direction:column;gap:.4rem;margin-top:.7rem;text-align:left}
.btier{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem .45rem .45rem;border-radius:1.1rem;background:#f7ead6}
.btier.got{background:#fdebc3}
.btier.cur{background:var(--paper);box-shadow:inset 0 0 0 .13rem rgba(138,93,85,.3)}
.btier .tm{flex:none;width:2.7rem;height:2.7rem}
.btier .grow{flex:1;min-width:0;line-height:1.15}
.btier .grow b{display:block;font-weight:400}
.btier .grow small{display:block;color:#a0756b;font-size:.78rem;line-height:1.2;margin-top:.06rem}
.btier .bar{display:block;height:.45rem;margin-top:.3rem}
.btier .tr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.12rem;font-size:.85rem}
.btier .tr small{font-size:.68rem;color:#a0756b}
.btier .tr .amt .ic{width:1rem;height:1rem}
.btier .trw.dim{opacity:.6}
.btier .tr>.ic{width:1.3rem;height:1.3rem}
/* the satchel's badge widget, the whole row under stats and the Path */
.wdg.bwdg{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:.6rem;padding:.45rem 1.55rem .45rem .75rem}
.wdg.bwdg::after{top:50%;margin-top:-.39rem}
.wdg.bwdg .wh{padding-right:0}
.wdg.bwdg .wh{flex-direction:column;align-items:flex-start;gap:.05rem}
.wdg.bwdg .wh b small{font-size:.75rem;color:#a0756b;margin-left:.1rem}
.bwrow{display:flex;gap:.3rem}
.bwrow .bmed{width:3.1rem;height:3.1rem}
/* a medal hangs on the page: no shelf shadow under it (.item .art::after) */
.item.bdg .art::after{display:none}
/* a secret not found yet sits on a lilac card */
.item.bdg.sec.lock{background:#f3eaf8}
.item.bdg.sec.lock .bn{color:#9b7fc0}
/* the badge page's buttons stay on one line, like the earned card's */
.bdetail .foot .btn{white-space:nowrap;min-width:0}
.bdetail .foot .btn.cream:not(:only-child){flex:0 1 auto;padding-left:.8rem;padding-right:.8rem}

/* ---------- Where to? (js/session.js whereTo): two picture cards that press like buttons ---------- */
.wheresheet .wtiles{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.9rem}
.wtile{appearance:none;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.45rem .45rem .6rem;border:var(--lw) solid var(--ink);border-radius:1.1rem;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 .24rem 0 var(--ink);transition:transform .1s,box-shadow .1s;min-width:0}
.wtile:active{transform:translateY(.18rem);box-shadow:0 .06rem 0 var(--ink)}
.wtile .wpic{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:.75rem;overflow:hidden;border:.13rem solid var(--ink);background:var(--cream);margin-bottom:.2rem}
.wtile .wpic>img{width:100%;height:100%;object-fit:cover;display:block}
.wtile .wpic.quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.13rem;background:var(--ink)}
.wtile .wpic.quad>img{min-width:0;min-height:0}
/* the title and line sit centred under the picture, so a one-line subtitle lines up with a two-line one */
.wtile b{display:flex;align-items:center;gap:.3rem;font-weight:400;font-size:1.2rem;line-height:1.1;margin-top:auto}
.wtile b .ic{width:1.4rem;height:1.4rem;flex:none}
.wtile small{font-size:.85rem;line-height:1.15;color:#a0756b;text-wrap:balance;margin-bottom:auto}