body.closet-active { overflow: hidden; }

.closet {
  position: fixed;
  z-index: 80;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  color: #285fa5;
  background: #eefbff;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.78,.22,1), visibility 0s linear 320ms;
}

.closet, .closet * { cursor: auto; }

.closet.is-visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.closet__room {
  position: absolute;
  inset: -1.5%;
  background: #eefbff url("品牌素材/bubble closet背景图.png") center / cover no-repeat;
  transform: scale(1.015);
}

.closet__room::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246,251,255,.06), rgba(229,242,255,.08)),
    radial-gradient(ellipse at 70% 42%, rgba(255,255,255,.16), transparent 42%);
  pointer-events: none;
}

.closet__room::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(80,136,203,.05) 3px 4px);
  pointer-events: none;
}

.closet__light {
  position: absolute;
  z-index: 1;
  width: 20vw;
  height: 40vh;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,255,255,.58), rgba(172,223,255,.12) 48%, transparent 72%);
  mix-blend-mode: screen;
  animation: closetReflection 10s ease-in-out infinite;
}

.closet__light--left { left: 3%; top: 9%; transform: rotate(-13deg); }
.closet__light--right { right: 3%; top: 15%; animation-delay: -5.4s; }

.closet__header {
  position: absolute;
  z-index: 8;
  top: max(14px, env(safe-area-inset-top));
  left: clamp(18px, 3vw, 46px);
  right: clamp(18px, 3vw, 46px);
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: start;
  pointer-events: none;
}

.closet__logo-wrap {
  justify-self: center;
  position: relative;
  width: clamp(300px, 34vw, 480px);
  height: clamp(122px, 19vh, 176px);
  overflow: visible;
  pointer-events: auto;
}

.closet__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 10px rgba(44,119,200,.18));
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), filter 320ms ease;
}

.closet__logo-shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 35% 56%, rgba(255,255,255,.82) 0 12%, rgba(203,237,255,.44) 30%, rgba(255,202,235,.18) 52%, transparent 76%);
  -webkit-mask: url("品牌素材/bubble closet标题.png") center / contain no-repeat;
  mask: url("品牌素材/bubble closet标题.png") center / contain no-repeat;
  mix-blend-mode: screen;
  clip-path: circle(0% at 35% 56%);
  filter: brightness(1.06) saturate(1.03) drop-shadow(0 0 0 rgba(160,220,255,0));
  animation: closetLogoGlow 3.5s ease-in-out infinite;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

.closet-control {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  color: #3478bd;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.95) 0 9%, transparent 30%),
    linear-gradient(145deg, rgba(247,253,255,.74), rgba(166,220,253,.43) 55%, rgba(101,168,228,.3));
  box-shadow: inset 2px 3px 5px rgba(255,255,255,.72), inset -3px -4px 9px rgba(45,118,195,.09), 0 7px 20px rgba(48,112,177,.13), 0 0 0 1px rgba(72,151,218,.08);
  backdrop-filter: blur(9px);
  pointer-events: auto;
  transition: transform 170ms ease, filter 170ms ease;
}

.closet-control--back { position:relative; width:72px; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.closet-control__back-icon { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(49,126,201,.2)); pointer-events: none; user-select: none; }
.closet-control--music { justify-self: end; position: relative; }
.closet-control__note { font: 700 18px/1 Georgia, serif; transition: opacity 140ms ease; }
.closet-control__bars { position: absolute; bottom: 8px; right: 7px; display: flex; align-items: end; gap: 1px; height: 9px; }
.closet-control__bars i { display: block; width: 2px; height: 3px; border-radius: 1px; background: #5baee6; opacity: .38; }
.closet-control--music.is-playing .closet-control__bars i { opacity: 1; animation: closetMusicBar 700ms steps(3,end) infinite; }
.closet-control--music.is-playing .closet-control__bars i:nth-child(2) { animation-delay: -210ms; }
.closet-control--music.is-playing .closet-control__bars i:nth-child(3) { animation-delay: -430ms; }

.closet__layout {
  position: absolute;
  z-index: 4;
  inset: clamp(132px, 18vh, 172px) clamp(36px, 5vw, 84px) clamp(68px, 8vh, 88px);
  display: block;
}

.look-selector {
  position: absolute;
  z-index: 5;
  left: clamp(145px, 12vw, 190px);
  top: 50%;
  width: clamp(132px, 12vw, 172px);
  max-height: min(62vh, 550px);
  padding: 11px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(250,254,255,.115), rgba(210,233,255,.045) 58%, rgba(255,228,244,.025));
  box-shadow: inset 0 0 0 1px rgba(68,141,208,.025), 0 8px 24px rgba(55,107,171,.035);
  backdrop-filter: blur(3px) saturate(1.02);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(calc(-50% + 12px)) scale(.96);
  transition: opacity 210ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 260ms;
}

.closet.is-look-list-open .look-selector {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
  transition-delay: 0s;
}

.closet-hanger {
  display: grid;
  place-items: center;
  width: 58px;
  height: 42px;
  margin: 0 auto 8px;
  filter: drop-shadow(0 0 5px rgba(85,177,235,.2));
}
.closet-hanger svg { display: block; width: 100%; height: 100%; overflow: visible; }
.closet-hanger path { fill: none; stroke: rgba(117,199,239,.58); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }

.change-look-trigger {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: auto;
  bottom: calc(4% - 32px);
  width: 202px;
  min-width: 0;
  min-height: 62px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(ellipse at 31% 18%, rgba(255,255,255,.94) 0 8%, rgba(255,255,255,.2) 28%, transparent 44%),
    linear-gradient(155deg, rgba(244,253,255,.8), rgba(117,200,248,.52) 51%, rgba(112,151,226,.34));
  box-shadow: inset 3px 5px 7px rgba(255,255,255,.66), inset -4px -7px 14px rgba(44,119,198,.12), 0 11px 26px rgba(43,111,178,.17);
  backdrop-filter: blur(11px) saturate(1.12);
  font-family: "Bubble Chinese Pixel", ui-monospace, monospace;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
  pointer-events: auto;
  transform: translate(-50%,-50%);
  animation: changeLookIdle 3.4s ease-in-out infinite;
  transition: opacity 180ms ease, visibility 0s linear 0s, filter 180ms ease, scale 200ms cubic-bezier(.2,.8,.2,1);
}
.change-look-trigger::before { content: none; }
.change-look-trigger.is-activating { scale:1; animation: changeLookPress 280ms cubic-bezier(.2,.85,.24,1) both; filter: brightness(1.1) drop-shadow(0 0 13px rgba(111,196,255,.52)); }
.closet .change-look-trigger:focus-visible { outline: 0; filter: brightness(1.06) drop-shadow(0 0 10px rgba(111,196,255,.38)); }
.closet.is-look-list-open .change-look-trigger { opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition-delay: 0s, 180ms; }

.look-selector__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  max-height: min(53vh, 470px);
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(83,155,211,.35) transparent;
}

.look-card {
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: 4px;
  border: 1px solid rgba(73,139,207,.19);
  border-radius: 16px;
  color: rgba(47,97,155,.7);
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
  font: 900 clamp(8px, .8vw, 10px)/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .07em;
  transition: transform 180ms cubic-bezier(.2,.75,.22,1), filter 180ms ease, background 180ms ease;
}

.look-card__portrait {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.62);
}

.look-card__portrait img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
}

.look-card.is-selected {
  color: #a43b87;
  border-color: rgba(241,112,184,.58);
  background: linear-gradient(145deg, rgba(255,250,254,.58), rgba(255,201,233,.38));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.62), 0 0 18px rgba(242,115,188,.2);
  transform: translateY(-2px);
}

.current-look { position: absolute; inset: 0; min-width: 0; height: 100%; pointer-events: none; }
.current-look__stage { position: absolute; inset: 0; pointer-events: auto; touch-action: pan-y; }
.current-look__figure {
  position: absolute;
  z-index: 2;
  left: 50%;
  right: auto;
  width: clamp(210px, 17vw, 270px);
  bottom: 4%;
  aspect-ratio: 883 / 1933;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
}

.current-look__figure img {
  --look-x: -.12%;
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  opacity: 1;
  filter: drop-shadow(0 18px 21px rgba(54,76,132,.16));
  animation: closetCharacterIdle 5.8s ease-in-out infinite both;
  transition: none;
  transform: translate3d(calc(-50% + var(--look-x)),var(--look-shift-y, 0px),0) scale(var(--look-scale, 1));
  transform-origin: 50% 100%;
  user-select: none;
}

.current-look__shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 1.5%;
  width: min(32vw, 440px);
  height: clamp(30px, 5.5vh, 56px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(55,91,146,.24), rgba(111,167,209,.08) 55%, transparent 74%);
  filter: blur(3px);
  transform: translateX(-50%);
}

.look-arrow {
  position: absolute;
  z-index: 6;
  top: 54%;
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: rgba(112,195,239,.62);
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.74) 0 8%, transparent 31%),
    linear-gradient(145deg, rgba(247,253,255,.5), rgba(175,224,252,.3) 55%, rgba(125,190,232,.2));
  box-shadow: inset 2px 3px 5px rgba(255,255,255,.56), inset -3px -4px 9px rgba(45,118,195,.07), 0 7px 18px rgba(48,112,177,.1);
  backdrop-filter: blur(9px);
  pointer-events: auto;
  transform: translateY(-50%);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), filter 180ms ease;
}
.look-arrow--previous { left: calc(50% - clamp(170px, 18vw, 250px)); }
.look-arrow--next { right: calc(50% - clamp(170px, 18vw, 250px)); }
.look-arrow__symbol { display:block; width:30px; height:26px; overflow:visible; filter:drop-shadow(0 2px 3px rgba(40,110,180,.2)); }
.look-arrow__symbol > path:first-child { fill:currentColor; stroke:rgba(119,199,239,.34); stroke-width:.8; stroke-linejoin:round; }
.look-arrow__highlight { fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.look-arrow--previous .look-arrow__symbol { transform:rotate(180deg); }
.look-arrow.is-pressed { animation: lookArrowPress 240ms cubic-bezier(.2,.85,.25,1); }

.closet-speech {
  position: absolute;
  z-index: 5;
  left: calc(50% + clamp(80px, 6.2vw, 96px));
  top: 24%;
  width: clamp(124px, 12vw, 158px);
  aspect-ratio: 166 / 68;
  pointer-events: auto;
  filter: drop-shadow(0 5px 12px rgba(201,91,167,.17));
  transition: filter 220ms ease;
}
.closet-speech svg { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; }
.closet-speech path { fill:url(#closetSpeechGradient); stroke:rgba(255,255,255,.8); stroke-width:2; stroke-linejoin:round; }
.closet-speech span { position:absolute; left:12px; right:5px; top:7px; height:51px; display:grid; place-items:center; color:#fff; font:900 clamp(12px,1.08vw,14px)/1 "Courier New",ui-monospace,monospace; letter-spacing:.02em; text-align:center; white-space:nowrap; text-shadow:0 1px 3px rgba(158,61,132,.28); }

.closet-loading {
  z-index: 30;
  color: #285fa5;
  background: #dff7ff url("品牌素材/网页背景.png") center / cover no-repeat;
  backdrop-filter: blur(8px);
  transition: opacity 180ms ease;
}
.closet.is-loading .closet-loading { opacity: 1; pointer-events: auto; }
.closet.is-loading .closet__header,
.closet.is-loading .closet__layout,
.closet.is-loading .closet-pager { opacity: 0; pointer-events: none; }
.closet.is-ready .closet__header,
.closet.is-ready .closet__layout,
.closet.is-ready .closet-pager { opacity: 1; transition: opacity 220ms ease; }

.closet-pager {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: block;
  transform: translateX(-50%);
}

.closet-pager span { color: rgba(45,94,153,.68); font: 900 9px/1 "Courier New", ui-monospace, monospace; letter-spacing: .1em; text-align: center; }

.closet button:focus-visible { outline: 2px solid #388bd1; outline-offset: 3px; }
.closet button:active { transform: translateY(2px) scale(.97); }
.closet .look-arrow:active { transform: translateY(-50%) scale(.9); }
.closet .change-look-trigger:active { transform: translate(-50%,-50%) scale(.96); }

@media (hover:hover) and (pointer:fine) {
  .closet, .closet * { cursor: none !important; }
  .closet__logo-wrap:hover .closet__logo,
  .closet__logo-wrap:hover .closet__logo-shine { transform: scale(1.045); }
  .closet__logo-wrap:hover .closet__logo { filter: brightness(1.035) drop-shadow(0 5px 12px rgba(70,145,211,.22)); }
  .closet-control:hover { transform: translateY(-2px) scale(1.045); filter: brightness(1.06) drop-shadow(0 0 8px rgba(94,181,237,.25)); }
  .look-card:hover { transform: translateY(-3px) scale(1.015); filter: brightness(1.035); }
  .look-arrow:hover { transform: translateY(-50%) scale(1.075); filter: brightness(1.07) drop-shadow(0 0 8px rgba(99,186,244,.3)); }
  .change-look-trigger:hover { scale:1.055; filter: brightness(1.07) drop-shadow(0 0 11px rgba(101,188,244,.34)); }
  .change-look-trigger.is-activating:hover { scale:1; }
  .closet-speech:hover { filter:brightness(1.07) drop-shadow(0 0 10px rgba(255,185,229,.64)) drop-shadow(0 5px 12px rgba(201,91,167,.2)); }
}

@keyframes closetCharacterIdle {
  0%,100% { transform: translate3d(calc(-50% + var(--look-x)),calc(var(--look-shift-y, 0px) + 1px),0) scale(var(--look-scale, 1)); }
  46% { transform: translate3d(calc(-50% + var(--look-x)),calc(var(--look-shift-y, 0px) - 3px),0) scale(var(--look-scale, 1)); }
  72% { transform: translate3d(calc(-50% + var(--look-x) + 1px),calc(var(--look-shift-y, 0px) - 1px),0) scale(var(--look-scale, 1)); }
}
@keyframes closetReflection { 0%,63%,100% { opacity:0; } 72% { opacity:.34; } 82% { opacity:.08; } }
@keyframes closetMusicBar { 0%,100% { height:3px; } 45% { height:8px; } }
@keyframes closetLogoGlow {
  0%,48%,100% { opacity:0; clip-path:circle(0% at 35% 56%); filter:brightness(1.04) saturate(1.02) drop-shadow(0 0 0 rgba(160,220,255,0)); }
  57% { opacity:.2; clip-path:circle(18% at 35% 56%); }
  72% { opacity:.5; clip-path:circle(82% at 46% 52%); filter:brightness(1.1) saturate(1.05) drop-shadow(0 0 7px rgba(175,224,255,.4)); }
  84% { opacity:.22; clip-path:circle(100% at 50% 50%); filter:brightness(1.07) saturate(1.03) drop-shadow(0 0 4px rgba(255,198,233,.22)); }
  93% { opacity:0; clip-path:circle(100% at 50% 50%); }
}
@keyframes changeLookIdle { 0%,100% { transform:translate(-50%,-50%); } 50% { transform:translate(-50%,calc(-50% - 4px)); } }
@keyframes changeLookPress { 0% { transform:translate(-50%,-50%) scale(1); } 34% { transform:translate(-50%,calc(-50% + 4px)) scale(.91,.88); } 68% { transform:translate(-50%,calc(-50% - 4px)) scale(1.07,1.05); } 100% { transform:translate(-50%,-50%) scale(1); } }
@keyframes lookArrowPress { 0%,100% { transform:translateY(-50%) scale(1); } 45% { transform:translateY(-50%) scale(.88); } 72% { transform:translateY(-50%) scale(1.08); } }

@media (max-width: 700px) {
  .closet { overflow-y: auto; overflow-x: hidden; min-height: 100svh; }
  .closet__room { position: fixed; inset: 0; background-position: 54% center; }
  .closet__header { position: relative; top: auto; left: auto; right: auto; grid-template-columns: 42px minmax(0,1fr) 42px; padding: max(10px, env(safe-area-inset-top)) 14px 0; }
  .closet-control { width: 40px; }
  .closet-control--back { width:64px; }
  .closet-control--music { width:40px; justify-self:end; margin-top:12px; }
  .closet__logo-wrap { width: min(68vw, 280px); height: 112px; margin-top: 0; }
  .closet__layout { position: relative; inset: auto; display: flex; flex-direction: column; gap: 8px; min-height: auto; padding: 0 14px calc(76px + env(safe-area-inset-bottom)); }
  .look-selector { position: relative; left: auto; top: auto; width: 100%; height: 78px; max-height: 78px; padding: 7px 9px; transform: translateY(8px) scale(.97); }
  .closet.is-look-list-open .look-selector { transform: none; }
  .closet-hanger { display:none; }
  .change-look-trigger { left:50%; top:auto; bottom:calc(4% - 40px); width:188px; min-height:56px; padding:0 12px; font-size:17px; }
  .current-look { position: relative; inset: auto; height: min(61svh, 515px); flex: 0 0 min(61svh, 515px); }
  .current-look__figure { left: 50%; right: auto; bottom: 4%; width: min(59vw, 221px, calc((61svh - 34px) * .4568)); }
  .current-look__shadow { left: 50%; bottom: 0; width: min(72vw, 320px); }
  .look-selector__grid { display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 1px 1px 5px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .look-selector__grid::-webkit-scrollbar { display:none; }
  .look-card { display: block; flex: 0 0 60px; padding: 3px; border-radius: 13px; scroll-snap-align: start; }
  .look-card__portrait { margin-bottom: 0; }
  .look-card__portrait { border-radius: 11px; }
  .look-arrow { top: 58%; width: 40px; }
  .look-arrow--previous { left: 2px; }
  .look-arrow--next { right: 2px; }
  .look-arrow__symbol { width:25px; height:22px; }
  .closet-speech { left:auto; right:clamp(12px,5vw,22px); top:7%; width:98px; }
  .closet-speech span { left:8px; right:3px; top:5px; height:31px; font-size:10px; }
  .closet-pager { position: fixed; bottom: max(12px, env(safe-area-inset-bottom)); padding: 9px 15px; border-radius: 999px; background: rgba(225,245,255,.38); backdrop-filter: blur(8px); }
  .closet__light { display:none; }
}

@media (max-width:700px) and (max-height:740px) {
  .closet__logo-wrap { height: 92px; }
  .look-selector { height: 68px; max-height:68px; padding-top:4px; padding-bottom:4px; }
  .change-look-trigger { top:auto; bottom:calc(4% - 34px); width:180px; min-height:52px; font-size:17px; }
  .current-look { height: 55svh; flex-basis: 55svh; }
  .current-look__figure { width: min(57vw, 204px, calc((55svh - 30px) * .4568)); }
  .look-card { flex-basis: 58px; }
  .closet-speech { top:4%; width:92px; }
}

@media (prefers-reduced-motion: reduce) {
  .closet, .look-card, .closet-control, .look-selector, .look-arrow, .change-look-trigger, .closet__logo, .closet__logo-shine, .closet-speech { transition-duration: 80ms; }
  .closet__light, .closet__logo-shine, .current-look__figure img, .closet-control__bars i, .change-look-trigger { animation: none !important; }
}