/* 奶娃的小窝 · 样式（本地字体栈，无外链依赖） */
:root{
  --wall:#FFF0E4;
  --wall2:#FFE2EA;
  --floor:#F6D9BC;
  --card:#fff;
  --ink:#6B4B3A;
  --ink2:#A98A78;
  --pink:#FF9EB5;
  --mint:#6FD3B8;
  --sky:#8AD4F0;
  --gold:#FFC94D;
  --line:rgba(107,75,58,.10);
  --shadow:0 6px 18px rgba(160,110,80,.16);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:linear-gradient(165deg,#FFF7F0,#FFE9EF 60%,#FFE2D6);
  overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}
#app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 8px);
  gap:8px;
}

.hud{display:flex;align-items:center;gap:8px;min-height:42px}
.logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16px}
.logo img{width:32px;height:32px;filter:drop-shadow(0 3px 6px rgba(190,130,100,.28))}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.pill{
  display:flex;align-items:center;gap:5px;background:var(--card);border-radius:999px;
  padding:6px 11px;box-shadow:var(--shadow);font-weight:800;font-size:13.5px;
  border:1px solid var(--line);white-space:nowrap;
}
.pill i{font-style:normal;font-size:13px}
.pill b{font-variant-numeric:tabular-nums;color:#E26A8D}
.icon{
  width:38px;height:38px;border:1px solid var(--line);border-radius:13px;background:var(--card);
  box-shadow:var(--shadow);font-size:16px;line-height:1;cursor:pointer;flex:none;
}
.icon:active{transform:scale(.94)}

/* ---------- 房间 ---------- */
.room-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.room{
  position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.7);
  border:1px solid var(--line);
  touch-action:none;
}
.wall{position:absolute;inset:0 0 34% 0;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.42) 0 26px,transparent 26px 52px),
  linear-gradient(180deg,var(--wall),var(--wall2));}
.wall::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.6),transparent 45%);
}
.floor{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:
    repeating-linear-gradient(90deg,rgba(180,130,90,.14) 0 2px,transparent 2px 44px),
    linear-gradient(180deg,#F8E1C6,var(--floor));
  box-shadow:inset 0 3px 6px rgba(160,110,70,.14);
}
.items{position:absolute;inset:0;z-index:1}
.fitem{
  position:absolute;transform:translate(-50%,-50%);
  font-size:var(--sz,40px);line-height:1;cursor:grab;
  filter:drop-shadow(0 4px 5px rgba(150,110,80,.30));
  transition:filter .15s;touch-action:none;
}
.fitem:active{cursor:grabbing;filter:drop-shadow(0 8px 10px rgba(150,110,80,.42))}
.fitem.dragging{z-index:9;filter:drop-shadow(0 10px 12px rgba(150,110,80,.45))}

.pet{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;
  transition:bottom .3s;
}
.pet img{width:clamp(74px,20vw,112px);height:auto;animation:bob 2.6s ease-in-out infinite;
  filter:drop-shadow(0 8px 10px rgba(150,110,80,.28))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
.pet.sleepy img{animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(2px) scale(1.035)}}

.bubble{
  position:absolute;bottom:100%;margin-bottom:2px;
  background:#fff;border-radius:12px;padding:5px 10px;font-size:12.5px;font-weight:700;
  color:#8B6350;white-space:nowrap;box-shadow:0 4px 12px rgba(160,110,80,.22);
  opacity:0;transform:translateY(6px) scale(.9);transition:all .22s;pointer-events:none;
  border:1px solid rgba(255,255,255,.9);
}
.bubble::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#fff;
}
.bubble.show{opacity:1;transform:translateY(0) scale(1)}

.night{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,35,90,.46),rgba(30,28,70,.60));
  opacity:0;transition:opacity .6s;
}
.night.on{opacity:1}

.petname{display:flex;align-items:center;gap:8px}
.petname input{
  flex:1;min-width:0;border:1px solid var(--line);background:var(--card);
  border-radius:13px;padding:8px 12px;font-family:inherit;font-size:13.5px;
  font-weight:700;color:var(--ink);outline:none;box-shadow:var(--shadow);
}
.petname input::placeholder{color:#C4A895;font-weight:500}
.lvtag{
  flex:none;background:linear-gradient(180deg,#FFD873,#F2A63C);color:#fff;
  font-size:12px;font-weight:800;padding:8px 12px;border-radius:13px;
  box-shadow:0 4px 10px rgba(242,166,60,.34);white-space:nowrap;
}

/* ---------- 状态条 ---------- */
.bars{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
  background:var(--card);border-radius:16px;padding:10px 12px;
  box-shadow:var(--shadow);border:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:7px;min-width:0}
.bar .lab{font-size:12px;font-weight:800;color:var(--ink2);flex:none;width:44px}
.bar .track{flex:1;height:9px;border-radius:99px;background:rgba(200,160,130,.16);overflow:hidden}
.bar .fill{height:100%;border-radius:99px;transition:width .35s ease}
.bar .val{font-size:11px;font-weight:800;color:var(--ink2);width:28px;text-align:right;flex:none}
.bar.warn .lab{color:#E06A6A}
.bar.warn .fill{animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 动作按钮 ---------- */
.acts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.act{
  border:1px solid var(--line);background:var(--card);border-radius:16px;
  padding:9px 2px 7px;font-family:inherit;cursor:pointer;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px;
}
.act:active{transform:scale(.95)}
.act i{font-style:normal;font-size:20px;line-height:1}
.act b{font-size:11px;color:var(--ink);font-weight:800}
.act.shop{background:linear-gradient(180deg,#FFF6E0,#FFE9BC)}
.act.dis{opacity:.45}

/* ---------- 弹窗 ---------- */
.mask{
  position:fixed;inset:0;background:rgba(90,60,45,.42);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:20;padding:16px;
}
.mask.show{display:flex}
.modal{
  width:100%;max-width:430px;max-height:80vh;overflow:auto;
  background:linear-gradient(180deg,#FFFDF9,#FFF3E7);border-radius:22px;padding:16px;
  box-shadow:0 18px 50px rgba(120,70,45,.35);border:1px solid rgba(255,255,255,.85);
}
.modal h2{margin:0 0 10px;font-size:17px;text-align:center}
.modal-body{font-size:13.5px;line-height:1.7;color:#7A5A48}
.modal .big-btn{
  margin-top:12px;width:100%;border:none;border-radius:14px;padding:12px;
  background:linear-gradient(180deg,#FFD873,#F2A63C);color:#fff;font-weight:900;
  font-size:15px;font-family:inherit;cursor:pointer;letter-spacing:1px;
  box-shadow:0 5px 0 #DE8F2C;
}
.modal .big-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #DE8F2C}

.shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shop-item{
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px;
  display:flex;align-items:center;gap:8px;cursor:pointer;text-align:left;
}
.shop-item:active{transform:scale(.97)}
.shop-item .em{font-size:24px;flex:none}
.shop-item .tx{display:flex;flex-direction:column;min-width:0}
.shop-item .tx b{font-size:12.5px;color:var(--ink)}
.shop-item .tx em{font-style:normal;font-size:10.5px;font-weight:800;color:#E26A8D}
.shop-item .tx span{font-size:10px;color:var(--ink2)}
.shop-item.owned{background:#F0FBF6;border-color:#BFEAD9}
.shop-item.locked{opacity:.5}

.tabs{display:flex;gap:6px;margin-bottom:9px}
.tabs button{
  flex:1;border:1px solid var(--line);background:#fff;border-radius:11px;padding:7px;
  font-family:inherit;font-weight:800;font-size:12.5px;color:var(--ink2);cursor:pointer;
}
.tabs button.on{background:linear-gradient(180deg,#FFD873,#F2A63C);color:#fff;border-color:transparent}

#fx{position:fixed;inset:0;pointer-events:none;z-index:15}

@media (max-height:660px){
  .logo span{display:none}
  .act{min-height:52px;padding:7px 2px 5px}
  .act i{font-size:18px}
  .bars{padding:8px 10px}
}
@media (max-width:360px){
  .pill{font-size:12.5px;padding:5px 9px}
  .icon{width:34px;height:34px}
  .bar .lab{width:38px;font-size:11px}
}