/* =========================================================
   喵喵小屋 · 软乎乎猫咪养成
   A hand-drawn cozy cat game — all visuals are CSS + inline SVG
   ========================================================= */

:root {
  --cream: #fff8ec;
  --paper: #fffdf8;
  --ink: #59443a;
  --ink-soft: #7d6559;
  --muted: #a18778;
  --coral: #ff927d;
  --coral-deep: #ef755f;
  --peach: #ffcf9f;
  --pink: #ffd9df;
  --mint: #b9e4d1;
  --sky: #d8efff;
  --gold: #ffcf74;
  --line: rgba(113, 80, 60, .12);
  --shadow-panel: 0 22px 48px rgba(150, 105, 75, .12), 0 2px 4px rgba(150, 105, 75, .04);
  --font-round: "Arial Rounded MT Bold", "Nunito", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-body: "Nunito", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  background:
    radial-gradient(1100px 700px at 8% -10%, #ffe8cf 0%, transparent 58%),
    radial-gradient(900px 700px at 100% 0%, #ffe5e6 0%, transparent 52%),
    radial-gradient(1000px 800px at 50% 110%, #e7f4eb 0%, transparent 60%),
    #fff8ec;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid rgba(255, 146, 125, .48);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* ---------- soft background decorations ---------- */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: .48;
}
.blob-a { width: 380px; height: 380px; left: -130px; top: 14%; background: #ffd9bd; }
.blob-b { width: 420px; height: 420px; right: -160px; top: 30%; background: #ffd9e2; }
.blob-c { width: 520px; height: 520px; left: 38%; bottom: -300px; background: #cfeadd; }
.bg-star {
  position: absolute;
  color: #e9b987;
  font-size: 20px;
  opacity: .55;
  animation: bgFloat 7s ease-in-out infinite;
}
.star-a { left: 4%; top: 13%; }
.star-b { right: 3%; top: 9%; font-size: 14px; animation-delay: -2s; }
.star-c { left: 12%; bottom: 10%; font-size: 26px; animation-delay: -4s; }
.bg-paw {
  position: absolute;
  font-size: 30px;
  opacity: .12;
  filter: grayscale(.2);
}
.paw-a { left: 2%; bottom: 23%; transform: rotate(-22deg); }
.paw-b { right: 1.5%; bottom: 12%; transform: rotate(18deg); font-size: 22px; }

@keyframes bgFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-13px) rotate(8deg); }
}

/* ---------- app shell ---------- */
.app {
  position: relative;
  z-index: 1;
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 1px 4px;
  min-height: 62px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-mark {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #fff8ec;
  background: linear-gradient(145deg, #ffb18d, #ff8f7c);
  box-shadow: 0 6px 0 #e87966, 0 10px 22px rgba(219, 116, 94, .24), inset 0 2px 1px rgba(255,255,255,.5);
  transform: rotate(-5deg);
}
.brand-mark svg { width: 30px; height: 30px; }
.brand-text { min-width: 0; }
.brand-text h1 {
  margin: 0;
  font-family: var(--font-round);
  font-size: 24px;
  letter-spacing: .6px;
  line-height: 1.05;
  color: #554037;
  font-weight: 900;
}
.brand-text p {
  margin: 4px 0 0;
  font-size: 10.5px;
  letter-spacing: .7px;
  color: #a88472;
  white-space: nowrap;
}
.day-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 11px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .78);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 20px rgba(153, 111, 83, .09), inset 0 0 0 1px rgba(126, 90, 66, .03);
  backdrop-filter: blur(12px);
}
.day-emoji { font-size: 21px; filter: drop-shadow(0 2px 2px rgba(160,100,60,.12)); }
.day-copy { display: flex; align-items: baseline; gap: 8px; }
.day-copy strong {
  font-family: var(--font-round);
  font-size: 13.5px;
  letter-spacing: .3px;
}
.day-copy span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.coin-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 43px;
  padding: 0 15px 0 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3c9, #ffe5a1);
  border: 1px solid #f9d889;
  box-shadow: 0 5px 0 #edc66e, 0 8px 18px rgba(189, 140, 43, .13), inset 0 2px 1px rgba(255,255,255,.7);
  position: relative;
  transition: transform .2s;
}
.coin-pill.pop { animation: coinPop .42s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes coinPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.09) rotate(-1deg); }
  100% { transform: scale(1); }
}
.coin-fish { font-size: 22px; filter: drop-shadow(0 2px 1px rgba(150, 100, 20, .18)); }
.coin-pill strong { font-family: var(--font-round); font-size: 16px; color: #7d5717; min-width: 24px; text-align: center; }
.coin-label { font-size: 9.5px; color: #aa7e2c; letter-spacing: .2px; }
.round-btn {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.95);
  background: rgba(255, 253, 248, .85);
  box-shadow: 0 5px 16px rgba(153, 111, 83, .1), inset 0 0 0 1px rgba(126,90,66,.035);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: transform .18s, background .18s;
}
.round-btn:hover { transform: translateY(-2px) rotate(4deg); background: #fff; }
.round-btn:active { transform: translateY(1px); }
.help-btn {
  font-family: var(--font-round);
  font-size: 18px;
  font-weight: 900;
  color: #a37965;
  background: #fff7ec;
}

/* ---------- layout / panels ---------- */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 306px;
  gap: 16px;
  align-items: stretch;
}
.panel {
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, .96), rgba(255, 249, 239, .9));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(126, 90, 66, .025);
  backdrop-filter: blur(18px);
}
.profile-panel {
  padding: 21px 19px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.profile-panel::-webkit-scrollbar { display: none; }
.stage-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* ---------- profile ---------- */
.profile-head {
  display: flex;
  align-items: center;
  gap: 13px;
}
.avatar {
  --fur: #f3b56d;
  --fur-light: #ffd9a5;
  --fur-dark: #dc9047;
  --ava-inner: #ffc4c1;
  --outline: #5e4438;
  position: relative;
  width: 76px;
  height: 74px;
  flex: none;
}
.ava-ear {
  position: absolute;
  top: 3px;
  width: 28px;
  height: 29px;
  background: var(--outline);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 0;
}
.ava-ear::before {
  content: "";
  position: absolute;
  inset: 2.5px 2.5px 0;
  background: var(--fur);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ava-ear::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 14px;
  height: 17px;
  background: var(--ava-inner);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: .8;
  z-index: 1;
}
.ear-left { left: 8px; transform: rotate(-13deg); }
.ear-right { right: 8px; transform: rotate(13deg); }
.ava-face {
  position: absolute;
  inset: 11px 2px 1px;
  border-radius: 48% 48% 46% 46% / 50% 50% 43% 43%;
  background: var(--fur);
  border: 2.5px solid var(--outline);
  box-shadow: none;
  z-index: 1;
  overflow: hidden;
}
.ava-eye {
  position: absolute;
  top: 31px;
  width: 8px;
  height: 11px;
  border-radius: 50%;
  background: #4a3630;
}
.ava-eye::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #fff;
  opacity: .9;
}
.eye-left { left: 16px; }
.eye-right { right: 16px; }
.ava-blush {
  position: absolute;
  top: 43px;
  width: 13px;
  height: 6px;
  border-radius: 50%;
  background: #ff9198;
  opacity: .4;
}
.blush-left { left: 7px; }
.blush-right { right: 7px; }
.ava-nose {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 8px;
  height: 5px;
  transform: translateX(-50%);
  background: #e98c8c;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ava-mouth {
  position: absolute;
  left: 50%;
  top: 47px;
  width: 13px;
  height: 7px;
  transform: translateX(-50%);
  border-bottom: 2px solid rgba(90, 60, 50, .55);
  border-radius: 0 0 50% 50%;
}
.ava-mouth::before, .ava-mouth::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 7px;
  height: 4px;
  border-bottom: 1.6px solid rgba(90, 60, 50, .45);
  border-radius: 50%;
}
.ava-mouth::before { left: -3px; }
.ava-mouth::after { right: -3px; }
.ava-acc {
  position: absolute;
  right: -3px;
  bottom: 0;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff8ec;
  box-shadow: 0 3px 8px rgba(120, 80, 50, .15);
  font-size: 14px;
  opacity: 0;
  transform: scale(.5);
  transition: .25s;
}
.ava-acc.show { opacity: 1; transform: scale(1); }
.profile-id { min-width: 0; flex: 1; }
.name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.name-row h2 {
  margin: 0;
  font-family: var(--font-round);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.level-badge {
  flex: none;
  font-family: var(--font-round);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #a5674b;
  background: #ffe8d2;
  border: 1px solid #ffd5b0;
  box-shadow: 0 2px 0 rgba(209, 142, 99, .18);
}
.level-badge.pop { animation: badgePop .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes badgePop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.cat-title {
  margin: 5px 0 0;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .35px;
}

.exp-block { margin-top: 17px; }
.exp-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: .2px;
}
.exp-label span:first-child { font-weight: 700; color: #8b7163; }
.exp-track {
  height: 8px;
  border-radius: 99px;
  background: #f2e8dd;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(120, 80, 50, .08);
}
.exp-track i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffc874, #ff9f81);
  box-shadow: 0 0 8px rgba(255, 173, 111, .6);
  transition: width .5s cubic-bezier(.3,1,.4,1);
  position: relative;
}
.exp-track i::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto;
  height: 3px;
  border-radius: 99px;
  background: rgba(255,255,255,.55);
}

.stats { margin-top: 17px; display: flex; flex-direction: column; gap: 11px; }
.stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 11.5px;
  color: #7b6457;
}
.stat-head span { display: inline-flex; align-items: center; gap: 5px; }
.stat-head b { font-size: 12px; font-weight: 400; filter: saturate(.85); }
.stat-head strong {
  font-family: var(--font-round);
  font-size: 11.5px;
  color: #8b7567;
  font-variant-numeric: tabular-nums;
}
.stat-track {
  position: relative;
  height: 9px;
  border-radius: 99px;
  background: #f0e6db;
  box-shadow: inset 0 1px 2px rgba(104, 72, 50, .1);
  overflow: hidden;
}
.stat-fill {
  display: block;
  width: 80%;
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.3,1,.4,1);
  position: relative;
}
.stat-fill::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  height: 2px;
  border-radius: 99px;
  background: rgba(255,255,255,.45);
}
.stat[data-stat="hunger"] .stat-fill { background: linear-gradient(90deg, #ffd08c, #ffab66); }
.stat[data-stat="mood"] .stat-fill { background: linear-gradient(90deg, #ffc8d2, #ff97ab); }
.stat[data-stat="energy"] .stat-fill { background: linear-gradient(90deg, #ffe28d, #ffc95f); }
.stat[data-stat="clean"] .stat-fill { background: linear-gradient(90deg, #c2e8fb, #8fcff1); }
.stat.low .stat-head strong { color: #e2786b; }
.stat.low .stat-fill { animation: lowPulse 1.4s ease-in-out infinite; }
@keyframes lowPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

.panel-divider {
  height: 1px;
  margin: 19px 0 15px;
  background: repeating-linear-gradient(90deg, rgba(133, 95, 71, .16) 0 4px, transparent 4px 9px);
}
.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.section-heading h3 {
  margin: 0;
  font-family: var(--font-round);
  font-size: 13px;
  letter-spacing: .3px;
}
.section-heading span { font-size: 9px; color: #b09b8c; }
.wish-list { display: flex; flex-direction: column; gap: 7px; }
.wish {
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  background: #fffaf3;
  border: 1px solid #f3e6d8;
  transition: background .25s, border-color .25s;
}
.wish-icon {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #ffeede;
  font-size: 13px;
}
.wish-body { min-width: 0; }
.wish-label {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 10px;
  color: #7e6558;
  margin-bottom: 4px;
}
.wish-label em { font-style: normal; color: #b49a89; font-size: 9px; }
.wish-progress { height: 4px; border-radius: 99px; background: #efe2d5; overflow: hidden; }
.wish-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffbf87, #ff957d);
  transition: width .4s;
}
.wish-reward {
  font-size: 9px;
  font-family: var(--font-round);
  color: #a37724;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}
.wish.done {
  background: #edf8f1;
  border-color: #d3ebdd;
}
.wish.done .wish-icon { background: #d9f0e3; }
.wish.done .wish-progress i { background: #83c7a2; }
.wish.done .wish-reward { color: #5c9a77; }
.wish.done .wish-label em { color: #6ea185; }
.wish-check {
  display: none;
  font-size: 12px;
  color: #5da27b;
}
.wish.done .wish-check { display: inline; }
.wish.done .wish-reward { display: none; }

.care-tip {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 13px;
  padding: 9px 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff9e9, #fff3e4);
  border: 1px dashed #ecd4b8;
}
.care-tip-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fff1c9;
  font-size: 14px;
}
.care-tip strong {
  display: block;
  font-size: 9.5px;
  color: #a17e5b;
  letter-spacing: .2px;
  margin: 1px 0 3px;
}
.care-tip p {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.55;
  color: #a58b76;
}
.care-tip.good { background: linear-gradient(135deg, #f1faf4, #eaf7ef); border-color: #d4ebdd; }
.care-tip.good .care-tip-icon { background: #ddf2e5; }
.care-tip.good strong { color: #7ca18a; }
.care-tip.good p { color: #87a393; }

.profile-quote {
  position: relative;
  flex: 1;
  min-height: 112px;
  margin-top: 12px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  border-radius: 18px;
  border: 1px dashed rgba(196, 156, 120, .32);
  background:
    radial-gradient(circle at 82% 20%, rgba(255,255,255,.65) 0 2px, transparent 2.5px),
    radial-gradient(circle at 18% 76%, rgba(255,255,255,.55) 0 2px, transparent 2.5px),
    linear-gradient(180deg, rgba(255, 250, 240, .7), rgba(255, 244, 232, .35));
  overflow: hidden;
}
.profile-quote::before {
  content: "🐾";
  position: absolute;
  right: -7px;
  bottom: -12px;
  font-size: 54px;
  opacity: .06;
  transform: rotate(15deg);
}
.profile-quote p {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.8;
  letter-spacing: .3px;
  color: #ab9281;
}
.quote-spark {
  position: absolute;
  left: 14px;
  top: 12px;
  font-size: 10px;
  color: #ecc28f;
}
.quote-paw { font-size: 15px; opacity: .45; filter: saturate(.5); }

.together-strip {
  margin-top: 13px;
  padding-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 9px;
  color: #a88f80;
  letter-spacing: .1px;
  white-space: nowrap;
}
.together-strip strong { color: #7e6558; font-family: var(--font-round); font-size: 10px; }
.together-strip i { width: 2px; height: 2px; border-radius: 50%; background: #d6c3b4; flex: none; }

/* ---------- room ---------- */
.room {
  position: relative;
  isolation: isolate;
  border-radius: 32px;
  overflow: hidden;
  height: clamp(470px, calc(100vh - 228px), 790px);
  border: 6px solid #fffaf1;
  background: #f7e7d1;
  box-shadow:
    0 26px 52px rgba(139, 96, 65, .17),
    0 3px 8px rgba(139, 96, 65, .06),
    inset 0 0 0 1px rgba(132, 94, 68, .08);
}
.room-wall {
  position: absolute;
  inset: 0;
  background-color: #f6e6d0;
  background-image:
    radial-gradient(circle at 12px 14px, rgba(255,255,255,.42) 0 2px, transparent 2.4px),
    radial-gradient(circle at 29px 31px, rgba(255,255,255,.24) 0 1.5px, transparent 2px),
    linear-gradient(115deg, transparent 46%, rgba(255,255,255,.11) 47% 48%, transparent 49%);
  background-size: 42px 46px, 42px 46px, 140px 140px;
}
.wall-glow {
  position: absolute;
  left: 12%;
  top: 5%;
  width: 78%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 249, 225, .85), transparent 68%);
  pointer-events: none;
  transition: background .8s;
}
.room[data-phase="dusk"] .wall-glow {
  background: radial-gradient(ellipse at 44% 42%, rgba(255, 190, 130, .58), transparent 67%);
}
.room[data-phase="night"] .wall-glow {
  background: radial-gradient(ellipse at 55% 44%, rgba(255, 205, 135, .24), transparent 65%);
}

.baseboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36%;
  height: 13px;
  background: linear-gradient(180deg, #fff8eb, #f2dfc8);
  border-top: 1px solid rgba(147, 105, 74, .12);
  box-shadow: 0 3px 6px rgba(130, 90, 60, .08);
  z-index: 2;
}
.floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36.1%;
  background-color: #e8c69c;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0 116px, rgba(116, 76, 45, .13) 117px 119px),
    repeating-linear-gradient(0deg, transparent 0 57px, rgba(255,255,255,.1) 58px 59px);
  box-shadow: inset 0 8px 18px rgba(119, 78, 48, .07);
  z-index: 1;
}
.floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(113, 74, 45, .09) 100%);
}
.rug {
  position: absolute;
  left: 50%;
  bottom: 3.8%;
  width: 65%;
  height: 25%;
  transform: translateX(-50%) rotate(-1.2deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, #fff8e9 0%, #ffe3ca 48%, #ffd1b5 74%, #f8bfa3 100%);
  border: 3px dashed rgba(255, 255, 255, .7);
  box-shadow: 0 12px 22px rgba(119, 76, 45, .15), inset 0 0 0 7px rgba(255, 249, 235, .42);
  z-index: 2;
}
.rug::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(213, 156, 124, .35);
}

/* ---------- window ---------- */
.window-wrap {
  position: absolute;
  left: 5.4%;
  top: 11.5%;
  width: 35%;
  height: 40%;
  z-index: 2;
}
.window {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 16px 16px;
  border: 9px solid #fff8ec;
  background: #cdeeff;
  box-shadow:
    0 12px 24px rgba(106, 83, 65, .17),
    0 0 0 2px rgba(143, 109, 83, .1),
    inset 0 0 0 2px rgba(120, 90, 65, .15);
  overflow: hidden;
}
.window-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #98d9ff 0%, #d8f1ff 58%, #fff1cf 100%);
  transition: background .9s ease;
  overflow: hidden;
}
.room[data-phase="morning"] .window-sky { background: linear-gradient(180deg, #ffd9a1, #d7eeff 62%, #fff5dd); }
.room[data-phase="dusk"] .window-sky { background: linear-gradient(180deg, #8e7bbd 0%, #f7a17e 55%, #ffd09a 100%); }
.room[data-phase="night"] .window-sky { background: linear-gradient(180deg, #1f2a54 0%, #354574 56%, #6f6e97 100%); }
.sun {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fffbe3, #ffdd75 48%, #ffc14d 100%);
  box-shadow: 0 0 30px 12px rgba(255, 217, 112, .52);
  left: 67%;
  top: 20%;
  transition: all .9s ease;
}
.room[data-phase="morning"] .sun { left: 19%; top: 45%; width: 36px; height: 36px; }
.room[data-phase="day"] .sun { left: 63%; top: 16%; }
.room[data-phase="dusk"] .sun { left: 69%; top: 43%; width: 48px; height: 48px; background: radial-gradient(circle at 38% 35%, #fff2b6, #ffa75e 55%, #f47a56); box-shadow: 0 0 32px 14px rgba(255, 149, 92, .45); }
.room[data-phase="night"] .sun { opacity: 0; left: 20%; top: 58%; }
.moon {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  left: 62%;
  top: 18%;
  background: radial-gradient(circle at 36% 34%, #fffbe7, #ffe8a9 55%, #f5cd78);
  box-shadow: 0 0 22px 8px rgba(255, 235, 170, .4);
  opacity: 0;
  transition: opacity .9s ease;
}
.moon::before, .moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(208, 170, 93, .28);
}
.moon::before { width: 8px; height: 8px; left: 8px; top: 17px; }
.moon::after { width: 5px; height: 5px; right: 9px; top: 9px; }
.room[data-phase="night"] .moon { opacity: 1; }
.cloud {
  position: absolute;
  height: 13px;
  border-radius: 99px;
  background: rgba(255,255,255,.84);
  filter: blur(.2px);
  transition: background .9s;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.cloud::before { width: 18px; height: 18px; left: 9px; top: -8px; }
.cloud::after { width: 13px; height: 13px; right: 9px; top: -5px; }
.cloud-a { width: 48px; left: 8%; top: 27%; animation: cloudDrift 15s ease-in-out infinite alternate; }
.cloud-b { width: 38px; right: 9%; top: 51%; opacity: .75; animation: cloudDrift 19s ease-in-out infinite alternate-reverse; }
.room[data-phase="night"] .cloud { background: rgba(133, 146, 184, .42); }
@keyframes cloudDrift { from { transform: translateX(-4px); } to { transform: translateX(9px); } }
.stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.room[data-phase="night"] .stars { opacity: 1; }
.stars i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff7ce;
  box-shadow: 0 0 6px 2px rgba(255, 245, 185, .55);
  animation: twinkle 2.6s ease-in-out infinite;
}
.stars i:nth-child(1) { left: 14%; top: 18%; animation-delay: -.2s; }
.stars i:nth-child(2) { left: 31%; top: 9%; width: 2px; height: 2px; animation-delay: -1.1s; }
.stars i:nth-child(3) { left: 47%; top: 25%; animation-delay: -2s; }
.stars i:nth-child(4) { left: 76%; top: 11%; width: 2px; height: 2px; animation-delay: -.6s; }
.stars i:nth-child(5) { left: 86%; top: 31%; animation-delay: -1.7s; }
.stars i:nth-child(6) { left: 22%; top: 36%; width: 2px; height: 2px; animation-delay: -1.3s; }
@keyframes twinkle { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.far-hills {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 42%;
  background: #b5d9b7;
  clip-path: polygon(0 64%, 12% 45%, 25% 58%, 38% 32%, 52% 54%, 67% 37%, 82% 57%, 100% 39%, 100% 100%, 0 100%);
  opacity: .75;
  transition: filter .9s;
}
.near-hills {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 28%;
  background: #8dc39f;
  clip-path: polygon(0 62%, 16% 37%, 33% 64%, 49% 43%, 67% 68%, 84% 42%, 100% 61%, 100% 100%, 0 100%);
}
.room[data-phase="dusk"] .far-hills { filter: hue-rotate(-18deg) brightness(.86); }
.room[data-phase="night"] .far-hills { filter: brightness(.32) saturate(.7); }
.room[data-phase="night"] .near-hills { filter: brightness(.28) saturate(.6); }
.window-shine {
  position: absolute;
  left: -30%;
  top: -10%;
  width: 70%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  transform: rotate(18deg);
  pointer-events: none;
}
.window-cross {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.window-cross::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 7px;
  transform: translateX(-50%);
  background: #fff8ec;
  box-shadow: 0 0 0 1px rgba(132, 96, 69, .09), 0 0 8px rgba(107, 75, 49, .08);
}
.window-cross::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 45%;
  height: 7px;
  background: #fff8ec;
  box-shadow: 0 0 0 1px rgba(132, 96, 69, .09);
}
.window-sill {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -13px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff9ee, #edd8bf);
  box-shadow: 0 5px 8px rgba(110, 77, 51, .14);
  z-index: 5;
}
.curtain {
  position: absolute;
  top: -6%;
  width: 23%;
  height: 116%;
  z-index: 4;
  border-radius: 46% 46% 20% 20% / 14% 14% 30% 30%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.19) 0 4px, transparent 4px 13px),
    linear-gradient(180deg, #ffc9c0, #ffb5b0);
  box-shadow: inset 0 0 12px rgba(165, 91, 86, .15), 4px 8px 14px rgba(118, 75, 52, .12);
  pointer-events: none;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 48%;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 238, 222, .8);
  box-shadow: 0 2px 5px rgba(147, 91, 77, .15);
}
.curtain-left { left: -3%; clip-path: polygon(0 0, 100% 0, 77% 50%, 96% 100%, 0 100%); }
.curtain-right { right: -3%; clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%, 23% 50%); }

.window-hit {
  position: absolute;
  left: 4.3%;
  top: 10.5%;
  width: 37.5%;
  height: 42.5%;
  z-index: 5;
  border: 0;
  padding: 0;
  border-radius: 22px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.window-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 2px dashed transparent;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: border-color .25s, box-shadow .25s;
}
.window-hit:hover::after,
.window-hit:focus-visible::after {
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 6px rgba(255, 239, 196, .13);
}
.room.cat-window .window-hit:hover::after,
.room.cat-window .window-hit:focus-visible::after {
  border-color: transparent;
  box-shadow: none;
}
.window-hint {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 1;
  transform: translate(-50%, 4px);
  opacity: .56;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 252, 245, .9);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 4px 10px rgba(109, 74, 49, .12);
  color: #94765f;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.window-hit:hover .window-hint,
.window-hit:focus-visible .window-hint {
  opacity: 1;
  transform: translate(-50%, 0);
}
.room.cat-window .window-hint { opacity: 0; }
.room.cat-window .window {
  box-shadow:
    0 12px 24px rgba(106, 83, 65, .17),
    0 0 0 2px rgba(143, 109, 83, .1),
    0 0 26px rgba(255, 245, 204, .34),
    inset 0 0 0 2px rgba(120, 90, 65, .15);
}
.room.cat-window .window-shine { opacity: 1; }

/* ---------- shelf, frame, lights ---------- */
.fairy-lights {
  position: absolute;
  left: 3.5%;
  top: 4px;
  width: 93%;
  height: 54px;
  z-index: 6;
  pointer-events: none;
}
.fairy-lights::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  height: 34px;
  border-top: 2px solid rgba(124, 88, 62, .24);
  border-radius: 50%;
  transform: rotate(1deg);
}
.fairy-lights span {
  position: absolute;
  width: 8px;
  height: 11px;
  border-radius: 50% 50% 45% 45%;
  background: #ffe5a8;
  box-shadow: 0 0 7px rgba(255, 220, 140, .55);
  animation: bulbGlow 3s ease-in-out infinite;
}
.fairy-lights span:nth-child(1) { left: 4%; top: 23px; animation-delay: -.2s; }
.fairy-lights span:nth-child(2) { left: 17%; top: 32px; animation-delay: -1.3s; }
.fairy-lights span:nth-child(3) { left: 30%; top: 27px; animation-delay: -.7s; }
.fairy-lights span:nth-child(4) { left: 43%; top: 34px; animation-delay: -2.1s; }
.fairy-lights span:nth-child(5) { left: 56%; top: 31px; animation-delay: -1.6s; }
.fairy-lights span:nth-child(6) { left: 69%; top: 25px; animation-delay: -.4s; }
.fairy-lights span:nth-child(7) { left: 82%; top: 29px; animation-delay: -2.4s; }
.fairy-lights span:nth-child(8) { left: 94%; top: 21px; animation-delay: -1s; }
@keyframes bulbGlow { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
.room[data-phase="dusk"] .fairy-lights span { box-shadow: 0 0 12px rgba(255, 211, 112, .9); }
.room[data-phase="night"] .fairy-lights span { box-shadow: 0 0 16px 4px rgba(255, 206, 104, .78); }
.room[data-phase="night"] .fairy-lights::before { border-color: rgba(255, 232, 180, .2); }

.shelf {
  position: absolute;
  right: 5.2%;
  top: 12.5%;
  width: 29%;
  z-index: 3;
  filter: drop-shadow(0 5px 6px rgba(115, 78, 50, .12));
}
.shelf-board {
  position: relative;
  height: 66px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 0 7px 9px;
  border-bottom: 9px solid #d5a97f;
  margin-bottom: 17px;
}
.shelf-board::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: #b98861;
}
.board-bottom { height: 58px; margin-bottom: 0; }
.book { display: block; width: 13px; border-radius: 3px 3px 1px 1px; box-shadow: inset -2px 0 rgba(0,0,0,.08); }
.book-a { height: 41px; background: #ee9e8c; transform: rotate(-3deg); }
.book-b { height: 35px; background: #93c7b2; width: 11px; }
.book-c { height: 46px; background: #f4c878; width: 12px; transform: rotate(2deg); }
.shelf-plant { position: relative; width: 38px; height: 52px; margin-left: auto; }
.leaf {
  position: absolute;
  width: 16px;
  height: 23px;
  border-radius: 60% 10% 60% 10%;
  background: linear-gradient(135deg, #93c595, #5e9b76);
  bottom: 19px;
  left: 11px;
  transform-origin: bottom center;
}
.leaf-a { transform: rotate(-32deg) translate(-5px, -2px); }
.leaf-b { transform: rotate(28deg) translate(6px, -4px); }
.leaf-c { transform: rotate(2deg) translateY(-8px); background: linear-gradient(135deg, #b1d59d, #73a97d); }
.shelf-plant .pot {
  position: absolute;
  bottom: 0;
  left: 8px;
  width: 22px;
  height: 19px;
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #f0aa86, #dc8c69);
  box-shadow: inset 0 3px rgba(255,255,255,.25);
}
.book-hit {
  position: absolute;
  left: -2%;
  top: -8px;
  width: 38%;
  height: 88px;
  z-index: 4;
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.book-hint {
  position: absolute;
  left: 0;
  top: -18px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff9ee;
  border: 1px solid #efd3b7;
  box-shadow: 0 3px 0 rgba(218, 180, 144, .33), 0 5px 10px rgba(109, 74, 49, .12);
  color: #94765f;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  opacity: .94;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.book-hit:hover .book-hint,
.book-hit:focus-visible .book-hint {
  opacity: 1;
  transform: translateY(-2px);
}
.plant-hit {
  position: absolute;
  right: -2%;
  top: -8px;
  width: 35%;
  height: 88px;
  z-index: 4;
  border: 0;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.plant-hint {
  position: absolute;
  right: 0;
  top: -18px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff9ee;
  border: 1px solid #efd3b7;
  box-shadow: 0 3px 0 rgba(218, 180, 144, .33), 0 5px 10px rgba(109, 74, 49, .12);
  color: #94765f;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  opacity: .94;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.plant-hit:hover .plant-hint,
.plant-hit:focus-visible .plant-hint {
  opacity: 1;
  transform: translateY(-2px);
}
.room.cat-plant .plant-hint { opacity: 0; }
.room.cat-plant .shelf-plant {
  animation: plantWiggle .72s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes plantWiggle {
  0%, 100% { transform: rotate(-2deg); }
  35% { transform: rotate(4deg) translateY(-1px); }
  70% { transform: rotate(-3deg); }
}
.frame {
  width: 39px;
  height: 44px;
  border-radius: 4px;
  background: #fff9ed;
  border: 4px solid #e2b98e;
  display: grid;
  place-items: center;
  transform: rotate(-2deg);
  box-shadow: 0 3px 5px rgba(107, 73, 47, .12);
}
.frame-paw { font-size: 16px; filter: saturate(.6); }
.jar {
  position: relative;
  width: 30px;
  height: 34px;
  border-radius: 6px 6px 9px 9px;
  background: rgba(255, 250, 235, .56);
  border: 2px solid rgba(255, 250, 235, .8);
  box-shadow: inset 0 0 0 1px rgba(139, 103, 74, .12), 0 3px 5px rgba(107, 73, 47, .08);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.jar::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -5px;
  height: 6px;
  border-radius: 3px;
  background: #e5bd91;
}
.jar i { display: block; width: 6px; height: 6px; border-radius: 50%; margin-bottom: 5px; background: #ffbf9b; }
.jar i:nth-child(2) { background: #ffd889; }
.jar i:nth-child(3) { background: #b9dfc7; }
.tiny-cat { font-size: 20px; margin-bottom: 2px; filter: saturate(.65); }
.wall-frame {
  position: absolute;
  left: 43%;
  top: 10.5%;
  width: 13.5%;
  min-width: 66px;
  max-width: 112px;
  aspect-ratio: .9;
  padding: 0;
  background: #fffaf0;
  border: 5px solid #e4c29f;
  border-radius: 6px;
  box-shadow: 0 5px 9px rgba(112, 77, 51, .13);
  transform: rotate(2deg);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a7836d;
  font-family: "Segoe Script", "Comic Sans MS", var(--font-round);
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s, box-shadow .2s;
}
.wall-frame:hover,
.wall-frame:focus-visible {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 8px 14px rgba(112, 77, 51, .18);
}
.wall-frame:focus-visible {
  outline: 3px dashed rgba(255, 154, 131, .72);
  outline-offset: 4px;
}
.frame-meow {
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: .4px;
  transform: rotate(-2deg);
}
.wall-frame > i {
  font-style: normal;
  color: #eaa39b;
  font-size: 13px;
  margin-top: 4px;
}
.frame-hint {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff9ee;
  border: 1px solid #efd3b7;
  box-shadow: 0 3px 0 rgba(218, 180, 144, .32), 0 5px 9px rgba(109, 74, 49, .11);
  color: #94765f;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1px;
  white-space: nowrap;
  opacity: .92;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.wall-frame:hover .frame-hint,
.wall-frame:focus-visible .frame-hint {
  opacity: 1;
  transform: translate(-50%, -2px);
}
.wall-frame.has-photo {
  padding: 3px;
  justify-content: flex-start;
  background: #fffdf8;
  border-color: #e4c29f;
  overflow: visible;
}
.wall-frame.has-photo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 34px;
  height: 12px;
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 2px;
  background: rgba(255, 224, 187, .86);
  border: 1px solid rgba(255, 245, 226, .7);
  box-shadow: 0 2px 3px rgba(121, 82, 55, .1);
  z-index: 3;
}
.frame-photo {
  width: 100%;
  height: 100%;
  padding: 3px 3px 2px;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  background: #fffdf8;
}
.frame-photo-cat {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 22%, #ffe58c 0 10%, transparent 10.6%),
    linear-gradient(165deg, #fff2d9 0%, #ffe3d2 55%, #ffd2c9 100%);
}
.frame-photo-cat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: rgba(255, 248, 231, .38);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  pointer-events: none;
}
.frame-avatar {
  position: absolute !important;
  left: 50% !important;
  top: 54% !important;
  width: 76px !important;
  height: 74px !important;
  transform: translate(-50%, -50%) scale(.82) !important;
  z-index: 1;
}
.photo-spot {
  position: absolute;
  left: 3px;
  top: 2px;
  z-index: 2;
  font-size: 9px;
  filter: drop-shadow(0 1px 1px rgba(109, 74, 49, .15));
}
.frame-caption {
  flex: none;
  padding-top: 2px;
  font-family: var(--font-round);
  font-size: 6.5px;
  line-height: 1.1;
  letter-spacing: .15px;
  color: #a48672;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-frame.just-photo { animation: framePop .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes framePop {
  0% { transform: rotate(2deg) scale(1); }
  42% { transform: rotate(-2deg) scale(1.08); }
  100% { transform: rotate(2deg) scale(1); }
}
.camera-flash {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.camera-flash.flash { animation: cameraFlash .5s ease-out; }
@keyframes cameraFlash {
  0% { opacity: 0; }
  8% { opacity: .92; }
  100% { opacity: 0; }
}
.cat-wrap.photo-pose .cat-svg {
  animation: photoPose .62s cubic-bezier(.2,1.4,.4,1);
}
@keyframes photoPose {
  0% { transform: translateY(0) rotate(0); }
  32% { transform: translateY(-7px) rotate(-1.5deg); }
  64% { transform: translateY(1px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* ---------- cat tree & bed ---------- */
.cat-tree {
  position: absolute;
  right: 3%;
  bottom: 12%;
  width: 17%;
  height: 46%;
  min-width: 92px;
  max-width: 130px;
  z-index: 2;
  filter: drop-shadow(0 8px 10px rgba(100, 68, 44, .14));
}
.tree-post {
  position: absolute;
  width: 14px;
  border-radius: 99px;
  background: repeating-linear-gradient(45deg, #e2c49f 0 5px, #d0ab82 5px 10px);
  box-shadow: inset -3px 0 rgba(111, 77, 50, .12);
}
.post-bottom { left: 48%; bottom: 5%; height: 68%; }
.post-top { left: 22%; bottom: 44%; height: 29%; }
.tree-platform {
  position: absolute;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6d6b0, #d7ab80);
  border: 1px solid #c99a70;
  box-shadow: 0 4px 5px rgba(113, 77, 49, .15);
}
.platform-bottom { left: 32%; bottom: 3%; width: 62%; }
.platform-top { left: 8%; bottom: 62%; width: 52%; }
.tree-house {
  position: absolute;
  left: 54%;
  bottom: 52%;
  width: 42%;
  aspect-ratio: 1 / 1.02;
  border-radius: 44% 44% 22% 22%;
  background: linear-gradient(145deg, #fbe4c6, #ecc39b);
  border: 1px solid #d5a87c;
  box-shadow: inset 0 4px 6px rgba(255,255,255,.3), 0 5px 8px rgba(107, 72, 44, .13);
}
.tree-house::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44%;
  height: 58%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 30%, #b5855f, #8f6344);
  box-shadow: inset 0 3px 5px rgba(73, 45, 28, .3);
}
.tree-ball {
  position: absolute;
  left: 6%;
  top: 16%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc4cd, #f58f9d);
  box-shadow: 0 4px 6px rgba(112, 75, 48, .16);
  animation: ballSway 3.6s ease-in-out infinite;
  transform-origin: top center;
}
.tree-ball::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1.5px;
  height: 32px;
  background: rgba(125, 90, 62, .5);
  transform: translateX(-50%);
}
@keyframes ballSway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

.cat-tree-hit {
  position: absolute;
  right: 1.5%;
  bottom: 9.5%;
  width: 21%;
  min-width: 96px;
  height: 50%;
  z-index: 5;
  border: 0;
  padding: 0;
  border-radius: 22px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat-tree-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 2px dashed transparent;
  transition: border-color .25s, box-shadow .25s;
}
.cat-tree-hit:hover::after,
.cat-tree-hit:focus-visible::after {
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 6px rgba(255, 239, 196, .12);
}
.room.cat-tree-time .cat-tree-hit:hover::after,
.room.cat-tree-time .cat-tree-hit:focus-visible::after {
  border-color: transparent;
  box-shadow: none;
}
.cat-tree-hint {
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: 1;
  transform: translate(-50%, 2px);
  opacity: .94;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff9ee;
  border: 1px solid #efd3b7;
  box-shadow: 0 4px 0 rgba(218, 180, 144, .38), 0 6px 12px rgba(109, 74, 49, .14);
  color: #997152;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}
.cat-tree-hit:hover .cat-tree-hint,
.cat-tree-hit:focus-visible .cat-tree-hint {
  opacity: 1;
  transform: translate(-50%, -2px);
}
.cat-tree-hit.locked .cat-tree-hint {
  background: #fff0dc;
  border-color: #f0c79b;
  color: #b57746;
}
.cat-tree.locked {
  filter: grayscale(.32) opacity(.76);
}
.room.cat-tree-time .cat-tree-hint { opacity: 0; }
.room.cat-tree-time .cat-tree {
  filter: drop-shadow(0 10px 13px rgba(100, 68, 44, .18)) drop-shadow(0 0 12px rgba(255, 223, 160, .38));
}

.room.bed-cloud .cat-cushion {
  width: 46%;
  height: 18%;
  bottom: 4%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 66%, #fffefb 0%, #faf6ff 55%, #eadff7 100%);
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 12px 24px rgba(103, 82, 143, .2), inset 0 8px 16px rgba(255,255,255,.75);
}
.room.bed-cloud .cat-cushion::after { display: none; }
.room.bed-cloud .cushion-tassel { display: none; }
.cloud-puff {
  display: none;
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(239, 228, 252, .92);
  background: radial-gradient(circle at 38% 30%, #fffefb 0%, #fffaf8 62%, #f3e9ff 100%);
  box-shadow: inset 0 -5px 7px rgba(168, 143, 207, .16), 0 3px 7px rgba(113, 86, 145, .09);
}
.room.bed-cloud .cloud-puff { display: block; }
.puff-a { width: 25%; height: 55%; left: 1%; top: 22%; }
.puff-b { width: 29%; height: 72%; left: 22%; top: -18%; }
.puff-c { width: 30%; height: 68%; right: 21%; top: -15%; }
.puff-d { width: 25%; height: 54%; right: 0; top: 24%; }

/* ---------- cat zone, speech, cushion ---------- */
.cat-zone {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.cat-cushion {
  position: absolute;
  left: 50%;
  bottom: 6.5%;
  width: 42%;
  max-width: 290px;
  height: 15%;
  transform: translateX(-50%) rotate(-1deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 36%, #ffe8e5 0%, #ffcfd1 46%, #ffb8bd 74%, #f49da8 100%);
  border: 2px solid rgba(255, 246, 238, .8);
  box-shadow: 0 12px 22px rgba(135, 76, 70, .18), inset 0 6px 12px rgba(255,255,255,.55);
  z-index: 2;
}
.cat-cushion::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 250, 240, .65);
}
.cushion-tassel {
  position: absolute;
  bottom: -9px;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: #ffc3c2;
  box-shadow: 0 2px 3px rgba(137, 77, 70, .12);
}
.tassel-a { left: 14%; transform: rotate(8deg); }
.tassel-b { right: 14%; transform: rotate(-8deg); }

.cat-wrap {
  position: absolute;
  left: 50%;
  bottom: 3.2%;
  width: min(49%, 330px);
  transform: translateX(-50%) scale(var(--cat-scale, 1));
  transform-origin: 50% 100%;
  z-index: 4;
  pointer-events: auto;
  cursor: pointer;
  transition:
    left .72s cubic-bezier(.35, .05, .2, 1),
    bottom .72s cubic-bezier(.35, .05, .2, 1),
    transform .72s cubic-bezier(.35, .05, .2, 1),
    filter .3s;
  border-radius: 42% 42% 36% 36%;
}
.cat-wrap:focus-visible {
  outline: 3px dashed rgba(255, 154, 131, .72);
  outline-offset: 6px;
}
.cat-wrap.looking {
  left: 23%;
  bottom: 45%;
  transform: translateX(-50%) scale(.4);
  z-index: 6;
}
.cat-wrap.looking .cat-head {
  animation: lookOutside 3.4s ease-in-out infinite;
}
.cat-wrap.climbing {
  left: 85.8%;
  bottom: 38%;
  transform: translateX(-50%) scale(.32);
  z-index: 6;
}
.cat-wrap.plant-play {
  left: 84.5%;
  bottom: 63%;
  transform: translateX(-50%) scale(.3);
  z-index: 6;
}
.cat-wrap.plant-play .cat-head {
  animation: plantLook 2.4s ease-in-out infinite;
}
.cat-wrap.plant-play .front-leg.leg-right {
  transform-box: view-box;
  transform-origin: 198px 258px;
  animation: pawSwipe .9s ease-in-out infinite;
}
@keyframes plantLook {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}
@keyframes pawSwipe {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-9deg) translateY(-2px); }
}
/* From the window we see the cat from behind: hide the face and front paws. */
.cat-wrap.looking .eyes,
.cat-wrap.looking .eyes-closed,
.cat-wrap.looking .muzzle,
.cat-wrap.looking .nose,
.cat-wrap.looking .mouth,
.cat-wrap.looking .whiskers,
.cat-wrap.looking .blush,
.cat-wrap.looking .bell,
.cat-wrap.looking .bell-clapper,
.cat-wrap.looking .acc,
.cat-wrap.looking .belly-patch,
.cat-wrap.looking .front-leg,
.cat-wrap.looking .paws {
  display: none !important;
}
.cat-wrap.looking .ears > path:nth-child(2),
.cat-wrap.looking .ears > path:nth-child(4) {
  display: none;
}
.cat-wrap.walking .cat-svg {
  animation: catWalk .26s ease-in-out 3;
}
@keyframes lookOutside {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(1.5deg); }
}
@keyframes catWalk {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-1deg); }
}
.cat-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: catBreathe 4.2s ease-in-out infinite;
  --eye-x: 0px;
  --eye-y: 0px;
  --outline: #5e4438;
  --fur: #f3b56d;
  --fur-light: #ffd9a5;
  --fur-dark: #dc9047;
  --belly: #fff2df;
  --patch-dark: #6b5a51;
  --patch-orange: #e99a54;
  --ear-inner: #ffc4c1;
  --eye: #4a3630;
  --nose: #e88989;
  --mouth: #815d4f;
  --whisker: #8d6a56;
}
.cat-svg .eye { transform: translate(var(--eye-x), var(--eye-y)); transition: transform .18s ease-out; }
.cat-svg .eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: eyeBlink 6.2s infinite;
}
.cat-svg .eyes-closed { display: none; }
.cat-svg .tail {
  transform-box: view-box;
  transform-origin: 238px 318px;
  animation: tailSway 3.4s ease-in-out infinite;
}
.cat-svg .cat-head {
  transform-box: view-box;
  transform-origin: 170px 215px;
  animation: headTilt 6.3s ease-in-out infinite;
}
.cat-svg .mark-dark, .cat-svg .mark-orange, .cat-svg .tabby { display: none; }
.cat-svg .mark-dark { fill: var(--patch-dark); }
.cat-svg .mark-orange { fill: var(--patch-orange); }
.cat-svg .tabby path {
  fill: none;
  stroke: var(--fur-dark);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .4;
}
.cat-svg.coat-cow .mark-dark { display: block; }
.cat-svg.coat-calico .mark-dark,
.cat-svg.coat-calico .mark-orange { display: block; }
.cat-svg.coat-orange .tabby { display: block; }
.cat-svg.coat-blue .tabby { display: block; opacity: .35; }
.cat-svg.coat-blue .tabby path { opacity: .22; }

.acc { display: none; }
.cat-svg[data-acc="bow"] .acc-bow,
.cat-svg[data-acc="mintbow"] .acc-bow { display: block; }
.cat-svg[data-acc="flower"] .acc-flower { display: block; }
.cat-svg[data-acc="scarf"] .acc-scarf,
.cat-svg[data-acc="nightscarf"] .acc-scarf { display: block; }
.cat-svg[data-acc="glasses"] .acc-glasses,
.cat-svg[data-acc="honeyglasses"] .acc-glasses { display: block; }
.cat-svg[data-acc="crown"] .acc-crown { display: block; }
.cat-svg .acc-bow path,
.cat-svg .acc-bow circle:first-of-type,
.cat-svg .acc-scarf > path:nth-child(1),
.cat-svg .acc-scarf > path:nth-child(2),
.cat-svg .acc-crown > path:first-of-type {
  stroke: var(--outline);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.cat-svg .acc-flower .flower circle:first-child {
  stroke: var(--outline);
  stroke-width: 1.8;
}
.cat-svg .acc-glasses circle,
.cat-svg .acc-glasses > path:not(:last-child) {
  stroke: var(--outline);
}
.cat-svg[data-acc="mintbow"] .acc-bow path:nth-child(1),
.cat-svg[data-acc="mintbow"] .acc-bow path:nth-child(2) { fill: #a9dcc5; }
.cat-svg[data-acc="mintbow"] .acc-bow path:nth-child(3) { fill: #c9efdd; }
.cat-svg[data-acc="mintbow"] .acc-bow circle:first-of-type { fill: #78c7aa; }
.cat-svg[data-acc="nightscarf"] .acc-scarf > path:nth-child(1) { fill: #7184c9; }
.cat-svg[data-acc="nightscarf"] .acc-scarf > path:nth-child(2) { fill: #5d6fb4; }
.cat-svg[data-acc="nightscarf"] .acc-scarf > path:nth-child(3) { stroke: #d1dcff; }
.cat-svg[data-acc="nightscarf"] .acc-scarf > path:nth-child(4) { stroke: #4b5b9e; }
.cat-svg[data-acc="honeyglasses"] .acc-glasses circle {
  fill: rgba(255, 231, 166, .16);
  stroke: #c9973d;
}
.cat-svg[data-acc="honeyglasses"] .acc-glasses > path:not(:last-child) { stroke: #c9973d; }

.cat-wrap.mood-low .mouth-happy { display: none; }
.cat-wrap.mood-low .mouth-sad { display: block; }
.cat-wrap .mouth-sad { display: none; }
.cat-wrap.sleeping .eyes { display: none; }
.cat-wrap.sleeping .eyes-closed { display: block; }
.cat-wrap.sleeping .cat-svg {
  animation: sleepyBreathe 5s ease-in-out infinite;
}
.cat-wrap.sleeping .cat-head { animation: none; transform: rotate(2deg); }
.cat-wrap.sleeping .tail { animation: none; transform: rotate(4deg); }
.cat-wrap.sleeping .zzz { display: block; }
.cat-wrap.petting .cat-svg { animation: catJoy .55s cubic-bezier(.25,1.6,.5,1); }
.cat-wrap.eating .cat-head { animation: catChew .28s ease-in-out 6; }
.cat-wrap.bathing .cat-svg { animation: catShiver .22s linear 7; }
.cat-wrap.jumping .cat-svg { animation: catPounce .55s cubic-bezier(.2,1.3,.4,1); }

@keyframes catBreathe {
  0%,100% { transform: scaleY(1) scaleX(1); }
  50% { transform: scaleY(1.012) scaleX(1.004); }
}
@keyframes sleepyBreathe {
  0%,100% { transform: scaleY(1) scaleX(1) translateY(0); }
  50% { transform: scaleY(1.02) scaleX(1.005) translateY(1px); }
}
@keyframes tailSway {
  0%,100% { transform: rotate(0deg); }
  50% { transform: rotate(5deg); }
}
@keyframes headTilt {
  0%,100% { transform: rotate(-.8deg); }
  50% { transform: rotate(1.2deg); }
}
@keyframes eyeBlink {
  0%, 91%, 100% { transform: scaleY(1); }
  93%, 95% { transform: scaleY(.08); }
}
@keyframes catJoy {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-10px) scale(1.025, .98); }
  65% { transform: translateY(1px) scale(.99, 1.015); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes catChew {
  0%,100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(2px) rotate(1.5deg); }
}
@keyframes catShiver {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}
@keyframes catPounce {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-18px) scale(1.01, .98); }
  64% { transform: translateY(2px) scale(.99, 1.02); }
  100% { transform: translateY(0) scale(1); }
}

.zzz {
  display: none;
  position: absolute;
  right: -8%;
  top: 4%;
  z-index: 8;
  color: #8e84bc;
  font-family: var(--font-round);
  pointer-events: none;
}
.zzz span {
  position: absolute;
  animation: zFloat 2.8s ease-in-out infinite;
  opacity: 0;
}
.zzz span:nth-child(1) { font-size: 15px; left: 0; animation-delay: -.3s; }
.zzz span:nth-child(2) { font-size: 21px; left: 18px; top: -22px; animation-delay: -.9s; }
.zzz span:nth-child(3) { font-size: 27px; left: 42px; top: -52px; animation-delay: -1.5s; }
@keyframes zFloat {
  0% { opacity: 0; transform: translate(0, 8px) scale(.8); }
  25% { opacity: .9; }
  75% { opacity: .55; }
  100% { opacity: 0; transform: translate(12px, -26px) scale(1.12); }
}

.speech {
  position: absolute;
  left: 59%;
  top: 30.5%;
  z-index: 15;
  max-width: min(220px, 34%);
  padding: 10px 14px;
  border-radius: 18px 18px 18px 5px;
  background: rgba(255, 253, 247, .96);
  border: 2px solid #f1dcc7;
  box-shadow: 0 8px 18px rgba(128, 91, 64, .14), inset 0 1px rgba(255,255,255,.8);
  font-size: 12.5px;
  line-height: 1.45;
  color: #755c4e;
  opacity: 0;
  transform: translate(-10px, 8px) scale(.92);
  transform-origin: bottom left;
  transition:
    left .62s cubic-bezier(.35, .05, .2, 1),
    top .62s cubic-bezier(.35, .05, .2, 1),
    opacity .28s,
    transform .28s cubic-bezier(.2,1.3,.4,1);
  pointer-events: none;
}
.speech.show { opacity: 1; transform: translate(0, 0) scale(1); }
.cat-zone.looking .speech {
  left: 17%;
  top: 19%;
  max-width: 36%;
}
.cat-zone.climbing .speech {
  left: 64%;
  top: 33%;
  max-width: 30%;
}
.cat-zone.climbing .speech i {
  left: auto;
  right: 16px;
}
.cat-zone.plant-play .speech {
  left: 52%;
  top: 9%;
  max-width: 33%;
}
.cat-zone.plant-play .speech i {
  left: auto;
  right: 16px;
}
.speech i {
  position: absolute;
  left: 18px;
  bottom: -10px;
  width: 17px;
  height: 17px;
  background: #fffdf7;
  border-right: 2px solid #f1dcc7;
  border-bottom: 2px solid #f1dcc7;
  transform: rotate(45deg);
  border-radius: 0 0 4px 0;
}
.room.sleeping .speech { opacity: 0 !important; }

.food-bowl {
  position: absolute;
  left: 24%;
  bottom: 8%;
  width: clamp(48px, 7.3vw, 72px);
  z-index: 6;
  opacity: 0;
  transform: translateY(10px) scale(.8);
  transition: opacity .25s, transform .35s cubic-bezier(.2,1.5,.4,1);
  pointer-events: none;
}
.food-bowl.show { opacity: 1; transform: translateY(0) scale(1); }
.food-bowl::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -5px;
  height: 13px;
  border-radius: 50%;
  background: rgba(100, 67, 45, .14);
  filter: blur(3px);
}
.food-bowl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  border-radius: 14% 14% 50% 50% / 24% 24% 80% 80%;
  background: linear-gradient(180deg, #fffdf7, #ffe1d4);
  border: 2px solid #fff8ed;
  box-shadow: inset 0 -5px 8px rgba(214, 132, 112, .16), 0 4px 8px rgba(110, 73, 48, .15);
}
.bowl-fish {
  position: absolute;
  left: 50%;
  bottom: 38%;
  z-index: 2;
  transform: translateX(-50%);
  font-size: clamp(17px, 2.4vw, 24px);
  filter: drop-shadow(0 2px 1px rgba(100, 60, 30, .18));
}
.yarn-ball {
  position: absolute;
  right: 19%;
  bottom: 8.5%;
  z-index: 5;
  font-size: clamp(26px, 4.2vw, 40px);
  filter: drop-shadow(0 5px 4px rgba(105, 70, 45, .16));
  transform: rotate(-8deg);
  pointer-events: none;
}
.room.sleeping .yarn-ball { opacity: .45; }

.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: hidden;
}
.fx {
  position: absolute;
  font-size: 22px;
  line-height: 1;
  animation: fxFloat 1.35s cubic-bezier(.2,.7,.3,1) forwards;
  filter: drop-shadow(0 2px 2px rgba(110, 70, 45, .12));
  will-change: transform, opacity;
}
.fx.coin { font-size: 18px; }
.fx.text {
  font-family: var(--font-round);
  font-size: 16px;
  color: #ff8e79;
  text-shadow: 0 2px 0 #fff;
}
.fx.bubble {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(173, 226, 255, .32) 60%, rgba(132, 201, 243, .18));
  border: 1.5px solid rgba(255,255,255,.75);
  box-shadow: inset -2px -2px 4px rgba(107,177,214,.16);
  animation-name: bubbleFloat;
  animation-duration: 2s;
}
.fx.heart { font-size: 25px; }
.fx.sparkle { font-size: 18px; }
.fx.crumb { font-size: 13px; }
@keyframes fxFloat {
  0% { opacity: 0; transform: translate(0, 6px) scale(.4) rotate(-8deg); }
  18% { opacity: 1; transform: translate(0, -4px) scale(1.06) rotate(4deg); }
  100% { opacity: 0; transform: translate(var(--fx-x, 10px), -105px) scale(.86) rotate(18deg); }
}
@keyframes bubbleFloat {
  0% { opacity: 0; transform: translate(0, 10px) scale(.3); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--fx-x, 18px), -130px) scale(1.2); }
}

.room-ambient {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  transition: background 1s ease, backdrop-filter .6s;
}
.room[data-phase="dusk"] .room-ambient {
  background: linear-gradient(180deg, rgba(255, 146, 94, .1), rgba(255, 176, 115, .2));
  mix-blend-mode: multiply;
}
.room[data-phase="night"] .room-ambient {
  background: linear-gradient(180deg, rgba(35, 42, 88, .28), rgba(40, 33, 74, .36));
  mix-blend-mode: multiply;
}
.room.sleeping .room-ambient {
  background: linear-gradient(180deg, rgba(33, 37, 78, .4), rgba(44, 34, 72, .48));
  mix-blend-mode: multiply;
}
.room.sleeping .cat-wrap { filter: saturate(.88) brightness(.93); }
.room.sleeping .speech { opacity: 0 !important; }

.room-label {
  position: absolute;
  left: 17px;
  bottom: 14px;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(255, 252, 244, .62);
  border: 1px solid rgba(255,255,255,.6);
  color: rgba(105, 77, 58, .65);
  font-size: 9.5px;
  letter-spacing: .3px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity .25s;
}
.room-label span { font-size: 10px; }
.room.minigame-on .room-label { opacity: 0; }

.level-banner {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 36;
  transform: translate(-50%, -15px) scale(.9);
  opacity: 0;
  transition: opacity .3s, transform .4s cubic-bezier(.2,1.5,.4,1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7d6, #ffe4ac);
  border: 2px solid #fff9e9;
  box-shadow: 0 12px 26px rgba(152, 105, 36, .2), inset 0 0 0 1px rgba(241,197,95,.25);
  pointer-events: none;
}
.level-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.level-banner div { display: flex; flex-direction: column; gap: 1px; }
.level-banner strong { font-family: var(--font-round); font-size: 13px; color: #8e6319; }
.level-banner span { font-size: 10px; color: #aa7c29; }
.level-banner .level-spark { font-size: 18px; color: #ffb84d; animation: sparkleSpin 1.8s ease-in-out infinite; }
@keyframes sparkleSpin { 0%,100% { transform: rotate(-8deg) scale(.9); } 50% { transform: rotate(10deg) scale(1.15); } }

/* ---------- minigame ---------- */
.minigame {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(61, 44, 37, .17);
  backdrop-filter: blur(1.5px) saturate(.95);
  overflow: hidden;
  animation: mgIn .25s ease;
  cursor: crosshair;
}
@keyframes mgIn { from { opacity: 0; } to { opacity: 1; } }
.mg-head {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255, 253, 247, .96);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 12px 28px rgba(88, 58, 43, .17);
}
.mg-title { display: flex; align-items: center; gap: 10px; }
.mg-feather-icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: #ffe8d8;
}
.mg-title div { display: flex; flex-direction: column; gap: 1px; }
.mg-title strong { font-family: var(--font-round); font-size: 14px; }
.mg-title small { font-size: 9.5px; color: var(--muted); }
.mg-stats { display: flex; gap: 7px; }
.mg-stats div {
  min-width: 54px;
  padding: 5px 9px;
  border-radius: 12px;
  background: #fff5e8;
  text-align: center;
}
.mg-stats span { display: block; font-size: 8px; color: #a88a78; }
.mg-stats b {
  display: block;
  font-family: var(--font-round);
  font-size: 15px;
  color: #75533e;
  font-variant-numeric: tabular-nums;
}
.feather {
  position: absolute;
  left: 48%;
  top: 40%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,.98), rgba(255,245,222,.94) 62%, rgba(255,220,168,.9));
  box-shadow: 0 0 0 9px rgba(255,255,255,.24), 0 10px 24px rgba(91, 61, 46, .2), inset 0 -5px 8px rgba(233, 170, 99, .2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: left .28s cubic-bezier(.3,1.1,.4,1), top .28s cubic-bezier(.3,1.1,.4,1);
  user-select: none;
  z-index: 3;
}
.feather span {
  font-size: 34px;
  display: block;
  animation: featherBob 1.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 2px rgba(126, 76, 37, .18));
  pointer-events: none;
}
.feather-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 184, 121, .72);
  animation: ringSpin 9s linear infinite;
  pointer-events: none;
}
@keyframes featherBob { 0%,100% { transform: translateY(-2px) rotate(-8deg); } 50% { transform: translateY(3px) rotate(5deg); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.mg-bottom {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.mg-speech {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 253, 247, .94);
  color: #7a5a48;
  font-size: 11.5px;
  box-shadow: 0 6px 16px rgba(90, 60, 44, .14);
  margin-bottom: 8px;
}
.mg-progress {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 250, 240, .55);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(90, 60, 44, .18);
}
.mg-progress i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffbc7e, #ff8c78);
  transition: width .1s linear;
}
.mg-hint { margin-top: 6px; font-size: 9px; color: rgba(255, 252, 244, .9); text-shadow: 0 1px 3px rgba(70,45,33,.35); }
.mg-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.mg-plus {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-round);
  font-size: 19px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(124, 71, 40, .4), 0 0 12px rgba(255, 190, 110, .75);
  animation: mgPlus .65s ease-out forwards;
  pointer-events: none;
}
.mg-spark {
  position: absolute;
  font-size: 16px;
  animation: mgPlus .7s ease-out forwards;
  pointer-events: none;
}
@keyframes mgPlus {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1.15); }
}

/* ---------- action dock ---------- */
.action-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 26px;
  background: rgba(255, 253, 248, .9);
  border: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 14px 30px rgba(140, 98, 70, .13), inset 0 0 0 1px rgba(132, 94, 68, .025);
  backdrop-filter: blur(14px);
  position: relative;
}
.action-btn {
  --action-bg: #fff0da;
  --action-shadow: #eccb9f;
  position: relative;
  flex: none;
  width: 68px;
  height: 72px;
  padding: 7px 3px 6px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent), var(--action-bg);
  box-shadow: 0 5px 0 var(--action-shadow), 0 8px 15px rgba(130, 90, 63, .1), inset 0 1px rgba(255,255,255,.7);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: transform .16s, box-shadow .16s, filter .2s, opacity .2s;
  -webkit-user-select: none;
  user-select: none;
}
.action-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--action-shadow), 0 13px 20px rgba(130, 90, 63, .13); }
.action-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--action-shadow), 0 4px 8px rgba(130, 90, 63, .1); }
.action-btn:disabled { opacity: .38; filter: grayscale(.35); cursor: not-allowed; transform: none; box-shadow: 0 3px 0 var(--action-shadow); }
.action-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(120,80,50,.12)); transition: transform .2s; }
.action-btn:hover .action-icon { transform: rotate(-7deg) scale(1.08); }
.action-name { font-size: 10.5px; font-weight: 800; color: #6c5142; letter-spacing: .3px; }
.action-key {
  position: absolute;
  top: 5px;
  right: 6px;
  font-family: var(--font-round);
  font-size: 7.5px;
  color: rgba(110, 80, 58, .4);
  width: 13px;
  height: 13px;
  border-radius: 5px;
  background: rgba(255,255,255,.45);
  display: grid;
  place-items: center;
}
.action-feed { --action-bg: #ffe7c7; --action-shadow: #f1c790; }
.action-play { --action-bg: #dff2e4; --action-shadow: #b8d9c2; }
.action-pet { --action-bg: #ffe1e6; --action-shadow: #f0bcc8; }
.action-bath { --action-bg: #dcefff; --action-shadow: #b8d6ec; }
.action-sleep { --action-bg: #e9e2ff; --action-shadow: #c9bdeb; }
.action-hint {
  max-width: 106px;
  font-size: 9px;
  line-height: 1.5;
  color: #b29b8b;
  letter-spacing: .1px;
  padding-left: 2px;
}
.action-btn.pulse { animation: actionPulse 1.1s ease-in-out 2; }
@keyframes actionPulse {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px) scale(1.04); }
}

/* ---------- shop ---------- */
.shop-panel {
  padding: 20px 17px 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 108px);
  overflow: hidden;
}
.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
}
.shop-head h2 {
  margin: 0;
  font-family: var(--font-round);
  font-size: 16px;
  letter-spacing: .3px;
}
.shop-head p { margin: 4px 0 0; font-size: 9.5px; color: var(--muted); letter-spacing: .2px; }
.shop-bag {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: linear-gradient(145deg, #fff1cd, #ffe0a3);
  border: 1px solid #fff6dd;
  box-shadow: 0 4px 0 #ebc879, 0 8px 14px rgba(177, 130, 40, .12);
  transform: rotate(4deg);
}
.shop-tabs {
  display: flex;
  gap: 4px;
  margin: 15px 0 11px;
  padding: 4px;
  border-radius: 14px;
  background: #f3e8dc;
}
.shop-tab {
  flex: 1;
  border: 0;
  padding: 8px 5px;
  border-radius: 10px;
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  color: #9e8372;
  cursor: pointer;
  transition: .2s;
  white-space: nowrap;
}
.shop-tab:hover { color: #6f5546; }
.shop-tab.active {
  background: #fffdf8;
  color: #6f5140;
  box-shadow: 0 3px 7px rgba(122, 85, 60, .11);
}
.restock-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 7px 8px;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff5df, #ffebcc);
  border: 1px solid #f3d9b8;
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
.restock-bar[hidden] { display: none; }
.restock-icon {
  width: 29px;
  height: 29px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ffedc6;
  font-size: 15px;
}
.restock-copy { flex: 1; min-width: 0; }
.restock-copy strong {
  display: block;
  font-size: 9.5px;
  color: #9a6c42;
  letter-spacing: .1px;
}
.restock-copy small {
  display: block;
  margin-top: 1px;
  font-size: 8px;
  color: #b28f6f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.restock-btn {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 8px;
  background: linear-gradient(180deg, #ffcf7e, #ffb85f);
  color: #7c541c;
  font-family: var(--font-round);
  font-size: 8.5px;
  font-weight: 800;
  box-shadow: 0 2px 0 #e2a444;
  cursor: pointer;
  transition: transform .16s, filter .16s;
}
.restock-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.restock-bar.done {
  background: #f6f0e7;
  border-color: #eadccb;
}
.restock-bar.done .restock-icon { background: #eee4d5; }
.restock-bar.done .restock-copy strong { color: #a08772; }
.restock-bar.done .restock-copy small { color: #b9a492; }

.shop-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 10px 2px;
  margin-right: -5px;
  scrollbar-width: thin;
  scrollbar-color: #e5cdb8 transparent;
}
.shop-list::-webkit-scrollbar { width: 6px; }
.shop-list::-webkit-scrollbar-thumb { background: #e5cdb8; border-radius: 99px; }
.shop-list::-webkit-scrollbar-track { background: transparent; }
.shop-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 9px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: #fffaf3;
  border: 1px solid #f2e4d5;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.shop-item:hover { transform: translateY(-1px); border-color: #ecd6c1; box-shadow: 0 5px 12px rgba(130, 90, 63, .06); }
.item-icon {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: var(--item-bg, #ffe9cf);
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.item-icon .qty {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: #6e5444;
  color: #fffaf2;
  font-family: var(--font-round);
  font-size: 8.5px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(70,46,32,.18);
}
.item-info { min-width: 0; }
.item-info strong { display: block; font-size: 11.5px; letter-spacing: .1px; color: #654c3e; }
.item-info p {
  margin: 2px 0 0;
  font-size: 9px;
  line-height: 1.45;
  color: #a58c7c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-info .effect { color: #b68261; }
.item-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #f2e9ff;
  color: #8d78b5;
  font-size: 7px;
  font-weight: 700;
  vertical-align: 1px;
}
.item-buy {
  border: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe49d, #ffd06f);
  color: #815a17;
  font-family: var(--font-round);
  font-size: 9.5px;
  display: flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 3px 0 #e7b84e;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s, filter .15s;
}
.item-buy:hover { transform: translateY(-1px); filter: brightness(1.03); }
.item-buy:active { transform: translateY(1px); box-shadow: 0 1px 0 #e7b84e; }
.item-buy.owned {
  background: #eaf5ee;
  color: #6b9b7f;
  box-shadow: none;
  cursor: default;
}
.item-buy.equip { background: #e7edff; color: #6c80b5; box-shadow: 0 3px 0 #ccd7f3; }
.item-buy.equipped { background: #e3f2e9; color: #5d9674; box-shadow: none; }
.item-buy:disabled { opacity: 1; cursor: default; transform: none; }
.item-buy.shake { animation: buyShake .35s ease; }
@keyframes buyShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.shop-empty {
  text-align: center;
  padding: 36px 18px;
  color: #a68c7b;
  font-size: 11px;
}
.shop-empty span { display: block; font-size: 28px; margin-bottom: 8px; opacity: .7; }
.shop-note {
  flex: none;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 3px 0 10px;
  padding: 8px 9px;
  border-radius: 13px;
  border: 1px dashed #ecd4b8;
  background: linear-gradient(135deg, #fff9ed, #fff3e4);
}
.shop-note-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffe9cc;
  font-size: 17px;
}
.shop-note strong {
  display: block;
  font-size: 8.5px;
  color: #ad825f;
  letter-spacing: .3px;
  margin-bottom: 1px;
}
.shop-note p {
  margin: 0;
  font-size: 8.5px;
  line-height: 1.45;
  color: #ac917c;
}
.shop-foot {
  flex: none;
  border-top: 1px dashed rgba(138, 100, 75, .16);
  padding: 11px 3px 14px;
  font-size: 8.5px;
  color: #b39b8b;
  text-align: center;
  letter-spacing: .15px;
}
.shop-foot span { margin-right: 3px; }

/* ---------- modal ---------- */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modal-root.open { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(77, 54, 44, .34);
  backdrop-filter: blur(6px);
  animation: fadeIn .22s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100vw - 28px));
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: 25px 24px 22px;
  border-radius: 30px;
  background: #fffdf7;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 70px rgba(70, 43, 30, .28), inset 0 0 0 1px rgba(130, 90, 64, .04);
  animation: modalUp .32s cubic-bezier(.2,1.2,.35,1);
  scrollbar-width: thin;
  scrollbar-color: #e5cdb8 transparent;
}
@keyframes modalUp {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card.wide { width: min(520px, calc(100vw - 28px)); }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #f0e1d2;
  background: #fff8ef;
  color: #a28674;
  font-size: 17px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .2s;
  z-index: 2;
}
.modal-close:hover { background: #ffece3; color: #d07c67; transform: rotate(8deg); }
.modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c39b7e;
  margin-bottom: 8px;
}
.modal-title {
  margin: 0;
  font-family: var(--font-round);
  font-size: 22px;
  letter-spacing: .2px;
  color: #5b4337;
  padding-right: 26px;
}
.modal-sub {
  margin: 7px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: #a08777;
}
.modal-actions {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}
.primary-btn, .ghost-btn, .danger-btn {
  border: 0;
  border-radius: 15px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, filter .16s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: .2px;
}
.primary-btn {
  background: linear-gradient(180deg, #ffaf92, #ff907a);
  color: #fffdf8;
  box-shadow: 0 5px 0 #e57661, 0 9px 18px rgba(219, 117, 94, .22), inset 0 1px rgba(255,255,255,.35);
}
.primary-btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.primary-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #e57661; }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 #e57661; }
.ghost-btn {
  background: #fff8ef;
  color: #927766;
  border: 1px solid #efdfd0;
  box-shadow: 0 3px 0 #ead8c7;
}
.ghost-btn:hover { background: #fffdf8; transform: translateY(-1px); }
.danger-btn { background: #ffe4de; color: #c16557; border: 1px solid #ffd0c6; box-shadow: 0 3px 0 #f0bdb2; }
.modal-actions .primary-btn, .modal-actions .ghost-btn, .modal-actions .danger-btn { flex: 1; }

.feed-options { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.feed-option {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 16px;
  border: 1px solid #f0e1d2;
  background: #fffaf2;
  text-align: left;
  cursor: pointer;
  transition: .18s;
}
.feed-option:hover { border-color: #ffc9a9; background: #fff7eb; transform: translateX(2px); }
.feed-option .item-icon { width: 46px; height: 46px; }
.feed-option strong { font-size: 12px; display: block; }
.feed-option small { font-size: 9px; color: #a58b7a; display: block; margin-top: 2px; }
.feed-gain {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 8.5px;
  color: #b38d76;
  white-space: nowrap;
}
.feed-gain b { color: #d58768; font-family: var(--font-round); font-size: 9px; }
.feed-empty { text-align: center; padding: 28px 20px 12px; }
.feed-empty .big { font-size: 40px; display: block; margin-bottom: 8px; filter: saturate(.7); }
.feed-empty p { font-size: 11.5px; color: #a08777; line-height: 1.6; }
.feed-empty .ghost-btn { margin-top: 10px; }

.unlock-card {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 15px;
  padding: 12px 13px;
  border-radius: 16px;
  background: #fff8ec;
  border: 1px solid #f0ddc7;
}
.unlock-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #e9f0dc;
  font-size: 25px;
}
.unlock-card div { min-width: 0; flex: 1; }
.unlock-card strong { display: block; font-size: 12px; color: #6b503f; }
.unlock-card p { margin: 3px 0 0; font-size: 9px; line-height: 1.45; color: #a58b78; }
.unlock-card b {
  flex: none;
  font-family: var(--font-round);
  font-size: 10.5px;
  color: #a37726;
  background: #ffedb5;
  border-radius: 999px;
  padding: 5px 9px;
}

.modal-card.book-card {
  width: min(540px, calc(100vw - 28px));
  padding: 24px 24px 18px 30px;
  background: linear-gradient(180deg, #fffdf8, #fff8ed);
}
.book-card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 99px;
  background: repeating-linear-gradient(180deg, #ecc9a8 0 7px, transparent 7px 12px);
  opacity: .55;
  pointer-events: none;
}
.care-book { position: relative; }
.book-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 18px;
}
.book-cover-icon {
  width: 48px;
  height: 54px;
  flex: none;
  border-radius: 7px 11px 11px 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffd9bd, #f4b894);
  border: 2px solid #fff4e7;
  box-shadow: 0 4px 0 #d99b78, 0 7px 12px rgba(133, 85, 58, .14);
  font-size: 25px;
  transform: rotate(-3deg);
}
.book-heading .modal-title { font-size: 21px; padding-right: 0; }
.book-heading .modal-sub { margin-top: 5px; max-width: 370px; }
.book-heading .modal-kicker { margin-bottom: 5px; }
.book-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 13px 0 9px;
}
.book-stats span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff4e4;
  border: 1px solid #f2dfca;
  color: #9a755c;
  font-size: 9px;
  font-weight: 700;
}
.book-advice {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 14px;
  background: #fff5dc;
  border: 1px dashed #ecd0a5;
}
.book-advice-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff0c9;
  font-size: 16px;
}
.book-advice strong { display: block; font-size: 10px; color: #a4774f; margin-bottom: 3px; }
.book-advice p { margin: 0; color: #9a7f6b; font-size: 9.5px; line-height: 1.55; }
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.book-page {
  padding: 9px 10px;
  border-radius: 11px;
  background: rgba(255, 251, 244, .85);
  border: 1px solid #f1e2d2;
  border-left: 3px solid #f2c89c;
}
.book-page h3 {
  margin: 0 0 4px;
  font-family: var(--font-round);
  font-size: 10.5px;
  color: #7b5a45;
}
.book-page p { margin: 0; font-size: 9px; line-height: 1.55; color: #937b6a; }
.book-page small { display: block; margin-top: 5px; color: #b79a83; font-size: 8px; }
.book-tip {
  margin-top: 9px;
  font-size: 9px;
  line-height: 1.55;
  color: #9e8372;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(247, 238, 227, .65);
}
.book-tip + .book-tip { margin-top: 5px; }
.book-footer {
  margin-top: 12px;
  text-align: center;
  font-size: 8px;
  letter-spacing: 1px;
  color: #c3aa96;
}
.book-card .modal-actions { margin-top: 10px; }

.restock-new {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: #fff6e1;
  border: 1px dashed #ebce9d;
}
.restock-new-icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--item-bg, #ffe4c7);
  font-size: 28px;
  box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.restock-new div { min-width: 0; }
.restock-new strong { display: block; font-size: 13px; color: #6b4d38; }
.restock-new p { margin: 3px 0 0; font-size: 9.5px; color: #b17c3e; font-weight: 700; }
.restock-new small { display: block; margin-top: 3px; font-size: 9px; color: #a58b74; }
.restock-new-badge {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ff9a7f;
  color: #fffdf8;
  font-family: var(--font-round);
  font-size: 8px;
  transform: rotate(4deg);
  box-shadow: 0 2px 0 #e2765e;
}
.restock-pick-label {
  margin: 14px 0 7px;
  font-size: 10px;
  font-weight: 800;
  color: #93735d;
}
.restock-old-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: #e5cdb8 transparent;
}
.restock-old {
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid #f0e1d2;
  background: #fffaf3;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
.restock-old:hover {
  border-color: #f0b58d;
  background: #fff6e9;
  transform: translateX(2px);
}
.restock-old-icon {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--item-bg, #ffe9cf);
  font-size: 18px;
}
.restock-old-copy { min-width: 0; }
.restock-old-copy strong { display: block; font-size: 10.5px; color: #6e5140; }
.restock-old-copy small { display: block; margin-top: 1px; font-size: 8px; color: #aa8d79; }
.restock-remove {
  font-family: var(--font-round);
  font-size: 8.5px;
  color: #bf8061;
  background: #fff0e3;
  border: 1px solid #f4d6c2;
  padding: 4px 7px;
  border-radius: 999px;
}
.restock-note {
  margin: 9px 0 0;
  font-size: 8.5px;
  line-height: 1.55;
  color: #b29a88;
}

.result-card { text-align: center; }
.result-score-wrap { margin: 15px auto 12px; position: relative; width: 128px; height: 128px; }
.result-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#ffbd7c var(--score-deg, 0deg), #f5e9dc 0);
  box-shadow: inset 0 0 0 10px #fffdf8, 0 8px 20px rgba(143, 93, 58, .11);
  transition: background .8s;
}
.result-score-inner {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: #fff8ed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.result-score-inner strong {
  font-family: var(--font-round);
  font-size: 38px;
  line-height: 1;
  color: #6d4b3c;
}
.result-score-inner span { font-size: 9px; color: #b09280; margin-top: 4px; }
.result-comment { font-size: 11.5px; color: #9c8171; line-height: 1.6; margin: 0 0 13px; }
.reward-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 17px; }
.reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-round);
  font-size: 10px;
  background: #fff4df;
  color: #a87a38;
  border: 1px solid #f7e4c8;
}
.reward-chip.pink { background: #fff0f2; color: #c17a89; border-color: #f8dfe4; }
.reward-chip.mint { background: #edf8f1; color: #63977a; border-color: #d9eee2; }
.result-note { font-size: 9px; color: #b39b8c; margin-top: 10px; }
.result-card .modal-actions { margin-top: 4px; }

.help-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.help-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  background: #fffaf3;
  border: 1px solid #f3e5d7;
  border-radius: 15px;
}
.help-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #ffeede; font-size: 18px; }
.help-item strong { display: block; font-size: 11.5px; margin-bottom: 2px; }
.help-item p { margin: 0; font-size: 9.5px; color: #a08777; line-height: 1.55; }
.help-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: 15px;
  background: #f9f2e9;
}
.help-toggle-row span { font-size: 11px; color: #8c7262; }
.help-toggle-row small { display: block; font-size: 9px; color: #b39b8b; margin-top: 2px; }
.switch {
  position: relative;
  width: 44px;
  height: 25px;
  border: 0;
  border-radius: 99px;
  background: #d9c9ba;
  cursor: pointer;
  transition: background .2s;
  flex: none;
}
.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fffdf8;
  box-shadow: 0 2px 4px rgba(90, 60, 40, .18);
  transition: transform .2s;
}
.switch.on { background: #ffa88e; }
.switch.on::after { transform: translateX(19px); }
.reset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(138, 100, 75, .16);
}
.reset-row p { margin: 0; font-size: 9.5px; color: #b09888; line-height: 1.5; }
.reset-row .danger-btn { padding: 8px 12px; font-size: 10px; flex: none; }

/* ---------- onboarding ---------- */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 244, 220, .45), transparent 60%),
    rgba(255, 244, 228, .58);
  backdrop-filter: blur(11px) saturate(.9);
  transition: opacity .4s, visibility .4s;
  overflow-y: auto;
}
.onboarding.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.onboard-card {
  width: min(470px, calc(100vw - 28px));
  max-height: calc(100vh - 30px);
  overflow-y: auto;
  padding: 24px 28px 21px;
  border-radius: 34px;
  background: linear-gradient(180deg, #fffdf8, #fff8ee);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 30px 80px rgba(103, 70, 48, .2), inset 0 0 0 1px rgba(130, 90, 64, .03);
  text-align: center;
  animation: onboardIn .45s cubic-bezier(.2,1.2,.35,1);
  scrollbar-width: thin;
}
@keyframes onboardIn {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.onboard-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #ffeede;
  color: #b17e58;
  font-size: 9px;
  letter-spacing: .8px;
  font-weight: 700;
}
.onboard-avatar {
  width: 102px;
  height: 100px;
  margin: 8px auto 2px;
  transform: scale(1.02);
}
.onboard-avatar .ava-eye { top: 42px; width: 10px; height: 14px; }
.onboard-avatar .eye-left { left: 21px; }
.onboard-avatar .eye-right { right: 21px; }
.onboard-avatar .ava-blush { top: 57px; width: 17px; height: 8px; }
.onboard-avatar .blush-left { left: 9px; }
.onboard-avatar .blush-right { right: 9px; }
.onboard-avatar .ava-nose { top: 56px; width: 10px; height: 6px; }
.onboard-avatar .ava-mouth { top: 62px; width: 17px; height: 9px; }
.onboard-avatar .ava-face { inset: 15px 2px 1px; }
.onboard-card h2 {
  margin: 5px 0 0;
  font-family: var(--font-round);
  font-size: 27px;
  letter-spacing: .5px;
  color: #594138;
}
.onboard-lead { margin: 7px 0 18px; font-size: 11.5px; line-height: 1.65; color: #a08777; }
.field-label {
  display: block;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  color: #8b7161;
  letter-spacing: .4px;
  margin: 0 0 6px 3px;
}
.name-row { display: flex; align-items: center; gap: 7px; }
.starter-name-row { margin-bottom: 15px; }
.starter-name-row input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 15px;
  border-radius: 14px;
  border: 1.5px solid #f0dfce;
  background: #fffaf3;
  color: #5d463a;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .6px;
  transition: border-color .2s, box-shadow .2s;
}
.starter-name-row input:focus {
  outline: none;
  border-color: #ffb79b;
  box-shadow: 0 0 0 4px rgba(255, 170, 140, .13);
}
.dice-btn {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  border: 1.5px solid #f0dfce;
  background: #fff7ec;
  font-size: 20px;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.dice-btn:hover { transform: rotate(12deg) scale(1.04); background: #fff; }
.coat-label { margin-top: 2px; }
.coat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 18px;
}
.coat-option {
  border: 1.5px solid #f1e2d3;
  background: #fffaf3;
  border-radius: 15px;
  padding: 8px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: .2s;
  color: #927968;
  font-size: 9.5px;
  font-weight: 700;
}
.coat-option:hover { transform: translateY(-2px); border-color: #efcfb8; }
.coat-option.selected {
  border-color: #ffa98e;
  background: #fff3e9;
  box-shadow: 0 0 0 3px rgba(255, 169, 142, .13), 0 4px 0 #f8d9c4;
}
.coat-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: inset 0 -4px 8px rgba(100,65,40,.12), 0 3px 6px rgba(100,65,40,.08);
}
.coat-dot i { font-style: normal; filter: saturate(.75); transform: translateY(1px); }
.dot-orange { background: linear-gradient(145deg, #ffd6a0, #e9a65c); }
.dot-cow { background: linear-gradient(145deg, #fffaf2 38%, #5d5754 38% 62%, #efe8de 62%); }
.dot-blue { background: linear-gradient(145deg, #d3e0ec, #93a7bb); }
.dot-calico { background: linear-gradient(135deg, #fff4e3 0 32%, #eaa35a 32% 56%, #625852 56% 78%, #f8ead9 78%); }
.start-btn {
  width: 100%;
  height: 50px;
  font-size: 13.5px;
  border-radius: 16px;
}
.start-btn span { font-size: 17px; transition: transform .2s; }
.start-btn:hover span { transform: translateX(3px); }
.onboard-note { margin: 12px 0 0; font-size: 8.5px; color: #b49d8d; letter-spacing: .2px; }

/* ---------- toast / confetti ---------- */
.toast-layer {
  position: fixed;
  left: 50%;
  bottom: 134px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 28px);
}
.toast {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(90, 67, 55, .94);
  color: #fffaf3;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 10px 24px rgba(60, 38, 28, .25);
  animation: toastIn .32s cubic-bezier(.2,1.4,.4,1);
  white-space: nowrap;
  max-width: calc(100vw - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast .t-icon { font-size: 14px; }
.toast.warn { background: rgba(177, 104, 79, .95); }
.toast.good { background: rgba(87, 132, 105, .95); }
.toast.leaving { animation: toastOut .28s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.94); } }

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  overflow: hidden;
}
.confetti {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: confettiFall var(--fall-dur, 2.4s) linear forwards;
  opacity: .95;
}
@keyframes confettiFall {
  0% { transform: translate3d(0, -10px, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--drift, 30px), 105vh, 0) rotate(var(--spin, 540deg)); opacity: 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1260px) {
  .app { padding: 14px 18px 20px; }
  .layout { grid-template-columns: 248px minmax(0, 1fr) 286px; gap: 13px; }
  .brand-text p { display: none; }
  .coin-label { display: none; }
  .profile-panel { padding: 18px 16px 14px; }
  .name-row h2 { max-width: 115px; }
  .action-hint { display: none; }
  .shop-panel { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 1080px) {
  .layout {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
  }
  .profile-panel { max-height: none; position: sticky; top: 12px; }
  .profile-quote { display: none; }
  .stage-column { min-width: 0; }
  .room { height: clamp(480px, calc(100vh - 210px), 660px); }
  .shop-panel {
    grid-column: 1 / -1;
    max-height: none;
    padding: 18px 18px 0;
  }
  .shop-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 290px;
    overflow-y: auto;
    padding-bottom: 4px;
  }
  .shop-item { margin-bottom: 0; }
  .shop-foot { padding-bottom: 12px; }
}

@media (max-width: 840px) {
  .app { padding: 10px 12px 18px; gap: 10px; }
  .window-hit { height: 28%; }
  .layout { display: flex; flex-direction: column; gap: 11px; }
  .stage-column { order: 1; width: 100%; }
  .profile-panel { order: 2; width: 100%; position: static; }
  .shop-panel { order: 3; width: 100%; }
  .room { height: clamp(430px, 61vh, 560px); }
  .profile-panel {
    display: grid;
    grid-template-columns: minmax(190px, .85fr) minmax(0, 1.15fr);
    gap: 0 22px;
    padding: 18px 19px 14px;
  }
  .profile-head { grid-column: 1; }
  .exp-block { grid-column: 1; margin-top: 12px; }
  .stats { grid-column: 1; margin-top: 13px; }
  .panel-divider { display: none; }
  .section-heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .wish-list { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
  .care-tip { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  .together-strip { grid-column: 1 / -1; grid-row: 5; margin-top: 14px; border-top: 1px dashed rgba(133,95,71,.14); }
  .shop-list { max-height: 330px; }
  .action-dock { position: sticky; bottom: 8px; z-index: 45; }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 2px; }
  .brand { flex: 1 1 150px; gap: 9px; }
  .brand-mark { width: 41px; height: 41px; border-radius: 14px; }
  .brand-mark svg { width: 26px; height: 26px; }
  .brand-text h1 { font-size: 20px; }
  .day-pill { order: 3; flex: 1 0 100%; justify-content: center; padding: 6px 12px; }
  .day-emoji { font-size: 18px; }
  .day-copy strong { font-size: 12px; }
  .day-copy span { font-size: 10px; }
  .top-actions { gap: 6px; }
  .coin-pill { height: 39px; padding: 0 11px 0 7px; }
  .coin-fish { font-size: 19px; }
  .coin-pill strong { font-size: 14px; }
  .round-btn { width: 39px; height: 39px; }
  .room { height: clamp(410px, 58vh, 520px); border-width: 5px; border-radius: 27px; }
  .window-wrap { left: 4.5%; top: 12%; width: 38%; height: 38%; }
  .window { border-width: 7px; }
  .shelf { right: 4%; width: 31%; top: 13%; }
  .wall-frame {
    display: flex;
    left: 44%;
    top: 10%;
    width: 13.5%;
    min-width: 60px;
    max-width: 66px;
    aspect-ratio: .92;
    border-width: 4px;
  }
  .frame-avatar { transform: translate(-50%, -50%) scale(.62) !important; }
  .frame-hint { bottom: -16px; font-size: 7px; padding: 2px 6px; }
  .frame-caption { font-size: 5.5px; }
  .frame-meow { font-size: 9px; }
  .fairy-lights { left: 2%; width: 96%; }
  .cat-wrap { width: min(59%, 300px); bottom: 4%; }
  .cat-cushion { width: 49%; height: 14%; }
  .speech { left: 50%; top: 8.5%; max-width: 55%; padding: 8px 11px; font-size: 11px; border-radius: 15px 15px 15px 5px; }
  .speech i { left: 22px; }
  .cat-zone.looking .speech { left: 9%; top: 14%; max-width: 59%; }
  .cat-zone.climbing .speech { left: 47%; top: 23%; max-width: 47%; }
  .cat-zone.plant-play .speech { left: 28%; top: 3.5%; max-width: 57%; }
  .window-hint, .cat-tree-hint, .plant-hint, .book-hint { font-size: 7.5px; padding: 3px 7px; }
  .rug { width: 76%; }
  .yarn-ball { right: 10%; font-size: 30px; }
  .food-bowl { left: 15%; }
  .room-label { display: none; }
  .action-dock { gap: 6px; padding: 8px 8px; border-radius: 22px; }
  .action-btn { flex: 1; width: auto; min-width: 0; height: 62px; border-radius: 17px; gap: 2px; padding: 5px 2px; }
  .action-icon { font-size: 20px; }
  .action-name { font-size: 10px; }
  .action-key { display: none; }
  .item-info strong { font-size: 12.5px; }
  .item-info p { font-size: 9.5px; }
  .care-tip p, .care-tip strong { font-size: 10px; }
  .shop-note p, .shop-note strong { font-size: 9px; }
  .wish-label { font-size: 10.5px; }
  .stat-head { font-size: 12px; }
  .profile-panel {
    display: flex;
    flex-direction: column;
    padding: 17px 17px 13px;
  }
  .profile-head { width: 100%; }
  .stats { width: 100%; }
  .section-heading { margin-top: 17px; }
  .panel-divider { display: block; }
  .wish-list { width: 100%; }
  .together-strip { width: 100%; }
  .shop-list { grid-template-columns: 1fr; max-height: 340px; }
  .shop-head h2 { font-size: 15px; }
  .mg-head { left: 12px; right: 12px; top: 12px; padding: 8px 10px; gap: 6px; }
  .mg-title small { display: none; }
  .mg-title strong { font-size: 12px; }
  .mg-feather-icon { width: 32px; height: 32px; font-size: 18px; border-radius: 11px; }
  .mg-stats div { min-width: 42px; padding: 4px 6px; }
  .mg-stats b { font-size: 13px; }
  .feather { width: 64px; height: 64px; }
  .feather span { font-size: 29px; }
  .mg-bottom { left: 12px; right: 12px; bottom: 10px; }
  .mg-hint { display: none; }
  .modal-root { padding: 10px; align-items: flex-end; }
  .modal-card, .modal-card.wide {
    width: 100%;
    max-height: 88vh;
    border-radius: 28px 28px 18px 18px;
    padding: 23px 20px 20px;
    animation-name: sheetUp;
  }
  .modal-card.book-card {
    width: 100%;
    padding: 22px 17px 16px 24px;
  }
  .book-grid { grid-template-columns: 1fr; }
  .book-heading .modal-title { font-size: 19px; }
  @keyframes sheetUp {
    from { opacity: 0; transform: translateY(38px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .toast-layer { bottom: 94px; }
  .onboard-card { padding: 21px 19px 18px; }
  .onboard-card h2 { font-size: 24px; }
  .onboard-avatar { width: 88px; height: 86px; }
  .onboard-avatar .ava-eye { top: 36px; }
  .onboard-avatar .eye-left { left: 18px; }
  .onboard-avatar .eye-right { right: 18px; }
  .onboard-avatar .ava-blush { top: 49px; }
  .onboard-avatar .ava-nose { top: 48px; }
  .onboard-avatar .ava-mouth { top: 54px; }
}

@media (max-width: 420px) {
  .brand-text h1 { font-size: 18px; }
  .brand-mark { width: 37px; height: 37px; }
  .brand-mark svg { width: 23px; height: 23px; }
  .coin-pill { padding-right: 8px; }
  .round-btn { width: 37px; height: 37px; font-size: 15px; }
  .room { height: 400px; }
  .window-wrap { width: 39%; height: 35%; }
  .shelf { top: 15%; width: 32%; }
  .cat-wrap { width: 65%; }
  .speech { top: 8%; max-width: 58%; font-size: 10.5px; }
  .action-btn { height: 58px; }
  .action-icon { font-size: 18px; }
  .onboard-card { padding: 18px 15px 16px; }
  .coat-grid { grid-template-columns: repeat(2, 1fr); }
  .onboard-card h2 { font-size: 22px; }
  .mg-title strong { font-size: 11px; }
  .mg-stats { margin-left: auto; }
  .toast { font-size: 10px; padding: 8px 13px; }
}

@media (max-height: 820px) and (min-width: 1081px) {
  .profile-quote { display: none; }
}
@media (max-height: 700px) and (min-width: 1081px) {
  .care-tip { display: none; }
}

/* ---------- social: friends, visits, cloud save ---------- */
.social-btn { position: relative; font-size: 16px; }
.social-btn.offline { opacity: .68; }
.social-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  border: 2px solid #fffdf8;
  background: #f28b74;
  color: #fff;
  font: 800 8px/12px var(--font-round);
  display: grid;
  place-items: center;
}
.social-dot[hidden] { display: none; }
.social-modal { width: min(500px, calc(100vw - 28px)); max-height: 88vh; }
.social-loading {
  margin: 20px 0 12px;
  padding: 22px;
  border-radius: 18px;
  border: 1px dashed #ecd8c5;
  background: #fff9ef;
  text-align: center;
  color: #ad8b74;
  font-size: 11px;
}
.social-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7f1ff;
  border: 1px solid #e8ddf8;
}
.social-account strong { display: block; margin: 2px 0; color: #67517f; font-size: 12px; }
.social-account small { display: block; color: #a18bb8; font-size: 8px; line-height: 1.5; }
.social-account-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.social-primary.tiny { padding: 5px 9px; font-size: 9px; border-radius: 999px; }
.social-remove {
  border: 0;
  background: transparent;
  color: #c6a18d;
  font-size: 15px;
  line-height: 1;
  padding: 2px 3px;
  cursor: pointer;
}
.social-remove:hover { color: #d16f61; }
.social-conflict {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px dashed #e5b78c;
  background: #fff6e5;
  color: #9a6545;
  font-size: 9px;
  line-height: 1.6;
}
.social-conflict strong { display: block; margin-bottom: 2px; font-size: 10px; }
.social-conflict p { margin: 2px 0 7px; }
.social-conflict div { display: flex; gap: 5px; flex-wrap: wrap; }
.social-auth-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 17px 0 10px;
}
.social-auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #98765f;
  font-size: 9px;
  font-weight: 700;
}
.social-auth-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ecdac8;
  border-radius: 12px;
  background: #fffdf8;
  padding: 10px 11px;
  color: #654838;
  font: 600 12px var(--font-round);
  outline: none;
}
.social-auth-form input:focus { border-color: #e5b58f; box-shadow: 0 0 0 3px rgba(232, 174, 131, .12); }
.social-auth-form .social-primary { margin-top: 3px; }
.social-auth-switch {
  border: 0;
  background: transparent;
  color: #b07b5e;
  font: 700 9px var(--font-round);
  cursor: pointer;
  padding: 3px 0;
}
.social-auth-note { margin: 8px 0 0; color: #b39a87; font-size: 8px; line-height: 1.6; }
.social-code-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 17px 0 12px;
  padding: 13px 15px;
  border-radius: 18px;
  border: 1px solid #f1ddbf;
  background: linear-gradient(135deg, #fff8df, #fff2e2);
}
.social-label { display: block; font-size: 8px; color: #b18d71; letter-spacing: .7px; }
.social-code {
  display: block;
  margin-top: 2px;
  color: #6b4b36;
  font-family: var(--font-round);
  font-size: 20px;
  letter-spacing: 2px;
}
.social-code-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.social-mini {
  border: 1px solid #edd5c2;
  border-radius: 999px;
  background: #fffdf8;
  color: #936b53;
  padding: 5px 9px;
  font: 700 9px var(--font-round);
  cursor: pointer;
  white-space: nowrap;
}
.social-mini:hover { background: #fff2e8; }
.social-mini:disabled { opacity: .5; cursor: not-allowed; }
.social-mini.danger { color: #c26e61; border-color: #edc9c1; }
.visit-safety { display: flex; justify-content: flex-end; gap: 5px; margin-top: 9px; }
.social-gift-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 13px;
  background: #fff0e5;
  color: #a25f47;
  font-size: 10px;
}
.social-gift-banner button {
  border: 0;
  border-radius: 999px;
  background: #f29a7f;
  color: #fff;
  padding: 6px 10px;
  font: 700 9px var(--font-round);
  cursor: pointer;
}
.social-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 16px 0 7px;
  color: #76523d;
  font-size: 11px;
  font-weight: 800;
}
.social-section-title small { color: #b89b86; font-size: 8px; font-weight: 500; }
.social-add-form { display: flex; gap: 6px; }
.social-add-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #ecdac8;
  border-radius: 12px;
  background: #fffdf8;
  padding: 9px 11px;
  color: #654838;
  font: 600 11px var(--font-round);
  outline: none;
}
.social-add-form input:focus { border-color: #e5b58f; box-shadow: 0 0 0 3px rgba(232, 174, 131, .12); }
.social-add-form button,
.social-primary {
  border: 0;
  border-radius: 12px;
  background: #ef9c82;
  color: #fff;
  padding: 9px 13px;
  font: 800 10px var(--font-round);
  cursor: pointer;
}
.social-add-form button:hover, .social-primary:hover { background: #e88b70; }
.social-primary:disabled { opacity: .55; cursor: not-allowed; }
.social-secondary {
  border: 1px solid #ecd8c5;
  border-radius: 12px;
  background: #fffdf8;
  color: #9b765e;
  padding: 9px 13px;
  font: 700 10px var(--font-round);
  cursor: pointer;
}
.social-friend-list { max-height: 214px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.social-friend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #f2e2d3;
  border-radius: 15px;
  background: #fffdf8;
  margin-bottom: 6px;
}
.social-avatar {
  position: relative;
  width: 45px;
  height: 44px;
  flex: 0 0 45px;
  border-radius: 12px;
  background: #fff7ed;
  overflow: hidden;
}
.social-avatar .frame-avatar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 76px !important;
  height: 74px !important;
  transform: translate(-50%, -50%) scale(.58) !important;
}
.social-friend .ava-acc { display: none; }
.social-friend-info { flex: 1; min-width: 0; }
.social-friend-info strong { display: block; color: #684937; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-friend-info small { display: block; margin-top: 2px; color: #b1937f; font-size: 8px; }
.social-friend-actions { display: flex; gap: 4px; }
.social-empty {
  padding: 18px 14px;
  border-radius: 14px;
  border: 1px dashed #ebd7c5;
  background: #fffaf2;
  text-align: center;
  color: #b29682;
}
.social-empty span { font-size: 24px; }
.social-empty p { margin: 6px 0 0; font-size: 9px; line-height: 1.6; }
.social-cloud {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px dashed #ecd8c5;
  color: #a08777;
  font-size: 9px;
  line-height: 1.6;
}
.social-cloud summary {
  cursor: pointer;
  color: #8c654d;
  font-size: 10px;
  font-weight: 800;
  list-style: none;
}
.social-cloud summary::-webkit-details-marker { display: none; }
.social-cloud summary::before { content: "▸"; display: inline-block; margin-right: 4px; transition: transform .2s; }
.social-cloud[open] summary::before { transform: rotate(90deg); }
.social-cloud p { margin: 7px 0; }
.social-sync-row, .social-recovery-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 0; }
#socialSyncLabel { color: #9a8a72; font-size: 8px; }
#socialSyncLabel.offline { color: #c48770; }
.social-add-form.recovery { margin-top: 7px; }
.social-warning { color: #c28e75 !important; font-size: 8px !important; }
.social-offline-note { margin: 16px 0 5px; color: #8e6e58; font-size: 11px; }
.social-error-detail { margin: 0 0 13px; color: #b58b74; font-size: 9px; }
.visit-room {
  position: relative;
  height: 178px;
  margin: 15px 0 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #ecd5bf;
  background:
    linear-gradient(180deg, #fff3df 0 66%, #e7c7a2 66% 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.35);
}
.visit-room::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 12%;
  width: 26%;
  height: 7px;
  border-radius: 999px;
  background: rgba(124, 84, 58, .12);
  box-shadow: 0 10px 0 rgba(124, 84, 58, .08);
}
.vr-window {
  position: absolute;
  left: 8%;
  top: 13%;
  width: 27%;
  height: 42%;
  border: 6px solid #f2a9a4;
  border-radius: 12px;
  background: linear-gradient(180deg, #bfe2f4, #eaf7ec 72%, #b6d7a7 72%);
  box-shadow: 0 5px 12px rgba(137, 103, 78, .1);
}
.vr-window::before,
.vr-window::after {
  content: "";
  position: absolute;
  background: #fff8ee;
  box-shadow: 0 0 0 1px rgba(180, 132, 103, .12);
}
.vr-window::before { left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); }
.vr-window::after { left: 0; right: 0; top: 52%; height: 3px; }
.vr-window i {
  position: absolute;
  right: 14%;
  top: 13%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffe7a8;
  box-shadow: 0 0 0 4px rgba(255, 231, 168, .24);
}
.vr-window b {
  position: absolute;
  left: 13%;
  bottom: 20%;
  width: 44%;
  height: 20%;
  border-radius: 999px;
  background: #9fce8c;
  box-shadow: 20px -9px 0 -4px #8fbe7d;
}
.vr-shelf {
  position: absolute;
  right: 7%;
  top: 28%;
  width: 29%;
  height: 8px;
  border-radius: 4px;
  background: #c28f62;
  box-shadow: 0 5px 0 rgba(123, 79, 49, .15);
}
.vr-plant {
  position: absolute;
  right: 15%;
  top: 17%;
  z-index: 2;
  font-size: 29px;
  filter: saturate(.82);
}
.vr-tree {
  position: absolute;
  right: 5%;
  bottom: 13%;
  z-index: 1;
  font-size: 43px;
  filter: saturate(.75) drop-shadow(0 4px 2px rgba(99, 66, 43, .12));
}
.vr-rug {
  position: absolute;
  left: 25%;
  bottom: 5%;
  width: 48%;
  height: 18%;
  border-radius: 50%;
  background: rgba(247, 190, 178, .55);
  border: 2px solid rgba(255, 255, 255, .45);
}
.visit-room .frame-avatar {
  position: absolute !important;
  left: 49% !important;
  bottom: 5% !important;
  top: auto !important;
  width: 82px !important;
  height: 79px !important;
  transform: translateX(-50%) !important;
  z-index: 3;
}
.vr-caption {
  position: absolute;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 253, 247, .72);
  color: #a47c61;
  font-size: 8px;
  white-space: nowrap;
}
.visit-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0;
  padding: 13px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8e7, #fff0e2);
  border: 1px solid #f1ddc5;
}
.visit-hero .frame-avatar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 76px !important;
  height: 74px !important;
  transform: none !important;
  flex: 0 0 76px;
  border-radius: 16px;
  background: #fff9ef;
  overflow: hidden;
}
.visit-hero strong { display: block; color: #6b4a36; font-size: 12px; }
.visit-hero p { margin: 5px 0 0; color: #a58670; font-size: 9px; }
.visit-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 12px 0;
}
.visit-stats div {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fff9f0;
  border: 1px solid #f1e3d5;
  color: #9d7b64;
  font-size: 9px;
}
.visit-stats strong { color: #6b4b37; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.visit-actions .social-primary { flex: 1; min-width: 150px; }
.visit-note { margin: 10px 0 0; color: #b39885; font-size: 8px; line-height: 1.6; }
@media (max-width: 640px) {
  .coin-label { display: none; }
  .top-actions { gap: 5px; }
  .social-modal { max-height: 88vh; }
  .social-friend-list { max-height: 190px; }
  .social-code { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}