:root{--bg:#f6efe4;--ink:#2b2520;--muted:#6f655a;--card:#fffaf2;--line:#e4d9c8;--accent:#c96f3b;--accent-ink:#fff;--radius:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:17px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
#app{min-height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.hidden{display:none!important}
.screen{flex:1;display:flex;flex-direction:column}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.primary{background:var(--accent);color:var(--accent-ink);padding:14px 22px;border-radius:999px;font-weight:600;font-size:18px}
.secondary{background:#efe6d6;color:var(--ink);padding:14px 22px;border-radius:999px;font-weight:600;font-size:18px}
.fine{font-size:13px;color:var(--muted);margin:14px 0 0}

/* hatch */
.hatch-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center}
.egg{width:min(60vw,240px);cursor:pointer;animation:eggidle 3s ease-in-out infinite;transform-origin:50% 90%}
.egg.wobble{animation:wobble .5s ease-in-out 2}
@keyframes eggidle{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.hatch-wrap h1{font-size:26px;margin:18px 0 4px}
.hatch-wrap p{margin:0;color:var(--muted)}
#hatch-form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px;margin-top:18px;text-align:left}
#hatch-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
#hatch-form input{font:inherit;font-size:18px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}

/* main */
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 6px;gap:12px}
.title{display:flex;flex-direction:column;line-height:1.15}
#hdr-name{font-weight:700;font-size:20px}
.meta{font-size:13px;color:var(--muted)}
.tabs{display:flex;background:#efe6d6;border-radius:999px;padding:3px}
.tab{padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px;color:var(--muted);position:relative}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.badge{position:absolute;top:2px;right:4px;background:var(--accent);color:#fff;font-size:10px;border-radius:999px;padding:1px 5px}
.tabpane{flex:1;display:flex;flex-direction:column;min-height:0}
.scene-wrap{position:relative;margin:4px 16px 0;border-radius:var(--radius);overflow:hidden;background:#eef3f6;box-shadow:inset 0 0 0 1px var(--line)}
#scene{display:block;width:100%;height:auto;aspect-ratio:4/3;touch-action:manipulation}
@media (min-width:480px){#scene{aspect-ratio:3/2}}
.line{min-height:3.2em;margin:12px 16px 0;font-size:18px;line-height:1.35}
.hint{margin:6px 16px 0;font-size:14px;color:var(--muted)}
.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));margin-top:auto;background:var(--bg)}
.actions button{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 4px 8px;font-size:13px;font-weight:600;color:var(--ink);transition:transform .08s}
.actions button:active{transform:scale(.94)}
.actions button:disabled{opacity:.45}
.actions .ic{font-size:22px;line-height:1}

/* slots and objects */
.slot{cursor:pointer}
.slot-plus{font-size:16px;fill:rgba(0,0,0,.35);font-weight:700;pointer-events:none}
.slot.filled .slot-ring,.slot.filled .slot-plus{opacity:0}
.slot.filled .slot-ring{opacity:0}
.slot-menu{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;background:#fff;padding:6px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.18);white-space:nowrap}
.slot-menu button{padding:8px 12px;border-radius:999px;font-weight:600;font-size:14px;background:#f3ece0}
.slot-menu button.muted{background:none;color:var(--muted)}

/* creature animation */
#critter-root{transform:translate(var(--x,180px),194px) scale(calc(var(--flip,1) * var(--k,.56)),var(--k,.56));transition:transform 1.3s cubic-bezier(.4,.05,.3,1)}
.critter .head{transform-box:fill-box;transform-origin:45% 95%;transition:transform .4s}
.critter .headwrap{transition:transform .4s}
.critter .ears{transform-box:fill-box;transform-origin:50% 100%}
.critter .tail{transform-box:fill-box;transform-origin:95% 60%;animation:tailwag 1.6s ease-in-out infinite}
.critter .bodywrap{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 2.8s ease-in-out infinite}
.critter .leg{transform-box:fill-box;transform-origin:50% 10%}
.critter .lid{transition:height .08s}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes tailwag{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
.moving .critter .leg.front{animation:step .36s ease-in-out infinite}
.moving .critter .leg.back{animation:step .36s ease-in-out infinite reverse}
@keyframes step{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.anim-jump .critter{animation:jump .7s ease-out 2}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-34px)}}
.anim-tilt .critter .head{animation:tilt 1.2s ease-in-out 1}
@keyframes tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-16deg)}}
.anim-twitch .critter .ears{animation:twitch .35s ease-in-out 3}
@keyframes twitch{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
.anim-down .critter .head{animation:down 1.4s ease-in-out 1}
@keyframes down{0%,100%{transform:translate(0,0) rotate(0)}40%,70%{transform:translate(14px,22px) rotate(22deg)}}
.anim-lean .critter .head{animation:lean 1.4s ease-in-out 1}
@keyframes lean{0%,100%{transform:translateX(0)}40%,70%{transform:translateX(26px)}}
.anim-lie .critter{animation:lie 1.2s ease-out forwards}
.anim-lie .critter .leg{animation:leghide .6s ease-out forwards}
@keyframes lie{to{transform:translateY(16px) scaleY(.78)}}
@keyframes leghide{to{transform:scaleY(.2)}}
.anim-wiggle .critter{animation:wiggle .5s ease-in-out 4}
@keyframes wiggle{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
.anim-pounce .critter{animation:pounce .9s ease-in-out 1}
@keyframes pounce{0%,100%{transform:translate(0,0)}35%{transform:translate(30px,-40px)}60%{transform:translate(60px,0)}}
.anim-watch .critter .head{animation:watch 2.4s ease-in-out 1}
@keyframes watch{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}70%{transform:rotate(10deg)}}
.anim-bat .critter .leg.front:last-of-type{animation:bat .35s ease-in-out 3}
@keyframes bat{0%,100%{transform:rotate(0)}50%{transform:rotate(-50deg)}}
.anim-shake .critter .head{animation:shake .25s ease-in-out 4}
@keyframes shake{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}

.fx-spark{animation:spark 1.6s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes spark{0%{opacity:0;transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:scale(1.3) translateY(-20px)}}

/* story */
.personality{margin:12px 16px 0;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:16px}
.story{list-style:none;margin:10px 0 0;padding:0 16px 16px;overflow:auto}
.story li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.story .when{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.story .pair{display:flex;gap:10px;justify-content:center;margin-top:8px}
.story .pair svg{width:46%;height:auto}
.story li.morph{border-color:#e9c9a8;background:#fff6ea}

/* modal */
.modal{position:fixed;inset:0;background:rgba(40,30,20,.45);display:flex;align-items:flex-end;justify-content:center;z-index:10;padding:0}
.modal-card{background:var(--card);border-radius:22px 22px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));width:100%;max-width:520px;max-height:92dvh;overflow:auto;animation:up .3s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.modal-card h2{margin:0 0 8px;font-size:22px}
.modal-card p{margin:0 0 12px;color:var(--ink)}
.modal-card .row{display:flex;gap:10px;margin-top:14px}
.modal-card .row button{flex:1}
.modal-card .pair{display:flex;gap:10px;align-items:flex-end;justify-content:center;margin:8px 0}
.modal-card .pair > div{flex:1;text-align:center;font-size:13px;color:var(--muted)}
.modal-card .pair svg{width:100%;height:auto;background:#fff;border-radius:12px;border:1px solid var(--line)}
.modal-card textarea{width:100%;min-height:110px;font:inherit;font-size:17px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);resize:vertical}
.card-critter{overflow:visible}
@media (prefers-color-scheme:dark){:root{--bg:#1d1915;--ink:#f1e9dc;--muted:#a79c8e;--card:#27221d;--line:#3a332b}#hatch-form input,.modal-card textarea{background:#2f2922}.tabs{background:#2f2922}.tab.active{background:#3a332b}.actions button{background:var(--card)}.slot-menu{background:#2f2922}.slot-menu button{background:#3a332b}.modal-card .pair svg{background:#1d1915}.story li.morph{background:#2e261c;border-color:#5a4630}}

#scene.art #critter-root{--k:.5}