.cat-outfit {
  --outfit-anchor-x: 50%;
  --outfit-anchor-y: 68%;
  --outfit-pin-x: -50%;
  --outfit-pin-y: -50%;
  --outfit-width: 50%;
  pointer-events: none;
  position: absolute;
  z-index: 8;
  top: var(--outfit-anchor-y);
  left: var(--outfit-anchor-x);
  width: var(--outfit-width);
  aspect-ratio: 1;
  background: url("../assets/props/cat-outfits-v1.png") calc(var(--outfit-index) * 50%) 50% / 300% 100% no-repeat;
  filter: drop-shadow(0 5px 4px rgb(63 38 28 / 22%));
  translate: var(--outfit-pin-x) var(--outfit-pin-y);
  transform: rotate(-1deg);
  transform-origin: 50% 50%;
}

.cat-outfit--amber-collar { --outfit-width: 45%; }
.cat-outfit--sun-scarf { --outfit-width: 56%; }
[data-cat-stage="month2"] .cat-outfit,
[data-cat-stage="month3"] .cat-outfit { --outfit-anchor-y: 74%; --outfit-width: 38%; }
[data-cat-stage="month2"] .cat-outfit--amber-collar,
[data-cat-stage="month3"] .cat-outfit--amber-collar { --outfit-width: 34%; }
[data-cat-stage="month2"] .cat-outfit--sun-scarf,
[data-cat-stage="month3"] .cat-outfit--sun-scarf { --outfit-width: 42%; }
.cat-performer.is-action-pose > .cat-outfit { opacity: 0; }

.cat-actor[data-cat-stage="adult1y"] .cat-outfit--actor { --outfit-anchor-x: 29.5%; --outfit-anchor-y: 40.5%; --outfit-width: 25%; }
.cat-actor[data-cat-stage="adult1y"] .cat-outfit--actor.cat-outfit--amber-collar { --outfit-width: 30%; }
.cat-actor[data-cat-stage="adult1y"] .cat-outfit--actor.cat-outfit--sun-scarf { --outfit-width: 34%; }

/* The walking pose is identity-locked, so its outfit uses the same stable neck socket. */
.cat-performer.is-roaming > .cat-outfit--actor { --outfit-anchor-y: 65%; --outfit-width: 17%; left: 76%; transform: scaleX(.78) rotate(-6deg); }
.cat-performer.is-roaming > .cat-outfit--actor.cat-outfit--amber-collar { --outfit-width: 16%; }
.cat-performer.is-roaming > .cat-outfit--actor.cat-outfit--sun-scarf { --outfit-width: 19%; }
.cat-actor[data-roam-direction="left"] .cat-performer.is-roaming > .cat-outfit--actor { left: 24%; transform: scaleX(-.78) rotate(-6deg); }

.stage--studio { overflow: hidden; padding: 0; }

.ugc-studio {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 20%, rgb(255 248 223 / 92%), transparent 29%),
    linear-gradient(145deg, #d7ae83 0 16%, #f2dfc7 16% 73%, #c58967 73%);
  color: #57433e;
}

.ugc-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(89 52 40 / 13%) 0 12%, transparent 12%);
  pointer-events: none;
}

.ugc-studio > header {
  position: absolute;
  z-index: 12;
  top: 18px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ugc-studio > header > button,
.ugc-studio > header nav button {
  height: 42px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 14px;
  background: rgb(255 250 239 / 78%);
  box-shadow: 0 8px 22px rgb(72 46 37 / 12%);
  color: #6c514b;
  backdrop-filter: blur(12px);
}

.ugc-studio > header > button { width: 42px; font-size: 28px; }
.ugc-studio > header nav { display: flex; gap: 7px; }
.ugc-studio > header nav button { min-width: 78px; padding: 0 18px; font-weight: 850; }
.ugc-studio > header nav button.is-active { background: #a95f62; color: #fff9ef; }
.ugc-studio__content { position: absolute; inset: 76px 24px 24px; z-index: 2; }

.ugc-wardrobe,
.ugc-photo,
.ugc-postcard {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 24px;
}

.ugc-cat-portrait,
.ugc-photo__preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ugc-cat-portrait > img {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(67%, 570px);
  height: 84%;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 18px rgb(77 47 34 / 16%));
}

.ugc-cat-portrait figcaption {
  position: absolute;
  bottom: 18px;
  left: 24px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgb(89 63 55 / 76%);
  color: #fff8ea;
  font-weight: 800;
}

.ugc-cat-portrait__outfit { --outfit-anchor-x: 38%; --outfit-anchor-y: 42%; --outfit-width: 14%; }
.ugc-cat-portrait__outfit.cat-outfit--amber-collar { --outfit-width: 15%; }
.ugc-cat-portrait__outfit.cat-outfit--sun-scarf { --outfit-width: 18%; }
.ugc-photo__subject {
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: 7%;
  height: 84%;
  opacity: 0;
  visibility: hidden;
  filter: var(--photo-filter);
  transform: translateX(-50%) translate(var(--frame-x), var(--frame-y)) scale(var(--frame-scale));
  transform-origin: 50% 100%;
}
.ugc-photo__subject > img { display: block; width: auto; height: 100%; filter: drop-shadow(0 18px 18px rgb(77 47 34 / 16%)); }
.ugc-photo__sticker {
  pointer-events: none;
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 26px;
  color: #b95f66;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  text-shadow: 0 4px 10px rgb(87 48 36 / 18%);
}
.ugc-photo__subject > .ugc-photo__outfit { --outfit-anchor-x: var(--photo-outfit-anchor-x); --outfit-anchor-y: var(--photo-outfit-anchor-y); --outfit-width: var(--photo-outfit-width); }
.ugc-photo:has(input[name="poseId"][value="idle"]:checked) [data-photo-preview-pose="idle"],
.ugc-photo:has(input[name="poseId"][value="pounce"]:checked) [data-photo-preview-pose="pounce"],
.ugc-photo:has(input[name="poseId"][value="nibble"]:checked) [data-photo-preview-pose="nibble"],
.ugc-photo:has(input[name="poseId"][value="stretch"]:checked) [data-photo-preview-pose="stretch"],
.ugc-photo:has(input[name="poseId"][value="paw-lick"]:checked) [data-photo-preview-pose="paw-lick"],
.ugc-photo:has(input[name="poseId"][value="stare"]:checked) [data-photo-preview-pose="stare"] { opacity: 1; visibility: visible; }

.ugc-choice-panel,
.ugc-photo__controls,
.ugc-postcard__controls {
  min-height: 0;
  padding: 24px 0 24px 24px;
  border: 0;
  border-left: 1px solid rgb(121 76 58 / 18%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.ugc-choice-panel { display: flex; flex-direction: column; justify-content: center; gap: 13px; }
.ugc-outfit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ugc-outfit-choice,
.ugc-none-choice,
.ugc-shop-link {
  border: 1px solid #dbc0ac;
  border-radius: 18px;
  background: #fffdf7;
  color: #624943;
}
.ugc-outfit-choice { position: relative; display: grid; height: 138px; place-items: end center; padding: 10px 7px; }
.ugc-outfit-choice .cat-outfit { --outfit-anchor-x: 50%; --outfit-anchor-y: 23px; --outfit-width: 82%; translate: -50% 0; }
.ugc-outfit-choice b { font-size: 12px; }
.ugc-outfit-choice.is-equipped,
.ugc-none-choice.is-equipped { border-color: #aa6264; box-shadow: inset 0 0 0 2px #aa6264; }
.ugc-outfit-choice.is-locked { filter: grayscale(.8); opacity: .46; }
.ugc-none-choice,
.ugc-shop-link { min-height: 42px; font-weight: 800; }
.ugc-shop-link { background: #9c5d61; color: white; }

.ugc-photo__preview {
  --photo-filter: none;
  --frame-scale: 1;
  --frame-x: 0px;
  --frame-y: 0px;
}
.ugc-photo__preview i {
  position: absolute;
  right: 22px;
  bottom: 19px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgb(255 250 238 / 78%);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.ugc-photo__controls { display: flex; min-width: 0; flex-direction: column; gap: 13px; overflow: hidden; }
.ugc-photo fieldset,
.ugc-postcard fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ugc-photo legend,
.ugc-postcard legend { margin-bottom: 7px; color: #9b5d5e; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.ugc-pose-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.ugc-pose-choice { position: relative; display: grid; min-width: 0; height: 95px; place-items: end center; overflow: hidden; border: 1px solid #e0c9b6; border-radius: 14px; background: #fffdf8; }
.ugc-pose-choice input { position: absolute; opacity: 0; }
.ugc-pose-choice img { position: absolute; inset: 4px 7px 21px; width: calc(100% - 14px); height: calc(100% - 25px); object-fit: contain; }
.ugc-pose-choice span { z-index: 2; padding-bottom: 5px; font-size: 10px; font-weight: 800; }
.ugc-pose-choice:has(input:checked) { border-color: #a85f62; box-shadow: inset 0 0 0 2px #a85f62; }
.ugc-photo__small-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ugc-photo__small-controls fieldset > div,
.ugc-frame-controls > div,
.ugc-postcard fieldset > div { display: flex; gap: 6px; }
.ugc-photo__small-controls label,
.ugc-frame-controls label,
.ugc-postcard fieldset label { flex: 1; }
.ugc-photo__small-controls input,
.ugc-frame-controls input,
.ugc-postcard fieldset input { position: absolute; opacity: 0; }
.ugc-photo__small-controls span,
.ugc-frame-controls span,
.ugc-postcard fieldset span { display: grid; min-height: 34px; place-items: center; border: 1px solid #dfc7b5; border-radius: 11px; background: #fffdf8; font-size: 12px; font-weight: 800; }
.ugc-photo__small-controls label:has(input:checked) span,
.ugc-frame-controls label:has(input:checked) span,
.ugc-postcard fieldset label:has(input:checked) span { border-color: #a85f62; background: #f4dcda; color: #8d4f54; }
.ugc-photo .primary-button,
.ugc-postcard .primary-button { min-height: 43px; margin-top: auto; }
.ugc-preload { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ugc-postcard__paper {
  position: relative;
  align-self: center;
  width: min(86%, 570px);
  aspect-ratio: 4 / 3;
  justify-self: center;
  overflow: hidden;
  padding: 20px;
  border: 11px solid #fff9ed;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff8eb, #ead5bd);
  box-shadow: 0 22px 46px rgb(68 41 31 / 22%), 0 0 0 1px #bd8f72;
  transform: rotate(-1.2deg);
}
.ugc-postcard__paper::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-8deg, transparent 0 15px, rgb(119 77 58 / 3%) 16px); }
.ugc-postcard__sticker {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 24px;
  color: #b75f65;
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
}
.ugc-postcard:has(input[name="stickerId"][value="paw"]:checked) [data-board-sticker="paw"],
.ugc-postcard:has(input[name="stickerId"][value="heart"]:checked) [data-board-sticker="heart"],
.ugc-postcard:has(input[name="stickerId"][value="star"]:checked) [data-board-sticker="star"] {
  opacity: 1;
  visibility: visible;
}
.ugc-postcard__paper [data-board-template] { opacity: 0; visibility: hidden; }
.ugc-postcard:has(input[name="templateId"][value="window"]:checked) [data-board-template="window"],
.ugc-postcard:has(input[name="templateId"][value="footsteps"]:checked) [data-board-template="footsteps"] {
  opacity: 1;
  visibility: visible;
}
.ugc-postcard:has(input[name="templateId"][value="sunbeam"]:checked) [data-board-template="sunbeam"] {
  visibility: visible;
  opacity: .92;
}
.ugc-postcard__paper > img { position: absolute; left: 4%; bottom: 18%; width: 44%; height: 68%; object-fit: contain; filter: drop-shadow(0 12px 10px rgb(76 49 36 / 16%)); }
.ugc-postcard__paper > .ugc-postcard__companion { left: 30%; width: 36%; transform: scaleX(-1); opacity: .92; }
.ugc-owner-seal,
.ugc-home-link { position: absolute; z-index: 3; left: 7%; bottom: 8%; display: grid; min-width: 38px; min-height: 38px; place-items: center; border: 1px solid #bd8179; border-radius: 50%; background: #fff9ed; color: #9a5a5c; font-style: normal; font-weight: 900; }
.ugc-home-link { right: auto; bottom: 7%; left: 50%; min-width: 150px; min-height: 30px; transform: translateX(-50%); border-radius: 999px; font-size: 11px; }
.ugc-home-link b { padding: 0 5px; color: #d19075; }
.ugc-postcard__paper h2,
.ugc-postcard__paper p { position: absolute; z-index: 2; right: 4%; width: 31%; text-align: center; }
.ugc-postcard__paper h2 { top: 34%; margin: 0; color: #98575a; font: 700 23px STKaiti, KaiTi, serif; }
.ugc-postcard__paper p { bottom: 15%; margin: 0; font-size: 12px; font-weight: 800; }
.ugc-postcard__controls { display: flex; flex-direction: column; gap: 14px; }
.ugc-card-select,
.ugc-caption { display: grid; gap: 6px; color: #9b5d5e; font-size: 12px; font-weight: 900; }
.ugc-card-select select,
.ugc-caption input { height: 40px; padding: 0 12px; border: 1px solid #dfc7b5; border-radius: 11px; background: #fffdf8; color: #59443f; }
.ugc-board-empty { display: grid; width: min(520px, 80%); height: 100%; place-content: center; justify-self: center; text-align: center; }
.ugc-board-empty span { color: #a76163; font-size: 72px; }
.ugc-board-empty h2 { margin: 5px 0; font-size: 30px; }
.ugc-board-empty p { margin: 0; color: #806761; }

.ugc-photo-result {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(46 32 29 / 62%);
  backdrop-filter: blur(9px);
}
.ugc-photo-result > div { position: relative; display: grid; width: min(830px, 76vw); gap: 12px; padding: 16px; border-radius: 22px; background: #fff9ed; box-shadow: 0 24px 70px rgb(28 17 14 / 36%); }
.ugc-photo-result img { width: 100%; border-radius: 14px; }
.ugc-photo-result a { display: grid; min-height: 44px; place-items: center; text-decoration: none; }
.ugc-photo-result button { position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(64 44 40 / 76%); color: white; font-size: 22px; }

/* 拼豆页把原画预览、猫咪选择和回忆动作放在同一张工作台。 */
.ugc-bead-pattern { display: grid; width: 100%; height: 100%; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 24px; }
.ugc-bead-pattern__preview { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; border-radius: 24px; background: radial-gradient(circle at 50% 38%, #fff9e9 0 25%, transparent 58%), linear-gradient(145deg, rgb(255 250 235 / 72%), rgb(216 171 129 / 76%)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 54%); }
.ugc-bead-pattern__preview canvas { width: min(72%, 560px); aspect-ratio: 1; image-rendering: pixelated; filter: drop-shadow(0 18px 18px rgb(87 48 36 / 20%)); }
.ugc-bead-pattern__source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ugc-bead-pattern__controls { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 14px; padding: 24px 0 24px 24px; border-left: 1px solid rgb(121 76 58 / 18%); }
.ugc-bead-pattern__controls header { display: grid; gap: 4px; }
.ugc-bead-pattern__controls header span { color: #9b5d5e; font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.ugc-bead-pattern__controls h2 { margin: 0; color: #624943; font-family: var(--font-display); font-size: 24px; }
.ugc-bead-pattern__controls p { margin: 0; color: #806761; font-size: 11px; }
.ugc-bead-pattern__controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ugc-bead-pattern__controls legend { margin-bottom: 8px; color: #9b5d5e; font-size: 12px; font-weight: 900; }
.ugc-bead-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.ugc-bead-cat-choice { display: grid; min-width: 0; min-height: 110px; place-items: center; gap: 3px; padding: 6px; border: 1px solid #dfc7b5; border-radius: 14px; background: #fffdf8; color: #624943; }
.ugc-bead-cat-choice img { width: 74px; height: 74px; object-fit: contain; }
.ugc-bead-cat-choice b { overflow: hidden; max-width: 100%; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ugc-bead-cat-choice.is-selected { border-color: #a85f62; background: #f4dcda; box-shadow: inset 0 0 0 2px #a85f62; }
.ugc-bead-pattern__controls .primary-button { min-height: 44px; margin-top: auto; }
.ugc-bead-pattern__count { color: #806761; font-size: 10px; line-height: 1.5; }
.ugc-bead-locked,
.ugc-bead-empty { display: grid; width: min(520px, 80%); height: 100%; align-content: center; justify-items: center; gap: 8px; margin: 0 auto; text-align: center; }
.ugc-bead-locked img { width: min(220px, 48%); aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 16px 14px rgb(87 48 36 / 18%)); }
.ugc-bead-locked > span,
.ugc-bead-empty > span { color: #a76163; font-size: 56px; line-height: 1; }
.ugc-bead-locked h2,
.ugc-bead-empty h2 { margin: 0; color: #624943; font-family: var(--font-display); font-size: 28px; }
.ugc-bead-locked p,
.ugc-bead-empty p { max-width: 380px; margin: 0 0 8px; color: #806761; font-size: 12px; line-height: 1.7; }