body[data-subject="pet"]{background:#809d75;color:#5e4633}
body[data-subject="pet"] .shell{max-width:none;padding:0}
body[data-subject="pet"] .topbar,body[data-subject="pet"] .subjects{padding-left:clamp(12px,3vw,40px);padding-right:clamp(12px,3vw,40px);background:#fff8e9;margin:0}
body[data-subject="pet"] .subjects{padding-top:6px;padding-bottom:8px;gap:10px;border-bottom:2px solid #b99869}
body[data-subject="pet"] .page-footer{display:none}
body[data-subject="pet"] #flower-total{display:none}
body[data-subject="pet"] .subject.active{background:#829d68;color:#fffdf4}
.pet-main{margin:0;padding:0;max-width:none}
.village-game{position:relative;height:calc(100dvh - 152px);min-height:550px;overflow:hidden;isolation:isolate;background:#96ad76;border-top:3px solid #876b42}
.map-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline-offset:-5px;-webkit-user-select:none;user-select:none}
.map-viewport:active{cursor:grabbing}
.map-viewport{overscroll-behavior:none;-webkit-touch-callout:none}
.map-stage{position:absolute;left:0;top:0;transform-origin:0 0;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform}.scene-map-village{background-image:url('assets/world-map.webp?v=rig4')}.scene-map-home{background-image:url('assets/home-room.webp?v=rig4')}.scene-map-beach{background-image:url('assets/beach-map.webp?v=rig4')}.scene-map-sandbox{background-image:url('assets/sandbox-map.webp?v=rig4')}
.map-object{position:absolute;transform:translate(-50%,-100%);padding:0;border:0;background:none;cursor:pointer;touch-action:none;overflow:visible;color:#593e28;-webkit-user-select:none;user-select:none}
.map-object-art{display:block;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 5px 2px #48532e35)}
.map-object-art>.item-art,.map-object-art>.pet-portrait{width:100%;height:100%}
.map-object-art.flipped{transform:scaleX(-1)}
.map-object.selected .map-object-art{filter:drop-shadow(0 0 4px #fff6b9) drop-shadow(0 0 3px #7e4b13)}
.map-object:focus-visible{outline:4px solid #fff0b0;outline-offset:2px;border-radius:20px}
.editing .map-object{cursor:move}
.editing .map-object:after{content:'✥';position:absolute;bottom:0;right:15%;font-size:22px;line-height:30px;width:30px;height:30px;border-radius:50%;background:#fff7df;color:#735230;box-shadow:0 2px 0 #a98951;pointer-events:none}
.map-object.dragging{opacity:.8;z-index:10000!important}
.village-game .map-object:not(:disabled):active{transform:translate(-50%,-100%)}
.map-pet-name{position:absolute;top:96%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:15px;line-height:1.5;font-weight:800;border:1px solid #b9925b;border-radius:20px;background:#fff5dce8;padding:1px 12px;pointer-events:none}
.map-enter{position:absolute;left:50%;top:91%;transform:translateX(-50%);min-width:max-content;padding:6px 13px;border:2px solid #ad7b43;border-radius:18px;background:#fff9e9ed;color:#744e27;font-size:14px;font-weight:900;box-shadow:0 3px 0 #6f512d35;pointer-events:none;animation:map-enter-pulse 1.8s ease-in-out infinite}@keyframes map-enter-pulse{50%{transform:translateX(-50%) translateY(-4px)}}
.map-pet{transition:none}
.map-pet:before{content:'';position:absolute;left:22%;right:22%;bottom:2%;height:13%;border-radius:50%;background:#40522d33;filter:blur(3px);pointer-events:none}
.map-pet.facing-left .map-object-art{transform:scaleX(-1)}
.drag-hint{font-size:.82rem;font-weight:800;color:#755132;background:#fff2bf;padding:7px 10px;border-radius:14px}
.pet-speech{position:absolute;z-index:4;left:50%;bottom:96%;transform:translateX(-50%);min-width:max-content;max-width:180px;padding:8px 12px;border:2px solid #a7794b;border-radius:17px 17px 17px 5px;background:#fffdf5;color:#684629;font-size:14px;font-weight:800;line-height:1.35;box-shadow:0 4px 0 #6f522b2c;pointer-events:none;animation:pet-speech-in .25s ease-out}
@keyframes pet-speech-in{from{opacity:0;transform:translate(-50%,8px) scale(.9)}}
.map-placement{position:absolute;transform:translate(-50%,-100%);pointer-events:none;opacity:.75;filter:drop-shadow(0 0 6px #fffbc9);border-bottom:5px dashed #fff6b3}
.map-placement .item-art{width:100%;height:100%}
.village-hud{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:flex-start;gap:12px;justify-content:space-between;pointer-events:none;z-index:10}
.village-title,.village-coins{pointer-events:auto;background:#fff4ddeb;border:2px solid #a2794b;box-shadow:0 4px 0 #79563545,inset 0 0 0 3px #fff9eb;border-radius:19px;color:#68472c}
.village-title{display:flex;align-items:center;gap:9px;text-align:left;padding:5px 15px 5px 5px;cursor:pointer;font:inherit}
.village-title b{font-size:20px;display:block;letter-spacing:-.04em}.village-title small{font-size:14px;display:block;color:#92734b;margin-top:3px}
.hud-pets{display:flex}.hud-pets .pet-portrait{width:51px}.hud-pets .pet-portrait+ .pet-portrait{margin-left:-12px}
.village-coins{min-width:140px;padding:12px 17px;display:flex;align-items:center;gap:10px}.village-coins>span{font-size:29px}.village-coins strong{font-size:27px;font-variant-numeric:tabular-nums}.village-coins small{font-size:14px}
.world-tabs{position:absolute;z-index:12;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:6px;border-radius:22px;background:#fff6e1d9;border:2px solid #b78e59;box-shadow:0 4px 0 #6d542734;backdrop-filter:blur(4px)}.world-tabs button{display:flex;align-items:center;gap:5px;min-height:42px;padding:6px 12px;border:1px solid #dbc39a;border-radius:15px;background:#fffaf0;color:#765435;font:800 14px inherit;font-family:inherit;cursor:pointer}.world-tabs button span{font-size:21px}.world-tabs button.active{background:#799c64;color:white;border-color:#5f814d}.world-tabs button:disabled{opacity:.45;cursor:not-allowed}
.map-controls{position:absolute;top:112px;left:18px;display:grid;gap:7px;z-index:11}.map-controls button{min-width:47px;min-height:46px;padding:8px;border:2px solid #af8959;border-radius:15px;background:#fff4dedf;color:#775630;font:700 15px inherit;box-shadow:0 3px 0 #795a3230;cursor:pointer;font-family:inherit}.map-controls button:first-child,.map-controls button:nth-child(2){font-size:27px;line-height:25px}
.map-controls .map-recover{background:#fff5ba;border-color:#795b2e;font-size:14px;font-weight:800;white-space:nowrap}
@media(max-height:600px){.map-controls{grid-template-columns:repeat(2,minmax(44px,auto));gap:4px}.map-controls .map-recover{grid-column:1/-1;grid-row:1}.map-controls button{min-height:40px;padding:4px}.map-guide{display:none}}
.map-guide{position:absolute;top:93px;left:85px;right:80px;text-align:center;pointer-events:none;z-index:9;font-size:14px;color:#534b31}.map-guide span{background:#ffffe3c9;padding:7px 15px;border-radius:20px;display:inline-block;box-shadow:0 2px 0 #6b713023}
.map-notice{position:absolute;bottom:106px;left:50%;transform:translateX(-50%);max-width:80%;width:max-content;background:#fff8e7e8;border:1px solid #c7ab7e;border-radius:18px;padding:9px 18px;font-size:14px;z-index:10;text-align:center;pointer-events:none;box-shadow:0 2px 5px #53653515}
.village-game:has(.map-action-bar) .map-notice{bottom:195px}.map-notice.has-error{color:#a84c28;background:#fff1dd}
.village-dock{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:30;background:#e6d7b177;padding:6px;border-radius:25px;backdrop-filter:blur(4px)}
.village-dock button{width:100px;min-height:73px;font:700 14px inherit;font-family:inherit;border:2px solid #a27a48;border-radius:20px;background:linear-gradient(#fff9e8,#f9e4bb);box-shadow:inset 0 0 0 3px #fff7e3,0 4px 0 #87673f;color:#714e2e;cursor:pointer;padding:5px 8px}
.village-dock button span{display:block;font-size:27px;line-height:34px;font-weight:400;margin-bottom:2px}.village-dock button.active,.village-dock button[aria-expanded=true]{background:#e5f0d5;border-color:#587342;color:#3f612d;transform:translateY(-3px)}.village-dock button:hover{filter:brightness(1.035)}
.village-panel{position:absolute;right:18px;top:92px;bottom:112px;width:410px;max-width:calc(100% - 90px);z-index:25;overflow-y:auto;overscroll-behavior:contain;background:#fff8e9;border:3px solid #b38c57;border-radius:25px;box-shadow:0 8px 30px #473c3440;padding:18px}
.village-panel>header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:15px}.village-panel h2{font-size:24px;margin:3px 0;letter-spacing:-.045em}.village-panel .eyebrow{font-size:12px;color:#a0835b}.panel-close{width:38px;height:38px;flex-shrink:0;border:1px solid #c9ae86;border-radius:12px;background:#f4e6ce;color:#795b38;font-size:19px;cursor:pointer}
.shop-filter{display:grid;gap:13px;margin-bottom:16px}.shop-filter>label{font-size:14px}.village-tabs{display:flex;gap:6px;flex-wrap:wrap}.village-tabs button{font:inherit;font-size:14px;padding:9px 11px;min-height:40px;background:#f4e7cb;border:1px solid #cfb58a;border-radius:14px;color:#77542e;cursor:pointer}.village-tabs .active{background:#849866;color:white;border-color:#6b8150}
.village-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.village-shop-item{font:inherit;display:grid;justify-items:center;align-content:start;border:1px solid #d4be9d;background:#fffdf5;border-radius:18px;padding:7px;color:#6c4d2f;cursor:pointer;box-shadow:0 3px 0 #e8d9bf}.village-shop-item .item-art{width:100%;min-width:0}.village-shop-item b{font-size:14px;line-height:1.45;margin:3px 0;word-break:keep-all}.village-shop-item small{font-size:13px;color:#917340}.village-shop-item.active{outline:3px solid #b5914b;background:#fff2cc}
.shop-detail{display:grid;grid-template-columns:100px 1fr;gap:12px;background:#f7eacb;border:1px solid #dbbf87;padding:12px;border-radius:18px;margin-bottom:16px}.shop-detail h3{font-size:18px;margin:4px 0}.shop-detail small{color:#896c42}.shop-detail p{font-size:14px;margin:5px 0 10px}.shop-detail .button{font-size:14px;padding:9px 13px;min-height:44px}.shop-detail-art .pet-portrait,.shop-detail-art .item-art{width:100%;height:auto;aspect-ratio:1}.shop-footnote{font-size:13px;color:#987e59;line-height:1.7;text-align:center;margin:20px 0 0}.shop-empty{font-size:15px}.coin-short{color:#a3582f}
.wardrobe-friends{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}.wardrobe-friends button{border:2px solid #ddc7a5;border-radius:22px;background:#faf1db;font:inherit;color:#785534;cursor:pointer;padding:5px}.wardrobe-friends .pet-portrait{width:95px}.wardrobe-friends b{display:block;font-size:16px}.wardrobe-friends .active{background:#eaf0d5;border-color:#8d9d5e;box-shadow:0 3px 0 #b0bc81}
.map-action-bar{position:absolute;bottom:112px;left:50%;transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:9px;padding:14px;background:#fff6df;border:2px solid #ac8756;border-radius:21px;width:max-content;max-width:calc(100% - 28px);box-shadow:0 5px 0 #73562b33;flex-wrap:wrap;justify-content:center}.map-action-bar b{font-size:16px}.map-action-bar small{display:block;font-size:13px;margin-top:4px}.map-action-bar .button{min-height:43px;padding:10px 14px;font-size:14px}.map-retry{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:60;display:grid;gap:13px;border:2px solid #b97d4b;background:#fff7e9;padding:25px;border-radius:24px;box-shadow:0 10px 30px #442e343d}
.study-links{display:grid;gap:16px;margin-bottom:22px}.study-links a{display:flex;gap:14px;align-items:center;text-decoration:none;background:#f1e4c9;color:#775630;border:1px solid #d2b68a;border-radius:18px;padding:20px;font-size:19px}.village-panel>p{font-size:16px;line-height:1.7}.village-panel form{display:grid;gap:15px}.village-panel label{display:grid;gap:7px}.village-panel input:not([type=checkbox]),.village-welcome input{font:inherit;padding:13px;border:1px solid #d0b791;border-radius:12px;background:#fffdf7}.friends-preview{display:flex;justify-content:center}.friends-preview .pet-portrait{width:130px}
.village-welcome,.village-loading{margin:30px auto;max-width:740px;padding:30px;text-align:center;background:#fff6e0;border:3px solid #b3945b;border-radius:32px;box-shadow:0 6px 0 #6b713a36}.village-welcome h1{font-size:32px;margin:10px 0;letter-spacing:-.05em}.welcome-pets{display:flex;justify-content:center;gap:24px}.welcome-pets .pet-portrait{width:170px}.village-welcome p{font-size:16px;line-height:1.8}.village-welcome form{display:grid;gap:13px;max-width:360px;margin:auto}.village-welcome label{display:grid;text-align:left;gap:6px}.village-bounce{animation:village-bounce .45s ease 2}@keyframes village-bounce{50%{transform:translateY(-10px) rotate(4deg)}}
.village-game .speech-status{position:absolute;top:85px;right:20px;z-index:40;background:#fff8e6}.village-game button:disabled{opacity:.55;cursor:wait}.village-game .button.primary{background:#7f995d;border-color:#6e844f;color:white}.village-game .button.secondary{background:#fffaf0;color:#795b36;border-color:#d0b98f}
@media(min-width:1400px){.village-game{min-height:650px}.village-panel{width:445px}.village-shop-grid{gap:12px}}
@media(max-width:650px){body[data-subject="pet"] .topbar{padding-top:10px;padding-bottom:9px}.village-game{min-height:520px;height:calc(100dvh - 142px)}.village-hud{top:10px;left:10px;right:10px;gap:6px}.village-title{padding:5px 8px 5px 0;gap:0;border-radius:15px}.village-title b{font-size:16px}.village-title small{font-size:12px}.hud-pets .pet-portrait{width:40px}.hud-pets .pet-portrait+.pet-portrait{margin-left:-14px}.village-coins{min-width:95px;padding:12px 9px;gap:5px;border-radius:15px}.village-coins>span{font-size:21px}.village-coins strong{font-size:21px}.village-coins small{display:none}.world-tabs{top:75px;max-width:calc(100% - 80px);overflow-x:auto;padding:4px}.world-tabs button{min-width:max-content;min-height:36px;padding:4px 8px;font-size:12px}.world-tabs button span{font-size:17px}.map-controls{top:124px;left:10px;gap:6px}.map-controls button{min-width:40px;min-height:41px;padding:6px;font-size:13px}.map-guide{top:118px;left:55px;right:10px;font-size:12px}.map-guide span{padding:6px 10px}.village-dock{gap:5px;bottom:12px;padding:4px;width:calc(100% - 14px);justify-content:center}.village-dock button{flex:1;min-width:0;width:auto;min-height:68px;padding:5px 2px;font-size:12px;border-radius:15px}.village-dock button span{font-size:25px;line-height:30px}.map-notice{bottom:98px;max-width:91%;font-size:13px;padding:8px 13px}.village-panel{right:9px;top:122px;bottom:99px;width:calc(100% - 69px);max-width:none;padding:13px;border-radius:22px}.village-panel h2{font-size:21px}.village-shop-grid{gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}.village-shop-item b{font-size:14px}.shop-detail{grid-template-columns:70px 1fr;gap:8px;padding:9px}.shop-detail h3{font-size:16px}.wardrobe-friends .pet-portrait{width:75px}.map-action-bar{bottom:98px;gap:7px;padding:10px;max-width:96%}.map-action-bar .button{padding:9px 11px}.map-action-bar b{font-size:14px}.map-action-bar.placing>div{width:100%;text-align:center}.village-game:has(.map-action-bar) .map-notice{bottom:235px}.village-welcome{margin:15px 10px;padding:23px 16px}.village-welcome h1{font-size:25px}.welcome-pets{gap:0}.welcome-pets .pet-portrait{width:140px}.friends-preview .pet-portrait{width:110px}}
/* Bright storybook-game skin and true two-frame pet steps. */
body[data-subject="pet"]{background:#69b9c7;color:#513922}
body[data-subject="pet"] .topbar,body[data-subject="pet"] .subjects{background:#fff8d9;border-color:#744b2c}
.village-game{background:#58bd8a;border-top:4px solid #624125}
.map-stage{filter:none}
.village-title,.village-coins,.world-tabs,.village-panel,.map-action-bar{border-color:#70482b;box-shadow:0 5px 0 #51331f55,inset 0 0 0 3px #fff8df}
.village-title{background:linear-gradient(#fff7ce,#ffe5a1)}
.village-coins{background:linear-gradient(#fff6bd,#ffd66c)}
.world-tabs{background:#fff2bde8}.world-tabs button{background:#fffaf0;border:2px solid #dfad58}.world-tabs button.active{background:#47a9c6;border-color:#327890}
.village-dock{background:#4631217d;border:2px solid #fff3c6}.village-dock button{background:linear-gradient(#fff8d7,#ffd978);border-color:#72482a;color:#55331f;box-shadow:inset 0 0 0 3px #fff8d9,0 5px 0 #54351f}.village-dock button:nth-child(2){background:linear-gradient(#e7fbff,#91dfef)}.village-dock button:nth-child(3){background:linear-gradient(#fff0fb,#f7aeda)}.village-dock button.active,.village-dock button[aria-expanded=true]{background:#8adf9b;border-color:#3e7545;color:#244d2d}
.village-panel{background:linear-gradient(160deg,#fffceb,#fff2c9 65%,#e9fbff)}
.village-shop-item,.friend-card{border:2px solid #cc9452;background:#fffdf2;box-shadow:0 4px 0 #b97b3d}
.friend-kind{margin-bottom:22px}.friend-kind h3{font-size:20px;margin:8px 0 12px}.friend-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.friend-card{display:grid;justify-items:center;gap:6px;padding:10px;border-radius:21px}.friend-card.active{background:#e7f8cf;outline:3px solid #6e9b4b}.friend-card .pet-portrait{width:120px}.friend-card b{font-size:16px}.friend-card small{min-height:20px;color:#876338}.friend-card .button{min-height:40px;padding:8px 10px;font-size:13px;width:100%}
@media(max-width:650px){.friend-shop-grid{grid-template-columns:1fr 1fr}.friend-card .pet-portrait{width:95px}.village-dock{overflow-x:auto;justify-content:flex-start}.village-dock button{min-width:78px;flex:0 0 78px}}
@media(prefers-reduced-motion:reduce){.village-bounce,.map-enter,.map-pet .pet-portrait,.map-pet.pet-walking .pet-base,.map-pet.pet-walking .pet-portrait,.map-pet.pet-walking:before,.map-pet.pet-crawling .pet-portrait,.map-pet.pet-crawling .pet-base,.map-pet.pet-crawling:before,.map-pet.pet-arrived .pet-portrait,.map-pet.pet-happy .pet-portrait,.map-pet.pet-jumping .pet-portrait,.map-pet.pet-jumping:before,.map-pet.pet-sliding .pet-portrait,.map-pet.pet-nuzzle .pet-portrait,.pet-speech{animation:none}.map-pet{transition:none}}

/* State-driven animation. Frames and movement share the same distance clock. */
.map-pet .pet-portrait{transform-origin:50% 93%;animation:none;will-change:transform}
.map-pet:before{transform:scale(var(--shadow-scale,1));bottom:5%;filter:blur(2px);background:#31583633}
.item-playing>.map-object-art{filter:drop-shadow(0 4px 4px #ffdd7777)}
.map-pet.dragging .pet-portrait{filter:drop-shadow(0 13px 4px #31583633)}

body[data-subject="pet"]{padding:0;margin:0}body[data-subject="pet"] .shell{height:100dvh;margin:0;display:flex;flex-direction:column;overflow:hidden}body[data-subject="pet"] .shell[hidden]{display:none}body[data-subject="pet"] .topbar,body[data-subject="pet"] .subjects{flex-shrink:0}.pet-main{flex:1;min-height:0}.pet-main .village-game{height:100%;min-height:0}.village-dock button{word-break:keep-all}

/* Keep the shore and room walls visible in the fixed-height panorama. */
.scene-map-beach,.scene-map-home,.scene-map-sandbox{background-position:center top}