body{background:var(--paper)}
.room{position:absolute;inset:0;overflow:hidden}
.wall{position:absolute;inset:0 0 30% 0;transition:background .4s}
.floor{position:absolute;left:0;right:0;bottom:0;height:30%;background:var(--paper-deep);border-top:3px solid var(--ink)}
.item{position:absolute;font-size:80px;line-height:1;display:none;filter:drop-shadow(0 6px 0 #0002)}
.item.on{display:block;animation:popin .5s}
.i-window{left:7%;top:14px;font-size:130px}.i-poster{right:8%;top:14px;font-size:100px}.i-star{left:44%;top:6px;font-size:64px}
.i-balloon{right:24%;top:10px;font-size:90px;animation:bob 3s ease-in-out infinite}.i-plant{right:6%;bottom:27%;font-size:110px}.i-lamp{left:5%;bottom:28%;font-size:100px}
.i-rug{left:50%;bottom:20%;width:min(60vw,420px);height:90px;margin-left:calc(min(60vw,420px)/-2);border-radius:50%;background:repeating-radial-gradient(#ff8fab 0 14px,#ffd6e0 14px 28px);font-size:0;filter:none}
.bud{position:absolute;left:50%;bottom:23%;width:min(44vw,46vh,340px);transform:translateX(-50%);transition:transform .3s;touch-action:none}
.bud.hop{animation:hop .6s}
@keyframes hop{0%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-60px) scale(1.05)}}
.bud svg{width:100%;overflow:visible}
.bud.breath svg{animation:breath 3s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.025,.98)}}
.bar{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:12px;z-index:30;flex-wrap:wrap;padding:0 8px}
.bar .btn{background:var(--card)}
.namechip{border-radius:var(--sk2);background:var(--sun-soft);border:2.5px solid var(--ink);box-shadow:var(--shadow);font-family:var(--hand);font-size:38px;font-weight:700;padding:10px 26px;min-height:72px}
.stk{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--sk2);padding:10px 20px;font-size:34px;font-weight:900;min-width:72px;text-align:center}
.drawer{position:absolute;left:0;right:0;bottom:0;z-index:40;background:var(--card);border:2.5px solid var(--ink);border-bottom:0;border-radius:36px 36px 0 0;padding:16px 16px 24px;animation:slideup .3s}
@keyframes slideup{from{transform:translateY(100%)}}
.drawer .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.drawer .btn{min-width:84px;min-height:84px;font-size:42px}
.btn.sel{outline:6px solid var(--green)}
.sw{width:64px;height:64px;border-radius:50%;box-shadow:var(--shadow);border:3px solid var(--ink)}
.sw.sel{outline:5px solid var(--ink)}
.x{position:absolute;top:-30px;right:16px;width:64px;height:64px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink);box-shadow:var(--shadow);font-size:30px}
.act{position:absolute;inset:0;z-index:25}
.food{position:absolute;font-size:96px;touch-action:none;filter:drop-shadow(0 6px 0 #0002)}
.foodrow{position:absolute;left:0;right:0;bottom:130px;display:flex;justify-content:center;gap:30px}
.foodrow .food{position:static}
.dirt{position:absolute;width:44px;height:44px;border-radius:50%;background:#7a5230;opacity:.85;pointer-events:none;transition:opacity .4s,transform .4s}
.dirt.gone{opacity:0;transform:scale(2)}
.bubble{position:fixed;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#bfe9ff 70%);border:2px solid #fff;pointer-events:none;z-index:60;animation:bub 1s forwards}
@keyframes bub{to{transform:translateY(-70px) scale(1.5);opacity:0}}
.ball{position:absolute;font-size:84px;z-index:26;touch-action:none;line-height:1}
.dark{position:absolute;inset:0;background:#0a0f3c;opacity:0;pointer-events:none;transition:opacity 1s;z-index:22}
.dark.on{opacity:.82}
.zzz{position:absolute;font-size:56px;color:#fff;z-index:27;animation:floatup 2.5s infinite;pointer-events:none}
@keyframes floatup{from{transform:translateY(0);opacity:1}to{transform:translateY(-120px);opacity:0}}
.emo{position:absolute;z-index:28;left:0;right:0;bottom:130px;display:flex;justify-content:center;gap:30px}
.thought{position:absolute;font-size:70px;z-index:27;pointer-events:none;animation:popin .4s}
.names{position:fixed;inset:0;z-index:120;background:#FAF3E3ee;display:grid;place-items:center;align-content:center;gap:20px;grid-template-columns:repeat(2,minmax(140px,220px));justify-content:center;padding:20px}
.names button{background:var(--card);border:2.5px solid var(--ink);border-radius:var(--sk2);box-shadow:var(--shadow);font-family:var(--hand);font-size:42px;font-weight:700;padding:22px 10px}
.earned{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:150px;z-index:150;pointer-events:none;animation:earn 2.3s forwards}
@keyframes earn{0%{transform:translate(-50%,-50%) scale(.2)}20%{transform:translate(-50%,-50%) scale(1.2)}70%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(120%,-300%) scale(.2);opacity:0}}
/* phone portrait: bar becomes 2 rows, so Buddy and the food row sit above it */
@media (max-width:600px){
  .wall{inset:0 0 45% 0}.floor{height:45%}
  .bud{bottom:310px;width:min(64vw,36vh,260px)}
  .foodrow,.emo{bottom:200px}
  .i-plant,.i-lamp{bottom:320px;font-size:64px}.i-plant{right:3%}.i-lamp{left:3%}
  .i-rug{bottom:296px;width:80vw;margin-left:-40vw}
  .i-window{font-size:90px;left:4%}.i-poster{font-size:70px;right:4%}.i-balloon{font-size:60px;right:30%}.i-star{left:40%}
  .stk{white-space:nowrap;padding:8px 12px;font-size:28px;min-width:0}
  .namechip{font-size:30px;padding:8px 16px;min-height:60px}
}
.mode-little .drawer .btn{min-width:96px;min-height:96px}
.mode-little .sw{width:96px;height:96px}
.ask{position:absolute;top:6px;left:0;right:0;margin:0 auto;width:fit-content;z-index:28;background:var(--card);border:2.5px solid var(--ink);border-radius:var(--sk);padding:6px 24px;font-size:68px;line-height:1.1;box-shadow:var(--shadow)}
.ask::after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-12px;border:12px solid transparent;border-top-color:var(--ink);border-bottom:0}
.fi{position:absolute;line-height:1;touch-action:none;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 6px 0 #0002);animation:bob 2.6s ease-in-out infinite;z-index:27}
.fi:nth-child(2n){animation-delay:-1s}.fi:nth-child(3n){animation-delay:-.4s}
@media (max-width:600px){.ask{font-size:50px;padding:4px 16px;top:4px}}