:root {
  --cute: 1;
  --ink: #4a3326;
  --muted: #8f7565;
  --paper: #fff8f0;
  --card: #fffdfa;
  --line: #ecd9c6;
  --accent: #f08aa8;
  --accent-ink: #b84d6e;
  --shadow: 0 6px 20px #7a4b2a2b;
  --joy: #f27aa0;
  --fullness: #f2a34e;
  --energy: #7f8de6;
  --radius: calc(12px + var(--cute) * 12px);
  /* glass: the room shows through, a soft warm tint, a light edge on top */
  --glass: color-mix(in srgb, #fff7ef calc(55% + var(--cute) * 10%), transparent);
  --glass-edge: color-mix(in srgb, #ffffff calc(40% + var(--cute) * 30%), transparent);
  --glass-shadow: 0 10px 28px -8px color-mix(in srgb, #5a3214 calc(20% + var(--cute) * 10%), transparent), inset 0 1px 0 var(--glass-edge);
  --tint-feed: color-mix(in srgb, #ffc89a calc(var(--cute) * 100%), #d9d3cc);
  --tint-play: color-mix(in srgb, #a9d8ff calc(var(--cute) * 100%), #cfd5db);
  --tint-sleep: color-mix(in srgb, #cdbcff calc(var(--cute) * 100%), #d3d0db);
  font-family: "Nunito", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #f3d9bf; color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img { user-select: none; -webkit-user-drag: none; }

#app { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; }

/* ───── The room ───── */
#scene { position: absolute; inset: 0; overflow: hidden; }
#scene .bg { position: absolute; inset: 0; background-size: cover; background-position: center bottom; transition: opacity 1.2s ease; }
#scene .bg.day { background-image: url(../img/home-day.jpg); }
#scene .bg.night { background-image: url(../img/home-night.jpg); opacity: 0; }
#scene.night .bg.night { opacity: 1; }
#world { position: absolute; inset: 0; }

.sprite { position: absolute; left: 0; top: 0; touch-action: none; cursor: grab; transform-origin: 50% 100%; will-change: transform; }
.sprite.held { cursor: grabbing; }
/* held up: swings like a pendulum from the scruff */
.sprite.held canvas { transform-origin: 50% 8%; animation: swing 1.1s ease-in-out infinite; }
@keyframes swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.sprite canvas { display: block; transform-origin: 50% 100%; }
.sprite.breathe canvas { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03); } }
.shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, #5a361f40, #5a361f00); pointer-events: none; }

.nest { position: absolute; pointer-events: none; }
.nest.front { z-index: 2; -webkit-mask-image: radial-gradient(ellipse 23% 19% at 50% 41%, transparent 98%, #000 100%), linear-gradient(to bottom, transparent 41%, #000 41%);
  -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 23% 19% at 50% 41%, transparent 98%, #000 100%), linear-gradient(to bottom, transparent 41%, #000 41%); mask-composite: intersect; }
.egg { position: absolute; cursor: pointer; transform-origin: 50% 90%; touch-action: manipulation; }
.egg.wobble { animation: wobble 2.6s ease-in-out infinite; }
.egg.ready { animation: knock 1.1s ease-in-out infinite; }
.egg.bump { animation: bump .35s ease; }
@keyframes wobble { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-5deg); } 84% { transform: rotate(4deg); } 92% { transform: rotate(-2deg); } }
@keyframes knock { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-8deg); } 68% { transform: rotate(7deg); } 76% { transform: rotate(-5deg); } 84% { transform: rotate(3deg); } }
@keyframes bump { 0% { transform: scale(1, 1); } 40% { transform: scale(1.08, .92); } 100% { transform: scale(1, 1); } }

.fx { position: absolute; pointer-events: none; width: 34px; height: 34px; transition: transform 1.1s cubic-bezier(.2, .7, .3, 1), opacity 1.1s ease-in; z-index: 5; }
.fx.big { width: 48px; height: 48px; }
.zzz { position: absolute; pointer-events: none; font: 900 22px "Nunito", sans-serif; color: #fff; text-shadow: 0 2px 6px #2a2c6a99; animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0% { transform: translate(0, 0) scale(.8); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(18px, -40px) scale(1.2); opacity: 0; } }
.bubble { position: absolute; pointer-events: none; background: #fffdf8; border-radius: 18px; padding: 6px 10px; box-shadow: var(--shadow);
  font-weight: 800; font-size: 15px; white-space: nowrap; display: flex; align-items: center; gap: 6px; transform: translate(-50%, -100%); z-index: 6;
  animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.bubble img { width: 26px; height: 26px; }
@keyframes pop { from { transform: translate(-50%, -100%) scale(.4); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.ball, .food-fly { position: absolute; pointer-events: none; z-index: 4; }

/* ───── HUD ───── */
#hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 0; z-index: 13; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud .right { margin-left: auto; display: flex; gap: 8px; }
.pill { display: flex; align-items: center; gap: 8px; background: #fffdf8ee; border-radius: 99px; padding: 4px 14px 4px 4px; box-shadow: var(--shadow); font-weight: 900; font-size: 18px; min-height: 48px; }
.pill img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: #fbefe2; }
.pill img[src=""] { visibility: hidden; }
#needs { display: flex; gap: 8px; background: #fffdf8ee; border-radius: 99px; padding: 5px 10px; box-shadow: var(--shadow); }
.need { position: relative; width: 44px; height: 44px; }
.need svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.need circle { fill: none; stroke-width: 4; }
.need .track { stroke: #f1e3d4; }
.need .fill { stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; transition: stroke-dashoffset .8s ease; }
.need[data-need="joy"] .fill { stroke: var(--joy); }
.need[data-need="fullness"] .fill { stroke: var(--fullness); }
.need[data-need="energy"] .fill { stroke: var(--energy); }
.need img { position: absolute; inset: 9px; width: 26px; height: 26px; object-fit: contain; }
.need.low img { animation: lowpulse 1.4s ease-in-out infinite; }
@keyframes lowpulse { 50% { transform: scale(1.18); } }
.round { width: 52px; height: 52px; border-radius: 50%; background: #fffdf8ee; box-shadow: var(--shadow); font-size: 22px; display: grid; place-items: center; }
.round.small { width: 46px; height: 46px; font-size: 19px; }

/* ───── Actions ───── */
#actions { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 14px; z-index: 10; }
.act { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; padding: 8px 4px 6px; border-radius: var(--radius);
  background: #fffdf8ee; box-shadow: var(--shadow); font-weight: 900; font-size: 14px; transition: transform .15s; }
.act img { width: 54px; height: 54px; object-fit: contain; transition: transform .2s; }
.act:hover img { transform: scale(1.1) rotate(-4deg); }
.act:active { transform: scale(.94); }
.act[disabled] { opacity: .45; pointer-events: none; }
#tray { position: absolute; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 112px); transform: translateX(-50%); display: flex; gap: 10px;
  background: #fffdf8f2; padding: 10px; border-radius: var(--radius); box-shadow: var(--shadow); z-index: 11; animation: rise .25s ease; }
@keyframes rise { from { transform: translate(-50%, 20px); opacity: 0; } }
.food { display: flex; flex-direction: column; align-items: center; width: 74px; font-weight: 800; font-size: 13px; border-radius: 16px; padding: 6px 2px; }
.food:hover { background: #fbeee2; }
.food img { width: 50px; height: 50px; object-fit: contain; }

#hint { position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: #fffdf8f2; border-radius: 99px;
  padding: 10px 20px; box-shadow: var(--shadow); font-weight: 900; font-size: 18px; text-align: center; z-index: 9; max-width: calc(100% - 32px); }
#hint small { display: block; font-size: 14px; color: var(--muted); font-weight: 700; }
#toast { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); background: #4a3326e8; color: #fff; padding: 10px 18px; border-radius: 16px;
  font-weight: 800; z-index: 20; box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center; }

/* ───── Modal ───── */
#modal { position: absolute; inset: 0; background: #4a33264d; display: grid; place-items: center; z-index: 30; padding: 16px; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
#modal .sheet { background: var(--card); border-radius: 28px; padding: 22px; max-width: 560px; width: 100%; max-height: calc(100% - 32px); overflow: auto; box-shadow: 0 20px 60px #4a332655; text-align: center; animation: popin .3s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes popin { from { transform: scale(.85); opacity: 0; } }
#modal h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; }
#modal p { margin: 6px 0 14px; color: var(--muted); font-weight: 700; }
.big-btn { background: var(--accent); color: #fff; font-weight: 900; font-size: 19px; padding: 12px 26px; border-radius: 99px; box-shadow: 0 6px 0 var(--accent-ink); transition: transform .1s, box-shadow .1s; }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent-ink); }
.ghost-btn { font-weight: 800; color: var(--muted); padding: 10px 16px; border-radius: 99px; }
.ghost-btn:hover { background: #f6ebe0; }
.names { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.names button { background: #fbefe3; border-radius: 99px; padding: 10px 20px; font-size: 20px; font-weight: 900; border: 3px solid transparent; }
.names button:hover { border-color: var(--accent); }
.card-face { width: 180px; height: 180px; object-fit: contain; margin: 0 auto; display: block; }
.genes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; }
.gene { background: #fbefe3; border-radius: 99px; padding: 4px 12px; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.gene b { font-weight: 900; }
.gene i { font-style: normal; color: var(--accent-ink); font-weight: 800; }
.gene .sw { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #0002; }
.gene.rare { background: linear-gradient(90deg, #fde7f0, #e9e6ff); }
.grow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.grow img { width: 150px; height: 150px; object-fit: contain; }
.grow .arrow { font-size: 32px; color: var(--accent); }
.keybox { display: flex; gap: 8px; margin: 10px 0; }
.keybox input { flex: 1; min-width: 0; font: 700 13px ui-monospace, monospace; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.menu-list { display: grid; gap: 8px; margin-top: 10px; }
.menu-list button { background: #fbefe3; border-radius: 16px; padding: 12px; font-weight: 800; font-size: 16px; text-align: left; display: flex; align-items: center; gap: 10px; }
.menu-list button img { width: 36px; height: 36px; object-fit: contain; }
.pets-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pets-row button { background: #fbefe3; border-radius: 18px; padding: 8px; width: 110px; font-weight: 900; border: 3px solid transparent; }
.pets-row button.on { border-color: var(--accent); }
.pets-row img, .pets-row canvas { width: 80px; height: 80px; object-fit: contain; display: block; margin: 0 auto; }

/* ───── Choosing an egg ───── */
#choose { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #fff3e340; padding: 16px; }
#choose h1 { margin: 0; font-size: clamp(26px, 5vw, 40px); font-weight: 900; text-align: center; background: #fffdf8ee; padding: 8px 24px; border-radius: 99px; box-shadow: var(--shadow); }
.eggs { display: flex; gap: clamp(10px, 4vw, 40px); align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.egg-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px 12px; border-radius: 28px; background: #fffdf8cc; box-shadow: var(--shadow); transition: transform .2s; }
.egg-pick:hover { transform: translateY(-6px); }
.egg-pick .holder { position: relative; width: clamp(120px, 26vw, 170px); height: clamp(130px, 28vw, 185px); }
.egg-pick .holder img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.egg-pick .holder img.rim { z-index: 2; -webkit-mask-image: radial-gradient(ellipse 23% 19% at 50% 41%, transparent 98%, #000 100%), linear-gradient(to bottom, transparent 41%, #000 41%);
  -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 23% 19% at 50% 41%, transparent 98%, #000 100%), linear-gradient(to bottom, transparent 41%, #000 41%); mask-composite: intersect; }

.egg-pick b { font-size: 18px; font-weight: 900; }
.egg-pick small { color: var(--muted); font-weight: 700; }

#loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: #f6dcc4; z-index: 50; font-weight: 900; font-size: 20px; transition: opacity .5s; }
#loading img { width: 64px; animation: spin 2.4s linear infinite; }
#loading.gone { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  #hud { padding-left: 10px; padding-right: 10px; gap: 6px; flex-wrap: wrap; }
  .pill { font-size: 16px; min-height: 44px; }
  .pill img { width: 36px; height: 36px; }
  .need { width: 38px; height: 38px; } .need img { inset: 8px; width: 22px; height: 22px; }
  #needs { order: 3; margin: 0 auto; }
  .act { width: 84px; font-size: 13px; } .act img { width: 46px; height: 46px; }
  #tray { gap: 4px; padding: 8px; } .food { width: 66px; } .food img { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .sprite.breathe canvas, .egg.wobble, .egg.ready, .zzz, #loading img { animation: none; }
}


/* ───── Soft glass UI (замена резких белых кнопок) ───── */
.pill, #needs, .round, #tray, #hint {
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--glass-shadow);
}
.round { transition: transform .15s, background .2s; }
.round:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--glass) 70%, #ffffff); }
#actions { gap: 18px; }
.act { width: auto; background: none; box-shadow: none; padding: 0; gap: 6px; }
.act .bubble-btn {
  position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffffcc 0 12%, transparent 13%),
              radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tint) 85%, #fff), color-mix(in srgb, var(--tint) 75%, transparent) 70%);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--tint) 70%, #5a3214), inset 0 -6px 12px color-mix(in srgb, var(--tint) 60%, transparent), inset 0 1px 0 #ffffffb0;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s;
}
.act[data-act="feed"] { --tint: var(--tint-feed); }
.act[data-act="play"] { --tint: var(--tint-play); }
.act[data-act="sleep"] { --tint: var(--tint-sleep); }
.act img { width: 50px; height: 50px; filter: drop-shadow(0 3px 4px #5a321433); }
.act > span:last-child { font-size: 13px; font-weight: 900; padding: 2px 10px; border-radius: 99px; background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.act:hover .bubble-btn { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 28px -8px color-mix(in srgb, var(--tint) 80%, #5a3214), 0 0 0 6px color-mix(in srgb, var(--tint) 35%, transparent), inset 0 1px 0 #ffffffb0; }
.act:hover img { transform: rotate(-6deg); }
.act:active .bubble-btn { transform: scale(.92); }
.food { border-radius: calc(var(--radius) - 6px); }
.food:hover { background: color-mix(in srgb, var(--tint-feed) 45%, transparent); }
#modal { background: color-mix(in srgb, #4a3326 30%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#modal .sheet { border-radius: calc(var(--radius) + 6px); }
.big-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent)); box-shadow: 0 6px 0 var(--accent-ink), 0 10px 20px -6px var(--accent); }
.menu-list button, .names button, .gene, .pets-row button { border-radius: calc(var(--radius) - 6px); }
.menu-list button { background: color-mix(in srgb, var(--tint-feed) 30%, #fff8f1); }

/* ───── Милота ↔ Серьёзность ───── */
#scene { filter: saturate(calc(.72 + var(--cute) * .28)); }
.sprite.breathe canvas { animation-duration: calc(4.6s - var(--cute) * 1.4s); }
body.serious { --accent: #6e7f99; --accent-ink: #4a5770; --ink: #2f3540; --muted: #6b7380; --joy: #c26b86; --fullness: #c08a4a; --energy: #6d78b8; }
body.serious, body.serious button { font-family: system-ui, "Segoe UI", sans-serif; }
body.serious .pill, body.serious .act span, body.serious .big-btn, body.serious #modal h2 { font-weight: 650; }
body.serious .need.low img { animation: none; }
.mood { margin: 14px 0 4px; text-align: left; }
.mood label { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.mood input { width: 100%; accent-color: var(--accent); }