:root, :root[data-time="evening"] {
  --bg: #1e2d30;
  --bg-deep: #2a3c40;
  --card: #27393d;
  --card-soft: #34494d;
  --text: #f3e9d6;
  --muted: #b8c0b4;
  --accent: #e0a94a;
  --accent-ink: #2a1c12;
  --love: #e8927c;
  --ink: #14201f;
  --accent-strong: #e0a94a;
  --wall: #2f4a4f;
  --wall-dot: #3a585c;
  --floor: #5d4335;
  --rug: #a9622f;
  --rug-in: #d59a4c;
  --curtain: #7d3f2c;
  --sky: #eeb07a;
  --sun: #ffe2a8;
  --cloud: #f6dcc0;
  --shelf: #7a5238;
  color-scheme: dark;
}
:root[data-time="morning"] {
  --bg: #f0ead9;
  --bg-deep: #faf5e8;
  --card: #fffcf4;
  --card-soft: #e3dbc2;
  --text: #3b2c20;
  --muted: #75684f;
  --accent: #d9a441;
  --accent-ink: #3b2c20;
  --love: #a8503a;
  --ink: #3b2c20;
  --accent-strong: #8a6420;
  --wall: #d6cfae;
  --wall-dot: #c8c09c;
  --floor: #8d6b4b;
  --rug: #5f7355;
  --rug-in: #8fa077;
  --curtain: #5f7355;
  --sky: #a9c6c0;
  --sun: #ffe2a8;
  --cloud: #f6f0e0;
  --shelf: #8d6b4b;
  color-scheme: light;
}
:root[data-time="day"] {
  --bg: #efe6d6;
  --bg-deep: #f8f2e6;
  --card: #fffaf1;
  --card-soft: #e4d6bf;
  --text: #2c3440;
  --muted: #6c6a64;
  --accent: #c8623f;
  --accent-ink: #fbf3e6;
  --love: #a8503a;
  --ink: #2c3440;
  --accent-strong: #a84c2c;
  --wall: #e4d6bf;
  --wall-dot: #d9c8ad;
  --floor: #a6794f;
  --rug: #2f4a63;
  --rug-in: #5b7a93;
  --curtain: #2f4a63;
  --sky: #a8c4d4;
  --sun: #ffe08e;
  --cloud: #fff;
  --shelf: #7b5a3f;
  color-scheme: light;
}
:root[data-time="night"] {
  --bg: #141a2e;
  --bg-deep: #1f2740;
  --card: #1c2338;
  --card-soft: #2a3350;
  --text: #ece6d8;
  --muted: #a7adbd;
  --accent: #e3b860;
  --accent-ink: #1d1a14;
  --love: #e8927c;
  --ink: #0b0f1e;
  --accent-strong: #e3b860;
  --wall: #1c2540;
  --wall-dot: #26304f;
  --floor: #2e2a3f;
  --rug: #4a4468;
  --rug-in: #6d6590;
  --curtain: #33406b;
  --sky: #0f1730;
  --sun: #f1e7c4;
  --cloud: #2a3556;
  --shelf: #4a3f4f;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

body {
  margin: 0;
  transition: background-color .6s;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font: 600 16px/1.5 Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 460px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px 40px;
}

button { font: inherit; }

.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.brand { margin: 0; font-size: 22px; font-weight: 900; }
.sound {
  width: 40px;
  height: 40px;
  color: var(--text);
  border: 0;
  border-radius: 50%;
  background: var(--card);
  cursor: pointer;
}

.pet, .card, .memory {
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 6px 22px rgba(30, 20, 10, .1);
}
.pet { padding: 16px; }
.pet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pet-head h2 { margin: 0; font-size: 20px; }
.streak-badge .art { width: 16px; height: 16px; vertical-align: -3px; }
.streak-badge {
  padding: 5px 12px;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--card-soft);
}
.streak-badge.waiting { opacity: .55; }

.room {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--wall);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.tap {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  left: 50%;
  padding: 8px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 24, 20, .62);
  transform: translateX(-50%);
  cursor: pointer;
}
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.stats div { padding: 10px 4px; text-align: center; border-radius: 16px; background: var(--card-soft); }
.stats strong { display: block; font-size: 22px; font-weight: 900; line-height: 1.2; }
.stats span { color: var(--muted); font-size: 12px; }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
.night-only, .lamp-glow { display: none; }
:root[data-time="night"] .night-only { display: block; }
:root[data-time="night"] .cloud { display: none; }
:root[data-time="evening"] .lamp-glow,
:root[data-time="night"] .lamp-glow { display: block; opacity: .3; }
.rig {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 34px;
  width: 226px;
  height: 264px;
  margin-left: -113px;
  transform-origin: 50% 100%;
  transition: transform var(--move, .5s) var(--ease, ease-in-out), opacity .4s;
}
.monkey {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: pointer;
  transform-origin: 50% 96%;
  animation: breathe 3.4s ease-in-out infinite;
}

.frown, .beam, .eye-happy, .clothes, .pose, .chad, .shades, .stubble, .eye-scared, .eye-half, .eye-closed, .wavy, .flat, .smirk, .live, .oh, .red-nose, .sweat, .tears, .bow { display: none; }
.monkey[data-age="baby"] .body-group { transform: scale(.8); transform-origin: 120px 266px; }
.monkey[data-age="baby"] .head-group { transform: translateY(32px) scale(1.04); transform-origin: 120px 100px; }
.monkey[data-age="kid"] .cap,
.monkey[data-age="teen"] .hoodie,
.monkey[data-age="adult"] .scarf,
.monkey[data-age="adult"] .coat,
.monkey[data-age="adult"] .stubble { display: block; }
.monkey[data-age="kid"] .tuft { display: none; }
.monkey[data-age="kid"] .body-group { transform: scale(.9); transform-origin: 120px 266px; }
.monkey[data-age="kid"] .head-group { transform: translateY(20px); transform-origin: 120px 170px; }
.monkey[data-age="teen"] .head-group { transform: translateY(4px) scale(.84); transform-origin: 120px 170px; }
.monkey[data-age="adult"] .head-group { transform: translateY(-46px) scale(.64); transform-origin: 120px 170px; }
.monkey[data-age="adult"] .body-group { transform: scale(.86, 1.4); transform-origin: 120px 266px; }
.monkey[data-age="teen"] .toy-heart,
.monkey[data-age="adult"] .toy-heart { display: none; }
.monkey[data-age="teen"] .eye-open .pupil { transform: translate(-3px, 2px); }

.monkey[data-mood="frown"] .smile { display: none; }
.monkey[data-mood="frown"] .frown { display: block; }
.monkey[data-mood="beam"] .smile { display: none; }
.monkey[data-mood="beam"] .beam { display: block; }
.monkey[data-mood="beam"] .eye-open { display: none; }
.monkey[data-mood="beam"] .eye-happy { display: block; }

.eyes { animation: blink 5s infinite; transform-origin: 120px 99px; }
#monkey .eyes { animation: none; }
#monkey.blinking .eyes { scale: 1 .06; }
.tail { transform-origin: 158px 226px; animation: tail 3s ease-in-out infinite; }

.monkey.squish { animation: squish .32s ease-in-out infinite alternate; }
.monkey.hop { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
.rig.gone { display: none; }


.bubble {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 50%;
  width: max-content;
  max-width: 84%;
  padding: 8px 13px;
  color: #33231a;
  font-weight: 600;
  text-align: center;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  transform: translateX(-50%);
}
.effects { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.heart .art { width: 1em; height: 1em; }
.heart {
  position: absolute;
  bottom: 90px;
  font-size: var(--size);
  animation: heart 1.5s ease-out forwards;
}


.card, .section { margin-top: 16px; }
.card { padding: 18px; }
h1 { margin: 0 0 7px; font-size: 22px; font-weight: 900; line-height: 1.25; }
h2 { margin: 0 0 10px; font-size: 18px; font-weight: 900; }
#scene-text { margin: 0; color: var(--muted); white-space: pre-line; }

#controls { display: grid; gap: 9px; margin-top: 14px; }
#controls:empty { display: none; }
#controls button {
  position: relative;
  padding: 13px 15px;
  overflow: hidden;
  color: var(--accent-ink);
  font-weight: 800;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#controls button.option { color: var(--text); font-weight: 600; background: var(--card-soft); }
#controls button:disabled { opacity: .55; }
#controls .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: rgba(255, 255, 255, .42);
}
#controls .label { position: relative; }
#controls input {
  width: 100%;
  padding: 12px 13px;
  color: var(--text);
  font: inherit;
  border: 0;
  border-radius: 14px;
  background: var(--card-soft);
}

.note-hint { margin: 0; color: var(--muted); font-size: 14px; }
.note-form { display: grid; gap: 9px; margin-top: 12px; }
.note-form textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--text);
  font: inherit;
  resize: none;
  border: 0;
  border-radius: 14px;
  background: var(--card-soft);
}
.note-form button {
  padding: 13px 15px;
  color: var(--accent-ink);
  font-weight: 800;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  cursor: pointer;
}
.note-form button:disabled { opacity: .55; }
.note-list { display: grid; gap: 8px; margin-top: 12px; }
.note-list:empty { display: none; }
.note { padding: 10px 13px; border-radius: 16px; background: var(--card-soft); }
.note.mine { opacity: .75; }
.note h3 { margin: 0 0 2px; font-size: 13px; color: var(--muted); }
.note p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.feedback { min-height: 22px; margin: 9px 0 0; color: var(--love); font-size: 14px; }

.memory-media { display: block; width: 100%; margin-top: 12px; border-radius: 14px; }
.empty { margin: 0; color: var(--muted); }
.fatal { margin-top: 18vh; color: var(--muted); text-align: center; }

.dev-panel { display: flex; flex-wrap: wrap; gap: 6px; max-width: 460px; margin: 0 auto; padding: 0 16px 24px; }
.dev-panel button { padding: 6px 10px; color: var(--text); font: inherit; font-size: 13px; border: 0; border-radius: 10px; background: var(--card-soft); cursor: pointer; }

@keyframes breathe { 50% { transform: scale(1.015, .985); } }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.06); } }
@keyframes tail { 50% { transform: rotate(8deg); } }
@keyframes squish { to { transform: scale(1.09, .9); } }
@keyframes hop {
  35% { transform: translateY(-20px) scale(.96, 1.05); }
  70% { transform: translateY(0) scale(1.06, .94); }
}
@keyframes heart {
  from { transform: translate(0, 0) scale(.5); opacity: 1; }
  to { transform: translate(var(--dx), -170px) scale(1.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .monkey, .tail, .eyes, .head-life, .limb, .ear-l, .ear-r { animation: none; }
  .monkey.squish, .monkey.hop { animation: none; }
}