.stage--doorstep {
  display: grid;
  place-items: center;
  padding: 34px 48px;
}

.doorstep-layout {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 24px;
}

.doorstep-card { align-self: center; min-height: 390px; padding: 34px; }
.opening-day-card--doorstep { position: static; margin-bottom: 20px; color: var(--ink); filter: none; }
.story-card .opening-day-card--doorstep .opening-day { font-family: var(--font-sans); font-size: 60px; }
.opening-day-card--doorstep .opening-place { color: var(--ink-soft); }
.doorstep-card h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 34px; }
.doorstep-paws { margin-top: 54px; color: rgb(217 138 134 / 56%); font-size: 29px; letter-spacing: 0.25em; transform: rotate(-8deg); }
.doorstep-scene {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgb(56 42 39 / 28%), transparent 45%),
    url("../assets/scenes/starter-home-depth-v2.png") center / cover;
  box-shadow: 0 24px 56px rgb(44 35 34 / 26%);
}

.doorstep-door {
  position: absolute;
  top: 7%;
  bottom: 8%;
  left: 8%;
  width: 42%;
  border: 10px solid #765443;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(110deg, #f9dca9, #fff4d1 60%, #ddb883);
  box-shadow: inset 0 0 0 5px rgb(255 255 255 / 35%), 20px 14px 38px rgb(49 31 26 / 24%);
  transform-origin: 0 50%;
}

.doorstep-door i { position: absolute; right: 12%; width: 70%; height: 31%; border: 2px solid rgb(126 84 60 / 28%); border-radius: 5px; }
.doorstep-door i:first-child { top: 9%; }
.doorstep-door i:nth-child(2) { bottom: 9%; }
.doorstep-door b { position: absolute; top: 50%; right: 8%; width: 12px; height: 12px; border-radius: 50%; background: #8c6046; box-shadow: 0 1px 0 #fff0c7 inset; }
.doorstep-layout.is-entering .doorstep-door { animation: doorstep-open 900ms var(--ease) forwards; }

.doorstep-kitten {
  position: absolute;
  z-index: 3;
  bottom: 13%;
  left: 32%;
  width: 180px;
  filter: drop-shadow(0 18px 18px rgb(45 31 28 / 32%));
  transform-origin: 50% 100%;
}

.doorstep-layout.is-entering .doorstep-kitten { animation: doorstep-kitten-enter 1.8s 260ms var(--ease) forwards; }
.doorstep-layout.is-naming .doorstep-kitten { left: 25%; }
.doorstep-layout.is-naming .doorstep-owner-tag { left: 30%; }

.doorstep-owner-tag {
  position: absolute;
  z-index: 5;
  top: 18%;
  left: 38%;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  background: rgb(255 250 238 / 88%);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 22px rgb(51 35 31 / 18%);
}

.doorstep-action { position: absolute; z-index: 6; right: 22px; bottom: 22px; display: grid; width: 300px; gap: 10px; padding: 20px; }
.doorstep-action h2 { margin: 0; font-family: var(--font-display); font-size: 26px; }
.doorstep-action p { margin: 0 0 6px; color: var(--ink-soft); font-size: var(--text-sm); line-height: var(--line-relaxed); }
.doorstep-naming .naming-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 7px; }
.doorstep-entering-status { color: var(--accent-deep); font-size: 14px; font-weight: 900; letter-spacing: 0.08em; }

.owner-tag {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: #f4dfc1;
  color: #805f43;
  font-size: 12px;
  font-weight: 900;
}

.owner-tag--cat {
  position: absolute;
  z-index: 6;
  top: 20px;
  left: 22px;
  box-shadow: 0 8px 18px rgb(73 48 40 / 15%);
}

.neighbor-actions { display: grid; gap: 8px; margin-top: 12px; }
.neighbor-actions .primary-button, .neighbor-actions .soft-button { width: 100%; }
.neighbor-actions .interaction-tip { margin: 0; }

/* The archive takes the whole canvas; its rail replaces both global navigation bars. */
.stage--archive { overflow: hidden; padding: 16px; }
.community-archive {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
}
.archive-rail {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 52px;
  padding: 8px;
  border-radius: 20px;
}
.archive-tabs {
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 6px;
}
.archive-tab,
.archive-home {
  display: grid;
  min-height: 54px;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 1px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  text-align: center;
}
.archive-tab span,
.archive-home span { font-size: 20px; line-height: 1; }
.archive-tab b,
.archive-home b { font-size: var(--text-xs); letter-spacing: .04em; }
.archive-tab.is-active {
  border-color: rgb(178 116 105 / 20%);
  background: linear-gradient(135deg, #f8e9e2, #f1ded7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
  color: var(--rose-ink);
}
.archive-home {
  min-height: 46px;
  border-color: rgb(126 93 76 / 10%);
  background: rgb(255 250 244 / 62%);
}
.game-shell[data-system-view="archive"] .audio-toggle {
  top: auto;
  right: auto;
  bottom: 76px;
  left: 44px;
  width: 36px;
  height: 36px;
}
.game-shell[data-system-view="archive"] .audio-toggle span { font-size: 17px; }
.archive-panel {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 14px;
  border-radius: 22px;
}
.archive-panel .care-compendium { margin-top: 0; }
.archive-panel .genealogy-sheet { display: grid; min-height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.archive-panel .tree-scroll { max-height: none; min-height: 0; }
.archive-neighbors {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgb(126 93 76 / 14%);
  border-radius: 20px;
  background: rgb(255 250 242 / 72%);
}
.archive-neighbors > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.archive-neighbors > header b { color: var(--ink-soft); font-size: var(--text-xs); }
.archive-neighbors .panel-primary { width: min(100%, 330px); margin: 12px auto 0; }

.archive-section-label {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 9px;
  color: var(--ink-soft);
  font-size: var(--text-xs);
}
.archive-section-label span { color: var(--ink); font-weight: 900; letter-spacing: .06em; }
.archive-section-label b { color: var(--rose-ink); font-weight: 900; }


@keyframes doorstep-open {
  from { transform: perspective(900px) rotateY(0); }
  to { transform: perspective(900px) rotateY(-68deg); }
}

@keyframes doorstep-kitten-enter {
  0% { opacity: 0.82; transform: translate(0, 0) scale(0.82); }
  55% { opacity: 1; transform: translate(80px, 12px) scale(0.96); }
  100% { opacity: 1; transform: translate(170px, 20px) scale(1.08); }
}



.neighbor-panel {
  display: grid;
  align-content: start;
  gap: 4px;
  overflow: auto;
  background: linear-gradient(155deg, rgb(255 251 244 / 96%), rgb(238 225 206 / 90%));
  scrollbar-width: thin;
}
.neighbor-panel .progress-track { height: 6px; margin: 9px 0 5px; }
.neighbor-panel .intimacy-loop { margin-top: 9px; }
.connection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  margin: 0 2px;
  padding: 5px 2px 7px;
  border-bottom: 1px solid rgb(126 93 76 / 10%);
}
.connection-row span { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; }
.connection-row b { color: var(--rose-ink); font-family: var(--font-display); font-size: 14px; letter-spacing: .06em; }

.achievement-chip {
  position: relative;
  width: fit-content;
  border-radius: var(--radius-sm);
  color: #90603e;
  font-size: var(--text-xs);
  font-weight: 800;
  margin-top: 9px;
  padding: 8px 11px 8px 30px;
  border: 1px solid rgb(198 134 67 / 24%);
  background: linear-gradient(120deg, #fff5d9, #f5ddaf);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 4px 10px rgb(114 74 41 / 8%);
}
.achievement-chip::before {
  position: absolute;
  top: 50%;
  left: 10px;
  color: #bd7b35;
  content: "✦";
  font-size: 15px;
  transform: translateY(-50%);
}

.cat-stage > .care-shelf--neighbor {
  position: absolute;
  z-index: 9;
  top: 18px;
  left: 18px;
  margin: 0;
}
/* The relationship wall uses fine thread and taped photos; the line stays quiet enough to read as a bond, not a flowchart. */
.photo-wall {
  position: relative;
  display: grid;
  min-height: 190px;
  grid-template-columns: 156px minmax(210px, 1fr) 156px;
  align-items: center;
  gap: 20px;
  padding: 23px 30px;
  overflow: hidden;
  border: 2px solid #bf9369;
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 20%, rgb(255 255 255 / 45%) 0 2px, transparent 3px),
    linear-gradient(135deg, rgb(136 94 62 / 12%) 0 1px, transparent 1px) 0 0 / 22px 22px,
    #ddc4aa;
  box-shadow:
    inset 0 0 0 7px rgb(242 222 197 / 70%),
    inset 0 0 0 8px rgb(114 77 51 / 12%),
    0 8px 18px rgb(75 51 44 / 10%);
}

.wall-photo {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 140px;
  padding: 11px 9px 9px;
  border: 2px solid #fffdf8;
  border-radius: 3px;
  box-shadow: 0 5px 11px rgb(75 51 44 / 14%);
  text-align: center;
}
.wall-photo::before {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: 50%;
  width: 46px;
  height: 13px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgb(245 220 170 / 74%);
  content: "";
}
.wall-photo img { width: 92px; height: 92px; object-fit: contain; }
.wall-player-mark { position: absolute; top: 12px; left: 12px; display: grid; width: 26px; height: 26px; place-items: center; border: 2px solid #fff9ec; border-radius: 50%; background: #ad6d62; box-shadow: 0 4px 10px rgb(82 53 43 / 20%); color: white; font-size: 11px; font-weight: 900; }
.wall-photo b { margin-top: 3px; font-family: var(--font-display); font-size: var(--text-sm); }
.wall-photo small { color: var(--ink-soft); font-size: var(--text-xs); }
.wall-photo--mine { transform: rotate(-2deg); }
.wall-photo--snapshot { background: #fffdf8; box-shadow: 0 8px 16px rgb(75 51 44 / 18%); }
.wall-photo--snapshot img { background: #f7ead6; }
.wall-photo--neighbor { transform: rotate(2deg); }
.wall-photo--empty { border-color: rgb(255 253 248 / 84%); background: rgb(255 249 242 / 85%); color: var(--ink-soft); }
.wall-photo--empty > span { display: grid; width: 72px; height: 72px; place-items: center; border: 2px dashed #cba37e; border-radius: 50%; color: #c5966e; font-size: 30px; }
.wall-photo--mine-empty { transform: rotate(-2deg); background: #f3e7d5; }
.wall-photo--mine-empty > span { border-color: #c69b73; border-style: solid; font-size: 24px; }

.wall-thread { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: #765449; text-align: center; }
.wall-thread i {
  position: relative;
  height: 25px;
  border-top: 1.5px solid rgb(154 91 87 / 72%);
  border-radius: 50%;
  background: none;
}
.wall-thread i:first-child { transform: rotate(3deg); }
.wall-thread i:last-child { transform: rotate(-3deg); }
.wall-thread i::after {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 7px;
  height: 7px;
  border: 1px solid rgb(126 75 66 / 20%);
  border-radius: 50%;
  background: #cf856f;
  box-shadow: 0 2px 3px rgb(81 49 40 / 18%);
  content: "";
}
.wall-thread i:last-child::after { right: auto; left: -2px; }
.wall-thread span {
  min-width: 142px;
  padding: 8px 12px;
  border: 1px solid rgb(137 93 66 / 12%);
  background: rgb(255 248 237 / 94%);
  line-height: 1.42;
  box-shadow: 0 3px 8px rgb(75 51 44 / 9%);
}
.wall-thread b { font-family: var(--font-display); font-size: 15px; letter-spacing: .05em; }
.wall-thread small { color: var(--ink-soft); font-size: var(--text-xs); }
.photo-wall-visit {
  position: absolute;
  right: 20px;
  bottom: 14px;
  min-height: var(--control-sm);
  padding: 0 12px;
  border-color: rgb(134 91 63 / 12%);
  border-radius: var(--radius-sm);
  background: rgb(255 249 239 / 92%);
  font-size: var(--text-xs);
}

/* Item discovery, first use, and achievement lighting are three clearly different visual states. */
.care-compendium {
  margin: 0 0 14px;
  padding: 13px;
  border: 1px solid rgb(131 91 68 / 14%);
  border-radius: 23px;
  background:
    radial-gradient(circle at 92% 8%, rgb(231 183 104 / 20%), transparent 24%),
    linear-gradient(145deg, #fff8ed, #efe8d8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%);
}
.care-compendium-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.care-compendium-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 184px;
  grid-template-rows: 82px auto auto 1fr;
  align-content: start;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgb(126 93 76 / 12%);
  border-radius: 15px;
  background: rgb(255 252 246 / 82%);
  box-shadow: 0 5px 13px rgb(77 52 42 / 7%);
}
.care-compendium-art {
  display: grid;
  height: 74px;
  place-items: center;
  border-radius: 11px;
  background: radial-gradient(circle, rgb(255 255 255 / 92%), rgb(235 220 199 / 54%));
}
.care-compendium-art img { width: 82px; height: 70px; object-fit: contain; filter: drop-shadow(0 6px 6px rgb(76 49 38 / 14%)); }
.care-compendium-state {
  width: fit-content;
  margin-top: -5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eee2d2;
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 900;
}
.care-compendium-card h4 { margin: 7px 0 4px; font-size: 13px; }
.care-compendium-card p { margin: 0 0 8px; color: var(--ink-soft); font-size: var(--text-xs); line-height: 1.45; }
.care-compendium-card.is-locked { border-style: dashed; background: rgb(242 235 225 / 66%); }
.care-compendium-card.is-locked .care-compendium-art { background: rgb(218 207 194 / 45%); }
.care-compendium-card.is-locked .care-compendium-art img { filter: grayscale(1) sepia(.28) brightness(.48) opacity(.38); }
.care-compendium-card.is-locked h4,
.care-compendium-card.is-locked p { color: rgb(89 69 63 / 55%); }

.care-compendium-card.is-unlocked {
  border-color: rgb(120 135 111 / 30%);
  background: linear-gradient(155deg, #fbfff4, #eef1e6);
}
.care-compendium-card.is-unlocked .care-compendium-state { background: #dfe8d4; color: #5f7058; }
.care-compendium-card.is-achieved {
  border-color: rgb(210 147 73 / 46%);
  background:
    radial-gradient(circle at 86% 8%, rgb(255 239 178 / 82%), transparent 23%),
    linear-gradient(155deg, #fffdf0, #f5dfba);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 78%), 0 7px 17px rgb(135 86 42 / 13%);
  animation: compendium-light 520ms var(--ease) both;
}
.care-compendium-card.is-achieved::after {
  position: absolute;
  top: 8px;
  right: 9px;
  color: #bd7b35;
  content: "✦";
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgb(113 68 33 / 18%));
}
.care-compendium-card.is-achieved .care-compendium-state { background: #e9c67f; color: #70491f; }
.care-compendium-achievement {
  align-self: end;
  padding: 6px 7px;
  border-radius: 9px;
  background: rgb(255 250 230 / 76%);
  color: #915c2d;
  font-size: var(--text-xs);
  line-height: 1.35;
}
.care-compendium-hint { align-self: end; color: #65715d; font-size: var(--text-xs); line-height: 1.35; }

@keyframes compendium-light {
  from { transform: translateY(6px); filter: brightness(.92); opacity: .5; }
  to { transform: translateY(0); filter: brightness(1); opacity: 1; }
}