/* Sunup wardrobe (js/wardrobe.js): Pip in front of a mirror, drawers of things to wear below. Light, like the room.
 * Loaded after app.css; uses its colour variables. */
.wr-ui { position: fixed; inset: 0; z-index: 76; display: flex; flex-direction: column; width: min(480px, 100%); margin: 0 auto; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 100vmax rgba(30, 26, 66, .5); animation: fadein .25s ease; }
.wr-stage { position: relative; flex: none; height: min(46vh, 400px); min-height: 280px; overflow: hidden; background: linear-gradient(180deg, #F6E7D3 0 80%, #E7C29A 80% 100%); padding-top: env(safe-area-inset-top); }
.wr-rail { position: absolute; left: 8%; right: 8%; top: calc(16% + env(safe-area-inset-top)); height: 6px; border-radius: 3px; background: #B98B63; box-shadow: 0 2px 0 rgba(90, 60, 40, .12); }
.wr-rail::before, .wr-rail::after { content: ''; position: absolute; top: 6px; width: 40px; height: 52px; border-radius: 6px 6px 14px 14px; background: #F29E9E; opacity: .85; left: 6%; box-shadow: 52px 0 0 #7FB8D6; }
.wr-rail::after { left: auto; right: 6%; background: #B7A6D9; box-shadow: -52px 0 0 #8DB36B; }
.wr-mirror { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); width: 52%; max-width: 220px; height: 70%; border-radius: 999px 999px 18px 18px; background: linear-gradient(160deg, #FFFDF8, #E8F1F6); border: 7px solid #D9B48A; box-sizing: border-box; }
.wr-floor { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); width: 40%; height: 14px; border-radius: 50%; background: rgba(90, 60, 40, .18); }
.wr-pip { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); width: min(62%, 250px); aspect-ratio: 1; }
.wr-pip svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wr-stage.fresh .wr-pip { animation: wr-in .45s cubic-bezier(.2, .9, .3, 1.2); }
.wr-pip.cheer { animation: wr-hop .5s ease; }
.wr-top { position: absolute; z-index: 2; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wr-top b { font-size: var(--fs-lg); text-align: center; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-pill { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 800; font-size: var(--fs-sm); background: rgba(255, 249, 241, .95); color: var(--ink); box-shadow: 0 6px 16px rgba(70, 45, 90, .12); cursor: pointer; }
.wr-pill.go { background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); box-shadow: 0 3px 0 var(--btn-edge); color: var(--btn-ink); }
.wr-chips { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wr-chip { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: var(--fs-xs); font-weight: 800; color: #5B4C8A; background: rgba(255, 249, 241, .95); box-shadow: 0 2px 0 var(--line); cursor: pointer; }
.wr-chip.try { outline: 2px dashed #6A62C9; }
.wr-chip .ico, .wr-chip svg { width: 12px; height: 12px; opacity: .7; }

.wr-sheet { flex: 1; min-height: 0; overflow-y: auto; margin-top: -18px; position: relative; background: var(--paper); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 24px rgba(40, 30, 80, .14); padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }
.wr-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 10px; margin: 0 -2px; }
.wr-tabs::-webkit-scrollbar { display: none; }
.wr-tab { flex: none; display: grid; justify-items: center; gap: 1px; border: 0; border-radius: 14px; padding: 6px 10px; font: inherit; font-size: var(--fs-2xs); font-weight: 800; color: var(--muted); background: #fff; box-shadow: 0 2px 0 var(--line); cursor: pointer; }
.wr-tab svg, .wr-tab .ico { width: 20px; height: 20px; font-size: 20px; color: #B2741E; }
.wr-tab.on { background: var(--tab-on); color: var(--ink); outline: 2px solid var(--btn-edge); }
.wr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.wr-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 0; border: 0; border-radius: 18px; padding: 4px 4px 8px; font: inherit; font-size: var(--fs-xs); font-weight: 800; color: var(--ink); background: #fff; box-shadow: 0 2px 0 var(--line); text-align: center; cursor: pointer; width: 100%; }
.wr-card svg { width: 100%; height: 76px; display: block; }
.wr-card b { line-height: 1.2; }
.wr-card.on { outline: 3px solid var(--btn-edge); background: #FFF8E2; }
.wr-card.locked svg { opacity: .55; filter: grayscale(.4); }
.wr-card.try { outline: 3px dashed #6A62C9; }
.wr-card.try svg { opacity: 1; filter: none; }
.wr-card.add { min-height: 110px; align-content: center; background: transparent; box-shadow: none; border: 2px dashed #E2D5C3; color: var(--muted); }
.wr-lk { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; gap: 2px; max-width: calc(100% - 10px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 999px; padding: 1px 6px; font-size: 10px; font-weight: 900; background: var(--ink); color: var(--paper); }
.wr-lk svg, .wr-lk .ico { width: 10px; height: 10px; }
.wr-look { display: grid; gap: 4px; }
.wr-look-acts { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.wr-look-acts .link { font-size: var(--fs-xs); }
.wr-moon { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; color: #6A62C9; box-shadow: 0 2px 0 var(--line); cursor: pointer; }
.wr-moon.on { background: #E6E1FB; outline: 2px solid #6A62C9; }
.wr-note { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.wr-note:empty { display: none; }
.wr-unlock { margin: 0 0 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 2px 0 var(--line); outline: 2px dashed #6A62C9; }
.wr-unlock .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wr-unlock p { margin: 6px 0 8px; font-size: var(--fs-sm); }
.wr-bar { height: 8px; border-radius: 4px; background: #F3E7D6; overflow: hidden; margin-top: 6px; }
.wr-bar i { display: block; height: 100%; background: #F2A33A; }

/* The hanger on Pip in the Nook (beside the room's + spots) and the Wardrobe entry in the Nook's tabs and Me. */
.hot-wear { cursor: pointer; }
.hot-wear .dot { fill: rgba(255, 255, 255, .95); stroke: #F2A33A; stroke-width: 2; }
.hot-wear path { stroke: #B2741E; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hot-wear:hover .dot, .hot-wear:focus .dot { fill: #FFF1C9; stroke-width: 3; }
.hot-wear:focus { outline: none; }
.seg .seg-wear { display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: transparent; font: inherit; cursor: pointer; }
.sl-wardrobe { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--tab-on); color: var(--ink); font: inherit; text-align: left; width: 100%; cursor: pointer; }
.sl-wardrobe svg.sunling-solo { flex: none; }
.sl-wardrobe b { display: block; } .sl-wardrobe small { display: block; color: var(--muted); font-weight: 700; font-size: var(--fs-sm); }
.sl-wardrobe .go { margin-left: auto; flex: none; padding: 7px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); box-shadow: 0 3px 0 var(--btn-edge); color: var(--btn-ink); font-weight: 800; font-size: var(--fs-sm); }

@keyframes wr-in { from { transform: translateX(-50%) scale(.8); opacity: 0; } }
@keyframes wr-hop { 40% { transform: translateX(-50%) translateY(-10px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .wr-ui, .wr-stage.fresh .wr-pip, .wr-pip.cheer { animation: none; } }
/* The Nook's tabs with Wardrobe: four fit on a small phone. */
.seg.four a, .seg.four .seg-wear { flex: 1; padding: 9px 2px; font-size: var(--fs-xs); font-weight: 800; color: var(--ink); border-radius: 999px; white-space: nowrap; }
.seg.four a .ico, .seg.four .seg-wear .ico { display: none; }
@media (min-width: 400px) { .seg.four a .ico, .seg.four .seg-wear .ico { display: inline-block; } }