/* This demo intentionally targets one 1180 x 664 landscape game canvas. */
html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.game-shell {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1180px;
  height: 664px;
  margin: 0;
  border-radius: 28px;
  transform: translate(-50%, -50%) scale(var(--game-scale, 1));
  transform-origin: center;
}

.game-header { padding: 16px 22px 10px; }
.stage { overflow: hidden; padding: 76px 28px 88px; }

.stage--encounter {
  display: block;
  padding: 0;
}

.stage--title {
  display: block;
  padding: 0;
}

.stage--home-arrival {
  display: grid;
  padding: 24px 28px;
}

.stage--home {
  padding-bottom: 28px;
}

.stage--decorate {
  padding: 0;
}

.story-card { padding: 22px; }
.story-card h1 { font-size: 36px; }
.naming-form { grid-template-columns: 1fr; }

.home-layout {
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 332px;
  gap: 20px;
}

.nurture-layout {
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 332px;
  grid-template-rows: 66px minmax(0, 1fr);
  gap: 14px 20px;
}

.cat-stage { min-height: 0; height: 100%; overflow: hidden; border-radius: 28px; place-items: center; }
.cat-stage > img { width: min(56%, 410px); max-height: 86%; }
.cat-stage > .cat-actor:not(.cat-actor--nursing) {
  width: min(50%, 360px);
  height: min(76%, 340px);
  align-self: center;
  justify-self: center;
  margin: 4% 0 0;
}
.cat-stage--compact-home > .cat-actor:not(.cat-actor--nursing),
.cat-stage--compact-home > .home-arrival-cat {
  width: 270px;
  height: 280px;
  margin: 4% 0 0;
  align-self: center;
  justify-self: center;
}
.cat-stage--compact-home .cat-actor .cat-sprite {
  width: auto;
  height: 280px;
  max-height: 100%;
}
.cat-stage--compact-home::after {
  right: calc(50% - 100px);
  bottom: 10%;
  left: auto;
  width: 200px;
}
.cat-stage--kitten-home > .cat-actor:not(.cat-actor--nursing) {
  width: 220px;
  height: 220px;
  margin: 4% 0 0;
}
.cat-stage--kitten-home .cat-actor .cat-sprite { height: 220px; }
.cat-stage--kitten-home::after { right: calc(50% - 80px); bottom: 12%; width: 160px; }
.nurture-layout .cat-stage { grid-column: 1; grid-row: 2; }
.care-panel { grid-column: 2; grid-row: 2; padding: 18px; }
.care-shelf__tray { gap: 7px; }
.care-prop { min-height: 74px; }

.room-decorations {
  display: contents;
}

.room-decor-slot {
  pointer-events: none;
  position: absolute;
  display: grid;
  place-items: end center;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}

.room-decor-contact {
  position: absolute;
  z-index: 0;
  bottom: -3%;
  left: 12%;
  width: 76%;
  height: 18%;
  border-radius: 50%;
  background: rgb(67 43 31 / 22%);
  filter: blur(7px);
  transform: rotateX(68deg);
}

.room-decor {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 13px 9px rgb(82 52 38 / 25%));
  animation: reveal-in 440ms var(--ease) both;
}

.room-decor-slot--window-sill { z-index: 1; bottom: 54%; left: 5%; transform: perspective(620px) rotateY(4deg) scale(.48); }
.room-decor-slot--tabletop { z-index: 3; bottom: 51%; left: 31%; transform: perspective(620px) rotateY(-4deg) scale(.78); }
.room-decor-slot--tabletop-right { z-index: 3; bottom: 51%; left: 40%; transform: perspective(620px) rotateY(-4deg) scale(.78); }
.room-decor-slot--bed-left { z-index: 2; bottom: 37%; left: 62%; transform: perspective(620px) rotateY(-3deg) scale(.7); }
.room-decor-slot--bed-right { z-index: 2; bottom: 36%; left: 72%; transform: perspective(620px) rotateY(-3deg) scale(.7); }
.room-decor-slot--back-left { z-index: 1; bottom: 18%; left: 8%; transform: perspective(620px) rotateY(6deg) scale(.84); }
.room-decor-slot--back-right { z-index: 1; bottom: 16%; left: 73%; transform: perspective(620px) rotateY(-5deg) scale(.88); }
.room-decor-slot--mid-left { z-index: 2; bottom: 13%; left: 27%; transform: perspective(580px) rotateX(34deg) rotateZ(-2deg) scale(.92); }
.room-decor-slot--mid-center { z-index: 2; bottom: 10%; left: 45%; transform: perspective(560px) rotateX(42deg) scale(.96); }
.room-decor-slot--front-left { z-index: 3; bottom: 2%; left: 15%; transform: perspective(520px) rotateX(53deg) rotateZ(-3deg); }
.room-decor-slot--front-right { z-index: 3; bottom: 2%; left: 57%; transform: perspective(520px) rotateX(53deg) rotateZ(3deg); }
.room-decor-item--blanket { width: 210px; }
.room-decor-item--box { width: 138px; }
.room-decor-item--quiet { width: 172px; }
.room-decor-item--wand { width: 150px; }
.room-decor-item--snack { width: 104px; }
.room-decor-item--furJar { width: 96px; }
.room-decor-item--catBed { width: 214px; }
.room-decor-item--windowCushion { width: 205px; }
.room-decor-item--wobbleMouse { width: 88px; }
.room-decor-item--cardboardScratcher { width: 174px; }
.room-decor-item--catWheel { width: 218px; }
.room-decor-item--litterBox { width: 190px; }

.decorate-entry {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgb(126 93 76 / 16%);
  border-radius: 14px;
  background: rgb(255 249 242 / 90%);
  box-shadow: 0 6px 18px rgb(73 52 44 / 9%);
  color: var(--primary-strong);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}
.decorate-entry span { font-size: 18px; }

.decoration-studio {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}

/* Decoration shares the home canvas; only cats, furniture and controls sit above it. */
.decoration-room {
  position: absolute;
  min-width: 0;
  overflow: hidden;
  inset: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.decoration-room__bar {
  position: absolute;
  z-index: 8;
  top: 16px;
  right: 326px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 750;
}
.decoration-room__bar > span {
  padding: 8px 12px;
  border: 1px solid rgb(126 93 76 / 12%);
  border-radius: 12px;
  background: rgb(255 249 242 / 82%);
  backdrop-filter: blur(10px);
}
.decoration-room__cat {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  bottom: 5%;
  left: 48%;
  width: auto;
  height: 49%;
  max-height: 300px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgb(71 46 37 / 22%));
  transform: translateX(-50%);
}

.decoration-slot {
  position: absolute;
  display: grid;
  width: 136px;
  height: 88px;
  place-items: end center;
  overflow: visible;
  border: 1px dashed transparent;
  border-radius: 28px;
  background: transparent;
  cursor: pointer;
  transition: 180ms var(--ease);
}
.decoration-slot::after {
  position: absolute;
  bottom: 8px;
  left: 50%;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgb(65 48 39 / 62%);
  color: rgb(255 246 231 / 92%);
  content: attr(data-slot-label);
  font-size: 10px;
  font-weight: 750;
  opacity: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.decoration-slot > i { align-self: center; color: rgb(126 93 76 / 36%); font-size: 25px; font-style: normal; transform: translateY(-7px); }
.decoration-slot > i { opacity: 0; transition: opacity 180ms var(--ease); }
.decoration-slot.is-ready > i,
.is-decor-dragging .decoration-slot:not(.is-occupied) > i { opacity: 1; }
.decoration-slot.is-occupied { border-color: transparent; background: transparent; }
.decoration-slot.is-occupied::after { content: none; }
.decoration-slot.is-ready,
.is-decor-dragging .decoration-slot:not(.is-occupied) {
  border-color: rgb(223 167 91 / 76%);
  background: rgb(255 236 181 / 18%);
  box-shadow: inset 0 0 28px rgb(255 222 139 / 26%);
}
.decoration-slot.is-ready::after,
.is-decor-dragging .decoration-slot:not(.is-occupied)::after { opacity: 1; }
.decoration-slot:disabled:not(.is-occupied) { cursor: not-allowed; opacity: .22; }
/* Slot anchors sit on the window, table, bed and floor planes authored into the room art. */
.decoration-slot--window-sill { --decoration-item-scale: .48; z-index: 1; bottom: 54%; left: 16%; width: 116px; height: 64px; }
.decoration-slot--tabletop { --decoration-item-scale: .78; z-index: 2; bottom: 51%; left: 30%; width: 92px; height: 62px; }
.decoration-slot--tabletop-right { --decoration-item-scale: .78; z-index: 2; bottom: 51%; left: 40%; width: 92px; height: 62px; }
.decoration-slot--bed-left { --decoration-item-scale: .7; z-index: 2; bottom: 37%; left: 61%; width: 132px; height: 74px; }
.decoration-slot--bed-right { --decoration-item-scale: .7; z-index: 2; bottom: 36%; left: 71%; width: 132px; height: 74px; }
.decoration-slot--back-left { --decoration-item-scale: .84; z-index: 1; bottom: 19%; left: 7%; }
.decoration-slot--back-right { --decoration-item-scale: .84; z-index: 1; bottom: 17%; left: 67%; }
.decoration-slot--mid-left { --decoration-item-scale: .78; z-index: 2; bottom: 14%; left: 26%; }
.decoration-slot--mid-center { --decoration-item-scale: .86; z-index: 2; bottom: 11%; left: 44%; }
.decoration-slot--front-left { --decoration-item-scale: .9; z-index: 3; bottom: 2%; left: 14%; }
.decoration-slot--front-right { --decoration-item-scale: .9; z-index: 3; bottom: 2%; left: 57%; }
.decoration-slot > .room-decor-slot { position: absolute; bottom: 0; left: 50%; cursor: grab; transform: translateX(-50%) scale(var(--decoration-item-scale, 1)); }
.decoration-slot > .room-decor-slot:active { cursor: grabbing; }

.decoration-panel {
  position: absolute;
  z-index: 12;
  top: 78px;
  right: 22px;
  bottom: 22px;
  display: grid;
  width: 286px;
  min-height: 0;
  grid-template-rows: 1fr;
  gap: 14px;
  overflow: hidden;
  padding: 16px;
}
.decor-grid {
  display: grid;
  min-height: 0;
  align-content: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.decor-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(126 93 76 / 12%);
  border-radius: 16px;
  background: rgb(255 252 246 / 74%);
  cursor: grab;
  transition: 180ms var(--ease);
}
.decor-card:active { cursor: grabbing; }
.decor-card.is-selected { border-color: rgb(211 145 107 / 66%); box-shadow: 0 0 0 3px rgb(231 183 104 / 16%); transform: translateY(-2px); }
.decor-card__select {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 8px 6px 28px;
  border: 0;
  background: transparent;
  cursor: inherit;
  text-align: center;
}
.decor-card__select img { width: 100%; height: 62px; object-fit: contain; filter: drop-shadow(0 7px 7px rgb(75 50 40 / 14%)); }
.decor-card__select strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.decor-card__select small { margin-top: 2px; color: var(--ink-soft); font-size: 11px; }
.decor-card__source,
.decor-card__store {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  min-height: 20px;
  border: 0;
  border-radius: 8px;
  background: rgb(120 135 111 / 12%);
  color: #6d7b65;
  cursor: default;
  font-size: 10px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.decor-card__store { background: rgb(185 109 105 / 12%); color: var(--rose-ink); cursor: pointer; }
.decoration-empty { display: grid; align-content: center; justify-items: center; gap: 10px; color: var(--ink-soft); text-align: center; }
.decoration-empty > span { font-size: 46px; opacity: .42; }
.decoration-empty .soft-button { min-height: 40px; padding: 0 16px; }

.is-decor-dragging .decoration-panel[data-decor-store] { box-shadow: inset 0 0 0 2px rgb(211 145 107 / 42%), 0 18px 50px rgb(74 51 45 / 20%); }

.ceremony-layout {
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px 28px;
  text-align: left;
}

.ceremony-copy { grid-column: 1; grid-row: 1; padding: 24px; }
.ceremony-copy h1 { font-size: 38px; }
.hold-lamp { grid-column: 2; grid-row: 1; justify-self: center; }
.ceremony-layout > .progress-panel { grid-column: 1 / -1; grid-row: 2; }
.ceremony-layout > .reveal-grid { grid-column: 2; grid-row: 1; width: 100% !important; }
.ceremony-layout > .swipe-reveal { grid-column: 1 / -1; grid-row: 2; }
.ceremony-layout > .trait-swipe { grid-column: 2; grid-row: 1; justify-self: center; }

.sheet { min-height: 0; height: 100%; max-height: 100%; overflow: auto; padding: 20px; }
.tree-canvas { min-height: max(360px, calc(var(--generation-count, 3) * 116px)); }
.reveal-grid, .adoption-grid, .compendium-grid, .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kitten-card img, .breed-card img { height: 106px; }

.bottom-nav {
  right: auto;
  bottom: 14px;
  left: 50%;
  width: 420px;
  min-height: 58px;
  transform: translateX(-50%);
}

.home-layout > .progress-panel,
.home-layout > .bond-banner {
  min-height: 0;
}

.home-layout .panel-primary {
  position: sticky;
  z-index: 2;
  bottom: 0;
}

.toast { top: 16px; right: auto; bottom: auto; left: 50%; width: max-content; max-width: 360px; transform: translate(-50%, -10px); }
.toast.is-visible { transform: translate(-50%, 0); }