:root{
  --bg:#ffeef6; --card:#ffffff; --ink:#3b2a35; --sub:#a98da0;
  --pink:#ff8ec4; --mint:#8fe3c8; --sky:#8fc9ff; --gold:#ffcf7a; --accent:#ff5fa8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;
  overscroll-behavior:none; user-select:none;
}
#app{
  height:100dvh; display:flex; flex-direction:column;
  padding:calc(8px + env(safe-area-inset-top)) 14px calc(8px + env(safe-area-inset-bottom));
  max-width:520px; margin:0 auto;
}
header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 2px}
#member{
  appearance:none; border:none; background:var(--card); color:var(--ink);
  font-size:17px; font-weight:800; padding:8px 34px 8px 14px; border-radius:14px;
  box-shadow:0 2px 10px rgba(200,120,170,.15);
  background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 12px) 18px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
#lvl{font-weight:800; font-size:14px; color:#fff; background:var(--accent); padding:7px 13px; border-radius:999px}
#stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; min-height:0;
}
#sprite{
  height:min(54vh, 280px); width:auto; image-rendering:auto;
  filter:drop-shadow(0 8px 14px rgba(190,120,160,.28));
  transition:transform .18s ease;
}
#sprite.pop{transform:scale(1.06)}
#bubble{
  position:absolute; top:6%; right:6%;
  background:#fff; border-radius:16px; padding:9px 13px; font-size:14px; font-weight:700;
  box-shadow:0 4px 14px rgba(180,110,150,.22);
}
.hidden{display:none}
#stats{display:grid; gap:7px; padding:6px 2px 10px}
.bar{display:flex; align-items:center; gap:9px}
.bar span{width:46px; font-size:12px; font-weight:700; color:var(--sub)}
.track{flex:1; height:11px; background:#f6dbe8; border-radius:999px; overflow:hidden}
.track i{display:block; height:100%; width:50%; border-radius:999px; transition:width .4s ease}
#hunger{background:var(--pink)} #happy{background:var(--mint)}
#energy{background:var(--sky)} #exp{background:var(--gold)}
#actions{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
#actions button{
  border:none; background:var(--card); color:var(--ink); border-radius:18px;
  padding:11px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:12px; font-weight:700; box-shadow:0 3px 12px rgba(200,120,170,.16);
  transition:transform .1s ease, opacity .15s ease;
}
#actions button b{font-size:21px; line-height:1}
#actions button:active{transform:scale(.94); opacity:.85}
#actions button:disabled{opacity:.4}