/* ============================================================
   奶油小星球 · 3D 互动养成  —  UI Styles
   ============================================================ */
:root{
  --pink:#ff9ec4;
  --pink-deep:#f56fa8;
  --lav:#c3a8ff;
  --mint:#8fe3c8;
  --sky:#a9d8ff;
  --butter:#ffd98a;
  --cream:#fff7f1;
  --ink:#5b4a57;
  --ink-soft:#8d7b89;
  --glass:rgba(255,255,255,.62);
  --glass-brd:rgba(255,255,255,.85);
  --shadow:0 10px 30px rgba(180,120,160,.20);
  --shadow-lg:0 18px 46px rgba(160,100,150,.28);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,-apple-system,"Nunito","Quicksand",sans-serif;
  color:var(--ink);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #fff3fa 0%, #ffe7f3 38%, #f3e6ff 68%, #e6f3ff 100%);
  user-select:none;
}

#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- 舞台 ---------- */
#stage{position:absolute;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene.grabbing{cursor:grabbing}

/* 背景装饰光斑 */
#stage::before,#stage::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px);
}
#stage::before{width:38vmin;height:38vmin;left:-8vmin;top:8vmin;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.85),rgba(255,214,235,.35) 60%,transparent 70%);}
#stage::after{width:30vmin;height:30vmin;right:-6vmin;top:26vmin;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(205,231,255,.35) 60%,transparent 70%);}

.drag-hint{
  position:absolute;left:50%;bottom:calc(var(--dock-h,190px) + 6px);transform:translateX(-50%);
  font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;
  background:rgba(255,255,255,.5);padding:6px 14px;border-radius:999px;
  backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .6s ease;
}

/* ---------- 对话气泡 ---------- */
.speech{
  position:absolute;left:50%;top:19%;transform:translate(-50%,-14px) scale(.86);
  max-width:min(74vw,340px);
  padding:12px 18px;border-radius:20px 20px 20px 6px;
  background:rgba(255,255,255,.94);
  color:var(--ink);font-size:15px;font-weight:600;line-height:1.45;text-align:center;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .34s cubic-bezier(.34,1.56,.64,1);
  z-index:6;
}
.speech::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%) rotate(45deg);
  width:16px;height:16px;background:rgba(255,255,255,.94);border-radius:3px;
}
.speech.show{opacity:1;transform:translate(-50%,0) scale(1)}

/* ---------- 顶部栏 ---------- */
.topbar{
  position:relative;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;
  gap:10px;padding:14px 16px 0;pointer-events:none;
}
.topbar>*{pointer-events:auto}
.glass{
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.namecard{display:flex;align-items:center;gap:11px;padding:9px 16px 9px 9px;border-radius:var(--r-lg)}
.avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-weight:800;font-size:19px;color:#fff;
  background:linear-gradient(140deg,var(--pink),var(--lav));
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.08),0 4px 12px rgba(255,140,190,.4);
}
.nameblock{display:flex;flex-direction:column;gap:5px}
.petname{
  font:inherit;font-weight:800;font-size:17px;color:var(--ink);
  background:transparent;border:none;outline:none;padding:0;width:7.2em;max-width:30vw;
  border-bottom:2px dashed transparent;transition:border-color .2s;
}
.petname:hover,.petname:focus{border-bottom-color:var(--pink)}
.lvline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft);font-weight:700}
.lvtxt b{color:var(--pink-deep);font-size:13px}
.expbar{position:relative;display:block;width:96px;height:8px;border-radius:999px;background:rgba(160,140,160,.22);overflow:hidden}
.expbar i{position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--butter),var(--pink));transition:width .5s ease}

.topbtns{display:flex;gap:8px}
.iconbtn{
  width:42px;height:42px;border-radius:14px;border:1px solid var(--glass-brd);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-soft);
  transition:transform .18s ease,color .18s,background .18s;
}
.iconbtn:hover{transform:translateY(-2px);color:var(--pink-deep)}
.iconbtn:active{transform:scale(.94)}
.ic{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- 底部 dock ---------- */
.dock{
  position:relative;z-index:5;margin-top:auto;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 14px calc(16px + env(safe-area-inset-bottom));
}

.stats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px 14px;
  padding:13px 18px;border-radius:var(--r-lg);width:min(760px,100%);
}
.stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.stat-top{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.stat-top .ic{width:14px;height:14px;stroke-width:2.2}
.stat-bar{position:relative;height:9px;border-radius:999px;background:rgba(160,140,160,.20);overflow:hidden}
.stat-bar i{position:absolute;inset:0 auto 0 0;width:0%;border-radius:999px;transition:width .45s cubic-bezier(.4,1.2,.5,1)}
.stat[data-k="food"]  .stat-bar i{background:linear-gradient(90deg,#ffc978,#ff9d5c)}
.stat[data-k="mood"]  .stat-bar i{background:linear-gradient(90deg,#ffb0d0,#ff7fb2)}
.stat[data-k="clean"] .stat-bar i{background:linear-gradient(90deg,#a9dcff,#6fc2ff)}
.stat[data-k="energy"].stat-bar i{background:linear-gradient(90deg,#b6f0cf,#5fd8a6)}
.stat[data-k="energy"] .stat-bar i{background:linear-gradient(90deg,#b6f0cf,#5fd8a6)}
.stat[data-k="bond"]  .stat-bar i{background:linear-gradient(90deg,#ffd98a,#ff9ec4)}
.stat .ic{stroke:currentColor}
.stat[data-k="food"]  .stat-top{color:#e0863f}
.stat[data-k="mood"]  .stat-top{color:#e15c95}
.stat[data-k="clean"] .stat-top{color:#3f93d6}
.stat[data-k="energy"] .stat-top{color:#35a877}
.stat[data-k="bond"]  .stat-top{color:#c78a2c}

.actions{display:flex;gap:clamp(8px,2.6vw,20px);flex-wrap:nowrap}
.act{
  --sc:var(--pink);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:transparent;border:none;padding:0;cursor:pointer;font:inherit;
}
.act-ic{
  width:clamp(52px,15vw,64px);height:clamp(52px,15vw,64px);border-radius:50%;
  display:grid;place-items:center;color:#fff;position:relative;
  background:linear-gradient(150deg,var(--sc),color-mix(in srgb,var(--sc) 62%,#ffffff));
  box-shadow:0 8px 20px color-mix(in srgb,var(--sc) 42%,transparent),
             inset 0 -4px 10px rgba(0,0,0,.10), inset 0 3px 8px rgba(255,255,255,.55);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s;
}
.act-ic .ic{width:46%;height:46%;stroke-width:2.1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.act:hover .act-ic{transform:translateY(-4px) scale(1.04);box-shadow:0 14px 26px color-mix(in srgb,var(--sc) 50%,transparent),inset 0 -4px 10px rgba(0,0,0,.10)}
.act:active .act-ic{transform:scale(.9)}
.act-label{font-size:12.5px;font-weight:800;color:var(--ink-soft);letter-spacing:.04em}
.act.cooldown{opacity:.45;pointer-events:none}
.ic-feed {--sc:#ff9d5c}
.ic-pet  {--sc:#ff7fb2}
.ic-play {--sc:#a98bff}
.ic-bath {--sc:#5fb6f0}
.ic-sleep{--sc:#7f9bff}

/* 点击缩放脉冲 */
.act-ic::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);opacity:0;transform:scale(1);
}
.act .act-ic.pop::after{animation:ring .55s ease-out}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* ---------- 加载遮罩 ---------- */
.loading{
  position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(160deg,#fff3fa,#f3e6ff);
  transition:opacity .6s ease,visibility .6s;
}
.loading.hide{opacity:0;visibility:hidden}
.loading p{font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.08em}
.loading-blob{
  width:64px;height:64px;border-radius:44% 56% 58% 42%/48% 42% 58% 52%;
  background:linear-gradient(150deg,var(--pink),var(--lav));
  animation:blob 2.1s ease-in-out infinite;
  box-shadow:0 12px 26px rgba(255,150,200,.45);
}
@keyframes blob{
  0%,100%{border-radius:44% 56% 58% 42%/48% 42% 58% 52%;transform:rotate(0) scale(1)}
  50%{border-radius:58% 42% 42% 58%/56% 58% 42% 44%;transform:rotate(180deg) scale(1.08)}
}

/* ---------- 弹窗 ---------- */
.modal{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  padding:22px;background:rgba(90,70,90,.28);backdrop-filter:blur(4px);
  animation:fade .25s ease;
}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  width:min(430px,100%);padding:24px 24px 20px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-lg);
  animation:pop .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal-card h2{margin:0 0 14px;font-size:20px;color:var(--pink-deep)}
.helplist{margin:0 0 18px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.helplist li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:var(--ink)}
.helplist li::before{content:"";position:absolute;left:3px;top:8px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(140deg,var(--pink),var(--lav))}
.helplist b{color:var(--pink-deep)}
.primary{
  width:100%;padding:13px;border:none;border-radius:16px;cursor:pointer;font:inherit;
  font-size:15px;font-weight:800;color:#fff;letter-spacing:.06em;
  background:linear-gradient(140deg,var(--pink),var(--lav));
  box-shadow:0 8px 20px rgba(255,140,190,.42);
  transition:transform .16s;
}
.primary:active{transform:scale(.96)}

/* ---------- 升级 / 飘字 ---------- */
.toast{
  position:fixed;left:50%;top:12%;transform:translate(-50%,0);
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,var(--pink-deep),var(--lav));
  box-shadow:var(--shadow-lg);z-index:25;pointer-events:none;
  animation:toast 1.9s ease forwards;
}
@keyframes toast{
  0%{opacity:0;transform:translate(-50%,14px) scale(.8)}
  14%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  24%{transform:translate(-50%,0) scale(1)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-22px)}
}

/* ---------- 响应式 ---------- */
@media (max-width:560px){
  .stats{grid-template-columns:repeat(3,1fr);gap:9px 12px;padding:12px 15px}
  .stat-top{font-size:11.5px}
  .namecard{padding:7px 13px 7px 7px}
  .avatar{width:38px;height:38px;font-size:17px}
  .petname{font-size:15px}
  .topbtns{gap:6px}
  .iconbtn{width:38px;height:38px;border-radius:12px}
  .speech{top:16%}
}
@media (max-height:640px){
  .drag-hint{display:none}
  .act-label{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}