:root{
  --bg1:#fff4ea; --bg2:#ffe1d3; --ink:#5b3a3a; --ink2:#9a7470; --pri:#ff7f8f; --pri2:#ff9f7a;
  --card:#fffaf6; --line:#f3d6cb; --good:#7bd389; --mid:#ffc857; --bad:#ff6b6b;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  font-family:"PingFang HK","PingFang TC","Noto Sans HK","Noto Sans CJK TC","Microsoft JhengHei",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg2);color:var(--ink);overscroll-behavior:none}
body{display:flex;justify-content:center}
#app{width:100%;max-width:480px;height:100dvh;min-height:100%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 20% 0%,#fff 0,transparent 45%),linear-gradient(180deg,var(--bg1),var(--bg2))}
.hidden{display:none!important}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--safe-t) + 12px) 16px calc(var(--safe-b) + 12px);animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:18px;padding:14px 16px;font:inherit;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;user-select:none;transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 6px 16px rgba(255,127,143,.4)}
.btn-big{font-size:19px;padding:17px}
.btn-soft{background:#fff;box-shadow:0 3px 0 var(--line)}
.btn-danger{background:#ffe9e9;color:#c0392b}
.btn-link{background:none;color:var(--ink2);font-weight:600}
.icon-btn{border:0;background:#fff;width:42px;height:42px;border-radius:14px;font-size:22px;box-shadow:0 3px 0 var(--line);cursor:pointer;color:var(--ink)}

/* home */
.home-top{text-align:center;margin-top:10px}
.logo{font-size:44px;margin:6px 0 0;letter-spacing:2px;color:var(--pri);text-shadow:0 3px 0 #fff,0 6px 0 var(--line)}
.logo span{color:var(--pri2);font-size:30px;margin-left:4px}
.tagline{margin:8px 0 0;line-height:1.6;color:var(--ink2);font-weight:600}
.home-cat{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.home-cat .cat-svg{width:min(62vw,250px);height:auto}
.home-actions{display:flex;flex-direction:column;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:13px;color:var(--ink2);text-align:center;line-height:1.6;margin:4px 0 0}

/* create */
.bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bar h2{margin:0;font-size:20px}
.bar>span{width:42px}
.create-scroll{overflow-y:auto;flex:1;margin:0 -16px;padding:0 16px 20px;-webkit-overflow-scrolling:touch}
.compare{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 10px}
.photo-wrap{position:relative;width:96px;flex:none}
.photo-wrap img{width:96px;height:96px;object-fit:cover;border-radius:20px;border:4px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12);transform:rotate(-4deg)}
.photo-wrap span{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#fff;border-radius:10px;padding:1px 8px;font-size:12px;font-weight:700}
.arrow{font-size:24px}
.preview-wrap{width:210px;height:226px;background:radial-gradient(circle,#fff 0,#fff0 70%);display:flex;align-items:center;justify-content:center}
.preview-wrap .cat-svg{width:100%;height:auto}
.card{background:var(--card);border-radius:20px;padding:14px;margin-bottom:10px;box-shadow:0 3px 0 var(--line)}
.detect-title{font-weight:800;margin-bottom:4px}
.detect-reason{font-size:14px;color:var(--ink2);line-height:1.5}
.palette{display:flex;gap:6px;margin-top:10px}
.sw{flex:1;text-align:center;font-size:11px;color:var(--ink2)}
.sw i{display:block;height:28px;border-radius:10px;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15);margin-bottom:3px}
.field-label{font-weight:800;margin-bottom:8px;display:block}
.field-label small{font-weight:500;color:var(--ink2)}
.text-input{width:100%;font:inherit;font-size:18px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;color:var(--ink);outline:none}
.text-input:focus{border-color:var(--pri)}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.chip{border:2px solid var(--line);background:#fff;border-radius:14px;padding:8px 4px;font:inherit;font-weight:700;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px}
.chip em{font-style:normal;font-size:20px}
.chip.on{border-color:var(--pri);background:#fff0f2;color:var(--pri)}
.toggle{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;cursor:pointer}
.toggle input{display:none}
.slider{width:46px;height:28px;border-radius:14px;background:#e9d8d2;position:relative;transition:.2s;flex:none}
.slider::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked+.slider{background:var(--pri)}
.toggle input:checked+.slider::after{left:21px}
.colours{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.colour{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600}
.colour input{width:52px;height:52px;border:3px solid #fff;border-radius:50%;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.15);background:none;cursor:pointer;overflow:hidden}
.colour input::-webkit-color-swatch-wrapper{padding:0}
.colour input::-webkit-color-swatch{border:none;border-radius:50%}
.colour input::-moz-color-swatch{border:none;border-radius:50%}
.colour.dim{opacity:.35}
.create-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}

/* main */
.main-head{display:flex;align-items:center;gap:10px}
.name-block{flex:1;min-width:0}
.cat-name{font-size:24px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.age{font-size:12px;color:var(--ink2);font-weight:600}
.lv-block{background:#fff;border-radius:14px;padding:5px 10px;box-shadow:0 3px 0 var(--line);min-width:96px}
.lv{font-size:13px;font-weight:700;color:var(--pri)}
.lv b{font-size:18px}
.xp{height:7px;background:#ffe6e0;border-radius:4px;overflow:hidden;margin-top:2px}
.xp-fill{height:100%;width:0;background:linear-gradient(90deg,#ffd34d,var(--pri2));border-radius:4px;transition:width .5s}
.stage{position:relative;flex:1;min-height:250px;margin:10px 0;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,#bfe7ff 0%,#e3f5ff 60%,#ffe9d6 60%,#ffdcc4 100%);box-shadow:inset 0 -6px 0 rgba(0,0,0,.04),0 4px 0 var(--line);transition:filter .6s}
.stage .floor{position:absolute;left:0;right:0;bottom:0;height:40%;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.35) 38px 40px);pointer-events:none}
.cloud{position:absolute;background:#fff;border-radius:40px;opacity:.9;height:22px}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud.c1{width:70px;top:22px;left:-80px;animation:drift 38s linear infinite}
.cloud.c1::before{width:30px;height:30px;top:-14px;left:12px}.cloud.c1::after{width:24px;height:24px;top:-10px;left:36px}
.cloud.c2{width:50px;top:60px;left:-60px;animation:drift 55s linear infinite 12s}
.cloud.c2::before{width:24px;height:24px;top:-12px;left:10px}
@keyframes drift{to{transform:translateX(600px)}}
.moon{position:absolute;top:14px;right:18px;font-size:30px;opacity:0;transition:opacity .6s}
.stage.night{background:linear-gradient(180deg,#2c2f5b 0%,#454a86 60%,#6a5a7a 60%,#5a4a68 100%)}
.stage.night .moon{opacity:1}.stage.night .cloud{opacity:.15}
.cat-holder{position:absolute;left:50%;bottom:5%;width:min(80%,310px);transform:translateX(-50%);cursor:pointer;z-index:2}
.cat-holder .cat-svg{width:100%;height:auto;display:block;overflow:visible}
.bubble{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#fff;border-radius:18px;padding:8px 14px;font-weight:700;font-size:15px;box-shadow:0 3px 8px rgba(0,0,0,.1);z-index:3;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.bubble::after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.fx{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.fx span{position:absolute;font-size:26px;animation:floatUp 1.6s ease-out forwards}
@keyframes floatUp{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1;transform:translate(0,-10px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx,0),-150px) scale(.9)}}
.fx .drop{animation:dropIn .9s ease-in forwards}
@keyframes dropIn{0%{transform:translateY(-120px) rotate(-20deg);opacity:0}30%{opacity:1}70%{transform:translateY(0) rotate(10deg)}100%{transform:translateY(0) scale(.2);opacity:0}}
.fx .bounce{animation:yarn 1.4s ease-in-out forwards}
@keyframes yarn{0%{transform:translate(-120px,0) rotate(0)}25%{transform:translate(-40px,-80px) rotate(180deg)}50%{transform:translate(30px,0) rotate(360deg)}75%{transform:translate(80px,-50px) rotate(540deg)}100%{transform:translate(150px,0) rotate(720deg);opacity:0}}
.fx .bub{animation:bubble 1.8s ease-out forwards}
@keyframes bubble{0%{opacity:0;transform:scale(.3)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx,0),-120px) scale(1.2)}}
.fx .zzz{font-weight:900;color:#fff;font-size:22px;animation:zzz 2.6s ease-out forwards}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(40px,-90px) scale(1.4)}}

/* cat animations */
.cat-svg .eye{transform-box:view-box;animation:blink 4.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.cat-svg .tail{transform-box:view-box;animation:wag 2.4s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(9deg)}}
.cat-svg .cat-all{transform-box:view-box;transform-origin:120px 250px;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
.cat-svg .head{transform-box:view-box;transform-origin:120px 160px;animation:tilt 7s ease-in-out infinite}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-5deg)}88%{transform:rotate(4deg)}}
.cat-svg.is-sleep .tail{animation-duration:6s}
.cat-svg.is-sleep .cat-all{animation-duration:4.5s}
.cat-svg.is-sleep .head{animation:none;transform:rotate(-6deg) translateY(6px)}
.cat-svg .stink{animation:stink 1.8s ease-in-out infinite}
@keyframes stink{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-6px);opacity:.3}}
.cat-holder.jump{animation:jump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{0%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-50px) rotate(-4deg)}}
.cat-holder.wiggle{animation:wiggle .6s ease-in-out}
@keyframes wiggle{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-5deg)}75%{transform:translateX(-50%) rotate(5deg)}}
.cat-holder.munch .cat-svg .head{animation:munch .25s ease-in-out 5}
@keyframes munch{50%{transform:translateY(5px) rotate(2deg)}}
.cat-holder.shake{animation:shake .5s ease-in-out 2}
@keyframes shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 8px))}75%{transform:translateX(calc(-50% + 8px))}}

/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:#fff;border-radius:20px;padding:12px 14px;box-shadow:0 3px 0 var(--line)}
.stat{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:5px;font-size:13px;font-weight:700}
.si{font-size:17px}
.sb{height:10px;background:#f6ebe7;border-radius:6px;overflow:hidden}
.sf{height:100%;width:100%;border-radius:6px;background:var(--good);transition:width .6s,background .6s}
.sv{font-size:12px;color:var(--ink2);min-width:22px;text-align:right}
.stat.low .si{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.3)}}
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.act{border:0;background:#fff;border-radius:20px;padding:10px 2px;font:inherit;font-weight:800;font-size:13px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 4px 0 var(--line);cursor:pointer;transition:transform .1s}
.act span{font-size:28px;line-height:1.1}
.act b{font-weight:800}
.act:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.act:disabled{opacity:.4}
.act.sleeping{background:#4b4f8c;color:#fff;box-shadow:0 4px 0 #2c2f5b}

/* modals */
.modal{position:absolute;inset:0;z-index:20;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}
#video{width:100%;height:100%;object-fit:cover}
.cam-frame{position:absolute;top:18%;left:10%;right:10%;bottom:28%;border:3px dashed rgba(255,255,255,.7);border-radius:40% 40% 30% 30%;pointer-events:none}
.cam-bar{position:absolute;bottom:calc(var(--safe-b) + 24px);left:0;right:0;display:flex;align-items:center;justify-content:space-around}
.shutter{width:74px;height:74px;border-radius:50%;border:5px solid #fff;background:var(--pri);box-shadow:0 0 0 4px rgba(255,255,255,.3)}
.loading{background:rgba(255,244,234,.94)}
.paw-spin{font-size:54px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{font-weight:800;font-size:18px;color:var(--ink)}
.sheet-wrap{position:absolute;inset:0;background:rgba(60,30,30,.35);z-index:15;display:flex;align-items:flex-end}
.sheet{background:var(--bg1);width:100%;border-radius:28px 28px 0 0;padding:20px 18px calc(var(--safe-b) + 18px);display:flex;flex-direction:column;gap:10px;animation:up .25s ease}
@keyframes up{from{transform:translateY(100%)}}
.sheet h3{margin:0 0 4px;text-align:center}
.tiny{font-size:12px;color:var(--ink2);text-align:center;margin:0}
.toast{position:absolute;left:50%;top:calc(var(--safe-t) + 70px);transform:translate(-50%,-20px);background:#5b3a3a;color:#fff;padding:10px 18px;border-radius:16px;font-weight:700;opacity:0;pointer-events:none;transition:.3s;z-index:30;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-height:680px){.stage{min-height:200px}.act span{font-size:24px}.logo{font-size:36px}}

.cushion{position:absolute;left:50%;bottom:3%;width:min(86%,330px);height:13%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 40%,#ffb8c6,#ff96ab);border-radius:50%;box-shadow:0 6px 0 #f07e95;z-index:1}
.frame{position:absolute;top:24%;left:9%;width:62px;height:62px;padding:5px;background:#fff;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.12);transform:rotate(-6deg);z-index:1}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:4px;display:block}
.frame::before{content:"";position:absolute;top:-14px;left:50%;width:14px;height:14px;border:2px solid #b08a7a;border-bottom:0;border-right:0;transform:translateX(-50%) rotate(45deg)}
.plant{position:absolute;right:6%;bottom:40%;font-size:44px;z-index:1;transform-origin:bottom center;animation:sway 5s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(4deg)}}
.window{position:absolute;top:22%;right:8%;width:78px;height:70px;border:6px solid #fff;border-radius:10px;background:linear-gradient(#9fd8ff,#d6f0ff);box-shadow:0 4px 10px rgba(0,0,0,.08);z-index:1}
.window::before,.window::after{content:"";position:absolute;background:#fff}
.window::before{left:50%;top:0;bottom:0;width:5px;transform:translateX(-50%)}
.window::after{top:50%;left:0;right:0;height:5px;transform:translateY(-50%)}
.stage.night .window{background:linear-gradient(#1c1f45,#3a3f7a)}
.stage.night .frame,.stage.night .plant,.stage.night .cushion{filter:brightness(.6)}
@media (max-height:740px){.frame,.window{top:20%;transform:scale(.8)}}

.dl{width:78%;max-width:320px;text-align:center}
.dl-bar{height:12px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);overflow:hidden;margin:4px 0 8px}
.dl-fill{height:100%;width:0;background:linear-gradient(90deg,var(--pri2),var(--pri));border-radius:7px;transition:width .2s}
.dl small{color:var(--ink2);font-size:12px;line-height:1.5;display:block}
.loading .btn-link{margin-top:14px}
.ai-badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:9px;background:#e8f6ea;color:#2e8b4a;margin-left:6px;vertical-align:middle}
.ai-badge.off{background:#fff0e0;color:#b86a1c}

/* ---- 3D ---- */
canvas.gl{display:block;position:absolute;inset:0;z-index:1;touch-action:none}
.compare.is3d{display:block;position:relative;margin:0 0 10px}
.compare.is3d .arrow{display:none}
.compare.is3d .photo-wrap{position:absolute;left:8px;top:8px;width:74px;z-index:3}
.compare.is3d .photo-wrap img{width:74px;height:74px;border-width:3px;border-radius:14px}
.compare.is3d .preview-wrap{position:relative;width:100%;height:min(56vh,380px);border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#ffeef4,#fff7ef)}
.preview-wrap .hint3d{position:absolute;right:10px;bottom:8px;z-index:3;font-size:12px;color:#a07;background:#fff9;border-radius:10px;padding:2px 8px;pointer-events:none}
.stage.three{background:#bfe3f6}
.stage.three>.sky,.stage.three>.window,.stage.three>.frame,.stage.three>.plant,.stage.three>.cushion,.stage.three>.floor,.stage.three>.cat-holder{display:none}
.stage.three .fx span{margin:-16px 0 0 -13px}
.gl-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;font-weight:700;color:#a5607a}
.paint-tools{display:flex;flex-wrap:wrap;gap:6px}
.pt{border:0;background:#fff3ee;border-radius:14px;padding:7px 10px;font:inherit;font-size:14px;font-weight:700;color:#6b4b55;display:flex;align-items:center;gap:5px}
.pt.on{background:#ff8fab;color:#fff}
.pt i{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid #0002}
.brush{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;font-weight:700;color:#8a6a74}.brush input{flex:1}