.stage--world,
.stage--shop { overflow: hidden; padding: 0; }

[data-scene="world"] .scene-art { background-image: url("../assets/scenes/world-map-v1.png"); }
[data-scene="shop"] .scene-art { background-image: url("../assets/scenes/supply-shop-v1.png"); }
[data-scene="world"] .scene-vignette,
[data-scene="shop"] .scene-vignette { background: linear-gradient(180deg, rgb(64 48 39 / 8%), transparent 55%, rgb(61 43 34 / 20%)); }

.world-map,
.supply-shop { position: relative; width: 100%; height: 100%; overflow: hidden; }

.world-place {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.world-place::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 5%;
  border: 2px solid transparent;
  border-radius: 28px;
  transition: 180ms ease;
}
.world-place:hover::before,
.world-place:focus-visible::before {
  border-color: rgb(255 239 185 / 82%);
  background: rgb(255 224 148 / 8%);
  box-shadow: inset 0 0 36px rgb(255 221 149 / 18%), 0 0 28px rgb(255 214 128 / 35%);
}
.world-place--home { top: 17%; left: 1%; width: 34%; height: 61%; }
.world-place--shop { top: 18%; right: 0; width: 30%; height: 59%; }
.world-place--neighborhood { top: 3%; left: 52%; width: 22%; height: 37%; }
.world-place > span {
  position: absolute;
  bottom: 3%;
  left: 50%;
  min-width: 86px;
  padding: 7px 12px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 13px;
  background: rgb(67 55 46 / 66%);
  box-shadow: 0 8px 20px rgb(49 36 29 / 18%);
  color: white;
  font-size: 13px;
  backdrop-filter: blur(9px);
}
.world-place--neighborhood > span { bottom: 7%; }
.world-map__route {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 59%;
  left: 48%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff3c9;
  box-shadow: 0 0 0 5px rgb(255 227 158 / 20%), 0 0 18px rgb(255 211 116 / 70%);
  animation: map-route-glow 2.8s ease-in-out infinite alternate;
}

.supply-shop__balance {
  position: absolute;
  z-index: 6;
  top: 7%;
  left: 50%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  transform: translateX(-50%);
  border: 1px solid rgb(255 246 199 / 72%);
  border-radius: 999px;
  background: rgb(67 49 40 / 78%);
  box-shadow: 0 10px 24px rgb(45 30 23 / 23%);
  color: #fff6d8;
  backdrop-filter: blur(10px);
}
.supply-shop__balance span { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.supply-shop__balance b { color: #ffe28e; font-family: var(--font-display); font-size: 22px; }
.supply-shop__goods { display: contents; }
.shop-good {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: end center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.shop-good[data-good-id="wand"] { top: 24%; left: 3%; width: 13%; height: 33%; }
.shop-good[data-good-id="laser"] { top: 24%; left: 16%; width: 13%; height: 33%; }
.shop-good[data-good-id="catBed"] { top: 22%; left: 14%; width: 16%; height: 34%; }
.shop-good[data-good-id="windowCushion"] { top: 17%; left: 31%; width: 20%; height: 40%; }
.shop-good[data-good-id="wobbleMouse"] { top: 54%; left: 17%; width: 14%; height: 22%; }
.shop-good[data-good-id="rose-bow"] { top: 16%; right: 7%; width: 20%; height: 18%; }
.shop-good[data-good-id="amber-collar"] { top: 36%; right: 7%; width: 20%; height: 18%; }
.shop-good[data-good-id="sun-scarf"] { top: 56%; right: 7%; width: 20%; height: 18%; }
.shop-good[data-good-id="catFurniturePack"] { top: 56%; left: 34%; width: 20%; height: 22%; }
.shop-good[data-good-id="small-cardboard"] { top: 72%; left: 2%; width: 16%; height: 24%; }
.shop-good[data-good-id="small-twig"] { top: 72%; left: 31%; width: 16%; height: 24%; }
.shop-good[data-good-id="small-toy"] { top: 72%; left: 77%; width: 16%; height: 24%; }
.shop-good[data-good-id="bead-pattern"] { top: 78%; left: 60%; width: 14%; height: 18%; }
.shop-good img {
  width: 84%;
  height: 76%;
  object-fit: contain;
  filter: drop-shadow(0 14px 11px rgb(74 49 36 / 24%));
  transform-origin: 50% 90%;
  transition: transform 180ms var(--ease), filter 180ms ease;
}
.shop-good[data-good-id="wand"] img { width: 62%; transform: rotate(-18deg); }
.shop-good[data-good-id="laser"] img { width: 52%; transform: rotate(-18deg); }
.shop-good[data-good-id="catBed"] img { width: 74%; height: 66%; object-fit: contain; }
.shop-good[data-good-id="windowCushion"] img { width: 72%; height: 68%; object-fit: contain; }
.shop-good[data-good-id="wobbleMouse"] img { width: 62%; height: 68%; }
.shop-good[data-good-id="catFurniturePack"] img { width: 90%; height: 58%; object-fit: contain; }
.shop-good[data-good-id="bead-pattern"] img { width: 88%; height: 76%; }
.shop-good__outfit { display: block; width: 68px; height: 68px; margin-bottom: 28px; background: url("../assets/props/cat-outfits-v1.png") calc(var(--outfit-index) * 50%) 50% / 300% 100% no-repeat; filter: drop-shadow(0 10px 8px rgb(74 49 36 / 20%)); transition: transform 180ms var(--ease), filter 180ms ease; }
.shop-good__glyph { display: block; margin-bottom: 28px; color: #6b4a3a; font-size: 42px; font-style: normal; line-height: 1; filter: drop-shadow(0 10px 8px rgb(74 49 36 / 20%)); transition: transform 180ms var(--ease), filter 180ms ease; }
.shop-good:hover img,
.shop-good:focus-visible img,
.shop-good:hover .shop-good__outfit,
.shop-good:focus-visible .shop-good__outfit,
.shop-good:hover .shop-good__glyph,
.shop-good:focus-visible .shop-good__glyph { transform: translateY(-7px) rotate(-2deg) scale(1.04); filter: drop-shadow(0 18px 14px rgb(74 49 36 / 31%)); }
.shop-good[data-good-id="wand"]:hover img,
.shop-good[data-good-id="wand"]:focus-visible img,
.shop-good[data-good-id="laser"]:hover img,
.shop-good[data-good-id="laser"]:focus-visible img { transform: translateY(-7px) rotate(-22deg) scale(1.05); }
.shop-good > span {
  position: absolute;
  bottom: -4px;
  display: grid;
  min-width: 104px;
  gap: 1px;
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 13px;
  background: rgb(255 250 238 / 82%);
  color: var(--ink);
  box-shadow: 0 7px 18px rgb(77 53 42 / 14%);
  backdrop-filter: blur(10px);
}
.shop-good[data-good-id="wand"] > span,
.shop-good[data-good-id="laser"] > span { min-width: 88px; padding-inline: 7px; }
.shop-good[data-good-id="small-twig"] img { width: 68px; height: 72px; object-fit: contain; }
.shop-good[data-good-id="small-twig"] > span {
  left: auto;
  right: calc(50% + 40px);
  bottom: 0;
}
.shop-good b { font-size: 12px; }
.shop-good small { color: var(--rose-ink); font-size: 10px; font-weight: 850; }
.shop-good__note {
  display: block;
  min-width: 0;
  max-width: none;
  margin: 5px -6px -2px;
  padding: 5px 8px;
  border: 1px solid rgb(255 228 176 / 70%);
  border-radius: 10px;
  background: rgb(91 58 44 / 78%);
  box-shadow: 0 8px 16px rgb(67 42 32 / 18%);
  color: #ffe7b2;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.shop-good.is-owned:disabled { cursor: default; filter: none; opacity: 1; }
.shop-good.is-owned :is(img, .shop-good__outfit, .shop-good__glyph) { opacity: .9; }
.shop-good.is-owned > span { background: rgb(239 233 218 / 78%); }
.shop-good.is-unavailable:disabled { cursor: not-allowed; filter: saturate(.55); opacity: .72; }
.shop-good.is-unavailable small { color: #795e57; }

.room-decor-item--windowCushion { width: 210px; }
.room-decor-item--cardboardScratcher { width: 190px; }
.room-decor-item--catWheel { width: 190px; }
.room-decor-item--litterBox { width: 175px; }
.room-decor-slot.is-cat-chosen::after {
  pointer-events: none;
  content: "✦";
  position: absolute;
  z-index: 3;
  top: 8%;
  right: 4%;
  color: #fff0b9;
  font-size: 18px;
  filter: drop-shadow(0 0 7px rgb(255 204 103 / 78%));
  animation: chosen-space-glow 1.8s ease-in-out infinite alternate;
}
.cat-stage > .cat-actor--space-window { transform: translate3d(-126px, -14px, 0) scale(.94); }
.cat-stage > .cat-actor--space-table { transform: translate3d(126px, -8px, 0) scale(.95); }
.cat-stage > .cat-actor--space-rest { transform: translate3d(0, 22px, 0) scale(.98); }
.cat-stage > .cat-actor[data-roam-space="window"] { --room-walk-ms: calc(var(--room-walk-cycle-ms) * 2); transform: translate3d(-126px, -14px, 0) scale(.94); }
.cat-stage > .cat-actor[data-roam-space="table"] { --room-walk-ms: calc(var(--room-walk-cycle-ms) * 2); transform: translate3d(126px, -8px, 0) scale(.95); }
.cat-stage > .cat-actor[data-roam-space="rest"] { --room-walk-ms: calc(var(--room-walk-cycle-ms) * 2); transform: translate3d(0, 22px, 0) scale(.98); }
.cat-stage > .cat-actor[data-can-roam] { transition-duration: var(--room-walk-ms); transition-timing-function: cubic-bezier(.4, 0, .6, 1); }
.cat-stage > .cat-actor[data-ambient-phase="roam"] { z-index: 5; }

.tool-cursor[data-tool-id="wand"] {
  --tool-contact-x: 67%;
  --tool-contact-y: 21%;
  --tool-rotation: -18deg;
  width: 96px;
  height: 96px;
}
.tool-cursor[data-tool-id="laser"] {
  --tool-contact-x: 8%;
  --tool-contact-y: 87%;
  --tool-rotation: -28deg;
  width: 70px;
  height: 70px;
}
.tool-cursor[data-tool-id="laser"]::after {
  content: "";
  position: absolute;
  top: var(--tool-contact-y);
  left: var(--tool-contact-x);
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 2px solid rgb(255 236 216 / 90%);
  border-radius: 50%;
  background: #f0474e;
  box-shadow: 0 0 8px 3px rgb(244 67 77 / 65%), 0 0 22px 7px rgb(244 67 77 / 23%);
}
.game-shell[data-tool-phase="gesture"] .tool-cursor[data-tool-id="laser"]::after { animation: laser-dot 420ms ease-in-out infinite alternate; }
.cat-actor.is-care-gesture[data-care-gesture="wand"]::before {
  top: 27%;
  left: 10%;
  width: 80%;
  height: 50%;
  transform: scaleX(var(--care-progress));
  transform-origin: 0 50%;
  border-top: 3px dashed rgb(255 224 141 / 88%);
  border-radius: 50%;
  filter: drop-shadow(0 2px 3px rgb(165 93 57 / 42%));
}
.cat-actor.is-care-gesture[data-care-gesture="laser"]::before {
  top: 17%;
  right: 5%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(#f06a6e calc(var(--care-progress) * 1turn), rgb(255 250 238 / 38%) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
}
.cat-performer.is-wand-playing { animation: wand-play 2.05s cubic-bezier(.22, .78, .2, 1) both; }
.cat-performer.is-laser-chasing { animation: laser-chase 2.25s cubic-bezier(.2, .7, .2, 1) both; }
.cat-performer.play-style--quick { --play-x: 76px; --play-turn: -4deg; }
.cat-performer.play-style--social { --play-x: 48px; --play-turn: 3deg; }
.cat-performer.play-style--burst { --play-x: 84px; --play-turn: -2deg; }
.cat-performer.play-style--soft { --play-x: 32px; --play-turn: 1deg; }
.cat-performer.play-style--wide { --play-x: 62px; --play-turn: 5deg; }
.pet-particle--laser { color: #f04d55; font-size: 26px; text-shadow: 0 0 7px rgb(255 63 73 / 72%); }
.pet-particle--toy { color: #ffe8a8; font-size: 24px; text-shadow: 0 2px 7px rgb(151 83 51 / 30%); }

@keyframes map-route-glow { to { transform: translate3d(24px, -9px, 0) scale(.78); opacity: .62; } }
@keyframes chosen-space-glow { to { transform: translateY(-5px) rotate(12deg); opacity: .55; } }
@keyframes laser-dot { to { transform: scale(.72); opacity: .72; } }
@keyframes wand-play {
  0%, 10% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  20% { transform: translate3d(-7px, 6px, 0) rotate(-2deg) scale(1.055, .925); }
  32% { transform: translate3d(calc(var(--play-x, 58px) * .22), -10px, 0) rotate(calc(var(--play-turn, -2deg) * .35)) scale(.975, 1.045); }
  46% { transform: translate3d(calc(var(--play-x, 58px) * .68), -24px, 0) rotate(var(--play-turn, -2deg)) scale(1.035, .965); }
  58% { transform: translate3d(var(--play-x, 58px), -14px, 0) rotate(var(--play-turn, -2deg)) scale(1.02, .98); }
  68% { transform: translate3d(calc(var(--play-x, 58px) * 1.04), 4px, 0) rotate(1deg) scale(1.075, .91); }
  78% { transform: translate3d(calc(var(--play-x, 58px) * .78), -2px, 0) rotate(-.5deg) scale(.985, 1.025); }
  90% { transform: translate3d(calc(var(--play-x, 58px) * .28), 0, 0) rotate(.2deg) scale(1.005, .995); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes laser-chase {
  0%, 8% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  18% { transform: translate3d(8px, 5px, 0) rotate(1.5deg) scale(1.045, .94); }
  30% { transform: translate3d(calc(var(--play-x, 58px) * -.42), -8px, 0) rotate(calc(var(--play-turn, 2deg) * -1)) scale(.98, 1.025); }
  42% { transform: translate3d(calc(var(--play-x, 58px) * -.6), 2px, 0) rotate(calc(var(--play-turn, 2deg) * -.6)) scale(1.04, .94); }
  54% { transform: translate3d(calc(var(--play-x, 58px) * -.12), -18px, 0) rotate(0) scale(.97, 1.045); }
  66% { transform: translate3d(calc(var(--play-x, 58px) * .7), -22px, 0) rotate(var(--play-turn, 2deg)) scale(1.035, .965); }
  76% { transform: translate3d(var(--play-x, 58px), 3px, 0) rotate(calc(var(--play-turn, 2deg) * .5)) scale(1.08, .9); }
  86% { transform: translate3d(calc(var(--play-x, 58px) * .62), -2px, 0) rotate(-.4deg) scale(.985, 1.025); }
  94% { transform: translate3d(calc(var(--play-x, 58px) * .22), 0, 0) rotate(.2deg) scale(1.004, .996); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .world-map__route,
  .room-decor-slot.is-cat-chosen::after,
  .tool-cursor[data-tool-id="laser"]::after { animation: none; }
  .cat-performer.is-wand-playing,
  .cat-performer.is-laser-chasing,
  .cat-performer.is-roaming { animation-duration: 1ms; }
  .cat-actor { --room-walk-ms: 1ms; }
  .cat-stage > .cat-actor[data-can-roam] { transition-duration: var(--room-walk-ms); }
  .cat-performer.is-roaming .cat-room-walk-sprite { animation: none; }
}