:root{
  --cream:#fff8ef; --paper:#fffdf8; --ink:#43302a; --soft:#8a6f63;
  --accent:#e2703a; --accent2:#f2a541; --line:#f0ddc8;
  --food:#f28c28; --mood:#f2b134; --love:#ef6461;
  --shadow:0 6px 24px rgba(120,72,20,.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:17px;}
body{
  margin:0; background:linear-gradient(180deg,#fdeeda,#fff8ef 320px);
  color:var(--ink); font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}
.hidden{display:none !important;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center;
  padding:.65rem 1rem; background:rgba(255,248,239,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:1.25rem; letter-spacing:.2px;}
.top-right{display:flex; align-items:center; gap:.6rem;}
.streak{background:#fff; border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem; font-weight:700; box-shadow:var(--shadow);}
.lang-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px;
  padding:.42rem .85rem; font-size:.95rem; font-weight:700; cursor:pointer; box-shadow:var(--shadow);
}
.lang-btn:active{transform:scale(.96);}

main{max-width:680px; margin:0 auto; padding:0 .8rem 2.2rem;}

/* ---------- room ---------- */
.room{
  position:relative; margin-top:.9rem; border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
  background:linear-gradient(180deg,#ffe9c9 0%, #ffe0b8 55%, #d99a5b 55.2%, #c98548 100%);
  min-height:300px; border:1px solid var(--line);
}
.window{
  position:absolute; top:22px; left:26px; width:110px; height:110px; border-radius:14px;
  background:linear-gradient(180deg,#bfe6ff,#e8f7ff); border:8px solid #fff7ea;
  box-shadow:inset 0 0 0 3px #d9c7a8;
}
.window::after{content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, transparent 47%, #fff7ea 47%, #fff7ea 53%, transparent 53%),
  linear-gradient(0deg, transparent 47%, #fff7ea 47%, #fff7ea 53%, transparent 53%);}
.sun{position:absolute; top:12px; right:14px; width:30px; height:30px; border-radius:50%; background:#ffd93b; box-shadow:0 0 18px #ffd93b;}
.cloud{position:absolute; top:52px; left:10px; width:52px; height:16px; border-radius:999px; background:#ffffff; opacity:.85;}
.plant{position:absolute; top:96px; right:22px; font-size:2.2rem;}
.rug{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  width:88%; height:86px; border-radius:50%;
  background:radial-gradient(ellipse at center,#f6c177 0%, #eda55c 55%, #e08b3e 100%);
  opacity:.9;
}
.cat-row{
  position:relative; z-index:3; display:flex; justify-content:center; align-items:flex-end;
  gap:.55rem; padding:158px .6rem 30px;
}
.cat-card{
  width:31%; max-width:180px; cursor:pointer; border:none; background:none; padding:0;
  transition:transform .25s ease;
}
.cat-card .photo{
  border-radius:16px; overflow:hidden; border:4px solid #fff; box-shadow:0 8px 18px rgba(90,50,10,.25);
  aspect-ratio:3/3.4; background:#e8d5bd;
}
.cat-card img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block;}
.cat-card .nameplate{
  margin-top:.35rem; background:rgba(255,253,248,.95); border-radius:999px; padding:.22rem .4rem;
  font-weight:800; font-size:.98rem; color:var(--ink); box-shadow:var(--shadow); white-space:nowrap;
}
.cat-card.active{transform:translateY(-10px) scale(1.05);}
.cat-card.active .photo{border-color:var(--accent2); box-shadow:0 0 0 3px var(--accent), 0 12px 22px rgba(90,50,10,.3);}
.cat-card.bounce .photo{animation:bounce .55s ease;}
@keyframes bounce{0%{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-1.5deg)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
.fx-layer{position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden;}
.fx{position:absolute; font-size:1.5rem; animation:floatUp 1.4s ease-out forwards;}
@keyframes floatUp{from{opacity:0; transform:translateY(8px) scale(.7)}20%{opacity:1}to{opacity:0; transform:translateY(-72px) scale(1.25)}}

/* ---------- panels ---------- */
.panel{
  background:var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:1rem 1rem 1.1rem; margin-top:.9rem; box-shadow:var(--shadow);
}
.cat-head{display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem;}
.cat-head h1{margin:0; font-size:1.65rem; line-height:1.1;}
.tag{color:var(--accent); font-weight:700; margin-top:.15rem;}
.acts-left{color:var(--soft); font-size:.92rem; text-align:right;}
.acts-left b{color:var(--accent); font-size:1.15rem;}

.stats{margin-top:.8rem; display:grid; gap:.5rem;}
.stat{display:grid; grid-template-columns:7.2rem 1fr 2rem; align-items:center; gap:.55rem;}
.stat-label{font-weight:700; font-size:.95rem;}
.bar{height:14px; background:#f6e8d5; border-radius:999px; overflow:hidden;}
.fill{height:100%; border-radius:999px; transition:width .6s ease;}
.fill-food{background:linear-gradient(90deg,#ffb35c,var(--food));}
.fill-mood{background:linear-gradient(90deg,#ffd76e,var(--mood));}
.fill-love{background:linear-gradient(90deg,#ff9d9a,var(--love));}
.stat-num{font-weight:800; text-align:right;}

.bubble{
  margin-top:.9rem; background:#fff4e0; border:1.5px dashed #eec27f; border-radius:14px;
  padding:.65rem .8rem; min-height:3.1rem; font-size:1.02rem; line-height:1.45;
}
.bubble:empty::before{content:"…"; color:var(--soft);}

.actions{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.9rem;}
.act-btn{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  min-height:64px; padding:.55rem .3rem; border-radius:16px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  font-size:1.55rem; font-weight:700; box-shadow:0 3px 0 #ecd9bd;
}
.act-btn span{font-size:1rem;}
.act-btn:active{transform:translateY(2px); box-shadow:none;}
.act-btn:disabled{opacity:.45; cursor:default; transform:none;}

.diary-panel h2{margin:.1rem 0 .6rem; font-size:1.25rem;}
.diary-date{color:var(--soft); font-size:.95rem; font-weight:600;}
.diary-body{
  background:repeating-linear-gradient(180deg,#fffdf8 0 30px,#fdf1dc 30px 31px);
  border:1px solid var(--line); border-radius:14px; padding:.75rem .9rem;
  line-height:31px; min-height:96px; font-size:1.05rem;
}
.diary-body .empty{color:var(--soft);}
.diary-btns{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap;}
.primary-btn,.ghost-btn{
  flex:1; min-height:56px; border-radius:14px; font-size:1.02rem; font-weight:800; cursor:pointer; padding:.5rem .6rem;
}
.primary-btn{background:var(--accent); color:#fff; border:none; box-shadow:0 4px 0 #b6501f;}
.primary-btn:active{transform:translateY(2px); box-shadow:none;}
.primary-btn:disabled{background:#d8c3ae; box-shadow:none; cursor:default;}
.ghost-btn{background:#fff; color:var(--accent); border:1.5px solid var(--accent);}
.ghost-btn:disabled{opacity:.45; cursor:default;}
.hint{color:var(--soft); font-size:.9rem; margin:.65rem 0 0;}

.book-toggle{
  width:100%; background:none; border:none; cursor:pointer; color:var(--ink);
  font-size:1.12rem; font-weight:800; text-align:left; padding:.2rem 0;
}
.book-list{margin-top:.6rem; display:grid; gap:.7rem;}
.book-item{border:1px solid var(--line); border-radius:14px; padding:.7rem .85rem; background:#fffaf1;}
.book-item .meta{font-weight:800; color:var(--accent); margin-bottom:.25rem;}
.book-item p{margin:0; line-height:1.55;}
.book-empty{color:var(--soft);}

.foot{text-align:center; color:var(--soft); font-size:.92rem; margin-top:1.2rem; line-height:1.5;}

@media (max-width:420px){
  .stat{grid-template-columns:6.4rem 1fr 1.8rem;}
  .cat-row{padding-top:150px;}
  html{font-size:16px;}
}