:root {
  --purple: #b984ff;
  --purple-bright: #d8b4ff;
  --lavender: #eadcff;
  --ink: #fffaf8;
  --scene-aspect: 1.772739; /* image/site/homepage.jpg is 6958x3925 (js/home.js reads the real one) */
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #0d0913;
  color: var(--ink);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

button,
a { font: inherit; }

.memory-room {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, rgba(113, 64, 170, .14), transparent 34%),
    #0e0a12;
}

.room-backdrop {
  position: absolute;
  inset: -36px;
  background:
    linear-gradient(rgba(27, 15, 34, .34), rgba(7, 5, 10, .55)),
    url("../image/previews/homepage.webp?v=2") center / cover no-repeat;
  filter: blur(28px) saturate(.85);
  transform: scale(1.1);
}

.room-stage {
  /* the room fills the screen at the picture's own shape, centred, so a screen
     of another shape loses the same little strip on both edges. The hotspots
     are percentages of this box, so they stay on their objects. The logo,
     hint and guide button are fixed to the screen instead (see below). */
  --stage-w: max(100vw, calc(100dvh * var(--scene-aspect)));
  --stage-h: max(100dvh, calc(100vw / var(--scene-aspect)));
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  margin-left: calc((100vw - var(--stage-w)) / 2);
  margin-top: calc((100dvh - var(--stage-h)) / 2);
  overflow: hidden;
  background: #160f18;
}

.room-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dream-haze {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 54%, transparent 33%, rgba(28, 11, 38, .09) 72%, rgba(13, 6, 20, .23)),
    linear-gradient(180deg, rgba(34, 14, 48, .06), transparent 35%, rgba(30, 9, 45, .07));
}

.dream-haze::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .30;
  background-image:
    radial-gradient(circle, rgba(226, 196, 255, .9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 .8px, transparent 1.4px);
  background-size: 163px 163px, 211px 211px;
  background-position: 20px 31px, 91px 12px;
  animation: shimmerRoom 5s ease-in-out infinite alternate;
}

@keyframes shimmerRoom {
  from { opacity: .16; }
  to { opacity: .38; }
}

/* Brand */
.home-brand {
  position: absolute;
  z-index: 30;
  left: 2.6%;
  top: 3.2%;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fffaf6;
  text-decoration: none;
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
}

.home-brand-top {
  font-family: Georgia, serif;
  font-size: clamp(27px, 3.2vw, 48px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

.home-brand-copy {
  display: grid;
  gap: 3px;
}

.home-brand-copy strong {
  font-size: clamp(9px, 1.1vw, 16px);
  letter-spacing: .08em;
}

.home-brand-copy small {
  color: rgba(248, 229, 255, .62);
  font-size: clamp(5px, .48vw, 7px);
  font-weight: 700;
  letter-spacing: .22em;
}

/* Generic scene hotspot */
.scene-hotspot {
  position: absolute;
  z-index: 18;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  outline: none;
}

.hotspot-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 0;
  background: transparent;
}

.scene-label,
.bear-label,
.butterfly-label {
  position: absolute;
  left: 50%;
  min-width: 132px;
  padding: 8px 11px;
  border: 1px solid rgba(216, 184, 255, .32);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 7px);
  background: rgba(24, 13, 31, .76);
  box-shadow:
    0 10px 28px rgba(7, 3, 12, .28),
    0 0 20px rgba(161, 91, 237, .12);
  backdrop-filter: blur(10px);
  text-align: center;
  pointer-events: none;
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}

.scene-label { top: calc(100% + 6px); }

.scene-label strong,
.bear-label strong,
.butterfly-label strong {
  display: block;
  font-size: 10px;
  white-space: nowrap;
}

.scene-label small,
.bear-label small,
.butterfly-label small {
  display: block;
  margin-top: 3px;
  color: rgba(224, 196, 255, .61);
  font-size: 6px;
  letter-spacing: .15em;
  white-space: nowrap;
}

.scene-hotspot:focus-visible .scene-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .scene-hotspot:hover .scene-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/*
  Scene coordinates.
  They are percentage based so they can be tuned without changing HTML.
  After image/previews/homepage.webp is available on GitHub, only these values
  need fine adjustment if the photographed objects sit differently.
*/
.felt-board-hotspot {
  left: 35.5%;
  top: 11.6%;
  width: 21.4%;
  height: 19.6%;
}

.trophy-hotspot {
  left: 7.2%;
  top: 5.4%;
  width: 19.2%;
  height: 25.8%;
}

.star-box-hotspot {
  left: 43.2%;
  top: 61.9%;
  width: 8.4%;
  height: 10.4%;
}

.star-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #efe0ff;
  font-size: 18px;
  opacity: .76;
  text-shadow:
    0 0 8px rgba(225, 187, 255, .95),
    0 0 18px rgba(155, 84, 240, .86);
  animation: starPulse 1.8s ease-in-out infinite;
}

@keyframes starPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.78); opacity: .48; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.star-label { min-width: 118px; }

/* Bears */
.bear-hotspot {
  position: absolute;
  z-index: 19;
  width: 5.7%;
  height: 14.0%;
  border-radius: 42% 42% 34% 34%;
  color: #fff;
  text-decoration: none;
  outline: none;
}

.bear-hotspot:focus-visible,
.scene-hotspot:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.bear-label {
  top: calc(100% + 5px);
}

.bear-hotspot:focus-visible .bear-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .bear-hotspot:hover .bear-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.bear-er-ge    { left: 34.1%; top: 47.3%; }
.bear-xiao-bao { left: 39.6%; top: 47.0%; }
.bear-da-ge    { left: 45.1%; top: 46.8%; }
.bear-si-ge    { left: 50.5%; top: 47.0%; }
.bear-san-ge   { left: 56.0%; top: 47.3%; }

/* Butterfly nav */
.butterfly-link {
  position: absolute;
  z-index: 20;
  width: clamp(48px, 5.1vw, 76px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: #fff;
  text-decoration: none;
  outline: none;
}

.butterfly-link:focus-visible {
  border-radius: 50%;
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.butterfly-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(var(--rest-rotate, 0deg));
  filter:
    drop-shadow(0 3px 5px rgba(29, 10, 39, .38))
    drop-shadow(0 0 8px rgba(191, 127, 255, .34));
  transition: transform var(--dur-m) var(--ease-out), filter var(--dur-m) var(--ease-out);
}

.butterfly-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: .94;
}

.butterfly-label {
  top: calc(100% + 1px);
}

.butterfly-link:focus-visible .butterfly-visual {
  transform:
    translateY(-5px)
    rotate(calc(var(--rest-rotate, 0deg) + 5deg))
    scale(1.12);
  filter:
    drop-shadow(0 5px 7px rgba(23, 8, 34, .35))
    drop-shadow(0 0 16px rgba(190, 124, 255, .74));
  animation: butterflyHover .72s ease-in-out infinite alternate;
}

.butterfly-link:focus-visible .butterfly-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (hover: hover) {
  .butterfly-link:hover .butterfly-visual {
    transform:
      translateY(-5px)
      rotate(calc(var(--rest-rotate, 0deg) + 5deg))
      scale(1.12);
    filter:
      drop-shadow(0 5px 7px rgba(23, 8, 34, .35))
      drop-shadow(0 0 16px rgba(190, 124, 255, .74));
    animation: butterflyHover .72s ease-in-out infinite alternate;
  }

  .butterfly-link:hover .butterfly-label {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes butterflyHover {
  from { margin-top: 0; }
  to { margin-top: -4px; }
}

/* 左三只 */
.butterfly-merch {
  left: 12.4%;
  top: 69.3%;
  --rest-rotate: -15deg;
}

.butterfly-travel {
  left: 21.1%;
  top: 65.1%;
  --rest-rotate: 8deg;
}

.butterfly-music {
  left: 28.7%;
  top: 70.4%;
  --rest-rotate: -6deg;
}

/* 右两只 */
.butterfly-materials {
  left: 72.8%;
  top: 66.0%;
  --rest-rotate: 9deg;
}

.butterfly-concerts {
  left: 85.6%;
  top: 69.8%;
  --rest-rotate: -11deg;
}

.room-hint {
  position: absolute;
  z-index: 13;
  left: 50%;
  bottom: 2.1%;
  transform: translateX(-50%);
  display: grid;
  gap: 4px;
  color: rgba(255, 247, 255, .72);
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,.58);
}

.room-hint span {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .28em;
}

.room-hint small {
  color: rgba(244, 228, 255, .58);
  font-size: 9px;
}

/* Dream modals */
.dream-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 22px;
}

/* TopUI.dialog drives data-state; closed modals are not rendered. */
.dream-modal:not([data-state="open"]):not([data-state="closing"]) {
  display: none;
}

/* The note card rests rotated, so its scale-in animates around that base transform. */
.dream-modal[data-state="open"] .dream-note-card {
  animation: noteCardIn var(--dur-m) var(--ease-out) both;
}

.dream-modal[data-state="closing"] .dream-note-card {
  animation: noteCardOut var(--dur-s) var(--ease-in) both;
}

@keyframes noteCardIn {
  from { opacity: 0; transform: rotate(-1.2deg) scale(.96) translateY(8px); }
  to { opacity: 1; transform: rotate(-1.2deg); }
}

@keyframes noteCardOut {
  from { opacity: 1; transform: rotate(-1.2deg); }
  to { opacity: 0; transform: rotate(-1.2deg) scale(.96); }
}

/* Next note: text crossfades instead of swapping instantly */
.dream-note-card h2,
.dream-note-card p,
.note-sign {
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}

.dream-note-card.is-swapping h2,
.dream-note-card.is-swapping p,
.dream-note-card.is-swapping .note-sign {
  opacity: 0;
  transform: translateY(4px);
}

.dream-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(115, 63, 171, .18), transparent 40%),
    rgba(4, 2, 8, .78);
  backdrop-filter: blur(9px);
  cursor: default;
}

.dream-note-card,
.awards-card {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(224, 195, 255, .28);
  background:
    radial-gradient(circle at 80% 4%, rgba(196, 139, 255, .22), transparent 31%),
    linear-gradient(145deg, rgba(50, 26, 70, .97), rgba(19, 12, 31, .985));
  box-shadow:
    0 30px 100px rgba(0,0,0,.57),
    0 0 45px rgba(151, 87, 230, .16);
  color: #fff;
}

.dream-note-card {
  width: min(480px, 92vw);
  min-height: 335px;
  padding: 58px 48px 44px;
  border-radius: 24px 24px 40px 22px;
  transform: rotate(-1.2deg);
  overflow: hidden;
}

.dream-note-card::before,
.dream-note-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dream-note-card::before {
  inset: 10px;
  border: 1px solid rgba(237, 218, 255, .07);
  border-radius: 18px 18px 34px 16px;
}

.dream-note-card::after {
  width: 120px;
  height: 120px;
  right: -33px;
  bottom: -41px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207, 161, 255, .18), transparent 70%);
}

.note-stars {
  position: absolute;
  right: 34px;
  top: 27px;
  color: rgba(222, 188, 255, .75);
  letter-spacing: .26em;
}

.note-kicker {
  color: #c691ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .24em;
}

.dream-note-card h2,
.awards-card h2 {
  margin: 13px 0 13px;
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
  font-weight: 500;
}

.dream-note-card h2 { font-size: 29px; }

.dream-note-card p {
  min-height: 82px;
  margin: 0;
  color: rgba(248, 239, 255, .78);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 15px;
  line-height: 2;
}

.note-sign {
  margin-top: 18px;
  color: rgba(224, 194, 255, .48);
  font-size: 9px;
  letter-spacing: .13em;
}

.note-again {
  margin-top: 25px;
  padding: 9px 15px;
  border: 1px solid rgba(210, 173, 255, .28);
  border-radius: 999px;
  background: rgba(136, 77, 206, .16);
  color: #efe1ff;
  font-size: 10px;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out);
}

.note-again:active,
.modal-close:active { transform: scale(.94); }

@media (hover: hover) {
  .note-again:hover { transform: scale(1.04); background: rgba(136, 77, 206, .28); }
  .modal-close:hover { transform: rotate(90deg); background: rgba(40, 22, 60, .7); }
}

.modal-close {
  position: absolute;
  right: 17px;
  top: 17px;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(225, 201, 255, .20);
  border-radius: 50%;
  background: rgba(15, 8, 24, .48);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out), background-color var(--dur-s) var(--ease-out);
}

.awards-card {
  width: min(760px, 94vw);
  max-height: 82dvh;
  padding: 34px;
  overflow-y: auto;
  border-radius: 24px;
}

.awards-head {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding-right: 48px;
}

.awards-head h2 {
  font-size: 33px;
}

.awards-head p {
  margin: 0;
  color: rgba(242, 229, 255, .54);
  font-size: 12px;
}

.awards-close {
  right: 21px;
  top: 21px;
}

.awards-list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.award-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  padding: 17px 18px;
  border: 1px solid rgba(214, 181, 255, .13);
  border-radius: 16px;
  background: rgba(10, 7, 19, .28);
}

.award-year {
  color: #bf8cff;
  font-family: Georgia, serif;
  font-size: 18px;
}

.award-item strong {
  display: block;
  font-size: 14px;
}

.award-item p {
  margin: 5px 0 0;
  color: rgba(241, 231, 250, .52);
  font-size: 10px;
  line-height: 1.7;
}

.awards-empty {
  padding: 42px 20px;
  border: 1px dashed rgba(214, 179, 255, .17);
  border-radius: 16px;
  color: rgba(240, 226, 255, .52);
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
  animation: top-fade-in var(--dur-m) var(--ease-out) both;
}

.awards-empty strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(240, 226, 255, .8);
  font-size: 13px;
  font-weight: 600;
}

.awards-list .top-state { padding: 34px 20px; }

/* Debug helper: open index.html?debug=1 */
body.debug-hotspots .scene-hotspot,
body.debug-hotspots .bear-hotspot,
body.debug-hotspots .butterfly-link {
  outline: 2px dashed rgba(255, 91, 225, .9);
  background: rgba(202, 81, 255, .09);
}

body.debug-hotspots .scene-label,
body.debug-hotspots .bear-label,
body.debug-hotspots .butterfly-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Mobile */
@media (max-width: 760px) {
  .memory-room {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .memory-room::-webkit-scrollbar {
    display: none;
  }

  /* the room covers the whole screen here: skip the blurred copy (one less
     download and a full-screen blur the phone never shows) */
  .room-backdrop {
    display: none;
  }

  .room-stage {
    position: relative;
    inset: auto;
    margin: 0;
    width: calc(100dvh * var(--scene-aspect));
    min-width: 100vw;
    height: 100dvh;
    overflow: hidden;
  }

  .home-brand {
    left: 2.4%;
    top: 2.6%;
  }

  .home-brand-top {
    font-size: 34px;
  }

  .butterfly-link {
    width: clamp(46px, 7.4dvh, 66px);
  }

  .butterfly-label,
  .bear-label,
  .scene-label {
    min-width: 90px;
    padding: 6px 7px;
  }

  .butterfly-label strong,
  .bear-label strong,
  .scene-label strong {
    font-size: 8px;
  }

  .room-hint {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 60;
    width: max-content;
    max-width: calc(100vw - 30px);
    padding: 7px 11px;
    border: 1px solid rgba(216, 184, 255, .20);
    border-radius: 999px;
    background: rgba(25, 13, 33, .55);
    backdrop-filter: blur(8px);
  }

  .room-hint span {
    display: none;
  }

  .room-hint small {
    font-size: 0;
  }

  .room-hint small::before {
    content: "← 左右滑动探索完整客厅 →";
    font-size: 8px;
  }

  .dream-note-card {
    padding: 52px 28px 35px;
  }

  .award-item {
    grid-template-columns: 70px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}


/* Room guide */
.room-guide-trigger {
  position: absolute;
  right: 2.4%;
  bottom: 2.4%;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(216, 184, 255, .26);
  border-radius: 999px;
  background: rgba(22, 12, 31, .64);
  box-shadow: 0 10px 28px rgba(4, 2, 8, .24), 0 0 18px rgba(172, 103, 247, .10);
  backdrop-filter: blur(9px);
  color: rgba(255, 248, 255, .88);
  cursor: pointer;
  transition:
    transform var(--dur-s) var(--ease-out),
    border-color var(--dur-s) var(--ease-out),
    background-color var(--dur-s) var(--ease-out);
}

.room-guide-trigger:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(216, 184, 255, .52);
  background: rgba(42, 22, 58, .78);
}

@media (hover: hover) {
  .room-guide-trigger:hover {
    transform: translateY(-2px);
    border-color: rgba(216, 184, 255, .52);
    background: rgba(42, 22, 58, .78);
  }
}

.room-guide-trigger:active { transform: scale(.97); }

.room-guide-trigger > span:last-child {
  display: grid;
  gap: 1px;
  text-align: left;
}

.room-guide-trigger strong {
  font-size: 9px;
  letter-spacing: .08em;
}

.room-guide-trigger small {
  color: rgba(214, 181, 247, .50);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: .18em;
}

.room-guide-star {
  color: #d7b0ff;
  font-size: 15px;
  text-shadow: 0 0 12px rgba(190, 125, 255, .85);
  animation: starPulse 2.2s ease-in-out infinite;
}

.room-guide-card {
  position: relative;
  z-index: 2;
  width: min(820px, 94vw);
  max-height: 86dvh;
  padding: 38px;
  overflow-y: auto;
  border: 1px solid rgba(224, 195, 255, .24);
  border-radius: 25px;
  background:
    radial-gradient(circle at 84% 5%, rgba(187, 124, 255, .18), transparent 31%),
    linear-gradient(145deg, rgba(43, 23, 61, .98), rgba(14, 9, 25, .99));
  box-shadow: 0 32px 110px rgba(0,0,0,.58), 0 0 48px rgba(151, 87, 230, .15);
}

.room-guide-card h2 {
  margin: 12px 46px 8px 0;
  font-family: "Noto Serif SC", "Songti SC", Georgia, serif;
  font-size: 29px;
  font-weight: 500;
}

.room-guide-lead {
  max-width: 650px;
  margin: 0;
  color: rgba(243, 233, 252, .58);
  font-size: 12px;
  line-height: 1.9;
}

.room-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 27px;
}

.room-guide-item {
  min-height: 126px;
  padding: 18px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 13px;
  border: 1px solid rgba(214, 181, 255, .12);
  border-radius: 17px;
  background: rgba(8, 6, 16, .26);
}

.room-guide-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(203, 165, 255, .18);
  border-radius: 50%;
  background: rgba(139, 79, 200, .10);
  color: #d9b6ff;
  font-size: 15px;
}

.room-guide-item strong {
  display: block;
  color: rgba(255, 249, 255, .93);
  font-size: 13px;
}

.room-guide-item small {
  display: block;
  margin-top: 2px;
  color: rgba(190, 153, 235, .45);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .18em;
}

.room-guide-item p {
  margin: 9px 0 0;
  color: rgba(242, 230, 251, .53);
  font-size: 10px;
  line-height: 1.75;
}

.room-guide-secret {
  border-style: dashed;
  background: linear-gradient(135deg, rgba(107, 57, 146, .12), rgba(8, 6, 16, .22));
}

.room-guide-foot {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid rgba(210, 174, 255, .10);
  color: rgba(214, 184, 246, .46);
  font-size: 8px;
  letter-spacing: .08em;
  text-align: center;
}

/* music credit at the top of the guide (left, clear of the close button) */
.room-guide-credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 44px 14px 0;
  padding: 5px 11px;
  border: 1px solid rgba(210, 174, 255, .18);
  border-radius: 999px;
  background: rgba(185, 132, 255, .08);
  color: rgba(226, 204, 250, .78);
  font-size: 9px;
  letter-spacing: .06em;
}

.room-guide-credit .icon {
  width: 12px;
  height: 12px;
  color: #c9a3ff;
}

@media (max-width: 760px) {
  .room-guide-trigger {
    position: fixed;
    right: 12px;
    bottom: 56px;
    padding: 8px 10px;
  }

  .room-guide-trigger strong {
    font-size: 8px;
  }

  .room-guide-card {
    width: min(92vw, 560px);
    padding: 30px 22px;
  }

  .room-guide-grid {
    grid-template-columns: 1fr;
  }

  .room-guide-item {
    min-height: 0;
  }
}


/* Easter egg: collect all five guide butterflies */
.room-easter-toast {
  position: fixed;
  z-index: 180;
  left: 50%;
  top: 8.5%;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 17px;
  border: 1px solid rgba(220, 191, 255, .30);
  border-radius: 999px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px) scale(.96);
  background: rgba(25, 13, 36, .80);
  box-shadow: 0 14px 42px rgba(4, 2, 9, .42), 0 0 30px rgba(176, 104, 245, .16);
  backdrop-filter: blur(12px);
  pointer-events: none;
  transition:
    opacity var(--dur-s) var(--ease-in),
    transform var(--dur-s) var(--ease-in),
    visibility 0s linear var(--dur-s);
}

.room-easter-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity var(--dur-l) var(--ease-out),
    transform var(--dur-l) var(--ease-spring),
    visibility 0s;
}

.room-easter-toast > span {
  color: #d8b5ff;
  font-size: 18px;
  text-shadow: 0 0 13px rgba(193, 130, 255, .86);
}

.room-easter-toast div {
  display: grid;
  gap: 2px;
}

.room-easter-toast strong {
  color: rgba(255, 250, 255, .94);
  font-size: 11px;
  font-weight: 600;
}

.room-easter-toast small {
  color: rgba(207, 174, 244, .48);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .15em;
}

/* Easter egg: late-night room */
.night-easter-egg {
  position: absolute;
  z-index: 28;
  left: 47.4%;
  /* under the star box's own label (box bottom 72.3% + 6px gap + label), so the
     two never overlap: the label shows on hover, and always on touch screens */
  top: calc(72.3% + 59px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(212, 179, 255, .16);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 7px);
  background: rgba(19, 10, 29, .42);
  color: rgba(243, 226, 255, .60);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 8px;
  letter-spacing: .05em;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
  pointer-events: none;
  transition: opacity var(--dur-xl) var(--ease-out), transform var(--dur-xl) var(--ease-out);
}

.night-easter-egg.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.night-easter-egg > span:first-child {
  color: #d8b1ff;
  text-shadow: 0 0 12px rgba(193, 121, 255, .95);
}

body.night-room .star-pulse {
  opacity: 1;
  text-shadow:
    0 0 10px rgba(236, 207, 255, 1),
    0 0 24px rgba(180, 103, 255, .98),
    0 0 42px rgba(120, 65, 210, .76);
}

body.night-room .dream-haze::before {
  opacity: .42;
}

@media (max-width: 760px) {
  .room-easter-toast {
    top: 72px;
  }

  .room-easter-toast strong {
    font-size: 9px;
  }

  .night-easter-egg {
    top: calc(72.3% + 51px);
    font-size: 7px;
  }
}


/* Persistent butterfly names */
.butterfly-link .butterfly-label {
  opacity: .94;
  transform: translate(-50%, 0);
  background: rgba(24, 13, 31, .68);
  border-color: rgba(216, 184, 255, .26);
  box-shadow:
    0 8px 20px rgba(7, 3, 12, .24),
    0 0 14px rgba(161, 91, 237, .10);
}

.butterfly-link:focus-visible .butterfly-label {
  opacity: 1;
  transform: translate(-50%, -2px);
  border-color: rgba(216, 184, 255, .48);
}

@media (hover: hover) {
  .butterfly-link:hover .butterfly-label {
    opacity: 1;
    transform: translate(-50%, -2px);
    border-color: rgba(216, 184, 255, .48);
  }
}


/* =========================================================
   ENHANCED NIGHT ROOM · 22:00 - 04:59
   Darker room, brighter star box, and gentle warm whispers.
   ========================================================= */

.room-photo {
  transition: filter 1.4s ease;
}

body.night-room .room-photo {
  filter:
    brightness(.48)
    saturate(.80)
    contrast(1.03);
}

body.night-room .room-backdrop {
  filter:
    blur(28px)
    brightness(.56)
    saturate(.70);
}

body.night-room .dream-haze {
  background:
    radial-gradient(
      circle at 47% 65%,
      rgba(115, 70, 166, .08),
      transparent 22%
    ),
    radial-gradient(
      circle at 50% 50%,
      transparent 26%,
      rgba(5, 3, 10, .17) 66%,
      rgba(3, 2, 7, .44) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 2, 7, .22),
      rgba(5, 3, 10, .32)
    );
}

body.night-room .dream-haze::before {
  opacity: .30;
}

body.night-room .star-box-hotspot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(86px, 10vw, 150px);
  height: clamp(70px, 8vw, 118px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(226, 190, 255, .28) 0%,
      rgba(174, 105, 245, .19) 30%,
      rgba(112, 65, 192, .08) 52%,
      transparent 73%
    );
  filter: blur(4px);
  pointer-events: none;
  animation: nightStarHalo 2.8s ease-in-out infinite alternate;
}

body.night-room .star-pulse {
  z-index: 2;
  color: #fff5ff;
  opacity: 1;
  text-shadow:
    0 0 7px rgba(255, 244, 255, 1),
    0 0 16px rgba(225, 184, 255, 1),
    0 0 34px rgba(183, 109, 255, .98),
    0 0 58px rgba(116, 62, 218, .86);
  animation-duration: 1.55s;
}

@keyframes nightStarHalo {
  from {
    opacity: .62;
    transform: translate(-50%, -50%) scale(.88);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* Five-star box */
.star-cluster {
  position: absolute;
  left: -14%;
  top: -12%;
  z-index: 2;
  width: 128%;
  height: 124%;
  pointer-events: none;
}

.star-big,
.star-dust {
  position: absolute;
  display: grid;
  place-items: center;
  color: #efe0ff;
  text-shadow:
    0 0 8px rgba(225, 187, 255, .95),
    0 0 18px rgba(155, 84, 240, .86);
}

.star-big {
  width: 30px;
  height: 30px;
  font-size: 18px;
  animation: starBoxTwinkle 1.9s ease-in-out infinite alternate;
}

/* Spread the five main stars across the whole box instead of clustering. */
.star-big-1 { left: 3%;  top: 8%; }
.star-big-2 { left: 36%; top: 0%;  animation-delay: -.35s; }
.star-big-3 { right: 2%; top: 18%; animation-delay: -.72s; }
.star-big-4 { left: 16%; bottom: 3%; animation-delay: -1.05s; }
.star-big-5 { right: 24%; bottom: 0%; animation-delay: -1.38s; }

.star-dust {
  font-size: 9px;
  opacity: .62;
  animation: starDustTwinkle 2.4s ease-in-out infinite alternate;
}

/* Small scattered lights: deliberately irregular for a starry-sky feel. */
.star-dust-1  { left: 2%;  top: 37%; }
.star-dust-2  { left: 9%;  top: 70%; animation-delay: -.4s; }
.star-dust-3  { left: 22%; top: 21%; animation-delay: -.8s; }
.star-dust-4  { left: 29%; top: 57%; animation-delay: -1.1s; }
.star-dust-5  { left: 42%; top: 34%; animation-delay: -1.5s; }
.star-dust-6  { left: 49%; top: 77%; animation-delay: -.6s; }
.star-dust-7  { left: 57%; top: 12%; animation-delay: -1.25s; }
.star-dust-8  { left: 65%; top: 47%; animation-delay: -.95s; }
.star-dust-9  { left: 73%; top: 71%; animation-delay: -1.7s; }
.star-dust-10 { left: 80%; top: 5%;  animation-delay: -.2s; }
.star-dust-11 { left: 88%; top: 49%; animation-delay: -1.45s; }
.star-dust-12 { right: 1%; top: 78%; animation-delay: -.78s; }
.star-dust-13 { left: 13%; top: 43%; animation-delay: -1.92s; }
.star-dust-14 { left: 33%; top: 84%; animation-delay: -.32s; }
.star-dust-15 { left: 46%; top: 6%;  animation-delay: -1.13s; }
.star-dust-16 { left: 61%; top: 88%; animation-delay: -.67s; }
.star-dust-17 { left: 70%; top: 29%; animation-delay: -1.58s; }
.star-dust-18 { left: 84%; top: 64%; animation-delay: -.88s; }
.star-dust-19 { left: 94%; top: 34%; animation-delay: -1.28s; }
.star-dust-20 { left: 53%; top: 53%; animation-delay: -.18s; }

@keyframes starBoxTwinkle {
  from {
    opacity: .58;
    transform: scale(.78);
    filter: brightness(.9);
  }
  to {
    opacity: 1;
    transform: scale(1.12);
    filter: brightness(1.18);
  }
}

@keyframes starDustTwinkle {
  from {
    opacity: .22;
    transform: scale(.7);
  }
  to {
    opacity: .92;
    transform: scale(1.16);
  }
}

body.night-room .star-big {
  color: #fff7ff;
  text-shadow:
    0 0 7px rgba(255, 248, 255, 1),
    0 0 16px rgba(230, 191, 255, 1),
    0 0 34px rgba(184, 109, 255, .98),
    0 0 56px rgba(119, 63, 218, .82);
}

body.night-room .star-dust {
  color: #f3ddff;
  text-shadow:
    0 0 8px rgba(240, 210, 255, .92),
    0 0 18px rgba(177, 105, 245, .78);
}

.night-whisper-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
}

.night-gift-star {
  --gift-x: 50vw;
  --gift-land-y: 68vh;

  position: absolute;
  left: var(--gift-x);
  top: -52px;
  z-index: 1;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff7ff;
  pointer-events: none;
  transform: translateX(-50%);
  animation:
    nightGiftDrop 2.9s cubic-bezier(.18, .76, .28, 1) forwards;
  -webkit-tap-highlight-color: transparent;
}

.night-gift-star-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 28px;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  text-shadow:
    0 0 7px rgba(255, 250, 255, 1),
    0 0 16px rgba(231, 197, 255, 1),
    0 0 32px rgba(186, 115, 255, .98),
    0 0 52px rgba(121, 66, 218, .86);
  animation:
    nightGiftTwinkle 1.25s ease-in-out 2.9s infinite alternate;
}

.night-gift-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 32px;
  transform: translate(-50%, -42%);
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      rgba(213, 169, 255, .22),
      rgba(152, 91, 228, .10) 45%,
      transparent 72%
    );
  filter: blur(3px);
  opacity: 0;
  animation: nightGiftGroundGlow 1.7s ease-in-out 2.9s infinite alternate;
  pointer-events: none;
}

.night-gift-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 11px);
  width: max-content;
  max-width: min(300px, 76vw);
  padding: 10px 13px;
  border: 1px solid rgba(226, 193, 255, .25);
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 7px) scale(.96);
  background:
    linear-gradient(
      145deg,
      rgba(39, 21, 53, .94),
      rgba(18, 11, 28, .96)
    );
  box-shadow:
    0 14px 38px rgba(3, 2, 7, .42),
    0 0 24px rgba(176, 105, 239, .13);
  backdrop-filter: blur(10px);
  color: rgba(255, 244, 255, .90);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .02em;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  transition:
    opacity var(--dur-s) var(--ease-in),
    transform var(--dur-s) var(--ease-in),
    visibility 0s linear var(--dur-s);
}

.night-gift-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -5px) rotate(45deg);
  border-right: 1px solid rgba(226, 193, 255, .22);
  border-bottom: 1px solid rgba(226, 193, 255, .22);
  background: rgba(22, 13, 33, .96);
}

/* an opened gift (and its bubble) stays above gifts that fall later */
.night-gift-star.revealed {
  z-index: 5;
}

.night-gift-star.revealed .night-gift-bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
  transition:
    opacity var(--dur-m) var(--ease-out),
    transform var(--dur-m) var(--ease-spring),
    visibility 0s;
}

.night-gift-bubble-text {
  display: block;
  padding: 2px 19px 2px 2px;
}

.night-gift-bubble-close {
  position: absolute;
  right: 5px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 244, 255, .62);
  font-family: system-ui, sans-serif;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background var(--dur-s) var(--ease-out),
    color var(--dur-s) var(--ease-out),
    transform var(--dur-s) var(--ease-out);
}

.night-gift-bubble-close:hover,
.night-gift-bubble-close:focus-visible {
  background: rgba(202, 153, 255, .16);
  color: #fff;
  transform: scale(1.06);
  outline: none;
}

@keyframes nightGiftDrop {
  0% {
    top: -52px;
    opacity: 0;
    transform: translateX(-50%) rotate(-18deg) scale(.72);
  }

  12% {
    opacity: 1;
  }

  72% {
    transform: translateX(-50%) rotate(7deg) scale(1.04);
  }

  88% {
    top: calc(var(--gift-land-y) - 7px);
    transform: translateX(-50%) rotate(-3deg) scale(.96);
  }

  100% {
    top: var(--gift-land-y);
    opacity: 1;
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
}

@keyframes nightGiftTwinkle {
  from {
    opacity: .58;
    transform: scale(.82);
    filter: brightness(.9);
  }

  to {
    opacity: 1;
    transform: scale(1.18);
    filter: brightness(1.22);
  }
}

@keyframes nightGiftGroundGlow {
  from { opacity: .18; transform: translate(-50%, -42%) scale(.82); }
  to { opacity: .72; transform: translate(-50%, -42%) scale(1.15); }
}

@media (max-width: 760px) {
  body.night-room .room-photo {
    filter:
      brightness(.45)
      saturate(.78)
      contrast(1.03);
  }

  .star-cluster {
    width: 78px;
    height: 58px;
  }

  .night-gift-star {
    width: 58px;
    height: 58px;
  }

  .night-gift-star-core {
    font-size: 30px;
  }

  .night-gift-bubble {
    max-width: 70vw;
    padding: 9px 11px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .night-gift-star {
    top: var(--gift-land-y);
    animation: none;
  }

  .night-gift-star-core,
  .night-gift-star::after {
    animation: none;
  }

  .night-gift-star-core {
    opacity: 1;
  }

  .night-gift-star::after {
    opacity: .45;
  }
}


/* =========================================================
   MORNING GIFT: a little sun falls 07:00-11:00 (js/home.js)
   ========================================================= */
.night-gift-star.is-sun {
  color: #ffd25e;
}

.night-gift-star.is-sun .night-gift-star-core {
  text-shadow: none;
  /* the morning room is bright: a stronger warm glow keeps the sun visible */
  filter:
    drop-shadow(0 0 4px rgba(255, 196, 60, 1))
    drop-shadow(0 0 12px rgba(255, 170, 40, .9))
    drop-shadow(0 0 26px rgba(255, 150, 30, .6));
}

.gift-sun {
  width: 42px;
  height: 42px;
  overflow: visible;
}

.gift-sun-rays {
  transform-origin: 32px 32px;
  animation: giftSunTurn 14s linear 2.9s infinite;
}

@keyframes giftSunTurn {
  to { transform: rotate(360deg); }
}

.night-gift-star.is-sun::after {
  background:
    radial-gradient(
      ellipse,
      rgba(255, 214, 120, .26),
      rgba(255, 170, 70, .10) 45%,
      transparent 72%
    );
}

.night-gift-star.is-sun .night-gift-bubble {
  border-color: rgba(255, 214, 140, .28);
}

/* =========================================================
   VOICE CLIP inside the gift bubble: play / pause, progress, volume
   ========================================================= */
.night-gift-bubble.has-audio {
  width: min(290px, 78vw);
  text-align: left;
}

.night-gift-bubble.has-audio .night-gift-bubble-text {
  margin-bottom: 9px;
}

.gift-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
}

.gift-player-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #9257ff, #ae60ff);
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(135, 76, 237, .38);
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out);
}

.gift-player-play svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) {
  .gift-player-play:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 22px rgba(135, 76, 237, .5);
  }
}

.gift-player-play:active {
  transform: scale(.92);
}

.gift-player.is-loading .gift-player-play {
  animation: giftPlayerWait 1s ease-in-out infinite alternate;
}

@keyframes giftPlayerWait {
  to { opacity: .55; }
}

.gift-player.is-error .gift-player-play {
  opacity: .4;
  cursor: default;
}

.gift-player-main {
  flex: 1;
  min-width: 0;
}

/* thin bar with a taller invisible hit area */
.gift-player-track {
  position: relative;
  height: 4px;
  margin: 6px 0;
  border-radius: 9px;
  background: rgba(216, 180, 255, .2);
  cursor: pointer;
  pointer-events: auto;
}

.gift-player-track::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

.gift-player-track:focus-visible {
  outline: 2px solid #d8b4ff;
  outline-offset: 4px;
}

.gift-player-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #b48cff, #e7d3ff);
  box-shadow: 0 0 8px rgba(190, 140, 255, .6);
}

.gift-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gift-player-time {
  color: rgba(240, 226, 255, .72);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.gift-player-volume {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(240, 226, 255, .72);
  pointer-events: auto;
}

.gift-player-volume-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.gift-player-volume input {
  width: 72px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.gift-player-volume input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 9px;
  background: linear-gradient(90deg, #d8b4ff var(--pct, 100%), rgba(216, 180, 255, .2) var(--pct, 100%));
}

.gift-player-volume input::-moz-range-track {
  height: 3px;
  border-radius: 9px;
  background: rgba(216, 180, 255, .2);
}

.gift-player-volume input::-moz-range-progress {
  height: 3px;
  border-radius: 9px;
  background: #d8b4ff;
}

.gift-player-volume input::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(185, 132, 255, .45);
  -webkit-appearance: none;
}

.gift-player-volume input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .gift-sun-rays,
  .gift-player.is-loading .gift-player-play {
    animation: none;
  }
}

/* =========================================================
   FEATURE FLAGS (js/site-flags.js -> html[data-locked], class .is-feature-locked)
   Locked looks come from the public beta; on dev nothing here matches.
   ========================================================= */

html:not([data-channel="beta"]) [data-beta-only] {
  display: none !important;
}

.beta-room-badge {
  position: absolute;
  z-index: 31;
  left: 2.7%;
  top: 10.7%;
  display: grid;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid rgba(216, 184, 255, .24);
  border-radius: 11px;
  background: rgba(20, 10, 29, .66);
  box-shadow: 0 10px 28px rgba(7, 3, 12, .22);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.beta-room-badge strong {
  color: rgba(238, 219, 255, .92);
  font-size: 8px;
  letter-spacing: .20em;
}

.beta-room-badge span {
  color: rgba(230, 208, 248, .56);
  font-size: 7px;
}

.is-feature-locked,
html[data-locked~="merch"] [data-feature="merch"],
html[data-locked~="music"] [data-feature="music"],
html[data-locked~="materials"] [data-feature="materials"],
html[data-locked~="concerts"] [data-feature="concerts"],
html[data-locked~="awards"] [data-feature="awards"],
html[data-locked~="room-guide"] [data-feature="room-guide"] {
  cursor: default !important;
  pointer-events: none !important;
  opacity: .42;
  filter: grayscale(.35);
  transition:
    opacity var(--dur-m) var(--ease-out),
    filter var(--dur-m) var(--ease-out);
}

.butterfly-link.is-feature-locked .butterfly-visual,
html[data-locked~="merch"] .butterfly-link[data-feature="merch"] .butterfly-visual,
html[data-locked~="music"] .butterfly-link[data-feature="music"] .butterfly-visual,
html[data-locked~="materials"] .butterfly-link[data-feature="materials"] .butterfly-visual,
html[data-locked~="concerts"] .butterfly-link[data-feature="concerts"] .butterfly-visual {
  filter:
    grayscale(.45)
    drop-shadow(0 2px 4px rgba(29, 10, 39, .28));
}

.butterfly-link.is-feature-locked .butterfly-label,
.scene-hotspot.is-feature-locked .scene-label,
html[data-locked~="merch"] .butterfly-link[data-feature="merch"] .butterfly-label,
html[data-locked~="music"] .butterfly-link[data-feature="music"] .butterfly-label,
html[data-locked~="materials"] .butterfly-link[data-feature="materials"] .butterfly-label,
html[data-locked~="concerts"] .butterfly-link[data-feature="concerts"] .butterfly-label,
html[data-locked~="awards"] .scene-hotspot[data-feature="awards"] .scene-label {
  opacity: .88;
  transform: translate(-50%, 0);
  border-style: dashed;
}

@media (max-width: 760px) {
  .beta-room-badge {
    left: 12px;
    top: 74px;
    padding: 7px 9px;
  }

  .beta-room-badge span {
    display: none;
  }
}


/* =========================================================
   ENTRANCE CHOREOGRAPHY
   html.room-pending (set in <head>, released by js/home.js after the photo
   decodes) pauses these animations on their first keyframe. Order: photo,
   then hotspots / bears / butterflies, then brand + hint last. Only the
   "from" keyframe is declared with fill backwards, so locked opacity etc.
   keep their normal values afterwards. Individual translate/scale props
   are used so positioning transforms are untouched.
   ========================================================= */
@keyframes roomPhotoIn {
  from { opacity: 0; scale: 1.02; }
}

@keyframes roomItemIn {
  from { opacity: 0; translate: 0 10px; scale: .94; }
}

@keyframes roomChromeIn {
  from { opacity: 0; translate: 0 6px; }
}

.room-photo {
  animation: roomPhotoIn var(--dur-xl) var(--ease-out) backwards;
}

.scene-hotspot,
.bear-hotspot,
.butterfly-link {
  animation: roomItemIn var(--dur-l) var(--ease-out) backwards;
  animation-delay: calc(var(--dur-l) + var(--n, 0) * var(--stagger));
}

.home-brand,
.room-hint,
.room-guide-trigger,
.beta-room-badge {
  animation: roomChromeIn var(--dur-l) var(--ease-out) backwards;
  animation-delay: calc(var(--dur-l) + var(--dur-m) + 8 * var(--stagger));
}

.felt-board-hotspot { --n: 0; }
.trophy-hotspot { --n: 1; }
.star-box-hotspot { --n: 2; }
.bear-er-ge, .butterfly-merch { --n: 3; }
.bear-xiao-bao, .butterfly-travel { --n: 4; }
.bear-da-ge, .butterfly-music { --n: 5; }
.bear-si-ge, .butterfly-materials { --n: 6; }
.bear-san-ge, .butterfly-concerts { --n: 7; }

html.room-pending .room-photo,
html.room-pending .scene-hotspot,
html.room-pending .bear-hotspot,
html.room-pending .butterfly-link,
html.room-pending .home-brand,
html.room-pending .room-hint,
html.room-pending .room-guide-trigger,
html.room-pending .beta-room-badge {
  animation-play-state: paused;
}

/* Touch: no hover, so labels stay visible at reduced emphasis (butterfly labels already are). */
@media (hover: none) {
  .scene-label {
    opacity: .78;
    transform: translate(-50%, 0);
  }

  .bear-label {
    min-width: 0;
    padding: 4px 8px;
    opacity: .72;
    transform: translate(-50%, 0);
  }

  .bear-label small { display: none; }
}


/* =========================================================
   LOGGED-IN NIGHT STARS + ACCOUNT PILL (js/home.js, js/auth.js)
   ========================================================= */

/* a star already picked tonight: a little calmer than a new one */
.night-gift-star.is-picked .night-gift-star-core {
  font-size: 22px;
  opacity: .82;
}

/* waiting for the server to pick the whisper */
.night-gift-star.is-loading .night-gift-star-core {
  animation: nightGiftWait .7s ease-in-out infinite alternate;
  cursor: progress;
}

@keyframes nightGiftWait {
  from { transform: scale(.88) rotate(-8deg); }
  to   { transform: scale(1.14) rotate(8deg); }
}

.night-gift-author,
.night-gift-note {
  display: block;
  padding: 0 19px 0 2px;
  color: rgba(226, 200, 255, .62);
  font-size: .86em;
  letter-spacing: .06em;
}

.night-gift-author { text-align: right; }

.night-gift-note {
  margin-top: 4px;
  color: rgba(214, 181, 247, .48);
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  font-size: .78em;
}

.night-gift-login {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(216, 184, 255, .30);
  border-radius: 999px;
  color: #e6cbff;
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  font-size: .82em;
  text-decoration: none;
  transition:
    background-color var(--dur-s) var(--ease-out),
    transform var(--dur-s) var(--ease-out);
}

.night-gift-login:hover,
.night-gift-login:focus-visible {
  background: rgba(202, 153, 255, .16);
  transform: translateY(-1px);
}

.night-gift-login:active { transform: scale(.96); }


@media (prefers-reduced-motion: reduce) {
  .night-gift-star.is-loading .night-gift-star-core { animation: none; opacity: .6; }
}

/* title + like row in a logged-in star bubble */
.night-gift-title {
  display: block;
  padding: 2px 19px 0 2px;
  color: #f3e3ff;
  font-size: 1.08em;
  letter-spacing: .06em;
}

.night-gift-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-right: 2px;
}

.night-gift-foot .night-gift-note {
  margin-top: 0;
  padding: 0 0 0 2px;
}

.night-gift-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px 3px 7px;
  border: 1px solid rgba(242, 184, 224, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(242, 184, 224, .78);
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  font-size: .82em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  pointer-events: auto;
  transition:
    color var(--dur-s) var(--ease-out),
    background-color var(--dur-s) var(--ease-out),
    border-color var(--dur-s) var(--ease-out),
    transform var(--dur-s) var(--ease-out);
}

.night-gift-like svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill var(--dur-s) var(--ease-out);
}

@media (hover: hover) {
  .night-gift-like:hover {
    border-color: rgba(242, 184, 224, .5);
    color: #ffd2ee;
  }
}

.night-gift-like:active { transform: scale(.92); }

.night-gift-like.is-liked {
  border-color: rgba(242, 160, 214, .55);
  background: rgba(242, 160, 214, .16);
  color: #ffc4e8;
}

.night-gift-like.is-liked svg { fill: currentColor; }

.night-gift-like.is-popping svg {
  animation: nightGiftLikePop 460ms var(--ease-spring);
}

@keyframes nightGiftLikePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .night-gift-like.is-popping svg { animation: none; }
}

/* bubbles of stars near the screen edge slide back on screen (js/home.js) */
.night-gift-bubble {
  transform: translate(calc(-50% + var(--bubble-shift, 0px)), 7px) scale(.96);
}

.night-gift-star.revealed .night-gift-bubble {
  transform: translate(calc(-50% + var(--bubble-shift, 0px)), 0) scale(1);
}

.night-gift-bubble::after {
  left: calc(50% - var(--bubble-shift, 0px));
}

/* long logged-in whispers: keep line breaks, wrap long words, scroll inside */
.night-gift-title,
.night-gift-bubble-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.night-gift-bubble-text {
  max-height: max(64px, calc(var(--bubble-max, 70vh) - 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* not enough room above the star: open the bubble below it */
.night-gift-star.bubble-below .night-gift-bubble {
  top: calc(100% + 11px);
  bottom: auto;
  transform: translate(calc(-50% + var(--bubble-shift, 0px)), -7px) scale(.96);
}

.night-gift-star.bubble-below.revealed .night-gift-bubble {
  transform: translate(calc(-50% + var(--bubble-shift, 0px)), 0) scale(1);
}

.night-gift-star.bubble-below .night-gift-bubble::after {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, 5px) rotate(225deg);
}

/* a like that failed says why for a moment */
.night-gift-foot.has-error .night-gift-note { display: none; }

.night-gift-like-error {
  color: #ff9db8;
  font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
  font-size: .78em;
  animation: top-fade-in var(--dur-s) var(--ease-out) both;
}

.night-gift-like-error:empty { display: none; }

/* like under a star box note (js/home.js applyNote) */
.note-like {
  margin-top: 14px;
  font-size: 12px;
}

.note-like .night-gift-like { margin-left: 0; }

.dream-note-card.is-swapping .note-like {
  opacity: 0;
  transform: translateY(4px);
}

.note-like {
  transition: opacity var(--dur-s) var(--ease-out), transform var(--dur-s) var(--ease-out);
}

/* guests see the count; the heart leads to login */
.night-gift-like.is-guest { opacity: .82; }

/* fan notes may contain line breaks and long words */
#noteText {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* long fan notes: the card stops at the screen edge and only the text scrolls,
   so the close button, the heart and 「再抽一张」 always stay in reach */
.dream-note-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.dream-note-card > * { flex: none; }

#noteText {
  flex: 0 1 auto;
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 145, 255, .4) transparent;
}

/* fade at the bottom edge while more text is below (js/home.js markNoteOverflow) */
#noteText.is-long {
  padding-bottom: 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}

#noteText.is-long.is-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* short screens (a phone on its side): a wider, tighter card leaves room for the text */
@media (max-height: 560px) {
  #noteModal { padding: 12px; }

  .dream-note-card {
    width: min(640px, 92vw);
    min-height: 0;
    padding: 30px 34px 20px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .dream-note-card .note-stars { top: 16px; }
  .dream-note-card .modal-close { top: 12px; right: 12px; }
  .dream-note-card h2 { margin: 6px 0 8px; font-size: 22px; }
  .dream-note-card p { min-height: 0; line-height: 1.85; }
  .dream-note-card .note-sign { margin-top: 8px; }
  .dream-note-card .note-like { margin-top: 6px; }
  .dream-note-card .note-again { margin-top: 10px; }
}

/* star box note still on its way from the server */
.dream-note-card[aria-busy="true"] .note-kicker {
  animation: noteBusy 1s ease-in-out infinite alternate;
}

@keyframes noteBusy {
  from { opacity: .35; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dream-note-card[aria-busy="true"] .note-kicker { animation: none; opacity: .5; }
}

/* Butterfly names: the butterflies sit at fixed spots on the room picture, so on
   narrower screens they come closer together - the name tags shrink with the room,
   and 「TOP的旅途」 (higher than its neighbours) shows its tag above the butterfly. */
@media (min-width: 761px) {
  .butterfly-link .butterfly-label {
    min-width: clamp(76px, 8.4vw, 132px);
    padding: clamp(5px, .55vw, 8px) clamp(6px, .75vw, 11px);
  }

  .butterfly-link .butterfly-label strong {
    font-size: clamp(8px, .72vw, 10px);
  }

  .butterfly-link .butterfly-label small {
    font-size: clamp(5px, .42vw, 6px);
  }
}

.butterfly-travel .butterfly-label {
  top: auto;
  bottom: calc(100% + 1px);
}

/* Small account icon beside the music butterfly (the butterfly floats at the
   top right on the home page: js/bgm.js, css/bgm.css .top-bgm.is-floating). */
.room-account-mini {
  position: fixed;
  top: calc(24px + env(safe-area-inset-top, 0px));
  right: calc(24px + 44px + 10px + env(safe-area-inset-right, 0px));
  z-index: 60;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(171, 131, 235, .22);
  border-radius: 14px;
  background: rgba(20, 10, 34, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(234, 220, 255, .86);
  font-size: 19px;
  text-decoration: none;
  view-transition-name: room-account;
  animation: topBgmIn var(--dur-l) var(--ease-out) both .3s;
  transition:
    transform var(--dur-s) var(--ease-out),
    border-color var(--dur-s) var(--ease-out),
    color var(--dur-s) var(--ease-out);
}

.room-account-mini.is-signed-in {
  border-color: rgba(216, 180, 255, .45);
  color: #d8b4ff;
  box-shadow: 0 0 14px rgba(197, 138, 255, .28);
}

.room-account-mini:active { transform: scale(.94); }

.room-account-mini:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (hover: hover) {
  .room-account-mini:hover {
    transform: translateY(-1px);
    border-color: rgba(216, 180, 255, .55);
  }
}

@media (max-width: 760px) {
  .room-account-mini {
    top: calc(18px + env(safe-area-inset-top, 0px));
    right: calc(16px + 44px + 8px + env(safe-area-inset-right, 0px));
  }
}

/* Tall screens wider than a phone (tablets held upright): the whole room would
   only be a thin band, so it fills the height and scrolls sideways like on phones. */
@media (min-width: 761px) and (max-aspect-ratio: 13/10) {
  .memory-room {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .memory-room::-webkit-scrollbar { display: none; }

  .room-backdrop { display: none; }

  .room-stage {
    position: relative;
    inset: auto;
    margin: 0;
    width: calc(100dvh * var(--scene-aspect));
    min-width: 100vw;
    height: 100dvh;
  }

  .room-hint small::after {
    content: " · 左右滑动探索完整客厅";
  }
}

/* Screen furniture: on the screen's edges, never cropped with the room or
   scrolled away with it (the room starts in its middle on phones). */
.home-brand,
.beta-room-badge,
.room-hint,
.room-guide-trigger {
  position: fixed;
}