@font-face{font-family:Nunito;font-weight:400 900;font-display:swap;src:url(../fonts/nunito-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Nunito;font-weight:400 900;font-display:swap;src:url(../fonts/nunito-800-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--ink:#3b1d35;--pink:#ff5a8f;--sky:#bfe6ff;--pond:#7cc8f0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;font:800 16px/1.25 Nunito,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:var(--ink);
  background:linear-gradient(#ffe9f2 0%,#fff6dc 52%,var(--pond) 52%,#5aaee0 100%);user-select:none}
body.night{background:linear-gradient(#1d2350 0%,#3a2f6b 52%,#24527a 52%,#173a5c 100%);color:#f3eaff}
/* the wallet card dresses the duck (traction/P2-the-wallet-card-dresses-the-duck): the card's background NFT colours the sky by day,
   one sticker of the card sits on a shelf beside the duck; a player with no card sees none of it */
body.wallet:not(.night){background:linear-gradient(var(--wa) 0%,color-mix(in srgb,var(--wb) 40%,#fff6dc) 52%,var(--pond) 52%,#5aaee0 100%)}
#shelf{position:absolute;left:max(8px,calc(50% - 190px));bottom:2px;z-index:1;width:76px;min-height:44px;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;box-shadow:none;border-radius:0;color:inherit;font-size:11px;font-weight:800}
#shelf i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font-style:normal;font-size:24px;font-weight:900;transform:rotate(-6deg);
  background:radial-gradient(circle at 40% 35%,var(--sa,#fff3c4),var(--sb,#ffb928));color:var(--sc,#3b1d35);box-shadow:0 3px 0 rgba(59,29,53,.22)}
#shelf b{display:block;width:76px;height:8px;border-radius:4px;background:#b9774a;box-shadow:0 3px 0 #8a5332}
#shelf span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#top{position:fixed;top:0;left:0;right:0;padding:max(12px,env(safe-area-inset-top)) 16px 0;display:flex;justify-content:space-between;align-items:center}
#top>div:first-child{min-width:0;flex:1 1 auto}
#name,#lvl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#name{font-size:22px;font-weight:800;letter-spacing:.2px}
#lvl{font-size:13px;opacity:.8}
@media (max-width:400px){#name{font-size:20px}#lvl{font-size:12px}#pills{gap:6px;margin-left:6px}#pills #fish,#pills #shells{font-size:15px;padding:6px 9px}}
@media (max-width:380px){#lvl{font-size:11px}#pills{gap:4px;margin-left:4px}#pills #fish,#pills #shells{font-size:14px;padding:6px 7px}}
#fish{font-size:18px;background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;box-shadow:0 2px 0 rgba(59,29,53,.15)}
#bars{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 44px);left:16px;right:16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.bar{font-size:12px}.bar i{display:block;height:10px;border-radius:6px;background:rgba(255,255,255,.7);overflow:hidden;margin-top:3px}
.bar i b{display:block;height:100%;width:50%;border-radius:6px;background:var(--pink);transition:width .5s}
.bar.joy i b{background:#ffb928}.bar.grow i b{background:#46c47a}
#stage{position:fixed;left:0;right:0;top:20%;bottom:36%;display:flex;align-items:flex-end;justify-content:center}
#pet{width:min(84vw,44vh);height:min(84vw,44vh);transition:transform .6s cubic-bezier(.3,1.6,.5,1),scale .8s cubic-bezier(.3,1.6,.5,1),filter 1s;transform-origin:50% 90%;cursor:pointer}
/* gamefix item 4: each stage its own size and its own mark on the head (#mark follows the drawing's top), a stage-up bounces */
#pet.stage-1{scale:.8}#pet.stage-2{scale:.9}#pet.stage-3{scale:1}#pet.stage-4{scale:1.1}
#pet.stageup{animation:stageup 1.2s cubic-bezier(.3,1.4,.5,1)}
@keyframes stageup{0%{transform:none}25%{transform:translateY(-16%) scale(1.22)}55%{transform:scale(.9,1.08)}75%{transform:scale(1.06,.95)}100%{transform:none}}
#mark{position:absolute;left:0;top:0;pointer-events:none;transform:translate(-50%,-62%);line-height:1;text-align:center;z-index:1}
#mark[data-mark=shell]{width:var(--mw,60px);height:calc(var(--mw,60px)*.5);background:radial-gradient(circle at 35% 30%,#fff 0 20%,#fff3c4 55%,#ffe08a 100%);
  clip-path:polygon(0 30%,12% 0,25% 30%,38% 2%,50% 30%,62% 2%,75% 30%,88% 0,100% 30%,96% 100%,4% 100%);transform:translate(-50%,-40%)}
#mark[data-mark=crown]{filter:drop-shadow(0 0 6px #ffe36b)}
#egg{width:min(56vw,26vh);aspect-ratio:150/190;border-radius:50% 50% 46% 46%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#fff3c4 40%,#ffd86b 100%);
  box-shadow:inset -10px -14px 0 rgba(0,0,0,.06),0 10px 0 rgba(0,0,0,.08);cursor:pointer;animation:wob 1.6s ease-in-out infinite;margin-bottom:30px;position:relative}
#egg:after{content:"";position:absolute;inset:20% 8% 22% 8%;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M8 62 L22 40 L34 54 L48 28 L62 48 L78 24 L92 46 L104 36 L114 60 Q116 94 60 96 Q6 94 8 62Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath fill='%233b1d35' d='M8 62 L22 40 L34 54 L48 28 L62 48 L78 24 L92 46 L104 36 L114 60 Q116 94 60 96 Q6 94 8 62Z'/%3E%3Cg clip-path='url(%23c)'%3E%3Ccircle cx='60' cy='78' r='40' fill='%23ffd93b'/%3E%3Ccircle cx='44' cy='64' r='7' fill='%231a1a1a'/%3E%3Ccircle cx='76' cy='64' r='7' fill='%231a1a1a'/%3E%3Ccircle cx='46' cy='61' r='2.4' fill='%23fff'/%3E%3Ccircle cx='78' cy='61' r='2.4' fill='%23fff'/%3E%3Cpath fill='%23ff7a1a' stroke='%23c2410c' stroke-width='1.5' d='M50 73 Q60 66 70 73 Q60 86 50 73Z'/%3E%3C/g%3E%3C/svg%3E")}
@keyframes wob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
#say{position:fixed;left:16px;right:16px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 150px);text-align:center;font-size:18px;min-height:42px;width:fit-content;max-width:calc(100% - 32px);margin:0 auto;padding:9px 16px;border-radius:18px;background:rgba(255,255,255,.88)}
#say:empty{opacity:0}
body.night #say{background:rgba(20,24,60,.55)}
#feed.poor{opacity:.55}#feed.treat{background:#ffb928;box-shadow:0 5px 0 #c9871a}
@media(min-width:800px){#say{font-size:22px}.bar{font-size:15px}#bars{margin:0 auto;max-width:520px}}
#acts button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#acts{position:fixed;left:16px;right:16px;margin:0 auto;max-width:520px;bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:12px}
button{font:inherit;border:0;border-radius:18px;padding:16px 10px;font-size:18px;font-weight:800;cursor:pointer;color:#fff;background:var(--pink);
  box-shadow:0 5px 0 #c23a6c;transition:transform .08s}
button:active{transform:translateY(3px);box-shadow:0 2px 0 #c23a6c}
button.play{grid-column:1/-1;background:#2e9be6;box-shadow:0 5px 0 #1b6aa3;font-size:21px;padding:18px}
button.play:active{box-shadow:0 2px 0 #1b6aa3}
button:disabled{opacity:.45}
#toast{position:fixed;left:50%;top:40%;transform:translate(-50%,0);font-size:30px;font-weight:900;color:#fff;text-shadow:0 2px 0 #c23a6c;pointer-events:none;opacity:0;transition:opacity .2s,transform .9s}
#toast.on{opacity:1;transform:translate(-50%,-60px)}
#game{position:fixed;inset:0;border:0;width:100%;height:100%;display:none;background:#000;z-index:5}
#back{position:fixed;top:max(10px,env(safe-area-inset-top));left:10px;z-index:6;display:none;padding:10px 14px;font-size:15px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.2)}
body.ingame #game,body.ingame #back{display:block}
#zz{position:absolute;font-size:28px;right:28%;top:12%;display:none;animation:zz 2s ease-in-out infinite}
body.night #zz{display:block}@keyframes zz{50%{transform:translate(8px,-10px);opacity:.5}}
#pills{display:flex;gap:8px;align-items:center;flex:0 0 auto;margin-left:8px}#pills #fish{min-height:44px;display:flex;align-items:center}
#shells{font-size:18px;background:#fff;color:var(--ink);border-radius:999px;padding:6px 12px;min-height:44px;box-shadow:0 2px 0 rgba(59,29,53,.15)}
#shells:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,29,53,.15)}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:7;background:#fff;color:var(--ink);border-radius:22px 22px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(59,29,53,.18);max-height:80%;overflow:auto;max-width:560px;margin:0 auto}
/* the species walk's trip 7 (10 Nov): a sheet stops under the middle of the pet, its rows scroll inside, so the pet you are dressing or feeding shows above it */
@media(min-height:481px){#sheet{max-height:min(80%,calc(100% - 340px))}}
#sheet h2{margin:0 0 6px;font-size:20px}#sheet p{margin:4px 0 12px;font-size:14px;opacity:.75}
#sheet .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #f1e3ec}
#sheet .row span{font-size:16px}#sheet .row>span{flex:1 1 auto;min-width:0}#sheet .row>button,#sheet .row>a{flex:none;white-space:nowrap}#sheet .row small{display:block;font-size:12px;opacity:.7;font-weight:600}
#sheet button{font-size:16px;padding:10px 14px;min-height:44px;min-width:88px}
#sheet button.on{background:#46c47a;box-shadow:0 5px 0 #2f8a55}
#shellhint{position:fixed;z-index:4;top:calc(max(12px,env(safe-area-inset-top)) + 86px);right:16px;max-width:min(260px,calc(100% - 32px));background:#fff;color:var(--ink);
  border-radius:14px;padding:9px 12px;font-size:14px;line-height:1.3;box-shadow:0 3px 0 rgba(59,29,53,.15);cursor:pointer;animation:hint .35s ease-out}
/* seam K11 (the Japanese reader): the hint broke パス/ポート and タッ/プ; Japanese breaks between phrases, never inside a word */
#shellhint:lang(ja){word-break:auto-phrase;line-break:strict}
#shellhint:before{content:"";position:absolute;top:-6px;right:var(--ax,76px);width:12px;height:12px;background:#fff;transform:rotate(45deg)}
@keyframes hint{from{opacity:0;transform:translateY(-6px)}}
#sheet #close{width:100%;margin-top:12px;background:#2e9be6;box-shadow:0 5px 0 #1b6aa3}
#menu{font-size:20px;background:#fff;color:var(--ink);border-radius:999px;padding:0;width:44px;min-height:44px;box-shadow:0 2px 0 rgba(59,29,53,.15)}
#menu:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,29,53,.15)}
#mute{font-size:18px;background:#fff;color:var(--ink);border-radius:999px;padding:0;width:44px;min-height:44px;box-shadow:0 2px 0 rgba(59,29,53,.15)}#mute:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,29,53,.15)}#mute[hidden]{display:none}
#have{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 70px);background:none;box-shadow:none;color:inherit;
  font-size:16px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:10px 16px;min-height:44px;white-space:nowrap}
#have:active{transform:translateX(-50%) translateY(1px)}
#sheet a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:88px;padding:10px 14px;border-radius:18px;font-size:16px;
  font-weight:800;color:#fff;background:var(--pink);box-shadow:0 5px 0 #c23a6c;text-decoration:none;white-space:nowrap}
#sheet a.tg{background:#2aabee;box-shadow:0 5px 0 #1b80b4}
#sheet a.discord{background:#5865f2;box-shadow:0 5px 0 #3b46b8}
#sheet #rooms{flex-wrap:wrap}#sheet #rooms>span{flex:1 1 100%}#sheet .rooms{display:flex;gap:10px;flex-wrap:wrap}
#sheet a.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
#sheet .codein{display:grid;grid-template-columns:1fr auto;gap:10px;padding:0 0 10px}
#codein{font:800 22px/1 ui-monospace,Menlo,monospace;letter-spacing:4px;text-transform:uppercase;width:100%;min-width:0;min-height:48px;border:2px solid #f1e3ec;
  border-radius:14px;padding:8px 12px;color:var(--ink);user-select:text}
#namein{font:inherit;font-size:20px;font-weight:800;width:100%;min-width:0;min-height:48px;border:2px solid #f1e3ec;border-radius:14px;padding:8px 12px;color:var(--ink);user-select:text}
#sheet .code{font:900 40px/1.1 ui-monospace,Menlo,monospace;letter-spacing:8px;text-align:center;margin:14px 0;opacity:1}
#sheet .big{font-size:18px;opacity:1;margin:8px 0 4px}#sheet .err{color:#c23a6c;opacity:1;min-height:1em;margin:0}
#sheet.confirming .row:not(#confirm):not(.addrow),#sheet.confirming [data-do=approve],#sheet.confirming #tgerr{display:none}#sheet.confirming .codein{grid-template-columns:1fr}
#sheet #confirm{flex-wrap:wrap;border:0;background:#fff6dc;border-radius:16px;padding:12px;margin:0 0 8px}#sheet #confirm span{font-weight:800;font-size:17px}#sheet #confirm .peek{flex:1 0 100%;margin:0;font-size:14px;font-weight:600;opacity:.85}
#intro{position:fixed;z-index:2;left:16px;right:16px;top:calc(max(12px,env(safe-area-inset-top)) + 56px);max-width:520px;margin:0 auto;text-align:center;font-size:15px;line-height:1.35;font-weight:800}
html.shelf #introsum,html.shelf #introlong{display:none!important}#intro p{margin:0}#introsum{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:13px;font-weight:700;color:inherit;opacity:.75;text-underline-offset:3px}
#introfoot{position:fixed;z-index:2;left:0;right:0;bottom:max(4px,env(safe-area-inset-bottom));text-align:center;font-size:12px;font-weight:700;opacity:.75}
#introfoot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 2px;color:inherit}
#introlong{position:absolute;z-index:3;left:0;right:0;top:100%;min-height:100%;padding:max(28px,env(safe-area-inset-top)) 20px 48px;background:#fff6dc;color:var(--ink);text-align:center}
#introlong h2{margin:0 0 10px;font-size:20px}#introback{display:inline-flex;align-items:center;min-height:44px;margin-top:16px;padding:0 18px;border-radius:18px;background:var(--pink);color:#fff;text-decoration:none;font-weight:800;box-shadow:0 5px 0 #c23a6c}#introlong p{max-width:520px;margin:0 auto;font-size:16px;line-height:1.45;font-weight:700}
html:has(#egg:not([hidden])),html:has(#egg:not([hidden])) body{overflow-y:auto}
/* the nest (beams/traction/P2-the-nest-shows-every-pet-at-home): every pet at home in born order; the selected one big and in
   front (#pet), the others small on the ground line; three to six wrap, more than six scroll sideways inside #home only */
#home{width:100%;height:100%;display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;justify-content:center;gap:4px 6px;overflow:hidden}
#home .pet{position:relative;flex:none}
#home .set{width:100%;height:100%}
#pet.pet{width:min(64vw,40vh);height:min(64vw,40vh);z-index:1}
#home .pet.other{width:min(30vw,18vh);height:calc(min(30vw,18vh) + 18px);padding-bottom:18px;cursor:pointer;opacity:.95;transition:transform .15s}
#home .pet.other:active{transform:scale(.94)}
#home .pet.other .set{height:min(30vw,18vh)}
#home .pet .tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.8);color:var(--ink)}
#home.many #pet.pet{width:min(52vw,32vh);height:min(52vw,32vh)}
#home.many .pet.other{width:min(22vw,13vh);height:calc(min(22vw,13vh) + 18px)}
#home.many .pet.other .set{height:min(22vw,13vh)}
#home.crowd{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
#home.crowd .pet{scroll-snap-align:center}
#pet.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{30%{transform:translateY(-14%) scale(1.06,.96)}60%{transform:translateY(0) scale(.96,1.04)}}
/* the nest's small trips, trip 11 (10 Nov): four features side by side inside 390 px (a fifth scrolls in), each label whole (two lines at most), the
   shadow not clipped; the row scrolled sideways before and hid the third button and the bottom edge cut the row's shadow */
#feats{grid-column:1/-1;display:flex;gap:8px;padding-bottom:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
#feats::-webkit-scrollbar{display:none}
/* the species walk's trip 3 (10 Nov): Friends and Wardrobe began off screen with nothing to say so; four whole buttons show and, while more wait to
   the right (class .more, set by app.js), a round arrow button (app.js, class .more, beside the row; trip 5 made it a real button) sits at the right end and scrolls one page */
#feats.more{margin-right:50px}
#acts button.more{position:absolute;right:0;bottom:6px;width:44px;min-height:44px;height:44px;padding:0;border-radius:50%;background:#fff;color:#4f35b5;font-size:26px;line-height:1;box-shadow:0 3px 0 rgba(59,29,53,.25)}
#feats button{flex:0 0 calc((100% - 56px) / 4);scroll-snap-align:start;min-width:0;font-size:12px;line-height:1.15;padding:9px 2px;white-space:normal;overflow-wrap:anywhere;background:#7a5af5;box-shadow:0 5px 0 #4f35b5}
@media(max-width:380px){#feats button{font-size:12px;padding:9px 2px;overflow-wrap:break-word}}
body.hasfeats #say{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 214px)}
body.hasfeats #stage{bottom:44%}
/* the species walk's trip 6 (10 Nov): the growth garland (ui/grow.js) hangs in the band between the bars and the yard, never across the sun or a cloud */
#grow-garland{translate:0 calc(-100% - 4px)}
#home:not(:has(.pet.other)) #pet.pet{width:min(70vw,40vh);height:min(70vw,40vh)}
/* the yard (beams/traction/P2-the-home-is-a-yard-with-a-pond-and-a-molehill, game.md D18): app.js draws it from the stage box in
   the landing's Look; only transforms move (the clouds, the molehill's shake, the pokes); the stage lets taps through to the pond
   and the molehill, its pets and the egg take their own */
#yard{position:fixed;inset:0;z-index:0;overflow:hidden}
#yard .back{position:absolute;inset:0}#yard .back svg{display:block}
#yard .cloud{position:absolute;left:0;will-change:transform;animation:drift 80s linear infinite}
#yard .c1{animation-delay:-30s}#yard .c2{animation-duration:110s;animation-delay:-80s}
@keyframes drift{from{transform:translateX(-200px)}to{transform:translateX(100vw)}}
#pond,#molehill{position:absolute;cursor:pointer}#pond svg,#molehill svg{display:block}
#molehill{transform-origin:50% 100%}
body.egging #molehill{pointer-events:none}
body.egging #molehill{animation:shake 4.5s ease-in-out infinite}
/* the Little Mole calls (P2-the-mole-lives-at-home-and-both-games-feed): the molehill shakes twice as often until he is dug out */
body.hillcalls #molehill{animation:shake 2.2s ease-in-out infinite}
body.hillcalls #molehill::after{content:'👆';position:absolute;left:50%;top:-34px;font-size:30px;margin-left:-15px;pointer-events:none;animation:beckon 1.1s ease-in-out infinite alternate}
@keyframes beckon{to{transform:translateY(8px)}}#molehill.dig{animation:shake .5s ease-in-out infinite}
#pet.dug{animation:dug .9s cubic-bezier(.2,1.4,.4,1) 1}@keyframes dug{0%{transform:translateY(45%) scale(.5);opacity:0}35%{opacity:1}100%{transform:none}}
#molehill.poked{animation:shake .6s ease-in-out 1}
@keyframes shake{0%,78%,100%{transform:none}82%{transform:rotate(-4deg) scale(1.03,.97)}86%{transform:rotate(4deg) scale(.98,1.03)}90%{transform:rotate(-3deg)}94%{transform:rotate(2deg)}}
#pond .ripple{position:absolute;width:60px;height:20px;margin:-10px 0 0 -30px;border:3px solid #fff;border-radius:50%;pointer-events:none;opacity:0;animation:ripple .9s ease-out 1 both}
@keyframes ripple{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(2.2)}}
#molehill .crumb{position:absolute;width:9px;height:9px;margin:-4px;border-radius:3px;background:#7a5230;border:2px solid #3b1d35;pointer-events:none;animation:crumb .9s cubic-bezier(.2,.7,.4,1) 1 both}
@keyframes crumb{0%{transform:translate(0,0)}45%{transform:translate(calc(var(--dx)*.6),var(--dy)) rotate(90deg)}100%{transform:translate(var(--dx),24px) rotate(200deg);opacity:0}}
body.night #yard .s0{stop-color:#1d2350}body.night #yard .s1{stop-color:#3a2f6b}body.night #yard .sun{fill:#fff3c4}body.night #yard .sunshadow{fill:#c9b98a}
body.wallet:not(.night) #yard .s0{stop-color:var(--wa)}
#stage,#home{pointer-events:none}#stage #egg,#stage #shelf,#home .pet,#home.crowd{pointer-events:auto}
#home.yard{display:block;position:relative;overflow:visible}
#home.yard .pet{position:absolute;left:0;top:0;z-index:1}#home.yard #pet.pet{z-index:3}
body.egging #egg{margin-right:14vw}
@media(min-width:800px){body.egging #egg{margin-right:0}}
/* the cast's spots (P2-every-species-hatches-and-shows-its-own-look-at-home): a cloud, a cardboard box, a branch, a twig; the one
   whose species is offered next shakes under a finger, as the molehill does */
#yard .spot{position:absolute;cursor:pointer}#yard #spot-branch{min-height:44px}#yard .spot svg{display:block}
#spot-box{transform-origin:50% 100%}#spot-branch{transform-origin:0 50%}#spot-twig{transform-origin:100% 50%}
/* the calling spot (the stranger of 10 Nov 21:2xZ missed the cloud among the sky's): it bobs in place (the sky's clouds drift) with
   a hard yellow rim that pulses; the box wobbles; #call over it (above the pets) holds the peeking species and the line in a bubble */
#yard .spot.calls{animation:calling 1.1s ease-in-out infinite alternate}#yard #spot-box.calls{animation:shake 2.2s ease-in-out infinite,rim 1.1s ease-in-out infinite alternate}
@keyframes calling{from{transform:none;filter:drop-shadow(0 0 0 #ffd93b) drop-shadow(0 0 0 #ffd93b) drop-shadow(0 0 0 #ffd93b) drop-shadow(0 0 0 #ffd93b)}
  to{transform:translateY(-7px);filter:drop-shadow(4px 0 0 #ffd93b) drop-shadow(-4px 0 0 #ffd93b) drop-shadow(0 4px 0 #ffd93b) drop-shadow(0 -4px 0 #ffd93b)}}
@keyframes rim{from{filter:drop-shadow(0 0 0 #ffd93b) drop-shadow(0 0 0 #ffd93b) drop-shadow(0 0 0 #ffd93b) drop-shadow(0 0 0 #ffd93b)}
  to{filter:drop-shadow(4px 0 0 #ffd93b) drop-shadow(-4px 0 0 #ffd93b) drop-shadow(0 4px 0 #ffd93b) drop-shadow(0 -4px 0 #ffd93b)}}
#call{position:fixed;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
#call[hidden],body.egging #call,body.ingame #call{display:none}
#call .peek{position:absolute;right:-8px;top:-24px;width:36px;height:36px;display:grid;place-items:center;font-size:22px;line-height:1;
  background:#fff;border:3px solid #3b1d35;border-radius:50%;box-shadow:0 3px 0 #3b1d35;animation:peek 1.1s ease-in-out infinite alternate}
@keyframes peek{from{transform:translateY(4px) rotate(-8deg)}to{transform:translateY(-4px) rotate(8deg)}}
#calltag{position:absolute;box-sizing:border-box;padding:7px 12px;background:#fff;color:#3b1d35;border:3px solid #3b1d35;border-radius:16px;
  box-shadow:0 4px 0 #3b1d35;font-size:15px;font-weight:800;line-height:1.25;text-align:center;animation:calltag 1.1s ease-in-out infinite alternate}
#calltag::before{content:'👇 '}#calltag.below::before{content:'👆 '}
#calltag::after{content:'';position:absolute;left:var(--tx,50%);bottom:-10px;width:12px;height:12px;margin-left:-8px;background:#fff;
  border-right:3px solid #3b1d35;border-bottom:3px solid #3b1d35;transform:rotate(45deg)}
#calltag.below::after{bottom:auto;top:-10px;transform:rotate(225deg)}
@keyframes calltag{to{transform:translateY(-4px)}}
body.night #calltag{background:#fff6dc}body.night #calltag::after{background:#fff6dc}
#yard .spot.dig{animation:shake .5s ease-in-out infinite}#yard .spot.poked{animation:shake .6s ease-in-out 1}
body.egging #yard .spot{pointer-events:none}
/* a species this page does not know yet: a plain egg with its name, never a duck */
.egg-of{position:relative;width:100%;height:100%}.egg-of svg{display:block}
.egg-of b{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:800 13px/1.2 inherit;color:#3b1d35;background:#fff;border:2px solid #3b1d35;border-radius:10px;padding:2px 8px}
@media(prefers-reduced-motion:reduce){#yard .spot.calls,#call .peek,#calltag,#yard .spot.dig,#yard .spot.poked,#yard .cloud,body.egging #molehill,body.hillcalls #molehill,body.hillcalls #molehill::after,#molehill.dig{animation:none}#pet.dug{animation:none}#molehill.poked{animation:none}
  #yard .spot.calls{filter:drop-shadow(4px 0 0 #ffd93b) drop-shadow(-4px 0 0 #ffd93b) drop-shadow(0 4px 0 #ffd93b) drop-shadow(0 -4px 0 #ffd93b)}
  #pond .ripple{animation-name:fade}#molehill .crumb{animation:none;transform:translate(var(--dx),var(--dy))}}
@keyframes fade{from{opacity:1}to{opacity:0}}
/* the short screen (beams/traction/P2-the-nest-shows-its-pets-on-a-short-screen): a turned or short phone (the Xperia in landscape,
   about 960x360) saw the buttons over the yard, no duck, the molehill under Catch fish. Here the buttons are one low band (Catch fish,
   Feed, Pat in a row, the features in a sideways row under it), the stage ends above the band (the yard is drawn from the stage box,
   so the pond and the molehill rise with it), the pets a little smaller, the line at home just under the bars at the left (the shells hint
   holds the right; the egg's screen keeps its own line). Kept last in the file. */
@media (max-height:480px){
  #acts{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));max-width:780px;bottom:max(8px,env(safe-area-inset-bottom));grid-template-columns:1.4fr 1fr 1fr;gap:8px}
  #acts button{padding:10px 8px;font-size:16px;box-shadow:0 4px 0 #c23a6c}
  #acts button.play{grid-column:auto;padding:10px 8px;font-size:17px;box-shadow:0 4px 0 #1b6aa3}
  #feats{gap:6px;padding-bottom:5px}
  #acts #feats button{flex:0 0 calc((100% - 30px) / 6);min-width:96px;padding:6px 6px;font-size:13px;white-space:nowrap;overflow-wrap:normal;box-shadow:0 4px 0 #4f35b5}
  #stage,body.hasfeats #stage{top:max(70px,18%);bottom:calc(max(8px,env(safe-area-inset-bottom)) + 124px)}
  body:not(.egging) #say,body.hasfeats:not(.egging) #say{top:calc(max(12px,env(safe-area-inset-top)) + 80px);bottom:auto;left:max(12px,env(safe-area-inset-left));right:auto;margin:0;text-align:left;font-size:15px;min-height:0;max-width:min(56%,520px);padding:6px 14px}
  #home #pet.pet,#home.many #pet.pet,#home:not(:has(.pet.other)) #pet.pet{width:min(64vw,32vh);height:min(64vw,32vh)}
}
/* the menu's Terms and Privacy (seam nest-20261111-3): a thumb's 44 px each */
#sheet #legal{justify-content:center;gap:4px;font-size:13px;font-weight:700;opacity:.8}#sheet #legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:inherit}