/* Skin "anime" (mặc định). Bố cục mobile-first: tranh toàn chiều rộng, dock nổi bên dưới, thanh điều hướng dưới cùng.
   Từ 900px: hai cột (phòng bên trái, bảng điều khiển luôn mở bên phải), ẩn thanh điều hướng.
   Màu phòng là token nên cả phòng đổi theo sáng/tối; phong cảnh ngoài cửa sổ vẽ trên canvas. */
:root{
  --bg:#fbf9f5; --fg:#2e2925; --muted:#6b635b; --panel:#fbf9f5; --paper:#f3eee6; --line:rgba(138,106,74,.18);
  --accent:#a85a0c; --accent-fg:#fbf9f5; --primary:#8a6a4a; --gold:#d6aa5a; --track:rgba(143,167,179,.24); --seg:#ffffff;
  --glass:rgba(251,249,245,.88);
  --wall:#8fa7b3; --wall-low:#7b94a1; --floor:#6b5a4e; --rug:#b4675a;
  --wood:#8a6a4a; --wood-d:#654a33; --sill:#b8946a; --curtain:#d6aa5a;
  --ink:#4a372b; --cat-w:#f6ece0; --cat-o:#dd8f3e; --cat-b:#6e4b3c; --cup:#eef0ec; --plant:#4f8a5b; --pot:#c97a4c; --lampshade:#e8c27a;
  --bloom:#e8809a; --fruit:#d9553f; --bird:#c9784a;
  --lantern:#d9553f; --drop:#68a8d6;
  --seed-daisy:#f7f4ec; --seed-daisy-c:#f2b73f; --seed-succulent:#62a892; --seed-succulent-tip:#e593a2; --seed-strawberry:#d84534; --seed-lavender:#977fc2; --seed-lavender-l:#bdaadb;
  --contact:rgba(40,24,16,.18); --cushion:#d99b75; --cushion-d:#b97a55;
  --book-1:#7ea3a1; --book-2:#d88f6b; --book-3:#b49bcf; --book-4:#e0bc6e;
  --shelf-leaf:#5a9463; --shiba:#d0863b; --tabby:#df934b; --tabby-d:#9c5a1f;
  --jiji:#1e1818; --jiji-rim:#4a3f3f; --collar:#d84c3e; --bell:#f0be46;
  --display:'Quicksand','Be Vietnam Pro',system-ui,sans-serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
}
#room[data-curtain="rose"]{--curtain:#e6a9a4}
#room[data-curtain="voile"]{--curtain:#f4efe6}
#room[data-rug="teal"]{--rug:#4f9a96}
#room[data-rug="boho"]{--rug:#8a5242}
#room[data-cup="matcha"]{--cup:#849c74}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1a2228; --fg:#f5efe6; --muted:#a4b1b8; --panel:#1d272f; --paper:#232d35; --line:rgba(227,154,74,.18);
    --accent:#e39a4a; --accent-fg:#1a1208; --primary:#d0ad82; --track:rgba(143,167,179,.18); --seg:#2e3942;
    --glass:rgba(26,34,40,.88);
    --wall:#3c4c56; --wall-low:#324350; --floor:#3a312b; --rug:#8a4a40;
    --wood:#6d5238; --wood-d:#4f3e2b; --sill:#8c7050; --curtain:#9c7a3a;
    --ink:#150f0b; --cat-w:#d9d0c6; --cat-o:#b9772f; --cat-b:#4e3629; --cup:#cfd6d2; --plant:#3f7049; --pot:#a3613b; --lampshade:#d6ae64;
    --bloom:#c46a82; --fruit:#b24a38; --bird:#b87a4a;
    --lantern:#b24a38; --drop:#4d82aa;
    --seed-daisy:#ddd7ca; --seed-daisy-c:#c6942e; --seed-succulent:#488270; --seed-succulent-tip:#b56e7c; --seed-strawberry:#b23525; --seed-lavender:#7b66a3; --seed-lavender-l:#9987ba;
    --contact:rgba(0,0,0,.35); --cushion:#a86c4a; --cushion-d:#875134;
    --book-1:#5d7c7a; --book-2:#a96748; --book-3:#866fa0; --book-4:#ad8d4a;
    --shelf-leaf:#44734c; --shiba:#aa6827; --tabby:#b87435; --tabby-d:#773e0e;
    --jiji:#141010; --jiji-rim:#332b2b; --collar:#a83529; --bell:#c99b2e;
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) #room[data-curtain="rose"]{--curtain:#a8696a}
  :root:not([data-theme="light"]) #room[data-curtain="voile"]{--curtain:#a49d94}
  :root:not([data-theme="light"]) #room[data-rug="teal"]{--rug:#2f6b69}
  :root:not([data-theme="light"]) #room[data-rug="boho"]{--rug:#5a3228}
  :root:not([data-theme="light"]) #room[data-cup="matcha"]{--cup:#586c4e}
}
:root[data-theme="dark"]{
  --bg:#1a2228; --fg:#f5efe6; --muted:#a4b1b8; --panel:#1d272f; --paper:#232d35; --line:rgba(227,154,74,.18);
  --accent:#e39a4a; --accent-fg:#1a1208; --primary:#d0ad82; --track:rgba(143,167,179,.18); --seg:#2e3942;
  --glass:rgba(26,34,40,.88);
  --wall:#3c4c56; --wall-low:#324350; --floor:#3a312b; --rug:#8a4a40;
  --wood:#6d5238; --wood-d:#4f3e2b; --sill:#8c7050; --curtain:#9c7a3a;
  --ink:#150f0b; --cat-w:#d9d0c6; --cat-o:#b9772f; --cat-b:#4e3629; --cup:#cfd6d2; --plant:#3f7049; --pot:#a3613b; --lampshade:#d6ae64;
  --bloom:#c46a82; --fruit:#b24a38; --bird:#b87a4a;
  --lantern:#b24a38; --drop:#4d82aa;
  --seed-daisy:#ddd7ca; --seed-daisy-c:#c6942e; --seed-succulent:#488270; --seed-succulent-tip:#b56e7c; --seed-strawberry:#b23525; --seed-lavender:#7b66a3; --seed-lavender-l:#9987ba;
  --contact:rgba(0,0,0,.35); --cushion:#a86c4a; --cushion-d:#875134;
  --book-1:#5d7c7a; --book-2:#a96748; --book-3:#866fa0; --book-4:#ad8d4a;
  --shelf-leaf:#44734c; --shiba:#aa6827; --tabby:#b87435; --tabby-d:#773e0e;
  --jiji:#141010; --jiji-rim:#332b2b; --collar:#a83529; --bell:#c99b2e;
  color-scheme:dark;
}
:root[data-theme="dark"] #room[data-curtain="rose"]{--curtain:#a8696a}
:root[data-theme="dark"] #room[data-curtain="voile"]{--curtain:#a49d94}
:root[data-theme="dark"] #room[data-rug="teal"]{--rug:#2f6b69}
:root[data-theme="dark"] #room[data-rug="boho"]{--rug:#5a3228}
:root[data-theme="dark"] #room[data-cup="matcha"]{--cup:#586c4e}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--body);padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible,.hot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.gold{color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* không có JavaScript */
.nojs{margin:24px 16px;padding:16px;border-radius:14px;background:var(--paper);color:var(--fg);text-align:center}

/* header + dải ngày */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;background:var(--bg);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:max(8px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.top-title{min-width:0;overflow:hidden}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--primary);flex:none}
.top h1{margin:0;font:700 18px/1.2 var(--display);letter-spacing:-.01em}
.top small{display:block;font-size:11px;color:var(--muted);letter-spacing:.02em}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%;background:var(--paper);color:var(--fg);position:relative;transition:background .15s}
.iconbtn:hover{filter:brightness(1.05)}
.pip{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.pip[hidden]{display:none}
.chip.gold{font-variant-numeric:tabular-nums;gap:4px;padding:0 10px;min-height:36px;font-size:13px}
@media (max-width:420px){
  .top small{display:none}
  .top h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.strip{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--paper);color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px max(16px,env(safe-area-inset-right,0px)) 4px max(16px,env(safe-area-inset-left,0px))}
.zen{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border-radius:999px;font-size:12px;letter-spacing:0;text-transform:none;color:var(--fg)}
.zen[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}

/* phòng */
.stage{max-width:480px;margin:0 auto}
.room{position:relative;width:100%;aspect-ratio:400/520;overflow:hidden;--dim:1}
.room svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#view{position:absolute;display:block;left:18%;top:11.923%;width:64%;height:37.692%}
#front{pointer-events:none}
#fg{filter:brightness(var(--dim));transition:filter .6s}
.hot{pointer-events:auto;cursor:pointer;outline:none}
.hot:hover{filter:brightness(1.1)}
.hint{margin:10px 16px 0;font-size:13px;color:var(--muted);text-align:center}

/* dock nổi */
.dock{position:relative;z-index:2;width:calc(100% - 24px);max-width:456px;margin:-18px auto 0;padding:6px 16px 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:24px 24px 16px 16px;box-shadow:0 12px 36px -8px rgba(46,41,37,.18)}
.grab{display:grid;justify-items:center;gap:2px;width:100%;min-height:44px;padding-top:6px;color:var(--muted);font-size:12px}
.grab .bar{width:40px;height:5px;border-radius:99px;background:var(--line)}
.grabtxt{display:inline-flex;align-items:center;gap:4px}
.dock.open .grab .ic{transform:rotate(180deg)}
.shelf{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--paper);font-weight:500}
.clock{font:700 17px/1 var(--display)}
.seg{display:flex;padding:4px;border-radius:999px;background:var(--track)}
.seg button{min-height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--seg);color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.moment{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border-radius:14px;background:var(--paper)}
.moment>div{flex:1;min-width:0}
.moment p{margin:0}
#momentT{font-weight:600;font-size:14px;line-height:1.35}
#momentS{font-size:13px;color:var(--muted);line-height:1.4}
.mi{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#ffdea8;color:#271900;flex:none}
.primary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-weight:600;font-size:13px;flex:none;
  box-shadow:0 8px 20px -8px rgba(168,90,12,.5);transition:transform .15s}
.primary:hover{transform:translateY(-1px)}
.primary:active{transform:translateY(.5px)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:999px;min-height:40px;padding:0 16px}

/* ngăn kéo mở rộng */
#more{display:none;gap:22px;margin-top:18px}
.dock.open #more{display:grid}
.sec h2{margin:0 0 10px;font:700 15px/1.3 var(--display)}
.row{display:flex;align-items:center;gap:12px}
.row input[type=range]{flex:1;min-width:0}
output{font-variant-numeric:tabular-nums;font-weight:600;min-width:3.2em;text-align:right}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;cursor:pointer}
.switch b{display:block;font-weight:600;font-size:14px}
.switch small{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.tog{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:24px;margin:0;border-radius:99px;background:var(--track);cursor:pointer;transition:background .2s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.tog:checked{background:var(--gold)}
.tog:checked::after{transform:translateX(20px)}
input[type=range]{appearance:none;-webkit-appearance:none;height:28px;background:transparent;margin:0;accent-color:var(--accent)}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--track)}
input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:var(--track)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;background:#fff6e6;border:2px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.25)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff6e6;border:2px solid var(--accent)}
#hour::-webkit-slider-runnable-track{background:linear-gradient(90deg,#1a2228 0%,#d6aa5a 25%,#8fa7b3 50%,#d6aa5a 75%,#1a2228 100%)}
#hour::-moz-range-track{background:linear-gradient(90deg,#1a2228 0%,#d6aa5a 25%,#8fa7b3 50%,#d6aa5a 75%,#1a2228 100%)}
.sounds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sound{display:grid;align-content:start;justify-items:start;gap:4px;min-height:96px;padding:12px;border-radius:16px;background:var(--paper);border:1px solid var(--line);text-align:left}
.sound b{font:700 15px/1.25 var(--display)}
.sound small{font-size:12px;line-height:1.35;color:var(--muted)}
.sound[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.si{display:grid;place-items:center;width:32px;height:32px;margin-bottom:2px;border-radius:50%;background:var(--track);color:var(--primary)}
.sound[aria-pressed="true"] .si{background:var(--accent);color:var(--accent-fg)}
.mix{display:flex;align-items:center;gap:12px;margin-top:12px}
.pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:500;flex:none}
.pill[aria-pressed="true"]{background:var(--track)}
.vol{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.vol input{flex:1;min-width:0}
.vol output{min-width:3em}
.note{margin:10px 0 0;font-size:12px;color:var(--muted)}

/* điều hướng dưới + toast */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:space-around;background:var(--bg);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs button{display:grid;justify-items:center;gap:2px;width:68px;min-height:52px;padding-top:6px;border-radius:12px;font-size:11px;color:var(--muted)}
.tabs .ic{width:24px;height:24px}
.tabs button{position:relative}
.tabs .on::after{content:"";position:absolute;top:6px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.tabs [aria-current="page"]{color:var(--primary);font-weight:600}
.toast{position:fixed;top:72px;left:50%;transform:translate(-50%,-6px);z-index:60;max-width:calc(100% - 32px);padding:8px 16px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:13px;
  text-align:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}
body.zen .top,body.zen .dock,body.zen .tabs,body.zen .hint{display:none}

/* hộp thoại bưu thiếp */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(6,10,14,.66);
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.overlay[hidden]{display:none}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:12px;max-width:420px;width:100%;max-height:100%;overflow:auto}
.sheet h2{margin:0;font:700 22px/1.2 var(--display)}
.sheet img{width:100%;height:auto;border-radius:10px;display:block}
.sheet .row{flex-wrap:wrap}

/* object animations */
@keyframes wag{0%,100%{transform:rotate(0)}25%{transform:rotate(17deg)}75%{transform:rotate(-15deg)}}
#cat .tail{transform-origin:340px 268px}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
.cbody{transform-origin:296px 272px;animation:breathe 4.2s ease-in-out infinite}
.rugbody{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite}
.ink{stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
#lamp .shade{transition:filter .4s}
#lamp[aria-pressed="true"] .shade{filter:brightness(1.2) saturate(1.15)}
#cat.wag .tail{animation:wag .5s ease-in-out 3}
@keyframes steam{0%{transform:translateY(2px);opacity:0}25%{opacity:.85}100%{transform:translateY(-12px);opacity:0}}
.steam{transform-origin:93px 242px;transition:transform .5s}
.steam path{animation:steam 3.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.1s}.steam path:nth-child(3){animation-delay:2.1s}
#cup.sip .steam,.room[data-mode="cafe"] .steam{transform:scaleY(1.55)}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(6deg)}50%{transform:rotate(-5deg)}80%{transform:rotate(3deg)}}
#leaves{transform-origin:156px 244px;animation:sway 5s ease-in-out infinite}
#plant.shake #leaves{animation:shake .9s ease-in-out 1}
@keyframes pop{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-36px) scale(1.15);opacity:0}}
.heart{transform-box:fill-box;transform-origin:center;animation:pop 1.2s ease-out forwards}
@keyframes drip{0%{transform:translateY(0);opacity:0}12%{opacity:.55}88%{opacity:.4}100%{transform:translateY(52px);opacity:0}}
.drop{animation:drip linear infinite}
@keyframes fly{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(4px,-6px);opacity:.95}}
.fly{animation:fly 3.4s ease-in-out infinite}
.fly:nth-child(2){animation-delay:-.7s}.fly:nth-child(3){animation-delay:-1.5s}.fly:nth-child(4){animation-delay:-2.1s}.fly:nth-child(5){animation-delay:-2.8s}

/* hiệu ứng tưới cây */
@keyframes drizzle{0%{transform:translateY(-16px);opacity:0}30%{opacity:.85}100%{transform:translateY(18px);opacity:0}}
#plant.water #waterdrops{opacity:1}
#plant.water #waterdrops ellipse{animation:drizzle 1.2s ease-in infinite}
#plant.water #waterdrops ellipse:nth-child(2){animation-delay:.22s}
#plant.water #waterdrops ellipse:nth-child(3){animation-delay:.44s}
#plant.water #waterdrops ellipse:nth-child(4){animation-delay:.16s}
#plant.water #waterdrops ellipse:nth-child(5){animation-delay:.36s}
#plant.water #leaves{animation:shake .9s ease-in-out 1}

/* hộp thoại khu vườn */
.gsheet{gap:14px}
.gsheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gsummary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:2px}
.gchip{min-height:26px;padding:0 8px;font-size:12px}
.gstagename{font-size:12px;color:var(--primary);font-weight:600;margin-top:2px}
.gclose{min-height:36px;padding:0 12px;font-size:13px}

.tabs-in{display:flex;background:var(--track);padding:4px;border-radius:999px;gap:2px}
.tabs-in button{flex:1;min-height:34px;padding:0 6px;border-radius:999px;font-size:12px;font-weight:500;color:var(--muted);text-align:center;transition:background .15s,color .15s}
.tabs-in button[aria-selected="true"]{background:var(--seg);color:var(--accent);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.14)}

.gpanels{overflow-y:auto;max-height:calc(100dvh - 220px);padding:4px 2px}
.checkin-card{display:grid;gap:12px;padding:16px;background:var(--paper);border-radius:16px;text-align:center;align-items:center;justify-items:center}
.checkin-btn{width:100%;max-width:280px;justify-content:center}
.checkin-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.next-milestone{margin:0;font-size:13px;color:var(--muted)}
.wither-note{margin:0;font-size:13px;color:var(--accent);font-weight:500}

.qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;background:var(--paper);border-radius:14px;margin-bottom:8px}
.qinfo{flex:1;min-width:0}
.qname{font-weight:600;font-size:13px;line-height:1.3;margin:0}
.qmeta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin:2px 0 0}
.qbtn{min-height:34px;padding:0 12px;font-size:12px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.qbtn:disabled{opacity:.55;cursor:not-allowed}
.qnote{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}

.shopgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.shopcard{display:flex;flex-direction:column;justify-content:space-between;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;gap:8px}
.shoptitle{font-weight:600;font-size:13px;line-height:1.3;margin:0}
.shopdesc{font-size:11px;color:var(--muted);line-height:1.35;flex:1;margin:0}
.shopprice{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent)}
.shopbtn{min-height:32px;padding:0 10px;font-size:12px;border-radius:999px;width:100%;justify-content:center;font-weight:600}
.shopbtn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

.backup-sec p{font-size:13px;color:var(--muted);line-height:1.45}
.backup-box{width:100%;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--fg);font:12px/1.4 monospace;resize:none}
.restore-err{color:var(--fruit);font-size:12px;margin:4px 0 0}
.restore-confirm{padding:12px;border-radius:14px;background:var(--paper);border:1px dashed var(--accent);margin-top:8px}

@media (max-width:899px){
  #gdlg.overlay{align-items:end;padding:max(12px,env(safe-area-inset-top,0px)) 0 0}
  .gsheet{border-radius:24px 24px 0 0;max-width:100%;width:100%;max-height:calc(100dvh - 24px);border-bottom:0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:900px){
  .gsheet{max-width:460px;width:100%;max-height:calc(100vh - 48px);border-radius:20px}
}

@media (min-width:900px){
  body{padding-bottom:36px}
  /* Phòng là nhân vật chính: cao theo màn hình (vừa khít, trừ ~218px cho header, dải ngày, gợi ý, lề đo ngày 2026-10-22), rộng suy ra theo tỉ lệ 400:520,
     và không rộng quá mức làm tràn ngang. Bảng điều khiển hẹp 340-380px. Tỉ lệ phòng : bảng ~ 55-62 : 45-38. */
  .app{--pw:clamp(340px,26vw,380px);--rh:min(clamp(540px,calc(100dvh - 218px),760px),calc((100vw - var(--pw) - 80px) * 1.3));
    display:grid;grid-template-columns:auto var(--pw);gap:32px;justify-content:center;max-width:none;margin:0 auto;padding:24px 16px;align-items:start}
  .stage{max-width:none;margin:0}
  .room{height:var(--rh);width:calc(var(--rh) / 1.3);border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 36px -22px rgba(0,0,0,.5)}
  .dock{width:auto;max-width:none;margin:0;padding-top:16px;border-radius:20px}
  .grab,.tabs{display:none}
  #more{display:grid}
}
#room[data-night="1"] .cbody,#room[data-night="1"] .rugbody{animation-duration:6.4s}
.look-eyes,.night-eyes{display:none}
#cat.look .look-eyes,#rugpet.look .look-eyes{display:inline}
#room[data-night="1"] .night-eyes{display:inline}
@keyframes perk{0%,100%{transform:translateY(0)}35%{transform:translateY(-2px)}}
#cat.perk{animation:perk .9s ease}
@keyframes perkEar{0%,100%{transform:rotate(0)}30%{transform:translateY(-2px) rotate(-8deg)}65%{transform:translateY(-2px) rotate(5deg)}}
#cat.perk .ear,#rugpet.perk .ear{transform-box:fill-box;transform-origin:50% 100%;animation:perkEar .9s ease-in-out 1}
#room[data-weather="rain"] .sq-tail{transform-box:fill-box;transform-origin:bottom left;transform:rotate(-28deg) translateY(-2px);transition:transform .6s ease-in-out}
.pose:not(.on){display:none}
.mood{display:none}
[data-mood="happy"] .mood-happy,[data-mood="hungry"] .mood-hungry{display:inline}
.ic.on{fill:currentColor}
.hearts{display:inline-flex;gap:2px;color:var(--bloom);vertical-align:middle}
.carerow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:13px}
.carerow .mood-txt{color:var(--muted)}
.carerow button{padding:6px 12px;font-size:13px}
.decorrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.decorrow label{font-size:14px}
.decorrow select{min-height:36px;padding:4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-size:13px;max-width:55%}
.care-note{margin:6px 0 0;font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.seed:not(.on){display:none}
[data-bloom="0"] .v-bloom,[data-fruit="0"] .v-fruit{opacity:0}
.plant-h{margin:18px 0 8px;font-size:15px}
.plant-list{display:grid;gap:8px}
.plantrow{padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.plantrow h4{margin:0 0 8px;font-size:14px}
.plantrow .lock{margin:0;font-size:13px;color:var(--muted)}
.seedbtns{display:flex;flex-wrap:wrap;gap:6px}
.seedbtns button{padding:6px 12px;font-size:13px}
.plant-note{margin-top:10px}