* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:#bfe6ff; user-select:none; }

#scene { position:fixed; inset:0; display:block; touch-action:none; }

#nightOverlay { position:fixed; inset:0; pointer-events:none; background:linear-gradient(#0b102699,#1a1040aa); opacity:0; transition:opacity 1.2s; }
body.night #nightOverlay { opacity:1; }

/* 加载画面 */
#loading { position:fixed; inset:0; z-index:99; background:linear-gradient(160deg,#ffd9e8,#cfe8ff); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .6s; }
#loading.hide { opacity:0; pointer-events:none; }
.load-pet { font-size:64px; animation:bounce 1s infinite ease-in-out; }
.load-text { color:#8a5a76; font-size:18px; letter-spacing:2px; }
@keyframes bounce { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-18px) scale(1.08)} }

/* 通用面板 */
.panel { position:fixed; z-index:10; background:#ffffffcc; backdrop-filter:blur(10px); border-radius:20px; box-shadow:0 6px 20px #7a6aa033; padding:14px 18px; }

/* 顶部 */
#topPanel { top:16px; left:16px; min-width:210px; }
.name-row { display:flex; align-items:center; gap:8px; }
#petName { font-size:22px; font-weight:800; color:#6b4a63; }
#renameBtn { border:none; background:#ffe3f0; border-radius:10px; padding:4px 8px; cursor:pointer; font-size:14px; transition:transform .15s; }
#renameBtn:hover { transform:scale(1.15) rotate(-8deg); }
.level-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.level-badge { background:linear-gradient(135deg,#ffb46b,#ff7eb3); color:#fff; font-size:13px; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.xp-bar { flex:1; height:10px; background:#eee4f2; border-radius:999px; overflow:hidden; }
#xpFill { height:100%; width:0%; background:linear-gradient(90deg,#ffd36b,#ff9ecf); border-radius:999px; transition:width .5s; }

/* 状态条 */
#statPanel { top:16px; right:16px; display:flex; flex-direction:column; gap:10px; }
.stat { display:flex; align-items:center; gap:8px; }
.stat-ico { font-size:18px; width:24px; text-align:center; }
.stat-bar { width:130px; height:12px; background:#eee4f2; border-radius:999px; overflow:hidden; }
.fill { height:100%; width:80%; border-radius:999px; transition:width .4s, background .4s; }
.fill.hunger { background:linear-gradient(90deg,#ffb46b,#ff8a5c); }
.fill.mood    { background:linear-gradient(90deg,#ff9ecf,#ff6fa5); }
.fill.energy  { background:linear-gradient(90deg,#8ed8ff,#6aa8ff); }
.fill.low { background:linear-gradient(90deg,#ff7b7b,#e14b4b) !important; animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.55; } }

/* 气泡 */
#bubble { position:fixed; left:50%; top:16%; transform:translateX(-50%) scale(0); z-index:11; background:#fff; color:#6b4a63; padding:10px 18px; border-radius:18px 18px 18px 4px; font-size:16px; font-weight:600; box-shadow:0 6px 16px #7a6aa044; transition:transform .25s cubic-bezier(.34,1.56,.64,1); pointer-events:none; max-width:70vw; text-align:center; }
#bubble.show { transform:translateX(-50%) scale(1); }

/* 提示 & 升级 */
#hint { position:fixed; bottom:110px; left:50%; transform:translateX(-50%); z-index:9; color:#7a6890; font-size:13px; background:#ffffff99; padding:6px 16px; border-radius:999px; pointer-events:none; transition:opacity 1s; }
#toast { position:fixed; top:22%; left:50%; transform:translateX(-50%) scale(0); z-index:12; background:linear-gradient(135deg,#ffd36b,#ff9ecf); color:#fff; font-weight:800; font-size:20px; padding:12px 28px; border-radius:999px; box-shadow:0 8px 24px #ff9ecf66; transition:transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
#toast.show { transform:translateX(-50%) scale(1); }

/* 底部按钮 */
#actionBar { bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:10px; padding:12px 14px; }
.action { display:flex; flex-direction:column; align-items:center; gap:2px; border:none; cursor:pointer; background:linear-gradient(160deg,#fff,#ffeef6); border-radius:16px; padding:10px 16px; font-size:13px; color:#6b4a63; font-weight:700; box-shadow:0 4px 10px #c9a8c044; transition:transform .12s, box-shadow .12s; }
.action:hover { transform:translateY(-3px); box-shadow:0 8px 16px #c9a8c066; }
.action:active { transform:scale(.92); }
.a-ico { font-size:24px; }
.action.disabled { opacity:.45; pointer-events:none; }

/* 点击爱心 */
.heart { position:fixed; z-index:20; font-size:22px; pointer-events:none; animation:fly 1.1s ease-out forwards; }
@keyframes fly { 0%{opacity:1; transform:translate(0,0) scale(.6)} 100%{opacity:0; transform:translate(var(--dx),-110px) scale(1.4) rotate(var(--rot))} }

/* 睡觉 Zzz */
.zzz { position:fixed; z-index:11; color:#a9bcff; font-weight:800; font-size:22px; pointer-events:none; animation:zzzUp 2.4s ease-out forwards; text-shadow:0 2px 6px #334; }
@keyframes zzzUp { 0%{opacity:0; transform:translate(0,0) scale(.5)} 20%{opacity:1} 100%{opacity:0; transform:translate(30px,-90px) scale(1.3)} }

@media (max-width:640px){
  #statPanel { transform:scale(.85); transform-origin:top right; }
  #topPanel { transform:scale(.85); transform-origin:top left; }
  .action { padding:8px 12px; }
  #hint { display:none; }
}