/* ============================================
   VENUE DESIGN STUDIOS — Screens
   ============================================ */

/* --- Voting Confirmation Screen --- */
.voting-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  color: var(--text-primary);
  padding-top: 16px;
}

.voting-screen .overall-header::after {
  display: none;
}


/* Space between CTAs and discovery peek */
.voting-screen .discovery-peek {
  box-shadow: none;
  margin-top: 16px;
}

/* White fills all the way to bottom — no peach showing */
.voting-screen .voting-card {
  padding-bottom: 20px;
}

.voting-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -3px 5.3px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  min-height: 0;
}

.voting-card__image-wrap {
  position: relative;
  flex: 1 1 200px;
  min-height: 140px;
  max-height: 375px;
  width: 100%;
}

.voting-card__image {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
}

/* Studio Touchpoint Pill */
.touchpoint-pill {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(239, 145, 128, 0.15);
  z-index: 2;
  animation: pillSlideUp 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 600ms both,
             pillBounce 3s ease-in-out 2s infinite;
}

@keyframes pillSlideUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pillBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-4px) scale(1.03); }
  60% { transform: translateY(1px) scale(0.99); }
}

.touchpoint-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: touchpointPulse 2s ease-in-out infinite;
}

@keyframes touchpointPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 145, 128, 0.4); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(239, 145, 128, 0); }
}

.touchpoint-pill__text {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  color: var(--brown);
  white-space: nowrap;
}

/* --- Voting Results Screen --- */
.results-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 20px 16px;
  flex: 1;
  background: linear-gradient(5deg, #FFFFFF 64%, rgba(255,255,255,0) 77%);
}

.results-center__room-name {
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: var(--coral);
  text-align: center;
}

.results-center__stars {
  display: flex;
  gap: 4px;
  align-items: center;
}

.results-center__stars img {
  width: 42px;
  height: 42px;
}

.results-center__star--partial {
  opacity: 0.3;
}

.results-center__score {
  font-weight: 700;
  font-size: 24px;
  line-height: 20px;
  color: var(--brown);
  text-align: center;
}

.results-center__won-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--brown);
  text-align: center;
}

.results-award {
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFD84F 0%, #FFBB37 100%);
  padding: 4px;
}

.results-award__star-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
}

.results-award__star-icon {
  width: 19px;
  height: 19px;
}

.results-award__star-score {
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
}

.results-award__coin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  background: var(--white);
  border-radius: 27px;
}

.results-award__coin-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.results-award__coin-amount {
  font-weight: 700;
  font-size: 16px;
  color: var(--brown);
}

.voting-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 60px;
  background: var(--white);
  flex-shrink: 0;
}

.voting-card__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  color: var(--coral-dark);
  text-align: center;
  white-space: nowrap;
}

.voting-card__checkmark {
  width: 65px;
  height: 65px;
}

.voting-card__results {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.voting-card__results-label {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

.voting-card__cooldown {
  display: flex;
  align-items: center;
  gap: 7.5px;
  padding: 7.5px;
  background: var(--cream);
  border-radius: 48.641px;
  overflow: hidden;
}

.voting-card__cooldown-icon {
  width: 19.078px;
  height: 19.781px;
  flex-shrink: 0;
}

.voting-card__cooldown-text {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 15.613px;
  line-height: normal;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

/* Voting CTAs */
.voting-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  width: 100%;
  padding: 0 20px;
  flex-shrink: 0;
}

.voting-ctas__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 163px;
  height: 40px;
  padding: 0 12px;
  border-radius: 63px;
  border: none;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--white);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease-out;
}

.voting-ctas__btn:hover {
  transform: scale(1.02);
}

.voting-ctas__btn:active {
  transform: scale(0.97);
}

.voting-ctas__btn--share {
  background: linear-gradient(162deg, #77DBD2 11%, #69BFCC 79%);
  box-shadow: 0 1.5px 2px rgba(88, 173, 185, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(88, 173, 185, 0.8);
}

.voting-ctas__btn--next {
  background: linear-gradient(168deg, #FFC226 20%, #F59E4D 99%);
  box-shadow: 0 1.5px 2px rgba(242, 160, 59, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(225, 127, 54, 0.3);
}

.voting-ctas__btn-icon {
  width: 20px;
  height: 16px;
}

/* Discovery Card Peek */
.discovery-peek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 54px;
  padding: 8px 0;
  width: 100%;
  flex-shrink: 0;
  box-shadow: 0 0 24px rgba(239, 167, 154, 0.21);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease-out;
  /* Animation: fades in after 1s */
  opacity: 0;
  transform: translateY(8px);
  animation: peekEntrance 300ms ease-out 1s forwards;
}

@keyframes peekEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.discovery-peek:hover {
  transform: scale(1.02);
}

.discovery-peek:active {
  transform: scale(0.97);
}

.discovery-peek__avatars {
  display: flex;
  align-items: center;
  padding-right: 5px;
}

.discovery-peek__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: -5px;
  flex-shrink: 0;
  animation: avatarBounce 3s ease-in-out infinite;
}

.discovery-peek__avatar:nth-child(1) { animation-delay: 0s; }
.discovery-peek__avatar:nth-child(2) { animation-delay: 0.15s; }
.discovery-peek__avatar:nth-child(3) { animation-delay: 0.3s; }

@keyframes avatarBounce {
  0%, 12%, 100% { transform: scale(1); }
  6% { transform: scale(1.25); }
}

.discovery-peek__text {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  color: var(--coral-light);
  white-space: nowrap;
}

.discovery-peek__chevron {
  width: 5.008px;
  height: 8.016px;
  flex-shrink: 0;
}

/* --- Chapters/Home Screen --- */
.chapters-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  color: var(--text-primary);
  padding-top: 16px;
  gap: 0;
}

.chapters-screen .content-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.offers-row {
  width: 100%;
  overflow: hidden;
  padding-left: 20px;
}

.offers-row img {
  display: block;
  width: calc(100% + 20px);
  height: auto;
  margin-right: -20px;
}

.chapters-card-wrap {
  margin-top: -55px;
  position: relative;
}

.chapters-content-image {
  width: 100%;
  display: block;
}

/* Card bottom hidden by default, not needed before joining */
.chapters-card-bottom {
  display: none;
}

/* Play CTA — invisible click target over the original image button */
.chapters-play-btn {
  position: absolute;
  bottom: 5%;
  left: 10%;
  right: 10%;
  height: 7%;
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  display: none;
}

.chapters-card-wrap--joined .chapters-play-btn {
  display: block;
}

.chapters-play-btn:active {
  background: rgba(255, 194, 38, 0.15);
}

/* NEW badge on Studios tab */
.tab-bar__badge {
  position: absolute;
  top: -9px;
  right: 16px;
  background: var(--aqua);
  color: var(--white);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 10px;
  line-height: normal;
  padding: 3px 8px;
  border-radius: var(--radius-badge);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}

/* Studios tab notification dot — shows when hub has updates */
.tab-bar__notify {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: var(--aqua);
  border-radius: 50%;
  border: 2px solid var(--white);
  display: none;
  animation: notifyPop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.tab-bar__notify--active {
  display: block;
}

@keyframes notifyPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* --- Idle Hint --- */
.idle-hint {
  position: absolute;
  z-index: 15;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(101, 77, 78, 0.12);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 500;
  color: var(--brown);
  animation: hintBounce 2s ease-in-out infinite;
  pointer-events: none;
}

.idle-hint--active {
  display: flex;
}

.idle-hint__arrow {
  font-size: 14px;
  color: var(--coral);
}

@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- Voting Modal (Bottom Sheet) --- */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.modal-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

.modal-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 40%;
  z-index: 11;
  transform: translateY(100%);
  transition: transform 300ms ease-out;
}

.modal-sheet--active {
  transform: translateY(0);
}

.modal-sheet--dismissing {
  transform: translateY(100%);
  transition: transform 200ms ease-in;
}

.discovery-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -17px 24px rgba(0, 0, 0, 0.22);
  padding: 40px 40px 60px;
  overflow: hidden;
  min-height: 100%;
}

.discovery-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 1;
  padding-top: 8px;
}

.discovery-modal__illustrations {
  display: flex;
  width: 128px;
  height: 48px;
  overflow: visible;
  position: relative;
}

.discovery-modal__illustration {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  animation: avatarBounce 3s ease-in-out infinite;
}

.discovery-modal__illustration:nth-child(1) { left: 0; animation-delay: 0s; }
.discovery-modal__illustration:nth-child(2) { left: 40px; animation-delay: 0.15s; }
.discovery-modal__illustration:nth-child(3) { left: 80px; animation-delay: 0.3s; }

.discovery-modal__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 22px;
  line-height: normal;
  color: var(--brown);
  text-align: center;
}

.discovery-modal__description {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
  text-align: center;
}

.discovery-modal__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  overflow: hidden;
  margin-top: 0;
  flex-shrink: 0;
}

.discovery-modal__explore-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-button);
  border: none;
  background: linear-gradient(168deg, #FFC226 20%, #F59E4D 99%);
  box-shadow: 0 1.5px 2px rgba(242, 160, 59, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(225, 127, 54, 0.3);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease-out;
}

.discovery-modal__explore-btn:hover {
  transform: scale(1.02);
}

.discovery-modal__explore-btn:active {
  transform: scale(0.97);
}

.discovery-modal__maybe-later {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease-out;
}

.discovery-modal__maybe-later:hover {
  transform: scale(1.02);
}

.discovery-modal__maybe-later:active {
  transform: scale(0.97);
}

/* --- Browse Screen --- */
.browse-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-family: var(--font-family);
  color: var(--text-primary);
  padding-top: 16px;
  position: relative;
  gap: 0;
}

/* Browse overall header */
.browse-screen .overall-header {
  margin-bottom: 0;
}

.browse-screen .footer__gradient {
  bottom: 147px;
}

.browse-content {
  flex: 1 1 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0 20px;
}

/* --- Centered Modal (reusable component) --- */
.centered-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.centered-modal-overlay--active {
  opacity: 1;
  pointer-events: auto;
}

.centered-modal {
  background: var(--white);
  border-radius: 32px;
  padding: 32px 28px;
  width: calc(100% - 48px);
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(180, 140, 120, 0.25);
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}

.centered-modal-overlay--active .centered-modal {
  transform: scale(1);
  opacity: 1;
}

.centered-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 150ms ease, transform 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.centered-modal__close:hover {
  background: rgba(163, 137, 140, 0.1);
  transform: scale(1.1);
}

.centered-modal__close:active {
  transform: scale(0.9);
}

.centered-modal__avatars {
  display: flex;
  width: 128px;
  height: 48px;
  position: relative;
  overflow: visible;
  margin-bottom: 4px;
}

.centered-modal__avatar {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  animation: avatarBounce 3s ease-in-out infinite;
}

.centered-modal__avatar:nth-child(1) { left: 0; animation-delay: 0s; }
.centered-modal__avatar:nth-child(2) { left: 40px; animation-delay: 0.15s; }
.centered-modal__avatar:nth-child(3) { left: 80px; animation-delay: 0.3s; }

.centered-modal__title {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--brown);
  text-align: center;
  padding: 0 8px;
}

.centered-modal__desc {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  text-align: center;
}

/* --- Welcome Modal (after joining a studio) --- */
.welcome-modal {
  gap: 16px;
}

.welcome-modal__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--cream);
  box-shadow: 0 2px 8px rgba(180, 140, 120, 0.2);
  flex-shrink: 0;
}

.welcome-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.welcome-modal__members {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: -4px;
  padding: 4px 0;
}

.welcome-modal__member {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--white);
  object-fit: cover;
  margin-left: -8px;
  animation: avatarBounce 2s ease-in-out infinite;
}

.welcome-modal__member:first-child { margin-left: 0; }
.welcome-modal__member:nth-child(1) { animation-delay: 0s; }
.welcome-modal__member:nth-child(2) { animation-delay: 0.12s; }
.welcome-modal__member:nth-child(3) { animation-delay: 0.24s; }
.welcome-modal__member:nth-child(4) { animation-delay: 0.36s; }
.welcome-modal__member:nth-child(5) { animation-delay: 0.48s; }

.welcome-modal__btn {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--radius-button);
  background: linear-gradient(162deg, #77DBD2 11%, #69BFCC 79%);
  box-shadow: 0 1.5px 2px rgba(88, 173, 185, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(88, 173, 185, 0.8);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease-out;
}

.welcome-modal__btn:hover {
  transform: scale(1.02);
}

.welcome-modal__btn:active {
  transform: scale(0.97);
}

/* Leave Studio button variant */
.join-studio-btn--leave {
  background: transparent !important;
  box-shadow: none !important;
  border: 1.5px solid var(--muted) !important;
  color: var(--muted) !important;
  font-weight: 600;
}

/* Card Carousel (whole studio cards) */
/* Carousel wrapper with frosted glass side chevrons */
.carousel-wrapper {
  position: relative;
  padding: 0 4px;
}

.carousel-chevron {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.carousel-chevron--visible {
  opacity: 0.6;
  pointer-events: auto;
}

.carousel-chevron--visible:hover {
  opacity: 1;
}

/* Sticky glass pill with arrow inside — stays mid-screen while scrolling */
.carousel-chevron__pill {
  position: sticky;
  top: calc(50% - 16px);
  width: 24px;
  height: 32px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-chevron__pill::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
}

.carousel-chevron--left {
  left: 2px;
}

.carousel-chevron--left .carousel-chevron__pill::after {
  transform: rotate(135deg);
  margin-left: 2px;
}

.carousel-chevron--right {
  right: 2px;
}

.carousel-chevron--right .carousel-chevron__pill::after {
  transform: rotate(-45deg);
  margin-right: 2px;
}

.card-carousel {
  overflow: hidden;
  margin: 0 20px;
  flex-shrink: 0;
}

.card-carousel__track {
  display: flex;
  transition: transform 300ms ease;
}

.card-carousel__slide {
  min-width: 100%;
}

/* Studio Browse Card */
.studio-card {
  background: var(--white);
  border: 1px solid rgba(230, 225, 220, 0.5);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(239, 167, 154, 0.2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studio-card__preview {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.studio-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-card__chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 150ms ease;
  z-index: 2;
}

.studio-card__chevron::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
}

.studio-card__chevron:hover {
  background: rgba(255, 255, 255, 0.8);
}

.studio-card__chevron--left {
  left: 0;
  border-radius: 0 10px 10px 0;
}

.studio-card__chevron--left::after {
  transform: rotate(135deg);
  margin-left: 3px;
}

.studio-card__chevron--right {
  right: 0;
  border-radius: 10px 0 0 10px;
}

.studio-card__chevron--right::after {
  transform: rotate(-45deg);
  margin-right: 3px;
}

.studio-card__dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.studio-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm-track);
  transition: all 200ms ease;
}

.studio-card__dot--active {
  width: 8px;
  height: 8px;
  background: var(--aqua);
}

.studio-card__info {
  padding: 0 8px;
}

.studio-card__name {
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: var(--brown);
}

.studio-card__status {
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--coral);
}

.studio-card__bullets {
  padding: 0 8px 0 26px;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--muted);
  list-style: disc;
}

.studio-card__bullets li {
  margin-bottom: 2px;
}

.studio-card__section {
  width: 100%;
  padding: 0 4px;
}

.studio-card__section img {
  width: 100%;
  display: block;
}

/* Join Studio button */
.join-studio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  height: 40px;
  margin: 8px auto;
  padding: 0 16px;
  border-radius: var(--radius-button);
  border: none;
  background: linear-gradient(173deg, #FFC226 20%, #F59E4D 99%);
  box-shadow: 0 1.5px 2px rgba(242, 160, 59, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(225, 127, 54, 0.3);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 100ms ease-out;
}

.join-studio-btn:hover {
  transform: scale(1.02);
}

.join-studio-btn:active {
  transform: scale(0.97);
}

/* ============================================
   HUB SCREEN
   ============================================ */
.hub-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  color: var(--text-primary);
  padding-top: 16px;
}

.hub-content {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Identity Card --- */
.hub-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: 32px;
  padding: 12px 16px;
}

.hub-identity__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hub-identity__studio-img {
  width: 59px;
  height: 53px;
  border-radius: 36px;
  overflow: hidden;
  flex-shrink: 0;
}

.hub-identity__studio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-identity__text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  line-height: normal;
}

.hub-identity__label {
  font-weight: 600;
  font-size: 11px;
  color: var(--coral);
}

.hub-identity__name {
  font-weight: 700;
  font-size: 16px;
  color: var(--brown);
}

.hub-identity__members {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

.hub-identity__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  gap: 4px;
}

.hub-identity__settings {
  width: 36px;
  height: 36px;
  padding: 6px;
  cursor: pointer;
  transition: transform 100ms ease-out;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.hub-identity__settings:hover {
  transform: scale(1.1);
  background: rgba(239, 167, 154, 0.1);
}

.hub-identity__settings:active {
  transform: scale(0.95);
}

.hub-identity__settings img {
  width: 24px;
  height: 24px;
}

.hub-identity__avatars {
  display: flex;
  align-items: center;
  padding-right: 5px;
}

.hub-identity__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: -5px;
  object-fit: cover;
}

.hub-identity__avatar-plus {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #E8E2DC;
  border: 1.5px solid #FFFCF8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 9px;
  color: var(--muted);
  margin-right: -5px;
}

/* --- Weekly Postcard --- */
.hub-postcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 8px 14px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(180, 140, 120, 0.14);
  background: linear-gradient(0.4deg, rgba(255,255,255,0.4) 130%, #FFF 100%);
}

.hub-postcard__photo {
  height: 185px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.hub-postcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 300ms ease;
}

/* Ripple wave effect on postcard (milestone unlock state) */
.hub-postcard__photo--ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(239, 145, 128, 0.4);
  animation: postcardRipple 2.5s ease-out infinite;
  pointer-events: none;
}

.hub-postcard__photo--ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(239, 145, 128, 0.3);
  animation: postcardRipple 2.5s ease-out 0.8s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes postcardRipple {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
    border-width: 3px;
  }
  100% {
    width: 280px;
    height: 280px;
    opacity: 0;
    border-width: 1px;
  }
}

/* Postcard fill progress bar */
.hub-postcard__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.hub-postcard__progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--coral) 0%, var(--yellow) 100%);
  border-radius: 0 2px 2px 0;
  transition: width 800ms ease;
}

.hub-postcard__progress-label {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--brown);
}

.hub-postcard__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 6px;
}

.hub-postcard__headline {
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--brown);
}

.hub-postcard__desc {
  font-weight: 400;
  font-size: 11px;
  line-height: 17px;
  color: var(--text-body);
}

.hub-postcard__badges {
  display: flex;
  gap: 8px;
  align-items: center;
}

.hub-postcard__badge {
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 10px;
  color: var(--white);
  white-space: nowrap;
}

.hub-postcard__badge--week {
  background: var(--coral);
}

.hub-postcard__badge--challenge {
  background: var(--aqua);
}

/* --- Team Milestones --- */
.hub-milestones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border-radius: 12px;
  padding: 8px;
}

.hub-milestones__progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FCF9F6;
  border-radius: 12px;
  padding: 8px 12px;
}

.hub-milestones__label {
  font-weight: 600;
  font-size: 11px;
  color: var(--brown);
}

.hub-milestones__stepper {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

/* Milestone reward icons */
.hub-milestones__reward {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.35;
  filter: grayscale(0.8);
  transition: all 400ms ease;
}

.hub-milestones__reward img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Earned milestone — full color, subtle glow */
.hub-milestones__reward--earned {
  opacity: 1;
  filter: none;
  animation: milestoneGlow 3s ease-in-out infinite;
}

/* Current milestone — aqua ring pulsing */
.hub-milestones__reward--current {
  opacity: 1;
  filter: none;
  border: 2px solid var(--aqua);
  border-radius: 16px;
  width: 32px;
  height: 32px;
  animation: ringPulse 2.5s ease-in-out infinite;
}

@keyframes milestoneGlow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.1); filter: brightness(1.15); }
}

.hub-milestones__track {
  flex: 1;
  height: 3px;
  background: var(--warm-track);
  border-radius: 1.5px;
  transition: background 400ms ease;
}

.hub-milestones__track--filled {
  background: var(--aqua);
}

.hub-milestones__text {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

/* --- Team Metrics --- */
.hub-metrics {
  display: flex;
  gap: 4px;
  padding: 0 12px 4px;
}

.hub-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4px;
  padding-bottom: 2.4px;
  background: var(--white);
  border: 0.8px solid var(--cream);
  border-radius: 20px;
  height: 56px;
}

.hub-metric__icon {
  width: 20px;
  height: 20px;
}

.hub-metric__number {
  font-weight: 700;
  font-size: 14.4px;
  color: var(--brown);
  text-align: center;
  line-height: 15px;
}

.hub-metric__label {
  font-weight: 600;
  font-size: 9.6px;
  color: var(--muted);
  text-align: center;
  line-height: 9.6px;
}

/* --- Team Design Feed --- */
.hub-feed {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--white);
  border-radius: 12px;
}

.hub-feed__inner {
  background: #fcf9f6;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-feed__title {
  font-weight: 600;
  font-size: 11px;
  color: var(--brown);
}

.hub-feed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hub-feed__item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
}

.hub-feed__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 100ms ease-out;
}

.hub-feed__item img:hover {
  transform: scale(1.03);
}

.hub-feed__item img:active {
  transform: scale(0.97);
}

/* --- Expandable Rows --- */
.hub-expandable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 100ms ease-out;
}

.hub-expandable:hover {
  transform: scale(1.01);
}

.hub-expandable:active {
  transform: scale(0.98);
}

.hub-expandable__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--brown);
}

.hub-expandable__arrow {
  font-size: 18px;
  color: var(--muted);
}

/* --- Feed "Mine" Indicator (coral dot) --- */
.hub-feed__item {
  position: relative;
}

.hub-feed__mine-dot {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  background: var(--coral);
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(180, 140, 120, 0.3);
}

/* --- Milestone Active Ring Pulse --- */
.hub-milestones__step--active {
  background: transparent;
  border: 2px solid var(--aqua);
  animation: ringPulse 2.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); border-color: var(--aqua); }
  50% { transform: scale(1.15); border-color: rgba(132, 201, 201, 0.6); }
}


/* ============================================
   CELEBRATION SPLASH
   ============================================ */
.celebration-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at center, #FFF7F0 0%, #F7E5D9 60%, #EDD4C7 100%);
  font-family: var(--font-family);
}

.celebration__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 24px 24px;
  width: 100%;
  max-width: 390px;
}

/* Mosaic ring of room thumbnails — JS handles orbital movement */
.celebration__mosaic {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 8px;
}

.celebration__mosaic-slot {
  position: absolute;
  width: 48px;
  height: 48px;
  will-change: transform;
}

.celebration__mosaic-img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  opacity: 0;
  box-shadow: 0 2px 8px rgba(239, 145, 127, 0.2);
  animation: mosaicFadeIn 600ms ease-out both;
}

.celebration__mosaic-slot:nth-child(1) .celebration__mosaic-img { animation-delay: 200ms; }
.celebration__mosaic-slot:nth-child(2) .celebration__mosaic-img { animation-delay: 300ms; }
.celebration__mosaic-slot:nth-child(3) .celebration__mosaic-img { animation-delay: 400ms; }
.celebration__mosaic-slot:nth-child(4) .celebration__mosaic-img { animation-delay: 500ms; }
.celebration__mosaic-slot:nth-child(5) .celebration__mosaic-img { animation-delay: 600ms; }
.celebration__mosaic-slot:nth-child(6) .celebration__mosaic-img { animation-delay: 700ms; }

@keyframes mosaicFadeIn {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0.8; transform: scale(1); }
}

.celebration__check {
  position: absolute;
  top: 68px;
  left: 68px;
  width: 64px;
  height: 64px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #4F9DA9;
  box-shadow: 0 2px 12px rgba(79, 157, 169, 0.2);
  animation: checkPop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms both;
}

@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.celebration__title {
  font-weight: 700;
  font-size: 28px;
  color: var(--brown);
  text-align: center;
  animation: celebTextIn 500ms ease-out 900ms both;
}

.celebration__desc {
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
  animation: celebTextIn 500ms ease-out 1000ms both;
}

@keyframes celebTextIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.celebration__rewards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: celebTextIn 500ms ease-out 1100ms both;
}

.celebration__rewards-label {
  font-weight: 600;
  font-size: 13px;
  color: #C29933;
}

.celebration__reward-icons {
  display: flex;
  gap: 24px;
  align-items: center;
}

.celebration__reward-icons img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  animation: rewardBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.celebration__reward-icons img:nth-child(1) { animation-delay: 1200ms; }
.celebration__reward-icons img:nth-child(2) { animation-delay: 1350ms; }
.celebration__reward-icons img:nth-child(3) { animation-delay: 1500ms; }

@keyframes rewardBounce {
  0% { transform: scale(0) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.celebration__collect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: none;
  border-radius: var(--radius-button);
  background: linear-gradient(174deg, #FFC226 20%, #F59E4D 99%);
  box-shadow: 0 1.5px 2px rgba(242, 160, 59, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(225, 127, 54, 0.3);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 100ms ease-out;
  animation: celebTextIn 500ms ease-out 1600ms both;
}

.celebration__collect-btn:hover {
  transform: scale(1.02);
}

.celebration__collect-btn:active {
  transform: scale(0.97);
}

.celebration__sunday {
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  font-style: italic;
  animation: celebTextIn 500ms ease-out 1700ms both;
}

/* Short variant — gentler check color */
.celebration-screen--short .celebration__check {
  color: var(--coral);
  box-shadow: 0 2px 12px rgba(239, 145, 128, 0.2);
}


/* ============================================
   LEAVE STUDIO MODAL
   ============================================ */
.leave-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
}

.leave-overlay--active {
  display: flex;
}

.leave-dialog {
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(239, 167, 154, 0.3);
  padding: 28px 24px 24px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: leaveDialogIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes leaveDialogIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.leave-dialog__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;
  color: var(--brown);
  text-align: center;
}

.leave-dialog__desc {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  text-align: center;
}

.leave-dialog__stay {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: var(--radius-button);
  background: linear-gradient(169deg, #77DBD2 11%, #69BFCC 79%);
  box-shadow: 0 1.5px 2px rgba(88, 173, 185, 0.3), 0 1.5px 2px rgba(101, 77, 78, 0.1), inset 0 -2px 0 rgba(88, 173, 185, 0.8);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--white);
  cursor: pointer;
  transition: transform 100ms ease-out;
}

.leave-dialog__stay:hover { transform: scale(1.02); }
.leave-dialog__stay:active { transform: scale(0.97); }

.leave-dialog__leave {
  width: 100%;
  height: 40px;
  border: 1.5px solid var(--brown);
  border-radius: var(--radius-button);
  background: transparent;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: transform 100ms ease-out;
}

.leave-dialog__leave:hover { transform: scale(1.02); }
.leave-dialog__leave:active { transform: scale(0.97); }


/* ============================================
   GALLERY LIGHTBOX
   ============================================ */
.lightbox-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 80px 24px 100px;
  overflow: visible;
}

.lightbox-overlay--active {
  display: flex;
}

.lightbox__close {
  position: absolute;
  top: 55px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 22;
  transition: transform 100ms ease-out;
}

.lightbox__close:hover {
  transform: scale(1.1);
}

.lightbox__close:active {
  transform: scale(0.95);
}

.lightbox__close img {
  display: none;
}

.lightbox__close::before,
.lightbox__close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
}

.lightbox__close::before {
  transform: rotate(45deg);
}

.lightbox__close::after {
  transform: rotate(-45deg);
}

.lightbox__hint {
  font-family: var(--font-family);
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.lightbox__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.lightbox__image-frame {
  width: 300px;
  height: 280px;
  border-radius: 16px;
  border: 5px solid var(--cream);
  overflow: hidden;
  box-shadow: -2px 9px 8px rgba(0,0,0,0.14);
  margin-bottom: -70px;
  position: relative;
  z-index: 1;
}

/* Emoji burst container */
.emoji-burst {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
}

.emoji-burst__particle {
  position: absolute;
  width: 40px;
  height: 40px;
  animation: emojiRise var(--duration, 1.2s) ease-out var(--delay, 0s) forwards;
}

.emoji-burst__particle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Word sticker bursts render larger */
.emoji-burst__particle img[src*="socozy"],
.emoji-burst__particle img[src*="beautiful"] {
  width: 140%;
  height: 140%;
  margin: -20% 0 0 -20%;
}

@keyframes emojiRise {
  0% {
    transform: translateY(0) translateX(0) scale(0.3) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateY(-80px) translateX(var(--wx, 20px)) scale(1.1) rotate(var(--r1, 15deg));
    opacity: 1;
  }
  70% {
    transform: translateY(-180px) translateX(var(--wx2, -15px)) scale(0.9) rotate(var(--r2, -10deg));
    opacity: 0.7;
  }
  100% {
    transform: translateY(-280px) translateX(var(--wx3, 10px)) scale(0.4) rotate(var(--r3, 20deg));
    opacity: 0;
  }
}

.lightbox__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Designer info card — floating below image */
.lightbox__designer {
  width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(180, 140, 120, 0.14);
  margin-top: 32px;
  position: relative;
  z-index: 2;
  animation: designerFloat 3s ease-in-out infinite;
}

@keyframes designerFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.lightbox__designer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cream);
  box-shadow: 0 1px 4px rgba(180, 140, 120, 0.15);
}

.lightbox__designer-name {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--brown);
}

/* Vibe Wheel */
.lightbox__wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  position: relative;
  transform: rotate(6deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 5;
}

.lightbox__wheel--active {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(6deg) scale(1);
}

.wheel__bg {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FFFAF7 0%, #FFE8DD 40%, #F5D4CA 100%);
  box-shadow:
    -4px 8px 20px rgba(0,0,0,0.12),
    0 0 40px rgba(239,167,154,0.2),
    inset 0 2px 4px rgba(255,255,255,0.8),
    inset 0 -3px 6px rgba(239,145,128,0.15);
  border: 1.5px solid rgba(255,255,255,0.6);
}

/* Glass sheen highlight */
.wheel__bg::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 15%;
  width: 50%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.wheel__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239,145,128,0.25) 0%, rgba(239,145,128,0.05) 60%, transparent 100%);
  box-shadow: inset 0 1px 3px rgba(239,145,128,0.2);
  z-index: 2;
}

.wheel__divider {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(239,167,154,0.25);
  transform-origin: 50% 0;
}

.wheel__sticker {
  position: absolute;
  width: 58px;
  height: 58px;
  cursor: pointer;
  transition: transform 150ms ease;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(101, 77, 78, 0.15));
}

/* Position stickers centered in their 60° wedges */
.wheel__sticker[data-sticker="socozy"]    { top: 6px;   left: 76px;  width: 90px; height: 54px; }
.wheel__sticker[data-sticker="thumbsup"]  { top: 42px;  left: 155px; }
.wheel__sticker[data-sticker="hearteyes"] { top: 115px; left: 158px; }
.wheel__sticker[data-sticker="blossom"]   { top: 165px; left: 91px; }
.wheel__sticker[data-sticker="beautiful"] { top: 118px; left: -2px;  width: 90px; height: 54px; }
.wheel__sticker[data-sticker="heart"]     { top: 42px;  left: 18px; }

.wheel__sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Idle bounce — stickers pulse at random intervals when wheel is visible */
.lightbox__wheel--active .wheel__sticker {
  pointer-events: auto;
  animation: stickerIdle 2s ease-in-out infinite;
}

.lightbox__wheel--active .wheel__sticker:nth-of-type(1) { animation-delay: 0s; }
.lightbox__wheel--active .wheel__sticker:nth-of-type(2) { animation-delay: 0.4s; }
.lightbox__wheel--active .wheel__sticker:nth-of-type(3) { animation-delay: 0.9s; }
.lightbox__wheel--active .wheel__sticker:nth-of-type(4) { animation-delay: 0.2s; }
.lightbox__wheel--active .wheel__sticker:nth-of-type(5) { animation-delay: 0.7s; }
.lightbox__wheel--active .wheel__sticker:nth-of-type(6) { animation-delay: 1.1s; }

@keyframes stickerIdle {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.12); }
  60% { transform: scale(0.95); }
}

.wheel__sticker:hover {
  filter: brightness(1.1);
  animation-play-state: paused !important;
  transform: scale(1.2) !important;
}

.wheel__sticker--selected {
  animation: stickerPop 400ms ease forwards;
}

@keyframes stickerPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(0); opacity: 0; }
}