:root {
  color-scheme: light;
  --ink: #292534;
  --muted: #696272;
  --cream: #fffaf0;
  --purple: #6846bd;
  --teal: #168f91;
  --line: #d8d0c4;
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: #ded8cc; }
a { color: #4c2f91; }
button { font: inherit; }

.shell { width: min(58rem, calc(100% - 1.5rem)); margin-inline: auto; padding-block: clamp(1.25rem, 4vw, 3rem); }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
.intro h1 { margin: .1rem 0 0; font-size: clamp(2rem, 6vw, 3.6rem); line-height: 1; }
.intro > p { max-width: 29rem; margin: 0; color: var(--muted); }
.eyebrow, .tray-eyebrow { margin: 0; color: var(--purple); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.pet-home { overflow: hidden; border: 1px solid #bcb3a6; border-radius: 1.25rem; background: var(--cream); box-shadow: 0 1.2rem 2.5rem rgb(53 44 36 / 12%); }
.room { position: relative; min-height: 31rem; overflow: hidden; border-bottom: 1px solid #aa9c8c; background: linear-gradient(#d7cdc0 0 67%, #a98265 67% 69%, #c69a72 69%); transition: background 500ms ease; }
.room[data-time="night"] { background: linear-gradient(#4b4b68 0 67%, #685b55 67% 69%, #7d6659 69%); }

.window { position: absolute; top: 3rem; left: 8%; width: 9rem; height: 11rem; border: .7rem solid #f5ecdf; border-radius: 4.5rem 4.5rem .25rem .25rem; background: linear-gradient(#a9d8df, #e5ecce); box-shadow: 0 .3rem 0 rgb(61 50 45 / 12%); }
.window::before, .window::after { position: absolute; background: #f5ecdf; content: ''; }
.window::before { top: 45%; right: 0; left: 0; height: .45rem; }
.window::after { top: 0; bottom: 0; left: 47%; width: .45rem; }
.room[data-time="night"] .window { background: #242947; }
.room[data-time="night"] .window span::before { color: #fff7c7; content: '•  ·  ✦'; }

.wall-art { position: absolute; top: 4.5rem; right: 12%; display: grid; width: 6rem; height: 7.5rem; place-items: center; border: .5rem solid #f3eadf; color: #f5eee6; background: var(--purple); font: 800 2.2rem/1 Georgia, serif; transform: rotate(2deg); }
.plant { position: absolute; right: 5%; bottom: 5.6rem; width: 4.7rem; height: 7rem; border-radius: 0 0 1rem 1rem; background: #a95f45; clip-path: polygon(14% 52%, 86% 52%, 76% 100%, 24% 100%); }
.plant i { position: absolute; bottom: 45%; width: 2.1rem; height: 4rem; border-radius: 100% 0 100% 0; background: #477b5a; transform-origin: bottom; }
.plant i:nth-child(1) { left: .2rem; transform: rotate(-32deg); }
.plant i:nth-child(2) { left: 1.35rem; transform: rotate(-4deg); }
.plant i:nth-child(3) { right: .1rem; transform: rotate(35deg) scale(.85); }
.rug { position: absolute; right: 16%; bottom: 1.5rem; left: 16%; height: 5.5rem; border-radius: 50%; background: #d7c7d9; box-shadow: inset 0 0 0 .7rem rgb(255 255 255 / 25%); }

.mica-character { position: absolute; z-index: 3; bottom: 3.2rem; left: 50%; width: 15rem; height: 15rem; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateX(-50%); }
.mica-character:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.mica-sprite { display: block; width: 100%; height: 100%; background: url('assets/iterations/room-pet/mica-sprites.png') 0 0 / 400% 200% no-repeat; transform-origin: 50% 90%; animation: breathe 2.8s ease-in-out infinite; }
.state-blinking { background-position: 33.333% 0; }
.state-walking-one { background-position: 66.667% 0; animation: walk-to-bowl 1.7s ease-in-out; }
.state-walking-two { background-position: 100% 0; }
.state-waving { background-position: 0 100%; animation: wave .45s ease-in-out 3 alternate; }
.state-happy { background-position: 33.333% 100%; animation: hop .4s ease-in-out 4 alternate; }
.state-sleeping { background-position: 66.667% 100%; animation: sleep 3.5s ease-in-out infinite; }
.state-curious { background-position: 100% 100%; animation: tilt 1.5s ease-in-out infinite alternate; }
.room[data-activity="eating"] .mica-character { animation: approach-bowl 1.7s ease-in-out; }

.food-bowl { position: absolute; z-index: 4; right: 28%; bottom: 4rem; width: 4rem; height: 1.5rem; border-radius: .25rem .25rem 1.5rem 1.5rem; background: var(--teal); box-shadow: inset 0 .35rem #c9f0e6, 0 .25rem .3rem rgb(50 35 30 / 18%); }
.food-bowl[hidden] { display: none; }
.thought { position: absolute; z-index: 5; top: 7rem; left: 55%; min-height: 1rem; color: #4d405b; font-weight: 800; }
.message { position: absolute; z-index: 6; right: 1rem; bottom: 1rem; left: 1rem; max-width: 32rem; margin: auto; padding: .6rem .9rem; border: 1px solid rgb(71 61 56 / 18%); border-radius: 999px; background: rgb(255 250 240 / 90%); text-align: center; font-size: .9rem; font-weight: 700; backdrop-filter: blur(.4rem); }

.need-signals { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: #f8f2e8; }
.need-signals > span { display: grid; grid-template-columns: .7rem 1fr; padding: .8rem 1rem; border-right: 1px solid var(--line); }
.need-signals > span:last-child { border-right: 0; }
.need-signals strong { font-size: .9rem; text-transform: capitalize; }
.need-signals small { grid-column: 2; color: var(--muted); font-size: .7rem; }
.signal { width: .5rem; height: .5rem; margin-top: .35rem; border-radius: 50%; background: var(--teal); }
.signal.happiness { background: var(--purple); }
.signal.energy { background: #c1773f; }

.care-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; padding: .8rem; background: #ede5d9; }
.care-dock button, .food-options button, .tray-close { min-height: 3rem; border: 1px solid #bfb3a6; border-radius: .7rem; color: var(--ink); background: #fffaf0; font-weight: 800; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--purple); transform: translateY(-1px); }
button:focus-visible { outline: 3px solid #9f86e3; outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .55; }

.food-tray { padding: 1rem; border-top: 1px solid var(--line); background: #fffaf0; animation: tray-in 180ms ease-out; }
.food-tray[hidden] { display: none; }
.tray-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.tray-heading h2 { margin: .1rem 0 .9rem; font-size: 1.2rem; }
.tray-close { width: 2.3rem; min-height: 2.3rem; padding: 0; }
.food-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.food-options button { display: grid; grid-template-columns: 2.5rem 1fr; min-width: 0; padding: .7rem; text-align: left; }
.food-options svg { grid-row: 1 / 3; width: 2rem; height: 2rem; place-self: center; fill: var(--purple); }
.food-options strong, .food-options small { display: block; }
.food-options small { color: var(--muted); font-size: .72rem; font-weight: 600; }

.care-notes { border-top: 1px solid var(--line); background: #f8f2e8; }
.care-notes summary { padding: .7rem 1rem; color: var(--muted); cursor: pointer; font-size: .78rem; font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; padding: 0 1rem 1rem; }
.stats label { display: grid; grid-template-columns: 1fr auto; gap: .3rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
progress { grid-column: 1 / -1; width: 100%; height: .4rem; border: 0; border-radius: 999px; overflow: hidden; background: #ded4c8; }
progress::-webkit-progress-bar { background: #ded4c8; }
progress::-webkit-progress-value { background: var(--teal); }
progress::-moz-progress-bar { background: var(--teal); }

.pet-memory { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: .8rem 1rem; align-items: center; padding: .9rem 1rem; border-top: 1px solid var(--line); background: #fffaf0; }
.pet-memory h2 { margin: .05rem 0 0; font-size: .92rem; }
.memory-eyebrow { margin: 0; color: var(--purple); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.pet-memory > p { margin: 0; color: var(--muted); font-size: .74rem; }
.pet-memory dl { display: flex; gap: .9rem; margin: 0; }
.pet-memory dl div { min-width: 4.6rem; }
.pet-memory dt { color: var(--muted); font-size: .58rem; }
.pet-memory dd { margin: .1rem 0 0; font-size: .76rem; font-weight: 900; }

footer { margin-top: 1.1rem; color: var(--muted); text-align: center; font-size: .8rem; }
footer p { margin: .35rem 0; }

@keyframes breathe { 50% { transform: translateY(-.16rem) scale(1.012); } }
@keyframes wave { to { transform: rotate(-4deg) translateY(-.2rem); } }
@keyframes hop { to { transform: translateY(-.55rem) rotate(2deg); } }
@keyframes sleep { 50% { transform: scale(.97); opacity: .94; } }
@keyframes tilt { to { transform: rotate(3deg); } }
@keyframes approach-bowl { 50% { transform: translateX(3.8rem); } }
@keyframes walk-to-bowl { 50% { transform: rotate(2deg); } }
@keyframes tray-in { from { opacity: 0; transform: translateY(-.4rem); } }

@media (max-width: 42rem) {
  .intro { display: block; }
  .intro > p { margin-top: .5rem; }
  .room { min-height: 27rem; }
  .window { width: 7rem; height: 9rem; }
  .wall-art { display: none; }
  .mica-character { width: 12rem; height: 12rem; }
  .care-dock { grid-template-columns: repeat(2, 1fr); }
  .food-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Pocket-pet interface */
body {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 18%) 1px, transparent 1px) 0 0 / 18px 18px,
    #d9d2c5;
}

.shell { width: min(31rem, calc(100% - 1rem)); }
.intro { display: block; margin-bottom: .75rem; text-align: center; }
.intro h1 { font-family: "Courier New", monospace; font-size: clamp(1.8rem, 8vw, 2.8rem); letter-spacing: -.06em; }
.intro > p { max-width: 25rem; margin: .45rem auto 0; font-size: .86rem; }

.pet-home {
  position: relative;
  overflow: visible;
  padding: 4.25rem 2.4rem 7.5rem;
  border: .35rem solid #523587;
  border-radius: 48% 48% 42% 42% / 38% 38% 48% 48%;
  background:
    radial-gradient(circle at 18% 20%, #fff 0 .18rem, transparent .2rem),
    radial-gradient(circle at 80% 34%, #b99ce8 0 .16rem, transparent .18rem),
    radial-gradient(circle at 34% 82%, #fff 0 .14rem, transparent .16rem),
    #8d66ca;
  box-shadow: inset 0 .35rem rgb(255 255 255 / 28%), inset 0 -.45rem rgb(44 25 79 / 22%), 0 1.2rem 2rem rgb(55 37 77 / 22%);
}

.pet-home::before {
  position: absolute;
  top: .9rem;
  left: 50%;
  color: #fff;
  content: 'MICA';
  font: 900 1rem/1 "Courier New", monospace;
  letter-spacing: .22em;
  text-shadow: 0 .12rem #50337c;
  transform: translateX(-50%);
}

.room {
  min-height: 18rem;
  border: .55rem solid #382852;
  border-radius: .9rem;
  background: #b9c98b;
  box-shadow: inset 0 0 0 .2rem #71804f, 0 .25rem rgb(255 255 255 / 20%);
  image-rendering: pixelated;
}

.room[data-time="night"] { background: #9aaa73; }
.window, .wall-art, .plant, .rug, .thought { display: none; }

.room::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(62 73 45 / 10%) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(rgb(62 73 45 / 10%) 1px, transparent 1px) 0 0 / 8px 8px;
  content: '';
  pointer-events: none;
}

.room::after {
  position: absolute;
  right: 1rem;
  bottom: 2.4rem;
  left: 1rem;
  height: .25rem;
  background: repeating-linear-gradient(90deg, #53623d 0 .45rem, transparent .45rem .75rem);
  content: '';
}

.room[data-celebrate="true"]::before {
  background:
    radial-gradient(circle at 18% 22%, #fff 0 .2rem, transparent .24rem),
    radial-gradient(circle at 78% 18%, #523587 0 .18rem, transparent .22rem),
    radial-gradient(circle at 70% 58%, #fff 0 .16rem, transparent .2rem),
    radial-gradient(circle at 28% 66%, #523587 0 .16rem, transparent .2rem),
    linear-gradient(90deg, rgb(62 73 45 / 10%) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(rgb(62 73 45 / 10%) 1px, transparent 1px) 0 0 / 8px 8px;
  animation: diary-sparkle .55s steps(2, end) 3;
}

.mica-character { bottom: 2.65rem; width: 11rem; height: 11rem; image-rendering: pixelated; }
.mica-sprite { background-image: url('assets/mica-pixel-sprites.png'); image-rendering: pixelated; animation-timing-function: steps(2, end); }
.room[data-activity="eating"] .mica-character { animation: approach-bowl 1.7s steps(4, end); }

.food-bowl { right: 19%; bottom: 2.9rem; width: 2.8rem; height: 1rem; border: .18rem solid #384329; border-radius: 0 0 .5rem .5rem; background: #71804f; box-shadow: none; }
.message { right: .7rem; bottom: .55rem; left: .7rem; padding: .35rem .45rem; border: 0; border-radius: 0; color: #344126; background: #b9c98b; font: 700 .68rem/1.2 "Courier New", monospace; backdrop-filter: none; }

.need-signals { margin: .7rem 0; border: .22rem solid #523587; background: #d8c5f1; }
.need-signals > span { padding: .4rem .45rem; border-color: #8b6ab9; }
.need-signals strong { font: 800 .68rem/1 "Courier New", monospace; }
.need-signals small { font-size: .56rem; }
.signal { width: .4rem; height: .4rem; margin-top: .12rem; border-radius: 0; background: #3d583c; }

.care-dock {
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
  margin: 0;
  padding: .4rem;
  border: .25rem solid #523587;
  background: #b9c98b;
}

.care-dock button {
  display: grid;
  min-width: 0;
  min-height: 3.45rem;
  padding: .25rem;
  place-items: center;
  border: .18rem solid transparent;
  border-radius: 0;
  color: #344126;
  background: transparent;
  font: 800 .58rem/1 "Courier New", monospace;
}

.care-dock button:hover:not(:disabled),
.care-dock button.is-selected {
  border-color: #344126;
  background: rgb(52 65 38 / 12%);
  transform: none;
}

.care-dock svg { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.care-dock span { display: block; margin-top: .2rem; }

.food-tray {
  position: absolute;
  z-index: 10;
  top: 7.5rem;
  right: 3.3rem;
  left: 3.3rem;
  padding: .6rem;
  border: .3rem solid #344126;
  color: #344126;
  background: #b9c98b;
  font-family: "Courier New", monospace;
}

.tray-heading h2 { font-size: .78rem; }
.tray-eyebrow { color: #344126; font-size: .58rem; }
.tray-close { width: 1.6rem; min-height: 1.6rem; border: .15rem solid #344126; border-radius: 0; color: #344126; background: transparent; }
.food-options { grid-template-columns: repeat(3, 1fr); gap: .2rem; }
.food-options button { display: grid; grid-template-columns: 1fr; min-height: 4.2rem; padding: .25rem; place-items: center; border: .16rem solid #71804f; border-radius: 0; color: #344126; background: transparent; text-align: center; }
.food-options button:hover:not(:disabled) { border-color: #344126; transform: none; }
.food-options svg { grid-row: auto; width: 1.7rem; height: 1.7rem; fill: currentColor; stroke: none; }
.food-options strong { font-size: .62rem; }
.food-options small { display: none; }

.care-notes { margin-top: .5rem; border: 0; color: #fff; background: transparent; }
.care-notes summary { padding: .25rem; color: #fff; font: 700 .6rem/1 "Courier New", monospace; text-align: center; }
.stats { padding: .4rem; border: .18rem solid #523587; background: #d8c5f1; }
.stats label { font: 700 .58rem/1 "Courier New", monospace; }

.device-controls {
  position: absolute;
  right: 4.5rem;
  bottom: 2.25rem;
  left: 4.5rem;
  display: flex;
  align-items: start;
  justify-content: space-around;
}

.device-controls button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: .25rem solid #523587;
  border-radius: 50%;
  color: #fff;
  background: #df6c9b;
  box-shadow: inset 0 .25rem rgb(255 255 255 / 35%), 0 .25rem #523587;
  font: 900 .7rem/1 "Courier New", monospace;
  cursor: pointer;
}

.device-controls button:nth-child(2) { margin-top: .65rem; }
.device-controls button:active { box-shadow: inset 0 .15rem rgb(73 38 77 / 24%); transform: translateY(.2rem); }

footer { font-size: .72rem; }

@keyframes diary-sparkle { 50% { filter: brightness(1.12); } }

@media (max-width: 32rem) {
  .pet-home { padding: 3.7rem 1.45rem 7rem; }
  .room { min-height: 16rem; }
  .mica-character { width: 9rem; height: 9rem; }
  .food-tray { top: 6.5rem; right: 2.1rem; left: 2.1rem; }
  .device-controls { right: 3.2rem; left: 3.2rem; }
  .pet-memory { grid-template-columns: 1fr auto; }
  .pet-memory > p { grid-column: 1 / -1; grid-row: 2; }
}