.wardrobe-open{margin-left:10px;font-size:13px;padding:10px 14px;white-space:nowrap}
.wardrobe-home,.wardrobe-finish{font-size:14px}
.wardrobe-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}
.wardrobe-balance{border-radius:16px;padding:12px 18px;background:#fff3d6;color:#8b5b13;font-weight:900}
.wardrobe-intro{text-align:center;margin:22px 0 30px}.wardrobe-intro h1{font-size:clamp(30px,5vw,46px);margin:12px 0 4px}.wardrobe-intro p{color:#8f84a1}
.wardrobe-layout{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);gap:22px;align-items:start}
.wardrobe-preview{position:sticky;top:20px;text-align:center;background:#fff;border:2px solid #eee9f8;border-radius:28px;padding:25px 15px;box-shadow:0 8px 25px #4433770a}
.wardrobe-preview h2{margin:0 0 4px}.wardrobe-preview p{font-size:13px;color:#8f84a1;min-height:40px}
.avatar-stage{position:relative;width:180px;height:180px;display:grid;place-items:center;margin:0 auto 15px;isolation:isolate}
.avatar-figure{font-size:125px;line-height:1;filter:drop-shadow(0 9px 6px #44337723)}
.avatar-layer{position:absolute;z-index:2;font-size:53px;filter:drop-shadow(0 3px 3px #4433772a)}
.avatar-head{top:0;left:60px}.avatar-face{top:61px;left:79px;font-size:40px}.avatar-body{bottom:0;left:77px}.avatar-hand{right:0;bottom:35px}.avatar-effect{inset:0;font-size:150px;opacity:.47;z-index:-1;display:grid;place-items:center}
.wardrobe-switch{display:flex;gap:10px;flex-wrap:wrap}.wardrobe-switch button{border:2px solid #e6dcfa;background:#fff;border-radius:15px;padding:11px 14px;color:#6d55a3;font-weight:900}.wardrobe-switch button.selected{border-color:#8063da;background:#efe9ff}
.wardrobe-shop h2{margin:25px 0 13px;font-size:21px}.wardrobe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wardrobe-product{display:grid;justify-items:center;align-content:center;gap:5px;min-height:141px;background:#fff;border:2px solid #ebe5f4;border-radius:19px;padding:10px 6px;color:#453463;transition:transform .15s,border-color .15s}
.wardrobe-product:hover{transform:translateY(-2px);border-color:#9b81e4}.wardrobe-product.selected{background:#f2ecff;border-color:#8967de}
.wardrobe-product .product-icon{font-size:49px;line-height:1.2}.wardrobe-product strong{font-size:13px}.wardrobe-product small{color:#9875a8;font-weight:800;font-size:12px}
#homeAvatar{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}.mascot[hidden],#homeAvatar[hidden]{display:none}
body[data-avatar-theme="brave"] .hero{background:linear-gradient(125deg,#eeeaff,#e5efff)}
@media(max-width:800px){.wardrobe-layout{grid-template-columns:1fr}.wardrobe-preview{position:static}.wardrobe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wardrobe-open{font-size:12px;padding:8px 9px;margin-left:4px}.topbar{flex-wrap:wrap;gap:8px}.avatar-stage{width:160px;height:160px}.avatar-figure{font-size:112px}}
@media(prefers-reduced-motion:reduce){.wardrobe-product{transition:none}}

#quizBunny[data-character]:not([data-character="bunny"]) .bunny-ears,#quizBunny[data-character]:not([data-character="bunny"]) .bunny-face{display:none}
#quizBunny[data-character]:not([data-character="bunny"])::before{content:attr(data-emoji);display:block;position:absolute;bottom:0;right:0;font-size:39px;line-height:1}
#quizBunny[data-character]:not([data-character="bunny"]) .bunny-bubble{right:39px}

.brand-heroine .brand-logo{display:none}.heroine-wordmark{font-weight:1000;font-size:clamp(21px,3vw,31px);letter-spacing:-1px;color:#7956d8;white-space:nowrap}

/* Editable inventory canvas */
#wardrobeAvatar{width:min(100%,260px);height:260px;background:radial-gradient(circle,#f8f1ff 0,#eee6ff 65%,transparent 70%);border-radius:22px;touch-action:none;overflow:visible}
#wardrobeAvatar .avatar-figure{font-size:160px;user-select:none}
.avatar-layer{position:absolute;font-size:53px;line-height:1;transform-origin:center;white-space:nowrap;user-select:none}
#wardrobeAvatar .avatar-editable{touch-action:none;cursor:grab;padding:9px;margin:-9px}
#wardrobeAvatar .avatar-editable:active{cursor:grabbing}
#wardrobeAvatar .avatar-editable.selected{outline:2px dashed #926ddf;outline-offset:2px;border-radius:10px}
.wardrobe-editor{background:#f7f2ff;border-radius:17px;padding:13px;display:grid;gap:10px;text-align:left;margin:0 0 16px}
.wardrobe-editor[hidden]{display:none}
.wardrobe-editor>strong{text-align:center}
.wardrobe-editor label{display:grid;grid-template-columns:62px minmax(0,1fr) 42px;align-items:center;gap:8px;font-size:12px;font-weight:900;color:#63528d}
.wardrobe-editor input{width:100%;accent-color:#8762d8}
.wardrobe-editor output{text-align:right;font-size:12px}
.wardrobe-help{color:#877a9e;font-size:13px;margin-top:-5px}
#homeAvatar .avatar-layer{font-size:45px}
@media(max-width:800px){#wardrobeAvatar{height:260px;width:min(100%,260px)}}

/* Both views use the same square, percentage-based avatar coordinate system. */
.avatar-stage{
  aspect-ratio:1;
  height:auto;
  container-type:inline-size;
  display:grid;
  place-items:center;
}
.avatar-stage .avatar-figure{
  font-size:61.538cqw;
  line-height:1;
}
.avatar-stage .avatar-layer,
#homeAvatar .avatar-layer{
  font-size:20.385cqw;
  line-height:1;
}
#wardrobeAvatar{
  width:min(100%,260px);
  height:auto;
  aspect-ratio:1;
}
#wardrobeAvatar .avatar-figure{font-size:61.538cqw}
#homeAvatar{
  width:180px;
  height:auto;
  aspect-ratio:1;
}
@media(max-width:800px){
  #homeAvatar{width:160px;height:auto}
  #wardrobeAvatar{width:min(100%,260px);height:auto}
}

/* One canonical 260px design surface for BOTH views.
   Home scales the entire assembled avatar, not individual emoji glyphs. */
#wardrobeAvatar,
#homeAvatar{
  box-sizing:border-box;
  width:260px;
  height:260px;
  aspect-ratio:1;
  min-width:260px;
  min-height:260px;
  max-width:none;
  container-type:normal;
  display:grid;
  place-items:center;
  padding:0;
}
#wardrobeAvatar{width:260px;min-width:260px;height:260px;aspect-ratio:1;max-width:none}
#wardrobeAvatar .avatar-figure,
#homeAvatar .avatar-figure{
  font-size:61.538%;
  font-size:160px;
  line-height:1;
}
#wardrobeAvatar .avatar-layer,
#homeAvatar .avatar-layer{
  font-size:53px;
  line-height:1;
  box-sizing:content-box;
  padding:0;
  margin:0;
  border:0;
  position:absolute;
  transform-origin:50% 50%;
}
#wardrobeAvatar .avatar-editable{padding:0;margin:0;touch-action:none;cursor:grab}
#wardrobeAvatar .avatar-editable.selected{outline:2px dashed #926ddf;outline-offset:4px}
#homeAvatar{
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  transform:translate(-50%,-50%) scale(.6923076923);
  transform-origin:center center;
}
@media(max-width:800px){
  #homeAvatar{
    width:260px;
    height:260px;
    transform:translate(-50%,-50%) scale(.6153846154);
  }
}