@charset "UTF-8";

.personality-rhythm { margin: 3px 0 9px; color: #8a795f; font-size: 10px; line-height: 1.6; }
.room .pet-target.is-exhausted { opacity: 1; cursor: default; }

/* Clothes live inside the existing sprite frame, so growth and expressions stay intact. */
.pet-visual > .pet-costume-back { position: absolute; z-index: 0; display: block; pointer-events: none; visibility: hidden; left: var(--outfit-back-left-percent); top: var(--outfit-back-top-percent); width: var(--outfit-back-width-percent); height: var(--outfit-back-height-percent); }
.pet-visual > .pet-costume-back[data-geometry-ready="true"] { visibility: visible; }
.pet-visual > .pet-costume-back .costume-wings-art { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; pointer-events: none; }
.pet-visual > .pet-image { z-index: 1; }
.pet-visual > .pet-outfit { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; visibility: hidden; }
.pet-visual > .pet-outfit[data-geometry-ready="true"] { visibility: visible; }
.pet-outfit .outfit-piece { position: absolute; display: block; pointer-events: none; filter: drop-shadow(0 2px 1px #6243272b); }
.pet-outfit .outfit-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pet-outfit .outfit-head { left: var(--outfit-head-left-percent, var(--outfit-head-left)); top: var(--outfit-head-top-percent, var(--outfit-head-top)); width: var(--outfit-head-width-percent, var(--outfit-head-width)); height: var(--outfit-head-height-percent, var(--outfit-head-height)); }
.pet-outfit .outfit-neck { left: var(--outfit-neck-left-percent, var(--outfit-neck-left)); top: var(--outfit-neck-top-percent, var(--outfit-neck-top)); width: var(--outfit-neck-width-percent, var(--outfit-neck-width)); height: var(--outfit-neck-height-percent, var(--outfit-neck-height)); }
.pet-outfit .outfit-neck { filter: none; overflow: hidden; mask-image: var(--outfit-body-mask-image); -webkit-mask-image: var(--outfit-body-mask-image); mask-mode: alpha; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-position: 0 0; -webkit-mask-position: 0 0; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; clip-path: var(--outfit-cloth-face-guard); }
.pet-outfit .outfit-neck .outfit-art { position: absolute; left: var(--outfit-cloth-left-percent); top: var(--outfit-cloth-top-percent); width: var(--outfit-cloth-width-percent); height: var(--outfit-cloth-height-percent); }
.pet-outfit .outfit-neck .ribbon-wrap-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.pet-outfit .outfit-neck[data-contour-ready="true"] > .outfit-art { opacity: 0; }
.pet-outfit .outfit-charm { left: var(--outfit-charm-left-percent, var(--outfit-charm-left)); top: var(--outfit-charm-top-percent, var(--outfit-charm-top)); width: var(--outfit-charm-width-percent, var(--outfit-charm-width)); height: var(--outfit-charm-height-percent, var(--outfit-charm-height)); }
.textured-room[data-time-of-day="night"] .pet-outfit, .textured-room[data-time-of-day="night"] .pet-costume-back { filter: brightness(.86) saturate(.9); }
.textured-room[data-time-of-day="day"].curtains-closed .pet-outfit, .textured-room[data-time-of-day="day"].curtains-closed .pet-costume-back { filter: brightness(.85) saturate(.95); }
.pet-visual > .bath-foam { z-index: 4; }

.wardrobe-page { padding: 16px 18px 22px; background: var(--milk, #fff9ee); }
.wardrobe-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.wardrobe-heading > .quiet-btn { flex: 0 0 auto; padding-left: 0; }
.wardrobe-heading h2 { font-size: 18px; font-weight: 600; color: #65513b; }
.wardrobe-heading p { margin-top: 3px; font-size: 10px; color: #8a795f; }
.wardrobe-room { height: clamp(285px, 70vw, 340px); min-height: 285px; aspect-ratio: auto; border-radius: 24px 24px 0 0; background: #ecdfc6; }
.wardrobe-room .room-backdrop { object-position: center 64%; filter: saturate(.85) brightness(1.02); }
.wardrobe-room::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #fff9ec12 30%, #ecddc254); pointer-events: none; }
.wardrobe-room .pet-anchor { --frame-width: clamp(174px, 48cqw, 208px); --pet-foot-y: .76; z-index: 3; }
.wardrobe-room .pet-target { overflow: visible; }
.wardrobe-mirror, .wardrobe-clothes-rack { position: absolute; z-index: 2; pointer-events: none; }
.wardrobe-mirror { width: 26%; left: 1%; bottom: 14%; }
.wardrobe-clothes-rack { width: 33%; right: -1%; bottom: 17%; }
.wardrobe-furniture-art { display: block; width: 100%; height: auto; max-width: none; }
.wardrobe-room[data-time-of-day="night"] .wardrobe-furniture-art { filter: brightness(.72) saturate(.82); }
.wardrobe-preview-label { position: absolute; bottom: 11px; left: 18px; right: 18px; z-index: 5; text-align: center; color: #80684b; font-size: 11px; pointer-events: none; }

/* The choices hang on warm wooden shelves rather than opening a separate modal. */
.wardrobe-shelves { position: relative; padding: 9px 14px 10px; border-radius: 0 0 24px 24px; background: linear-gradient(90deg, #dbc6a51a, #fff1d587 50%, #dbc6a51a), #f1e4cc; box-shadow: inset 0 2px 0 #e2cdaa, inset 0 -4px 0 #e1caa8; }
.wardrobe-shelf + .wardrobe-shelf { margin-top: 7px; }
.wardrobe-shelf h3 { font-size: 10px; font-weight: 500; color: #9a8160; letter-spacing: .08em; padding-left: 3px; }
.wardrobe-items { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 0 4px; }
.wardrobe-items::before { content: ""; position: absolute; top: 9px; left: 8px; right: 8px; height: 3px; border-radius: 4px; background: #ccb18d; box-shadow: 0 1px 0 #f9edda; pointer-events: none; }
.wardrobe-item { position: relative; display: flex; min-width: 0; min-height: 76px; padding: 1px 2px 5px; align-items: center; flex-direction: column; background: transparent; color: #826b4e; border-radius: 16px; transition: background .16s ease, transform .16s ease; }
.wardrobe-item:hover:not(:disabled) { background: #fff8e373; }
.wardrobe-item.selected { background: #fff7df8f; box-shadow: inset 0 -2px 0 #bdaa77; }
.wardrobe-item:focus-visible { outline: 2px solid #9f8654; outline-offset: 2px; }
.wardrobe-hanger { position: absolute; top: 1px; width: 42px; height: 25px; }
.wardrobe-hanger svg { width: 100%; height: 100%; }
.wardrobe-item-art { position: relative; width: 45px; height: 43px; margin: 15px 0 1px; filter: drop-shadow(0 2px 1px #775a3630); transition: rotate .2s ease; }
.wardrobe-item-art svg { width: 100%; height: 100%; }
.pet-outfit .outfit-art { display: block; width: 100%; height: 100%; object-fit: fill; max-width: none; pointer-events: none; }
.wardrobe-item-art .outfit-art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wardrobe-item:not(:disabled):hover .wardrobe-item-art { rotate: -5deg; }
.wardrobe-item small { display: block; font-size: 10px; line-height: 1.5; white-space: nowrap; }
.wardrobe-selected { position: absolute; top: 18px; right: 5px; width: 15px; height: 15px; line-height: 15px; color: #71865a; font-size: 11px; font-weight: 600; }
.wardrobe-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.wardrobe-note { color: #917c62; font-size: 10px; }
.wardrobe-footer .quiet-btn { flex: 0 0 auto; min-height: 44px; }
.wardrobe-costumes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wardrobe-costumes::before { display: none; }
.wardrobe-costume { min-height: 108px; }
.wardrobe-costume .wardrobe-item-art { width: 84px; height: 60px; margin-top: 3px; }
.wardrobe-costume-price { margin-top: 3px; color: #957347; font-size: 10px; }
.wardrobe-costume-note { padding: 1px 4px 5px; color: #9a8160; font-size: 9px; line-height: 1.6; }
.costume-thumbnail { position: relative; display: block; width: 100%; height: 100%; }
.costume-thumbnail .costume-thumbnail-wings { position: absolute; inset: 25% 0 auto; width: 100%; height: 66%; object-fit: contain; }
.costume-thumbnail .costume-front-art { position: absolute; left: 24%; top: 0; width: 52%; height: 40%; object-fit: contain; }
@media (max-width: 350px) {
  .wardrobe-page { padding-inline: 12px; }
  .wardrobe-heading { gap: 5px; }
  .wardrobe-heading h2 { font-size: 16px; }
  .wardrobe-heading p { font-size: 9px; }
  .wardrobe-heading .quiet-btn { font-size: 11px; padding-right: 5px; }
  .wardrobe-shelves { padding-inline: 10px; }
  .wardrobe-items { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .wardrobe-item, .wardrobe-item-art { transition: none; }
  .wardrobe-item:not(:disabled):hover .wardrobe-item-art { rotate: 0deg; }
}