:root{font-family:system-ui,-apple-system,sans-serif;color:#f7f1ff;background:#17142a;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:500px;margin:auto;padding:32px 20px 40px}header{text-align:center}.eyebrow{letter-spacing:.22em;font-size:10px;color:#cbb6ff}h1{font-size:32px;margin:10px 0}h1 span{color:#c9a5ff}header p,.overlay p,footer{color:#a9a0c0;font-size:14px}.pet-card{margin:26px 0 20px;background:linear-gradient(160deg,#30234d,#211c39);border:1px solid #55406f;border-radius:24px;padding:14px;text-align:center;box-shadow:0 16px 40px #100b2266}.stars{color:#e3c5ff;letter-spacing:20px}.pet-stage{height:205px;display:grid;place-items:center}.pet{width:128px;height:148px;position:relative;animation:bob 1.5s steps(2,end) infinite;filter:drop-shadow(0 10px 0 #120e2a)}.body{position:absolute;inset:31px 9px 12px;background:#a474f1;border:9px solid #4b2d77;border-radius:35% 35% 28% 28%}.ear{position:absolute;top:2px;width:32px;height:60px;background:#a474f1;border:8px solid #4b2d77;border-radius:9px}.ear.left{left:20px;transform:rotate(-12deg)}.ear.right{right:20px;transform:rotate(12deg)}.eye{position:absolute;top:38px;width:12px;height:20px;background:#35204e}.eye.l{left:23px}.eye.r{right:23px}.cheek{position:absolute;top:61px;width:14px;height:8px;background:#ff82a7}.cheek.l{left:10px}.cheek.r{right:10px}.mouth{position:absolute;top:69px;left:43px;width:8px;height:5px;background:#35204e}.foot{position:absolute;bottom:4px;width:29px;height:12px;background:#4b2d77}.foot.l{left:25px}.foot.r{right:25px}@keyframes bob{50%{transform:translateY(-7px)}}#mood{padding:8px;color:#e5d5ff}.stats,.overlay{padding:22px;background:#211c39;border:1px solid #3c3155;border-radius:20px;margin-bottom:18px}.stats>div{margin-bottom:16px}.stats>div:last-child{margin:0}label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}label b{color:#d6b6ff}progress{width:100%;height:12px;appearance:none}progress::-webkit-progress-bar{background:#39304f;border-radius:10px}progress::-webkit-progress-value{background:#ad80ef;border-radius:10px}.actions,.modes{display:flex;gap:9px;margin:14px 0}.actions button,.modes button{flex:1}button{background:#a474f1;border:0;border-radius:12px;padding:13px 8px;color:#1a102a;font-weight:750;cursor:pointer}button.secondary,.modes button{background:#413357;color:#e6d8fa}.modes button.selected{outline:2px solid #d7b5ff}button:active{transform:scale(.98)}h2{font-size:17px;margin:0 0 8px}#message{min-height:18px}footer{text-align:center;padding-top:6px}

/* Visible evolution stages: color changes alongside the native sprite. */
.pet[data-stage="1"] .body,.pet[data-stage="1"] .ear { background:#66c7d2; }
.pet[data-stage="2"] .body,.pet[data-stage="2"] .ear { background:#ffb95e; }
.name-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:.2rem}.pet-name{font-size:24px;margin:0;overflow-wrap:anywhere}.name-edit{background:transparent;color:#c8b1fa;padding:4px 8px;font-size:16px}
.name-form{display:flex;gap:6px;max-width:320px;margin:0 auto .5rem}.name-form input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid #63517c;background:#17142a;color:#f7f1ff;font-size:16px}.name-form button{padding:10px 12px}
.stage-label {font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;color:#c8b1fa;margin-bottom:.35rem}

[hidden]{display:none!important}#updateRepo{box-sizing:border-box;width:100%;padding:12px;margin:12px 0;border-radius:10px;border:1px solid #777;background:#17142a;color:white}button:disabled{opacity:.5}

input[type=range],select{width:100%;margin-bottom:18px}select{background:#30234d;border:1px solid #63517c;padding:12px;color:#f7f1ff;border-radius:10px}input[type=color]{width:100%;height:42px;border:0;margin-bottom:18px}
.pet{--pet-color:#a474f1;--pet-scale:1;scale:var(--pet-scale)}
.pet .body,.pet .ear{background:var(--pet-color)!important}
.pet[data-shape=blob] .ear{display:none}.pet[data-shape=blob] .body{border-radius:50% 50% 35% 35%}
.pet[data-shape=robot] .body{border-radius:5px}.pet[data-shape=robot] .ear{width:10px;height:30px;top:7px;border-width:3px}
.pet[data-shape=bunny] .ear{width:22px;height:72px;top:-18px;border-radius:14px 14px 6px 6px}.pet[data-shape=bunny] .ear.left{left:26px;transform:rotate(-6deg)}.pet[data-shape=bunny] .ear.right{right:26px;transform:rotate(6deg)}
.pet[data-shape=dog] .ear{width:32px;height:54px;top:32px;border-radius:12px 12px 24px 24px}.pet[data-shape=dog] .ear.left{left:4px;transform:rotate(-32deg)}.pet[data-shape=dog] .ear.right{right:4px;transform:rotate(32deg)}
.pet[data-shape=bear] .ear{width:34px;height:34px;top:8px;border-radius:50%}.pet[data-shape=bear] .ear.left{left:16px;transform:none}.pet[data-shape=bear] .ear.right{right:16px;transform:none}
.pet[data-shape=frog] .ear{width:34px;height:34px;top:12px;border-radius:50%}.pet[data-shape=frog] .ear.left{left:18px;transform:none}.pet[data-shape=frog] .ear.right{right:18px;transform:none}.pet[data-shape=frog] .body{border-radius:45% 45% 32% 32%}.pet[data-shape=frog] .mouth{width:16px;left:39px;border-radius:0 0 8px 8px}
.pet[data-shape=turtle] .ear{display:none}.pet[data-shape=turtle] .body{border-radius:45% 45% 35% 35%;box-shadow:inset 0 0 0 6px #4b2d7744}
/* Expressions */
.pet[data-expression=wink] .eye.r{height:4px;top:48px;border-radius:2px}
.pet[data-expression=shades] .body::before{content:"";position:absolute;top:34px;left:14px;width:82px;height:18px;background:#111;border-radius:4px;box-shadow:0 2px 4px #0006;z-index:5}
.pet[data-expression=star_eyes] .eye{background:#ffd700;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pet[data-expression=sleepy] .eye{height:4px;top:46px}
.pet[data-expression=loving] .eye{background:#ff4757}
.pet[data-expression=laser] .eye{background:#ff0055;box-shadow:0 0 10px #ff0055}
.pet[data-expression=grin] .mouth{width:16px;left:39px;height:7px;border-radius:0 0 8px 8px;background:#ff4757}
/* Accessories */
.pet[data-accessory=party_hat]::before{content:"";position:absolute;top:-28px;left:44px;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:40px solid #ff4757;z-index:10;filter:drop-shadow(0 2px 0 #ffd700)}
.pet[data-accessory=crown]::before{content:"👑";position:absolute;top:-28px;left:44px;font-size:38px;z-index:10}
.pet[data-accessory=straw_hat]::before{content:"👒";position:absolute;top:-26px;left:40px;font-size:42px;z-index:10}
.pet[data-accessory=halo]::before{content:"";position:absolute;top:-18px;left:36px;width:56px;height:16px;border:4px solid #ffd700;border-radius:50%;box-shadow:0 0 10px #ffeaa7;z-index:10}
.pet[data-accessory=beanie]::before{content:"";position:absolute;top:10px;left:14px;width:100px;height:34px;background:#34495e;border-radius:20px 20px 4px 4px;border:4px solid #2c3e50;z-index:10}
.pet[data-accessory=strawberry]::after{content:"🍓";position:absolute;bottom:4px;left:96px;font-size:28px;z-index:10}
.pet[data-accessory=orb]::after{content:"";position:absolute;bottom:20px;right:-18px;width:28px;height:28px;background:radial-gradient(circle,#fff,#00d2d3);border-radius:50%;box-shadow:0 0 14px #00d2d3;z-index:10}
.pet[data-accessory=bubble]{box-shadow:0 0 0 16px #70a1ff44,inset 0 0 20px #70a1ff33;border-radius:50%}
.pet[data-accessory=bow_tie] .body::after{content:"🎀";position:absolute;bottom:-6px;left:42px;font-size:24px;z-index:10}
.eye{animation:blink 5s infinite}.pet[data-action=sleep] .eye{height:4px;animation:none}.pet[data-action=sleep]{animation:breathe 2s infinite}
.pet[data-action=dance]{animation:dance .45s infinite}.pet[data-action=wave]{animation:wave .6s infinite}
.pet[data-action=eat] .mouth{animation:chew .4s infinite}
.pet[data-action=sleep]::after{content:"zZ";position:absolute;right:-12px;top:-12px;color:white}
.pet[data-action=wave]::after{content:"hi!";position:absolute;right:-12px;top:-12px;color:white}
.pet[data-action=eat]::after{content:"🍓";position:absolute;bottom:15px;left:45px;font-size:25px}
.pet-stage{position:relative}.pet-stage.wandering .pet{animation:bob 1.5s steps(2,end) infinite,wander var(--wander-time,8s) ease-in-out infinite alternate}
.pet-stage .pet[data-action=dance]{animation:dance .45s infinite}.pet-stage .pet[data-action=wave]{animation:wave .6s infinite}.pet-stage .pet[data-action=sleep]{animation:breathe 2s infinite}
.web-toy{position:absolute;bottom:10px;background:transparent!important;font-size:28px;color:#82eba1;padding:0}
@keyframes blink{0%,4%,100%{transform:scaleY(1)}2%{transform:scaleY(.1)}}
@keyframes dance{50%{transform:translateY(-18px) rotate(12deg)}}
@keyframes wave{50%{transform:rotate(-9deg)}}
@keyframes breathe{50%{transform:scaleY(.96)}}
@keyframes chew{50%{height:12px}}
@keyframes wander{0%{translate:-45px 0}50%{translate:0 -15px}100%{translate:45px 0}}
@media(prefers-reduced-motion:reduce){.pet,.eye,.pet-stage.wandering .pet{animation:none!important}}

#pipVideo{display:block;width:100%;max-height:260px;border-radius:14px;background:#17142a;margin:16px 0}.pip-note{font-size:12px!important}details summary{cursor:pointer}details a{color:#d6b6ff}


/* A small handheld pet, with three clear places to go. */
:root{color:#252326;background:#f5f1e8;font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif}
main{max-width:460px;padding:calc(18px + env(safe-area-inset-top)) 22px calc(112px + env(safe-area-inset-bottom))}
.topbar{display:flex;align-items:center;justify-content:space-between;text-align:left;margin-bottom:26px}
.wordmark{font-size:20px;font-weight:850;letter-spacing:-1px;color:#252326;text-decoration:none}.wordmark span{font-size:12px;margin-left:4px;color:#9371c4}
.day-label{font-size:12px;font-weight:700;background:#e9e4d9;padding:7px 10px;border-radius:7px}
.screen>h1{font-size:30px;letter-spacing:-1px;margin:12px 0 4px}.screen-intro{margin:0 0 26px;color:#716a67;font-size:14px}
.pet-card{padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
.name-row{gap:2px}.pet-name{font-size:32px;letter-spacing:-1px}.name-edit{min-width:44px;min-height:44px;color:#716a67;padding:8px}
.stage-label{font-size:11px;color:#716a67;text-transform:none;letter-spacing:0;font-weight:500;margin:1px 0 0}
.pet-stage{height:240px;background:radial-gradient(circle,#ded7cd 1px,transparent 1px);background-size:18px 18px;margin:12px 0}
.pet{filter:drop-shadow(0 8px 0 #ddd6cb)}#mood{color:#716a67;font-size:13px;margin:0 0 22px;padding:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0;background:none;border:0;border-radius:0;margin:0 0 22px}
.stats>div{margin:0}.stats label{font-size:11px;gap:4px}.stats label b{color:#716a67;font-weight:500}
progress{height:7px;border:0;background:#e2dcd0;border-radius:3px}progress::-webkit-progress-bar{background:#e2dcd0;border-radius:3px}progress::-webkit-progress-value{background:#9371c4;border-radius:3px}progress::-moz-progress-bar{background:#9371c4;border-radius:3px}
button{font:inherit;font-size:14px;font-weight:700;min-height:48px;border:1px solid #252326;border-bottom-width:3px;border-radius:10px;background:#cab4ec;color:#252326;padding:12px 14px;touch-action:manipulation}
button:active{translate:0 2px;transform:none;border-bottom-width:1px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9371c4;outline-offset:3px}
button.secondary,.modes button{background:#ebe5da;color:#252326;border-color:#c7beb1}
.actions{gap:10px}.care-actions{margin:0}.care-actions button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:#e8e0f1}.care-actions button span{font-size:27px;line-height:1.1}.care-actions button:nth-child(2){background:#e1e7cf}.care-actions button:nth-child(3){background:#e7dcca}
.little-actions{margin:12px 0 24px}.little-actions button{min-height:42px;padding:8px;font-size:12px;border:0;background:none;text-decoration:underline;text-underline-offset:4px}
.overlay{background:none;border:0;border-top:1px solid #ddd5c8;border-radius:0;padding:22px 0;margin:0}.overlay h2{font-size:16px;margin:0 0 10px;letter-spacing:-.3px}.overlay p{color:#716a67;line-height:1.5;font-size:13px;margin:6px 0 12px}
.floating-controls p{margin-bottom:10px}.modes button.selected{outline:0;background:#cab4ec;border-color:#252326}
#lookPanel>.overlay{border-top:0;padding-top:0}label{font-weight:650;margin:16px 0 8px;font-size:13px}label output{font-weight:500;color:#716a67}
input[type=range]{accent-color:#9371c4;margin:4px 0 14px;min-height:32px}select,input[type=color],#updateRepo,.name-form input{background:#fffcf5;color:#252326;border:1px solid #c7beb1;border-radius:8px;min-height:48px;font-size:16px}
select{margin:0 0 12px;padding:12px}.name-form{margin-bottom:10px}.name-form button{padding:8px}.name-form input{width:100%;padding:8px}
input[type=color]{padding:4px;margin:0 0 12px}input:disabled{opacity:.5}
details{padding:12px 0;border-bottom:1px solid #ddd5c8;font-size:13px}summary{min-height:28px;line-height:28px;font-weight:650}details a,.overlay>a{color:#5d3a8e}.overlay>a{display:inline-block;margin-top:20px;font-size:13px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;margin:0;font-weight:500}.toggle input{accent-color:#9371c4;width:22px;height:22px;flex:none}.small{font-size:12px!important}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,460px);display:flex;padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px;background:#f5f1e8;border-top:1px solid #ddd5c8;z-index:10}
.tabbar button{flex:1;border:0;border-radius:8px;background:none;color:#716a67;font-size:11px;display:flex;align-items:center;flex-direction:column;gap:3px;min-height:50px;padding:7px}
.tabbar button span{font-size:24px;line-height:1}.tabbar button[aria-selected=true]{background:#e8e0f1;color:#5d3a8e}
.update-banner{padding:16px;background:#e1e7cf;border:1px solid #b8c498;border-radius:10px;margin-bottom:22px}.update-banner strong{font-size:14px}.update-banner p{font-size:12px;line-height:1.4;margin:5px 0 0}.update-banner .actions{margin:12px 0 0}.update-banner button{min-height:40px;font-size:12px;padding:8px}
#pipVideo{border-radius:8px;max-height:240px}#video-pet .pip-note{font-size:11px!important}.pet[data-action=sleep]::after,.pet[data-action=wave]::after{color:#5d3a8e}
@media(max-width:350px){main{padding-left:16px;padding-right:16px}.pet-stage{height:200px}.stats{gap:8px}}

.look-preview{height:230px;display:grid;place-items:center;background:#eee6f3;border-radius:12px;margin:18px 0 24px}.guest-stage{height:140px;display:grid;place-items:center}.guest-stage .pet{scale:.75;animation:wave 2s infinite}.visit-box{background:#e5e9d7;border-radius:12px;padding:16px;margin-top:22px}.visit-box h2{font-size:16px}.visit-box p{font-size:12px;color:#716a67;line-height:1.5}.visit-box input{width:100%;font-size:12px;padding:10px;margin-top:10px}#visitInvite{background:#e8e0f1}.visit-box button{font-size:12px}


.friends-panel{border-top:1px solid #d8d0c4;margin-top:22px;padding-top:16px}.friends-panel h3{margin:0 0 8px}.friends-panel input{box-sizing:border-box;width:100%;font:inherit}.friends-panel #myFriendCode{font-family:monospace;font-size:13px;letter-spacing:.5px}.friends-panel form{margin-top:20px}.friend-card{border-top:1px solid #d8d0c4;padding:14px 0}.friend-card .actions{margin-top:10px}.friend-confirm button{margin-right:8px}
.chat-log{min-height:260px;max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:4px 0 16px}.chat-message{width:fit-content;min-width:min(260px,82%);max-width:min(680px,82%);margin:0;padding:12px 14px;border:1px solid #ddd5c8;border-radius:14px;background:#fffcf5;color:#252326}.chat-message.user{align-self:flex-end;background:#e8e0f1}.chat-message.pet{align-self:flex-start;background:#e1e7cf}.chat-form div,.party-controls form div{display:flex;gap:10px}.chat-form input,.wallet-form input,.wallet-form textarea,.party-controls input{flex:1;min-width:0;width:100%;background:#fffcf5;color:#252326;border:1px solid #c7beb1;border-radius:8px;min-height:48px;font-size:16px;padding:8px 12px}.wallet-form textarea{resize:vertical;line-height:1.4}.wallet-form button{width:100%;margin-top:8px}.wallet-reply{margin-top:14px;padding:14px;border:1px solid #ddd5c8;border-radius:14px;background:#e1e7cf;color:#252326;line-height:1.45;white-space:pre-wrap}.wallet-nfts{display:grid;gap:10px;margin-top:14px}.wallet-nft{padding:12px;border:1px solid #ddd5c8;border-radius:14px;background:#fffcf5}.wallet-nft p{margin:4px 0 10px;color:#675f6d;font-size:12px}.wallet-nft button{width:100%}.party-controls{display:grid;gap:14px}.party-stage{min-height:330px;margin-top:16px;border:1px solid #ddd5c8;border-radius:14px;background:#fffcf5;position:relative;overflow:hidden}.party-fren{position:absolute;width:96px;text-align:center;transform:translate(-50%,-50%)}.party-fren .pet{scale:.55;transform-origin:center top}.party-fren strong{display:inline-block;margin-top:-34px;padding:4px 8px;border-radius:999px;background:#252326;color:#fff;font-size:11px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(min-width:860px){
 body{min-height:100vh;overflow-x:hidden}
 main{max-width:1180px;padding:28px 42px 64px}
 .topbar{max-width:1120px;margin:0 auto 22px}
 .screen>h1,.screen-intro{max-width:860px;margin-left:auto;margin-right:auto}
 #screen-pet{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;align-items:start}
 #screen-pet .pet-card{grid-column:1/-1;min-height:min(500px,calc(100vh - 300px));display:grid;align-content:start;padding:30px 36px;border:1px solid #ddd5c8;border-radius:22px;background:linear-gradient(180deg,#fffcf5,#f2eadc);overflow:hidden}
 .pet-name{font-size:clamp(48px,6vw,84px);line-height:.95}
 .name-row{justify-content:flex-start;max-width:none;margin:0}
 .stage-label,#mood{text-align:left;max-width:none;margin-left:0;margin-right:0}
 .stage-label{font-size:13px;margin-top:4px}
 .pet-stage{width:100%;height:clamp(300px,38vh,400px);max-width:none;margin:24px 0 18px;background-size:26px 26px;border-radius:18px;overflow:visible}
 #screen-pet .pet{scale:calc(var(--pet-scale) * 1.35)}
 #mood{font-size:15px;margin-bottom:0}
 .stats{grid-column:1/span 3;align-self:stretch;background:#fffcf5;border:1px solid #ddd5c8;border-radius:14px;padding:18px;gap:18px;margin:0}
 .care-actions{grid-column:4/span 3;margin:0}
 .care-actions button{min-height:78px}
 .little-actions{grid-column:4/span 3;margin:0}
 .visit-box{grid-column:1/-1}
 .floating-controls,#floatingVideoHost{display:none}
 #screen-looks,#screen-settings{max-width:860px;margin:0 auto}
 .tabbar{top:24px;right:50%;bottom:auto;left:auto;transform:translateX(50%);width:min(420px,40vw);padding:6px;gap:4px;border:1px solid #ddd5c8;border-radius:14px;box-shadow:0 10px 30px #ded7cd80}
 .tabbar button{min-height:42px;flex-direction:row;justify-content:center;font-size:12px}
 .tabbar button span{font-size:18px}
 .pet-stage.wandering .pet{position:fixed;left:12vw;top:24vh;z-index:6;pointer-events:none;animation:bob 1.5s steps(2,end) infinite,pageWander var(--wander-time,8s) ease-in-out infinite alternate}
 .pet-stage.wandering .pet[data-action=dance]{animation:dance .45s infinite,pageWander var(--wander-time,8s) ease-in-out infinite alternate}
 .pet-stage.wandering .pet[data-action=wave]{animation:wave .6s infinite,pageWander var(--wander-time,8s) ease-in-out infinite alternate}
 .pet-stage.wandering .pet[data-action=sleep]{animation:breathe 2s infinite}
}
@keyframes pageWander{0%{left:11vw;top:25vh}22%{left:72vw;top:18vh}48%{left:68vw;top:44vh}72%{left:22vw;top:46vh}100%{left:13vw;top:32vh}}
@media(min-width:860px) and (prefers-reduced-motion:reduce){.pet-stage.wandering .pet{position:relative;left:auto;top:auto;z-index:auto}}