/* ——— Drawn treasures, paint, your character, and the Dressing Room ——— */

/* Drawn treasures are sized by width (--w) instead of by emoji font size, and
   carry their own floor shadow. */
.room-item.drawn { line-height: 0; filter: none; }
.room-item.drawn svg { display: block; width: calc(var(--w, 1) * 1em); height: auto; overflow: visible; }
.room-item.drawn:not(.dropped) span { animation: none; }
.room-item.drawn.selected svg,
.room-item.drawn.dragging svg { filter: drop-shadow(0 1.2cqw 1cqw rgba(60, 20, 60, 0.25)); }
.room-item.painted span { animation: paint-squash 0.5s var(--bounce); }

.art-swing { transform-box: view-box; transform-origin: 52px 90px; animation: art-swing 1.6s ease-in-out infinite alternate; }
.art-flicker { transform-box: fill-box; transform-origin: 50% 100%; animation: art-flicker 0.9s ease-in-out infinite alternate; }
.art-sway { transform-box: fill-box; transform-origin: 50% 0%; animation: art-sway 5s ease-in-out infinite alternate; }
.room.mini .art-swing,
.room.mini .art-flicker,
.room.mini .art-sway { animation: none; }

/* A treasure's drawing on buttons (chest, shop, pop-ups). */
.t-icon { display: grid; place-items: center; width: 1.25em; height: 1.25em; line-height: 0; }
.t-icon svg { display: block; max-width: 100%; max-height: 100%; }
.chest-item .t-icon { width: 50px; height: 50px; margin: auto; }
.item-card.drawn .item-emoji .t-icon { width: 1.3em; height: 1.3em; }
.modal-emoji .t-icon { width: 120px; height: 120px; display: inline-grid; }
.drag-ghost .t-icon { width: 110px; height: 110px; }
.new-tag {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #6b4300;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
}

/* ——— Paint buttons (room editor and Dressing Room) ——— */

.paint-panel h3 small { display: block; margin-top: 2px; }
/* The side column scrolls; its sections keep their full height instead of squashing. */
.editor-side > * { flex-shrink: 0; }
.paint-panel .paint-swatch { width: 36px; height: 36px; }
.paint-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.paint-row:last-child { margin-bottom: 0; }
.paint-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 3px solid #fff;
  background: var(--lilac-soft);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 3px 0 #dccdf6;
  transition: transform 0.15s var(--bounce);
}
.paint-chip svg { width: 22px; height: 22px; flex: none; }
.paint-chip[aria-pressed='true'] { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--pink-deep); }
.paint-chip:active { transform: translateY(2px) scale(0.96); }
.paint-swatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid #fff;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.7) 0 18%, transparent 19%), var(--c);
  box-shadow: 0 0 0 2px var(--outline), 0 3px 0 2px rgba(91, 58, 110, 0.25);
  transition: transform 0.18s var(--bounce);
}
.paint-swatch[aria-pressed='true'] { transform: scale(1.18); box-shadow: 0 0 0 3px var(--pink), 0 3px 0 3px var(--pink-deep); }
.paint-swatch:active { transform: scale(0.88); }
/* A hair color still to buy: a little faded, with its price underneath. */
.paint-swatch { position: relative; }
.paint-swatch.locked { opacity: 0.8; }
.swatch-price {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: 999px;
  background: #fff2c4;
  color: #8a5a00;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 15px;
  white-space: nowrap;
  pointer-events: none;
}
.dr-swatches:has(.swatch-price) { row-gap: 20px; padding-bottom: 12px; }

/* ——— Your character ——— */

.look-hero { width: var(--w, 120px); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.look-hero svg { display: block; width: 100%; height: auto; overflow: visible; }
.look-hero.hop svg { animation: hero-hop 0.6s var(--bounce); }
.look-hero.wobble svg { animation: hero-wobble 0.5s ease-in-out; }
.look-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 4.6s infinite; }
.look-flutter { transform-box: fill-box; transform-origin: 50% 40%; animation: flutter 1.4s ease-in-out infinite alternate; }
.look.bust { display: block; width: 100%; height: 100%; }
/* With a magic friend the drawing is wider on the left (PET_ROOM in js/look.js):
   live characters grow to the left so you stay the same size. */
.look-hero svg.has-pet, .room-hero svg.has-pet { width: calc(100% * 292 / 228); margin-left: calc(-100% * 64 / 228); }
/* Your magic friend bobs beside you, flapping and blinking. */
.pet-bob { animation: pet-bob 2.6s ease-in-out infinite; }
.pet-wing { transform-box: fill-box; animation: pet-flap 0.5s ease-in-out infinite alternate; }
.pet-wing-l { transform-origin: 100% 90%; }
.pet-wing-r { transform-origin: 0% 90%; animation-delay: -0.25s; }
.pet-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 3.8s infinite; }
.pet-glow { animation: pet-glow 2.6s ease-in-out infinite; }
.pet-trail { animation: pet-glow 1.3s ease-in-out infinite alternate; }
.pet-flame { transform-box: fill-box; transform-origin: 0% 50%; animation: art-flicker 0.18s ease-in-out infinite alternate; }

/* In a room: stands on the floor in front of the furniture, and can be dragged. */
.room-hero {
  position: absolute;
  z-index: 9000;
  width: 15cqw;
  transform: translate(-50%, -50%) scaleX(var(--flip, 1));
  touch-action: none;
  cursor: grab;
}
.room-hero svg { display: block; width: 100%; height: auto; overflow: visible; }
.room-hero.walking { cursor: grabbing; }
.room-hero.walking svg { animation: hero-walk 0.36s ease-in-out infinite alternate; }
.room-hero.hop svg { animation: hero-hop 0.6s var(--bounce); }
.room.mini .room-hero { pointer-events: none; }
.room.mini .look-eyes,
.room.mini .look-flutter,
.room.mini .look-pet * { animation: none; }

/* Faces on name buttons and the top bar. */
.profile-avatar.has-look { display: block; width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 60%, #fff 0 45%, #ffe4f0 100%); }
.pp-avatar.has-look { display: block; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #ffe4f0; }

/* Home: your character next to Sprinkles. */
.home-look { flex-shrink: 0; align-self: flex-end; }
.look-cta {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 128px;
  padding: 14px 8px;
  border-radius: 26px;
  border: 4px dashed #e9b8d6;
  background: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  font-weight: 600;
  color: var(--pink-deep);
  animation: bob 2.4s ease-in-out infinite;
}
.look-cta-icon { font-size: 52px; line-height: 1; }
.home-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.home-banners .garden-banner { min-width: 0; }
.dressing-banner { background: linear-gradient(90deg, #fff0f7, #f1eaff); box-shadow: 0 6px 0 #ecdaf2, var(--shadow); }

/* Rounds: your character on the right of the card, Sprinkles on the left. */
.play-hero { position: absolute; z-index: 4; right: 96px; top: -100px; }
.play-hero .look-hero { --w: 92px !important; }
.results-cast { display: flex; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.results-hero { margin-left: -12px; }

/* ——— Dressing Room ——— */

.dressing { max-width: 1100px; margin: 0 auto; }
.dr-main { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.dr-stage {
  position: sticky;
  top: 12px;
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 22px 12px 18px;
  border-radius: 34px;
  border: 6px solid #fff;
  background:
    radial-gradient(ellipse at 50% 92%, rgba(201, 168, 255, 0.55) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 40%, #fff 0 30%, transparent 60%),
    repeating-linear-gradient(90deg, #ffe4f0 0 24px, #ffd5e8 24px 48px);
  box-shadow: 0 9px 0 #efcfe2, var(--shadow);
}
.dr-hero { min-height: 300px; display: grid; place-items: end center; }
.dr-mystery {
  display: grid;
  place-items: center;
  width: 190px;
  height: 290px;
  border-radius: 999px 999px 40px 40px;
  border: 5px dashed #e9b8d6;
  background: rgba(255, 255, 255, 0.6);
  font-size: 80px;
  animation: bob 2.4s ease-in-out infinite;
}
.dr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* Trying something on: a dashed gold frame, a ribbon, and a bar to get it or
   take it off, so it's clear it isn't yours yet. */
.dr-try-ribbon {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  padding: 5px 16px;
  border-radius: 999px;
  background: #ffd54d;
  color: #6b4200;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 0 #e0a92a;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s var(--bounce);
}
.dr-stage.trying { border-style: dashed; border-color: #ffc83d; }
.dr-stage.trying .dr-try-ribbon { opacity: 1; transform: translateX(-50%) scale(1); }
.dr-stage.trying .look-hero svg { filter: drop-shadow(0 0 10px rgba(255, 213, 77, 0.9)); }
.dr-try { display: grid; justify-items: center; gap: 8px; text-align: center; }
.dr-try[hidden] { display: none; }
.dr-try b { font-size: 17px; }
.dr-try .tool.get { background: var(--gold); color: #6b4300; box-shadow: 0 4px 0 var(--gold-deep); }
.dr-try-note { padding: 4px 12px; border-radius: 999px; background: #fff2c4; color: #8a5a00; font-size: 14px; font-weight: 600; }
.piece-card.trying { border-color: #ffc83d; border-style: dashed; }
.piece-trying { font-size: 13px; color: #8a5a00; font-weight: 700; }
.dr-side { min-width: 0; display: grid; gap: 12px; }
.dr-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-panel { padding: 16px 18px 18px; }
.dr-panel h3 { margin: 14px 0 8px; font-size: 18px; }
.dr-panel h3:first-child { margin-top: 0; }
.dr-swatches { display: flex; flex-wrap: wrap; gap: 9px; }

.piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.piece-grid.busts { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.piece-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 8px 6px 10px;
  border-radius: 22px;
  border: 4px solid #fff;
  background: linear-gradient(#fff7fb, #fff);
  box-shadow: 0 4px 0 #ecd6e6;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.15s var(--bounce);
}
.piece-card svg { width: 88px; height: 130px; }
.piece-grid.busts .piece-card svg { width: 76px; height: 78px; }
.piece-card:hover { transform: translateY(-3px); }
.piece-card:active { transform: scale(0.96); }
.piece-card.wearing { border-color: var(--pink); background: linear-gradient(#ffe8f3, #fff); }
.piece-card.locked svg { filter: grayscale(0.6) opacity(0.6); }
.piece-name { line-height: 1.15; }
.piece-on, .piece-price, .piece-lock { font-size: 13px; line-height: 1.2; }
.piece-on { color: var(--pink-deep); }
.piece-price { padding: 1px 9px; border-radius: 999px; background: #fff2c4; color: #8a5a00; }
.piece-lock { color: var(--ink-soft); font-weight: 500; }
.piece-card.shake { animation: shake 0.4s; }

.starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.starter-card {
  padding: 10px 4px 4px;
  border-radius: 26px;
  border: 4px solid #fff;
  background: linear-gradient(#fff3f9, #fff);
  box-shadow: 0 5px 0 #ecd6e6, var(--shadow);
  animation: pop-in 0.5s var(--bounce) backwards;
  animation-delay: calc(var(--i) * 90ms);
}
.starter-card:hover { transform: translateY(-4px); }
.starter-card svg { display: block; width: 100%; height: auto; }
.modal-look { display: inline-block; width: 120px; height: 150px; }
.modal-look svg { width: 100%; height: 100%; }
.modal-look.wide { width: 160px; }

/* The magic friend: the biggest thing to save for. */
.dr-friend {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff4c9, #ffe3f3 55%, #e6dcff);
  box-shadow: 0 4px 0 #ecd6e6;
}
.dr-friend b { font-size: 18px; }
.dr-friend span { font-size: 15px; line-height: 1.3; }
.dr-friend small { font-size: 14px; font-weight: 600; color: #8a5a00; }
.dr-friend-bar { height: 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px #f1d9a0; overflow: hidden; }
.dr-friend-bar i { display: block; height: 100%; min-width: 16px; border-radius: inherit; background: linear-gradient(90deg, #ffd54d, #ff9cc8, #c9a8ff); }
.dr-friend-note { margin: 0 0 12px; font-size: 15px; }
.piece-grid.friends { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.piece-grid.friends .piece-card svg { width: 128px; height: 140px; }
.piece-card.friend { background: radial-gradient(circle at 50% 40%, #fffbe6 0 40%, #fff3fa 75%); }
.piece-card.friend.locked svg { filter: drop-shadow(0 0 10px #ffe68a); }
.piece-card.friend .piece-price { background: linear-gradient(90deg, #ffe680, #ffc6e2); font-size: 14px; }

@media (max-width: 820px) {
  .dr-main { grid-template-columns: minmax(0, 1fr); }
  .dr-stage { position: relative; top: 0; grid-template-columns: auto auto; align-items: end; }
  .dr-hero { min-height: 0; }
  .dr-stage .look-hero { --w: 150px !important; }
  .dr-actions { flex-direction: column; }
  .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .home-banners { grid-template-columns: minmax(0, 1fr); }
  .home-look .look-hero { --w: 92px !important; }
  .look-cta { width: 96px; font-size: 14px; }
  .look-cta-icon { font-size: 38px; }
  .play-hero { display: none; }
  .results-hero .look-hero { --w: 90px !important; }
}

@media (min-width: 1160px) {
  .play-hero { right: -172px; top: auto; bottom: -14px; }
  .play-hero .look-hero { --w: 168px !important; }
}

@keyframes paint-squash { 0% { transform: scale(1); } 30% { transform: scale(1.08, 0.92); } 60% { transform: scale(0.96, 1.05); } 100% { transform: scale(1); } }
@keyframes art-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes art-flicker { from { transform: scale(1, 1); opacity: 0.9; } to { transform: scale(0.85, 1.12); opacity: 1; } }
@keyframes art-sway { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }
@keyframes hero-hop { 0% { transform: none; } 25% { transform: scale(1.06, 0.92); } 55% { transform: translateY(-12%) scale(0.96, 1.05); } 100% { transform: none; } }
@keyframes hero-wobble { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes hero-walk { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4%) rotate(3deg); } }
@keyframes flutter { from { transform: scaleX(1); } to { transform: scaleX(0.9); } }
@keyframes pet-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pet-flap { from { transform: rotate(0deg); } to { transform: rotate(-14deg) scaleY(0.88); } }
@keyframes pet-glow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }

@media (prefers-reduced-motion: reduce) {
  .art-swing, .art-flicker, .art-sway, .look-eyes, .look-flutter, .look-cta, .dr-mystery,
  .pet-bob, .pet-wing, .pet-blink, .pet-glow, .pet-trail, .pet-flame { animation: none; }
}